@xihan-ui/styles 2.1.0 → 3.1.0

package/css/tabs.css

@@ -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;
@@ -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);
   }
 
   /* 一行排不下不折行：标签整条沿主轴位移露出被裁掉的那截，两端的翻页钮与滚轮驱动，位移量由机器写在
@@ -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;
@@ -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);
   }
 
   /* 卡片变体已经由卡片面表达状态，不再叠一条下划线。 */
@@ -478,14 +499,14 @@
   }
 
   /* segment 档（有滑块开关）：部件就是那块白色抬起的滑块面，四个几何量都取、整块跟着滑——
-     surface-raised 底 + border-default 描边 + raised 影三件与 Segmented 的滑块同一套；
+     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,11 +515,15 @@
     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 部件时，选中标签自画一条静态指示线（导航当前页）：
@@ -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;
   }
 
   /* 参与选中的标签才是点击目标，只是标记的那些不给手势暗示 */
@@ -195,11 +211,19 @@
   }
 
   @media (forced-colors: active) {
-    /* 选中只由对号表达：遮罩出来的那块底色用系统高亮色画，按下时标签整枚反成 Highlight，对号换成反白 */
+    /* 选中只由对号表达：遮罩出来的那块底色退出强制换色、用系统高亮色画，按下时标签整枚反成 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-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 {

package/css/tag.css

@@ -5,6 +5,9 @@
 
 /* 定义 tag 样式。 */
 
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='tag'] {
@@ -51,6 +54,12 @@
     display: none;
   }
 
+  /* 关掉的标签先原地淡出，播完连接层才写 hidden。
+     标签组与选择框的标签行里删掉的那一枚，由列表动效放回原处的替身也是 closed，同一段淡出 */
+  [data-scope='tag'][data-part='root'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
   /* 文字过长时截断，关闭钮才始终留在标签里 */
   [data-scope='tag'][data-part='label'] {
     overflow: hidden;
@@ -81,7 +90,7 @@
     line-height: var(--xh-leading-none);
     cursor: pointer;
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
   }
 
@@ -161,6 +170,21 @@
     color: var(--xh-tag-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
   }
 
+  /* 实心档是一块彩色面（连接层打 data-xh-ink-surface）：面内的图标与作者内容按这块底取墨色。
+     底色随语气与禁用换，这里跟着换 */
+  [data-scope='tag'][data-part='root'][data-xh-ink-surface] {
+    --xh-ink-surface: var(--xh-tag-bg, var(--xh-bg-brand));
+  }
+
+  [data-scope='tag'][data-part='root'][data-xh-ink-surface][data-tone] {
+    --xh-ink-surface: var(--xh-tag-bg, var(--xh-_tone, var(--xh-bg-brand)));
+  }
+
+  [data-scope='tag'][data-part='root'][data-xh-ink-surface][data-disabled] {
+    /* 置灰面是墨色淡底：选墨只看分量、不看透明度，取它的不透明档 */
+    --xh-ink-surface: var(--xh-tag-bg-disabled, var(--xh-bg-muted-opaque));
+  }
+
   [data-scope='tag'][data-part='root'][data-variant='subtle'] {
     border-color: var(--xh-tag-border, var(--xh-material-soft-border));
     background: var(--xh-tag-bg, var(--xh-material-soft-bg));
@@ -244,17 +268,6 @@
     }
   }
 
-  /*
-   * 高对比档：关闭钮的按压面常态靠从 currentColor 兑出来的底色表出，这一档里底色被统一换成 Canvas，
-   * 按住那一下与静息塌成同一个样子；用系统高亮反色画回来，兜底字形读 currentColor、自己跟着换
-   */
-  @media (forced-colors: active) {
-    [data-scope='tag'][data-part='close-trigger']:not(:disabled):is(:active, [data-pressed]) {
-      background: Highlight;
-      color: HighlightText;
-    }
-  }
-
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
   [data-scope='tag'][data-part='close-trigger']:empty::before {
     content: '';
@@ -266,4 +279,32 @@
     -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
     mask: var(--xh-glyph-mark-close) center / contain no-repeat;
   }
+
+  /*
+   * 高对比档：关闭钮的按压面常态靠从 currentColor 兑出来的底色表出，这一档里底色被统一换成 Canvas，
+   * 按住那一下与静息塌成同一个样子；用系统高亮反色画回来。
+   * 兜底字形是 mask 挖出来的一块底色，同样会被换成 Canvas 而消失：退出强制换色、直接写系统色
+   * （不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）——
+   * 标签面上取 CanvasText，按住时跟着按压面换 HighlightText，禁用取 GrayText
+   */
+  @media (forced-colors: active) {
+    [data-scope='tag'][data-part='close-trigger']:not(:disabled):is(:active, [data-pressed]) {
+      background: Highlight;
+      color: HighlightText;
+    }
+
+    [data-scope='tag'][data-part='close-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='tag'][data-part='close-trigger']:not(:disabled):is(:active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='tag'][data-part='root'][data-disabled] [data-scope='tag'][data-part='close-trigger']:empty::before,
+    [data-scope='tag'][data-part='close-trigger']:disabled:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/tags-input.css

@@ -6,6 +6,8 @@
 /* TagsInput 独立皮肤同时传递引入字段视觉盒与字段内动作；full bundle 递归去重。 */
 @import '../family/field-chrome.css';
 @import '../family/action-control.css';
+/* 标签的进场与退场取共享关键帧。 */
+@import '../family/motion.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -113,6 +115,8 @@
        上限取滚动面最小的那一档，与页面上其它滚动面用同一把尺 */
     max-block-size: var(--xh-tags-input-control-max-h, var(--xh-viewport-h-sm));
     overflow-y: auto;
+    /* 删掉的标签由替身绝对定位在原处播完退场，定位基准是这个框（随框内滚动一起走） */
+    position: relative;
   }
 
   [data-scope='tags-input'][data-part='control'][hidden] {
@@ -137,7 +141,7 @@
 
     /* 撑满剩余宽度由家族的 flex: 1 1 auto 给，这里只换起算宽 */
     flex-basis: var(--xh-tags-input-input-basis, 6rem);
-    min-inline-size: var(--xh-tags-input-input-min-w, 4rem);
+    min-inline-size: var(--xh-tags-input-input-min-w, var(--xh-control-input-min-w));
     /* 行盒收到标签那一行的高度以内，输入框不去顶高整个框 */
     block-size: auto;
     line-height: var(--xh-leading-tight);
@@ -151,6 +155,20 @@
     flex: none;
     align-items: center;
     max-inline-size: 100%;
+    /* 前面的标签增删、其余标签换到新位置时，由列表动效先反向补偿、再沿这条过渡滑过去 */
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* 新落下的标签原地弹出，同一批按到达顺序错开；首帧就在的直接呈现（自己或 control 带 data-instant）。
+     横排胶囊不用竖向上浮：与来源方向不符，还会探出字段外壳的底边 */
+  [data-scope='tags-input'][data-part='item']:not([data-instant], [data-instant] > *) {
+    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='tags-input'][data-part='item'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
   [data-scope='tags-input'][data-part='item'][hidden] {
@@ -259,11 +277,11 @@
     mask: var(--xh-glyph-mark-close) center / contain no-repeat;
   }
 
-  /* 计数：排在控件行下面靠尾端的一行小字，与标题分列 root 的两端 */
+  /* 计数：排在控件行下面靠尾端的一行小字，与标题分列 root 的两端。它是次级标注，取说明档字号，不随控件档 */
   [data-scope='tags-input'][data-part='count'] {
     align-self: flex-end;
     color: var(--xh-tags-input-count-fg, var(--xh-fg-muted));
-    font-size: var(--xh-tags-input-count-font-size, var(--xh-_tags-input-item-font-size));
+    font-size: var(--xh-tags-input-count-font-size, var(--xh-text-caption-size));
     font-variant-numeric: tabular-nums;
     line-height: var(--xh-leading-normal);
   }
@@ -282,4 +300,23 @@
   [data-scope='tags-input'][data-part='count'][data-disabled] {
     color: var(--xh-tags-input-count-fg-disabled, var(--xh-fg-disabled));
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='tags-input'][data-part='clear-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='tags-input'][data-part='clear-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='tags-input'][data-part='clear-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/text-field.css

@@ -175,4 +175,23 @@
   [data-scope='text-field'][data-part='count'][data-disabled] {
     color: var(--xh-text-field-count-fg-disabled, var(--xh-fg-disabled));
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='text-field'][data-part='clear-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='text-field'][data-part='clear-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='text-field'][data-part='clear-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/time-field.css

@@ -139,7 +139,7 @@
     /* 触屏上连点两下不该被当成缩放手势 */
     touch-action: manipulation;
     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);
   }
 
@@ -255,4 +255,23 @@
     white-space: nowrap;
     pointer-events: none;
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='time-field'][data-part='clear-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='time-field'][data-part='clear-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='time-field'][data-part='clear-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }