@xihan-ui/styles 3.1.0 → 4.0.0

package/css/description.css

@@ -7,9 +7,10 @@
  * 字段族说明与错误文案的公共层，按 [data-part='description'] / [data-part='error-text']
  * 匹配下面逐个列出的 scope。
  *
- * 收在这里的是逐值相同的角色规则：说明 = --xh-text-secondary-size / --xh-fg-muted /
- * --xh-leading-normal；错误文案 = --xh-text-secondary-size / --xh-fg-danger / --xh-leading-normal；
- * 两者外边距归零，与控件的距离由字段根的 gap 给。挂了 --xh-<组件>-description-* /
+ * 收在这里的是逐值相同的角色规则：说明 = --xh-text-caption-size / --xh-fg-subtle /
+ * --xh-leading-normal；错误文案 = --xh-text-caption-size / --xh-fg-danger / --xh-leading-normal；
+ * 两者外边距归零、紧贴控件（字段根的 gap 缺省为 0），最小高 --xh-space-5：这一行辅助行在表单里
+ * 就是字段之间的项距，有它的字段不再另留项距。挂了 --xh-<组件>-description-* /
  * --xh-<组件>-error-* 覆盖槽的组件在各自皮肤里只另写带槽的 color / font-size 压过这里，
  * margin 与 line-height 不再重写。
  *
@@ -30,9 +31,10 @@
   [data-scope='field'][data-part='description'],
   [data-scope='fieldset'][data-part='description'] {
     margin: 0;
-    font-size: var(--xh-text-secondary-size);
+    min-block-size: var(--xh-space-5);
+    font-size: var(--xh-text-caption-size);
     line-height: var(--xh-leading-normal);
-    color: var(--xh-fg-muted);
+    color: var(--xh-fg-subtle);
   }
 
   /* 错误文案出现时淡入。不 invalid 时节点带 hidden，但不交给浏览器的 [hidden] 规则收成 display: none：
@@ -43,7 +45,8 @@
   [data-scope='field'][data-part='error-text'],
   [data-scope='fieldset'][data-part='error-text'] {
     margin: 0;
-    font-size: var(--xh-text-secondary-size);
+    min-block-size: var(--xh-space-5);
+    font-size: var(--xh-text-caption-size);
     line-height: var(--xh-leading-normal);
     color: var(--xh-fg-danger);
     transition: opacity var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
@@ -54,6 +57,7 @@
     display: block;
     position: absolute;
     block-size: 0;
+    min-block-size: 0;
     overflow: clip;
     visibility: hidden;
     opacity: 0;

package/css/descriptions.css

@@ -14,12 +14,16 @@
   [data-scope='descriptions'][data-part='root'] {
     /* 一个尺寸档只换这几个私有槽，每一格与格内两段都从根上继承它们，
        换档不必给每个部件各写一条选择器 */
-    --xh-_descriptions-gap: var(--xh-space-3);
-    /* 标签是每一格的集合标题：叠着排时与取值隔 space-2（集合标题与集合的间距） */
+    /* 格与格之间行距窄、列距宽：一行里的几组左右分得开，上下读起来连成一列 */
+    --xh-_descriptions-row-gap: var(--xh-space-2);
+    --xh-_descriptions-column-gap: var(--xh-space-5);
+    /* 标签是每一格的集合标题：叠着排时与取值隔 space-2（集合标题与集合的间距）；标签在左时隔 20px */
     --xh-_descriptions-pair-gap: var(--xh-space-2);
-    --xh-_descriptions-label-gap: var(--xh-space-2);
-    --xh-_descriptions-py: var(--xh-space-2);
-    --xh-_descriptions-px: var(--xh-space-3);
+    --xh-_descriptions-label-gap: var(--xh-space-5);
+    /* 描边档的单元格：上下 6px、左右 20px，单行格高约 33px */
+    --xh-_descriptions-py: var(--xh-space-1_5);
+    --xh-_descriptions-px: var(--xh-space-5);
+    /* 字号三档同为正文字号：尺寸档只换间距与格内距，不换字 */
     --xh-_descriptions-font-size: var(--xh-control-font-md);
     /* 标签在左时那一列的宽度：收到最长的那个标签 */
     --xh-_descriptions-label-w: max-content;
@@ -27,7 +31,7 @@
     display: grid;
     /* 不写 columns 即每行一组；二到六列各有一条规则 */
     grid-template-columns: minmax(0, 1fr);
-    gap: var(--xh-descriptions-gap, var(--xh-_descriptions-gap));
+    gap: var(--xh-descriptions-gap, var(--xh-_descriptions-row-gap) var(--xh-_descriptions-column-gap));
     /* 根可能写成 dl，UA 的上下外边距在这里清掉 */
     margin: 0;
     color: var(--xh-descriptions-fg, var(--xh-fg-default));
@@ -63,19 +67,20 @@
 
   /* —— 尺寸 —— */
   [data-scope='descriptions'][data-part='root'][data-size='sm'] {
-    --xh-_descriptions-gap: var(--xh-space-2);
+    --xh-_descriptions-row-gap: var(--xh-space-1);
+    --xh-_descriptions-column-gap: var(--xh-space-4);
+    --xh-_descriptions-label-gap: var(--xh-space-4);
     --xh-_descriptions-py: var(--xh-space-1);
-    --xh-_descriptions-px: var(--xh-space-2);
-    --xh-_descriptions-font-size: var(--xh-control-font-sm);
+    --xh-_descriptions-px: var(--xh-space-4);
   }
 
   [data-scope='descriptions'][data-part='root'][data-size='lg'] {
-    --xh-_descriptions-gap: var(--xh-space-4);
+    --xh-_descriptions-row-gap: var(--xh-space-4);
+    --xh-_descriptions-column-gap: var(--xh-space-6);
     --xh-_descriptions-pair-gap: var(--xh-space-2);
-    --xh-_descriptions-label-gap: var(--xh-space-3);
-    --xh-_descriptions-py: var(--xh-space-3);
-    --xh-_descriptions-px: var(--xh-space-4);
-    --xh-_descriptions-font-size: var(--xh-control-font-lg);
+    --xh-_descriptions-label-gap: var(--xh-space-6);
+    --xh-_descriptions-py: var(--xh-space-2);
+    --xh-_descriptions-px: var(--xh-space-6);
   }
 
   /* —— 头部 ——
@@ -104,8 +109,8 @@
     min-inline-size: 0;
     margin: 0;
     color: var(--xh-descriptions-title-fg, var(--xh-fg-default));
-    font-size: var(--xh-descriptions-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-descriptions-title-font-weight, var(--xh-font-weight-semibold));
+    font-size: var(--xh-descriptions-title-font-size, var(--xh-text-heading-3-size));
+    font-weight: var(--xh-descriptions-title-font-weight, var(--xh-text-heading-3-weight));
     line-height: var(--xh-leading-relaxed);
   }
 
@@ -132,9 +137,10 @@
     gap: var(--xh-descriptions-pair-gap, var(--xh-_descriptions-pair-gap));
   }
 
+  /* 标签比取值重一档、颜色弱一档：扫读时先抓标签，读值时不被标签抢走 */
   [data-scope='descriptions'][data-part='label'] {
     color: var(--xh-descriptions-label-fg, var(--xh-fg-muted));
-    font-weight: var(--xh-descriptions-label-font-weight, var(--xh-text-label-weight));
+    font-weight: var(--xh-descriptions-label-font-weight, var(--xh-font-weight-medium));
   }
 
   [data-scope='descriptions'][data-part='value'] {
@@ -161,9 +167,9 @@
     > [data-scope='descriptions'][data-part='item'] {
     padding-block: var(--xh-descriptions-item-py, var(--xh-_descriptions-py));
     padding-inline: var(--xh-descriptions-item-px, var(--xh-_descriptions-px));
-    border-block-start: var(--xh-stroke-thin) solid var(--xh-descriptions-divider, var(--xh-border-subtle));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-descriptions-divider, var(--xh-border-default));
     /* 每行一组时左边没有邻居，宽度按列数补回来 */
-    border-inline-start: 0 solid var(--xh-descriptions-divider, var(--xh-border-subtle));
+    border-inline-start: 0 solid var(--xh-descriptions-divider, var(--xh-border-default));
   }
 
   [data-scope='descriptions'][data-part='root'][data-variant='outline']
@@ -195,6 +201,28 @@
       column-gap: var(--xh-descriptions-label-gap, var(--xh-_descriptions-label-gap));
     }
 
+    /* 描边档标签在左：标签单成一列淡底格，与取值之间一条竖线；内距从格上下放到标签与取值各自身上 */
+    [data-scope='descriptions'][data-part='root'][data-variant='outline'][data-placement='left']
+      > [data-scope='descriptions'][data-part='item'] {
+      align-items: stretch;
+      column-gap: 0;
+      padding: 0;
+    }
+
+    [data-scope='descriptions'][data-part='root'][data-variant='outline'][data-placement='left']
+      > [data-scope='descriptions'][data-part='item']
+      > :is([data-scope='descriptions'][data-part='label'], [data-scope='descriptions'][data-part='value']) {
+      padding-block: var(--xh-descriptions-item-py, var(--xh-_descriptions-py));
+      padding-inline: var(--xh-descriptions-item-px, var(--xh-_descriptions-px));
+    }
+
+    [data-scope='descriptions'][data-part='root'][data-variant='outline'][data-placement='left']
+      > [data-scope='descriptions'][data-part='item']
+      > [data-scope='descriptions'][data-part='label'] {
+      border-inline-end: var(--xh-stroke-thin) solid var(--xh-descriptions-divider, var(--xh-border-default));
+      background: var(--xh-descriptions-label-bg, var(--xh-bg-muted));
+    }
+
     /* 二列与三列在这一档按作者写的列数摆，作者写在格上的 span 从这一档起认 */
     [data-scope='descriptions'][data-part='root'][data-columns='2']
       > [data-scope='descriptions'][data-part='item'],

package/css/dialog.css

@@ -88,6 +88,18 @@
        选择器只认得它自己身上那一份 data-size。 */
     --xh-_dialog-max-w: var(--xh-overlay-sheet-w-md);
 
+    /* 头部带：标题首行与角上的关闭钮都落在这条带的中线上。分三段时它就是 header，
+       不分三段时它是面板顶上那一截——两种写法的标题行与叉落在同一处。
+       带的上沿就是面板内沿（安全区由 positioner 让出），与抽屉同一组槽，抽屉在这里补安全区 */
+    --xh-_dialog-header-top: var(--xh-space-0);
+    /* 关闭钮行向让出的安全区：对话框不贴屏幕边（安全区同样由 positioner 让出），与抽屉同一组槽，抽屉在这里补安全区 */
+    --xh-_dialog-safe-inline: var(--xh-space-0);
+    --xh-_dialog-header-h: var(--xh-overlay-header-h);
+    /* 标题首行在带里居中要让出的上内衬：带高减标题行高再对半 */
+    --xh-_dialog-header-pt: calc((var(--xh-_dialog-header-h) - var(--xh-text-heading-3-size) * var(--xh-leading-normal)) / 2);
+    /* 分三段时头的下内衬扣掉分隔线那 1px，只有标题时整条带恰好是带高 */
+    --xh-_dialog-header-pb: calc(var(--xh-_dialog-header-pt) - var(--xh-stroke-thin));
+
     /* positioner 不吃指针，面板自身恢复交互。 */
     pointer-events: auto;
 
@@ -97,26 +109,14 @@
     display: flex;
     flex-direction: column;
     gap: var(--xh-dialog-gap, var(--xh-stack-gap-md));
-    padding-block: var(--xh-dialog-py, var(--xh-surface-py-md));
-    padding-inline: var(--xh-dialog-px, var(--xh-surface-px-md));
+    /* 不分三段时内衬由面板一层给：上沿让标题行落在头部带中线，横向与三段同一档 */
+    padding-block-start: var(--xh-dialog-py, var(--xh-_dialog-header-pt));
+    padding-block-end: var(--xh-dialog-py, var(--xh-overlay-sheet-body-py));
+    padding-inline: var(--xh-dialog-px, var(--xh-overlay-sheet-px));
     border: var(--xh-stroke-thin) solid var(--xh-dialog-border, var(--xh-material-elevated-border));
     border-radius: var(--xh-dialog-radius, var(--xh-shape-overlay));
-    /* M4 是不透明的 sheet 实体面；顶部 lens 与正文同一实体面，作者可用 --xh-dialog-header-bg 单独换头部底色，
-       让标题保留空间感而不把长正文也放进透明区。两层都先留组件公开槽。 */
-    background:
-      linear-gradient(
-        to bottom,
-        var(--xh-dialog-highlight, var(--xh-material-elevated-highlight)) 0 var(--xh-stroke-thin),
-        transparent var(--xh-stroke-thin)
-      ),
-      linear-gradient(
-        to bottom,
-        var(--xh-dialog-content-lens-bg, var(--xh-dialog-header-bg, var(--xh-material-elevated-bg))),
-        var(
-          --xh-dialog-bg,
-          var(--xh-material-elevated-bg)
-        ) var(--xh-dialog-content-lens-depth, var(--xh-dialog-header-lens-depth, calc(var(--xh-dialog-py, var(--xh-surface-py-md)) + var(--xh-control-h-md))))
-      );
+    /* sheet 实体面：1px 描边 + 不透明底 + 单层投影，不叠渐变与顶光 */
+    background: var(--xh-dialog-bg, var(--xh-material-elevated-bg));
     color: var(--xh-dialog-fg, var(--xh-material-elevated-fg));
     box-shadow: var(--xh-dialog-shadow, var(--xh-material-elevated-shadow));
     -webkit-backdrop-filter: var(--xh-dialog-content-backdrop-filter, var(--xh-dialog-backdrop-filter, var(--xh-material-elevated-backdrop)));
@@ -222,12 +222,13 @@
   /* —— 面板三段 —— */
   /* header / body / footer 把面板切成「头尾定在原处、正文自己滚」三段，
      与抽屉、浮动面板同一套角色划分：头尾不参与压缩，正文吃掉剩下的高度并自己滚。
-     面板的内衬仍由 content 一层给出，三段只接手段与段之间那道缝——
-     内衬换成三段各留一份，安全区与局部容器两档就要在三处各算一遍。
+     分三段时内衬由三段各自给，面板一层归零：头下、尾上的分隔线才能贴着面板两侧的边。
+     安全区由 positioner 让出，面板自己不碰视口边，三段不用各算一遍。
      写了正文段的这一档同时封顶：不封顶正文永远没有可滚的余量，滚动条出不来。 */
   [data-scope='dialog'][data-part='content']:has([data-scope='dialog'][data-part='body']) {
     max-block-size: 100%;
     gap: 0;
+    padding: 0;
     overflow: hidden;
   }
 
@@ -240,9 +241,16 @@
     padding-block-end: var(--xh-dialog-header-pb, var(--xh-space-2));
   }
 
-  /* 三段结构出现时，分隔线走 M4 令牌；无 body / footer 的轻量对话框不会凭空多一条线。 */
+  /* 三段结构的头：一条 48px 的头部带，标题首行落在带的中线上（说明在下面接着排，带随之长高），
+     横向内衬 20px；下沿一条 1px 的内部分隔线走 sheet 分隔令牌，贴着面板两侧的边。
+     下内衬扣掉分隔线那 1px，只有标题时整条带恰好是带高。无 body 的轻量对话框不会凭空多一条线 */
   [data-scope='dialog'][data-part='content']:has([data-scope='dialog'][data-part='body'])
     [data-scope='dialog'][data-part='header'] {
+    justify-content: center;
+    min-block-size: var(--xh-_dialog-header-h);
+    padding-block-start: var(--xh-dialog-header-pt, var(--xh-_dialog-header-pt));
+    padding-block-end: var(--xh-dialog-header-pb, var(--xh-_dialog-header-pb));
+    padding-inline: var(--xh-dialog-header-px, var(--xh-overlay-sheet-px));
     border-block-end: var(--xh-stroke-thin) solid var(--xh-dialog-separator, var(--xh-material-elevated-separator));
   }
 
@@ -293,12 +301,15 @@
 
   /* 正文段：面板里唯一会滚的一段。最小高度归零，
      否则弹性项按内容撑高，容器再矮也不产生溢出，滚动条永远出不来。
-     模态 body 是原生细条滚动面：细条由 reset 层统一给，滚到头不把页面一起带走 */
+     模态 body 是原生细条滚动面：细条由 reset 层统一给，滚到头不把页面一起带走。
+     内衬纵 24 横 20 */
   [data-scope='dialog'][data-part='body'] {
     flex: 1 1 auto;
     min-block-size: 0;
     overflow: auto;
     overscroll-behavior: contain;
+    padding-block: var(--xh-dialog-body-py, var(--xh-overlay-sheet-body-py));
+    padding-inline: var(--xh-dialog-body-px, var(--xh-overlay-sheet-px));
   }
 
   /* 正文高度随交互变化（表单校验、展开段落）：还在用原生滚动条的正文留一条稳定空道，
@@ -322,6 +333,13 @@
     border-block-start: var(--xh-stroke-thin) solid var(--xh-dialog-separator, var(--xh-material-elevated-separator));
   }
 
+  /* 三段结构的尾：纵 16 横 20，上沿的分隔线随尾段铺满面板宽 */
+  [data-scope='dialog'][data-part='content']:has([data-scope='dialog'][data-part='body'])
+    [data-scope='dialog'][data-part='footer'] {
+    padding-block: var(--xh-dialog-footer-py, var(--xh-overlay-sheet-footer-py));
+    padding-inline: var(--xh-dialog-footer-px, var(--xh-overlay-sheet-px));
+  }
+
   /* 声明过 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
   [data-scope='dialog'][data-part='header'][hidden],
   [data-scope='dialog'][data-part='body'][hidden],
@@ -329,10 +347,12 @@
     display: none;
   }
 
+  /* 面板标题：页面级面板标题档、正文色；行高钉在 normal，头部带按它算标题行居中 */
   [data-scope='dialog'][data-part='title'] {
     margin: 0;
     font-size: var(--xh-dialog-title-font-size, var(--xh-text-heading-3-size));
     font-weight: var(--xh-dialog-title-font-weight, var(--xh-text-heading-3-weight));
+    line-height: var(--xh-leading-normal);
     color: var(--xh-dialog-title-fg, var(--xh-fg-default));
   }
 
@@ -347,15 +367,16 @@
      否则长标题会直接钻到按钮底下。只在真有关闭按钮时让位。 */
   [data-scope='dialog'][data-part='content']:has([data-scope='dialog'][data-part='close-trigger'])
     [data-scope='dialog'][data-part='title'] {
-    padding-inline-end: calc(var(--xh-dialog-close-size, var(--xh-control-h-sm)) + var(--xh-surface-action-inset));
+    padding-inline-end: calc(var(--xh-dialog-close-size, var(--xh-control-h-sm)) + var(--xh-space-4));
   }
 
   /*
-   * 关闭钮是面板角落的单图标钮：正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
+   * 关闭钮是面板角落的单图标钮：正方盒、sm 档几何、ghost 四态面、按压换底与粗指针命中区
    * 由家族配方给出——白面上走画布承载阶梯悬停 --xh-bg-subtle（100）→ 按下 --xh-bg-subtle-hover（200），
    * 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与摆放，
    * 聚焦档的 -bg-focus / -fg-focus 两槽同样桥到配方的 focus-visible 面，缺省仍是透明底与悬停字色；
    * 静息前景取 muted 字色，悬停 / 按下回到 fg-default。
+   * 叉取 12px（--xh-glyph-size-xs），比钮的随档字形低一档；钮距右 16px，竖向落在头部带的中线上。
    */
   [data-scope='dialog'][data-part='close-trigger'] {
     --xh-action-visual-size: var(--xh-dialog-close-size, var(--xh-_action-profile-visual-size));
@@ -367,12 +388,13 @@
     --xh-action-fg-hover: var(--xh-dialog-close-fg-hover, var(--xh-_action-variant-fg-hover));
     --xh-action-fg-pressed: var(--xh-dialog-close-fg-hover, var(--xh-_action-variant-fg-pressed));
     --xh-action-fg-focus-visible: var(--xh-dialog-close-fg-focus, var(--xh-dialog-close-fg-hover, var(--xh-_action-variant-fg-focus-visible)));
-    /* 作者塞进按钮的图标随档取字形尺（sm = 16px），与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-dialog-icon-size, var(--xh-_action-profile-glyph-size));
+    /* 作者塞进按钮的图标与皮肤画的兜底叉同一把尺 */
+    --xh-icon-size: var(--xh-dialog-icon-size, var(--xh-glyph-size-xs));
 
     position: absolute;
-    inset-block-start: var(--xh-surface-action-inset);
-    inset-inline-end: var(--xh-surface-action-inset);
+    /* 钮的视觉盒在头部带里竖向居中：按钮自己的边长从带高里扣掉再对半 */
+    inset-block-start: calc(var(--xh-_dialog-header-top) + (var(--xh-_dialog-header-h) - var(--xh-dialog-close-size, var(--xh-_action-profile-visual-size))) / 2);
+    inset-inline-end: calc(var(--xh-_dialog-safe-inline) + var(--xh-space-4));
   }
 
   [data-scope='dialog'][data-part='close-trigger'][hidden] {
@@ -412,13 +434,6 @@
     }
   }
 
-  @media (forced-colors: active) {
-    /* 强制色会接管渐变；改回同名实体 M4 底，保留 Canvas / CanvasText 的轮廓与正文。 */
-    [data-scope='dialog'][data-part='content'] {
-      background: var(--xh-dialog-bg, var(--xh-material-elevated-bg));
-    }
-  }
-
   @media print {
     /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
        收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */

package/css/diff-view.css

@@ -164,7 +164,7 @@
   /* 窄档的并排视图：一行的两侧改成上下两段，旧行在上、新行在下。
      行由横排 flex 换成两列栅格——行号一列、正文一列，一行里的四个格按 DOM 次序
      自然落成两行，正文列因此只按单侧的最长行撑宽，不再是两侧之和 */
-  [data-scope='diff-view'][data-part='root'][data-view='split'] [data-part='row']:not([hidden]) {
+  [data-scope='diff-view'][data-part='root'][data-view='split'] [data-part='row']:where([data-scope='diff-view']):not([hidden]) {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
   }
@@ -197,13 +197,13 @@
 
   /* 开了换行：pre-wrap 仍保留缩进与连续空白，只是允许行尾折下来；
      anywhere 让没有空格的长串（url、base64）也能断 */
-  [data-scope='diff-view'][data-part='root'][data-wrap] [data-part='line-content'] {
+  [data-scope='diff-view'][data-part='root'][data-wrap] [data-part='line-content']:where([data-scope='diff-view']) {
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
 
   /* 正文原本按最长行撑宽，不解除就折不下来 */
-  [data-scope='diff-view'][data-part='root'][data-wrap] [data-part='body'] {
+  [data-scope='diff-view'][data-part='root'][data-wrap] [data-part='body']:where([data-scope='diff-view']) {
     min-inline-size: 0;
   }
 
@@ -348,7 +348,7 @@
     --xh-_diff-view-comment-col: var(--xh-diff-view-comment-col, var(--xh-diff-view-line-height, var(--xh-text-code-leading)));
   }
 
-  [data-scope='diff-view'][data-part='root'][data-commentable] [data-part='line-content'] {
+  [data-scope='diff-view'][data-part='root'][data-commentable] [data-part='line-content']:where([data-scope='diff-view']) {
     position: relative;
     padding-inline-start: var(--xh-_diff-view-comment-col);
   }
@@ -387,8 +387,8 @@
       --xh-action-opacity-rest: 0;
     }
 
-    [data-scope='diff-view'][data-part='row']:hover [data-part='comment-trigger'],
-    [data-scope='diff-view'][data-part='viewport']:focus-within [data-part='comment-trigger'] {
+    [data-scope='diff-view'][data-part='row']:hover [data-part='comment-trigger']:where([data-scope='diff-view']),
+    [data-scope='diff-view'][data-part='viewport']:focus-within [data-part='comment-trigger']:where([data-scope='diff-view']) {
       --xh-action-opacity-rest: 1;
     }
   }
@@ -434,13 +434,13 @@
 
   /* 宽档：视口放得下两列，并排视图回到一行两侧 */
   @media (min-width: 1024px) {
-    [data-scope='diff-view'][data-part='root'][data-view='split'] [data-part='row']:not([hidden]) {
+    [data-scope='diff-view'][data-part='root'][data-view='split'] [data-part='row']:where([data-scope='diff-view']):not([hidden]) {
       display: flex;
     }
 
     /* 两列之间的接缝：新侧的行号槽再补一条左边线。只在并排时是接缝，
        堆叠时它落在段首，成了一条与任何东西都不相接的竖线 */
-    [data-scope='diff-view'][data-part='root'][data-view='split'] [data-part='line-number'][data-side='new'] {
+    [data-scope='diff-view'][data-part='root'][data-view='split'] [data-part='line-number'][data-side='new']:where([data-scope='diff-view']) {
       border-inline-start: var(--xh-stroke-thin) solid var(--xh-diff-view-divider, var(--xh-border-subtle));
     }
   }

package/css/drawer.css

@@ -102,11 +102,16 @@
     position: absolute;
   }
 
-  /* 挂在局部容器里的面板碰不到屏幕边，安全区那一段让位收回去：留着会在容器内白让出一条。 */
+  /* 挂在局部容器里的面板碰不到屏幕边，安全区那一段让位收回去：留着会在容器内白让出一条。
+     三段排版读的那几支安全区私有槽一并归零 */
   [data-scope='drawer'][data-part='content'][data-contained] {
-    padding-block-start: var(--xh-drawer-py, var(--xh-surface-py-md));
-    padding-block-end: var(--xh-drawer-py, var(--xh-surface-py-md));
-    padding-inline: var(--xh-drawer-px, var(--xh-surface-px-md));
+    --xh-_drawer-safe-top: var(--xh-space-0);
+    --xh-_drawer-safe-bottom: var(--xh-space-0);
+    --xh-_drawer-safe-inline: var(--xh-space-0);
+
+    padding-block-start: var(--xh-drawer-py, var(--xh-_drawer-header-pt));
+    padding-block-end: var(--xh-drawer-py, var(--xh-overlay-sheet-footer-py));
+    padding-inline: var(--xh-drawer-px, var(--xh-surface-px-sm));
   }
 
   /* 同一层底色之上再糊背后的页面；与 dialog 同写法，两个前缀都写 */
@@ -154,25 +159,38 @@
        两种取法都在下面「四条边」那两条规则里。声明在 content 而不是 root：
        content 会被 portal 到 body，root 上的槽位继承不过来（data-side 也是同一个道理） */
     --xh-_drawer-size: var(--xh-overlay-drawer-w-md);
+    /* 系统占着的那几段：分三段时面板一层只让出它们，设计内衬交给三段各自给。
+       安全区只有物理方向的四个名字，行内轴上两侧同取较宽的那一段，RTL 下不会翻错边 */
+    --xh-_drawer-safe-top: env(safe-area-inset-top, 0px);
+    --xh-_drawer-safe-bottom: env(safe-area-inset-bottom, 0px);
+    --xh-_drawer-safe-inline: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
+    /* 头部带：标题首行与角上的关闭钮都落在这条带的中线上，与对话框同一组槽 */
+    --xh-_drawer-header-h: var(--xh-overlay-header-h);
+    /* 标题首行在带里居中要让出的上内衬：带高减标题行高再对半 */
+    --xh-_drawer-header-pt: calc((var(--xh-_drawer-header-h) - var(--xh-text-heading-3-size) * var(--xh-leading-normal)) / 2);
+    /* 分三段时头的下内衬扣掉分隔线那 1px，只有标题时整条带恰好是带高 */
+    --xh-_drawer-header-pb: calc(var(--xh-_drawer-header-pt) - var(--xh-stroke-thin));
+    /* 带的上沿：不分三段时上内衬与安全区取大的一头，安全区更深时整条带往下让出差值 */
+    --xh-_drawer-header-top: calc(max(var(--xh-_drawer-header-pt), var(--xh-_drawer-safe-top)) - var(--xh-_drawer-header-pt));
 
     position: fixed;
     z-index: var(--xh-drawer-layer, var(--xh-_layer, var(--xh-layer-drawer)));
     display: flex;
     flex-direction: column;
     gap: var(--xh-drawer-gap, var(--xh-stack-gap-md));
-    /* 面板贴死视口的某一条边、另一向满铺，内衬与安全区取大的一头：
+    /* 不分三段时内衬由面板一层给：上沿让标题行落在头部带中线，横向 16px。
+       面板贴死视口的某一条边、另一向满铺，内衬与安全区取大的一头：
        刘海、圆角与底部横条压住的那一段由系统给出，内衬比它窄时首尾两行会被切掉。
-       桌面上 env() 恒为 0，取值与内衬槽完全一致。安全区只有物理方向的四个名字，
-       行内轴上两侧同取较宽的那一段，RTL 下不会翻错边。 */
-    padding-block-start: max(var(--xh-drawer-py, var(--xh-surface-py-md)), env(safe-area-inset-top));
-    padding-block-end: max(var(--xh-drawer-py, var(--xh-surface-py-md)), env(safe-area-inset-bottom));
+       桌面上 env() 恒为 0，取值与内衬槽完全一致。 */
+    padding-block-start: max(var(--xh-drawer-py, var(--xh-_drawer-header-pt)), env(safe-area-inset-top));
+    padding-block-end: max(var(--xh-drawer-py, var(--xh-overlay-sheet-footer-py)), env(safe-area-inset-bottom));
     padding-inline: max(
-      var(--xh-drawer-px, var(--xh-surface-px-md)),
+      var(--xh-drawer-px, var(--xh-surface-px-sm)),
       env(safe-area-inset-left),
       env(safe-area-inset-right)
     );
-    /* M4 sheet 三件套：任何浮层不得只靠 box-shadow 分层，亮色下面板与页面同色，
-       1px 描边才是它的边界；影只是加成 */
+    /* sheet 三件套：任何浮层不得只靠 box-shadow 分层，亮色下面板与页面同色，
+       1px 描边才是它的边界；影只是加成。面就是实体底，不叠渐变与顶光 */
     border: var(--xh-stroke-thin) solid var(--xh-drawer-border, var(--xh-material-elevated-border));
     background: var(--xh-drawer-bg, var(--xh-material-elevated-bg));
     color: var(--xh-drawer-fg, var(--xh-material-elevated-fg));
@@ -230,7 +248,8 @@
     max-inline-size: 100%;
   }
 
-  /* 只圆朝向页面那两个角：贴住视口的那条边圆角是看不见的，圆了反而露出底下的页面 */
+  /* 贴住视口（或容器）的那条边不取圆角：圆了反而露出底下的页面。朝向页面那两个角与别的浮层同一把尺，
+     取 overlay 圆角：使用者把圆角调大时抽屉不会单独方着；要另定经 --xh-drawer-radius */
   [data-scope='drawer'][data-part='content'][data-side='left'] {
     inset-inline-start: 0;
     border-start-end-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
@@ -306,11 +325,16 @@
   /* —— 面板三段 —— */
   /* header / body / footer 把面板切成「头尾定在原处、正文自己滚」三段，
      与弹窗、浮动面板同一套角色划分：头尾不参与压缩，正文吃掉剩下的高度并自己滚。
-     面板的内衬与安全区让位仍由 content 一层给出，三段只接手段与段之间那道缝；
+     分三段时面板一层只让出安全区，设计内衬由三段各自给：头下、尾上的分隔线才能贴着面板两侧的边；
      整块的滚动交还给正文段——两层都能滚时滚轮落在哪一层要看指针停在哪，
      贴边的头尾会跟着一起走。 */
   [data-scope='drawer'][data-part='content']:has([data-scope='drawer'][data-part='body']) {
+    --xh-_drawer-header-top: var(--xh-_drawer-safe-top);
+
     gap: 0;
+    padding-block-start: var(--xh-_drawer-safe-top);
+    padding-block-end: var(--xh-_drawer-safe-bottom);
+    padding-inline: var(--xh-_drawer-safe-inline);
     overflow: hidden;
   }
 
@@ -323,14 +347,30 @@
     padding-block-end: var(--xh-drawer-header-pb, var(--xh-space-2));
   }
 
+  /* 三段结构的头：一条 48px 的头部带，标题首行落在带的中线上（说明在下面接着排，带随之长高），
+     横向内衬 16px；下沿一条 1px 的内部分隔线走 sheet 分隔令牌，贴着面板两侧的边。
+     下内衬扣掉分隔线那 1px，只有标题时整条带恰好是带高 */
+  [data-scope='drawer'][data-part='content']:has([data-scope='drawer'][data-part='body'])
+    [data-scope='drawer'][data-part='header'] {
+    justify-content: center;
+    min-block-size: var(--xh-_drawer-header-h);
+    padding-block-start: var(--xh-drawer-header-pt, var(--xh-_drawer-header-pt));
+    padding-block-end: var(--xh-drawer-header-pb, var(--xh-_drawer-header-pb));
+    padding-inline: var(--xh-drawer-header-px, var(--xh-surface-px-sm));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-drawer-separator, var(--xh-material-elevated-separator));
+  }
+
   /* 正文段：面板里唯一会滚的一段。最小高度归零，
      否则弹性项按内容撑高，容器再矮也不产生溢出，滚动条永远出不来。
-     模态 body 是原生细条滚动面：细条由 reset 层统一给，滚到头不把页面一起带走 */
+     模态 body 是原生细条滚动面：细条由 reset 层统一给，滚到头不把页面一起带走。
+     内衬纵 12 横 16 */
   [data-scope='drawer'][data-part='body'] {
     flex: 1 1 auto;
     min-block-size: 0;
     overflow: auto;
     overscroll-behavior: contain;
+    padding-block: var(--xh-drawer-body-py, var(--xh-surface-py-sm));
+    padding-inline: var(--xh-drawer-body-px, var(--xh-surface-px-sm));
   }
 
   /* 正文高度随交互变化（表单校验、展开段落）：还在用原生滚动条的正文留一条稳定空道，
@@ -349,6 +389,14 @@
     padding-block-start: var(--xh-drawer-footer-pt, var(--xh-space-2));
   }
 
+  /* 三段结构的尾：纵 16 横 16，上沿一条贴边的 1px 内部分隔线 */
+  [data-scope='drawer'][data-part='content']:has([data-scope='drawer'][data-part='body'])
+    [data-scope='drawer'][data-part='footer'] {
+    padding-block: var(--xh-drawer-footer-py, var(--xh-overlay-sheet-footer-py));
+    padding-inline: var(--xh-drawer-footer-px, var(--xh-surface-px-sm));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-drawer-separator, var(--xh-material-elevated-separator));
+  }
+
   /* 声明过 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
   [data-scope='drawer'][data-part='header'][hidden],
   [data-scope='drawer'][data-part='body'][hidden],
@@ -356,10 +404,12 @@
     display: none;
   }
 
+  /* 面板标题：页面级面板标题档、正文色；行高钉在 normal，头部带按它算标题行居中 */
   [data-scope='drawer'][data-part='title'] {
     margin: 0;
     font-size: var(--xh-drawer-title-font-size, var(--xh-text-heading-3-size));
     font-weight: var(--xh-drawer-title-font-weight, var(--xh-text-heading-3-weight));
+    line-height: var(--xh-leading-normal);
     color: var(--xh-drawer-title-fg, var(--xh-fg-default));
   }
 
@@ -374,15 +424,16 @@
      否则长标题会直接钻到按钮底下。只在真有关闭按钮时让位。 */
   [data-scope='drawer'][data-part='content']:has([data-scope='drawer'][data-part='close-trigger'])
     [data-scope='drawer'][data-part='title'] {
-    padding-inline-end: calc(var(--xh-drawer-close-size, var(--xh-control-h-sm)) + var(--xh-surface-action-inset));
+    padding-inline-end: calc(var(--xh-drawer-close-size, var(--xh-control-h-sm)) + var(--xh-space-4));
   }
 
   /*
-   * 关闭钮是面板角落的单图标钮：正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
+   * 关闭钮是面板角落的单图标钮：正方盒、sm 档几何、ghost 四态面、按压换底与粗指针命中区
    * 由家族配方给出——白面上走画布承载阶梯悬停 --xh-bg-subtle（100）→ 按下 --xh-bg-subtle-hover（200），
    * 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与摆放，
    * 聚焦档的 -bg-focus / -fg-focus 两槽同样桥到配方的 focus-visible 面（与 dialog 一致），缺省仍是透明底与悬停字色；
    * 静息前景取 muted 字色，悬停 / 按下回到 fg-default。
+   * 叉取 12px（--xh-glyph-size-xs），比钮的随档字形低一档；钮距右 16px，竖向落在头部带的中线上。
    */
   [data-scope='drawer'][data-part='close-trigger'] {
     --xh-action-visual-size: var(--xh-drawer-close-size, var(--xh-_action-profile-visual-size));
@@ -394,12 +445,15 @@
     --xh-action-fg-hover: var(--xh-drawer-close-fg-hover, var(--xh-_action-variant-fg-hover));
     --xh-action-fg-pressed: var(--xh-drawer-close-fg-hover, var(--xh-_action-variant-fg-pressed));
     --xh-action-fg-focus-visible: var(--xh-drawer-close-fg-focus, var(--xh-drawer-close-fg-hover, var(--xh-_action-variant-fg-focus-visible)));
-    /* 作者塞进按钮的图标随档取字形尺（sm = 16px），与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-drawer-icon-size, var(--xh-_action-profile-glyph-size));
+    /* 作者塞进按钮的图标与皮肤画的兜底叉同一把尺 */
+    --xh-icon-size: var(--xh-drawer-icon-size, var(--xh-glyph-size-xs));
 
     position: absolute;
-    inset-block-start: var(--xh-surface-action-inset);
-    inset-inline-end: var(--xh-surface-action-inset);
+    /* 钮的视觉盒在头部带里竖向居中：按钮自己的边长从带高里扣掉再对半 */
+    inset-block-start: calc(var(--xh-_drawer-header-top) + (var(--xh-_drawer-header-h) - var(--xh-drawer-close-size, var(--xh-_action-profile-visual-size))) / 2);
+    /* 行向先让出安全区再距边 16px：绝对定位从面板的内边距盒量起，横屏刘海压住的那一段不让，叉就落进去；
+       局部容器里的抽屉安全区槽归零，仍是 16px */
+    inset-inline-end: calc(var(--xh-_drawer-safe-inline) + var(--xh-space-4));
   }
 
   [data-scope='drawer'][data-part='close-trigger'][hidden] {