@xihan-ui/styles 1.1.0 → 2.0.0

package/css/table.css

@@ -1,11 +1,23 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 table 样式。 */
+
+@import '../family/action-control.css';
+@import '../family/collection-item.css';
+
 @layer xihan.motion {
   /* 加载态自己冒出来，用户没按任何键：一段极轻的呼吸就够，别抢走正在读表的注意力 */
+  /* 一次呼吸自带来回：起止两端与中点各写一帧，声明的周期就是一次完整的明暗往返 */
   @keyframes xh-table-loading-pulse {
-    from {
+    0%,
+    100% {
       opacity: var(--xh-state-disabled-opacity);
     }
 
-    to {
+    50% {
       opacity: 1;
     }
   }
@@ -23,8 +35,10 @@
        既不让页面上的层号插进来，也不让它们漏出去压住别人 */
     isolation: isolate;
 
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-table-icon-size, var(--xh-glyph-size-text));
+    /* 作者放进单元格、列头与把手里的图标按档取尺，缺省 md（§6.5）；表体行上的由家族随 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));
 
     /* 密度档只换这两个私有槽：单元格与列标题从 root 继承前者，字号靠 font-size 本身继承下去，
        换档不必给每个部件各写一条选择器，列宽那套算法也一点不碰 */
@@ -34,9 +48,13 @@
     display: flex;
     position: relative;
     flex-direction: column;
-    max-block-size: var(--xh-table-max-h, var(--xh-viewport-h-lg));
-    border: var(--xh-stroke-thin) solid var(--xh-table-border, var(--xh-border-default));
-    border-radius: var(--xh-table-radius, var(--xh-shape-surface));
+    /* 高度上限再由视口收一次：定值比屏幕还高时表格自己滚不动，只能靠页面滚，
+       吸顶表头也就钉不住。视口取 dvb：移动端地址栏收放会改变可视高度，dvb 跟着变；
+       不认 dvb 的引擎由级联回落到前一条的 vh */
+    max-block-size: min(var(--xh-table-max-h, var(--xh-viewport-h-lg)), 100vh);
+    max-block-size: min(var(--xh-table-max-h, var(--xh-viewport-h-lg)), 100dvb);
+    /* 外框由 [data-variant='outline'] 画；ghost 不画外框，只留行间横线 */
+    border: 0;
     background: var(--xh-table-bg, var(--xh-bg-surface));
     color: var(--xh-table-fg, var(--xh-fg-default));
     font-size: var(--xh-table-font-size, var(--xh-_table-font-size));
@@ -65,11 +83,13 @@
   /* —— 密度 —— */
   /* 中间档不写规则，缺省即中档 */
   [data-scope='table'][data-part='root'][data-size='sm'] {
+    --xh-icon-size: var(--xh-table-icon-size, var(--xh-glyph-size-sm));
     --xh-_table-cell-py: var(--xh-table-cell-py-sm);
     --xh-_table-font-size: var(--xh-control-font-sm);
   }
 
   [data-scope='table'][data-part='root'][data-size='lg'] {
+    --xh-icon-size: var(--xh-table-icon-size, var(--xh-glyph-size-lg));
     --xh-_table-cell-py: var(--xh-table-cell-py-lg);
     --xh-_table-font-size: var(--xh-control-font-lg);
   }
@@ -88,6 +108,56 @@
     display: none;
   }
 
+  /* —— 工具条与列设置区 —— */
+  /* 两块都摆在 root 之外：root 是 grid 系角色，子节点只能是 row 与 rowgroup。
+     工具条只管排布，里头控件的观感归控件自己的皮肤 */
+  [data-scope='table'][data-part='toolbar'] {
+    /* 尺寸档只换这一个私有槽：控件之间的间距 */
+    --xh-_table-toolbar-gap: var(--xh-space-2);
+
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--xh-table-toolbar-gap, var(--xh-_table-toolbar-gap));
+    padding-block: var(--xh-table-toolbar-py, var(--xh-space-2));
+    color: var(--xh-table-toolbar-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='table'][data-part='toolbar'][data-size='sm'] {
+    --xh-_table-toolbar-gap: var(--xh-space-1);
+  }
+
+  [data-scope='table'][data-part='toolbar'][data-size='lg'] {
+    --xh-_table-toolbar-gap: var(--xh-space-3);
+  }
+
+  [data-scope='table'][data-part='toolbar'][hidden] {
+    display: none;
+  }
+
+  /* 列设置区：一列一行竖着排。它常摆在浮层里，宽高都交给外面那层容器定 */
+  [data-scope='table'][data-part='column-list'] {
+    --xh-_table-column-list-gap: var(--xh-space-1);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-table-column-list-gap, var(--xh-_table-column-list-gap));
+    color: var(--xh-table-column-list-fg, var(--xh-fg-default));
+    font-size: var(--xh-table-column-list-font-size, var(--xh-text-secondary-size));
+  }
+
+  [data-scope='table'][data-part='column-list'][data-size='sm'] {
+    --xh-_table-column-list-gap: var(--xh-space-0_5);
+  }
+
+  [data-scope='table'][data-part='column-list'][data-size='lg'] {
+    --xh-_table-column-list-gap: var(--xh-space-2);
+  }
+
+  [data-scope='table'][data-part='column-list'][hidden] {
+    display: none;
+  }
+
   /* 三个区段都是竖着排行的块。min-inline-size: max-content 让它们跟着最宽的一行一起横向溢出，
      否则横向滚动时右半边的行会在容器边缘被切断 */
   [data-scope='table'][data-part='header'],
@@ -109,14 +179,19 @@
     outline: none;
   }
 
+  /* 表头是淡底承载面：里头的触发器按淡底阶梯走（hover 200 → pressed 300），阶梯由 host 槽向内下发（§7.2）；
+     排序钮是 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));
   }
 
   /* 吸顶：滚动容器是 root，表头钉在它的上沿。背景必须是实色——
      透明的表头会让底下滚过的行透出来 */
-  [data-scope='table'][data-part='header'][data-sticky] {
+  [data-scope='table'][data-part='header'][data-fixed] {
     position: sticky;
     z-index: var(--xh-table-sticky-header-layer, var(--xh-layer-sticky));
     inset-block-start: 0;
@@ -128,48 +203,72 @@
     font-weight: var(--xh-table-footer-font-weight, var(--xh-font-weight-medium));
   }
 
+  /* 表体行走 Collection Item 的 page 语境（页内持久集合，§7.3）：悬停 / 高亮 / 按下面（白底承载 hover 100 →
+     pressed 200）与选中面（品牌淡底 + 淡底前景，selected+hover 20% / +pressed 28%）由家族按 aria-selected /
+     aria-disabled 给出，标记由行首的勾选把手承担。这里只把公开槽映射到桥接槽，并逐项盖掉家族的行盒几何：
+     行是 flex 容器（列宽由单元格的内联尺寸决定，不进家族网格）、不内衬、不圆角、字号与光标随表格本身
+     （行不是按钮，selectable 与否都不改光标）。表头 / 脚注行不投影家族，只共用这一副 flex 盒 */
   [data-scope='table'][data-part='row'] {
+    /* rest 底要实色：横向吸附的单元格靠 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-selected: var(--xh-table-row-bg-selected, var(--xh-bg-brand-subtle));
+    --xh-collection-fg-rest: currentColor;
+    --xh-collection-fg-hover: currentColor;
+    --xh-collection-fg-keyboard-highlight: currentColor;
+    --xh-collection-fg-pressed: currentColor;
+    --xh-collection-fg-selected: var(--xh-table-row-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-collection-fg-selected-hover: var(--xh-table-row-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-collection-fg-selected-highlight: var(--xh-table-row-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-collection-fg-selected-pressed: var(--xh-table-row-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-collection-font-size: var(--xh-table-font-size, var(--xh-_table-font-size));
+    --xh-collection-cursor-rest: var(--xh-table-row-cursor, default);
+    --xh-collection-cursor-hover: var(--xh-table-row-cursor, default);
+    --xh-collection-cursor-keyboard-highlight: var(--xh-table-row-cursor, default);
+    --xh-collection-cursor-pressed: var(--xh-table-row-cursor, default);
+    --xh-collection-cursor-selected: var(--xh-table-row-cursor, default);
+    --xh-collection-cursor-selected-hover: var(--xh-table-row-cursor, default);
+    --xh-collection-cursor-selected-highlight: var(--xh-table-row-cursor, default);
+    --xh-collection-cursor-selected-pressed: var(--xh-table-row-cursor, default);
+    --xh-collection-cursor-disabled: var(--xh-table-row-cursor, default);
+    /* data-highlighted 跟的是连接层记的焦点行（指针点选也会落焦）：只换面，焦点环在 :focus-visible 下再接回 */
+    --xh-collection-outline-keyboard-highlight: transparent;
+    --xh-collection-outline-selected-highlight: transparent;
+
     display: flex;
     align-items: stretch;
-    /* 背景要实色：横向吸附的单元格靠 inherit 取它，透明会让滚过的内容透出来 */
-    background: var(--xh-table-row-bg, var(--xh-bg-surface));
+    padding: 0;
+    border-radius: 0;
+    /* 文字度量归单元格，行不给行高 */
+    line-height: inherit;
   }
 
+  /* 家族给了 display，UA 的 [hidden]{display:none} 已被盖掉 */
   [data-scope='table'][data-part='row'][hidden] {
     display: none;
   }
 
+  /* 表头 / 脚注行透明，露出区段容器的淡底 */
   [data-scope='table'][data-part='header'] > [data-scope='table'][data-part='row'],
   [data-scope='table'][data-part='footer'] > [data-scope='table'][data-part='row'] {
     background: transparent;
   }
 
-  /* 行间线画在后一行的上沿，区段里第一个可见行不画：行只负责行与行之间，外边界归 root 与区段容器 */
-  [data-scope='table']:is([data-part='header'], [data-part='body'], [data-part='footer']) > :not([hidden]) ~ [data-scope='table']:is([data-part='row'], [data-part='expanded-row']) {
-    border-block-start: var(--xh-stroke-thin) solid var(--xh-table-row-border, var(--xh-border-subtle));
-  }
-
-  /* 悬停与键盘锚点共用中性灰轻档。data-highlighted 跟的是连接层记的焦点行，
-     与选中互相独立：可以停在一个没被选中的行上 */
-  [data-scope='table'][data-part='body'] > [data-scope='table'][data-part='row']:not([data-disabled]):is(:hover, [data-highlighted]) {
-    background: var(--xh-table-row-bg-hover, var(--xh-bg-subtle));
-  }
+  /* 键盘焦点出现时环才接回并立即到位，不压在背景过渡的中间帧上；选中行的淡底不是实心面，环走默认色 */
+  [data-scope='table'][data-part='row']:focus-visible:not(:hover) {
+    --xh-collection-outline-keyboard-highlight: var(--xh-ring-focus);
+    --xh-collection-outline-selected-highlight: var(--xh-ring-focus);
 
-  /* 选中比高亮更"实"：它表达的是数据状态，翻页回来还在 */
-  [data-scope='table'][data-part='row'][data-selected] {
-    background: var(--xh-table-row-bg-selected, var(--xh-bg-subtle-active));
+    transition: none;
   }
 
-  [data-scope='table'][data-part='row'][data-disabled] {
-    color: var(--xh-fg-disabled);
+  /* 行间线画在后一行的上沿，区段里第一个可见行不画：行只负责行与行之间，外边界归 root 与区段容器 */
+  [data-scope='table']:is([data-part='header'], [data-part='body'], [data-part='footer']) > :not([hidden]) ~ [data-scope='table']:is([data-part='row'], [data-part='expanded-row']) {
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-table-row-border, var(--xh-border-subtle));
   }
 
-  /* 行才是 Tab 停靠点，环画在整行上 */
-  [data-scope='table'][data-part='row']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    /* 往内收：行是撑满宽度的，环画在外沿会被滚动容器裁掉 */
-    outline-offset: calc(-1 * var(--xh-ring-width));
-  }
 
   /* 列宽由连接层写进内联 inline-size，因此 flex-basis 取 auto：
      写成 0 会把那条内联值整个盖掉，作者给的列宽就此失效 */
@@ -199,6 +298,19 @@
     user-select: none;
   }
 
+  /* 列名是列头里唯一可收窄的一格：flex: 1 吃掉余量、把排序钮 / 列宽把手推到行尾，min-inline-size: 0 让它在
+     窄列上收得下去并出省略号。列名不能裸写成文本节点：flex 行里的裸文本是匿名 flex item，min-inline-size 取 auto
+     （nowrap 文本的 min-content）缩不下去，96px 的列配一串长列名时定尺的把手连同 auto 外边距一起被挤出列头盒、
+     被列头的 overflow: hidden 裁掉——皮肤给不了匿名项 min-inline-size: 0 与 text-overflow，只有真实节点接得住。
+     white-space 与行高照旧从列头继承 */
+  [data-scope='table'][data-part='column-label'] {
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   /* 横向吸附：钉在滚动容器的一侧。背景继承自行，跟着选中/高亮一起变，
      滚过去时不会露出一块与所在行不同色的补丁。
      同侧多列时的偏移由连接层按前面各列的宽度累加好写进 --xh-table-sticky-inset */
@@ -231,18 +343,27 @@
      只靠排在基础底之后压过它一条。照字面写祖先链是 0-8-0，比悬停与选中都高，
      斑马表里偶数行会既不响应悬停也显不出选中 */
   :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)) {
-    background: var(--xh-table-row-bg-striped, var(--xh-bg-subtle));
+    /* 改的是家族的 rest 槽而不是 background 本身：悬停、选中、按下各态由家族在同一支私有槽上解算，
+       直接写 background 会把它们全压掉 */
+    --xh-collection-bg-rest: var(--xh-table-row-bg-striped, var(--xh-bg-subtle));
   }
 
-  /* 无外框：只留行间横线，圆角也随之无意义 */
-  [data-scope='table'][data-part='root'][data-borderless] {
-    border: 0;
-    border-radius: 0;
+  /* 形态：outline 画一圈描边加圆角；ghost 即基础规则，只留行间横线，圆角也随之无意义 */
+  [data-scope='table'][data-part='root'][data-variant='outline'] {
+    border: var(--xh-stroke-thin) solid var(--xh-table-border, var(--xh-border-default));
+    border-radius: var(--xh-table-radius, var(--xh-shape-surface));
+    background: var(--xh-table-bg, var(--xh-bg-surface));
+  }
+
+  /* 淡底档：不画描边，surface 圆角 + subtle 底 */
+  [data-scope='table'][data-part='root'][data-variant='subtle'] {
+    border-radius: var(--xh-table-radius, var(--xh-shape-surface));
+    background: var(--xh-table-bg, var(--xh-bg-subtle));
   }
 
   /* 竖分隔线：列与列之间一道细线，末列不画 */
-  [data-scope='table'][data-part='root'][data-ruled] [data-scope='table'][data-part='column-header']:not(:last-child),
-  [data-scope='table'][data-part='root'][data-ruled] [data-scope='table'][data-part='cell']:not(:last-child) {
+  [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) {
     border-inline-end: var(--xh-stroke-thin) solid var(--xh-table-row-border, var(--xh-border-subtle));
   }
 
@@ -250,52 +371,148 @@
     color: var(--xh-fg-disabled);
   }
 
-  /* 三个把手共用一副方形盒子，两种行的文字起点才对得齐 */
+  /* 五个把手共用一副方形盒子，两种行的文字起点才对得齐；列设置区那颗与表头里的选择框同款，一眼看得出是同一件事。
+     五颗都接 Action Control icon 档（§9.1 定尺方框）：盒型、悬停 / 按下 / 禁用面、0.97 缩放与换底、焦点环与过渡由家族
+     配方给，这里只把使用者槽映射到桥接槽；边长仍按 --xh-control-indicator-size 走。三颗勾选框是 outline 形态
+     （字段静息形态：透明底 + --xh-border-control 描边），展开箭头与排序钮是 ghost；空框与箭头坐在白底行上，
+     按下落 200 档，已勾选的品牌实心面按下派生 active 面；排序钮坐在表头淡底上，阶梯另由 host 槽给（见下） */
+  [data-scope='table'][data-part='select-all-trigger'],
+  [data-scope='table'][data-part='row-select-trigger'],
+  [data-scope='table'][data-part='column-visibility-trigger'],
+  [data-scope='table'][data-part='expand-trigger'],
+  [data-scope='table'][data-part='sort-trigger'] {
+    --xh-_table-trigger-bg: transparent;
+    --xh-_table-trigger-bg-pressed: var(--xh-table-trigger-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-_table-trigger-border: transparent;
+    /* 方盒边长：四颗把手与盒里的字形都从这一支取 */
+    --xh-_table-trigger-size: var(--xh-table-trigger-size, var(--xh-control-indicator-size));
+
+    --xh-action-visual-size: var(--xh-_table-trigger-size);
+    --xh-action-min-inline-size: var(--xh-_table-trigger-size);
+    --xh-action-bg-rest: var(--xh-_table-trigger-bg);
+    --xh-action-bg-hover: var(--xh-_table-trigger-bg);
+    --xh-action-bg-pressed: var(--xh-_table-trigger-bg-pressed);
+    --xh-action-bg-focus-visible: var(--xh-_table-trigger-bg);
+    --xh-action-border-rest: var(--xh-_table-trigger-border);
+    --xh-action-border-hover: var(--xh-_table-trigger-border);
+    --xh-action-border-pressed: var(--xh-_table-trigger-border);
+    --xh-action-border-focus-visible: var(--xh-_table-trigger-border);
+  }
+
+  /* 家族 icon 档在粗指针下用 ::after 扩热区到 44px：五颗把手密排在行首与列头里（coarse-target 登记的
+     A 档存量），外扩会与相邻把手和上下行叠上；热区不外扩，全选框的 ::after 又是半选那道横杠、
+     排序钮的 ::after 是多列排序的序号角标 */
+  @media (pointer: coarse) {
+    [data-scope='table'][data-part='select-all-trigger']::after,
+    [data-scope='table'][data-part='row-select-trigger']::after,
+    [data-scope='table'][data-part='column-visibility-trigger']::after,
+    [data-scope='table'][data-part='expand-trigger']::after,
+    [data-scope='table'][data-part='sort-trigger']::after {
+      min-inline-size: 0;
+      min-block-size: 0;
+    }
+
+    /* 序号角标要保住自己的字盒：家族热区那条把伪元素撑成盒的 100%，这里退回内容尺寸；落点与位移由基础规则给。
+       行首起点也要交还：家族热区写了 inset-inline-start: 50%，基础规则只钉了 inset-inline-end: 0，两头都定的
+       绝对定位盒被过约束成方盒的一半（16px 盒里只剩 8px），两位数序号会被截断 */
+    [data-scope='table'][data-part='sort-trigger'][data-sort-index]::after {
+      inline-size: auto;
+      block-size: auto;
+      inset-inline-start: auto;
+    }
+  }
+
+  /* 盒里的字形是指示符（§6.5）：这四颗把手各自把 --xh-icon-size 改接到方盒的尺上，兜底字形与作者塞进盒里的
+     XhIcon 读同一把尺，root 那支只管作者放进单元格与把手里图标的 --xh-table-icon-size 不流进来。
+     三颗勾选框的勾与半选杠按方盒边长 × 0.75，与 Checkbox 的 --xh-_checkbox-glyph、Tree 勾选把手同一比例；
+     展开箭头的 chevron 与方盒同边长，同 Tree 的 branch-trigger */
   [data-scope='table'][data-part='select-all-trigger'],
   [data-scope='table'][data-part='row-select-trigger'],
+  [data-scope='table'][data-part='column-visibility-trigger'] {
+    --xh-icon-size: calc(var(--xh-_table-trigger-size) * 0.75);
+  }
+
   [data-scope='table'][data-part='expand-trigger'] {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    inline-size: var(--xh-table-trigger-size, var(--xh-control-indicator-size));
-    block-size: var(--xh-table-trigger-size, var(--xh-control-indicator-size));
-    border-radius: var(--xh-table-trigger-radius, var(--xh-shape-control));
-    cursor: pointer;
+    --xh-icon-size: var(--xh-_table-trigger-size);
+  }
+
+  /* 排序箭头留一支自己的公开槽，缺省与方盒同边长 */
+  [data-scope='table'][data-part='sort-trigger'] {
+    --xh-icon-size: var(--xh-table-sort-size, var(--xh-_table-trigger-size));
+  }
+
+  /* 勾选方框是嵌在行里的小块：inset 档圆角（身份表登记）；展开箭头与列设置那颗是 control 档 */
+  [data-scope='table'][data-part='select-all-trigger'],
+  [data-scope='table'][data-part='row-select-trigger'] {
+    --xh-action-radius: var(--xh-table-trigger-radius, var(--xh-shape-inset));
+  }
+
+  [data-scope='table'][data-part='column-visibility-trigger'],
+  [data-scope='table'][data-part='expand-trigger'],
+  [data-scope='table'][data-part='sort-trigger'] {
+    --xh-action-radius: var(--xh-table-trigger-radius, var(--xh-shape-control));
   }
 
   [data-scope='table'][data-part='select-all-trigger'][hidden],
   [data-scope='table'][data-part='row-select-trigger'][hidden],
-  [data-scope='table'][data-part='expand-trigger'][hidden] {
+  [data-scope='table'][data-part='column-visibility-trigger'][hidden],
+  [data-scope='table'][data-part='expand-trigger'][hidden],
+  [data-scope='table'][data-part='sort-trigger'][hidden] {
     display: none;
   }
 
-  /* 两个选择把手：未选中时只剩一个空框，勾选标记靠 visibility 显隐，
+  /* 三个勾选把手：未选中时只剩一个空框（描边画出的透明底空框），勾选标记靠前景色显隐，
      切换选中不引起行宽抖动 */
   [data-scope='table'][data-part='select-all-trigger'],
-  [data-scope='table'][data-part='row-select-trigger'] {
-    border: var(--xh-stroke-thin) solid var(--xh-table-trigger-border, var(--xh-border-control));
-    color: var(--xh-table-trigger-fg, var(--xh-fg-on-brand));
+  [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-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);
+    --xh-action-fg-pressed: var(--xh-_table-trigger-fg);
+    --xh-action-fg-focus-visible: var(--xh-_table-trigger-fg);
+
     visibility: visible;
   }
 
+  /* 已勾选的方框是品牌实心面，按下在它之上派生 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] {
-    border-color: var(--xh-table-trigger-border-checked, var(--xh-table-trigger-bg-checked, var(--xh-bg-brand)));
-    background: var(--xh-table-trigger-bg-checked, var(--xh-bg-brand));
+    --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)));
+  }
+
+  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的。
+     置灰那档不在其列：底已换成淡底、勾也藏成透明，currentColor 取到的是透明，环整个消失；
+     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]) {
+    --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]) {
-    color: transparent;
+    --xh-_table-trigger-fg: transparent;
   }
 
   /* 半选换一枚横杠字形盖住勾：aria-checked=mixed 在视觉上也得与"全选"分得开。
      横杠与勾同走字形令牌，作者换掉标记时两态一起换 */
   [data-scope='table'][data-part='select-all-trigger'][data-state='indeterminate'] {
-    position: relative;
-    color: transparent;
+    --xh-_table-trigger-fg: transparent;
   }
 
   [data-scope='table'][data-part='select-all-trigger'][data-state='indeterminate']::after {
@@ -308,20 +525,13 @@
     mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
   }
 
+  /* 禁用（§7.2 第 9 条）：--xh-border-default 描边 + --xh-bg-subtle 底，勾藏起来；家族的禁用块按映射给 */
   [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] {
-    border-color: var(--xh-border-subtle);
-    background: var(--xh-bg-muted);
-    color: transparent;
-    cursor: not-allowed;
-  }
-
-  /* 全选把手是表头里独立的 Tab 停靠点，环得画在它自己身上。
-     往内收，与行、排序把手同一口径：把手长在列头里，列头与根都收 overflow，
-     环画在外沿会被裁掉 */
-  [data-scope='table'][data-part='select-all-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: calc(-1 * var(--xh-ring-width));
+    --xh-action-border-disabled: var(--xh-border-default);
+    --xh-action-bg-disabled: var(--xh-bg-subtle);
+    --xh-action-fg-disabled: transparent;
   }
 
   /* 行选择把手不占 Tab 位（键盘那一路走 Space），只服务指针 */
@@ -331,8 +541,18 @@
 
   /* 展开箭头：收起时朝向行首、展开时转向下方，与逻辑书写方向一致 */
   [data-scope='table'][data-part='expand-trigger'] {
-    color: var(--xh-table-expand-fg, var(--xh-fg-subtle));
-    transition: rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    --xh-action-fg-rest: var(--xh-table-expand-fg, var(--xh-fg-subtle));
+    --xh-action-fg-hover: var(--xh-table-expand-fg, var(--xh-fg-subtle));
+    --xh-action-fg-pressed: var(--xh-table-expand-fg, var(--xh-fg-subtle));
+    --xh-action-fg-focus-visible: var(--xh-table-expand-fg, var(--xh-fg-subtle));
+    --xh-action-bg-disabled: transparent;
+    --xh-action-border-disabled: transparent;
+
+    /* 这条整份改写家族的过渡列表，按压的 scale 与换底要一起带回来 */
+    transition:
+      rotate var(--xh-motion-duration-micro) 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);
   }
 
   [data-scope='table'][data-part='expand-trigger'][data-state='open'] {
@@ -349,30 +569,36 @@
   }
 
   [data-scope='table'][data-part='expand-trigger'][data-disabled] {
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+    --xh-action-fg-disabled: var(--xh-fg-disabled);
   }
 
   [data-scope='table'][data-part='expand-trigger']:focus-visible {
     outline: none;
   }
 
-  /* 排序把手撑满列标题：整块列标题都点得动，而不是只有那一小截文字 */
+  /* 排序钮是列头里独立的定尺图标钮（§9.1）：不包列名，列名留在列头上、它排在列名之后，auto 外边距把它
+     推到行尾侧与列宽把手并排。盒型与 0.97 按压由家族 icon 档给（见五颗把手共用块）；坐在表头淡底上，
+     悬停 / 按下面按 header 的 host 槽下发的阶梯走（hover 200 → pressed 300），不取白底行那档。
+     箭头静息取 subtle 前景，参与排序的列换成默认前景（见字形块） */
   [data-scope='table'][data-part='sort-trigger'] {
-    display: inline-flex;
-    flex: 1;
-    align-items: center;
-    gap: var(--xh-table-sort-gap, var(--xh-space-1));
-    min-inline-size: 0;
-    border-radius: var(--xh-table-trigger-radius, var(--xh-shape-control));
-    color: inherit;
-    font: inherit;
-    text-align: start;
-    cursor: pointer;
+    --xh-action-bg-hover: var(--xh-table-sort-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-table-sort-bg-pressed, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-disabled: transparent;
+    --xh-action-border-disabled: transparent;
+    --xh-action-fg-rest: var(--xh-table-sort-fg, var(--xh-fg-subtle));
+    --xh-action-fg-hover: var(--xh-table-sort-fg, var(--xh-fg-subtle));
+    --xh-action-fg-pressed: var(--xh-table-sort-fg, var(--xh-fg-subtle));
+    --xh-action-fg-focus-visible: var(--xh-table-sort-fg, var(--xh-fg-subtle));
+    --xh-action-fg-disabled: var(--xh-fg-disabled);
+
+    margin-inline-start: auto;
   }
 
-  [data-scope='table'][data-part='sort-trigger'][hidden] {
-    display: none;
+  [data-scope='table'][data-part='sort-trigger'][data-sort] {
+    --xh-action-fg-rest: var(--xh-table-sort-fg-active, var(--xh-fg-default));
+    --xh-action-fg-hover: var(--xh-table-sort-fg-active, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-table-sort-fg-active, var(--xh-fg-default));
+    --xh-action-fg-focus-visible: var(--xh-table-sort-fg-active, var(--xh-fg-default));
   }
 
   /* 列宽把手贴在表头格的行尾侧。它压在相邻两列的接缝上，因此往外挪半个身位，
@@ -395,6 +621,12 @@
     display: none;
   }
 
+  /* 同一格里前面已有排序钮时，auto 外边距只归第一颗：两条 auto 会把余量平分，排序钮就被推到格中间；
+     列宽把手紧贴排序钮之后。藏起来的排序钮不占位，也就不该夺走这条边距 */
+  [data-scope='table'][data-part='sort-trigger']:not([hidden]) ~ [data-scope='table'][data-part='column-resize-trigger'] {
+    margin-inline-start: 0;
+  }
+
   /* 接缝上那条线。平时借表头的分隔色，按住与聚焦时换成品牌色好认 */
   [data-scope='table'][data-part='column-resize-trigger']::after {
     content: '';
@@ -407,15 +639,10 @@
 
   [data-scope='table'][data-part='column-resize-trigger']:hover::after,
   [data-scope='table'][data-part='column-resize-trigger'][data-resizing]::after {
-    background: var(--xh-table-resize-fg-active, var(--xh-border-control-focus));
+    background: var(--xh-table-resize-fg-active, var(--xh-bg-brand));
     block-size: 100%;
   }
 
-  [data-scope='table'][data-part='column-resize-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
   /* 不可改宽的列不显示把手：留着一条抓不动的线只会让人反复去试 */
   [data-scope='table'][data-part='column-resize-trigger'][data-disabled] {
     display: none;
@@ -467,12 +694,6 @@
      标题起点会错开一格 */
   [data-scope='table'][data-part='column-drag-trigger'][data-disabled] {
     color: var(--xh-table-drag-fg-disabled, var(--xh-fg-disabled));
-    cursor: not-allowed;
-  }
-
-  [data-scope='table'][data-part='column-drag-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
   }
 
   /* 落点指示线：拖到哪一列的哪一侧，线就画在那一列的那条边上。列头与表体的格子一起画，
@@ -493,7 +714,7 @@
     position: absolute;
     inset-block: 0;
     inline-size: var(--xh-table-drop-line, var(--xh-stroke-thick));
-    background: var(--xh-table-drop-fg, var(--xh-border-control-focus));
+    background: var(--xh-table-drop-fg, var(--xh-bg-brand));
   }
 
   /* 落在哪一侧走逻辑属性：rtl 下 before 自己就换到右边去了。
@@ -521,7 +742,7 @@
   /* 整行都是拖动源，光标换成抓手告诉人这一行按得动。
      这条不写 touch-action：整行关掉纵向手势，表格自己就滚不动了；
      触屏那一路交给下面那块专属把手 */
-  [data-scope='table'][data-part='row'][data-row-draggable] {
+  [data-scope='table'][data-part='row'][data-draggable] {
     cursor: grab;
   }
 
@@ -573,12 +794,6 @@
      首列内容的起点会错开一格 */
   [data-scope='table'][data-part='row-drag-trigger'][data-disabled] {
     color: var(--xh-table-row-drag-fg-disabled, var(--xh-fg-disabled));
-    cursor: not-allowed;
-  }
-
-  [data-scope='table'][data-part='row-drag-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
   }
 
   /* 被拖的行整行压暗，与被拖的列同一档透明度。这里只动 opacity、cursor 与 user-select，
@@ -612,7 +827,7 @@
     z-index: calc(var(--xh-table-sticky-column-layer, 1) + 1);
     inset-inline: 0;
     block-size: var(--xh-table-drop-line, var(--xh-stroke-thick));
-    background: var(--xh-table-drop-fg, var(--xh-border-control-focus));
+    background: var(--xh-table-drop-fg, var(--xh-bg-brand));
   }
 
   /* 线整条画在行内，不压着边。压着边画的话，首行那条上沿线会被表格根的圆角与滚动裁掉半条 */
@@ -631,7 +846,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]) {
-    background: var(--xh-table-drop-inside-bg, var(--xh-bg-brand-subtle));
+    /* 落点不是选中：品牌淡底专属选中（§7.1），落点面取悬停之上一档的中性面 */
+    background: var(--xh-table-drop-inside-bg, var(--xh-bg-subtle-hover));
   }
 
   /* 换父那一档的描边：与底色分两层画，因为它得压在横向吸附的格子之上——
@@ -645,7 +861,7 @@
     z-index: calc(var(--xh-table-sticky-column-layer, 1) + 1);
     inset: 0;
     box-shadow: inset 0 0 0 var(--xh-table-drop-line, var(--xh-stroke-thick))
-      var(--xh-table-drop-fg, var(--xh-border-control-focus));
+      var(--xh-table-drop-fg, var(--xh-bg-brand));
     /* 这一层盖满整行，让它不接指针，落点判定照旧落到行与格子上 */
     pointer-events: none;
   }
@@ -663,11 +879,16 @@
     border: 0;
   }
 
-  /* 排序方向用箭头字形表出来：aria-sort 只报给读屏，视觉侧也得有对应的东西 */
-  [data-scope='table'][data-part='sort-trigger']::after {
-    color: var(--xh-table-sort-fg, var(--xh-fg-subtle));
+  /* 排序方向用箭头字形表出来：aria-sort 只报给读屏，视觉侧也得有对应的东西。
+     箭头是指示符（§6.5）：尺寸读钮自己改接过的 --xh-icon-size（--xh-table-sort-size，缺省与方盒同边长），
+     与同一表头里的勾选框方盒、列拖拽把手同走 --xh-control-indicator-size，按图标档取的 20px 会比
+     16px 的方盒与列头文字都大一圈。:empty 守卫同展开箭头：作者塞了自己的图标就整个顶掉兜底；
+     flex: none 是因为 ghost 那圈透明描边仍占位，不钉住的话与盒同边长的箭头会被挤窄一个描边。
+     三态各写一遍尺寸：字形门禁逐条规则查兜底盒有没有按 --xh-icon-size 量 */
+  [data-scope='table'][data-part='sort-trigger']:empty::before {
     content: '';
     display: inline-block;
+    flex: none;
     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);
@@ -676,52 +897,50 @@
     mask: var(--xh-glyph-mark-sort) center / contain no-repeat;
   }
 
-  [data-scope='table'][data-part='sort-trigger'][data-sort='asc']::after {
-    color: var(--xh-table-sort-fg-active, var(--xh-fg-default));
-    content: '';
-    display: inline-block;
+  [data-scope='table'][data-part='sort-trigger'][data-sort='asc']:empty::before {
     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-sort-asc) center / contain no-repeat;
     mask: var(--xh-glyph-mark-sort-asc) center / contain no-repeat;
   }
 
-  [data-scope='table'][data-part='sort-trigger'][data-sort='desc']::after {
-    color: var(--xh-table-sort-fg-active, var(--xh-fg-default));
-    content: '';
-    display: inline-block;
+  [data-scope='table'][data-part='sort-trigger'][data-sort='desc']:empty::before {
     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-sort-desc) center / contain no-repeat;
     mask: var(--xh-glyph-mark-sort-desc) center / contain no-repeat;
   }
 
-  /* 多字段排序的优先级角标：链里第几环就显几，只在参与排序时才有 data-sort-index */
-  [data-scope='table'][data-part='sort-trigger'][data-sort-index]::before {
-    order: 1;
+  /* 多字段排序的优先级角标：链里第几环就显几，只在参与排序时才有 data-sort-index。
+     钮是定尺的 16px 方盒，数字排不进盒里：角标压在盒的行尾上角，写法同 Badge 的 top-end——
+     定位上下文由家族给（控件本身 position: relative），inset 走逻辑属性，rtl 下 end 自己换到左边 */
+  [data-scope='table'][data-part='sort-trigger'][data-sort-index]::after {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    translate: 50% -50%;
     color: var(--xh-table-sort-fg-active, var(--xh-fg-default));
     font-size: var(--xh-text-caption-size);
+    line-height: 1;
     content: attr(data-sort-index);
+    pointer-events: none;
+  }
+
+  /* rtl 下 translate 的行内轴要跟着翻，否则角标会往盒里面跑 */
+  [dir='rtl'] [data-scope='table'][data-part='sort-trigger'][data-sort-index]::after {
+    translate: -50% -50%;
   }
 
   [data-scope='table'][data-part='sort-trigger'][data-disabled] {
     cursor: default;
   }
 
-  [data-scope='table'][data-part='sort-trigger'][data-disabled]::after {
+  /* 排不了序的列不画箭头 */
+  [data-scope='table'][data-part='sort-trigger'][data-disabled]:empty::before {
     content: none;
   }
 
-  [data-scope='table'][data-part='sort-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: calc(-1 * var(--xh-ring-width));
-  }
-
-  /* 详情行：靠 hidden 收起，不卸载作者节点。内容长在它的单元格里，行本身只画底色 */
+  /* 详情行：靠 data-state 收起，不卸载作者节点。内容长在它的单元格里，行本身只画底色 */
   [data-scope='table'][data-part='expanded-row'] {
     display: flex;
     align-items: stretch;
@@ -736,14 +955,16 @@
     white-space: normal;
   }
 
-  /* 收起态的唯一开关：display 会盖掉 hidden 属性的 UA 规则，漏了这条详情行就收不起来 */
-  [data-scope='table'][data-part='expanded-row'][hidden] {
+  /* 收起态的唯一开关：display 会盖掉 hidden 属性的 UA 规则，漏了这条详情行就收不起来。
+     作者写的 hidden 与连接层发的 data-state=closed 都收在这里 */
+  [data-scope='table'][data-part='expanded-row'][hidden],
+  [data-scope='table'][data-part='expanded-row'][data-state='closed'] {
     display: none;
   }
 
   /* 两个状态节点常挂，只在表体为空时才显形 */
   [data-scope='table'][data-part='empty'],
-  [data-scope='table'][data-part='loading-state'] {
+  [data-scope='table'][data-part='loading'] {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -757,27 +978,55 @@
   }
 
   [data-scope='table'][data-part='empty'][hidden],
-  [data-scope='table'][data-part='loading-state'][hidden] {
+  [data-scope='table'][data-part='loading'][hidden] {
     display: none;
   }
 
-  [data-scope='table'][data-part='loading-state'] {
-    animation: xh-table-loading-pulse calc(var(--xh-spin-duration) / 2) var(--xh-ease-standard) infinite alternate;
+  [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;
+  }
+
+  /* 取下一页的按钮：铺满一行摆在表尾——铺满一行的独立动作条目，接 Action Control 的 row 档、
+     ghost 形态（§9.2）：宽度由容器给、高度随内容、按下只换面不缩放；盒几何、悬停 / 按下 / 禁用面、
+     焦点环与粗指针热区全由家族给，白底承载 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));
+    --xh-action-padding-inline: var(--xh-table-load-more-trigger-px, var(--xh-space-4));
+    --xh-action-radius: var(--xh-table-load-more-trigger-radius, var(--xh-shape-control));
+    --xh-action-bg-hover: var(--xh-table-load-more-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-fg-rest: var(--xh-table-load-more-trigger-fg, var(--xh-fg-brand-strong));
+    --xh-action-fg-hover: var(--xh-table-load-more-trigger-fg, var(--xh-fg-brand-strong));
+    --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 档允许换行、高度随内容，折行的文案走正文行高（§6.4） */
+    line-height: var(--xh-leading-normal);
+  }
+
+  [data-scope='table'][data-part='load-more-trigger'][hidden] {
+    display: none;
   }
 
   /* 减少动效：呼吸停下，加载态只留静止的文案。两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
   @media (prefers-reduced-motion: reduce) {
-    [data-scope='table'][data-part='loading-state'] {
+    [data-scope='table'][data-part='loading'] {
       animation: none;
     }
   }
 
-  :where([data-motion='reduce']) [data-scope='table'][data-part='loading-state'] {
+  :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;
@@ -789,9 +1038,11 @@
     mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
 
+  /* flex: none：方盒是 ghost 形态，家族那圈透明描边仍占位，不钉住的话与盒同边长的 chevron 会被挤窄一个描边 */
   [data-scope='table'][data-part='expand-trigger']:empty::before {
     content: '';
     display: inline-block;
+    flex: none;
     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);
@@ -799,4 +1050,39 @@
     -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
     mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
   }
+
+  @media print {
+    /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
+       取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
+       :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
+       并成一条之后这层配对关系在文本上就断了。 */
+    [data-scope='table'][data-part='loading'] {
+      animation: none;
+    }
+
+    /* 底色被丢掉：选中行那层淡底没了，与别的行一模一样。改画一条内收的实线框——
+       用 outline 不用 border：行是横排 flex，加边会把单元格整体往里推，没选中的行不加边，
+       同一屏上的列就对不齐了 */
+    [data-scope='table'][data-part='row'][data-selected] {
+      outline: var(--xh-stroke-thick) solid currentColor;
+      outline-offset: calc(-1 * var(--xh-stroke-thick));
+    }
+
+    /* 两个勾选框的实心底也被丢掉，配它的浅色勾落在白纸上就整个不见了——
+       勾与框都换成正文色，勾没勾在纸上才分得出 */
+    [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] {
+      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] {
+      color: var(--xh-fg-default);
+    }
+
+    /* 半选那枚横杠是伪元素画的，字色照旧留成透明把勾压住，只换横杠自己的颜色 */
+    [data-scope='table'][data-part='select-all-trigger'][data-state='indeterminate']::after {
+      background-color: var(--xh-fg-default);
+    }
+  }
 }