@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/checkbox-group.css

@@ -0,0 +1,358 @@
+/*
+ * 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';
+@import '../family/check-mark.css';
+@import '../family/choice-card.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-checkbox-group {
+    --xh-checkbox-group-skin: 1;
+  }
+
+  /* 组容器：label、trigger、条目都是它的直接子节点，排布方式只能读 data-orientation——
+     连接层明说了 role=group 不接受 aria-orientation，那个属性它根本没输出 */
+  .xh-scope-checkbox-group[data-part='root'] {
+    /* 尺寸档只换这四个私有槽，条目、方框与全选格都从 root 继承它们，
+       换档不必给每个部件各写一条选择器。方框与字形照 checkbox 的档位走，
+       单体与集合里的同一枚方框必须一样大；条目文字是控件文字，随档取 --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);
+    --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));
+
+    /* 勾中的填色随语气走，与独立 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));
+    /* 方框是字段家族的控制盒（字段静息形态）：透明底 + --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，同组条目之间也是同一档紧密关系 */
+    display: flex;
+    gap: var(--xh-checkbox-group-gap, var(--xh-space-2));
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  .xh-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);
+  }
+
+  .xh-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 时不能靠默认值兜底 */
+  .xh-scope-checkbox-group[data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+    /* 条目按内容收宽。竖排下 flex 子项默认拉伸，点击区会一路延伸到文字右侧的空白处，
+       用户点在离文字很远的地方也能翻转选项 */
+    align-items: flex-start;
+  }
+
+  .xh-scope-checkbox-group[data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  /* card 形态：卡片撑满竖排的一列；横排时各卡等分一行、按内容等高，窄到放不下两张就折到下一行 */
+  .xh-scope-checkbox-group[data-part='root'][data-variant='card'] {
+    align-items: stretch;
+  }
+
+  .xh-scope-checkbox-group[data-part='root'][data-variant='card'][data-orientation='horizontal']
+    > .xh-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 档 */
+  .xh-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));
+    font-weight: var(--xh-checkbox-group-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+  }
+
+  /* label 自己不带任何状态属性，整组禁用只写在 root 上，只能从 root 往下够 */
+  .xh-scope-checkbox-group[data-part='root'][data-disabled]
+    .xh-scope-checkbox-group[data-part='label'] {
+    color: var(--xh-checkbox-group-label-fg-disabled, var(--xh-fg-subtle));
+  }
+
+  /* 条目是「方框 + 文案」的整行命中区：接 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，
+     这里不立基准的话，原生校验气泡会飘到页面上离该条目很远的地方 */
+  .xh-scope-checkbox-group[data-part='item'] {
+    --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);
+
+    position: relative;
+    /* row 档铺满容器（inline-size: 100%）会把竖排的命中区拉到整行空白处、横排 wrap 也塌：
+       沿用「条目按内容收宽」的既有决定 */
+    inline-size: auto;
+    /* ghost 的 1px 透明边位会把方框列相对组标题错开 1px：边归零，几何保持不变 */
+    border-width: 0;
+  }
+
+  /* 只读整组都改不动，但不是禁用：颜色照常，把整行的悬停 / 按下面与"可点"这个暗示一起收回来。
+     家族的 :hover / 按压块不排 readonly，只能从槽上收回；排掉禁用项是因为这条选择器权重高过家族的禁用块，
+     不排就会把 not-allowed 覆盖回 default */
+  .xh-scope-checkbox-group[data-part='root'][data-readonly]
+    .xh-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;
+    --xh-action-cursor-hover: default;
+    --xh-action-cursor-pressed: default;
+    --xh-action-cursor-focus-visible: default;
+  }
+
+  /* 全选格与条目格共用同一套盒子，并成一条规则写：分开写迟早只改到一半，两个方框就此走形。
+     尺寸与选中态照 checkbox 的 root 搬，同一份视觉语言在单体与集合里必须一致。
+     trigger 那格没有对应的角色节点（anatomy 到 trigger 为止），只能由伪元素补出来 */
+  .xh-scope-checkbox-group[data-part='indicator'],
+  .xh-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-_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-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);
+    /* 方框不缩放（行级只换面），过渡只有底与描边；按下走 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);
+  }
+
+  /* content 只能给伪元素，绝不能并进上面那条：content 落在普通元素上会顶掉它的全部子节点，
+     indicator 里作者写的图标就此消失 */
+  .xh-scope-checkbox-group[data-part='select-all-trigger']::before {
+    content: '';
+  }
+
+  /* 悬停整行时未勾选的方框描边升一档（字段静息 → hover 的同一条阶梯）；
+     勾中的方框描边与底同色，悬停不换描边——填色本身已经在表达状态 */
+  @media (hover: hover) {
+    .xh-scope-checkbox-group[data-part='root']:not([data-disabled]):not([data-readonly]):not([data-invalid])
+      .xh-scope-checkbox-group[data-part='item']:not([data-disabled]):hover
+      .xh-scope-checkbox-group[data-part='indicator']:not([data-state='checked']),
+    .xh-scope-checkbox-group[data-part='root']:not([data-disabled]):not([data-readonly]):not([data-invalid])
+      .xh-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 都算"有值"，共用同一副填色 */
+  .xh-scope-checkbox-group[data-part='indicator'][data-state='checked'],
+  .xh-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 槽的同一来源换面、不缩放——行按下是 200，
+     坐在上面的方框到 300（行以 --xh-action-host-bg-pressed 声明自己是方框的承载面，桥接槽只写不读，
+     方框读的是喂给它的那支私有槽），勾中的换到语气的 active 档；
+     与家族按压块同一时间线（按下 --xh-motion-duration-press，释放同走 micro） */
+  .xh-scope-checkbox-group[data-part='root']:not([data-readonly])
+    .xh-scope-checkbox-group[data-part='item']:not([data-disabled]):is(:active, [data-pressed])
+    .xh-scope-checkbox-group[data-part='indicator'],
+  .xh-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);
+  }
+
+  .xh-scope-checkbox-group[data-part='root']:not([data-readonly])
+    .xh-scope-checkbox-group[data-part='item']:not([data-disabled]):is(:active, [data-pressed])
+    .xh-scope-checkbox-group[data-part='indicator'][data-state='checked'],
+  .xh-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)));
+  }
+
+  /* 方框里的勾与全选格的三态标记（checked 打勾、indeterminate 打横杠、unchecked 留空）由勾选标记配方画：
+     常驻、按状态淡变并轻缩放。条目的方框是真实节点，标记是它的 ::before；全选格的 anatomy 到 trigger
+     为止，方框只能是行首那颗 ::before，标记是 ::after、叠在方框正中——两支桥接槽写在 trigger 上 */
+
+  /* 校验失败标在每个方框上：root 上的 data-invalid 是唯一出处，条目自己不带这个属性 */
+  .xh-scope-checkbox-group[data-part='root'][data-invalid]
+    .xh-scope-checkbox-group[data-part='indicator'] {
+    border-color: var(--xh-checkbox-group-indicator-border-invalid, var(--xh-border-invalid));
+  }
+
+  /* 禁用：--xh-border-default 描边 + --xh-bg-subtle 底 + --xh-fg-disabled 字形，不靠 opacity */
+  .xh-scope-checkbox-group[data-part='root'][data-disabled]
+    .xh-scope-checkbox-group[data-part='indicator'],
+  .xh-scope-checkbox-group[data-part='item'][data-disabled]
+    .xh-scope-checkbox-group[data-part='indicator'],
+  .xh-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));
+  }
+
+  /* 全选格的标记画在 ::after 上，禁用色经桥接槽给，与条目方框里置灰的勾同色 */
+  .xh-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));
+  }
+
+  .xh-scope-checkbox-group[data-part='item-text'] {
+    color: inherit;
+    user-select: none;
+  }
+
+  /* 卡片的文案是卡的标题：取标签字重，与说明拉开层级 */
+  .xh-scope-checkbox-group[data-part='item'][data-xh-choice-card] > .xh-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 / 正文行高，不随选中与语气换色；落在文案下方同一列。
+     列表形态的条目带了说明时同样排成两行，行首的方框对齐第一行 */
+  .xh-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;
+  }
+
+  .xh-scope-checkbox-group[data-part='item']:not([data-xh-choice-card]):has(> .xh-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));
+  }
+
+  .xh-scope-checkbox-group[data-part='item'][data-disabled] > .xh-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 当定位基准 */
+  .xh-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 内的小方框（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);
+    /* 勾选标记叠在行首方框正中：方框边长与标记色交给配方 */
+    --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;
+    border-width: 0;
+    font-weight: var(--xh-checkbox-group-select-all-trigger-font-weight, var(--xh-font-weight-medium));
+  }
+
+  /* 只读与禁用会同时出现在 trigger 上（连接层两个属性各写各的）：只读收回整行的悬停 / 按下面与手型，
+     显式排掉禁用，否则禁用的 not-allowed 被只读的 default 盖掉 */
+  .xh-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;
+  }
+
+  /* 家族 row 档在粗指针下用 ::after 把热区扩到 44px 高：条目按 24px 行 + 8px 间距密排，热区会压进相邻条目 2px、
+     指针落错行，A 档 24px 由 xs 地板保住（两者都不在 coarse-target 的 B 档名单）；全选格的 ::after 是叠在方框上的
+     勾选标记，热区由勾选标记配方逐项钉回 */
+  @media (pointer: coarse) {
+    .xh-scope-checkbox-group[data-part='item']::after {
+      min-block-size: 0;
+    }
+  }
+
+  /* 表单出口：连接层已经把整套视觉隐藏写进内联 style（absolute + 1px + clip-path），
+     这里绝不能再补 display:none——那份输入必须留在布局里，原生校验提示要有处可贴。
+     只补一条不吃指针，免得它挡住条目的点击 */
+  .xh-scope-checkbox-group[data-part='hidden-input'] {
+    pointer-events: none;
+  }
+
+  /* 上面凡是给了 display 的角色节点都要补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
+     不补的话作者给节点加 hidden 后它照样显示 */
+  .xh-scope-checkbox-group[data-part='root'][hidden],
+  .xh-scope-checkbox-group[data-part='item'][hidden],
+  .xh-scope-checkbox-group[data-part='indicator'][hidden],
+  .xh-scope-checkbox-group[data-part='select-all-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 强制色：真实描边保留方框，状态字形的系统前景由勾选标记配方给 */
+
+  @media print {
+    .xh-scope-checkbox-group[data-part='indicator'][data-state='checked'],
+    .xh-scope-checkbox-group[data-part='select-all-trigger'][data-state='checked']::before {
+      border-width: var(--xh-stroke-thick);
+    }
+
+    .xh-scope-checkbox-group[data-part='select-all-trigger'][data-state='indeterminate']::before {
+      border-width: var(--xh-stroke-thick);
+      border-style: dashed;
+    }
+  }
+}

package/dist/css/checkbox.css

@@ -0,0 +1,257 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 checkbox 样式。 */
+
+@import '../family/action-control.css';
+@import '../family/check-mark.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-checkbox {
+    --xh-checkbox-skin: 1;
+  }
+
+  .xh-scope-checkbox[data-part='root'] {
+    /* 尺寸档只换方框边长这一个私有槽，勾的字号按边长的比例跟着走；
+       指示器从 root 继承这两个槽，换档不必给每个部件各写一条选择器 */
+    --xh-_checkbox-box: var(--xh-control-indicator-md);
+    --xh-_checkbox-glyph: calc(var(--xh-_checkbox-box) * 0.75);
+    /* 作者塞进指示符槽的图标和兜底字形共用盒比例；显式 icon-size 仍可覆盖。 */
+    --xh-icon-size: var(--xh-checkbox-icon-size, var(--xh-_checkbox-glyph));
+
+    /* 选中态是小面积控件边界，使用保证 3:1 的语气 control 色；没写 tone 时退回品牌底。 */
+    --xh-_checkbox-accent: var(--xh-_tone-border-control, var(--xh-bg-brand));
+
+    /* 实心底上的勾与横杠，同样没写 data-tone 时退回原来的品牌底前景色 */
+    --xh-_checkbox-on-accent: var(--xh-_tone-on, var(--xh-fg-on-brand));
+
+    /* 方框接 Action Control icon 档（定尺方框）：盒型、悬停 / 按下 / 禁用面、0.97 缩放与换底、粗指针热区、
+       焦点环由家族配方给，这里只把使用者槽映射到桥接槽。面按字段静息形态取值：透明底 +
+       --xh-border-control 描边 + 无影，不消费海拔与顶光；悬停只把描边升一档，底不动；按下换到 200 档中性面
+       （白底承载）；边长随 --xh-control-indicator-* 走，不取家族的 profile 尺寸。
+       常态 / 勾中 / 校验失败 / 只读只换下面四支私有槽，桥接槽的映射写一次 */
+    --xh-_checkbox-bg: var(--xh-checkbox-bg, transparent);
+    --xh-_checkbox-bg-pressed: var(--xh-checkbox-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-_checkbox-border: var(--xh-checkbox-border, var(--xh-border-control));
+    --xh-_checkbox-border-hover: var(--xh-checkbox-border-hover, var(--xh-border-control-hover));
+
+    --xh-action-visual-size: var(--xh-_checkbox-box);
+    --xh-action-min-inline-size: var(--xh-_checkbox-box);
+    --xh-action-radius: var(--xh-checkbox-radius, var(--xh-shape-inset));
+    --xh-action-bg-rest: var(--xh-_checkbox-bg);
+    --xh-action-bg-hover: var(--xh-_checkbox-bg);
+    --xh-action-bg-pressed: var(--xh-_checkbox-bg-pressed);
+    --xh-action-bg-focus-visible: var(--xh-_checkbox-bg);
+    --xh-action-bg-disabled: var(--xh-checkbox-bg-disabled, var(--xh-bg-subtle));
+    --xh-action-border-rest: var(--xh-_checkbox-border);
+    --xh-action-border-hover: var(--xh-_checkbox-border-hover);
+    --xh-action-border-pressed: var(--xh-_checkbox-border-hover);
+    --xh-action-border-focus-visible: var(--xh-_checkbox-border);
+    --xh-action-border-disabled: var(--xh-checkbox-border-disabled, var(--xh-border-default));
+    --xh-action-fg-rest: var(--xh-checkbox-fg, var(--xh-_checkbox-on-accent));
+    --xh-action-fg-hover: var(--xh-checkbox-fg, var(--xh-_checkbox-on-accent));
+    --xh-action-fg-pressed: var(--xh-checkbox-fg, var(--xh-_checkbox-on-accent));
+    --xh-action-fg-focus-visible: var(--xh-checkbox-fg, var(--xh-_checkbox-on-accent));
+    --xh-action-fg-disabled: var(--xh-checkbox-fg-disabled, var(--xh-fg-disabled));
+    --xh-action-shadow-rest: var(--xh-checkbox-shadow, none);
+    --xh-action-shadow-hover: var(--xh-checkbox-shadow, none);
+    --xh-action-shadow-pressed: var(--xh-checkbox-shadow, none);
+    --xh-action-shadow-focus-visible: var(--xh-checkbox-shadow, none);
+    --xh-action-shadow-disabled: var(--xh-checkbox-shadow, none);
+
+    /* 家族的 icon 档不写 padding-block；UA 给 button 的 1px 上下内距会把 16px 盒里的勾挤扁 */
+    padding: 0;
+  }
+
+  /* 半选与全选同样是「有值」，方框都得填上：
+     只填全选的话，半选那条横杠是实心底上的前景色，压在同色画布上等于没画。
+     面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的。
+     勾中的方框描边与底同色，悬停不换描边——填色本身已经在表达状态；按下换到语气的 active 档 */
+  .xh-scope-checkbox[data-part='root'][data-state='checked'],
+  .xh-scope-checkbox[data-part='root'][data-state='indeterminate'] {
+    --xh-_checkbox-bg: var(--xh-checkbox-bg-checked, var(--xh-_checkbox-accent));
+    --xh-_checkbox-bg-pressed: var(--xh-checkbox-bg-checked-pressed, var(--xh-_tone-active, var(--xh-bg-brand-active)));
+    --xh-_checkbox-border: var(--xh-checkbox-border-checked, var(--xh-_checkbox-accent));
+    --xh-_checkbox-border-hover: var(--xh-checkbox-border-checked, var(--xh-_checkbox-accent));
+    --xh-action-ring-color-focus-visible: currentColor;
+  }
+
+  /* 高对比轴把未选中边界提到 strong；有值两态仍由实心语气底与配对勾形表达。 */
+  :where([data-contrast='more']) .xh-scope-checkbox[data-part='root'][data-state='unchecked'] {
+    --xh-_checkbox-border: var(--xh-checkbox-border, var(--xh-border-strong));
+  }
+
+  /* 校验失败：方框描边转警示色，悬停与按下都不换回控件边。未勾时只有描边，勾上后填充仍走语气色，
+     两者不打架——描边压在 checked 规则之后，选择器同特指度靠书写顺序取胜 */
+  .xh-scope-checkbox[data-part='root'][data-invalid],
+  .xh-scope-checkbox[data-part='root'][data-state='checked'][data-invalid],
+  .xh-scope-checkbox[data-part='root'][data-state='indeterminate'][data-invalid] {
+    --xh-_checkbox-border: var(--xh-checkbox-border-invalid, var(--xh-border-invalid));
+    --xh-_checkbox-border-hover: var(--xh-checkbox-border-invalid, var(--xh-border-invalid));
+  }
+
+  /* 文字随方框一起转警示色：给了默认插槽时外层是 <label>，方框自己的描边够不到那段文字 */
+  .xh-scope-checkbox[data-part='label'][data-invalid],
+  .xh-scope-checkbox[data-part='text'][data-invalid] {
+    color: var(--xh-checkbox-fg-invalid, var(--xh-fg-danger));
+  }
+
+  /* 悬停标签文字时也让控制盒回应，整行可点不再只有移到 16px 小盒上才看得出来：
+     指针落在方框上时由家族的悬停块换到 --xh-action-border-hover，落在标签文字上时这里补同一档；
+     未勾选的方框描边升一档（字段静息 → hover 的同一条阶梯），勾中 / 校验失败的方框由上面的映射钉住不换 */
+  @media (hover: hover) {
+    .xh-scope-checkbox[data-part='label']:not([data-disabled]):not([data-readonly]):hover
+      .xh-scope-checkbox[data-part='root'] {
+      border-color: var(--xh-_checkbox-border-hover);
+    }
+  }
+
+  /* 只读改不动值，但不是禁用：颜色与不透明度都照常，只把「可点」这个暗示与悬停 / 按下的回应一起收回来。
+     方框与整行文字一起收——给了默认插槽时外层是 <label>，只收方框的话文字那半仍摆着手型。
+     排掉禁用是因为这条选择器权重高过禁用那条，不排就会把 not-allowed 覆盖回 default */
+  .xh-scope-checkbox[data-part='root'][data-readonly]:not([data-disabled]) {
+    --xh-_checkbox-bg-pressed: var(--xh-_checkbox-bg);
+    --xh-_checkbox-border-hover: var(--xh-_checkbox-border);
+    --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;
+  }
+
+  .xh-scope-checkbox[data-part='label'][data-readonly]:not([data-disabled]) {
+    cursor: default;
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  .xh-scope-checkbox[data-part='root'][data-size='sm'] {
+    --xh-_checkbox-box: var(--xh-control-indicator-sm);
+  }
+
+  .xh-scope-checkbox[data-part='root'][data-size='lg'] {
+    --xh-_checkbox-box: var(--xh-control-indicator-lg);
+  }
+
+  /* 鼠标落点：方框只有一档指示符那么大，命中区靠一枚绝对定位的伪元素往外扩，
+     盒子本身一动不动——放大盒子会把并排的文字挤开。常态外扩 6px，最小的 sm 档由 12px 到 24px；
+     粗指针下的 44px 热区由家族 icon 档的 ::after 给，这里只把起点交还 */
+  .xh-scope-checkbox[data-part='root']::after {
+    content: '';
+    position: absolute;
+    inset: calc(-1 * var(--xh-space-1_5));
+  }
+
+  /* 粗指针：家族在同一个 ::after 上写 44×44 的盒、50% 起点与 -50% 平移把它钉在方框中心。
+     上面那条 inset 负值特指度更高，留着的话起点被钉在 -6px、再被家族的平移拉走半个盒，
+     热区的中心落到方框左上角外面，方框右下大半摸不着 */
+  @media (pointer: coarse) {
+    .xh-scope-checkbox[data-part='root']::after {
+      inset-block: 50% auto;
+      inset-inline: 50% auto;
+    }
+  }
+
+  /* 指示器铺满方框。勾与半选杠由勾选标记配方画在它的 ::before 上（常驻、按状态淡变并轻缩放）；
+     作者往部件里塞了自己的图形时配方不画 */
+  .xh-scope-checkbox[data-part='indicator'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 100%;
+    block-size: 100%;
+    line-height: var(--xh-leading-none);
+    font-size: var(--xh-_checkbox-glyph);
+    pointer-events: none;
+  }
+
+  /* 半选横杠另有一支前景槽，缺省与勾同色 */
+  .xh-scope-checkbox[data-part='indicator'][data-state='indeterminate'] {
+    --xh-check-mark-fg: var(--xh-checkbox-indicator-fg, var(--xh-_checkbox-on-accent));
+  }
+
+  /* 禁用时横杠也走置灰色 */
+  .xh-scope-checkbox[data-part='root'][data-disabled]
+    .xh-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-*（控件字号随档）；
+     行高取正文档，长文字可以自然换行 */
+  .xh-scope-checkbox[data-part='label'] {
+    --xh-_checkbox-label-gap: var(--xh-control-gap-md);
+    --xh-_checkbox-label-font-size: var(--xh-control-font-md);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-checkbox-label-gap, var(--xh-_checkbox-label-gap));
+    color: var(--xh-checkbox-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-checkbox-label-font-size, var(--xh-_checkbox-label-font-size));
+    line-height: var(--xh-checkbox-label-leading, var(--xh-leading-normal));
+    cursor: pointer;
+  }
+
+  .xh-scope-checkbox[data-part='label'][data-size='sm'] {
+    --xh-_checkbox-label-gap: var(--xh-control-gap-sm);
+    --xh-_checkbox-label-font-size: var(--xh-control-font-sm);
+  }
+
+  .xh-scope-checkbox[data-part='label'][data-size='lg'] {
+    --xh-_checkbox-label-gap: var(--xh-control-gap-lg);
+    --xh-_checkbox-label-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 禁用标签色统一 --xh-fg-subtle */
+  .xh-scope-checkbox[data-part='label'][data-disabled] {
+    color: var(--xh-checkbox-label-fg-disabled, var(--xh-fg-subtle));
+    cursor: not-allowed;
+  }
+
+  .xh-scope-checkbox[data-part='text'] {
+    min-inline-size: 0;
+    color: inherit;
+    user-select: none;
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-checkbox[data-part='root'][hidden],
+  .xh-scope-checkbox[data-part='indicator'][hidden],
+  .xh-scope-checkbox[data-part='label'][hidden] {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    /* 真实 border 保住盒，勾与半选横杠的系统前景由配方给；禁用写在 root 上，指示器自己不带，这里补置灰。
+       盒就是 root 本身：悬停与按下时家族把它涂成 Highlight，勾跟着换 HighlightText */
+    .xh-scope-checkbox[data-part='root'][data-disabled]
+      .xh-scope-checkbox[data-part='indicator']:empty::before {
+      background-color: GrayText;
+    }
+
+    .xh-scope-checkbox[data-part='root']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed])
+      .xh-scope-checkbox[data-part='indicator']:empty::before {
+      background-color: HighlightText;
+    }
+  }
+
+  @media print {
+    /* 打印默认丢底色：勾上与半选两档全靠实心底加底上那枚浅色标记表达，落到纸上与没勾的一模一样
+       （标记本身也是一块 background，同样印不出来）。改用描边这条印得出来的通道：
+       两档各加粗一级把方框分出来，半选再换成虚线，三档在纸上各不相同。
+       描边吃进定尺盒里（reset 层已把 box-sizing 收成 border-box），方框边长不变。 */
+    .xh-scope-checkbox[data-part='root'][data-state='checked'] {
+      border-width: var(--xh-stroke-thick);
+    }
+
+    .xh-scope-checkbox[data-part='root'][data-state='indeterminate'] {
+      border-width: var(--xh-stroke-thick);
+      border-style: dashed;
+    }
+  }
+}