@xihan-ui/styles 3.1.0 → 3.2.0

package/css/notification.css

@@ -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,14 +533,14 @@
   }
 
   /* 轻提示的语气落到标题与行首字形：一句话的结果，颜色本身就是信息 */
-  [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))
@@ -560,7 +560,7 @@
   }
 
   /* 轻提示的说明只是一行短上下文，行高收紧到正文之下 */
-  [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));
   }
@@ -595,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;
@@ -603,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;
@@ -621,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;
   }
 
@@ -659,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;
   }
@@ -692,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;
   }
@@ -708,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;
     }
@@ -722,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;
     }
   }

package/css/page-header.css

@@ -149,7 +149,7 @@
   }
 
   [data-scope='page-header'][data-part='root']:has(> [data-part='description'])
-    > :is([data-part='back-trigger'], [data-part='media'], [data-part='extra']) {
+    > :is([data-part='back-trigger'], [data-part='media'], [data-part='extra']):where([data-scope='page-header']) {
     grid-row: span 2;
   }
 
@@ -166,7 +166,7 @@
       grid-column: 2;
     }
 
-    [data-scope='page-header'][data-part='root'] > [data-part='extra'] {
+    [data-scope='page-header'][data-part='root'] > [data-part='extra']:where([data-scope='page-header']) {
       grid-column: 1 / -1;
       grid-row: auto;
       margin-inline-start: 0;

package/css/password-input.css

@@ -202,7 +202,7 @@
      分不出焦点在框里还是在钮上，所以钮上再画一圈自己的环（家族只对不占 Tab 位的内嵌钮关环）。
      环往内收，压在按钮自己的方框里，不与盒子外面那一圈叠在一起。
      指示焦点只能用环不能用底色：可用的几档底色压在盒底上都到不了 3:1，换了色也等于没画 */
-  [data-scope='password-input'][data-part='control'] [data-part='visibility-trigger']:focus-visible {
+  [data-scope='password-input'][data-part='control'] [data-part='visibility-trigger']:where([data-scope='password-input']):focus-visible {
     outline: var(--xh-ring-width) solid var(--xh-_password-input-ring);
     outline-offset: var(--xh-ring-offset);
   }
@@ -357,7 +357,7 @@
 
     /* 关掉强制换色后，上面那圈自留的 :focus-visible 环与家族普通态的焦点底/字都会按作者色落地；
        家族高对比块的特指度压不过它们，这里用同一选择器把环、底、字改回系统色 */
-    [data-scope='password-input'][data-part='control'] [data-part='visibility-trigger']:focus-visible {
+    [data-scope='password-input'][data-part='control'] [data-part='visibility-trigger']:where([data-scope='password-input']):focus-visible {
       outline-color: Highlight;
       background-color: ButtonFace;
       color: ButtonText;

package/css/popconfirm.css

@@ -145,7 +145,7 @@
   }
 
   /* 箭头绝对定位挂在 content 上，不占格：吃到栅格位的话它的贴边就从格线起算，被内衬推进面里 */
-  [data-scope='popconfirm'][data-part='content'] > [data-part='arrow'] {
+  [data-scope='popconfirm'][data-part='content'] > [data-part='arrow']:where([data-scope='popconfirm']) {
     grid-column: auto;
   }
 
@@ -234,11 +234,11 @@
   }
 
   /* 并排落在最后一行的右侧两格；取消在左、确认在右 */
-  [data-scope='popconfirm'][data-part='content'] > [data-part='cancel-trigger'] {
+  [data-scope='popconfirm'][data-part='content'] > [data-part='cancel-trigger']:where([data-scope='popconfirm']) {
     grid-column: 2;
   }
 
-  [data-scope='popconfirm'][data-part='content'] > [data-part='confirm-trigger'] {
+  [data-scope='popconfirm'][data-part='content'] > [data-part='confirm-trigger']:where([data-scope='popconfirm']) {
     grid-column: 3;
   }
 

package/css/question-flow.css

@@ -41,7 +41,7 @@
   }
 
   /* 卡片出现时滑入；落在首帧就在的列表条目里（历史消息）时直接呈现，不跟着整屏一起入场 */
-  [data-scope='question-flow'][data-part='root']:not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='question-flow'][data-part='root']:not([data-scope][data-part='item'][data-instant] :where([data-scope='question-flow'])) {
     animation: xh-item-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -201,27 +201,27 @@
      位次就是到达顺序。落在首帧就在的列表条目里（历史消息）时直接呈现。
      backwards 不能省：等待期间起帧不生效的话，后面几条会先露一下再跳回去。
      第 6 条起并到同一拍上 */
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:where([data-scope='question-flow']):not([data-scope][data-part='item'][data-instant] :where([data-scope='question-flow'])) {
     animation: xh-rise-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
   }
 
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(2):not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:where([data-scope='question-flow']):nth-child(2):not([data-scope][data-part='item'][data-instant] :where([data-scope='question-flow'])) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 1);
   }
 
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(3):not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:where([data-scope='question-flow']):nth-child(3):not([data-scope][data-part='item'][data-instant] :where([data-scope='question-flow'])) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 2);
   }
 
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(4):not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:where([data-scope='question-flow']):nth-child(4):not([data-scope][data-part='item'][data-instant] :where([data-scope='question-flow'])) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 3);
   }
 
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(5):not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:where([data-scope='question-flow']):nth-child(5):not([data-scope][data-part='item'][data-instant] :where([data-scope='question-flow'])) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 4);
   }
 
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(n + 6):not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:where([data-scope='question-flow']):nth-child(n + 6):not([data-scope][data-part='item'][data-instant] :where([data-scope='question-flow'])) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 5);
   }
 
@@ -504,7 +504,7 @@
   }
 
   /* 落定结果弹出；落在首帧就在的列表条目里（历史消息）时直接呈现，不跟着整屏一起入场 */
-  [data-scope='question-flow'][data-part='result']:not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='question-flow'][data-part='result']:not([data-scope][data-part='item'][data-instant] :where([data-scope='question-flow'])) {
     animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 

package/css/radar-chart.css

@@ -167,12 +167,12 @@
 
   /* —— 纹理：颜色不可用或不可靠时（强制色、打印、祖先写了 data-xh-chart-patterns），面积改用本系列在 defs 里的
      纹理填充、描出轮廓，轮廓换线型。色标的纹理在配方里 —— */
-  :where([data-xh-chart-patterns]) [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='area-fill'] {
+  :where([data-xh-chart-patterns]) [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='area-fill']:where([data-scope='radar-chart']) {
     fill: var(--xh-_chart-pattern);
     fill-opacity: 1;
   }
 
-  :where([data-xh-chart-patterns]) [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='line'] {
+  :where([data-xh-chart-patterns]) [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='line']:where([data-scope='radar-chart']) {
     stroke-dasharray: var(--xh-_chart-dash);
   }
 
@@ -204,13 +204,13 @@
       stroke: Canvas;
     }
 
-    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='area-fill'] {
+    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='area-fill']:where([data-scope='radar-chart']) {
       forced-color-adjust: none;
       fill: var(--xh-_chart-pattern);
       fill-opacity: 1;
     }
 
-    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='line'] {
+    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='line']:where([data-scope='radar-chart']) {
       stroke-dasharray: var(--xh-_chart-dash);
     }
   }
@@ -221,12 +221,12 @@
       display: none;
     }
 
-    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='area-fill'] {
+    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='area-fill']:where([data-scope='radar-chart']) {
       fill: var(--xh-_chart-pattern);
       fill-opacity: 1;
     }
 
-    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='line'] {
+    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='line']:where([data-scope='radar-chart']) {
       stroke-dasharray: var(--xh-_chart-dash);
     }
   }

package/css/rating.css

@@ -78,7 +78,7 @@
     justify-content: start;
   }
 
-  [data-scope='rating'][data-part='root']:has(> [data-part='value-text']) > [data-part='label'] {
+  [data-scope='rating'][data-part='root']:has(> [data-part='value-text']) > [data-part='label']:where([data-scope='rating']) {
     grid-column: 1 / -1;
   }
 

package/css/select.css

@@ -224,7 +224,7 @@
 
   /* 标签行露面时 value-text 让位：两者是触发器里的同一格，占位文字与标签不同屏。
      value-text 留在 DOM 里，trigger 的可及名仍从它取到完整的选中项文本 */
-  [data-scope='select'][data-part='trigger']:has([data-part='tag-list']:not([hidden])) [data-part='value-text'] {
+  [data-scope='select'][data-part='trigger']:has([data-part='tag-list']:not([hidden])) [data-part='value-text']:where([data-scope='select']) {
     display: none;
   }
 
@@ -256,7 +256,7 @@
   /* 有值时清空钮顶上来，箭头让位：两个图标并排堆着，用户分不清点哪个。
      判据查的是盒里此刻真有一颗没收起的清空钮，不是「有没有值」——
      作者没摆清空钮时箭头照常留着，不然让了位没人接，指示符整个消失 */
-  [data-scope='select'][data-part='control']:has([data-part='clear-trigger']:not([hidden])) [data-part='indicator'] {
+  [data-scope='select'][data-part='control']:has([data-part='clear-trigger']:not([hidden])) [data-part='indicator']:where([data-scope='select']) {
     display: none;
   }
 

package/css/separator.css

@@ -109,8 +109,8 @@
   }
 
   /* 文字靠边：靠哪边就把那一侧的线收成一小截，另一侧照旧等分 */
-  [data-scope='separator'][data-part='root'][data-align='start'] > [data-part='line']:first-child,
-  [data-scope='separator'][data-part='root'][data-align='end'] > [data-part='line']:last-child {
+  [data-scope='separator'][data-part='root'][data-align='start'] > [data-part='line']:where([data-scope='separator']):first-child,
+  [data-scope='separator'][data-part='root'][data-align='end'] > [data-part='line']:where([data-scope='separator']):last-child {
     flex: 0 0 var(--xh-separator-align-length, var(--xh-space-6));
   }
 

package/css/side-nav.css

@@ -112,11 +112,11 @@
 
   /* 折叠一开始搜索框就与行文字一起淡出，展开等整栏宽度落定才淡入；落成图标栏之后让位：
      留着高度、不可见也不可聚焦（过滤此时暂停），下面的行不上下跳 */
-  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='input'] {
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='input']:where([data-scope='side-nav']) {
     opacity: 0;
   }
 
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='input'] {
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='input']:where([data-scope='side-nav']) {
     visibility: hidden;
   }
 
@@ -171,13 +171,13 @@
 
   /* 图标栏里分组标题没有落点：字淡成透明、仍参与播报，标题留着自己的高度，下面的行不上下跳；
      折叠一开始就淡出，展开等整栏宽度落定才淡入。落成图标栏之后在这一格里画一道细分隔，分组仍看得出来 */
-  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='group-label'] {
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='group-label']:where([data-scope='side-nav']) {
     overflow: hidden;
     color: transparent;
     white-space: nowrap;
   }
 
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='group-label']::after {
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='group-label']:where([data-scope='side-nav'])::after {
     content: '';
     position: absolute;
     inset-inline: var(--xh-_side-nav-row-px);
@@ -275,9 +275,9 @@
 
   /* 行文字与展开箭头的淡变：折叠一开始就淡出，此时仍在行里、由收窄的行宽裁着；展开时等整栏宽度落定才淡入。
      弹出面板里的行不在此列 */
-  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='branch-text']:not([data-popout] *),
-  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='link-text']:not([data-popout] *),
-  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='branch-indicator']:not([data-popout] *) {
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='branch-text']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])),
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='link-text']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])),
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='branch-indicator']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])) {
     opacity: 0;
   }
 
@@ -286,8 +286,8 @@
      藏成 display:none 它们就一个名字都没有了。
      white-space: nowrap 防止 1px 宽把文本挤成竖排。
      弹出面板里的行不在此列——面板是正常宽度的浮层，文字照常显示 */
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-text']:not([data-popout] *),
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='link-text']:not([data-popout] *) {
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-text']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])),
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='link-text']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])) {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -300,12 +300,12 @@
   }
 
   /* 展开指示是纯装饰（aria-hidden），落成图标栏之后整个不占位 */
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-indicator']:not([data-popout] *) {
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-indicator']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])) {
     display: none;
   }
 
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-trigger']:not([data-popout] *),
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='link']:not([data-popout] *) {
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-trigger']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])),
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='link']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])) {
     --xh-collection-inline-padding: 0;
 
     justify-content: center;
@@ -441,7 +441,7 @@
 
   @media (forced-colors: active) {
     /* 图标栏里分组之间那道细分隔画的是一块底色，这一档里底色被统一换成 Canvas、整道消失；换成 GrayText 画回来 */
-    [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='group-label']::after {
+    [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='group-label']:where([data-scope='side-nav'])::after {
       background: GrayText;
     }
   }

package/css/skeleton.css

@@ -90,13 +90,13 @@
    * 微光扫的是一道亮带，呼吸改的是整根的浓淡——两者都表达"还在等"，
    * 换哪一档由作者定，缺省仍是微光。
    */
-  [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
+  [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item']:where([data-scope='skeleton']) {
     background-image: none;
     animation: xh-skeleton-pulse var(--xh-skeleton-pulse-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-sweep) infinite alternate;
   }
 
   /* 静止档：底色留着，两层动效都撤掉 */
-  [data-scope='skeleton'][data-part='root'][data-animation='none'] [data-part='item'] {
+  [data-scope='skeleton'][data-part='root'][data-animation='none'] [data-part='item']:where([data-scope='skeleton']) {
     background-image: none;
     animation: none;
   }
@@ -104,17 +104,17 @@
   /* 呼吸档自带一条动画，压不住下面基础降级里的 animation: none，这一档各自再写一份。
      两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
   @media (prefers-reduced-motion: reduce) {
-    [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
+    [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item']:where([data-scope='skeleton']) {
       animation: none;
     }
   }
 
-  :where([data-motion='reduce']) [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
+  :where([data-motion='reduce']) [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item']:where([data-scope='skeleton']) {
     animation: none;
   }
 
   @media print {
-    [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
+    [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item']:where([data-scope='skeleton']) {
       animation: none;
     }
   }

package/css/slider.css

@@ -64,7 +64,7 @@
      排了刻度文案的横轨两侧各让出一段，那半个文案落进让出来的这一段里。
      让在控件上而不是根上：轨道、刻度、拇指的坐标都以控件为基准，一起让开才不会彼此错位。 */
   [data-scope='slider'][data-part='root']:has([data-part='tick-label'])
-    [data-part='control'][data-orientation='horizontal'] {
+    [data-part='control'][data-orientation='horizontal']:where([data-scope='slider']) {
     margin-inline: var(--xh-slider-control-gutter, var(--xh-space-6));
   }
 
@@ -335,27 +335,27 @@
 
   /* 禁用：刻度点与文案由 tick-group 上的 data-disabled 下发（连接层不给每个刻度单发），
      已过的刻度点与区间同色，文案换禁用前景，点它跳档的手型收掉 */
-  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick'] {
+  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick']:where([data-scope='slider']) {
     background: var(--xh-slider-tick-bg-disabled, var(--xh-border-default));
   }
 
-  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick'][data-passed] {
+  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick'][data-passed]:where([data-scope='slider']) {
     background: var(--xh-slider-tick-bg-active-disabled, var(--xh-fg-disabled));
   }
 
-  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick-label'] {
+  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick-label']:where([data-scope='slider']) {
     color: var(--xh-slider-tick-label-fg-disabled, var(--xh-fg-disabled));
     cursor: not-allowed;
   }
 
   /* 竖直轨道：点与文案换轴，坐标由连接层写在 block 轴上 */
-  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick'] {
+  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick']:where([data-scope='slider']) {
     inset-block-start: auto;
     inset-inline-start: 50%;
     translate: calc(-50% * var(--xh-direction-sign)) 50%;
   }
 
-  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick-label'] {
+  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick-label']:where([data-scope='slider']) {
     inset-block-start: auto;
     inset-inline-start: 100%;
     margin-block-start: 0;