@xihan-ui/styles 3.2.0 → 4.0.0

package/css/popover.css

@@ -108,15 +108,17 @@
     /* 作者塞进面板里的图标按控件档取；关闭钮另由家族配方按 sm 档下发字形尺 */
     --xh-icon-size: var(--xh-popover-icon-size, var(--xh-glyph-size-md));
 
-    /* 尺寸档只换这两个私有槽。popover 没有 root 部件，size 落在浮层树最外层的 content 上。
-       语气不接：面板是内容容器，语气该由里面的内容表达 */
-    --xh-_popover-pad: var(--xh-surface-pad-md);
+    /* 尺寸档只换这三个私有槽。popover 没有 root 部件，size 落在浮层树最外层的 content 上。
+       横向内衬比纵向高一档（缺省纵 12 横 16）。语气不接：面板是内容容器，语气该由里面的内容表达 */
+    --xh-_popover-py: var(--xh-surface-pad-md);
+    --xh-_popover-px: var(--xh-surface-pad-lg);
     --xh-_popover-max-w: var(--xh-overlay-max-w);
 
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--xh-popover-gap, var(--xh-space-2));
+    /* 标题与正文贴着排：两行之间只留 4px */
+    gap: var(--xh-popover-gap, var(--xh-space-1));
     inline-size: max-content;
     /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的内容就点不到了 */
     max-inline-size: min(var(--xh-popover-max-w, var(--xh-_popover-max-w)), var(--xh-_popover-available-w));
@@ -125,8 +127,8 @@
     overflow-y: auto;
     /* 浮在页面之上的 Overlay 滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    padding-block: var(--xh-popover-py, var(--xh-_popover-pad));
-    padding-inline: var(--xh-popover-px, var(--xh-_popover-pad));
+    padding-block: var(--xh-popover-py, var(--xh-_popover-py));
+    padding-inline: var(--xh-popover-px, var(--xh-_popover-px));
     border-radius: var(--xh-popover-radius, var(--xh-shape-overlay));
     pointer-events: auto;
     /* 进退场的缩放锚在贴着锚点的那条边上；两个分量由 positioner 按 placement 写进私有槽 */
@@ -155,28 +157,32 @@
   }
 
   /* —— 尺寸 —— */
-  /* 缺省档写在 content 的基础规则里；四边等宽的面板内衬三档取 surface-pad 那把尺 */
+  /* 缺省档写在 content 的基础规则里；内衬三档取 surface-pad 那把尺，横向始终比纵向高一档 */
   [data-scope='popover'][data-part='content'][data-size='sm'] {
-    --xh-_popover-pad: var(--xh-surface-pad-sm);
+    --xh-_popover-py: var(--xh-surface-pad-sm);
+    --xh-_popover-px: var(--xh-surface-pad-md);
     --xh-_popover-max-w: var(--xh-overlay-max-w-sm);
   }
 
   [data-scope='popover'][data-part='content'][data-size='lg'] {
-    --xh-_popover-pad: var(--xh-surface-pad-lg);
+    --xh-_popover-py: var(--xh-surface-pad-lg);
+    --xh-_popover-px: var(--xh-surface-pad-xl);
     --xh-_popover-max-w: var(--xh-overlay-max-w-lg);
   }
 
+  /* 气泡标题：14px / medium / 正文色 */
   [data-scope='popover'][data-part='title'] {
     margin: 0;
     font-size: var(--xh-popover-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-popover-title-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-popover-title-font-weight, var(--xh-font-weight-medium));
     color: var(--xh-popover-title-fg, var(--xh-material-frosted-fg));
   }
 
-  /* 说明文字走说明档：13px + fg-muted */
+  /* 说明就是气泡的正文：14px 正文字号 + fg-muted 次级色 */
   [data-scope='popover'][data-part='description'] {
     margin: 0;
-    font-size: var(--xh-popover-description-font-size, var(--xh-text-secondary-size));
+    font-size: var(--xh-popover-description-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-normal);
     color: var(--xh-popover-description-fg, var(--xh-fg-muted));
   }
 

package/css/progress.css

@@ -38,10 +38,10 @@
     --xh-progress-skin: 1;
   }
 
-  /* 私有槽位：组件令牌 → 中档字面量两级回退。厚度写在 root 上而不是 track 上，
-     尺寸档才改得动一处就够，track 靠继承拿到值。 */
+  /* 私有槽位：组件令牌 → 中档两级回退。厚度写在 root 上而不是 track 上，
+     尺寸档才改得动一处就够，track 靠继承拿到值。线形是一条细轨，按轨道厚度三档取 sm / md / lg = 3 / 4 / 8px */
   [data-scope='progress'][data-part='root'] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness-md));
 
     /* 目标刻度与环形的刻度值按根落位 */
     position: relative;
@@ -58,7 +58,8 @@
     inline-size: 100%;
     block-size: var(--xh-_progress-thickness);
     border-radius: var(--xh-progress-track-radius, var(--xh-shape-pill));
-    background: var(--xh-progress-track, var(--xh-bg-subtle-active));
+    /* 底槽取淡底阶梯的 200 档（--xh-bg-subtle-hover），环形的底槽同一支 */
+    background: var(--xh-progress-track, var(--xh-bg-subtle-hover));
   }
 
   /* 语气槽由 root 上的 data-tone 声明、经继承发下来；没写 data-tone 时退回原来的品牌色。
@@ -136,11 +137,11 @@
   /* —— 尺寸 —— */
   /* 线形只有厚度分档；中间档不写规则，缺省即中档 */
   [data-scope='progress'][data-part='root'][data-size='sm'] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-1));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness-sm));
   }
 
   [data-scope='progress'][data-part='root'][data-size='lg'] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-2));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness-lg));
   }
 
   /* —— 环形 —— */
@@ -176,10 +177,10 @@
     block-size: 100%;
   }
 
-  /* 环心文字：占位不撑格子，长内容自己换行由作者定 */
+  /* 环心文字：12px 次级色，占位不撑格子，长内容自己换行由作者定 */
   [data-scope='progress'][data-part='label'] {
-    color: var(--xh-progress-label-fg, var(--xh-fg-default));
-    font-size: var(--xh-progress-label-font-size, var(--xh-text-body-size));
+    color: var(--xh-progress-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-progress-label-font-size, var(--xh-text-caption-size));
     line-height: var(--xh-leading-none);
     text-align: center;
   }
@@ -188,7 +189,7 @@
      底槽不跟着语气换族：只有已完成的那段换色，才读得出"完成了多少" */
   [data-scope='progress'][data-part='track'][data-variant='circle'],
   [data-scope='progress'][data-part='track'][data-variant='dashboard'] {
-    stroke: var(--xh-progress-track, var(--xh-bg-subtle-active));
+    stroke: var(--xh-progress-track, var(--xh-bg-subtle-hover));
   }
 
   [data-scope='progress'][data-part='range'][data-variant='circle'],
@@ -204,16 +205,16 @@
   /* 子弹图：有分段时轨道加厚一档，填充收窄成中间一条压在色带上，色带在填充两侧照样读得出。
      三档厚度各比普通线形高一档，阶梯次序不变 */
   [data-scope='progress'][data-part='root'][data-variant='line'][data-banded] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-3));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-band-thickness-md));
     --xh-_progress-range-size: 50%;
   }
 
   [data-scope='progress'][data-part='root'][data-variant='line'][data-banded][data-size='sm'] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-2));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-band-thickness-sm));
   }
 
   [data-scope='progress'][data-part='root'][data-variant='line'][data-banded][data-size='lg'] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-4));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-band-thickness-lg));
   }
 
   /* 色带取本段语气的淡色：同一族颜色里填充是实色、色带浅一档，读得出填充落在哪一段 */

package/css/prompt-input.css

@@ -15,12 +15,12 @@
     --xh-prompt-input-skin: 1;
   }
 
-  /* root 就是视觉盒：描边、底色、圆角、聚焦环、悬停与禁用面由 Field Chrome 家族画在它身上（静息描边式：
-     canvas 底 + --xh-border-control 描边 + 无影，不用 soft，登记的例外只在 8px surface 圆角），内部 textarea
+  /* root 就是视觉盒：描边、底色、圆角、聚焦面、悬停与禁用面由 Field Chrome 家族画在它身上（静息描边式：
+     字段淡底 + --xh-border-control 描边 + 无影，聚焦换承载面底 + 品牌描边、不画环；登记的例外只在 surface 圆角），内部 textarea
      无边框；align-items: flex-end 让按钮随输入框长高贴着底边。
      三个视觉轴都落在 root 上：形态三档由家族按 data-variant 生成，语气管用哪族颜色，尺寸管高度与字号 */
   [data-scope='prompt-input'][data-part='root'] {
-    /* 圆角可由使用者槽切换，家族只过渡底、描边、影与环 */
+    /* 圆角可由使用者槽切换，家族只过渡底、描边与影 */
     transition: border-radius var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
     /* 尺寸缺省档：不写 data-size 时按中档走 */
     --xh-_prompt-input-h: var(--xh-control-h-md);

package/css/question-flow.css

@@ -243,7 +243,7 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    border: var(--xh-stroke-thin) solid var(--xh-question-flow-indicator-border, var(--xh-border-control));
+    border: var(--xh-stroke-thin) solid var(--xh-question-flow-indicator-border, var(--xh-border-strong));
     border-radius: var(--xh-question-flow-indicator-radius, var(--xh-shape-inset));
     background: var(--xh-question-flow-indicator-bg, transparent);
     color: var(--xh-question-flow-indicator-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
@@ -335,7 +335,7 @@
     display: none;
   }
 
-  /* 自由文本：与选项同等算数的一条答案，占满整行 */
+  /* 自由文本：与选项同等算数的一条答案，占满整行。框照字段外壳：字段淡底 + 控件描边，悬停描边升一档 */
   [data-scope='question-flow'][data-part='note'] {
     display: block;
     inline-size: 100%;
@@ -343,11 +343,13 @@
     padding-block: var(--xh-question-flow-note-py, var(--xh-space-1_5));
     border: var(--xh-stroke-thin) solid var(--xh-question-flow-note-border, var(--xh-border-control));
     border-radius: var(--xh-question-flow-note-radius, var(--xh-shape-control));
-    background: var(--xh-question-flow-note-bg, var(--xh-bg-surface));
+    background: var(--xh-question-flow-note-bg, var(--xh-bg-field));
     color: var(--xh-question-flow-note-fg, var(--xh-fg-default));
     font-family: inherit;
     font-size: var(--xh-question-flow-note-font-size, var(--xh-_question-flow-font-size));
-    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='question-flow'][data-part='note'][hidden] {
@@ -358,7 +360,23 @@
     color: var(--xh-question-flow-placeholder-fg, var(--xh-fg-subtle));
   }
 
+  [data-scope='question-flow'][data-part='note']:hover:not(:disabled, :focus, [data-invalid]) {
+    border-color: var(--xh-question-flow-note-border-hover, var(--xh-border-strong));
+  }
+
+  /* 聚焦换承载面底 + 品牌描边，不画环：焦点由描边换色与底色差标出，强制色档补一圈 Highlight 环 */
+  [data-scope='question-flow'][data-part='note']:focus-within {
+    border-color: var(--xh-question-flow-note-border-focus, var(--xh-border-control-focus));
+    background: var(--xh-question-flow-note-bg-focus, var(--xh-bg-surface));
+  }
+
+  [data-scope='question-flow'][data-part='note']:focus-visible {
+    outline: none;
+  }
+
   [data-scope='question-flow'][data-part='note']:disabled {
+    border-color: var(--xh-question-flow-note-border-disabled, var(--xh-border-default));
+    background: var(--xh-question-flow-note-bg-disabled, var(--xh-bg-subtle));
     color: var(--xh-fg-disabled);
   }
 
@@ -486,16 +504,18 @@
     --xh-action-ring-color-focus-visible: currentColor;
   }
 
-  /* 交卷之后才露出的那一格 */
+  /* 交卷之后才露出的那一格：与 Tag 的 sm 档同一副方签——control 圆角、块尺寸取 chip 档、竖向内衬为 0 */
   [data-scope='question-flow'][data-part='result'] {
     display: inline-flex;
     align-self: flex-start;
     align-items: center;
+    box-sizing: border-box;
     gap: var(--xh-question-flow-result-gap, var(--xh-space-1));
+    min-block-size: var(--xh-question-flow-result-h, var(--xh-chip-h-sm));
     padding-inline: var(--xh-question-flow-result-px, var(--xh-space-1_5));
-    padding-block: var(--xh-question-flow-result-py, var(--xh-space-0_5));
+    padding-block: var(--xh-question-flow-result-py, 0);
     border: var(--xh-stroke-thin) solid transparent;
-    border-radius: var(--xh-question-flow-result-radius, var(--xh-shape-pill));
+    border-radius: var(--xh-question-flow-result-radius, var(--xh-shape-control));
     background: var(--xh-question-flow-result-bg, var(--xh-_tone-subtle));
     color: var(--xh-question-flow-result-fg, var(--xh-_tone-fg));
     font-size: var(--xh-question-flow-result-font-size, var(--xh-text-caption-size));
@@ -536,6 +556,12 @@
       background-color: CanvasText;
     }
 
+    /* 备注框聚焦不画环、描边又被换成系统色，补一圈 Highlight 环 */
+    [data-scope='question-flow'][data-part='note']:focus {
+      outline: var(--xh-ring-width) solid Highlight;
+      outline-offset: var(--xh-ring-offset);
+    }
+
     [data-scope='question-flow']:is([data-part='prev-trigger'], [data-part='next-trigger']):empty::before {
       forced-color-adjust: none;
       background-color: ButtonText;

package/css/radio-group.css

@@ -118,13 +118,16 @@
     --xh-action-host-bg-pressed: var(--xh-_radio-group-host-bg-pressed);
 
     position: relative;
-    /* row 档铺满容器（inline-size: 100%）会把竖排的命中区拉到整行空白处、横排 wrap 也塌：
-       沿用「条目按内容收宽」的既有决定，写法同 checkbox-group 条目 */
-    inline-size: auto;
     /* ghost 的 1px 透明边位会把圆圈列相对组标题错开 1px：边归零，几何保持不变 */
     border-width: 0;
   }
 
+  /* 条目按内容收宽，盖掉 row 档的 inline-size: 100%（横排时每个条目会独占一行）。
+     从根往下写，特指度高过 row 档，有层与无层两份产物里都生效 */
+  [data-scope='radio-group'][data-part='root'] [data-scope='radio-group'][data-part='item'] {
+    inline-size: auto;
+  }
+
   /* 只读整组都改不动，但不是禁用：颜色照常，把整行的悬停 / 按下面与"可点"这个暗示一起收回来。
      家族的 :hover / 按压块不排 readonly，只能从槽上收回；排掉禁用项是因为这条选择器权重高过家族的禁用块，
      不排就会把 not-allowed 覆盖回 default */
@@ -137,7 +140,7 @@
     --xh-action-cursor-focus-visible: default;
   }
 
-  /* 圆圈是字段家族的控制盒（字段静息形态）：透明底 + --xh-border-control 描边 + 无影。
+  /* 圆圈是控件盒：透明底 + --xh-border-strong 描边（与 Checkbox 方框同一重量）+ 无影。
      不缩放（行级只换面），过渡只有底与描边；按下走 press 时间线、释放同走 micro */
   [data-scope='radio-group'][data-part='indicator'] {
     display: inline-flex;
@@ -146,7 +149,7 @@
     justify-content: center;
     inline-size: var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator));
     block-size: var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator));
-    border: var(--xh-stroke-thin) solid var(--xh-radio-group-indicator-border, var(--xh-border-control));
+    border: var(--xh-stroke-thin) solid var(--xh-radio-group-indicator-border, var(--xh-border-strong));
     border-radius: var(--xh-radio-group-indicator-radius, var(--xh-shape-circle));
     background: var(--xh-radio-group-indicator-bg, transparent);
     transition:
@@ -290,27 +293,31 @@
   }
 
   /* —— segmented 形态 ——
-     一条淡底轨道装着首尾相接的若干段，选中段由 thumb 部件标出：一块白色抬起的滑块，换段时滑过去。
+     一条轨道装着首尾相接的若干段，选中段由 thumb 部件标出：一块品牌淡底的滑块，换段时滑过去。
      轨道就是 root：滑块绝对定位于它，段与段之间不留缝，所以 gap 归零。
-     轨道是一块淡底面：--xh-bg-subtle 底 + 同宽透明占位边 + 无影，边界由滑块的描边与轨道底色的落差承担。
+     轨道与字段外壳同款：最浅一档淡底（--xh-bg-field）+ 1px 字段描边（--xh-border-control）+ control 圆角，
+     内衬 2px，加上描边段离外沿 3px。
      一行排不下就折行：每个选项都必须看得见、点得到；不改成横向滚动是因为段离轨道内沿只有一格衬距，
      轨道一旦成为滚动容器，段的焦点环（画在段外侧 2px 处）会被裁掉 */
   [data-scope='radio-group'][data-part='root'][data-variant='segmented'] {
-    /* 滑块（有滑块开关的白色抬起面）的底与选中段的文字色；没写 data-tone 时就是这里的取值 */
-    --xh-_radio-group-thumb-bg: var(--xh-bg-surface-raised);
-    --xh-_radio-group-segment-fg-checked: var(--xh-fg-default);
-    /* 轨道是淡底承载面：段坐在它上面，悬停 200 → 按下 300，host 槽向内下发同一副阶梯 */
-    --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
-    --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
+    /* 滑块（选中段的品牌淡底）静息 / 悬停 / 禁用三档与选中段的文字色；没写 data-tone 时就是这里的取值 */
+    --xh-_radio-group-thumb-bg: var(--xh-bg-segment-selected);
+    --xh-_radio-group-thumb-bg-hover: var(--xh-bg-segment-selected-hover);
+    --xh-_radio-group-thumb-bg-disabled: var(--xh-bg-segment-selected-disabled);
+    --xh-_radio-group-segment-fg-checked: var(--xh-fg-segment-selected);
+    --xh-_radio-group-segment-fg-checked-disabled: var(--xh-fg-segment-selected-disabled);
+    /* 轨道底是最浅一档淡底，按白底承载：段悬停 100 → 按下 200，host 槽向内下发同一副阶梯 */
+    --xh-action-host-bg-hover: var(--xh-bg-subtle);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-hover);
 
     position: relative;
     display: inline-flex;
     flex-wrap: wrap;
     gap: 0;
     padding: var(--xh-radio-group-track-padding, var(--xh-space-0_5));
-    border: var(--xh-stroke-thin) solid var(--xh-radio-group-track-border, transparent);
-    border-radius: var(--xh-radio-group-track-radius, var(--xh-shape-surface));
-    background: var(--xh-radio-group-track-bg, var(--xh-bg-subtle));
+    border: var(--xh-stroke-thin) solid var(--xh-radio-group-track-border, var(--xh-border-control));
+    border-radius: var(--xh-radio-group-track-radius, var(--xh-shape-control));
+    background: var(--xh-radio-group-track-bg, var(--xh-bg-field));
     font-size: var(--xh-radio-group-item-font-size, var(--xh-_radio-group-font-size));
   }
 
@@ -366,10 +373,21 @@
   }
 
   /* 语气：选择器带 [data-tone] 限定，不限定的话放在语气容器里的分段会跟着改色。
-     语气档的滑块是实心语气面，选中段的字取语气面上的前景 */
+     语气档的滑块换语气淡底（静息 / 悬停 / 禁用三档），选中段的字取语气字色；禁用的选中段与品牌档同口径——
+     滑块退到 8%、字往承载面兑一半，不回落到品牌色 */
   [data-scope='radio-group'][data-part='root'][data-variant='segmented'][data-tone] {
-    --xh-_radio-group-thumb-bg: var(--xh-_tone, var(--xh-bg-surface-raised));
-    --xh-_radio-group-segment-fg-checked: var(--xh-_tone-on, var(--xh-fg-default));
+    --xh-_radio-group-thumb-bg: var(--xh-_tone-subtle, var(--xh-bg-segment-selected));
+    --xh-_radio-group-thumb-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-segment-selected-hover));
+    --xh-_radio-group-thumb-bg-disabled: color-mix(in oklab, var(--xh-_tone) 8%, var(--xh-bg-surface));
+    --xh-_radio-group-segment-fg-checked: var(--xh-_tone-fg, var(--xh-fg-segment-selected));
+    --xh-_radio-group-segment-fg-checked-disabled: color-mix(in oklab, var(--xh-_tone-fg) 50%, var(--xh-bg-surface));
+  }
+
+  /* 深色档与品牌档同口径：选中面提到 20%、悬停 28%，深底上 12% 读不出是一块选中面。
+     语气淡底三档是语气层按固定比例兑的、不随主题换，这里按主题各取一档 */
+  :is([data-theme='dark'] *, [data-theme='dark'])[data-scope='radio-group'][data-part='root'][data-variant='segmented'][data-tone] {
+    --xh-_radio-group-thumb-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-segment-selected));
+    --xh-_radio-group-thumb-bg-hover: var(--xh-_tone-subtle-active, var(--xh-bg-segment-selected-hover));
   }
 
   /* 段：轨道里铺开的一格，不投影 Action Control 家族（与 Tabs segment 档同），面与字写在段自己身上。
@@ -415,32 +433,53 @@
     display: none;
   }
 
-  /* 选中态读 data-state，不读 ARIA。文字色也要跟着变——滑块是可选部件，作者不渲染它时"当前是哪一段"仍然要看得出来 */
+  /* 选中态读 data-state，不读 ARIA：品牌字 + medium。字也要跟着变——滑块是可选部件，作者不渲染它时"当前是哪一段"仍然要看得出来 */
   [data-scope='radio-group'][data-part='root'][data-variant='segmented']
     > [data-scope='radio-group'][data-part='item'][data-state='checked'] {
     color: var(--xh-radio-group-segment-fg-checked, var(--xh-_radio-group-segment-fg-checked));
+    font-weight: var(--xh-radio-group-segment-font-weight-checked, var(--xh-font-weight-medium));
   }
 
-  /* 滑块在场时选中段自己透空，环紧挨着的是压在它底下、与它同一块矩形的滑块实心底；
-     环色与那块底同族就看不出来，改取选中段自己的前景色——那一支本来就配着这块底定的 */
-  [data-scope='radio-group'][data-part='root'][data-variant='segmented']:has(> [data-scope='radio-group'][data-part='thumb']:not([hidden]))
-    > [data-scope='radio-group'][data-part='item'][data-state='checked']:focus-visible {
-    --xh-_ring-color: currentColor;
+  /* 段间分隔线：1px 装饰边色，长度取段高的一半再收一格半阶（md 档 32 / 2 − 2 = 14px），竖在后一段的起始缘上。
+     只在横排画：竖排的段上下相接，分隔交给轨道的留白。与选中段、悬停段相邻的那几道收起（底色淡成透明）——
+     那两段铺了面，再夹一道线就把面切出了缺口。
+     已知限制：折行后下一行首段的起始缘也会画出这一道。样式层拿不到段落在第几行（不用容器查询，
+     轨道也不能裁内容，否则段的焦点环与粗指针命中区一并被裁），设计真源与组件文档注明了尽量一行排下 */
+  [data-scope='radio-group'][data-part='root'][data-variant='segmented'][data-orientation='horizontal']
+    > [data-scope='radio-group'][data-part='item'] + [data-scope='radio-group'][data-part='item']::after {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 0;
+    inline-size: var(--xh-stroke-thin);
+    block-size: calc(var(--xh-radio-group-segment-h, var(--xh-_radio-group-segment-h)) / 2 - var(--xh-space-0_5));
+    background-color: var(--xh-radio-group-segment-separator, var(--xh-border-default));
+    translate: 0 -50%;
+    pointer-events: none;
+    transition: background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  /* 悬停只提亮未选中的那几段：选中段的底下压着滑块，再变色就成了两套强调。
-     底色用中性的悬停档：段坐在淡底轨道里，悬停取 200；只读收回悬停，与列表形态同一个决定 */
+  [data-scope='radio-group'][data-part='root'][data-variant='segmented'][data-orientation='horizontal']
+    > [data-scope='radio-group'][data-part='item']:is([data-state='checked'], :not([data-disabled], [data-readonly]):hover)::after,
+  [data-scope='radio-group'][data-part='root'][data-variant='segmented'][data-orientation='horizontal']
+    > [data-scope='radio-group'][data-part='item']:is([data-state='checked'], :not([data-disabled], [data-readonly]):hover)
+    + [data-scope='radio-group'][data-part='item']::after {
+    background-color: transparent;
+  }
+
+  /* 悬停时未选中段自己换面：选中段的底下压着滑块，悬停由滑块升一档表出（见滑块块）。
+     底色用中性的悬停档：轨道底是最浅一档淡底，按白底承载取 100；只读收回悬停，与列表形态同一个决定 */
   [data-scope='radio-group'][data-part='root'][data-variant='segmented']
     > [data-scope='radio-group'][data-part='item']:not([data-disabled]):not([data-readonly]):not([data-state='checked']):hover {
-    background-color: var(--xh-radio-group-segment-bg-hover, var(--xh-bg-subtle-hover));
+    background-color: var(--xh-radio-group-segment-bg-hover, var(--xh-bg-subtle));
     color: var(--xh-radio-group-segment-fg-hover, var(--xh-fg-default));
   }
 
-  /* 按下去要有回应：未选中段换到按下面（淡底承载 300），几何不动。
-     选中段不叠按下面：它压着的白色滑块本身就是选中身份（有滑块开关无叠加态） */
+  /* 按下去要有回应：未选中段换到按下面（白底承载 200），几何不动。
+     选中段不叠按下面：它压着的品牌淡底滑块本身就是选中身份（有滑块开关无叠加态） */
   [data-scope='radio-group'][data-part='root'][data-variant='segmented']
     > [data-scope='radio-group'][data-part='item']:not([data-disabled]):not([data-readonly]):not([data-state='checked']):is(:active, [data-pressed]) {
-    background-color: var(--xh-radio-group-segment-bg-pressed, var(--xh-bg-subtle-active));
+    background-color: var(--xh-radio-group-segment-bg-pressed, var(--xh-bg-subtle-hover));
     transition-duration: var(--xh-motion-duration-press);
     transition-timing-function: var(--xh-motion-ease-press);
   }
@@ -459,11 +498,10 @@
     cursor: not-allowed;
   }
 
-  /* 禁用且选中的那一段不换文字色：它压着的是滑块的实心底，换成 fg-disabled 后六族语气只剩 1.04–3.01 的对比度，
-     「当前选的是哪一段」当场看不见。禁用由轨道底色、未选中段的文字色与光标表达，选中段保持可读 */
+  /* 禁用且选中的那一段：字退到浅品牌色、滑块退到 8% 淡底，仍看得出选的是哪一段 */
   [data-scope='radio-group'][data-part='root'][data-variant='segmented']
     > [data-scope='radio-group'][data-part='item'][data-disabled][data-state='checked'] {
-    color: var(--xh-radio-group-segment-fg-checked-disabled, var(--xh-_radio-group-segment-fg-checked));
+    color: var(--xh-radio-group-segment-fg-checked-disabled, var(--xh-_radio-group-segment-fg-checked-disabled));
   }
 
   [data-scope='radio-group'][data-part='thumb'] {
@@ -484,38 +522,43 @@
     inline-size: var(--xh-_radio-group-thumb-w);
     block-size: var(--xh-_radio-group-thumb-h);
     translate: calc(var(--xh-_radio-group-thumb-x) * var(--xh-direction-sign)) var(--xh-_radio-group-thumb-y);
-    /* 白色抬起面三件（有滑块开关）：surface-raised 底 + border-default 描边 + raised 影，描边必须在，影只是加成。
+    /* 选中段的品牌淡底：平面一块，无边无影。描边位留着透明（作者给槽才画），
        尺寸由连接层按段的盒量出，描边吃进盒里（border-box），滑块与段仍是同一块矩形 */
-    border: var(--xh-stroke-thin) solid var(--xh-radio-group-thumb-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-radio-group-thumb-border, transparent);
     border-radius: var(--xh-radio-group-thumb-radius, var(--xh-shape-inset));
     background: var(--xh-radio-group-thumb-bg, var(--xh-_radio-group-thumb-bg));
-    box-shadow: var(--xh-radio-group-thumb-shadow, var(--xh-elevation-raised));
+    box-shadow: var(--xh-radio-group-thumb-shadow, none);
     /* 段压在它上面，点击一律交给段；作者把它写在段之后时也不至于吞掉点击 */
     pointer-events: none;
     /* 用连续档而不是进场那条：滑块是被推过去的，起步就该有速度，纯减速曲线看着像自己飘过去。
-       四个几何量同时走，段宽不等时才不会先变形再挪位。投影单列一项：整组禁用时滑块落回轨道平面，那层投影跟着收 */
+       四个几何量同时走，段宽不等时才不会先变形再挪位。底色单列一项：选中段悬停、禁用时滑块换档是淡变 */
     transition:
       translate 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),
-      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  /* 语气档的滑块是实心语气面，描边与底同色：raised 面必带描边，这里的描边只是把边位补齐，不另画一圈 */
-  [data-scope='radio-group'][data-part='root'][data-variant='segmented'][data-tone] > [data-scope='radio-group'][data-part='thumb'] {
-    border-color: var(--xh-radio-group-thumb-border, var(--xh-_tone, var(--xh-border-default)));
+  /* 选中段悬停：滑块压在它底下，由滑块升一档表出 */
+  [data-scope='radio-group'][data-part='root'][data-variant='segmented']:has(
+      > [data-scope='radio-group'][data-part='item'][data-state='checked']:not([data-disabled]):not([data-readonly]):hover
+    )
+    > [data-scope='radio-group'][data-part='thumb'] {
+    background: var(--xh-radio-group-thumb-bg-hover, var(--xh-_radio-group-thumb-bg-hover));
   }
 
-  /* 整组禁用时滑块落回轨道平面（不再浮起），但底色一点不兑淡：
-     它上面压着选中段的文字，往 muted 兑哪怕一成，brand 的对比度就从 5.08 掉到 4.24 */
-  [data-scope='radio-group'][data-part='root'][data-disabled] > [data-scope='radio-group'][data-part='thumb'] {
-    box-shadow: var(--xh-radio-group-thumb-shadow-disabled, none);
+  /* 选中段禁用（含整组禁用）：滑块退到 8% 淡底，与退到浅品牌色的字一起读出「选着、但动不了」 */
+  [data-scope='radio-group'][data-part='root'][data-variant='segmented']:has(
+      > [data-scope='radio-group'][data-part='item'][data-state='checked'][data-disabled]
+    )
+    > [data-scope='radio-group'][data-part='thumb'] {
+    background: var(--xh-radio-group-thumb-bg-disabled, var(--xh-_radio-group-thumb-bg-disabled));
   }
 
   /* 首次落位与同一项的重量（窗口缩放、换上正式字体）直接到位，只有换项才滑：连接层在这一落点投影
-     data-instant。投影的淡变照留，整组禁用时滑块落回轨道平面仍是淡变 */
+     data-instant。底色的淡变照留 */
   [data-scope='radio-group'][data-part='thumb'][data-instant] {
-    transition: box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 液态档：两沿由弹簧逐帧推着走（连接层每一帧写好盒子），几何量不再补过渡；
@@ -524,7 +567,7 @@
     --xh-_radio-group-thumb-squash: max(var(--xh-motion-scale-squash), calc(1 - var(--xh-_radio-group-thumb-stretch) * (1 - var(--xh-motion-scale-squash))));
 
     scale: 1 var(--xh-_radio-group-thumb-squash);
-    transition: box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   :where([data-material='liquid']) [data-scope='radio-group'][data-part='root'][data-orientation='vertical']
@@ -539,14 +582,30 @@
       min-block-size: 0;
     }
 
-    /* segmented 的段不归家族：手指的落点比一段高，命中区由伪元素向块轴两侧外扩，段的盒与轨道内的分格一点不动。
-       只扩块轴——段与段在行内轴上首尾相接，往两侧扩会与相邻段的命中区叠上。
-       外扩一格 space-2 是按最矮的 sm 档算的（28 + 8 × 2 = 44），md 与 lg 档更宽裕 */
+    /* segmented 的段不归家族：手指的落点比一段大，命中区由伪元素补足到粗指针下限（--xh-control-hit-coarse），
+       段的盒与轨道内的分格一点不动。竖排与折行时段与段沿块轴首尾相接、行内轴上也挨着，补足的命中区必然叠进
+       相邻段的盒——轨道建一个层叠上下文，伪元素垫在负一层：每一段的盒都压在别段外扩的命中区之上，
+       叠上的那一截归盒子本来所在的那一段，外扩只落在段与段之间没有盒的地方（轨道衬距、轨道外沿）。
+       纯 CSS 拿不到「这一段在第几行」，于是不按行开关外扩，靠层序让段的盒自己说了算。
+       块首外扩不越过轨道外沿再加一格标签间距（space-2）：单行时上沿停在字段标签下缘之外，点在标签上仍归标签；
+       少扩的一截落到块尾，命中区总高仍是下限 */
+    [data-scope='radio-group'][data-part='root'][data-variant='segmented'] {
+      isolation: isolate;
+    }
+
     [data-scope='radio-group'][data-part='root'][data-variant='segmented'] > [data-scope='radio-group'][data-part='item']::before {
       content: '';
       position: absolute;
-      inset-block: calc(-1 * var(--xh-space-2));
-      inset-inline: 0;
+      z-index: -1;
+      inset-block-start: min(
+        0px,
+        max(
+          (100% - var(--xh-control-hit-coarse)) / 2,
+          -1 * (var(--xh-radio-group-track-padding, var(--xh-space-0_5)) + var(--xh-stroke-thin) + var(--xh-space-2))
+        )
+      );
+      inset-inline: min(0px, (100% - var(--xh-control-hit-coarse)) / 2);
+      block-size: max(100%, var(--xh-control-hit-coarse));
     }
   }
 
@@ -579,6 +638,12 @@
       background-color: Highlight;
       color: HighlightText;
     }
+
+    /* 选中段的品牌淡底在这一档里被换成 Canvas，与没选中的段一模一样：滑块描一圈系统前景边框出选中段 */
+    [data-scope='radio-group'][data-part='root'][data-variant='segmented'] > [data-scope='radio-group'][data-part='thumb'] {
+      border-color: ButtonText;
+    }
+
   }
 
   @media print {
@@ -588,7 +653,7 @@
       border: var(--xh-stroke-thick) solid currentColor;
     }
 
-    /* segmented 的滑块那块底与它的落影都不画，「当前选的是哪一段」在纸上没了：选中段改画一圈实边、字加粗 */
+    /* segmented 的滑块那块淡底不画，「当前选的是哪一段」在纸上没了：选中段改画一圈实边、字加粗 */
     [data-scope='radio-group'][data-part='root'][data-variant='segmented']
       > [data-scope='radio-group'][data-part='item'][data-state='checked'] {
       border: var(--xh-stroke-thin) solid currentColor;