@xihan-ui/styles 4.0.0 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @xihan-ui/styles
 
+## 4.0.1
+
+### Patch Changes
+
+- bb1721f: Web Components 字段族宿主的 `display: contents` 改由皮肤声明（零特指度），元素不再在连接时往宿主写内联 `display`。作者给宿主写的 `display` 无论在内联还是样式表里都照层叠胜出，写在宿主上的宽度与外边距随之生效；此前样式表里的规则会被内联的 `contents` 压过。带 `hidden` 的宿主也不再被内联 `contents` 掀开。不加载皮肤时宿主回到行内盒。
+- 775b17b: 字段不包 `XhFormFieldGroup`、直接放进 Form 时，辅助行同样算项距：带说明或预留了错误文案行的字段不再另留 20px 项距，与字段集的组内项距一致。此前只有包在 field-group 里的字段归零，直接放进表单的字段辅助行 20px 与项距 20px 叠成两段。
+- Updated dependencies [14da7fe]
+  - @xihan-ui/tokens@4.0.1
+
 ## 4.0.0
 
 ### Major Changes

package/css/cascader.css

@@ -20,6 +20,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），这里只定位模式与层级 */
   [data-scope='cascader'][data-part='positioner'] {
     /* 落定那一侧的可用宽度，由定位引擎经内联自定义属性写进来，列区据此夹住行内轴；

package/css/clipboard.css

@@ -16,6 +16,12 @@
     --xh-clipboard-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-clipboard:not([hidden])) {
+    display: contents;
+  }
+
   /* 与文本框同一套堆叠：标签一行、输入行一行 */
   [data-scope='clipboard'][data-part='root'] {
     /* 输入框与按钮同取一档高度，换尺寸只改这一个私有槽 */

package/css/color-field.css

@@ -13,6 +13,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 家族，只在这里补一条与输入框的间距。 */
   [data-scope='color-field'][data-part='root'] {

package/css/color-picker.css

@@ -17,6 +17,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）、浮层坐标、取色区底色，
      全都由连接层每帧写进内联样式。这份皮肤一个都不碰：内联优先级高于样式表，
      写了不但是死声明，还会跟连接层抢位置。皮肤只管尺寸、颜色、圆角与状态表现。

package/css/combobox.css

@@ -20,6 +20,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），这里只定位模式与层级 */
   [data-scope='combobox'][data-part='positioner'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；

package/css/date-field.css

@@ -13,6 +13,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 生成，皮肤不再声明。 */
   [data-scope='date-field'][data-part='root'] {

package/css/date-picker.css

@@ -20,6 +20,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），这里只定位模式与层级 */
   [data-scope='date-picker'][data-part='positioner'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；

package/css/date-range-picker.css

@@ -19,6 +19,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），这里只定位模式与层级 */
   [data-scope='date-range-picker'][data-part='positioner'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；

package/css/editable.css

@@ -13,6 +13,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 生成，皮肤不再声明。 */

package/css/form.css

@@ -35,10 +35,15 @@
 
   /* 字段带辅助行：辅助行（最小高 --xh-space-5）紧贴控件、自己就是项距，这一项不再另留；
      说明收起、只留错误文案占位的那一行同样算。字段无效时它的直接子说明被收起（见 description.css），
-     不占那一行，不算辅助行：没渲染错误文案的无效字段照常留项距 */
+     不占那一行，不算辅助行：没渲染错误文案的无效字段照常留项距。
+     字段不包 field-group、直接放进表单时同一条（与字段集的组内项距一致） */
   [data-scope='form'][data-part='field-group']:has(
     [data-scope='field'][data-part='error-text'],
     [data-scope='field'][data-part='description']:not([hidden], [data-scope='field'][data-part='root'][data-invalid] > *)
+  ),
+  [data-scope='form'][data-part='root'] > [data-scope='field'][data-part='root']:has(
+    [data-scope='field'][data-part='error-text'],
+    [data-scope='field'][data-part='description']:not([hidden], [data-scope='field'][data-part='root'][data-invalid] > *)
   ) {
     margin-block-end: 0;
   }

package/css/input-group.css

@@ -11,6 +11,12 @@
     --xh-input-group-skin: 1;
   }
 
+  /* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+     直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+  :where(xh-input-group:not([hidden])) {
+    display: contents;
+  }
+
   /* 输入框、前后缀和动作共用一个输入表面。组只统一材质与外轮廓，语义仍归各子控件。 */
   [data-scope='input-group'][data-part='root'] {
     /* 段之间那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，

package/css/mention.css

@@ -18,6 +18,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），这里只定位模式与层级 */
   [data-scope='mention'][data-part='positioner'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；

package/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/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/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），这里只定位模式与层级 */
   [data-scope='select'][data-part='positioner'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；

package/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/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 生成，皮肤不再声明。 */
   [data-scope='text-field'][data-part='root'] {

package/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 生成，皮肤不再声明。 */
   [data-scope='time-field'][data-part='root'] {

package/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），这里只定位模式与层级 */
   [data-scope='time-picker'][data-part='positioner'] {
     /* 每个浮层独立声明方向，避免嵌套浮层继承祖先的进场位移。 */

package/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），这里只定位模式与层级 */
   [data-scope='time-range-picker'][data-part='positioner'] {
     /* 落定那一侧的可用宽度，由定位引擎经内联自定义属性写进来，内容层据此夹住行内轴；

package/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），这里只定位模式与层级 */
   [data-scope='tree-select'][data-part='positioner'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；

package/dist/css/cascader.css

@@ -20,6 +20,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'] {
     /* 落定那一侧的可用宽度，由定位引擎经内联自定义属性写进来，列区据此夹住行内轴；

package/dist/css/clipboard.css

@@ -16,6 +16,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'] {
     /* 输入框与按钮同取一档高度，换尺寸只改这一个私有槽 */

package/dist/css/color-field.css

@@ -13,6 +13,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'] {

package/dist/css/color-picker.css

@@ -17,6 +17,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）、浮层坐标、取色区底色，
      全都由连接层每帧写进内联样式。这份皮肤一个都不碰：内联优先级高于样式表，
      写了不但是死声明，还会跟连接层抢位置。皮肤只管尺寸、颜色、圆角与状态表现。

package/dist/css/combobox.css

@@ -20,6 +20,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'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；

package/dist/css/date-field.css

@@ -13,6 +13,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'] {

package/dist/css/date-picker.css

@@ -20,6 +20,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'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；

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

@@ -19,6 +19,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'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；

package/dist/css/editable.css

@@ -13,6 +13,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 生成，皮肤不再声明。 */

package/dist/css/form.css

@@ -35,10 +35,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;
   }

package/dist/css/input-group.css

@@ -11,6 +11,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'] {
     /* 段之间那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，

package/dist/css/mention.css

@@ -18,6 +18,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'] {
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；

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;
   }
@@ -36473,6 +36550,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 +40642,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 +46393,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 +46732,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 +46931,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 +47211,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 +48000,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 +51979,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.unlayered.css

@@ -8807,6 +8807,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'] {
   /* 段之间那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
@@ -10962,6 +10968,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'] {
   /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
@@ -11597,6 +11609,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 上，
    框内三件都退成透明分段，整枚控件从头到尾只有一道描边。
@@ -21138,6 +21156,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'] {
   /* 落定那一侧的可用宽度，由定位引擎经内联自定义属性写进来，列区据此夹住行内轴；
@@ -23164,6 +23188,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'] {
   /* 输入框与按钮同取一档高度，换尺寸只改这一个私有槽 */
@@ -24043,6 +24073,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'] {
@@ -24212,6 +24248,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）、浮层坐标、取色区底色，
    全都由连接层每帧写进内联样式。这份皮肤一个都不碰：内联优先级高于样式表，
    写了不但是死声明，还会跟连接层抢位置。皮肤只管尺寸、颜色、圆角与状态表现。
@@ -25400,6 +25442,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'] {
   /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
@@ -26773,6 +26821,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'] {
@@ -27085,6 +27139,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'] {
   /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
@@ -28002,6 +28062,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'] {
   /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
@@ -29998,6 +30064,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 生成，皮肤不再声明。 */
@@ -30895,10 +30967,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;
 }
@@ -36212,6 +36289,12 @@
   --xh-number-field-skin: 1;
 }
 
+/* Web Components 的宿主不占一层盒子：作者写的 root 直接参与外层排布、按控件宽铺满，与 Vue / React
+   直接渲染 root 一致。零特指度，作者给宿主写的 display 照层叠胜出；带 hidden 的宿主不掀开 */
+:where(xh-number-field:not([hidden])) {
+  display: contents;
+}
+
 /* 与文本框同一套堆叠：标签一行、输入行一行。
    control 是必需的唯一视觉盒，输入框、加减钮与前后缀都放在里面；
    输入与前后缀在左，减、加两颗动作依次收在逻辑末端。
@@ -40272,6 +40355,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'] {
   /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
@@ -45991,6 +46080,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 生成，皮肤不再声明 */
@@ -46322,6 +46417,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'] {
@@ -46513,6 +46614,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'] {
@@ -46785,6 +46892,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'] {
   /* 每个浮层独立声明方向，避免嵌套浮层继承祖先的进场位移。 */
@@ -47564,6 +47677,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'] {
   /* 落定那一侧的可用宽度，由定位引擎经内联自定义属性写进来，内容层据此夹住行内轴；
@@ -51512,6 +51631,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xihan-ui/styles",
   "type": "module",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "XiHan.UI styled layer — pure CSS skins driven by data-attributes and design tokens.",
   "author": {
     "name": "XiHanFun",
@@ -218,7 +218,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@xihan-ui/tokens": "^4.0.0"
+    "@xihan-ui/tokens": "^4.0.1"
   },
   "scripts": {
     "gen": "node build/action-control-recipe.mjs && node build/field-chrome-recipe.mjs && node build/collection-item-recipe.mjs && node build/swatch-recipe.mjs && node build/chart-recipe.mjs && node build/emit-component-tokens.mjs && node build/emit-entries.mjs",