@xihan-ui/styles 3.0.0 → 3.2.0

package/css/color-swatch-picker.css

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

package/css/combobox.css

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

package/css/command.css

@@ -298,7 +298,7 @@
      不会拖出一条越来越慢的尾巴）。打开时已有的结果直接呈现：自己或本列表带 data-instant。
      检索过滤筛掉的条目带 hidden 不生成盒子，重新露面只是换一批已有结果，机器给它打上 data-instant 直接呈现。
      backwards 让每条在自己那份延迟里保持起始帧 */
-  [data-scope='command'][data-part='list'] [data-part='item']:not([data-instant], [data-scope='command'][data-part='list'][data-instant] *) {
+  [data-scope='command'][data-part='list'] [data-part='item']:where([data-scope='command']):not([data-instant], [data-scope='command'][data-part='list'][data-instant] :where([data-scope='command'])) {
     animation: xh-rise-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
     animation-delay: calc(var(--xh-_stagger-index, 0) * var(--xh-motion-stagger-step));
   }

package/css/date-field.css

@@ -123,6 +123,36 @@
     display: none;
   }
 
+  /* 整条占位：一段都没填、焦点也不在段上时，段位与分隔符让位给一句占位文字，焦点一进到段上就换回段位。
+     段位只是淡出（仍可聚焦、仍在读屏树里），文字以生成内容压在同一行上、不吃指针，点下去落到底下的段位 */
+  [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown] {
+    position: relative;
+    color: transparent;
+  }
+
+  /* 段位与分隔符（后者是不带解剖的文字节点）一起淡出：显隐写在 segment-group 自己的私有槽上，
+     子节点只读槽——主体无特征的规则不挂在 data-placeholder-shown 后面，输入时翻转只让这一组失效 */
+  [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown] {
+    --xh-_date-field-segment-opacity: 0;
+  }
+
+  [data-scope='date-field'][data-part='segment-group'] > * {
+    opacity: var(--xh-_date-field-segment-opacity, 1);
+  }
+
+  [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown]::before {
+    content: attr(data-placeholder-text);
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 50%;
+    overflow: hidden;
+    color: var(--xh-date-field-placeholder-fg, var(--xh-fg-subtle));
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    pointer-events: none;
+    translate: 0 -50%;
+  }
+
   [data-scope='date-field'][data-part='segment-group'] > :not([data-scope]) {
     color: var(--xh-date-field-literal-fg, var(--xh-fg-subtle));
   }
@@ -235,6 +265,15 @@
   }
 
   @media (forced-colors: active) {
+    /* 整条占位的文字照系统的弱色画；段位让位时的透明字不被强制换色顶回来 */
+    [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown] {
+      forced-color-adjust: none;
+    }
+
+    [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown]::before {
+      color: GrayText;
+    }
+
     [data-scope='date-field'][data-part='segment'][data-invalid]:is([data-focus], :focus-visible) {
       outline: var(--xh-ring-width) solid Highlight;
       outline-offset: var(--xh-ring-offset);

package/css/date-picker.css

@@ -12,6 +12,7 @@
 
 /* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
 @import '../family/motion.css';
+@import '../family/tag-list.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -203,11 +204,75 @@
     color: var(--xh-date-picker-literal-fg, var(--xh-fg-subtle));
   }
 
+  /* 整条占位：一段都没填、焦点也不在段上时，段位与分隔符让位给一句占位文字，焦点一进到段上就换回段位。
+     段位只是淡出（仍可聚焦、仍在读屏树里），文字以生成内容压在同一行上、不吃指针，点下去落到底下的段位 */
+  [data-scope='date-picker'][data-part='segment-group'][data-placeholder-shown] {
+    position: relative;
+    color: transparent;
+  }
+
+  /* 段位与分隔符（后者是不带解剖的文字节点）一起淡出：显隐写在 segment-group 自己的私有槽上，
+     子节点只读槽——主体无特征的规则不挂在 data-placeholder-shown 后面，输入时翻转只让这一组失效 */
+  [data-scope='date-picker'][data-part='segment-group'][data-placeholder-shown] {
+    --xh-_date-picker-segment-opacity: 0;
+  }
+
+  [data-scope='date-picker'][data-part='segment-group'] > * {
+    opacity: var(--xh-_date-picker-segment-opacity, 1);
+  }
+
+  [data-scope='date-picker'][data-part='segment-group'][data-placeholder-shown]::before {
+    content: attr(data-placeholder-text);
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 50%;
+    overflow: hidden;
+    color: var(--xh-date-picker-placeholder-fg, var(--xh-fg-subtle));
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    pointer-events: none;
+    translate: 0 -50%;
+  }
+
   /* 容器自己不占 Tab 位、也不承载焦点，环由 control 画，这里不再套一圈 */
   [data-scope='date-picker'][data-part='segment-group']:focus-visible {
     outline: none;
   }
 
+  /* 多选的标签行：段位让位，选中的日期在盒里排成标签，超过 maxTagCount 的折进 +N。
+     行里每一枚都是 tag（data-scope="tag"），样子归 tag.css；行怎么排、标签怎么进出归标签行家族配方，
+     这里只接使用者的间距槽，并让它像段位那样占满输入行剩下的宽度 */
+  [data-scope='date-picker'][data-part='tag-list'] {
+    --xh-tag-list-gap: var(--xh-date-picker-tag-list-gap, var(--xh-space-1));
+
+    /* 基准取 0：只吃两颗钮剩下的宽度、在自己里面折行；按内容宽算基准的话，盒子会先在钮前面折行，把钮挤到最后一行 */
+    flex: 1 1 0;
+    flex-wrap: wrap;
+    font-size: var(--xh-date-picker-font-size, var(--xh-_date-picker-font-size));
+  }
+
+  /* 日期标签是定长文字，截短了就读不出是哪天：不收缩，排不下就折到下一行（与标签输入同一种排法），
+     盒随行数长高（字段家族的 multi-tag 布局给），到上限后在盒内滚动 */
+  [data-scope='date-picker'][data-part='tag-list'] > [data-scope='tag'][data-part='root'] {
+    flex: none;
+  }
+
+  [data-scope='date-picker'][data-part='control'][data-xh-field-layout='multi-tag'] {
+    max-block-size: var(--xh-date-picker-control-max-h, var(--xh-viewport-h-sm));
+    overflow-y: auto;
+  }
+
+  /* 没有选中时这一行承载整条占位：与单选那条占位同一句文字、同一个颜色槽 */
+  [data-scope='date-picker'][data-part='tag-list'][data-placeholder-shown]::before {
+    content: attr(data-placeholder-text);
+    min-inline-size: 0;
+    overflow: hidden;
+    color: var(--xh-date-picker-placeholder-fg, var(--xh-fg-subtle));
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    pointer-events: none;
+  }
+
   /* 两个按钮同一副长相：贴在框内末端的小方钮，不占宽度也不撑高 control。正方视觉盒、inset 圆角、
      悬停 100 / 按下 200 与 0.97 按压、粗指针热区、禁用面与 :focus-visible 关环（盒的 :focus-within
      已画了一圈）全由 Action Control 的 field-inset ghost 档给，组件只映射既有覆盖槽。
@@ -247,10 +312,11 @@
     --xh-action-fg-rest: var(--xh-date-picker-action-fg-hover, var(--xh-fg-default));
   }
 
-  /* 有值时清空钮顶上来，日历钮让位：两颗并排堆着用户分不清点哪个 */
+  /* 有值时清空钮顶上来，日历钮让位：两颗并排堆着用户分不清点哪个。
+     多选不让位：段位收起后日历钮是唯一的键盘入口（退格摘标签也在它身上），藏了键盘就进不来 */
   [data-scope='date-picker'][data-part='control']:has(
       > [data-scope='date-picker'][data-part='clear-trigger']:not([hidden])
-    )
+    ):not(:has(> [data-scope='date-picker'][data-part='tag-list']:not([hidden])))
     > [data-scope='date-picker'][data-part='trigger'] {
     display: none;
   }
@@ -269,9 +335,10 @@
     border-radius: var(--xh-date-picker-content-radius, var(--xh-shape-overlay));
     background: var(--xh-date-picker-content-bg, var(--xh-bg-surface));
     color: var(--xh-date-picker-content-fg, var(--xh-fg-default));
-    /* 日历是定高结构：六行日期加表头本来就有固定高度，上限走页内滚动面那一档；
+    /* 日历是定高结构：网格、时间列与确认行都按 px 排，天然高度就是它们的和，缺省不另设上限
+       （按 rem 的滚动面档会随根字号缩小，根字号低于 16px 时确认行就被挤到滚动里）；
        可用高度是定位引擎算出的视口余量，视口真放不下时再收一截 */
-    max-block-size: min(var(--xh-date-picker-max-h, var(--xh-viewport-h-lg)), var(--xh-_date-picker-available-h));
+    max-block-size: min(var(--xh-date-picker-max-h, var(--xh-_date-picker-available-h)), var(--xh-_date-picker-available-h));
     /* 两轴都滚：块轴放不下时面板内自己竖滚，行内轴放不下时面板内自己横滚，
        日历那几块保持各自的天然宽度，不被压 */
     overflow: auto;
@@ -340,7 +407,7 @@
   }
 
   /* 确认按钮沉到所在那一行的底边：它是整块面板的出口，不跟日历顶边对齐 */
-  [data-scope='date-picker'][data-part='content']:has(> [data-part='time-column']) > [data-part='confirm-trigger'] {
+  [data-scope='date-picker'][data-part='content']:has(> [data-part='time-column']) > [data-part='confirm-trigger']:where([data-scope='date-picker']) {
     align-self: flex-end;
   }
 
@@ -660,7 +727,7 @@
 
   /* 列整体禁用时格没有自己的 aria-disabled，禁用面按列的 aria-disabled 映射到家族槽：
      字色降级、悬停 / 高亮 / 按下不换面、光标 not-allowed */
-  [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item'] {
+  [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-picker']) {
     --xh-collection-fg-rest: var(--xh-fg-disabled);
     --xh-collection-fg-hover: var(--xh-fg-disabled);
     --xh-collection-fg-keyboard-highlight: var(--xh-fg-disabled);
@@ -679,7 +746,7 @@
     --xh-collection-cursor-selected: not-allowed;
   }
 
-  [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']::after {
+  [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-picker'])::after {
     background-color: var(--xh-fg-disabled);
   }
 
@@ -734,6 +801,16 @@
   }
 
   @media (forced-colors: active) {
+    /* 整条占位的文字照系统的弱色画；段位让位时的透明字不被强制换色顶回来 */
+    [data-scope='date-picker'][data-part='segment-group'][data-placeholder-shown] {
+      forced-color-adjust: none;
+    }
+
+    [data-scope='date-picker'][data-part='segment-group'][data-placeholder-shown]::before,
+    [data-scope='date-picker'][data-part='tag-list'][data-placeholder-shown]::before {
+      color: GrayText;
+    }
+
     /* 系统接管底色后仍保住末端对号；禁用标记改用系统失效色。 */
     [data-scope='date-picker'][data-part='preset']::after,
     [data-scope='date-picker'][data-part='time-item']::after {
@@ -749,13 +826,13 @@
 
     [data-scope='date-picker'][data-part='preset'][data-disabled]::after,
     [data-scope='date-picker'][data-part='time-item'][data-disabled]::after,
-    [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']::after {
+    [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-picker'])::after {
       background-color: GrayText;
     }
 
     [data-scope='date-picker'][data-part='preset'][data-disabled],
     [data-scope='date-picker'][data-part='time-item'][data-disabled],
-    [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item'] {
+    [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-picker']) {
       color: GrayText;
     }
   }

package/css/date-range-picker.css

@@ -232,6 +232,36 @@
     color: var(--xh-date-range-picker-literal-fg, var(--xh-fg-subtle));
   }
 
+  /* 整条占位：一段都没填、焦点也不在段上时，段位与分隔符让位给一句占位文字，焦点一进到段上就换回段位。
+     段位只是淡出（仍可聚焦、仍在读屏树里），文字以生成内容压在同一行上、不吃指针，点下去落到底下的段位 */
+  [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown] {
+    position: relative;
+    color: transparent;
+  }
+
+  /* 段位与分隔符（后者是不带解剖的文字节点）一起淡出：显隐写在 segment-group 自己的私有槽上，
+     子节点只读槽——主体无特征的规则不挂在 data-placeholder-shown 后面，输入时翻转只让这一组失效 */
+  [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown] {
+    --xh-_date-range-picker-segment-opacity: 0;
+  }
+
+  [data-scope='date-range-picker'][data-part='segment-group'] > * {
+    opacity: var(--xh-_date-range-picker-segment-opacity, 1);
+  }
+
+  [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown]::before {
+    content: attr(data-placeholder-text);
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 50%;
+    overflow: hidden;
+    color: var(--xh-date-range-picker-placeholder-fg, var(--xh-fg-subtle));
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    pointer-events: none;
+    translate: 0 -50%;
+  }
+
   /* 容器自己不占 Tab 位、也不承载焦点，环由 control 画，这里不再套一圈 */
   [data-scope='date-range-picker'][data-part='segment-group']:focus-visible {
     outline: none;
@@ -298,9 +328,10 @@
     border-radius: var(--xh-date-range-picker-content-radius, var(--xh-shape-overlay));
     background: var(--xh-date-range-picker-content-bg, var(--xh-bg-surface));
     color: var(--xh-date-range-picker-content-fg, var(--xh-fg-default));
-    /* 日历是定高结构：六行日期加表头本来就有固定高度，上限走页内滚动面那一档；
+    /* 日历是定高结构：网格、时间列与确认行都按 px 排，天然高度就是它们的和，缺省不另设上限
+       （按 rem 的滚动面档会随根字号缩小，根字号低于 16px 时确认行就被挤到滚动里）；
        可用高度是定位引擎算出的视口余量，视口真放不下时再收一截 */
-    max-block-size: min(var(--xh-date-range-picker-max-h, var(--xh-viewport-h-lg)), var(--xh-_date-range-picker-available-h));
+    max-block-size: min(var(--xh-date-range-picker-max-h, var(--xh-_date-range-picker-available-h)), var(--xh-_date-range-picker-available-h));
     /* 两轴都滚：块轴放不下时面板内自己竖滚，行内轴放不下时面板内自己横滚，
        日历那几块保持各自的天然宽度，不被压 */
     overflow: auto;
@@ -528,7 +559,7 @@
   }
 
   /* 确认按钮沉到所在那一行的底边：它是整块面板的出口，不跟日历顶边对齐 */
-  [data-scope='date-range-picker'][data-part='content']:has(> [data-part='column-group']) > [data-part='confirm-trigger'] {
+  [data-scope='date-range-picker'][data-part='content']:has(> [data-part='column-group']) > [data-part='confirm-trigger']:where([data-scope='date-range-picker']) {
     align-self: flex-end;
   }
 
@@ -710,7 +741,7 @@
 
   /* 列整体禁用时格没有自己的 aria-disabled，禁用面按列的 aria-disabled 映射到家族槽：
      字色降级、悬停 / 高亮 / 按下不换面、光标 not-allowed */
-  [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item'] {
+  [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-range-picker']) {
     --xh-collection-fg-rest: var(--xh-fg-disabled);
     --xh-collection-fg-hover: var(--xh-fg-disabled);
     --xh-collection-fg-keyboard-highlight: var(--xh-fg-disabled);
@@ -729,7 +760,7 @@
     --xh-collection-cursor-selected: not-allowed;
   }
 
-  [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']::after {
+  [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-range-picker'])::after {
     background-color: var(--xh-fg-disabled);
   }
 
@@ -784,6 +815,15 @@
   }
 
   @media (forced-colors: active) {
+    /* 整条占位的文字照系统的弱色画；段位让位时的透明字不被强制换色顶回来 */
+    [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown] {
+      forced-color-adjust: none;
+    }
+
+    [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown]::before {
+      color: GrayText;
+    }
+
     /* 系统接管底色后仍保住末端对号；禁用标记改用系统失效色。 */
     [data-scope='date-range-picker'][data-part='preset']::after,
     [data-scope='date-range-picker'][data-part='time-item']::after {
@@ -799,13 +839,13 @@
 
     [data-scope='date-range-picker'][data-part='preset'][data-disabled]::after,
     [data-scope='date-range-picker'][data-part='time-item'][data-disabled]::after,
-    [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']::after {
+    [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-range-picker'])::after {
       background-color: GrayText;
     }
 
     [data-scope='date-range-picker'][data-part='preset'][data-disabled],
     [data-scope='date-range-picker'][data-part='time-item'][data-disabled],
-    [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item'] {
+    [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-range-picker']) {
       color: GrayText;
     }
 

package/css/diff-view.css

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

package/css/field-array.css

@@ -42,7 +42,7 @@
   }
 
   /* 新增的行进场，同一批按到达顺序错开；首帧就在的直接呈现（自己或根节点带 data-instant） */
-  [data-scope='field-array'][data-part='item']:not([data-instant], [data-instant] > *) {
+  [data-scope='field-array'][data-part='item']:not([data-instant], [data-instant] > :where([data-scope='field-array'])) {
     animation: xh-item-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
     animation-delay: calc(var(--xh-_stagger-index, 0) * var(--xh-motion-stagger-step));
   }

package/css/field.css

@@ -18,6 +18,10 @@
     display: flex;
     flex-direction: column;
     gap: var(--xh-field-gap, var(--xh-space-1));
+    /* 字段族控件放进字段即铺满字段宽：字段的宽由表单的列给，控件跟着列走，
+       不必逐个组件在根上写 inline-size: 100%。单独摆放的控件仍是 16rem 缺省宽；
+       单类钉宽（--xh-<组件>-control-w）照旧压过这一条 */
+    --xh-control-w: 100%;
   }
 
   /* 表单横排（标签左置）：字段转两列网格，标签列宽由表单的 --xh-form-label-w 统一给，

package/css/file-upload.css

@@ -184,7 +184,7 @@
     transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
-  [data-scope='file-upload'][data-part='item']:not([data-instant], [data-instant] > *) {
+  [data-scope='file-upload'][data-part='item']:not([data-instant], [data-instant] > :where([data-scope='file-upload'])) {
     animation: xh-item-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
     animation-delay: calc(var(--xh-_stagger-index, 0) * var(--xh-motion-stagger-step));
   }