@xihan-ui/styles 2.1.0 → 3.0.0

package/css/time-picker.css

@@ -63,6 +63,7 @@
     --xh-_time-picker-control-px: var(--xh-control-px-md);
     --xh-_time-picker-gap: var(--xh-control-gap-md);
     --xh-_time-picker-font-size: var(--xh-control-font-md);
+    --xh-_time-picker-item-py: var(--xh-list-option-py-md);
 
     /* 段位强调随语气走：当前段是「当前项」，淡底 + 淡底前景；对号使用普通表面上的前景色。
        没写 data-tone 时这几个 --xh-_tone* 没被声明，退回品牌色 */
@@ -95,6 +96,7 @@
     --xh-_time-picker-control-px: var(--xh-control-px-sm);
     --xh-_time-picker-gap: var(--xh-control-gap-sm);
     --xh-_time-picker-font-size: var(--xh-control-font-sm);
+    --xh-_time-picker-item-py: var(--xh-list-option-py-sm);
   }
 
   [data-scope='time-picker']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
@@ -103,6 +105,7 @@
     --xh-_time-picker-control-px: var(--xh-control-px-lg);
     --xh-_time-picker-gap: var(--xh-control-gap-lg);
     --xh-_time-picker-font-size: var(--xh-control-font-lg);
+    --xh-_time-picker-item-py: var(--xh-list-option-py-lg);
   }
 
   /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
@@ -189,7 +192,7 @@
     /* 段是 role=spinbutton 的展示节点，双击选中一段文字只会碍事 */
     user-select: none;
     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);
   }
 
@@ -320,7 +323,8 @@
     outline: none;
   }
 
-  [data-scope='time-picker'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='time-picker'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -341,7 +345,7 @@
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    border-inline-end: var(--xh-stroke-thin) solid var(--xh-time-picker-column-divider, var(--xh-material-frosted-separator));
+    border-inline-end: var(--xh-stroke-thin) solid var(--xh-time-picker-column-divider, var(--xh-material-solid-separator));
   }
 
   [data-scope='time-picker'][data-part='preset-group'][hidden] {
@@ -355,7 +359,7 @@
     --xh-collection-block-padding: var(--xh-time-picker-preset-py, var(--xh-space-1));
     --xh-collection-inline-padding: var(--xh-time-picker-preset-px, var(--xh-space-3));
     --xh-collection-font-size: var(--xh-text-secondary-size);
-    --xh-collection-radius: var(--xh-time-picker-preset-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-time-picker-preset-radius, var(--xh-shape-inset));
     /* 面板是实体面（floating），正文取页面前景 */
     --xh-collection-fg-rest: var(--xh-time-picker-preset-fg, var(--xh-fg-default));
     --xh-collection-fg-hover: var(--xh-time-picker-preset-fg, var(--xh-fg-default));
@@ -381,7 +385,7 @@
     /* 对号的末端轨始终留着，切换选中时文字与整列宽度都不移动。 */
     padding-inline-end: calc(
       var(--xh-time-picker-preset-px, var(--xh-space-3))
-      + var(--xh-time-picker-preset-check-size, var(--xh-glyph-size-sm))
+      + var(--xh-time-picker-preset-check-size, var(--xh-control-indicator-size))
       + var(--xh-space-1)
     );
     white-space: nowrap;
@@ -402,8 +406,8 @@
     position: absolute;
     inset-block-start: 50%;
     inset-inline-end: var(--xh-time-picker-preset-px, var(--xh-space-3));
-    inline-size: var(--xh-time-picker-preset-check-size, var(--xh-glyph-size-sm));
-    block-size: var(--xh-time-picker-preset-check-size, var(--xh-glyph-size-sm));
+    inline-size: var(--xh-time-picker-preset-check-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-time-picker-preset-check-size, var(--xh-control-indicator-size));
     background-color: var(--xh-time-picker-preset-check-fg, var(--xh-_time-picker-check-fg));
     opacity: 0;
     translate: 0 -50%;
@@ -450,7 +454,7 @@
 
   /* 每列后面紧跟着它自己的贴层条子节点，相邻选择器接不到下一列，按「前面有过列」取第二列起 */
   [data-scope='time-picker'][data-part='column'] ~ [data-scope='time-picker'][data-part='column'] {
-    border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-picker-column-divider, var(--xh-material-frosted-separator));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-picker-column-divider, var(--xh-material-solid-separator));
   }
 
   /* 焦点落在列上有两种情形：指针打开、这一段还空着、还没有任何格当锚点，或整列被界裁空。
@@ -472,13 +476,13 @@
   [data-scope='time-picker'][data-part='item'] {
     --xh-_time-picker-item-rail: max(
       var(--xh-time-picker-item-px, var(--xh-space-0_5)),
-      calc(var(--xh-time-picker-item-check-size, var(--xh-glyph-size-sm)) + var(--xh-space-0_5))
+      calc(var(--xh-time-picker-item-check-size, var(--xh-control-indicator-size)) + var(--xh-space-0_5))
     );
-    --xh-collection-block-padding: var(--xh-time-picker-item-py, 0);
+    --xh-collection-block-padding: var(--xh-time-picker-item-py, var(--xh-_time-picker-item-py));
     /* 两侧留同宽轨：对号绝对落在末端，数字仍在整格的数学中心。 */
     --xh-collection-inline-padding: var(--xh-_time-picker-item-rail);
     --xh-collection-font-size: var(--xh-time-picker-item-font-size, var(--xh-_time-picker-font-size));
-    --xh-collection-radius: var(--xh-time-picker-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-time-picker-item-radius, var(--xh-shape-inset));
     --xh-collection-fg-rest: var(--xh-time-picker-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-time-picker-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-time-picker-item-fg, var(--xh-material-frosted-fg));
@@ -505,9 +509,9 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    block-size: var(--xh-time-picker-item-h, var(--xh-overlay-column-item-h));
+    block-size: var(--xh-time-picker-item-h, auto);
     /* 居中的单个数字格没有截断层，行高保持紧排，列内多露几格 */
-    line-height: var(--xh-leading-none);
+    line-height: var(--xh-leading-normal);
     white-space: nowrap;
     user-select: none;
   }
@@ -530,8 +534,8 @@
     position: absolute;
     inset-block-start: 50%;
     inset-inline-end: var(--xh-space-0_5);
-    inline-size: var(--xh-time-picker-item-check-size, var(--xh-glyph-size-sm));
-    block-size: var(--xh-time-picker-item-check-size, var(--xh-glyph-size-sm));
+    inline-size: var(--xh-time-picker-item-check-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-time-picker-item-check-size, var(--xh-control-indicator-size));
     background-color: var(--xh-time-picker-item-check-fg, var(--xh-_time-picker-check-fg));
     opacity: 0;
     translate: 0 -50%;
@@ -564,6 +568,12 @@
       forced-color-adjust: none;
     }
 
+    /* 按下与没被高亮时的悬停，家族把条目涂成 Highlight，对号跟着换 HighlightText */
+    [data-scope='time-picker'][data-part='preset']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after,
+    [data-scope='time-picker'][data-part='item']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after {
+      background-color: HighlightText;
+    }
+
     [data-scope='time-picker'][data-part='preset'][data-disabled]::after,
     [data-scope='time-picker'][data-part='item'][data-disabled]::after {
       background-color: GrayText;
@@ -608,6 +618,25 @@
     -webkit-mask: var(--xh-glyph-mark-clock) center / contain no-repeat;
     mask: var(--xh-glyph-mark-clock) center / contain no-repeat;
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='time-picker']:is([data-part='clear-trigger'], [data-part='trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='time-picker']:is([data-part='clear-trigger'], [data-part='trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='time-picker']:is([data-part='clear-trigger'], [data-part='trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }
 
 @layer xihan.motion {

package/css/time-range-picker.css

@@ -70,6 +70,7 @@
     --xh-_time-range-picker-control-px: var(--xh-control-px-md);
     --xh-_time-range-picker-gap: var(--xh-control-gap-md);
     --xh-_time-range-picker-font-size: var(--xh-control-font-md);
+    --xh-_time-range-picker-item-py: var(--xh-list-option-py-md);
 
     /* 段位强调随语气走：当前段是「当前项」，淡底 + 淡底前景；对号使用普通表面上的前景色。
        没写 data-tone 时这几个 --xh-_tone* 没被声明，退回品牌色 */
@@ -102,6 +103,7 @@
     --xh-_time-range-picker-control-px: var(--xh-control-px-sm);
     --xh-_time-range-picker-gap: var(--xh-control-gap-sm);
     --xh-_time-range-picker-font-size: var(--xh-control-font-sm);
+    --xh-_time-range-picker-item-py: var(--xh-list-option-py-sm);
   }
 
   [data-scope='time-range-picker']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
@@ -110,6 +112,7 @@
     --xh-_time-range-picker-control-px: var(--xh-control-px-lg);
     --xh-_time-range-picker-gap: var(--xh-control-gap-lg);
     --xh-_time-range-picker-font-size: var(--xh-control-font-lg);
+    --xh-_time-range-picker-item-py: var(--xh-list-option-py-lg);
   }
 
   /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
@@ -222,7 +225,7 @@
     /* 段是 role=spinbutton 的展示节点，双击选中一段文字只会碍事 */
     user-select: none;
     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);
   }
 
@@ -359,7 +362,8 @@
     outline: none;
   }
 
-  [data-scope='time-range-picker'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='time-range-picker'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -380,7 +384,7 @@
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    border-inline-end: var(--xh-stroke-thin) solid var(--xh-time-range-picker-column-divider, var(--xh-material-frosted-separator));
+    border-inline-end: var(--xh-stroke-thin) solid var(--xh-time-range-picker-column-divider, var(--xh-material-solid-separator));
   }
 
   [data-scope='time-range-picker'][data-part='preset-group'][hidden] {
@@ -394,7 +398,7 @@
     --xh-collection-block-padding: var(--xh-time-range-picker-preset-py, var(--xh-space-1));
     --xh-collection-inline-padding: var(--xh-time-range-picker-preset-px, var(--xh-space-3));
     --xh-collection-font-size: var(--xh-text-secondary-size);
-    --xh-collection-radius: var(--xh-time-range-picker-preset-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-time-range-picker-preset-radius, var(--xh-shape-inset));
     /* 面板是实体面（floating），正文取页面前景 */
     --xh-collection-fg-rest: var(--xh-time-range-picker-preset-fg, var(--xh-fg-default));
     --xh-collection-fg-hover: var(--xh-time-range-picker-preset-fg, var(--xh-fg-default));
@@ -420,7 +424,7 @@
     /* 对号的末端轨始终留着，切换选中时文字与整列宽度都不移动。 */
     padding-inline-end: calc(
       var(--xh-time-range-picker-preset-px, var(--xh-space-3))
-      + var(--xh-time-range-picker-preset-check-size, var(--xh-glyph-size-sm))
+      + var(--xh-time-range-picker-preset-check-size, var(--xh-control-indicator-size))
       + var(--xh-space-1)
     );
     white-space: nowrap;
@@ -441,8 +445,8 @@
     position: absolute;
     inset-block-start: 50%;
     inset-inline-end: var(--xh-time-range-picker-preset-px, var(--xh-space-3));
-    inline-size: var(--xh-time-range-picker-preset-check-size, var(--xh-glyph-size-sm));
-    block-size: var(--xh-time-range-picker-preset-check-size, var(--xh-glyph-size-sm));
+    inline-size: var(--xh-time-range-picker-preset-check-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-time-range-picker-preset-check-size, var(--xh-control-indicator-size));
     background-color: var(--xh-time-range-picker-preset-check-fg, var(--xh-_time-range-picker-check-fg));
     opacity: 0;
     translate: 0 -50%;
@@ -497,7 +501,7 @@
   [data-scope='time-range-picker'][data-part='column-group'] + [data-scope='time-range-picker'][data-part='column-group'] {
     margin-inline-start: var(--xh-time-range-picker-column-group-gap, var(--xh-space-2));
     padding-inline-start: var(--xh-time-range-picker-column-group-gap, var(--xh-space-2));
-    border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-range-picker-column-group-divider, var(--xh-material-frosted-separator));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-range-picker-column-group-divider, var(--xh-material-solid-separator));
   }
 
   /* 组顶上的小标题：独占一行，字号走辅助文本档 */
@@ -546,7 +550,7 @@
 
   /* 每列后面紧跟着它自己的贴层条子节点，相邻选择器接不到下一列，按「前面有过列」取第二列起 */
   [data-scope='time-range-picker'][data-part='column'] ~ [data-scope='time-range-picker'][data-part='column'] {
-    border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-range-picker-column-divider, var(--xh-material-frosted-separator));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-range-picker-column-divider, var(--xh-material-solid-separator));
   }
 
   /* 焦点落在列上有两种情形：指针打开、这一段还空着、还没有任何格当锚点，或整列被界裁空。
@@ -568,13 +572,13 @@
   [data-scope='time-range-picker'][data-part='item'] {
     --xh-_time-range-picker-item-rail: max(
       var(--xh-time-range-picker-item-px, var(--xh-space-0_5)),
-      calc(var(--xh-time-range-picker-item-check-size, var(--xh-glyph-size-sm)) + var(--xh-space-0_5))
+      calc(var(--xh-time-range-picker-item-check-size, var(--xh-control-indicator-size)) + var(--xh-space-0_5))
     );
-    --xh-collection-block-padding: var(--xh-time-range-picker-item-py, 0);
+    --xh-collection-block-padding: var(--xh-time-range-picker-item-py, var(--xh-_time-range-picker-item-py));
     /* 两侧留同宽轨：对号绝对落在末端，数字仍在整格的数学中心。 */
     --xh-collection-inline-padding: var(--xh-_time-range-picker-item-rail);
     --xh-collection-font-size: var(--xh-time-range-picker-item-font-size, var(--xh-_time-range-picker-font-size));
-    --xh-collection-radius: var(--xh-time-range-picker-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-time-range-picker-item-radius, var(--xh-shape-inset));
     --xh-collection-fg-rest: var(--xh-time-range-picker-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-time-range-picker-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-time-range-picker-item-fg, var(--xh-material-frosted-fg));
@@ -601,9 +605,9 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    block-size: var(--xh-time-range-picker-item-h, var(--xh-overlay-column-item-h));
+    block-size: var(--xh-time-range-picker-item-h, auto);
     /* 居中的单个数字格没有截断层，行高保持紧排，列内多露几格 */
-    line-height: var(--xh-leading-none);
+    line-height: var(--xh-leading-normal);
     white-space: nowrap;
     user-select: none;
   }
@@ -626,8 +630,8 @@
     position: absolute;
     inset-block-start: 50%;
     inset-inline-end: var(--xh-space-0_5);
-    inline-size: var(--xh-time-range-picker-item-check-size, var(--xh-glyph-size-sm));
-    block-size: var(--xh-time-range-picker-item-check-size, var(--xh-glyph-size-sm));
+    inline-size: var(--xh-time-range-picker-item-check-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-time-range-picker-item-check-size, var(--xh-control-indicator-size));
     background-color: var(--xh-time-range-picker-item-check-fg, var(--xh-_time-range-picker-check-fg));
     opacity: 0;
     translate: 0 -50%;
@@ -660,6 +664,12 @@
       forced-color-adjust: none;
     }
 
+    /* 按下与没被高亮时的悬停，家族把条目涂成 Highlight，对号跟着换 HighlightText */
+    [data-scope='time-range-picker'][data-part='preset']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after,
+    [data-scope='time-range-picker'][data-part='item']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after {
+      background-color: HighlightText;
+    }
+
     [data-scope='time-range-picker'][data-part='preset'][data-disabled]::after,
     [data-scope='time-range-picker'][data-part='item'][data-disabled]::after {
       background-color: GrayText;
@@ -704,6 +714,25 @@
     -webkit-mask: var(--xh-glyph-mark-clock) center / contain no-repeat;
     mask: var(--xh-glyph-mark-clock) center / contain no-repeat;
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='time-range-picker']:is([data-part='clear-trigger'], [data-part='trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='time-range-picker']:is([data-part='clear-trigger'], [data-part='trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='time-range-picker']:is([data-part='clear-trigger'], [data-part='trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }
 
 @layer xihan.motion {

package/css/timeline.css

@@ -107,7 +107,7 @@
     /* 语气色由每条自己的数据给，同一条的语气改了（事情办成了、出错了）走一遍过渡，
        整列圆点不在数据回来的那一帧集体跳色 */
     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);
   }
 

package/css/toggle-group.css

@@ -215,18 +215,18 @@
     font-weight: var(--xh-toggle-group-item-font-weight, var(--xh-text-label-weight));
   }
 
-  /* 共边：后一段往回挪一个描边宽度，两条相邻的边重合成一条。
+  /* 共边只画一次：后一段不画起始边，由前一段的末端边承担。墨色描边半透明，两条重合会加深。
      方向跟着 data-orientation 走，横排收 inline 轴、竖排收 block 轴 */
   [data-scope='toggle-group'][data-part='root'][data-orientation='horizontal']
     > [data-scope='toggle-group'][data-part='item']
     + [data-scope='toggle-group'][data-part='item'] {
-    margin-inline-start: calc(-1 * var(--xh-stroke-thin));
+    border-inline-start-width: 0;
   }
 
   [data-scope='toggle-group'][data-part='root'][data-orientation='vertical']
     > [data-scope='toggle-group'][data-part='item']
     + [data-scope='toggle-group'][data-part='item'] {
-    margin-block-start: calc(-1 * var(--xh-stroke-thin));
+    border-block-start-width: 0;
   }
 
   /* 两端圆角用逻辑角属性写，rtl 与竖排都跟着换边，不必另写一套。
@@ -270,7 +270,7 @@
     --xh-action-bg-focus-visible: var(--xh-toggle-group-item-bg-on, var(--xh-_toggle-group-item-bg-on));
     --xh-action-bg-disabled: var(
       --xh-toggle-group-item-bg-on-disabled,
-      color-mix(in oklab, var(--xh-_toggle-group-item-bg-on) 50%, var(--xh-bg-muted))
+      color-mix(in oklab, var(--xh-_toggle-group-item-bg-on) 50%, var(--xh-bg-muted-opaque))
     );
     --xh-action-fg-rest: var(--xh-toggle-group-item-fg-on, var(--xh-_toggle-group-item-fg-on));
     --xh-action-fg-hover: var(--xh-toggle-group-item-fg-on, var(--xh-_toggle-group-item-fg-on));

package/css/toggle.css

@@ -34,10 +34,11 @@
     );
     --xh-_toggle-fg-on: var(--xh-toggle-fg-on, var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle)));
     --xh-_toggle-border-on: var(--xh-toggle-border-on, transparent);
-    /* 禁用同时降级前景与表面，不靠 opacity；选中且禁用时底色掺一半中性面，选中信息不丢。 */
+    /* 禁用同时降级前景与表面，不靠 opacity；选中且禁用时底色掺一半中性面，选中信息不丢。
+       掺的是淡底的不透明档：墨色淡底半透明，掺进去整块面会跟着变半透明 */
     --xh-_toggle-bg-on-disabled: var(
       --xh-toggle-bg-on-disabled,
-      color-mix(in oklab, var(--xh-_toggle-bg-on) 50%, var(--xh-bg-subtle))
+      color-mix(in oklab, var(--xh-_toggle-bg-on) 50%, var(--xh-bg-subtle-opaque))
     );
     --xh-_toggle-fg-on-disabled: var(--xh-toggle-fg-on-disabled, var(--xh-_toggle-fg-on));
     --xh-action-bg-rest: var(--xh-toggle-bg, var(--xh-_action-variant-bg-rest));
@@ -113,7 +114,7 @@
   [data-scope='toggle'][data-part='root'][data-variant='solid'][data-state='on'] {
     --xh-action-bg-disabled: var(
       --xh-toggle-bg-on-disabled,
-      color-mix(in oklab, var(--xh-_action-variant-bg-rest) 50%, var(--xh-bg-subtle))
+      color-mix(in oklab, var(--xh-_action-variant-bg-rest) 50%, var(--xh-bg-subtle-opaque))
     );
     --xh-action-fg-disabled: var(--xh-toggle-fg-on-disabled, var(--xh-_action-variant-fg-rest));
     --xh-action-highlight-rest: var(--xh-_highlight-tone);

package/css/tool-call.css

@@ -22,8 +22,8 @@
   [data-scope='tool-call'][data-part='root'] {
     /* 尺寸缺省档：不写 data-size 时的取值。三档都只写这三个私有槽，
        公开槽留在读处当首选，作者在祖先上设的覆盖才赢得过档位声明 */
-    --xh-_tool-call-px: var(--xh-space-3);
-    --xh-_tool-call-py: var(--xh-space-2);
+    --xh-_tool-call-px: var(--xh-space-4);
+    --xh-_tool-call-py: var(--xh-space-4);
     --xh-_tool-call-font-size: var(--xh-control-font-md);
 
     /* 影另落一份进私有槽给语气档：它要把影与左侧色条叠成一条 box-shadow，缺省无影写成零影占位 */
@@ -38,7 +38,11 @@
     border-radius: var(--xh-tool-call-radius, var(--xh-shape-surface));
     background: var(--xh-tool-call-bg, var(--xh-bg-surface));
     box-shadow: var(--xh-tool-call-shadow, none);
-    animation: xh-tool-call-enter var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) both;
+  }
+
+  /* 卡片出现时滑入；落在首帧就在的列表条目里（历史消息）时直接呈现，不跟着整屏一起入场 */
+  [data-scope='tool-call'][data-part='root']:not([data-scope][data-part='item'][data-instant] *) {
+    animation: xh-item-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) both;
   }
 
   /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
@@ -111,8 +115,12 @@
     align-items: center;
     justify-content: center;
     color: var(--xh-tool-call-indicator-fg, var(--xh-fg-subtle));
-    /* 与详情展开同时长同曲线：箭头先转完、内容后到位会像是两件事 */
-    transition: rotate var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 与详情开合同时长：箭头先转完、内容后到位会像是两件事。收起取 collapse 档，展开（下面的打开态）取 expand 档。
+     首帧就在的朝向直接呈现（data-instant），第一次开合起才转 */
+  [data-scope='tool-call'][data-part='indicator']:not([data-instant]) {
+    transition: rotate var(--xh-motion-duration-collapse) var(--xh-motion-ease-enter-strong);
   }
 
   /* 没写内容就由皮肤画；作者往部件里塞了自己的图形，这条规则即不命中 */
@@ -137,6 +145,10 @@
     rotate: 90deg;
   }
 
+  [data-scope='tool-call'][data-part='indicator'][data-state='open']:not([data-instant]) {
+    transition: rotate var(--xh-motion-duration-expand) var(--xh-motion-ease-enter-strong);
+  }
+
   [dir='rtl'] [data-scope='tool-call'][data-part='indicator'] {
     rotate: 180deg;
   }
@@ -151,6 +163,8 @@
     overflow: hidden;
     flex: 1 1 auto;
     font-family: var(--xh-tool-call-label-font, var(--xh-font-family-mono));
+    /* 面级披露的触发条文字取标签角色，与 Accordion、Collapsible、Reasoning 同一档字重 */
+    font-weight: var(--xh-tool-call-label-font-weight, var(--xh-text-label-weight));
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -197,29 +211,31 @@
     display: none;
   }
 
-  /* 三档落定的阶段收成药丸：淡底 + 同族深字。在跑的两档不带底，让扫光自己说话 */
-  [data-scope='tool-call'][data-part='status'][data-state='awaiting-approval'],
-  [data-scope='tool-call'][data-part='status'][data-state='output-available'],
-  [data-scope='tool-call'][data-part='status'][data-state='output-error'] {
+  /* 三档落定的阶段收成状态 chip：几何与 Tag 的 sm 档同一把尺，淡底 + 同族可读字取连接层投影的语气。
+     在跑的两档不带底，让扫光自己说话 */
+  [data-scope='tool-call'][data-part='status'][data-tone] {
     padding-block: var(--xh-tool-call-status-py, var(--xh-space-0_5));
-    padding-inline: var(--xh-tool-call-status-px, var(--xh-space-2));
+    padding-inline: var(--xh-tool-call-status-px, var(--xh-space-1_5));
+    border: var(--xh-stroke-thin) solid transparent;
     border-radius: var(--xh-tool-call-status-radius, var(--xh-shape-pill));
+    font-weight: var(--xh-font-weight-medium);
+    line-height: var(--xh-control-indicator-md);
   }
 
-  /* 各阶段的状态色：与语气轴分开走，语气是作者定的强调 */
+  /* 各阶段的覆盖槽仍按阶段给：作者可以单独改某一档 */
   [data-scope='tool-call'][data-part='status'][data-state='awaiting-approval'] {
-    background: var(--xh-tool-call-status-bg-approval, color-mix(in oklab, var(--xh-fg-warning) 12%, var(--xh-bg-surface)));
-    color: var(--xh-tool-call-status-fg-approval, color-mix(in oklab, var(--xh-fg-warning) 60%, var(--xh-fg-default)));
+    background: var(--xh-tool-call-status-bg-approval, var(--xh-_tone-subtle));
+    color: var(--xh-tool-call-status-fg-approval, var(--xh-_tone-fg));
   }
 
   [data-scope='tool-call'][data-part='status'][data-state='output-available'] {
-    background: var(--xh-tool-call-status-bg-done, color-mix(in oklab, var(--xh-fg-success) 12%, var(--xh-bg-surface)));
-    color: var(--xh-tool-call-status-fg-done, color-mix(in oklab, var(--xh-fg-success) 60%, var(--xh-fg-default)));
+    background: var(--xh-tool-call-status-bg-done, var(--xh-_tone-subtle));
+    color: var(--xh-tool-call-status-fg-done, var(--xh-_tone-fg));
   }
 
   [data-scope='tool-call'][data-part='status'][data-state='output-error'] {
-    background: var(--xh-tool-call-status-bg-error, color-mix(in oklab, var(--xh-fg-danger) 12%, var(--xh-bg-surface)));
-    color: var(--xh-tool-call-status-fg-error, color-mix(in oklab, var(--xh-fg-danger) 60%, var(--xh-fg-default)));
+    background: var(--xh-tool-call-status-bg-error, var(--xh-_tone-subtle));
+    color: var(--xh-tool-call-status-fg-error, var(--xh-_tone-fg));
   }
 
   /* 在跑的时候状态文字自己扫一道光：data-loading 此前在皮肤里没有任何表达，
@@ -237,7 +253,7 @@
     background-clip: text;
     color: transparent;
     -webkit-text-fill-color: transparent;
-    animation: xh-tool-call-shimmer var(--xh-tool-call-shimmer-duration, var(--xh-shimmer-duration)) var(--xh-motion-ease-loop) infinite;
+    animation: xh-shimmer var(--xh-tool-call-shimmer-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-loop) infinite;
   }
 
   /* 减少动效：整道光撤掉换回平色，"在跑"仍由状态文字本身表达——只停动画的话，
@@ -303,15 +319,14 @@
     border-block-start: var(--xh-stroke-thin) solid var(--xh-tool-call-divider, var(--xh-border-subtle));
   }
 
-  /* 展开那一档才提前备好行高这条通道：属性随 data-state 一起消失，收起后不长期占着 */
-  [data-scope='tool-call'][data-part='content'][data-state='open'] {
-    will-change: grid-template-rows;
-    animation: xh-disclosure-expand var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  /* 展开与收起只在开合时播：首帧就在的展开 / 收起直接呈现（data-instant） */
+  [data-scope='tool-call'][data-part='content'][data-state='open']:not([data-instant]) {
+    animation: xh-disclosure-expand var(--xh-motion-duration-expand) var(--xh-motion-ease-enter-strong);
   }
 
   /* 退场走 exit 档曲线 */
-  [data-scope='tool-call'][data-part='content'][data-state='closed'] {
-    animation: xh-disclosure-collapse var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  [data-scope='tool-call'][data-part='content'][data-state='closed']:not([data-instant]) {
+    animation: xh-disclosure-collapse var(--xh-motion-duration-collapse) var(--xh-motion-ease-exit) forwards;
   }
 
   [data-scope='tool-call'][data-part='input'],
@@ -338,20 +353,20 @@
 
   /* 尺寸档只改内衬与字号 */
   [data-scope='tool-call'][data-part='root'][data-size='sm'] {
-    --xh-_tool-call-px: var(--xh-space-2);
-    --xh-_tool-call-py: var(--xh-space-1);
+    --xh-_tool-call-px: var(--xh-space-3);
+    --xh-_tool-call-py: var(--xh-space-3);
     --xh-_tool-call-font-size: var(--xh-control-font-sm);
   }
 
   [data-scope='tool-call'][data-part='root'][data-size='md'] {
-    --xh-_tool-call-px: var(--xh-space-3);
-    --xh-_tool-call-py: var(--xh-space-2);
+    --xh-_tool-call-px: var(--xh-space-4);
+    --xh-_tool-call-py: var(--xh-space-4);
     --xh-_tool-call-font-size: var(--xh-control-font-md);
   }
 
   [data-scope='tool-call'][data-part='root'][data-size='lg'] {
-    --xh-_tool-call-px: var(--xh-space-4);
-    --xh-_tool-call-py: var(--xh-space-3);
+    --xh-_tool-call-px: var(--xh-space-5);
+    --xh-_tool-call-py: var(--xh-space-5);
     --xh-_tool-call-font-size: var(--xh-control-font-lg);
   }
 
@@ -362,35 +377,28 @@
       inset var(--xh-tool-call-tone-bar, var(--xh-stroke-thick)) 0 0 0 var(--xh-tool-call-tone-fg, var(--xh-_tone-soft, var(--xh-bg-brand))),
       var(--xh-_tool-call-shadow);
   }
-}
 
-@layer xihan.motion {
-  /* 组件专属关键帧写在自己身上；共享的 disclosure 关键帧由 family/motion.css 提供。
-     幅度走令牌，减弱动效时由令牌层归零 */
-  @keyframes xh-tool-call-enter {
-    from {
-      opacity: 0;
-      translate: 0 var(--xh-motion-distance-md);
-    }
-
-    to {
-      opacity: 1;
-      translate: 0 0;
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='tool-call'][data-part='indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
     }
-  }
 
-  /* 一道比字色亮的窄带从右扫到左。背景图比自身宽一倍，靠移动背景位置扫过去，
-     不动布局也不动 transform */
-  @keyframes xh-tool-call-shimmer {
-    from {
-      background-position: 150% center;
+    [data-scope='tool-call'][data-part='trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]) [data-scope='tool-call'][data-part='indicator']:empty::before {
+      background-color: HighlightText;
     }
 
-    to {
-      background-position: -50% center;
+    [data-scope='tool-call'][data-part='trigger'][data-disabled] [data-scope='tool-call'][data-part='indicator']:empty::before {
+      background-color: GrayText;
     }
   }
+}
 
+@layer xihan.motion {
   @media print {
     /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
        取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份