@xihan-ui/styles 3.1.0 → 3.2.0

package/css/color-swatch-picker.css

@@ -186,10 +186,12 @@
   }
 
   /* 作者塞进来的图形跟着勾同一套显隐 */
+  /* 显隐写在 indicator 自己的私有槽上、图形只读槽：作者的图形没有可认的特征，
+     规则主体不能挂在 data-state 后面（翻转时会让全页同名属性的变化整棵子树重算） */
   [data-scope='color-swatch-picker'][data-part='indicator'] > * {
     position: relative;
     color: var(--xh-color-swatch-picker-indicator-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
-    opacity: 0;
+    opacity: var(--xh-_color-swatch-picker-glyph-opacity, 0);
     transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -199,8 +201,11 @@
     scale: 1;
   }
 
-  [data-scope='color-swatch-picker'][data-part='indicator'][data-state='checked']:empty::after,
-  [data-scope='color-swatch-picker'][data-part='indicator'][data-state='checked'] > * {
+  [data-scope='color-swatch-picker'][data-part='indicator'][data-state='checked'] {
+    --xh-_color-swatch-picker-glyph-opacity: 1;
+  }
+
+  [data-scope='color-swatch-picker'][data-part='indicator'][data-state='checked']:empty::after {
     opacity: 1;
   }
 
@@ -227,7 +232,7 @@
    */
   @media (forced-colors: active) {
     /* 家族在这一档把色块描边统一钉成 CanvasText，选中的那一格要在它之上换成高亮色 */
-    [data-scope='color-swatch-picker'][data-part='item'][data-state='checked'] > [data-part='swatch'] {
+    [data-scope='color-swatch-picker'][data-part='item'][data-state='checked'] > [data-part='swatch']:where([data-scope='color-swatch-picker']) {
       border-color: Highlight;
     }
 

package/css/combobox.css

@@ -236,14 +236,19 @@
   /* 有值时清空钮顶上来，展开钮让位：两颗并排堆着用户分不清点哪个，换来换去还会让盒的宽度跳一下。
      判据是盒里此刻有一颗没收起的清空钮——没写清空钮的结构里展开钮照常留着；
      输入框仍是展开的入口（打字、方向键、openOnClick） */
-  [data-scope='combobox'][data-part='control']:has([data-part='clear-trigger']:not([hidden])) [data-part='trigger'] {
+  [data-scope='combobox'][data-part='control']:has([data-part='clear-trigger']:not([hidden])) [data-part='trigger']:where([data-scope='combobox']) {
     display: none;
   }
 
   /* 展开时箭头翻个面，指向与列表的去向一致。转的是字形或作者塞的图形，不转按钮本体：
      按钮自带悬停底色，整个按钮转会带着底色一起转；家族按压缩放的是整钮，不影响这里的转向 */
-  [data-scope='combobox'][data-part='trigger']:empty::before,
+  [data-scope='combobox'][data-part='trigger']:empty::before {
+    transition: rotate var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 作者的箭头是任意节点：转向写在 trigger 自己的私有槽上，箭头只读槽（规则主体无特征时不挂在 data-state 后面） */
   [data-scope='combobox'][data-part='trigger'] > * {
+    rotate: var(--xh-_combobox-trigger-turn, none);
     transition: rotate var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
   }
 
@@ -272,11 +277,14 @@
   }
 
   /* 打开中与悬停同档：展开钮不另上底，方向由箭头转向承担 */
-  [data-scope='combobox'][data-part='trigger'][data-state='open']:empty::before,
-  [data-scope='combobox'][data-part='trigger'][data-state='open'] > * {
+  [data-scope='combobox'][data-part='trigger'][data-state='open']:empty::before {
     rotate: 180deg;
   }
 
+  [data-scope='combobox'][data-part='trigger'][data-state='open'] {
+    --xh-_combobox-trigger-turn: 180deg;
+  }
+
   [data-scope='combobox'][data-part='content'] {
     /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
        这里只把使用者槽接进来 */

package/css/command.css

@@ -298,7 +298,7 @@
      不会拖出一条越来越慢的尾巴）。打开时已有的结果直接呈现：自己或本列表带 data-instant。
      检索过滤筛掉的条目带 hidden 不生成盒子，重新露面只是换一批已有结果，机器给它打上 data-instant 直接呈现。
      backwards 让每条在自己那份延迟里保持起始帧 */
-  [data-scope='command'][data-part='list'] [data-part='item']:not([data-instant], [data-scope='command'][data-part='list'][data-instant] *) {
+  [data-scope='command'][data-part='list'] [data-part='item']:where([data-scope='command']):not([data-instant], [data-scope='command'][data-part='list'][data-instant] :where([data-scope='command'])) {
     animation: xh-rise-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/date-field.css

@@ -130,8 +130,14 @@
     color: transparent;
   }
 
-  [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown] > * {
-    opacity: 0;
+  /* 段位与分隔符（后者是不带解剖的文字节点）一起淡出：显隐写在 segment-group 自己的私有槽上，
+     子节点只读槽——主体无特征的规则不挂在 data-placeholder-shown 后面，输入时翻转只让这一组失效 */
+  [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown] {
+    --xh-_date-field-segment-opacity: 0;
+  }
+
+  [data-scope='date-field'][data-part='segment-group'] > * {
+    opacity: var(--xh-_date-field-segment-opacity, 1);
   }
 
   [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown]::before {

package/css/date-picker.css

@@ -211,8 +211,14 @@
     color: transparent;
   }
 
-  [data-scope='date-picker'][data-part='segment-group'][data-placeholder-shown] > * {
-    opacity: 0;
+  /* 段位与分隔符（后者是不带解剖的文字节点）一起淡出：显隐写在 segment-group 自己的私有槽上，
+     子节点只读槽——主体无特征的规则不挂在 data-placeholder-shown 后面，输入时翻转只让这一组失效 */
+  [data-scope='date-picker'][data-part='segment-group'][data-placeholder-shown] {
+    --xh-_date-picker-segment-opacity: 0;
+  }
+
+  [data-scope='date-picker'][data-part='segment-group'] > * {
+    opacity: var(--xh-_date-picker-segment-opacity, 1);
   }
 
   [data-scope='date-picker'][data-part='segment-group'][data-placeholder-shown]::before {
@@ -401,7 +407,7 @@
   }
 
   /* 确认按钮沉到所在那一行的底边：它是整块面板的出口，不跟日历顶边对齐 */
-  [data-scope='date-picker'][data-part='content']:has(> [data-part='time-column']) > [data-part='confirm-trigger'] {
+  [data-scope='date-picker'][data-part='content']:has(> [data-part='time-column']) > [data-part='confirm-trigger']:where([data-scope='date-picker']) {
     align-self: flex-end;
   }
 
@@ -721,7 +727,7 @@
 
   /* 列整体禁用时格没有自己的 aria-disabled，禁用面按列的 aria-disabled 映射到家族槽：
      字色降级、悬停 / 高亮 / 按下不换面、光标 not-allowed */
-  [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item'] {
+  [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-picker']) {
     --xh-collection-fg-rest: var(--xh-fg-disabled);
     --xh-collection-fg-hover: var(--xh-fg-disabled);
     --xh-collection-fg-keyboard-highlight: var(--xh-fg-disabled);
@@ -740,7 +746,7 @@
     --xh-collection-cursor-selected: not-allowed;
   }
 
-  [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']::after {
+  [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-picker'])::after {
     background-color: var(--xh-fg-disabled);
   }
 
@@ -820,13 +826,13 @@
 
     [data-scope='date-picker'][data-part='preset'][data-disabled]::after,
     [data-scope='date-picker'][data-part='time-item'][data-disabled]::after,
-    [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']::after {
+    [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-picker'])::after {
       background-color: GrayText;
     }
 
     [data-scope='date-picker'][data-part='preset'][data-disabled],
     [data-scope='date-picker'][data-part='time-item'][data-disabled],
-    [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item'] {
+    [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-picker']) {
       color: GrayText;
     }
   }

package/css/date-range-picker.css

@@ -239,8 +239,14 @@
     color: transparent;
   }
 
-  [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown] > * {
-    opacity: 0;
+  /* 段位与分隔符（后者是不带解剖的文字节点）一起淡出：显隐写在 segment-group 自己的私有槽上，
+     子节点只读槽——主体无特征的规则不挂在 data-placeholder-shown 后面，输入时翻转只让这一组失效 */
+  [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown] {
+    --xh-_date-range-picker-segment-opacity: 0;
+  }
+
+  [data-scope='date-range-picker'][data-part='segment-group'] > * {
+    opacity: var(--xh-_date-range-picker-segment-opacity, 1);
   }
 
   [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown]::before {
@@ -553,7 +559,7 @@
   }
 
   /* 确认按钮沉到所在那一行的底边：它是整块面板的出口，不跟日历顶边对齐 */
-  [data-scope='date-range-picker'][data-part='content']:has(> [data-part='column-group']) > [data-part='confirm-trigger'] {
+  [data-scope='date-range-picker'][data-part='content']:has(> [data-part='column-group']) > [data-part='confirm-trigger']:where([data-scope='date-range-picker']) {
     align-self: flex-end;
   }
 
@@ -735,7 +741,7 @@
 
   /* 列整体禁用时格没有自己的 aria-disabled，禁用面按列的 aria-disabled 映射到家族槽：
      字色降级、悬停 / 高亮 / 按下不换面、光标 not-allowed */
-  [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item'] {
+  [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-range-picker']) {
     --xh-collection-fg-rest: var(--xh-fg-disabled);
     --xh-collection-fg-hover: var(--xh-fg-disabled);
     --xh-collection-fg-keyboard-highlight: var(--xh-fg-disabled);
@@ -754,7 +760,7 @@
     --xh-collection-cursor-selected: not-allowed;
   }
 
-  [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']::after {
+  [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-range-picker'])::after {
     background-color: var(--xh-fg-disabled);
   }
 
@@ -833,13 +839,13 @@
 
     [data-scope='date-range-picker'][data-part='preset'][data-disabled]::after,
     [data-scope='date-range-picker'][data-part='time-item'][data-disabled]::after,
-    [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']::after {
+    [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-range-picker'])::after {
       background-color: GrayText;
     }
 
     [data-scope='date-range-picker'][data-part='preset'][data-disabled],
     [data-scope='date-range-picker'][data-part='time-item'][data-disabled],
-    [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item'] {
+    [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-range-picker']) {
       color: GrayText;
     }
 

package/css/diff-view.css

@@ -164,7 +164,7 @@
   /* 窄档的并排视图：一行的两侧改成上下两段，旧行在上、新行在下。
      行由横排 flex 换成两列栅格——行号一列、正文一列，一行里的四个格按 DOM 次序
      自然落成两行，正文列因此只按单侧的最长行撑宽，不再是两侧之和 */
-  [data-scope='diff-view'][data-part='root'][data-view='split'] [data-part='row']:not([hidden]) {
+  [data-scope='diff-view'][data-part='root'][data-view='split'] [data-part='row']:where([data-scope='diff-view']):not([hidden]) {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
   }
@@ -197,13 +197,13 @@
 
   /* 开了换行：pre-wrap 仍保留缩进与连续空白，只是允许行尾折下来；
      anywhere 让没有空格的长串（url、base64）也能断 */
-  [data-scope='diff-view'][data-part='root'][data-wrap] [data-part='line-content'] {
+  [data-scope='diff-view'][data-part='root'][data-wrap] [data-part='line-content']:where([data-scope='diff-view']) {
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
 
   /* 正文原本按最长行撑宽，不解除就折不下来 */
-  [data-scope='diff-view'][data-part='root'][data-wrap] [data-part='body'] {
+  [data-scope='diff-view'][data-part='root'][data-wrap] [data-part='body']:where([data-scope='diff-view']) {
     min-inline-size: 0;
   }
 
@@ -348,7 +348,7 @@
     --xh-_diff-view-comment-col: var(--xh-diff-view-comment-col, var(--xh-diff-view-line-height, var(--xh-text-code-leading)));
   }
 
-  [data-scope='diff-view'][data-part='root'][data-commentable] [data-part='line-content'] {
+  [data-scope='diff-view'][data-part='root'][data-commentable] [data-part='line-content']:where([data-scope='diff-view']) {
     position: relative;
     padding-inline-start: var(--xh-_diff-view-comment-col);
   }
@@ -387,8 +387,8 @@
       --xh-action-opacity-rest: 0;
     }
 
-    [data-scope='diff-view'][data-part='row']:hover [data-part='comment-trigger'],
-    [data-scope='diff-view'][data-part='viewport']:focus-within [data-part='comment-trigger'] {
+    [data-scope='diff-view'][data-part='row']:hover [data-part='comment-trigger']:where([data-scope='diff-view']),
+    [data-scope='diff-view'][data-part='viewport']:focus-within [data-part='comment-trigger']:where([data-scope='diff-view']) {
       --xh-action-opacity-rest: 1;
     }
   }
@@ -434,13 +434,13 @@
 
   /* 宽档：视口放得下两列，并排视图回到一行两侧 */
   @media (min-width: 1024px) {
-    [data-scope='diff-view'][data-part='root'][data-view='split'] [data-part='row']:not([hidden]) {
+    [data-scope='diff-view'][data-part='root'][data-view='split'] [data-part='row']:where([data-scope='diff-view']):not([hidden]) {
       display: flex;
     }
 
     /* 两列之间的接缝：新侧的行号槽再补一条左边线。只在并排时是接缝，
        堆叠时它落在段首，成了一条与任何东西都不相接的竖线 */
-    [data-scope='diff-view'][data-part='root'][data-view='split'] [data-part='line-number'][data-side='new'] {
+    [data-scope='diff-view'][data-part='root'][data-view='split'] [data-part='line-number'][data-side='new']:where([data-scope='diff-view']) {
       border-inline-start: var(--xh-stroke-thin) solid var(--xh-diff-view-divider, var(--xh-border-subtle));
     }
   }

package/css/field-array.css

@@ -42,7 +42,7 @@
   }
 
   /* 新增的行进场，同一批按到达顺序错开；首帧就在的直接呈现（自己或根节点带 data-instant） */
-  [data-scope='field-array'][data-part='item']:not([data-instant], [data-instant] > *) {
+  [data-scope='field-array'][data-part='item']:not([data-instant], [data-instant] > :where([data-scope='field-array'])) {
     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/file-upload.css

@@ -184,7 +184,7 @@
     transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
-  [data-scope='file-upload'][data-part='item']:not([data-instant], [data-instant] > *) {
+  [data-scope='file-upload'][data-part='item']:not([data-instant], [data-instant] > :where([data-scope='file-upload'])) {
     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/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));
 
@@ -166,18 +166,18 @@
 
   /* —— 尺寸：原生动作项与触发器的 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);
   }
 
   /* —— 形态：给展开列表里原生动作项用的面 ——
@@ -402,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 保留自己的皮肤。 */
@@ -462,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

@@ -247,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;
   }
 
@@ -256,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);
   }
 
@@ -271,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);
   }
 
@@ -280,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);
   }
 
@@ -292,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));
   }