@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/approval.css

@@ -0,0 +1,525 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 approval 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+/* 独立皮肤同时传递引入授权行与两颗钮的动作控件配方，full bundle 递归去重。 */
+@import '../family/action-control.css';
+@import '../family/loading-ring.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-approval {
+    --xh-approval-skin: 1;
+  }
+
+  /* 一块要人做决定的静态内容面：--xh-border-default 描边 + surface 底 + 无影（边界只由描边承担），
+     作者打了语气时描边染成语气色作强调（下面那条），判定落定后描边退回中性 */
+  .xh-scope-approval[data-part='root'] {
+    /* 作者塞进标题 / 说明 / 结果条里的图标按档取尺，缺省 md；勾选记号另按盒比例量 */
+    --xh-_approval-icon-size: var(--xh-glyph-size-md);
+    --xh-icon-size: var(--xh-approval-icon-size, var(--xh-_approval-icon-size));
+
+    /* 尺寸缺省档：不写 data-size 时的取值。三档都只写这批私有槽，
+       公开槽留在读处当首选，作者在祖先上设的覆盖才赢得过档位声明 */
+    --xh-_approval-gap: var(--xh-space-3);
+    --xh-_approval-p: var(--xh-space-4);
+    --xh-_approval-action-h: var(--xh-control-h-md);
+    --xh-_approval-action-px: var(--xh-control-px-md);
+    --xh-_approval-item-font-size: var(--xh-control-font-md);
+    --xh-_approval-note-font-size: var(--xh-control-font-md);
+
+    /* 定位基准：待决的呼吸点钉在右上角 */
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-approval-gap, var(--xh-_approval-gap));
+    padding: var(--xh-approval-p, var(--xh-_approval-p));
+    border: var(--xh-stroke-thin) solid var(--xh-approval-border, var(--xh-border-default));
+    border-radius: var(--xh-approval-radius, var(--xh-shape-surface));
+    background: var(--xh-approval-bg, var(--xh-bg-surface));
+    box-shadow: var(--xh-approval-shadow, none);
+    /* 判定落定时描边随语气换色：属状态换色，与别处悬停、选中、校验的换色同一档 */
+    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 卡片出现时滑入；落在首帧就在的列表条目里（历史消息）时直接呈现，不跟着整屏一起入场 */
+  .xh-scope-approval[data-part='root']:not([data-scope][data-part='item'][data-instant] :where(.xh-scope-approval)) {
+    animation: xh-item-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
+  .xh-scope-approval[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 待决的呼吸点：钉在右上角（RTL 下左上），不占作者排的版面；颜色随语气，没写语气时取警示色。
+     呼吸只表达「正在进行、需要被察觉」：明暗与缩放的起伏持续到判定落定，外扩光环同周期播 3 轮后停下；
+     判过了连接层就收起它，由结果那一格接着表达 */
+  .xh-scope-approval[data-part='pending-indicator'] {
+    position: absolute;
+    inset-block-start: var(--xh-approval-p, var(--xh-_approval-p));
+    inset-inline-end: var(--xh-approval-p, var(--xh-_approval-p));
+    inline-size: var(--xh-approval-pending-indicator-size, var(--xh-space-2));
+    block-size: var(--xh-approval-pending-indicator-size, var(--xh-space-2));
+    border-radius: var(--xh-approval-pending-indicator-radius, var(--xh-shape-circle));
+    background: var(--xh-approval-pending-indicator-color, var(--xh-_tone, var(--xh-fg-warning)));
+    animation: xh-breathe var(--xh-motion-loop-breathe) var(--xh-motion-ease-breathe) infinite;
+  }
+
+  .xh-scope-approval[data-part='pending-indicator']::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: inherit;
+    opacity: 0;
+    pointer-events: none;
+    animation: xh-breathe-halo var(--xh-motion-loop-breathe) var(--xh-motion-ease-breathe) 3;
+  }
+
+  /* 减弱动效：两者都停，圆点停在满不透明度，光环不出现 */
+  @media (prefers-reduced-motion: reduce) {
+    .xh-scope-approval[data-part='pending-indicator'],
+    .xh-scope-approval[data-part='pending-indicator']::after {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) .xh-scope-approval[data-part='pending-indicator'],
+  :where([data-motion='reduce']) .xh-scope-approval[data-part='pending-indicator']::after {
+    animation: none;
+  }
+
+  .xh-scope-approval[data-part='pending-indicator'][hidden] {
+    display: none;
+  }
+
+  /* 语气只染描边：作者定的强调，待决时把这块面从正文里提出来 */
+  .xh-scope-approval[data-part='root'][data-tone] {
+    border-color: var(--xh-approval-border, var(--xh-_tone, var(--xh-border-default)));
+  }
+
+  /* 判过了就不再抢注意力：语气色边退回中性描边（根面外边不取 subtle）。
+     排在语气那条之后：同等特指度，落定要盖得过语气 */
+  .xh-scope-approval[data-part='root']:not([data-state='pending']) {
+    border-color: var(--xh-approval-border-settled, var(--xh-border-default));
+  }
+
+  /* —— 形态 —— */
+  /* 缺省档即 outline，写在上面那条基础规则里。
+     两档排在落定那条之后：它们把描边整个撤掉，排在前面会被落定那条按同等特指度盖回来 */
+  /* 底色分区：描边让位给底色，闸门嵌在别人的面里时不再多一圈线；
+     淡底承载面向授权行与拒绝钮下发 hover 200 → pressed 300 */
+  .xh-scope-approval[data-part='root'][data-variant='subtle'] {
+    --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
+
+    border-color: transparent;
+    background: var(--xh-approval-bg, var(--xh-bg-subtle));
+  }
+
+  /* 无壳内联：卡中卡时不再自带一张面，跟着外层的底走 */
+  .xh-scope-approval[data-part='root'][data-variant='ghost'] {
+    border-color: transparent;
+    background: none;
+    box-shadow: none;
+  }
+
+  /* 标题走 Surface 标题档 14/600 */
+  .xh-scope-approval[data-part='title'] {
+    display: block;
+    margin: 0;
+    color: var(--xh-approval-title-fg, var(--xh-fg-default));
+    font-size: var(--xh-approval-title-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-approval-title-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-tight);
+  }
+
+  .xh-scope-approval[data-part='title'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-approval[data-part='description'] {
+    display: block;
+    margin: 0;
+    color: var(--xh-approval-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-approval-description-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-leading-normal);
+  }
+
+  .xh-scope-approval[data-part='description'][hidden] {
+    display: none;
+  }
+
+  /* 视觉隐藏的播报区：不能 display:none，那样读屏就取不到它了 */
+  .xh-scope-approval[data-part='live-region'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .xh-scope-approval[data-part='group'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-approval-group-gap, var(--xh-space-1));
+  }
+
+  .xh-scope-approval[data-part='group'][hidden] {
+    display: none;
+  }
+
+  /* 一项授权：整行可点、可聚焦，勾选记号在左。盒型、悬停 / 按下 / 禁用面由 Action Control 的 row 档给
+     （ghost 形态：白底承载 hover 100 → pressed 200，按下只换面不缩放；禁用守卫认 data-disabled），
+     这里只把使用者槽映射到桥接槽，内衬与间距沿用本组件的档位。
+     行高不吃家族的单行档：row 档允许换行、高度随内容，一条会折行的授权文案走正文行高 */
+  .xh-scope-approval[data-part='item'] {
+    --xh-action-gap: var(--xh-approval-item-gap, var(--xh-space-1_5));
+    --xh-action-padding-inline: var(--xh-approval-item-px, var(--xh-space-2));
+    --xh-action-padding-block: var(--xh-approval-item-py, var(--xh-space-1));
+    --xh-action-radius: var(--xh-approval-item-radius, var(--xh-_action-profile-radius));
+    --xh-action-font-size: var(--xh-approval-item-font-size, var(--xh-_approval-item-font-size));
+    --xh-action-bg-hover: var(--xh-approval-item-bg-hover, var(--xh-_action-variant-bg-hover));
+
+    line-height: var(--xh-leading-normal);
+  }
+
+  .xh-scope-approval[data-part='item'][hidden] {
+    display: none;
+  }
+
+  /* 勾选记号：方框 + 选中态填色，纯装饰不进可访问名。
+     勾按盒比例量（与 Checkbox 同一比例），作者塞进来的图标读同一把尺，不随根上的整档图标放大撑破盒 */
+  .xh-scope-approval[data-part='item-indicator'] {
+    --xh-_approval-indicator-glyph: calc(var(--xh-approval-indicator-size, var(--xh-control-indicator-size)) * 0.75);
+    --xh-icon-size: var(--xh-approval-indicator-icon-size, var(--xh-_approval-indicator-glyph));
+
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    border: var(--xh-stroke-thin) solid var(--xh-approval-indicator-border, var(--xh-border-control));
+    border-radius: var(--xh-approval-indicator-radius, var(--xh-shape-inset));
+    color: var(--xh-approval-indicator-fg, var(--xh-fg-on-brand));
+    inline-size: var(--xh-approval-indicator-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-approval-indicator-size, var(--xh-control-indicator-size));
+    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),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-approval[data-part='item-indicator'][hidden] {
+    display: none;
+  }
+
+  /* 没写内容就由皮肤画勾；作者往部件里塞了自己的图形，这条规则即不命中 */
+  .xh-scope-approval[data-part='item-indicator']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    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;
+  }
+
+  .xh-scope-approval[data-part='item-indicator'][data-state='checked'] {
+    border-color: var(--xh-approval-indicator-border-checked, var(--xh-bg-brand));
+    background: var(--xh-approval-indicator-bg-checked, var(--xh-bg-brand));
+  }
+
+  /* 没勾上时把勾隐去而不是撤掉：盒子留在原位，翻面时整行不跳 */
+  .xh-scope-approval[data-part='item-indicator'][data-state='unchecked'] {
+    color: transparent;
+  }
+
+  /* 勾上的那条读起来更重一档 */
+  .xh-scope-approval[data-part='item-text'] {
+    display: block;
+    flex: 1 1 auto;
+    color: var(--xh-approval-item-text-fg, var(--xh-fg-muted));
+  }
+
+  .xh-scope-approval[data-part='item'][data-state='checked'] [data-part='item-text']:where(.xh-scope-approval) {
+    color: var(--xh-approval-item-text-fg-checked, var(--xh-fg-default));
+  }
+
+  /* 排在勾选档之后：禁用项无论勾没勾都是禁用色 */
+  .xh-scope-approval[data-part='item'][data-disabled] [data-part='item-text']:where(.xh-scope-approval) {
+    color: var(--xh-fg-disabled);
+  }
+
+  .xh-scope-approval[data-part='item-text'][hidden] {
+    display: none;
+  }
+
+  /* 备注：附在判定上的一句自由文本，占满整行。框照字段外壳：字段淡底 + 控件描边，悬停描边升一档 */
+  .xh-scope-approval[data-part='note'] {
+    display: block;
+    inline-size: 100%;
+    padding-inline: var(--xh-approval-note-px, var(--xh-space-2));
+    padding-block: var(--xh-approval-note-py, var(--xh-space-1_5));
+    border: var(--xh-stroke-thin) solid var(--xh-approval-note-border, var(--xh-border-control));
+    border-radius: var(--xh-approval-note-radius, var(--xh-shape-control));
+    background: var(--xh-approval-note-bg, var(--xh-bg-field));
+    color: var(--xh-approval-note-fg, var(--xh-fg-default));
+    font-family: inherit;
+    font-size: var(--xh-approval-note-font-size, var(--xh-_approval-note-font-size));
+    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);
+  }
+
+  .xh-scope-approval[data-part='note'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-approval[data-part='note']:hover:not(:disabled, :focus, [data-invalid]) {
+    border-color: var(--xh-approval-note-border-hover, var(--xh-border-strong));
+  }
+
+  /* 聚焦换承载面底 + 品牌描边，不画环：焦点由描边换色与底色差标出，强制色档补一圈 Highlight 环 */
+  .xh-scope-approval[data-part='note']:focus-within {
+    border-color: var(--xh-approval-note-border-focus, var(--xh-border-control-focus));
+    background: var(--xh-approval-note-bg-focus, var(--xh-bg-surface));
+  }
+
+  .xh-scope-approval[data-part='note']:focus-visible {
+    outline: none;
+  }
+
+  /* 要求写理由而空着就按了拒绝：换无效淡底 + 无效描边；焦点也已带到这里，聚焦时同样不画环 */
+  .xh-scope-approval[data-part='note'][data-invalid] {
+    border-color: var(--xh-approval-note-border-invalid, var(--xh-border-invalid));
+    background: var(--xh-approval-note-bg-invalid, var(--xh-bg-field-invalid));
+  }
+
+  .xh-scope-approval[data-part='note']:disabled {
+    border-color: var(--xh-approval-note-border-disabled, var(--xh-border-default));
+    background: var(--xh-approval-note-bg-disabled, var(--xh-bg-subtle));
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 剩余时间：等宽数字，逐秒跳字时不左右晃 */
+  .xh-scope-approval[data-part='timer'] {
+    display: block;
+    color: var(--xh-approval-timer-fg, var(--xh-fg-muted));
+    font-size: var(--xh-approval-timer-font-size, var(--xh-text-caption-size));
+    font-variant-numeric: tabular-nums;
+  }
+
+  .xh-scope-approval[data-part='timer'][hidden] {
+    display: none;
+  }
+
+  /* 判定结果条：判过了才露出，语气随判定走。与 Tag 的 sm 档同一副方签——control 圆角、块尺寸取 chip 档、竖向内衬为 0 */
+  .xh-scope-approval[data-part='result'] {
+    display: inline-flex;
+    align-self: flex-start;
+    align-items: center;
+    box-sizing: border-box;
+    gap: var(--xh-approval-result-gap, var(--xh-space-1));
+    min-block-size: var(--xh-approval-result-h, var(--xh-chip-h-sm));
+    padding-inline: var(--xh-approval-result-px, var(--xh-space-1_5));
+    padding-block: var(--xh-approval-result-py, 0);
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-approval-result-radius, var(--xh-shape-control));
+    background: var(--xh-approval-result-bg, var(--xh-_tone-subtle));
+    color: var(--xh-approval-result-fg, var(--xh-_tone-fg));
+    font-size: var(--xh-approval-result-font-size, var(--xh-text-caption-size));
+    font-weight: var(--xh-approval-result-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-control-indicator-md);
+  }
+
+  /* 落定结果弹出；落在首帧就在的列表条目里（历史消息）时直接呈现，不跟着整屏一起入场 */
+  .xh-scope-approval[data-part='result']:not([data-scope][data-part='item'][data-instant] :where(.xh-scope-approval)) {
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  .xh-scope-approval[data-part='result'][hidden] {
+    display: none;
+  }
+
+  /* 超时按拒绝收口，两者同档（连接层同投 danger 语气）：视觉上不该看着像第三种结果 */
+  .xh-scope-approval[data-part='result']:is([data-state='denied'], [data-state='expired']) {
+    background: var(--xh-approval-result-bg-denied, var(--xh-_tone-subtle));
+    color: var(--xh-approval-result-fg-denied, var(--xh-_tone-fg));
+  }
+
+  /* 动作行：两颗按钮靠右排，间距归库管。
+     一行排不下就折行：两颗钮的文案都不折行，靠右排的行溢出时是往行首那侧漫出去，
+     漫出去的那截既不产生横滚也回不来，折行是这一行唯一取得回来的形态。 */
+  .xh-scope-approval[data-part='footer'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--xh-approval-footer-gap, var(--xh-space-2));
+  }
+
+  .xh-scope-approval[data-part='footer'][hidden] {
+    display: none;
+  }
+
+  /* 两颗按钮是离散动作控件：盒几何、悬停 / 按下与 0.97 按压、焦点环、禁用与在途面全由 Action Control 的
+     text 档给，组件只映射既有使用者槽。批准走 solid 档：判定闸门里的主要动作，与 Button 缺省同为品牌实心；
+     拒绝走 outline 档：非 Button 的触发器缺省中性描边。
+     三档守卫由连接层投影：判定在途是 data-loading + aria-disabled（保住可聚焦，家族给在途面：底色不置灰、
+     指针 progress），必选项没勾满与落定是 data-disabled（家族给禁用面：置灰底、置灰字、not-allowed）。
+     两颗共用的几何与字号写在一起 */
+  .xh-scope-approval[data-part='approve-trigger'],
+  .xh-scope-approval[data-part='deny-trigger'] {
+    --xh-action-visual-size: var(--xh-approval-action-h, var(--xh-_approval-action-h));
+    --xh-action-padding-inline: var(--xh-approval-action-px, var(--xh-_approval-action-px));
+    --xh-action-radius: var(--xh-approval-action-radius, var(--xh-shape-control));
+    --xh-action-font-size: var(--xh-approval-action-font-size, var(--xh-text-label-size));
+
+    font-weight: var(--xh-approval-action-font-weight, var(--xh-text-label-weight));
+  }
+
+  /* 家族那条 display 会把 UA 的 [hidden]{display:none} 盖掉 */
+  .xh-scope-approval[data-part='approve-trigger'][hidden],
+  .xh-scope-approval[data-part='deny-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 批准钮：品牌实心，内顶高光把实心块顶出一道边，与拒绝那颗的描边同一档厚度（三态与在途同一支，
+     禁用面由家族收掉）；底 / 字与禁用底映到 solid 档的桥接槽 */
+  .xh-scope-approval[data-part='approve-trigger'] {
+    --xh-action-bg-rest: var(--xh-approval-approve-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-approval-approve-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-loading: var(--xh-approval-approve-bg, var(--xh-_action-variant-bg-loading));
+    --xh-action-bg-disabled: var(--xh-approval-approve-bg-off, var(--xh-_action-variant-bg-disabled));
+    --xh-action-fg-rest: var(--xh-approval-approve-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-approval-approve-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-approval-approve-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-loading: var(--xh-approval-approve-fg, var(--xh-_action-variant-fg-loading));
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: var(--xh-approval-approve-shadow, var(--xh-_highlight-tone));
+    --xh-action-shadow-hover: var(--xh-approval-approve-shadow, var(--xh-_highlight-tone));
+    --xh-action-shadow-pressed: var(--xh-approval-approve-shadow, var(--xh-_highlight-tone));
+    --xh-action-shadow-loading: var(--xh-approval-approve-shadow, var(--xh-_highlight-tone));
+  }
+
+  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的。
+     只对着还铺着实心底的那两档：按得动的常态，与判定在途那一档；
+     禁用档的底换成置灰底、字换成置灰色，环取过来就跟底一起糊了，那一档走公共层的环 */
+  .xh-scope-approval[data-part='approve-trigger']:not([data-disabled]) {
+    --xh-action-ring-color-focus-visible: currentColor;
+  }
+
+  /* 拒绝钮：中性描边，底 / 边 / 字与禁用面映到 outline 档的桥接槽（透明底 → 100 → 200；
+     落定后描边退回中性，不再像个能按的出口） */
+  .xh-scope-approval[data-part='deny-trigger'] {
+    --xh-action-bg-rest: var(--xh-approval-deny-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-approval-deny-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-disabled: var(--xh-approval-deny-bg-off, var(--xh-_action-variant-bg-disabled));
+    --xh-action-fg-rest: var(--xh-approval-deny-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-approval-deny-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-approval-deny-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-border-rest: var(--xh-approval-deny-border, var(--xh-_action-variant-border-rest));
+    --xh-action-border-disabled: var(--xh-approval-deny-border-off, var(--xh-_action-variant-border-disabled));
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: none;
+    --xh-action-shadow-hover: none;
+    --xh-action-shadow-pressed: none;
+  }
+
+  /* 判定在途：两颗钮那一行里转一枚圆环（指针 progress 由家族的在途面给）。
+     两颗钮此刻确实按不动，但按不动的理由是「你按的那一下正在走」，与「必选项没勾满」
+     的那档灰不是一回事；只留灰的话两种情形长得一模一样，用户读不出系统正在想。
+     所以在途这一档不置灰：颜色与对比度都保持原样，锁住只由圆环与指针说。
+     圆环挂在这一行上而不是某一颗钮上：连接层只拿到「有一条判定在途」，
+     拿不到是哪一颗按下的，画在两颗钮上会有一颗在说假话 */
+
+  /* 环由加载环配方画在这一行的 ::before 上（连接层投影 data-xh-loading-ring 与 data-loading），
+     随在途淡入淡出、转与停；直径取所在尺寸档的图标档，转速认使用者槽 */
+  .xh-scope-approval[data-part='footer'] {
+    --xh-_loading-ring-duration: var(--xh-approval-loading-duration, var(--xh-motion-loop-spin));
+  }
+
+  .xh-scope-approval[data-part='footer']::before {
+    content: '';
+    flex: none;
+    inline-size: var(--xh-_approval-icon-size);
+    block-size: var(--xh-_approval-icon-size);
+  }
+
+  /* 尺寸档改内衬、间距、按钮高度、行内字号与图标档 */
+  .xh-scope-approval[data-part='root'][data-size='sm'] {
+    --xh-_approval-icon-size: var(--xh-glyph-size-sm);
+    --xh-_approval-p: var(--xh-space-3);
+    --xh-_approval-gap: var(--xh-space-2);
+    --xh-_approval-action-h: var(--xh-control-h-sm);
+    --xh-_approval-action-px: var(--xh-control-px-sm);
+    --xh-_approval-item-font-size: var(--xh-control-font-sm);
+    --xh-_approval-note-font-size: var(--xh-control-font-sm);
+  }
+
+  .xh-scope-approval[data-part='root'][data-size='md'] {
+    --xh-_approval-icon-size: var(--xh-glyph-size-md);
+    --xh-_approval-p: var(--xh-space-4);
+    --xh-_approval-gap: var(--xh-space-3);
+    --xh-_approval-action-h: var(--xh-control-h-md);
+    --xh-_approval-action-px: var(--xh-control-px-md);
+    --xh-_approval-item-font-size: var(--xh-control-font-md);
+    --xh-_approval-note-font-size: var(--xh-control-font-md);
+  }
+
+  .xh-scope-approval[data-part='root'][data-size='lg'] {
+    --xh-_approval-icon-size: var(--xh-glyph-size-lg);
+    --xh-_approval-p: var(--xh-space-5);
+    --xh-_approval-gap: var(--xh-space-4);
+    --xh-_approval-action-h: var(--xh-control-h-lg);
+    --xh-_approval-action-px: var(--xh-control-px-lg);
+    --xh-_approval-item-font-size: var(--xh-control-font-lg);
+    --xh-_approval-note-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 强制色：底色会被系统背景吃掉，呼吸点改用系统前景色；备注框聚焦不画环、描边又被换成系统色，补一圈 Highlight 环 */
+  @media (forced-colors: active) {
+    .xh-scope-approval[data-part='pending-indicator'] {
+      background: CanvasText;
+    }
+
+    .xh-scope-approval[data-part='note']:focus {
+      outline: var(--xh-ring-width) solid Highlight;
+      outline-offset: var(--xh-ring-offset);
+    }
+  }
+
+  @media print {
+    /* 打印：待决的呼吸点是一瞬间的状态，纸上没有「等着人来判」 */
+    .xh-scope-approval[data-part='pending-indicator'] {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       落在勾选盒自己的实心面上（这一档里是 Canvas），整行悬停不换面，取 CanvasText；
+       禁用取 GrayText */
+    .xh-scope-approval[data-part='item-indicator']:not([data-state='unchecked']):empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    .xh-scope-approval[data-part='item'][data-disabled] .xh-scope-approval[data-part='item-indicator']:not([data-state='unchecked']):empty::before {
+      background-color: GrayText;
+    }
+  }
+}

package/dist/css/avatar-group.css

@@ -0,0 +1,96 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 avatar group 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-avatar-group {
+    --xh-avatar-group-skin: 1;
+  }
+
+  /* 一排叠放的头像：后一枚压在前一枚上。
+     组内共用的直径与字号在容器上写一次，沿继承流给每一枚——包括自己写了档位的那一枚，
+     它的档位取值也读这两个槽，整排因此始终齐平。单独摆的头像取不到这两个槽，仍按自己的档走 */
+  .xh-scope-avatar-group[data-part='root'] {
+    /* 组件内那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
+       既不让页面上的层号插进来，也不让它们漏出去压住别人 */
+    isolation: isolate;
+
+    /* 私有槽位：整组共用的直径、字号与叠放量。直径随档换；字号取直径一半（与单枚头像同一条规则）；
+       叠放量三档同为 8px，大头像压住的那段不跟着变宽 */
+    --xh-_avatar-group-size: var(--xh-avatar-group-size, var(--xh-control-h-md));
+    --xh-_avatar-group-half-size: calc(var(--xh-_avatar-group-size) / 2);
+    --xh-_avatar-group-font-size: var(--xh-avatar-group-font-size, var(--xh-_avatar-group-half-size));
+    --xh-_avatar-group-overlap: var(--xh-avatar-group-overlap, var(--xh-space-2));
+
+    /* 流给组内每一枚 */
+    --xh-avatar-size: var(--xh-_avatar-group-size);
+    --xh-avatar-font-size: var(--xh-_avatar-group-font-size);
+
+    display: inline-flex;
+    align-items: center;
+  }
+
+  /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
+     不补的话作者给节点加 hidden 后它照样显示 */
+  .xh-scope-avatar-group[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 尺寸 —— */
+  /* 三档对齐控件档位，缺省档写在上面的基础规则里；字号由直径算出，只换直径 */
+  .xh-scope-avatar-group[data-part='root'][data-size='sm'] {
+    --xh-_avatar-group-size: var(--xh-avatar-group-size, var(--xh-control-h-sm));
+  }
+
+  .xh-scope-avatar-group[data-part='root'][data-size='lg'] {
+    --xh-_avatar-group-size: var(--xh-avatar-group-size, var(--xh-control-h-lg));
+  }
+
+  /* —— 叠放 —— */
+  /* 谁压在谁上面得能指定，所以每一枚都是定位元素；
+     再描一圈底色，被压住的那条边才与上一枚分得开 */
+  .xh-scope-avatar-group[data-part='root'] > * {
+    position: relative;
+  }
+
+  .xh-scope-avatar-group[data-part='root'] > *,
+  .xh-scope-avatar-group[data-part='root'] > * .xh-scope-avatar[data-part='root'] {
+    box-shadow: 0 0 0 var(--xh-stroke-thick) var(--xh-avatar-group-ring, var(--xh-bg-surface));
+  }
+
+  /* 后一枚往回挪一段，压在前一枚上 */
+  .xh-scope-avatar-group[data-part='root'] > * + * {
+    margin-inline-start: calc(-1 * var(--xh-_avatar-group-overlap));
+  }
+
+  /* 指到哪一枚，哪一枚整个露出来 */
+  .xh-scope-avatar-group[data-part='root'] > *:hover {
+    z-index: 1;
+  }
+
+  /* —— 溢出计数 —— */
+  /* 「+N」是这一排里的又一枚：直径、形状、字号与面跟着组里的头像走，里面写什么由作者定 */
+  .xh-scope-avatar-group[data-part='overflow-item'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-_avatar-group-size);
+    block-size: var(--xh-_avatar-group-size);
+    border-radius: var(--xh-avatar-group-radius, var(--xh-shape-circle));
+    background: var(--xh-avatar-group-overflow-item-bg, var(--xh-bg-subtle-active-opaque));
+    color: var(--xh-avatar-group-overflow-item-fg, var(--xh-fg-default));
+    font-size: var(--xh-_avatar-group-font-size);
+    font-weight: var(--xh-avatar-group-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-none);
+    user-select: none;
+  }
+
+  .xh-scope-avatar-group[data-part='overflow-item'][hidden] {
+    display: none;
+  }
+}