@xihan-ui/styles 2.0.0 → 3.0.0

package/css/tabs.css

@@ -25,7 +25,7 @@
     /* 缺省是 line 变体：透明标签带，选中项由文字与底部指示条表达。Web Components 升级前还没有
        data-variant，这组几何基础值也必须画成相同结果，避免定义完成时闪换样式；line 档的面与字色由家族
        按升级后写入的家族角色给，升级前那一帧只有几何没有面色（与 side-nav / menu 同）。
-       悬停与按下的面按承载面分档（§7.2）：line 档经家族走白底承载 hover 100 → pressed 200；card 坐在
+       悬停与按下的面按承载面分档：line 档经家族走白底承载 hover 100 → pressed 200；card 坐在
        画布上 hover 100 → pressed 200；segment 坐在淡底轨道里 hover 200 → pressed 300。card / segment 的
        六支面槽只在各自形态块里赋值，line 档不消费它们 */
     --xh-_tabs-list-gap: var(--xh-space-0);
@@ -43,8 +43,11 @@
     --xh-_tabs-accent-text: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 
     /* 翻页钮的盖底：标签带放不下时它浮在两端，挪到它底下的那截标签要被盖住。line / card 档的标签带是透明的，
-       盖底取 surface；坐在别的面上（画布、淡底面板）时由使用者槽换成所在的面。segment 档取轨道的淡底 */
+       盖底取 surface；坐在别的面上（画布、淡底面板）时由使用者槽换成所在的面。segment 档取轨道的淡底。
+       悬停与按下同样要盖得住：淡底阶梯取不透明档，line / card 在白底上 100 → 200，segment 在轨道上 200 → 300 */
     --xh-_tabs-scroll-trigger-bg: var(--xh-bg-surface);
+    --xh-_tabs-scroll-trigger-bg-hover: var(--xh-bg-subtle-opaque);
+    --xh-_tabs-scroll-trigger-bg-pressed: var(--xh-bg-subtle-hover-opaque);
 
     display: flex;
     flex-direction: column;
@@ -87,7 +90,7 @@
   }
 
   /* 卡片式：基线收掉，选中的那张标签自己成为一张有描边有底的卡片，顶边一条指示条。
-     标签坐在画布上，悬停 100 → 按下 200（§7.2 白底承载） */
+     标签坐在画布上，悬停 100 → 按下 200（白底承载） */
   [data-scope='tabs'][data-part='root'][data-variant='card'] {
     --xh-_tabs-list-gap: var(--xh-control-gap-md);
     --xh-_tabs-list-bg: transparent;
@@ -106,7 +109,7 @@
     --xh-_tabs-accent-text: var(--xh-_tone-fg, var(--xh-fg-default));
   }
 
-  /* 分段式（§7.3 有滑块开关）：淡底轨道承载一块白色抬起的选中面，选中文字保持默认字色。
+  /* 分段式（有滑块开关）：淡底轨道承载一块白色抬起的选中面，选中文字保持默认字色。
      未选中标签坐在淡底轨道里，悬停 200 → 按下 300；选中面自己不再叠悬停 / 按下态。
      选中面的三件（surface-raised 底、border-default 描边、raised 影）写在下面标签自己的规则里 */
   [data-scope='tabs'][data-part='root'][data-variant='segment'] {
@@ -124,7 +127,9 @@
     --xh-_tabs-trigger-bg-active-hover: var(--xh-_tone-subtle, var(--xh-bg-surface-raised));
     --xh-_tabs-trigger-border-active: var(--xh-_tone-border, var(--xh-border-default));
     --xh-_tabs-accent-text: var(--xh-_tone-fg, var(--xh-fg-default));
-    --xh-_tabs-scroll-trigger-bg: var(--xh-bg-subtle);
+    --xh-_tabs-scroll-trigger-bg: var(--xh-bg-subtle-opaque);
+    --xh-_tabs-scroll-trigger-bg-hover: var(--xh-bg-subtle-hover-opaque);
+    --xh-_tabs-scroll-trigger-bg-pressed: var(--xh-bg-subtle-active-opaque);
   }
 
   /* 一行排不下不折行：标签整条沿主轴位移露出被裁掉的那截，两端的翻页钮与滚轮驱动，位移量由机器写在
@@ -171,8 +176,8 @@
     translate: 0 var(--xh-_tabs-scroll);
   }
 
-  /* segment 档的标签带是一块淡底面：--xh-bg-subtle 底 + 一圈透明占位边 + 无影（§8.3 三选一）。
-     它同时是标签的淡底承载面，向内下发 hover 200 → pressed 300 的承载阶梯（§7.2）；
+  /* segment 档的标签带是一块淡底面：--xh-bg-subtle 底 + 一圈透明占位边 + 无影（三选一）。
+     它同时是标签的淡底承载面，向内下发 hover 200 → pressed 300 的承载阶梯；
      只写在标签带上不写在 root 上：内容面板里的按钮坐在画布上，不该跟着抬一档 */
   [data-scope='tabs'][data-part='root'][data-variant='segment'] [data-scope='tabs'][data-part='list'] {
     --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
@@ -202,9 +207,9 @@
     min-inline-size: auto;
   }
 
-  /* line 档（§7.3 导航当前页）：把公开槽映射到 Collection Item 的 nav 语境桥接槽。静息 muted / regular，
+  /* line 档（导航当前页）：把公开槽映射到 Collection Item 的 nav 语境桥接槽。静息 muted / regular，
      悬停 100 + default 字，按下 200 只换面；当前页透明面 + 品牌深字（随语气的 --xh-_tabs-accent-text）+
-     medium，叠悬停 100（§9.3）。2px 指示线不由家族按条目画：放了 indicator 部件是 list 上的滑动部件，
+     medium，叠悬停 100。2px 指示线不由家族按条目画：放了 indicator 部件是 list 上的滑动部件，
      没放则由下面的静态线规则画在选中标签自己身上。高度由 block-size 定，块向内边距归零 */
   [data-scope='tabs'][data-part='root'][data-variant='line'] [data-scope='tabs'][data-part='trigger'] {
     --xh-collection-block-padding: var(--xh-space-0);
@@ -228,7 +233,7 @@
     color: var(--xh-tabs-trigger-fg, var(--xh-fg-muted));
     font-weight: var(--xh-tabs-trigger-font-weight, var(--xh-text-label-weight));
     cursor: pointer;
-    /* 标签是铺开的一段（§9.2 Tabs trigger 归行级），按下只换面不缩放：transition 里没有 scale */
+    /* 标签是铺开的一段（Tabs trigger 归行级），按下只换面不缩放：transition 里没有 scale */
     transition:
       color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
@@ -242,7 +247,14 @@
     flex: 0 0 auto;
   }
 
-  /* segment 档是一条轨道里的格子（与 Segmented 同构）：格子按可用宽度等分 */
+  /* 竖排标签的高就是控件高，不随标签带压缩：使用者限了高、标签带放不下时，靠位移露出被裁掉的那截（与横排同一套），
+     而不是把每一枚压扁到只剩一行字高 */
+  [data-scope='tabs'][data-part='root'][data-orientation='vertical']
+    [data-scope='tabs'][data-part='trigger'] {
+    flex-shrink: 0;
+  }
+
+  /* segment 档是一条轨道里的格子（与 RadioGroup 的 segmented 形态同构）：格子按可用宽度等分 */
   [data-scope='tabs'][data-part='root'][data-orientation='horizontal'][data-variant='segment']
     [data-scope='tabs'][data-part='trigger'] {
     flex: 1 1 0;
@@ -257,7 +269,7 @@
   }
 
   /* 按下去要有回应：card / segment 档的未选中标签换到按下面（card 200、segment 300），几何不动。
-     选中标签不叠按下面：card 的卡片面与 segment 的抬起面本身就是选中身份（§7.3 有滑块开关无叠加态） */
+     选中标签不叠按下面：card 的卡片面与 segment 的抬起面本身就是选中身份（有滑块开关无叠加态） */
   [data-scope='tabs'][data-part='root']:is([data-variant='card'], [data-variant='segment'])
     [data-scope='tabs'][data-part='trigger']:not([data-disabled]):not([data-state='active']):is(:active, [data-pressed]) {
     background: var(--xh-tabs-trigger-bg-pressed, var(--xh-_tabs-trigger-bg-pressed));
@@ -276,7 +288,7 @@
     font-weight: var(--xh-tabs-trigger-font-weight-active, var(--xh-font-weight-medium));
   }
 
-  /* segment 档的选中标签就是那块白色抬起的滑块面（§7.3 有滑块开关）：surface-raised 底 +
+  /* segment 档的选中标签就是那块白色抬起的滑块面（有滑块开关）：surface-raised 底 +
      border-default 描边 + raised 影三件写在标签自己身上。标签带里放了 indicator 部件时，
      这块面搬到部件上跟着滑（见下面的 indicator 规则），标签自己透空、只留字 */
   [data-scope='tabs'][data-part='root'][data-variant='segment']
@@ -459,17 +471,26 @@
     --xh-_tabs-indicator-y: 0;
     --xh-_tabs-indicator-w: 0;
     --xh-_tabs-indicator-h: 0;
+    --xh-_tabs-indicator-stretch: 0;
 
+    /* 摆在行首，落点交给 transform（只走合成），长度跟着标签宽走。标签带挪动时整条孩子
+       共用的 translate 叠在它之上，两者互不覆盖，过渡也只挂在 transform 上 */
     position: absolute;
     inset-block-end: 0;
-    inset-inline-start: var(--xh-_tabs-indicator-x);
+    inset-inline-start: 0;
     inline-size: var(--xh-_tabs-indicator-w);
     block-size: var(--xh-tabs-indicator-thickness, var(--xh-stroke-thick));
     border-radius: var(--xh-tabs-indicator-radius, var(--xh-shape-pill));
     background: var(--xh-tabs-indicator-color, var(--xh-_tabs-accent));
+    transform: translate(var(--xh-_tabs-indicator-x), 0);
     transition:
-      inset-inline-start var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
-      inline-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
+      transform var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      inline-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* transform 只认物理方向：RTL 下行首在右边，起始缘量出的距离往左推 */
+  [data-scope='tabs'][data-part='indicator']:dir(rtl) {
+    transform: translate(calc(-1 * var(--xh-_tabs-indicator-x)), 0);
   }
 
   /* 卡片变体已经由卡片面表达状态，不再叠一条下划线。 */
@@ -477,15 +498,15 @@
     display: none;
   }
 
-  /* segment 档（§7.3 有滑块开关）：部件就是那块白色抬起的滑块面，四个几何量都取、整块跟着滑——
-     surface-raised 底 + border-default 描边 + raised 影三件与 Segmented 的滑块同一套；
+  /* segment 档（有滑块开关）：部件就是那块白色抬起的滑块面，四个几何量都取、整块跟着滑——
+     surface-raised 底 + border-default 描边 + raised 影三件与 RadioGroup segmented 形态的滑块同一套；
      描边吃进盒里（border-box），面与标签仍是同一块矩形。标签压在它上面，点击一律交给标签。
      用连续档而不是进场那条：滑块是被推过去的，起步就该有速度；四个几何量同时走，标签宽不等时才不会先变形再挪位 */
   [data-scope='tabs'][data-part='indicator'][data-variant='segment'] {
     inset-block-end: auto;
     inset-inline-end: auto;
-    inset-inline-start: var(--xh-_tabs-indicator-x);
-    inset-block-start: var(--xh-_tabs-indicator-y);
+    inset-inline-start: 0;
+    inset-block-start: 0;
     inline-size: var(--xh-_tabs-indicator-w);
     block-size: var(--xh-_tabs-indicator-h);
     box-sizing: border-box;
@@ -494,14 +515,18 @@
     background: var(--xh-tabs-trigger-bg-active, var(--xh-_tone-subtle, var(--xh-bg-surface-raised)));
     box-shadow: var(--xh-tabs-trigger-shadow-active, var(--xh-elevation-raised));
     pointer-events: none;
+    transform: translate(var(--xh-_tabs-indicator-x), var(--xh-_tabs-indicator-y));
     transition:
-      inset-inline-start var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
-      inset-block-start var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
-      inline-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
-      block-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
+      transform var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      inline-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      block-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  [data-scope='tabs'][data-part='indicator'][data-variant='segment']:dir(rtl) {
+    transform: translate(calc(-1 * var(--xh-_tabs-indicator-x)), var(--xh-_tabs-indicator-y));
   }
 
-  /* line 档没放 indicator 部件时，选中标签自画一条静态指示线（§7.3 导航当前页）：
+  /* line 档没放 indicator 部件时，选中标签自画一条静态指示线（导航当前页）：
      横向缺省也要像纵向示例那样有一条选中线，作者不必为了这条线多放一个部件。
      线画在选中标签的 ::after 上，以标签盒为定位参照（基础规则里已是 position: relative），
      厚度 / 颜色 / 圆角与 indicator 部件读同一组槽与缺省——作者改一处，部件与静态线一起改。
@@ -543,12 +568,32 @@
     inset-block-end: auto;
     inset-inline-start: auto;
     inset-inline-end: 0;
-    inset-block-start: var(--xh-_tabs-indicator-y);
+    inset-block-start: 0;
     block-size: var(--xh-_tabs-indicator-h);
     inline-size: var(--xh-tabs-indicator-thickness, var(--xh-stroke-thick));
+    transform: translate(0, var(--xh-_tabs-indicator-y));
     transition:
-      inset-block-start var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
-      block-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
+      transform var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      block-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* 首次落位与同一项的重量（窗口缩放、换上正式字体）直接到位，只有换项才滑：连接层在这一落点投影
+     data-instant。选择器带上排布与形态，压得过上面按它们单写的过渡 */
+  [data-scope='tabs'][data-part='indicator'][data-orientation][data-variant][data-instant] {
+    transition: none;
+  }
+
+  /* 液态档：两沿由弹簧逐帧推着走（连接层每一帧写好盒子），几何量不再补过渡（选择器带上排布与形态，压得过上面按它们单写的过渡）；
+     被拉长时在另一个方向上压扁，表达体积守恒，拉长到目标的两倍时压到 --xh-motion-scale-squash */
+  :where([data-material='liquid']) [data-scope='tabs'][data-part='indicator'][data-orientation][data-variant] {
+    --xh-_tabs-indicator-squash: max(var(--xh-motion-scale-squash), calc(1 - var(--xh-_tabs-indicator-stretch) * (1 - var(--xh-motion-scale-squash))));
+
+    scale: 1 var(--xh-_tabs-indicator-squash);
+    transition: none;
+  }
+
+  :where([data-material='liquid']) [data-scope='tabs'][data-part='indicator'][data-orientation='vertical'][data-variant] {
+    scale: var(--xh-_tabs-indicator-squash) 1;
   }
 
   /* 标签之间的细线：横排时是一条竖线，竖排时躺平 */
@@ -571,11 +616,13 @@
   /* 标签带放不下时浮在两端的单图标钮，接 Action Control icon 档 ghost 面（连接层投影 profile / variant / size）：
      盒取标签同高的正方形，四态面、0.97 按压与粗指针 44px 命中区由家族配方给。绝对定位贴在标签带两端、
      不随标签位移；挪到它底下的那截标签由静息底盖住（透明 ghost 面盖不住字，静息 / 焦点 / 禁用三列换成盖底槽，
-     悬停与按下仍走 ghost 的阶梯——line / card 在白底上 100 → 200，segment 由轨道下发 200 → 300） */
+     悬停与按下换成盖底档的不透明阶梯——line / card 在白底上 100 → 200，segment 在轨道上 200 → 300） */
   [data-scope='tabs'][data-part='prev-trigger'],
   [data-scope='tabs'][data-part='next-trigger'] {
     --xh-action-visual-size: var(--xh-tabs-trigger-h, var(--xh-_tabs-trigger-h));
     --xh-action-bg-rest: var(--xh-tabs-scroll-trigger-bg, var(--xh-_tabs-scroll-trigger-bg));
+    --xh-action-bg-hover: var(--xh-_tabs-scroll-trigger-bg-hover);
+    --xh-action-bg-pressed: var(--xh-_tabs-scroll-trigger-bg-pressed);
     --xh-action-bg-focus-visible: var(--xh-tabs-scroll-trigger-bg, var(--xh-_tabs-scroll-trigger-bg));
     --xh-action-bg-disabled: var(--xh-tabs-scroll-trigger-bg, var(--xh-_tabs-scroll-trigger-bg));
     --xh-action-fg-rest: var(--xh-tabs-scroll-trigger-fg, var(--xh-fg-muted));
@@ -661,15 +708,159 @@
     mask-image: var(--xh-glyph-mark-chevron-down);
   }
 
+  /* —— 「更多」钮 —— */
+  /* 放了「更多」钮：钮排在标签带之后、同一行（竖排是同一列的列尾）。它不能放进标签带——tablist 只收 tab，
+     所以是 root 的孩子；root 换成两轨网格，标签带占能伸缩的那一轨、钮占按内容的那一轨，面板等其余孩子横跨两轨排在
+     下面（竖排排在右侧）。钮收着（hidden）时那一轨是 0，标签带铺满；钮与标签带之间的间距挂在钮自己身上，
+     收着时一并让开。标签带的可用长度因此随钮的有无变：放不放得下由机器按让回钮那一截算，钮不会自己把自己留住 */
+  [data-scope='tabs'][data-part='root']:has(> [data-scope='tabs'][data-part='overflow-trigger']) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    column-gap: 0;
+    row-gap: var(--xh-tabs-gap, var(--xh-stack-gap-md));
+  }
+
+  [data-scope='tabs'][data-part='root']:has(> [data-scope='tabs'][data-part='overflow-trigger']) > * {
+    grid-column: 1 / -1;
+  }
+
+  [data-scope='tabs'][data-part='root']:has(> [data-scope='tabs'][data-part='overflow-trigger'])
+    > [data-scope='tabs'][data-part='list'] {
+    grid-row: 1;
+    grid-column: 1;
+  }
+
+  [data-scope='tabs'][data-part='root']:has(> [data-scope='tabs'][data-part='overflow-trigger'])
+    > [data-scope='tabs'][data-part='overflow-trigger'] {
+    grid-row: 1;
+    grid-column: 2;
+    align-self: center;
+    margin-inline-start: var(--xh-space-1);
+  }
+
+  /* 竖排：标签带与钮上下叠成左侧一列（钮在列尾），面板占右侧那一轨、跨两行 */
+  [data-scope='tabs'][data-part='root'][data-orientation='vertical']:has(> [data-scope='tabs'][data-part='overflow-trigger']) {
+    grid-template-rows: minmax(0, 1fr) auto;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: var(--xh-tabs-gap, var(--xh-stack-gap-md));
+    row-gap: 0;
+  }
+
+  [data-scope='tabs'][data-part='root'][data-orientation='vertical']:has(> [data-scope='tabs'][data-part='overflow-trigger']) > * {
+    grid-row: 1 / -1;
+    grid-column: 2;
+  }
+
+  [data-scope='tabs'][data-part='root'][data-orientation='vertical']:has(> [data-scope='tabs'][data-part='overflow-trigger'])
+    > [data-scope='tabs'][data-part='list'] {
+    grid-row: 1;
+    grid-column: 1;
+  }
+
+  [data-scope='tabs'][data-part='root'][data-orientation='vertical']:has(> [data-scope='tabs'][data-part='overflow-trigger'])
+    > [data-scope='tabs'][data-part='overflow-trigger'] {
+    grid-row: 2;
+    grid-column: 1;
+    align-self: auto;
+    margin-inline-start: 0;
+    margin-block-start: var(--xh-space-1);
+  }
+
+  /* 钮本身：接 Action Control icon 档 ghost 面（连接层投影 profile / variant / size），盒取标签同高的正方形，
+     与两端翻页钮同一身份；四态面、0.97 按压、焦点环与粗指针 44px 命中区由家族配方给。它坐在 root 的面上
+     （不在标签带里），承载面阶梯走家族缺省的白底 100 → 200；字取次要色，与静息的标签、翻页钮同档 */
+  [data-scope='tabs'][data-part='overflow-trigger'] {
+    --xh-action-visual-size: var(--xh-tabs-trigger-h, var(--xh-_tabs-trigger-h));
+    --xh-action-fg-rest: var(--xh-fg-muted);
+    /* 作者塞进来的图标跟着 icon 档走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+
+    touch-action: manipulation;
+  }
+
+  /* 竖排：与竖排的翻页钮一样躺平成横贯标签带那一列的一条 */
+  [data-scope='tabs'][data-part='overflow-trigger'][data-orientation='vertical'] {
+    inline-size: auto;
+  }
+
+  /* 下拉开着：与悬停同档的中性面，不用品牌色、不另画环；列的是哪几个标签由下拉本身说明 */
+  [data-scope='tabs'][data-part='overflow-trigger'][data-state='open'] {
+    --xh-action-bg-rest: var(--xh-_action-variant-bg-hover);
+    --xh-action-bg-focus-visible: var(--xh-_action-variant-bg-hover);
+  }
+
+  /* 没写内容就由皮肤画兜底字形：横排三点（与工具条的「更多」同一枚）。作者塞了自己的图标这条即不命中 */
+  [data-scope='tabs'][data-part='overflow-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));
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-ellipsis) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-ellipsis) center / contain no-repeat;
+  }
+
+  /* —— 关闭钮 —— */
+  /* 关闭钮与所属标签平级、紧跟其后（不嵌进 role=tab 的按钮里），画面上收进标签面的行尾：标签在行尾让出一格
+     （钮的边长 + 与行尾的留白 + 与文字的间距），钮以负的起始外边距退回这一格，结束外边距补回同样的留白，
+     下一枚标签的起点与没有关闭钮时一致。留白取标签与钮高度差的一半，钮在标签里上下左右都居中对齐。
+     面归 Action Control icon 档 ghost 面、xs 档（连接层投影）：四态面、0.97 按压与粗指针命中区由家族配方给，
+     这里只管落位与字色。悬停落在钮上时标签自己回到静息面，只有钮亮起，按下去关的是哪一个一目了然 */
+  [data-scope='tabs'][data-part='root'] {
+    --xh-_tabs-close-size: var(--xh-control-action-size);
+    --xh-_tabs-close-inset: calc((var(--xh-tabs-trigger-h, var(--xh-_tabs-trigger-h)) - var(--xh-_tabs-close-size)) / 2);
+    /* 钮退回去的距离：横排退过自己、行尾留白与标签带间距；竖排退过半个标签高、半个钮高与标签带间距 */
+    --xh-_tabs-close-offset: calc(var(--xh-_tabs-close-size) + var(--xh-_tabs-close-inset) + var(--xh-tabs-list-gap, var(--xh-_tabs-list-gap)));
+    --xh-_tabs-close-offset-block: calc((var(--xh-tabs-trigger-h, var(--xh-_tabs-trigger-h)) + var(--xh-_tabs-close-size)) / 2 + var(--xh-tabs-list-gap, var(--xh-_tabs-list-gap)));
+  }
+
+  [data-scope='tabs'][data-part='trigger']:has(+ [data-scope='tabs'][data-part='close-trigger']:not([hidden])) {
+    padding-inline-end: calc(var(--xh-_tabs-close-size) + var(--xh-_tabs-close-inset) + var(--xh-space-1));
+  }
+
+  [data-scope='tabs'][data-part='close-trigger'] {
+    --xh-action-fg-rest: var(--xh-fg-muted);
+    /* 作者塞进来的图标跟着 xs 档走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+
+    flex: none;
+    /* segment 档的标签抬了一层压在滑动的抬起面上，钮排在标签之后、同一层即压在标签上 */
+    z-index: 1;
+    margin-inline-start: calc(-1 * var(--xh-_tabs-close-offset));
+    margin-inline-end: var(--xh-_tabs-close-inset);
+  }
+
+  /* 竖排：标签上下排开，钮退回的是上一行——起始外边距改在块向，行向贴到行尾 */
+  [data-scope='tabs'][data-part='root'][data-orientation='vertical'] [data-scope='tabs'][data-part='close-trigger'] {
+    align-self: flex-end;
+    margin-block-start: calc(-1 * var(--xh-_tabs-close-offset-block));
+    margin-block-end: var(--xh-_tabs-close-inset);
+    margin-inline-start: 0;
+  }
+
+  /* 没写内容就由皮肤画一枚叉；作者塞了自己的图形这一条即不命中 */
+  [data-scope='tabs'][data-part='close-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-close) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+  }
+
   /* 声明过任何 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='close-trigger'][hidden],
   [data-scope='tabs'][data-part='indicator'][hidden],
   [data-scope='tabs'][data-part='separator'][hidden],
   [data-scope='tabs'][data-part='prev-trigger'][hidden],
   [data-scope='tabs'][data-part='next-trigger'][hidden],
+  [data-scope='tabs'][data-part='overflow-trigger'][hidden],
   [data-scope='tabs'][data-part='tab-drag-trigger'][hidden] {
     display: none;
   }
@@ -723,10 +914,31 @@
       text-decoration: underline;
     }
 
-    /* 纸上翻不了页，两只钮不上纸 */
+    /* 纸上翻不了页、关不了标签、也弹不出下拉，这几只钮不上纸 */
     [data-scope='tabs'][data-part='prev-trigger'],
-    [data-scope='tabs'][data-part='next-trigger'] {
+    [data-scope='tabs'][data-part='next-trigger'],
+    [data-scope='tabs'][data-part='overflow-trigger'],
+    [data-scope='tabs'][data-part='close-trigger'] {
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='tabs']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger'], [data-part='overflow-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='tabs']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger'], [data-part='overflow-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='tabs']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger'], [data-part='overflow-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/tag-group.css

@@ -5,6 +5,9 @@
 
 /* 定义 tag group 样式。 */
 
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='tag-group'] {
@@ -61,10 +64,23 @@
      标签这时是拿焦点的那个节点，按下与松手之间要有回应；选中与锚点的过渡也挂在这一层 */
   [data-scope='tag-group'][data-part='list'] > [data-scope='tag'][data-part='root'] {
     user-select: none;
+    /* 增删一枚、其余标签换到新位置时，由列表动效先反向补偿、再沿 translate 这条滑过去 */
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
+      scale var(--xh-motion-duration-release) var(--xh-motion-ease-release),
+      translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* 新加的标签原地弹出（横排胶囊不用竖向上浮），同一批按到达顺序错开；首帧就在的直接呈现 */
+  [data-scope='tag-group'][data-part='list']:not([data-instant]) > [data-scope='tag'][data-part='root']:not([data-instant], [data-state='closed']) {
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
+    animation-delay: calc(var(--xh-_stagger-index, 0) * var(--xh-motion-stagger-step));
+  }
+
+  /* 删掉的标签：替身留在原处淡出，播完即移除 */
+  [data-scope='tag-group'][data-part='list'] > [data-scope='tag'][data-part='root'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
   /* 参与选中的标签才是点击目标，只是标记的那些不给手势暗示 */
@@ -72,7 +88,7 @@
     cursor: pointer;
   }
 
-  /* 按下去要有回应：可选的芯片是一颗定尺的离散控件（§9.1），整枚轻微下压并同时换底
+  /* 按下去要有回应：可选的芯片是一颗定尺的离散控件，整枚轻微下压并同时换底
      （白底承载 hover 100 → pressed 200），松手即弹回。置灰的不压；
      指针 :active 与 Headless 投影的 data-pressed 看见同一副按压面 */
   [data-scope='tag-group'][data-part='list']
@@ -106,7 +122,7 @@
     background: var(--xh-tag-group-item-bg-pressed-solid, var(--xh-_tone-active, var(--xh-bg-brand-active)));
   }
 
-  /* 悬停与键盘锚点共用白底承载的 hover 档（§7.2：hover 100 → pressed 200）：
+  /* 悬停与键盘锚点共用白底承载的 hover 档（hover 100 → pressed 200）：
      data-highlighted 跟的是连接层记的焦点标签，与选中互相独立。
      实心标签不进这里：它的字是实心底上配对的那支前景色，换成灰底就读不出来了；
      实心档在这两档里面不换，回执落在按压缩放与聚焦环上 */
@@ -129,32 +145,8 @@
   }
 
   /* —— 选中 —— */
-  /* 页内持久集合的选中（§7.3）：品牌淡底行面 + 配对前景 + 前导对号（item-indicator），描边退到透明边位；
-     悬停与按下在淡底上派生 20% / 28%，键盘锚点同悬停档。
-     标了语气的组从语气层取同一条曲线。置灰的标签不进这里：它的边与字都已退成置灰色。
-     实心档另有一条：它的面本身就是那族色，淡底与配对前景压在上面都读不出来 */
-  [data-scope='tag-group'][data-part='list']
-    > [data-scope='tag'][data-part='root'][data-selected]:not([data-disabled]):not([data-variant='solid']) {
-    border-color: var(--xh-tag-group-item-border-selected, transparent);
-    background: var(--xh-tag-group-item-bg-selected, var(--xh-_tone-subtle, var(--xh-bg-brand-subtle)));
-    color: var(--xh-tag-group-item-fg-selected, var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle)));
-  }
-
-  [data-scope='tag-group'][data-part='list']
-    > [data-scope='tag'][data-part='root'][data-selected]:not([data-disabled]):not([data-variant='solid']):is(:hover, [data-highlighted]) {
-    background: var(--xh-tag-group-item-bg-selected-hover, var(--xh-_tone-subtle-hover, var(--xh-bg-brand-subtle-hover)));
-  }
-
-  [data-scope='tag-group'][data-part='list']
-    > [data-scope='tag'][data-part='root'][data-selected][data-selectable]:not([data-disabled]):not([data-variant='solid']):is(:active, [data-pressed]) {
-    background: var(--xh-tag-group-item-bg-selected-pressed, var(--xh-_tone-subtle-active, var(--xh-bg-brand-subtle-active)));
-  }
-
-  /* 实心标签选中：字不换（仍是 tag.css 给的面配对前景色，作者的 --xh-tag-fg 照旧生效），
-     描边取字色，在实心底上描出一圈；环由 tag.css 取 currentColor，跟着字走 */
-  [data-scope='tag-group'][data-part='list'] > [data-scope='tag'][data-part='root'][data-variant='solid'][data-selected]:not([data-disabled]) {
-    border-color: var(--xh-tag-group-item-border-selected, currentColor);
-  }
+  /* 与树选择同一种读法：选中的标签面、字与描边都不换，悬停 / 锚点 / 按下沿用未选中的那条阶梯，
+     只在文字后亮一枚对号（见下面 item-indicator 那几块） */
 
   /* 标签里那一格：文字与摘除钮排在一条线上。它是 tag 根与 tag 的 label / close-trigger 之间的一层，
      间距照抄所在标签的那一档，有它与没它标签长得一样 */
@@ -170,7 +162,8 @@
     display: none;
   }
 
-  /* 选中标记：领在文字前面的一枚对号，与摘除钮的叉同一把随文尺（标签是纯行内文字组件）；
+  /* 选中标记：跟在文字后面的一枚对号，与摘除钮的叉同一把随文尺（标签是纯行内文字组件）；
+     作者写在格里哪儿都排到文字与作者内容之后、摘除钮之前。
      作者塞进来的图标读同一支 --xh-icon-size。连接层没选中时给 hidden，UA 的 display:none 被上面的 display 盖住，
      这里压回去 */
   [data-scope='tag-group'][data-part='item-indicator'] {
@@ -178,17 +171,34 @@
 
     display: inline-flex;
     flex: none;
+    order: 1;
     align-items: center;
     justify-content: center;
     inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
     block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    color: var(--xh-tag-group-item-indicator-fg, currentColor);
+    /* 与树选择的行尾对号同色：标了语气的组取语气字色，没写语气取品牌前景 */
+    color: var(--xh-tag-group-item-indicator-fg, var(--xh-_tone-fg, var(--xh-fg-brand)));
   }
 
   [data-scope='tag-group'][data-part='item-indicator'][hidden] {
     display: none;
   }
 
+  /* 实心标签的面本身就是那族色，品牌 / 语气字色压在上面读不出来：对号取面配对的那支前景色 */
+  [data-scope='tag'][data-part='root'][data-variant='solid'] [data-scope='tag-group'][data-part='item-indicator'] {
+    color: var(--xh-tag-group-item-indicator-fg, currentColor);
+  }
+
+  /* 置灰的标签里对号跟着字一起退成置灰色 */
+  [data-scope='tag-group'][data-part='item-indicator'][data-disabled] {
+    color: inherit;
+  }
+
+  /* 摘除钮是操作，排在对号之后、格的最末 */
+  [data-scope='tag-group'][data-part='cell'] > [data-scope='tag'][data-part='close-trigger'] {
+    order: 2;
+  }
+
   /* 没写内容就由皮肤画兜底对号；作者往部件里塞了自己的图形，这条即不命中 */
   [data-scope='tag-group'][data-part='item-indicator']:empty::before {
     content: '';
@@ -201,12 +211,23 @@
   }
 
   @media (forced-colors: active) {
-    /* 选中靠淡底与配对前景表出，这一档里两者都被统一换掉；用系统高亮反色画回，前导对号是字形节点、自己活得下来 */
+    /* 选中只由对号表达：遮罩出来的那块底色退出强制换色、用系统高亮色画，按下时标签整枚反成 Highlight，对号换成反白；
+       禁用的标签取 GrayText */
+    [data-scope='tag-group'][data-part='item-indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: Highlight;
+    }
+
     [data-scope='tag-group'][data-part='list']
-      > [data-scope='tag'][data-part='root'][data-selected]:not([data-disabled]):not([data-variant='solid']) {
-      border-color: Highlight;
-      background: Highlight;
-      color: HighlightText;
+      > [data-scope='tag'][data-part='root'][data-disabled]
+      [data-scope='tag-group'][data-part='item-indicator']:empty::before {
+      background-color: GrayText;
+    }
+
+    [data-scope='tag-group'][data-part='list']
+      > [data-scope='tag'][data-part='root'][data-selectable]:not([data-disabled]):not([data-variant='solid']):is(:active, [data-pressed])
+      [data-scope='tag-group'][data-part='item-indicator']:empty::before {
+      background-color: HighlightText;
     }
 
     /* 按下：常态靠底色深一档表出，这一档里底色被统一换成 Canvas；按住那一下用系统高亮反色画回来 */
@@ -216,4 +237,11 @@
       color: HighlightText;
     }
   }
+
+  @media print {
+    /* 打印默认丢底色，而对号是遮罩出来的一块底色：标签本就不换面，丢了它选中在纸上就没了踪影 */
+    [data-scope='tag-group'][data-part='item-indicator'] {
+      print-color-adjust: exact;
+    }
+  }
 }