@xihan-ui/styles 3.1.0 → 4.0.0

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;

package/css/rating.css

@@ -17,10 +17,12 @@
      根上不留基准它就会贴到更外层的定位祖先上，原生校验提示跟着飘到页面别处。 */
   [data-scope='rating'][data-part='root'] {
     /* 尺寸档只换这三个私有槽，星星与分值都从 root 继承它们，换档不必给每个部件各写一条选择器。
-       星是控件内的字形，按档取 --xh-glyph-size-sm / md / lg；标签字号不随档 */
+       星是评分的主体而不是控件里的附属图标，比同档控件内图标大一档：sm / md / lg 取
+       --xh-glyph-size-md / lg / xl（20 / 24 / 32px）；盒比星大一圈 4px（24 / 28 / 36px），星落在家族那圈透明边位之内、
+       不被挤偏。标签字号不随档 */
     --xh-_rating-item-gap: var(--xh-control-gap-md);
-    --xh-_rating-item-size: var(--xh-glyph-size-md);
-    --xh-_rating-item-box-size: var(--xh-control-action-size);
+    --xh-_rating-item-size: var(--xh-glyph-size-lg);
+    --xh-_rating-item-box-size: calc(var(--xh-_rating-item-size) + var(--xh-space-1));
     --xh-_rating-font-size: var(--xh-control-font-md);
     --xh-icon-size: var(--xh-rating-item-font-size, var(--xh-_rating-item-size));
     /* 点亮色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的警示色 */
@@ -36,25 +38,27 @@
   /* —— 尺寸 —— */
   [data-scope='rating'][data-part='root'][data-size='sm'] {
     --xh-_rating-item-gap: var(--xh-control-gap-sm);
-    --xh-_rating-item-size: var(--xh-glyph-size-sm);
+    --xh-_rating-item-size: var(--xh-glyph-size-md);
     --xh-_rating-font-size: var(--xh-control-font-sm);
   }
 
   [data-scope='rating'][data-part='root'][data-size='lg'] {
     --xh-_rating-item-gap: var(--xh-control-gap-lg);
-    --xh-_rating-item-size: var(--xh-glyph-size-lg);
+    --xh-_rating-item-size: var(--xh-glyph-size-xl);
     --xh-_rating-font-size: var(--xh-control-font-lg);
   }
 
-  /* 字段标签：14 / 500 / fg-default，禁用换到 --xh-fg-subtle；文字部件不叠 opacity */
+  /* 字段标签：14 / 400 / fg-muted，与控件隔 space-2，禁用不另变色；文字部件不叠 opacity */
   [data-scope='rating'][data-part='label'] {
-    color: var(--xh-rating-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-rating-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-rating-label-gap, var(--xh-space-2)) - var(--xh-rating-gap, var(--xh-space-1)));
+    color: var(--xh-rating-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-rating-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-rating-label-font-weight, var(--xh-text-label-weight));
   }
 
   [data-scope='rating'][data-part='label'][data-disabled] {
-    color: var(--xh-rating-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-rating-label-fg-disabled, var(--xh-fg-muted));
   }
 
   [data-scope='rating'][data-part='control'] {
@@ -78,7 +82,7 @@
     justify-content: start;
   }
 
-  [data-scope='rating'][data-part='root']:has(> [data-part='value-text']) > [data-part='label'] {
+  [data-scope='rating'][data-part='root']:has(> [data-part='value-text']) > [data-part='label']:where([data-scope='rating']) {
     grid-column: 1 / -1;
   }
 
@@ -106,10 +110,14 @@
 
   /* 条目固定成一枚方形图标盒：连接层用 clientWidth 判定指针落在左半还是右半，
      固定盒能让半档分界与图形中心严格重合。
-     星接 Action Control icon 档（定尺的星）：盒型、按下 / 禁用面、0.97 缩放与换底、焦点环与过渡由家族配方给，
+     星接 Action Control icon 档（定尺的星）：盒型、按下 / 禁用面、换底、焦点环与过渡由家族配方给，
      这里只把使用者槽映射到桥接槽。静息透明（ghost 形态）；悬停不换底——悬停预览由点亮的星形（data-highlighted）
-     表达，再给盒换面是重复的通道；按下换到 200 档中性面（白底承载）。前景五态映射同一个值：点亮时五态一起换到
-     点亮色，家族的悬停 / 按下块才不会把点亮色换回静息色；禁用不换前景，星带整体的压暗落在 control 的 opacity 上 */
+     表达，再给盒换面是重复的通道。缩放是统一按压反馈的登记例外：悬停与键盘聚焦把这颗星放大到
+     --xh-motion-scale-emphasis（1.2）强调落点，按下保持放大（不取 --xh-motion-scale-press）并换到 200 档中性面
+     （白底承载）——按压的回执是换面，不往回缩。悬停放大只给能悬停的设备：触屏点过之后 :hover 会一直留在那颗星上，
+     放大跟着停住。减弱动效下放大比例为 1，只留换色。
+     前景五态映射同一个值：点亮时五态一起换到点亮色，家族的悬停 / 按下块才不会把点亮色换回静息色；
+     禁用不换前景，星带整体的压暗落在 control 的 opacity 上 */
   [data-scope='rating'][data-part='item'] {
     --xh-_rating-item-bg-pressed: var(--xh-rating-item-bg-pressed, var(--xh-bg-subtle-hover));
 
@@ -119,6 +127,8 @@
     --xh-action-font-size: var(--xh-rating-item-font-size, var(--xh-_rating-item-size));
     --xh-action-bg-hover: transparent;
     --xh-action-bg-pressed: var(--xh-_rating-item-bg-pressed);
+    --xh-action-scale-focus-visible: var(--xh-motion-scale-emphasis);
+    --xh-action-scale-pressed: var(--xh-motion-scale-emphasis);
     --xh-action-fg-rest: var(--xh-rating-item-fg, var(--xh-fg-subtle));
     --xh-action-fg-hover: var(--xh-rating-item-fg, var(--xh-fg-subtle));
     --xh-action-fg-pressed: var(--xh-rating-item-fg, var(--xh-fg-subtle));
@@ -131,8 +141,14 @@
     --xh-action-border-disabled: transparent;
   }
 
+  @media (hover: hover) {
+    [data-scope='rating'][data-part='item'] {
+      --xh-action-scale-hover: var(--xh-motion-scale-emphasis);
+    }
+  }
+
   /* 家族 icon 档在粗指针下用 ::after 扩热区到 44px：五颗星密排，44px 热区会压住相邻的星，
-     连接层又按 currentTarget 的宽度判半颗，热区串到邻星上半档就判错；星本身仍是 24px 盒，热区不外扩。
+     连接层又按 currentTarget 的宽度判半颗，热区串到邻星上半档就判错；星本身仍是不小于 24px 的盒，热区不外扩。
      空条目的 ::after 是点亮那层星形，下限归零才不会被撑成 44px */
   @media (pointer: coarse) {
     [data-scope='rating'][data-part='item']::after {
@@ -205,10 +221,11 @@
     clip-path: inset(0 calc(50% * var(--xh-_rating-end)) 0 calc(50% * var(--xh-_rating-start)));
   }
 
-  /* 只读仍进得了 Tab 序列、读屏也念得出，只是改不动：收掉手型，别暗示"点这儿能改"；
-     家族的按压块由这里的映射钉回静息面——按下不缩放、不换底 */
+  /* 只读仍进得了 Tab 序列、读屏也念得出，只是改不动：收掉手型与悬停放大，别暗示"点这儿能改"；
+     家族的按压块由这里的映射钉回静息面——按下不缩放、不换底；键盘聚焦的放大留着，那是焦点落点 */
   [data-scope='rating'][data-part='item'][data-readonly]:not([data-disabled]) {
     --xh-_rating-item-bg-pressed: transparent;
+    --xh-action-scale-hover: none;
     --xh-action-scale-pressed: none;
     --xh-action-cursor-rest: default;
     --xh-action-cursor-hover: default;

package/css/select.css

@@ -72,6 +72,7 @@
     --xh-_select-h: var(--xh-control-h-md);
     --xh-_select-px: var(--xh-control-px-md);
     --xh-_select-item-py: var(--xh-list-option-py-md);
+    --xh-_select-item-h: var(--xh-list-option-h-md);
     --xh-_select-item-px: var(--xh-control-px-md);
     --xh-_select-gap: var(--xh-control-gap-md);
     --xh-_select-font-size: var(--xh-control-font-md);
@@ -105,6 +106,7 @@
     --xh-_select-h: var(--xh-control-h-sm);
     --xh-_select-px: var(--xh-control-px-sm);
     --xh-_select-item-py: var(--xh-list-option-py-sm);
+    --xh-_select-item-h: var(--xh-list-option-h-sm);
     --xh-_select-item-px: var(--xh-control-px-sm);
     --xh-_select-gap: var(--xh-control-gap-sm);
     --xh-_select-font-size: var(--xh-control-font-sm);
@@ -123,20 +125,23 @@
     --xh-_select-h: var(--xh-control-h-lg);
     --xh-_select-px: var(--xh-control-px-lg);
     --xh-_select-item-py: var(--xh-list-option-py-lg);
+    --xh-_select-item-h: var(--xh-list-option-h-lg);
     --xh-_select-item-px: var(--xh-control-px-lg);
     --xh-_select-gap: var(--xh-control-gap-lg);
     --xh-_select-font-size: var(--xh-control-font-lg);
   }
 
   [data-scope='select'][data-part='label'] {
-    color: var(--xh-select-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-select-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-select-label-gap, var(--xh-space-2)) - var(--xh-select-gap, var(--xh-space-1)));
+    color: var(--xh-select-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-select-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-select-label-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
   }
 
   [data-scope='select'][data-part='label'][data-disabled] {
-    color: var(--xh-select-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-select-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 盒：描边、底色、圆角、控件高度、行内内衬、聚焦环、五态与悬停由 Field Chrome 家族画在这一层，
@@ -157,8 +162,6 @@
     --xh-field-border-hover: var(--xh-select-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-select-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-select-control-border-invalid, var(--xh-_field-variant-border-invalid));
-    --xh-field-ring-focus: var(--xh-ring-focus);
-    --xh-field-ring-invalid: var(--xh-ring-invalid);
     --xh-field-shadow-rest: var(--xh-select-control-shadow, none);
     --xh-field-cursor-rest: pointer;
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
@@ -224,7 +227,7 @@
 
   /* 标签行露面时 value-text 让位：两者是触发器里的同一格，占位文字与标签不同屏。
      value-text 留在 DOM 里，trigger 的可及名仍从它取到完整的选中项文本 */
-  [data-scope='select'][data-part='trigger']:has([data-part='tag-list']:not([hidden])) [data-part='value-text'] {
+  [data-scope='select'][data-part='trigger']:has([data-part='tag-list']:not([hidden])) [data-part='value-text']:where([data-scope='select']) {
     display: none;
   }
 
@@ -256,7 +259,7 @@
   /* 有值时清空钮顶上来，箭头让位：两个图标并排堆着，用户分不清点哪个。
      判据查的是盒里此刻真有一颗没收起的清空钮，不是「有没有值」——
      作者没摆清空钮时箭头照常留着，不然让了位没人接，指示符整个消失 */
-  [data-scope='select'][data-part='control']:has([data-part='clear-trigger']:not([hidden])) [data-part='indicator'] {
+  [data-scope='select'][data-part='control']:has([data-part='clear-trigger']:not([hidden])) [data-part='indicator']:where([data-scope='select']) {
     display: none;
   }
 
@@ -312,7 +315,7 @@
     max-inline-size: var(--xh-select-content-max-w, none);
     max-block-size: min(var(--xh-select-content-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_select-available-h));
     padding-block: var(--xh-select-content-py, var(--xh-space-1));
-    padding-inline: var(--xh-select-content-px, var(--xh-space-1));
+    padding-inline: var(--xh-select-content-px, 0);
     border-radius: var(--xh-select-content-radius, var(--xh-shape-overlay));
     /* 条目的悬停底色是方角，滚到两端时会探出外壳的圆角 */
     overflow: hidden;
@@ -462,10 +465,11 @@
   [data-scope='select'][data-part='item'] {
     /* 公开 Select 槽只映射到家族合同；网格、尺寸与状态选择器不在组件皮肤复制。pressed 面与 selected 各态由家族按 overlay 上下文给出。 */
     --xh-collection-block-padding: var(--xh-select-item-py, var(--xh-_select-item-py));
+    --xh-collection-row-h: var(--xh-select-item-h, var(--xh-_select-item-h));
     --xh-collection-inline-padding: var(--xh-select-item-px, var(--xh-_select-item-px));
     --xh-collection-gap: var(--xh-select-item-gap, var(--xh-_select-gap));
     --xh-collection-font-size: var(--xh-select-item-font-size, var(--xh-_select-font-size));
-    --xh-collection-radius: var(--xh-select-item-radius, var(--xh-shape-inset));
+    --xh-collection-radius: var(--xh-select-item-radius, 0);
     --xh-collection-fg-rest: var(--xh-select-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-select-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-select-item-fg, var(--xh-material-frosted-fg));
@@ -474,10 +478,10 @@
     --xh-collection-fg-selected-hover: var(--xh-select-item-fg-selected, var(--xh-select-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-selected-pressed: var(--xh-select-item-fg-selected, var(--xh-select-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-pressed: var(--xh-select-item-fg, var(--xh-material-frosted-fg));
-    --xh-collection-font-weight-selected: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-highlight: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-hover: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-pressed: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-selected: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-highlight: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-hover: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-pressed: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-medium));
     --xh-collection-bg-hover: var(--xh-select-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-keyboard-highlight: var(--xh-select-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-selected-highlight: var(--xh-select-item-bg-hover, var(--xh-bg-subtle));

package/css/separator.css

@@ -16,7 +16,7 @@
    * 各自取用：换档只改槽，画在哪个节点上互不影响。
    */
   [data-scope='separator'][data-part='root'] {
-    --xh-_separator-color: var(--xh-separator-color, var(--xh-material-frosted-separator));
+    --xh-_separator-color: var(--xh-separator-color, var(--xh-border-default));
     --xh-_separator-dash: var(--xh-separator-dash-length, var(--xh-space-1_5));
     --xh-_separator-dash-gap: var(--xh-separator-dash-gap, var(--xh-space-1_5));
     --xh-_separator-paint: var(--xh-_separator-color);
@@ -26,15 +26,20 @@
     background: var(--xh-_separator-paint);
   }
 
+  /* 分隔线自带上下（竖向为左右）留白：横向上下各 20px，竖向左右各 12px，放进内容里不必另包一层加边距 */
   [data-scope='separator'][data-part='root'][data-orientation='horizontal'] {
     inline-size: 100%;
     block-size: var(--xh-separator-thickness, var(--xh-stroke-thin));
+    margin-block: var(--xh-separator-my, var(--xh-space-5));
   }
 
   [data-scope='separator'][data-part='root'][data-orientation='vertical'] {
     align-self: stretch;
     inline-size: var(--xh-separator-thickness, var(--xh-stroke-thin));
     block-size: 100%;
+    /* 父容器没有高度时也留一截与文字等高的线 */
+    min-block-size: var(--xh-glyph-size-text);
+    margin-inline: var(--xh-separator-mx, var(--xh-space-3));
   }
 
   /* —— 形态 ——
@@ -74,7 +79,9 @@
     align-items: center;
     inline-size: 100%;
     block-size: auto;
-    gap: var(--xh-separator-gap, var(--xh-space-3));
+    gap: var(--xh-separator-gap, var(--xh-space-4));
+    /* 文字自带一行行高，上下留白收一半，整段占的高度与单线时相当 */
+    margin-block: var(--xh-separator-my, var(--xh-space-2_5));
     background: none;
   }
 
@@ -102,18 +109,29 @@
   /* 分节文字：不参与等分，也不折行 */
   [data-scope='separator'][data-part='content'] {
     flex: none;
-    color: var(--xh-separator-content-fg, var(--xh-fg-muted));
-    font-size: var(--xh-separator-content-font-size, var(--xh-text-secondary-size));
+    color: var(--xh-separator-content-fg, var(--xh-fg-default));
+    font-size: var(--xh-separator-content-font-size, var(--xh-text-body-size));
+    font-weight: var(--xh-separator-content-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-normal);
     white-space: nowrap;
   }
 
   /* 文字靠边：靠哪边就把那一侧的线收成一小截，另一侧照旧等分 */
-  [data-scope='separator'][data-part='root'][data-align='start'] > [data-part='line']:first-child,
-  [data-scope='separator'][data-part='root'][data-align='end'] > [data-part='line']:last-child {
+  [data-scope='separator'][data-part='root'][data-align='start'] > [data-part='line']:where([data-scope='separator']):first-child,
+  [data-scope='separator'][data-part='root'][data-align='end'] > [data-part='line']:where([data-scope='separator']):last-child {
     flex: 0 0 var(--xh-separator-align-length, var(--xh-space-6));
   }
 
+  /* 强制色：线是底色（与虚线的渐变）画的，系统会把底色换成 Canvas，线就此消失。
+     线退出强制换色、颜色直接取 CanvasText，实线与虚线同一条槽 */
+  @media (forced-colors: active) {
+    [data-scope='separator']:is([data-part='root'], [data-part='line']) {
+      --xh-_separator-color: CanvasText;
+
+      forced-color-adjust: none;
+    }
+  }
+
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   [data-scope='separator'][data-part='root'][hidden] {