@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/drawer.css

@@ -0,0 +1,606 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 drawer 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/action-control.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-drawer {
+    --xh-drawer-skin: 1;
+  }
+
+  /* root 留在页面原地，只是 data-side / data-state 的落点，不该凭空多出一层盒子把
+     trigger 从作者的 flex / grid 行里挤出去，故 display: contents。 */
+  .xh-scope-drawer[data-part='root'] {
+    /* 作者塞进面板里的图标按控件档取；触发器与关闭钮另由家族配方按各自的档下发字形尺 */
+    --xh-icon-size: var(--xh-drawer-icon-size, var(--xh-glyph-size-md));
+
+    display: contents;
+  }
+
+  /* 浮层被搬到 portal 落点，继承不到 root 上的槽：这把尺在被搬走的那一侧再声明一次，
+     作者塞进面板里的图标才和皮肤画的兜底字形一样大 */
+  .xh-scope-drawer[data-part='content'] {
+    --xh-icon-size: var(--xh-drawer-icon-size, var(--xh-glyph-size-md));
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，作者手写 hidden 时得还回去 */
+  .xh-scope-drawer[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /*
+   * 触发器是页面上的独立文字按钮：盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
+   * 由家族配方按连接层投影的 data-xh-action-variant / -size 给出（此前自写描边盒型，hover 落 200 / active 落 300）。
+   * 这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与几何槽映射。
+   */
+  .xh-scope-drawer[data-part='trigger'] {
+    --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));
+  }
+
+  .xh-scope-drawer[data-part='trigger'][hidden] {
+    display: none;
+  }
+
+  /* 抽屉展开期间触发按钮压住不弹起：面板贴在视口边上，它和按钮往往离得很远，
+     按钮自己得说明"这一扇是我开的"。open 与家族 hover 同档中性：
+     白底承载的 --xh-bg-subtle（100）+ 悬停描边，聚焦时这块面留着 */
+  .xh-scope-drawer[data-part='trigger'][data-state='open'] {
+    --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));
+  }
+
+  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色 */
+  .xh-scope-drawer[data-part='trigger'][data-xh-action-variant='solid']:focus-visible {
+    --xh-action-ring-color-focus-visible: currentColor;
+  }
+
+  .xh-scope-drawer[data-part='backdrop'] {
+    position: fixed;
+    inset: 0;
+    z-index: var(--xh-drawer-backdrop-layer, var(--xh-_layer, var(--xh-layer-drawer)));
+    background: var(--xh-drawer-backdrop-bg, var(--xh-bg-overlay));
+  }
+
+  /* 挂在局部容器里：遮罩、定位层与面板一起从视口坐标换成容器坐标，只罩住那个容器。
+     作者要给那个容器加 position（relative 之类），否则 absolute 会往上找到别的定位祖先——
+     这一条写进了示例与 props 说明。
+     content 必须一起换：它的贴边是 inset-block/inline 参照包含块算的，留在 fixed 上就会
+     照旧贴视口边，遮罩缩进容器、面板却跑到屏幕边上——与 contained 的承诺正好相反 */
+  .xh-scope-drawer[data-part='backdrop'][data-contained],
+  .xh-scope-drawer[data-part='positioner'][data-contained],
+  .xh-scope-drawer[data-part='content'][data-contained] {
+    position: absolute;
+  }
+
+  /* 挂在局部容器里的面板碰不到屏幕边，安全区那一段让位收回去：留着会在容器内白让出一条。
+     三段排版读的那几支安全区私有槽一并归零 */
+  .xh-scope-drawer[data-part='content'][data-contained] {
+    --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 同写法，两个前缀都写 */
+  .xh-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)));
+  }
+
+  /* 去掉底色，只留下这一层吃指针：交互外关闭与滚动锁定照旧 */
+  .xh-scope-drawer[data-part='backdrop'][data-variant='transparent'] {
+    background: transparent;
+  }
+
+  /* 挂载时就开着的那一段（data-instant）属于首帧，遮罩与面板都直接呈现 */
+  .xh-scope-drawer[data-part='backdrop'][data-state='open']:not([data-instant]) {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* 退场补 forwards：动画播完到宿主真正卸载之间还有一帧，不定住终态遮罩会闪回全黑 */
+  .xh-scope-drawer[data-part='backdrop'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* positioner 只负责把浮层抬到抽屉层，贴边一概不管（原因见 content）。
+     铺满视口是为了在自己这层里罩住 content，但不吃指针：非模态抽屉展开时
+     页面其余部分还要能点，模态的拦截由 backdrop 负责。 */
+  .xh-scope-drawer[data-part='positioner'] {
+    position: fixed;
+    inset: 0;
+    z-index: var(--xh-drawer-layer, var(--xh-_layer, var(--xh-layer-drawer)));
+    pointer-events: none;
+  }
+
+  /* 贴边写在 content 自己身上，而不是交给 positioner：
+     positioner 在抽屉里不是必需部件，最小合规结构只有 root + content，
+     贴边若挂在 positioner 上，那种结构下面板会直接塌回文档流。
+     非 contained 时 content 是 fixed，包住它的 positioner 没有 transform / filter，
+     不构成固定定位的包含块，两种结构下参照的都是视口，位置一致；
+     contained 时上面那条把它一并换成 absolute，参照的就是作者那个容器。 */
+  .xh-scope-drawer[data-part='content'] {
+    /* 位移方向的私有槽位：默认按 LTR，RTL 在下面整体翻符号。幅度取整幅位移令牌，减弱动效下归零 */
+    --xh-_drawer-shift-inline: var(--xh-motion-travel);
+    --xh-_drawer-shift-block: var(--xh-motion-travel);
+    /* 尺寸档只换这一个私有槽：左右放置时它是面板宽度、上下放置时是面板高度，
+       两种取法都在下面「四条边」那两条规则里。声明在 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，取值与内衬槽完全一致。 */
+    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-sm)),
+      env(safe-area-inset-left),
+      env(safe-area-inset-right)
+    );
+    /* 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));
+    box-shadow: var(--xh-drawer-shadow, var(--xh-material-elevated-shadow));
+    /* 作者不用 header / body / footer 三段时它是唯一的滚动层：模态面滚到头不把页面一起带走 */
+    overflow: auto;
+    overscroll-behavior: contain;
+    /* 尺寸是照视口那条边算出来的，padding 再往外顶就会把面板挤出屏幕、
+       逼出一条横向滚动条。reset 层已有同款兜底，这里显式写一遍表明尺寸算法依赖它 */
+    box-sizing: border-box;
+    /* positioner 整层不吃指针，面板得自己收回来 */
+    pointer-events: auto;
+  }
+
+  .xh-scope-drawer[data-part='content']:dir(rtl) {
+    --xh-_drawer-shift-inline: calc(-1 * var(--xh-motion-travel));
+  }
+
+  /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致。
+     收起态连接层会给 content 打 hidden，而上面这条 display: flex 正是要盖掉
+     UA 的 [hidden]{display:none}——退场动画得先能播：
+     presence 读的是 content 的 animationName，读到就申领租约、等 animationend 才卸载；
+     一旦 display: none，元素不生成盒子、动画根本不启动，退场探测器会直接放弃申领
+     （否则就要等一个永不到来的 animationend），面板不播动画就地卸载。
+     真正的收起两个适配器各自兜住了：Vue 卸载整棵，WC 写内联 style.display。
+     其余声明了 display 的角色节点仍补了 [hidden]，那几处没有退场动画，作者手写 hidden 要生效。 */
+
+  /* 面板是焦点陷阱的兜底落点（tabindex="-1"），落焦不画环：环长在里面的可聚焦控件上 */
+  .xh-scope-drawer[data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  /* —— 尺寸 —— */
+  /* 只有面板厚度分档；中间档不写规则，缺省即中档。
+     data-size 与 data-side 一样同时打在 root 与 content 上，这里只认 content 自己那一份。 */
+  .xh-scope-drawer[data-part='content'][data-size='sm'] {
+    --xh-_drawer-size: var(--xh-overlay-drawer-w-sm);
+  }
+
+  .xh-scope-drawer[data-part='content'][data-size='lg'] {
+    --xh-_drawer-size: var(--xh-overlay-drawer-w-lg);
+  }
+
+  /* —— 四条边 ——
+     data-side 同时打在 root 与 content 上；content 会被 portal 到 body，
+     选择器只认得 content 自己身上这一份。 */
+
+  /* 左右：满高、定宽 */
+  .xh-scope-drawer[data-part='content'][data-side='left'],
+  .xh-scope-drawer[data-part='content'][data-side='right'] {
+    inset-block: 0;
+    /* 调过厚度就按连接层写进私有槽的像素走，压过 size 档与使用者槽 */
+    inline-size: var(--xh-_drawer-panel-size, var(--xh-drawer-size, var(--xh-_drawer-size)));
+    /* 视口比抽屉还窄时让位，否则面板会顶出一条横向滚动条 */
+    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));
+    border-end-end-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
+  }
+
+  .xh-scope-drawer[data-part='content'][data-side='right'] {
+    inset-inline-end: 0;
+    border-start-start-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
+    border-end-start-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
+  }
+
+  /* 上下：满宽、定高 */
+  .xh-scope-drawer[data-part='content'][data-side='top'],
+  .xh-scope-drawer[data-part='content'][data-side='bottom'] {
+    inset-inline: 0;
+    block-size: var(--xh-_drawer-panel-size, var(--xh-drawer-size, var(--xh-_drawer-size)));
+    max-block-size: 100%;
+  }
+
+  .xh-scope-drawer[data-part='content'][data-side='top'] {
+    inset-block-start: 0;
+    border-end-start-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
+    border-end-end-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
+  }
+
+  .xh-scope-drawer[data-part='content'][data-side='bottom'] {
+    inset-block-end: 0;
+    border-start-start-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
+    border-start-end-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
+  }
+
+  /* 滑入/滑出共用整幅滑入关键帧，四条边只在两个方向槽里写起点。位移取整幅位移令牌，
+     translate 的百分比参照面板自己的边框盒，所以不管 --xh-drawer-size 被改成多少，
+     "正好推到视口外"这件事都成立。
+
+     方向槽由上面的 --xh-_drawer-shift-* 换算而不是写死物理方向：贴边用的是逻辑 inset
+     （inset-inline-start 等），RTL 下 inline-end 落在物理左边；translate 没有逻辑等价物，
+     若这里写死物理方向，就会出现"面板贴在左边、却从右边滑进来"。shift 槽在 RTL 下翻符号，
+     两者才始终同向。竖排书写模式下 block 轴不再是 Y 轴，位移会退化为纵向，但贴边本身仍由逻辑 inset 保证。 */
+  .xh-scope-drawer[data-part='content'][data-side='right'] {
+    --xh-_slide-from-x: var(--xh-_drawer-shift-inline);
+  }
+
+  .xh-scope-drawer[data-part='content'][data-side='left'] {
+    --xh-_slide-from-x: calc(-1 * var(--xh-_drawer-shift-inline));
+  }
+
+  .xh-scope-drawer[data-part='content'][data-side='top'] {
+    --xh-_slide-from-y: calc(-1 * var(--xh-_drawer-shift-block));
+  }
+
+  .xh-scope-drawer[data-part='content'][data-side='bottom'] {
+    --xh-_slide-from-y: var(--xh-_drawer-shift-block);
+  }
+
+  /* 入场是整面板从画外推入的大尺度位移：走 --xh-motion-duration-slide 与 --xh-motion-ease-slide；
+     退场仍走 exit 档。并列的一段淡变取淡变档：缺省起止都是不透明、看不出来，减弱动效下
+     整幅位移归零、进出场由它表达。退场一律 forwards：presence 要等 animationend 才卸载，
+     不定住终态，面板会在最后一帧弹回原位再消失。 */
+  .xh-scope-drawer[data-part='content'][data-state='open']:not([data-instant]) {
+    animation:
+      xh-slide-in var(--xh-motion-duration-slide) var(--xh-motion-ease-slide),
+      xh-slide-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-drawer[data-part='content'][data-state='closed'] {
+    animation:
+      xh-slide-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards,
+      xh-slide-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* —— 面板三段 —— */
+  /* header / body / footer 把面板切成「头尾定在原处、正文自己滚」三段，
+     与弹窗、浮动面板同一套角色划分：头尾不参与压缩，正文吃掉剩下的高度并自己滚。
+     分三段时面板一层只让出安全区，设计内衬由三段各自给：头下、尾上的分隔线才能贴着面板两侧的边；
+     整块的滚动交还给正文段——两层都能滚时滚轮落在哪一层要看指针停在哪，
+     贴边的头尾会跟着一起走。 */
+  .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;
+  }
+
+  /* 头段：标题与说明纵向堆叠；不参与压缩，正文再长也压不扁它 */
+  .xh-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));
+  }
+
+  /* 三段结构的头：一条 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 层统一给，滚到头不把页面一起带走。
+     内衬纵 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));
+  }
+
+  /* 正文高度随交互变化（表单校验、展开段落）：还在用原生滚动条的正文留一条稳定空道，
+     滚动条出现与消失时不推动文字。带 data-xh-scrollbar 的容器已经把原生条藏成零宽，排除掉 */
+  .xh-scope-drawer[data-part='body']:not([data-xh-scrollbar]) {
+    scrollbar-gutter: stable;
+  }
+
+  /* 尾段：动作按钮排一行靠尾；同样不参与压缩 */
+  .xh-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));
+  }
+
+  /* 三段结构的尾：纵 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],
+  .xh-scope-drawer[data-part='footer'][hidden] {
+    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));
+  }
+
+  /* 说明文字走说明档：13px + fg-muted */
+  .xh-scope-drawer[data-part='description'] {
+    margin: 0;
+    font-size: var(--xh-drawer-description-font-size, var(--xh-text-secondary-size));
+    color: var(--xh-drawer-description-fg, var(--xh-fg-muted));
+  }
+
+  /* 关闭按钮是绝对定位的，不占流内宽度：标题得自己让出那块角，
+     否则长标题会直接钻到按钮底下。只在真有关闭按钮时让位。 */
+  .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-space-4));
+  }
+
+  /*
+   * 关闭钮是面板角落的单图标钮：正方盒、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));
+    --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)));
+    /* 作者塞进按钮的图标与皮肤画的兜底叉同一把尺 */
+    --xh-icon-size: var(--xh-drawer-icon-size, var(--xh-glyph-size-xs));
+
+    position: absolute;
+    /* 钮的视觉盒在头部带里竖向居中：按钮自己的边长从带高里扣掉再对半 */
+    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] {
+    display: none;
+  }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  .xh-scope-drawer[data-part='close-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+  }
+
+  /* —— 改尺 ——
+     把手是一条透明的命中区，贴在朝向页面的那条边上，中间一段指示条标出这里能推：
+     左右放置时是竖条、上下放置时是横条。贴边用逻辑属性：right 贴的是行尾侧，把手落在行首那条边，
+     与机器按书写方向翻转推动方向同源。厚度跟手，不挂过渡 */
+  .xh-scope-drawer[data-part='content'][data-resizing] {
+    user-select: none;
+  }
+
+  .xh-scope-drawer[data-part='resize-trigger'] {
+    --xh-_drawer-resize-indicator: var(--xh-drawer-resize-trigger-bg, var(--xh-border-control));
+
+    position: absolute;
+    display: block;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    touch-action: none;
+  }
+
+  .xh-scope-drawer[data-part='resize-trigger']::after {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    border-radius: var(--xh-drawer-resize-trigger-radius, var(--xh-shape-pill));
+    background: var(--xh-_drawer-resize-indicator);
+    pointer-events: none;
+    /* 起点是逻辑属性、平移是物理通道：行内分量乘方向符号，RTL 下指示条才落回把手正中 */
+    translate: calc(-50% * var(--xh-direction-sign)) -50%;
+    transition: background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-drawer[data-part='resize-trigger']:hover {
+    --xh-_drawer-resize-indicator: var(--xh-drawer-resize-trigger-bg-hover, var(--xh-border-control-hover));
+  }
+
+  .xh-scope-drawer[data-part='resize-trigger'][data-resizing] {
+    --xh-_drawer-resize-indicator: var(--xh-drawer-resize-trigger-bg-active, var(--xh-bg-brand));
+  }
+
+  /* 键盘落在把手上时指示条换成焦点色：命中区贴着面板边，外扩的环会压到页面上 */
+  .xh-scope-drawer[data-part='resize-trigger']:focus-visible {
+    --xh-_drawer-resize-indicator: var(--xh-ring-focus);
+
+    outline: none;
+  }
+
+  .xh-scope-drawer[data-part='resize-trigger'][data-side='left'],
+  .xh-scope-drawer[data-part='resize-trigger'][data-side='right'] {
+    inset-block: 0;
+    inline-size: var(--xh-drawer-resize-trigger-size, var(--xh-space-2));
+    cursor: ew-resize;
+  }
+
+  .xh-scope-drawer[data-part='resize-trigger'][data-side='right'] {
+    inset-inline-start: 0;
+  }
+
+  .xh-scope-drawer[data-part='resize-trigger'][data-side='left'] {
+    inset-inline-end: 0;
+  }
+
+  .xh-scope-drawer[data-part='resize-trigger'][data-side='top'],
+  .xh-scope-drawer[data-part='resize-trigger'][data-side='bottom'] {
+    inset-inline: 0;
+    block-size: var(--xh-drawer-resize-trigger-size, var(--xh-space-2));
+    cursor: ns-resize;
+  }
+
+  .xh-scope-drawer[data-part='resize-trigger'][data-side='top'] {
+    inset-block-end: 0;
+  }
+
+  .xh-scope-drawer[data-part='resize-trigger'][data-side='bottom'] {
+    inset-block-start: 0;
+  }
+
+  .xh-scope-drawer[data-part='resize-trigger']:is([data-side='left'], [data-side='right'])::after {
+    inline-size: var(--xh-drawer-resize-indicator-thickness, var(--xh-stroke-strong));
+    block-size: var(--xh-drawer-resize-indicator-length, var(--xh-space-8));
+  }
+
+  .xh-scope-drawer[data-part='resize-trigger']:is([data-side='top'], [data-side='bottom'])::after {
+    inline-size: var(--xh-drawer-resize-indicator-length, var(--xh-space-8));
+    block-size: var(--xh-drawer-resize-indicator-thickness, var(--xh-stroke-strong));
+  }
+
+  .xh-scope-drawer[data-part='resize-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 强制色下指示条的底色会被系统色吃掉：改画成正文色，调整中与聚焦时取高亮色 */
+  @media (forced-colors: active) {
+    .xh-scope-drawer[data-part='resize-trigger']::after {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+
+    .xh-scope-drawer[data-part='resize-trigger']:is([data-resizing], :focus-visible)::after {
+      background: Highlight;
+    }
+  }
+
+  @media print {
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
+       收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
+    .xh-scope-drawer[data-part='backdrop'],
+    .xh-scope-drawer[data-part='positioner'],
+    .xh-scope-drawer[data-part='resize-trigger'] {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    .xh-scope-drawer[data-part='close-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-scope-drawer[data-part='close-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-drawer[data-part='close-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
+}