@xihan-ui/styles 3.2.0 → 4.0.0

package/dist/css/descriptions.css

@@ -14,12 +14,16 @@
   .xh-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 @@
 
   /* —— 尺寸 —— */
   .xh-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);
   }
 
   .xh-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));
   }
 
+  /* 标签比取值重一档、颜色弱一档：扫读时先抓标签，读值时不被标签抢走 */
   .xh-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));
   }
 
   .xh-scope-descriptions[data-part='value'] {
@@ -161,9 +167,9 @@
     > .xh-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));
   }
 
   .xh-scope-descriptions[data-part='root'][data-variant='outline']
@@ -195,6 +201,28 @@
       column-gap: var(--xh-descriptions-label-gap, var(--xh-_descriptions-label-gap));
     }
 
+    /* 描边档标签在左：标签单成一列淡底格，与取值之间一条竖线；内距从格上下放到标签与取值各自身上 */
+    .xh-scope-descriptions[data-part='root'][data-variant='outline'][data-placement='left']
+      > .xh-scope-descriptions[data-part='item'] {
+      align-items: stretch;
+      column-gap: 0;
+      padding: 0;
+    }
+
+    .xh-scope-descriptions[data-part='root'][data-variant='outline'][data-placement='left']
+      > .xh-scope-descriptions[data-part='item']
+      > :is(.xh-scope-descriptions[data-part='label'], .xh-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));
+    }
+
+    .xh-scope-descriptions[data-part='root'][data-variant='outline'][data-placement='left']
+      > .xh-scope-descriptions[data-part='item']
+      > .xh-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 从这一档起认 */
     .xh-scope-descriptions[data-part='root'][data-columns='2']
       > .xh-scope-descriptions[data-part='item'],

package/dist/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 让出，面板自己不碰视口边，三段不用各算一遍。
      写了正文段的这一档同时封顶：不封顶正文永远没有可滚的余量，滚动条出不来。 */
   .xh-scope-dialog[data-part='content']:has(.xh-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 的轻量对话框不会凭空多一条线 */
   .xh-scope-dialog[data-part='content']:has(.xh-scope-dialog[data-part='body'])
     .xh-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 */
   .xh-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，上沿的分隔线随尾段铺满面板宽 */
+  .xh-scope-dialog[data-part='content']:has(.xh-scope-dialog[data-part='body'])
+    .xh-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}，收起态得自己还回去 */
   .xh-scope-dialog[data-part='header'][hidden],
   .xh-scope-dialog[data-part='body'][hidden],
@@ -329,10 +347,12 @@
     display: none;
   }
 
+  /* 面板标题：页面级面板标题档、正文色；行高钉在 normal，头部带按它算标题行居中 */
   .xh-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 @@
      否则长标题会直接钻到按钮底下。只在真有关闭按钮时让位。 */
   .xh-scope-dialog[data-part='content']:has(.xh-scope-dialog[data-part='close-trigger'])
     .xh-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，竖向落在头部带的中线上。
    */
   .xh-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));
   }
 
   .xh-scope-dialog[data-part='close-trigger'][hidden] {
@@ -412,13 +434,6 @@
     }
   }
 
-  @media (forced-colors: active) {
-    /* 强制色会接管渐变；改回同名实体 M4 底，保留 Canvas / CanvasText 的轮廓与正文。 */
-    .xh-scope-dialog[data-part='content'] {
-      background: var(--xh-dialog-bg, var(--xh-material-elevated-bg));
-    }
-  }
-
   @media print {
     /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
        收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */

package/dist/css/drawer.css

@@ -102,11 +102,16 @@
     position: absolute;
   }
 
-  /* 挂在局部容器里的面板碰不到屏幕边，安全区那一段让位收回去：留着会在容器内白让出一条。 */
+  /* 挂在局部容器里的面板碰不到屏幕边，安全区那一段让位收回去：留着会在容器内白让出一条。
+     三段排版读的那几支安全区私有槽一并归零 */
   .xh-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 */
   .xh-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 一层给出，三段只接手段与段之间那道缝；
+     分三段时面板一层只让出安全区，设计内衬由三段各自给：头下、尾上的分隔线才能贴着面板两侧的边；
      整块的滚动交还给正文段——两层都能滚时滚轮落在哪一层要看指针停在哪，
      贴边的头尾会跟着一起走。 */
   .xh-scope-drawer[data-part='content']:has(.xh-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，只有标题时整条带恰好是带高 */
+  .xh-scope-drawer[data-part='content']:has(.xh-scope-drawer[data-part='body'])
+    .xh-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 */
   .xh-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 内部分隔线 */
+  .xh-scope-drawer[data-part='content']:has(.xh-scope-drawer[data-part='body'])
+    .xh-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}，收起态得自己还回去 */
   .xh-scope-drawer[data-part='header'][hidden],
   .xh-scope-drawer[data-part='body'][hidden],
@@ -356,10 +404,12 @@
     display: none;
   }
 
+  /* 面板标题：页面级面板标题档、正文色；行高钉在 normal，头部带按它算标题行居中 */
   .xh-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 @@
      否则长标题会直接钻到按钮底下。只在真有关闭按钮时让位。 */
   .xh-scope-drawer[data-part='content']:has(.xh-scope-drawer[data-part='close-trigger'])
     .xh-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，竖向落在头部带的中线上。
    */
   .xh-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));
   }
 
   .xh-scope-drawer[data-part='close-trigger'][hidden] {

package/dist/css/editable.css

@@ -26,9 +26,6 @@
     --xh-_editable-font-size: var(--xh-control-font-md);
     --xh-_editable-control-gap: 0;
 
-    /* 盒内那道分隔线的长度：取钮高的一半，线的上下各留一截空白，不与钮等高 */
-    --xh-_editable-divider-h: 50%;
-
     display: inline-flex;
     flex-direction: column;
     gap: var(--xh-editable-gap, var(--xh-space-1));
@@ -61,7 +58,9 @@
   }
 
   .xh-scope-editable[data-part='label'] {
-    color: var(--xh-editable-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-editable-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-editable-label-gap, var(--xh-space-2)) - var(--xh-editable-gap, var(--xh-space-1)));
+    color: var(--xh-editable-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-editable-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-editable-label-font-weight, var(--xh-text-label-weight));
     /* 点标题会把人送进编辑态（预览态下 for 指着的输入框是收起的，点了没反应），
@@ -70,7 +69,7 @@
   }
 
   .xh-scope-editable[data-part='label'][data-disabled] {
-    color: var(--xh-editable-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-editable-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 预览区只是 control 里的内容段，不再自成一只带圆角的盒子。 */
@@ -165,8 +164,6 @@
     --xh-field-border-focus: var(--xh-editable-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-editable-control-border-invalid, var(--xh-_field-variant-border-invalid));
     --xh-field-border-disabled: var(--xh-editable-control-border-disabled, var(--xh-_field-variant-border-disabled));
-    --xh-field-ring-focus: var(--xh-ring-focus);
-    --xh-field-ring-invalid: var(--xh-ring-invalid);
     --xh-field-shadow-rest: var(--xh-editable-control-shadow, none);
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
     --xh-field-glyph-size: var(--xh-editable-icon-size, var(--xh-_field-size-glyph-size));
@@ -179,9 +176,10 @@
     display: none;
   }
 
-  /* 三颗动作与 NumberField 的加减钮一样是 control 内部的分段：正方视觉盒、inset 圆角、
-     悬停 100 / 按下 200 与 0.97 按压、粗指针热区、:focus-visible 关环与禁用面全由 Action Control 的
-     field-inset ghost 档给，组件只映射既有覆盖槽。常态只剩符号，悬停与按下才浮出底色 */
+  /* 三颗动作是 control 内部的分段：inset 圆角、按承载面取的悬停 / 按下阶梯、粗指针热区、
+     :focus-visible 关环与禁用面全由 Action Control 的 field-inset ghost 档给，组件只映射既有覆盖槽。
+     视觉盒按字段内钮尺寸表随字段档（sm 取控件内动作档、md 取 control-h-sm、lg 取 control-h-md），
+     由 field-inset 档按 data-xh-action-size 给；常态只剩符号、取次要前景，悬停与按下才浮出底色 */
   .xh-scope-editable[data-part='edit-trigger'],
   .xh-scope-editable[data-part='submit-trigger'],
   .xh-scope-editable[data-part='cancel-trigger'] {
@@ -193,7 +191,7 @@
     --xh-action-bg-hover: var(--xh-editable-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
     --xh-action-bg-pressed: var(--xh-editable-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
     --xh-action-bg-disabled: var(--xh-editable-trigger-bg-disabled, var(--xh-_action-variant-bg-disabled));
-    --xh-action-fg-rest: var(--xh-editable-trigger-fg, var(--xh-fg-default));
+    --xh-action-fg-rest: var(--xh-editable-trigger-fg, var(--xh-fg-muted));
     --xh-action-fg-hover: var(--xh-editable-trigger-fg-hover, var(--xh-fg-default));
     --xh-action-border-rest: transparent;
     --xh-action-highlight-rest: transparent;
@@ -213,6 +211,12 @@
     margin-inline-start: auto;
   }
 
+  /* 确认与取消两颗挨着：紧凑 sm 档钮只有 20px，两钮中心距凑不够 24px 就落不进 SC 2.5.8 的间距例外，
+     两颗之间隔一格 --xh-space-1；其余档钮不低于 24px，这一格只把两块悬停面分开 */
+  .xh-scope-editable[data-part='cancel-trigger'] {
+    margin-inline-start: var(--xh-space-1);
+  }
+
   /* 三颗动作默认是纯图标按钮；作者放了自己的图标后 :empty 不命中，不会叠两层。 */
   .xh-scope-editable:is([data-part='edit-trigger'], [data-part='submit-trigger'], [data-part='cancel-trigger']):empty::before {
     content: '';
@@ -236,27 +240,6 @@
     --xh-_editable-trigger-glyph: var(--xh-glyph-mark-close);
   }
 
-  /* 动作组第一颗与内容段之间只有一道短分隔线；确认与取消之间不再拼第二个按钮框。
-     线不画在钮的边框上：边框会跟着钮的圆角与悬停底走，而这道线要独立于钮的各态，长度也短于钮自己。
-     ::before 已被兜底字形占着，::after 在粗指针下是家族给的 44px 热区，几何只能落在
-     background-image 上：一条 1px × 半高的渐变贴在逻辑起始侧，底色换态时它仍叠在上层。
-     background-position 是物理轴，RTL 另给一条换边 */
-  .xh-scope-editable[data-part='edit-trigger'],
-  .xh-scope-editable[data-part='submit-trigger'] {
-    background-image: linear-gradient(
-      var(--xh-editable-trigger-divider, var(--xh-material-soft-separator)),
-      var(--xh-editable-trigger-divider, var(--xh-material-soft-separator))
-    );
-    background-repeat: no-repeat;
-    background-position: 0 50%;
-    background-size: var(--xh-stroke-thin) var(--xh-editable-trigger-divider-h, var(--xh-_editable-divider-h));
-  }
-
-  [dir='rtl'] .xh-scope-editable[data-part='edit-trigger'],
-  [dir='rtl'] .xh-scope-editable[data-part='submit-trigger'] {
-    background-position: 100% 50%;
-  }
-
   /* 三颗按钮按形态轮流收起，连接层给的是 hidden 属性；
      家族那条 display 已把 UA 规则盖掉，少了这里三条按钮就一直杵着 */
   .xh-scope-editable[data-part='edit-trigger'][hidden],
@@ -265,15 +248,6 @@
     display: none;
   }
 
-  /* 高对比档整层丢弃 background-image，分隔线改用系统色重画，并关掉这两颗钮的强制换色 */
-  @media (forced-colors: active) {
-    .xh-scope-editable[data-part='edit-trigger'],
-    .xh-scope-editable[data-part='submit-trigger'] {
-      background-image: linear-gradient(ButtonText, ButtonText);
-      forced-color-adjust: none;
-    }
-  }
-
   @media (forced-colors: active) {
     /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
        字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：