@xihan-ui/styles 4.0.1 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @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

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/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/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/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/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) {

package/index.css

@@ -33440,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;
@@ -33503,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;
     }
   }
@@ -36250,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) {

package/index.unlayered.css

@@ -33199,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;
@@ -33262,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;
   }
 }
@@ -35991,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) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xihan-ui/styles",
   "type": "module",
-  "version": "4.0.1",
+  "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.1"
+    "@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",