@xihan-ui/styles 3.1.0 → 4.0.0

package/css/page-header.css

@@ -5,6 +5,9 @@
 
 /* 定义 page header 样式。 */
 
+/* 返回钮接动作钮家族：独立引入本皮肤时同样带上家族配方，full bundle 递归去重。 */
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='page-header'] {
@@ -14,16 +17,17 @@
   [data-scope='page-header'][data-part='root'] {
     /* 尺寸档只换这三个私有槽，各段从根上继承它们，换档不必给每个部件各写一条选择器 */
     --xh-_page-header-py: var(--xh-space-4);
-    --xh-_page-header-row-gap: var(--xh-space-2);
-    --xh-_page-header-title-size: var(--xh-text-heading-3-size);
+    --xh-_page-header-row-gap: var(--xh-space-1);
+    --xh-_page-header-title-size: var(--xh-text-heading-2-size);
     /* 形态档只换这两个：不画面的那一档左右不留内衬、也不切圆角 */
     --xh-_page-header-px: 0;
     --xh-_page-header-radius: 0;
 
-    /* 返回、媒体、标题区与操作区分列；标题与说明上下排列。 */
+    /* 返回、媒体、标题、副标题与操作区分列：副标题跟在标题后面同一行，中间一条竖线隔开。
+       标题列按内容宽、但能收到 0，副标题列至少留下竖线与一个字：不可断的长标题在列内断行，不把页头撑出容器 */
     display: grid;
     grid-auto-flow: dense;
-    grid-template-columns: auto auto minmax(0, 1fr) auto;
+    grid-template-columns: auto auto minmax(0, max-content) minmax(min-content, 1fr) auto;
     align-items: center;
     row-gap: var(--xh-page-header-row-gap, var(--xh-_page-header-row-gap));
     padding-block: var(--xh-page-header-py, var(--xh-_page-header-py));
@@ -40,21 +44,26 @@
   /* —— 尺寸 —— */
   [data-scope='page-header'][data-part='root'][data-size='sm'] {
     --xh-_page-header-py: var(--xh-space-3);
-    --xh-_page-header-row-gap: var(--xh-space-1);
+    --xh-_page-header-row-gap: var(--xh-space-0_5);
     --xh-_page-header-title-size: var(--xh-control-font-lg);
   }
 
   [data-scope='page-header'][data-part='root'][data-size='lg'] {
     --xh-_page-header-py: var(--xh-space-6);
-    --xh-_page-header-row-gap: var(--xh-space-3);
-    --xh-_page-header-title-size: var(--xh-text-heading-2-size);
+    --xh-_page-header-row-gap: var(--xh-space-2);
+    --xh-_page-header-title-size: var(--xh-text-heading-1-size);
+  }
+
+  /* 带面包屑的缺省档上下收一档：面包屑本身已在标题之上占了一行 */
+  [data-scope='page-header'][data-part='root']:not([data-size='sm'], [data-size='lg']):has(> [data-part='breadcrumb']) {
+    --xh-_page-header-py: var(--xh-space-3);
   }
 
   /* —— 分隔线 —— */
   /* 只有贴底的 ghost 画这条下边线：一块切了圆角的面底下横一条直线，两头会露在圆角外面，
      有面的两档由自己的边界接手同一件事——把页头与下面的内容分开 */
   [data-scope='page-header'][data-part='root'][data-variant='ghost'][data-split] {
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-page-header-border, var(--xh-border-subtle));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-page-header-border, var(--xh-border-default));
   }
 
   /* —— 形态 —— */
@@ -96,13 +105,14 @@
     justify-content: center;
   }
 
-  /* 返回位只摆位置与对齐，外观归作者自己的按钮 */
+  /* 返回位是 icon ghost 档的动作钮：盒与三态面由家族给，这里只摆位置并把字色压到次级前景 */
   [data-scope='page-header'][data-part='back-trigger'] {
+    --xh-action-fg-rest: var(--xh-page-header-back-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-page-header-back-fg-hover, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-page-header-back-fg-hover, var(--xh-fg-default));
+
     grid-column: 1;
     margin-inline-end: var(--xh-page-header-column-gap, var(--xh-space-3));
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
   }
 
   [data-scope='page-header'][data-part='title'] {
@@ -115,23 +125,36 @@
     color: var(--xh-page-header-title-fg, var(--xh-fg-default));
     font-size: var(--xh-page-header-title-font-size, var(--xh-_page-header-title-size));
     /* 页面级标题：字重走标题档令牌，不直接下探字重原语 */
-    font-weight: var(--xh-page-header-title-font-weight, var(--xh-text-heading-3-weight));
+    font-weight: var(--xh-page-header-title-font-weight, var(--xh-text-heading-2-weight));
     line-height: var(--xh-leading-tight);
   }
 
-  /* 副标题吃掉标题与操作之间的剩余宽度，长文本在这里收窄换行 */
+  /* 副标题跟在标题后面、吃掉到操作区之间的剩余宽度，长文本在这里收窄换行；
+     与标题之间一条 1 × 16px 的竖线，两侧各 12px */
   [data-scope='page-header'][data-part='description'] {
-    grid-column: 3;
+    grid-column: 4;
+    display: flex;
+    align-items: center;
     margin: 0;
     min-inline-size: 0;
-    color: var(--xh-page-header-description-fg, var(--xh-fg-muted));
-    font-size: var(--xh-page-header-description-font-size, var(--xh-text-secondary-size));
+    color: var(--xh-page-header-description-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-page-header-description-font-size, var(--xh-text-body-size));
     line-height: var(--xh-leading-normal);
   }
 
+  [data-scope='page-header'][data-part='title'] + [data-scope='page-header'][data-part='description']::before {
+    content: '';
+    flex: none;
+    align-self: center;
+    inline-size: var(--xh-stroke-thin);
+    block-size: var(--xh-glyph-size-sm);
+    margin-inline: var(--xh-space-3);
+    background: var(--xh-page-header-divider, var(--xh-border-default));
+  }
+
   /* 操作区贴到行尾，没有副标题占位时也一样靠边 */
   [data-scope='page-header'][data-part='extra'] {
-    grid-column: 4;
+    grid-column: 5;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -140,21 +163,17 @@
     justify-self: end;
   }
 
-  /* 页脚占满一整行，前面有内容时自然被挤到下一行 */
+  /* 页脚占满一整行，前面有内容时自然被挤到下一行；与标题行之间再让出 12px */
   [data-scope='page-header'][data-part='footer'] {
     grid-column: 1 / -1;
+    margin-block-start: var(--xh-space-3);
     color: var(--xh-page-header-footer-fg, var(--xh-fg-muted));
     font-size: var(--xh-page-header-footer-font-size, var(--xh-text-secondary-size));
     line-height: var(--xh-leading-normal);
   }
 
-  [data-scope='page-header'][data-part='root']:has(> [data-part='description'])
-    > :is([data-part='back-trigger'], [data-part='media'], [data-part='extra']) {
-    grid-row: span 2;
-  }
-
-  /* 窄于 sm 断点时标题区占满第二列、操作区换到下一行。写成 min-width 的补集：640px 本身归宽档，
-     与其余皮肤在同一宽度切换 */
+  /* 窄于 sm 断点时标题区占满第二列、副标题回到标题下一行、操作区换到再下一行。
+     写成 min-width 的补集：640px 本身归宽档，与其余皮肤在同一宽度切换 */
   @media not all and (min-width: 640px) {
     [data-scope='page-header'][data-part='root'] {
       grid-template-columns: auto minmax(0, 1fr);
@@ -166,7 +185,16 @@
       grid-column: 2;
     }
 
-    [data-scope='page-header'][data-part='root'] > [data-part='extra'] {
+    [data-scope='page-header'][data-part='title'] + [data-scope='page-header'][data-part='description']::before {
+      display: none;
+    }
+
+    [data-scope='page-header'][data-part='root']:has(> [data-part='description'])
+      > :is([data-part='back-trigger'], [data-part='media']):where([data-scope='page-header']) {
+      grid-row: span 2;
+    }
+
+    [data-scope='page-header'][data-part='root'] > [data-part='extra']:where([data-scope='page-header']) {
       grid-column: 1 / -1;
       grid-row: auto;
       margin-inline-start: 0;
@@ -174,10 +202,19 @@
     }
   }
 
+  /* 强制色：标题与副标题之间的竖线是底色画的，系统换掉底色线就消失，改写 CanvasText */
+  @media (forced-colors: active) {
+    [data-scope='page-header'][data-part='title'] + [data-scope='page-header'][data-part='description']::before {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+  }
+
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   [data-scope='page-header'][data-part='back-trigger'][hidden],
   [data-scope='page-header'][data-part='media'][hidden],
+  [data-scope='page-header'][data-part='description'][hidden],
   [data-scope='page-header'][data-part='extra'][hidden] {
     display: none;
   }

package/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 @@
   [data-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);
   }
 
   [data-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 的内容宽度不同，靠最小宽度把它们撑到同一格，行宽才不会随当前页左右抖动 */
   [data-scope='pagination'][data-part='first-trigger'],
   [data-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% 走，边不变，三态都经桥接槽交给家族画 */
   [data-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;
   }
 
-  /* 整组禁用时当前页不跟着透明：实心品牌面退成淡底、字取禁用色，格子仍标得出位置，又一眼看得出按不动 */
+  /* 整组禁用时当前页不跟着透明：品牌淡底退成中性淡底、字取禁用色，格子仍标得出位置，又一眼看得出按不动 */
   [data-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 @@
      高度、内衬与圆角跟页码格子同一把尺，宽度按页码位数留够 */
   [data-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，跳页框的取值不进状态机，失败由原生约束给出 */
   [data-scope='pagination'][data-part='jumper']:user-invalid {
     border-color: var(--xh-field-border-invalid, var(--xh-_field-variant-border-invalid));
   }
 
-  [data-scope='pagination'][data-part='jumper']:user-invalid:focus-within {
-    outline-color: var(--xh-field-ring-invalid, var(--xh-ring-invalid));
-  }
-
   /* 摊开省略位的定位层。三处坐标系必须同为 fixed：机器交给引擎的 strategy、
      连接层的内联 position、这里 —— 差一处就会算在错的坐标系里 */
   [data-scope='pagination'][data-part='positioner'] {

package/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 @@
 
   /* —— 标题 —— */
   [data-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));
   }
 
   [data-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 给：比字段矮一档，是框里的辅助动作、不与输入抢 */
   [data-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,48 +161,11 @@
     display: none;
   }
 
-  /* 显隐动作与输入/状态区之间留一道半高分隔。::before 是兜底字形、::after 在粗指针下是家族给的
-     44px 热区，线只能落在 background-image 上：一条 1px × 半高的渐变贴在靠输入的那一侧，
-     不随按钮悬停底或圆角变化。background-position 是物理轴，RTL 另给两条换边。 */
-  [data-scope='password-input'][data-part='control']
-    > [data-scope='password-input'][data-part='visibility-trigger']:has(~ [data-scope='password-input'][data-part='input']),
-  [data-scope='password-input'][data-part='control']
-    > [data-scope='password-input'][data-part='input'] ~ [data-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));
-  }
-
-  /* 钮排在输入之前：线贴在钮的逻辑末端 */
-  [data-scope='password-input'][data-part='control']
-    > [data-scope='password-input'][data-part='visibility-trigger']:has(~ [data-scope='password-input'][data-part='input']) {
-    background-position: 100% 50%;
-  }
-
-  [dir='rtl'] [data-scope='password-input'][data-part='control']
-    > [data-scope='password-input'][data-part='visibility-trigger']:has(~ [data-scope='password-input'][data-part='input']) {
-    background-position: 0 50%;
-  }
-
-  /* 钮排在输入之后：线贴在钮的逻辑起始侧 */
-  [data-scope='password-input'][data-part='control']
-    > [data-scope='password-input'][data-part='input'] ~ [data-scope='password-input'][data-part='visibility-trigger'] {
-    background-position: 0 50%;
-  }
-
-  [dir='rtl'] [data-scope='password-input'][data-part='control']
-    > [data-scope='password-input'][data-part='input'] ~ [data-scope='password-input'][data-part='visibility-trigger'] {
-    background-position: 100% 50%;
-  }
-
-  /* 盒里有两个 Tab 停靠点，盒子在 :focus-within 上画的那一圈两者完全一样，
+  /* 盒里有两个 Tab 停靠点，盒子在 :focus-within 上换的聚焦描边两者完全一样，
      分不出焦点在框里还是在钮上，所以钮上再画一圈自己的环（家族只对不占 Tab 位的内嵌钮关环）。
      环往内收，压在按钮自己的方框里，不与盒子外面那一圈叠在一起。
      指示焦点只能用环不能用底色：可用的几档底色压在盒底上都到不了 3:1，换了色也等于没画 */
-  [data-scope='password-input'][data-part='control'] [data-part='visibility-trigger']:focus-visible {
+  [data-scope='password-input'][data-part='control'] [data-part='visibility-trigger']:where([data-scope='password-input']):focus-visible {
     outline: var(--xh-ring-width) solid var(--xh-_password-input-ring);
     outline-offset: var(--xh-ring-offset);
   }
@@ -338,29 +301,10 @@
     --xh-_password-input-strength-fg: var(--xh-fg-disabled);
   }
 
-  /* 高对比档整层丢弃 background-image，分隔线改用系统色重画，并关掉这一颗钮的强制换色 */
   @media (forced-colors: active) {
-    [data-scope='password-input'][data-part='control']
-      > [data-scope='password-input'][data-part='visibility-trigger']:has(~ [data-scope='password-input'][data-part='input']),
-    [data-scope='password-input'][data-part='control']
-      > [data-scope='password-input'][data-part='input'] ~ [data-scope='password-input'][data-part='visibility-trigger'] {
-      background-image: linear-gradient(CanvasText, CanvasText);
-      forced-color-adjust: none;
-    }
-
-    [data-scope='password-input'][data-part='control'][data-disabled]
-      > [data-scope='password-input'][data-part='visibility-trigger']:has(~ [data-scope='password-input'][data-part='input']),
-    [data-scope='password-input'][data-part='control'][data-disabled]
-      > [data-scope='password-input'][data-part='input'] ~ [data-scope='password-input'][data-part='visibility-trigger'] {
-      background-image: linear-gradient(GrayText, GrayText);
-    }
-
-    /* 关掉强制换色后，上面那圈自留的 :focus-visible 环与家族普通态的焦点底/字都会按作者色落地；
-       家族高对比块的特指度压不过它们，这里用同一选择器把环、底、字改回系统色 */
-    [data-scope='password-input'][data-part='control'] [data-part='visibility-trigger']:focus-visible {
+    /* 钮上那圈自留的 :focus-visible 环取系统高亮色：家族高对比块的特指度压不过上面那条环规则 */
+    [data-scope='password-input'][data-part='control'] [data-part='visibility-trigger']:where([data-scope='password-input']):focus-visible {
       outline-color: Highlight;
-      background-color: ButtonFace;
-      color: ButtonText;
     }
   }
 

package/css/pin-input.css

@@ -15,10 +15,11 @@
   /* 与文本框、数字框同一套堆叠：标签一行、格子一行。
      格子的描边、底、圆角、五态与悬停由 Field Chrome 家族按格子上的 data-variant 生成，皮肤不再声明形态三档 */
   [data-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 @@
 
   /* —— 尺寸 —— */
   [data-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 档由顶档加一格间距合成，不另立数值 */
   [data-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);
   }
 
   [data-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));
   }
 
   [data-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 */
   [data-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);
-  }
-
-  /* 校验失败时环也跟着变红：两圈等宽相邻却一红一蓝，读的人不知道哪个才是当前状态 */
-  [data-scope='pin-input'][data-part='input'][data-invalid][data-focus] {
-    outline-color: var(--xh-ring-invalid);
+    background-color: var(--xh-_field-variant-bg-focus);
   }
 
   /* 填满只代表"格子都有字"，不代表"验证码对"，所以用品牌色而不是成功色收个尾。