@xihan-ui/styles 3.2.0 → 4.0.0

package/css/grid-list.css

@@ -74,7 +74,7 @@
     padding-inline: var(--xh-grid-list-label-px, var(--xh-control-px-md));
     color: var(--xh-grid-list-label-fg, var(--xh-fg-default));
     font-size: var(--xh-grid-list-label-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-grid-list-label-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-grid-list-label-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-normal);
   }
 

package/css/highlight.css

@@ -18,13 +18,13 @@
   }
 
   /* 浏览器给 mark 的默认底色是一个固定的亮黄，暗色主题下压在深底上刺眼、
-     配的黑字也不随主题走；这里整份换成随主题走的品牌淡底。
-     槽名带 mark 段与部件对上 */
+     配的黑字也不随主题走；这里换成随主题走的标记底（亮色浅黄、暗色深黄），字仍取正文色。
+     不用品牌淡底：那一支专属选中 / 当前。槽名带 mark 段与部件对上 */
   [data-scope='highlight'][data-part='mark'] {
     padding-inline: var(--xh-highlight-mark-px, var(--xh-space-0_5));
     border-radius: var(--xh-highlight-mark-radius, var(--xh-shape-inset));
-    background: var(--xh-highlight-mark-bg, var(--xh-bg-brand-subtle));
-    color: var(--xh-highlight-mark-fg, var(--xh-fg-brand-strong));
+    background: var(--xh-highlight-mark-bg, var(--xh-bg-mark));
+    color: var(--xh-highlight-mark-fg, var(--xh-fg-default));
     font-weight: var(--xh-highlight-mark-font-weight, var(--xh-font-weight-medium));
     /* 命中片段跨行时两半各自收边，否则圆角与内边距只画在整段的首尾。
        两条都写：WebKit 只认带前缀那条 */

package/css/hover-card.css

@@ -124,15 +124,18 @@
     --xh-frosted-shadow: var(--xh-hover-card-shadow, var(--xh-_material-shadow));
     --xh-frosted-backdrop: var(--xh-hover-card-backdrop, var(--xh-_material-backdrop));
 
-    /* 尺寸档只换这两个私有槽。size 落在 content 上而非 root：root 是可选部件，
-       面板几何也长在 content 上。语气不接：卡片是内容容器，语气该由里面的内容表达 */
-    --xh-_hover-card-pad: var(--xh-surface-pad-md);
+    /* 尺寸档只换这三个私有槽。size 落在 content 上而非 root：root 是可选部件，
+       面板几何也长在 content 上。横向内衬比纵向高一档（缺省纵 12 横 16），与 popover 同一套。
+       语气不接：卡片是内容容器，语气该由里面的内容表达 */
+    --xh-_hover-card-py: var(--xh-surface-pad-md);
+    --xh-_hover-card-px: var(--xh-surface-pad-lg);
     --xh-_hover-card-max-w: var(--xh-overlay-max-w);
 
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--xh-hover-card-gap, var(--xh-space-2));
+    /* 标题与正文贴着排：两行之间只留 4px */
+    gap: var(--xh-hover-card-gap, var(--xh-space-1));
     inline-size: max-content;
     /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的内容就点不到了 */
     max-inline-size: min(var(--xh-hover-card-max-w, var(--xh-_hover-card-max-w)), var(--xh-_hover-card-available-w));
@@ -141,8 +144,8 @@
     overflow-y: auto;
     /* 浮在页面之上的 Overlay 滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    padding-block: var(--xh-hover-card-py, var(--xh-_hover-card-pad));
-    padding-inline: var(--xh-hover-card-px, var(--xh-_hover-card-pad));
+    padding-block: var(--xh-hover-card-py, var(--xh-_hover-card-py));
+    padding-inline: var(--xh-hover-card-px, var(--xh-_hover-card-px));
     border-radius: var(--xh-hover-card-radius, var(--xh-shape-overlay));
     pointer-events: auto;
     /* 进退场的缩放锚在贴着锚点的那条边上；两个分量由 positioner 按 placement 写进私有槽 */
@@ -172,28 +175,32 @@
   }
 
   /* —— 尺寸 —— */
-  /* 缺省档写在 content 的基础规则里；四边等宽的面板内衬三档取 surface-pad 那把尺 */
+  /* 缺省档写在 content 的基础规则里；内衬三档取 surface-pad 那把尺，横向始终比纵向高一档 */
   [data-scope='hover-card'][data-part='content'][data-size='sm'] {
-    --xh-_hover-card-pad: var(--xh-surface-pad-sm);
+    --xh-_hover-card-py: var(--xh-surface-pad-sm);
+    --xh-_hover-card-px: var(--xh-surface-pad-md);
     --xh-_hover-card-max-w: var(--xh-overlay-max-w-sm);
   }
 
   [data-scope='hover-card'][data-part='content'][data-size='lg'] {
-    --xh-_hover-card-pad: var(--xh-surface-pad-lg);
+    --xh-_hover-card-py: var(--xh-surface-pad-lg);
+    --xh-_hover-card-px: var(--xh-surface-pad-xl);
     --xh-_hover-card-max-w: var(--xh-overlay-max-w-lg);
   }
 
+  /* 气泡标题：14px / medium / 正文色 */
   [data-scope='hover-card'][data-part='title'] {
     margin: 0;
     font-size: var(--xh-hover-card-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-hover-card-title-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-hover-card-title-font-weight, var(--xh-font-weight-medium));
     color: var(--xh-hover-card-title-fg, var(--xh-fg-default));
   }
 
-  /* 说明文字走说明档：13px + fg-muted */
+  /* 说明就是卡片的正文：14px 正文字号 + fg-muted 次级色 */
   [data-scope='hover-card'][data-part='description'] {
     margin: 0;
-    font-size: var(--xh-hover-card-description-font-size, var(--xh-text-secondary-size));
+    font-size: var(--xh-hover-card-description-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-normal);
     color: var(--xh-hover-card-description-fg, var(--xh-fg-muted));
   }
 

package/css/image-viewer.css

@@ -21,8 +21,8 @@
     position: fixed;
     inset: 0;
     z-index: var(--xh-image-viewer-backdrop-layer, var(--xh-_layer, var(--xh-layer-modal)));
-    /* 看片要压住页面底色，遮罩比普通对话框更深 */
-    background: var(--xh-image-viewer-backdrop-bg, color-mix(in oklab, var(--xh-color-neutral-950) 78%, transparent));
+    /* 与对话框同一层全局遮罩：看片台的深浅由遮罩令牌统一定 */
+    background: var(--xh-image-viewer-backdrop-bg, var(--xh-bg-overlay));
   }
 
   /* 同一层底色之上再糊背后的页面 */
@@ -45,6 +45,12 @@
   }
 
   [data-scope='image-viewer'][data-part='positioner'] {
+    /* 工具条是页面主题的实体面，看片层（content）却整层是白墨域：页面主题下的面色、描边与字色
+       在域外的这一层取一次，交给工具条 */
+    --xh-_image-viewer-page-surface: var(--xh-bg-surface);
+    --xh-_image-viewer-page-border: var(--xh-border-default);
+    --xh-_image-viewer-page-fg: var(--xh-fg-muted);
+
     position: fixed;
     inset: 0;
     z-index: var(--xh-image-viewer-layer, var(--xh-_layer, var(--xh-layer-modal)));
@@ -60,10 +66,11 @@
 
     /* 作者塞进浮层的图标：内容层给一档 md 的尺，十颗钮各自再按 Action Control 档位覆盖 */
     --xh-icon-size: var(--xh-image-viewer-icon-size, var(--xh-glyph-size-md));
-    /* 十颗钮共用的深色 chrome：压在使用者的图片上的半透明深底，是这一层自己的面，不取页面语义面 */
-    --xh-_image-viewer-chrome-bg: var(--xh-image-viewer-chrome-bg, color-mix(in oklab, var(--xh-color-neutral-950) 55%, transparent));
-    --xh-_image-viewer-chrome-bg-hover: var(--xh-image-viewer-action-bg-hover, color-mix(in oklab, var(--xh-color-neutral-950) 70%, transparent));
-    --xh-_image-viewer-chrome-bg-active: var(--xh-image-viewer-action-bg-active, color-mix(in oklab, var(--xh-color-neutral-950) 80%, transparent));
+    /* 翻页钮、关闭钮与计数共用的深色 chrome：压在使用者的图片上的半透明深底，取画面控件面那组令牌，
+       不取页面语义面。白面压在亮图上分不出来（白 30% 的面压亮图不到 1.4:1），这几件留在深纱上 */
+    --xh-_image-viewer-chrome-bg: var(--xh-image-viewer-chrome-bg, var(--xh-bg-media-chrome));
+    --xh-_image-viewer-chrome-bg-hover: var(--xh-image-viewer-action-bg-hover, var(--xh-bg-media-chrome-hover));
+    --xh-_image-viewer-chrome-bg-active: var(--xh-image-viewer-action-bg-active, var(--xh-bg-media-chrome-active));
 
     position: relative;
     inline-size: 100%;
@@ -73,7 +80,7 @@
     justify-content: center;
     outline: none;
     /* 深色底上的工具条与计数固定用浅字，不随主题翻 */
-    color: var(--xh-image-viewer-fg, var(--xh-color-neutral-0));
+    color: var(--xh-image-viewer-fg, var(--xh-fg-on-media-chrome));
   }
 
   /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
@@ -169,7 +176,7 @@
     will-change: translate;
   }
 
-  /* —— 悬浮件共用：半透明深底加浅字 ——
+  /* —— 悬浮件 ——
      四件都钉在铺满视口的那一层的边上，贴边一律与安全区取大的一头：刘海、圆角与
      底部横条压住的那一段由系统给出，贴边比它窄时钮会被切掉一角；桌面上 env() 恒为 0。
      安全区只有物理方向的四个名字，行内轴上两侧同取较宽的那一段，RTL 下不会翻错边。
@@ -179,20 +186,33 @@
   [data-scope='image-viewer'][data-part='counter'] {
     position: absolute;
     z-index: 1;
+  }
+
+  /* 计数：一行浅字压在深纱上 */
+  [data-scope='image-viewer'][data-part='counter'] {
     background: var(--xh-_image-viewer-chrome-bg);
     color: inherit;
     border: none;
   }
 
+  /* 工具条：页面主题的实体面（亮色白面、暗色深面）+ 1px 描边。面色在看片层的白墨域之外取
+     （定位层捕获的页面取值），连接层在它身上打 data-xh-ink-surface：七颗钮与作者放进来的内容
+     按这块底自成墨色域，字色、悬停阶梯与焦点环都随面的深浅走，不再钉在浅字上。
+     强制色下面被换成 Canvas、与遮罩同色，边界只剩这圈描边 */
   [data-scope='image-viewer'][data-part='toolbar'] {
+    --xh-ink-surface: var(--xh-image-viewer-toolbar-bg, var(--xh-_image-viewer-page-surface));
+
     inset-block-end: max(var(--xh-space-6), env(safe-area-inset-bottom));
     inset-inline-start: 50%;
     translate: -50% 0;
     display: flex;
     align-items: center;
     gap: var(--xh-image-viewer-toolbar-gap, var(--xh-space-1));
-    padding: var(--xh-image-viewer-toolbar-padding, var(--xh-space-1_5) var(--xh-space-3));
+    padding: var(--xh-image-viewer-toolbar-padding, var(--xh-space-1_5) var(--xh-space-4));
+    border: var(--xh-stroke-thin) solid var(--xh-_image-viewer-page-border);
     border-radius: var(--xh-image-viewer-toolbar-radius-outer, var(--xh-image-viewer-overlay-radius, var(--xh-shape-surface)));
+    background: var(--xh-image-viewer-toolbar-bg, var(--xh-_image-viewer-page-surface));
+    color: var(--xh-_image-viewer-page-fg);
   }
 
   /* 起点是逻辑属性、平移是物理通道：rtl 下行内分量掉头，工具条与计数才落回中线 */
@@ -200,20 +220,23 @@
     translate: 50% 0;
   }
 
-  /* 工具条里的七颗钮：接 Action Control icon 档 xs（24px 视觉盒），底色交给工具条，本体只管命中区与按压。
-     悬停 / 按下的底从 chrome 那层深底派生，不取页面的 --xh-bg-subtle-* 阶梯。
+  /* 工具条里的七颗钮：接 Action Control icon 档 xs（字形 16px），视觉盒放大到 box md（36px），
+     底色交给工具条，本体只管命中区与按压。钮是工具条这块面上的墨色域：悬停 / 按下走白底阶梯
+     （100 → 200），字取次要字色，都按工具条的底色求值。
      position 交给配方的 relative：粗指针下 44px 命中区 ::after 以钮自身为包含块；
      这里若写 static，七块命中区会一起以工具条为包含块、彼此盖住，触屏上只剩最后一颗可点 */
   [data-scope='image-viewer'][data-part='toolbar'] > [data-part] {
+    --xh-action-visual-size: var(--xh-control-box-md);
+    --xh-action-min-inline-size: var(--xh-control-box-md);
     --xh-action-bg-rest: transparent;
-    --xh-action-bg-hover: var(--xh-_image-viewer-chrome-bg-hover);
-    --xh-action-bg-pressed: var(--xh-_image-viewer-chrome-bg-active);
+    --xh-action-bg-hover: var(--xh-bg-subtle);
+    --xh-action-bg-pressed: var(--xh-bg-subtle-hover);
     --xh-action-bg-focus-visible: transparent;
     --xh-action-bg-disabled: transparent;
-    --xh-action-fg-rest: currentColor;
-    --xh-action-fg-hover: currentColor;
-    --xh-action-fg-pressed: currentColor;
-    --xh-action-fg-focus-visible: currentColor;
+    --xh-action-fg-rest: var(--xh-fg-muted);
+    --xh-action-fg-hover: var(--xh-fg-muted);
+    --xh-action-fg-pressed: var(--xh-fg-muted);
+    --xh-action-fg-focus-visible: var(--xh-fg-muted);
     --xh-action-fg-disabled: var(--xh-fg-disabled);
     --xh-action-border-rest: transparent;
     --xh-action-border-hover: transparent;
@@ -237,7 +260,23 @@
     translate: 50% 0;
   }
 
-  /* 两颗翻页钮：浮在图上的单图标圆钮，接 Action Control floating 档 md（48px，正方盒取 circle）。
+  /* 翻页与关闭钮的尺：看片台上的媒体控制钮与同档控件等高（control-h，md 32px），字形比控件内
+     图标低一档（sm / md 16px、lg 20px），不压画面。三颗钮与组件同档 */
+  [data-scope='image-viewer']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger']) {
+    --xh-_image-viewer-nav-size: var(--xh-control-h-md);
+    --xh-_image-viewer-nav-glyph: var(--xh-glyph-size-sm);
+  }
+
+  [data-scope='image-viewer']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger'])[data-xh-action-size='sm'] {
+    --xh-_image-viewer-nav-size: var(--xh-control-h-sm);
+  }
+
+  [data-scope='image-viewer']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger'])[data-xh-action-size='lg'] {
+    --xh-_image-viewer-nav-size: var(--xh-control-h-lg);
+    --xh-_image-viewer-nav-glyph: var(--xh-glyph-size-md);
+  }
+
+  /* 两颗翻页钮：浮在图上的单图标圆钮，接 Action Control floating 档（正方盒取 circle），视觉盒改走上面的尺。
      面桥接到自家深色 chrome：跟的是图上那层半透明深底不是页面底色，所以不取 frosted 缺省面，
      也不取语义档的 --xh-bg-subtle-*；到头时是原生 disabled，压不动的东西不给回应 */
   [data-scope='image-viewer'][data-part='prev-trigger'],
@@ -258,26 +297,28 @@
     --xh-action-border-focus-visible: transparent;
     --xh-action-border-disabled: transparent;
     --xh-action-radius: var(--xh-image-viewer-overlay-radius, var(--xh-_action-profile-radius));
-    --xh-icon-size: var(--xh-image-viewer-icon-size, var(--xh-_action-profile-glyph-size));
+    --xh-action-visual-size: var(--xh-image-viewer-nav-size, var(--xh-_image-viewer-nav-size));
+    --xh-action-min-inline-size: var(--xh-image-viewer-nav-size, var(--xh-_image-viewer-nav-size));
+    --xh-icon-size: var(--xh-image-viewer-icon-size, var(--xh-_image-viewer-nav-glyph));
 
     position: absolute;
     z-index: 1;
   }
 
   [data-scope='image-viewer'][data-part='prev-trigger'] {
-    inset-inline-start: max(var(--xh-space-6), env(safe-area-inset-left), env(safe-area-inset-right));
+    inset-inline-start: max(var(--xh-space-5), env(safe-area-inset-left), env(safe-area-inset-right));
     inset-block-start: 50%;
     translate: 0 -50%;
   }
 
   [data-scope='image-viewer'][data-part='next-trigger'] {
-    inset-inline-end: max(var(--xh-space-6), env(safe-area-inset-left), env(safe-area-inset-right));
+    inset-inline-end: max(var(--xh-space-5), env(safe-area-inset-left), env(safe-area-inset-right));
     inset-block-start: 50%;
     translate: 0 -50%;
   }
 
-  /* 右上角的关闭钮：悬浮在媒体上的单图标动作，与翻页钮同走 Action Control floating 档（sm = 40px、圆形）；
-     面与翻页钮同一层深色 chrome */
+  /* 右上角的关闭钮：悬浮在媒体上的单图标动作，与翻页钮同走 Action Control floating 档、同一把尺（圆形）；
+     面与翻页钮同一层深色 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));
@@ -296,13 +337,14 @@
     --xh-action-border-focus-visible: transparent;
     --xh-action-border-disabled: transparent;
     --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));
+    --xh-action-visual-size: var(--xh-image-viewer-close-size, var(--xh-_image-viewer-nav-size));
+    --xh-action-min-inline-size: var(--xh-image-viewer-close-size, var(--xh-_image-viewer-nav-size));
+    --xh-icon-size: var(--xh-image-viewer-icon-size, var(--xh-_image-viewer-nav-glyph));
 
     position: absolute;
     z-index: 1;
-    inset-block-start: max(var(--xh-space-6), env(safe-area-inset-top));
-    inset-inline-end: max(var(--xh-space-6), env(safe-area-inset-left), env(safe-area-inset-right));
+    inset-block-start: max(var(--xh-space-8), env(safe-area-inset-top));
+    inset-inline-end: max(var(--xh-space-8), env(safe-area-inset-left), env(safe-area-inset-right));
   }
 
   /* liquid 档：data-material="liquid" 下控制层换成液态面，深色纱那一套只属于 standard 档。
@@ -324,7 +366,11 @@
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
+  /* 液态工具条自己就是墨色域（按下层写 data-xh-ink）：钮不再按页面面色另取墨色，
+     撤掉 ink-surface，钮里的墨色随这块液态面的域走 */
   :where([data-material='liquid']) [data-scope='image-viewer'][data-part='toolbar'][data-xh-liquid] {
+    --xh-ink-surface: initial;
+
     border-radius: var(--xh-image-viewer-toolbar-radius-outer, var(--xh-image-viewer-overlay-radius, var(--xh-shape-pill)));
   }
 
@@ -336,6 +382,10 @@
   :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));
+    --xh-action-fg-rest: currentColor;
+    --xh-action-fg-hover: currentColor;
+    --xh-action-fg-pressed: currentColor;
+    --xh-action-fg-focus-visible: currentColor;
   }
 
   :where([data-material='liquid']) [data-scope='image-viewer'][data-part='prev-trigger'][data-xh-liquid],

package/css/image.css

@@ -56,7 +56,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--xh-image-placeholder-bg, var(--xh-bg-subtle-hover-opaque));
+    background: var(--xh-image-placeholder-bg, var(--xh-bg-subtle-opaque));
     color: var(--xh-image-placeholder-fg, var(--xh-fg-subtle));
   }
 
@@ -70,17 +70,25 @@
     display: none;
   }
 
+  /* 回退内容：图标在上、说明在下竖排居中。自带不透明淡底，说明字的对比只看这一层，
+     不透出页底（次要字色压在半透明淡底上透出页底时到不了 4.5:1） */
   [data-scope='image'][data-part='fallback'] {
+    box-sizing: border-box;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     inline-size: 100%;
     block-size: 100%;
     /* 没给 ratio 时根盒子高度是 auto，回退内容自己撑出一个不塌的高度 */
     min-block-size: var(--xh-image-fallback-min-h, var(--xh-control-h-lg));
-    color: var(--xh-image-fallback-fg, var(--xh-fg-muted));
-    font-size: var(--xh-image-fallback-font-size, var(--xh-text-secondary-size));
-    line-height: var(--xh-leading-none);
+    padding-block: var(--xh-image-fallback-py, var(--xh-space-2));
+    padding-inline: var(--xh-image-fallback-px, var(--xh-space-4));
+    background: var(--xh-image-fallback-bg, var(--xh-bg-subtle-opaque));
+    color: var(--xh-image-fallback-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-image-fallback-font-size, var(--xh-text-caption-size));
+    line-height: var(--xh-leading-relaxed);
+    text-align: center;
     user-select: none;
   }
 

package/css/infinite-scroll.css

@@ -40,8 +40,7 @@
    * 取下一页的按钮：与哨兵同一条通路的键盘入口，摆在列表末尾自成一行——铺满一行的独立动作条目，
    * 接 Action Control 的 row 档、outline 形态：宽度由容器给、高度随内容、按下只换面不缩放；
    * 盒几何、中性描边与透明底、悬停 / 按下 / 禁用面、焦点环与粗指针热区全由家族给，
-   * 白底承载 hover 100 → pressed 200。这里只把使用者槽映射到桥接槽，并把文案居中：
-   * 它是一行里唯一的东西，靠起始缘会像一条没对齐的列表项。
+   * 白底承载 hover 100 → pressed 200。这里只把使用者槽映射到桥接槽，文案居中写在下一条。
    * 行高不吃家族的单行档：row 档允许换行、高度随内容，折行的文案走正文行高
    */
   [data-scope='infinite-scroll'][data-part='load-more-trigger'] {
@@ -62,13 +61,18 @@
     /* 作者塞进钮里的图标按档取字形尺寸，与文案同一把尺 */
     --xh-icon-size: var(--xh-infinite-scroll-load-more-icon-size, var(--xh-_action-profile-glyph-size));
 
-    justify-content: center;
-    text-align: center;
     line-height: var(--xh-leading-normal);
     /* 到底了连点是常态，触屏上默认会当成双击缩放 */
     touch-action: manipulation;
   }
 
+  /* 文案居中（单行整段居中，折行逐行居中），盖掉 row 档的靠起始缘排布：它是一行里唯一的东西，
+     靠起始缘会像一条没对齐的列表项。选择器点名 row 档，有层与无层两份产物里都压得住它 */
+  [data-scope='infinite-scroll'][data-part='load-more-trigger'][data-xh-action-profile='row'] {
+    justify-content: center;
+    text-align: center;
+  }
+
   /* 声明过 display 就盖掉了 UA 的 [hidden]{display:none}，作者要藏哨兵时得自己补回来 */
   [data-scope='infinite-scroll'][data-part='sentinel'][hidden],
   [data-scope='infinite-scroll'][data-part='load-more-trigger'][hidden] {

package/css/input-group.css

@@ -21,11 +21,13 @@
     --xh-_input-group-h: var(--xh-control-h-md);
     --xh-_input-group-px: var(--xh-control-px-md);
     --xh-_input-group-font-size: var(--xh-control-font-md);
-    --xh-_input-group-bg: transparent;
-    --xh-_input-group-bg-hover: color-mix(in oklab, var(--xh-bg-subtle) 45%, transparent);
-    /* 组壳按字段外壳画 outline 描边：静息 --xh-border-control、悬停升 -hover、聚焦换 -focus，无影 */
+    /* 组壳与字段外壳同形：静息字段淡底 + --xh-border-control；悬停底不变、描边升 --xh-border-strong；
+       聚焦换承载面 + --xh-border-control-focus，不画聚焦环（强制色档补一圈 Highlight 环）；无影 */
+    --xh-_input-group-bg: var(--xh-bg-field);
+    --xh-_input-group-bg-hover: var(--xh-bg-field);
+    --xh-_input-group-bg-focus: var(--xh-bg-surface);
     --xh-_input-group-border: var(--xh-border-control);
-    --xh-_input-group-border-hover: var(--xh-border-control-hover);
+    --xh-_input-group-border-hover: var(--xh-border-strong);
     --xh-_input-group-border-focus: var(--xh-border-control-focus);
     --xh-_input-group-shadow: none;
 
@@ -36,7 +38,10 @@
     /* 整组是一个字段：不传尺寸时与单个字段同宽，组里的字段让位占满前后缀之外的那段 */
     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));
+    /* 面只在这一处画：各状态只换 --xh-_input-group-face 这一个槽，静息、悬停、失效、只读、禁用与聚焦
+       顺着同一条声明换色，过渡也只认这一处 */
+    --xh-_input-group-face: var(--xh-input-group-bg, var(--xh-_input-group-bg));
+    background: var(--xh-_input-group-face);
     box-shadow: var(--xh-input-group-shadow, var(--xh-_input-group-shadow));
 
     /* 父容器给不出这么宽时整组跟着收，不越出父容器 */
@@ -62,6 +67,7 @@
   [data-scope='input-group'][data-part='root'][data-variant='subtle'] {
     --xh-_input-group-bg: var(--xh-bg-subtle);
     --xh-_input-group-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-_input-group-bg-focus: var(--xh-bg-subtle);
     --xh-_input-group-border: transparent;
     --xh-_input-group-border-hover: var(--xh-border-control);
     --xh-_input-group-shadow: none;
@@ -70,34 +76,55 @@
   /* ghost：静息不画壳，悬停与聚焦沿用下面的 hover / focus 规则浮出 --xh-border-control 与底 */
   [data-scope='input-group'][data-part='root'][data-variant='ghost'] {
     --xh-_input-group-bg: transparent;
+    --xh-_input-group-bg-hover: color-mix(in oklab, var(--xh-bg-subtle) 45%, transparent);
+    --xh-_input-group-bg-focus: transparent;
     --xh-_input-group-border: transparent;
     --xh-_input-group-border-hover: var(--xh-border-control);
     --xh-_input-group-shadow: none;
   }
 
-  [data-scope='input-group'][data-part='root']:not(:has([data-disabled])):hover {
-    background: var(--xh-input-group-bg-hover, var(--xh-_input-group-bg-hover));
+  /* 悬停浮出描边与底：组里的字段只读、禁用或失效时不浮。只读与禁用和下面的禁用面一样只认带字段外壳的那一段，
+     组里单独禁用一颗按钮不让整组失去悬停 */
+  [data-scope='input-group'][data-part='root']:not(:has([data-xh-field-chrome]:is([data-disabled], [data-readonly]), [data-invalid], [aria-invalid='true'])):not(:focus-within):hover {
+    --xh-_input-group-face: var(--xh-input-group-bg-hover, var(--xh-_input-group-bg-hover));
   }
 
-  [data-scope='input-group'][data-part='root']:not(:has([data-disabled])):hover::before {
+  [data-scope='input-group'][data-part='root']:not(:has([data-xh-field-chrome]:is([data-disabled], [data-readonly]), [data-invalid], [aria-invalid='true'])):not(:focus-within):hover::before {
     border-color: var(--xh-input-group-border-hover, var(--xh-_input-group-border-hover));
   }
 
-  [data-scope='input-group'][data-part='root']:focus-within {
-    outline: var(--xh-ring-width) solid var(--xh-input-group-ring-focus, var(--xh-ring-focus));
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  [data-scope='input-group'][data-part='root']:focus-within::before {
-    border-color: var(--xh-input-group-border-focus, var(--xh-_input-group-border-focus));
+  /* 组里的字段校验失败：失效描边 + 4% 失效色淡底，与字段外壳的失效档同一副面 */
+  [data-scope='input-group'][data-part='root']:has([data-invalid], [aria-invalid='true']) {
+    --xh-_input-group-face: var(--xh-input-group-bg-invalid, var(--xh-bg-field-invalid));
   }
 
   [data-scope='input-group'][data-part='root']:has([data-invalid], [aria-invalid='true'])::before {
     border-color: var(--xh-input-group-border-invalid, var(--xh-border-invalid));
   }
 
-  [data-scope='input-group'][data-part='root']:has([data-invalid], [aria-invalid='true']):focus-within {
-    outline-color: var(--xh-input-group-ring-invalid, var(--xh-ring-invalid));
+  /* 组里的字段只读 / 禁用：组壳换淡底，禁用另把描边退到 --xh-border-default；
+     只认带字段外壳的那一段，组里单独禁用一颗按钮不让整组变灰。
+     只读用 :where() 压低特指度，拿到焦点时与字段外壳一样让位给聚焦态 */
+  [data-scope='input-group'][data-part='root']:has(:where([data-xh-field-chrome][data-readonly])) {
+    --xh-_input-group-face: var(--xh-input-group-bg-read-only, var(--xh-bg-subtle));
+  }
+
+  [data-scope='input-group'][data-part='root']:has([data-xh-field-chrome][data-disabled]) {
+    --xh-_input-group-face: var(--xh-input-group-bg-disabled, var(--xh-bg-subtle));
+  }
+
+  [data-scope='input-group'][data-part='root']:has([data-xh-field-chrome][data-disabled])::before {
+    border-color: var(--xh-input-group-border-disabled, var(--xh-border-default));
+  }
+
+  /* 聚焦排在失效之后：校验失败的字段拿到焦点时让位给聚焦态。
+     焦点由描边换色与承载面的底色差标出，不画聚焦环 */
+  [data-scope='input-group'][data-part='root']:focus-within {
+    --xh-_input-group-face: var(--xh-input-group-bg-focus, var(--xh-_input-group-bg-focus));
+  }
+
+  [data-scope='input-group'][data-part='root']:focus-within::before {
+    border-color: var(--xh-input-group-border-focus, var(--xh-_input-group-border-focus));
   }
 
   /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
@@ -162,7 +189,7 @@
     transition: none;
   }
 
-  /* 焦点环由组的外表面绘制，子输入保留焦点语义但不再重复画第二圈。 */
+  /* 聚焦换色由组的外表面承担（强制色档的系统色环也画在组壳上），子输入保留焦点语义但不再自己画一圈。 */
   [data-scope='input-group'][data-part='root'] [data-xh-field-chrome]:focus-within {
     outline: none;
   }
@@ -222,7 +249,8 @@
   }
 
   /* —— 前后缀块 —— */
-  /* 前后缀是输入表面里的静态内容，不单独绘制底色、描边或焦点状态。 */
+  /* 前后缀是输入表面里的静态内容：铺一层淡底与可输入的那一段分开、取正文色，两侧内距对称；
+     不单独绘制外框或焦点状态，外轮廓与聚焦换色归组壳 */
   [data-scope='input-group'][data-part='item'] {
     display: inline-flex;
     box-sizing: border-box;
@@ -230,25 +258,32 @@
     align-items: center;
     block-size: var(--xh-input-group-item-h, var(--xh-_input-group-h));
     padding-inline: var(--xh-input-group-item-px, var(--xh-_input-group-px));
-    color: var(--xh-input-group-item-fg, var(--xh-fg-muted));
+    background-color: var(--xh-input-group-item-bg, var(--xh-bg-subtle));
+    color: var(--xh-input-group-item-fg, var(--xh-fg-default));
     font-size: var(--xh-input-group-item-font-size, var(--xh-_input-group-font-size));
     line-height: var(--xh-leading-none);
     white-space: nowrap;
   }
 
-  /* 与输入控件相邻的一侧由控件自己的内距留白，避免前后缀之间出现双份间距。 */
-  [data-scope='input-group'][data-part='root'] > [data-scope='input-group'][data-part='item']:first-child {
-    padding-inline-end: 0;
+  /* 与相邻段之间一道满高的缺省描边，只画在朝里的那一侧，外侧交给组壳的外轮廓。
+     两块前后缀挨着时只由后一块画：半透明描边两道相叠会叠深 */
+  [data-scope='input-group'][data-part='root'] > [data-scope='input-group'][data-part='item']:not(:first-child) {
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-input-group-item-divider, var(--xh-border-default));
   }
 
-  [data-scope='input-group'][data-part='root'] > [data-scope='input-group'][data-part='item']:last-child {
-    padding-inline-start: 0;
+  [data-scope='input-group'][data-part='root'] > [data-scope='input-group'][data-part='item']:not(:last-child):not(:has(+ [data-scope='input-group'][data-part='item'])) {
+    border-inline-end: var(--xh-stroke-thin) solid var(--xh-input-group-item-divider, var(--xh-border-default));
   }
 
   [data-scope='input-group'][data-part='item'][hidden] {
     display: none;
   }
 
+  /* 组里的字段禁用：前后缀块的字随字段禁用面换 --xh-fg-disabled，与组壳的禁用面同一个判据 */
+  [data-scope='input-group'][data-part='root']:has([data-xh-field-chrome][data-disabled]) > [data-scope='input-group'][data-part='item'] {
+    color: var(--xh-fg-disabled);
+  }
+
   @media (forced-colors: active) {
     [data-scope='input-group'][data-part='root'] {
       background: Canvas;
@@ -259,8 +294,10 @@
       border-color: ButtonText;
     }
 
+    /* 常规档不画环、只换描边色；这一档里描边换色未必分得出来，补一圈系统色环 */
     [data-scope='input-group'][data-part='root']:focus-within {
-      outline-color: Highlight;
+      outline: var(--xh-ring-width) solid Highlight;
+      outline-offset: var(--xh-ring-offset);
     }
 
     [data-scope='input-group'][data-part='root']:focus-within::before,
@@ -268,8 +305,19 @@
       border-color: Highlight;
     }
 
+    [data-scope='input-group'][data-part='root']:has([data-xh-field-chrome][data-disabled])::before {
+      border-color: GrayText;
+    }
+
+    /* 淡底在这一档被抹成 Canvas，前后缀与输入段只剩分隔线分得开：线换系统色 */
     [data-scope='input-group'][data-part='item'] {
+      background-color: Canvas;
       color: CanvasText;
+      border-color: ButtonText;
+    }
+
+    [data-scope='input-group'][data-part='root']:has([data-xh-field-chrome][data-disabled]) > [data-scope='input-group'][data-part='item'] {
+      color: GrayText;
     }
   }
 }

package/css/kbd.css

@@ -27,7 +27,7 @@
     font-family: var(--xh-kbd-font, inherit);
     /* 快捷键是次级标注，字号取 caption 档 */
     font-size: var(--xh-kbd-font-size, var(--xh-text-caption-size));
-    font-weight: var(--xh-kbd-font-weight, var(--xh-font-weight-medium));
+    font-weight: var(--xh-kbd-font-weight, var(--xh-font-weight-regular));
     line-height: var(--xh-leading-none);
     text-align: center;
     text-decoration: none;