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

package/css/steps.css

@@ -10,8 +10,8 @@
 
     /* 尺寸档只换这三个私有槽，序号圆点、标题与说明都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */
-    --xh-_steps-indicator-size: var(--xh-control-h-sm);
-    --xh-_steps-title-font-size: var(--xh-text-label-size);
+    --xh-_steps-indicator-size: var(--xh-space-7);
+    --xh-_steps-title-font-size: var(--xh-control-font-md);
     --xh-_steps-caption-font-size: var(--xh-text-caption-size);
 
     /* 语气落在走过与当前这两步的标记和连接线上：强调色画描边与填充，
@@ -153,8 +153,8 @@
     justify-content: center;
     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-shape-pill);
+    border: var(--xh-stroke-thin) solid var(--xh-steps-indicator-border, var(--xh-border-control));
+    border-radius: var(--xh-steps-indicator-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));
@@ -186,7 +186,7 @@
   }
 
   [data-scope='steps'][data-part='item'][data-disabled] [data-scope='steps'][data-part='indicator'] {
-    border-color: var(--xh-steps-indicator-border-disabled, var(--xh-fg-disabled));
+    border-color: var(--xh-steps-indicator-border-disabled, var(--xh-border-subtle));
     color: var(--xh-steps-indicator-fg-disabled, var(--xh-fg-disabled));
   }
 
@@ -222,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-shape-pill);
+    border-radius: var(--xh-steps-separator-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);
   }

package/css/switch.css

@@ -30,7 +30,7 @@
     block-size: var(--xh-_switch-track-h);
     padding: var(--xh-_switch-pad);
     border: 0;
-    border-radius: var(--xh-shape-pill);
+    border-radius: var(--xh-switch-radius, var(--xh-shape-pill));
     background: var(--xh-switch-bg, var(--xh-bg-subtle-active));
     cursor: pointer;
     transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
@@ -68,7 +68,7 @@
   [data-scope='switch'][data-part='thumb'] {
     inline-size: var(--xh-_switch-thumb-size);
     block-size: var(--xh-_switch-thumb-size);
-    border-radius: var(--xh-shape-pill);
+    border-radius: var(--xh-switch-thumb-radius, var(--xh-shape-pill));
     background: var(--xh-switch-thumb, var(--xh-bg-canvas));
     box-shadow: var(--xh-switch-thumb-shadow, var(--xh-elevation-raised));
     transition: translate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
@@ -134,4 +134,11 @@
     border-color: var(--xh-switch-loading-fg, var(--xh-bg-brand));
     animation: none;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='switch'][data-part='root'][hidden],
+  [data-scope='switch'][data-part='label'][hidden] {
+    display: none;
+  }
 }

package/css/table.css

@@ -19,13 +19,17 @@
 
   /* 表格自己滚动：吸顶表头与横向吸附列都要一个确定的滚动容器才钉得住 */
   [data-scope='table'][data-part='root'] {
+    /* 组件内那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
+       既不让页面上的层号插进来，也不让它们漏出去压住别人 */
+    isolation: isolate;
+
     /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
     --xh-icon-size: var(--xh-table-icon-size, var(--xh-glyph-size-text));
 
     /* 密度档只换这两个私有槽：单元格与列标题从 root 继承前者，字号靠 font-size 本身继承下去，
        换档不必给每个部件各写一条选择器，列宽那套算法也一点不碰 */
     --xh-_table-cell-py: var(--xh-table-cell-py-md);
-    --xh-_table-font-size: var(--xh-text-body-size);
+    --xh-_table-font-size: var(--xh-control-font-md);
 
     display: flex;
     position: relative;
@@ -222,8 +226,11 @@
   }
 
   /* —— 三个可叠加的外观开关 —— */
-  /* 斑马纹：表体偶数行换一层浅底；悬停与选中的底色仍按原规则盖过它 */
-  [data-scope='table'][data-part='root'][data-striped] [data-scope='table'][data-part='body'] > [data-scope='table'][data-part='row']:nth-of-type(even) {
+  /* 斑马纹：表体偶数行换一层浅底。它是最底下那一档，悬停、选中、落点都要盖得过它，
+     所以祖先链与 :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)) {
     background: var(--xh-table-row-bg-striped, var(--xh-bg-subtle));
   }
 
@@ -284,7 +291,8 @@
     color: transparent;
   }
 
-  /* 半选画一条横杠盖住勾：aria-checked=mixed 在视觉上也得与"全选"分得开 */
+  /* 半选换一枚横杠字形盖住勾：aria-checked=mixed 在视觉上也得与"全选"分得开。
+     横杠与勾同走字形令牌，作者换掉标记时两态一起换 */
   [data-scope='table'][data-part='select-all-trigger'][data-state='indeterminate'] {
     position: relative;
     color: transparent;
@@ -292,11 +300,12 @@
 
   [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-shape-pill);
-    background: var(--xh-table-trigger-fg, var(--xh-fg-on-brand));
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    background-color: var(--xh-table-trigger-fg, var(--xh-fg-on-brand));
     content: '';
+    -webkit-mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
   }
 
   [data-scope='table'][data-part='select-all-trigger'][data-disabled],
@@ -307,10 +316,12 @@
     cursor: not-allowed;
   }
 
-  /* 全选把手是表头里独立的 Tab 停靠点，环得画在它自己身上 */
+  /* 全选把手是表头里独立的 Tab 停靠点，环得画在它自己身上。
+     往内收，与行、排序把手同一口径：把手长在列头里，列头与根都收 overflow，
+     环画在外沿会被裁掉 */
   [data-scope='table'][data-part='select-all-trigger']:focus-visible {
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+    outline-offset: calc(-1 * var(--xh-ring-width));
   }
 
   /* 行选择把手不占 Tab 位（键盘那一路走 Space），只服务指针 */
@@ -364,6 +375,294 @@
     display: none;
   }
 
+  /* 列宽把手贴在表头格的行尾侧。它压在相邻两列的接缝上，因此往外挪半个身位，
+     两边各留出一点可抓的余量——贴着边只有一两个像素能按到。 */
+  [data-scope='table'][data-part='column-resize-trigger'] {
+    display: inline-flex;
+    flex: none;
+    align-self: stretch;
+    inline-size: var(--xh-table-resize-width, var(--xh-space-2));
+    /* 推到行尾侧。把手在标记里是表头格的最后一个孩子，auto 外边距把它顶到那一头，
+       不必给每个表头格加定位上下文——那条会落到所有既有表格上 */
+    margin-inline-start: auto;
+    align-items: center;
+    justify-content: center;
+    cursor: col-resize;
+    touch-action: none;
+  }
+
+  [data-scope='table'][data-part='column-resize-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 接缝上那条线。平时借表头的分隔色，按住与聚焦时换成品牌色好认 */
+  [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-border-control-focus));
+    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;
+  }
+
+  /* 列拖拽把手贴在表头格的行首侧，位置由源码顺序定，不写 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: var(--xh-table-drag-fg, var(--xh-fg-subtle));
+    cursor: grab;
+    /* 关掉这一轴的默认手势：不关的话触屏上手指一划就被系统当成滚动收走 */
+    touch-action: none;
+  }
+
+  [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));
+    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);
+  }
+
+  /* 落点指示线：拖到哪一列的哪一侧，线就画在那一列的那条边上。列头与表体的格子一起画，
+     线贯穿整张表才看得出这一列要落到哪儿。
+     定位上下文由这条规则自己给：列头与格子平时都不定位，缺了它伪元素会一路上溯到表格根，
+     线就飞到整张表的左上角去。
+     冻结列排除在外：它靠 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-border-control-focus));
+  }
+
+  /* 落在哪一侧走逻辑属性：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-row-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;
+  }
+
+  /* 抓手是两条横线：盒子取边框盒，块向两侧的描边就是那两条线，宽高与线宽都走令牌。
+     线的走向与能拖的方向垂直——行沿块向上下排，画横线；列沿行向左右排，那边画的是竖线。
+     两处都用逻辑属性，书写模式一换，线跟着排列轴自己转过去。
+     :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));
+    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，
+     一个 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-border-control-focus));
+  }
+
+  /* 线整条画在行内，不压着边。压着边画的话，首行那条上沿线会被表格根的圆角与滚动裁掉半条 */
+  [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]) {
+    background: var(--xh-table-drop-inside-bg, var(--xh-bg-brand-subtle));
+  }
+
+  /* 换父那一档的描边：与底色分两层画，因为它得压在横向吸附的格子之上——
+     格子带着层号，画在行自己的背景层上会被首尾的冻结列盖掉半圈。
+     零偏移的内投影四边同时着色、不涉及方向，书写模式一换也不用调；
+     整圈画在行内不压着边，与上下沿那条横线同一口径。
+     行上不写 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-border-control-focus));
+    /* 这一层盖满整行，让它不接指针，落点判定照旧落到行与格子上 */
+    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 只报给读屏，视觉侧也得有对应的东西 */
   [data-scope='table'][data-part='sort-trigger']::after {
     color: var(--xh-table-sort-fg, var(--xh-fg-subtle));

package/css/tabs.css

@@ -8,7 +8,7 @@
     /* 尺寸档只换这三个私有槽，标签从 root 继承它们，换档不必给每个部件各写一条选择器 */
     --xh-_tabs-trigger-h: var(--xh-control-h-md);
     --xh-_tabs-trigger-px: var(--xh-control-px-md);
-    --xh-_tabs-trigger-font-size: var(--xh-text-label-size);
+    --xh-_tabs-trigger-font-size: var(--xh-control-font-md);
 
     /* 形态档只换这几个私有槽：列表的底、内边距、基线，与标签的描边、选中底、选中态那道指示。
        缺省档（line）是一条基线加一行标签，选中只换文字色——这里的取值即现状 */
@@ -159,4 +159,151 @@
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }
+
+  /* —— 标签拖拽换位 —— */
+  /* 整张标签都是拖动源，光标换成抓手告诉人这张标签按得动。
+     这条不写 touch-action：整张标签关掉手势，标签带自己就滚不动了；
+     触屏那一路交给下面那块专属把手 */
+  [data-scope='tabs'][data-part='trigger'][data-draggable] {
+    cursor: grab;
+  }
+
+  /* 标签拖拽把手：标签里的一小块专属拖动区，按下即拖。触屏靠它起手，
+     代价只是这一小块地方不再跟着标签带滚。整张标签起手那一路原样保留，把手是叠加的第二个入口。
+     touch-action 不在这儿写：连接层按「拖不动就不写」把它写进了内联 style，
+     皮肤再写一遍会盖掉那份条件判断，让不可拖的标签也白白让出滚动 */
+  [data-scope='tabs'][data-part='tab-drag-trigger'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-tabs-drag-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-tabs-drag-size, var(--xh-control-indicator-size));
+    border-radius: var(--xh-tabs-drag-radius, var(--xh-shape-control));
+    color: var(--xh-tabs-drag-fg, var(--xh-fg-subtle));
+    cursor: grab;
+  }
+
+  /* 抓手是两条与排列轴垂直的线：盒子取边框盒，两侧描边就是那两条线，宽高与线宽都走令牌。
+     标签带横排时标签左右排开，画的是两条竖线；竖排那一档在下面换成横线。
+     基础这一档同时兜住 root 上没写方向的情形。
+     :empty 守卫让作者塞进来的图标整个顶掉它，而不是两份叠在一起 */
+  [data-scope='tabs'][data-part='tab-drag-trigger']:empty::after {
+    content: '';
+    display: block;
+    inline-size: var(--xh-tabs-drag-grip-short, var(--xh-space-1));
+    block-size: var(--xh-tabs-drag-grip-long, var(--xh-space-2));
+    border-inline: var(--xh-stroke-thin) solid currentColor;
+  }
+
+  /* 竖排的标签上下排开，两条线跟着转九十度：长短对调，描边换到块向两侧，
+     行向那两条得显式清零，否则四边都留着描边，抓手成了一个方框 */
+  [data-scope='tabs'][data-part='root'][data-orientation='vertical']
+    [data-scope='tabs'][data-part='tab-drag-trigger']:empty::after {
+    inline-size: var(--xh-tabs-drag-grip-long, var(--xh-space-2));
+    block-size: var(--xh-tabs-drag-grip-short, var(--xh-space-1));
+    border-inline: 0;
+    border-block: var(--xh-stroke-thin) solid currentColor;
+  }
+
+  [data-scope='tabs'][data-part='tab-drag-trigger']:not([data-disabled]):hover,
+  [data-scope='tabs'][data-part='tab-drag-trigger'][data-dragging] {
+    color: var(--xh-tabs-drag-fg-active, var(--xh-fg-default));
+  }
+
+  [data-scope='tabs'][data-part='tab-drag-trigger'][data-dragging] {
+    cursor: grabbing;
+  }
+
+  /* 不可拖的标签照样带一个把手，这里保住它的位置、只把它压到禁用色。
+     收成 display: none 是不行的：把手占着标签内的头一格，藏掉之后同一条标签带里
+     能拖与不能拖的两张标签，文字起点会错开一格 */
+  [data-scope='tabs'][data-part='tab-drag-trigger'][data-disabled] {
+    color: var(--xh-tabs-drag-fg-disabled, var(--xh-fg-disabled));
+    cursor: not-allowed;
+  }
+
+  [data-scope='tabs'][data-part='tab-drag-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 被拖的那张标签压暗，让人看得出正在搬的是它。这里只动 opacity、cursor 与 user-select，
+     一个 transform 都不写：标签原地不动，要落到哪儿全交给落点指示 */
+  [data-scope='tabs'][data-part='trigger'][data-dragging] {
+    opacity: var(--xh-tabs-dragging-opacity, var(--xh-state-dragging-opacity));
+    cursor: grabbing;
+    user-select: none;
+  }
+
+  /* 落点指示线：插到哪张标签的哪一侧，线就画在那张标签的那条边上。
+     定位上下文不必在这儿再给：标签的基础规则里已经是 position: relative。
+     线走 ::after：选中态那道指示画的是 box-shadow（card 档的顶边条、segment 档的浮起），
+     line 档只换文字色，标签上两个伪元素都空着，落点线不与谁抢。
+     标签自身不收 overflow，线不会被裁掉；仍整条画在盒内不压着边 */
+  [data-scope='tabs'][data-part='trigger']:is([data-drop='before'], [data-drop='after'])::after {
+    content: '';
+    position: absolute;
+    background: var(--xh-tabs-drop-fg, var(--xh-border-control-focus));
+  }
+
+  /* 线的方向跟着标签带的排法换：方向写在 root 的 data-orientation 上，从根往下选。
+     横排的标签左右排开，线是一条竖的，贯穿标签的块向、贴在行向的前后沿 */
+  [data-scope='tabs'][data-part='root'][data-orientation='horizontal']
+    [data-scope='tabs'][data-part='trigger']:is([data-drop='before'], [data-drop='after'])::after {
+    inset-block: 0;
+    inline-size: var(--xh-tabs-drop-line, var(--xh-stroke-thick));
+  }
+
+  /* 落在前沿还是后沿走逻辑属性：rtl 下 before 自己就换到右边去了。
+     换成 box-shadow 的偏移量则是物理的，写不出逻辑方向 */
+  [data-scope='tabs'][data-part='root'][data-orientation='horizontal']
+    [data-scope='tabs'][data-part='trigger'][data-drop='before']::after {
+    inset-inline-start: 0;
+  }
+
+  [data-scope='tabs'][data-part='root'][data-orientation='horizontal']
+    [data-scope='tabs'][data-part='trigger'][data-drop='after']::after {
+    inset-inline-end: 0;
+  }
+
+  /* 竖排的标签上下排开，线是一条横的，贯穿标签的行向、贴在块向的前后沿 */
+  [data-scope='tabs'][data-part='root'][data-orientation='vertical']
+    [data-scope='tabs'][data-part='trigger']:is([data-drop='before'], [data-drop='after'])::after {
+    inset-inline: 0;
+    block-size: var(--xh-tabs-drop-line, var(--xh-stroke-thick));
+  }
+
+  /* 块向同样走逻辑属性，跟着书写模式走 */
+  [data-scope='tabs'][data-part='root'][data-orientation='vertical']
+    [data-scope='tabs'][data-part='trigger'][data-drop='before']::after {
+    inset-block-start: 0;
+  }
+
+  [data-scope='tabs'][data-part='root'][data-orientation='vertical']
+    [data-scope='tabs'][data-part='trigger'][data-drop='after']::after {
+    inset-block-end: 0;
+  }
+
+  /* 活动区域只说给读屏听，不占版面。声明与 shared/visually-hidden.ts 逐条同值。 */
+  [data-scope='tabs'][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;
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='tabs'][data-part='root'][hidden],
+  [data-scope='tabs'][data-part='list'][hidden],
+  [data-scope='tabs'][data-part='trigger'][hidden],
+  [data-scope='tabs'][data-part='tab-drag-trigger'][hidden] {
+    display: none;
+  }
 }

package/css/tag.css

@@ -130,8 +130,10 @@
     color: var(--xh-tag-fg, var(--xh-fg-default));
   }
 
+  /* 描边档的边就是这枚标签的全部轮廓，走「可操作区边界」那一支：
+     兑了底色的 --xh-_tone-border 六族都在 1.44-2.18，当轮廓看不清 */
   [data-scope='tag'][data-part='root'][data-variant='outline'][data-tone] {
-    border-color: var(--xh-tag-border, var(--xh-_tone-border, var(--xh-border-default)));
+    border-color: var(--xh-tag-border, var(--xh-_tone-border-control, var(--xh-border-default)));
     color: var(--xh-tag-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
   }
 

package/css/tags-input.css

@@ -15,9 +15,9 @@
     --xh-_tags-input-control-h: var(--xh-control-h-md);
     --xh-_tags-input-control-px: var(--xh-control-px-md);
     --xh-_tags-input-control-gap: var(--xh-control-gap-md);
-    --xh-_tags-input-input-font-size: var(--xh-text-body-size);
-    --xh-_tags-input-item-font-size: var(--xh-text-secondary-size);
-    --xh-_tags-input-label-font-size: var(--xh-text-label-size);
+    --xh-_tags-input-input-font-size: var(--xh-control-font-md);
+    --xh-_tags-input-item-font-size: var(--xh-control-caption-md);
+    --xh-_tags-input-label-font-size: var(--xh-control-font-md);
     /* 形态档只换这三个私有槽，缺省这一份就是描边式（描边 + 画布底） */
     --xh-_tags-input-control-bg: var(--xh-bg-canvas);
     --xh-_tags-input-control-border: var(--xh-border-control);

package/css/text-field.css

@@ -16,9 +16,9 @@
     --xh-_text-field-h: var(--xh-control-h-md);
     --xh-_text-field-px: var(--xh-control-px-md);
     --xh-_text-field-gap: var(--xh-control-gap-md);
-    --xh-_text-field-font-size: var(--xh-text-body-size);
-    --xh-_text-field-label-font-size: var(--xh-text-label-size);
-    --xh-_text-field-action-font-size: var(--xh-text-secondary-size);
+    --xh-_text-field-font-size: var(--xh-control-font-md);
+    --xh-_text-field-label-font-size: var(--xh-control-font-md);
+    --xh-_text-field-action-font-size: var(--xh-control-caption-md);
 
     /* 形态档只换这三个私有槽：底、常态描边、悬停描边 */
     --xh-_text-field-bg: var(--xh-bg-canvas);