@xihan-ui/styles 1.0.0 → 1.1.0

package/css/table.css

@@ -226,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));
   }
 
@@ -372,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

@@ -160,11 +160,150 @@
     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='trigger'][hidden],
+  [data-scope='tabs'][data-part='tab-drag-trigger'][hidden] {
     display: none;
   }
 }

package/css/tree.css

@@ -330,6 +330,135 @@
     mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
 
+  /* —— 节点拖拽搬家 —— */
+  /* 整行都是拖动源，光标换成抓手告诉人这一行按得动。
+     这条不写 touch-action：整行关掉纵向手势，树容器自己就滚不动了；
+     触屏那一路交给下面那块专属把手 */
+  [data-scope='tree'][data-part='item'][data-draggable],
+  [data-scope='tree'][data-part='branch-control'][data-draggable] {
+    cursor: grab;
+  }
+
+  /* 节点拖拽把手：行里的一小块专属拖动区，按下即拖。触屏靠它起手，
+     代价只是这一小块地方不再跟着树滚。整行起手那一路原样保留，把手是叠加的第二个入口。
+     touch-action 不在这儿写：连接层按「拖不动就不写」把它写进了内联 style，
+     皮肤再写一遍会盖掉那份条件判断，让不可拖的节点也白白让出滚动 */
+  [data-scope='tree'][data-part='node-drag-trigger'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-tree-drag-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-tree-drag-size, var(--xh-control-indicator-size));
+    border-radius: var(--xh-tree-drag-radius, var(--xh-shape-control));
+    color: var(--xh-tree-drag-fg, var(--xh-fg-subtle));
+    cursor: grab;
+  }
+
+  [data-scope='tree'][data-part='node-drag-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 抓手是两条横线：盒子取边框盒，块向两侧的描边就是那两条线，宽高与线宽都走令牌。
+     线的走向与能拖的方向垂直——节点沿块向上下排，画的就是横线。
+     用逻辑属性写，书写模式一换，线跟着排列轴自己转过去。
+     :empty 守卫让作者塞进来的图标整个顶掉它，而不是两份叠在一起 */
+  [data-scope='tree'][data-part='node-drag-trigger']:empty::after {
+    content: '';
+    display: block;
+    inline-size: var(--xh-tree-drag-grip-long, var(--xh-space-2));
+    block-size: var(--xh-tree-drag-grip-short, var(--xh-space-1));
+    border-block: var(--xh-stroke-thin) solid currentColor;
+  }
+
+  [data-scope='tree'][data-part='node-drag-trigger']:not([data-disabled]):hover,
+  [data-scope='tree'][data-part='node-drag-trigger'][data-dragging] {
+    color: var(--xh-tree-drag-fg-active, var(--xh-fg-default));
+  }
+
+  [data-scope='tree'][data-part='node-drag-trigger'][data-dragging] {
+    cursor: grabbing;
+  }
+
+  /* 不可拖的节点照样带一个把手，这里保住它的位置、只把它压到禁用色。
+     收成 display: none 是不行的：把手占着行首那一格，藏掉之后同一层里能拖与不能拖的两个节点，
+     文字起点会错开一格，层级关系跟着读歪 */
+  [data-scope='tree'][data-part='node-drag-trigger'][data-disabled] {
+    color: var(--xh-tree-drag-fg-disabled, var(--xh-fg-disabled));
+    cursor: not-allowed;
+  }
+
+  [data-scope='tree'][data-part='node-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='tree'][data-part='item'][data-dragging],
+  [data-scope='tree'][data-part='branch-control'][data-dragging] {
+    opacity: var(--xh-tree-dragging-opacity, var(--xh-state-dragging-opacity));
+    cursor: grabbing;
+    user-select: none;
+  }
+
+  /* 落点指示线：插到哪一行的哪一侧，横线就画在那一行的那条边上。
+     定位上下文只给要画线的那一行：行平时都不定位，缺了它伪元素会一路上溯到最近的定位祖先，
+     线就画到树外面去；写到所有行上则是给每一行都多担一份，而落点同一时刻只有一个。
+     整块高亮那一档不在此列：它不靠伪元素，用不着这层上下文 */
+  [data-scope='tree'][data-part='item']:is([data-drop='before'], [data-drop='after']),
+  [data-scope='tree'][data-part='branch-control']:is([data-drop='before'], [data-drop='after']) {
+    position: relative;
+  }
+
+  /* 线贯穿整行宽度。行自身不收 overflow，线不会被行裁掉；
+     但仍整条画在行内不压着边——压着边画的话，首行那条上沿线会被树容器的圆角与滚动裁掉半条 */
+  [data-scope='tree'][data-part='item']:is([data-drop='before'], [data-drop='after'])::after,
+  [data-scope='tree'][data-part='branch-control']:is([data-drop='before'], [data-drop='after'])::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    block-size: var(--xh-tree-drop-line, var(--xh-stroke-thick));
+    background: var(--xh-tree-drop-fg, var(--xh-border-control-focus));
+  }
+
+  /* 落在上沿还是下沿走逻辑属性，块向跟着书写模式走。
+     换成 box-shadow 的偏移量则是物理的，写不出逻辑方向 */
+  [data-scope='tree'][data-part='item'][data-drop='before']::after,
+  [data-scope='tree'][data-part='branch-control'][data-drop='before']::after {
+    inset-block-start: 0;
+  }
+
+  [data-scope='tree'][data-part='item'][data-drop='after']::after,
+  [data-scope='tree'][data-part='branch-control'][data-drop='after']::after {
+    inset-block-end: 0;
+  }
+
+  /* 放进这个节点里面：整行淡底加一圈内描边，与上下沿那条横线一眼分得开。
+     描边走零偏移的内投影，四边同时着色、不涉及方向，也跟着行的圆角走。
+     选择器里那条 :not([data-disabled]) 是把特指度补到与悬停那条齐平，再靠排在它之后压过它：
+     指针本来就停在落点这一行上，少了这一段，落点底色会被悬停那档灰盖掉。
+     禁用的节点从来不做落点，这一段因此不会漏画任何一处高亮 */
+  [data-scope='tree'][data-part='item'][data-drop='inside']:not([data-disabled]),
+  [data-scope='tree'][data-part='branch-control'][data-drop='inside']:not([data-disabled]) {
+    background: var(--xh-tree-drop-inside-bg, var(--xh-bg-brand-subtle));
+    box-shadow: inset 0 0 0 var(--xh-tree-drop-line, var(--xh-stroke-thick))
+      var(--xh-tree-drop-fg, var(--xh-border-control-focus));
+  }
+
+  /* 活动区域只说给读屏听，不占版面。声明与 shared/visually-hidden.ts 逐条同值。 */
+  [data-scope='tree'][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='tree'][data-part='branch-checkbox'][hidden] {

package/index.css

@@ -41,6 +41,7 @@
 @import './css/popselect.css';
 @import './css/qr-code.css';
 @import './css/reset.css';
+@import './css/resizable.css';
 @import './css/result.css';
 @import './css/segmented.css';
 @import './css/signature-pad.css';
@@ -108,6 +109,7 @@
 @import './css/separator.css';
 @import './css/side-nav.css';
 @import './css/slider.css';
+@import './css/sortable.css';
 @import './css/splitter.css';
 @import './css/steps.css';
 @import './css/switch.css';