@xihan-ui/styles 1.0.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-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-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));
+    transition: none;
   }
 
-  /* 选中比高亮更"实"：它表达的是数据状态，翻页回来还在 */
-  [data-scope='table'][data-part='row'][data-selected] {
-    background: var(--xh-table-row-bg-selected, var(--xh-bg-subtle-active));
-  }
-
-  [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 */
@@ -226,20 +338,32 @@
   }
 
   /* —— 三个可叠加的外观开关 —— */
-  /* 斑马纹：表体偶数行换一层浅底；悬停与选中的底色仍按原规则盖过它 */
-  [data-scope='table'][data-part='root'][data-striped] [data-scope='table'][data-part='body'] > [data-scope='table'][data-part='row']:nth-of-type(even) {
-    background: var(--xh-table-row-bg-striped, var(--xh-bg-subtle));
+  /* 斑马纹：表体偶数行换一层浅底。它是最底下那一档，悬停、选中、落点都要盖得过它，
+     所以祖先链与 :nth-of-type 都收进 :where()——特指度落到与基础底同档（0-2-0），
+     只靠排在基础底之后压过它一条。照字面写祖先链是 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)) {
+    /* 改的是家族的 rest 槽而不是 background 本身：悬停、选中、按下各态由家族在同一支私有槽上解算，
+       直接写 background 会把它们全压掉 */
+    --xh-collection-bg-rest: var(--xh-table-row-bg-striped, var(--xh-bg-subtle));
+  }
+
+  /* 形态：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));
   }
 
-  /* 无外框：只留行间横线，圆角也随之无意义 */
-  [data-scope='table'][data-part='root'][data-borderless] {
-    border: 0;
-    border-radius: 0;
+  /* 淡底档：不画描边，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));
   }
 
@@ -247,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 {
@@ -305,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），只服务指针 */
@@ -328,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'] {
@@ -346,37 +569,326 @@
   }
 
   [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'] {
+    --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'][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));
+  }
+
+  /* 列宽把手贴在表头格的行尾侧。它压在相邻两列的接缝上，因此往外挪半个身位，
+     两边各留出一点可抓的余量——贴着边只有一两个像素能按到。 */
+  [data-scope='table'][data-part='column-resize-trigger'] {
     display: inline-flex;
-    flex: 1;
+    flex: none;
+    align-self: stretch;
+    inline-size: var(--xh-table-resize-width, var(--xh-space-2));
+    /* 推到行尾侧。把手在标记里是表头格的最后一个孩子，auto 外边距把它顶到那一头，
+       不必给每个表头格加定位上下文——那条会落到所有既有表格上 */
+    margin-inline-start: auto;
     align-items: center;
-    gap: var(--xh-table-sort-gap, var(--xh-space-1));
-    min-inline-size: 0;
+    justify-content: center;
+    cursor: col-resize;
+    touch-action: none;
+  }
+
+  [data-scope='table'][data-part='column-resize-trigger'][hidden] {
+    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: '';
+    display: block;
+    inline-size: var(--xh-table-resize-line, var(--xh-stroke-thin));
+    block-size: var(--xh-table-resize-line-length, 60%);
+    border-radius: var(--xh-table-resize-radius, var(--xh-shape-pill));
+    background: var(--xh-table-resize-fg, var(--xh-border-default));
+  }
+
+  [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-bg-brand));
+    block-size: 100%;
+  }
+
+  /* 不可改宽的列不显示把手：留着一条抓不动的线只会让人反复去试 */
+  [data-scope='table'][data-part='column-resize-trigger'][data-disabled] {
+    display: none;
+  }
+
+  /* 列拖拽把手贴在表头格的行首侧，位置由源码顺序定，不写 auto 外边距：
+     同一个表头格里的改宽把手已经用 margin-inline-start: auto 把自己顶到行尾侧，
+     再添一条 auto，剩余空白会在两条外边距之间平分，两个把手谁都到不了自己那一头。
+     待在行首侧还有一层好处：它的位置与这一列有多宽、格里有没有排序把手都无关 */
+  [data-scope='table'][data-part='column-drag-trigger'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-table-drag-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-table-drag-size, var(--xh-control-indicator-size));
     border-radius: var(--xh-table-trigger-radius, var(--xh-shape-control));
-    color: inherit;
-    font: inherit;
-    text-align: start;
-    cursor: pointer;
+    color: var(--xh-table-drag-fg, var(--xh-fg-subtle));
+    cursor: grab;
+    /* 关掉这一轴的默认手势：不关的话触屏上手指一划就被系统当成滚动收走 */
+    touch-action: none;
   }
 
-  [data-scope='table'][data-part='sort-trigger'][hidden] {
+  [data-scope='table'][data-part='column-drag-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 抓手是两条竖线：盒子取边框盒，两侧描边就是那两条线，宽高与线宽都走令牌。
+     :empty 守卫让作者塞进来的图标整个顶掉它，而不是两份叠在一起 */
+  [data-scope='table'][data-part='column-drag-trigger']:empty::after {
+    content: '';
+    display: block;
+    inline-size: var(--xh-table-drag-grip-w, var(--xh-space-1));
+    block-size: var(--xh-table-drag-grip-h, var(--xh-space-2));
+    border-inline: var(--xh-stroke-thin) solid currentColor;
+  }
+
+  [data-scope='table'][data-part='column-drag-trigger']:not([data-disabled]):hover,
+  [data-scope='table'][data-part='column-drag-trigger'][data-dragging] {
+    color: var(--xh-table-drag-fg-active, var(--xh-fg-default));
+  }
+
+  [data-scope='table'][data-part='column-drag-trigger'][data-dragging] {
+    cursor: grabbing;
+  }
+
+  /* 不可拖的列照样带一个把手，这里保住它的位置、只把它压到禁用色。
+     收成 display: none 是不行的：把手在行首侧，藏掉之后同一行里能拖与不能拖的两列，
+     标题起点会错开一格 */
+  [data-scope='table'][data-part='column-drag-trigger'][data-disabled] {
+    color: var(--xh-table-drag-fg-disabled, var(--xh-fg-disabled));
+  }
+
+  /* 落点指示线：拖到哪一列的哪一侧，线就画在那一列的那条边上。列头与表体的格子一起画，
+     线贯穿整张表才看得出这一列要落到哪儿。
+     定位上下文由这条规则自己给：列头与格子平时都不定位，缺了它伪元素会一路上溯到表格根，
+     线就飞到整张表的左上角去。
+     冻结列排除在外：它靠 position: sticky 钉住，在这儿改成 relative 会把吸附顶掉；
+     而冻结列既不可拖也不做落点，排除掉不会漏画任何一条线 */
+  [data-scope='table'][data-part='column-header'][data-drop]:not([data-frozen]),
+  [data-scope='table'][data-part='cell'][data-drop]:not([data-frozen]) {
+    position: relative;
+  }
+
+  /* 线整条画在盒内：列头与格子都收 overflow: hidden，压着边画会被裁掉半条 */
+  [data-scope='table'][data-part='column-header'][data-drop]:not([data-frozen])::after,
+  [data-scope='table'][data-part='cell'][data-drop]:not([data-frozen])::after {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inline-size: var(--xh-table-drop-line, var(--xh-stroke-thick));
+    background: var(--xh-table-drop-fg, var(--xh-bg-brand));
+  }
+
+  /* 落在哪一侧走逻辑属性：rtl 下 before 自己就换到右边去了。
+     换成 box-shadow: inset 的话偏移量是物理的，书写方向一反 before 与 after 就调个个儿 */
+  [data-scope='table'][data-part='column-header'][data-drop='before']:not([data-frozen])::after,
+  [data-scope='table'][data-part='cell'][data-drop='before']:not([data-frozen])::after {
+    inset-inline-start: 0;
+  }
+
+  [data-scope='table'][data-part='column-header'][data-drop='after']:not([data-frozen])::after,
+  [data-scope='table'][data-part='cell'][data-drop='after']:not([data-frozen])::after {
+    inset-inline-end: 0;
+  }
+
+  /* 被拖的那一列整列压暗，让人看得出正在搬的是它。这里只动 opacity 与 user-select，
+     一个 transform 都不写：冻结列是 position: sticky，祖先一有 transform 就掉出吸附。
+     位置的事全交给落点指示线，被拖的列自己原地不动 */
+  [data-scope='table'][data-part='column-header'][data-dragging],
+  [data-scope='table'][data-part='cell'][data-dragging] {
+    opacity: var(--xh-table-dragging-opacity, var(--xh-state-dragging-opacity));
+    user-select: none;
+  }
+
+  /* —— 行拖拽排序 —— */
+  /* 整行都是拖动源，光标换成抓手告诉人这一行按得动。
+     这条不写 touch-action：整行关掉纵向手势，表格自己就滚不动了；
+     触屏那一路交给下面那块专属把手 */
+  [data-scope='table'][data-part='row'][data-draggable] {
+    cursor: grab;
+  }
+
+  /* 行拖拽把手：行里的一小块专属拖动区，按下即拖。触屏靠它起手，
+     代价只是这一小块地方不再跟着表格滚。整行起手那一路原样保留，把手是叠加的第二个入口。
+     touch-action 不在这儿写：连接层按「拖不动就不写」把它写进了内联 style，
+     皮肤再写一遍会盖掉那份条件判断，让不可拖的行也白白让出滚动 */
+  [data-scope='table'][data-part='row-drag-trigger'] {
+    display: inline-flex;
+    flex: none;
+    /* 行是 align-items: stretch 的 flex 容器，不自己居中就会被拉成整行高 */
+    align-self: center;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-table-row-drag-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-table-row-drag-size, var(--xh-control-indicator-size));
+    border-radius: var(--xh-table-trigger-radius, var(--xh-shape-control));
+    color: var(--xh-table-row-drag-fg, var(--xh-fg-subtle));
+    cursor: grab;
+  }
+
+  [data-scope='table'][data-part='row-drag-trigger'][hidden] {
     display: none;
   }
 
-  /* 排序方向用箭头字形表出来：aria-sort 只报给读屏，视觉侧也得有对应的东西 */
-  [data-scope='table'][data-part='sort-trigger']::after {
-    color: var(--xh-table-sort-fg, var(--xh-fg-subtle));
+  /* 抓手是两条横线：盒子取边框盒，块向两侧的描边就是那两条线，宽高与线宽都走令牌。
+     线的走向与能拖的方向垂直——行沿块向上下排，画横线；列沿行向左右排，那边画的是竖线。
+     两处都用逻辑属性，书写模式一换，线跟着排列轴自己转过去。
+     :empty 守卫让作者塞进来的图标整个顶掉它，而不是两份叠在一起 */
+  [data-scope='table'][data-part='row-drag-trigger']:empty::after {
+    content: '';
+    display: block;
+    inline-size: var(--xh-table-row-drag-grip-long, var(--xh-space-2));
+    block-size: var(--xh-table-row-drag-grip-short, var(--xh-space-1));
+    border-block: var(--xh-stroke-thin) solid currentColor;
+  }
+
+  [data-scope='table'][data-part='row-drag-trigger']:not([data-disabled]):hover,
+  [data-scope='table'][data-part='row-drag-trigger'][data-dragging] {
+    color: var(--xh-table-row-drag-fg-active, var(--xh-fg-default));
+  }
+
+  [data-scope='table'][data-part='row-drag-trigger'][data-dragging] {
+    cursor: grabbing;
+  }
+
+  /* 不可拖的行照样带一个把手，这里保住它的位置、只把它压到禁用色。
+     收成 display: none 是不行的：把手占着行首那一格，藏掉之后同一张表里能拖与不能拖的两行，
+     首列内容的起点会错开一格 */
+  [data-scope='table'][data-part='row-drag-trigger'][data-disabled] {
+    color: var(--xh-table-row-drag-fg-disabled, var(--xh-fg-disabled));
+  }
+
+  /* 被拖的行整行压暗，与被拖的列同一档透明度。这里只动 opacity、cursor 与 user-select，
+     一个 transform 都不写：斑马纹按 nth-of-type 算、行间线按兄弟选择器算，两者认的都是 DOM 位置，
+     跟手让位会让它们在拖动全程与行错开。位置的事全交给落点指示线 */
+  [data-scope='table'][data-part='row'][data-dragging] {
+    opacity: var(--xh-table-dragging-opacity, var(--xh-state-dragging-opacity));
+    cursor: grabbing;
+    user-select: none;
+  }
+
+  /* 详情行与它的数据行是同一块，一起压暗 */
+  [data-scope='table'][data-part='expanded-row'][data-dragging] {
+    opacity: var(--xh-table-dragging-opacity, var(--xh-state-dragging-opacity));
+  }
+
+  /* 落点指示：插到两行之间画一条横线，落进一行里面画一整圈。两档都靠伪元素画，
+     定位上下文只给带 data-drop 的那一行：缺了它伪元素会一路上溯到表格根，指示飞到整张表的左上角；
+     写到所有行上则是给每一行都多担一份，而落点同一时刻只有一个 */
+  [data-scope='table'][data-part='row'][data-drop] {
+    position: relative;
+  }
+
+  /* 线贯穿整行宽度，并且要压在单元格之上：行是 flex 容器，横向吸附的格子带着层号，
+     伪元素不抬到它上面就会被盖住。
+     选择器逐值列出前后两档，不写成裸 [data-drop]：换父那一档用的是同一个 ::after，
+     裸写会让它先摊上一条线高的横条，再由下面那块整个改写 */
+  [data-scope='table'][data-part='row']:is([data-drop='before'], [data-drop='after'])::after {
+    content: '';
+    position: absolute;
+    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-bg-brand));
+  }
+
+  /* 线整条画在行内，不压着边。压着边画的话，首行那条上沿线会被表格根的圆角与滚动裁掉半条 */
+  [data-scope='table'][data-part='row'][data-drop='before']::after {
+    inset-block-start: 0;
+  }
+
+  [data-scope='table'][data-part='row'][data-drop='after']::after {
+    inset-block-end: 0;
+  }
+
+  /* 落进这一行里面（这一行成为新的父）：整行淡底，与上下沿那条横线一眼分得开。
+     底色打在行上而不是伪元素上，横向吸附的格子取的是 background: inherit，跟着一起换色，
+     横向滚过去时冻结列不会留下一块没上色的补丁。
+     祖先写到 root 与 body 两层，是为把特指度抬到 0-8-0：拖动时指针必然停在落点这一行上、
+     悬停恒真，而悬停那条是 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));
+  }
+
+  /* 换父那一档的描边：与底色分两层画，因为它得压在横向吸附的格子之上——
+     格子带着层号，画在行自己的背景层上会被首尾的冻结列盖掉半圈。
+     零偏移的内投影四边同时着色、不涉及方向，书写模式一换也不用调；
+     整圈画在行内不压着边，与上下沿那条横线同一口径。
+     行上不写 transform：冻结列是 position: sticky，祖先一有 transform 就掉出吸附 */
+  [data-scope='table'][data-part='row'][data-drop='inside']::after {
+    content: '';
+    position: absolute;
+    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-bg-brand));
+    /* 这一层盖满整行，让它不接指针，落点判定照旧落到行与格子上 */
+    pointer-events: none;
+  }
+
+  /* 活动区域只说给读屏听，不占版面。声明与 shared/visually-hidden.ts 逐条同值。 */
+  [data-scope='table'][data-part='live-region'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* 排序方向用箭头字形表出来：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);
@@ -385,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;
@@ -445,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;
@@ -466,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;
@@ -498,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);
@@ -508,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);
+    }
+  }
 }