@xihan-ui/styles 3.2.0 → 4.0.0

package/dist/css/notification.css

@@ -12,11 +12,12 @@
 @import '../family/loading-ring.css';
 
 @layer xihan.motion {
-  /* 叠放的一摞：新卡片从视口边缘外进入，同时落到自己的折叠层级。整幅位移取令牌，减弱动效下归零，只剩淡入 */
+  /* 叠放的一摞：新卡片从叠放外沿推进来一小段（--xh-motion-distance-lg），同时淡入、落到自己的折叠层级。
+     位移不取整卡高：一句话的轻提示整张推进来又快又远，读起来是一下猛冲；减弱动效下位移归零，只剩淡入 */
   @keyframes xh-notification-stack-in {
     from {
       opacity: var(--xh-_enter-from-opacity, 0);
-      translate: 0 calc(var(--xh-_notification-stack-dir, 1) * (var(--xh-_notification-offset, 0px) - var(--xh-motion-travel)));
+      translate: 0 calc(var(--xh-_notification-stack-dir, 1) * (var(--xh-_notification-offset, 0px) - var(--xh-_notification-travel, var(--xh-motion-distance-lg))));
       scale: var(--xh-notification-stack-scale, var(--xh-_notification-stack-scale));
     }
 
@@ -36,7 +37,7 @@
 
     to {
       opacity: 0;
-      translate: 0 calc(var(--xh-_notification-stack-dir, 1) * (var(--xh-_notification-y, 0px) - var(--xh-motion-travel)));
+      translate: 0 calc(var(--xh-_notification-stack-dir, 1) * (var(--xh-_notification-y, 0px) - var(--xh-_notification-travel, var(--xh-motion-distance-lg))));
       scale: var(--xh-_notification-scale, 1);
     }
   }
@@ -142,7 +143,7 @@
    */
   .xh-scope-notification[data-part='group'][data-stacked] {
     inset: auto;
-    inline-size: min(var(--xh-notification-item-w, var(--xh-overlay-max-w-lg)), calc(100vw - var(--xh-space-8)));
+    inline-size: min(var(--xh-notification-item-w, var(--xh-overlay-notification-w)), calc(100vw - var(--xh-space-8)));
     block-size: 0;
     padding: 0;
   }
@@ -218,8 +219,9 @@
   /*
    * 一张通知：底与描边一律中性，面走 sheet 三件套（--xh-material-elevated-bg / -border / -shadow，
    * 亮暗两档同有 1px 描边）。两种预设共用这张面，排版分开写在下面：
-   * 卡片是两列网格，左列一枚类型字形、右列「标题 + 说明 + 操作」、叉钉在右上角；
-   * 轻提示是一行，行首字形、文本列、操作钮与叉依次排开。
+   * 卡片是两列网格，左列一枚 24px 类型字形、右列「标题 + 说明 + 操作」、叉钉在右上角，
+   * 缺省宽 300px、四边内衬 20px（--xh-overlay-notification-p，紧凑 16px）、浮层圆角；
+   * 轻提示是一行，行首字形、文本列、操作钮与叉依次排开，圆角取 control、内衬纵 10 横 16。
    *
    * 卡片的槽带 item 段（--xh-notification-item-*），与摞的 --xh-notification-inset 分开。
    */
@@ -235,12 +237,12 @@
     align-items: start;
     column-gap: var(--xh-notification-item-gap, var(--xh-space-3));
     row-gap: var(--xh-notification-item-row-gap, var(--xh-space-2));
-    inline-size: var(--xh-notification-item-w, var(--xh-overlay-max-w-lg));
+    inline-size: var(--xh-notification-item-w, var(--xh-overlay-notification-w));
     /* 摞是整面视口宽的定位面且带内边距，取 100% 就等于自动让出两侧留白，
        窄屏上不必再算一遍 viewport 减法 */
     max-inline-size: 100%;
-    padding-block: var(--xh-notification-item-py, var(--xh-surface-pad-lg));
-    padding-inline: var(--xh-notification-item-px, var(--xh-surface-pad-lg));
+    padding-block: var(--xh-notification-item-py, var(--xh-overlay-notification-p));
+    padding-inline: var(--xh-notification-item-px, var(--xh-overlay-notification-p));
     border: var(--xh-stroke-thin) solid var(--xh-notification-item-border, var(--xh-material-elevated-border));
     border-radius: var(--xh-notification-item-radius, var(--xh-shape-overlay));
     background: var(--xh-notification-item-bg, var(--xh-material-elevated-bg));
@@ -251,8 +253,8 @@
     /* 摞的定位面整面铺开且不吃指针，卡片必须自己吃回来：
        悬停按住计时、按钮可点、焦点进出，全指着这一条 */
     pointer-events: auto;
-    /* 换位：一张卡收起或新卡插进来时，列表动效先按旧位置反向补偿，再由这条过渡带回新位置 */
-    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+    /* 换位（一张卡收起、被挤掉或新卡插进来）由列表动效在 transform 上播一段：时长读 move、曲线读 continuous，
+       与进退场关键帧的 translate 叠加，这里不写过渡。叠成一摞时另有自己的过渡清单（见下） */
   }
 
   /* 轻提示：一行排开，行首那一格贴着内容盒的起始角，文本列与两颗钮在行里垂直居中。
@@ -263,8 +265,10 @@
     align-items: flex-start;
     column-gap: var(--xh-notification-item-gap, var(--xh-space-2));
     inline-size: var(--xh-notification-item-w, var(--xh-overlay-toast-w));
-    padding-block: var(--xh-notification-item-py, var(--xh-space-3));
+    padding-block: var(--xh-notification-item-py, var(--xh-space-2_5));
     padding-inline: var(--xh-notification-item-px, var(--xh-space-4));
+    /* 一行短消息不是一块面板，形状取 control */
+    border-radius: var(--xh-notification-item-radius, var(--xh-shape-control));
     font-size: var(--xh-notification-item-font-size, var(--xh-text-label-size));
     /* 叠摞几何常驻：单独摆放时是恒等位移与比例，放进叠放的一摞后由那边换成层深，
        两处用同一套画法，卡片进出一摞时栅格不跳 */
@@ -301,6 +305,53 @@
     animation: xh-sheet-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
+  /* 还在台上就被移出队列的卡片（超出上限被挤掉、dismiss / dismissAll 直接删）没有自己的退场，
+     列表动效在原处放一个替身（data-state="closed"），同一条退场播完即撤 */
+  .xh-scope-notification[data-part='item'][data-state='closed'] {
+    animation: xh-sheet-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /*
+   * 逐条排开的卡片预设：从所贴的那条边整张推进来，边推边淡入——贴行尾的从行尾进、贴行首的从行首进，
+   * 居中的三个位从各自贴的那条边（顶 / 底）进，中线那一行只上浮一小段。位移是卡片自身的整宽或整高
+   * （--xh-motion-travel），减弱动效下归零，只剩淡入。退场只淡出，不往回推：空位由换位把后面的卡平滑收拢。
+   * 方向从所在那一摞的 data-placement 选过来，九个位是固定的枚举
+   */
+  .xh-scope-notification[data-part='group']:not([data-stacked]) .xh-scope-notification[data-part='item'][data-preset='card'] {
+    --xh-_enter-from-opacity: 0;
+    --xh-_slide-from-x: 0;
+    --xh-_slide-from-y: var(--xh-motion-distance-lg);
+  }
+
+  .xh-scope-notification[data-part='group']:not([data-stacked])[data-placement$='-end'] .xh-scope-notification[data-part='item'][data-preset='card'] {
+    --xh-_slide-from-x: calc(var(--xh-motion-travel) * var(--xh-direction-sign));
+    --xh-_slide-from-y: 0;
+  }
+
+  .xh-scope-notification[data-part='group']:not([data-stacked])[data-placement$='-start'] .xh-scope-notification[data-part='item'][data-preset='card'] {
+    --xh-_slide-from-x: calc(var(--xh-motion-travel) * var(--xh-direction-sign) * -1);
+    --xh-_slide-from-y: 0;
+  }
+
+  .xh-scope-notification[data-part='group']:not([data-stacked])[data-placement='top'] .xh-scope-notification[data-part='item'][data-preset='card'] {
+    --xh-_slide-from-y: calc(var(--xh-motion-travel) * -1);
+  }
+
+  .xh-scope-notification[data-part='group']:not([data-stacked])[data-placement='bottom'] .xh-scope-notification[data-part='item'][data-preset='card'] {
+    --xh-_slide-from-y: var(--xh-motion-travel);
+  }
+
+  .xh-scope-notification[data-part='group']:not([data-stacked]) .xh-scope-notification[data-part='item'][data-preset='card'][data-state='visible'] {
+    animation:
+      xh-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards,
+      xh-slide-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter) backwards;
+    animation-delay: calc(var(--xh-_stagger-index, 0) * var(--xh-motion-stagger-step));
+  }
+
+  .xh-scope-notification[data-part='group']:not([data-stacked]) .xh-scope-notification[data-part='item'][data-preset='card']:is([data-state='dismissing'], [data-state='closed']) {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
   /*
    * 叠放的一摞：最新一条在最前，后层按层深逐层收拢——层深由叠摞测量写进来，每往后一层乘一次
    * --xh-motion-scale-stack；减弱动效下那支令牌为 1，层与层只靠位移分开。
@@ -310,6 +361,7 @@
     --xh-_notification-stack-scale: max(0, 1 - var(--xh-_notification-depth, 0) * (1 - var(--xh-motion-scale-stack)));
     --xh-_notification-y: var(--xh-_notification-offset, 0px);
     --xh-_notification-scale: var(--xh-notification-stack-scale, var(--xh-_notification-stack-scale));
+    --xh-_notification-travel: var(--xh-motion-distance-lg);
 
     position: absolute;
     inset-inline: 0;
@@ -347,6 +399,12 @@
     animation: xh-notification-stack-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
+  /* 后层的卡片（到时先走的旧条目）与被挤掉的那条的替身原地淡出：它们压在最前那张后面，
+     再沿叠放方向退就会从前面那张底下穿过去。叠摞测量在它开始退场时已把它移出排位，其余几条同时补上来 */
+  .xh-scope-notification[data-part='group'][data-stacked] .xh-scope-notification[data-part='item']:is([data-state='dismissing']:not([data-frontmost]), [data-state='closed']) {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
   /* 收拢的后层只露出一截边：高度压成最前那一条，内容淡出，免得几层字叠在一起 */
   .xh-scope-notification[data-part='group'][data-stacked] .xh-scope-notification[data-part='item'][data-stack-index]:not([data-frontmost]):not([data-expanded]) {
     block-size: var(--xh-_notification-front-height, auto);
@@ -394,7 +452,7 @@
   .xh-scope-notification[data-part='item'][data-preset='toast']::after {
     content: '';
     position: absolute;
-    inset-block-start: var(--xh-notification-item-py, var(--xh-space-3));
+    inset-block-start: var(--xh-notification-item-py, var(--xh-space-2_5));
     inset-inline-start: var(--xh-notification-item-px, var(--xh-space-4));
     inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
     block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
@@ -431,9 +489,11 @@
   }
 
   /* 卡片：独占第一列第一行，并与标题首行顶对齐：盒高取一行标题的行高，
-     字形在盒里居中，标题字号改了也不会错位 */
+     字形在盒里居中，标题字号改了也不会错位。卡片的类型字形 24px，与 16px 标题的一行（24px）同高 */
   .xh-scope-notification[data-part='item-indicator'] {
-    --xh-icon-size: var(--xh-notification-indicator-size, var(--xh-glyph-size-md));
+    --xh-icon-size: var(--xh-notification-indicator-size, var(--xh-glyph-size-lg));
+    /* 加载环随语气色（加载环配方缺省取品牌色），与语气字形同一支 */
+    --xh-_loading-ring-fg: var(--xh-notification-indicator-fg, var(--xh-_tone-fg));
 
     grid-column: 1;
     grid-row: 1;
@@ -441,13 +501,15 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    block-size: calc(var(--xh-notification-title-font-size, var(--xh-text-label-size)) * var(--xh-leading-tight));
-    inline-size: var(--xh-notification-indicator-size, var(--xh-glyph-size-md));
+    block-size: calc(var(--xh-notification-title-font-size, var(--xh-text-heading-3-size)) * var(--xh-leading-normal));
+    inline-size: var(--xh-notification-indicator-size, var(--xh-glyph-size-lg));
     color: var(--xh-notification-indicator-fg, var(--xh-_tone-fg));
   }
 
-  /* 轻提示：方盒自带一圈内衬，与间距合起来让出字形到正文的那段距离 */
+  /* 轻提示：字形取 md 档 20px；方盒自带一圈内衬，与间距合起来让出字形到正文的那段距离 */
   .xh-scope-notification[data-part='item'][data-preset='toast'] [data-part='item-indicator']:where(.xh-scope-notification) {
+    --xh-icon-size: var(--xh-notification-indicator-size, var(--xh-glyph-size-md));
+
     flex: none;
     box-sizing: content-box;
     inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
@@ -523,19 +585,24 @@
     display: none;
   }
 
+  /* 卡片标题：面板标题档、正文色，一行 24px 与左列字形同高 */
   .xh-scope-notification[data-part='item-title'] {
     /* 作者可能把它写成 h2/p，外边距得先归零，否则卡片内的行距对不上 */
     margin: 0;
     color: var(--xh-notification-title-fg, var(--xh-fg-default));
-    font-size: var(--xh-notification-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-notification-title-font-weight, var(--xh-font-weight-semibold));
-    line-height: var(--xh-notification-title-leading, var(--xh-leading-tight));
+    font-size: var(--xh-notification-title-font-size, var(--xh-text-heading-3-size));
+    font-weight: var(--xh-notification-title-font-weight, var(--xh-text-heading-3-weight));
+    line-height: var(--xh-notification-title-leading, var(--xh-leading-normal));
   }
 
-  /* 轻提示的语气落到标题与行首字形：一句话的结果，颜色本身就是信息 */
+  /* 轻提示的语气落到标题与行首字形：一句话的结果，颜色本身就是信息。
+     一行短消息取正文 14px / medium，不用卡片的面板标题档 */
   .xh-scope-notification[data-part='item'][data-preset='toast'] [data-part='item-title']:where(.xh-scope-notification) {
     min-inline-size: 0;
     color: var(--xh-notification-title-fg, var(--xh-_tone-fg));
+    font-size: var(--xh-notification-title-font-size, var(--xh-text-body-size));
+    font-weight: var(--xh-notification-title-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-notification-title-leading, var(--xh-leading-tight));
   }
 
   /* 卡片的叉钉在右上角，标题得给它让位；说明与操作在第二行往下，不受影响。
@@ -555,13 +622,16 @@
     max-block-size: var(--xh-notification-description-max-h, var(--xh-viewport-h-md));
     overflow-y: auto;
     overscroll-behavior: contain;
-    color: var(--xh-notification-description-fg, var(--xh-fg-muted));
-    font-size: var(--xh-notification-description-font-size, var(--xh-text-secondary-size));
+    /* 卡片的说明就是正文：14px 正文色 */
+    color: var(--xh-notification-description-fg, var(--xh-fg-default));
+    font-size: var(--xh-notification-description-font-size, var(--xh-text-body-size));
   }
 
-  /* 轻提示的说明只是一行短上下文，行高收紧到正文之下 */
+  /* 轻提示的说明只是一行短上下文：说明档 13px 次级色，行高收紧到正文之下 */
   .xh-scope-notification[data-part='item'][data-preset='toast'] [data-part='item-description']:where(.xh-scope-notification) {
     min-inline-size: 0;
+    color: var(--xh-notification-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-notification-description-font-size, var(--xh-text-secondary-size));
     line-height: var(--xh-notification-description-leading, var(--xh-leading-normal));
   }
 
@@ -669,8 +739,9 @@
     display: none;
   }
 
-  /* 关闭钮是只有字形的离散动作钮：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、禁用面全由 Action Control
-     的 icon ghost 档给（卡片投 sm：32px 正方盒；轻提示投 xs：24px，走行级动作钮那一档），组件只映射既有使用者槽。
+  /* 关闭钮是只有字形的离散动作钮：盒几何、悬停 / 按下与按压、粗指针热区、焦点环、禁用面全由 Action Control
+     的 icon ghost 档给（卡片投 sm；轻提示投 xs，走行级动作钮那一档），组件只映射既有使用者槽。
+     叉一律 12px（--xh-glyph-size-xs），比钮的随档字形低一档。
      静息透明，sheet 白面承载 hover 100 → pressed 200，写了语气时悬停底跟着语气走（--xh-_tone-subtle） */
   .xh-scope-notification[data-part='item-close-trigger'] {
     --xh-action-visual-size: var(--xh-notification-close-size, var(--xh-_action-profile-visual-size));
@@ -687,14 +758,26 @@
     --xh-action-shadow-rest: none;
     --xh-action-shadow-hover: none;
     --xh-action-shadow-pressed: none;
-    /* 叉的字形按钮档取值，与行首那枚 md 档的类型字形分开 */
-    --xh-icon-size: var(--xh-notification-icon-size, var(--xh-_action-profile-glyph-size));
+    /* 叉的字形与行首那枚类型字形分开取尺 */
+    --xh-icon-size: var(--xh-notification-icon-size, var(--xh-glyph-size-xs));
   }
 
-  /* 卡片：钉在右上角的内衬处，不参与网格排布——留在流里它会变成正文下面的第三行 */
+  /* 卡片：钉在右上角，不参与网格排布——留在流里它会变成正文下面的第三行。
+     距右取面内动作的内缩；竖向与标题首行同一条中线：上内衬加上「标题行高 − 钮边长」的一半
+     （舒适档 20 + (24 − 28) / 2 = 18、紧凑档 16 + (24 − 24) / 2 = 16），作者改了贴边槽仍按它两向一起贴 */
   .xh-scope-notification[data-part='item'][data-preset='card'] [data-part='item-close-trigger']:where(.xh-scope-notification) {
     position: absolute;
-    inset-block-start: var(--xh-notification-close-inset, var(--xh-surface-action-inset));
+    inset-block-start: var(
+      --xh-notification-close-inset,
+      calc(
+        var(--xh-notification-item-py, var(--xh-overlay-notification-p)) +
+        (
+          var(--xh-notification-title-font-size, var(--xh-text-heading-3-size)) *
+          var(--xh-notification-title-leading, var(--xh-leading-normal)) -
+          var(--xh-notification-close-size, var(--xh-control-h-sm))
+        ) / 2
+      )
+    );
     inset-inline-end: var(--xh-notification-close-inset, var(--xh-surface-action-inset));
   }
 

package/dist/css/number-animation.css

@@ -35,10 +35,10 @@
   }
 
   .xh-scope-number-animation[data-part='root'][data-size='md'] {
-    --xh-_number-animation-size: var(--xh-text-heading-2-size);
+    --xh-_number-animation-size: var(--xh-text-heading-1-size);
   }
 
   .xh-scope-number-animation[data-part='root'][data-size='lg'] {
-    --xh-_number-animation-size: var(--xh-text-heading-1-size);
+    --xh-_number-animation-size: var(--xh-text-display-size);
   }
 }

package/dist/css/number-field.css

@@ -28,9 +28,8 @@
     --xh-_number-field-gap: 0;
     --xh-_number-field-font-size: var(--xh-control-font-md);
     --xh-_number-field-trigger-font-size: var(--xh-control-font-md);
-
-    /* 盒内那道分隔线的长度：取钮高的一半，线的上下各留一截空白，不与钮等高 */
-    --xh-_number-field-divider-h: 50%;
+    /* 精细指针下上下叠放的两颗钮离盒边的内收：sm 档盒矮，收半档，两颗钮与 md 档等高 */
+    --xh-_number-field-stepper-inset: var(--xh-space-1);
 
     display: inline-flex;
     flex-direction: column;
@@ -56,6 +55,7 @@
     --xh-_number-field-px: var(--xh-control-px-sm);
     --xh-_number-field-font-size: var(--xh-control-font-sm);
     --xh-_number-field-trigger-font-size: var(--xh-control-font-sm);
+    --xh-_number-field-stepper-inset: var(--xh-space-0_5);
   }
 
   .xh-scope-number-field[data-part='root'][data-size='lg'] {
@@ -67,13 +67,15 @@
   }
 
   .xh-scope-number-field[data-part='label'] {
-    color: var(--xh-number-field-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-number-field-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-number-field-label-gap, var(--xh-space-2)) - var(--xh-number-field-gap, var(--xh-space-1)));
+    color: var(--xh-number-field-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-number-field-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-number-field-label-font-weight, var(--xh-text-label-weight));
   }
 
   .xh-scope-number-field[data-part='label'][data-disabled] {
-    color: var(--xh-number-field-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-number-field-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* —— 一体式 control：输入框与加减钮同框 —— */
@@ -96,8 +98,6 @@
     --xh-field-border-hover: var(--xh-number-field-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-number-field-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-number-field-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-number-field-control-shadow, none);
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
     --xh-field-glyph-size: var(--xh-number-field-icon-size, var(--xh-_field-size-glyph-size));
@@ -119,7 +119,7 @@
   }
 
   /* 盒内 input：无边框无底无圆角无落影由家族重置，观感全归 control。
-     数字居中排在两个按钮之间，行内内衬留给它自己（control 不给内衬）；
+     数字从起始缘排起，与同一列里别的字段的文字对齐，行内内衬留给它自己（control 不给内衬）；
      前后缀图标/文字直接流式排在 input 两侧，不用再绝对定位 */
   .xh-scope-number-field[data-part='control'] [data-part='input']:where(.xh-scope-number-field) {
     --xh-field-input-fg: var(--xh-number-field-input-fg, var(--xh-fg-default));
@@ -131,12 +131,13 @@
     inline-size: var(--xh-number-field-input-w, 5em);
     padding-inline: var(--xh-number-field-input-px, var(--xh-_number-field-px));
     font-variant-numeric: tabular-nums;
-    text-align: var(--xh-number-field-input-align, center);
+    text-align: var(--xh-number-field-input-align, start);
   }
 
-  /* 盒内按钮：正方视觉盒、inset 圆角、悬停 100 / 按下 200 与 0.97 按压、粗指针热区与
-     :focus-visible 关环全由 Action Control 的 field-inset ghost 档给，组件只映射既有覆盖槽。
-     常态只剩符号，符号取默认前景，悬停与按下才浮出底色 */
+  /* 盒内按钮：正方视觉盒、inset 圆角、按承载面取的悬停 / 按下阶梯、粗指针热区与 :focus-visible 关环
+     全由 Action Control 的 field-inset ghost 档给，组件只映射既有覆盖槽。
+     常态只剩符号，符号取次要前景（钮是辅助动作，不与数字抢层级），悬停与按下才浮出底色。
+     可悬停的精细指针下平时收起、悬停或聚焦字段时显出（家族 hover-focus 档），并改成上下叠放，见下 */
   .xh-scope-number-field[data-part='control'] [data-part='increment-trigger']:where(.xh-scope-number-field),
   .xh-scope-number-field[data-part='control'] [data-part='decrement-trigger']:where(.xh-scope-number-field) {
     --xh-action-visual-size: var(--xh-number-field-trigger-size, var(--xh-_action-profile-visual-size));
@@ -144,7 +145,7 @@
     --xh-action-radius: var(--xh-number-field-trigger-radius, var(--xh-shape-inset));
     /* 底色阶梯由 ghost 档给（透明 → 100 → 200），使用者槽只作覆盖入口 */
     --xh-action-bg-pressed: var(--xh-number-field-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
-    --xh-action-fg-rest: var(--xh-number-field-trigger-fg, var(--xh-fg-default));
+    --xh-action-fg-rest: var(--xh-number-field-trigger-fg, var(--xh-fg-muted));
     --xh-action-fg-hover: var(--xh-number-field-trigger-fg-hover, var(--xh-fg-default));
     --xh-action-border-rest: transparent;
     --xh-action-highlight-rest: transparent;
@@ -172,25 +173,6 @@
     display: none;
   }
 
-  /* 右侧动作组与输入之间的细线：把「按的」与「填的」分成两块。
-     线不画在钮的边框上：边框会跟着钮的圆角与悬停底走，而这道线要独立于钮的各态，长度也短于钮自己。
-     ::before 已被兜底字形占着，::after 在粗指针下是家族给的 44px 热区，几何只能落在
-     background-image 上：一条 1px × 半高的渐变贴在逻辑起始侧，底色换态时它仍叠在上层。
-     线只画在动作组第一颗减钮的逻辑起始侧；background-position 是物理轴，RTL 另给一条换边。 */
-  .xh-scope-number-field[data-part='control']:has([data-part='input']) [data-part='decrement-trigger']:where(.xh-scope-number-field) {
-    background-image: linear-gradient(
-      var(--xh-number-field-trigger-divider, var(--xh-material-soft-separator)),
-      var(--xh-number-field-trigger-divider, var(--xh-material-soft-separator))
-    );
-    background-repeat: no-repeat;
-    background-position: 0 50%;
-    background-size: var(--xh-stroke-thin) var(--xh-number-field-trigger-divider-h, var(--xh-_number-field-divider-h));
-  }
-
-  [dir='rtl'] .xh-scope-number-field[data-part='control']:has([data-part='input']) [data-part='decrement-trigger']:where(.xh-scope-number-field) {
-    background-position: 100% 50%;
-  }
-
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
   .xh-scope-number-field[data-part='control'] [data-part='increment-trigger']:where(.xh-scope-number-field):empty::before {
     content: '';
@@ -214,11 +196,52 @@
     mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
   }
 
-  /* 高对比档整层丢弃 background-image，分隔线改用系统色重画，并关掉这一颗钮的强制换色 */
-  @media (forced-colors: active) {
-    .xh-scope-number-field[data-part='control']:has([data-part='input']) [data-part='decrement-trigger']:where(.xh-scope-number-field) {
-      background-image: linear-gradient(ButtonText, ButtonText);
-      forced-color-adjust: none;
+  /* 可悬停的精细指针：两颗钮上下叠在盒的逻辑末端，各占盒高一半（四周内收一截），宽取指示符大档；
+     显出时铺一层淡底，悬停 / 按下沿淡底阶梯升一档、两档，字形换成上下箭头、取指示符最小档：
+     一颗钮只有盒内高的一半减内收（sm / md 11px，紧凑 9px），小档 12px 的字形会比钮高出一截。
+     两颗钮共边相接，按下只换面不缩放。钮浮在盒上、不占流：盒的末端让出钮那一截，
+     输入与后缀不会排到钮底下，钮收起时也不跳。粗指针与不能悬停的设备仍是两颗正方钮横排在末端、常显，
+     那里一颗叠放的钮只有半个控件高，够不着触控目标尺寸 */
+  @media (hover: hover) and (pointer: fine) {
+    .xh-scope-number-field[data-part='control']:has([data-part='increment-trigger'], [data-part='decrement-trigger']) {
+      padding-inline-end: calc(
+        var(--xh-number-field-stepper-w, var(--xh-control-indicator-lg))
+        + 2 * var(--xh-number-field-stepper-inset, var(--xh-_number-field-stepper-inset))
+      );
+    }
+
+    .xh-scope-number-field[data-part='control'] [data-part='increment-trigger']:where(.xh-scope-number-field),
+    .xh-scope-number-field[data-part='control'] [data-part='decrement-trigger']:where(.xh-scope-number-field) {
+      --xh-action-bg-rest: var(--xh-number-field-stepper-bg, var(--xh-bg-subtle));
+      --xh-action-bg-hover: var(--xh-number-field-stepper-bg-hover, var(--xh-bg-subtle-hover));
+      --xh-action-bg-pressed: var(--xh-number-field-trigger-bg-active, var(--xh-bg-subtle-active));
+      --xh-action-bg-disabled: var(--xh-number-field-stepper-bg, var(--xh-bg-subtle));
+      --xh-action-scale-pressed: none;
+      --xh-icon-size: var(--xh-control-indicator-xs);
+
+      position: absolute;
+      inset-inline-end: var(--xh-number-field-stepper-inset, var(--xh-_number-field-stepper-inset));
+      inline-size: var(--xh-number-field-stepper-w, var(--xh-control-indicator-lg));
+      min-inline-size: 0;
+      block-size: calc(50% - var(--xh-number-field-stepper-inset, var(--xh-_number-field-stepper-inset)));
+    }
+
+    .xh-scope-number-field[data-part='control'] [data-part='increment-trigger']:where(.xh-scope-number-field) {
+      inset-block-start: var(--xh-number-field-stepper-inset, var(--xh-_number-field-stepper-inset));
+    }
+
+    .xh-scope-number-field[data-part='control'] [data-part='decrement-trigger']:where(.xh-scope-number-field) {
+      inset-block-end: var(--xh-number-field-stepper-inset, var(--xh-_number-field-stepper-inset));
+    }
+
+    .xh-scope-number-field[data-part='control'] [data-part='increment-trigger']:where(.xh-scope-number-field):empty::before {
+      -webkit-mask-image: var(--xh-glyph-mark-chevron-up);
+      mask-image: var(--xh-glyph-mark-chevron-up);
+    }
+
+    .xh-scope-number-field[data-part='control'] [data-part='decrement-trigger']:where(.xh-scope-number-field):empty::before {
+      -webkit-mask-image: var(--xh-glyph-mark-chevron-down);
+      mask-image: var(--xh-glyph-mark-chevron-down);
     }
   }
 

package/dist/css/page-header.css

@@ -5,6 +5,9 @@
 
 /* 定义 page header 样式。 */
 
+/* 返回钮接动作钮家族：独立引入本皮肤时同样带上家族配方，full bundle 递归去重。 */
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   .xh-scope-page-header {
@@ -14,16 +17,17 @@
   .xh-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 @@
   /* —— 尺寸 —— */
   .xh-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);
   }
 
   .xh-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);
+  }
+
+  /* 带面包屑的缺省档上下收一档：面包屑本身已在标题之上占了一行 */
+  .xh-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 画这条下边线：一块切了圆角的面底下横一条直线，两头会露在圆角外面，
      有面的两档由自己的边界接手同一件事——把页头与下面的内容分开 */
   .xh-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 档的动作钮：盒与三态面由家族给，这里只摆位置并把字色压到次级前景 */
   .xh-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;
   }
 
   .xh-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 */
   .xh-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);
   }
 
+  .xh-scope-page-header[data-part='title'] + .xh-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));
+  }
+
   /* 操作区贴到行尾，没有副标题占位时也一样靠边 */
   .xh-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 */
   .xh-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);
   }
 
-  .xh-scope-page-header[data-part='root']:has(> [data-part='description'])
-    > :is([data-part='back-trigger'], [data-part='media'], [data-part='extra']):where(.xh-scope-page-header) {
-    grid-row: span 2;
-  }
-
-  /* 窄于 sm 断点时标题区占满第二列、操作区换到下一行。写成 min-width 的补集：640px 本身归宽档，
-     与其余皮肤在同一宽度切换 */
+  /* 窄于 sm 断点时标题区占满第二列、副标题回到标题下一行、操作区换到再下一行。
+     写成 min-width 的补集：640px 本身归宽档，与其余皮肤在同一宽度切换 */
   @media not all and (min-width: 640px) {
     .xh-scope-page-header[data-part='root'] {
       grid-template-columns: auto minmax(0, 1fr);
@@ -166,6 +185,15 @@
       grid-column: 2;
     }
 
+    .xh-scope-page-header[data-part='title'] + .xh-scope-page-header[data-part='description']::before {
+      display: none;
+    }
+
+    .xh-scope-page-header[data-part='root']:has(> [data-part='description'])
+      > :is([data-part='back-trigger'], [data-part='media']):where(.xh-scope-page-header) {
+      grid-row: span 2;
+    }
+
     .xh-scope-page-header[data-part='root'] > [data-part='extra']:where(.xh-scope-page-header) {
       grid-column: 1 / -1;
       grid-row: auto;
@@ -174,10 +202,19 @@
     }
   }
 
+  /* 强制色：标题与副标题之间的竖线是底色画的，系统换掉底色线就消失，改写 CanvasText */
+  @media (forced-colors: active) {
+    .xh-scope-page-header[data-part='title'] + .xh-scope-page-header[data-part='description']::before {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+  }
+
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   .xh-scope-page-header[data-part='back-trigger'][hidden],
   .xh-scope-page-header[data-part='media'][hidden],
+  .xh-scope-page-header[data-part='description'][hidden],
   .xh-scope-page-header[data-part='extra'][hidden] {
     display: none;
   }