@xihan-ui/styles 1.0.0 → 2.0.0

package/css/checkbox-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.
+ */
+
+/* 定义 checkbox group 样式。 */
+
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='checkbox-group'] {
@@ -7,11 +16,45 @@
   /* 组容器：label、trigger、条目都是它的直接子节点，排布方式只能读 data-orientation——
      连接层明说了 role=group 不接受 aria-orientation，那个属性它根本没输出 */
   [data-scope='checkbox-group'][data-part='root'] {
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-checkbox-group-icon-size, var(--xh-glyph-size-text));
+    /* 尺寸档只换这四个私有槽，条目、方框与全选格都从 root 继承它们，
+       换档不必给每个部件各写一条选择器。方框与字形照 checkbox 的档位走，
+       单体与集合里的同一枚方框必须一样大；条目文字是控件文字，随档取 --xh-control-font-*（§6.4） */
+    --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);
+    --xh-_checkbox-group-font-size: var(--xh-control-font-md);
+    /* 作者塞进指示符槽的图标和皮肤画的兜底字形共用盒比例（与 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));
+    --xh-_checkbox-group-on-accent: var(--xh-_tone-on, var(--xh-fg-on-brand));
+    /* 方框是字段家族的控制盒（§8.3 字段静息形态）：透明底 + --xh-border-control 描边 + 无影，不消费海拔与顶光 */
+    --xh-_checkbox-group-bg: var(--xh-checkbox-group-indicator-bg, transparent);
+    /* 条目与全选格是方框的承载面：行自己坐画布走 100 → 200，行面上的方框按淡底容器阶梯再上一档（200 → 300）。
+       两支私有槽是这一档的唯一来源——宿主拿它们给 --xh-action-host-bg-* 赋值（桥接槽只写不读），
+       方框按下读同一支私有槽，即与宿主的 host 槽同源 */
+    --xh-_checkbox-group-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-_checkbox-group-host-bg-pressed: var(--xh-bg-subtle-active);
+
+    /* 标题与条目都是根的直接子节点，一支 gap 同时管「标题到集合」与「条目之间」：
+       集合标题与集合隔 --xh-space-2（§6.4），同组条目之间也是同一档紧密关系 */
     display: flex;
-    gap: var(--xh-checkbox-group-gap, var(--xh-stack-gap-md));
+    gap: var(--xh-checkbox-group-gap, var(--xh-space-2));
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  [data-scope='checkbox-group'][data-part='root'][data-size='sm'] {
+    --xh-_checkbox-group-box: var(--xh-control-indicator-sm);
+    --xh-_checkbox-group-gap: var(--xh-control-gap-sm);
+    --xh-_checkbox-group-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-scope='checkbox-group'][data-part='root'][data-size='lg'] {
+    --xh-_checkbox-group-box: var(--xh-control-indicator-lg);
+    --xh-_checkbox-group-gap: var(--xh-control-gap-lg);
+    --xh-_checkbox-group-font-size: var(--xh-control-font-lg);
   }
 
   /* 两种取值各写一条：连接层缺省给的是 vertical，但受控写 horizontal 时不能靠默认值兜底 */
@@ -28,6 +71,7 @@
     align-items: center;
   }
 
+  /* 集合标题（§6.4）：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));
@@ -41,79 +85,122 @@
     color: var(--xh-checkbox-group-label-fg-disabled, var(--xh-fg-subtle));
   }
 
-  /* position 是给条目内那份视觉隐藏的原生输入当定位基准：连接层给它写死了 position:absolute，
+  /* 条目是「方框 + 文案」的整行命中区（§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 是给条目内那份视觉隐藏的原生输入当定位基准：连接层给它写死了 position:absolute，
      这里不立基准的话，原生校验气泡会飘到页面上离该条目很远的地方 */
   [data-scope='checkbox-group'][data-part='item'] {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--xh-checkbox-group-item-gap, var(--xh-control-gap-md));
-    border-radius: var(--xh-checkbox-group-item-radius, var(--xh-shape-control));
-    color: var(--xh-checkbox-group-item-fg, var(--xh-fg-default));
-    font-size: var(--xh-checkbox-group-item-font-size, var(--xh-text-label-size));
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
-  }
-
-  [data-scope='checkbox-group'][data-part='item']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
+    --xh-action-gap: var(--xh-checkbox-group-item-gap, var(--xh-_checkbox-group-gap));
+    --xh-action-radius: var(--xh-checkbox-group-item-radius, var(--xh-shape-control));
+    --xh-action-font-size: var(--xh-checkbox-group-item-font-size, var(--xh-_checkbox-group-font-size));
+    --xh-action-padding-inline: 0;
+    --xh-action-padding-block: 0;
+    --xh-action-fg-rest: var(--xh-checkbox-group-item-fg, var(--xh-fg-default));
+    --xh-action-fg-hover: var(--xh-checkbox-group-item-fg, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-checkbox-group-item-fg, var(--xh-fg-default));
+    --xh-action-fg-focus-visible: var(--xh-checkbox-group-item-fg, var(--xh-fg-default));
+    --xh-action-fg-disabled: var(--xh-checkbox-group-item-fg-disabled, var(--xh-fg-disabled));
+    --xh-action-bg-hover: var(--xh-checkbox-group-item-bg-hover, var(--xh-bg-subtle));
+    --xh-action-bg-pressed: var(--xh-checkbox-group-item-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-action-host-bg-hover: var(--xh-_checkbox-group-host-bg-hover);
+    --xh-action-host-bg-pressed: var(--xh-_checkbox-group-host-bg-pressed);
 
-  /* 条目禁用一律走 aria-disabled（原生 disabled 会让它从键盘用户眼里消失），
-     所以样式只能读 data-disabled，写 :disabled 永远不命中 */
-  [data-scope='checkbox-group'][data-part='item'][data-disabled] {
-    color: var(--xh-checkbox-group-item-fg-disabled, var(--xh-fg-disabled));
-    cursor: not-allowed;
+    position: relative;
+    /* row 档铺满容器（inline-size: 100%）会把竖排的命中区拉到整行空白处、横排 wrap 也塌：
+       沿用「条目按内容收宽」的既有决定 */
+    inline-size: auto;
+    /* ghost 的 1px 透明边位会把方框列相对组标题错开 1px：边归零，几何保持不变 */
+    border-width: 0;
   }
 
-  /* 只读整组都改不动，但不是禁用：颜色照常，只把"可点"这个暗示收回来。
-     排掉禁用项是因为这条选择器权重高过上面那条，不排就会把 not-allowed 覆盖回 default */
+  /* 只读整组都改不动，但不是禁用：颜色照常，把整行的悬停 / 按下面与"可点"这个暗示一起收回来。
+     家族的 :hover / 按压块不排 readonly，只能从槽上收回；排掉禁用项是因为这条选择器权重高过家族的禁用块，
+     不排就会把 not-allowed 覆盖回 default */
   [data-scope='checkbox-group'][data-part='root'][data-readonly]
     [data-scope='checkbox-group'][data-part='item']:not([data-disabled]) {
-    cursor: default;
+    --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;
   }
 
   /* 全选格与条目格共用同一套盒子，并成一条规则写：分开写迟早只改到一半，两个方框就此走形。
      尺寸与选中态照 checkbox 的 root 搬，同一份视觉语言在单体与集合里必须一致。
      trigger 那格没有对应的角色节点（anatomy 到 trigger 为止），只能由伪元素补出来 */
   [data-scope='checkbox-group'][data-part='indicator'],
-  [data-scope='checkbox-group'][data-part='trigger']::before {
+  [data-scope='checkbox-group'][data-part='select-all-trigger']::before {
     display: inline-flex;
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--xh-checkbox-group-indicator-size, var(--xh-control-indicator-size));
-    block-size: var(--xh-checkbox-group-indicator-size, var(--xh-control-indicator-size));
+    inline-size: var(--xh-checkbox-group-indicator-size, var(--xh-_checkbox-group-box));
+    block-size: var(--xh-checkbox-group-indicator-size, var(--xh-_checkbox-group-box));
     border: var(--xh-stroke-thin) solid var(--xh-checkbox-group-indicator-border, var(--xh-border-control));
     border-radius: var(--xh-checkbox-group-indicator-radius, var(--xh-shape-inset));
-    background: var(--xh-checkbox-group-indicator-bg, var(--xh-bg-canvas));
-    color: var(--xh-checkbox-group-indicator-fg, var(--xh-fg-on-brand));
-    font-size: var(--xh-checkbox-group-indicator-font-size, calc(var(--xh-control-indicator-size) * 0.75));
+    background-color: var(--xh-_checkbox-group-bg);
+    color: var(--xh-checkbox-group-indicator-fg, var(--xh-_checkbox-group-on-accent));
+    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 */
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* content 只能给伪元素，绝不能并进上面那条：content 落在普通元素上会顶掉它的全部子节点，
      indicator 里作者写的图标就此消失 */
-  [data-scope='checkbox-group'][data-part='trigger']::before {
+  [data-scope='checkbox-group'][data-part='select-all-trigger']::before {
     content: '';
   }
 
-  /* 悬停只加深空方框的描边。已选中的那一格必须排除：这条选择器的权重高过下面那条填色规则，
-     不排除就会在悬停时把 brand 描边换回灰色，方框看起来"缺了一圈" */
-  [data-scope='checkbox-group'][data-part='item']:not([data-disabled]):hover
-    [data-scope='checkbox-group'][data-part='indicator']:not([data-state='checked']) {
-    border-color: var(--xh-checkbox-group-indicator-border-hover, var(--xh-border-control-hover));
+  /* 悬停整行时未勾选的方框描边升一档（字段静息 → hover 的同一条阶梯，§8.3）；
+     勾中的方框描边与底同色，悬停不换描边——填色本身已经在表达状态 */
+  @media (hover: hover) {
+    [data-scope='checkbox-group'][data-part='root']:not([data-disabled]):not([data-readonly]):not([data-invalid])
+      [data-scope='checkbox-group'][data-part='item']:not([data-disabled]):hover
+      [data-scope='checkbox-group'][data-part='indicator']:not([data-state='checked']),
+    [data-scope='checkbox-group'][data-part='root']:not([data-disabled]):not([data-readonly]):not([data-invalid])
+      [data-scope='checkbox-group'][data-part='select-all-trigger']:not([data-disabled]):not([data-state='checked']):not([data-state='indeterminate']):hover::before {
+      border-color: var(--xh-checkbox-group-indicator-border-hover, var(--xh-border-control-hover));
+    }
   }
 
   /* 选中即填色：条目是二态，全选格三态里 checked 与 indeterminate 都算"有值"，共用同一副填色 */
   [data-scope='checkbox-group'][data-part='indicator'][data-state='checked'],
-  [data-scope='checkbox-group'][data-part='trigger']:is([data-state='checked'], [data-state='indeterminate'])::before {
-    border-color: var(--xh-checkbox-group-indicator-border-checked, var(--xh-bg-brand));
-    background: var(--xh-checkbox-group-indicator-bg-checked, var(--xh-bg-brand));
+  [data-scope='checkbox-group'][data-part='select-all-trigger']:is([data-state='checked'], [data-state='indeterminate'])::before {
+    --xh-_checkbox-group-bg: var(--xh-checkbox-group-indicator-bg-checked, var(--xh-_checkbox-group-accent));
+
+    border-color: var(--xh-checkbox-group-indicator-border-checked, var(--xh-_checkbox-group-accent));
+  }
+
+  /* 按下去要有回应。方框不是激活宿主：宿主是投影了 row 档的整行（条目 / 全选格），方框在宿主的
+     :hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面、不缩放（§9.2）——行按下是 200，
+     坐在上面的方框到 300（行以 --xh-action-host-bg-pressed 声明自己是方框的承载面，桥接槽只写不读，
+     方框读的是喂给它的那支私有槽），勾中的换到语气的 active 档；
+     与家族按压块同一时间线（按下 --xh-motion-duration-press，释放同走 micro） */
+  [data-scope='checkbox-group'][data-part='root']:not([data-readonly])
+    [data-scope='checkbox-group'][data-part='item']:not([data-disabled]):is(:active, [data-pressed])
+    [data-scope='checkbox-group'][data-part='indicator'],
+  [data-scope='checkbox-group'][data-part='select-all-trigger']:not([data-disabled]):not([data-readonly]):is(:active, [data-pressed])::before {
+    --xh-_checkbox-group-bg: var(--xh-checkbox-group-indicator-bg-pressed, var(--xh-_checkbox-group-host-bg-pressed));
+
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
+  [data-scope='checkbox-group'][data-part='root']:not([data-readonly])
+    [data-scope='checkbox-group'][data-part='item']:not([data-disabled]):is(:active, [data-pressed])
+    [data-scope='checkbox-group'][data-part='indicator'][data-state='checked'],
+  [data-scope='checkbox-group'][data-part='select-all-trigger']:not([data-disabled]):not([data-readonly]):is(:active, [data-pressed]):is([data-state='checked'], [data-state='indeterminate'])::before {
+    --xh-_checkbox-group-bg: var(--xh-checkbox-group-indicator-bg-checked-pressed, var(--xh-_tone-active, var(--xh-bg-brand-active)));
   }
 
   /* 勾号由皮肤补，作者不必自己往 indicator 里塞字符 */
@@ -138,7 +225,7 @@
      方框是行首那颗 ::before、宽度即指示符尺寸，所以字形按「盒与字形的宽度差之半」
      内推即落在圆心；纵向靠 inset-block: 0 + margin-block: auto 居中。
      font-size 与 ::before 同值，--xh-icon-size 的 1em 兜底才和条目那侧量得一样大 */
-  [data-scope='checkbox-group'][data-part='trigger'][data-state='checked']::after {
+  [data-scope='checkbox-group'][data-part='select-all-trigger'][data-state='checked']::after {
     content: '';
     position: absolute;
     inset-block: 0;
@@ -146,19 +233,19 @@
     margin-block: auto;
     margin-inline-start: calc(
       (
-        var(--xh-checkbox-group-indicator-size, var(--xh-control-indicator-size)) -
+        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-fg-on-brand));
-    font-size: var(--xh-checkbox-group-indicator-font-size, calc(var(--xh-control-indicator-size) * 0.75));
+    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='trigger'][data-state='indeterminate']::after {
+  [data-scope='checkbox-group'][data-part='select-all-trigger'][data-state='indeterminate']::after {
     content: '';
     position: absolute;
     inset-block: 0;
@@ -166,14 +253,14 @@
     margin-block: auto;
     margin-inline-start: calc(
       (
-        var(--xh-checkbox-group-indicator-size, var(--xh-control-indicator-size)) -
+        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-fg-on-brand));
-    font-size: var(--xh-checkbox-group-indicator-font-size, calc(var(--xh-control-indicator-size) * 0.75));
+    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;
   }
@@ -184,42 +271,74 @@
     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 */
+  [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]
+    [data-scope='checkbox-group'][data-part='indicator'],
+  [data-scope='checkbox-group'][data-part='select-all-trigger'][data-disabled]::before {
+    --xh-_checkbox-group-bg: var(--xh-checkbox-group-indicator-bg-disabled, var(--xh-bg-subtle));
+
+    border-color: var(--xh-checkbox-group-indicator-border-disabled, var(--xh-border-default));
+    color: 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-disabled。
-     position 是给叠在方框上的那颗字形 ::after 当定位基准 */
-  [data-scope='checkbox-group'][data-part='trigger'] {
+  /* 全选格与条目同形（接 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），与条目方框同一档 */
+    --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;
+    --xh-action-padding-block: 0;
+    --xh-action-fg-rest: var(--xh-checkbox-group-select-all-trigger-fg, var(--xh-fg-default));
+    --xh-action-fg-hover: var(--xh-checkbox-group-select-all-trigger-fg, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-checkbox-group-select-all-trigger-fg, var(--xh-fg-default));
+    --xh-action-fg-focus-visible: var(--xh-checkbox-group-select-all-trigger-fg, var(--xh-fg-default));
+    --xh-action-fg-disabled: var(--xh-checkbox-group-select-all-trigger-fg-disabled, var(--xh-fg-disabled));
+    --xh-action-bg-hover: var(--xh-checkbox-group-select-all-trigger-bg-hover, var(--xh-bg-subtle));
+    --xh-action-bg-pressed: var(--xh-checkbox-group-select-all-trigger-bg-pressed, var(--xh-bg-subtle-hover));
+    /* 行自己的面已由上面两支钉住，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);
+
     position: relative;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--xh-checkbox-group-trigger-gap, var(--xh-control-gap-md));
-    border-radius: var(--xh-checkbox-group-trigger-radius, var(--xh-shape-control));
-    color: var(--xh-checkbox-group-trigger-fg, var(--xh-fg-default));
-    font-size: var(--xh-checkbox-group-trigger-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-checkbox-group-trigger-font-weight, var(--xh-font-weight-medium));
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
-    user-select: none;
+    inline-size: auto;
+    border-width: 0;
+    font-weight: var(--xh-checkbox-group-select-all-trigger-font-weight, var(--xh-font-weight-medium));
   }
 
-  [data-scope='checkbox-group'][data-part='trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* 只读与禁用会同时出现在 trigger 上（连接层两个属性各写各的）：只读收回整行的悬停 / 按下面与手型，
+     显式排掉禁用，否则禁用的 not-allowed 被只读的 default 盖掉 */
+  [data-scope='checkbox-group'][data-part='select-all-trigger'][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;
   }
 
-  [data-scope='checkbox-group'][data-part='trigger'][data-disabled] {
-    color: var(--xh-checkbox-group-trigger-fg-disabled, var(--xh-fg-disabled));
-    cursor: not-allowed;
-  }
+  /* 家族 row 档在粗指针下用 ::after 把热区扩到 44px 高：条目按 24px 行 + 8px 间距密排，热区会压进相邻条目 2px、
+     指针落错行，A 档 24px 由 xs 地板保住（两者都不在 coarse-target 的 B 档名单）；勾中 / 半选时全选格的 ::after
+     是叠在方框上的字形，家族的热区 translate 会把它拖走，钉回原位（同 transfer select-all-trigger） */
+  @media (pointer: coarse) {
+    [data-scope='checkbox-group'][data-part='item']::after,
+    [data-scope='checkbox-group'][data-part='select-all-trigger']::after {
+      min-block-size: 0;
+    }
 
-  /* 只读与禁用会同时出现在 trigger 上（连接层两个属性各写各的），
-     同权重下后写的赢，所以这里必须显式排掉禁用，否则禁用的手势指示被只读盖掉 */
-  [data-scope='checkbox-group'][data-part='trigger'][data-readonly]:not([data-disabled]) {
-    cursor: default;
+    [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），
@@ -234,7 +353,36 @@
   [data-scope='checkbox-group'][data-part='root'][hidden],
   [data-scope='checkbox-group'][data-part='item'][hidden],
   [data-scope='checkbox-group'][data-part='indicator'][hidden],
-  [data-scope='checkbox-group'][data-part='trigger'][hidden] {
+  [data-scope='checkbox-group'][data-part='select-all-trigger'][hidden] {
     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'],
+    [data-scope='checkbox-group'][data-part='select-all-trigger'][data-state='checked']::before {
+      border-width: var(--xh-stroke-thick);
+    }
+
+    [data-scope='checkbox-group'][data-part='select-all-trigger'][data-state='indeterminate']::before {
+      border-width: var(--xh-stroke-thick);
+      border-style: dashed;
+    }
+  }
 }