@xihan-ui/styles 1.0.0 → 2.0.0

package/css/radio-group.css

@@ -1,3 +1,12 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 radio group 样式。 */
+
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='radio-group'] {
@@ -11,17 +20,27 @@
     --xh-_radio-group-indicator: var(--xh-control-indicator-md);
     /* 选中色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的品牌色 */
     --xh-_radio-group-accent: var(--xh-_tone, var(--xh-bg-brand));
-
+    /* 条目是圆圈的承载面：行自己坐画布走 100 → 200，行面上的圆圈按淡底容器阶梯再上一档（200 → 300）。
+       两支私有槽是这一档的唯一来源——宿主拿它们给 --xh-action-host-bg-* 赋值（桥接槽只写不读），
+       圆圈按下读同一支私有槽，即与宿主的 host 槽同源 */
+    --xh-_radio-group-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-_radio-group-host-bg-pressed: var(--xh-bg-subtle-active);
+
+    /* 标题与条目都是根的直接子节点，一支 gap 同时管「标题到集合」与「条目之间」：
+       集合标题与集合隔 --xh-space-2（§6.4），同组条目之间也是同一档紧密关系 */
     display: flex;
-    gap: var(--xh-radio-group-gap, var(--xh-stack-gap-md));
+    gap: var(--xh-radio-group-gap, var(--xh-space-2));
   }
 
   [data-scope='radio-group'][data-part='root'][data-orientation='vertical'] {
     flex-direction: column;
   }
 
+  /* 横排一行摆不下时条目落到下一行。不换行的话它们只会被压窄，
+     文字逐字折行、每个条目变成一根竖条 */
   [data-scope='radio-group'][data-part='root'][data-orientation='horizontal'] {
     flex-direction: row;
+    flex-wrap: wrap;
     align-items: center;
   }
 
@@ -38,37 +57,65 @@
     --xh-_radio-group-indicator: var(--xh-control-indicator-lg);
   }
 
+  /* 集合标题（§6.4）：14 / 500 / fg-muted，字号不随 size 档——随档的是条目文字 */
   [data-scope='radio-group'][data-part='label'] {
     color: var(--xh-radio-group-label-fg, var(--xh-fg-muted));
-    font-size: var(--xh-radio-group-label-font-size, var(--xh-_radio-group-font-size));
+    font-size: var(--xh-radio-group-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-radio-group-label-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
   }
 
-  /* position 是给条目内那份视觉隐藏的原生输入做定位基准，别去掉 */
-  [data-scope='radio-group'][data-part='item'] {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--xh-radio-group-item-gap, var(--xh-_radio-group-item-gap));
-    border-radius: var(--xh-radio-group-item-radius, var(--xh-shape-control));
-    color: var(--xh-radio-group-item-fg, var(--xh-fg-default));
-    font-size: var(--xh-radio-group-item-font-size, var(--xh-_radio-group-font-size));
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
-  }
-
-  [data-scope='radio-group'][data-part='item']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* label 自己不带状态属性，整组禁用只写在 root 上，禁用标签色统一 --xh-fg-subtle（§6.4） */
+  [data-scope='radio-group'][data-part='root'][data-disabled] [data-scope='radio-group'][data-part='label'] {
+    color: var(--xh-radio-group-label-fg-disabled, var(--xh-fg-subtle));
   }
 
-  /* 禁用走 aria-disabled 而非原生 disabled，条目仍可聚焦，样式由 data-disabled 表达 */
-  [data-scope='radio-group'][data-part='item'][data-disabled] {
-    color: var(--xh-radio-group-item-fg-disabled, var(--xh-fg-disabled));
-    cursor: not-allowed;
-  }
+  /* 条目是「圆圈 + 文案」的整行命中区（§9.2）：接 Action Control row 档、ghost 形态，悬停 / 按下 / 禁用面、手型、
+     过渡与焦点环由家族给，按下只换面不缩放（row 档专属按压块 scale: none）；这里只把使用者槽映射到桥接槽。
+     行自己坐画布走 100 → 200（--xh-action-bg-* 钉住自己的面），行面上的圆圈按淡底容器阶梯再上一档
+     （--xh-action-host-bg-* 向内声明自己是圆圈的承载面，host 槽只对后代生效——自己的面已由 --xh-action-bg-* 钉住；
+     也因此 root 带 data-tone 时 --xh-_tone-subtle 不会把整行染色）。
+     xs 的 24px 是命中地板，圆圈 12 / 16 / 20px 居中其间；字号与间距按组档位从 root 的私有槽映射。
+     条目禁用走 aria-disabled 而非原生 disabled，条目仍可聚焦，家族的禁用块读 data-disabled。
+     position 是给条目内那份视觉隐藏的原生输入做定位基准，别去掉 */
+  [data-scope='radio-group'][data-part='item'] {
+    --xh-action-gap: var(--xh-radio-group-item-gap, var(--xh-_radio-group-item-gap));
+    --xh-action-radius: var(--xh-radio-group-item-radius, var(--xh-shape-control));
+    --xh-action-font-size: var(--xh-radio-group-item-font-size, var(--xh-_radio-group-font-size));
+    --xh-action-padding-inline: 0;
+    --xh-action-padding-block: 0;
+    --xh-action-fg-rest: var(--xh-radio-group-item-fg, var(--xh-fg-default));
+    --xh-action-fg-hover: var(--xh-radio-group-item-fg, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-radio-group-item-fg, var(--xh-fg-default));
+    --xh-action-fg-focus-visible: var(--xh-radio-group-item-fg, var(--xh-fg-default));
+    --xh-action-fg-disabled: var(--xh-radio-group-item-fg-disabled, var(--xh-fg-disabled));
+    --xh-action-bg-hover: var(--xh-radio-group-item-bg-hover, var(--xh-bg-subtle));
+    --xh-action-bg-pressed: var(--xh-radio-group-item-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-action-host-bg-hover: var(--xh-_radio-group-host-bg-hover);
+    --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;
+  }
+
+  /* 只读整组都改不动，但不是禁用：颜色照常，把整行的悬停 / 按下面与"可点"这个暗示一起收回来。
+     家族的 :hover / 按压块不排 readonly，只能从槽上收回；排掉禁用项是因为这条选择器权重高过家族的禁用块，
+     不排就会把 not-allowed 覆盖回 default */
+  [data-scope='radio-group'][data-part='item'][data-readonly]:not([data-disabled]) {
+    --xh-action-bg-hover: transparent;
+    --xh-action-bg-pressed: transparent;
+    --xh-action-cursor-rest: default;
+    --xh-action-cursor-hover: default;
+    --xh-action-cursor-pressed: default;
+    --xh-action-cursor-focus-visible: default;
+  }
+
+  /* 圆圈是字段家族的控制盒（§8.3 字段静息形态）：透明底 + --xh-border-control 描边 + 无影。
+     不缩放（§9.2 行级只换面），过渡只有底与描边；按下走 press 时间线、释放同走 micro */
   [data-scope='radio-group'][data-part='indicator'] {
     display: inline-flex;
     flex: none;
@@ -77,9 +124,30 @@
     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-radius: var(--xh-radio-group-indicator-radius, var(--xh-shape-pill));
-    background: var(--xh-radio-group-indicator-bg, var(--xh-bg-canvas));
-    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    border-radius: var(--xh-radio-group-indicator-radius, var(--xh-shape-circle));
+    background: var(--xh-radio-group-indicator-bg, transparent);
+    transition:
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 悬停整行时未选中的圆圈描边升一档（字段静息 → hover 的同一条阶梯，§8.3）；
+     选中圈与校验失败的圈保住各自的描边——圈内的点 / 警示色本身已经在表达状态 */
+  [data-scope='radio-group'][data-part='item']:not([data-disabled]):not([data-readonly]):hover
+    > [data-scope='radio-group'][data-part='indicator']:not([data-state='checked']):not([data-invalid]) {
+    border-color: var(--xh-radio-group-indicator-border-hover, var(--xh-border-control-hover));
+  }
+
+  /* 按下去要有回应。圆圈不是激活宿主：宿主是投影了 row 档的整行条目，圆圈在宿主的
+     :hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面、不缩放（§9.2）——行按下是 200，
+     坐在上面的圆圈到 300（行以 --xh-action-host-bg-pressed 声明自己是圆圈的承载面，桥接槽只写不读，
+     圆圈读的是喂给它的那支私有槽），描边不动、几何不动；
+     与家族按压块同一时间线（按下 --xh-motion-duration-press，释放同走 micro） */
+  [data-scope='radio-group'][data-part='item']:not([data-disabled]):not([data-readonly]):is(:active, [data-pressed])
+    > [data-scope='radio-group'][data-part='indicator'] {
+    background: var(--xh-radio-group-indicator-bg-pressed, var(--xh-_radio-group-host-bg-pressed));
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
   }
 
   [data-scope='radio-group'][data-part='indicator'][data-state='checked'] {
@@ -93,26 +161,53 @@
   }
 
   /* 圆点用 scale 收放，选中态切换不引起布局抖动。
-     直径取指示器的一半：换尺寸档时圈与点一起走，比例不散 */
+     直径取指示器的一半：换尺寸档时圈与点一起走，比例不散。
+     出现时略微涨过 1 再收回，过冲量落在圈内不碰描边 */
   [data-scope='radio-group'][data-part='indicator']::before {
     content: '';
     inline-size: calc(var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator)) / 2);
     block-size: calc(var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator)) / 2);
-    border-radius: var(--xh-shape-pill);
+    border-radius: var(--xh-shape-circle);
     background: var(--xh-radio-group-indicator-dot, var(--xh-_radio-group-accent));
     scale: 0;
-    transition: scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: scale var(--xh-motion-duration-micro) var(--xh-motion-ease-settle);
   }
 
   [data-scope='radio-group'][data-part='indicator'][data-state='checked']::before {
     scale: 1;
   }
 
+  /* 选中的圆点是这颗圈的「填色」：按下随行换到语气的 active 档（与 checkbox-group 勾中方框按下同档），
+     选中圈的描边保住不换 */
+  [data-scope='radio-group'][data-part='item']:not([data-disabled]):not([data-readonly]):is(:active, [data-pressed])
+    > [data-scope='radio-group'][data-part='indicator'][data-state='checked']::before {
+    background: var(--xh-radio-group-indicator-dot-pressed, var(--xh-_tone-active, var(--xh-bg-brand-active)));
+  }
+
+  /* 禁用（§7.2）：--xh-border-default 描边 + --xh-bg-subtle 底 + --xh-fg-disabled 圆点，不靠 opacity；
+     与 checkbox-group 方框、独立 checkbox 逐档一致。条目自己带 data-disabled（组禁用也逐条下放），圆圈读它 */
+  [data-scope='radio-group'][data-part='item'][data-disabled] > [data-scope='radio-group'][data-part='indicator'] {
+    border-color: var(--xh-radio-group-indicator-border-disabled, var(--xh-border-default));
+    background: var(--xh-radio-group-indicator-bg-disabled, var(--xh-bg-subtle));
+  }
+
+  [data-scope='radio-group'][data-part='item'][data-disabled] > [data-scope='radio-group'][data-part='indicator']::before {
+    background: var(--xh-radio-group-indicator-dot-disabled, var(--xh-fg-disabled));
+  }
+
   [data-scope='radio-group'][data-part='item-text'] {
     color: inherit;
     user-select: none;
   }
 
+  /* 家族 row 档在粗指针下用 ::after 把热区扩到 44px 高：条目按 24px 行 + 8px 间距密排，热区会压进相邻条目、
+     指针落错行，A 档 24px 由 xs 地板保住（同 checkbox-group 条目） */
+  @media (pointer: coarse) {
+    [data-scope='radio-group'][data-part='item']::after {
+      min-block-size: 0;
+    }
+  }
+
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   [data-scope='radio-group'][data-part='root'][hidden],
@@ -120,4 +215,26 @@
   [data-scope='radio-group'][data-part='indicator'][hidden] {
     display: none;
   }
+
+  @media (forced-colors: active) {
+    /* 按下：常态靠圆圈换底表出，这一档里底色被统一换成 Canvas；按住那一下把圈的描边换成系统高亮色 */
+    [data-scope='radio-group'][data-part='item']:not([data-disabled]):not([data-readonly]):is(:active, [data-pressed])
+      > [data-scope='radio-group'][data-part='indicator'] {
+      border-color: Highlight;
+    }
+
+    /* 禁用的圆点跟随系统的置灰前景 */
+    [data-scope='radio-group'][data-part='item'][data-disabled]
+      > [data-scope='radio-group'][data-part='indicator'][data-state='checked']::before {
+      background: GrayText;
+    }
+  }
+
+  @media print {
+    /* 打印默认丢底色：选中那颗圆点是一块底，落到纸上整个消失，选中与没选中的圈一模一样。
+       圆点改画成一圈实边——边框印得出来，直径与圆心都不动（描边吃进盒里）。 */
+    [data-scope='radio-group'][data-part='indicator'][data-state='checked']::before {
+      border: var(--xh-stroke-thick) solid currentColor;
+    }
+  }
 }

package/css/rating.css

@@ -1,3 +1,12 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 rating 样式。 */
+
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='rating'] {
@@ -7,47 +16,45 @@
   /* position 是给表单影子做定位基准的：那份输入被连接层内联写成绝对定位，
      根上不留基准它就会贴到更外层的定位祖先上，原生校验提示跟着飘到页面别处。 */
   [data-scope='rating'][data-part='root'] {
-    /* 尺寸档只换这三个私有槽，标题与星星都从 root 继承它们，换档不必给每个部件各写一条选择器 */
+    /* 尺寸档只换这三个私有槽，星星与分值都从 root 继承它们，换档不必给每个部件各写一条选择器。
+       星是控件内的字形，按档取 --xh-glyph-size-sm / md / lg（§6.5）；标签字号不随档 */
     --xh-_rating-item-gap: var(--xh-control-gap-md);
-    --xh-_rating-item-size: var(--xh-font-size-2xl);
+    --xh-_rating-item-size: var(--xh-glyph-size-md);
+    --xh-_rating-item-box-size: var(--xh-control-action-size);
     --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 没被声明，退回原来的警示色 */
     --xh-_rating-accent: var(--xh-_tone, var(--xh-color-warning-500));
 
     position: relative;
     display: inline-flex;
     flex-direction: column;
-    gap: var(--xh-rating-gap, var(--xh-stack-gap-md));
+    /* 字段标签贴控件（§6.4 复合单字段） */
+    gap: var(--xh-rating-gap, var(--xh-space-1));
   }
 
   /* —— 尺寸 —— */
   [data-scope='rating'][data-part='root'][data-size='sm'] {
     --xh-_rating-item-gap: var(--xh-control-gap-sm);
-    --xh-_rating-item-size: var(--xh-font-size-xl);
+    --xh-_rating-item-size: var(--xh-glyph-size-sm);
     --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-font-size-3xl);
+    --xh-_rating-item-size: var(--xh-glyph-size-lg);
     --xh-_rating-font-size: var(--xh-control-font-lg);
   }
 
-  /* 整体压暗只做一次，落在最外层：星星逐颗再叠 opacity 会越叠越黑 */
-  [data-scope='rating'][data-part='root'][data-disabled] {
-    cursor: not-allowed;
-    opacity: var(--xh-state-disabled-opacity);
-  }
-
+  /* 字段标签：14 / 500 / fg-default（§6.4），禁用换到 --xh-fg-subtle；文字部件不叠 opacity */
   [data-scope='rating'][data-part='label'] {
-    color: var(--xh-rating-label-fg, var(--xh-fg-muted));
-    font-size: var(--xh-rating-label-font-size, var(--xh-_rating-font-size));
+    color: var(--xh-rating-label-fg, var(--xh-fg-default));
+    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));
-    line-height: var(--xh-leading-none);
   }
 
   [data-scope='rating'][data-part='label'][data-disabled] {
-    color: var(--xh-fg-subtle);
+    color: var(--xh-rating-label-fg-disabled, var(--xh-fg-subtle));
   }
 
   [data-scope='rating'][data-part='control'] {
@@ -56,46 +63,125 @@
     gap: var(--xh-rating-item-gap, var(--xh-_rating-item-gap));
   }
 
+  /* 禁用：星带是纯图形，整体压暗只做一次、落在星带上（星星逐颗再叠 opacity 会越叠越黑）；
+     标签与分值是文字，各自换到禁用前景，不落在这层 opacity 之下 */
+  [data-scope='rating'][data-part='control'][data-disabled] {
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
+  /* 分值文本在场时根改成两列栅格：星星带与分值并排，标题仍独占一整行。
+     没写这个部件的评分不命中这条，还是原来的竖排 */
+  [data-scope='rating'][data-part='root']:has(> [data-part='value-text']) {
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    align-items: center;
+    justify-content: start;
+  }
+
+  [data-scope='rating'][data-part='root']:has(> [data-part='value-text']) > [data-part='label'] {
+    grid-column: 1 / -1;
+  }
+
+  /* 数字等宽：指针从一颗星划到另一颗时分值在原地变，不带着星星左右挪 */
+  [data-scope='rating'][data-part='value-text'] {
+    color: var(--xh-rating-value-text-fg, var(--xh-fg-muted));
+    font-size: var(--xh-rating-value-text-font-size, var(--xh-_rating-font-size));
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-leading-none);
+  }
+
+  [data-scope='rating'][data-part='value-text'][data-disabled] {
+    color: var(--xh-rating-value-text-fg-disabled, var(--xh-fg-subtle));
+  }
+
   /* 容器只是焦点域的兜底落点（焦点从带外进来先落在它身上，随即被转投给某颗星），
      落焦不画环：高亮永远长在星星上，容器再画一圈只是重影。 */
   [data-scope='rating'][data-part='control']:focus-visible {
     outline: none;
   }
 
-  [data-scope='rating'][data-part='control'][data-readonly] {
+  [data-scope='rating'][data-part='control'][data-readonly]:not([data-disabled]) {
     cursor: default;
   }
 
-  [data-scope='rating'][data-part='control'][data-disabled] {
-    cursor: not-allowed;
+  /* 条目固定成一枚方形图标盒：连接层用 clientWidth 判定指针落在左半还是右半，
+     固定盒能让半档分界与图形中心严格重合。
+     星接 Action Control icon 档（§9.1 定尺的星）：盒型、按下 / 禁用面、0.97 缩放与换底、焦点环与过渡由家族配方给，
+     这里只把使用者槽映射到桥接槽。静息透明（ghost 形态）；悬停不换底——悬停预览由点亮的星形（data-highlighted）
+     表达，再给盒换面是重复的通道；按下换到 200 档中性面（白底承载）。前景五态映射同一个值：点亮时五态一起换到
+     点亮色，家族的悬停 / 按下块才不会把点亮色换回静息色；禁用不换前景，星带整体的压暗落在 control 的 opacity 上 */
+  [data-scope='rating'][data-part='item'] {
+    --xh-_rating-item-bg-pressed: var(--xh-rating-item-bg-pressed, var(--xh-bg-subtle-hover));
+
+    --xh-action-visual-size: var(--xh-_rating-item-box-size);
+    --xh-action-min-inline-size: var(--xh-_rating-item-box-size);
+    --xh-action-radius: var(--xh-rating-item-radius, var(--xh-shape-control));
+    --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-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));
+    --xh-action-fg-focus-visible: var(--xh-rating-item-fg, var(--xh-fg-subtle));
+    --xh-action-fg-disabled: var(--xh-rating-item-fg, var(--xh-fg-subtle));
+    --xh-action-border-rest: transparent;
+    --xh-action-border-hover: transparent;
+    --xh-action-border-pressed: transparent;
+    --xh-action-border-focus-visible: transparent;
+    --xh-action-border-disabled: transparent;
   }
 
-  /* 星星字符由作者写，皮肤只负责上色与盒子。
-     inline-block 是判定"点在左半边还是右半边"的前提：连接层拿 offsetX / clientWidth 算比例，
-     行内盒会把字符两侧的换行空白算进宽度，半颗的分界线就偏了。 */
-  [data-scope='rating'][data-part='item'] {
-    display: inline-block;
-    border-radius: var(--xh-rating-item-radius, var(--xh-shape-control));
-    color: var(--xh-rating-item-fg, var(--xh-fg-subtle));
-    font-size: var(--xh-rating-item-font-size, var(--xh-_rating-item-size));
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
-    /* 从一颗星划到另一颗会把中间的字符连着选中，星带看上去像被刷蓝了 */
-    user-select: none;
-    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  /* 家族 icon 档在粗指针下用 ::after 扩热区到 44px：五颗星密排，44px 热区会压住相邻的星，
+     连接层又按 currentTarget 的宽度判半颗，热区串到邻星上半档就判错；星本身仍是 24px 盒，热区不外扩。
+     空条目的 ::after 是点亮那层星形，下限归零才不会被撑成 44px */
+  @media (pointer: coarse) {
+    [data-scope='rating'][data-part='item']::after {
+      min-inline-size: 0;
+      min-block-size: 0;
+    }
+  }
+
+  /* 空条目使用两层同源星形：底层保持中性轮廓，上层按完整或半档裁出强调色。 */
+  [data-scope='rating'][data-part='item']:empty::before,
+  [data-scope='rating'][data-part='item']:empty::after {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    translate: -50% -50%;
+    background-color: var(--xh-rating-item-fg, var(--xh-fg-subtle));
+    -webkit-mask: var(--xh-glyph-mark-star) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-star) center / contain no-repeat;
+    pointer-events: none;
+  }
+
+  [data-scope='rating'][data-part='item']:empty::after {
+    background-color: var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent));
+    clip-path: inset(0 100% 0 0);
+    transition: clip-path var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 点亮的判据是 data-highlighted，不是 aria-checked：
      aria-checked 只认落定的值，而悬停预览要求手划过去当场就亮。
      两者共用同一档颜色，预览与选中因此看不出差别——这正是"预览"该有的样子。 */
   [data-scope='rating'][data-part='item'][data-highlighted] {
-    color: var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent));
+    --xh-action-fg-rest: var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent));
+    --xh-action-fg-hover: var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent));
+    --xh-action-fg-pressed: var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent));
+    --xh-action-fg-focus-visible: var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent));
+    --xh-action-fg-disabled: var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent));
+  }
+
+  [data-scope='rating'][data-part='item'][data-highlighted]:empty::after {
+    clip-path: inset(0);
   }
 
   /* 半颗：一道 50% 硬边渐变裁到字形上，左半亮右半灰。
      必须排在 data-highlighted 之后：半颗那颗星同时带着 data-highlighted，两条选择器特异度相同，
      顺序一反 color 就把 transparent 覆盖回实色，渐变整个看不见。 */
-  [data-scope='rating'][data-part='item'][data-half] {
+  [data-scope='rating'][data-part='item'][data-half]:not(:empty) {
     background-image: linear-gradient(
       to right,
       var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent)) 50%,
@@ -108,7 +194,7 @@
 
   /* rtl 下"半颗"落在星的右半边（连接层按 1 - offsetX/width 判），亮的那半得跟着掉头。
      渐变方向没有逻辑关键字可用，只能靠 :dir() 分流，不能指望逻辑属性自动换向。 */
-  [data-scope='rating'][data-part='item'][data-half]:dir(rtl) {
+  [data-scope='rating'][data-part='item'][data-half]:not(:empty):dir(rtl) {
     background-image: linear-gradient(
       to left,
       var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent)) 50%,
@@ -116,19 +202,23 @@
     );
   }
 
-  [data-scope='rating'][data-part='item']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  [data-scope='rating'][data-part='item'][data-half]:empty::after {
+    clip-path: inset(0 50% 0 0);
   }
 
-  /* 只读仍进得了 Tab 序列、读屏也念得出，只是改不动：收掉手型，别暗示"点这儿能改" */
-  [data-scope='rating'][data-part='item'][data-readonly] {
-    cursor: default;
+  [data-scope='rating'][data-part='item'][data-half]:empty:dir(rtl)::after {
+    clip-path: inset(0 0 0 50%);
   }
 
-  /* 集合条目一律 aria-disabled、没有原生 disabled，:disabled 永远命不中，只能认 data-disabled */
-  [data-scope='rating'][data-part='item'][data-disabled] {
-    cursor: not-allowed;
+  /* 只读仍进得了 Tab 序列、读屏也念得出，只是改不动：收掉手型，别暗示"点这儿能改"；
+     家族的按压块由这里的映射钉回静息面——按下不缩放、不换底 */
+  [data-scope='rating'][data-part='item'][data-readonly]:not([data-disabled]) {
+    --xh-_rating-item-bg-pressed: transparent;
+    --xh-action-scale-pressed: none;
+    --xh-action-cursor-rest: default;
+    --xh-action-cursor-hover: default;
+    --xh-action-cursor-pressed: default;
+    --xh-action-cursor-focus-visible: default;
   }
 
   /* 表单影子的视觉隐藏（绝对定位 + 1px + clip-path）连接层内联给全了，这里不重复也不覆盖，
@@ -143,4 +233,64 @@
   [data-scope='rating'][data-part='item'][hidden] {
     display: none;
   }
+
+  /*
+   * 高对比档：点亮与没点亮只差一档字色，这一档里两档一起被换成同一个系统前景色，
+   * 整条星带看上去全是亮的。改用系统自己的两个角色分开：亮的取高亮色、没亮的取不可用色。
+   * 半颗那道裁到字形上的渐变在这一档里被丢弃，留着透明填充整颗星会消失，
+   * 把填充还回去并按点亮那一档画。
+   */
+  @media (forced-colors: active) {
+    [data-scope='rating'][data-part='item'] {
+      color: GrayText;
+    }
+
+    [data-scope='rating'][data-part='item']:empty::before {
+      background-color: GrayText;
+    }
+
+    [data-scope='rating'][data-part='item']:empty::after {
+      background-color: Highlight;
+    }
+
+    [data-scope='rating'][data-part='item'][data-highlighted],
+    [data-scope='rating'][data-part='item'][data-half]:not(:empty) {
+      background-image: none;
+      -webkit-background-clip: border-box;
+      background-clip: border-box;
+      color: Highlight;
+      /* 亮档已经由字色表出，公共层那圈锚点虚线在这里只是重影 */
+      outline: none;
+    }
+
+    /* 家族在这一档把悬停 / 按下的盒填成 Highlight、字换 HighlightText：点亮的那层星形也是 Highlight，
+       填了盒就把它吞掉。盒保持 Canvas 底，字色仍按点亮与否取 GrayText / Highlight；
+       按住那一下给盒画一圈系统高亮环表出按下 */
+    [data-scope='rating'][data-part='item']:not([data-disabled]):not([data-loading]):hover,
+    [data-scope='rating'][data-part='item']:not([data-disabled]):not([data-loading]):is(:active, [data-pressed]) {
+      background-color: Canvas;
+      color: GrayText;
+    }
+
+    [data-scope='rating'][data-part='item'][data-highlighted]:not([data-disabled]):not([data-loading]):hover,
+    [data-scope='rating'][data-part='item'][data-highlighted]:not([data-disabled]):not([data-loading]):is(:active, [data-pressed]) {
+      color: Highlight;
+    }
+
+    [data-scope='rating'][data-part='item']:not([data-disabled]):not([data-readonly]):is(:active, [data-pressed]) {
+      outline: var(--xh-stroke-thick) solid Highlight;
+      outline-offset: calc(-1 * var(--xh-stroke-thick));
+    }
+  }
+
+  @media print {
+    /* 打印默认丢底图：半颗那道裁到字形上的渐变整个消失，星上只剩 color: transparent，
+       那颗星在纸上什么都不剩。把填充还回去并按点亮那一档画整颗。 */
+    [data-scope='rating'][data-part='item'][data-half]:not(:empty) {
+      background-image: none;
+      -webkit-background-clip: border-box;
+      background-clip: border-box;
+      color: var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent));
+    }
+  }
 }