@xihan-ui/styles 3.1.0 → 4.0.0

package/css/card.css

@@ -13,17 +13,22 @@
     --xh-card-skin: 1;
   }
 
-  /* Card 是带统一内边距与节奏的内容面；布局方向可由作者在根上覆盖。
+  /* Card 是一块描边内容面：根自己不留内衬，头部条、正文与页脚各带各的内衬，头部条的分隔线才能贯通整宽，
+     直接放进根的媒体也贴边铺满；布局方向可由作者在根上覆盖。
      边界由 --xh-border-default 描边承担，raised 落影只是抬起的加成（Card 是唯一登记 raised 的静态面，
-     且 raised 必带描边）；内衬只走 --xh-surface-* 阶梯。 */
+     且 raised 必带描边）。横向内衬 16px 不随密度；正文纵向内衬走 --xh-surface-pad-lg（16，紧凑 12）。
+     --xh-card-p 改的是各部件的内衬，四边同值 */
   [data-scope='card'][data-part='root'] {
+    --xh-_card-px: var(--xh-card-p, var(--xh-space-4));
+    --xh-_card-py: var(--xh-card-p, var(--xh-surface-pad-lg));
+
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--xh-card-gap, var(--xh-space-3));
+    gap: var(--xh-card-gap, 0);
     min-inline-size: 0;
     overflow: visible;
-    padding: var(--xh-card-p, var(--xh-surface-pad-lg));
+    padding: 0;
     border: var(--xh-stroke-thin) solid var(--xh-card-border, var(--xh-border-default));
     border-radius: var(--xh-card-radius, var(--xh-shape-surface));
     background: var(--xh-card-bg, var(--xh-bg-surface));
@@ -159,15 +164,26 @@
     flex-direction: column;
   }
 
+  /* 头部条：根的直接子节点才是条——一行区块标题时高 46px（紧凑 40px），标题在条里竖向居中，
+     横向内衬与正文同起点，底边一道 1px 内部分隔线。嵌在正文里的 header（横向卡片把标题与正文排在一列）不画条 */
+  [data-scope='card'][data-part='root'] > [data-scope='card'][data-part='header'] {
+    justify-content: center;
+    min-block-size: var(--xh-card-header-h, var(--xh-surface-header-h));
+    padding-block: var(--xh-card-header-py, var(--xh-space-2));
+    padding-inline: var(--xh-_card-px);
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-card-header-border, var(--xh-border-subtle));
+  }
+
   [data-scope='card'][data-part='title'],
   [data-scope='card'][data-part='description'] {
     margin: 0;
   }
 
+  /* 标题取区块标题档（heading-3）、正文色 */
   [data-scope='card'][data-part='title'] {
     color: var(--xh-card-title-fg, var(--xh-fg-default));
-    font-size: var(--xh-card-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-card-title-font-weight, var(--xh-font-weight-semibold));
+    font-size: var(--xh-card-title-font-size, var(--xh-text-heading-3-size));
+    font-weight: var(--xh-card-title-font-weight, var(--xh-text-heading-3-weight));
     line-height: var(--xh-card-title-leading, var(--xh-leading-tight));
   }
 
@@ -177,12 +193,16 @@
     line-height: var(--xh-card-description-leading, var(--xh-leading-normal));
   }
 
+  /* 正文：四边内衬、14px 次级色 */
   [data-scope='card'][data-part='content'] {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     gap: var(--xh-card-content-gap, var(--xh-space-1));
     min-inline-size: 0;
+    padding: var(--xh-_card-py) var(--xh-_card-px);
+    color: var(--xh-card-content-fg, var(--xh-fg-muted));
+    font-size: var(--xh-card-content-font-size, var(--xh-text-body-size));
   }
 
   [data-scope='card'][data-part='footer'] {
@@ -192,6 +212,14 @@
     gap: var(--xh-card-footer-gap, var(--xh-space-2));
   }
 
+  /* 页脚是正文的延续：与正文同起点，顶上不再留白（正文的底内衬就是两者的间距），底边留正文同档的内衬。
+     嵌在正文里的页脚随正文的内衬走，不另加 */
+  [data-scope='card'][data-part='root'] > [data-scope='card'][data-part='footer'] {
+    padding-block-start: 0;
+    padding-block-end: var(--xh-_card-py);
+    padding-inline: var(--xh-_card-px);
+  }
+
   @media print {
     [data-scope='card'][data-part='root'] {
       border-color: currentColor;

package/css/carousel.css

@@ -19,8 +19,9 @@
   [data-scope='carousel'][data-part='root'] {
     /* 自动播放开启时由 Headless 写入真实间隔；0ms 只用于未接入运行时的静态标记。 */
     --xh-_carousel-autoplay-duration: 0ms;
-    --xh-_carousel-progress-from: 0 1;
-    --xh-_carousel-progress-to: 1 1;
+    /* 进度条起步时裁掉的四边（inset 的上 右 下 左）：横轨从行尾那一侧整条裁掉。
+       clip-path 只认物理方向，行内轴两侧取书写方向的位置，rtl 下改从左往右收 */
+    --xh-_carousel-progress-cut: 0 var(--xh-direction-end) 0 var(--xh-direction-start);
 
     position: relative;
     display: block;
@@ -32,9 +33,9 @@
     display: none;
   }
 
+  /* 纵轨：从下沿整条裁掉，进度条从上往下长 */
   [data-scope='carousel'][data-part='root'][data-orientation='vertical'] {
-    --xh-_carousel-progress-from: 1 0;
-    --xh-_carousel-progress-to: 1 1;
+    --xh-_carousel-progress-cut: 0 0 100% 0;
   }
 
   /* 视口是裁切窗口：轨道比它宽（高），露在外面的那些张全靠它切掉。
@@ -131,7 +132,10 @@
   }
 
   /* 两端按钮与播放开关：浮在媒体之上的单图标圆钮，接 Action Control floating 档：
-     盒型（md = box-lg 48px，圆形）、四态面、0.97 按压与 44px 命中区由家族配方给出，组件没有 size 轴、固定 md。
+     圆形、四态面、按压与 44px 命中区由家族配方给出；视觉盒比 floating 档小，不压画面：
+     sm / md / lg 取 24 / 24 / 28px、字形 12 / 16 / 20px（sm 不低于 24px 的最小目标，只把字形收小）。
+     sm / md 直接取细指针最小目标 --xh-control-target-min，不随密度收：floating 档在细指针下不外扩命中区，
+     视觉盒就是命中区，紧凑档再收到 20px 就够不着 24px。
      连接层不投影 variant：面由这里桥接到磨砂缺省（使用者槽 → 磨砂面），悬停 / 按下的底走画布承载的阶梯
      （100 → 200，取不透明档：钮压在图上，半透明的墨色盖不住画面），边缘与投影不动；这里只留定位、桥接槽与图标尺 */
   [data-scope='carousel'][data-part='prev-trigger'],
@@ -167,14 +171,26 @@
     --xh-action-bg-pressed: var(--xh-carousel-trigger-bg-active, var(--xh-bg-subtle-hover-opaque));
     /* M2 顶光走配方的高光通道 */
     --xh-action-radius: var(--xh-carousel-trigger-radius, var(--xh-_action-profile-radius));
-    --xh-action-visual-size: var(--xh-carousel-trigger-size, var(--xh-_action-profile-visual-size));
-    /* 作者塞进来的图标跟着 floating 档走（md 24px），与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-carousel-icon-size, var(--xh-_action-profile-glyph-size));
+    --xh-_carousel-trigger-size: var(--xh-control-target-min);
+    --xh-_carousel-trigger-glyph: var(--xh-glyph-size-sm);
+    --xh-action-visual-size: var(--xh-carousel-trigger-size, var(--xh-_carousel-trigger-size));
+    --xh-action-min-inline-size: var(--xh-carousel-trigger-size, var(--xh-_carousel-trigger-size));
+    /* 作者塞进来的图标与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-carousel-icon-size, var(--xh-_carousel-trigger-glyph));
 
     position: absolute;
     z-index: 1;
   }
 
+  [data-scope='carousel']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='autoplay-trigger'])[data-xh-action-size='sm'] {
+    --xh-_carousel-trigger-glyph: var(--xh-control-indicator-sm);
+  }
+
+  [data-scope='carousel']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='autoplay-trigger'])[data-xh-action-size='lg'] {
+    --xh-_carousel-trigger-size: var(--xh-control-h-sm);
+    --xh-_carousel-trigger-glyph: var(--xh-glyph-size-md);
+  }
+
   [data-scope='carousel'][data-part='prev-trigger'],
   [data-scope='carousel'][data-part='next-trigger'] {
     inset-block-start: 50%;
@@ -224,7 +240,7 @@
     flex-wrap: nowrap;
     align-items: center;
     justify-content: center;
-    gap: var(--xh-carousel-indicator-gap, var(--xh-space-1));
+    gap: var(--xh-carousel-indicator-gap, var(--xh-space-2));
   }
 
   [data-scope='carousel'][data-part='indicator-group'][hidden] {
@@ -267,24 +283,26 @@
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  /* 分页点与 Tour 的步骤点同一种语言：8px 圆点，当前页拉长成 20px 胶囊并换品牌色。
+  /* 分页点与 Tour 的步骤点同一种语言：圆点（压在媒体上的这一排 6px、点距 8px），当前页拉长成 20px 胶囊并换品牌色。
      本体就是那颗点：没有文字（页码交给作者，默认不显示），底色即标记。
-     悬停 / 按下的回执落在点的颜色上：中性标记按前景阶梯加深一档、再加深一档；当前页按品牌阶梯压一档 */
+     悬停 / 按下的回执落在点的颜色上：中性标记按前景阶梯加深一档、再加深一档；当前页按品牌阶梯压一档。
+     沿轨道的长度取 indicator-size（当前页 indicator-size-current），垂直于轨道的粗细取 indicator-thickness，
+     缺省与长度同值、仍是圆点；粗细单独调小就成细横条（横条不是正方盒，圆角另把 indicator-radius 换成胶囊） */
   [data-scope='carousel'][data-part='indicator'] {
     position: relative;
     display: inline-flex;
     flex: none;
     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));
+    inline-size: var(--xh-carousel-indicator-size, var(--xh-space-1_5));
+    block-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-1_5)));
     padding: 0;
     border: 0;
     border-radius: var(--xh-carousel-indicator-radius, var(--xh-shape-circle));
     background: var(--xh-carousel-indicator-bg, var(--xh-bg-subtle-hover-opaque));
     font-size: 0;
-    /* 自动播放的进度条画在点里，超出胶囊的那截裁掉 */
-    overflow: hidden;
+    /* 不裁切：细指针下 ::after 把命中区外扩到点外，overflow 一裁命中区就缩回 6px 的点里；
+       自动播放的进度条自己带圆角、由 clip-path 裁出来，不靠点来裁 */
     cursor: pointer;
     transition:
       inline-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
@@ -297,11 +315,32 @@
     display: none;
   }
 
-  /* 细指针的命中区外扩到 24×24（8px 点四面各扩 8px）；粗指针下这颗伪元素改画点，盒子自己承担命中 */
+  /* 细指针的命中区外扩到不低于 24×24：两向都取「外扩 8px」与「补足到最小目标 --xh-control-target-min」
+     中大的一头（6px 点四面各扩 9px）；粗指针下这颗伪元素改画点，盒子自己承担命中。点调细了，垂直于轨道那一向照样补足。
+     相邻两点节距 14px，命中区沿轨道互相叠一截：后一颗画在上层，叠住的那段归它，每颗点自己的盒子仍只命中自己 */
   [data-scope='carousel'][data-part='indicator']::after {
     content: '';
     position: absolute;
-    inset: calc(-1 * var(--xh-space-2));
+    inset-inline: min(
+      calc(-1 * var(--xh-space-2)),
+      calc((var(--xh-carousel-indicator-size, var(--xh-space-1_5)) - var(--xh-control-target-min)) / 2)
+    );
+    inset-block: min(
+      calc(-1 * var(--xh-space-2)),
+      calc((var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-1_5))) - var(--xh-control-target-min)) / 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-1_5))) - var(--xh-control-target-min)) / 2)
+    );
+    inset-block: min(
+      calc(-1 * var(--xh-space-2)),
+      calc((var(--xh-carousel-indicator-size, var(--xh-space-1_5)) - var(--xh-control-target-min)) / 2)
+    );
   }
 
   [data-scope='carousel'][data-part='indicator']:hover:not([data-current]) {
@@ -355,7 +394,9 @@
 
   /* 自动播放的进度：胶囊是品牌淡底当轨道（仍是「当前」语义；淡底上公共环够对比，不灌环色），
      品牌填充条从起点沿轨道方向长满这一页的时长。计时器每次恢复都重计一整个间隔，
-     进度条跟它同一口径：暂停时回到起点，恢复时从头走 */
+     进度条跟它同一口径：暂停时回到起点，恢复时从头走。
+     填充条铺满胶囊、自己带同一副圆角，未走的那一截由 clip-path 从行尾（纵轨从下沿）裁掉，裁口也取圆角：
+     不缩放就不会把圆头压扁，也不用点的盒子来裁——盒子一裁，细指针外扩的命中区跟着被裁掉 */
   [data-scope='carousel'][data-part='root'][data-autoplay]
     [data-scope='carousel'][data-part='indicator'][data-current],
   [data-scope='carousel'][data-part='root'][data-paused]
@@ -367,40 +408,37 @@
     [data-scope='carousel'][data-part='indicator'][data-current]::before,
   [data-scope='carousel'][data-part='root'][data-paused]
     [data-scope='carousel'][data-part='indicator'][data-current]::before {
+    --xh-_carousel-progress-radius: var(--xh-carousel-indicator-radius-current, var(--xh-shape-pill));
+
     content: '';
     position: absolute;
     inset: 0;
-    border-radius: inherit;
+    border-radius: var(--xh-_carousel-progress-radius);
     background: var(--xh-carousel-indicator-bg-selected, var(--xh-bg-brand));
-    transform-origin: left center;
     animation: xh-carousel-indicator-progress var(--xh-_carousel-autoplay-duration) var(--xh-motion-ease-loop) both;
   }
 
   [data-scope='carousel'][data-part='root'][data-paused]
     [data-scope='carousel'][data-part='indicator'][data-current]::before {
     animation: none;
-    scale: var(--xh-_carousel-progress-from);
+    clip-path: inset(var(--xh-_carousel-progress-cut) round var(--xh-_carousel-progress-radius));
   }
 
   /* 纵轨：胶囊沿块轴拉长，进度条从上往下长 */
   [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));
-    block-size: var(--xh-carousel-indicator-size-current, var(--xh-space-5));
+    > [data-scope='carousel'][data-part='indicator'] {
+    inline-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-1_5)));
+    block-size: var(--xh-carousel-indicator-size, var(--xh-space-1_5));
   }
 
   [data-scope='carousel'][data-part='indicator-group'][data-orientation='vertical']
-    > [data-scope='carousel'][data-part='indicator'][data-current]::before {
-    transform-origin: center top;
-  }
-
-  [dir='rtl'] [data-scope='carousel'][data-part='indicator-group'][data-orientation='horizontal']
-    > [data-scope='carousel'][data-part='indicator']::before {
-    transform-origin: right center;
+    > [data-scope='carousel'][data-part='indicator'][data-current] {
+    inline-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-1_5)));
+    block-size: var(--xh-carousel-indicator-size-current, var(--xh-space-5));
   }
 
   [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 +446,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));
   }
@@ -438,7 +476,7 @@
 
     [data-scope='carousel'][data-part='indicator'][data-current]::before {
       animation: none;
-      scale: var(--xh-_carousel-progress-to);
+      clip-path: none;
     }
   }
 
@@ -448,7 +486,7 @@
 
   :where([data-motion='reduce']) [data-scope='carousel'][data-part='indicator'][data-current]::before {
     animation: none;
-    scale: var(--xh-_carousel-progress-to);
+    clip-path: none;
   }
 
   @media (forced-colors: active) {
@@ -533,7 +571,7 @@
   }
 
   /* 手指落点：三颗钮的 44px 命中区由配方的 ::after 给（floating 档）。
-     分页点的视觉仍是 8 / 20px，按钮盒改成首尾相接的 44px 分区：直接用负 inset 外扩会让相邻页的命中区重叠，
+     分页点的视觉仍是 6 / 20px，按钮盒改成首尾相接的 44px 分区：直接用负 inset 外扩会让相邻页的命中区重叠，
      落点归属取决于绘制顺序；这里让真实按钮盒承担命中，点与进度条改由伪元素画在盒子中央 */
   @media (pointer: coarse) {
     [data-scope='carousel'][data-part='indicator-group'] {
@@ -556,15 +594,14 @@
       min-block-size: var(--xh-carousel-indicator-target-size, 44px);
       border-radius: 0;
       background: transparent;
-      overflow: visible;
     }
 
     [data-scope='carousel'][data-part='indicator']::after {
       inset: auto;
       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));
+      inline-size: var(--xh-carousel-indicator-size, var(--xh-space-1_5));
+      block-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-1_5)));
       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 +651,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-1_5)));
       border-radius: var(--xh-carousel-indicator-radius-current, var(--xh-shape-pill));
       translate: -50% -50%;
     }
@@ -626,6 +663,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-1_5)));
+      block-size: var(--xh-carousel-indicator-size, var(--xh-space-1_5));
+    }
+
     [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 +681,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-1_5)));
       block-size: var(--xh-carousel-indicator-size-current, var(--xh-space-5));
     }
   }
@@ -666,13 +713,14 @@
 }
 
 @layer xihan.motion {
+  /* 进度条从整条裁掉长到整条露出：只重绘、不重排，裁口取填充条自己的圆角 */
   @keyframes xh-carousel-indicator-progress {
     from {
-      scale: var(--xh-_carousel-progress-from);
+      clip-path: inset(var(--xh-_carousel-progress-cut) round var(--xh-_carousel-progress-radius));
     }
 
     to {
-      scale: var(--xh-_carousel-progress-to);
+      clip-path: inset(0 round var(--xh-_carousel-progress-radius));
     }
   }
 }

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);
     }