@xihan-ui/styles 1.0.0-alpha.1 → 1.0.0-alpha.3

package/css/splitter.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='splitter'] {
+    --xh-splitter-skin: 1;
+  }
+
   /* 分工：**面板在排布轴上的尺寸**由连接层每帧写进内联样式（flex-basis / flex-grow / flex-shrink）。
      这份皮肤一条都不碰——内联优先级高于样式表，写了不但是死声明，
      还会在切换 orientation 的那一帧跟连接层抢位置。皮肤只管排布方向、跨轴尺寸、

package/css/statistic.css

@@ -1,9 +1,14 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='statistic'] {
+    --xh-statistic-skin: 1;
+  }
+
   /* 三个尺寸档只换这几个私有槽，各段从 root 继承它们，换档不必给每个部件各写一条选择器 */
   [data-scope='statistic'][data-part='root'] {
-    --xh-_statistic-label-size: var(--xh-font-size-sm);
-    --xh-_statistic-value-size: var(--xh-font-size-2xl);
-    --xh-_statistic-affix-size: var(--xh-font-size-md);
+    --xh-_statistic-label-size: var(--xh-control-caption-md);
+    --xh-_statistic-value-size: var(--xh-text-heading-2-size);
+    --xh-_statistic-affix-size: var(--xh-control-font-md);
     --xh-_statistic-row-gap: var(--xh-space-1);
 
     /* 折行排布：标签独占一行，前缀、数值、后缀在下一行按基线对齐排在一起 */
@@ -23,16 +28,16 @@
 
   /* —— 尺寸 —— */
   [data-scope='statistic'][data-part='root'][data-size='sm'] {
-    --xh-_statistic-label-size: var(--xh-font-size-xs);
-    --xh-_statistic-value-size: var(--xh-font-size-xl);
-    --xh-_statistic-affix-size: var(--xh-font-size-sm);
+    --xh-_statistic-label-size: var(--xh-control-caption-sm);
+    --xh-_statistic-value-size: var(--xh-text-heading-3-size);
+    --xh-_statistic-affix-size: var(--xh-control-font-sm);
     --xh-_statistic-row-gap: var(--xh-space-0_5);
   }
 
   [data-scope='statistic'][data-part='root'][data-size='lg'] {
-    --xh-_statistic-label-size: var(--xh-font-size-md);
-    --xh-_statistic-value-size: var(--xh-font-size-3xl);
-    --xh-_statistic-affix-size: var(--xh-font-size-lg);
+    --xh-_statistic-label-size: var(--xh-control-caption-lg);
+    --xh-_statistic-value-size: var(--xh-text-heading-1-size);
+    --xh-_statistic-affix-size: var(--xh-control-font-lg);
     --xh-_statistic-row-gap: var(--xh-space-1_5);
   }
 

package/css/steps.css

@@ -1,10 +1,18 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='steps'] {
+    --xh-steps-skin: 1;
+  }
+
   [data-scope='steps'][data-part='root'] {
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-steps-icon-size, var(--xh-glyph-size-text));
+
     /* 尺寸档只换这三个私有槽，序号圆点、标题与说明都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */
     --xh-_steps-indicator-size: var(--xh-control-h-sm);
     --xh-_steps-title-font-size: var(--xh-text-label-size);
-    --xh-_steps-caption-font-size: var(--xh-font-size-xs);
+    --xh-_steps-caption-font-size: var(--xh-text-caption-size);
 
     /* 语气落在走过与当前这两步的标记和连接线上：强调色画描边与填充，
        accent-text 是普通底上的强调文字（当前步的序号），on-accent 是实心底上的前景。
@@ -32,14 +40,14 @@
      两侧改从 space 档取，缺省档才留得住 */
   [data-scope='steps'][data-part='root'][data-size='sm'] {
     --xh-_steps-indicator-size: var(--xh-space-6);
-    --xh-_steps-title-font-size: var(--xh-font-size-sm);
+    --xh-_steps-title-font-size: var(--xh-control-font-sm);
     /* 字号档最小就是 xs，序号与说明不再往下走，故不重声明 caption */
   }
 
   [data-scope='steps'][data-part='root'][data-size='lg'] {
     --xh-_steps-indicator-size: var(--xh-space-8);
-    --xh-_steps-title-font-size: var(--xh-font-size-lg);
-    --xh-_steps-caption-font-size: var(--xh-font-size-sm);
+    --xh-_steps-title-font-size: var(--xh-control-font-lg);
+    --xh-_steps-caption-font-size: var(--xh-text-secondary-size);
   }
 
   [data-scope='steps'][data-part='list'] {
@@ -100,7 +108,9 @@
     grid-template-columns: auto minmax(0, 1fr);
     align-items: center;
     column-gap: var(--xh-steps-trigger-gap, var(--xh-control-gap-md));
-    padding: var(--xh-steps-trigger-p, var(--xh-space-1));
+    /* 纵向留一圈给悬停底色与焦点环，横向走控件内边距尺的小档；一个槽同时盖住两轴 */
+    padding-block: var(--xh-steps-trigger-p, var(--xh-space-1));
+    padding-inline: var(--xh-steps-trigger-p, var(--xh-control-px-sm));
     border: 0;
     border-radius: var(--xh-steps-trigger-radius, var(--xh-shape-control));
     background: transparent;
@@ -144,7 +154,7 @@
     inline-size: var(--xh-steps-indicator-size, var(--xh-_steps-indicator-size));
     block-size: var(--xh-steps-indicator-size, var(--xh-_steps-indicator-size));
     border: var(--xh-stroke-thin) solid var(--xh-steps-indicator-border, var(--xh-border-strong));
-    border-radius: var(--xh-radius-full);
+    border-radius: var(--xh-shape-pill);
     background: var(--xh-steps-indicator-bg, transparent);
     color: var(--xh-steps-indicator-fg, var(--xh-fg-muted));
     font-size: var(--xh-steps-indicator-font-size, var(--xh-_steps-caption-font-size));
@@ -212,7 +222,7 @@
     flex: 1;
     min-inline-size: var(--xh-steps-separator-min-length, var(--xh-space-4));
     block-size: var(--xh-steps-separator-thickness, var(--xh-stroke-thick));
-    border-radius: var(--xh-radius-full);
+    border-radius: var(--xh-shape-pill);
     background: var(--xh-steps-separator-bg, var(--xh-border-default));
     transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
@@ -233,7 +243,7 @@
     /* 圆点半径减去线宽的一半：calc 里的除法要写成乘 0.5，除号在这儿是无效语法 */
     margin-inline-start: calc(
       var(--xh-steps-indicator-size, var(--xh-_steps-indicator-size)) * 0.5
-      + var(--xh-steps-trigger-p, var(--xh-space-1))
+      + var(--xh-steps-trigger-p, var(--xh-control-px-sm))
       - var(--xh-steps-separator-thickness, var(--xh-stroke-thick)) * 0.5
     );
   }
@@ -249,4 +259,16 @@
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  [data-scope='steps'][data-part='indicator'][data-state='completed']: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;
+  }
 }

package/css/switch.css

@@ -1,9 +1,23 @@
+@layer xihan.motion {
+  /* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
+  @keyframes xh-switch-rotate {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='switch'] {
+    --xh-switch-skin: 1;
+  }
+
   [data-scope='switch'][data-part='root'] {
     /* 尺寸档只换轨道高度这一个私有槽，其余几何都从它算出来：
        滑块边长 = 轨道高 − 两条留白，轨道宽 = 两倍轨道高 − 两条留白，滑块行程因此正好等于自身边长 */
-    --xh-_switch-track-h: var(--xh-font-size-2xl);
-    --xh-_switch-pad: 2px;
+    --xh-_switch-track-h: var(--xh-switch-track-h-md);
+    --xh-_switch-pad: var(--xh-space-0_5);
     --xh-_switch-thumb-size: calc(var(--xh-_switch-track-h) - var(--xh-_switch-pad) * 2);
 
     /* 选中态轨道色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的品牌色 */
@@ -26,6 +40,11 @@
     background: var(--xh-switch-bg-checked, var(--xh-_switch-accent));
   }
 
+  /* 校验失败：轨道描一圈警示色。轨道本身没有边框，这里补出来 */
+  [data-scope='switch'][data-part='root'][data-invalid] {
+    box-shadow: inset 0 0 0 var(--xh-stroke-thin) var(--xh-switch-border-invalid, var(--xh-border-invalid));
+  }
+
   [data-scope='switch'][data-part='root'][data-disabled] {
     cursor: not-allowed;
     opacity: var(--xh-state-disabled-opacity);
@@ -39,11 +58,11 @@
   /* —— 尺寸 —— */
   /* 缺省档写在上面的基础规则里 */
   [data-scope='switch'][data-part='root'][data-size='sm'] {
-    --xh-_switch-track-h: var(--xh-font-size-xl);
+    --xh-_switch-track-h: var(--xh-switch-track-h-sm);
   }
 
   [data-scope='switch'][data-part='root'][data-size='lg'] {
-    --xh-_switch-track-h: var(--xh-font-size-3xl);
+    --xh-_switch-track-h: var(--xh-switch-track-h-lg);
   }
 
   [data-scope='switch'][data-part='thumb'] {
@@ -51,7 +70,7 @@
     block-size: var(--xh-_switch-thumb-size);
     border-radius: var(--xh-shape-pill);
     background: var(--xh-switch-thumb, var(--xh-bg-canvas));
-    box-shadow: var(--xh-elevation-1);
+    box-shadow: var(--xh-switch-thumb-shadow, var(--xh-elevation-raised));
     transition: translate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -59,13 +78,6 @@
     translate: var(--xh-_switch-thumb-size) 0;
   }
 
-  /* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
-  @keyframes xh-switch-rotate {
-    to {
-      transform: rotate(1turn);
-    }
-  }
-
   /* 提交中：指针挂起、滑块里转圈；不是禁用，焦点与对比度都保持 */
   [data-scope='switch'][data-part='root'][data-loading] {
     cursor: wait;
@@ -83,6 +95,43 @@
     border: var(--xh-stroke-thin) solid transparent;
     border-block-start-color: var(--xh-switch-loading-fg, var(--xh-bg-brand));
     border-radius: var(--xh-shape-pill);
-    animation: xh-switch-rotate var(--xh-switch-loading-duration, calc(var(--xh-duration-slow) * 2)) linear infinite;
+    animation: xh-switch-rotate var(--xh-switch-loading-duration, var(--xh-spin-duration)) linear infinite;
+  }
+
+  /* —— 带文字的整行：<label> 包住控件与文字，与 checkbox-group 的条目同一副样子 —— */
+  [data-scope='switch'][data-part='label'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-switch-label-gap, var(--xh-control-gap-md));
+    color: var(--xh-switch-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-switch-label-font-size, var(--xh-text-label-size));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+  }
+
+  [data-scope='switch'][data-part='label'][data-disabled] {
+    color: var(--xh-switch-label-fg-disabled, var(--xh-fg-disabled));
+    cursor: not-allowed;
+  }
+
+  [data-scope='switch'][data-part='text'] {
+    color: inherit;
+    user-select: none;
+  }
+
+  /* 减少动效：圆环停下并整圈换成虚线，静止的形状仍然读得出"还没好"。
+     两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='switch'][data-part='thumb'][data-loading]::after {
+      border-style: dotted;
+      border-color: var(--xh-switch-loading-fg, var(--xh-bg-brand));
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='switch'][data-part='thumb'][data-loading]::after {
+    border-style: dotted;
+    border-color: var(--xh-switch-loading-fg, var(--xh-bg-brand));
+    animation: none;
   }
 }

package/css/table.css

@@ -9,26 +9,28 @@
       opacity: 1;
     }
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='table'][data-part='loading-state'] {
-      animation-duration: 0.01ms !important;
-    }
-  }
 }
 
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='table'] {
+    --xh-table-skin: 1;
+  }
+
   /* 表格自己滚动：吸顶表头与横向吸附列都要一个确定的滚动容器才钉得住 */
   [data-scope='table'][data-part='root'] {
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-table-icon-size, var(--xh-glyph-size-text));
+
     /* 密度档只换这两个私有槽：单元格与列标题从 root 继承前者，字号靠 font-size 本身继承下去，
        换档不必给每个部件各写一条选择器，列宽那套算法也一点不碰 */
-    --xh-_table-cell-py: var(--xh-space-2);
+    --xh-_table-cell-py: var(--xh-table-cell-py-md);
     --xh-_table-font-size: var(--xh-text-body-size);
 
     display: flex;
     position: relative;
     flex-direction: column;
-    max-block-size: var(--xh-table-max-h, 24rem);
+    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));
     background: var(--xh-table-bg, var(--xh-bg-surface));
@@ -42,6 +44,15 @@
     display: none;
   }
 
+  /* 放进滚动区的表格：滚动交给滚动区的视口，表格自己不再定高、不再滚；
+     吸顶表头与吸附列钉的是最近的滚动容器，于是也就钉在视口上。
+     自定义元素那条路上 <xh-table> 宿主夹在内容层与表格根之间，两种嵌法都认 */
+  [data-scope='scroll-area'][data-part='content'] > [data-scope='table'][data-part='root'],
+  [data-scope='scroll-area'][data-part='content'] > xh-table > [data-scope='table'][data-part='root'] {
+    max-block-size: none;
+    overflow: visible;
+  }
+
   /* 纯容器：焦点落它身上不画环，高亮永远长在行上 */
   [data-scope='table'][data-part='root']:focus-visible {
     outline: none;
@@ -50,13 +61,13 @@
   /* —— 密度 —— */
   /* 中间档不写规则，缺省即中档 */
   [data-scope='table'][data-part='root'][data-size='sm'] {
-    --xh-_table-cell-py: var(--xh-space-1);
-    --xh-_table-font-size: var(--xh-font-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-_table-cell-py: var(--xh-space-3);
-    --xh-_table-font-size: var(--xh-font-size-lg);
+    --xh-_table-cell-py: var(--xh-table-cell-py-lg);
+    --xh-_table-font-size: var(--xh-control-font-lg);
   }
 
   [data-scope='table'][data-part='caption'] {
@@ -103,7 +114,7 @@
      透明的表头会让底下滚过的行透出来 */
   [data-scope='table'][data-part='header'][data-sticky] {
     position: sticky;
-    z-index: var(--xh-table-sticky-header-z, var(--xh-layer-sticky));
+    z-index: var(--xh-table-sticky-header-layer, var(--xh-layer-sticky));
     inset-block-start: 0;
   }
 
@@ -116,7 +127,6 @@
   [data-scope='table'][data-part='row'] {
     display: flex;
     align-items: stretch;
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-table-row-border, var(--xh-border-subtle));
     /* 背景要实色：横向吸附的单元格靠 inherit 取它，透明会让滚过的内容透出来 */
     background: var(--xh-table-row-bg, var(--xh-bg-surface));
   }
@@ -130,9 +140,9 @@
     background: transparent;
   }
 
-  /* 末行不画分隔线：容器自己有边框，两条叠在一起会显出一道粗边 */
-  [data-scope='table'][data-part='body'] > [data-scope='table'][data-part='row']:last-child {
-    border-block-end: none;
+  /* 行间线画在后一行的上沿，区段里第一个可见行不画：行只负责行与行之间，外边界归 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 跟的是连接层记的焦点行，
@@ -185,16 +195,50 @@
     user-select: none;
   }
 
-  /* 横向吸附：钉在滚动容器的行首侧。背景继承自行，跟着选中/高亮一起变，
-     滚过去时不会露出一块与所在行不同色的补丁 */
-  [data-scope='table'][data-part='column-header'][data-sticky],
-  [data-scope='table'][data-part='cell'][data-sticky] {
+  /* 横向吸附：钉在滚动容器的一侧。背景继承自行，跟着选中/高亮一起变，
+     滚过去时不会露出一块与所在行不同色的补丁。
+     同侧多列时的偏移由连接层按前面各列的宽度累加好写进 --xh-table-sticky-inset */
+  [data-scope='table'][data-part='column-header'][data-frozen],
+  [data-scope='table'][data-part='cell'][data-frozen] {
     position: sticky;
-    z-index: var(--xh-table-sticky-column-z, 1);
-    inset-inline-start: 0;
+    z-index: var(--xh-table-sticky-column-layer, 1);
     background: inherit;
   }
 
+  [data-scope='table'][data-part='column-header'][data-frozen='start'],
+  [data-scope='table'][data-part='cell'][data-frozen='start'] {
+    inset-inline-start: var(--xh-table-sticky-inset, 0);
+  }
+
+  [data-scope='table'][data-part='column-header'][data-frozen='end'],
+  [data-scope='table'][data-part='cell'][data-frozen='end'] {
+    inset-inline-end: var(--xh-table-sticky-inset, 0);
+  }
+
+  /* 表头行本身透明（露出表头底），吸附的列头继承到的就是透明——得自己带表头底，
+     否则横向滚动时其它列头从它下面穿过去 */
+  [data-scope='table'][data-part='column-header'][data-frozen] {
+    background: var(--xh-table-header-bg, var(--xh-bg-subtle));
+  }
+
+  /* —— 三个可叠加的外观开关 —— */
+  /* 斑马纹：表体偶数行换一层浅底；悬停与选中的底色仍按原规则盖过它 */
+  [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));
+  }
+
+  /* 无外框：只留行间横线，圆角也随之无意义 */
+  [data-scope='table'][data-part='root'][data-borderless] {
+    border: 0;
+    border-radius: 0;
+  }
+
+  /* 竖分隔线：列与列之间一道细线，末列不画 */
+  [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) {
+    border-inline-end: var(--xh-stroke-thin) solid var(--xh-table-row-border, var(--xh-border-subtle));
+  }
+
   [data-scope='table'][data-part='cell'][data-disabled] {
     color: var(--xh-fg-disabled);
   }
@@ -207,8 +251,8 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--xh-table-trigger-size, 1rem);
-    block-size: var(--xh-table-trigger-size, 1rem);
+    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;
   }
@@ -228,29 +272,29 @@
     visibility: visible;
   }
 
-  [data-scope='table'][data-part='select-all-trigger']:is([data-state='all'], [data-state='some']),
+  [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-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));
   }
 
   /* 未选中时勾不出现，但盒子还在：它是边框画出来的空框 */
-  [data-scope='table'][data-part='select-all-trigger'][data-state='none'],
+  [data-scope='table'][data-part='select-all-trigger'][data-state='unchecked'],
   [data-scope='table'][data-part='row-select-trigger']:not([data-selected]) {
     color: transparent;
   }
 
   /* 半选画一条横杠盖住勾：aria-checked=mixed 在视觉上也得与"全选"分得开 */
-  [data-scope='table'][data-part='select-all-trigger'][data-state='some'] {
+  [data-scope='table'][data-part='select-all-trigger'][data-state='indeterminate'] {
     position: relative;
     color: transparent;
   }
 
-  [data-scope='table'][data-part='select-all-trigger'][data-state='some']::after {
+  [data-scope='table'][data-part='select-all-trigger'][data-state='indeterminate']::after {
     position: absolute;
     inline-size: 60%;
     block-size: var(--xh-stroke-thick);
-    border-radius: var(--xh-radius-full);
+    border-radius: var(--xh-shape-pill);
     background: var(--xh-table-trigger-fg, var(--xh-fg-on-brand));
     content: '';
   }
@@ -323,24 +367,45 @@
   /* 排序方向用箭头字形表出来：aria-sort 只报给读屏，视觉侧也得有对应的东西 */
   [data-scope='table'][data-part='sort-trigger']::after {
     color: var(--xh-table-sort-fg, var(--xh-fg-subtle));
-    content: '↕';
+    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-sort) center / contain no-repeat;
+    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: '↑';
+    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-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: '↓';
+    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-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;
     color: var(--xh-table-sort-fg-active, var(--xh-fg-default));
-    font-size: var(--xh-font-size-xs);
+    font-size: var(--xh-text-caption-size);
     content: attr(data-sort-index);
   }
 
@@ -357,11 +422,10 @@
     outline-offset: calc(-1 * var(--xh-ring-width));
   }
 
-  /* 详情行：靠 hidden 收起，不卸载作者节点。内容长在它的单元格里，行本身只画底色与分隔线 */
+  /* 详情行：靠 hidden 收起，不卸载作者节点。内容长在它的单元格里，行本身只画底色 */
   [data-scope='table'][data-part='expanded-row'] {
     display: flex;
     align-items: stretch;
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-table-row-border, var(--xh-border-subtle));
     background: var(--xh-table-detail-bg, var(--xh-bg-subtle));
   }
 
@@ -399,6 +463,41 @@
   }
 
   [data-scope='table'][data-part='loading-state'] {
-    animation: xh-table-loading-pulse var(--xh-duration-slow) var(--xh-ease-standard) infinite alternate;
+    animation: xh-table-loading-pulse calc(var(--xh-spin-duration) / 2) var(--xh-ease-standard) infinite alternate;
+  }
+
+  /* 减少动效：呼吸停下，加载态只留静止的文案。两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='table'][data-part='loading-state'] {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='table'][data-part='loading-state'] {
+    animation: none;
+  }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  [data-scope='table'][data-part='select-all-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;
+  }
+
+  [data-scope='table'][data-part='expand-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-chevron-right) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
   }
 }

package/css/tabs.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='tabs'] {
+    --xh-tabs-skin: 1;
+  }
+
   [data-scope='tabs'][data-part='root'] {
     /* 尺寸档只换这三个私有槽，标签从 root 继承它们，换档不必给每个部件各写一条选择器 */
     --xh-_tabs-trigger-h: var(--xh-control-h-md);
@@ -10,7 +15,7 @@
     --xh-_tabs-list-gap: var(--xh-control-gap-md);
     --xh-_tabs-list-bg: transparent;
     --xh-_tabs-list-p: var(--xh-space-0);
-    --xh-_tabs-list-radius: var(--xh-radius-none);
+    --xh-_tabs-list-radius: 0;
     --xh-_tabs-list-border-width: var(--xh-stroke-thin);
     --xh-_tabs-trigger-border-width: 0;
     --xh-_tabs-trigger-border: transparent;
@@ -39,13 +44,13 @@
   [data-scope='tabs'][data-part='root'][data-size='sm'] {
     --xh-_tabs-trigger-h: var(--xh-control-h-sm);
     --xh-_tabs-trigger-px: var(--xh-control-px-sm);
-    --xh-_tabs-trigger-font-size: var(--xh-font-size-sm);
+    --xh-_tabs-trigger-font-size: var(--xh-control-font-sm);
   }
 
   [data-scope='tabs'][data-part='root'][data-size='lg'] {
     --xh-_tabs-trigger-h: var(--xh-control-h-lg);
     --xh-_tabs-trigger-px: var(--xh-control-px-lg);
-    --xh-_tabs-trigger-font-size: var(--xh-font-size-lg);
+    --xh-_tabs-trigger-font-size: var(--xh-control-font-lg);
   }
 
   /* —— 形态 —— */
@@ -71,7 +76,7 @@
     --xh-_tabs-list-border-width: 0;
     --xh-_tabs-trigger-bg-active: var(--xh-_tone-subtle, var(--xh-bg-surface));
     --xh-_tabs-trigger-bg-active-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-surface));
-    --xh-_tabs-trigger-shadow-active: var(--xh-elevation-1);
+    --xh-_tabs-trigger-shadow-active: var(--xh-elevation-raised);
   }
 
   [data-scope='tabs'][data-part='list'] {