@xihan-ui/styles 2.1.0 → 3.1.0

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 {
     /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
        取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份

package/css/toolbar.css

@@ -31,7 +31,8 @@
     --xh-_toolbar-root-bg: transparent;
     --xh-_toolbar-root-bg-disabled: transparent;
 
-    /* 一行排不下就折行：条目宽度由各自的控件决定，硬撑一行会把整条顶出容器 */
+    /* 一行排不下就折行：条目宽度由各自的控件决定，硬撑一行会把整条顶出容器。
+       放了「更多」钮时改为收纳，见下方收纳一节 */
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -44,7 +45,7 @@
     color: var(--xh-toolbar-fg, var(--xh-fg-default));
     /* 整条置灰与恢复是一次状态切换，底色与字色淡着换，不硬切 */
     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);
   }
 
@@ -181,12 +182,16 @@
   }
 
   /* 组内分段使用同一块中性操作面（淡底承载：hover 200 → pressed 300 由 host 槽下发）；
-     中间段保持直角，只给整组两端补回控件圆角。按下态 / 禁用面与散落条目同一套规则 */
+     中间段保持直角，只给整组两端补回控件圆角。按下态 / 禁用面与散落条目同一套规则。
+     分段零间距直角相接，按下只换面不缩放：缩放任一段都会把两侧接缝撕开 */
   [data-scope='toolbar'][data-part='group'] > [data-scope='toolbar'][data-part='item'] {
     --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
     --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
     --xh-action-radius: 0;
+    --xh-action-scale-pressed: none;
     --xh-action-bg-disabled: var(--xh-toolbar-item-bg-disabled, var(--xh-bg-subtle));
+    /* 组末端补回的控件圆角：尾部几段收进「更多」菜单后，由留下的最后一段接过去 */
+    --xh-_toolbar-segment-end-radius: var(--xh-toolbar-item-radius, var(--xh-shape-control));
 
     position: relative;
   }
@@ -257,6 +262,80 @@
     margin-block-start: calc(-1 * var(--xh-toolbar-separator-thickness, var(--xh-stroke-thin)));
   }
 
+  /* —— 收纳 —— */
+  /* 放了「更多」钮就不折行：放不下的条目按次序收进它弹出的菜单。条目与分组不压缩——压缩了，
+     量到的就不是自然长度；root 在 flex 父容器里可以被压到比内容窄，可用长度由外面给 */
+  [data-scope='toolbar'][data-part='root']:has(> [data-scope='toolbar'][data-part='overflow-trigger']) {
+    flex-wrap: nowrap;
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+
+  [data-scope='toolbar'][data-part='root']:has(> [data-scope='toolbar'][data-part='overflow-trigger'])
+    > :is([data-scope='toolbar'][data-part='item'], [data-scope='toolbar'][data-part='group']) {
+    flex-shrink: 0;
+  }
+
+  /* 收起的条目之前的分隔线与整组收空的分组一并让开：它们分隔的那一侧已经没有露着的条目，
+     留着会在「更多」钮前多出一道线、多出一截间距 */
+  [data-scope='toolbar'][data-part='root']:has(> [data-scope='toolbar'][data-part='overflow-trigger']:not([hidden]))
+    > [data-scope='toolbar'][data-part='separator']:not(
+      :has(
+        ~ [data-scope='toolbar'][data-part='item']:not([hidden]),
+        ~ [data-scope='toolbar'][data-part='group'] > [data-scope='toolbar'][data-part='item']:not([hidden])
+      )
+    ),
+  [data-scope='toolbar'][data-part='root']:has(> [data-scope='toolbar'][data-part='overflow-trigger']:not([hidden]))
+    > [data-scope='toolbar'][data-part='group']:not(:has(> [data-scope='toolbar'][data-part='item']:not([hidden]))),
+  [data-scope='toolbar'][data-part='root']:has(> [data-scope='toolbar'][data-part='overflow-trigger']:not([hidden]))
+    > [data-scope='toolbar'][data-part='group']
+    > [data-scope='toolbar'][data-part='separator']:not(:has(~ [data-scope='toolbar'][data-part='item']:not([hidden]))) {
+    display: none;
+  }
+
+  /* 组的尾部几段收进菜单后，留下的最后一段补回末端圆角 */
+  [data-scope='toolbar'][data-part='group'][data-orientation='horizontal']
+    > [data-scope='toolbar'][data-part='item']:not([hidden]):not(:has(~ [data-scope='toolbar'][data-part='item']:not([hidden]))) {
+    border-start-end-radius: var(--xh-_toolbar-segment-end-radius);
+    border-end-end-radius: var(--xh-_toolbar-segment-end-radius);
+  }
+
+  [data-scope='toolbar'][data-part='group'][data-orientation='vertical']
+    > [data-scope='toolbar'][data-part='item']:not([hidden]):not(:has(~ [data-scope='toolbar'][data-part='item']:not([hidden]))) {
+    border-end-start-radius: var(--xh-_toolbar-segment-end-radius);
+    border-end-end-radius: var(--xh-_toolbar-segment-end-radius);
+  }
+
+  /* 「更多」钮：行尾一枚单图标钮，接 Action Control icon 档 ghost 面，与条目同档（连接层投影 profile /
+     variant / size）。盒取条目同高的正方形，四态面、0.97 按压、焦点环与粗指针 44px 命中区由家族配方给；
+     承载面的阶梯随根的 variant 经 host 槽下发（ghost 根白底 100 → 200，subtle 根淡底 200 → 300） */
+  [data-scope='toolbar'][data-part='overflow-trigger'] {
+    touch-action: manipulation;
+  }
+
+  /* 菜单开着：与悬停同档的中性面，不用品牌色、不另画环；收起的是哪几条由菜单本身说明 */
+  [data-scope='toolbar'][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);
+  }
+
+  /* 没写内容就由皮肤画兜底字形：横排三点。作者塞了自己的图标这条即不命中；
+     字形与条目里的图标同一把尺（根按尺寸档下发的 --xh-icon-size） */
+  [data-scope='toolbar'][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;
+  }
+
+  /* 全部放得下时连接层给的是 hidden 属性；家族那条 display 会把 UA 规则盖掉 */
+  [data-scope='toolbar'][data-part='overflow-trigger'][hidden] {
+    display: none;
+  }
+
   @media (forced-colors: active) {
     /* 分段之间那条线画的是一块纯底色，这一档里底色被统一换成 Canvas，线整条消失，
        几段控件就连成了一长串。换成前景色画回来 */
@@ -264,4 +343,23 @@
       background: CanvasText;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='toolbar'][data-part='overflow-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='toolbar'][data-part='overflow-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='toolbar'][data-part='overflow-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/tooltip.css

@@ -114,6 +114,18 @@
     backdrop-filter: var(--xh-tooltip-backdrop, var(--xh-material-frosted-compact-backdrop));
   }
 
+  /* 跟随鼠标的提示压在指针旁边、随指针挪：它接了指针就会挡住 trigger 上的移动，指针一滑进去便算离开了 trigger。
+     这一档浮层本体同样让指针穿过去，停留细看交给 trigger 本身 */
+  [data-scope='tooltip'][data-part='positioner'][data-follow-cursor] [data-scope='tooltip'][data-part='content'] {
+    pointer-events: none;
+  }
+
+  /* 反白面是一块彩色面（连接层打 data-xh-ink-surface）：面内的作者内容按这块底取墨色。
+     底色取自被墨色域改写的令牌，所以域只落在面内的子元素上，这里的取值仍按外层主题解析 */
+  [data-scope='tooltip'][data-part='content'][data-xh-ink-surface] {
+    --xh-ink-surface: var(--xh-tooltip-bg, var(--xh-_tooltip-solid));
+  }
+
   /* 光学层单独承载 tint 与透明度；backdrop-filter 只采样元素背后，不处理正文。 */
   [data-scope='tooltip'][data-part='content']::before {
     content: '';
@@ -126,8 +138,9 @@
     pointer-events: none;
   }
 
-  /* 入场走 enter 档（锚定列表族的 tooltip 入场 --xh-motion-duration-enter），退场仍是 exit */
-  [data-scope='tooltip'][data-part='content'][data-state='open'] {
+  /* 入场走 enter 档（锚定列表族的 tooltip 入场 --xh-motion-duration-enter），退场仍是 exit。
+     接替上一个提示打开的（data-instant）直接呈现：横扫一排钮时提示一个个跟上，不再一个个滑入 */
+  [data-scope='tooltip'][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);
   }
 

package/css/tour.css

@@ -13,7 +13,7 @@
   /* 高亮框落定时那一下呼吸：换步时视线要跟着它走，纯位移太容易被漏看 */
   @keyframes xh-tour-spotlight-in {
     from {
-      opacity: 0;
+      opacity: var(--xh-_enter-from-opacity, 0);
       scale: calc(2 - var(--xh-motion-scale-enter));
     }
 
@@ -70,7 +70,7 @@
     display: none;
   }
 
-  [data-scope='tour'][data-part='backdrop'][data-state='open'] {
+  [data-scope='tour'][data-part='backdrop'][data-state='open']:not([data-instant]) {
     animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
@@ -94,13 +94,23 @@
     box-shadow:
       0 0 0 var(--xh-stroke-thick) var(--xh-tour-spotlight-ring, var(--xh-ring-focus)),
       0 0 0 100vmax var(--xh-_tour-spotlight-shroud);
-    /* 换步时框自己滑过去，用户的视线跟得上；逻辑属性照样可过渡 */
+  }
+
+  /* 换步那一段（data-animating）：聚光框与气泡同一段时长、同一条曲线一起滑到下一个目标，视线跟得上；
+     页面滚动与视口缩放时不挂，两者跟手、不拖尾。坐标由连接层按物理 left / top 写进内联，过渡跟着写物理轴 */
+  [data-scope='tour'][data-part='spotlight'][data-animating] {
     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),
-      border-radius var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
+      left var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      top 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),
+      border-radius var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  [data-scope='tour'][data-part='positioner'][data-animating] {
+    transition:
+      left var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      top var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
   [data-scope='tour'][data-part='spotlight'][data-dimmed] {
@@ -111,7 +121,7 @@
     display: none;
   }
 
-  [data-scope='tour'][data-part='spotlight'][data-state='open'] {
+  [data-scope='tour'][data-part='spotlight'][data-state='open']:not([data-instant]) {
     animation: xh-tour-spotlight-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -209,7 +219,8 @@
   /* 焦点落在气泡本身，Enter / Space 落在它身上推进下一步：它是可操作目标，
      环由 focus.css 的默认内收环画，这里不另写 */
 
-  [data-scope='tour'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='tour'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -236,7 +247,7 @@
   /* 说明文字走说明档：13px + fg-muted */
   [data-scope='tour'][data-part='description'] {
     margin: 0;
-    font-size: var(--xh-text-secondary-size);
+    font-size: var(--xh-tour-description-font-size, var(--xh-text-secondary-size));
     line-height: var(--xh-leading-normal);
     color: var(--xh-tour-description-fg, var(--xh-fg-muted));
   }
@@ -266,7 +277,7 @@
     border-radius: var(--xh-shape-circle);
     background: var(--xh-tour-progress-dot-bg, var(--xh-border-default));
     transition:
-      inline-size var(--xh-motion-duration-micro) var(--xh-motion-ease-continuous),
+      inline-size var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
       background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -406,4 +417,23 @@
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='tour'][data-part='close-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='tour'][data-part='close-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='tour'][data-part='close-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }