@xihan-ui/styles 3.2.0 → 4.0.0

package/css/accordion.css

@@ -20,9 +20,14 @@
     /* 作者塞进正文里的图标与皮肤画的兜底字形同一把尺：md 档，标题栏上另按家族档取值 */
     --xh-icon-size: var(--xh-accordion-icon-size, var(--xh-glyph-size-md));
 
-    /* 尺寸档只换正文这两个私有槽，正文从 root 继承它们；标题栏的三档几何由家族 disclosure-trigger 档给 */
-    --xh-_accordion-content-px: var(--xh-space-4);
-    --xh-_accordion-content-pb: var(--xh-space-4);
+    /* 尺寸档只换这几个私有槽，标题栏与正文从 root 继承它们。
+       标题栏比家族 disclosure-trigger 档收一截：md 上下 10px + 一行正文行高 21px = 41px 高，横向 12px；
+       正文与标题栏同一条起点，上下各留 8px */
+    --xh-_accordion-trigger-py: var(--xh-space-2_5);
+    --xh-_accordion-trigger-px: var(--xh-space-3);
+    --xh-_accordion-content-px: var(--xh-space-3);
+    --xh-_accordion-content-pt: var(--xh-space-2);
+    --xh-_accordion-content-pb: var(--xh-space-2);
 
     /* 语气落在展开着的标题上，指示器写在标题里、跟着继承这个色，不另立规则。
        没写 data-tone 时 --xh-_tone-fg 没被声明，退回原来的前景色。
@@ -42,13 +47,19 @@
   /* —— 尺寸 —— */
   /* 缺省档写在上面的基础规则里 */
   [data-scope='accordion'][data-part='root'][data-size='sm'] {
-    --xh-_accordion-content-px: var(--xh-space-3);
-    --xh-_accordion-content-pb: var(--xh-space-3);
+    --xh-_accordion-trigger-py: var(--xh-space-1_5);
+    --xh-_accordion-trigger-px: var(--xh-space-2_5);
+    --xh-_accordion-content-px: var(--xh-space-2_5);
+    --xh-_accordion-content-pt: var(--xh-space-1_5);
+    --xh-_accordion-content-pb: var(--xh-space-1_5);
   }
 
   [data-scope='accordion'][data-part='root'][data-size='lg'] {
-    --xh-_accordion-content-px: var(--xh-space-5);
-    --xh-_accordion-content-pb: var(--xh-space-5);
+    --xh-_accordion-trigger-py: var(--xh-space-3);
+    --xh-_accordion-trigger-px: var(--xh-space-4);
+    --xh-_accordion-content-px: var(--xh-space-4);
+    --xh-_accordion-content-pt: var(--xh-space-3);
+    --xh-_accordion-content-pb: var(--xh-space-3);
   }
 
   [data-scope='accordion'][data-part='item'] {
@@ -62,14 +73,14 @@
   [data-scope='accordion'][data-part='root']
     > [data-scope='accordion'][data-part='item']
     + [data-scope='accordion'][data-part='item'] {
-    border-block-start: var(--xh-stroke-thin) solid var(--xh-accordion-item-border, var(--xh-border-subtle));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-accordion-item-border, var(--xh-border-default));
   }
 
   [data-scope='accordion'][data-part='root'][data-orientation='horizontal']
     > [data-scope='accordion'][data-part='item']
     + [data-scope='accordion'][data-part='item'] {
     border-block-start: 0;
-    border-inline-start: var(--xh-stroke-thin) solid var(--xh-accordion-item-border, var(--xh-border-subtle));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-accordion-item-border, var(--xh-border-default));
   }
 
   /* 作者显式渲染的分隔线。渲染了它，上面那条 item + item 的相邻规则就不再命中，
@@ -79,7 +90,7 @@
     block-size: var(--xh-stroke-thin);
     border: 0;
     margin: 0;
-    background: var(--xh-accordion-item-border, var(--xh-border-subtle));
+    background: var(--xh-accordion-item-border, var(--xh-border-default));
   }
 
   [data-scope='accordion'][data-part='item-separator'][hidden] {
@@ -129,10 +140,10 @@
     > [data-scope='accordion'][data-part='item']:not(:last-child)::after {
     content: '';
     position: absolute;
-    inset-inline: 3%;
+    inset-inline: 0;
     inset-block-end: 0;
     block-size: var(--xh-stroke-thin);
-    background: var(--xh-accordion-item-border, var(--xh-border-subtle));
+    background: var(--xh-accordion-item-border, var(--xh-border-default));
     pointer-events: none;
   }
 
@@ -148,8 +159,8 @@
   [data-scope='accordion'][data-part='trigger'] {
     --xh-action-gap: var(--xh-accordion-trigger-gap, var(--xh-_action-profile-gap));
     --xh-action-visual-size: var(--xh-accordion-trigger-h, var(--xh-_action-profile-visual-size));
-    --xh-action-padding-block: var(--xh-accordion-trigger-py, var(--xh-_action-profile-padding-block));
-    --xh-action-padding-inline: var(--xh-accordion-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-padding-block: var(--xh-accordion-trigger-py, var(--xh-_accordion-trigger-py));
+    --xh-action-padding-inline: var(--xh-accordion-trigger-px, var(--xh-_accordion-trigger-px));
     --xh-action-radius: var(--xh-accordion-trigger-radius, var(--xh-_action-profile-radius));
     --xh-action-bg-rest: var(--xh-accordion-trigger-bg, var(--xh-_action-variant-bg-rest));
     --xh-action-bg-hover: var(--xh-accordion-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
@@ -157,10 +168,11 @@
     --xh-action-fg-hover: var(--xh-accordion-trigger-fg, var(--xh-_action-variant-fg-hover));
     --xh-action-fg-pressed: var(--xh-accordion-trigger-fg, var(--xh-_action-variant-fg-pressed));
     --xh-action-font-size: var(--xh-accordion-trigger-font-size, var(--xh-_action-profile-font-size));
-    --xh-icon-size: var(--xh-accordion-icon-size, var(--xh-_action-profile-glyph-size));
+    --xh-icon-size: var(--xh-accordion-icon-size, var(--xh-glyph-size-sm));
 
     border-width: 0;
     font-weight: var(--xh-accordion-trigger-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-normal);
   }
 
   /* 展开态自带一个槽：与常态共用一个的话，作者一改常态字色，
@@ -169,6 +181,8 @@
     --xh-action-fg-rest: var(--xh-accordion-trigger-fg-open, var(--xh-_accordion-open-fg));
     --xh-action-fg-hover: var(--xh-accordion-trigger-fg-open, var(--xh-_accordion-open-fg));
     --xh-action-fg-pressed: var(--xh-accordion-trigger-fg-open, var(--xh-_accordion-open-fg));
+
+    font-weight: var(--xh-accordion-trigger-font-weight-open, var(--xh-font-weight-medium));
   }
 
   /* 禁用条目走 aria-disabled，仍留在 Tab 序里，只是不可操作；前景换成禁用色，不靠 opacity 压暗
@@ -182,7 +196,7 @@
     align-items: center;
     justify-content: center;
     flex: none;
-    color: var(--xh-accordion-indicator-fg, var(--xh-fg-muted));
+    color: var(--xh-accordion-indicator-fg, var(--xh-fg-subtle));
     line-height: var(--xh-leading-none);
   }
 
@@ -215,20 +229,33 @@
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }：补了动画一帧都播不出来。
      收起由适配器在退场结束后写内联 display 落成，退场窗口内靠 connect 发的 inert 挡住焦点 */
   [data-scope='accordion'][data-part='content'] {
-    /* 行高与内缩同帧动的共享关键帧读这条槽：只有末端有内缩，起端不写、按 0 动 */
+    /* 行高与内缩同帧动的共享关键帧读这两条槽，两端内缩一起收放 */
+    --xh-_disclosure-pt: var(--xh-accordion-content-pt, var(--xh-_accordion-content-pt));
     --xh-_disclosure-pb: var(--xh-accordion-content-pb, var(--xh-_accordion-content-pb));
 
     display: grid;
     grid-template-rows: 1fr;
     overflow: clip;
-    padding-block-start: 0;
+    padding-block-start: var(--xh-accordion-content-pt, var(--xh-_accordion-content-pt));
     padding-block-end: var(--xh-accordion-content-pb, var(--xh-_accordion-content-pb));
     padding-inline: var(--xh-accordion-content-px, var(--xh-_accordion-content-px));
-    color: var(--xh-accordion-content-fg, var(--xh-fg-muted));
-    font-size: var(--xh-accordion-content-font-size, var(--xh-text-secondary-size));
+    /* 正文是标题栏下面一块淡底，与白底标题栏分出层次；淡底容器（subtle）本身已是这层底，正文不再叠一层 */
+    background: var(--xh-accordion-content-bg, var(--xh-bg-muted));
+    color: var(--xh-accordion-content-fg, var(--xh-fg-default));
+    font-size: var(--xh-accordion-content-font-size, var(--xh-text-body-size));
     line-height: var(--xh-leading-normal);
   }
 
+  [data-scope='accordion'][data-part='root'][data-variant='subtle'] [data-scope='accordion'][data-part='content'] {
+    background: var(--xh-accordion-content-bg, transparent);
+  }
+
+  /* 展开着的标题栏与正文之间一条分隔线，与条与条之间的线同色 */
+  [data-scope='accordion'][data-part='content'][data-state='open'] {
+    border-block-start: var(--xh-stroke-thin) solid
+      var(--xh-accordion-content-border, var(--xh-accordion-item-border, var(--xh-border-default)));
+  }
+
   /* 展开与收起只在开合时播：首帧就在的展开 / 收起直接呈现（data-instant） */
   [data-scope='accordion'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-disclosure-expand var(--xh-motion-duration-expand) var(--xh-motion-ease-enter-strong);

package/css/alert.css

@@ -31,8 +31,8 @@
     --xh-alert-skin: 1;
   }
 
-  /* 提示本体是一层中性 surface：边界由 --xh-border-default 描边承担、无影（静态反馈面），
-     语气只落到图标与标题，不会用整块彩底抢走正文层级。 */
+  /* 提示本体是一块语气淡底面（淡底形态：透明边位 + 语气 12% 淡底、无影），语气由底色与图标表达；
+     标题与正文仍取正文色，彩色只落在底与图标上，不让整段文字变色抢走层级。 */
   [data-scope='alert'][data-part='root'] {
     /* 作者塞进指示符槽的图标与皮肤画的兜底字形同一把尺：Feedback 指示符统一 md 档 */
     --xh-icon-size: var(--xh-alert-icon-size, var(--xh-glyph-size-md));
@@ -41,19 +41,18 @@
     align-items: flex-start;
     /* 指示符盒自带 --xh-space-1 内衬：与间距合起来，字形到正文 12px，与 Notification 同一个距离 */
     gap: var(--xh-alert-gap, var(--xh-space-2));
-    padding-block: var(--xh-alert-py, var(--xh-surface-py-sm));
+    padding-block: var(--xh-alert-py, var(--xh-space-2));
     padding-inline: var(--xh-alert-px, var(--xh-surface-px-sm));
-    border: var(--xh-stroke-thin) solid var(--xh-alert-border, var(--xh-border-default));
-    border-radius: var(--xh-alert-radius, var(--xh-shape-surface));
-    background: var(--xh-alert-bg, var(--xh-bg-surface));
+    border: var(--xh-stroke-thin) solid var(--xh-alert-border, transparent);
+    border-radius: var(--xh-alert-radius, var(--xh-shape-control));
+    background: var(--xh-alert-bg, var(--xh-_tone-subtle, var(--xh-bg-subtle)));
     box-shadow: var(--xh-alert-shadow, none);
     color: var(--xh-alert-fg, var(--xh-fg-default));
     font-size: var(--xh-alert-font-size, var(--xh-text-body-size));
     line-height: var(--xh-alert-leading, var(--xh-leading-normal));
   }
 
-  /* 横幅：页面顶部的通栏，贴着页面或容器的边铺满整行。贴边的三条边是页面自己的边，画出来只会压在边上；
-     边界只留朝向页面内容的块尾一道，与页面内容同一层、同一种描边。贴边铺满的栏不取圆角：
+  /* 横幅：页面顶部的通栏，贴着页面或容器的边铺满整行。面本身就是语气淡底，不另画边；贴边铺满的栏不取圆角：
      圆了会在两个角露出底下的页面。面与语气规则与页内提示相同，横幅不换底色 */
   [data-scope='alert'][data-part='root'][data-banner] {
     inline-size: 100%;
@@ -125,9 +124,9 @@
 
   [data-scope='alert'][data-part='title'] {
     flex: none;
-    color: var(--xh-alert-title-fg, var(--xh-_tone-fg));
-    font-size: var(--xh-alert-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-alert-title-font-weight, var(--xh-font-weight-semibold));
+    color: var(--xh-alert-title-fg, var(--xh-fg-default));
+    font-size: var(--xh-alert-title-font-size, var(--xh-text-heading-3-size));
+    font-weight: var(--xh-alert-title-font-weight, var(--xh-text-heading-3-weight));
     line-height: var(--xh-alert-title-leading, var(--xh-leading-tight));
   }
 
@@ -142,16 +141,16 @@
     display: none;
   }
 
-  /* 关闭钮是只有字形的离散动作钮：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、禁用面全由
+  /* 关闭钮是只有字形的离散动作钮：盒几何、悬停 / 按下与按压、粗指针热区、焦点环、禁用面全由
      Action Control 的 icon ghost 档给（连接层投 sm：与此前 --xh-control-h-sm 同尺寸），组件只映射既有使用者槽。
-     静息透明；提示本体是白底承载，hover 100 → pressed 200，写了语气时悬停底跟着语气走（--xh-_tone-subtle）。
+     静息透明；提示本体是语气淡底（12%），叉的悬停 / 按下沿语气淡底再升一档、两档（20% / 28%）。
      closable=false 时连接层同时给 hidden 与 disabled / data-disabled，家族按后者收掉反馈 */
   [data-scope='alert'][data-part='close-trigger'] {
     --xh-action-visual-size: var(--xh-alert-close-size, var(--xh-_action-profile-visual-size));
     --xh-action-min-inline-size: var(--xh-alert-close-size, var(--xh-_action-profile-visual-size));
     --xh-action-radius: var(--xh-alert-close-radius, var(--xh-shape-control));
-    --xh-action-bg-hover: var(--xh-alert-close-bg-hover, var(--xh-_action-variant-bg-hover));
-    --xh-action-bg-pressed: var(--xh-alert-close-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-hover: var(--xh-alert-close-bg-hover, var(--xh-_tone-subtle-hover, var(--xh-_action-variant-bg-hover)));
+    --xh-action-bg-pressed: var(--xh-alert-close-bg-active, var(--xh-_tone-subtle-active, var(--xh-_action-variant-bg-pressed)));
     --xh-action-fg-rest: var(--xh-alert-close-fg, var(--xh-fg-muted));
     --xh-action-fg-hover: var(--xh-alert-close-fg-hover, var(--xh-fg-default));
     --xh-action-fg-pressed: var(--xh-alert-close-fg-hover, var(--xh-fg-default));

package/css/anchor.css

@@ -24,10 +24,10 @@
     --xh-_anchor-link-px: var(--xh-control-px-md);
     /* 当前那一节的指示条与文字随语气走。没写 data-tone 时这两个槽都没被声明，退回品牌色。
        指示条是装饰性的色条，取柔和档；文字要压在普通背景上读，取语气的文字档——
-       导航当前页缺省是 --xh-fg-brand-strong，比指示条深一档。
+       导航当前页缺省是 --xh-fg-brand，与指示条同一档主色。
        聚焦环不在其列，它恒是 --xh-ring-focus */
     --xh-_anchor-accent: var(--xh-_tone-soft, var(--xh-fg-brand));
-    --xh-_anchor-accent-text: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
+    --xh-_anchor-accent-text: var(--xh-_tone-fg, var(--xh-fg-brand));
 
     color: var(--xh-anchor-fg, var(--xh-fg-muted));
     font-size: var(--xh-anchor-font-size, var(--xh-_anchor-font-size));

package/css/approval.css

@@ -136,7 +136,7 @@
     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-semibold));
+    font-weight: var(--xh-approval-title-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-tight);
   }
 
@@ -265,7 +265,7 @@
     display: none;
   }
 
-  /* 备注：附在判定上的一句自由文本，占满整行 */
+  /* 备注：附在判定上的一句自由文本，占满整行。框照字段外壳：字段淡底 + 控件描边，悬停描边升一档 */
   [data-scope='approval'][data-part='note'] {
     display: block;
     inline-size: 100%;
@@ -273,26 +273,43 @@
     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-surface));
+    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: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    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);
   }
 
   [data-scope='approval'][data-part='note'][hidden] {
     display: none;
   }
 
-  [data-scope='approval'][data-part='note']:disabled {
-    color: var(--xh-fg-disabled);
+  [data-scope='approval'][data-part='note']:hover:not(:disabled, :focus, [data-invalid]) {
+    border-color: var(--xh-approval-note-border-hover, var(--xh-border-strong));
   }
 
-  /* 要求写理由而空着就按了拒绝：描边换成无效色；焦点也已带到这里，焦点环压在描边外面，一并换色 */
-  [data-scope='approval'][data-part='note'][data-invalid] {
-    --xh-_ring-color: var(--xh-approval-note-ring-invalid, var(--xh-ring-invalid));
+  /* 聚焦换承载面底 + 品牌描边，不画环：焦点由描边换色与底色差标出，强制色档补一圈 Highlight 环 */
+  [data-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));
+  }
+
+  [data-scope='approval'][data-part='note']:focus-visible {
+    outline: none;
+  }
 
+  /* 要求写理由而空着就按了拒绝：换无效淡底 + 无效描边；焦点也已带到这里，聚焦时同样不画环 */
+  [data-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));
+  }
+
+  [data-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);
   }
 
   /* 剩余时间：等宽数字，逐秒跳字时不左右晃 */
@@ -307,16 +324,18 @@
     display: none;
   }
 
-  /* 判定结果条：判过了才露出，语气随判定走 */
+  /* 判定结果条：判过了才露出，语气随判定走。与 Tag 的 sm 档同一副方签——control 圆角、块尺寸取 chip 档、竖向内衬为 0 */
   [data-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, var(--xh-space-0_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-pill));
+    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));
@@ -470,11 +489,16 @@
     --xh-_approval-note-font-size: var(--xh-control-font-lg);
   }
 
-  /* 强制色：底色会被系统背景吃掉，呼吸点改用系统前景色 */
+  /* 强制色：底色会被系统背景吃掉，呼吸点改用系统前景色；备注框聚焦不画环、描边又被换成系统色，补一圈 Highlight 环 */
   @media (forced-colors: active) {
     [data-scope='approval'][data-part='pending-indicator'] {
       background: CanvasText;
     }
+
+    [data-scope='approval'][data-part='note']:focus {
+      outline: var(--xh-ring-width) solid Highlight;
+      outline-offset: var(--xh-ring-offset);
+    }
   }
 
   @media print {

package/css/avatar-group.css

@@ -19,10 +19,12 @@
        既不让页面上的层号插进来，也不让它们漏出去压住别人 */
     isolation: isolate;
 
-    /* 私有槽位：整组共用的直径、字号与叠放量，换档只改这三个 */
+    /* 私有槽位：整组共用的直径、字号与叠放量。直径随档换；字号取直径一半（与单枚头像同一条规则）；
+       叠放量三档同为 8px，大头像压住的那段不跟着变宽 */
     --xh-_avatar-group-size: var(--xh-avatar-group-size, var(--xh-control-h-md));
-    --xh-_avatar-group-font-size: var(--xh-avatar-group-font-size, var(--xh-control-caption-md));
-    --xh-_avatar-group-overlap: var(--xh-avatar-group-overlap, var(--xh-space-2_5));
+    --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);
@@ -39,18 +41,13 @@
   }
 
   /* —— 尺寸 —— */
-  /* 三档对齐控件档位，缺省档写在上面的基础规则里；
-     字号与叠放量跟着直径一起缩放，小头像里回退字放得下、大头像里压住的那段也按比例长 */
+  /* 三档对齐控件档位，缺省档写在上面的基础规则里；字号由直径算出，只换直径 */
   [data-scope='avatar-group'][data-part='root'][data-size='sm'] {
     --xh-_avatar-group-size: var(--xh-avatar-group-size, var(--xh-control-h-sm));
-    --xh-_avatar-group-font-size: var(--xh-avatar-group-font-size, var(--xh-control-caption-sm));
-    --xh-_avatar-group-overlap: var(--xh-avatar-group-overlap, var(--xh-space-2));
   }
 
   [data-scope='avatar-group'][data-part='root'][data-size='lg'] {
     --xh-_avatar-group-size: var(--xh-avatar-group-size, var(--xh-control-h-lg));
-    --xh-_avatar-group-font-size: var(--xh-avatar-group-font-size, var(--xh-control-caption-lg));
-    --xh-_avatar-group-overlap: var(--xh-avatar-group-overlap, var(--xh-space-3));
   }
 
   /* —— 叠放 —— */
@@ -76,7 +73,7 @@
   }
 
   /* —— 溢出计数 —— */
-  /* 「+N」是这一排里的又一枚：直径、形状与字号跟着组走，里面写什么由作者定 */
+  /* 「+N」是这一排里的又一枚：直径、形状、字号与面跟着组里的头像走，里面写什么由作者定 */
   [data-scope='avatar-group'][data-part='overflow-item'] {
     display: inline-flex;
     flex: none;
@@ -85,8 +82,8 @@
     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-muted-opaque));
-    color: var(--xh-avatar-group-overflow-item-fg, var(--xh-fg-muted));
+    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);

package/css/avatar.css

@@ -15,38 +15,40 @@
   }
 
   [data-scope='avatar'][data-part='root'] {
+    /* 直径：外层槽在前（头像组整排齐平走它），各档的档值在后 */
+    --xh-_avatar-size: var(--xh-avatar-size, var(--xh-control-h-md));
+    /* 回退字号取直径的一半：一两个字的缩写在圆里占得住，随直径一起缩放 */
+    --xh-_avatar-font-size: calc(var(--xh-_avatar-size) / 2);
+
     position: relative;
     display: inline-flex;
     flex: none;
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    inline-size: var(--xh-avatar-size, var(--xh-control-h-md));
-    block-size: var(--xh-avatar-size, var(--xh-control-h-md));
+    inline-size: var(--xh-_avatar-size);
+    block-size: var(--xh-_avatar-size);
     border-radius: var(--xh-avatar-radius, var(--xh-shape-circle));
-    /* 头像在头像组里层叠：底取淡底的不透明档，半透明会透出压在下面的那一枚 */
-    background: var(--xh-avatar-bg, var(--xh-bg-subtle-opaque));
-    color: var(--xh-avatar-fg, var(--xh-fg-muted));
-    font-size: var(--xh-avatar-font-size, var(--xh-text-secondary-size));
+    /* 头像在头像组里层叠：底取淡底的不透明档，半透明会透出压在下面的那一枚。
+       取加深一档的不透明淡底、字取正文色：白字压在这层灰上只有 1.6:1，次要字色在暗色的加深底上
+       也到不了 4.5:1 */
+    background: var(--xh-avatar-bg, var(--xh-bg-subtle-active-opaque));
+    color: var(--xh-avatar-fg, var(--xh-fg-default));
+    font-size: var(--xh-avatar-font-size, var(--xh-_avatar-font-size));
     font-weight: var(--xh-avatar-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-none);
     user-select: none;
   }
 
-  /* 三档尺寸对齐控件档位，缺省档写在上面的基础规则里；
-     字号跟着一起缩放，回退字才在小头像里放得下、在大头像里不显小。
-     每一档都把 --xh-avatar-size / --xh-avatar-font-size 排在自己的档值前面：这两个槽是
-     外层统一整排头像的通道，档值直接写终值的话，写了 data-size 的那一枚就脱离外层控制 */
+  /* 三档尺寸对齐控件档位，缺省档写在上面的基础规则里；字号随直径取一半，跟着一起缩放。
+     每一档都把 --xh-avatar-size 排在自己的档值前面：这个槽是外层统一整排头像的通道，
+     档值直接写终值的话，写了 data-size 的那一枚就脱离外层控制 */
   [data-scope='avatar'][data-part='root'][data-size='sm'] {
-    inline-size: var(--xh-avatar-size, var(--xh-control-h-sm));
-    block-size: var(--xh-avatar-size, var(--xh-control-h-sm));
-    font-size: var(--xh-avatar-font-size, var(--xh-control-caption-sm));
+    --xh-_avatar-size: var(--xh-avatar-size, var(--xh-control-h-sm));
   }
 
   [data-scope='avatar'][data-part='root'][data-size='lg'] {
-    inline-size: var(--xh-avatar-size, var(--xh-control-h-lg));
-    block-size: var(--xh-avatar-size, var(--xh-control-h-lg));
-    font-size: var(--xh-avatar-font-size, var(--xh-control-caption-lg));
+    --xh-_avatar-size: var(--xh-avatar-size, var(--xh-control-h-lg));
   }
 
   /* —— 语气 ——
@@ -54,8 +56,8 @@
      两条声明都把 --xh-avatar-bg / --xh-avatar-fg 排在语气值前面：使用者槽仍是最外那一层，
      写了 tone 的那一枚照样受外层统一控制。整块带 [data-tone] 限定，没写语气的头像逐值不变 */
   [data-scope='avatar'][data-part='root'][data-tone] {
-    background: var(--xh-avatar-bg, var(--xh-_tone-subtle, var(--xh-bg-subtle-opaque)));
-    color: var(--xh-avatar-fg, var(--xh-_tone-fg, var(--xh-fg-muted)));
+    background: var(--xh-avatar-bg, var(--xh-_tone-subtle, var(--xh-bg-subtle-active-opaque)));
+    color: var(--xh-avatar-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
   }
 
   /* 不声明 display，加载完成前的 hidden 直接交给浏览器的 [hidden] 规则收起。

package/css/back-top.css

@@ -18,22 +18,35 @@
   /* 定位壳：钉在视口的尾下角，用逻辑属性，RTL 下自动换到另一侧。
      不声明 display —— 收起态由连接层写 hidden，UA 的 [hidden]{display:none} 得压得住 */
   [data-scope='back-top'][data-part='root'] {
+    /* 钮的尺：md 取独立浮钮的直径（40px），sm / lg 取方格档；字形比控件内图标低一档（sm / md 16px、lg 20px） */
+    --xh-_back-top-size: var(--xh-control-float-md);
+    --xh-_back-top-glyph-size: var(--xh-glyph-size-sm);
+
     position: fixed;
     /* 贴边与安全区取大的一头：底部横条与圆角压住的那一段由系统给出，贴边比它窄时钮会被切掉一角。
        桌面上 env() 恒为 0，取值与贴边槽完全一致。安全区只有物理方向的名字，
        行内轴上两侧同取较宽的那一段，RTL 下不会翻错边。 */
-    inset-block-end: max(var(--xh-back-top-inset-block, var(--xh-space-8)), env(safe-area-inset-bottom));
+    inset-block-end: max(var(--xh-back-top-inset-block, var(--xh-space-6)), env(safe-area-inset-bottom));
     inset-inline-end: max(
-      var(--xh-back-top-inset-inline, var(--xh-space-8)),
+      var(--xh-back-top-inset-inline, var(--xh-space-6)),
       env(safe-area-inset-left),
       env(safe-area-inset-right)
     );
     z-index: var(--xh-back-top-layer, var(--xh-layer-sticky));
   }
 
+  [data-scope='back-top'][data-part='root'][data-size='sm'] {
+    --xh-_back-top-size: var(--xh-control-box-sm);
+  }
+
+  [data-scope='back-top'][data-part='root'][data-size='lg'] {
+    --xh-_back-top-size: var(--xh-control-box-lg);
+    --xh-_back-top-glyph-size: var(--xh-glyph-size-md);
+  }
+
   /* —— 触发器 ——
-     浮在内容之上的单图标圆钮，接 Action Control floating 档：盒型（md = box-lg 48px，圆形）、
-     四态面、0.97 按压与 44px 命中区由家族配方按 data-xh-action-variant / -size 给出。
+     浮在内容之上的单图标圆钮，接 Action Control floating 档：圆形、四态面、按压与 44px 命中区
+     由家族配方按 data-xh-action-variant / -size 给出；视觉盒与字形取根上按档给的尺。
      这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与几何槽映射。
      整件只有这一颗按钮，槽名与其余一样不带部件段（照 float-button 的 --xh-float-button-size） */
   [data-scope='back-top'][data-part='trigger'] {
@@ -58,9 +71,10 @@
     --xh-action-shadow-focus-visible: var(--xh-back-top-shadow, none);
     --xh-action-shadow-disabled: var(--xh-back-top-shadow, none);
     --xh-action-radius: var(--xh-back-top-radius, var(--xh-_action-profile-radius));
-    --xh-action-visual-size: var(--xh-back-top-size, var(--xh-_action-profile-visual-size));
-    /* 作者塞进来的图标跟着 floating 档走（md 24px），与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-back-top-icon-size, var(--xh-_action-profile-glyph-size));
+    --xh-action-visual-size: var(--xh-back-top-size, var(--xh-_back-top-size));
+    --xh-action-min-inline-size: var(--xh-back-top-size, var(--xh-_back-top-size));
+    /* 作者塞进来的图标与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-back-top-icon-size, var(--xh-_back-top-glyph-size));
   }
 
   /* 缺省 outline 是 frosted 材质面：连接层只在这一档投影 data-xh-material，面由材质家族配方给——

package/css/badge.css

@@ -34,9 +34,9 @@
   [data-scope='badge'][data-part='indicator'] {
     /* 每一档的盒都要大于字号：两位数在等高的盒里会被撑破。
        字号刻度最小就是 12px，所以往上抬盒子而不是往下压字。
-       盒只比字高一档：20px 扣掉两道 1px 描边还剩 18px 内高，13px 的两位数与「99+」立得住，
-       角标又不会大过它贴着的宿主文字 */
-    --xh-_badge-dot: var(--xh-space-2);
+       盒比字高一档半：20px 扣掉两道 1px 描边还剩 18px 内高，13px 的两位数与「99+」立得住，
+       角标又不会大过它贴着的宿主文字；圆点 6px，只标存在、不抢宿主 */
+    --xh-_badge-dot: var(--xh-space-1_5);
     --xh-_badge-min: var(--xh-space-5);
     --xh-_badge-px: var(--xh-space-1);
     --xh-_badge-font: var(--xh-text-secondary-size);
@@ -175,7 +175,7 @@
   /* 小号是贴在 16px 图标角上的角标：盒取 12 + 2 的半阶补偿 = 14px，字仍是刻度最小的 12px——
      数字的字面只占字号的六成，扣掉两道 1px 描边后的 12px 内高装得下两位数，再小就得压字 */
   [data-scope='badge'][data-part='indicator'][data-size='sm'] {
-    --xh-_badge-dot: var(--xh-space-1_5);
+    --xh-_badge-dot: var(--xh-space-1);
     --xh-_badge-min: calc(var(--xh-space-3) + var(--xh-space-0_5));
     --xh-_badge-px: var(--xh-space-0_5);
     --xh-_badge-font: var(--xh-text-caption-size);
@@ -183,7 +183,7 @@
 
   /* 大号只往上抬一级：盒 24px、字 14px，仍是角标，不长成与宿主同级的一枚按钮 */
   [data-scope='badge'][data-part='indicator'][data-size='lg'] {
-    --xh-_badge-dot: var(--xh-space-2_5);
+    --xh-_badge-dot: var(--xh-space-2);
     --xh-_badge-min: var(--xh-space-6);
     --xh-_badge-px: var(--xh-space-1_5);
     --xh-_badge-font: var(--xh-text-body-size);