@xihan-ui/styles 1.0.0 → 2.0.0

package/css/popconfirm.css

@@ -1,3 +1,14 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 popconfirm 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/action-control.css';
+
 @layer xihan.motion {
   /* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
   @keyframes xh-popconfirm-rotate {
@@ -7,32 +18,6 @@
   }
 }
 
-@layer xihan.motion {
-  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
-     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
-  @keyframes xh-pop-in {
-    from {
-      opacity: 0;
-      scale: var(--xh-motion-scale-enter);
-    }
-
-    to {
-      opacity: 1;
-      scale: 1;
-    }
-  }
-  @keyframes xh-pop-out {
-    from {
-      opacity: 1;
-      scale: 1;
-    }
-
-    to {
-      opacity: 0;
-      scale: var(--xh-motion-scale-enter);
-    }
-  }
-}
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -45,10 +30,34 @@
     display: inline-block;
   }
 
+  /*
+   * 触发器是页面上的独立文字按钮（§9.1）：盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
+   * 由家族配方按连接层投影的 data-xh-action-variant / -size 给出。皮肤没有自己的外观规则，
+   * 只把作者塞进按钮的图标接到随档字形尺（md = 20px）。
+   */
+  [data-scope='popconfirm'][data-part='trigger'] {
+    --xh-icon-size: var(--xh-popconfirm-icon-size, var(--xh-_action-profile-glyph-size));
+  }
+
+  /* 家族配方给了 display，作者手写 hidden 时得把 UA 的 [hidden]{display:none} 还回去 */
+  [data-scope='popconfirm'][data-part='trigger'][hidden] {
+    display: none;
+  }
+
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   [data-scope='popconfirm'][data-part='positioner'] {
+    /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，面板继承它限高；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
+    --xh-_popconfirm-available-h: 100vh;
+    /* 落定那一侧的可用宽度，同一路由定位引擎写进来，行内轴据此夹取；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时退到视口宽 */
+    --xh-_popconfirm-available-w: 100vw;
+
+    /* 面板内容的自绘条浮在内容之上：轨道不上底色，实色轨道会在面板右缘糊一条竖灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
     position: fixed;
-    z-index: var(--xh-popconfirm-layer, var(--xh-layer-popover));
+    z-index: var(--xh-popconfirm-layer, var(--xh-_layer, var(--xh-layer-popover)));
     /* 空壳不吃指针，交互只发生在 content 上 */
     pointer-events: none;
   }
@@ -58,34 +67,81 @@
     visibility: hidden;
   }
 
+  /* 缩放原点与进场位移按落定的那一侧给：面板从贴着锚点的那条边涨开、沿主轴退让一小段。
+     两个槽由 content 继承。placement 是物理方向（引擎按 top / right / bottom / left 出值），
+     origin 与 translate 也是物理量，两边同轴，不随书写方向翻 */
+  [data-scope='popconfirm'][data-part='positioner'][data-placement^='top'] {
+    --xh-_overlay-origin-y: 100%;
+    --xh-_overlay-enter-down: 1;
+  }
+
+  [data-scope='popconfirm'][data-part='positioner'][data-placement^='bottom'] {
+    --xh-_overlay-origin-y: 0;
+    --xh-_overlay-enter-up: 1;
+  }
+
+  [data-scope='popconfirm'][data-part='positioner'][data-placement^='left'] {
+    --xh-_overlay-origin-x: 100%;
+    --xh-_overlay-enter-right: 1;
+  }
+
+  [data-scope='popconfirm'][data-part='positioner'][data-placement^='right'] {
+    --xh-_overlay-origin-x: 0;
+    --xh-_overlay-enter-left: 1;
+  }
+
   /* 面板排成三列：左列吃掉剩余宽度，右两列各摆一颗按钮。
      标题、说明与作者塞进来的内容各占一整行，两颗按钮因此并排落在最后一行的右侧。 */
   [data-scope='popconfirm'][data-part='content'] {
-    /* 尺寸档只换这三个私有槽 */
-    --xh-_popconfirm-py: var(--xh-space-3);
-    --xh-_popconfirm-px: var(--xh-control-px-md);
+    /* 作者塞进面板里的图标按控件档取（§6.5）；两颗动作钮另由家族配方按 sm 档下发字形尺 */
+    --xh-icon-size: var(--xh-popconfirm-icon-size, var(--xh-glyph-size-md));
+    /* 尺寸档只换这两个私有槽 */
+    --xh-_popconfirm-pad: var(--xh-surface-pad-md);
     --xh-_popconfirm-max-w: var(--xh-overlay-max-w);
 
+    position: relative;
     display: grid;
     grid-template-columns: 1fr auto auto;
     align-items: center;
     gap: var(--xh-popconfirm-gap, var(--xh-space-2));
     inline-size: max-content;
-    max-inline-size: var(--xh-popconfirm-max-w, var(--xh-_popconfirm-max-w));
-    padding-block: var(--xh-popconfirm-py, var(--xh-_popconfirm-py));
-    padding-inline: var(--xh-popconfirm-px, var(--xh-_popconfirm-px));
-    border: var(--xh-stroke-thin) solid var(--xh-popconfirm-border, var(--xh-border-default));
-    border-radius: var(--xh-popconfirm-radius, var(--xh-shape-surface));
-    background: var(--xh-popconfirm-bg, var(--xh-bg-surface));
-    color: var(--xh-popconfirm-fg, var(--xh-fg-default));
-    box-shadow: var(--xh-popconfirm-shadow, var(--xh-elevation-floating));
+    /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的两颗钮就点不到了 */
+    max-inline-size: min(var(--xh-popconfirm-max-w, var(--xh-_popconfirm-max-w)), var(--xh-_popconfirm-available-w));
+    /* 说明文案长度由作者给，矮视口下不限高面板会整块伸出视口且滚不到 */
+    max-block-size: min(var(--xh-popconfirm-max-h, var(--xh-overlay-max-h)), var(--xh-_popconfirm-available-h));
+    overflow-y: auto;
+    /* 浮在页面之上的 Overlay 滚动面（§6.6）：滚到头不把页面一起带走 */
+    overscroll-behavior: contain;
+    padding-block: var(--xh-popconfirm-py, var(--xh-_popconfirm-pad));
+    padding-inline: var(--xh-popconfirm-px, var(--xh-_popconfirm-pad));
+    border: var(--xh-stroke-thin) solid var(--xh-popconfirm-border, var(--xh-material-frosted-border));
+    border-radius: var(--xh-popconfirm-radius, var(--xh-shape-overlay));
+    /* 与 Popover 共用 M2 配方：透明 tint 在底层，内侧一像素顶光只表达材质厚度。 */
+    background:
+      linear-gradient(
+        to bottom,
+        var(--xh-material-frosted-highlight) 0 var(--xh-stroke-thin),
+        transparent var(--xh-stroke-thin)
+      ),
+      var(--xh-popconfirm-bg, var(--xh-material-frosted-bg));
+    color: var(--xh-popconfirm-fg, var(--xh-material-frosted-fg));
+    box-shadow: var(--xh-popconfirm-shadow, var(--xh-material-frosted-shadow));
+    -webkit-backdrop-filter: var(--xh-popconfirm-backdrop, var(--xh-material-frosted-backdrop));
+    backdrop-filter: var(--xh-popconfirm-backdrop, var(--xh-material-frosted-backdrop));
     pointer-events: auto;
+    /* 进退场的缩放锚在贴着锚点的那条边上；两个分量由 positioner 按 placement 写进私有槽 */
+    transform-origin: var(--xh-_overlay-origin-x, 50%) var(--xh-_overlay-origin-y, 50%);
   }
 
   [data-scope='popconfirm'][data-part='content'] > * {
     grid-column: 1 / -1;
   }
 
+  /* 箭头绝对定位挂在 content 上，不占格：吃到栅格位的话它的贴边就从格线起算，被内衬推进面里 */
+  [data-scope='popconfirm'][data-part='content'] > [data-part='arrow'] {
+    grid-column: auto;
+  }
+
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致：
      收起态连接层会给 content 打 hidden，而上面那条 display 正是要盖掉 UA 的
      [hidden]{display:none}——退场动画得先能播。presence 读的是 content 的 animationName，
@@ -97,7 +153,9 @@
   }
 
   [data-scope='popconfirm'][data-part='content'][data-state='open'] {
-    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+    animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+    /* 只在开着的这一档挂：合成层随 data-state 一起收走，收起后不再占着 */
+    will-change: opacity, scale, translate;
   }
 
   /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
@@ -107,49 +165,66 @@
   }
 
   /* —— 尺寸 —— */
-  /* 缺省档写在 content 的基础规则里；行内内缩取 control-px 那把尺，纵向按 space 档同步 */
+  /* 缺省档写在 content 的基础规则里；四边等宽的面板内衬三档取 surface-pad 那把尺 */
   [data-scope='popconfirm'][data-part='content'][data-size='sm'] {
-    --xh-_popconfirm-py: var(--xh-space-2);
-    --xh-_popconfirm-px: var(--xh-control-px-sm);
+    --xh-_popconfirm-pad: var(--xh-surface-pad-sm);
     --xh-_popconfirm-max-w: var(--xh-overlay-max-w-sm);
   }
 
   [data-scope='popconfirm'][data-part='content'][data-size='lg'] {
-    --xh-_popconfirm-py: var(--xh-space-4);
-    --xh-_popconfirm-px: var(--xh-control-px-lg);
+    --xh-_popconfirm-pad: var(--xh-surface-pad-lg);
     --xh-_popconfirm-max-w: var(--xh-overlay-max-w-lg);
   }
 
   [data-scope='popconfirm'][data-part='title'] {
     margin: 0;
+    min-inline-size: 0;
     font-size: var(--xh-popconfirm-title-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-popconfirm-title-font-weight, var(--xh-font-weight-semibold));
-    color: var(--xh-popconfirm-title-fg, var(--xh-fg-default));
+    line-height: var(--xh-leading-tight);
+    overflow-wrap: anywhere;
+    color: var(--xh-popconfirm-title-fg, var(--xh-material-frosted-fg));
   }
 
+  /* 说明文字走说明档（§6.4）：13px + fg-muted */
   [data-scope='popconfirm'][data-part='description'] {
     margin: 0;
-    font-size: var(--xh-text-body-size);
+    min-inline-size: 0;
+    font-size: var(--xh-popconfirm-description-font-size, var(--xh-text-secondary-size));
     line-height: var(--xh-leading-normal);
+    overflow-wrap: anywhere;
     color: var(--xh-popconfirm-description-fg, var(--xh-fg-muted));
   }
 
-  /* —— 两颗按钮 —— */
+  /* 箭头的底色与描边色，几何在 overlay-arrow.css。
+     交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中 */
+  [data-scope='popconfirm'][data-part='arrow'] {
+    --xh-_popconfirm-arrow-x: 50%;
+    --xh-_popconfirm-arrow-y: 50%;
+    --xh-_overlay-arrow-size: var(--xh-popconfirm-arrow-size, var(--xh-overlay-arrow-size));
+    --xh-_overlay-arrow-x: var(--xh-_popconfirm-arrow-x);
+    --xh-_overlay-arrow-y: var(--xh-_popconfirm-arrow-y);
+
+    background: var(--xh-popconfirm-bg, var(--xh-material-frosted-bg));
+    border: var(--xh-stroke-thin) solid var(--xh-popconfirm-border, var(--xh-material-frosted-border));
+  }
+
+  /*
+   * —— 两颗按钮 ——
+   * 确认与取消都是浮层末行的文字按钮（§9.1）：盒型、sm 档几何、四态面、0.97 按压并换底、粗指针命中区与
+   * 强制色由家族配方按连接层投影的 data-xh-action-variant / -size 给出。这里只把公开槽桥接到矩阵之前
+   * （使用者槽 → 形态矩阵 → 家族缺省）与几何映射；内衬与圆角槽取两颗共用的 action 段。
+   */
   [data-scope='popconfirm'][data-part='confirm-trigger'],
   [data-scope='popconfirm'][data-part='cancel-trigger'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    block-size: var(--xh-control-h-sm);
-    padding-inline: var(--xh-popconfirm-cancel-trigger-px, var(--xh-control-px-sm));
-    border: var(--xh-stroke-thin) solid transparent;
-    border-radius: var(--xh-popconfirm-action-radius, var(--xh-shape-control));
-    font-size: var(--xh-text-secondary-size);
-    font-weight: var(--xh-text-label-weight);
-    line-height: var(--xh-leading-none);
-    white-space: nowrap;
-    cursor: pointer;
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    --xh-action-padding-inline: var(--xh-popconfirm-action-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-popconfirm-action-radius, var(--xh-shape-control));
+    --xh-action-shadow-rest: var(--xh-popconfirm-action-shadow, none);
+    /* 作者塞进按钮的图标随档取字形尺（sm = 16px） */
+    --xh-icon-size: var(--xh-popconfirm-icon-size, var(--xh-_action-profile-glyph-size));
+
+    /* 动作钮的文字与 Button 同一字重（家族配方不管字重） */
+    font-weight: var(--xh-popconfirm-action-font-weight, var(--xh-text-label-weight));
   }
 
   /* 并排落在最后一行的右侧两格；取消在左、确认在右 */
@@ -161,18 +236,27 @@
     grid-column: 3;
   }
 
-  /* 确认是实心的主操作。底色走共享语气槽：作者在 content 上写 data-tone="danger"
-     就整体换成危险色，不写则用品牌色 */
+  /* 确认是实心的主操作（§7.2 第 2 条）。底色走共享语气槽：作者在 content 上写 data-tone="danger"
+     就整体换成危险色，不写则用品牌色——配方 solid 列本就读 --xh-_tone，这里只桥接使用者槽 */
   [data-scope='popconfirm'][data-part='confirm-trigger'] {
-    background: var(--xh-popconfirm-confirm-bg, var(--xh-_tone, var(--xh-bg-brand)));
-    color: var(--xh-popconfirm-confirm-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
+    --xh-action-bg-rest: var(--xh-popconfirm-confirm-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-focus-visible: var(--xh-popconfirm-confirm-bg, var(--xh-_action-variant-bg-focus-visible));
+    --xh-action-bg-loading: var(--xh-popconfirm-confirm-bg, var(--xh-_action-variant-bg-loading));
+    --xh-action-fg-rest: var(--xh-popconfirm-confirm-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-popconfirm-confirm-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-popconfirm-confirm-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-popconfirm-confirm-fg, var(--xh-_action-variant-fg-focus-visible));
+    --xh-action-fg-loading: var(--xh-popconfirm-confirm-fg, var(--xh-_action-variant-fg-loading));
+    --xh-action-shadow-rest: var(--xh-popconfirm-confirm-shadow, var(--xh-popconfirm-action-shadow, none));
   }
 
-  /* 异步确认挂起：按钮转圈、指针挂起；不是禁用，焦点与对比度都保持 */
-  [data-scope='popconfirm'][data-part='confirm-trigger'][data-loading] {
-    cursor: wait;
+  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的 */
+  [data-scope='popconfirm'][data-part='confirm-trigger'][data-xh-action-variant='solid']:focus-visible {
+    --xh-action-ring-color-focus-visible: currentColor;
   }
 
+  /* 异步确认挂起：确认文案前转一枚圆环；不是禁用，焦点与对比度都保持，在途指针由家族 loading 面给 */
   [data-scope='popconfirm'][data-part='confirm-trigger'][data-loading]::before {
     content: '';
     inline-size: 1em;
@@ -180,36 +264,27 @@
     margin-inline-end: var(--xh-space-1);
     border: var(--xh-stroke-thin) solid transparent;
     border-block-start-color: currentcolor;
-    border-radius: var(--xh-shape-pill);
-    animation: xh-popconfirm-rotate var(--xh-popconfirm-loading-duration, var(--xh-spin-duration)) linear infinite;
-  }
-
-  [data-scope='popconfirm'][data-part='confirm-trigger']:hover {
-    background: var(--xh-_tone-hover, var(--xh-bg-brand-hover));
-  }
-
-  [data-scope='popconfirm'][data-part='confirm-trigger']:active {
-    background: var(--xh-_tone-active, var(--xh-bg-brand-active));
+    border-radius: var(--xh-shape-circle);
+    animation: xh-popconfirm-rotate var(--xh-popconfirm-loading-duration, var(--xh-spin-duration)) var(--xh-motion-ease-loop) infinite;
   }
 
-  /* 取消是次要出口，用淡底中性色，不参与语气 */
+  /* 取消是中性的次要出口，不参与语气：content 上的 data-tone 会把 --xh-_tone-* 一路继承下来，
+     配方 outline 列的面、字与边都先读它，这里逐档钉回中性令牌——白底 / 磨砂面上走画布承载阶梯
+     悬停 --xh-bg-subtle（100）→ 按下 --xh-bg-subtle-hover（200）；聚焦档 -bg-focus / -fg-focus 两槽
+     桥到配方的 focus-visible 面，缺省透明底 + 静息字色吃库环 */
   [data-scope='popconfirm'][data-part='cancel-trigger'] {
-    background: var(--xh-popconfirm-cancel-bg, var(--xh-bg-subtle));
-    color: var(--xh-popconfirm-cancel-fg, var(--xh-fg-default));
-  }
-
-  [data-scope='popconfirm'][data-part='cancel-trigger']:hover {
-    background: var(--xh-bg-subtle-hover);
-  }
-
-  [data-scope='popconfirm'][data-part='cancel-trigger']:active {
-    background: var(--xh-bg-subtle-active);
-  }
-
-  [data-scope='popconfirm'][data-part='confirm-trigger']:focus-visible,
-  [data-scope='popconfirm'][data-part='cancel-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+    --xh-action-bg-rest: var(--xh-popconfirm-cancel-bg, transparent);
+    --xh-action-bg-hover: var(--xh-popconfirm-cancel-bg-hover, var(--xh-bg-subtle));
+    --xh-action-bg-pressed: var(--xh-popconfirm-cancel-bg-active, var(--xh-bg-subtle-hover));
+    --xh-action-bg-focus-visible: var(--xh-popconfirm-cancel-bg-focus, var(--xh-popconfirm-cancel-bg, transparent));
+    --xh-action-fg-rest: var(--xh-popconfirm-cancel-fg, var(--xh-fg-default));
+    --xh-action-fg-hover: var(--xh-popconfirm-cancel-fg, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-popconfirm-cancel-fg, var(--xh-fg-default));
+    --xh-action-fg-focus-visible: var(--xh-popconfirm-cancel-fg-focus, var(--xh-popconfirm-cancel-fg, var(--xh-fg-default)));
+    --xh-action-border-rest: var(--xh-popconfirm-cancel-border, var(--xh-border-control));
+    --xh-action-border-hover: var(--xh-popconfirm-cancel-border-hover, var(--xh-border-control-hover));
+    --xh-action-border-pressed: var(--xh-popconfirm-cancel-border-hover, var(--xh-border-control-hover));
+    --xh-action-border-focus-visible: var(--xh-popconfirm-cancel-border, var(--xh-border-control));
   }
 
   /* 减少动效：圆环停下并整圈换成虚线，静止的形状仍然读得出"还没好"。
@@ -228,10 +303,26 @@
     animation: none;
   }
 
+  @media (forced-colors: active) {
+    /* 系统色接管内容边界；装饰顶光在这一档没有额外信息。两颗按钮的强制色由家族配方给 */
+    [data-scope='popconfirm'][data-part='content'] {
+      background-image: none;
+    }
+  }
+
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   [data-scope='popconfirm'][data-part='root'][hidden],
+  [data-scope='popconfirm'][data-part='confirm-trigger'][hidden],
   [data-scope='popconfirm'][data-part='cancel-trigger'][hidden] {
     display: none;
   }
+
+  @media print {
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
+       收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
+    [data-scope='popconfirm'][data-part='positioner'] {
+      display: none;
+    }
+  }
 }