@xihan-ui/styles 1.0.0 → 2.0.0

package/css/drawer.css

@@ -1,26 +1,15 @@
-@layer xihan.motion {
-  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
-     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
-  @keyframes xh-fade-in {
-    from {
-      opacity: 0;
-    }
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
 
-    to {
-      opacity: 1;
-    }
-  }
+/* 定义 drawer 样式。 */
 
-  @keyframes xh-fade-out {
-    from {
-      opacity: 1;
-    }
-
-    to {
-      opacity: 0;
-    }
-  }
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/action-control.css';
 
+@layer xihan.motion {
   /* 四条边各一对滑入/滑出。位移量用 translate 的百分比，参照的是面板自己的边框盒，
      所以不管 --xh-drawer-size 被改成多少，"正好推到视口外"这件事都成立。
 
@@ -118,16 +107,16 @@
   /* root 留在页面原地，只是 data-side / data-state 的落点，不该凭空多出一层盒子把
      trigger 从作者的 flex / grid 行里挤出去，故 display: contents。 */
   [data-scope='drawer'][data-part='root'] {
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-drawer-icon-size, var(--xh-glyph-size-text));
+    /* 作者塞进面板里的图标按控件档取（§6.5）；触发器与关闭钮另由家族配方按各自的档下发字形尺 */
+    --xh-icon-size: var(--xh-drawer-icon-size, var(--xh-glyph-size-md));
 
     display: contents;
   }
 
   /* 浮层被搬到 portal 落点，继承不到 root 上的槽：这把尺在被搬走的那一侧再声明一次，
-     关闭钮与条目里作者塞的图标才和皮肤画的兜底字形一样大 */
+     作者塞进面板里的图标才和皮肤画的兜底字形一样大 */
   [data-scope='drawer'][data-part='content'] {
-    --xh-icon-size: var(--xh-drawer-icon-size, var(--xh-glyph-size-text));
+    --xh-icon-size: var(--xh-drawer-icon-size, var(--xh-glyph-size-md));
   }
 
   /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，作者手写 hidden 时得还回去 */
@@ -135,58 +124,59 @@
     display: none;
   }
 
+  /*
+   * 触发器是页面上的独立文字按钮（§9.1）：盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
+   * 由家族配方按连接层投影的 data-xh-action-variant / -size 给出（此前自写描边盒型，hover 落 200 / active 落 300）。
+   * 这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与几何槽映射。
+   */
   [data-scope='drawer'][data-part='trigger'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--xh-drawer-trigger-gap, var(--xh-control-gap-md));
-    block-size: var(--xh-drawer-trigger-h, var(--xh-control-h-md));
-    padding-inline: var(--xh-drawer-trigger-px, var(--xh-control-px-md));
-    border: var(--xh-stroke-thin) solid var(--xh-drawer-trigger-border, var(--xh-border-control));
-    border-radius: var(--xh-drawer-trigger-radius, var(--xh-shape-control));
-    background: var(--xh-drawer-trigger-bg, var(--xh-bg-canvas));
-    color: var(--xh-drawer-trigger-fg, var(--xh-fg-default));
-    font-size: var(--xh-drawer-trigger-font-size, var(--xh-text-label-size));
+    --xh-action-gap: var(--xh-drawer-trigger-gap, var(--xh-_action-profile-gap));
+    --xh-action-visual-size: var(--xh-drawer-trigger-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-drawer-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-drawer-trigger-radius, var(--xh-shape-control));
+    --xh-action-font-size: var(--xh-drawer-trigger-font-size, var(--xh-_action-profile-font-size));
+    --xh-action-bg-rest: var(--xh-drawer-trigger-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-drawer-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-drawer-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-drawer-trigger-bg, var(--xh-_action-variant-bg-focus-visible));
+    --xh-action-fg-rest: var(--xh-drawer-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-drawer-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-drawer-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-drawer-trigger-fg, var(--xh-_action-variant-fg-focus-visible));
+    --xh-action-border-rest: var(--xh-drawer-trigger-border, var(--xh-_action-variant-border-rest));
+    --xh-action-border-hover: var(--xh-drawer-trigger-border-hover, var(--xh-_action-variant-border-hover));
+    --xh-action-border-pressed: var(--xh-drawer-trigger-border-hover, var(--xh-_action-variant-border-pressed));
+    --xh-action-border-focus-visible: var(--xh-drawer-trigger-border, var(--xh-_action-variant-border-focus-visible));
+    /* 作者塞进按钮的图标随档取字形尺（md = 20px） */
+    --xh-icon-size: var(--xh-drawer-icon-size, var(--xh-_action-profile-glyph-size));
+
+    /* 触发器的文字与 Button 同一字重（家族配方不管字重） */
     font-weight: var(--xh-drawer-trigger-font-weight, var(--xh-text-label-weight));
-    line-height: var(--xh-leading-none);
-    white-space: nowrap;
-    cursor: pointer;
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='drawer'][data-part='trigger'][hidden] {
     display: none;
   }
 
-  [data-scope='drawer'][data-part='trigger']:hover:not(:disabled) {
-    background: var(--xh-drawer-trigger-bg-hover, var(--xh-bg-subtle-hover));
-    border-color: var(--xh-drawer-trigger-border-hover, var(--xh-border-control-hover));
-  }
-
   /* 抽屉展开期间触发按钮压住不弹起：面板贴在视口边上，它和按钮往往离得很远，
-     按钮自己得说明"这一扇是我开的"。 */
+     按钮自己得说明"这一扇是我开的"。open 与家族 hover 同档中性（§7.2 第 8 条）：
+     白底承载的 --xh-bg-subtle（100）+ 悬停描边，聚焦时这块面留着 */
   [data-scope='drawer'][data-part='trigger'][data-state='open'] {
-    background: var(--xh-drawer-trigger-bg-open, var(--xh-bg-subtle-active));
-    border-color: var(--xh-drawer-trigger-border-open, var(--xh-border-control-hover));
-  }
-
-  [data-scope='drawer'][data-part='trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+    --xh-action-bg-rest: var(--xh-drawer-trigger-bg-open, var(--xh-bg-subtle));
+    --xh-action-bg-focus-visible: var(--xh-drawer-trigger-bg-open, var(--xh-bg-subtle));
+    --xh-action-border-rest: var(--xh-drawer-trigger-border-open, var(--xh-border-control-hover));
+    --xh-action-border-focus-visible: var(--xh-drawer-trigger-border-open, var(--xh-border-control-hover));
   }
 
-  /* trigger 是单体控件，禁用走原生 disabled */
-  [data-scope='drawer'][data-part='trigger']:disabled {
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色 */
+  [data-scope='drawer'][data-part='trigger'][data-xh-action-variant='solid']:focus-visible {
+    --xh-action-ring-color-focus-visible: currentColor;
   }
 
   [data-scope='drawer'][data-part='backdrop'] {
     position: fixed;
     inset: 0;
-    z-index: var(--xh-drawer-backdrop-layer, var(--xh-layer-drawer));
+    z-index: var(--xh-drawer-backdrop-layer, var(--xh-_layer, var(--xh-layer-drawer)));
     background: var(--xh-drawer-backdrop-bg, var(--xh-bg-overlay));
   }
 
@@ -201,6 +191,24 @@
     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));
+  }
+
+  /* 同一层底色之上再糊背后的页面；与 dialog 同写法，两个前缀都写 */
+  [data-scope='drawer'][data-part='backdrop'][data-variant='blur'] {
+    -webkit-backdrop-filter: blur(var(--xh-drawer-backdrop-blur, var(--xh-overlay-backdrop-blur)));
+    backdrop-filter: blur(var(--xh-drawer-backdrop-blur, var(--xh-overlay-backdrop-blur)));
+  }
+
+  /* 去掉底色，只留下这一层吃指针：交互外关闭与滚动锁定照旧 */
+  [data-scope='drawer'][data-part='backdrop'][data-variant='transparent'] {
+    background: transparent;
+  }
+
   [data-scope='drawer'][data-part='backdrop'][data-state='open'] {
     animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
@@ -216,7 +224,7 @@
   [data-scope='drawer'][data-part='positioner'] {
     position: fixed;
     inset: 0;
-    z-index: var(--xh-drawer-layer, var(--xh-layer-drawer));
+    z-index: var(--xh-drawer-layer, var(--xh-_layer, var(--xh-layer-drawer)));
     pointer-events: none;
   }
 
@@ -236,16 +244,30 @@
     --xh-_drawer-size: var(--xh-overlay-drawer-w-md);
 
     position: fixed;
-    z-index: var(--xh-drawer-layer, var(--xh-layer-drawer));
+    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));
-    padding-block: var(--xh-drawer-py, var(--xh-surface-py-md));
-    padding-inline: var(--xh-drawer-px, var(--xh-surface-px-md));
-    background: var(--xh-drawer-bg, var(--xh-bg-surface));
-    color: var(--xh-drawer-fg, var(--xh-fg-default));
-    box-shadow: var(--xh-drawer-shadow, var(--xh-elevation-sheet));
+    /* 面板贴死视口的某一条边、另一向满铺，内衬与安全区取大的一头：
+       刘海、圆角与底部横条压住的那一段由系统给出，内衬比它窄时首尾两行会被切掉。
+       桌面上 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));
+    padding-inline: max(
+      var(--xh-drawer-px, var(--xh-surface-px-md)),
+      env(safe-area-inset-left),
+      env(safe-area-inset-right)
+    );
+    /* M4 sheet 三件套（§8.4）：任何浮层不得只靠 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));
+    box-shadow: var(--xh-drawer-shadow, var(--xh-material-elevated-shadow));
+    /* 作者不用 header / body / footer 三段时它是唯一的滚动层：模态面滚到头不把页面一起带走（§6.6） */
     overflow: auto;
+    overscroll-behavior: contain;
     /* 尺寸是照视口那条边算出来的，padding 再往外顶就会把面板挤出屏幕、
        逼出一条横向滚动条。reset 层已有同款兜底，这里显式写一遍表明尺寸算法依赖它 */
     box-sizing: border-box;
@@ -298,14 +320,14 @@
   /* 只圆朝向页面那两个角：贴住视口的那条边圆角是看不见的，圆了反而露出底下的页面 */
   [data-scope='drawer'][data-part='content'][data-side='left'] {
     inset-inline-start: 0;
-    border-start-end-radius: var(--xh-drawer-radius, var(--xh-shape-surface));
-    border-end-end-radius: var(--xh-drawer-radius, var(--xh-shape-surface));
+    border-start-end-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
+    border-end-end-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
   }
 
   [data-scope='drawer'][data-part='content'][data-side='right'] {
     inset-inline-end: 0;
-    border-start-start-radius: var(--xh-drawer-radius, var(--xh-shape-surface));
-    border-end-start-radius: var(--xh-drawer-radius, var(--xh-shape-surface));
+    border-start-start-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
+    border-end-start-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
   }
 
   /* 上下：满宽、定高 */
@@ -318,20 +340,27 @@
 
   [data-scope='drawer'][data-part='content'][data-side='top'] {
     inset-block-start: 0;
-    border-end-start-radius: var(--xh-drawer-radius, var(--xh-shape-surface));
-    border-end-end-radius: var(--xh-drawer-radius, var(--xh-shape-surface));
+    border-end-start-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
+    border-end-end-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
   }
 
   [data-scope='drawer'][data-part='content'][data-side='bottom'] {
     inset-block-end: 0;
-    border-start-start-radius: var(--xh-drawer-radius, var(--xh-shape-surface));
-    border-start-end-radius: var(--xh-drawer-radius, var(--xh-shape-surface));
+    border-start-start-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
+    border-start-end-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
+  }
+
+  /* 展开期间面板整块推到一屏之外再推回来：只在开着的这一档挂，
+     合成层随 data-state 一起收走，收起后不再占着 */
+  [data-scope='drawer'][data-part='content'][data-state='open'] {
+    will-change: translate;
   }
 
-  /* 滑入/滑出按边配对。退场一律 forwards：presence 要等 animationend 才卸载，
+  /* 滑入/滑出按边配对。入场是整面板从画外推入的大尺度位移（§9.5）：走 --xh-motion-duration-slide
+     与 --xh-motion-ease-slide；退场仍走 exit 档。退场一律 forwards：presence 要等 animationend 才卸载，
      不定住终态，面板会在最后一帧弹回原位再消失。 */
   [data-scope='drawer'][data-part='content'][data-side='right'][data-state='open'] {
-    animation: xh-drawer-in-right var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+    animation: xh-drawer-in-right var(--xh-motion-duration-slide) var(--xh-motion-ease-slide);
   }
 
   [data-scope='drawer'][data-part='content'][data-side='right'][data-state='closed'] {
@@ -339,7 +368,7 @@
   }
 
   [data-scope='drawer'][data-part='content'][data-side='left'][data-state='open'] {
-    animation: xh-drawer-in-left var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+    animation: xh-drawer-in-left var(--xh-motion-duration-slide) var(--xh-motion-ease-slide);
   }
 
   [data-scope='drawer'][data-part='content'][data-side='left'][data-state='closed'] {
@@ -347,7 +376,7 @@
   }
 
   [data-scope='drawer'][data-part='content'][data-side='top'][data-state='open'] {
-    animation: xh-drawer-in-top var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+    animation: xh-drawer-in-top var(--xh-motion-duration-slide) var(--xh-motion-ease-slide);
   }
 
   [data-scope='drawer'][data-part='content'][data-side='top'][data-state='closed'] {
@@ -355,13 +384,66 @@
   }
 
   [data-scope='drawer'][data-part='content'][data-side='bottom'][data-state='open'] {
-    animation: xh-drawer-in-bottom var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+    animation: xh-drawer-in-bottom var(--xh-motion-duration-slide) var(--xh-motion-ease-slide);
   }
 
   [data-scope='drawer'][data-part='content'][data-side='bottom'][data-state='closed'] {
     animation: xh-drawer-out-bottom var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
+  /* —— 面板三段 —— */
+  /* header / body / footer 把面板切成「头尾定在原处、正文自己滚」三段，
+     与弹窗、浮动面板同一套角色划分：头尾不参与压缩，正文吃掉剩下的高度并自己滚。
+     面板的内衬与安全区让位仍由 content 一层给出，三段只接手段与段之间那道缝；
+     整块的滚动交还给正文段——两层都能滚时滚轮落在哪一层要看指针停在哪，
+     贴边的头尾会跟着一起走。 */
+  [data-scope='drawer'][data-part='content']:has([data-scope='drawer'][data-part='body']) {
+    gap: 0;
+    overflow: hidden;
+  }
+
+  /* 头段：标题与说明纵向堆叠；不参与压缩，正文再长也压不扁它 */
+  [data-scope='drawer'][data-part='header'] {
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-drawer-header-gap, var(--xh-stack-gap-sm));
+    padding-block-end: var(--xh-drawer-header-pb, var(--xh-space-2));
+  }
+
+  /* 正文段：面板里唯一会滚的一段。最小高度归零，
+     否则弹性项按内容撑高，容器再矮也不产生溢出，滚动条永远出不来。
+     模态 body 是原生细条滚动面（§6.6）：细条由 reset 层统一给，滚到头不把页面一起带走 */
+  [data-scope='drawer'][data-part='body'] {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* 正文高度随交互变化（表单校验、展开段落）：还在用原生滚动条的正文留一条稳定空道，
+     滚动条出现与消失时不推动文字。带 data-xh-scrollbar 的容器已经把原生条藏成零宽，排除掉 */
+  [data-scope='drawer'][data-part='body']:not([data-xh-scrollbar]) {
+    scrollbar-gutter: stable;
+  }
+
+  /* 尾段：动作按钮排一行靠尾；同样不参与压缩 */
+  [data-scope='drawer'][data-part='footer'] {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--xh-drawer-footer-gap, var(--xh-control-gap-md));
+    padding-block-start: var(--xh-drawer-footer-pt, var(--xh-space-2));
+  }
+
+  /* 声明过 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  [data-scope='drawer'][data-part='header'][hidden],
+  [data-scope='drawer'][data-part='body'][hidden],
+  [data-scope='drawer'][data-part='footer'][hidden] {
+    display: none;
+  }
+
   [data-scope='drawer'][data-part='title'] {
     margin: 0;
     font-size: var(--xh-drawer-title-font-size, var(--xh-text-heading-3-size));
@@ -369,9 +451,10 @@
     color: var(--xh-drawer-title-fg, var(--xh-fg-default));
   }
 
+  /* 说明文字走说明档（§6.4）：13px + fg-muted */
   [data-scope='drawer'][data-part='description'] {
     margin: 0;
-    font-size: var(--xh-text-body-size);
+    font-size: var(--xh-drawer-description-font-size, var(--xh-text-secondary-size));
     color: var(--xh-drawer-description-fg, var(--xh-fg-muted));
   }
 
@@ -379,47 +462,38 @@
      否则长标题会直接钻到按钮底下。只在真有关闭按钮时让位。 */
   [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-space-3));
+    padding-inline-end: calc(var(--xh-drawer-close-size, var(--xh-control-h-sm)) + var(--xh-surface-action-inset));
   }
 
+  /*
+   * 关闭钮是面板角落的单图标钮（§9.1）：正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
+   * 由家族配方给出——白面上走画布承载阶梯悬停 --xh-bg-subtle（100）→ 按下 --xh-bg-subtle-hover（200），
+   * 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与摆放，
+   * 聚焦档的 -bg-focus / -fg-focus 两槽同样桥到配方的 focus-visible 面（与 dialog 一致），缺省仍是透明底与悬停字色；
+   * 静息前景取 muted 字色，悬停 / 按下回到 fg-default。
+   */
   [data-scope='drawer'][data-part='close-trigger'] {
+    --xh-action-visual-size: var(--xh-drawer-close-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-drawer-close-radius, var(--xh-shape-control));
+    --xh-action-bg-hover: var(--xh-drawer-close-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-drawer-close-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-drawer-close-bg-focus, var(--xh-_action-variant-bg-focus-visible));
+    --xh-action-fg-rest: var(--xh-drawer-close-fg, var(--xh-fg-muted));
+    --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));
+
     position: absolute;
-    inset-block-start: var(--xh-space-3);
-    inset-inline-end: var(--xh-space-3);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    block-size: var(--xh-drawer-close-size, var(--xh-control-h-sm));
-    inline-size: var(--xh-drawer-close-size, var(--xh-control-h-sm));
-    border: 0;
-    border-radius: var(--xh-drawer-close-radius, var(--xh-shape-control));
-    background: transparent;
-    color: var(--xh-fg-muted);
-    cursor: pointer;
-    transition:
-      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    inset-block-start: var(--xh-surface-action-inset);
+    inset-inline-end: var(--xh-surface-action-inset);
   }
 
   [data-scope='drawer'][data-part='close-trigger'][hidden] {
     display: none;
   }
 
-  [data-scope='drawer'][data-part='close-trigger']:hover {
-    background: var(--xh-drawer-close-bg-hover, var(--xh-bg-subtle-hover));
-    color: var(--xh-fg-default);
-  }
-
-  [data-scope='drawer'][data-part='close-trigger']:active {
-    background: var(--xh-drawer-close-bg-active, var(--xh-bg-subtle-active));
-    scale: var(--xh-motion-scale-press);
-  }
-
-  [data-scope='drawer'][data-part='close-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
   [data-scope='drawer'][data-part='close-trigger']:empty::before {
     content: '';
@@ -431,4 +505,13 @@
     -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
     mask: var(--xh-glyph-mark-close) center / contain no-repeat;
   }
+
+  @media print {
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
+       收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
+    [data-scope='drawer'][data-part='backdrop'],
+    [data-scope='drawer'][data-part='positioner'] {
+      display: none;
+    }
+  }
 }