@xihan-ui/styles 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @xihan-ui/styles
 
+## 4.1.0
+
+### Patch Changes
+
+- e3bdc1f: 看片工具条的复原钮不写内容时改由皮肤画图标，与其余六颗变换钮一致：此前 Vue / React 在钮里塞「1:1」文字，工具条上只有它是字。图标集新增 `undo`（U 形回转箭头，与旋转的整圈箭头区分开），令牌新增 `--xh-glyph-mark-undo`；可及名仍取语言包里的「复原」，高对比档与其余工具钮同一条系统色补救。Web Components 由作者写空的 `reset-trigger` 按钮即可。
+- 7ee6c0d: 通知（卡片与轻提示）的标题与说明里，凭证号、令牌、文件路径这类没有断点的长串就地折行：此前标题会顶出卡片，说明因限高带着竖向滚动，另一轴随之可滚，长串在说明里撑出一条横向滚动条。
+- Updated dependencies [e3bdc1f]
+  - @xihan-ui/tokens@4.1.0
+
+## 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/components.tokens.json

@@ -41190,6 +41190,7 @@
         "path-item",
         "prev-trigger",
         "prev-year-trigger",
+        "reset-trigger",
         "root",
         "rotate-left-trigger",
         "rotate-right-trigger",
@@ -41255,7 +41256,7 @@
         "--xh-glyph-size-xl"
       ],
       "visibility": "public",
-      "description": "icon 的 autoplay-trigger、branch-error、branch-indicator、branch-loading、branch-trigger、cancel-trigger、caps-lock-indicator、clear-trigger、close-trigger、comment-trigger、control、decrement-trigger、dismiss-trigger、edit-trigger、ellipsis-trigger、expand-trigger、first-trigger、flip-horizontal-trigger、flip-vertical-trigger、increment-trigger、indicator、item、item-close-trigger、item-delete-trigger、item-indicator、item-preview、last-trigger、line-content、line-fold-trigger、loading、move-down-trigger、move-up-trigger、next-trigger、next-year-trigger、overflow-trigger、path、path-item、prev-trigger、prev-year-trigger、root、rotate-left-trigger、rotate-right-trigger、scroll-to-end-trigger、separator、sort-trigger、submit-trigger、to-source-trigger、to-target-trigger、trend、trigger、trigger-indicator、truncation、viewport、visibility-trigger、window-state-trigger、zoom-in-trigger、zoom-out-trigger 部件 block-size、column-gap、inline-size 覆盖槽。"
+      "description": "icon 的 autoplay-trigger、branch-error、branch-indicator、branch-loading、branch-trigger、cancel-trigger、caps-lock-indicator、clear-trigger、close-trigger、comment-trigger、control、decrement-trigger、dismiss-trigger、edit-trigger、ellipsis-trigger、expand-trigger、first-trigger、flip-horizontal-trigger、flip-vertical-trigger、increment-trigger、indicator、item、item-close-trigger、item-delete-trigger、item-indicator、item-preview、last-trigger、line-content、line-fold-trigger、loading、move-down-trigger、move-up-trigger、next-trigger、next-year-trigger、overflow-trigger、path、path-item、prev-trigger、prev-year-trigger、reset-trigger、root、rotate-left-trigger、rotate-right-trigger、scroll-to-end-trigger、separator、sort-trigger、submit-trigger、to-source-trigger、to-target-trigger、trend、trigger、trigger-indicator、truncation、viewport、visibility-trigger、window-state-trigger、zoom-in-trigger、zoom-out-trigger 部件 block-size、column-gap、inline-size 覆盖槽。"
     },
     {
       "name": "--xh-icon-stroke",

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/image-viewer.css

@@ -509,6 +509,18 @@
     mask: var(--xh-glyph-mark-flip-vertical) center / contain no-repeat;
   }
 
+  /* 复原：回转箭头，与旋转的整圈箭头区分开；与其余工具钮一样不写内容时由皮肤画 */
+  [data-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;
+  }
+
   [data-scope='image-viewer'][data-part='prev-trigger']:empty::before {
     content: '';
     display: inline-block;
@@ -572,16 +584,16 @@
       background-color: CanvasText;
     }
 
-    [data-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 {
+    [data-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;
     }
 
-    [data-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 {
+    [data-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;
     }
 
-    [data-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 {
+    [data-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;
     }
   }

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/notification.css

@@ -573,6 +573,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;
   }
 
   [data-scope='notification'][data-part='item'][data-preset='toast'] [data-part='item-content']:where([data-scope='notification']) {

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/image-viewer.css

@@ -509,6 +509,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;
@@ -572,16 +584,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;
     }
   }

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/notification.css

@@ -573,6 +573,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) {