@xihan-ui/styles 3.2.0 → 4.0.0

package/dist/css/pagination.css

@@ -22,20 +22,22 @@
     /* 作者塞进面板或分页行里的图标按档取字形尺；四类格子上另按家族档位取同一把尺 */
     --xh-icon-size: var(--xh-pagination-icon-size, var(--xh-glyph-size-md));
 
-    /* 尺寸档只换这三个私有槽，上一页/下一页、页码与省略号都从这两处继承它们，
-       换档不必给每个部件各写一条选择器 */
+    /* 尺寸档只换这几个私有槽，上一页/下一页、页码与省略号都从这两处继承它们，
+       换档不必给每个部件各写一条选择器。格子的横内衬比控件尺窄一档：一位数的页码加两侧内衬
+       要收得进方格的最小宽度，格子才是正方的；跳页输入框是字段，仍取控件尺的横内衬 */
     --xh-_pagination-item-size: var(--xh-control-h-md);
-    --xh-_pagination-item-px: var(--xh-control-px-md);
+    --xh-_pagination-item-px: var(--xh-space-2);
+    --xh-_pagination-jumper-px: var(--xh-control-px-md);
     --xh-_pagination-font-size: var(--xh-control-font-md);
 
     /* 当前页的选中态随语气走。没写 data-tone 时这几个 --xh-_tone-* 都没被声明，
        退回原来的品牌底与其配色。聚焦环不在其列，它恒是 --xh-ring-focus */
-    --xh-_pagination-selected-bg: var(--xh-_tone, var(--xh-bg-brand));
-    --xh-_pagination-selected-bg-hover: var(--xh-_tone-hover, var(--xh-bg-brand-hover));
-    --xh-_pagination-selected-bg-active: var(--xh-_tone-active, var(--xh-bg-brand-active));
-    --xh-_pagination-selected-fg: var(--xh-_tone-on, var(--xh-fg-on-brand));
+    --xh-_pagination-selected-bg: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+    --xh-_pagination-selected-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-brand-subtle-hover));
+    --xh-_pagination-selected-bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-brand-subtle-active));
+    --xh-_pagination-selected-fg: var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle));
+    --xh-_pagination-selected-border: var(--xh-_tone-border-control, var(--xh-bg-brand));
     /* 当前页那一格是实心底，顶边画一条极浅的内高光把它衬出厚度（solid 面允许顶高光，经家族的 highlight 槽画） */
-    --xh-_pagination-highlight: var(--xh-_highlight-tone);
   }
 
   /* 根节点是 nav 地标，只负责把上一页 / 页码 / 下一页排成一行。
@@ -55,14 +57,16 @@
   .xh-scope-pagination:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
     --xh-icon-size: var(--xh-pagination-icon-size, var(--xh-glyph-size-sm));
     --xh-_pagination-item-size: var(--xh-control-h-sm);
-    --xh-_pagination-item-px: var(--xh-control-px-sm);
+    --xh-_pagination-item-px: var(--xh-space-1_5);
+    --xh-_pagination-jumper-px: var(--xh-control-px-sm);
     --xh-_pagination-font-size: var(--xh-control-font-sm);
   }
 
   .xh-scope-pagination:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
     --xh-icon-size: var(--xh-pagination-icon-size, var(--xh-glyph-size-lg));
     --xh-_pagination-item-size: var(--xh-control-h-lg);
-    --xh-_pagination-item-px: var(--xh-control-px-lg);
+    --xh-_pagination-item-px: var(--xh-space-2_5);
+    --xh-_pagination-jumper-px: var(--xh-control-px-lg);
     --xh-_pagination-font-size: var(--xh-control-font-lg);
   }
 
@@ -70,9 +74,9 @@
     display: none;
   }
 
-  /* 各类格子接 Action Control 的 text 档，缺省中性的 ghost 形态（只有 Button 品牌实心）：盒型、三档几何、
-     透明描边（省略号也占一条，两者内容盒等高，一行里对得齐）、悬停 100 → 按下 200（画布承载）、禁用面、按压缩放与
-     过渡都由家族给；这里只把使用者槽映射到桥接槽并保留分页自己的排版。
+  /* 各类格子接 Action Control 的 text 档（连接层投影 ghost 形态）：盒型、三档几何、禁用面、按压与过渡都由家族给。
+     分页把每一格画成描边方块：静息一道装饰边、透明底，悬停边加深一档、字转正文色，底走家族的承载面阶梯；
+     省略位也占同样一格，几种格子内容盒等高，一行里对得齐。这里把使用者槽映射到桥接槽并保留分页自己的排版。
      等宽的关键：1 与 10 的内容宽度不同，靠最小宽度把它们撑到同一格，行宽才不会随当前页左右抖动 */
   .xh-scope-pagination[data-part='first-trigger'],
   .xh-scope-pagination[data-part='prev-trigger'],
@@ -83,14 +87,19 @@
     --xh-action-min-inline-size: var(--xh-pagination-item-min-size, var(--xh-_pagination-item-size));
     --xh-action-visual-size: var(--xh-pagination-item-h, var(--xh-_pagination-item-size));
     --xh-action-padding-inline: var(--xh-pagination-item-px, var(--xh-_pagination-item-px));
-    --xh-action-radius: var(--xh-pagination-item-radius, var(--xh-shape-control));
+    --xh-action-radius: var(--xh-pagination-item-radius, var(--xh-shape-surface));
     --xh-action-font-size: var(--xh-pagination-font-size, var(--xh-_pagination-font-size));
     --xh-action-bg-rest: var(--xh-pagination-item-bg, var(--xh-_action-variant-bg-rest));
     --xh-action-bg-hover: var(--xh-pagination-item-bg-hover, var(--xh-_action-variant-bg-hover));
     --xh-action-bg-pressed: var(--xh-pagination-item-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-border-rest: var(--xh-pagination-item-border, var(--xh-border-default));
+    --xh-action-border-hover: var(--xh-pagination-item-border-hover, var(--xh-border-strong));
+    --xh-action-border-pressed: var(--xh-pagination-item-border-hover, var(--xh-border-strong));
+    --xh-action-border-focus-visible: var(--xh-pagination-item-border, var(--xh-border-default));
+    --xh-action-border-disabled: var(--xh-pagination-item-border, var(--xh-border-default));
     --xh-action-fg-rest: var(--xh-pagination-item-fg, var(--xh-_action-variant-fg-rest));
-    --xh-action-fg-hover: var(--xh-pagination-item-fg, var(--xh-_action-variant-fg-hover));
-    --xh-action-fg-pressed: var(--xh-pagination-item-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-hover: var(--xh-pagination-item-fg, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-pagination-item-fg, var(--xh-fg-default));
     /* 作者塞进翻页钮的图标按档取字形尺，与皮肤画的兜底字形同一把尺 */
     --xh-icon-size: var(--xh-pagination-icon-size, var(--xh-_action-profile-glyph-size));
 
@@ -112,10 +121,9 @@
   /* 到头那一侧的翻页钮是原生 disabled（不可聚焦、进不了 Tab 序列），连接层同时给 data-disabled，
      家族按 data-disabled 画禁用面（透明底 + --xh-fg-disabled）；整组 disabled 时页码与省略位同样如此 */
 
-  /* 当前页（格状当前）：data-current 与 aria-current='page' 由连接层成对给出，样式挂在 data 钩子上，
-     无障碍语义留给 aria。实心品牌面 + 配对前景、不加粗——字重一变字形就变宽，页码格子会跟着长一点，
-     正是这里要避免的抖动；悬停 / 按下沿 brand → brand-hover → brand-active 走，三态都经桥接槽交给家族画，
-     solid 面允许一条顶高光，环色改取面自己的前景 */
+  /* 当前页：data-current 与 aria-current='page' 由连接层成对给出，样式挂在 data 钩子上，无障碍语义留给 aria。
+     品牌描边 + 品牌淡底 + 淡底前景、不加粗——字重一变字形就变宽，页码格子会跟着长一点，正是这里要避免的抖动；
+     悬停 / 按下沿淡底 12% → 20% → 28% 走，边不变，三态都经桥接槽交给家族画 */
   .xh-scope-pagination[data-part='item'][data-current] {
     --xh-action-bg-rest: var(--xh-pagination-item-bg-selected, var(--xh-_pagination-selected-bg));
     --xh-action-bg-hover: var(--xh-pagination-item-bg-selected-hover, var(--xh-_pagination-selected-bg-hover));
@@ -125,22 +133,17 @@
     --xh-action-fg-hover: var(--xh-pagination-item-fg-selected, var(--xh-_pagination-selected-fg));
     --xh-action-fg-pressed: var(--xh-pagination-item-fg-selected, var(--xh-_pagination-selected-fg));
     --xh-action-fg-focus-visible: var(--xh-pagination-item-fg-selected, var(--xh-_pagination-selected-fg));
-    --xh-action-border-rest: var(--xh-pagination-item-border-selected, var(--xh-_pagination-selected-bg));
-    --xh-action-border-hover: var(--xh-pagination-item-border-selected-hover, var(--xh-_pagination-selected-bg-hover));
-    --xh-action-border-pressed: var(--xh-pagination-item-border-selected-active, var(--xh-_pagination-selected-bg-active));
-    --xh-action-border-focus-visible: var(--xh-pagination-item-border-selected, var(--xh-_pagination-selected-bg));
-    --xh-action-highlight-rest: var(--xh-_pagination-highlight);
-    --xh-action-highlight-hover: var(--xh-_pagination-highlight);
-    --xh-action-highlight-pressed: var(--xh-_pagination-highlight);
-    --xh-action-highlight-focus-visible: var(--xh-_pagination-highlight);
+    --xh-action-border-rest: var(--xh-pagination-item-border-selected, var(--xh-_pagination-selected-border));
+    --xh-action-border-hover: var(--xh-pagination-item-border-selected-hover, var(--xh-_pagination-selected-border));
+    --xh-action-border-pressed: var(--xh-pagination-item-border-selected-active, var(--xh-_pagination-selected-border));
+    --xh-action-border-focus-visible: var(--xh-pagination-item-border-selected, var(--xh-_pagination-selected-border));
     --xh-action-shadow-rest: var(--xh-pagination-item-shadow, none);
     --xh-action-shadow-hover: var(--xh-pagination-item-shadow, none);
     --xh-action-shadow-pressed: var(--xh-pagination-item-shadow, none);
     --xh-action-shadow-focus-visible: var(--xh-pagination-item-shadow, none);
-    --xh-action-ring-color-focus-visible: currentColor;
   }
 
-  /* 整组禁用时当前页不跟着透明：实心品牌面退成淡底、字取禁用色，格子仍标得出位置，又一眼看得出按不动 */
+  /* 整组禁用时当前页不跟着透明：品牌淡底退成中性淡底、字取禁用色，格子仍标得出位置，又一眼看得出按不动 */
   .xh-scope-pagination[data-part='item'][data-current][data-disabled] {
     --xh-action-bg-disabled: var(--xh-bg-subtle);
     --xh-action-border-disabled: var(--xh-bg-subtle);
@@ -192,7 +195,7 @@
      高度、内衬与圆角跟页码格子同一把尺，宽度按页码位数留够 */
   .xh-scope-pagination[data-part='jumper'] {
     --xh-field-control-height: var(--xh-pagination-item-h, var(--xh-_pagination-item-size));
-    --xh-field-control-padding-inline: var(--xh-pagination-item-px, var(--xh-_pagination-item-px));
+    --xh-field-control-padding-inline: var(--xh-pagination-item-px, var(--xh-_pagination-jumper-px));
     --xh-field-control-min-inline-size: 0;
     --xh-field-control-radius: var(--xh-pagination-item-radius, var(--xh-shape-control));
     --xh-field-bg-rest: var(--xh-pagination-jumper-bg, var(--xh-_field-variant-bg-rest));
@@ -203,8 +206,6 @@
     --xh-field-border-hover: var(--xh-pagination-jumper-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-pagination-jumper-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-pagination-jumper-border-invalid, var(--xh-_field-variant-border-invalid));
-    --xh-field-ring-focus: var(--xh-ring-focus);
-    --xh-field-ring-invalid: var(--xh-ring-invalid);
     --xh-field-shadow-rest: none;
 
     flex: none;
@@ -220,16 +221,12 @@
     display: none;
   }
 
-  /* 越界的页码（超出 1 到总页数）：浏览器的约束校验在用户动过之后判失败，与字段家族的校验失败同一副边与环。
+  /* 越界的页码（超出 1 到总页数）：浏览器的约束校验在用户动过之后判失败，与字段家族的校验失败同一副边。
      家族的失败档认 data-invalid，跳页框的取值不进状态机，失败由原生约束给出 */
   .xh-scope-pagination[data-part='jumper']:user-invalid {
     border-color: var(--xh-field-border-invalid, var(--xh-_field-variant-border-invalid));
   }
 
-  .xh-scope-pagination[data-part='jumper']:user-invalid:focus-within {
-    outline-color: var(--xh-field-ring-invalid, var(--xh-ring-invalid));
-  }
-
   /* 摊开省略位的定位层。三处坐标系必须同为 fixed：机器交给引擎的 strategy、
      连接层的内联 position、这里 —— 差一处就会算在错的坐标系里 */
   .xh-scope-pagination[data-part='positioner'] {

package/dist/css/password-input.css

@@ -31,8 +31,6 @@
     /* 提示与切换钮里的字形都比正文小一档，三个尺寸档各自换过，不是一个恒等的中转 */
     --xh-_password-input-caps-lock-font-size: var(--xh-control-caption-md);
     --xh-_password-input-trigger-font-size: var(--xh-control-caption-md);
-    /* 切换钮与输入之间那道线的长度：取钮高的一半，线的上下各留一截空白 */
-    --xh-_password-input-divider-h: 50%;
 
     /* 盒里有两个 Tab 停靠点，切换钮上再画一圈自己的环；环恒用 --xh-ring-focus，校验失败时随盒换红 */
     --xh-_password-input-ring: var(--xh-ring-focus);
@@ -77,13 +75,15 @@
 
   /* —— 标题 —— */
   .xh-scope-password-input[data-part='label'] {
-    color: var(--xh-password-input-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-password-input-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-password-input-label-gap, var(--xh-space-2)) - var(--xh-password-input-gap, var(--xh-space-1)));
+    color: var(--xh-password-input-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-password-input-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-password-input-label-font-weight, var(--xh-text-label-weight));
   }
 
   .xh-scope-password-input[data-part='label'][data-disabled] {
-    color: var(--xh-password-input-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-password-input-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* —— 一体式 control：输入框、切换钮与提示同框 —— */
@@ -104,8 +104,6 @@
     --xh-field-border-hover: var(--xh-password-input-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-password-input-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-password-input-control-border-invalid, var(--xh-_field-variant-border-invalid));
-    --xh-field-ring-focus: var(--xh-ring-focus);
-    --xh-field-ring-invalid: var(--xh-ring-invalid);
     --xh-field-shadow-rest: var(--xh-password-input-control-shadow, none);
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
     --xh-field-glyph-size: var(--xh-password-input-icon-size, var(--xh-_field-size-glyph-size));
@@ -131,8 +129,10 @@
   }
 
   /* —— 明暗切换钮 —— */
-  /* 正方视觉盒、inset 圆角、悬停 100 / 按下 200 与 0.97 按压、粗指针热区全由 Action Control 的
-     field-inset ghost 档给，组件只映射既有覆盖槽；常态只剩符号，符号取次级前景 */
+  /* inset 圆角、按承载面取的悬停 / 按下阶梯、粗指针热区全由 Action Control 的 field-inset ghost 档给，
+     组件只映射既有覆盖槽；常态只剩符号，符号取次级前景。
+     视觉盒按字段内钮尺寸表随字段档（sm 取控件内动作档、md 取 control-h-sm、lg 取 control-h-md），
+     由 field-inset 档按 data-xh-action-size 给：比字段矮一档，是框里的辅助动作、不与输入抢 */
   .xh-scope-password-input[data-part='visibility-trigger'] {
     --xh-action-visual-size: var(--xh-password-input-trigger-size, var(--xh-_action-profile-visual-size));
     --xh-action-min-inline-size: var(--xh-password-input-trigger-size, var(--xh-_action-profile-visual-size));
@@ -161,44 +161,7 @@
     display: none;
   }
 
-  /* 显隐动作与输入/状态区之间留一道半高分隔。::before 是兜底字形、::after 在粗指针下是家族给的
-     44px 热区，线只能落在 background-image 上：一条 1px × 半高的渐变贴在靠输入的那一侧，
-     不随按钮悬停底或圆角变化。background-position 是物理轴，RTL 另给两条换边。 */
-  .xh-scope-password-input[data-part='control']
-    > .xh-scope-password-input[data-part='visibility-trigger']:has(~ .xh-scope-password-input[data-part='input']),
-  .xh-scope-password-input[data-part='control']
-    > .xh-scope-password-input[data-part='input'] ~ .xh-scope-password-input[data-part='visibility-trigger'] {
-    background-image: linear-gradient(
-      var(--xh-password-input-visibility-trigger-separator-color, var(--xh-border-subtle)),
-      var(--xh-password-input-visibility-trigger-separator-color, var(--xh-border-subtle))
-    );
-    background-repeat: no-repeat;
-    background-size: var(--xh-stroke-thin) var(--xh-password-input-visibility-trigger-separator-h, var(--xh-_password-input-divider-h));
-  }
-
-  /* 钮排在输入之前：线贴在钮的逻辑末端 */
-  .xh-scope-password-input[data-part='control']
-    > .xh-scope-password-input[data-part='visibility-trigger']:has(~ .xh-scope-password-input[data-part='input']) {
-    background-position: 100% 50%;
-  }
-
-  [dir='rtl'] .xh-scope-password-input[data-part='control']
-    > .xh-scope-password-input[data-part='visibility-trigger']:has(~ .xh-scope-password-input[data-part='input']) {
-    background-position: 0 50%;
-  }
-
-  /* 钮排在输入之后：线贴在钮的逻辑起始侧 */
-  .xh-scope-password-input[data-part='control']
-    > .xh-scope-password-input[data-part='input'] ~ .xh-scope-password-input[data-part='visibility-trigger'] {
-    background-position: 0 50%;
-  }
-
-  [dir='rtl'] .xh-scope-password-input[data-part='control']
-    > .xh-scope-password-input[data-part='input'] ~ .xh-scope-password-input[data-part='visibility-trigger'] {
-    background-position: 100% 50%;
-  }
-
-  /* 盒里有两个 Tab 停靠点，盒子在 :focus-within 上画的那一圈两者完全一样，
+  /* 盒里有两个 Tab 停靠点，盒子在 :focus-within 上换的聚焦描边两者完全一样，
      分不出焦点在框里还是在钮上，所以钮上再画一圈自己的环（家族只对不占 Tab 位的内嵌钮关环）。
      环往内收，压在按钮自己的方框里，不与盒子外面那一圈叠在一起。
      指示焦点只能用环不能用底色：可用的几档底色压在盒底上都到不了 3:1，换了色也等于没画 */
@@ -338,29 +301,10 @@
     --xh-_password-input-strength-fg: var(--xh-fg-disabled);
   }
 
-  /* 高对比档整层丢弃 background-image，分隔线改用系统色重画，并关掉这一颗钮的强制换色 */
   @media (forced-colors: active) {
-    .xh-scope-password-input[data-part='control']
-      > .xh-scope-password-input[data-part='visibility-trigger']:has(~ .xh-scope-password-input[data-part='input']),
-    .xh-scope-password-input[data-part='control']
-      > .xh-scope-password-input[data-part='input'] ~ .xh-scope-password-input[data-part='visibility-trigger'] {
-      background-image: linear-gradient(CanvasText, CanvasText);
-      forced-color-adjust: none;
-    }
-
-    .xh-scope-password-input[data-part='control'][data-disabled]
-      > .xh-scope-password-input[data-part='visibility-trigger']:has(~ .xh-scope-password-input[data-part='input']),
-    .xh-scope-password-input[data-part='control'][data-disabled]
-      > .xh-scope-password-input[data-part='input'] ~ .xh-scope-password-input[data-part='visibility-trigger'] {
-      background-image: linear-gradient(GrayText, GrayText);
-    }
-
-    /* 关掉强制换色后，上面那圈自留的 :focus-visible 环与家族普通态的焦点底/字都会按作者色落地；
-       家族高对比块的特指度压不过它们，这里用同一选择器把环、底、字改回系统色 */
+    /* 钮上那圈自留的 :focus-visible 环取系统高亮色：家族高对比块的特指度压不过上面那条环规则 */
     .xh-scope-password-input[data-part='control'] [data-part='visibility-trigger']:where(.xh-scope-password-input):focus-visible {
       outline-color: Highlight;
-      background-color: ButtonFace;
-      color: ButtonText;
     }
   }
 

package/dist/css/pin-input.css

@@ -15,10 +15,11 @@
   /* 与文本框、数字框同一套堆叠：标签一行、格子一行。
      格子的描边、底、圆角、五态与悬停由 Field Chrome 家族按格子上的 data-variant 生成，皮肤不再声明形态三档 */
   .xh-scope-pin-input[data-part='root'] {
-    /* 尺寸档只换这三个私有槽，格子与分隔都从 root 继承它们，换档不必给每个部件各写一条选择器 */
-    --xh-_pin-input-box-size: var(--xh-control-box-md);
-    --xh-_pin-input-box-gap: var(--xh-control-gap-md);
-    --xh-_pin-input-box-font-size: var(--xh-text-heading-3-size);
+    /* 尺寸档只换这两个私有槽，格子与分隔都从 root 继承它们，换档不必给每个部件各写一条选择器。
+       格子边长取控件高档，与同一行里的字段等高；字号取控件字号档；格间距三档同为 --xh-space-1 */
+    --xh-_pin-input-box-size: var(--xh-control-h-md);
+    --xh-_pin-input-box-gap: var(--xh-space-1);
+    --xh-_pin-input-box-font-size: var(--xh-control-font-md);
     /* 填满态的强调色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回品牌色 */
     --xh-_pin-input-accent: var(--xh-_tone, var(--xh-bg-brand));
 
@@ -38,26 +39,25 @@
 
   /* —— 尺寸 —— */
   .xh-scope-pin-input[data-part='root'][data-size='sm'] {
-    --xh-_pin-input-box-size: var(--xh-control-box-sm);
-    --xh-_pin-input-box-gap: var(--xh-control-gap-sm);
-    --xh-_pin-input-box-font-size: var(--xh-control-font-lg);
+    --xh-_pin-input-box-size: var(--xh-control-h-sm);
+    --xh-_pin-input-box-font-size: var(--xh-control-font-sm);
   }
 
-  /* 格子是正方形，缺省档已经占到控件高度表的顶档，lg 档由顶档加一格间距合成，不另立数值 */
   .xh-scope-pin-input[data-part='root'][data-size='lg'] {
-    --xh-_pin-input-box-size: var(--xh-control-box-lg);
-    --xh-_pin-input-box-gap: var(--xh-control-gap-lg);
-    --xh-_pin-input-box-font-size: var(--xh-text-heading-2-size);
+    --xh-_pin-input-box-size: var(--xh-control-h-lg);
+    --xh-_pin-input-box-font-size: var(--xh-control-font-lg);
   }
 
   .xh-scope-pin-input[data-part='label'] {
-    color: var(--xh-pin-input-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-pin-input-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-pin-input-label-gap, var(--xh-space-2)) - var(--xh-pin-input-gap, var(--xh-space-1)));
+    color: var(--xh-pin-input-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-pin-input-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-pin-input-label-font-weight, var(--xh-text-label-weight));
   }
 
   .xh-scope-pin-input[data-part='label'][data-disabled] {
-    color: var(--xh-pin-input-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-pin-input-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 分段：连着的几格圈成一段。它只排版，格间距仍由格子自己的相邻兄弟规则给 */
@@ -109,8 +109,6 @@
     --xh-field-border-hover: var(--xh-pin-input-box-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-pin-input-box-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-pin-input-box-border-invalid, var(--xh-_field-variant-border-invalid));
-    --xh-field-ring-focus: var(--xh-ring-focus);
-    --xh-field-ring-invalid: var(--xh-ring-invalid);
     --xh-field-shadow-rest: var(--xh-pin-input-box-shadow, none);
 
     /* 一行放不下时逐格收窄，收不动就整行顶出屏幕。
@@ -141,19 +139,13 @@
     color: var(--xh-pin-input-placeholder-fg, var(--xh-fg-subtle));
   }
 
-  /* 一行格子长得一模一样，光标那道竖线太细，看不出正在填哪一格：
-     当前格必须有明显的环。data-focus 由机器给（它知道谁是当前格），
-     家族的 :focus-within 兜住机器状态还没回流的那一帧，两条同时写不冲突。
-     焦点边一律家族的 --xh-border-control-focus，不随 tone */
+  /* 一行格子长得一模一样，光标那道竖线太细，看不出正在填哪一格：当前格与字段外壳的聚焦态同一副面——
+     换承载面 + 聚焦描边，压在别的格子的字段淡底之间一眼分得出，不另画环（强制色档由家族补系统色环）。
+     data-focus 由机器给（它知道谁是当前格），家族的 :focus-within 兜住机器状态还没回流的那一帧，
+     两条同时写不冲突。焦点边一律家族的 --xh-border-control-focus，不随 tone */
   .xh-scope-pin-input[data-part='input'][data-focus] {
     border-color: var(--xh-pin-input-box-border-focus, var(--xh-_field-variant-border-focus));
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  /* 校验失败时环也跟着变红：两圈等宽相邻却一红一蓝，读的人不知道哪个才是当前状态 */
-  .xh-scope-pin-input[data-part='input'][data-invalid][data-focus] {
-    outline-color: var(--xh-ring-invalid);
+    background-color: var(--xh-_field-variant-bg-focus);
   }
 
   /* 填满只代表"格子都有字"，不代表"验证码对"，所以用品牌色而不是成功色收个尾。

package/dist/css/popconfirm.css

@@ -115,15 +115,19 @@
 
     /* 作者塞进面板里的图标按控件档取；两颗动作钮另由家族配方按 sm 档下发字形尺 */
     --xh-icon-size: var(--xh-popconfirm-icon-size, var(--xh-glyph-size-md));
-    /* 尺寸档只换这两个私有槽 */
-    --xh-_popconfirm-pad: var(--xh-surface-pad-md);
+    /* 尺寸档只换这三个私有槽：横向内衬比纵向高一档（缺省纵 12 横 16），与 popover 同一套 */
+    --xh-_popconfirm-py: var(--xh-surface-pad-md);
+    --xh-_popconfirm-px: var(--xh-surface-pad-lg);
     --xh-_popconfirm-max-w: var(--xh-overlay-max-w);
 
     position: relative;
     display: grid;
     grid-template-columns: 1fr auto auto;
     align-items: center;
-    gap: var(--xh-popconfirm-gap, var(--xh-space-2));
+    /* 行距与气泡族同一档：标题与说明之间只留 4px；两颗钮之间的列距另由 column-gap 放宽。
+       column-gap 写在 gap 之后，先回落到 gap 槽再取缺省：作者只写 --xh-popconfirm-gap 时行列一起跟着它走 */
+    gap: var(--xh-popconfirm-gap, var(--xh-space-1));
+    column-gap: var(--xh-popconfirm-column-gap, var(--xh-popconfirm-gap, var(--xh-space-2)));
     inline-size: max-content;
     /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的两颗钮就点不到了 */
     max-inline-size: min(var(--xh-popconfirm-max-w, var(--xh-_popconfirm-max-w)), var(--xh-_popconfirm-available-w));
@@ -132,8 +136,8 @@
     overflow-y: auto;
     /* 浮在页面之上的 Overlay 滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    padding-block: var(--xh-popconfirm-py, var(--xh-_popconfirm-pad));
-    padding-inline: var(--xh-popconfirm-px, var(--xh-_popconfirm-pad));
+    padding-block: var(--xh-popconfirm-py, var(--xh-_popconfirm-py));
+    padding-inline: var(--xh-popconfirm-px, var(--xh-_popconfirm-px));
     border-radius: var(--xh-popconfirm-radius, var(--xh-shape-overlay));
     pointer-events: auto;
     /* 进退场的缩放锚在贴着锚点的那条边上；两个分量由 positioner 按 placement 写进私有槽 */
@@ -171,32 +175,35 @@
   }
 
   /* —— 尺寸 —— */
-  /* 缺省档写在 content 的基础规则里；四边等宽的面板内衬三档取 surface-pad 那把尺 */
+  /* 缺省档写在 content 的基础规则里；内衬三档取 surface-pad 那把尺，横向始终比纵向高一档 */
   .xh-scope-popconfirm[data-part='content'][data-size='sm'] {
-    --xh-_popconfirm-pad: var(--xh-surface-pad-sm);
+    --xh-_popconfirm-py: var(--xh-surface-pad-sm);
+    --xh-_popconfirm-px: var(--xh-surface-pad-md);
     --xh-_popconfirm-max-w: var(--xh-overlay-max-w-sm);
   }
 
   .xh-scope-popconfirm[data-part='content'][data-size='lg'] {
-    --xh-_popconfirm-pad: var(--xh-surface-pad-lg);
+    --xh-_popconfirm-py: var(--xh-surface-pad-lg);
+    --xh-_popconfirm-px: var(--xh-surface-pad-xl);
     --xh-_popconfirm-max-w: var(--xh-overlay-max-w-lg);
   }
 
+  /* 气泡标题：14px / medium / 正文色 */
   .xh-scope-popconfirm[data-part='title'] {
     margin: 0;
     min-inline-size: 0;
     font-size: var(--xh-popconfirm-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-popconfirm-title-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-popconfirm-title-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-tight);
     overflow-wrap: anywhere;
     color: var(--xh-popconfirm-title-fg, var(--xh-material-frosted-fg));
   }
 
-  /* 说明文字走说明档：13px + fg-muted */
+  /* 说明就是气泡的正文：14px 正文字号 + fg-muted 次级色 */
   .xh-scope-popconfirm[data-part='description'] {
     margin: 0;
     min-inline-size: 0;
-    font-size: var(--xh-popconfirm-description-font-size, var(--xh-text-secondary-size));
+    font-size: var(--xh-popconfirm-description-font-size, var(--xh-text-body-size));
     line-height: var(--xh-leading-normal);
     overflow-wrap: anywhere;
     color: var(--xh-popconfirm-description-fg, var(--xh-fg-muted));
@@ -231,6 +238,8 @@
 
     /* 动作钮的文字与 Button 同一字重（家族配方不管字重） */
     font-weight: var(--xh-popconfirm-action-font-weight, var(--xh-text-label-weight));
+    /* 末行与上面的文字隔开：栅格行距只有标题与说明之间那 4px，钮再往下让 12px，文字与钮之间共 16px */
+    margin-block-start: var(--xh-popconfirm-action-mt, var(--xh-space-3));
   }
 
   /* 并排落在最后一行的右侧两格；取消在左、确认在右 */

package/dist/css/popover.css

@@ -108,15 +108,17 @@
     /* 作者塞进面板里的图标按控件档取；关闭钮另由家族配方按 sm 档下发字形尺 */
     --xh-icon-size: var(--xh-popover-icon-size, var(--xh-glyph-size-md));
 
-    /* 尺寸档只换这两个私有槽。popover 没有 root 部件，size 落在浮层树最外层的 content 上。
-       语气不接：面板是内容容器，语气该由里面的内容表达 */
-    --xh-_popover-pad: var(--xh-surface-pad-md);
+    /* 尺寸档只换这三个私有槽。popover 没有 root 部件，size 落在浮层树最外层的 content 上。
+       横向内衬比纵向高一档（缺省纵 12 横 16）。语气不接：面板是内容容器，语气该由里面的内容表达 */
+    --xh-_popover-py: var(--xh-surface-pad-md);
+    --xh-_popover-px: var(--xh-surface-pad-lg);
     --xh-_popover-max-w: var(--xh-overlay-max-w);
 
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--xh-popover-gap, var(--xh-space-2));
+    /* 标题与正文贴着排：两行之间只留 4px */
+    gap: var(--xh-popover-gap, var(--xh-space-1));
     inline-size: max-content;
     /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的内容就点不到了 */
     max-inline-size: min(var(--xh-popover-max-w, var(--xh-_popover-max-w)), var(--xh-_popover-available-w));
@@ -125,8 +127,8 @@
     overflow-y: auto;
     /* 浮在页面之上的 Overlay 滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    padding-block: var(--xh-popover-py, var(--xh-_popover-pad));
-    padding-inline: var(--xh-popover-px, var(--xh-_popover-pad));
+    padding-block: var(--xh-popover-py, var(--xh-_popover-py));
+    padding-inline: var(--xh-popover-px, var(--xh-_popover-px));
     border-radius: var(--xh-popover-radius, var(--xh-shape-overlay));
     pointer-events: auto;
     /* 进退场的缩放锚在贴着锚点的那条边上；两个分量由 positioner 按 placement 写进私有槽 */
@@ -155,28 +157,32 @@
   }
 
   /* —— 尺寸 —— */
-  /* 缺省档写在 content 的基础规则里；四边等宽的面板内衬三档取 surface-pad 那把尺 */
+  /* 缺省档写在 content 的基础规则里；内衬三档取 surface-pad 那把尺，横向始终比纵向高一档 */
   .xh-scope-popover[data-part='content'][data-size='sm'] {
-    --xh-_popover-pad: var(--xh-surface-pad-sm);
+    --xh-_popover-py: var(--xh-surface-pad-sm);
+    --xh-_popover-px: var(--xh-surface-pad-md);
     --xh-_popover-max-w: var(--xh-overlay-max-w-sm);
   }
 
   .xh-scope-popover[data-part='content'][data-size='lg'] {
-    --xh-_popover-pad: var(--xh-surface-pad-lg);
+    --xh-_popover-py: var(--xh-surface-pad-lg);
+    --xh-_popover-px: var(--xh-surface-pad-xl);
     --xh-_popover-max-w: var(--xh-overlay-max-w-lg);
   }
 
+  /* 气泡标题：14px / medium / 正文色 */
   .xh-scope-popover[data-part='title'] {
     margin: 0;
     font-size: var(--xh-popover-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-popover-title-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-popover-title-font-weight, var(--xh-font-weight-medium));
     color: var(--xh-popover-title-fg, var(--xh-material-frosted-fg));
   }
 
-  /* 说明文字走说明档：13px + fg-muted */
+  /* 说明就是气泡的正文：14px 正文字号 + fg-muted 次级色 */
   .xh-scope-popover[data-part='description'] {
     margin: 0;
-    font-size: var(--xh-popover-description-font-size, var(--xh-text-secondary-size));
+    font-size: var(--xh-popover-description-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-normal);
     color: var(--xh-popover-description-fg, var(--xh-fg-muted));
   }
 

package/dist/css/progress.css

@@ -38,10 +38,10 @@
     --xh-progress-skin: 1;
   }
 
-  /* 私有槽位：组件令牌 → 中档字面量两级回退。厚度写在 root 上而不是 track 上，
-     尺寸档才改得动一处就够，track 靠继承拿到值。 */
+  /* 私有槽位：组件令牌 → 中档两级回退。厚度写在 root 上而不是 track 上，
+     尺寸档才改得动一处就够，track 靠继承拿到值。线形是一条细轨，按轨道厚度三档取 sm / md / lg = 3 / 4 / 8px */
   .xh-scope-progress[data-part='root'] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness-md));
 
     /* 目标刻度与环形的刻度值按根落位 */
     position: relative;
@@ -58,7 +58,8 @@
     inline-size: 100%;
     block-size: var(--xh-_progress-thickness);
     border-radius: var(--xh-progress-track-radius, var(--xh-shape-pill));
-    background: var(--xh-progress-track, var(--xh-bg-subtle-active));
+    /* 底槽取淡底阶梯的 200 档（--xh-bg-subtle-hover），环形的底槽同一支 */
+    background: var(--xh-progress-track, var(--xh-bg-subtle-hover));
   }
 
   /* 语气槽由 root 上的 data-tone 声明、经继承发下来；没写 data-tone 时退回原来的品牌色。
@@ -136,11 +137,11 @@
   /* —— 尺寸 —— */
   /* 线形只有厚度分档；中间档不写规则，缺省即中档 */
   .xh-scope-progress[data-part='root'][data-size='sm'] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-1));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness-sm));
   }
 
   .xh-scope-progress[data-part='root'][data-size='lg'] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-2));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness-lg));
   }
 
   /* —— 环形 —— */
@@ -176,10 +177,10 @@
     block-size: 100%;
   }
 
-  /* 环心文字：占位不撑格子，长内容自己换行由作者定 */
+  /* 环心文字：12px 次级色，占位不撑格子，长内容自己换行由作者定 */
   .xh-scope-progress[data-part='label'] {
-    color: var(--xh-progress-label-fg, var(--xh-fg-default));
-    font-size: var(--xh-progress-label-font-size, var(--xh-text-body-size));
+    color: var(--xh-progress-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-progress-label-font-size, var(--xh-text-caption-size));
     line-height: var(--xh-leading-none);
     text-align: center;
   }
@@ -188,7 +189,7 @@
      底槽不跟着语气换族：只有已完成的那段换色，才读得出"完成了多少" */
   .xh-scope-progress[data-part='track'][data-variant='circle'],
   .xh-scope-progress[data-part='track'][data-variant='dashboard'] {
-    stroke: var(--xh-progress-track, var(--xh-bg-subtle-active));
+    stroke: var(--xh-progress-track, var(--xh-bg-subtle-hover));
   }
 
   .xh-scope-progress[data-part='range'][data-variant='circle'],
@@ -204,16 +205,16 @@
   /* 子弹图：有分段时轨道加厚一档，填充收窄成中间一条压在色带上，色带在填充两侧照样读得出。
      三档厚度各比普通线形高一档，阶梯次序不变 */
   .xh-scope-progress[data-part='root'][data-variant='line'][data-banded] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-3));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-band-thickness-md));
     --xh-_progress-range-size: 50%;
   }
 
   .xh-scope-progress[data-part='root'][data-variant='line'][data-banded][data-size='sm'] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-2));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-band-thickness-sm));
   }
 
   .xh-scope-progress[data-part='root'][data-variant='line'][data-banded][data-size='lg'] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-4));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-band-thickness-lg));
   }
 
   /* 色带取本段语气的淡色：同一族颜色里填充是实色、色带浅一档，读得出填充落在哪一段 */

package/dist/css/prompt-input.css

@@ -15,12 +15,12 @@
     --xh-prompt-input-skin: 1;
   }
 
-  /* root 就是视觉盒：描边、底色、圆角、聚焦环、悬停与禁用面由 Field Chrome 家族画在它身上（静息描边式：
-     canvas 底 + --xh-border-control 描边 + 无影，不用 soft，登记的例外只在 8px surface 圆角），内部 textarea
+  /* root 就是视觉盒：描边、底色、圆角、聚焦面、悬停与禁用面由 Field Chrome 家族画在它身上（静息描边式：
+     字段淡底 + --xh-border-control 描边 + 无影，聚焦换承载面底 + 品牌描边、不画环；登记的例外只在 surface 圆角），内部 textarea
      无边框；align-items: flex-end 让按钮随输入框长高贴着底边。
      三个视觉轴都落在 root 上：形态三档由家族按 data-variant 生成，语气管用哪族颜色，尺寸管高度与字号 */
   .xh-scope-prompt-input[data-part='root'] {
-    /* 圆角可由使用者槽切换，家族只过渡底、描边、影与环 */
+    /* 圆角可由使用者槽切换，家族只过渡底、描边与影 */
     transition: border-radius var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
     /* 尺寸缺省档：不写 data-size 时按中档走 */
     --xh-_prompt-input-h: var(--xh-control-h-md);