@xihan-ui/styles 2.0.0 → 3.0.0

package/css/citation.css

@@ -0,0 +1,470 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 citation 样式。 */
+
+@import '../family/action-control.css';
+/* hover 档的卡片：共享关键帧与 frosted 材质配方 */
+@import '../family/motion.css';
+@import '../family/material.css';
+
+@layer xihan.motion {
+  /* 预览的披露：内容区高度从 0 长到连接层量下的那一版，内缩与描边一起长回来，
+     它前面那道间距由负的上外距从抵消状态放开；收起反过来收回 0 */
+  @keyframes xh-citation-preview-expand {
+    from {
+      block-size: 0;
+      padding-block: 0;
+      border-block-width: 0;
+      margin-block-start: calc(-1 * var(--xh-_citation-preview-gap));
+    }
+
+    to {
+      block-size: var(--xh-_citation-preview-block-size);
+    }
+  }
+
+  @keyframes xh-citation-preview-collapse {
+    from {
+      block-size: var(--xh-_citation-preview-block-size);
+    }
+
+    to {
+      block-size: 0;
+      padding-block: 0;
+      border-block-width: 0;
+      margin-block-start: calc(-1 * var(--xh-_citation-preview-gap));
+    }
+  }
+}
+
+@layer xihan.components {
+  [data-scope='citation'] {
+    --xh-citation-skin: 1;
+  }
+
+  /* 尺寸档的私有槽写在根上，也写在 hover 档的定位壳上：它被搬到 portal 落点后继承不到根上的值 */
+  [data-scope='citation']:is([data-part='root'], [data-part='positioner']) {
+    --xh-_citation-gap: var(--xh-space-3);
+    --xh-_citation-pad: var(--xh-surface-pad-md);
+    --xh-_citation-font-size: var(--xh-control-font-md);
+    --xh-_citation-icon-size: var(--xh-glyph-size-md);
+    --xh-icon-size: var(--xh-citation-icon-size, var(--xh-_citation-icon-size));
+  }
+
+  [data-scope='citation'][data-part='root'] {
+    /* 纵向一列：预览展开的首帧用负的上外距抵掉它前面那道间距，flex 里负外距会把后面的内容一起拉回来 */
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-citation-gap, var(--xh-_citation-gap));
+    color: var(--xh-citation-fg, var(--xh-fg-default));
+    font-size: var(--xh-citation-font-size, var(--xh-_citation-font-size));
+  }
+
+  /* 禁用降前景：正文落到禁用色，不靠整体透明度（编号的面与字由家族的禁用档给） */
+  [data-scope='citation'][data-part='root'][data-disabled] [data-scope='citation'][data-part='text'] {
+    color: var(--xh-fg-disabled);
+  }
+
+  [data-scope='citation'][data-part='text'] {
+    display: inline;
+    color: var(--xh-citation-text-fg, var(--xh-fg-default));
+    line-height: var(--xh-text-prose-leading);
+  }
+
+  /* 引用编号跟正文同排，是一个一维引用对象：用 pill 把短编号包成稳定目标。 */
+  [data-scope='citation'][data-part='trigger'] {
+    --xh-action-visual-size: var(--xh-citation-trigger-h, var(--xh-space-6));
+    --xh-action-min-inline-size: var(--xh-citation-trigger-h, var(--xh-space-6));
+    --xh-action-padding-inline: var(--xh-citation-trigger-px, var(--xh-space-1));
+    --xh-action-radius: var(--xh-citation-trigger-radius, var(--xh-shape-pill));
+    --xh-action-font-size: var(--xh-citation-trigger-font-size, var(--xh-text-caption-size));
+    --xh-action-fg-rest: var(--xh-citation-trigger-fg, var(--xh-fg-brand));
+    --xh-action-fg-hover: var(--xh-citation-trigger-fg, var(--xh-fg-brand));
+    --xh-action-fg-pressed: var(--xh-citation-trigger-fg, var(--xh-fg-brand));
+
+    margin-inline: var(--xh-citation-trigger-margin, var(--xh-space-0_5));
+    vertical-align: text-top;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* 打开中不是选中：与悬停同档的中性面，悬停不再加深，按下照常走下一档 */
+  [data-scope='citation'][data-part='trigger'][data-state='open'] {
+    --xh-action-bg-rest: var(--xh-_action-variant-bg-hover);
+  }
+
+  [data-scope='citation'][data-part='preview'] {
+    display: grid;
+    gap: var(--xh-citation-preview-gap, var(--xh-space-3));
+    padding-block: var(--xh-citation-preview-py, var(--xh-_citation-pad));
+    padding-inline: var(--xh-citation-preview-px, var(--xh-_citation-pad));
+  }
+
+  /* inline 档：预览是正文流里的静态 surface，不漂浮、不盖住正文。
+     开合是 surface 级披露：高度按内容区（content-box）动，展开与收起途中把长出盒外的内容裁掉。
+     hover 档的预览带 data-xh-material，面交给材质配方画 */
+  [data-scope='citation'][data-part='preview']:not([data-xh-material]) {
+    /* 根上那道间距：展开与收起时用负外距抵掉它 */
+    --xh-_citation-preview-gap: var(--xh-citation-gap, var(--xh-_citation-gap));
+
+    box-sizing: content-box;
+    overflow: clip;
+    border: var(--xh-stroke-thin) solid var(--xh-citation-preview-border, var(--xh-border-default));
+    border-radius: var(--xh-citation-preview-radius, var(--xh-shape-surface));
+    background: var(--xh-citation-preview-bg, var(--xh-bg-surface));
+    color: var(--xh-citation-preview-fg, var(--xh-fg-default));
+  }
+
+  /* 展开与收起只在开合时播：首帧就开着的预览直接呈现（data-instant）。
+     收起时连接层押后 hidden，收回 0 播完才藏起；forwards 把末态钉住，免得播完到藏起之间弹回原样。
+     减弱动效下两支披露时长瞬时完成 */
+  [data-scope='citation'][data-part='preview'][data-preview-mode='inline'][data-state='open']:not([data-instant]) {
+    animation: xh-citation-preview-expand var(--xh-motion-duration-expand) var(--xh-motion-ease-enter-strong);
+  }
+
+  [data-scope='citation'][data-part='preview'][data-preview-mode='inline'][data-state='closed']:not([data-instant]) {
+    animation: xh-citation-preview-collapse var(--xh-motion-duration-collapse) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 定位壳：inline 档不参与排版，里面的预览照常在正文流里 */
+  [data-scope='citation'][data-part='positioner'][data-preview-mode='inline'] {
+    display: contents;
+  }
+
+  /* hover 档：坐标由定位引擎写进 style（left / top），这里只定位模式与层级 */
+  [data-scope='citation'][data-part='positioner'][data-preview-mode='hover'] {
+    /* 落定那一侧的可用高度与宽度，由定位引擎经内联自定义属性写进来，卡片据此限高限宽；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时退到视口 */
+    --xh-_citation-available-h: 100vh;
+    --xh-_citation-available-w: 100vw;
+
+    position: fixed;
+    z-index: var(--xh-citation-layer, var(--xh-_layer, var(--xh-layer-popover)));
+    font-size: var(--xh-citation-font-size, var(--xh-_citation-font-size));
+  }
+
+  /* 锚点被滚出可视区：卡片随之收起 */
+  [data-scope='citation'][data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  [data-scope='citation'][data-part='positioner'][hidden] {
+    display: none;
+  }
+
+  /* 缩放原点与进场位移按落定的那一侧给：卡片从贴着引用编号的那条边涨开。两个槽由预览继承；
+     placement 是物理方向，origin 与 translate 也是物理量，不随书写方向翻 */
+  [data-scope='citation'][data-part='positioner'][data-placement^='top'] {
+    --xh-_overlay-origin-y: 100%;
+    --xh-_overlay-enter-down: 1;
+  }
+
+  [data-scope='citation'][data-part='positioner'][data-placement^='bottom'] {
+    --xh-_overlay-origin-y: 0;
+    --xh-_overlay-enter-up: 1;
+  }
+
+  [data-scope='citation'][data-part='positioner'][data-placement^='left'] {
+    --xh-_overlay-origin-x: 100%;
+    --xh-_overlay-enter-right: 1;
+  }
+
+  [data-scope='citation'][data-part='positioner'][data-placement^='right'] {
+    --xh-_overlay-origin-x: 0;
+    --xh-_overlay-enter-left: 1;
+  }
+
+  /* hover 档的预览是锚定面板：材质家族配方画 frosted 面（描边、底、1px 顶光、前景、投影与背景滤镜），
+     这里只把使用者槽接进来；形状取 overlay，内容长了在卡片里滚 */
+  [data-scope='citation'][data-part='preview'][data-preview-mode='hover'] {
+    --xh-frosted-bg: var(--xh-citation-card-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-citation-card-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-citation-card-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-citation-card-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-citation-card-backdrop, var(--xh-_material-backdrop));
+
+    box-sizing: border-box;
+    inline-size: max-content;
+    max-inline-size: min(var(--xh-citation-card-max-w, var(--xh-overlay-max-w)), var(--xh-_citation-available-w));
+    max-block-size: min(var(--xh-citation-card-max-h, var(--xh-overlay-max-h)), var(--xh-_citation-available-h));
+    /* 卡片不做滚动面：引文收到有限几行，全文经打开来源的链接看 */
+    overflow: clip;
+    border-radius: var(--xh-citation-card-radius, var(--xh-shape-overlay));
+    transform-origin: var(--xh-_overlay-origin-x, 50%) var(--xh-_overlay-origin-y, 50%);
+  }
+
+  /* hover 档的引文按行数裁，裁掉的那一行末尾收省略号 */
+  [data-scope='citation'][data-part='preview'][data-preview-mode='hover'] [data-scope='citation'][data-part='quote']:not([hidden]) {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--xh-citation-card-quote-lines, 6);
+  }
+
+  /* 出现与退场按锚定面板那一组：开着时 pop-in，收起时 pop-out 播完才藏起；卡片里轮换来源不再播 */
+  [data-scope='citation'][data-part='preview'][data-preview-mode='hover'][data-state='open']:not([data-instant]) {
+    animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  [data-scope='citation'][data-part='preview'][data-preview-mode='hover'][data-state='closed']:not([data-instant]) {
+    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 一处多源的轮换：两颗翻页钮夹着位置，排在收起钮之前 */
+  [data-scope='citation'][data-part='prev-trigger'],
+  [data-scope='citation'][data-part='next-trigger'] {
+    --xh-action-padding-inline: 0;
+    --xh-action-radius: var(--xh-citation-pager-radius, var(--xh-shape-control));
+    flex: none;
+  }
+
+  [data-scope='citation'][data-part='prev-trigger']:empty::before,
+  [data-scope='citation'][data-part='next-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-chevron-left) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-left) center / contain no-repeat;
+    /* 上一个指向行首、下一个指向行尾：RTL 下水平翻过来 */
+    scale: var(--xh-direction-sign) 1;
+  }
+
+  [data-scope='citation'][data-part='next-trigger']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-chevron-right);
+    mask-image: var(--xh-glyph-mark-chevron-right);
+  }
+
+  [data-scope='citation'][data-part='preview-index'] {
+    flex: none;
+    align-self: center;
+    color: var(--xh-citation-meta-fg, var(--xh-fg-muted));
+    font-size: var(--xh-citation-meta-font-size, var(--xh-text-caption-size));
+    font-variant-numeric: tabular-nums;
+  }
+
+  [data-scope='citation'][data-part='prev-trigger'][hidden],
+  [data-scope='citation'][data-part='next-trigger'][hidden],
+  [data-scope='citation'][data-part='preview-index'][hidden] {
+    display: none;
+  }
+
+  [data-scope='citation'][data-part='preview'][hidden] {
+    display: none;
+  }
+
+  [data-scope='citation'][data-part='preview-header'] {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--xh-citation-preview-header-gap, var(--xh-space-3));
+  }
+
+  [data-scope='citation'][data-part='preview-header'] > :first-child {
+    display: grid;
+    flex: 1;
+    gap: var(--xh-citation-preview-header-content-gap, var(--xh-space-0_5));
+    min-inline-size: 0;
+  }
+
+  [data-scope='citation'][data-part='preview-title'] {
+    overflow: hidden;
+    color: var(--xh-citation-title-fg, var(--xh-fg-default));
+    font-size: var(--xh-citation-title-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-citation-title-font-weight, var(--xh-font-weight-semibold));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-scope='citation'][data-part='preview-meta'],
+  [data-scope='citation'][data-part='source-meta'] {
+    overflow: hidden;
+    color: var(--xh-citation-meta-fg, var(--xh-fg-muted));
+    font-size: var(--xh-citation-meta-font-size, var(--xh-text-caption-size));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-scope='citation'][data-part='quote'] {
+    margin: 0;
+    padding-inline-start: var(--xh-citation-quote-ps, var(--xh-space-3));
+    border-inline-start: var(--xh-stroke-thick) solid var(--xh-citation-quote-border, var(--xh-fg-brand));
+    color: var(--xh-citation-quote-fg, var(--xh-fg-muted));
+    font-size: var(--xh-citation-quote-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-text-prose-leading);
+  }
+
+  [data-scope='citation'][data-part='quote'][hidden] {
+    display: none;
+  }
+
+  /* 预览面里的收起钮与其它面板内的关闭钮同一身份：控件圆角 */
+  [data-scope='citation'][data-part='dismiss-trigger'] {
+    --xh-action-padding-inline: 0;
+    --xh-action-radius: var(--xh-citation-dismiss-trigger-radius, var(--xh-shape-control));
+    flex: none;
+  }
+
+  [data-scope='citation'][data-part='dismiss-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+  }
+
+  [data-scope='citation'][data-part='preview-link'] {
+    inline-size: fit-content;
+    color: var(--xh-citation-link-fg, var(--xh-fg-brand));
+    font-weight: var(--xh-text-label-weight);
+    text-decoration: none;
+  }
+
+  [data-scope='citation'][data-part='preview-link']:is(:hover, :focus-visible) {
+    text-decoration: underline;
+    text-underline-offset: var(--xh-space-1);
+  }
+
+  [data-scope='citation'][data-part='preview-link']:focus-visible {
+    border-radius: var(--xh-citation-preview-link-radius, var(--xh-shape-control));
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='citation'][data-part='list'] {
+    display: grid;
+    gap: var(--xh-citation-list-gap, var(--xh-space-1));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  [data-scope='citation'][data-part='source'] {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  [data-scope='citation'][data-part='source-link'] {
+    --xh-action-padding-inline: var(--xh-citation-source-px, var(--xh-space-3));
+    --xh-action-padding-block: var(--xh-citation-source-py, var(--xh-space-2));
+    --xh-action-radius: var(--xh-citation-source-radius, var(--xh-shape-control));
+    --xh-action-fg-rest: var(--xh-citation-source-fg, var(--xh-fg-default));
+
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    text-align: start;
+  }
+
+  [data-scope='citation'][data-part='source-link'][data-current] {
+    --xh-action-bg-rest: var(--xh-bg-brand-subtle);
+    --xh-action-bg-hover: var(--xh-bg-brand-subtle);
+  }
+
+  [data-scope='citation'][data-part='source-link'] > :last-child {
+    display: grid;
+    gap: var(--xh-citation-source-link-content-gap, var(--xh-space-0_5));
+    min-inline-size: 0;
+  }
+
+  [data-scope='citation'][data-part='source-index'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--xh-citation-index-size, var(--xh-control-box-sm));
+    block-size: var(--xh-citation-index-size, var(--xh-control-box-sm));
+    border-radius: var(--xh-citation-index-radius, var(--xh-shape-circle));
+    background: var(--xh-citation-index-bg, var(--xh-bg-subtle));
+    color: var(--xh-citation-index-fg, var(--xh-fg-muted));
+    font-size: var(--xh-citation-index-font-size, var(--xh-text-caption-size));
+    font-variant-numeric: tabular-nums;
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='citation'][data-part='source'][data-state='active'] [data-part='source-index'] {
+    background: var(--xh-citation-index-active-bg, var(--xh-bg-brand));
+    color: var(--xh-citation-index-active-fg, var(--xh-fg-on-brand));
+  }
+
+  [data-scope='citation'][data-part='source-title'] {
+    overflow: hidden;
+    color: var(--xh-citation-source-title-fg, var(--xh-fg-default));
+    font-weight: var(--xh-text-label-weight);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-scope='citation']:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
+    --xh-_citation-gap: var(--xh-space-2);
+    --xh-_citation-pad: var(--xh-surface-pad-sm);
+    --xh-_citation-font-size: var(--xh-control-font-sm);
+    --xh-_citation-icon-size: var(--xh-glyph-size-sm);
+  }
+
+  [data-scope='citation']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
+    --xh-_citation-gap: var(--xh-space-4);
+    --xh-_citation-pad: var(--xh-surface-pad-lg);
+    --xh-_citation-font-size: var(--xh-control-font-lg);
+    --xh-_citation-icon-size: var(--xh-glyph-size-lg);
+  }
+
+  @media (forced-colors: active) {
+    [data-scope='citation'][data-part='source'][data-state='active'] [data-part='source-index'] {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+
+  @media print {
+    [data-scope='citation'][data-part='dismiss-trigger'],
+    [data-scope='citation'][data-part='prev-trigger'],
+    [data-scope='citation'][data-part='next-trigger'] {
+      display: none;
+    }
+
+    /* 悬停卡片是瞬态浮层，打印时不出现 */
+    [data-scope='citation'][data-part='positioner'][data-preview-mode='hover'] {
+      display: none;
+    }
+
+    [data-scope='citation'][data-part='preview-link'] {
+      color: currentColor;
+    }
+  }
+
+  [data-scope='citation'][data-part='root'][hidden],
+  [data-scope='citation'][data-part='text'][hidden],
+  [data-scope='citation'][data-part='preview-header'][hidden],
+  [data-scope='citation'][data-part='list'][hidden],
+  [data-scope='citation'][data-part='source'][hidden],
+  [data-scope='citation'][data-part='source-link'][hidden],
+  [data-scope='citation'][data-part='source-index'][hidden] {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='citation']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='dismiss-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='citation']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='dismiss-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='citation']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='dismiss-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
+}

package/css/clipboard.css

@@ -5,27 +5,10 @@
 
 /* 定义 clipboard 样式。 */
 
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
 @import '../family/action-control.css';
-
-@layer xihan.motion {
-  @keyframes xh-clipboard-rotate {
-    to {
-      rotate: 360deg;
-    }
-  }
-
-  @keyframes xh-clipboard-loading-reveal {
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes xh-clipboard-loading-hide {
-    to {
-      opacity: 0;
-    }
-  }
-}
+@import '../family/loading-ring.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -138,7 +121,7 @@
     border-end-end-radius: 0;
   }
 
-  /* 焦点边一律 --xh-border-control-focus，不随 tone（§7.2 第 5 条） */
+  /* 焦点边一律 --xh-border-control-focus，不随 tone */
   [data-scope='clipboard'][data-part='input']:focus-visible {
     border-color: var(--xh-clipboard-input-border-focus, var(--xh-border-control-focus));
   }
@@ -148,18 +131,19 @@
      字改用 -webkit-text-fill-color 接回来，那是这个态下唯一还听样式表的前景通道。
      不去拉长 transition 把系统底推迟显现：那只是把它藏起来，减弱动效通道一关过渡就当场露出。
      两个选择器名分写两条：一条选择器列表里只要有一个名字不被认识，整条规则就被丢弃。
-     铺的底跟着这个框自己那档压低的底走，不然填过之后它会比没填时亮一块。 */
+     铺的底跟着这个框自己那档压低的底走，不然填过之后它会比没填时亮一块。
+     压低的底是墨色按比例透明，盖不住平台底：铺它叠在缺省面上的不透明档。 */
   [data-scope='clipboard'][data-part='input']:autofill {
-    box-shadow: inset 0 0 0 100vmax var(--xh-clipboard-input-autofill-bg, var(--xh-bg-subtle));
+    box-shadow: inset 0 0 0 100vmax var(--xh-clipboard-input-autofill-bg, var(--xh-bg-subtle-opaque));
     -webkit-text-fill-color: var(--xh-clipboard-input-autofill-fg, var(--xh-fg-default));
   }
 
   [data-scope='clipboard'][data-part='input']:-webkit-autofill {
-    box-shadow: inset 0 0 0 100vmax var(--xh-clipboard-input-autofill-bg, var(--xh-bg-subtle));
+    box-shadow: inset 0 0 0 100vmax var(--xh-clipboard-input-autofill-bg, var(--xh-bg-subtle-opaque));
     -webkit-text-fill-color: var(--xh-clipboard-input-autofill-fg, var(--xh-fg-default));
   }
 
-  /* 复制钮是定尺的独立动作按钮（§9.1）：盒型、四态面、0.97 按压与粗指针命中区由家族配方给出，
+  /* 复制钮是定尺的独立动作按钮：盒型、四态面、0.97 按压与粗指针命中区由家族配方给出，
      这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与几何槽映射。
      叠格布局要保留：两侧指示器叠在同一格，切换时不抖宽度 */
   [data-scope='clipboard'][data-part='copy-trigger'] {
@@ -179,7 +163,7 @@
     --xh-action-border-pressed: var(--xh-clipboard-copy-trigger-border-hover, var(--xh-_action-variant-border-pressed));
     --xh-action-border-focus-visible: var(--xh-clipboard-copy-trigger-border, var(--xh-_action-variant-border-focus-visible));
     --xh-action-border-disabled: var(--xh-clipboard-copy-trigger-border-disabled, var(--xh-_action-variant-border-disabled));
-    /* 矩阵各态无影（§8.3 淡底与阴影互斥）：solid 也不再悬停抬影，使用者槽仍可自行加 */
+    /* 矩阵各态无影（淡底与阴影互斥）：solid 也不再悬停抬影，使用者槽仍可自行加 */
     --xh-action-shadow-hover: var(--xh-clipboard-copy-trigger-shadow-hover, none);
     --xh-action-radius: var(--xh-clipboard-copy-trigger-radius, var(--xh-shape-control));
     --xh-action-visual-size: var(--xh-clipboard-copy-trigger-h, var(--xh-_clipboard-h));
@@ -203,9 +187,10 @@
     --xh-action-border-focus-visible: var(--xh-clipboard-copy-trigger-border, var(--xh-border-control));
   }
 
+  /* 与输入框共用的那条边只画一次：墨色描边半透明，两条叠在一起会加深。输入框的末端边就是这条共边 */
   [data-scope='clipboard'][data-part='control'] > [data-scope='clipboard'][data-part='copy-trigger']:not(:first-child) {
     position: relative;
-    margin-inline-start: calc(-1 * var(--xh-stroke-thin));
+    border-inline-start-width: 0;
     border-start-start-radius: 0;
     border-end-start-radius: 0;
     border-start-end-radius: var(
@@ -230,50 +215,22 @@
     display: none;
   }
 
-  /* 快速写入不显示瞬时圆环；超过一个 micro 周期后才平滑换成加载状态。 */
-  [data-scope='clipboard'][data-part='root'][data-state='copying']
-    [data-scope='clipboard'][data-part='copy-trigger'][aria-busy='true'] {
-    cursor: progress;
-  }
-
-  [data-scope='clipboard'][data-part='copy-trigger'][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: currentColor;
-    /* 正圆的加载环：正方盒取 circle（§6.3） */
-    border-radius: var(--xh-shape-circle);
-    opacity: 0;
-    animation:
-      xh-clipboard-rotate var(--xh-clipboard-loading-duration, var(--xh-spin-duration)) var(--xh-motion-ease-loop) infinite,
-      xh-clipboard-loading-reveal var(--xh-motion-duration-micro) var(--xh-motion-ease-enter) var(--xh-motion-duration-micro) forwards;
+  /* 写入在途：环由加载环配方压在钮正中（连接层投影 data-xh-loading-ring="overlay"），直径取钮的图标档，
+     起始边取钮的真实前景、转速认使用者槽。进入在途等一个 micro 才起淡，快速写入什么都不闪；
+     钮里原有的文字与字形随前景淡到透明留位，同样等这一个 micro，退出在途不等、按 micro 淡回 */
+  [data-scope='clipboard'][data-part='copy-trigger'] {
+    --xh-_loading-ring-fg: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-loading));
+    --xh-_loading-ring-duration: var(--xh-clipboard-loading-duration, var(--xh-motion-loop-spin));
   }
 
-  [data-scope='clipboard'][data-part='copy-trigger'][aria-busy='true']
-    > [data-scope='clipboard'][data-part='indicator']:not([data-copied]) {
-    animation: xh-clipboard-loading-hide var(--xh-motion-duration-micro) var(--xh-motion-ease-enter)
-      var(--xh-motion-duration-micro) forwards;
+  [data-scope='clipboard'][data-part='copy-trigger']::before {
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='clipboard'][data-part='copy-trigger'][aria-busy='true']::before {
-      animation: none;
-    }
-
-    [data-scope='clipboard'][data-part='copy-trigger'][aria-busy='true']
-      > [data-scope='clipboard'][data-part='indicator']:not([data-copied]) {
-      animation: none;
-    }
-  }
+  [data-scope='clipboard'][data-part='copy-trigger'][data-loading] {
+    --xh-action-fg-loading: transparent;
 
-  :where([data-motion='reduce']) [data-scope='clipboard'][data-part='copy-trigger'][aria-busy='true']::before,
-  :where([data-motion='reduce']) [data-scope='clipboard'][data-part='copy-trigger'][aria-busy='true']
-    > [data-scope='clipboard'][data-part='indicator']:not([data-copied]) {
-    animation: none;
+    transition-delay: var(--xh-motion-duration-micro);
   }
 
   /* 复制成功只换前景与内容，轮廓和尺寸保持稳定；各态前景经桥接槽换，悬停与按下不退回平时的字色 */