@xihan-ui/styles 3.0.0 → 3.2.0

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

package/css/color-picker.css

@@ -6,8 +6,10 @@
 /* 定义 color picker 样式。 */
 
 @import '../family/field-chrome.css';
+@import '../family/action-control.css';
 @import '../family/swatch.css';
 @import '../family/motion.css';
+@import '../family/tag-list.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -90,6 +92,46 @@
     display: none;
   }
 
+  /* 多选的标签行：选中的颜色在盒里排成标签，超过 maxTagCount 的折进 +N。
+     行里每一枚都是 tag（data-scope="tag"），样子归 tag.css；行怎么排、标签怎么进出归标签行家族配方。
+     基准取 0：只吃触发钮剩下的宽度、在自己里面折行；按内容宽算基准的话，盒子会先在钮前面折行，把钮挤到最后一行 */
+  [data-scope='color-picker'][data-part='tag-list'] {
+    --xh-tag-list-gap: var(--xh-color-picker-tag-list-gap, var(--xh-space-1));
+
+    flex: 1 1 0;
+    flex-wrap: wrap;
+  }
+
+  /* 颜色标签是定长的值串，截短了就读不出是哪个颜色：不收缩，排不下就折到下一行，
+     盒随行数长高（字段家族的 multi-tag 布局给），到上限后在盒内滚动 */
+  [data-scope='color-picker'][data-part='tag-list'] > [data-scope='tag'][data-part='root'] {
+    flex: none;
+  }
+
+  /* 每枚标签前一个色点，颜色由连接层写进内联私有槽；+N 那一枚没有 data-value，不画。
+     白色与近底色的颜色靠一圈默认描边从标签底上分出来 */
+  [data-scope='color-picker'][data-part='tag-list'] > [data-scope='tag'][data-part='root'][data-value]::before {
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--xh-color-picker-tag-dot-size, var(--xh-control-indicator-sm));
+    block-size: var(--xh-color-picker-tag-dot-size, var(--xh-control-indicator-sm));
+    border: var(--xh-stroke-thin) solid var(--xh-color-picker-tag-dot-border, var(--xh-border-default));
+    border-radius: var(--xh-shape-circle);
+    background-color: var(--xh-_color-picker-tag-color, transparent);
+    content: '';
+    print-color-adjust: exact;
+  }
+
+  [data-scope='color-picker'][data-part='control'][data-xh-field-layout='multi-tag'] {
+    max-block-size: var(--xh-color-picker-control-max-h, var(--xh-viewport-h-sm));
+    overflow-y: auto;
+  }
+
+  /* 多选时值文字让位，触发钮只剩一颗显示工作色的色块：不再占满剩余宽度，标签行吃掉余下的位置 */
+  [data-scope='color-picker'][data-part='control'][data-xh-field-layout='multi-tag'] > [data-scope='color-picker'][data-part='trigger'] {
+    flex: none;
+  }
+
   /* 盒内那颗可聚焦的按钮：不画描边不铺底也不自带高度，只占满剩余宽度、排布色块与值文本 */
   [data-scope='color-picker'][data-part='trigger'] {
     display: inline-flex;
@@ -427,6 +469,39 @@
     color: var(--xh-fg-disabled);
   }
 
+  /* 「添加」沉到面板的行尾：它是多选时整块面板的出口，不跟取色面左对齐 */
+  [data-scope='color-picker'][data-part='content'] > [data-scope='color-picker'][data-part='confirm-trigger'] {
+    flex: none;
+    align-self: flex-end;
+  }
+
+  /* 「添加」是面板里唯一的主要动作：品牌实心、悬停 / 按下与 0.97 按压、焦点环全由 Action Control 的
+     text solid 档给；槽名统一按部件取 --xh-color-picker-confirm-trigger-*，只映射到家族桥接槽 */
+  [data-scope='color-picker'][data-part='confirm-trigger'] {
+    --xh-action-visual-size: var(--xh-color-picker-confirm-trigger-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-color-picker-confirm-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-color-picker-confirm-trigger-radius, var(--xh-shape-control));
+    --xh-action-bg-rest: var(--xh-color-picker-confirm-trigger-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-color-picker-confirm-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-color-picker-confirm-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-color-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-color-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-color-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-border-rest: transparent;
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: var(--xh-color-picker-confirm-trigger-shadow, none);
+    --xh-action-shadow-hover: var(--xh-color-picker-confirm-trigger-shadow, none);
+    --xh-action-shadow-pressed: var(--xh-color-picker-confirm-trigger-shadow, none);
+    --xh-action-font-size: var(--xh-text-secondary-size);
+
+    border-width: 0;
+  }
+
+  /* 单选时连接层给的是 hidden 属性；家族那条 display 会把 UA 规则盖掉 */
+  [data-scope='color-picker'][data-part='confirm-trigger'][hidden] {
+    display: none;
+  }
+
   /* 预设色板的挂载点，同时充当色板的根节点：color-swatch-picker 那份皮的 root 规则落在
      [data-scope='color-swatch-picker'][data-part='root'] 上，而这里没有那个节点，所以根上挂的那几个私有槽
      （格子边长、间距、徽标尺寸、语气色、图标尺）与排布得在这儿照抄一遍；格子的皮仍归色板那一份。
@@ -510,5 +585,11 @@
       outline: var(--xh-stroke-thin) solid ButtonBorder;
       outline-offset: calc(-1 * var(--xh-stroke-thin));
     }
+
+    /* 标签前的色点画的也是颜色本身：同样退出强制着色，用系统文字色描一圈 */
+    [data-scope='color-picker'][data-part='tag-list'] > [data-scope='tag'][data-part='root'][data-value]::before {
+      forced-color-adjust: none;
+      border-color: CanvasText;
+    }
   }
 }