@xihan-ui/styles 3.1.0 → 4.0.0

package/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 @@
    */
   [data-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"），同一条退场播完即撤 */
+  [data-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 选过来，九个位是固定的枚举
+   */
+  [data-scope='notification'][data-part='group']:not([data-stacked]) [data-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);
+  }
+
+  [data-scope='notification'][data-part='group']:not([data-stacked])[data-placement$='-end'] [data-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;
+  }
+
+  [data-scope='notification'][data-part='group']:not([data-stacked])[data-placement$='-start'] [data-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;
+  }
+
+  [data-scope='notification'][data-part='group']:not([data-stacked])[data-placement='top'] [data-scope='notification'][data-part='item'][data-preset='card'] {
+    --xh-_slide-from-y: calc(var(--xh-motion-travel) * -1);
+  }
+
+  [data-scope='notification'][data-part='group']:not([data-stacked])[data-placement='bottom'] [data-scope='notification'][data-part='item'][data-preset='card'] {
+    --xh-_slide-from-y: var(--xh-motion-travel);
+  }
+
+  [data-scope='notification'][data-part='group']:not([data-stacked]) [data-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));
+  }
+
+  [data-scope='notification'][data-part='group']:not([data-stacked]) [data-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;
   }
 
+  /* 后层的卡片（到时先走的旧条目）与被挤掉的那条的替身原地淡出：它们压在最前那张后面，
+     再沿叠放方向退就会从前面那张底下穿过去。叠摞测量在它开始退场时已把它移出排位，其余几条同时补上来 */
+  [data-scope='notification'][data-part='group'][data-stacked] [data-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;
+  }
+
   /* 收拢的后层只露出一截边：高度压成最前那一条，内容淡出，免得几层字叠在一起 */
   [data-scope='notification'][data-part='group'][data-stacked] [data-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 @@
   [data-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）同高 */
   [data-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));
   }
 
-  /* 轻提示：方盒自带一圈内衬，与间距合起来让出字形到正文的那段距离 */
-  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-indicator'] {
+  /* 轻提示：字形取 md 档 20px；方盒自带一圈内衬，与间距合起来让出字形到正文的那段距离 */
+  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-indicator']:where([data-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));
@@ -484,17 +546,17 @@
     transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  [data-scope='notification'][data-part='item'][data-tone='success'] [data-part='item-indicator']:empty::after {
+  [data-scope='notification'][data-part='item'][data-tone='success'] [data-part='item-indicator']:where([data-scope='notification']):empty::after {
     -webkit-mask-image: var(--xh-glyph-mark-check);
     mask-image: var(--xh-glyph-mark-check);
   }
 
-  [data-scope='notification'][data-part='item'][data-tone='warning'] [data-part='item-indicator']:empty::after {
+  [data-scope='notification'][data-part='item'][data-tone='warning'] [data-part='item-indicator']:where([data-scope='notification']):empty::after {
     -webkit-mask-image: var(--xh-glyph-mark-warning);
     mask-image: var(--xh-glyph-mark-warning);
   }
 
-  [data-scope='notification'][data-part='item'][data-tone='danger'] [data-part='item-indicator']:empty::after {
+  [data-scope='notification'][data-part='item'][data-tone='danger'] [data-part='item-indicator']:where([data-scope='notification']):empty::after {
     -webkit-mask-image: var(--xh-glyph-mark-close);
     mask-image: var(--xh-glyph-mark-close);
   }
@@ -513,7 +575,7 @@
     min-inline-size: 0;
   }
 
-  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-content'] {
+  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-content']:where([data-scope='notification']) {
     flex: 1 1 auto;
     align-self: center;
     row-gap: 0;
@@ -523,24 +585,29 @@
     display: none;
   }
 
+  /* 卡片标题：面板标题档、正文色，一行 24px 与左列字形同高 */
   [data-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));
   }
 
-  /* 轻提示的语气落到标题与行首字形：一句话的结果，颜色本身就是信息 */
-  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-title'] {
+  /* 轻提示的语气落到标题与行首字形：一句话的结果，颜色本身就是信息。
+     一行短消息取正文 14px / medium，不用卡片的面板标题档 */
+  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-title']:where([data-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));
   }
 
   /* 卡片的叉钉在右上角，标题得给它让位；说明与操作在第二行往下，不受影响。
      让位量与叉的贴边取同一个值，作者改了贴边槽，标题让出的那段跟着走 */
-  [data-scope='notification'][data-part='item'][data-preset='card']:has([data-part='item-close-trigger']) [data-part='item-title'] {
+  [data-scope='notification'][data-part='item'][data-preset='card']:has([data-part='item-close-trigger']) [data-part='item-title']:where([data-scope='notification']) {
     padding-inline-end: calc(
       var(--xh-notification-close-size, var(--xh-control-h-sm)) +
       var(--xh-notification-close-inset, var(--xh-surface-action-inset))
@@ -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));
   }
 
-  /* 轻提示的说明只是一行短上下文，行高收紧到正文之下 */
-  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-description'] {
+  /* 轻提示的说明只是一行短上下文：说明档 13px 次级色，行高收紧到正文之下 */
+  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-description']:where([data-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));
   }
 
@@ -595,7 +665,7 @@
   }
 
   /* 卡片：横跨整张卡片的一行，它不是正文的一部分，不跟着第二列走；两端取胶囊 */
-  [data-scope='notification'][data-part='item'][data-preset='card'] [data-part='item-progress'] {
+  [data-scope='notification'][data-part='item'][data-preset='card'] [data-part='item-progress']:where([data-scope='notification']) {
     --xh-_countdown-radius: var(--xh-notification-progress-radius, var(--xh-shape-pill));
 
     grid-column: 1 / -1;
@@ -603,7 +673,7 @@
   }
 
   /* 轻提示：贴着卡片底边走 */
-  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-progress'] {
+  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-progress']:where([data-scope='notification']) {
     position: absolute;
     inset-block-end: 0;
     inset-inline-start: 0;
@@ -621,7 +691,7 @@
     animation-timing-function: steps(var(--xh-_notification-progress-steps, 1), end);
   }
 
-  [data-scope='notification'][data-part='item'][data-paused] [data-part='item-progress'] {
+  [data-scope='notification'][data-part='item'][data-paused] [data-part='item-progress']:where([data-scope='notification']) {
     animation-play-state: paused;
   }
 
@@ -659,7 +729,7 @@
   }
 
   /* 轻提示是单行 flex，按钮不参与伸缩：文案长了该换行的是文字 */
-  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-action-trigger'] {
+  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-action-trigger']:where([data-scope='notification']) {
     flex: none;
     align-self: center;
   }
@@ -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） */
   [data-scope='notification'][data-part='item-close-trigger'] {
     --xh-action-visual-size: var(--xh-notification-close-size, var(--xh-_action-profile-visual-size));
@@ -687,19 +758,31 @@
     --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));
   }
 
-  /* 卡片：钉在右上角的内衬处，不参与网格排布——留在流里它会变成正文下面的第三行 */
-  [data-scope='notification'][data-part='item'][data-preset='card'] [data-part='item-close-trigger'] {
+  /* 卡片：钉在右上角，不参与网格排布——留在流里它会变成正文下面的第三行。
+     距右取面内动作的内缩；竖向与标题首行同一条中线：上内衬加上「标题行高 − 钮边长」的一半
+     （舒适档 20 + (24 − 28) / 2 = 18、紧凑档 16 + (24 − 24) / 2 = 16），作者改了贴边槽仍按它两向一起贴 */
+  [data-scope='notification'][data-part='item'][data-preset='card'] [data-part='item-close-trigger']:where([data-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));
   }
 
   /* 轻提示：排在一行短消息的行尾，与文本列一起垂直居中 */
-  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-close-trigger'] {
+  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-close-trigger']:where([data-scope='notification']) {
     flex: none;
     align-self: center;
   }
@@ -708,13 +791,13 @@
      hover-focus 显示策略：那一档用 visibility 收起，这颗叉占 Tab 位，收成 visibility: hidden
      后键盘就够不到它了；这里只压 opacity 与 pointer-events，焦点仍能落进来 */
   @media (hover: hover) {
-    [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-close-trigger'] {
+    [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-close-trigger']:where([data-scope='notification']) {
       opacity: 0;
       pointer-events: none;
     }
 
-    [data-scope='notification'][data-part='item'][data-preset='toast']:hover [data-part='item-close-trigger'],
-    [data-scope='notification'][data-part='item'][data-preset='toast']:focus-within [data-part='item-close-trigger'] {
+    [data-scope='notification'][data-part='item'][data-preset='toast']:hover [data-part='item-close-trigger']:where([data-scope='notification']),
+    [data-scope='notification'][data-part='item'][data-preset='toast']:focus-within [data-part='item-close-trigger']:where([data-scope='notification']) {
       opacity: 1;
       pointer-events: auto;
     }
@@ -722,7 +805,7 @@
 
   /* 收拢的后层只允许最前一条露出关闭入口；触屏没有 hover，必须显式收起后层的叉 */
   [data-scope='notification'][data-part='group'][data-stacked] [data-scope='notification'][data-part='item'][data-stack-index]:not([data-frontmost]):not([data-expanded])
-  [data-part='item-close-trigger'] {
+  [data-part='item-close-trigger']:where([data-scope='notification']) {
     opacity: 0;
     pointer-events: none;
   }

package/css/number-animation.css

@@ -35,10 +35,10 @@
   }
 
   [data-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);
   }
 
   [data-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/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);
   }
 
   [data-scope='number-field'][data-part='root'][data-size='lg'] {
@@ -67,13 +67,15 @@
   }
 
   [data-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));
   }
 
   [data-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,9 +119,9 @@
   }
 
   /* 盒内 input：无边框无底无圆角无落影由家族重置，观感全归 control。
-     数字居中排在两个按钮之间，行内内衬留给它自己（control 不给内衬）；
+     数字从起始缘排起，与同一列里别的字段的文字对齐，行内内衬留给它自己（control 不给内衬）；
      前后缀图标/文字直接流式排在 input 两侧，不用再绝对定位 */
-  [data-scope='number-field'][data-part='control'] [data-part='input'] {
+  [data-scope='number-field'][data-part='control'] [data-part='input']:where([data-scope='number-field']) {
     --xh-field-input-fg: var(--xh-number-field-input-fg, var(--xh-fg-default));
     --xh-field-input-font-size: var(--xh-number-field-input-font-size, var(--xh-_number-field-font-size));
     --xh-field-placeholder-fg: var(--xh-number-field-placeholder-fg, var(--xh-fg-subtle));
@@ -131,20 +131,21 @@
     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 档给，组件只映射既有覆盖槽。
-     常态只剩符号，符号取默认前景，悬停与按下才浮出底色 */
-  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger'],
-  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger'] {
+  /* 盒内按钮：正方视觉盒、inset 圆角、按承载面取的悬停 / 按下阶梯、粗指针热区与 :focus-visible 关环
+     全由 Action Control 的 field-inset ghost 档给，组件只映射既有覆盖槽。
+     常态只剩符号，符号取次要前景（钮是辅助动作，不与数字抢层级），悬停与按下才浮出底色。
+     可悬停的精细指针下平时收起、悬停或聚焦字段时显出（家族 hover-focus 档），并改成上下叠放，见下 */
+  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:where([data-scope='number-field']),
+  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:where([data-scope='number-field']) {
     --xh-action-visual-size: var(--xh-number-field-trigger-size, var(--xh-_action-profile-visual-size));
     --xh-action-min-inline-size: var(--xh-number-field-trigger-size, var(--xh-_action-profile-visual-size));
     --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;
@@ -159,40 +160,21 @@
   }
 
   /* DOM 顺序不承担视觉位置：既有用法即使把减钮写在 input 前面，默认仍统一收进右侧动作组。 */
-  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger'] {
+  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:where([data-scope='number-field']) {
     order: 1;
   }
 
-  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger'] {
+  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:where([data-scope='number-field']) {
     order: 2;
   }
 
-  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger'][hidden],
-  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger'][hidden] {
+  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger'][hidden]:where([data-scope='number-field']),
+  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger'][hidden]:where([data-scope='number-field']) {
     display: none;
   }
 
-  /* 右侧动作组与输入之间的细线：把「按的」与「填的」分成两块。
-     线不画在钮的边框上：边框会跟着钮的圆角与悬停底走，而这道线要独立于钮的各态，长度也短于钮自己。
-     ::before 已被兜底字形占着，::after 在粗指针下是家族给的 44px 热区，几何只能落在
-     background-image 上：一条 1px × 半高的渐变贴在逻辑起始侧，底色换态时它仍叠在上层。
-     线只画在动作组第一颗减钮的逻辑起始侧；background-position 是物理轴，RTL 另给一条换边。 */
-  [data-scope='number-field'][data-part='control']:has([data-part='input']) [data-part='decrement-trigger'] {
-    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'] [data-scope='number-field'][data-part='control']:has([data-part='input']) [data-part='decrement-trigger'] {
-    background-position: 100% 50%;
-  }
-
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
-  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:empty::before {
+  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:where([data-scope='number-field']):empty::before {
     content: '';
     display: inline-block;
     inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
@@ -203,7 +185,7 @@
     mask: var(--xh-glyph-mark-plus) center / contain no-repeat;
   }
 
-  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:empty::before {
+  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:where([data-scope='number-field']):empty::before {
     content: '';
     display: inline-block;
     inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
@@ -214,11 +196,52 @@
     mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
   }
 
-  /* 高对比档整层丢弃 background-image，分隔线改用系统色重画，并关掉这一颗钮的强制换色 */
-  @media (forced-colors: active) {
-    [data-scope='number-field'][data-part='control']:has([data-part='input']) [data-part='decrement-trigger'] {
-      background-image: linear-gradient(ButtonText, ButtonText);
-      forced-color-adjust: none;
+  /* 可悬停的精细指针：两颗钮上下叠在盒的逻辑末端，各占盒高一半（四周内收一截），宽取指示符大档；
+     显出时铺一层淡底，悬停 / 按下沿淡底阶梯升一档、两档，字形换成上下箭头、取指示符最小档：
+     一颗钮只有盒内高的一半减内收（sm / md 11px，紧凑 9px），小档 12px 的字形会比钮高出一截。
+     两颗钮共边相接，按下只换面不缩放。钮浮在盒上、不占流：盒的末端让出钮那一截，
+     输入与后缀不会排到钮底下，钮收起时也不跳。粗指针与不能悬停的设备仍是两颗正方钮横排在末端、常显，
+     那里一颗叠放的钮只有半个控件高，够不着触控目标尺寸 */
+  @media (hover: hover) and (pointer: fine) {
+    [data-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))
+      );
+    }
+
+    [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:where([data-scope='number-field']),
+    [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:where([data-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)));
+    }
+
+    [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:where([data-scope='number-field']) {
+      inset-block-start: var(--xh-number-field-stepper-inset, var(--xh-_number-field-stepper-inset));
+    }
+
+    [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:where([data-scope='number-field']) {
+      inset-block-end: var(--xh-number-field-stepper-inset, var(--xh-_number-field-stepper-inset));
+    }
+
+    [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:where([data-scope='number-field']):empty::before {
+      -webkit-mask-image: var(--xh-glyph-mark-chevron-up);
+      mask-image: var(--xh-glyph-mark-chevron-up);
+    }
+
+    [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:where([data-scope='number-field']):empty::before {
+      -webkit-mask-image: var(--xh-glyph-mark-chevron-down);
+      mask-image: var(--xh-glyph-mark-chevron-down);
     }
   }
 
@@ -233,19 +256,19 @@
        字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
        按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
        禁用取 GrayText */
-    [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:empty::before,
-    [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:empty::before {
+    [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:where([data-scope='number-field']):empty::before,
+    [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:where([data-scope='number-field']):empty::before {
       forced-color-adjust: none;
       background-color: ButtonText;
     }
 
-    [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before,
-    [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+    [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:where([data-scope='number-field']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before,
+    [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:where([data-scope='number-field']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
       background-color: HighlightText;
     }
 
-    [data-scope='number-field'][data-part='control'] [data-part='increment-trigger'][data-disabled]:empty::before,
-    [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger'][data-disabled]:empty::before {
+    [data-scope='number-field'][data-part='control'] [data-part='increment-trigger'][data-disabled]:where([data-scope='number-field']):empty::before,
+    [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger'][data-disabled]:where([data-scope='number-field']):empty::before {
       background-color: GrayText;
     }
   }