@xihan-ui/styles 3.0.0 → 3.2.0

package/css/float-button.css

@@ -25,10 +25,10 @@
   [data-scope='float-button'][data-part='root'] {
     --xh-_float-button-offset: var(--xh-space-6);
     /* 展开列表里原生动作项的身量与字形尺：触发器自己走 Action Control floating 档
-       （sm = box-md / md = box-lg / lg = box-lg + space-2，字形 md / lg / xl），
+       （sm = box-sm / md = box-md / lg = box-lg，字形 sm / md / lg），
        原生动作项不是 Headless 部件、配方打不到它，这两支私有槽按同一张表镜像，换档只改这里 */
-    --xh-_float-button-size: var(--xh-control-box-lg);
-    --xh-_float-button-glyph-size: var(--xh-glyph-size-lg);
+    --xh-_float-button-size: var(--xh-control-box-md);
+    --xh-_float-button-glyph-size: var(--xh-glyph-size-md);
     /* 作者塞进指示符槽的图标跟着尺寸档走，与皮肤画的兜底字形同一把尺 */
     --xh-icon-size: var(--xh-float-button-icon-size, var(--xh-_float-button-glyph-size));
 
@@ -66,20 +66,118 @@
     inset-inline-end: max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right));
   }
 
+  /* —— 位置 ——
+     拖到别处、或作者给了位置时，角落那两条贴边里有一条换掉：data-placement 由连接层按位置推出
+     （离触发器最近的恒是视口的那条边、展开组朝页面中间长），这里只换沿边的那一条。
+     百分比按固定定位的包含块（视口去掉滚动条）量，与连接层量的视口同一块；
+     夹取的上下界与四角同样和安全区取大的一头，比例再怎么写，钮也不会压进刘海与横条。
+     触发器边长取它自己那一档（使用者槽在前）：沿边的比例量的是触发器中心 */
+  [data-scope='float-button'][data-part='root'] {
+    --xh-_float-button-span: var(--xh-float-button-size, var(--xh-_float-button-size));
+  }
+
+  /* 贴左右边：上下按比例，锚在离触发器近的那一头 */
+  [data-scope='float-button'][data-part='root'][data-edge^='inline'][data-placement^='top'] {
+    inset-block-start: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-top)),
+      calc(var(--xh-_float-button-ratio) * 100% - var(--xh-_float-button-span) / 2),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-bottom)))
+    );
+  }
+
+  [data-scope='float-button'][data-part='root'][data-edge^='inline'][data-placement^='bottom'] {
+    inset-block-end: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-bottom)),
+      calc((1 - var(--xh-_float-button-ratio)) * 100% - var(--xh-_float-button-span) / 2),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-top)))
+    );
+  }
+
+  /* 贴上下边：行内方向按比例，从行首量起 */
+  [data-scope='float-button'][data-part='root'][data-edge^='block'][data-placement$='-start'] {
+    inset-inline-start: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right)),
+      calc(var(--xh-_float-button-ratio) * 100% - var(--xh-_float-button-span) / 2),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right)))
+    );
+  }
+
+  [data-scope='float-button'][data-part='root'][data-edge^='block'][data-placement$='-end'] {
+    inset-inline-end: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right)),
+      calc((1 - var(--xh-_float-button-ratio)) * 100% - var(--xh-_float-button-span) / 2),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right)))
+    );
+  }
+
+  /* 停在一点、或正跟着指针走：坐标是触发器左上角的物理像素，横向一律从左边量，不随书写方向翻。
+     竖向锚在离触发器近的那一头：朝下长的锚上沿，朝上长的锚下沿，展开组冒出来时触发器不挪窝。
+     停着的点仍夹在视口里（视口变小时不跑出去）；跟手的坐标由连接层夹好，这里原样用 */
+  [data-scope='float-button'][data-part='root'][data-point][data-placement] {
+    inset-inline: auto;
+    /* stylelint-disable-next-line property-disallowed-list -- 停点由连接层按指针的物理坐标写成 x，横向从左边量、不随书写方向翻 */
+    left: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-left)),
+      var(--xh-_float-button-x),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-right)))
+    );
+  }
+
+  [data-scope='float-button'][data-part='root'][data-point][data-placement^='top'] {
+    top: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-top)),
+      var(--xh-_float-button-y),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-bottom)))
+    );
+  }
+
+  [data-scope='float-button'][data-part='root'][data-point][data-placement^='bottom'] {
+    bottom: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-bottom)),
+      calc(100% - var(--xh-_float-button-y) - var(--xh-_float-button-span)),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-top)))
+    );
+  }
+
+  /* 跟手排在贴边与停点之后：拖动与落定途中压过提交了的位置 */
+  [data-scope='float-button'][data-part='root'][data-moving][data-placement] {
+    inset-inline: auto;
+    /* stylelint-disable-next-line property-disallowed-list -- 同上：跟手坐标是指针的物理 x */
+    left: var(--xh-_float-button-x);
+  }
+
+  [data-scope='float-button'][data-part='root'][data-moving][data-placement^='top'] {
+    top: var(--xh-_float-button-y);
+  }
+
+  [data-scope='float-button'][data-part='root'][data-moving][data-placement^='bottom'] {
+    bottom: calc(100% - var(--xh-_float-button-y) - var(--xh-_float-button-span));
+  }
+
+  /* 能拖时触屏手指在触发器上的移动归拖动，不让浏览器拿去滚页面；光标提示能抓、正抓着 */
+  [data-scope='float-button'][data-part='root'][data-draggable] [data-scope='float-button'][data-part='trigger'] {
+    touch-action: none;
+    cursor: grab;
+  }
+
+  [data-scope='float-button'][data-part='root'][data-dragging] [data-scope='float-button'][data-part='trigger'] {
+    cursor: grabbing;
+  }
+
   /* —— 尺寸：原生动作项与触发器的 floating 档逐档同表 —— */
   [data-scope='float-button'][data-part='root'][data-size='sm'] {
-    --xh-_float-button-size: var(--xh-control-box-md);
-    --xh-_float-button-glyph-size: var(--xh-glyph-size-md);
+    --xh-_float-button-size: var(--xh-control-box-sm);
+    --xh-_float-button-glyph-size: var(--xh-glyph-size-sm);
   }
 
   [data-scope='float-button'][data-part='root'][data-size='md'] {
-    --xh-_float-button-size: var(--xh-control-box-lg);
-    --xh-_float-button-glyph-size: var(--xh-glyph-size-lg);
+    --xh-_float-button-size: var(--xh-control-box-md);
+    --xh-_float-button-glyph-size: var(--xh-glyph-size-md);
   }
 
   [data-scope='float-button'][data-part='root'][data-size='lg'] {
-    --xh-_float-button-size: calc(var(--xh-control-box-lg) + var(--xh-space-2));
-    --xh-_float-button-glyph-size: var(--xh-glyph-size-xl);
+    --xh-_float-button-size: var(--xh-control-box-lg);
+    --xh-_float-button-glyph-size: var(--xh-glyph-size-lg);
   }
 
   /* —— 形态：给展开列表里原生动作项用的面 ——
@@ -304,10 +402,12 @@
   }
 
   /* 逐条依次冒出来，离触发器最近的那条先到。backwards 让每条在自己那份延迟里保持起始帧。
-     挂载时就展开着的那一段（data-instant）属于首帧，直接呈现。守卫包在 :where 里不加特异性：
-     后面的交错延迟、液态分离块与收起那几条要照旧压得过这一条 */
-  [data-scope='float-button'][data-part='list']:where(:not([data-instant])) > * {
-    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
+     挂载时就展开着的那一段（data-instant）属于首帧，直接呈现。
+     动作项是作者放进来的任意节点，规则主体没有可认的特征：冒出、缩回与交错写成 list 自己的私有槽，
+     动作项只读槽。主体无特征的规则挂在 data-instant / data-state 后面，页面上任何元素翻转这两个属性
+     都会让它整棵子树重算 */
+  [data-scope='float-button'][data-part='list']:where(:not([data-instant])) {
+    --xh-_float-button-item-enter: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
   }
 
   /* 原生按钮直接作为动作项时，沿用触发器的视觉面（同一组公开槽、同一张形态表）；XhButton 保留自己的皮肤。 */
@@ -364,42 +464,55 @@
   /* 交错的间隔：第二条起逐级往后推，第五条起统一钉在第四级——与收起、与列表动效同一个封顶，
      动作再多也不会拖出一条越来越慢的尾巴 */
   [data-scope='float-button'][data-part='list'] > *:nth-child(2) {
-    animation-delay: var(--xh-motion-stagger-step);
+    --xh-_float-button-item-rank: 1;
   }
 
   [data-scope='float-button'][data-part='list'] > *:nth-child(3) {
-    animation-delay: calc(2 * var(--xh-motion-stagger-step));
+    --xh-_float-button-item-rank: 2;
   }
 
   [data-scope='float-button'][data-part='list'] > *:nth-child(4) {
-    animation-delay: calc(3 * var(--xh-motion-stagger-step));
+    --xh-_float-button-item-rank: 3;
   }
 
   [data-scope='float-button'][data-part='list'] > *:nth-child(n + 5) {
-    animation-delay: calc(4 * var(--xh-motion-stagger-step));
+    --xh-_float-button-item-rank: 4;
   }
 
   /* 收起：逆着冒出的次序逐条缩回，离触发器最远的先走、最近的最后收，连接层等它们播完才藏起展开组。
      液态档里从触发器拆出来的那几块由液态组融回，不挂这段 */
-  [data-scope='float-button'][data-part='list'][data-state='closed'] > :not([data-xh-liquid-goo-split]) {
+  [data-scope='float-button'][data-part='list'][data-state='closed'] {
+    --xh-_float-button-item-exit: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+    --xh-_float-button-item-exiting: 1;
     pointer-events: none;
-    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
-  [data-scope='float-button'][data-part='list'][data-state='closed'] > :not([data-xh-liquid-goo-split]):nth-last-child(2) {
-    animation-delay: var(--xh-motion-stagger-step);
+  /* 动作项只读槽：收起档压过进场档；延迟展开按正序名次、收起按倒序名次（收起标记为 1 时取后者） */
+  [data-scope='float-button'][data-part='list'] > :not([data-xh-liquid-goo-split]) {
+    animation: var(--xh-_float-button-item-exit, var(--xh-_float-button-item-enter, none));
+    animation-delay: calc(
+      var(--xh-motion-stagger-step) *
+        (
+          var(--xh-_float-button-item-rank, 0) * (1 - var(--xh-_float-button-item-exiting, 0)) +
+            var(--xh-_float-button-item-rank-back, 0) * var(--xh-_float-button-item-exiting, 0)
+        )
+    );
+  }
+
+  [data-scope='float-button'][data-part='list'] > :not([data-xh-liquid-goo-split]):nth-last-child(2) {
+    --xh-_float-button-item-rank-back: 1;
   }
 
-  [data-scope='float-button'][data-part='list'][data-state='closed'] > :not([data-xh-liquid-goo-split]):nth-last-child(3) {
-    animation-delay: calc(2 * var(--xh-motion-stagger-step));
+  [data-scope='float-button'][data-part='list'] > :not([data-xh-liquid-goo-split]):nth-last-child(3) {
+    --xh-_float-button-item-rank-back: 2;
   }
 
-  [data-scope='float-button'][data-part='list'][data-state='closed'] > :not([data-xh-liquid-goo-split]):nth-last-child(4) {
-    animation-delay: calc(3 * var(--xh-motion-stagger-step));
+  [data-scope='float-button'][data-part='list'] > :not([data-xh-liquid-goo-split]):nth-last-child(4) {
+    --xh-_float-button-item-rank-back: 3;
   }
 
-  [data-scope='float-button'][data-part='list'][data-state='closed'] > :not([data-xh-liquid-goo-split]):nth-last-child(n + 5) {
-    animation-delay: calc(4 * var(--xh-motion-stagger-step));
+  [data-scope='float-button'][data-part='list'] > :not([data-xh-liquid-goo-split]):nth-last-child(n + 5) {
+    --xh-_float-button-item-rank-back: 4;
   }
 
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中。

package/css/form.css

@@ -44,6 +44,14 @@
     flex-flow: row wrap;
     align-items: start;
     column-gap: var(--xh-form-inline-gap, var(--xh-space-4));
+    /* 一行流里字段按内容收，没有列宽可铺：在表单根上取下此处的字段缺省宽，交给下面的字段还原 */
+    --xh-_form-inline-control-w: var(--xh-control-w);
+  }
+
+  /* 字段会把里面的控件铺满字段宽，而一行流的字段宽正是由控件撑出来的，两者互相指望就塌成内容宽；
+     这一档的字段还原成表单根上的缺省宽 */
+  [data-scope='form'][data-part='root'][data-layout='inline'] [data-scope='field'][data-part='root'] {
+    --xh-control-w: var(--xh-_form-inline-control-w);
   }
 
   /* 一列是网格档的缺省，这里从两列起逐档写 */
@@ -239,7 +247,7 @@
 
   /* 摘要显出时条目逐条入场，越靠后起步越晚。
      backwards 让还没轮到的条目停在首帧，不是先显出再重播 */
-  [data-scope='form'][data-part='error-summary'][data-state='invalid'] [data-part='error-summary-item'] {
+  [data-scope='form'][data-part='error-summary'][data-state='invalid'] [data-part='error-summary-item']:where([data-scope='form']) {
     animation: xh-drop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
   }
 
@@ -248,14 +256,14 @@
      每多一节 ~ 就多要求前面多一条露面的条目，链越长的规则排得越后、赢过短链 */
   [data-scope='form'][data-part='error-summary'][data-state='invalid']
     [data-part='error-summary-item']:not([hidden])
-    ~ [data-part='error-summary-item']:not([hidden]) {
+    ~ [data-part='error-summary-item']:where([data-scope='form']):not([hidden]) {
     animation-delay: var(--xh-motion-stagger-step);
   }
 
   [data-scope='form'][data-part='error-summary'][data-state='invalid']
     [data-part='error-summary-item']:not([hidden])
     ~ [data-part='error-summary-item']:not([hidden])
-    ~ [data-part='error-summary-item']:not([hidden]) {
+    ~ [data-part='error-summary-item']:where([data-scope='form']):not([hidden]) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 2);
   }
 
@@ -263,7 +271,7 @@
     [data-part='error-summary-item']:not([hidden])
     ~ [data-part='error-summary-item']:not([hidden])
     ~ [data-part='error-summary-item']:not([hidden])
-    ~ [data-part='error-summary-item']:not([hidden]) {
+    ~ [data-part='error-summary-item']:where([data-scope='form']):not([hidden]) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 3);
   }
 
@@ -272,7 +280,7 @@
     ~ [data-part='error-summary-item']:not([hidden])
     ~ [data-part='error-summary-item']:not([hidden])
     ~ [data-part='error-summary-item']:not([hidden])
-    ~ [data-part='error-summary-item']:not([hidden]) {
+    ~ [data-part='error-summary-item']:where([data-scope='form']):not([hidden]) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 4);
   }
 
@@ -284,7 +292,7 @@
     ~ [data-part='error-summary-item']:not([hidden])
     ~ [data-part='error-summary-item']:not([hidden])
     ~ [data-part='error-summary-item']:not([hidden])
-    ~ [data-part='error-summary-item']:not([hidden]) {
+    ~ [data-part='error-summary-item']:where([data-scope='form']):not([hidden]) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 5);
   }
 

package/css/graph-chart.css

@@ -162,7 +162,7 @@
 
   /* —— 直接操纵：能拖的节点给抓手，拖着时整张图是抓紧的手；放大后空白处也能拖着平移。
      触屏在节点上的拖动归图，其余地方照常滚动页面 —— */
-  [data-scope='graph-chart'][data-part='plot'][data-draggable] [data-part='node'] {
+  [data-scope='graph-chart'][data-part='plot'][data-draggable] [data-part='node']:where([data-scope='graph-chart']) {
     cursor: grab;
     touch-action: none;
   }
@@ -173,7 +173,7 @@
   }
 
   [data-scope='graph-chart'][data-part='plot'][data-dragging],
-  [data-scope='graph-chart'][data-part='plot'][data-dragging] [data-part='node'] {
+  [data-scope='graph-chart'][data-part='plot'][data-dragging] [data-part='node']:where([data-scope='graph-chart']) {
     cursor: grabbing;
   }
 

package/css/highlight.css

@@ -34,7 +34,7 @@
 
   /* 语气落在根上而不是每个 mark 上：命中片段有好几个，用哪族颜色是整段的属性。
      使用者槽排在语气之前：写死了 mark 的底与字色，六族语气一并让位 */
-  [data-scope='highlight'][data-part='root'][data-tone] [data-part='mark'] {
+  [data-scope='highlight'][data-part='root'][data-tone] [data-part='mark']:where([data-scope='highlight']) {
     background: var(--xh-highlight-mark-bg, var(--xh-_tone-subtle));
     color: var(--xh-highlight-mark-fg, var(--xh-_tone-fg));
   }

package/css/image.css

@@ -44,7 +44,7 @@
 
   /* 占位层还在（正淡出）时图片不再自己淡入：它在占位层底下直接落位，由占位层的淡出揭开，
      模糊小图与图片交叉，不先透出一拍底色 */
-  [data-scope='image'][data-part='root']:has(> [data-part='placeholder']:not([hidden])) > [data-part='image'] {
+  [data-scope='image'][data-part='root']:has(> [data-part='placeholder']:not([hidden])) > [data-part='image']:where([data-scope='image']) {
     animation: none;
   }
 

package/css/mention.css

@@ -294,7 +294,7 @@
      标记读定位层那一份：候选被搬到 portal 落点，根上的只读标记够不着它们。
      排掉禁用条目是因为这条选择器权重高过上面那条，不排就会把 not-allowed 覆盖回 default */
   [data-scope='mention'][data-part='positioner'][data-readonly]
-    [data-part='item']:not([data-disabled]) {
+    [data-part='item']:where([data-scope='mention']):not([data-disabled]) {
     cursor: default;
   }
 

package/css/message-feed.css

@@ -112,7 +112,7 @@
 
   /* 新到的消息进场，同一批按到达顺序错开；首帧就在的历史消息直接呈现（自己或 list 带 data-instant）。
      进场只动 opacity 与 translate：改高度会扰动粘底补偿量到的 scrollHeight */
-  [data-scope='message-feed'][data-part='item']:not([data-instant], [data-instant] > *) {
+  [data-scope='message-feed'][data-part='item']:not([data-instant], [data-instant] > :where([data-scope='message-feed'])) {
     animation: xh-item-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
     animation-delay: calc(var(--xh-_stagger-index, 0) * var(--xh-motion-stagger-step));
   }

package/css/notification.css

@@ -153,7 +153,7 @@
   }
 
   [data-scope='notification'][data-part='group'][data-stacked][data-preset='toast'] {
-    inline-size: min(var(--xh-notification-item-w, 28.75rem), calc(100vw - var(--xh-space-8)));
+    inline-size: min(var(--xh-notification-item-w, var(--xh-overlay-toast-w)), calc(100vw - var(--xh-space-8)));
   }
 
   [data-scope='notification'][data-part='group'][data-stacked][data-placement^='bottom'] {
@@ -262,7 +262,7 @@
     display: flex;
     align-items: flex-start;
     column-gap: var(--xh-notification-item-gap, var(--xh-space-2));
-    inline-size: var(--xh-notification-item-w, 28.75rem);
+    inline-size: var(--xh-notification-item-w, var(--xh-overlay-toast-w));
     padding-block: var(--xh-notification-item-py, var(--xh-space-3));
     padding-inline: var(--xh-notification-item-px, var(--xh-space-4));
     font-size: var(--xh-notification-item-font-size, var(--xh-text-label-size));
@@ -447,7 +447,7 @@
   }
 
   /* 轻提示：方盒自带一圈内衬，与间距合起来让出字形到正文的那段距离 */
-  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-indicator'] {
+  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-indicator']:where([data-scope='notification']) {
     flex: none;
     box-sizing: content-box;
     inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
@@ -484,17 +484,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 +513,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;
@@ -533,28 +533,34 @@
   }
 
   /* 轻提示的语气落到标题与行首字形：一句话的结果，颜色本身就是信息 */
-  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-title'] {
+  [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));
   }
 
   /* 卡片的叉钉在右上角，标题得给它让位；说明与操作在第二行往下，不受影响。
      让位量与叉的贴边取同一个值，作者改了贴边槽，标题让出的那段跟着走 */
-  [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))
     );
   }
 
+  /* 正文有上限：推一段长文（公告全文）进来时卡片不被撑到整屏高——摞是整面视口的定位面、不吃指针也不裁切，
+     撑出视口的那截既看不到也滚不到。超出的部分在正文自己里面滚，标题与操作钮留在卡片上；
+     滚到头不把滚动量传给页面 */
   [data-scope='notification'][data-part='item-description'] {
     margin: 0;
+    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));
   }
 
   /* 轻提示的说明只是一行短上下文，行高收紧到正文之下 */
-  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-description'] {
+  [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-description']:where([data-scope='notification']) {
     min-inline-size: 0;
     line-height: var(--xh-notification-description-leading, var(--xh-leading-normal));
   }
@@ -589,7 +595,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;
@@ -597,7 +603,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;
@@ -615,7 +621,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;
   }
 
@@ -653,7 +659,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;
   }
@@ -686,14 +692,14 @@
   }
 
   /* 卡片：钉在右上角的内衬处，不参与网格排布——留在流里它会变成正文下面的第三行 */
-  [data-scope='notification'][data-part='item'][data-preset='card'] [data-part='item-close-trigger'] {
+  [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-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;
   }
@@ -702,13 +708,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;
     }
@@ -716,7 +722,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-field.css

@@ -121,7 +121,7 @@
   /* 盒内 input：无边框无底无圆角无落影由家族重置，观感全归 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));
@@ -137,8 +137,8 @@
   /* 盒内按钮：正方视觉盒、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'] {
+  [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));
@@ -159,16 +159,16 @@
   }
 
   /* 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;
   }
 
@@ -177,7 +177,7 @@
      ::before 已被兜底字形占着，::after 在粗指针下是家族给的 44px 热区，几何只能落在
      background-image 上：一条 1px × 半高的渐变贴在逻辑起始侧，底色换态时它仍叠在上层。
      线只画在动作组第一颗减钮的逻辑起始侧；background-position 是物理轴，RTL 另给一条换边。 */
-  [data-scope='number-field'][data-part='control']:has([data-part='input']) [data-part='decrement-trigger'] {
+  [data-scope='number-field'][data-part='control']:has([data-part='input']) [data-part='decrement-trigger']:where([data-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))
@@ -187,12 +187,12 @@
     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'] {
+  [dir='rtl'] [data-scope='number-field'][data-part='control']:has([data-part='input']) [data-part='decrement-trigger']:where([data-scope='number-field']) {
     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 +203,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));
@@ -216,7 +216,7 @@
 
   /* 高对比档整层丢弃 background-image，分隔线改用系统色重画，并关掉这一颗钮的强制换色 */
   @media (forced-colors: active) {
-    [data-scope='number-field'][data-part='control']:has([data-part='input']) [data-part='decrement-trigger'] {
+    [data-scope='number-field'][data-part='control']:has([data-part='input']) [data-part='decrement-trigger']:where([data-scope='number-field']) {
       background-image: linear-gradient(ButtonText, ButtonText);
       forced-color-adjust: none;
     }
@@ -233,19 +233,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;
     }
   }