@xihan-ui/styles 2.0.0 → 3.0.0

package/css/table.css

@@ -6,22 +6,10 @@
 /* 定义 table 样式。 */
 
 @import '../family/action-control.css';
+@import '../family/check-mark.css';
 @import '../family/collection-item.css';
-
-@layer xihan.motion {
-  /* 加载态自己冒出来，用户没按任何键：一段极轻的呼吸就够，别抢走正在读表的注意力 */
-  /* 一次呼吸自带来回：起止两端与中点各写一帧，声明的周期就是一次完整的明暗往返 */
-  @keyframes xh-table-loading-pulse {
-    0%,
-    100% {
-      opacity: var(--xh-state-disabled-opacity);
-    }
-
-    50% {
-      opacity: 1;
-    }
-  }
-}
+@import '../family/loading-ring.css';
+@import '../family/motion.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -35,7 +23,7 @@
        既不让页面上的层号插进来，也不让它们漏出去压住别人 */
     isolation: isolate;
 
-    /* 作者放进单元格、列头与把手里的图标按档取尺，缺省 md（§6.5）；表体行上的由家族随 data-xh-collection-size 下发。
+    /* 作者放进单元格、列头与把手里的图标按档取尺，缺省 md；表体行上的由家族随 data-xh-collection-size 下发。
        表格自绘的状态字形（排序方向、勾、半选杠、展开方向）不读这支：它们是指示符，与所在的方盒同走
        --xh-control-indicator-* 一族——五颗把手在自己身上把 --xh-icon-size 改接到方盒的尺，排序钮那支叫 --xh-table-sort-size */
     --xh-icon-size: var(--xh-table-icon-size, var(--xh-glyph-size-md));
@@ -174,23 +162,35 @@
     display: none;
   }
 
+  /* 已有行时重新取数（排序、翻页、筛选）：不换成占位，表体与表尾保留上一帧，按 micro 淡到禁用透明度，
+     数据到了再淡回。表头留着——它说的是列，不随这一轮取数变 */
+  [data-scope='table'][data-part='body'],
+  [data-scope='table'][data-part='footer'] {
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='table'][data-part='root'][data-loading]:not([data-empty]) > :is([data-scope='table'][data-part='body'], [data-scope='table'][data-part='footer']) {
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
   /* 表体是行级 roving 的兜底 Tab 位：落焦不画环，环归行 */
   [data-scope='table'][data-part='body']:focus-visible {
     outline: none;
   }
 
-  /* 表头是淡底承载面：里头的触发器按淡底阶梯走（hover 200 → pressed 300），阶梯由 host 槽向内下发（§7.2）；
+  /* 表头是淡底承载面：里头的触发器按淡底阶梯走（hover 200 → pressed 300），阶梯由 host 槽向内下发；
      排序钮是 ghost 图标钮，悬停 / 按下面就从这两支 host 槽取 */
   [data-scope='table'][data-part='header'] {
     --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
     --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
 
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-table-border, var(--xh-border-default));
-    background: var(--xh-table-header-bg, var(--xh-bg-subtle));
+    /* 表头与表体之间是内部分隔，与行间横线同一支：外边才取 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));
   }
 
   /* 吸顶：滚动容器是 root，表头钉在它的上沿。背景必须是实色——
-     透明的表头会让底下滚过的行透出来 */
+     透明的表头会让底下滚过的行透出来，所以表头底取淡底的不透明档 */
   [data-scope='table'][data-part='header'][data-fixed] {
     position: sticky;
     z-index: var(--xh-table-sticky-header-layer, var(--xh-layer-sticky));
@@ -198,22 +198,24 @@
   }
 
   [data-scope='table'][data-part='footer'] {
-    border-block-start: var(--xh-stroke-thin) solid var(--xh-table-border, var(--xh-border-default));
+    /* 表尾与表体之间同样是内部分隔 */
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-table-footer-border, var(--xh-border-subtle));
     background: var(--xh-table-footer-bg, var(--xh-bg-subtle));
     font-weight: var(--xh-table-footer-font-weight, var(--xh-font-weight-medium));
   }
 
-  /* 表体行走 Collection Item 的 page 语境（页内持久集合，§7.3）：悬停 / 高亮 / 按下面（白底承载 hover 100 →
+  /* 表体行走 Collection Item 的 page 语境（页内持久集合）：悬停 / 高亮 / 按下面（白底承载 hover 100 →
      pressed 200）与选中面（品牌淡底 + 淡底前景，selected+hover 20% / +pressed 28%）由家族按 aria-selected /
      aria-disabled 给出，标记由行首的勾选把手承担。这里只把公开槽映射到桥接槽，并逐项盖掉家族的行盒几何：
      行是 flex 容器（列宽由单元格的内联尺寸决定，不进家族网格）、不内衬、不圆角、字号与光标随表格本身
      （行不是按钮，selectable 与否都不改光标）。表头 / 脚注行不投影家族，只共用这一副 flex 盒 */
   [data-scope='table'][data-part='row'] {
-    /* rest 底要实色：横向吸附的单元格靠 inherit 取它，透明会让滚过的内容透出来 */
+    /* 各态的底都要实色：横向吸附的单元格靠 inherit 取它，透明会让滚过的内容透出来。
+       悬停、按下取淡底的不透明档 */
     --xh-collection-bg-rest: var(--xh-table-row-bg, var(--xh-bg-surface));
-    --xh-collection-bg-hover: var(--xh-table-row-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-keyboard-highlight: var(--xh-table-row-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-pressed: var(--xh-table-row-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-hover: var(--xh-table-row-bg-hover, var(--xh-bg-subtle-opaque));
+    --xh-collection-bg-keyboard-highlight: var(--xh-table-row-bg-hover, var(--xh-bg-subtle-opaque));
+    --xh-collection-bg-pressed: var(--xh-table-row-bg-pressed, var(--xh-bg-subtle-hover-opaque));
     --xh-collection-bg-selected: var(--xh-table-row-bg-selected, var(--xh-bg-brand-subtle));
     --xh-collection-fg-rest: currentColor;
     --xh-collection-fg-hover: currentColor;
@@ -243,6 +245,12 @@
     border-radius: 0;
     /* 文字度量归单元格，行不给行高 */
     line-height: inherit;
+    /* 换面走家族的时间线；translate 是换位提交后的落位：宿主按 ids 重排之后，连接层把行按旧位置反向补偿，
+       这条过渡带它滑到新位置，走完即归零，不常驻变换 */
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
   /* 家族给了 display，UA 的 [hidden]{display:none} 已被盖掉 */
@@ -261,7 +269,8 @@
     --xh-collection-outline-keyboard-highlight: var(--xh-ring-focus);
     --xh-collection-outline-selected-highlight: var(--xh-ring-focus);
 
-    transition: none;
+    /* 换面即时，只留换位：Alt + 方向键搬的正是这一行，它照样从旧位置滑到新位置 */
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
   /* 行间线画在后一行的上沿，区段里第一个可见行不画：行只负责行与行之间，外边界归 root 与区段容器 */
@@ -311,6 +320,39 @@
     white-space: nowrap;
   }
 
+  /* 纵向合并：起点格（cellSpan 合并的单元格、多级表头里较浅的叶子列头）铺满合并的几行，
+     高度由连接层实测行位后写进私有槽；多出自己那一行的部分用负的下外边距让回去，自己那一行不被撑高。
+     它压在下面几行之上，底色随起点行（表头随表头底），挡住那一列里的行间线。量到之前按普通格子排 */
+  [data-scope='table']:is([data-part='cell'], [data-part='column-header'])[data-row-span] {
+    /* 缺省即不铺开：连接层量到行位后在内联样式里改写这两支 */
+    --xh-_table-span-block: auto;
+    --xh-_table-span-overhang: 0px;
+
+    position: relative;
+    z-index: var(--xh-table-span-layer, 1);
+    align-self: flex-start;
+    block-size: var(--xh-_table-span-block);
+    margin-block-end: calc(-1 * var(--xh-_table-span-overhang));
+    background: inherit;
+  }
+
+  /* 被合并掉的格子只留位置（带着列宽与冻结）：内容与底色都不画，对读屏已隐藏 */
+  [data-scope='table']:is([data-part='cell'], [data-part='column-header'])[data-covered] {
+    visibility: hidden;
+  }
+
+  /* 高对比档里合并格的底被换成系统底色，盖住行间线这件事照旧成立；补一圈系统描边标出合并区 */
+  @media (forced-colors: active) {
+    [data-scope='table']:is([data-part='cell'], [data-part='column-header'])[data-row-span] {
+      outline: var(--xh-stroke-thin) solid CanvasText;
+      outline-offset: calc(-1 * var(--xh-stroke-thin));
+    }
+  }
+  /* 分组表头横跨它的几列，名字居中压在这几列正上方 */
+  [data-scope='table'][data-part='column-header'][data-group] {
+    justify-content: center;
+  }
+
   /* 横向吸附：钉在滚动容器的一侧。背景继承自行，跟着选中/高亮一起变，
      滚过去时不会露出一块与所在行不同色的补丁。
      同侧多列时的偏移由连接层按前面各列的宽度累加好写进 --xh-table-sticky-inset */
@@ -334,7 +376,43 @@
   /* 表头行本身透明（露出表头底），吸附的列头继承到的就是透明——得自己带表头底，
      否则横向滚动时其它列头从它下面穿过去 */
   [data-scope='table'][data-part='column-header'][data-frozen] {
-    background: var(--xh-table-header-bg, var(--xh-bg-subtle));
+    background: var(--xh-table-header-bg, var(--xh-bg-subtle-opaque));
+  }
+
+  /* 冻结列的边界：紧挨滚动区的那一列在朝向滚动区的一侧画一道描边，只在确有内容被压住时出现——
+     行首冻结列在滚离起始端之后、行尾冻结列在还没滚到末端时。冻结列与被压住的内容同在一个平面上，
+     层级靠描边而不是阴影；线常驻、按 micro 淡入淡出，不改格子的盒尺寸 */
+  [data-scope='table']:is([data-part='column-header'], [data-part='cell'])[data-frozen-edge]::after {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inline-size: var(--xh-stroke-thin);
+    background: var(--xh-table-frozen-edge, var(--xh-border-default));
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='table']:is([data-part='column-header'], [data-part='cell'])[data-frozen-edge][data-frozen='start']::after {
+    inset-inline-end: 0;
+  }
+
+  [data-scope='table']:is([data-part='column-header'], [data-part='cell'])[data-frozen-edge][data-frozen='end']::after {
+    inset-inline-start: 0;
+  }
+
+  /* root 恒报两端（没有冻结列时两端都算贴着）；虚拟滚动的行隔着视口，按后代认 */
+  [data-scope='table'][data-part='root']:not([data-at-min-horizontal]) :is([data-part='column-header'], [data-part='cell'])[data-frozen-edge][data-frozen='start']::after,
+  [data-scope='table'][data-part='root']:not([data-at-max-horizontal]) :is([data-part='column-header'], [data-part='cell'])[data-frozen-edge][data-frozen='end']::after {
+    opacity: 1;
+  }
+
+  /* 边界线是一块底色，系统色下会被抹成 Canvas：换成 CanvasText 并只让这条线不参与强制换色 */
+  @media (forced-colors: active) {
+    [data-scope='table']:is([data-part='column-header'], [data-part='cell'])[data-frozen-edge]::after {
+      background: CanvasText;
+      forced-color-adjust: none;
+    }
   }
 
   /* —— 三个可叠加的外观开关 —— */
@@ -345,7 +423,7 @@
   :where([data-scope='table'][data-part='root'][data-striped] [data-scope='table'][data-part='body']) > [data-scope='table'][data-part='row']:where(:nth-of-type(even)) {
     /* 改的是家族的 rest 槽而不是 background 本身：悬停、选中、按下各态由家族在同一支私有槽上解算，
        直接写 background 会把它们全压掉 */
-    --xh-collection-bg-rest: var(--xh-table-row-bg-striped, var(--xh-bg-subtle));
+    --xh-collection-bg-rest: var(--xh-table-row-bg-striped, var(--xh-bg-subtle-opaque));
   }
 
   /* 形态：outline 画一圈描边加圆角；ghost 即基础规则，只留行间横线，圆角也随之无意义 */
@@ -355,8 +433,9 @@
     background: var(--xh-table-bg, var(--xh-bg-surface));
   }
 
-  /* 淡底档：不画描边，surface 圆角 + subtle 底 */
+  /* 淡底档：描边退成透明占位（不去掉），与 outline 档同盒尺寸，换档不跳 1px；surface 圆角 + subtle 底 */
   [data-scope='table'][data-part='root'][data-variant='subtle'] {
+    border: var(--xh-stroke-thin) solid transparent;
     border-radius: var(--xh-table-radius, var(--xh-shape-surface));
     background: var(--xh-table-bg, var(--xh-bg-subtle));
   }
@@ -372,7 +451,7 @@
   }
 
   /* 五个把手共用一副方形盒子，两种行的文字起点才对得齐；列设置区那颗与表头里的选择框同款，一眼看得出是同一件事。
-     五颗都接 Action Control icon 档（§9.1 定尺方框）：盒型、悬停 / 按下 / 禁用面、0.97 缩放与换底、焦点环与过渡由家族
+     五颗都接 Action Control icon 档（定尺方框）：盒型、悬停 / 按下 / 禁用面、0.97 缩放与换底、焦点环与过渡由家族
      配方给，这里只把使用者槽映射到桥接槽；边长仍按 --xh-control-indicator-size 走。三颗勾选框是 outline 形态
      （字段静息形态：透明底 + --xh-border-control 描边），展开箭头与排序钮是 ghost；空框与箭头坐在白底行上，
      按下落 200 档，已勾选的品牌实心面按下派生 active 面；排序钮坐在表头淡底上，阶梯另由 host 槽给（见下） */
@@ -400,8 +479,7 @@
   }
 
   /* 家族 icon 档在粗指针下用 ::after 扩热区到 44px：五颗把手密排在行首与列头里（coarse-target 登记的
-     A 档存量），外扩会与相邻把手和上下行叠上；热区不外扩，全选框的 ::after 又是半选那道横杠、
-     排序钮的 ::after 是多列排序的序号角标 */
+     A 档存量），外扩会与相邻把手和上下行叠上；热区不外扩，排序钮的 ::after 是多列排序的序号角标 */
   @media (pointer: coarse) {
     [data-scope='table'][data-part='select-all-trigger']::after,
     [data-scope='table'][data-part='row-select-trigger']::after,
@@ -422,7 +500,7 @@
     }
   }
 
-  /* 盒里的字形是指示符（§6.5）：这四颗把手各自把 --xh-icon-size 改接到方盒的尺上，兜底字形与作者塞进盒里的
+  /* 盒里的字形是指示符：这四颗把手各自把 --xh-icon-size 改接到方盒的尺上，兜底字形与作者塞进盒里的
      XhIcon 读同一把尺，root 那支只管作者放进单元格与把手里图标的 --xh-table-icon-size 不流进来。
      三颗勾选框的勾与半选杠按方盒边长 × 0.75，与 Checkbox 的 --xh-_checkbox-glyph、Tree 勾选把手同一比例；
      展开箭头的 chevron 与方盒同边长，同 Tree 的 branch-trigger */
@@ -461,8 +539,8 @@
     display: none;
   }
 
-  /* 三个勾选把手：未选中时只剩一个空框（描边画出的透明底空框），勾选标记靠前景色显隐，
-     切换选中不引起行宽抖动 */
+  /* 三个勾选把手：未选中时只剩一个空框（描边画出的透明底空框）。框里的勾与半选杠由勾选标记配方画：
+     常驻、按状态淡变并轻缩放，标记色恒为面上的前景，切换选中不引起行宽抖动 */
   [data-scope='table'][data-part='select-all-trigger'],
   [data-scope='table'][data-part='row-select-trigger'],
   [data-scope='table'][data-part='column-visibility-trigger'] {
@@ -480,7 +558,7 @@
   /* 已勾选的方框是品牌实心面，按下在它之上派生 active 面 */
   [data-scope='table'][data-part='select-all-trigger']:is([data-state='checked'], [data-state='indeterminate']),
   [data-scope='table'][data-part='column-visibility-trigger'][data-state='checked'],
-  [data-scope='table'][data-part='row-select-trigger'][data-selected] {
+  [data-scope='table'][data-part='row-select-trigger']:is([data-selected], [data-indeterminate]) {
     --xh-_table-trigger-bg: var(--xh-table-trigger-bg-checked, var(--xh-bg-brand));
     --xh-_table-trigger-bg-pressed: var(--xh-table-trigger-bg-checked-pressed, var(--xh-bg-brand-active));
     --xh-_table-trigger-border: var(--xh-table-trigger-border-checked, var(--xh-table-trigger-bg-checked, var(--xh-bg-brand)));
@@ -488,50 +566,21 @@
 
   /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
      那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的。
-     置灰那档不在其列：底已换成淡底、勾也藏成透明，currentColor 取到的是透明，环整个消失；
-     aria-disabled 的把手仍能落焦，环退回默认那一支 */
+     置灰那档不在其列：底已换成淡底，aria-disabled 的把手仍能落焦，环退回默认那一支 */
   [data-scope='table'][data-part='select-all-trigger']:is([data-state='checked'], [data-state='indeterminate']):not([data-disabled]),
   [data-scope='table'][data-part='column-visibility-trigger'][data-state='checked']:not([data-disabled]),
-  [data-scope='table'][data-part='row-select-trigger'][data-selected]:not([data-disabled]) {
+  [data-scope='table'][data-part='row-select-trigger']:is([data-selected], [data-indeterminate]):not([data-disabled]) {
     --xh-action-ring-color-focus-visible: currentColor;
   }
 
-  /* 半选档的前景是透明的（勾藏起来、横杠由伪元素画），currentColor 取到的是透明；
-     环直接取面配对的那支前景色 */
-  [data-scope='table'][data-part='select-all-trigger'][data-state='indeterminate']:not([data-disabled]) {
-    --xh-action-ring-color-focus-visible: var(--xh-table-trigger-fg, var(--xh-fg-on-brand));
-  }
-
-  /* 未选中时勾不出现，但盒子还在：它是边框画出来的空框 */
-  [data-scope='table'][data-part='select-all-trigger'][data-state='unchecked'],
-  [data-scope='table'][data-part='column-visibility-trigger'][data-state='unchecked'],
-  [data-scope='table'][data-part='row-select-trigger']:not([data-selected]) {
-    --xh-_table-trigger-fg: transparent;
-  }
-
-  /* 半选换一枚横杠字形盖住勾：aria-checked=mixed 在视觉上也得与"全选"分得开。
-     横杠与勾同走字形令牌，作者换掉标记时两态一起换 */
-  [data-scope='table'][data-part='select-all-trigger'][data-state='indeterminate'] {
-    --xh-_table-trigger-fg: transparent;
-  }
-
-  [data-scope='table'][data-part='select-all-trigger'][data-state='indeterminate']::after {
-    position: absolute;
-    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    background-color: var(--xh-table-trigger-fg, var(--xh-fg-on-brand));
-    content: '';
-    -webkit-mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
-  }
-
-  /* 禁用（§7.2 第 9 条）：--xh-border-default 描边 + --xh-bg-subtle 底，勾藏起来；家族的禁用块按映射给 */
+  /* 禁用：--xh-border-default 描边 + --xh-bg-subtle 底 + --xh-fg-disabled 勾，与独立 Checkbox 同一档；
+     家族的禁用块按映射给 */
   [data-scope='table'][data-part='select-all-trigger'][data-disabled],
   [data-scope='table'][data-part='column-visibility-trigger'][data-disabled],
   [data-scope='table'][data-part='row-select-trigger'][data-disabled] {
     --xh-action-border-disabled: var(--xh-border-default);
     --xh-action-bg-disabled: var(--xh-bg-subtle);
-    --xh-action-fg-disabled: transparent;
+    --xh-action-fg-disabled: var(--xh-fg-disabled);
   }
 
   /* 行选择把手不占 Tab 位（键盘那一路走 Space），只服务指针 */
@@ -550,7 +599,7 @@
 
     /* 这条整份改写家族的过渡列表，按压的 scale 与换底要一起带回来 */
     transition:
-      rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter-strong),
+      rotate var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong),
       background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
   }
@@ -576,7 +625,7 @@
     outline: none;
   }
 
-  /* 排序钮是列头里独立的定尺图标钮（§9.1）：不包列名，列名留在列头上、它排在列名之后，auto 外边距把它
+  /* 排序钮是列头里独立的定尺图标钮：不包列名，列名留在列头上、它排在列名之后，auto 外边距把它
      推到行尾侧与列宽把手并排。盒型与 0.97 按压由家族 icon 档给（见五颗把手共用块）；坐在表头淡底上，
      悬停 / 按下面按 header 的 host 槽下发的阶梯走（hover 200 → pressed 300），不取白底行那档。
      箭头静息取 subtle 前景，参与排序的列换成默认前景（见字形块） */
@@ -846,8 +895,8 @@
      悬停恒真，而悬停那条是 0-6-0、选中那条是 0-3-0，少写一层祖先这块淡底就会被那两档盖掉。
      禁用的行不接换父落点，:not([data-disabled]) 不会漏画任何一处高亮 */
   [data-scope='table'][data-part='root'] [data-scope='table'][data-part='body'] > [data-scope='table'][data-part='row'][data-drop='inside']:not([data-disabled]) {
-    /* 落点不是选中：品牌淡底专属选中（§7.1），落点面取悬停之上一档的中性面 */
-    background: var(--xh-table-drop-inside-bg, var(--xh-bg-subtle-hover));
+    /* 落点不是选中：品牌淡底专属选中，落点面取悬停之上一档的中性面 */
+    background: var(--xh-table-drop-inside-bg, var(--xh-bg-subtle-hover-opaque));
   }
 
   /* 换父那一档的描边：与底色分两层画，因为它得压在横向吸附的格子之上——
@@ -880,7 +929,7 @@
   }
 
   /* 排序方向用箭头字形表出来：aria-sort 只报给读屏，视觉侧也得有对应的东西。
-     箭头是指示符（§6.5）：尺寸读钮自己改接过的 --xh-icon-size（--xh-table-sort-size，缺省与方盒同边长），
+     箭头是指示符：尺寸读钮自己改接过的 --xh-icon-size（--xh-table-sort-size，缺省与方盒同边长），
      与同一表头里的勾选框方盒、列拖拽把手同走 --xh-control-indicator-size，按图标档取的 20px 会比
      16px 的方盒与列头文字都大一圈。:empty 守卫同展开箭头：作者塞了自己的图标就整个顶掉兜底；
      flex: none 是因为 ghost 那圈透明描边仍占位，不钉住的话与盒同边长的箭头会被挤窄一个描边。
@@ -940,11 +989,13 @@
     content: none;
   }
 
-  /* 详情行：靠 data-state 收起，不卸载作者节点。内容长在它的单元格里，行本身只画底色 */
+  /* 详情行：靠 data-state 收起，不卸载作者节点。内容长在它的单元格里，行本身只画底色；
+     换位时随它的数据行一起从旧位置滑到新位置 */
   [data-scope='table'][data-part='expanded-row'] {
     display: flex;
     align-items: stretch;
     background: var(--xh-table-detail-bg, var(--xh-bg-subtle));
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
   /* 详情行里的格子铺满整行，且不按数据格那样截断成一行 */
@@ -962,17 +1013,17 @@
     display: none;
   }
 
-  /* 两个状态节点常挂，只在表体为空时才显形 */
+  /* 两个占位节点常挂，只在表体为空时才显形，占同一个位置、同一副排版：一行文案居中，字号随表格的尺寸档
+     （从 root 继承），次要文字色，块向内距一档、行内与单元格文字对齐，不设最小高——占位不撑出空白 */
   [data-scope='table'][data-part='empty'],
   [data-scope='table'][data-part='loading'] {
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: var(--xh-table-state-gap, var(--xh-space-2));
-    min-block-size: var(--xh-table-state-min-h, 8rem);
-    padding-block: var(--xh-table-state-py, var(--xh-space-6));
-    padding-inline: var(--xh-table-state-px, var(--xh-space-4));
+    gap: var(--xh-table-state-gap, var(--xh-control-gap-md));
+    min-block-size: var(--xh-table-state-min-h, 0);
+    padding-block: var(--xh-table-state-py, var(--xh-space-3));
+    padding-inline: var(--xh-table-state-px, var(--xh-control-px-sm));
     color: var(--xh-table-state-fg, var(--xh-fg-muted));
     text-align: center;
   }
@@ -982,13 +1033,18 @@
     display: none;
   }
 
-  [data-scope='table'][data-part='loading'] {
-    animation: xh-table-loading-pulse var(--xh-table-loading-duration, var(--xh-shimmer-duration))
-      var(--xh-motion-ease-sweep) infinite;
+  /* 还没有行、正在取：一枚加载环排在文案之前。环由加载环配方画成（轨道 + 起始边、随 data-loading 淡入并转），
+     这里只给它盒子：直径取表格尺寸档的图标档；转一圈的时长走公开槽 */
+  [data-scope='table'][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));
+    animation-duration: var(--xh-table-loading-duration, var(--xh-motion-loop-spin));
   }
 
   /* 取下一页的按钮：铺满一行摆在表尾——铺满一行的独立动作条目，接 Action Control 的 row 档、
-     ghost 形态（§9.2）：宽度由容器给、高度随内容、按下只换面不缩放；盒几何、悬停 / 按下 / 禁用面、
+     ghost 形态：宽度由容器给、高度随内容、按下只换面不缩放；盒几何、悬停 / 按下 / 禁用面、
      焦点环与粗指针热区全由家族给，白底承载 hover 100 → pressed 200。
      这里只把使用者槽映射到桥接槽并把文案居中：它是一行里唯一的东西，靠起始缘会像一条没对齐的行 */
   [data-scope='table'][data-part='load-more-trigger'] {
@@ -1004,7 +1060,7 @@
 
     justify-content: center;
     text-align: center;
-    /* row 档允许换行、高度随内容，折行的文案走正文行高（§6.4） */
+    /* row 档允许换行、高度随内容，折行的文案走正文行高 */
     line-height: var(--xh-leading-normal);
   }
 
@@ -1012,33 +1068,9 @@
     display: none;
   }
 
-  /* 减少动效：呼吸停下，加载态只留静止的文案。两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='table'][data-part='loading'] {
-      animation: none;
-    }
-  }
-
-  :where([data-motion='reduce']) [data-scope='table'][data-part='loading'] {
-    animation: none;
-  }
-
-  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中。
-     尺寸读把手自己改接过的 --xh-icon-size：勾是方盒边长 × 0.75、chevron 与方盒同边长（见把手块） */
-  [data-scope='table'][data-part='select-all-trigger']:empty::before,
-  [data-scope='table'][data-part='column-visibility-trigger']:empty::before,
-  [data-scope='table'][data-part='row-select-trigger']:empty::before {
-    content: '';
-    display: inline-block;
-    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    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;
-  }
-
-  /* flex: none：方盒是 ghost 形态，家族那圈透明描边仍占位，不钉住的话与盒同边长的 chevron 会被挤窄一个描边 */
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这条即不命中。三颗勾选框里的勾由勾选标记配方画；
+     尺寸读把手自己改接过的 --xh-icon-size：chevron 与方盒同边长（见把手块）。
+     flex: none：方盒是 ghost 形态，家族那圈透明描边仍占位，不钉住的话与盒同边长的 chevron 会被挤窄一个描边 */
   [data-scope='table'][data-part='expand-trigger']:empty::before {
     content: '';
     display: inline-block;
@@ -1052,13 +1084,7 @@
   }
 
   @media print {
-    /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
-       取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
-       :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
-       并成一条之后这层配对关系在文本上就断了。 */
-    [data-scope='table'][data-part='loading'] {
-      animation: none;
-    }
+    /* 加载环的静止替代（点线环）由加载环配方给，减弱动效与打印同一档 */
 
     /* 底色被丢掉：选中行那层淡底没了，与别的行一模一样。改画一条内收的实线框——
        用 outline 不用 border：行是横排 flex，加边会把单元格整体往里推，没选中的行不加边，
@@ -1071,18 +1097,32 @@
     /* 两个勾选框的实心底也被丢掉，配它的浅色勾落在白纸上就整个不见了——
        勾与框都换成正文色，勾没勾在纸上才分得出 */
     [data-scope='table'][data-part='select-all-trigger']:is([data-state='checked'], [data-state='indeterminate']),
-    [data-scope='table'][data-part='row-select-trigger'][data-selected] {
+    [data-scope='table'][data-part='row-select-trigger']:is([data-selected], [data-indeterminate]) {
       border-color: var(--xh-fg-default);
     }
 
-    [data-scope='table'][data-part='select-all-trigger'][data-state='checked'],
-    [data-scope='table'][data-part='row-select-trigger'][data-selected] {
+    [data-scope='table'][data-part='select-all-trigger']:is([data-state='checked'], [data-state='indeterminate']),
+    [data-scope='table'][data-part='row-select-trigger']:is([data-selected], [data-indeterminate]) {
       color: var(--xh-fg-default);
     }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='table']:is([data-part='sort-trigger'], [data-part='expand-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='table']:is([data-part='sort-trigger'], [data-part='expand-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
 
-    /* 半选那枚横杠是伪元素画的，字色照旧留成透明把勾压住，只换横杠自己的颜色 */
-    [data-scope='table'][data-part='select-all-trigger'][data-state='indeterminate']::after {
-      background-color: var(--xh-fg-default);
+    [data-scope='table']:is([data-part='sort-trigger'], [data-part='expand-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
     }
   }
 }