@xihan-ui/styles 4.0.0 → 4.1.0

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;
 }
@@ -33122,6 +33199,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;
@@ -33185,16 +33274,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;
   }
 }
@@ -35914,6 +36003,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) {
@@ -36212,6 +36304,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 +40370,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 +46095,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 +46432,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 +46629,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 +46907,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 +47692,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 +51646,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.1.0",
   "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.1.0"
   },
   "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",