@xihan-ui/styles 2.1.0 → 3.1.0

package/css/dialog.css

@@ -9,38 +9,6 @@
 @import '../family/motion.css';
 @import '../family/action-control.css';
 
-@layer xihan.motion {
-  /* 幅度走令牌，减弱动效时由令牌层归零；位移与缩放用独立属性而非 transform 简写，
-     两者互不覆盖，手势期间写 translate 也不会把 scale 抹掉 */
-  @keyframes xh-dialog-in {
-    from {
-      opacity: 0;
-      translate: 0 var(--xh-motion-distance-md);
-      scale: var(--xh-motion-scale-enter);
-    }
-
-    to {
-      opacity: 1;
-      translate: 0 0;
-      scale: 1;
-    }
-  }
-
-  @keyframes xh-dialog-out {
-    from {
-      opacity: 1;
-      translate: 0 0;
-      scale: 1;
-    }
-
-    to {
-      opacity: 0;
-      translate: 0 var(--xh-motion-distance-md);
-      scale: var(--xh-motion-scale-exit);
-    }
-  }
-}
-
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='dialog'] {
@@ -80,7 +48,7 @@
     background: transparent;
   }
 
-  [data-scope='dialog'][data-part='backdrop'][data-state='open'] {
+  [data-scope='dialog'][data-part='backdrop'][data-state='open']:not([data-instant]) {
     animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
@@ -178,12 +146,77 @@
     outline: none;
   }
 
-  [data-scope='dialog'][data-part='content'][data-state='open'] {
-    animation: xh-dialog-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='dialog'][data-part='content'][data-state='open']:not([data-instant]) {
+    animation: xh-sheet-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
   [data-scope='dialog'][data-part='content'][data-state='closed'] {
-    animation: xh-dialog-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+    animation: xh-sheet-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* —— 拖动 ——
+     位移由连接层写进两个私有槽，是屏幕坐标：跟着指针与方向键走，RTL 下不翻。
+     进出场关键帧占着 translate 与 scale 两个独立属性，位移只能走 transform：它排在独立属性之后合成，
+     与进出场叠在一起。写进 translate 的话，拖过的面板一收起就先被关键帧拽回居中再退场。
+     位移跟手，不挂过渡 */
+  [data-scope='dialog'][data-part='content'][data-draggable] {
+    transform: translate(var(--xh-_dialog-drag-x, 0px), var(--xh-_dialog-drag-y, 0px));
+  }
+
+  /* 跟手期间才备合成层；拖动中不选中文字 */
+  [data-scope='dialog'][data-part='content'][data-dragging] {
+    will-change: transform;
+    user-select: none;
+  }
+
+  /* 标题栏是拖动区（没写 header 时是标题）：指针按下即跟手，触屏不让浏览器抢走这段手势 */
+  [data-scope='dialog'][data-part='header'][data-draggable],
+  [data-scope='dialog'][data-part='title'][data-draggable] {
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+  }
+
+  [data-scope='dialog'][data-part='content'][data-dragging] [data-scope='dialog'][data-part='header'],
+  [data-scope='dialog'][data-part='content'][data-dragging] [data-scope='dialog'][data-part='title'] {
+    cursor: grabbing;
+  }
+
+  /* 拖动把手：一块透明的命中区，给键盘一个挪动面板的落脚点。放在标题栏里时铺满标题栏，
+     焦点环沿标题栏画；单独摆放时是一条满宽的细条 */
+  [data-scope='dialog'][data-part='drag-trigger'] {
+    display: block;
+    inline-size: 100%;
+    min-block-size: var(--xh-dialog-drag-trigger-min-h, var(--xh-space-6));
+    border: 0;
+    border-radius: var(--xh-dialog-drag-trigger-radius, var(--xh-shape-control));
+    padding: 0;
+    background: transparent;
+    cursor: grab;
+    touch-action: none;
+  }
+
+  [data-scope='dialog'][data-part='header']:has(> [data-scope='dialog'][data-part='drag-trigger']) {
+    position: relative;
+  }
+
+  [data-scope='dialog'][data-part='header'] > [data-scope='dialog'][data-part='drag-trigger'] {
+    position: absolute;
+    inset: 0;
+    min-block-size: 0;
+  }
+
+  [data-scope='dialog'][data-part='drag-trigger'][data-dragging] {
+    cursor: grabbing;
+  }
+
+  [data-scope='dialog'][data-part='drag-trigger'][data-disabled] {
+    cursor: default;
+  }
+
+  [data-scope='dialog'][data-part='drag-trigger'][hidden] {
+    display: none;
   }
 
   /* —— 面板三段 —— */
@@ -394,4 +427,29 @@
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       落在 Canvas 面上的取 CanvasText；
+       禁用取 GrayText */
+    [data-scope='dialog'][data-part='indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='dialog'][data-part='close-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='dialog'][data-part='close-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='dialog'][data-part='close-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

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;
+    }
+  }
 }