@xihan-ui/styles 3.1.0 → 4.0.0

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

@@ -44,7 +44,7 @@
 
   /* 占位层还在（正淡出）时图片不再自己淡入：它在占位层底下直接落位，由占位层的淡出揭开，
      模糊小图与图片交叉，不先透出一拍底色 */
-  [data-scope='image'][data-part='root']:has(> [data-part='placeholder']:not([hidden])) > [data-part='image'] {
+  [data-scope='image'][data-part='root']:has(> [data-part='placeholder']:not([hidden])) > [data-part='image']:where([data-scope='image']) {
     animation: none;
   }
 
@@ -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;

package/css/label.css

@@ -6,8 +6,8 @@
 /*
  * 字段族标签的公共层，按 [data-part='label'] 匹配下面逐个列出的 scope。
  *
- * 收在这里的是逐值相同的四条：行距取 --xh-leading-none，禁用档字色取 --xh-fg-subtle，
- * 必填星号取 --xh-glyph-mark-required + --xh-space-1 + --xh-fg-danger，无效档字色取 --xh-fg-danger。
+ * 收在这里的是逐值相同的四条：行距取 --xh-leading-none，禁用档字色留在 --xh-fg-muted，
+ * 必填星号取 --xh-glyph-mark-required + --xh-space-1 + --xh-fg-danger、排在标签文字之前，无效档字色取 --xh-fg-danger。
  * 字色、字号、字重三条留在各组件皮肤——它们挂着 --xh-<组件>-label-* 覆盖槽，
  * 槽名里带组件名，写不进一条共享规则。
  *
@@ -42,29 +42,45 @@
   }
 
   /*
-   * 禁用档的字色：公共层默认统一 --xh-fg-subtle。这四家没有 --xh-<组件>-label-fg-disabled 覆盖槽，
-   * 取值只有这一处；挂了那个槽的组件在各自皮肤里另写一条，排在本份之后，压过这里。
+   * 禁用档的字色：字段标签禁用不另变色，留在静息的 --xh-fg-muted。再淡一档的 --xh-fg-subtle 与它几乎分不出，
+   * --xh-fg-disabled 只有 2.66:1，读屏与无障碍扫描都把关联禁用控件的标签当正文判对比度；禁用由控件自己的
+   * 禁用面表出。这四家没有 --xh-<组件>-label-fg-disabled 覆盖槽，取值只有这一处；挂了那个槽的组件在各自皮肤里
+   * 另写一条，排在本份之后，压过这里。
    */
   [data-scope='color-picker'][data-part='label'][data-disabled],
   [data-scope='rating'][data-part='label'][data-disabled],
   [data-scope='signature-pad'][data-part='label'][data-disabled],
   [data-scope='slider'][data-part='label'][data-disabled] {
-    color: var(--xh-fg-subtle);
+    color: var(--xh-fg-muted);
   }
 
   /*
-   * 必填星号：跟着标签自己的 data-required 亮，选填不标。字形、间距、颜色是公共层规则，
-   * 自带标签的字段不得各画一套。
+   * 必填星号：跟着标签自己的 data-required 亮，选填不标。字形、字号、间距、颜色是公共层规则，
+   * 自带标签的字段不得各画一套。星号排在标签文字之前（一列标签的星号在同一条起始线上，扫读时先看到），
+   * 取说明字号——它是标记，不与标签文字抢层级。
    *
    * 接入 = connect 在标签部件投影 data-required + 把 scope 加进这张列表；控件本体不画。
    * 有 --xh-<组件>-label-star 覆盖槽的组件在各自皮肤里只另写一条 color 压过这里（field 的
-   * --xh-field-label-star、fieldset 的 --xh-fieldset-legend-star），content 与间距不再重写。
+   * --xh-field-label-star、fieldset 的 --xh-fieldset-legend-star），content、字号与间距不再重写。
+   *
+   * 星号排在文字之前，就进了经 aria-labelledby / for 算出的控件名开头，读屏先念一声「星号」。
+   * 必填已由控件上的 aria-required 表达，星号只给眼睛看：content 带一段空的替代文本，可及树里不念。
+   * 替代文本的写法晚于浏览器地板（Firefox 128 / Safari 17.4 起），而 content 里带 var() 不在解析期校验，
+   * 不认的引擎整条落空、星号跟着没了，同块写两条兜不住：块外留旧写法，新写法收进同一特性的 @supports 里
    */
-  [data-scope='field'][data-part='label'][data-required]::after,
-  [data-scope='fieldset'][data-part='legend'][data-required]::after {
+  [data-scope='field'][data-part='label'][data-required]::before,
+  [data-scope='fieldset'][data-part='legend'][data-required]::before {
     content: var(--xh-glyph-mark-required);
-    margin-inline-start: var(--xh-space-1);
+    margin-inline-end: var(--xh-space-1);
     color: var(--xh-fg-danger);
+    font-size: var(--xh-text-caption-size);
+  }
+
+  @supports (content: '' / '') {
+    [data-scope='field'][data-part='label'][data-required]::before,
+    [data-scope='fieldset'][data-part='legend'][data-required]::before {
+      content: var(--xh-glyph-mark-required) / '';
+    }
   }
 
   /*

package/css/layout.css

@@ -33,7 +33,7 @@
     --xh-_layout-sider-expanded-w: var(--xh-layout-sider-w, var(--xh-sider-w));
     --xh-_layout-sider-w: var(--xh-_layout-sider-expanded-w);
     --xh-_layout-sider-collapsed-w: var(--xh-layout-sider-collapsed-w, var(--xh-sider-collapsed-w));
-    --xh-_layout-header-h: var(--xh-layout-header-h, 3.5rem);
+    --xh-_layout-header-h: var(--xh-layout-header-h, var(--xh-app-header-h));
     /* 侧栏吸附时钉在哪条线上：缺省贴滚动容器上沿，头也吸顶时改成让开头的高度 */
     --xh-_layout-sider-offset: 0px;
   }
@@ -92,11 +92,8 @@
   }
 
   /* 宽度过渡在这里声明一次，展开与折叠两档、以及 props 直接写进内联的宽度，走的都是这一条。
-     占位档的侧栏是淡底承载面：把手摆进来时由它下发 hover 200 → pressed 300；
-     覆盖档换成 elevated 白底，那一档的规则把阶梯写回 100 → 200 */
+     侧栏与头同是白底承载面，坐在灰的页面底上：把手摆进来走白底阶梯 hover 100 → pressed 200 */
   [data-scope='layout'][data-part='sider'] {
-    --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
-    --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
     /* 内衬缺省一档，装了 SideNav 的侧栏在下面归零；覆盖档与安全区取大时读的也是这一支 */
     --xh-_layout-sider-padding: var(--xh-space-3);
 
@@ -104,7 +101,7 @@
     inline-size: var(--xh-_layout-sider-w);
     overflow: hidden;
     padding: var(--xh-layout-sider-padding, var(--xh-_layout-sider-padding));
-    background: var(--xh-layout-sider-bg, var(--xh-bg-subtle));
+    background: var(--xh-layout-sider-bg, var(--xh-bg-surface));
     transition: inline-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
@@ -160,6 +157,20 @@
   }
 
   /* —— 分隔线 —— */
+  /* 头与侧栏都是白底：头的下沿与侧栏挨着内容的那一边缺省画一条内部分隔，两块白面才分得开；
+     作者开了 split 再换成 border-default，并把内容与尾也隔开 */
+  [data-scope='layout'][data-part='header'] {
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-layout-border, var(--xh-border-subtle));
+  }
+
+  [data-scope='layout'][data-part='sider'][data-placement='start'] {
+    border-inline-end: var(--xh-stroke-thin) solid var(--xh-layout-border, var(--xh-border-subtle));
+  }
+
+  [data-scope='layout'][data-part='sider'][data-placement='end'] {
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-layout-border, var(--xh-border-subtle));
+  }
+
   /* 后代选择器带上 data-scope：骨架里装着整页内容，光凭 data-part 会连里面别的组件同名段一起画上线 */
   [data-scope='layout'][data-part='root'][data-split] [data-scope='layout'][data-part='header'] {
     border-block-end: var(--xh-stroke-thin) solid var(--xh-layout-border, var(--xh-border-default));
@@ -251,10 +262,6 @@
        减弱动效下归零。写成槽位而不是写死物理方向：贴边用的是逻辑 inset，RTL 下行首落在物理右边，
        位移若写死物理方向就会出现「贴在右边、却从左边滑进来」 */
     --xh-_layout-sheet-shift: calc(-1 * var(--xh-motion-travel));
-    /* 这一档的底是 elevated 白底：交互阶梯按承载面走，把上面占位档下发的 200 → 300 写回
-       白底的 hover 100 → pressed 200 */
-    --xh-action-host-bg-hover: var(--xh-bg-subtle);
-    --xh-action-host-bg-pressed: var(--xh-bg-subtle-hover);
 
     position: fixed;
     z-index: var(--xh-layout-sider-layer, var(--xh-layer-drawer));