@xihan-ui/styles 3.1.0 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @xihan-ui/styles
 
+## 3.2.0
+
+### Minor Changes
+
+- 0d4e616: Carousel 分页点新增组件槽 `--xh-carousel-indicator-thickness`：垂直于轨道的粗细单独可调（横轨管高、纵轨管宽），缺省与 `--xh-carousel-indicator-size` 同值，现有圆点与胶囊不变。此前分页点的宽高共用一个长度槽，只画得出圆点与拉长的胶囊，想要细横条只能覆盖指示点盒子本身的尺寸与底色，粗指针下盒子撑成 44px 命中区、点改由伪元素画，覆盖的底色就把整块命中区涂满。现在粗细调小即成细横条（圆角另把 `--xh-carousel-indicator-radius` 换成 `var(--xh-shape-pill)`）：细指针的命中区垂直于轨道多外扩一些、不低于 24px，粗指针下伪元素画的点与自动播放进度条同样按粗细画，44px 命中区不变。
+- 8b8d520: 浮在内容之上的圆钮（Action Control `floating` 档）整体下移一档：sm / md / lg 由 40 / 48 / 56px 改为 32 / 40 / 48px（compact 28 / 36 / 44px），图标 16 / 20 / 24px，缺省 md 即 40px。48px 的钮在矮视口与小卡片里会叠住内容与彼此（走马灯的翻页钮与播放钮、纵向轨道压住正文）。
+
+  视觉默认变化：BackTop、FloatButton（含展开列表里的动作项）缺省由 48px 变为 40px，`size="lg"` 由 56px 变为 48px；ImageViewer 翻页钮由 48px 变为 40px、关闭钮由 40px 变为 32px；Carousel 翻页与播放钮为 40px。Log / MessageFeed 的回到底部钮缺省仍是 32px。
+
+  新增尺寸档：
+
+  - Carousel 新增 `size`（sm / md / lg，缺省 md），翻页、播放三颗钮同档。
+  - ImageViewer 新增 `size`（sm / md / lg，缺省 md），翻页钮同档，关闭钮比它低一档、最低 sm。
+  - Log、MessageFeed 的回到底部钮随组件已有的 `size` 换档：比组件低一档、最低 sm（sm / md 时 32px，lg 时 40px）。
+
+  新增的 `size` 与其他组件一样接全局配置，没写时取全局尺寸。
+
+- 831acc9: 每个角色节点另带皮肤挂载类 `xh-scope-<组件名>`，与 `data-scope` 一一对应（`data-scope="dialog"` 的节点带 `xh-scope-dialog`）。解剖产出的 attrs 多一项 `class`，Vue 与作者的 class 合并、React 落成 `className` 并与作者的拼接、Web Components 按词增删不覆盖作者写的类；asChild 把部件属性合进自带解剖的子节点时，挂载类随 `data-scope` 一起让位，一个节点不会同时吃两个组件的皮肤。core 新增导出 `SCOPE_CLASS_PREFIX`、`scopeClass()` 与 `stripScopeClass()`。
+
+  挂载类是皮肤产物改以类名领头的前提：浏览器按类名给规则分桶，属性选择器只按属性名分桶，几千条以 `[data-scope=…]` 领头的皮肤规则挤在同一个桶里，每个组件节点每次样式重算都要逐条试一遍。`data-scope` / `data-part` 仍是公开的样式契约，作者的覆盖写法不变。节点的 class 属性因此多了一个词：对 DOM 做快照或精确比对 `className` 的测试需要随之更新。只用 `@xihan-ui/styles`、自己书写标记的页面，要给每个带 `data-scope="x"` 的节点补上 `class="xh-scope-x"`，否则皮肤不命中。
+
+### Patch Changes
+
+- fca75b0: 皮肤里挂在运行期状态后面的后代与兄弟规则，主体都带上了组件特征。浏览器按属性名 / 伪类全局登记「某个属性一变要重算哪些节点」，不看取值也不看同一节里的组件限定：主体只靠 `[data-part]`（或 `> *` 这类没有特征的主体）时，页面上任何元素翻转 `data-state`、`data-current`、`data-disabled`、`data-instant` 等，都会把它整棵子树一起标脏。3500 个组件节点的容器上翻一次 `data-state` 由 150ms 降到 4ms，`data-current` 152ms → 2ms，`data-disabled` 155ms → 8ms，`data-instant` 80ms → 11ms。
+
+  本组件的部件补 `:where([data-scope='x'])`（产物里成为 `:where(.xh-scope-x)`，不加特异性，层叠不变）；作者放进来的任意子节点（按钮加载环与色板徽标里的图形、组合框展开钮的箭头、日期输入的段位、浮动按钮的动作项）改为由父节点写私有槽、子节点只读槽。浮动按钮动作项的冒出与缩回交错改由名次与收起标记算出，收起时的指针关闭挪到 list 上继承。
+
+  - @xihan-ui/tokens@3.2.0
+
 ## 3.1.0
 
 ### Minor Changes

package/component-tokens.d.ts

@@ -380,6 +380,7 @@ export type ComponentTokenName
     | '--xh-carousel-indicator-size'
     | '--xh-carousel-indicator-size-current'
     | '--xh-carousel-indicator-target-size'
+    | '--xh-carousel-indicator-thickness'
     | '--xh-carousel-trigger-bg'
     | '--xh-carousel-trigger-bg-active'
     | '--xh-carousel-trigger-bg-hover'

package/components.tokens.json

@@ -7557,7 +7557,9 @@
       ],
       "property": [
         "block-size",
-        "inline-size"
+        "inline-size",
+        "inset-block",
+        "inset-inline"
       ],
       "state": [
         "@media (pointer: coarse)",
@@ -7571,7 +7573,7 @@
         "--xh-space-2"
       ],
       "visibility": "public",
-      "description": "carousel 的 indicator、indicator-group、root 部件 block-size、inline-size 覆盖槽。"
+      "description": "carousel 的 indicator、indicator-group、root 部件 block-size、inline-size、inset-block、inset-inline 覆盖槽。"
     },
     {
       "name": "--xh-carousel-indicator-size-current",
@@ -7626,6 +7628,34 @@
       "visibility": "public",
       "description": "carousel 的 indicator、root 部件 min-block-size、min-inline-size 覆盖槽。"
     },
+    {
+      "name": "--xh-carousel-indicator-thickness",
+      "component": "carousel",
+      "part": [
+        "indicator",
+        "indicator-group",
+        "root"
+      ],
+      "property": [
+        "block-size",
+        "inline-size",
+        "inset-block",
+        "inset-inline"
+      ],
+      "state": [
+        "@media (pointer: coarse)",
+        "autoplay",
+        "current",
+        "default",
+        "orientation=vertical",
+        "paused"
+      ],
+      "defaultToken": [
+        "--xh-carousel-indicator-size"
+      ],
+      "visibility": "public",
+      "description": "carousel 的 indicator、indicator-group、root 部件 block-size、inline-size、inset-block、inset-inline 覆盖槽。"
+    },
     {
       "name": "--xh-carousel-trigger-bg",
       "component": "carousel",

package/css/alert.css

@@ -100,8 +100,8 @@
   }
 
   /* 列里的两段文字不再参与 root 那一行的伸缩：宽度由列自己给 */
-  [data-scope='alert'][data-part='content'] [data-part='title'],
-  [data-scope='alert'][data-part='content'] [data-part='description'] {
+  [data-scope='alert'][data-part='content'] [data-part='title']:where([data-scope='alert']),
+  [data-scope='alert'][data-part='content'] [data-part='description']:where([data-scope='alert']) {
     flex: none;
   }
 

package/css/approval.css

@@ -48,7 +48,7 @@
   }
 
   /* 卡片出现时滑入；落在首帧就在的列表条目里（历史消息）时直接呈现，不跟着整屏一起入场 */
-  [data-scope='approval'][data-part='root']:not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='approval'][data-part='root']:not([data-scope][data-part='item'][data-instant] :where([data-scope='approval'])) {
     animation: xh-item-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -252,12 +252,12 @@
     color: var(--xh-approval-item-text-fg, var(--xh-fg-muted));
   }
 
-  [data-scope='approval'][data-part='item'][data-state='checked'] [data-part='item-text'] {
+  [data-scope='approval'][data-part='item'][data-state='checked'] [data-part='item-text']:where([data-scope='approval']) {
     color: var(--xh-approval-item-text-fg-checked, var(--xh-fg-default));
   }
 
   /* 排在勾选档之后：禁用项无论勾没勾都是禁用色 */
-  [data-scope='approval'][data-part='item'][data-disabled] [data-part='item-text'] {
+  [data-scope='approval'][data-part='item'][data-disabled] [data-part='item-text']:where([data-scope='approval']) {
     color: var(--xh-fg-disabled);
   }
 
@@ -325,7 +325,7 @@
   }
 
   /* 落定结果弹出；落在首帧就在的列表条目里（历史消息）时直接呈现，不跟着整屏一起入场 */
-  [data-scope='approval'][data-part='result']:not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='approval'][data-part='result']:not([data-scope][data-part='item'][data-instant] :where([data-scope='approval'])) {
     animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 

package/css/button.css

@@ -156,16 +156,20 @@
     content: none;
   }
 
+  /* 作者的图形是任意节点，规则主体没有可认的特征：加载与否写在 indicator 自己的私有槽上，
+     图形只读槽。翻转 data-loading 时失效的只有 indicator 本身，不会让全页同名属性的变化整棵子树重算 */
   [data-scope='button'][data-part='indicator'] > * {
-    opacity: 0;
+    opacity: var(--xh-_button-indicator-opacity, 0);
     transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition-delay: calc(var(--xh-motion-duration-micro) * var(--xh-_button-indicator-delay, 0));
     animation: xh-spin var(--xh-button-spin-duration, var(--xh-motion-loop-spin)) var(--xh-motion-ease-loop) infinite paused;
+    animation-play-state: var(--xh-_button-indicator-play, paused);
   }
 
-  [data-scope='button'][data-part='root'][data-loading] > [data-scope='button'][data-part='indicator'] > * {
-    opacity: 1;
-    transition-delay: var(--xh-motion-duration-micro);
-    animation-play-state: running;
+  [data-scope='button'][data-part='root'][data-loading] > [data-scope='button'][data-part='indicator'] {
+    --xh-_button-indicator-opacity: 1;
+    --xh-_button-indicator-delay: 1;
+    --xh-_button-indicator-play: running;
   }
 
   /* 钮里原有的内容与环交叉：进入在途同样等一个 micro 才淡出、留位不塌，退出不等 */

package/css/calendar-picker.css

@@ -143,7 +143,7 @@
   }
 
   /* 周期格沿横轴铺开，但始终保持控制件高度；选中面只换颜色，不改变几何尺寸。 */
-  [data-scope='calendar-picker'][data-part='grid']:is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year']) [data-part='cell-trigger'] {
+  [data-scope='calendar-picker'][data-part='grid']:is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year']) [data-part='cell-trigger']:where([data-scope='calendar-picker']) {
     flex: 0 0 auto;
     aspect-ratio: auto;
     min-inline-size: 0;
@@ -152,7 +152,7 @@
     border-radius: var(--xh-calendar-picker-period-radius, var(--xh-shape-control));
   }
 
-  [data-scope='calendar-picker'][data-part='grid'][data-view='week'] [data-part='cell-trigger'] {
+  [data-scope='calendar-picker'][data-part='grid'][data-view='week'] [data-part='cell-trigger']:where([data-scope='calendar-picker']) {
     flex: 1 1 auto;
     justify-content: flex-start;
     inline-size: 100%;
@@ -361,7 +361,7 @@
      只收日视图这一档：粗粒度视图（月格、年格）点一格是往下钻一层，只读也照做，
      那些格子仍是按得动的按钮，手型不能撤 */
   [data-scope='calendar-picker'][data-part='grid'][data-readonly][data-view='day']
-    [data-part='cell-trigger']:not([data-disabled]) {
+    [data-part='cell-trigger']:where([data-scope='calendar-picker']):not([data-disabled]) {
     --xh-action-cursor-rest: default;
     --xh-action-cursor-hover: default;
     --xh-action-cursor-pressed: default;

package/css/calendar-range-picker.css

@@ -143,7 +143,7 @@
   }
 
   /* 周期格沿横轴铺开，但始终保持控制件高度；选中面只换颜色，不改变几何尺寸。 */
-  [data-scope='calendar-range-picker'][data-part='grid']:is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year']) [data-part='cell-trigger'] {
+  [data-scope='calendar-range-picker'][data-part='grid']:is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year']) [data-part='cell-trigger']:where([data-scope='calendar-range-picker']) {
     flex: 0 0 auto;
     aspect-ratio: auto;
     min-inline-size: 0;
@@ -152,7 +152,7 @@
     border-radius: var(--xh-calendar-range-picker-period-radius, var(--xh-shape-control));
   }
 
-  [data-scope='calendar-range-picker'][data-part='grid'][data-view='week'] [data-part='cell-trigger'] {
+  [data-scope='calendar-range-picker'][data-part='grid'][data-view='week'] [data-part='cell-trigger']:where([data-scope='calendar-range-picker']) {
     flex: 1 1 auto;
     justify-content: flex-start;
     inline-size: 100%;
@@ -264,13 +264,13 @@
 
   /* 行首与行尾收圆：区间跨周时每一行各是一条两头圆的横杠。
      摆了周序号格的行里，行首那一格排在它后面 */
-  [data-scope='calendar-range-picker'][data-part='week-row'] > [data-part='cell'][data-in-range]:first-child::before,
-  [data-scope='calendar-range-picker'][data-part='week-row'] > [data-part='week-number'] + [data-part='cell'][data-in-range]::before {
+  [data-scope='calendar-range-picker'][data-part='week-row'] > [data-part='cell'][data-in-range]:where([data-scope='calendar-range-picker']):first-child::before,
+  [data-scope='calendar-range-picker'][data-part='week-row'] > [data-part='week-number'] + [data-part='cell'][data-in-range]:where([data-scope='calendar-range-picker'])::before {
     border-start-start-radius: var(--xh-calendar-range-picker-range-row-radius, var(--xh-shape-inset));
     border-end-start-radius: var(--xh-calendar-range-picker-range-row-radius, var(--xh-shape-inset));
   }
 
-  [data-scope='calendar-range-picker'][data-part='week-row'] > [data-part='cell'][data-in-range]:last-child::before {
+  [data-scope='calendar-range-picker'][data-part='week-row'] > [data-part='cell'][data-in-range]:where([data-scope='calendar-range-picker']):last-child::before {
     border-start-end-radius: var(--xh-calendar-range-picker-range-row-radius, var(--xh-shape-inset));
     border-end-end-radius: var(--xh-calendar-range-picker-range-row-radius, var(--xh-shape-inset));
   }
@@ -286,7 +286,7 @@
   }
 
   /* 粗粒度的格子之间有间隙，底色本就接不成一条，每一格各自收圆 */
-  [data-scope='calendar-range-picker'][data-part='grid']:is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year']) > [data-part='cell'][data-in-range]::before {
+  [data-scope='calendar-range-picker'][data-part='grid']:is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year']) > [data-part='cell'][data-in-range]:where([data-scope='calendar-range-picker'])::before {
     border-radius: var(--xh-calendar-range-picker-cell-radius, var(--xh-shape-inset));
   }
 
@@ -441,7 +441,7 @@
      只收日视图这一档：粗粒度视图（月格、年格）点一格是往下钻一层，只读也照做，
      那些格子仍是按得动的按钮，手型不能撤 */
   [data-scope='calendar-range-picker'][data-part='grid'][data-readonly][data-view='day']
-    [data-part='cell-trigger']:not([data-disabled]) {
+    [data-part='cell-trigger']:where([data-scope='calendar-range-picker']):not([data-disabled]) {
     --xh-action-cursor-rest: default;
     --xh-action-cursor-hover: default;
     --xh-action-cursor-pressed: default;

package/css/carousel.css

@@ -269,7 +269,9 @@
 
   /* 分页点与 Tour 的步骤点同一种语言：8px 圆点，当前页拉长成 20px 胶囊并换品牌色。
      本体就是那颗点：没有文字（页码交给作者，默认不显示），底色即标记。
-     悬停 / 按下的回执落在点的颜色上：中性标记按前景阶梯加深一档、再加深一档；当前页按品牌阶梯压一档 */
+     悬停 / 按下的回执落在点的颜色上：中性标记按前景阶梯加深一档、再加深一档；当前页按品牌阶梯压一档。
+     沿轨道的长度取 indicator-size（当前页 indicator-size-current），垂直于轨道的粗细取 indicator-thickness，
+     缺省与长度同值、仍是圆点；粗细单独调小就成细横条（横条不是正方盒，圆角另把 indicator-radius 换成胶囊） */
   [data-scope='carousel'][data-part='indicator'] {
     position: relative;
     display: inline-flex;
@@ -277,7 +279,7 @@
     align-items: center;
     justify-content: center;
     inline-size: var(--xh-carousel-indicator-size, var(--xh-space-2));
-    block-size: var(--xh-carousel-indicator-size, var(--xh-space-2));
+    block-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2)));
     padding: 0;
     border: 0;
     border-radius: var(--xh-carousel-indicator-radius, var(--xh-shape-circle));
@@ -297,11 +299,25 @@
     display: none;
   }
 
-  /* 细指针的命中区外扩到 24×24（8px 点四面各扩 8px）；粗指针下这颗伪元素改画点，盒子自己承担命中 */
+  /* 细指针的命中区外扩到 24×24（8px 点四面各扩 8px）；粗指针下这颗伪元素改画点，盒子自己承担命中。
+     点调细了，垂直于轨道那一向多扩一些，命中区不低于 24px 的最小目标 */
   [data-scope='carousel'][data-part='indicator']::after {
     content: '';
     position: absolute;
-    inset: calc(-1 * var(--xh-space-2));
+    inset-inline: calc(-1 * var(--xh-space-2));
+    inset-block: min(
+      calc(-1 * var(--xh-space-2)),
+      calc((var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2))) - var(--xh-space-6)) / 2)
+    );
+  }
+
+  [data-scope='carousel'][data-part='indicator-group'][data-orientation='vertical']
+    > [data-scope='carousel'][data-part='indicator']::after {
+    inset-inline: min(
+      calc(-1 * var(--xh-space-2)),
+      calc((var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2))) - var(--xh-space-6)) / 2)
+    );
+    inset-block: calc(-1 * var(--xh-space-2));
   }
 
   [data-scope='carousel'][data-part='indicator']:hover:not([data-current]) {
@@ -383,9 +399,15 @@
   }
 
   /* 纵轨：胶囊沿块轴拉长，进度条从上往下长 */
+  [data-scope='carousel'][data-part='indicator-group'][data-orientation='vertical']
+    > [data-scope='carousel'][data-part='indicator'] {
+    inline-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2)));
+    block-size: var(--xh-carousel-indicator-size, var(--xh-space-2));
+  }
+
   [data-scope='carousel'][data-part='indicator-group'][data-orientation='vertical']
     > [data-scope='carousel'][data-part='indicator'][data-current] {
-    inline-size: var(--xh-carousel-indicator-size, var(--xh-space-2));
+    inline-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2)));
     block-size: var(--xh-carousel-indicator-size-current, var(--xh-space-5));
   }
 
@@ -400,7 +422,7 @@
   }
 
   [data-scope='carousel'][data-part='root'][data-orientation='vertical']
-    > :is([data-part='prev-trigger'], [data-part='next-trigger']) {
+    > :is([data-part='prev-trigger'], [data-part='next-trigger']):where([data-scope='carousel']) {
     inset-inline-start: 50%;
     inset-inline-end: auto;
     translate: -50% 0;
@@ -408,23 +430,23 @@
   }
 
   [data-scope='carousel'][data-part='root'][data-orientation='vertical']
-    > :is([data-part='prev-trigger'], [data-part='next-trigger']):dir(rtl) {
+    > :is([data-part='prev-trigger'], [data-part='next-trigger']):where([data-scope='carousel']):dir(rtl) {
     translate: 50% 0;
   }
 
   /* 纵轨的翻页钮整颗转了 90°，形变会跟着转到错的方向，这一档不挂 */
   :where([data-material='liquid']) [data-scope='carousel'][data-part='root'][data-orientation='vertical']
-    > :is([data-part='prev-trigger'], [data-part='next-trigger'])[data-xh-liquid] {
+    > :is([data-part='prev-trigger'], [data-part='next-trigger']):where([data-scope='carousel'])[data-xh-liquid] {
     transform: none;
   }
 
   [data-scope='carousel'][data-part='root'][data-orientation='vertical']
-    > [data-part='prev-trigger'] {
+    > [data-part='prev-trigger']:where([data-scope='carousel']) {
     inset-block-start: var(--xh-carousel-control-inset, var(--xh-space-3));
   }
 
   [data-scope='carousel'][data-part='root'][data-orientation='vertical']
-    > [data-part='next-trigger'] {
+    > [data-part='next-trigger']:where([data-scope='carousel']) {
     inset-block-start: auto;
     inset-block-end: var(--xh-carousel-control-inset, var(--xh-space-3));
   }
@@ -564,7 +586,7 @@
       inset-block-start: 50%;
       inset-inline-start: 50%;
       inline-size: var(--xh-carousel-indicator-size, var(--xh-space-2));
-      block-size: var(--xh-carousel-indicator-size, var(--xh-space-2));
+      block-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2)));
       border-radius: var(--xh-carousel-indicator-radius, var(--xh-shape-circle));
       background: var(--xh-carousel-indicator-bg, var(--xh-bg-subtle-hover-opaque));
       translate: -50% -50%;
@@ -614,7 +636,7 @@
       inset-inline-start: 50%;
       z-index: 1;
       inline-size: var(--xh-carousel-indicator-size-current, var(--xh-space-5));
-      block-size: var(--xh-carousel-indicator-size, var(--xh-space-2));
+      block-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2)));
       border-radius: var(--xh-carousel-indicator-radius-current, var(--xh-shape-pill));
       translate: -50% -50%;
     }
@@ -626,6 +648,16 @@
       translate: 50% -50%;
     }
 
+    /* 纵轨：细指针那条按轨道方向外扩命中区的规则更具体，这里把点的定位一并收回到居中 */
+    [data-scope='carousel'][data-part='indicator-group'][data-orientation='vertical']
+      > [data-scope='carousel'][data-part='indicator']::after {
+      inset: auto;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      inline-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2)));
+      block-size: var(--xh-carousel-indicator-size, var(--xh-space-2));
+    }
+
     [data-scope='carousel'][data-part='indicator-group'][data-orientation='vertical']
       > [data-scope='carousel'][data-part='indicator'][data-current]::after,
     [data-scope='carousel'][data-part='root'][data-autoplay]
@@ -634,7 +666,7 @@
     [data-scope='carousel'][data-part='root'][data-paused]
       [data-scope='carousel'][data-part='indicator-group'][data-orientation='vertical']
       > [data-scope='carousel'][data-part='indicator'][data-current]::before {
-      inline-size: var(--xh-carousel-indicator-size, var(--xh-space-2));
+      inline-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2)));
       block-size: var(--xh-carousel-indicator-size-current, var(--xh-space-5));
     }
   }

package/css/cartesian-chart.css

@@ -109,7 +109,7 @@
   }
 
   /* 裁切出来的形状画不出空心：隐藏的项改为淡出，名字的删除线与次级字色照常 */
-  [data-scope='cartesian-chart'][data-part='legend-item'][aria-pressed='false'] > [data-part='legend-swatch'][data-mark='point']:not([data-symbol='circle'], [data-symbol='square']) {
+  [data-scope='cartesian-chart'][data-part='legend-item'][aria-pressed='false'] > [data-part='legend-swatch'][data-mark='point']:where([data-scope='cartesian-chart']):not([data-symbol='circle'], [data-symbol='square']) {
     background: var(--xh-_chart-series);
     opacity: var(--xh-chart-dim-alpha);
   }
@@ -241,7 +241,7 @@
     cursor: grab;
   }
 
-  [data-scope='cartesian-chart'][data-part='zoom-slider'][data-dragging] [data-part='zoom-window'] {
+  [data-scope='cartesian-chart'][data-part='zoom-slider'][data-dragging] [data-part='zoom-window']:where([data-scope='cartesian-chart']) {
     cursor: grabbing;
   }
 
@@ -633,15 +633,15 @@
 
   /* —— 纹理：颜色不可用或不可靠时（强制色、打印、祖先写了 data-xh-chart-patterns），柱与面积改用本系列在
      defs 里的纹理填充、描出轮廓，折线换线型；压在柱上的标签改用标签色、描一圈承载面色。色标的纹理在配方里 —— */
-  :where([data-xh-chart-patterns]) [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='bar'],
-  :where([data-xh-chart-patterns]) [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='area-fill'] {
+  :where([data-xh-chart-patterns]) [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='bar']:where([data-scope='cartesian-chart']),
+  :where([data-xh-chart-patterns]) [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='area-fill']:where([data-scope='cartesian-chart']) {
     fill: var(--xh-_chart-pattern);
     fill-opacity: 1;
     stroke: var(--xh-_chart-series);
     stroke-width: var(--xh-stroke-thin);
   }
 
-  :where([data-xh-chart-patterns]) [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='line']:not([data-drawing]) {
+  :where([data-xh-chart-patterns]) [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='line']:where([data-scope='cartesian-chart']):not([data-drawing]) {
     stroke-dasharray: var(--xh-_chart-dash);
   }
 
@@ -775,8 +775,8 @@
       stroke: Highlight;
     }
 
-    [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='bar'],
-    [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='area-fill'] {
+    [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='bar']:where([data-scope='cartesian-chart']),
+    [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='area-fill']:where([data-scope='cartesian-chart']) {
       forced-color-adjust: none;
       fill: var(--xh-_chart-pattern);
       fill-opacity: 1;
@@ -784,7 +784,7 @@
       stroke-width: var(--xh-stroke-thin);
     }
 
-    [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='line']:not([data-drawing]) {
+    [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='line']:where([data-scope='cartesian-chart']):not([data-drawing]) {
       stroke-dasharray: var(--xh-_chart-dash);
     }
 
@@ -803,15 +803,15 @@
       display: none;
     }
 
-    [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='bar'],
-    [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='area-fill'] {
+    [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='bar']:where([data-scope='cartesian-chart']),
+    [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='area-fill']:where([data-scope='cartesian-chart']) {
       fill: var(--xh-_chart-pattern);
       fill-opacity: 1;
       stroke: var(--xh-_chart-series);
       stroke-width: var(--xh-stroke-thin);
     }
 
-    [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='line']:not([data-drawing]) {
+    [data-scope='cartesian-chart'][data-xh-chart-pattern] > [data-part='line']:where([data-scope='cartesian-chart']):not([data-drawing]) {
       stroke-dasharray: var(--xh-_chart-dash);
     }
 

package/css/cascader.css

@@ -219,14 +219,14 @@
 
   /* 标签行露面时 value-text 让位：两者是触发器里的同一格，占位文字与标签不同屏。
      value-text 留在 DOM 里，trigger 的可及名仍从它取到完整的选中路径文本 */
-  [data-scope='cascader'][data-part='trigger']:has([data-part='tag-list']:not([hidden])) [data-part='value-text'] {
+  [data-scope='cascader'][data-part='trigger']:has([data-part='tag-list']:not([hidden])) [data-part='value-text']:where([data-scope='cascader']) {
     display: none;
   }
 
   /* 有值时清空钮顶上来，箭头让位：两个图标并排堆着，用户分不清点哪个。
      判据查的是盒里此刻真有一颗没收起的清空钮，不是「有没有值」——
      作者没摆清空钮时箭头照常留着，不然让了位没人接，指示符整个消失 */
-  [data-scope='cascader'][data-part='control']:has([data-part='clear-trigger']:not([hidden])) [data-part='indicator'] {
+  [data-scope='cascader'][data-part='control']:has([data-part='clear-trigger']:not([hidden])) [data-part='indicator']:where([data-scope='cascader']) {
     display: none;
   }
 
@@ -503,29 +503,29 @@
   /* 一列开幕：条目自上而下逐条淡入。只在列头一次出现时播（浮层展开、此前收着的子列铺出来）；
      列此前就在、展开路径换到同列另一个父项时（悬停扫过），连接层给露面的条目标 data-instant，
      换内容不重播。backwards 让每条在自己那份延迟里保持起始帧 */
-  [data-scope='cascader'][data-part='column'] [data-part='item']:not([data-instant]) {
+  [data-scope='cascader'][data-part='column'] [data-part='item']:where([data-scope='cascader']):not([data-instant]) {
     animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter) backwards;
   }
 
   /* 交错的间隔：第二条起逐级往后推，第六条起统一钉在第五级，条目再多也不会拖出一条越来越慢的尾巴。
      列里同时挂着别的父节点下的条目（收起态），计数把它们排掉，序号才对得上看得见的那几条 */
-  [data-scope='cascader'][data-part='column'] [data-part='item']:nth-child(2 of :not([hidden])) {
+  [data-scope='cascader'][data-part='column'] [data-part='item']:where([data-scope='cascader']):nth-child(2 of :not([hidden])) {
     animation-delay: var(--xh-motion-stagger-step);
   }
 
-  [data-scope='cascader'][data-part='column'] [data-part='item']:nth-child(3 of :not([hidden])) {
+  [data-scope='cascader'][data-part='column'] [data-part='item']:where([data-scope='cascader']):nth-child(3 of :not([hidden])) {
     animation-delay: calc(2 * var(--xh-motion-stagger-step));
   }
 
-  [data-scope='cascader'][data-part='column'] [data-part='item']:nth-child(4 of :not([hidden])) {
+  [data-scope='cascader'][data-part='column'] [data-part='item']:where([data-scope='cascader']):nth-child(4 of :not([hidden])) {
     animation-delay: calc(3 * var(--xh-motion-stagger-step));
   }
 
-  [data-scope='cascader'][data-part='column'] [data-part='item']:nth-child(5 of :not([hidden])) {
+  [data-scope='cascader'][data-part='column'] [data-part='item']:where([data-scope='cascader']):nth-child(5 of :not([hidden])) {
     animation-delay: calc(4 * var(--xh-motion-stagger-step));
   }
 
-  [data-scope='cascader'][data-part='column'] [data-part='item']:nth-child(n + 6 of :not([hidden])) {
+  [data-scope='cascader'][data-part='column'] [data-part='item']:where([data-scope='cascader']):nth-child(n + 6 of :not([hidden])) {
     animation-delay: calc(5 * var(--xh-motion-stagger-step));
   }
 
@@ -710,7 +710,7 @@
   }
 
   /* 搜索视图里列整体让位 */
-  [data-scope='cascader'][data-part='content'][data-searching] [data-part='column'] {
+  [data-scope='cascader'][data-part='content'][data-searching] [data-part='column']:where([data-scope='cascader']) {
     display: none;
   }
 
@@ -809,7 +809,7 @@
 
   /* —— 空态：当前视图没有条目时由 empty 部件出面，文案由适配器或作者供给，皮肤只管排版 —— */
   /* 根列没有条目时那条空列让位，占位面接管整个浮层 */
-  [data-scope='cascader'][data-part='content'][data-empty] [data-part='column'] {
+  [data-scope='cascader'][data-part='content'][data-empty] [data-part='column']:where([data-scope='cascader']) {
     display: none;
   }
 

package/css/citation.css

@@ -388,7 +388,7 @@
       color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  [data-scope='citation'][data-part='source'][data-state='active'] [data-part='source-index'] {
+  [data-scope='citation'][data-part='source'][data-state='active'] [data-part='source-index']:where([data-scope='citation']) {
     background: var(--xh-citation-index-active-bg, var(--xh-bg-brand));
     color: var(--xh-citation-index-active-fg, var(--xh-fg-on-brand));
   }
@@ -416,7 +416,7 @@
   }
 
   @media (forced-colors: active) {
-    [data-scope='citation'][data-part='source'][data-state='active'] [data-part='source-index'] {
+    [data-scope='citation'][data-part='source'][data-state='active'] [data-part='source-index']:where([data-scope='citation']) {
       background: Highlight;
       color: HighlightText;
     }

package/css/code-view.css

@@ -91,7 +91,7 @@
   }
 
   /* 折叠时 <pre> 的高度被连接层写死，超出部分沿圆角收边 */
-  [data-scope='code-view'][data-part='root'][data-clamped] [data-part='pre'] {
+  [data-scope='code-view'][data-part='root'][data-clamped] [data-part='pre']:where([data-scope='code-view']) {
     overflow-y: hidden;
   }
 
@@ -163,13 +163,13 @@
 
   /* 开了换行：pre-wrap 仍保留缩进与连续空白，只是允许行尾折下来；
      anywhere 让没有空格的长串（url、base64）也能断，否则照样撑出横向滚动 */
-  [data-scope='code-view'][data-part='code'][data-wrap] [data-part='line-content'] {
+  [data-scope='code-view'][data-part='code'][data-wrap] [data-part='line-content']:where([data-scope='code-view']) {
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
 
   /* 没开行号时正文自带左内衬；开了行号则由行号槽的内衬顶开 */
-  [data-scope='code-view'][data-part='root']:not([data-line-numbers]) [data-part='line-content'] {
+  [data-scope='code-view'][data-part='root']:not([data-line-numbers]) [data-part='line-content']:where([data-scope='code-view']) {
     padding-inline-start: var(--xh-code-view-px, var(--xh-space-3));
   }
 
@@ -233,12 +233,12 @@
     --xh-_code-view-fold-col: var(--xh-code-view-fold-col, var(--xh-code-view-line-height, var(--xh-text-code-leading)));
   }
 
-  [data-scope='code-view'][data-part='root'][data-block-folding] [data-part='line-content'] {
+  [data-scope='code-view'][data-part='root'][data-block-folding] [data-part='line-content']:where([data-scope='code-view']) {
     position: relative;
     padding-inline-start: var(--xh-_code-view-fold-col);
   }
 
-  [data-scope='code-view'][data-part='root'][data-block-folding]:not([data-line-numbers]) [data-part='line-content'] {
+  [data-scope='code-view'][data-part='root'][data-block-folding]:not([data-line-numbers]) [data-part='line-content']:where([data-scope='code-view']) {
     padding-inline-start: calc(var(--xh-code-view-px, var(--xh-space-3)) + var(--xh-_code-view-fold-col));
   }
 
@@ -258,7 +258,7 @@
     block-size: var(--xh-_code-view-fold-col);
   }
 
-  [data-scope='code-view'][data-part='root'][data-block-folding]:not([data-line-numbers]) [data-part='line-fold-trigger'] {
+  [data-scope='code-view'][data-part='root'][data-block-folding]:not([data-line-numbers]) [data-part='line-fold-trigger']:where([data-scope='code-view']) {
     inset-inline-start: var(--xh-code-view-px, var(--xh-space-3));
   }