@xihan-ui/styles 4.0.0 → 4.1.0

package/dist/css/number-field.css

@@ -13,6 +13,12 @@
     --xh-number-field-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-number-field:not([hidden])) {
+    display: contents;
+  }
+
   /* 与文本框同一套堆叠：标签一行、输入行一行。
      control 是必需的唯一视觉盒，输入框、加减钮与前后缀都放在里面；
      输入与前后缀在左，减、加两颗动作依次收在逻辑末端。

package/dist/css/password-input.css

@@ -13,6 +13,12 @@
     --xh-password-input-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-password-input:not([hidden])) {
+    display: contents;
+  }
+
   /* root 只负责纵向堆叠：标签一行、输入行一行。
      输入框、切换钮与大写锁定提示收进 control 部件即得一体式：视觉盒由 Field Chrome 家族画在 control 上，
      框内三件都退成透明分段，整枚控件从头到尾只有一道描边。

package/dist/css/select.css

@@ -18,6 +18,12 @@
     --xh-select-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-select:not([hidden])) {
+    display: contents;
+  }
+
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   .xh-scope-select[data-part='positioner'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；

package/dist/css/tags-input.css

@@ -15,6 +15,12 @@
     --xh-tags-input-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-tags-input:not([hidden])) {
+    display: contents;
+  }
+
   /* root 只负责纵向堆叠：标题一行、控件一行。可见的那个"框"长在 control 上，
      因为标签、输入框、清空按钮都在它里面，边框必须把三者一起圈住。
      组件层只把既有公开槽映射到家族合同；形态三档由家族按 control 上的 data-variant 生成，皮肤不再声明 */

package/dist/css/text-field.css

@@ -12,6 +12,12 @@
     --xh-text-field-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-text-field:not([hidden])) {
+    display: contents;
+  }
+
   /* 组件层只把既有公开槽映射到家族合同，并保留 label/count 等 TextField 专属结构；
      形态三档由家族按 control 上的 data-variant 生成，皮肤不再声明。 */
   .xh-scope-text-field[data-part='root'] {

package/dist/css/time-field.css

@@ -13,6 +13,12 @@
     --xh-time-field-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-time-field:not([hidden])) {
+    display: contents;
+  }
+
   /* 与文本框、数字框同一套堆叠：标签一行、控件一行。
      组件层只把既有公开槽映射到家族合同；形态三档由家族按 control 上的 data-variant 生成，皮肤不再声明。 */
   .xh-scope-time-field[data-part='root'] {

package/dist/css/time-picker.css

@@ -20,6 +20,12 @@
     --xh-time-picker-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-time-picker:not([hidden])) {
+    display: contents;
+  }
+
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   .xh-scope-time-picker[data-part='positioner'] {
     /* 每个浮层独立声明方向，避免嵌套浮层继承祖先的进场位移。 */

package/dist/css/time-range-picker.css

@@ -19,6 +19,12 @@
     --xh-time-range-picker-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-time-range-picker:not([hidden])) {
+    display: contents;
+  }
+
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   .xh-scope-time-range-picker[data-part='positioner'] {
     /* 落定那一侧的可用宽度，由定位引擎经内联自定义属性写进来，内容层据此夹住行内轴；

package/dist/css/tree-select.css

@@ -20,6 +20,12 @@
     --xh-tree-select-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-tree-select:not([hidden])) {
+    display: contents;
+  }
+
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   .xh-scope-tree-select[data-part='positioner'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；

package/index.css

@@ -8866,6 +8866,12 @@
     --xh-input-group-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-input-group:not([hidden])) {
+    display: contents;
+  }
+
   /* 输入框、前后缀和动作共用一个输入表面。组只统一材质与外轮廓，语义仍归各子控件。 */
   .xh-scope-input-group[data-part='root'] {
     /* 段之间那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
@@ -11043,6 +11049,12 @@
     --xh-mention-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-mention:not([hidden])) {
+    display: contents;
+  }
+
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   .xh-scope-mention[data-part='positioner'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
@@ -11684,6 +11696,12 @@
     --xh-password-input-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-password-input:not([hidden])) {
+    display: contents;
+  }
+
   /* root 只负责纵向堆叠：标签一行、输入行一行。
      输入框、切换钮与大写锁定提示收进 control 部件即得一体式：视觉盒由 Field Chrome 家族画在 control 上，
      框内三件都退成透明分段，整枚控件从头到尾只有一道描边。
@@ -21305,6 +21323,12 @@
     --xh-cascader-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-cascader:not([hidden])) {
+    display: contents;
+  }
+
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   .xh-scope-cascader[data-part='positioner'] {
     /* 落定那一侧的可用宽度，由定位引擎经内联自定义属性写进来，列区据此夹住行内轴；
@@ -23343,6 +23367,12 @@
     --xh-clipboard-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-clipboard:not([hidden])) {
+    display: contents;
+  }
+
   /* 与文本框同一套堆叠：标签一行、输入行一行 */
   .xh-scope-clipboard[data-part='root'] {
     /* 输入框与按钮同取一档高度，换尺寸只改这一个私有槽 */
@@ -24230,6 +24260,12 @@
     --xh-color-field-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-color-field:not([hidden])) {
+    display: contents;
+  }
+
   /* 组件层只把既有公开槽映射到家族合同；形态三档由家族按 control 上的 data-variant 生成，皮肤不再声明；
      色块吃 Swatch 家族，只在这里补一条与输入框的间距。 */
   .xh-scope-color-field[data-part='root'] {
@@ -24401,6 +24437,12 @@
     --xh-color-picker-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-color-picker:not([hidden])) {
+    display: contents;
+  }
+
   /* 定位分工：取色区拇指的两条轴（inset-inline-start / inset-block-start）、浮层坐标、取色区底色，
      全都由连接层每帧写进内联样式。这份皮肤一个都不碰：内联优先级高于样式表，
      写了不但是死声明，还会跟连接层抢位置。皮肤只管尺寸、颜色、圆角与状态表现。
@@ -25597,6 +25639,12 @@
     --xh-combobox-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-combobox:not([hidden])) {
+    display: contents;
+  }
+
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   .xh-scope-combobox[data-part='positioner'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
@@ -26978,6 +27026,12 @@
     --xh-date-field-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-date-field:not([hidden])) {
+    display: contents;
+  }
+
   /* 与文本框、数字框同一套堆叠：标签一行、分段框一行。
      组件层只把既有公开槽映射到家族合同；形态三档由家族按 control 上的 data-variant 生成，皮肤不再声明。 */
   .xh-scope-date-field[data-part='root'] {
@@ -27292,6 +27346,12 @@
     --xh-date-picker-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-date-picker:not([hidden])) {
+    display: contents;
+  }
+
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   .xh-scope-date-picker[data-part='positioner'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
@@ -28213,6 +28273,12 @@
     --xh-date-range-picker-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-date-range-picker:not([hidden])) {
+    display: contents;
+  }
+
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   .xh-scope-date-range-picker[data-part='positioner'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
@@ -30217,6 +30283,12 @@
     --xh-editable-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-editable:not([hidden])) {
+    display: contents;
+  }
+
   /* 与 NumberField 同构：标题独占一行，control 是下面唯一的视觉盒；
      预览/输入占据盒内左侧，编辑或确认/取消动作收在同一盒的逻辑末端。
      组件层只把既有公开槽映射到家族合同；形态三档由家族按 control 上的 data-variant 生成，皮肤不再声明。 */
@@ -31120,10 +31192,15 @@
 
   /* 字段带辅助行：辅助行（最小高 --xh-space-5）紧贴控件、自己就是项距，这一项不再另留；
      说明收起、只留错误文案占位的那一行同样算。字段无效时它的直接子说明被收起（见 description.css），
-     不占那一行，不算辅助行：没渲染错误文案的无效字段照常留项距 */
+     不占那一行，不算辅助行：没渲染错误文案的无效字段照常留项距。
+     字段不包 field-group、直接放进表单时同一条（与字段集的组内项距一致） */
   .xh-scope-form[data-part='field-group']:has(
     .xh-scope-field[data-part='error-text'],
     .xh-scope-field[data-part='description']:not([hidden], .xh-scope-field[data-part='root'][data-invalid] > *)
+  ),
+  .xh-scope-form[data-part='root'] > .xh-scope-field[data-part='root']:has(
+    .xh-scope-field[data-part='error-text'],
+    .xh-scope-field[data-part='description']:not([hidden], .xh-scope-field[data-part='root'][data-invalid] > *)
   ) {
     margin-block-end: 0;
   }
@@ -33363,6 +33440,18 @@
     mask: var(--xh-glyph-mark-flip-vertical) center / contain no-repeat;
   }
 
+  /* 复原：回转箭头，与旋转的整圈箭头区分开；与其余工具钮一样不写内容时由皮肤画 */
+  .xh-scope-image-viewer[data-part='reset-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-undo) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-undo) center / contain no-repeat;
+  }
+
   .xh-scope-image-viewer[data-part='prev-trigger']:empty::before {
     content: '';
     display: inline-block;
@@ -33426,16 +33515,16 @@
       background-color: CanvasText;
     }
 
-    .xh-scope-image-viewer:is([data-part='zoom-in-trigger'], [data-part='zoom-out-trigger'], [data-part='rotate-left-trigger'], [data-part='rotate-right-trigger'], [data-part='flip-horizontal-trigger'], [data-part='flip-vertical-trigger'], [data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger']):empty::before {
+    .xh-scope-image-viewer:is([data-part='zoom-in-trigger'], [data-part='zoom-out-trigger'], [data-part='rotate-left-trigger'], [data-part='rotate-right-trigger'], [data-part='flip-horizontal-trigger'], [data-part='flip-vertical-trigger'], [data-part='reset-trigger'], [data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger']):empty::before {
       forced-color-adjust: none;
       background-color: ButtonText;
     }
 
-    .xh-scope-image-viewer:is([data-part='zoom-in-trigger'], [data-part='zoom-out-trigger'], [data-part='rotate-left-trigger'], [data-part='rotate-right-trigger'], [data-part='flip-horizontal-trigger'], [data-part='flip-vertical-trigger'], [data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+    .xh-scope-image-viewer:is([data-part='zoom-in-trigger'], [data-part='zoom-out-trigger'], [data-part='rotate-left-trigger'], [data-part='rotate-right-trigger'], [data-part='flip-horizontal-trigger'], [data-part='flip-vertical-trigger'], [data-part='reset-trigger'], [data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
       background-color: HighlightText;
     }
 
-    .xh-scope-image-viewer:is([data-part='zoom-in-trigger'], [data-part='zoom-out-trigger'], [data-part='rotate-left-trigger'], [data-part='rotate-right-trigger'], [data-part='flip-horizontal-trigger'], [data-part='flip-vertical-trigger'], [data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger'])[data-disabled]:empty::before {
+    .xh-scope-image-viewer:is([data-part='zoom-in-trigger'], [data-part='zoom-out-trigger'], [data-part='rotate-left-trigger'], [data-part='rotate-right-trigger'], [data-part='flip-horizontal-trigger'], [data-part='flip-vertical-trigger'], [data-part='reset-trigger'], [data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger'])[data-disabled]:empty::before {
       background-color: GrayText;
     }
   }
@@ -36173,6 +36262,9 @@
     flex-direction: column;
     row-gap: var(--xh-notification-item-row-gap, var(--xh-space-2));
     min-inline-size: 0;
+    /* 凭证号、令牌、文件路径这类没有断点的长串就地折行，标题与说明一并继承：不折行时标题顶出卡片，
+       说明因限高带着 overflow-y: auto、另一轴随之成 auto，撑出一条横向滚动条 */
+    overflow-wrap: anywhere;
   }
 
   .xh-scope-notification[data-part='item'][data-preset='toast'] [data-part='item-content']:where(.xh-scope-notification) {
@@ -36473,6 +36565,12 @@
     --xh-number-field-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-number-field:not([hidden])) {
+    display: contents;
+  }
+
   /* 与文本框同一套堆叠：标签一行、输入行一行。
      control 是必需的唯一视觉盒，输入框、加减钮与前后缀都放在里面；
      输入与前后缀在左，减、加两颗动作依次收在逻辑末端。
@@ -40559,6 +40657,12 @@
     --xh-select-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-select:not([hidden])) {
+    display: contents;
+  }
+
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   .xh-scope-select[data-part='positioner'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
@@ -46304,6 +46408,12 @@
     --xh-tags-input-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-tags-input:not([hidden])) {
+    display: contents;
+  }
+
   /* root 只负责纵向堆叠：标题一行、控件一行。可见的那个"框"长在 control 上，
      因为标签、输入框、清空按钮都在它里面，边框必须把三者一起圈住。
      组件层只把既有公开槽映射到家族合同；形态三档由家族按 control 上的 data-variant 生成，皮肤不再声明 */
@@ -46637,6 +46747,12 @@
     --xh-text-field-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-text-field:not([hidden])) {
+    display: contents;
+  }
+
   /* 组件层只把既有公开槽映射到家族合同，并保留 label/count 等 TextField 专属结构；
      形态三档由家族按 control 上的 data-variant 生成，皮肤不再声明。 */
   .xh-scope-text-field[data-part='root'] {
@@ -46830,6 +46946,12 @@
     --xh-time-field-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-time-field:not([hidden])) {
+    display: contents;
+  }
+
   /* 与文本框、数字框同一套堆叠：标签一行、控件一行。
      组件层只把既有公开槽映射到家族合同；形态三档由家族按 control 上的 data-variant 生成，皮肤不再声明。 */
   .xh-scope-time-field[data-part='root'] {
@@ -47104,6 +47226,12 @@
     --xh-time-picker-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-time-picker:not([hidden])) {
+    display: contents;
+  }
+
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   .xh-scope-time-picker[data-part='positioner'] {
     /* 每个浮层独立声明方向，避免嵌套浮层继承祖先的进场位移。 */
@@ -47887,6 +48015,12 @@
     --xh-time-range-picker-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-time-range-picker:not([hidden])) {
+    display: contents;
+  }
+
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   .xh-scope-time-range-picker[data-part='positioner'] {
     /* 落定那一侧的可用宽度，由定位引擎经内联自定义属性写进来，内容层据此夹住行内轴；
@@ -51860,6 +51994,12 @@
     --xh-tree-select-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-tree-select:not([hidden])) {
+    display: contents;
+  }
+
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   .xh-scope-tree-select[data-part='positioner'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；