@xihan-ui/styles 2.1.0 → 3.0.0

package/css/diff-view.css

@@ -5,6 +5,8 @@
 
 /* 定义 diff view 样式。 */
 
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
 /* 独立皮肤同时传递引入折叠格按钮的动作控件配方；full bundle 递归去重。 */
 @import '../family/action-control.css';
 
@@ -22,7 +24,7 @@
 
     /* 尺寸缺省档：不写 data-size 时的取值。三档都只写这三个私有槽，
        公开槽留在读处当首选，作者在祖先上设的覆盖才赢得过档位声明 */
-    --xh-_diff-view-font-size: var(--xh-control-font-sm);
+    --xh-_diff-view-font-size: var(--xh-control-font-md);
     --xh-_diff-view-px: var(--xh-space-3);
     --xh-_diff-view-py: var(--xh-space-2);
 
@@ -126,7 +128,7 @@
 
   /* 点开折叠格才露出来的那几行播一次入场；收起是硬切，不占一段退场窗口 */
   [data-scope='diff-view'][data-part='row'][data-revealed] {
-    animation: xh-diff-view-reveal var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+    animation: xh-drop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
   /* 行号是画上去的不是写上去的：复制差异不带它，读屏也不逐行念数字 */
@@ -341,6 +343,74 @@
     mask: var(--xh-glyph-mark-warning) center / contain no-repeat;
   }
 
+  /* 行评论：每格正文让出一列（一行高的正方格）给评论钮，没有钮的空侧也让，两侧代码才对得齐 */
+  [data-scope='diff-view'][data-part='root'][data-commentable] {
+    --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'] {
+    position: relative;
+    padding-inline-start: var(--xh-_diff-view-comment-col);
+  }
+
+  /* 评论钮接 Action Control icon 档、ghost 形态，边长压到一行高 */
+  [data-scope='diff-view'][data-part='comment-trigger'] {
+    --xh-action-visual-size: var(--xh-_diff-view-comment-col);
+    --xh-action-min-inline-size: var(--xh-_diff-view-comment-col);
+    --xh-action-radius: var(--xh-diff-view-comment-trigger-radius, var(--xh-shape-control));
+    --xh-action-fg-rest: var(--xh-diff-view-comment-trigger-fg, var(--xh-fg-muted));
+    --xh-icon-size: var(--xh-diff-view-comment-trigger-icon-size, var(--xh-glyph-size-sm));
+
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    block-size: var(--xh-_diff-view-comment-col);
+  }
+
+  [data-scope='diff-view'][data-part='comment-trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='diff-view'][data-part='comment-trigger']::before {
+    content: '';
+    display: block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-plus) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-plus) center / contain no-repeat;
+  }
+
+  /* 指针设备上平时透明（仍可聚焦），悬停到这一行或焦点进了视口才显出来；触屏上常显 */
+  @media (hover: hover) and (pointer: fine) {
+    [data-scope='diff-view'][data-part='comment-trigger'] {
+      --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'] {
+      --xh-action-opacity-rest: 1;
+    }
+  }
+
+  /* 挂在正文格里、代码下方的评论：一张静态内容面，文字按正文排，不随代码的变更色 */
+  [data-scope='diff-view'][data-part='comment-thread'] {
+    display: block;
+    box-sizing: border-box;
+    max-inline-size: var(--xh-diff-view-comment-thread-max-w, var(--xh-measure-prose));
+    margin-block: var(--xh-diff-view-comment-thread-my, var(--xh-space-2));
+    padding: var(--xh-diff-view-comment-thread-p, var(--xh-space-3));
+    border: var(--xh-stroke-thin) solid var(--xh-diff-view-comment-thread-border, var(--xh-border-default));
+    border-radius: var(--xh-diff-view-comment-thread-radius, var(--xh-shape-surface));
+    background: var(--xh-diff-view-comment-thread-bg, var(--xh-bg-surface));
+    color: var(--xh-diff-view-comment-thread-fg, var(--xh-fg-default));
+    white-space: normal;
+  }
+
+  [data-scope='diff-view'][data-part='comment-thread'][hidden] {
+    display: none;
+  }
+
   /* 尺寸档改字号、内衬与图标档 */
   [data-scope='diff-view'][data-part='root'][data-size='sm'] {
     --xh-icon-size: var(--xh-diff-view-icon-size, var(--xh-glyph-size-sm));
@@ -409,20 +479,35 @@
       outline: var(--xh-stroke-thick) dashed currentColor;
       outline-offset: calc(-1 * var(--xh-stroke-thick));
     }
+
+    /* 纸上按不了评论钮 */
+    [data-scope='diff-view'][data-part='comment-trigger'] {
+      display: none;
+    }
   }
-}
 
-@layer xihan.motion {
-  /* 露出来的行从上一行底下推出来：位移走幅度令牌，减弱动效档把它归零 */
-  @keyframes xh-diff-view-reveal {
-    from {
-      opacity: 0;
-      translate: 0 calc(-1 * var(--xh-motion-distance-sm));
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       落在 Canvas 面上的取 CanvasText；
+       禁用取 GrayText */
+    [data-scope='diff-view'][data-part='truncation']::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='diff-view'][data-part='comment-trigger']::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='diff-view'][data-part='comment-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed])::before {
+      background-color: HighlightText;
     }
 
-    to {
-      opacity: 1;
-      translate: 0 0;
+    [data-scope='diff-view'][data-part='comment-trigger'][data-disabled]::before {
+      background-color: GrayText;
     }
   }
 }

package/css/download-trigger.css

@@ -5,28 +5,10 @@
 
 /* 定义 download trigger 样式。 */
 
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
 @import '../family/action-control.css';
-
-@layer xihan.motion {
-  /* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
-  @keyframes xh-download-trigger-rotate {
-    to {
-      rotate: 360deg;
-    }
-  }
-
-  @keyframes xh-download-trigger-loading-reveal {
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes xh-download-trigger-content-hide {
-    to {
-      color: transparent;
-    }
-  }
-}
+@import '../family/loading-ring.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -68,6 +50,10 @@
     --xh-icon-size: var(--xh-download-trigger-icon-size, var(--xh-_action-profile-glyph-size));
     /* 取数在途那枚圆环的颜色：字被 content-hide 关键帧压成透明，环不能跟着 currentColor 走，取加载态的前景 */
     --xh-_download-trigger-loading-fg: var(--xh-download-trigger-loading-fg, var(--xh-download-trigger-fg, var(--xh-_action-variant-fg-loading)));
+    /* 取数在途的环由加载环配方压在钮正中（连接层投影 data-xh-loading-ring="overlay"），直径取钮的图标档；
+       起始边取钮在途时的真实前景，转速认使用者槽 */
+    --xh-_loading-ring-fg: var(--xh-_download-trigger-loading-fg);
+    --xh-_loading-ring-duration: var(--xh-download-trigger-loading-duration, var(--xh-motion-loop-spin));
 
     /* safe：文案放不下时居中改成靠行首排，裁掉的是末尾那截，开头仍然读得到 */
     justify-content: safe center;
@@ -92,9 +78,9 @@
   }
 
   /* 没写内容就由皮肤画兜底字形；作者往按钮里塞了文字或自己的图形，这几条即不命中。
-     字形另起一颗 ::after：::before 是转圈那枚圆环的方框，mask 会把描边裁成字形轮廓、圆环就此消失。
-     取数在途那一档不画字形，那一格让给圆环 */
-  [data-scope='download-trigger'][data-part='root']:empty:not([aria-busy='true'])::after {
+     字形另起一颗 ::after：::before 是加载环，mask 会把描边裁成字形轮廓、环就此消失。
+     字形取前景色：取数在途时随前景一起淡到透明，把位置让给环 */
+  [data-scope='download-trigger'][data-part='root']:empty::after {
     content: '';
     display: inline-block;
     inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
@@ -105,72 +91,33 @@
     mask: var(--xh-glyph-mark-download) center / contain no-repeat;
   }
 
-  /* 快速取数不显示瞬时圆环；超过一个 micro 周期后才在原位换成加载状态。 */
-  [data-scope='download-trigger'][data-part='root'][data-state='preparing'][aria-busy='true'] {
-    cursor: progress;
-    animation: xh-download-trigger-content-hide var(--xh-motion-duration-micro) var(--xh-motion-ease-enter)
-      var(--xh-motion-duration-micro) forwards;
-  }
-
-  [data-scope='download-trigger'][data-part='root'][aria-busy='true']::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    inline-size: 1em;
-    block-size: 1em;
-    margin: auto;
-    border: var(--xh-stroke-thin) solid transparent;
-    border-block-start-color: var(--xh-_download-trigger-loading-fg);
-    /* 正圆的加载环：正方盒取 circle */
-    border-radius: var(--xh-shape-circle);
-    opacity: 0;
-    animation:
-      xh-download-trigger-rotate var(--xh-download-trigger-loading-duration, var(--xh-spin-duration)) var(--xh-motion-ease-loop) infinite,
-      xh-download-trigger-loading-reveal var(--xh-motion-duration-micro) var(--xh-motion-ease-enter) var(--xh-motion-duration-micro) forwards;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='download-trigger'][data-part='root'][aria-busy='true'] {
-      color: transparent;
-      animation: none;
-    }
-
-    [data-scope='download-trigger'][data-part='root'][aria-busy='true']::before {
-      border-style: dotted;
-      border-color: var(--xh-_download-trigger-loading-fg);
-      opacity: 1;
-      animation: none;
-    }
-  }
-
-  :where([data-motion='reduce']) [data-scope='download-trigger'][data-part='root'][aria-busy='true'] {
-    color: transparent;
-    animation: none;
-  }
+  /* 取数在途：钮里原有的文字与字形随前景淡到透明留位，进入在途等一个 micro 才起淡（快速取数什么都不闪），
+     与环同一段等待；退出在途不等，按 micro 淡回。环的前景另由私有槽给，不跟着透明 */
+  [data-scope='download-trigger'][data-part='root'][data-loading] {
+    --xh-action-fg-loading: transparent;
 
-  :where([data-motion='reduce']) [data-scope='download-trigger'][data-part='root'][aria-busy='true']::before {
-    border-style: dotted;
-    border-color: var(--xh-_download-trigger-loading-fg);
-    opacity: 1;
-    animation: none;
+    transition-delay: var(--xh-motion-duration-micro);
   }
 
   /* 手指落点：配方 text 档用 ::after 把块轴命中区扩到 44px；没写内容的按钮 ::after 已被兜底字形占着，
-     这一档改用当时空着的 ::before 扩——取数在途时字形不画、::before 是圆环，配方的 ::after 又能落下来，
-     两颗伪元素轮着用。字形那条只写了尺寸与 mask，配方的定位、44px 下限与 -50% 平移会从同一个
+     这一档改用不在途时的 ::before 扩——取数在途时 ::before 是加载环，钮也按不动，不再需要热区。字形那条只写了尺寸与 mask，配方的定位、44px 下限与 -50% 平移会从同一个
      ::after 漏进来：字形被拎出行内流、盒撑到 44px 高，按钮随之收窄一格字形——这里逐项钉回 */
   @media (pointer: coarse) {
-    [data-scope='download-trigger'][data-part='root']:empty:not([aria-busy='true'])::after {
+    [data-scope='download-trigger'][data-part='root']:empty::after {
       position: static;
       min-block-size: 0;
       translate: none;
     }
 
-    [data-scope='download-trigger'][data-part='root']:empty:not([aria-busy='true'])::before {
+    /* 热区收下加载环的几何：环的描边不画、指针照接；退出在途时环在这一档直接收起，不留一圈放大的环淡出 */
+    [data-scope='download-trigger'][data-part='root']:empty:not([data-loading])::before {
       content: '';
       position: absolute;
-      inset-block-start: 50%;
-      inset-inline-start: 50%;
+      border-color: transparent;
+      margin: 0;
+      pointer-events: auto;
+      inset-block: 50% auto;
+      inset-inline: 50% auto;
       min-block-size: 44px;
       inline-size: 100%;
       block-size: 100%;
@@ -178,8 +125,27 @@
     }
 
     /* 与家族同一笔：起点是逻辑属性、平移是物理通道，rtl 下行内分量掉头，热区才落回按钮中心 */
-    [data-scope='download-trigger'][data-part='root']:empty:not([aria-busy='true']):dir(rtl)::before {
+    [data-scope='download-trigger'][data-part='root']:empty:not([data-loading]):dir(rtl)::before {
       translate: 50% -50%;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='download-trigger'][data-part='root']:empty::after {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='download-trigger'][data-part='root']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::after {
+      background-color: HighlightText;
+    }
+
+    [data-scope='download-trigger'][data-part='root'][data-disabled]:empty::after {
+      background-color: GrayText;
+    }
+  }
 }

package/css/drawer.css

@@ -9,95 +9,6 @@
 @import '../family/motion.css';
 @import '../family/action-control.css';
 
-@layer xihan.motion {
-  /* 四条边各一对滑入/滑出。位移量用 translate 的百分比，参照的是面板自己的边框盒，
-     所以不管 --xh-drawer-size 被改成多少，"正好推到视口外"这件事都成立。
-
-     位移写成两个私有槽位而不是写死 ±100%：贴边用的是逻辑 inset（inset-inline-start 等），
-     RTL 下 inline-end 落在物理左边；transform 没有逻辑等价物，若这里写死物理方向，
-     就会出现"面板贴在左边、却从右边滑进来"。槽位在 RTL 下翻符号，两者才始终同向。
-     竖排书写模式下 block 轴不再是 Y 轴，位移会退化为纵向，但贴边本身仍由逻辑 inset 保证。 */
-  @keyframes xh-drawer-in-right {
-    from {
-      translate: var(--xh-_drawer-shift-inline, 100%) 0;
-    }
-
-    to {
-      translate: 0 0;
-    }
-  }
-
-  @keyframes xh-drawer-out-right {
-    from {
-      translate: 0 0;
-    }
-
-    to {
-      translate: var(--xh-_drawer-shift-inline, 100%) 0;
-    }
-  }
-
-  @keyframes xh-drawer-in-left {
-    from {
-      translate: calc(-1 * var(--xh-_drawer-shift-inline, 100%)) 0;
-    }
-
-    to {
-      translate: 0 0;
-    }
-  }
-
-  @keyframes xh-drawer-out-left {
-    from {
-      translate: 0 0;
-    }
-
-    to {
-      translate: calc(-1 * var(--xh-_drawer-shift-inline, 100%)) 0;
-    }
-  }
-
-  @keyframes xh-drawer-in-top {
-    from {
-      translate: 0 calc(-1 * var(--xh-_drawer-shift-block, 100%));
-    }
-
-    to {
-      translate: 0 0;
-    }
-  }
-
-  @keyframes xh-drawer-out-top {
-    from {
-      translate: 0 0;
-    }
-
-    to {
-      translate: 0 calc(-1 * var(--xh-_drawer-shift-block, 100%));
-    }
-  }
-
-  @keyframes xh-drawer-in-bottom {
-    from {
-      translate: 0 var(--xh-_drawer-shift-block, 100%);
-    }
-
-    to {
-      translate: 0 0;
-    }
-  }
-
-  @keyframes xh-drawer-out-bottom {
-    from {
-      translate: 0 0;
-    }
-
-    to {
-      translate: 0 var(--xh-_drawer-shift-block, 100%);
-    }
-  }
-}
-
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='drawer'] {
@@ -209,7 +120,8 @@
     background: transparent;
   }
 
-  [data-scope='drawer'][data-part='backdrop'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，遮罩与面板都直接呈现 */
+  [data-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);
   }
 
@@ -235,9 +147,9 @@
      不构成固定定位的包含块，两种结构下参照的都是视口，位置一致；
      contained 时上面那条把它一并换成 absolute，参照的就是作者那个容器。 */
   [data-scope='drawer'][data-part='content'] {
-    /* 位移方向的私有槽位：默认按 LTR，RTL 在下面整体翻符号 */
-    --xh-_drawer-shift-inline: 100%;
-    --xh-_drawer-shift-block: 100%;
+    /* 位移方向的私有槽位：默认按 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 也是同一个道理） */
@@ -276,7 +188,7 @@
   }
 
   [data-scope='drawer'][data-part='content']:dir(rtl) {
-    --xh-_drawer-shift-inline: -100%;
+    --xh-_drawer-shift-inline: calc(-1 * var(--xh-motion-travel));
   }
 
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致。
@@ -312,7 +224,8 @@
   [data-scope='drawer'][data-part='content'][data-side='left'],
   [data-scope='drawer'][data-part='content'][data-side='right'] {
     inset-block: 0;
-    inline-size: var(--xh-drawer-size, var(--xh-_drawer-size));
+    /* 调过厚度就按连接层写进私有槽的像素走，压过 size 档与使用者槽 */
+    inline-size: var(--xh-_drawer-panel-size, var(--xh-drawer-size, var(--xh-_drawer-size)));
     /* 视口比抽屉还窄时让位，否则面板会顶出一条横向滚动条 */
     max-inline-size: 100%;
   }
@@ -334,7 +247,7 @@
   [data-scope='drawer'][data-part='content'][data-side='top'],
   [data-scope='drawer'][data-part='content'][data-side='bottom'] {
     inset-inline: 0;
-    block-size: var(--xh-drawer-size, var(--xh-_drawer-size));
+    block-size: var(--xh-_drawer-panel-size, var(--xh-drawer-size, var(--xh-_drawer-size)));
     max-block-size: 100%;
   }
 
@@ -350,39 +263,44 @@
     border-start-end-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
   }
 
-  /* 滑入/滑出按边配对。入场是整面板从画外推入的大尺度位移：走 --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-slide) var(--xh-motion-ease-slide);
-  }
-
-  [data-scope='drawer'][data-part='content'][data-side='right'][data-state='closed'] {
-    animation: xh-drawer-out-right var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
-  }
+  /* 滑入/滑出共用整幅滑入关键帧，四条边只在两个方向槽里写起点。位移取整幅位移令牌，
+     translate 的百分比参照面板自己的边框盒，所以不管 --xh-drawer-size 被改成多少，
+     "正好推到视口外"这件事都成立。
 
-  [data-scope='drawer'][data-part='content'][data-side='left'][data-state='open'] {
-    animation: xh-drawer-in-left var(--xh-motion-duration-slide) var(--xh-motion-ease-slide);
+     方向槽由上面的 --xh-_drawer-shift-* 换算而不是写死物理方向：贴边用的是逻辑 inset
+     （inset-inline-start 等），RTL 下 inline-end 落在物理左边；translate 没有逻辑等价物，
+     若这里写死物理方向，就会出现"面板贴在左边、却从右边滑进来"。shift 槽在 RTL 下翻符号，
+     两者才始终同向。竖排书写模式下 block 轴不再是 Y 轴，位移会退化为纵向，但贴边本身仍由逻辑 inset 保证。 */
+  [data-scope='drawer'][data-part='content'][data-side='right'] {
+    --xh-_slide-from-x: var(--xh-_drawer-shift-inline);
   }
 
-  [data-scope='drawer'][data-part='content'][data-side='left'][data-state='closed'] {
-    animation: xh-drawer-out-left var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  [data-scope='drawer'][data-part='content'][data-side='left'] {
+    --xh-_slide-from-x: calc(-1 * var(--xh-_drawer-shift-inline));
   }
 
-  [data-scope='drawer'][data-part='content'][data-side='top'][data-state='open'] {
-    animation: xh-drawer-in-top var(--xh-motion-duration-slide) var(--xh-motion-ease-slide);
+  [data-scope='drawer'][data-part='content'][data-side='top'] {
+    --xh-_slide-from-y: calc(-1 * var(--xh-_drawer-shift-block));
   }
 
-  [data-scope='drawer'][data-part='content'][data-side='top'][data-state='closed'] {
-    animation: xh-drawer-out-top var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  [data-scope='drawer'][data-part='content'][data-side='bottom'] {
+    --xh-_slide-from-y: var(--xh-_drawer-shift-block);
   }
 
-  [data-scope='drawer'][data-part='content'][data-side='bottom'][data-state='open'] {
-    animation: xh-drawer-in-bottom var(--xh-motion-duration-slide) var(--xh-motion-ease-slide);
+  /* 入场是整面板从画外推入的大尺度位移：走 --xh-motion-duration-slide 与 --xh-motion-ease-slide；
+     退场仍走 exit 档。并列的一段淡变取淡变档：缺省起止都是不透明、看不出来，减弱动效下
+     整幅位移归零、进出场由它表达。退场一律 forwards：presence 要等 animationend 才卸载，
+     不定住终态，面板会在最后一帧弹回原位再消失。 */
+  [data-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);
   }
 
-  [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;
+  [data-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;
   }
 
   /* —— 面板三段 —— */
@@ -500,12 +418,135 @@
     mask: var(--xh-glyph-mark-close) center / contain no-repeat;
   }
 
+  /* —— 改尺 ——
+     把手是一条透明的命中区，贴在朝向页面的那条边上，中间一段指示条标出这里能推：
+     左右放置时是竖条、上下放置时是横条。贴边用逻辑属性：right 贴的是行尾侧，把手落在行首那条边，
+     与机器按书写方向翻转推动方向同源。厚度跟手，不挂过渡 */
+  [data-scope='drawer'][data-part='content'][data-resizing] {
+    user-select: none;
+  }
+
+  [data-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;
+  }
+
+  [data-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);
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger']:hover {
+    --xh-_drawer-resize-indicator: var(--xh-drawer-resize-trigger-bg-hover, var(--xh-border-control-hover));
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger'][data-resizing] {
+    --xh-_drawer-resize-indicator: var(--xh-drawer-resize-trigger-bg-active, var(--xh-bg-brand));
+  }
+
+  /* 键盘落在把手上时指示条换成焦点色：命中区贴着面板边，外扩的环会压到页面上 */
+  [data-scope='drawer'][data-part='resize-trigger']:focus-visible {
+    --xh-_drawer-resize-indicator: var(--xh-ring-focus);
+
+    outline: none;
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger'][data-side='left'],
+  [data-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;
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger'][data-side='right'] {
+    inset-inline-start: 0;
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger'][data-side='left'] {
+    inset-inline-end: 0;
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger'][data-side='top'],
+  [data-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;
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger'][data-side='top'] {
+    inset-block-end: 0;
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger'][data-side='bottom'] {
+    inset-block-start: 0;
+  }
+
+  [data-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));
+  }
+
+  [data-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));
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 强制色下指示条的底色会被系统色吃掉：改画成正文色，调整中与聚焦时取高亮色 */
+  @media (forced-colors: active) {
+    [data-scope='drawer'][data-part='resize-trigger']::after {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+
+    [data-scope='drawer'][data-part='resize-trigger']:is([data-resizing], :focus-visible)::after {
+      background: Highlight;
+    }
+  }
+
   @media print {
     /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
        收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
     [data-scope='drawer'][data-part='backdrop'],
-    [data-scope='drawer'][data-part='positioner'] {
+    [data-scope='drawer'][data-part='positioner'],
+    [data-scope='drawer'][data-part='resize-trigger'] {
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='drawer'][data-part='close-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='drawer'][data-part='close-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='drawer'][data-part='close-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }