@xihan-ui/styles 2.1.0 → 3.0.0

package/css/icon.css

@@ -122,4 +122,104 @@
   [data-scope='icon'][data-part='root'][data-flip='both'] {
     scale: -1 -1;
   }
+
+  /* —— 底框 —— */
+  /*
+   * 加了框的图标是一个定直径的圆底座：框画在 <svg> 自己的盒上，图元落在内容盒里居中。
+   * sm / md / lg 三档框与头像同档（取同一支控件高度令牌），图元按自己的档位取字形直径，
+   * 内衬由两者之差算出，框换档时图元跟着一起换。
+   * 框里的图元不读外层统一图元直径的通道 --xh-icon-size：框自己就是一个定尺对象，
+   * 落在按钮、提示条这类下发图元直径的容器里也不被改小。
+   * 排在档位与语气之后：框接管了盒的尺寸与配色。
+   */
+  [data-scope='icon'][data-part='root'][data-frame] {
+    /* 三档之外的档位经两支 step 槽给出字形直径与框直径，三档本身在下面的档位块里换 */
+    --xh-_icon-glyph: var(--xh-icon-frame-glyph-size, var(--xh-_icon-glyph-step, var(--xh-glyph-size-md)));
+    --xh-_icon-frame-size: var(--xh-icon-frame-size, var(--xh-_icon-frame-step, var(--xh-control-h-md)));
+
+    inline-size: var(--xh-_icon-frame-size);
+    block-size: var(--xh-_icon-frame-size);
+    padding: calc((var(--xh-_icon-frame-size) - var(--xh-_icon-glyph)) / 2 - var(--xh-stroke-thin));
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-icon-frame-radius, var(--xh-shape-circle));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame][data-size='sm'] {
+    --xh-_icon-glyph: var(--xh-icon-frame-glyph-size, var(--xh-glyph-size-sm));
+    --xh-_icon-frame-size: var(--xh-icon-frame-size, var(--xh-control-h-sm));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame][data-size='lg'] {
+    --xh-_icon-glyph: var(--xh-icon-frame-glyph-size, var(--xh-glyph-size-lg));
+    --xh-_icon-frame-size: var(--xh-icon-frame-size, var(--xh-control-h-lg));
+  }
+
+  /* 头像只有三档；其余档的框沿用 md 档的内衬厚度：框直径 = 本档字形 + md 档框与字形之差 */
+  [data-scope='icon'][data-part='root'][data-frame][data-size='text'] {
+    --xh-_icon-glyph-step: var(--xh-glyph-size-text);
+    --xh-_icon-frame-step: calc(var(--xh-glyph-size-text) + var(--xh-control-h-md) - var(--xh-glyph-size-md));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame][data-size='xl'] {
+    --xh-_icon-glyph-step: var(--xh-glyph-size-xl);
+    --xh-_icon-frame-step: calc(var(--xh-glyph-size-xl) + var(--xh-control-h-md) - var(--xh-glyph-size-md));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame][data-size='2xl'] {
+    --xh-_icon-glyph-step: var(--xh-glyph-size-2xl);
+    --xh-_icon-frame-step: calc(var(--xh-glyph-size-2xl) + var(--xh-control-h-md) - var(--xh-glyph-size-md));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame][data-size='3xl'] {
+    --xh-_icon-glyph-step: var(--xh-glyph-size-3xl);
+    --xh-_icon-frame-step: calc(var(--xh-glyph-size-3xl) + var(--xh-control-h-md) - var(--xh-glyph-size-md));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame][data-size='4xl'] {
+    --xh-_icon-glyph-step: var(--xh-glyph-size-4xl);
+    --xh-_icon-frame-step: calc(var(--xh-glyph-size-4xl) + var(--xh-control-h-md) - var(--xh-glyph-size-md));
+  }
+
+  /* 框的四种形态只决定颜色怎么用；用哪族颜色由 data-tone 决定，没写语气取品牌实心 / 中性。
+     语气只认自己身上的 data-tone：语气槽会沿继承流下来，放在语气容器里的框不跟着改色。
+     实心档在顶边画一条极浅的内高光，把这块底座衬出厚度；另外三档面上没有实心底，不画 */
+  [data-scope='icon'][data-part='root'][data-frame='solid'] {
+    background: var(--xh-icon-frame-bg, var(--xh-bg-brand));
+    box-shadow: var(--xh-icon-frame-shadow, var(--xh-_highlight-brand));
+    color: var(--xh-icon-fg, var(--xh-fg-on-brand));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame='solid'][data-tone] {
+    background: var(--xh-icon-frame-bg, var(--xh-_tone));
+    box-shadow: var(--xh-icon-frame-shadow, var(--xh-_highlight-tone));
+    color: var(--xh-icon-fg, var(--xh-_tone-on));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame='subtle'] {
+    background: var(--xh-icon-frame-bg, var(--xh-bg-subtle));
+    color: var(--xh-icon-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame='subtle'][data-tone] {
+    background: var(--xh-icon-frame-bg, var(--xh-_tone-subtle));
+    color: var(--xh-icon-fg, var(--xh-_tone-fg));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame='outline'] {
+    border-color: var(--xh-icon-frame-border, var(--xh-border-default));
+    color: var(--xh-icon-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame='outline'][data-tone] {
+    border-color: var(--xh-icon-frame-border, var(--xh-_tone-border));
+    color: var(--xh-icon-fg, var(--xh-_tone-fg));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame='ghost'] {
+    color: var(--xh-icon-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame='ghost'][data-tone] {
+    color: var(--xh-icon-fg, var(--xh-_tone-fg));
+  }
 }

package/css/image-cropper.css

@@ -5,6 +5,8 @@
 
 /* 定义 image cropper 样式。 */
 
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='image-cropper'] {
@@ -90,17 +92,17 @@
       linear-gradient(
         to right,
         transparent 0 33.3333%,
-        var(--xh-image-cropper-grid-line, var(--xh-border-subtle)) 33.3333% calc(33.3333% + var(--xh-_image-cropper-grid-w)),
+        var(--xh-image-cropper-grid-line, var(--xh-bg-subtle-opaque)) 33.3333% calc(33.3333% + var(--xh-_image-cropper-grid-w)),
         transparent calc(33.3333% + var(--xh-_image-cropper-grid-w)) 66.6667%,
-        var(--xh-image-cropper-grid-line, var(--xh-border-subtle)) 66.6667% calc(66.6667% + var(--xh-_image-cropper-grid-w)),
+        var(--xh-image-cropper-grid-line, var(--xh-bg-subtle-opaque)) 66.6667% calc(66.6667% + var(--xh-_image-cropper-grid-w)),
         transparent calc(66.6667% + var(--xh-_image-cropper-grid-w)) 100%
       ),
       linear-gradient(
         to bottom,
         transparent 0 33.3333%,
-        var(--xh-image-cropper-grid-line, var(--xh-border-subtle)) 33.3333% calc(33.3333% + var(--xh-_image-cropper-grid-w)),
+        var(--xh-image-cropper-grid-line, var(--xh-bg-subtle-opaque)) 33.3333% calc(33.3333% + var(--xh-_image-cropper-grid-w)),
         transparent calc(33.3333% + var(--xh-_image-cropper-grid-w)) 66.6667%,
-        var(--xh-image-cropper-grid-line, var(--xh-border-subtle)) 66.6667% calc(66.6667% + var(--xh-_image-cropper-grid-w)),
+        var(--xh-image-cropper-grid-line, var(--xh-bg-subtle-opaque)) 66.6667% calc(66.6667% + var(--xh-_image-cropper-grid-w)),
         transparent calc(66.6667% + var(--xh-_image-cropper-grid-w)) 100%
       );
     pointer-events: none;
@@ -133,7 +135,7 @@
     background: var(--xh-_image-cropper-handle-color);
     pointer-events: none;
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -145,9 +147,10 @@
     content: '';
   }
 
-  /* 把手静息是白面（bg-surface），悬停从同一语义面派生一档，不切到品牌淡底；拖动中才是品牌实心 */
+  /* 把手静息是白面（bg-surface），悬停从同一语义面派生一档，不切到品牌淡底；拖动中才是品牌实心。
+     把手与网格线都压在照片上，取淡底的不透明档，照片深浅不一时才看得见 */
   [data-scope='image-cropper'][data-part='crop-handle']:hover:not([data-disabled], [data-readonly]) {
-    --xh-_image-cropper-handle-color: var(--xh-image-cropper-handle-bg-hover, var(--xh-bg-subtle));
+    --xh-_image-cropper-handle-color: var(--xh-image-cropper-handle-bg-hover, var(--xh-bg-subtle-opaque));
   }
 
   [data-scope='image-cropper'][data-part='crop-handle'][data-resizing] {
@@ -327,6 +330,29 @@
     accent-color: var(--xh-image-cropper-slider-accent, var(--xh-bg-brand));
   }
 
+  /*
+   * 翻转按钮是裁切器旁的独立开关钮：盒型、sm 档几何、outline 四态面、0.97 按压与粗指针命中区由家族配方
+   * 按连接层投影的 data-xh-action-* 给出。翻着（data-state='on'）是无滑块开关的选中面：品牌淡底 12 → 悬停 20
+   * → 按压 28，前景 fg-on-brand-subtle；outline 的描边不换，淡底面上没有描边就与悬停面分不开。
+   */
+  [data-scope='image-cropper'][data-part='flip-trigger'] {
+    /* 作者塞进来的图标随档取字形尺（sm = 16px） */
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+  }
+
+  [data-scope='image-cropper'][data-part='flip-trigger'][data-state='on'] {
+    --xh-action-bg-rest: var(--xh-bg-brand-subtle);
+    --xh-action-bg-hover: var(--xh-bg-brand-subtle-hover);
+    --xh-action-bg-pressed: var(--xh-bg-brand-subtle-active);
+    --xh-action-bg-focus-visible: var(--xh-bg-brand-subtle);
+    /* 翻着又被禁用：底色掺一半中性面，选中信息不丢。掺的是淡底的不透明档，墨色淡底半透明 */
+    --xh-action-bg-disabled: color-mix(in oklab, var(--xh-bg-brand-subtle) 50%, var(--xh-bg-subtle-opaque));
+    --xh-action-fg-rest: var(--xh-fg-on-brand-subtle);
+    --xh-action-fg-hover: var(--xh-fg-on-brand-subtle);
+    --xh-action-fg-pressed: var(--xh-fg-on-brand-subtle);
+    --xh-action-fg-focus-visible: var(--xh-fg-on-brand-subtle);
+  }
+
   /* 禁用的整体压暗只做一次，落在最外层：视口、裁切框、把手各自再叠一层会越叠越黑。
      这里只用 opacity、不换前景色：框里是图像，没有文字可换。 */
   [data-scope='image-cropper'][data-part='root'][data-disabled] {

package/css/image-viewer.css

@@ -6,6 +6,7 @@
 /* 定义 image viewer 样式。 */
 
 @import '../family/action-control.css';
+@import '../family/loading-ring.css';
 
 /* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
 @import '../family/motion.css';
@@ -35,7 +36,7 @@
     background: transparent;
   }
 
-  [data-scope='image-viewer'][data-part='backdrop'][data-state='open'] {
+  [data-scope='image-viewer'][data-part='backdrop'][data-state='open']:not([data-instant]) {
     animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
@@ -75,7 +76,8 @@
     color: var(--xh-image-viewer-fg, var(--xh-color-neutral-0));
   }
 
-  [data-scope='image-viewer'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='image-viewer'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
@@ -104,29 +106,67 @@
     cursor: progress;
   }
 
-  /* 取图期间在画面正中垫一块占位面：不垫的话打开一张几 MB 的原图，
-     台前是一整块什么都没有的暗底，用户分不清是在加载还是这张图坏了 */
-  [data-scope='image-viewer'][data-part='viewport'][data-loading]::after {
+  /* 取图期间画面正中一枚加载环：不给的话打开一张几 MB 的原图，台前是一整块什么都没有的暗底，
+     用户分不清是在加载还是这张图坏了。环由加载环配方画（连接层投影 data-xh-loading-ring），
+     随 data-loading 淡入淡出；前景随看片层的白墨域 */
+  [data-scope='image-viewer'][data-part='viewport'] {
+    /* 画面正中那两枚状态图形（加载环与警示字形）的尺：看片台是整幅画面，取控件图标档的最大一档 */
+    --xh-icon-size: var(--xh-image-viewer-status-size, var(--xh-glyph-size-lg));
+  }
+
+  [data-scope='image-viewer'][data-part='viewport']::before {
+    content: '';
+    position: absolute;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+  }
+
+  /* 取图失败：画面正中一枚警示字形（取危险色，非颜色通道），替掉浏览器画的破图与替代文字 */
+  [data-scope='image-viewer'][data-part='viewport'][data-error]::after {
     content: '';
     position: absolute;
-    inline-size: var(--xh-image-viewer-loading-size, calc(var(--xh-control-h-lg) * 3));
-    block-size: var(--xh-image-viewer-loading-size, calc(var(--xh-control-h-lg) * 3));
-    border-radius: var(--xh-image-viewer-loading-radius, var(--xh-shape-surface));
-    background: var(--xh-image-viewer-loading-bg, var(--xh-bg-surface-raised));
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    background-color: var(--xh-image-viewer-error-fg, var(--xh-fg-danger));
+    -webkit-mask: var(--xh-glyph-mark-warning) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-warning) center / contain no-repeat;
   }
 
   [data-scope='image-viewer'][data-part='image'] {
     max-inline-size: 90%;
     max-block-size: 85%;
     user-select: none;
-    /* 变换是内联 style 写的，只给缩放旋转一点缓动；拖拽平移要跟手，不缓 */
-    transition: transform var(--xh-motion-duration-micro) var(--xh-motion-ease-continuous);
+    /* 位移、旋转与缩放都是内联 style 写的，只给按钮带来的缩放旋转一点缓动；拖拽平移要跟手，不缓。
+       新图取到之后淡入 */
+    transition:
+      translate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
+      rotate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
+      scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
+      opacity var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* 取图期间（打开与换下标）：换图那一刻变换直接归位、不补间——转过、放大过的旧图不当着用户转回、缩回；
+     旧图随即让位，视口垫着的占位面顶上，不露底色闪一拍。取到之后撤掉这一档，按上面的进场档淡入 */
+  [data-scope='image-viewer'][data-part='image'][data-loading] {
+    opacity: 0;
+    transition: none;
   }
 
-  /* 拖拽期间变换每帧都在改：只在这一档备好合成层，松手后随 data-dragging 一起撤掉 */
+  /* 载不出来的图不露浏览器的破图：整张让位给视口正中的警示字形，替代文字仍在可及树里 */
+  [data-scope='image-viewer'][data-part='image'][data-error] {
+    visibility: hidden;
+  }
+
+  /* 拖拽期间平移每帧都在改：只在这一档备好合成层，松手后随 data-dragging 一起撤掉 */
   [data-scope='image-viewer'][data-part='image'][data-dragging] {
     transition: none;
-    will-change: transform;
+    will-change: translate;
+  }
+
+  /* 松手后弹簧带着平移惯性滑行、越出范围时回弹，同样逐帧写变换，不能再叠一层过渡；落定即撤 */
+  [data-scope='image-viewer'][data-part='image'][data-animating] {
+    transition: none;
+    will-change: translate;
   }
 
   /* —— 悬浮件共用：半透明深底加浅字 ——
@@ -155,6 +195,11 @@
     border-radius: var(--xh-image-viewer-toolbar-radius-outer, var(--xh-image-viewer-overlay-radius, var(--xh-shape-surface)));
   }
 
+  /* 起点是逻辑属性、平移是物理通道：rtl 下行内分量掉头，工具条与计数才落回中线 */
+  [data-scope='image-viewer'][data-part='toolbar']:dir(rtl) {
+    translate: 50% 0;
+  }
+
   /* 工具条里的七颗钮：接 Action Control icon 档 xs（24px 视觉盒），底色交给工具条，本体只管命中区与按压。
      悬停 / 按下的底从 chrome 那层深底派生，不取页面的 --xh-bg-subtle-* 阶梯。
      position 交给配方的 relative：粗指针下 44px 命中区 ::after 以钮自身为包含块；
@@ -169,7 +214,7 @@
     --xh-action-fg-hover: currentColor;
     --xh-action-fg-pressed: currentColor;
     --xh-action-fg-focus-visible: currentColor;
-    --xh-action-fg-disabled: currentColor;
+    --xh-action-fg-disabled: var(--xh-fg-disabled);
     --xh-action-border-rest: transparent;
     --xh-action-border-hover: transparent;
     --xh-action-border-pressed: transparent;
@@ -188,6 +233,10 @@
     font-size: var(--xh-text-secondary-size);
   }
 
+  [data-scope='image-viewer'][data-part='counter']:dir(rtl) {
+    translate: 50% 0;
+  }
+
   /* 两颗翻页钮：浮在图上的单图标圆钮，接 Action Control floating 档 md（48px，正方盒取 circle）。
      面桥接到自家深色 chrome：跟的是图上那层半透明深底不是页面底色，所以不取 frosted 缺省面，
      也不取语义档的 --xh-bg-subtle-*；到头时是原生 disabled，压不动的东西不给回应 */
@@ -202,7 +251,7 @@
     --xh-action-fg-hover: currentColor;
     --xh-action-fg-pressed: currentColor;
     --xh-action-fg-focus-visible: currentColor;
-    --xh-action-fg-disabled: currentColor;
+    --xh-action-fg-disabled: var(--xh-fg-disabled);
     --xh-action-border-rest: transparent;
     --xh-action-border-hover: transparent;
     --xh-action-border-pressed: transparent;
@@ -227,7 +276,8 @@
     translate: 0 -50%;
   }
 
-  /* 右上角的关闭钮：接 Action Control icon 档 lg（40px，触控靶走 lg），圆角走控件档；面与翻页钮同一层深色 chrome */
+  /* 右上角的关闭钮：悬浮在媒体上的单图标动作，与翻页钮同走 Action Control floating 档（sm = 40px、圆形）；
+     面与翻页钮同一层深色 chrome */
   [data-scope='image-viewer'][data-part='close-trigger'] {
     --xh-action-bg-rest: var(--xh-_image-viewer-chrome-bg);
     --xh-action-bg-hover: var(--xh-image-viewer-close-bg-hover, var(--xh-_image-viewer-chrome-bg-hover));
@@ -239,13 +289,13 @@
     --xh-action-fg-hover: var(--xh-image-viewer-close-fg, currentColor);
     --xh-action-fg-pressed: var(--xh-image-viewer-close-fg, currentColor);
     --xh-action-fg-focus-visible: var(--xh-image-viewer-close-fg, currentColor);
-    --xh-action-fg-disabled: var(--xh-image-viewer-close-fg, currentColor);
+    --xh-action-fg-disabled: var(--xh-fg-disabled);
     --xh-action-border-rest: transparent;
     --xh-action-border-hover: transparent;
     --xh-action-border-pressed: transparent;
     --xh-action-border-focus-visible: transparent;
     --xh-action-border-disabled: transparent;
-    --xh-action-radius: var(--xh-image-viewer-close-radius, var(--xh-shape-control));
+    --xh-action-radius: var(--xh-image-viewer-close-radius, var(--xh-shape-circle));
     --xh-action-visual-size: var(--xh-image-viewer-close-size, var(--xh-_action-profile-visual-size));
     --xh-icon-size: var(--xh-image-viewer-icon-size, var(--xh-_action-profile-glyph-size));
 
@@ -255,6 +305,80 @@
     inset-inline-end: max(var(--xh-space-6), env(safe-area-inset-left), env(safe-area-inset-right));
   }
 
+  /* liquid 档：data-material="liquid" 下控制层换成液态面，深色纱那一套只属于 standard 档。
+     液态面按下层（使用者的图片、遮罩）写墨色域，前景跟着墨色走，不再钉在浅字上。
+     工具条是不贴边的一维栏、计数是一行字的 chip，取 pill；翻页与关闭是媒体控制钮，取 circle */
+  :where([data-material='liquid']) [data-scope='image-viewer'][data-part='toolbar'][data-xh-liquid],
+  :where([data-material='liquid']) [data-scope='image-viewer'][data-part='counter'][data-xh-liquid] {
+    border: var(--xh-stroke-thin) solid var(--xh-material-liquid-border);
+    background: var(--xh-image-viewer-chrome-bg, var(--xh-_liquid-bg));
+    color: var(--xh-material-liquid-fg);
+    box-shadow: var(--xh-_liquid-shadow);
+    -webkit-backdrop-filter: var(--xh-material-liquid-backdrop);
+    backdrop-filter: var(--xh-material-liquid-backdrop);
+    /* 换到深浅不同的图上时色调翻转：底色、字色、细线与投影一起淡变 */
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  :where([data-material='liquid']) [data-scope='image-viewer'][data-part='toolbar'][data-xh-liquid] {
+    border-radius: var(--xh-image-viewer-toolbar-radius-outer, var(--xh-image-viewer-overlay-radius, var(--xh-shape-pill)));
+  }
+
+  :where([data-material='liquid']) [data-scope='image-viewer'][data-part='counter'][data-xh-liquid] {
+    border-radius: var(--xh-image-viewer-counter-radius, var(--xh-image-viewer-overlay-radius, var(--xh-shape-pill)));
+  }
+
+  /* 工具条里的钮：悬停 / 按下取墨色淡底阶梯，工具条这块液态面就是它们的墨色域 */
+  :where([data-material='liquid']) [data-scope='image-viewer'][data-part='toolbar'][data-xh-liquid] > [data-part] {
+    --xh-action-bg-hover: var(--xh-image-viewer-action-bg-hover, var(--xh-bg-subtle));
+    --xh-action-bg-pressed: var(--xh-image-viewer-action-bg-active, var(--xh-bg-subtle-hover));
+  }
+
+  :where([data-material='liquid']) [data-scope='image-viewer'][data-part='prev-trigger'][data-xh-liquid],
+  :where([data-material='liquid']) [data-scope='image-viewer'][data-part='next-trigger'][data-xh-liquid],
+  :where([data-material='liquid']) [data-scope='image-viewer'][data-part='close-trigger'][data-xh-liquid] {
+    --xh-action-bg-rest: var(--xh-image-viewer-chrome-bg, var(--xh-_liquid-bg));
+    --xh-action-bg-hover: var(--xh-image-viewer-action-bg-hover, var(--xh-_liquid-bg-hover));
+    --xh-action-bg-pressed: var(--xh-image-viewer-action-bg-active, var(--xh-_liquid-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-image-viewer-chrome-bg, var(--xh-material-liquid-focus-surface));
+    --xh-action-bg-disabled: var(--xh-image-viewer-chrome-bg, var(--xh-_liquid-bg));
+    --xh-action-fg-rest: var(--xh-material-liquid-fg);
+    --xh-action-fg-hover: var(--xh-material-liquid-fg);
+    --xh-action-fg-pressed: var(--xh-material-liquid-fg);
+    --xh-action-fg-focus-visible: var(--xh-material-liquid-fg);
+    --xh-action-border-rest: var(--xh-material-liquid-border);
+    --xh-action-border-hover: var(--xh-material-liquid-border);
+    --xh-action-border-pressed: var(--xh-material-liquid-border);
+    --xh-action-border-focus-visible: var(--xh-material-liquid-border);
+    --xh-action-border-disabled: var(--xh-material-liquid-border);
+    --xh-action-fg-disabled: var(--xh-fg-disabled);
+    --xh-action-shadow-rest: var(--xh-_liquid-shadow);
+    --xh-action-shadow-hover: var(--xh-_liquid-shadow);
+    --xh-action-shadow-pressed: var(--xh-_liquid-shadow);
+    --xh-action-shadow-focus-visible: var(--xh-_liquid-shadow);
+    --xh-action-shadow-disabled: var(--xh-_liquid-shadow);
+
+    color: var(--xh-material-liquid-fg);
+    -webkit-backdrop-filter: var(--xh-material-liquid-backdrop);
+    backdrop-filter: var(--xh-material-liquid-backdrop);
+    transform: var(--xh-_liquid-deform);
+  }
+
+  /* 叉的前景仍认使用者的那支槽；圆钮取 circle */
+  :where([data-material='liquid']) [data-scope='image-viewer'][data-part='close-trigger'][data-xh-liquid] {
+    --xh-action-fg-rest: var(--xh-image-viewer-close-fg, var(--xh-material-liquid-fg));
+    --xh-action-fg-hover: var(--xh-image-viewer-close-fg, var(--xh-material-liquid-fg));
+    --xh-action-fg-pressed: var(--xh-image-viewer-close-fg, var(--xh-material-liquid-fg));
+    --xh-action-fg-focus-visible: var(--xh-image-viewer-close-fg, var(--xh-material-liquid-fg));
+    --xh-action-bg-hover: var(--xh-image-viewer-close-bg-hover, var(--xh-_liquid-bg-hover));
+    --xh-action-bg-pressed: var(--xh-image-viewer-close-bg-active, var(--xh-_liquid-bg-pressed));
+    --xh-action-radius: var(--xh-image-viewer-close-radius, var(--xh-shape-circle));
+  }
+
   /* 三颗钮的面是一层深色纱，纱底下是使用者的图片，环色算不出稳定的取值。
      content 把前景钉死在浅字上、三颗钮的前景随它继承，环取 currentColor 即是那支浅字，
      不随图片内容也不随主题翻 */
@@ -268,10 +392,6 @@
     display: none;
   }
 
-  [data-scope='image-viewer'] button[data-part]:disabled {
-    opacity: var(--xh-state-disabled-opacity);
-  }
-
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
   [data-scope='image-viewer'][data-part='zoom-in-trigger']:empty::before {
     content: '';
@@ -390,4 +510,29 @@
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       落在 Canvas 面上的取 CanvasText；
+       禁用取 GrayText */
+    [data-scope='image-viewer'][data-part='viewport'][data-error]::after {
+      forced-color-adjust: none;
+      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 {
+      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 {
+      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 {
+      background-color: GrayText;
+    }
+  }
 }

package/css/image.css

@@ -42,18 +42,30 @@
     animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
-  /* 铺满图位的占位层：加载期间占住画面，作者往里放骨架屏或模糊小图 */
+  /* 占位层还在（正淡出）时图片不再自己淡入：它在占位层底下直接落位，由占位层的淡出揭开，
+     模糊小图与图片交叉，不先透出一拍底色 */
+  [data-scope='image'][data-part='root']:has(> [data-part='placeholder']:not([hidden])) > [data-part='image'] {
+    animation: none;
+  }
+
+  /* 铺满图位的占位层：加载期间占住画面，作者往里放骨架屏或模糊小图。它叠在图位自己的淡底上，
+     取不透明档，不与底下那层叠深 */
   [data-scope='image'][data-part='placeholder'] {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--xh-image-placeholder-bg, var(--xh-bg-subtle-hover));
+    background: var(--xh-image-placeholder-bg, var(--xh-bg-subtle-hover-opaque));
     color: var(--xh-image-placeholder-fg, var(--xh-fg-subtle));
   }
 
-  /* display 会盖掉 hidden 属性的 UA 规则：图片落位与失败后都靠这条收起 */
+  /* 图片落位或失败：占位层原地淡出（它盖在图位之上），播完连接层才写 hidden */
+  [data-scope='image'][data-part='placeholder']:is([data-state='loaded'], [data-state='error']) {
+    animation: xh-fade-out var(--xh-motion-duration-enter) var(--xh-motion-ease-enter) forwards;
+  }
+
+  /* display 会盖掉 hidden 属性的 UA 规则：淡出播完之后靠这条收起 */
   [data-scope='image'][data-part='placeholder'][hidden] {
     display: none;
   }
@@ -72,7 +84,14 @@
     user-select: none;
   }
 
-  /* display 会盖掉 hidden 属性的 UA 规则：延迟窗口内与加载完成后都靠这条收起 */
+  /* 图片载好：回退内容浮到图片之上原地淡出，与图片的淡入交叉；播完连接层才写 hidden */
+  [data-scope='image'][data-part='fallback'][data-state='loaded'] {
+    position: absolute;
+    inset: 0;
+    animation: xh-fade-out var(--xh-motion-duration-enter) var(--xh-motion-ease-enter) forwards;
+  }
+
+  /* display 会盖掉 hidden 属性的 UA 规则：延迟窗口内与淡出播完之后靠这条收起 */
   [data-scope='image'][data-part='fallback'][hidden] {
     display: none;
   }

package/css/input-group.css

@@ -33,6 +33,8 @@
     display: inline-flex;
     box-sizing: border-box;
     align-items: stretch;
+    /* 整组是一个字段：不传尺寸时与单个字段同宽，组里的字段让位占满前后缀之外的那段 */
+    inline-size: var(--xh-input-group-w, var(--xh-control-w));
     border-radius: var(--xh-input-group-radius, var(--xh-shape-control));
     background: var(--xh-input-group-bg, var(--xh-_input-group-bg));
     box-shadow: var(--xh-input-group-shadow, var(--xh-_input-group-shadow));
@@ -40,7 +42,7 @@
     /* 父容器给不出这么宽时整组跟着收，不越出父容器 */
     max-inline-size: 100%;
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -175,6 +177,14 @@
     box-shadow: none;
   }
 
+  /* 组里的字段（带字段外壳的控件）占满前后缀与动作之外的剩余宽度，自己的缺省宽让位；
+     前后缀、按钮这些段按内容宽，不跟着撑开 */
+  [data-scope='input-group'][data-part='root'] > :is([data-xh-field-chrome], :has([data-xh-field-chrome])) {
+    flex: 1 1 0%;
+    min-inline-size: 0;
+    inline-size: auto;
+  }
+
   /* 每一段都是定位元素，动作控件的悬停面可以浮到外轮廓之上。 */
   [data-scope='input-group'][data-part='root'] > * {
     position: relative;
@@ -239,18 +249,6 @@
     display: none;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='input-group'][data-part='root'],
-    [data-scope='input-group'][data-part='root']::before {
-      transition: none;
-    }
-  }
-
-  :where([data-motion='reduce']) [data-scope='input-group'][data-part='root'],
-  :where([data-motion='reduce']) [data-scope='input-group'][data-part='root']::before {
-    transition: none;
-  }
-
   @media (forced-colors: active) {
     [data-scope='input-group'][data-part='root'] {
       background: Canvas;