@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/clipboard.css

@@ -0,0 +1,315 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 clipboard 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/action-control.css';
+@import '../family/loading-ring.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-clipboard {
+    --xh-clipboard-skin: 1;
+  }
+
+  /* 与文本框同一套堆叠：标签一行、输入行一行 */
+  .xh-scope-clipboard[data-part='root'] {
+    /* 输入框与按钮同取一档高度，换尺寸只改这一个私有槽 */
+    --xh-_clipboard-h: var(--xh-control-h-md);
+    --xh-_clipboard-px: var(--xh-control-px-md);
+    --xh-_clipboard-font-size: var(--xh-control-font-md);
+
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--xh-clipboard-gap, var(--xh-space-1));
+    isolation: isolate;
+
+    /* 父容器给不出这么宽时整件跟着收，不越出父容器 */
+    max-inline-size: 100%;
+  }
+
+  /* 带输入框的用法是一件字段：不传尺寸时一律这么宽，宽度不随内容走；父容器给不出这么宽时整件跟着收，
+     地板同步让步，地板不高过缺省宽。只放复制钮的用法是一颗独立按钮，宽随文字走，不吃字段缺省宽 */
+  .xh-scope-clipboard[data-part='root']:has(.xh-scope-clipboard[data-part='control']) {
+    inline-size: var(--xh-clipboard-control-w, var(--xh-control-w));
+    min-inline-size: min(var(--xh-clipboard-control-w, var(--xh-control-w)), var(--xh-clipboard-control-min-w, var(--xh-control-min-w)), 100%);
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  .xh-scope-clipboard[data-part='root'][data-size='sm'] {
+    --xh-_clipboard-h: var(--xh-control-h-sm);
+    --xh-_clipboard-px: var(--xh-control-px-sm);
+    --xh-_clipboard-font-size: var(--xh-control-font-sm);
+  }
+
+  .xh-scope-clipboard[data-part='root'][data-size='lg'] {
+    --xh-_clipboard-h: var(--xh-control-h-lg);
+    --xh-_clipboard-px: var(--xh-control-px-lg);
+    --xh-_clipboard-font-size: var(--xh-control-font-lg);
+  }
+
+  /* —— 形态 ——
+     四档的底 / 前景 / 描边由家族形态矩阵按复制钮上的 data-xh-action-variant 给出（缺省 subtle 由连接层显式
+     投影，只有 solid 才品牌实心），用哪族颜色由 data-tone 决定；这里只剩实心面上的环色。
+     面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的 */
+  .xh-scope-clipboard[data-part='copy-trigger'][data-xh-action-variant='solid']:focus-visible {
+    --xh-action-ring-color-focus-visible: currentColor;
+  }
+
+  /* 整件禁用：输入框仍可选中复制，只有那颗写剪贴板的钮点不动 */
+  .xh-scope-clipboard[data-part='root'][data-disabled] {
+    cursor: not-allowed;
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  .xh-scope-clipboard[data-part='root'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-clipboard[data-part='label'] {
+    color: var(--xh-clipboard-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-clipboard-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-clipboard-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+  }
+
+  .xh-scope-clipboard[data-part='label'][hidden] {
+    display: none;
+  }
+
+  /* 输入框与复制按钮共享一条连续轮廓。 */
+  .xh-scope-clipboard[data-part='control'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-clipboard-control-gap, 0);
+  }
+
+  .xh-scope-clipboard[data-part='control'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-clipboard[data-part='input'] {
+    /* 撑满复制钮之外的剩余宽度；min-inline-size 归零解开原生 input 按字符数算出来的自动最小宽，
+       根被压窄时输入框跟着收，不是钮先被顶出去 */
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    block-size: var(--xh-clipboard-input-h, var(--xh-_clipboard-h));
+    padding-inline: var(--xh-clipboard-input-px, var(--xh-_clipboard-px));
+    padding-block: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-clipboard-input-border, var(--xh-border-control));
+    border-radius: var(--xh-clipboard-input-radius, var(--xh-shape-control));
+    /* 只读态压低底色表示"改不动"，但仍可聚焦、可选中复制 */
+    background: var(--xh-clipboard-input-bg, var(--xh-bg-subtle));
+    color: var(--xh-clipboard-input-fg, var(--xh-fg-default));
+    /* 表单控件不继承页面字体，只给字号会让输入框用 UA 默认字族 */
+    font-family: inherit;
+    font-size: var(--xh-clipboard-input-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-normal);
+    /* 密钥、哈希这类内容一律等宽：截断与换行处对得齐，也更好逐字核对 */
+    font-variant-numeric: tabular-nums;
+    text-overflow: ellipsis;
+  }
+
+  .xh-scope-clipboard[data-part='control'] > .xh-scope-clipboard[data-part='input']:not(:last-child) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  /* 焦点边一律 --xh-border-control-focus，不随 tone */
+  .xh-scope-clipboard[data-part='input']:focus-visible {
+    border-color: var(--xh-clipboard-input-border-focus, var(--xh-border-control-focus));
+  }
+
+  /* 自动填充：引擎给填过的框强加一套系统色（多数是黄底黑字），盖得过 background 与 color，
+     深色档下就剩一个不跟主题走的黄框。底改用 inset 阴影铺回来，扩散量 100vmax 填满内容盒；
+     字改用 -webkit-text-fill-color 接回来，那是这个态下唯一还听样式表的前景通道。
+     不去拉长 transition 把系统底推迟显现：那只是把它藏起来，减弱动效通道一关过渡就当场露出。
+     两个选择器名分写两条：一条选择器列表里只要有一个名字不被认识，整条规则就被丢弃。
+     铺的底跟着这个框自己那档压低的底走，不然填过之后它会比没填时亮一块。
+     压低的底是墨色按比例透明，盖不住平台底：铺它叠在缺省面上的不透明档。 */
+  .xh-scope-clipboard[data-part='input']:autofill {
+    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));
+  }
+
+  .xh-scope-clipboard[data-part='input']:-webkit-autofill {
+    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));
+  }
+
+  /* 复制钮是定尺的独立动作按钮：盒型、四态面、0.97 按压与粗指针命中区由家族配方给出，
+     这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与几何槽映射。
+     叠格布局要保留：两侧指示器叠在同一格，切换时不抖宽度 */
+  .xh-scope-clipboard[data-part='copy-trigger'] {
+    --xh-action-bg-rest: var(--xh-clipboard-copy-trigger-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-clipboard-copy-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-clipboard-copy-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-clipboard-copy-trigger-bg, var(--xh-_action-variant-bg-focus-visible));
+    --xh-action-bg-loading: var(--xh-clipboard-copy-trigger-bg, var(--xh-_action-variant-bg-loading));
+    --xh-action-bg-disabled: var(--xh-clipboard-copy-trigger-bg-disabled, var(--xh-_action-variant-bg-disabled));
+    --xh-action-fg-rest: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-focus-visible));
+    --xh-action-fg-loading: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-loading));
+    --xh-action-border-rest: var(--xh-clipboard-copy-trigger-border, var(--xh-_action-variant-border-rest));
+    --xh-action-border-hover: var(--xh-clipboard-copy-trigger-border-hover, var(--xh-_action-variant-border-hover));
+    --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));
+    /* 矩阵各态无影（淡底与阴影互斥）：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));
+    --xh-action-padding-inline: var(--xh-clipboard-copy-trigger-px, var(--xh-_clipboard-px));
+    --xh-action-gap: var(--xh-clipboard-copy-trigger-gap, var(--xh-control-gap-sm));
+    --xh-action-font-size: var(--xh-clipboard-copy-trigger-font-size, var(--xh-_clipboard-font-size));
+
+    display: inline-grid;
+    flex: none;
+    font-weight: var(--xh-clipboard-copy-trigger-font-weight, var(--xh-text-label-weight));
+    /* 复制按钮常被连点，触屏上默认会当成双击缩放 */
+    touch-action: manipulation;
+  }
+
+  /* 接在只读输入框后面时补回外轮廓：与输入框共享一条连续的可操作区描边 */
+  .xh-scope-clipboard[data-part='control']
+    > .xh-scope-clipboard[data-part='copy-trigger']:not(:first-child) {
+    --xh-action-border-rest: var(--xh-clipboard-copy-trigger-border, var(--xh-border-control));
+    --xh-action-border-hover: var(--xh-clipboard-copy-trigger-border-hover, var(--xh-border-control-hover));
+    --xh-action-border-pressed: var(--xh-clipboard-copy-trigger-border-hover, var(--xh-border-control-hover));
+    --xh-action-border-focus-visible: var(--xh-clipboard-copy-trigger-border, var(--xh-border-control));
+  }
+
+  /* 与输入框共用的那条边只画一次：墨色描边半透明，两条叠在一起会加深。输入框的末端边就是这条共边 */
+  .xh-scope-clipboard[data-part='control'] > .xh-scope-clipboard[data-part='copy-trigger']:not(:first-child) {
+    position: relative;
+    border-inline-start-width: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    border-start-end-radius: var(
+      --xh-clipboard-copy-trigger-attached-radius,
+      var(--xh-clipboard-input-radius, var(--xh-shape-control))
+    );
+    border-end-end-radius: var(
+      --xh-clipboard-copy-trigger-attached-radius,
+      var(--xh-clipboard-input-radius, var(--xh-shape-control))
+    );
+  }
+
+  .xh-scope-clipboard[data-part='control'] > .xh-scope-clipboard[data-part='input']:focus-visible,
+  .xh-scope-clipboard[data-part='control'] > .xh-scope-clipboard[data-part='copy-trigger']:focus-visible,
+  .xh-scope-clipboard[data-part='control'] > .xh-scope-clipboard[data-part='copy-trigger']:hover {
+    position: relative;
+    z-index: var(--xh-clipboard-control-active-layer, 1);
+  }
+
+  /* 上面给了 display，UA 的 [hidden]{display:none} 已被盖掉，这里补回来 */
+  .xh-scope-clipboard[data-part='copy-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 写入在途：环由加载环配方压在钮正中（连接层投影 data-xh-loading-ring="overlay"），直径取钮的图标档，
+     起始边取钮的真实前景、转速认使用者槽。进入在途等一个 micro 才起淡，快速写入什么都不闪；
+     钮里原有的文字与字形随前景淡到透明留位，同样等这一个 micro，退出在途不等、按 micro 淡回 */
+  .xh-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));
+  }
+
+  .xh-scope-clipboard[data-part='copy-trigger']::before {
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+  }
+
+  .xh-scope-clipboard[data-part='copy-trigger'][data-loading] {
+    --xh-action-fg-loading: transparent;
+
+    transition-delay: var(--xh-motion-duration-micro);
+  }
+
+  /* 复制成功只换前景与内容，轮廓和尺寸保持稳定；各态前景经桥接槽换，悬停与按下不退回平时的字色 */
+  .xh-scope-clipboard[data-part='copy-trigger'][data-copied] {
+    --xh-action-fg-rest: var(--xh-clipboard-copy-trigger-fg-copied, var(--xh-fg-success));
+    --xh-action-fg-hover: var(--xh-clipboard-copy-trigger-fg-copied, var(--xh-fg-success));
+    --xh-action-fg-pressed: var(--xh-clipboard-copy-trigger-fg-copied, var(--xh-fg-success));
+    --xh-action-fg-focus-visible: var(--xh-clipboard-copy-trigger-fg-copied, var(--xh-fg-success));
+  }
+
+  /* 实心面上复制成功仍用面配对的前景色：成功色在语气底上读不清 */
+  .xh-scope-clipboard[data-part='copy-trigger'][data-xh-action-variant='solid'][data-copied] {
+    --xh-action-fg-rest: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-focus-visible));
+  }
+
+  .xh-scope-clipboard[data-part='indicator'] {
+    display: inline-flex;
+    flex: none;
+    grid-area: 1 / 1;
+    align-items: center;
+    justify-content: center;
+    gap: var(
+      --xh-clipboard-indicator-gap,
+      var(--xh-clipboard-copy-trigger-gap, var(--xh-control-gap-sm))
+    );
+    opacity: 0;
+    visibility: hidden;
+    /* 视觉退出完成后才隐藏旧内容，避免旧侧先消失、新侧仍为透明时出现空白闪帧。 */
+    transition:
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      visibility 0s var(--xh-motion-ease-exit) var(--xh-motion-duration-micro);
+  }
+
+  /* 作者仍可用原生 hidden 收起整个指示器。 */
+  .xh-scope-clipboard[data-part='indicator'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-clipboard[data-part='indicator']:not([data-copied]),
+  .xh-scope-clipboard[data-part='root'][data-state='copied'] .xh-scope-clipboard[data-part='indicator'][data-copied] {
+    opacity: 1;
+    visibility: visible;
+    transition:
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      visibility 0s var(--xh-motion-ease-enter) 0s;
+  }
+
+  .xh-scope-clipboard[data-part='root'][data-state='copied'] .xh-scope-clipboard[data-part='indicator']:not([data-copied]) {
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      visibility 0s var(--xh-motion-ease-exit) var(--xh-motion-duration-micro);
+  }
+
+  /* 成功那一侧的图标用成功色；平时那侧跟着按钮的文字色走 */
+  .xh-scope-clipboard[data-part='indicator'][data-copied] {
+    color: var(--xh-clipboard-indicator-fg-copied, var(--xh-fg-success));
+  }
+
+  .xh-scope-clipboard[data-part='copy-trigger'][data-xh-action-variant='solid'] > .xh-scope-clipboard[data-part='indicator'][data-copied] {
+    color: inherit;
+  }
+
+  /* 复制成功的文字回执：读屏念得到，屏幕上不占位。
+     视觉隐藏的配方与 .xh-visually-hidden 逐条同值——1px 盒绝对定位、裁掉、文本不换行。
+     刻意不写 display：display:none 的节点读屏根本不念 */
+  .xh-scope-clipboard[data-part='status'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}