@xihan-ui/styles 2.0.0 → 3.0.0

package/css/checkbox-group.css

@@ -6,6 +6,8 @@
 /* 定义 checkbox group 样式。 */
 
 @import '../family/action-control.css';
+@import '../family/check-mark.css';
+@import '../family/choice-card.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -18,7 +20,7 @@
   [data-scope='checkbox-group'][data-part='root'] {
     /* 尺寸档只换这四个私有槽，条目、方框与全选格都从 root 继承它们，
        换档不必给每个部件各写一条选择器。方框与字形照 checkbox 的档位走，
-       单体与集合里的同一枚方框必须一样大；条目文字是控件文字，随档取 --xh-control-font-*（§6.4） */
+       单体与集合里的同一枚方框必须一样大；条目文字是控件文字，随档取 --xh-control-font-* */
     --xh-_checkbox-group-box: var(--xh-control-indicator-md);
     --xh-_checkbox-group-glyph: calc(var(--xh-_checkbox-group-box) * 0.75);
     --xh-_checkbox-group-gap: var(--xh-control-gap-md);
@@ -26,10 +28,11 @@
     /* 作者塞进指示符槽的图标和皮肤画的兜底字形共用盒比例（与 checkbox 同一把尺）；显式 icon-size 仍可覆盖 */
     --xh-icon-size: var(--xh-checkbox-group-icon-size, var(--xh-_checkbox-group-glyph));
 
-    /* 勾中的填色随语气走；没写 data-tone 时退回品牌色 */
-    --xh-_checkbox-group-accent: var(--xh-_tone, var(--xh-bg-brand));
+    /* 勾中的填色随语气走，与独立 Checkbox 同一支：选中态是小面积控件边界，取保证 3:1 的语气 control 色；
+       没写 data-tone 时退回品牌色 */
+    --xh-_checkbox-group-accent: var(--xh-_tone-border-control, var(--xh-bg-brand));
     --xh-_checkbox-group-on-accent: var(--xh-_tone-on, var(--xh-fg-on-brand));
-    /* 方框是字段家族的控制盒（§8.3 字段静息形态）：透明底 + --xh-border-control 描边 + 无影，不消费海拔与顶光 */
+    /* 方框是字段家族的控制盒（字段静息形态）：透明底 + --xh-border-control 描边 + 无影，不消费海拔与顶光 */
     --xh-_checkbox-group-bg: var(--xh-checkbox-group-indicator-bg, transparent);
     /* 条目与全选格是方框的承载面：行自己坐画布走 100 → 200，行面上的方框按淡底容器阶梯再上一档（200 → 300）。
        两支私有槽是这一档的唯一来源——宿主拿它们给 --xh-action-host-bg-* 赋值（桥接槽只写不读），
@@ -38,7 +41,7 @@
     --xh-_checkbox-group-host-bg-pressed: var(--xh-bg-subtle-active);
 
     /* 标题与条目都是根的直接子节点，一支 gap 同时管「标题到集合」与「条目之间」：
-       集合标题与集合隔 --xh-space-2（§6.4），同组条目之间也是同一档紧密关系 */
+       集合标题与集合隔 --xh-space-2，同组条目之间也是同一档紧密关系 */
     display: flex;
     gap: var(--xh-checkbox-group-gap, var(--xh-space-2));
   }
@@ -71,7 +74,18 @@
     align-items: center;
   }
 
-  /* 集合标题（§6.4）：14 / 500 / fg-muted，字号不随 size 档 */
+  /* card 形态：卡片撑满竖排的一列；横排时各卡等分一行、按内容等高，窄到放不下两张就折到下一行 */
+  [data-scope='checkbox-group'][data-part='root'][data-variant='card'] {
+    align-items: stretch;
+  }
+
+  [data-scope='checkbox-group'][data-part='root'][data-variant='card'][data-orientation='horizontal']
+    > [data-scope='checkbox-group'][data-part='item'] {
+    flex: 1 1 0;
+    min-inline-size: min(var(--xh-control-min-w), 100%);
+  }
+
+  /* 集合标题：14 / 500 / fg-muted，字号不随 size 档 */
   [data-scope='checkbox-group'][data-part='label'] {
     color: var(--xh-checkbox-group-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-checkbox-group-label-font-size, var(--xh-text-label-size));
@@ -85,7 +99,7 @@
     color: var(--xh-checkbox-group-label-fg-disabled, var(--xh-fg-subtle));
   }
 
-  /* 条目是「方框 + 文案」的整行命中区（§9.2）：接 Action Control row 档、ghost 形态，悬停 / 按下 / 禁用面、手型、
+  /* 条目是「方框 + 文案」的整行命中区：接 Action Control row 档、ghost 形态，悬停 / 按下 / 禁用面、手型、
      过渡与焦点环由家族给，按下只换面不缩放（row 档专属按压块 scale: none）；这里只把使用者槽映射到桥接槽。
      行自己坐画布走 100 → 200（--xh-action-bg-* 钉住自己的面），行面上的方框按淡底容器阶梯再上一档
      （--xh-action-host-bg-* 向内声明自己是方框的承载面，host 槽只对后代生效——自己的面已由 --xh-action-bg-* 钉住；
@@ -122,7 +136,7 @@
      家族的 :hover / 按压块不排 readonly，只能从槽上收回；排掉禁用项是因为这条选择器权重高过家族的禁用块，
      不排就会把 not-allowed 覆盖回 default */
   [data-scope='checkbox-group'][data-part='root'][data-readonly]
-    [data-scope='checkbox-group'][data-part='item']:not([data-disabled]) {
+    [data-scope='checkbox-group'][data-part='item']:not([data-disabled]):not([data-xh-choice-card]) {
     --xh-action-bg-hover: transparent;
     --xh-action-bg-pressed: transparent;
     --xh-action-cursor-rest: default;
@@ -149,7 +163,7 @@
     box-shadow: var(--xh-checkbox-group-indicator-shadow, none);
     font-size: var(--xh-checkbox-group-indicator-font-size, var(--xh-_checkbox-group-glyph));
     line-height: var(--xh-leading-none);
-    /* 方框不缩放（§9.2 行级只换面），过渡只有底与描边；按下走 press 时间线、释放同走 micro */
+    /* 方框不缩放（行级只换面），过渡只有底与描边；按下走 press 时间线、释放同走 micro */
     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);
@@ -161,7 +175,7 @@
     content: '';
   }
 
-  /* 悬停整行时未勾选的方框描边升一档（字段静息 → hover 的同一条阶梯，§8.3）；
+  /* 悬停整行时未勾选的方框描边升一档（字段静息 → hover 的同一条阶梯）；
      勾中的方框描边与底同色，悬停不换描边——填色本身已经在表达状态 */
   @media (hover: hover) {
     [data-scope='checkbox-group'][data-part='root']:not([data-disabled]):not([data-readonly]):not([data-invalid])
@@ -182,7 +196,7 @@
   }
 
   /* 按下去要有回应。方框不是激活宿主：宿主是投影了 row 档的整行（条目 / 全选格），方框在宿主的
-     :hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面、不缩放（§9.2）——行按下是 200，
+     :hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面、不缩放——行按下是 200，
      坐在上面的方框到 300（行以 --xh-action-host-bg-pressed 声明自己是方框的承载面，桥接槽只写不读，
      方框读的是喂给它的那支私有槽），勾中的换到语气的 active 档；
      与家族按压块同一时间线（按下 --xh-motion-duration-press，释放同走 micro） */
@@ -203,67 +217,9 @@
     --xh-_checkbox-group-bg: var(--xh-checkbox-group-indicator-bg-checked-pressed, var(--xh-_tone-active, var(--xh-bg-brand-active)));
   }
 
-  /* 勾号由皮肤补，作者不必自己往 indicator 里塞字符 */
-  [data-scope='checkbox-group'][data-part='indicator'][data-state='checked']: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));
-    vertical-align: var(--xh-glyph-baseline-shift);
-    background-color: currentColor;
-    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
-  }
-
-  /* 全选格的三态：checked 打勾、indeterminate 打横杠、unchecked 留空。
-     indeterminate 就是读屏听到的 aria-checked=mixed，两者同源，样式只认 data-state。
-
-     字形走 ::after 而不是画方框的那颗 ::before：mask 会把所在元素的描边与底色一并裁成
-     字形的轮廓，写在 ::before 上就等于把方框本身裁没了，只剩一枚白勾。条目那一侧是
-     真实节点当方框、它的 ::before 当字形的两层结构，这里 anatomy 到 trigger 为止、
-     没有第二个节点，只能用第二个伪元素补上那一层。
-     方框是行首那颗 ::before、宽度即指示符尺寸，所以字形按「盒与字形的宽度差之半」
-     内推即落在圆心；纵向靠 inset-block: 0 + margin-block: auto 居中。
-     font-size 与 ::before 同值，--xh-icon-size 的 1em 兜底才和条目那侧量得一样大 */
-  [data-scope='checkbox-group'][data-part='select-all-trigger'][data-state='checked']::after {
-    content: '';
-    position: absolute;
-    inset-block: 0;
-    inset-inline-start: 0;
-    margin-block: auto;
-    margin-inline-start: calc(
-      (
-        var(--xh-checkbox-group-indicator-size, var(--xh-_checkbox-group-box)) -
-          var(--xh-icon-size, var(--xh-glyph-size-text))
-      ) / 2
-    );
-    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    background-color: var(--xh-checkbox-group-indicator-fg, var(--xh-_checkbox-group-on-accent));
-    font-size: var(--xh-checkbox-group-indicator-font-size, var(--xh-_checkbox-group-glyph));
-    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
-  }
-
-  [data-scope='checkbox-group'][data-part='select-all-trigger'][data-state='indeterminate']::after {
-    content: '';
-    position: absolute;
-    inset-block: 0;
-    inset-inline-start: 0;
-    margin-block: auto;
-    margin-inline-start: calc(
-      (
-        var(--xh-checkbox-group-indicator-size, var(--xh-_checkbox-group-box)) -
-          var(--xh-icon-size, var(--xh-glyph-size-text))
-      ) / 2
-    );
-    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    background-color: var(--xh-checkbox-group-indicator-fg, var(--xh-_checkbox-group-on-accent));
-    font-size: var(--xh-checkbox-group-indicator-font-size, var(--xh-_checkbox-group-glyph));
-    -webkit-mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
-  }
+  /* 方框里的勾与全选格的三态标记（checked 打勾、indeterminate 打横杠、unchecked 留空）由勾选标记配方画：
+     常驻、按状态淡变并轻缩放。条目的方框是真实节点，标记是它的 ::before；全选格的 anatomy 到 trigger
+     为止，方框只能是行首那颗 ::before，标记是 ::after、叠在方框正中——两支桥接槽写在 trigger 上 */
 
   /* 校验失败标在每个方框上：root 上的 data-invalid 是唯一出处，条目自己不带这个属性 */
   [data-scope='checkbox-group'][data-part='root'][data-invalid]
@@ -271,7 +227,7 @@
     border-color: var(--xh-checkbox-group-indicator-border-invalid, var(--xh-border-invalid));
   }
 
-  /* 禁用（§7.2）：--xh-border-default 描边 + --xh-bg-subtle 底 + --xh-fg-disabled 字形，不靠 opacity */
+  /* 禁用：--xh-border-default 描边 + --xh-bg-subtle 底 + --xh-fg-disabled 字形，不靠 opacity */
   [data-scope='checkbox-group'][data-part='root'][data-disabled]
     [data-scope='checkbox-group'][data-part='indicator'],
   [data-scope='checkbox-group'][data-part='item'][data-disabled]
@@ -283,17 +239,49 @@
     color: var(--xh-checkbox-group-indicator-fg-disabled, var(--xh-fg-disabled));
   }
 
+  /* 全选格的标记画在 ::after 上，禁用色经桥接槽给，与条目方框里置灰的勾同色 */
+  [data-scope='checkbox-group'][data-part='select-all-trigger'][data-disabled] {
+    --xh-check-mark-fg: var(--xh-checkbox-group-indicator-fg-disabled, var(--xh-fg-disabled));
+  }
+
   [data-scope='checkbox-group'][data-part='item-text'] {
     color: inherit;
     user-select: none;
   }
 
+  /* 卡片的文案是卡的标题：取标签字重，与说明拉开层级 */
+  [data-scope='checkbox-group'][data-part='item'][data-xh-choice-card] > [data-scope='checkbox-group'][data-part='item-text'] {
+    font-weight: var(--xh-checkbox-group-card-title-font-weight, var(--xh-text-label-weight));
+  }
+
+  /* 说明是次级文字：13 / fg-muted / 正文行高，不随选中与语气换色；落在文案下方同一列。
+     列表形态的条目带了说明时同样排成两行，行首的方框对齐第一行 */
+  [data-scope='checkbox-group'][data-part='item-description'] {
+    grid-column: 2;
+    color: var(--xh-checkbox-group-item-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-checkbox-group-item-description-font-size, var(--xh-text-secondary-size));
+    font-weight: var(--xh-font-weight-regular);
+    line-height: var(--xh-leading-normal);
+    user-select: none;
+  }
+
+  [data-scope='checkbox-group'][data-part='item']:not([data-xh-choice-card]):has(> [data-scope='checkbox-group'][data-part='item-description']) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    row-gap: var(--xh-checkbox-group-item-row-gap, var(--xh-space-1));
+  }
+
+  [data-scope='checkbox-group'][data-part='item'][data-disabled] > [data-scope='checkbox-group'][data-part='item-description'] {
+    color: var(--xh-checkbox-group-item-description-fg-disabled, var(--xh-fg-disabled));
+  }
+
   /* 全选格与条目同形（接 Action Control row 档 ghost、xs 命中地板、按下只换面不缩放，方框读宿主 host 槽），
      但字重加一档，读起来才不像又一个普通选项。它是普通元素而非原生控件（三态只有非原生控件表达得出），
      家族的禁用块同样只读 data-disabled。position 是给叠在方框上的那颗字形 ::after 当定位基准 */
   [data-scope='checkbox-group'][data-part='select-all-trigger'] {
     --xh-action-gap: var(--xh-checkbox-group-select-all-trigger-gap, var(--xh-_checkbox-group-gap));
-    /* 全选格的身份是嵌在 control 内的小方框（§6.3 select-all 方框取 inset），与条目方框同一档 */
+    /* 全选格的身份是嵌在 control 内的小方框（select-all 方框取 inset），与条目方框同一档 */
     --xh-action-radius: var(--xh-checkbox-group-select-all-trigger-radius, var(--xh-shape-inset));
     --xh-action-font-size: var(--xh-checkbox-group-select-all-trigger-font-size, var(--xh-_checkbox-group-font-size));
     --xh-action-padding-inline: 0;
@@ -308,6 +296,9 @@
     /* 行自己的面已由上面两支钉住，host 槽只对方框（::before）生效：200 → 300 */
     --xh-action-host-bg-hover: var(--xh-_checkbox-group-host-bg-hover);
     --xh-action-host-bg-pressed: var(--xh-_checkbox-group-host-bg-pressed);
+    /* 勾选标记叠在行首方框正中：方框边长与标记色交给配方 */
+    --xh-check-mark-box-size: var(--xh-checkbox-group-indicator-size, var(--xh-_checkbox-group-box));
+    --xh-check-mark-fg: var(--xh-checkbox-group-indicator-fg, var(--xh-_checkbox-group-on-accent));
 
     position: relative;
     inline-size: auto;
@@ -327,18 +318,12 @@
   }
 
   /* 家族 row 档在粗指针下用 ::after 把热区扩到 44px 高：条目按 24px 行 + 8px 间距密排，热区会压进相邻条目 2px、
-     指针落错行，A 档 24px 由 xs 地板保住（两者都不在 coarse-target 的 B 档名单）；勾中 / 半选时全选格的 ::after
-     是叠在方框上的字形，家族的热区 translate 会把它拖走，钉回原位（同 transfer select-all-trigger） */
+     指针落错行，A 档 24px 由 xs 地板保住（两者都不在 coarse-target 的 B 档名单）；全选格的 ::after 是叠在方框上的
+     勾选标记，热区由勾选标记配方逐项钉回 */
   @media (pointer: coarse) {
-    [data-scope='checkbox-group'][data-part='item']::after,
-    [data-scope='checkbox-group'][data-part='select-all-trigger']::after {
+    [data-scope='checkbox-group'][data-part='item']::after {
       min-block-size: 0;
     }
-
-    [data-scope='checkbox-group'][data-part='select-all-trigger']:is([data-state='checked'], [data-state='indeterminate'])::after {
-      min-block-size: 0;
-      translate: none;
-    }
   }
 
   /* 表单出口：连接层已经把整套视觉隐藏写进内联 style（absolute + 1px + clip-path），
@@ -357,22 +342,7 @@
     display: none;
   }
 
-  @media (forced-colors: active) {
-    /* 真实描边保留方框，系统前景重绘状态字形。 */
-    [data-scope='checkbox-group'][data-part='indicator'][data-state='checked']:empty::before,
-    [data-scope='checkbox-group'][data-part='select-all-trigger']:is([data-state='checked'], [data-state='indeterminate'])::after {
-      background-color: CanvasText;
-    }
-
-    [data-scope='checkbox-group'][data-part='item'][data-disabled]
-      [data-scope='checkbox-group'][data-part='indicator'][data-state='checked']:empty::before,
-    [data-scope='checkbox-group'][data-part='select-all-trigger'][data-disabled]:is(
-      [data-state='checked'],
-      [data-state='indeterminate']
-    )::after {
-      background-color: GrayText;
-    }
-  }
+  /* 强制色：真实描边保留方框，状态字形的系统前景由勾选标记配方给 */
 
   @media print {
     [data-scope='checkbox-group'][data-part='indicator'][data-state='checked'],

package/css/checkbox.css

@@ -6,6 +6,7 @@
 /* 定义 checkbox 样式。 */
 
 @import '../family/action-control.css';
+@import '../family/check-mark.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -27,8 +28,8 @@
     /* 实心底上的勾与横杠，同样没写 data-tone 时退回原来的品牌底前景色 */
     --xh-_checkbox-on-accent: var(--xh-_tone-on, var(--xh-fg-on-brand));
 
-    /* 方框接 Action Control icon 档（§9.1 定尺方框）：盒型、悬停 / 按下 / 禁用面、0.97 缩放与换底、粗指针热区、
-       焦点环由家族配方给，这里只把使用者槽映射到桥接槽。面按字段静息形态取值（§8.3）：透明底 +
+    /* 方框接 Action Control icon 档（定尺方框）：盒型、悬停 / 按下 / 禁用面、0.97 缩放与换底、粗指针热区、
+       焦点环由家族配方给，这里只把使用者槽映射到桥接槽。面按字段静息形态取值：透明底 +
        --xh-border-control 描边 + 无影，不消费海拔与顶光；悬停只把描边升一档，底不动；按下换到 200 档中性面
        （白底承载）；边长随 --xh-control-indicator-* 走，不取家族的 profile 尺寸。
        常态 / 勾中 / 校验失败 / 只读只换下面四支私有槽，桥接槽的映射写一次 */
@@ -101,7 +102,7 @@
 
   /* 悬停标签文字时也让控制盒回应，整行可点不再只有移到 16px 小盒上才看得出来：
      指针落在方框上时由家族的悬停块换到 --xh-action-border-hover，落在标签文字上时这里补同一档；
-     未勾选的方框描边升一档（字段静息 → hover 的同一条阶梯，§8.3），勾中 / 校验失败的方框由上面的映射钉住不换 */
+     未勾选的方框描边升一档（字段静息 → hover 的同一条阶梯），勾中 / 校验失败的方框由上面的映射钉住不换 */
   @media (hover: hover) {
     [data-scope='checkbox'][data-part='label']:not([data-disabled]):not([data-readonly]):hover
       [data-scope='checkbox'][data-part='root'] {
@@ -155,65 +156,32 @@
     }
   }
 
+  /* 指示器铺满方框。勾与半选杠由勾选标记配方画在它的 ::before 上（常驻、按状态淡变并轻缩放）；
+     作者往部件里塞了自己的图形时配方不画 */
   [data-scope='checkbox'][data-part='indicator'] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     inline-size: 100%;
     block-size: 100%;
-    opacity: 0;
     line-height: var(--xh-leading-none);
     font-size: var(--xh-_checkbox-glyph);
     pointer-events: none;
-    scale: var(--xh-motion-scale-enter);
-    transition:
-      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter-strong);
   }
 
-  /* 没写内容就由皮肤画；作者往部件里塞了自己的图形，这条规则即不命中 */
-  [data-scope='checkbox'][data-part='indicator']: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));
-    vertical-align: var(--xh-glyph-baseline-shift);
-    background-color: currentColor;
-    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
-  }
-
-  [data-scope='checkbox'][data-part='indicator']:is([data-state='checked'], [data-state='indeterminate']) {
-    opacity: 1;
-    scale: 1;
-  }
-
-  /* 半选换一枚横杠字形盖住勾：aria-checked=mixed 在视觉上也得与「全选」分得开。
-     横杠与勾同走字形令牌，作者换掉标记时两态一起换；此前这条是手画的几何盒
-     （60% × stroke-thick），同一页上会出现两种横杠 */
+  /* 半选横杠另有一支前景槽，缺省与勾同色 */
   [data-scope='checkbox'][data-part='indicator'][data-state='indeterminate'] {
-    position: relative;
-    color: transparent;
-  }
-
-  [data-scope='checkbox'][data-part='indicator'][data-state='indeterminate']::after {
-    position: absolute;
-    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    background-color: var(--xh-checkbox-indicator-fg, var(--xh-_checkbox-on-accent));
-    content: '';
-    -webkit-mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
+    --xh-check-mark-fg: var(--xh-checkbox-indicator-fg, var(--xh-_checkbox-on-accent));
   }
 
-  /* 禁用时横杠也走置灰色：它自己画底色，不从 root 的 color 继承 */
+  /* 禁用时横杠也走置灰色 */
   [data-scope='checkbox'][data-part='root'][data-disabled]
-    [data-scope='checkbox'][data-part='indicator'][data-state='indeterminate']::after {
-    background-color: var(--xh-checkbox-fg-disabled, var(--xh-fg-disabled));
+    [data-scope='checkbox'][data-part='indicator'][data-state='indeterminate'] {
+    --xh-check-mark-fg: var(--xh-checkbox-fg-disabled, var(--xh-fg-disabled));
   }
 
   /* —— 带文字的整行：<label> 包住控件与文字，与 checkbox-group 的条目、switch 的标签同一副样子 ——
-     文字是控件自己的文字，字号随 size 档取 --xh-control-font-*（§6.4 控件字号随档）；
+     文字是控件自己的文字，字号随 size 档取 --xh-control-font-*（控件字号随档）；
      行高取正文档，长文字可以自然换行 */
   [data-scope='checkbox'][data-part='label'] {
     --xh-_checkbox-label-gap: var(--xh-control-gap-md);
@@ -238,7 +206,7 @@
     --xh-_checkbox-label-font-size: var(--xh-control-font-lg);
   }
 
-  /* 禁用标签色统一 --xh-fg-subtle（§6.4） */
+  /* 禁用标签色统一 --xh-fg-subtle */
   [data-scope='checkbox'][data-part='label'][data-disabled] {
     color: var(--xh-checkbox-label-fg-disabled, var(--xh-fg-subtle));
     cursor: not-allowed;
@@ -259,18 +227,17 @@
   }
 
   @media (forced-colors: active) {
-    /* 真实 border 保住盒，系统前景重新画出勾与半选横杠。 */
-    [data-scope='checkbox'][data-part='indicator']:empty::before,
-    [data-scope='checkbox'][data-part='indicator'][data-state='indeterminate']::after {
-      background-color: CanvasText;
-    }
-
+    /* 真实 border 保住盒，勾与半选横杠的系统前景由配方给；禁用写在 root 上，指示器自己不带，这里补置灰。
+       盒就是 root 本身：悬停与按下时家族把它涂成 Highlight，勾跟着换 HighlightText */
     [data-scope='checkbox'][data-part='root'][data-disabled]
-      [data-scope='checkbox'][data-part='indicator']:empty::before,
-    [data-scope='checkbox'][data-part='root'][data-disabled]
-      [data-scope='checkbox'][data-part='indicator'][data-state='indeterminate']::after {
+      [data-scope='checkbox'][data-part='indicator']:empty::before {
       background-color: GrayText;
     }
+
+    [data-scope='checkbox'][data-part='root']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed])
+      [data-scope='checkbox'][data-part='indicator']:empty::before {
+      background-color: HighlightText;
+    }
   }
 
   @media print {