@xihan-ui/styles 1.0.0 → 2.0.0

package/css/avatar-group.css

@@ -1,3 +1,10 @@
+/*
+ * 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 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='avatar-group'] {
@@ -5,7 +12,8 @@
   }
 
   /* 一排叠放的头像：后一枚压在前一枚上。
-     组内共用的直径与字号在容器上写一次，沿继承流给每一枚；自己写了档位的那一枚仍按自己的档走 */
+     组内共用的直径与字号在容器上写一次，沿继承流给每一枚——包括自己写了档位的那一枚，
+     它的档位取值也读这两个槽，整排因此始终齐平。单独摆的头像取不到这两个槽，仍按自己的档走 */
   [data-scope='avatar-group'][data-part='root'] {
     /* 组件内那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
        既不让页面上的层号插进来，也不让它们漏出去压住别人 */
@@ -69,23 +77,23 @@
 
   /* —— 溢出计数 —— */
   /* 「+N」是这一排里的又一枚：直径、形状与字号跟着组走，里面写什么由作者定 */
-  [data-scope='avatar-group'][data-part='overflow'] {
+  [data-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-pill));
-    background: var(--xh-avatar-group-overflow-bg, var(--xh-bg-muted));
-    color: var(--xh-avatar-group-overflow-fg, var(--xh-fg-muted));
+    border-radius: var(--xh-avatar-group-radius, var(--xh-shape-circle));
+    background: var(--xh-avatar-group-overflow-item-bg, var(--xh-bg-muted));
+    color: var(--xh-avatar-group-overflow-item-fg, var(--xh-fg-muted));
     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;
   }
 
-  [data-scope='avatar-group'][data-part='overflow'][hidden] {
+  [data-scope='avatar-group'][data-part='overflow-item'][hidden] {
     display: none;
   }
 }

package/css/avatar.css

@@ -1,3 +1,13 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 avatar 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='avatar'] {
@@ -13,7 +23,7 @@
     overflow: hidden;
     inline-size: var(--xh-avatar-size, var(--xh-control-h-md));
     block-size: var(--xh-avatar-size, var(--xh-control-h-md));
-    border-radius: var(--xh-avatar-radius, var(--xh-shape-pill));
+    border-radius: var(--xh-avatar-radius, var(--xh-shape-circle));
     background: var(--xh-avatar-bg, var(--xh-bg-subtle));
     color: var(--xh-avatar-fg, var(--xh-fg-muted));
     font-size: var(--xh-avatar-font-size, var(--xh-text-secondary-size));
@@ -23,25 +33,39 @@
   }
 
   /* 三档尺寸对齐控件档位，缺省档写在上面的基础规则里；
-     字号跟着一起缩放，回退字才在小头像里放得下、在大头像里不显小 */
+     字号跟着一起缩放，回退字才在小头像里放得下、在大头像里不显小。
+     每一档都把 --xh-avatar-size / --xh-avatar-font-size 排在自己的档值前面：这两个槽是
+     外层统一整排头像的通道，档值直接写终值的话，写了 data-size 的那一枚就脱离外层控制 */
   [data-scope='avatar'][data-part='root'][data-size='sm'] {
-    inline-size: var(--xh-control-h-sm);
-    block-size: var(--xh-control-h-sm);
-    font-size: var(--xh-control-caption-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));
   }
 
   [data-scope='avatar'][data-part='root'][data-size='lg'] {
-    inline-size: var(--xh-control-h-lg);
-    block-size: var(--xh-control-h-lg);
-    font-size: var(--xh-control-caption-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-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)));
+    color: var(--xh-avatar-fg, var(--xh-_tone-fg, var(--xh-fg-muted)));
   }
 
-  /* 不声明 display，加载完成前的 hidden 直接交给浏览器的 [hidden] 规则收起 */
+  /* 不声明 display，加载完成前的 hidden 直接交给浏览器的 [hidden] 规则收起。
+     载完那一刻 hidden 撤掉、这个节点从不显示变为显示，淡入在那一刻起跑，
+     图片不是硬切上来盖掉回退字 */
   [data-scope='avatar'][data-part='image'] {
     inline-size: 100%;
     block-size: 100%;
     border-radius: inherit;
     object-fit: cover;
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
   [data-scope='avatar'][data-part='fallback'] {

package/css/back-top.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.
+ */
+
+/* 定义 back top 样式。 */
+
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='back-top'] {
@@ -7,67 +16,106 @@
   /* 定位壳：钉在视口的尾下角，用逻辑属性，RTL 下自动换到另一侧。
      不声明 display —— 收起态由连接层写 hidden，UA 的 [hidden]{display:none} 得压得住 */
   [data-scope='back-top'][data-part='root'] {
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-back-top-icon-size, var(--xh-glyph-size-text));
-
-    /* 尺寸档只换这一个私有槽，按钮从壳继承，换档不必给每个部件各写一条选择器 */
-    --xh-_back-top-size: var(--xh-control-h-md);
-
     position: fixed;
-    inset-block-end: var(--xh-back-top-inset-block, var(--xh-space-8));
-    inset-inline-end: var(--xh-back-top-inset-inline, var(--xh-space-8));
+    /* 贴边与安全区取大的一头：底部横条与圆角压住的那一段由系统给出，贴边比它窄时钮会被切掉一角。
+       桌面上 env() 恒为 0，取值与贴边槽完全一致。安全区只有物理方向的名字，
+       行内轴上两侧同取较宽的那一段，RTL 下不会翻错边。 */
+    inset-block-end: max(var(--xh-back-top-inset-block, var(--xh-space-8)), env(safe-area-inset-bottom));
+    inset-inline-end: max(
+      var(--xh-back-top-inset-inline, var(--xh-space-8)),
+      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-h-sm);
-  }
-
-  [data-scope='back-top'][data-part='root'][data-size='lg'] {
-    --xh-_back-top-size: var(--xh-control-h-lg);
+  /* —— 形态：缺省 outline 的磨砂面 ——
+     触发器接 Action Control floating 档，solid / subtle / ghost 的面由形态矩阵按 data-xh-action-variant 给；
+     缺省 outline（连接层不传 variant 时显式落）与悬浮动作钮同属 M2 磨砂面：背景、边缘、顶光、投影与磨砂
+     从一份配方取，高对比、减少透明度、打印和强制色才能沿同一令牌通道降级。钮浮在正文之上，透空的面在
+     任何内容上都读不出边界，所以 outline 这一档面留着。三支私有槽写在壳上：check-elevation-role 按赋值点
+     认海拔角色，float-button 同款 */
+  [data-scope='back-top'][data-part='root'][data-variant='outline'] {
+    --xh-_back-top-bg: var(--xh-material-frosted-bg);
+    --xh-_back-top-fg: var(--xh-material-frosted-fg);
+    --xh-_back-top-border: var(--xh-material-frosted-border);
+    --xh-_back-top-shadow: var(--xh-material-frosted-shadow);
   }
 
-  /* 圆形按钮：里面通常只放一个箭头图标，宽高同取一档尺寸 */
+  /* —— 触发器 ——
+     浮在内容之上的单图标圆钮，接 Action Control floating 档（§4.1）：盒型（md = box-lg 48px，圆形）、
+     四态面、0.97 按压与 44px 命中区由家族配方按 data-xh-action-variant / -size 给出。
+     这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与几何槽映射。
+     整件只有这一颗按钮，槽名与其余一样不带部件段（照 float-button 的 --xh-float-button-size） */
   [data-scope='back-top'][data-part='trigger'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: var(--xh-back-top-trigger-size, var(--xh-_back-top-size));
-    block-size: var(--xh-back-top-trigger-size, var(--xh-_back-top-size));
-    padding: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-back-top-border, var(--xh-border-control));
-    border-radius: var(--xh-back-top-radius, var(--xh-shape-pill));
-    /* 使用者令牌排在语气之前：写了覆盖钩子就以它为准，没写才退到语气，最后才是中性缺省 */
-    background: var(--xh-back-top-bg, var(--xh-bg-surface-raised));
-    color: var(--xh-back-top-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
-    /* 浮在内容之上，靠投影与页面拉开层次 */
-    box-shadow: var(--xh-back-top-shadow, var(--xh-elevation-sheet));
-    cursor: pointer;
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    --xh-action-bg-rest: var(--xh-back-top-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-back-top-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-back-top-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-back-top-bg, var(--xh-_action-variant-bg-focus-visible));
+    --xh-action-bg-disabled: var(--xh-back-top-bg, var(--xh-_action-variant-bg-disabled));
+    --xh-action-fg-rest: var(--xh-back-top-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-back-top-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-back-top-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-back-top-fg, var(--xh-_action-variant-fg-focus-visible));
+    --xh-action-border-rest: var(--xh-back-top-border, var(--xh-_action-variant-border-rest));
+    --xh-action-border-hover: var(--xh-back-top-border-hover, var(--xh-_action-variant-border-hover));
+    --xh-action-border-pressed: var(--xh-back-top-border-hover, var(--xh-_action-variant-border-pressed));
+    --xh-action-border-focus-visible: var(--xh-back-top-border, var(--xh-_action-variant-border-focus-visible));
+    --xh-action-border-disabled: var(--xh-back-top-border, var(--xh-_action-variant-border-disabled));
+    /* 矩阵各态无影（§8.3 淡底与阴影互斥）；outline 那一档的磨砂投影在下面另桥接 */
+    --xh-action-shadow-rest: var(--xh-back-top-shadow, none);
+    --xh-action-shadow-hover: var(--xh-back-top-shadow, none);
+    --xh-action-shadow-pressed: var(--xh-back-top-shadow, none);
+    --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));
   }
 
-  /* 悬停只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态 */
-  @media (hover: hover) {
-    [data-scope='back-top'][data-part='trigger']:hover {
-      border-color: var(--xh-back-top-border-hover, var(--xh-border-control-hover));
-      background: var(--xh-back-top-bg-hover, var(--xh-bg-subtle-hover));
-    }
-  }
+  /* 缺省 outline 是 M2 磨砂面：背景、边缘、顶光、投影与磨砂从同一份配方取。
+     悬停 / 按下的底走矩阵 outline 列的画布阶梯（100 → 200），边缘与投影不动；
+     键盘聚焦时铺配方的实体 focus surface——透明面上的内收环不能依赖页面底色；
+     置灰只换字色（矩阵 disabled 列的前景），面仍留着 */
+  [data-scope='back-top'][data-part='root'][data-variant='outline']
+    [data-scope='back-top'][data-part='trigger'] {
+    --xh-action-bg-rest: var(--xh-back-top-bg, var(--xh-_back-top-bg));
+    --xh-action-bg-focus-visible: var(--xh-back-top-bg, var(--xh-material-frosted-focus-surface));
+    --xh-action-bg-disabled: var(--xh-back-top-bg, var(--xh-_back-top-bg));
+    --xh-action-fg-rest: var(--xh-back-top-fg, var(--xh-_back-top-fg));
+    --xh-action-fg-hover: var(--xh-back-top-fg, var(--xh-_back-top-fg));
+    --xh-action-fg-pressed: var(--xh-back-top-fg, var(--xh-_back-top-fg));
+    --xh-action-fg-focus-visible: var(--xh-back-top-fg, var(--xh-_back-top-fg));
+    --xh-action-border-rest: var(--xh-back-top-border, var(--xh-_back-top-border));
+    --xh-action-border-hover: var(--xh-back-top-border-hover, var(--xh-_back-top-border));
+    --xh-action-border-pressed: var(--xh-back-top-border-hover, var(--xh-_back-top-border));
+    --xh-action-border-focus-visible: var(--xh-back-top-border, var(--xh-_back-top-border));
+    --xh-action-border-disabled: var(--xh-back-top-border, var(--xh-_back-top-border));
+    --xh-action-shadow-rest: var(--xh-back-top-shadow, var(--xh-_back-top-shadow));
+    --xh-action-shadow-hover: var(--xh-back-top-shadow, var(--xh-_back-top-shadow));
+    --xh-action-shadow-pressed: var(--xh-back-top-shadow, var(--xh-_back-top-shadow));
+    --xh-action-shadow-focus-visible: var(--xh-back-top-shadow, var(--xh-_back-top-shadow));
+    --xh-action-shadow-disabled: var(--xh-back-top-shadow, var(--xh-_back-top-shadow));
+    /* M2 顶光走配方的高光通道：实心、淡色与透空形态各有自身表面，不能把磨砂高光误铺上去 */
+    --xh-action-highlight-rest: var(--xh-material-frosted-highlight);
+    --xh-action-highlight-hover: var(--xh-material-frosted-highlight);
+    --xh-action-highlight-pressed: var(--xh-material-frosted-highlight);
+    --xh-action-highlight-focus-visible: var(--xh-material-frosted-highlight);
+    --xh-action-highlight-disabled: var(--xh-material-frosted-highlight);
 
-  [data-scope='back-top'][data-part='trigger']:active {
-    background: var(--xh-back-top-bg-active, var(--xh-bg-subtle-active));
+    -webkit-backdrop-filter: var(--xh-material-frosted-backdrop);
+    backdrop-filter: var(--xh-material-frosted-backdrop);
   }
 
-  /* 聚焦环恒是 --xh-ring-focus，不随语气走 */
-  [data-scope='back-top'][data-part='trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的 */
+  [data-scope='back-top'][data-part='trigger'][data-xh-action-variant='solid']:focus-visible {
+    --xh-action-ring-color-focus-visible: currentColor;
   }
 
-  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中。
+     粗指针的 44px 命中区由配方的 ::after 给，字形占的是 ::before */
   [data-scope='back-top'][data-part='trigger']:empty::before {
     content: '';
     display: inline-block;
@@ -79,9 +127,16 @@
     mask: var(--xh-glyph-mark-chevron-up) center / contain no-repeat;
   }
 
-  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+  /* 配方声明过 display，会盖掉 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   [data-scope='back-top'][data-part='trigger'][hidden] {
     display: none;
   }
+
+  @media print {
+    /* 打印：回到顶部这颗钮只有在能滚的地方才成立，落到纸上是一颗按不动的按钮。 */
+    [data-scope='back-top'][data-part='root'] {
+      display: none;
+    }
+  }
 }

package/css/badge.css

@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 badge 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='badge'] {
@@ -25,7 +32,7 @@
     /* 每一档的盒都要大于字号：两位数在等高的盒里会被撑破。
        字号刻度最小就是 12px，所以往上抬盒子而不是往下压字 */
     --xh-_badge-dot: var(--xh-space-2);
-    --xh-_badge-min: var(--xh-space-5);
+    --xh-_badge-min: var(--xh-space-7);
     --xh-_badge-px: var(--xh-space-1);
     --xh-_badge-font: var(--xh-text-secondary-size);
 
@@ -41,8 +48,8 @@
     border: var(--xh-stroke-thin) solid var(--xh-badge-ring, var(--xh-bg-surface));
     border-radius: var(--xh-badge-radius, var(--xh-shape-pill));
     /* 角标默认就是实心的：贴在别的东西上，淡底与描边都看不清 */
-    background: var(--xh-badge-bg, var(--xh-_tone, var(--xh-bg-brand)));
-    color: var(--xh-badge-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
+    background: var(--xh-badge-bg, var(--xh-_tone));
+    color: var(--xh-badge-fg, var(--xh-_tone-on));
     font-size: var(--xh-badge-font-size, var(--xh-_badge-font));
     font-weight: var(--xh-badge-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-none);
@@ -58,12 +65,17 @@
     display: none;
   }
 
-  /* 圆点形态：只表示「有」，不表示「有几个」——收掉内边距与文字盒 */
+  /* 圆点形态：只表示「有」，不表示「有几个」——收掉内边距与文字盒。
+     宽高同槽的正方盒按身份取 circle（§6.3），不沿用计数档的胶囊冒充圆：
+     胶囊那 9999px 在正方盒上虽也画成圆，形状身份却写错了档，作者按圆点覆盖圆角时无处落手。
+     圆点直径只有六到十像素，一像素的内高光会占去顶上一大截、读成缺了一圈的描边，这里收掉 */
   [data-scope='badge'][data-part='indicator'][data-dot] {
     min-inline-size: var(--xh-badge-dot-size, var(--xh-_badge-dot));
     inline-size: var(--xh-badge-dot-size, var(--xh-_badge-dot));
     block-size: var(--xh-badge-dot-size, var(--xh-_badge-dot));
+    border-radius: var(--xh-badge-dot-radius, var(--xh-shape-circle));
     padding: 0;
+    box-shadow: none;
     font-size: 0;
   }
 
@@ -72,56 +84,72 @@
   [data-scope='badge'][data-part='indicator'][data-placement='top-end'] {
     inset-block-start: 0;
     inset-inline-end: 0;
-    translate: 50% -50%;
+    translate: 25% -25%;
   }
 
   [data-scope='badge'][data-part='indicator'][data-placement='top-start'] {
     inset-block-start: 0;
     inset-inline-start: 0;
-    translate: -50% -50%;
+    translate: -25% -25%;
   }
 
   [data-scope='badge'][data-part='indicator'][data-placement='bottom-end'] {
     inset-block-end: 0;
     inset-inline-end: 0;
-    translate: 50% 50%;
+    translate: 25% 25%;
   }
 
   [data-scope='badge'][data-part='indicator'][data-placement='bottom-start'] {
     inset-block-end: 0;
     inset-inline-start: 0;
-    translate: -50% 50%;
+    translate: -25% 25%;
   }
 
   /* rtl 下 translate 的行内轴要跟着翻，否则角标会往宿主外面跑 */
   [dir='rtl'] [data-scope='badge'][data-part='indicator'][data-placement='top-end'] {
-    translate: -50% -50%;
+    translate: -25% -25%;
   }
 
   [dir='rtl'] [data-scope='badge'][data-part='indicator'][data-placement='top-start'] {
-    translate: 50% -50%;
+    translate: 25% -25%;
   }
 
   [dir='rtl'] [data-scope='badge'][data-part='indicator'][data-placement='bottom-end'] {
-    translate: -50% 50%;
+    translate: -25% 25%;
   }
 
   [dir='rtl'] [data-scope='badge'][data-part='indicator'][data-placement='bottom-start'] {
-    translate: 50% 50%;
+    translate: 25% 25%;
   }
 
   /* —— 尺寸 —— */
+  /* 小号是贴在 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-min: var(--xh-space-4);
+    --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);
   }
 
   [data-scope='badge'][data-part='indicator'][data-size='lg'] {
     --xh-_badge-dot: var(--xh-space-2_5);
-    --xh-_badge-min: var(--xh-space-6);
+    --xh-_badge-min: var(--xh-space-8);
     --xh-_badge-px: var(--xh-space-1_5);
     --xh-_badge-font: var(--xh-text-body-size);
   }
+
+  /*
+   * 打印：底色被丢掉。计数档配的是实心底上的前景色，底一没那串数字就印不出来；
+   * 圆点档整个由底色画成，底一没连位置都看不见。
+   * 两档都改由描边承载：常态那圈边是衬在宿主上的隔离环，取的是面色，纸上同样是白的，
+   * 这里换成正文色——计数成了一枚描边药丸，圆点成了一个小圈。
+   */
+  @media print {
+    [data-scope='badge'][data-part='indicator'] {
+      border-color: currentColor;
+      color: var(--xh-fg-default);
+      box-shadow: none;
+    }
+  }
 }

package/css/bar-code.css

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 bar code 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='bar-code'] {
+    --xh-bar-code-skin: 1;
+  }
+
+  /*
+   * 根 <svg>。深浅两色取固定档而不是语义前景/背景：语义色跟着主题走，深色主题下整张码
+   * 会翻成浅底深条的反相图，读码器按"深条浅底"取样，反相码扫不出来。要换配色改下面这两个覆盖槽。
+   *
+   * 换色只有一条硬约束：条必须比底色深，且两者对比要足。反相与深浅相近都会让读码器扫不出来，
+   * 而这件事肉眼看不出来。
+   *
+   *   --xh-bar-code-fg  条色，同时经 currentColor 传给人读文字
+   *   --xh-bar-code-bg  底色
+   */
+  [data-scope='bar-code'][data-part='root'] {
+    display: block;
+    border-radius: var(--xh-bar-code-radius, var(--xh-shape-control));
+    background: var(--xh-bar-code-bg, var(--xh-color-neutral-0));
+
+    /* 条那条 path 不带自己的填充色，从这里继承下去 */
+    color: var(--xh-bar-code-fg, var(--xh-color-neutral-950));
+    fill: currentColor;
+
+    /* 占位与码面之间来回时，底色与那圈描边淡变 */
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  [data-scope='bar-code'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /*
+   * 人读文字：字号由 connect 按 X 尺寸写在节点上（规范里数字高约 8X），这里只定字体。
+   * 等宽字体让每位数字一样宽，EAN 逐位居中落格才整齐；规范要的 OCR-B 一般机器上没有，退到系统等宽。
+   */
+  [data-scope='bar-code'][data-part='root'] > [data-xh-geom='text'] {
+    font-family: var(--xh-bar-code-font-family, var(--xh-font-family-mono));
+    fill: var(--xh-bar-code-text-fg, currentColor);
+  }
+
+  /*
+   * 没有可编码的内容、以及内容不合规则：两种情形都一根条不铺，留一块带描边的占位。
+   * 占位用的是语义色——它是界面元素不是码面，跟着主题走才对。
+   */
+  [data-scope='bar-code'][data-part='root'][data-state='empty'],
+  [data-scope='bar-code'][data-part='root'][data-state='error'] {
+    background: var(--xh-bar-code-placeholder-bg, var(--xh-bg-subtle));
+    box-shadow: inset 0 0 0 var(--xh-stroke-thin) var(--xh-bar-code-placeholder-border, var(--xh-border-default));
+  }
+}

package/css/breadcrumb.css

@@ -1,3 +1,14 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 breadcrumb 样式。 */
+
+/* 链接归 Collection Item 导航当前（nav 语境）：面、字色、字重、光标与按压时间线由家族配方按投影的家族角色给，
+   本皮肤只映射桥接槽；当前页由连接层投影 data-xh-collection-terminal，走家族的 terminal 态 */
+@import '../family/collection-item.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='breadcrumb'] {
@@ -64,45 +75,53 @@
     display: none;
   }
 
+  /* 链接的几何、字号与面全经家族桥接槽：静息 muted / regular，悬停走白底承载 hover 100 + 随语气的字色，
+     按下 pressed 200 只换面（§7.2 / §9.2）；当前页那条不再是"可去的地方"（§7.3）：连接层投影
+     data-xh-collection-terminal，家族给透明面 + 随语气的 fg-default + medium + cursor default，不响应悬停与按下，
+     并压过它同时带的 aria-disabled 禁用面。本条 (0,2,0) 压过家族基础块 (0,1,0)，不能再写 color / background */
   [data-scope='breadcrumb'][data-part='link'] {
+    --xh-collection-block-padding: var(--xh-space-0);
+    --xh-collection-inline-padding: var(--xh-breadcrumb-link-px, var(--xh-space-1));
+    --xh-collection-radius: var(--xh-breadcrumb-link-radius, var(--xh-shape-control));
+    --xh-collection-font-size: var(--xh-breadcrumb-font-size, var(--xh-_breadcrumb-font-size));
+    /* 家族会把 --xh-icon-size 写在条目上；不映射，root 上随文字形档的那支会被家族的 md 档盖掉 */
+    --xh-collection-glyph-size: var(--xh-breadcrumb-icon-size, var(--xh-glyph-size-text));
+    --xh-collection-fg-rest: var(--xh-breadcrumb-fg, var(--xh-fg-muted));
+    --xh-collection-bg-hover: var(--xh-breadcrumb-link-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-fg-hover: var(--xh-breadcrumb-link-fg-hover, var(--xh-_breadcrumb-accent-text));
+    --xh-collection-bg-pressed: var(--xh-breadcrumb-link-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-collection-fg-terminal: var(--xh-breadcrumb-link-fg-current, var(--xh-_breadcrumb-accent-text));
+    --xh-collection-font-weight-terminal: var(--xh-breadcrumb-link-font-weight-current, var(--xh-font-weight-medium));
+
     display: inline-flex;
     align-items: center;
     gap: var(--xh-breadcrumb-link-gap, var(--xh-space-1));
     /* 一层的名字可能很长（文档标题、订单号），压不住会把整条路径撑开 */
     max-inline-size: var(--xh-breadcrumb-link-max-w, var(--xh-nav-link-max-w));
-    padding-inline: var(--xh-breadcrumb-link-px, var(--xh-space-1));
-    border-radius: var(--xh-breadcrumb-link-radius, var(--xh-shape-control));
-    color: inherit;
+    /* 行高随 root 的行距槽：家族基础块给条目写了 leading-normal，这里接回 root 那一支 */
+    line-height: var(--xh-breadcrumb-leading, var(--xh-leading-tight));
     text-decoration: none;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    transition:
-      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='breadcrumb'][data-part='link'][hidden] {
     display: none;
   }
 
-  /* 当前页那条不再是"可去的地方"：不给悬停反馈，指针也不摆出可点的样子。
-     连接层同时拦下了它的点击并把它移出了 Tab 序列，这里只负责说清楚这件事 */
-  [data-scope='breadcrumb'][data-part='link']:not([data-current]):hover {
-    background: var(--xh-breadcrumb-link-bg-hover, var(--xh-bg-subtle-hover));
-    color: var(--xh-breadcrumb-link-fg-hover, var(--xh-_breadcrumb-accent-text));
-  }
-
-  [data-scope='breadcrumb'][data-part='link']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* 图标位跟着字号走，与文字并排；不参与省略，压缩时先压文字 */
+  [data-scope='breadcrumb'][data-part='link-icon'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-breadcrumb-link-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-breadcrumb-link-icon-size, var(--xh-glyph-size-text));
   }
 
-  /* 当前页用字重与前景色区分，不加下划线：下划线是"可点"的信号，而它点不动 */
-  [data-scope='breadcrumb'][data-part='link'][data-current] {
-    color: var(--xh-breadcrumb-current-fg, var(--xh-_breadcrumb-accent-text));
-    font-weight: var(--xh-breadcrumb-current-font-weight, var(--xh-font-weight-medium));
-    cursor: default;
+  [data-scope='breadcrumb'][data-part='link-icon'][hidden] {
+    display: none;
   }
 
   /* 分隔符与省略号都是纯视觉占位，读屏那边已被 aria-hidden 摘掉 */