@xihan-ui/styles 2.0.0 → 3.0.0

package/css/toggle-group.css

@@ -30,8 +30,8 @@
     /* 形态的落点：没写 data-variant 时这十支保持缺省档的取值，段的规则读的是
        「使用者令牌 → 这十支 → 语义令牌」三级，使用者令牌永远排在形态之前。
        未选中那五支管段的壳，选中那五支管当前值那一段。
-       缺省档（subtle）的段坐在自己的淡底面上，悬停 200 → 按下 300（§7.2 淡底承载）；
-       选中段是无滑块开关（§7.3）：品牌淡底 + 淡底前景，悬停 20% → 按下 28% */
+       缺省档（subtle）的段坐在自己的淡底面上，悬停 200 → 按下 300（淡底承载）；
+       选中段是无滑块开关：品牌淡底 + 淡底前景，悬停 20% → 按下 28% */
     --xh-_toggle-group-item-bg: var(--xh-bg-subtle);
     --xh-_toggle-group-item-bg-hover: var(--xh-bg-subtle-hover);
     --xh-_toggle-group-item-bg-active: var(--xh-bg-subtle-active);
@@ -96,7 +96,7 @@
     --xh-_toggle-group-item-highlight-on: none;
   }
 
-  /* outline 与 ghost 的段坐在画布上：悬停 100 → 按下 200（§7.2 白底承载） */
+  /* outline 与 ghost 的段坐在画布上：悬停 100 → 按下 200（白底承载） */
   [data-scope='toggle-group'][data-part='root'][data-variant='outline'] {
     --xh-_toggle-group-item-bg: transparent;
     --xh-_toggle-group-item-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle));
@@ -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 与竖排都跟着换边，不必另写一套。
@@ -258,7 +258,7 @@
 
   /* 选中态：单选是 role=radio + aria-checked，多选是原生按钮 + aria-pressed，
      两套 ARIA 各出一半，样式一条都对不上——只有 data-state 是两种模式共同的出口。
-     无滑块开关（§7.3）：品牌淡底 + 淡底前景，悬停 20% → 按下 28%，三态都经桥接槽交给家族画；
+     无滑块开关：品牌淡底 + 淡底前景，悬停 20% → 按下 28%，三态都经桥接槽交给家族画；
      用哪族颜色由 data-tone 决定：语气槽沿继承流下来，root 自己写了 tone 算、
      整组落在语气容器里也算；没有语气就退回品牌配色，与不接语气时逐值相同。
      使用者令牌排在语气之前：写了组件槽就以它为准。
@@ -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

@@ -14,7 +14,7 @@
 
   /* 未按下的四档形态由家族形态矩阵按 data-xh-action-variant 给出（缺省 subtle 由连接层显式投影；solid 未按下时
      投 ghost，只在按下时才是品牌实心）；公开槽桥接到矩阵之前：使用者槽 → 形态矩阵 → 家族缺省。
-     按下（on）是 §7.3 无滑块开关的选中面：品牌淡底 12 → 悬停 20 → 按压 28，前景 fg-on-brand-subtle，
+     按下（on）是无滑块开关的选中面：品牌淡底 12 → 悬停 20 → 按压 28，前景 fg-on-brand-subtle，
      私有槽在下面的 data-state='on' 块里接到桥接槽上。 */
   [data-scope='toggle'][data-part='root'] {
     --xh-_toggle-bg-on: var(--xh-toggle-bg-on, var(--xh-_tone-subtle, var(--xh-bg-brand-subtle)));
@@ -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));
@@ -97,7 +98,7 @@
     --xh-action-border-disabled: var(--xh-_toggle-border-on);
   }
 
-  /* 使用者的 --xh-toggle-shadow 只落在按下面上：矩阵各态无影，淡底与阴影互斥（§5.3） */
+  /* 使用者的 --xh-toggle-shadow 只落在按下面上：矩阵各态无影，淡底与阴影互斥 */
   [data-scope='toggle'][data-part='root'][data-state='on'] {
     --xh-action-shadow-rest: var(--xh-toggle-shadow, none);
     --xh-action-shadow-hover: var(--xh-toggle-shadow, none);
@@ -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

@@ -16,20 +16,20 @@
     --xh-tool-call-skin: 1;
   }
 
-  /* 一张静态内容面：--xh-border-default 描边 + surface 底 + 无影（§5.3 边界只由描边承担）；
+  /* 一张静态内容面：--xh-border-default 描边 + surface 底 + 无影（边界只由描边承担）；
      审批位与详情区的内部分隔线走另一支 --xh-tool-call-divider（subtle）。
      卡片建出来时淡入并向上收一段，一屏若干张的错峰交给外层容器排 */
   [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，缺省无影写成零影占位 */
     --xh-_tool-call-shadow: var(--xh-tool-call-shadow, 0 0 0 transparent);
 
-    /* 作者塞进指示符里的图标与皮肤画的兜底字形同一把尺：md 档（§6.5），开关上另按家族档取值 */
+    /* 作者塞进指示符里的图标与皮肤画的兜底字形同一把尺：md 档，开关上另按家族档取值 */
     --xh-icon-size: var(--xh-tool-call-icon-size, var(--xh-glyph-size-md));
 
     display: block;
@@ -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}，这里补回 */
@@ -49,7 +53,7 @@
   /* —— 形态 —— */
   /* 缺省档即 outline，写在上面那条基础规则里 */
   /* 底色分区：描边让位给底色，嵌在别人的面里时不再多一圈线；
-     淡底承载面向开关下发 hover 200 → pressed 300（§7.2） */
+     淡底承载面向开关下发 hover 200 → pressed 300 */
   [data-scope='tool-call'][data-part='root'][data-variant='subtle'] {
     --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
     --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
@@ -84,7 +88,7 @@
   }
 
   /* 开关铺满一行，盒型、悬停 / 按下 / 禁用面由 Action Control 的 disclosure-trigger 档给（ghost 形态：
-     白底承载 hover 100 → pressed 200，按下只换面不缩放，§9.2）；这里只把使用者槽映射到桥接槽：
+     白底承载 hover 100 → pressed 200，按下只换面不缩放）；这里只把使用者槽映射到桥接槽：
      圆角归零贴住卡边，内衬与字号沿用卡片的档位（不取 profile 的 md 档内衬，几何不变），
      字形按开关自己的档位取 --xh-_action-profile-glyph-size */
   [data-scope='tool-call'][data-part='trigger'] {
@@ -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 档曲线（§9.4） */
-  [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;
+  /* 退场走 exit 档曲线 */
+  [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);
   }
 
@@ -69,7 +70,7 @@
   }
 
   /* 淡底档：带内距、换成 subtle 底，描边让位给底色但留住 1px 边位（与 outline 几何一致），无影；
-     淡底承载面向条目下发 hover 200 → pressed 300（§7.2） */
+     淡底承载面向条目下发 hover 200 → pressed 300 */
   [data-scope='toolbar'][data-part='root'][data-variant='subtle'] {
     --xh-_toolbar-root-p: var(--xh-_toolbar-p);
     --xh-_toolbar-root-border-width: var(--xh-stroke-thin);
@@ -78,7 +79,7 @@
     --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
   }
 
-  /* 附着式工具面：一张静态内容面，--xh-border-default 描边 + surface 底 + 无影（§5.3 边界只由描边承担）。 */
+  /* 附着式工具面：一张静态内容面，--xh-border-default 描边 + surface 底 + 无影（边界只由描边承担）。 */
   [data-scope='toolbar'][data-part='root'][data-variant='outline'] {
     --xh-_toolbar-root-p: var(--xh-_toolbar-p);
     --xh-_toolbar-root-border-width: var(--xh-stroke-thin);
@@ -145,7 +146,7 @@
 
   /* 默认条目是一枚无描边工具按钮：盒型、三档几何、悬停 / 按下 / 禁用面与按压缩放由 Action Control 的
      text 档给（ghost 形态：ghost 根按画布承载 hover 100 → pressed 200，subtle 根与分组由 host 槽下发
-     200 → 300，§7.2）；这里只把使用者槽映射到桥接槽（-gap / -h / -px / -radius / -bg / -bg-hover /
+     200 → 300）；这里只把使用者槽映射到桥接槽（-gap / -h / -px / -radius / -bg / -bg-hover /
      -bg-active / -bg-disabled / -fg / -font-size 保留为第一参数）。作者仍可用类名或内联样式完整覆盖。 */
   [data-scope='toolbar'][data-part='item'] {
     --xh-action-gap: var(--xh-toolbar-item-gap, var(--xh-control-gap-sm));
@@ -165,7 +166,7 @@
     touch-action: manipulation;
   }
 
-  /* 无滑块开关的按下态（§7.3）：品牌淡底 + 淡底前景，hover / 按下沿 12% → 20% → 28% 三档走；
+  /* 无滑块开关的按下态：品牌淡底 + 淡底前景，hover / 按下沿 12% → 20% → 28% 三档走；
      三态都经桥接槽交给家族画，禁用面仍由家族按 data-disabled 给 */
   [data-scope='toolbar'][data-part='item'][aria-pressed='true'] {
     --xh-action-bg-rest: var(--xh-toolbar-item-bg-pressed, var(--xh-bg-brand-subtle));
@@ -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

@@ -75,10 +75,10 @@
     --xh-_tooltip-py: var(--xh-space-1);
     --xh-_tooltip-px: var(--xh-space-2);
     --xh-_tooltip-font-size: var(--xh-control-caption-md);
-    /* Tooltip 保留反白身份（真源 §8.4 登记的反白 compact frosted）：短提示要与可交互的普通主题浮层一眼分开。
+    /* Tooltip 保留反白身份（登记的反白 compact frosted）：短提示要与可交互的普通主题浮层一眼分开。
        94% 是六种 tone 在纯黑/纯白最坏底色上仍托住 4.5:1 正文的首个安全档。
        边不取 --xh-material-frosted-border：那是深色 14% 的透明边，压在反白深底上看不见，
-       §8.1 要求的 1px 可见边界由 on 色 20% 拼色承担；§8.1 禁玻璃高光，顶光缺省不画 */
+       浮层要的 1px 可见边界由 on 色 20% 拼色承担；浮层不用玻璃高光，顶光缺省不画 */
     --xh-_tooltip-solid: var(--xh-_tone, var(--xh-fg-default));
     --xh-_tooltip-on: var(--xh-_tone-on, var(--xh-bg-surface));
     --xh-_tooltip-border: color-mix(in oklab, var(--xh-_tooltip-on) 20%, transparent);
@@ -106,7 +106,7 @@
     text-wrap: pretty;
     --xh-_tooltip-elevation-shadow: var(--xh-tooltip-shadow, var(--xh-material-frosted-compact-shadow));
 
-    /* 顶光槽缺省透明（§8.1 不用顶部高光），使用者要加自行灌色 */
+    /* 顶光槽缺省透明（不用顶部高光），使用者要加自行灌色 */
     box-shadow:
       inset 0 var(--xh-stroke-thin) 0 var(--xh-tooltip-highlight, transparent),
       var(--xh-_tooltip-elevation-shadow);
@@ -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,11 +138,10 @@
     pointer-events: none;
   }
 
-  /* 入场走 enter 档（§9.5：锚定列表族的 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);
-    /* 只在开着的这一档挂：合成层随 data-state 一起收走，收起后不再占着 */
-    will-change: opacity, translate;
   }
 
   /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，