@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/pin-input.css

@@ -0,0 +1,191 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* PinInput 独立皮肤传递引入字段视觉盒：每一格 input 自身就是 Field Chrome 的 chrome 节点；full bundle 递归去重。 */
+@import '../family/field-chrome.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-pin-input {
+    --xh-pin-input-skin: 1;
+  }
+
+  /* 与文本框、数字框同一套堆叠：标签一行、格子一行。
+     格子的描边、底、圆角、五态与悬停由 Field Chrome 家族按格子上的 data-variant 生成，皮肤不再声明形态三档 */
+  .xh-scope-pin-input[data-part='root'] {
+    /* 尺寸档只换这两个私有槽，格子与分隔都从 root 继承它们，换档不必给每个部件各写一条选择器。
+       格子边长取控件高档，与同一行里的字段等高；字号取控件字号档；格间距三档同为 --xh-space-1 */
+    --xh-_pin-input-box-size: var(--xh-control-h-md);
+    --xh-_pin-input-box-gap: var(--xh-space-1);
+    --xh-_pin-input-box-font-size: var(--xh-control-font-md);
+    /* 填满态的强调色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回品牌色 */
+    --xh-_pin-input-accent: var(--xh-_tone, var(--xh-bg-brand));
+
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--xh-pin-input-gap, var(--xh-space-1));
+    /* 每格都有定宽，一行格子的最小宽度就是这些定宽之和，收缩到边框盒之内不再有余地：
+       不封顶的话整块控件按这个和撑开，比容器宽多少就顶出多少。
+       封到容器那么宽，格子那条收缩才有得可收 */
+    max-inline-size: 100%;
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  .xh-scope-pin-input[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 尺寸 —— */
+  .xh-scope-pin-input[data-part='root'][data-size='sm'] {
+    --xh-_pin-input-box-size: var(--xh-control-h-sm);
+    --xh-_pin-input-box-font-size: var(--xh-control-font-sm);
+  }
+
+  .xh-scope-pin-input[data-part='root'][data-size='lg'] {
+    --xh-_pin-input-box-size: var(--xh-control-h-lg);
+    --xh-_pin-input-box-font-size: var(--xh-control-font-lg);
+  }
+
+  .xh-scope-pin-input[data-part='label'] {
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-pin-input-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-pin-input-label-gap, var(--xh-space-2)) - var(--xh-pin-input-gap, var(--xh-space-1)));
+    color: var(--xh-pin-input-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-pin-input-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-pin-input-label-font-weight, var(--xh-text-label-weight));
+  }
+
+  .xh-scope-pin-input[data-part='label'][data-disabled] {
+    color: var(--xh-pin-input-label-fg-disabled, var(--xh-fg-muted));
+  }
+
+  /* 分段：连着的几格圈成一段。它只排版，格间距仍由格子自己的相邻兄弟规则给 */
+  .xh-scope-pin-input[data-part='group'] {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .xh-scope-pin-input[data-part='group'][hidden] {
+    display: none;
+  }
+
+  /* 段间分隔：两段之间的一道短横或圆点，两侧各留一格间距 */
+  .xh-scope-pin-input[data-part='separator'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    margin-inline: var(--xh-pin-input-separator-gap, var(--xh-_pin-input-box-gap));
+    color: var(--xh-pin-input-separator-fg, var(--xh-fg-muted));
+    font-size: var(--xh-pin-input-separator-font-size, var(--xh-_pin-input-box-font-size));
+    line-height: var(--xh-leading-none);
+    user-select: none;
+  }
+
+  .xh-scope-pin-input[data-part='separator'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-pin-input[data-part='separator'][data-disabled] {
+    color: var(--xh-pin-input-separator-fg-disabled, var(--xh-fg-disabled));
+  }
+
+  /* 每格是等宽方框：它自身就是 Field Chrome 的 chrome 节点，宽高同取一个尺寸，内边距归零。
+     留了内边距，单字符居中后可用宽度不足，中文与全角字符会被挤出框外。
+     组件层只把既有公开槽映射到家族合同；不投影 data-xh-field-input，否则家族会把格子的边框重置掉 */
+  .xh-scope-pin-input[data-part='input'] {
+    --xh-field-control-height: var(--xh-pin-input-box-size, var(--xh-_pin-input-box-size));
+    --xh-field-control-padding-inline: 0;
+    --xh-field-control-gap: 0;
+    --xh-field-control-min-inline-size: 0;
+    --xh-field-control-radius: var(--xh-pin-input-box-radius, var(--xh-shape-control));
+    --xh-field-bg-rest: var(--xh-pin-input-box-bg, var(--xh-_field-variant-bg-rest));
+    --xh-field-bg-hover: var(--xh-pin-input-box-bg-hover, var(--xh-_field-variant-bg-hover));
+    --xh-field-bg-read-only: var(--xh-pin-input-box-bg-readonly, var(--xh-_field-variant-bg-read-only));
+    --xh-field-bg-disabled: var(--xh-pin-input-box-bg-disabled, var(--xh-_field-variant-bg-disabled));
+    --xh-field-fg-rest: var(--xh-pin-input-box-fg, var(--xh-fg-default));
+    --xh-field-border-rest: var(--xh-pin-input-box-border, var(--xh-_field-variant-border-rest));
+    --xh-field-border-hover: var(--xh-pin-input-box-border-hover, var(--xh-_field-variant-border-hover));
+    --xh-field-border-focus: var(--xh-pin-input-box-border-focus, var(--xh-_field-variant-border-focus));
+    --xh-field-border-invalid: var(--xh-pin-input-box-border-invalid, var(--xh-_field-variant-border-invalid));
+    --xh-field-shadow-rest: var(--xh-pin-input-box-shadow, none);
+
+    /* 一行放不下时逐格收窄，收不动就整行顶出屏幕。
+       min-inline-size 归零解开表单控件那份按字符数算出来的自动最小宽度。
+       高度不跟着收：它取自控件高度尺，与同一行里别的控件对齐靠的就是这个数。
+       宽度放得下时收窄量为零，格子仍是尺寸档给的那个正方形。 */
+    flex: 0 1 auto;
+    min-inline-size: 0;
+    inline-size: var(--xh-pin-input-box-size, var(--xh-_pin-input-box-size));
+    padding: 0;
+    /* 表单控件不继承页面字体，只给字号会让格子用 UA 默认字族 */
+    font-family: inherit;
+    font-size: var(--xh-pin-input-box-font-size, var(--xh-_pin-input-box-font-size));
+    /* 等宽数字：各位字宽不一时逐格填入会让每格里的字符左右跳 */
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-leading-none);
+    text-align: center;
+  }
+
+  /* 格间距只能长在格子自己身上：包住这一行的容器是作者写的，不在角色表里，
+     指望它给 gap 就等于把间距交给了皮肤管不着的地方。
+     用相邻兄弟而不是给每格加外边距，是为了不在首尾多出两段空白 */
+  .xh-scope-pin-input[data-part='input'] + .xh-scope-pin-input[data-part='input'] {
+    margin-inline-start: var(--xh-pin-input-box-gap, var(--xh-_pin-input-box-gap));
+  }
+
+  .xh-scope-pin-input[data-part='input']::placeholder {
+    color: var(--xh-pin-input-placeholder-fg, var(--xh-fg-subtle));
+  }
+
+  /* 一行格子长得一模一样，光标那道竖线太细，看不出正在填哪一格：当前格与字段外壳的聚焦态同一副面——
+     换承载面 + 聚焦描边，压在别的格子的字段淡底之间一眼分得出，不另画环（强制色档由家族补系统色环）。
+     data-focus 由机器给（它知道谁是当前格），家族的 :focus-within 兜住机器状态还没回流的那一帧，
+     两条同时写不冲突。焦点边一律家族的 --xh-border-control-focus，不随 tone */
+  .xh-scope-pin-input[data-part='input'][data-focus] {
+    border-color: var(--xh-pin-input-box-border-focus, var(--xh-_field-variant-border-focus));
+    background-color: var(--xh-_field-variant-bg-focus);
+  }
+
+  /* 填满只代表"格子都有字"，不代表"验证码对"，所以用品牌色而不是成功色收个尾。
+     已经标了 invalid 的不在此列——那是明确说了不对 */
+  .xh-scope-pin-input[data-part='root'][data-complete]
+    .xh-scope-pin-input[data-part='input']:not([data-invalid], :disabled) {
+    border-color: var(--xh-pin-input-box-border-complete, var(--xh-_pin-input-accent));
+  }
+
+  /* 自动填充：一次性验证码由平台直接灌进这一行格子，引擎顺手给每格强加一套系统色
+     （多数是黄底黑字），盖得过 background 与 color，深色档下就剩一行不跟主题走的黄方块。
+     格子没投影 data-xh-field-input，家族那两条 autofill 命不中，这里自写一份：
+     底改用 inset 阴影铺回来，扩散量 100vmax 填满内容盒；字改用 -webkit-text-fill-color
+     接回来，那是这个态下唯一还听样式表的前景通道。
+     不去拉长 transition 把系统底推迟显现：那只是把它藏起来，减弱动效通道一关过渡就当场露出。
+     两个选择器名分写两条：一条选择器列表里只要有一个名字不被认识，整条规则就被丢弃。
+     底取一支不透明的面令牌而不是家族的形态底：后者在 ghost 档下是透明的，铺一层透明等于没铺。 */
+  .xh-scope-pin-input[data-part='input']:autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-pin-input-box-autofill-bg, var(--xh-bg-canvas));
+    -webkit-text-fill-color: var(--xh-pin-input-box-autofill-fg, var(--xh-fg-default));
+  }
+
+  .xh-scope-pin-input[data-part='input']:-webkit-autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-pin-input-box-autofill-bg, var(--xh-bg-canvas));
+    -webkit-text-fill-color: var(--xh-pin-input-box-autofill-fg, var(--xh-fg-default));
+  }
+
+  /* 连接层把它写成 type=hidden，UA 自己就不渲染；这里的视觉隐藏是给元素升级前那一瞬兜底
+     （作者手写的是一个普通 input，升级完成前它是可见的文本框）。
+     刻意不写 display：写了反而会盖掉 UA 对 type=hidden 的收起，把它显出来 */
+  .xh-scope-pin-input[data-part='hidden-input'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+}

package/dist/css/pointer.css

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/*
+ * 指针反馈的公共层：全库共用一份。
+ *
+ * 两件事写在这里。
+ *
+ * 一、触摸点按时浏览器画的那层高亮方块。它是继承属性，一条规则打在 [data-scope] 上就覆盖
+ * 库里的每一个节点与它们的后代，不必逐个组件登记。
+ *
+ * 二、禁用态的光标。「这个控件不可用」在库里有三种条件拼写：解剖打出来的 data-disabled、
+ * 原生表单控件的 :disabled、集合条目用的 aria-disabled——三者说的是同一件事，光标也是同一个。
+ * 选择器停在两个属性加一个条件（0,3,0）：与组件皮肤里
+ * [data-scope='x'][data-part='y'][data-disabled] 同级，本份排在全部组件皮肤之前，
+ * 要另画的组件照写即可压过。
+ *
+ * 「在途」不在这里：它是另一件事，光标是 progress，挂在哪个部件上逐个组件不同，
+ * 写成通配会盖到作者自己的内容上（列表外壳、快捷键展示、可调容器都带 data-loading / data-disabled，
+ * 而它们身上的这两个标记说的是「这项行为关掉了」，不是「这个控件不可用」）。
+ *
+ * 排在全部组件皮肤之前：组件不必为了换一个光标把整条规则重写一遍。
+ */
+@layer xihan.components {
+  [data-scope] {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  [data-scope][data-part][data-disabled],
+  [data-scope][data-part]:disabled,
+  [data-scope][data-part][aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+}

package/dist/css/popconfirm.css

@@ -0,0 +1,329 @@
+/*
+ * 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';
+@import '../family/loading-ring.css';
+@import '../family/material.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-popconfirm {
+    --xh-popconfirm-skin: 1;
+  }
+
+  /* 根只框住触发器：浮层树靠 positioner 的固定定位飞出去，不占根的盒子 */
+  .xh-scope-popconfirm[data-part='root'] {
+    display: inline-block;
+  }
+
+  /*
+   * 触发器是页面上的独立文字按钮：盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
+   * 由家族配方按连接层投影的 data-xh-action-variant / -size 给出。皮肤没有自己的外观规则，
+   * 只把作者塞进按钮的图标接到随档字形尺（md = 20px）。
+   */
+  .xh-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} 还回去 */
+  .xh-scope-popconfirm[data-part='trigger'][hidden] {
+    display: none;
+  }
+
+  /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
+  .xh-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, var(--xh-layer-popover)));
+    /* 空壳不吃指针，交互只发生在 content 上 */
+    pointer-events: none;
+  }
+
+  /* 锚点被滚出可视区：整个浮层随之收起 */
+  .xh-scope-popconfirm[data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  /* 缩放原点与进场位移按落定的那一侧给：面板从贴着锚点的那条边涨开、沿主轴退让一小段。
+     两个槽由 content 继承。placement 是物理方向（引擎按 top / right / bottom / left 出值），
+     origin 与 translate 也是物理量，两边同轴，不随书写方向翻 */
+  .xh-scope-popconfirm[data-part='positioner'][data-placement^='top'] {
+    --xh-_overlay-origin-y: 100%;
+    --xh-_overlay-enter-down: 1;
+  }
+
+  .xh-scope-popconfirm[data-part='positioner'][data-placement^='bottom'] {
+    --xh-_overlay-origin-y: 0;
+    --xh-_overlay-enter-up: 1;
+  }
+
+  .xh-scope-popconfirm[data-part='positioner'][data-placement^='left'] {
+    --xh-_overlay-origin-x: 100%;
+    --xh-_overlay-enter-right: 1;
+  }
+
+  .xh-scope-popconfirm[data-part='positioner'][data-placement^='right'] {
+    --xh-_overlay-origin-x: 0;
+    --xh-_overlay-enter-left: 1;
+  }
+
+  /* 交叉轴原点按对齐取：start / end 对齐时面板与锚点在那一端齐平，缩放从那一端涨开，贴着小触发器的面板
+     才像是从触发器里长出来；居中对齐留在中线。上下两侧的 start / end 是行内轴上的逻辑对齐，RTL 下起始缘在右；
+     左右两侧的 start / end 落在块轴上，不随书写方向翻 */
+  /* 起始缘与末尾缘按就近的书写方向取：LTR 起始在左，RTL 起始在右 */
+  .xh-scope-popconfirm[data-part='positioner']:is([data-placement='top-start'], [data-placement='bottom-start']) {
+    --xh-_overlay-origin-x: var(--xh-direction-start);
+  }
+
+  .xh-scope-popconfirm[data-part='positioner']:is([data-placement='top-end'], [data-placement='bottom-end']) {
+    --xh-_overlay-origin-x: var(--xh-direction-end);
+  }
+
+  .xh-scope-popconfirm[data-part='positioner']:is([data-placement='left-start'], [data-placement='right-start']) {
+    --xh-_overlay-origin-y: 0;
+  }
+
+  .xh-scope-popconfirm[data-part='positioner']:is([data-placement='left-end'], [data-placement='right-end']) {
+    --xh-_overlay-origin-y: 100%;
+  }
+
+  /* 面板排成三列：左列吃掉剩余宽度，右两列各摆一颗按钮。
+     标题、说明与作者塞进来的内容各占一整行，两颗按钮因此并排落在最后一行的右侧。 */
+  .xh-scope-popconfirm[data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-popconfirm-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-popconfirm-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-popconfirm-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-popconfirm-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-popconfirm-backdrop, var(--xh-_material-backdrop));
+
+    /* 作者塞进面板里的图标按控件档取；两颗动作钮另由家族配方按 sm 档下发字形尺 */
+    --xh-icon-size: var(--xh-popconfirm-icon-size, var(--xh-glyph-size-md));
+    /* 尺寸档只换这三个私有槽：横向内衬比纵向高一档（缺省纵 12 横 16），与 popover 同一套 */
+    --xh-_popconfirm-py: var(--xh-surface-pad-md);
+    --xh-_popconfirm-px: var(--xh-surface-pad-lg);
+    --xh-_popconfirm-max-w: var(--xh-overlay-max-w);
+
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    align-items: center;
+    /* 行距与气泡族同一档：标题与说明之间只留 4px；两颗钮之间的列距另由 column-gap 放宽。
+       column-gap 写在 gap 之后，先回落到 gap 槽再取缺省：作者只写 --xh-popconfirm-gap 时行列一起跟着它走 */
+    gap: var(--xh-popconfirm-gap, var(--xh-space-1));
+    column-gap: var(--xh-popconfirm-column-gap, var(--xh-popconfirm-gap, var(--xh-space-2)));
+    inline-size: max-content;
+    /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的两颗钮就点不到了 */
+    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 滚动面：滚到头不把页面一起带走 */
+    overscroll-behavior: contain;
+    padding-block: var(--xh-popconfirm-py, var(--xh-_popconfirm-py));
+    padding-inline: var(--xh-popconfirm-px, var(--xh-_popconfirm-px));
+    border-radius: var(--xh-popconfirm-radius, var(--xh-shape-overlay));
+    pointer-events: auto;
+    /* 进退场的缩放锚在贴着锚点的那条边上；两个分量由 positioner 按 placement 写进私有槽 */
+    transform-origin: var(--xh-_overlay-origin-x, 50%) var(--xh-_overlay-origin-y, 50%);
+  }
+
+  .xh-scope-popconfirm[data-part='content'] > * {
+    grid-column: 1 / -1;
+  }
+
+  /* 箭头绝对定位挂在 content 上，不占格：吃到栅格位的话它的贴边就从格线起算，被内衬推进面里 */
+  .xh-scope-popconfirm[data-part='content'] > [data-part='arrow']:where(.xh-scope-popconfirm) {
+    grid-column: auto;
+  }
+
+  /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致：
+     收起态连接层会给 content 打 hidden，而上面那条 display 正是要盖掉 UA 的
+     [hidden]{display:none}——退场动画得先能播。presence 读的是 content 的 animationName，
+     真正的收起由宿主在退场结束后落成内联 display:none（Vue 那边直接不渲染）。
+     其余声明了 display 的角色节点仍补 [hidden]，那几处没有退场动画。 */
+
+  .xh-scope-popconfirm[data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  .xh-scope-popconfirm[data-part='content'][data-state='open']:not([data-instant]) {
+    animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
+     免得动画结束到真收起之间闪一下原样 */
+  .xh-scope-popconfirm[data-part='content'][data-state='closed'] {
+    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在 content 的基础规则里；内衬三档取 surface-pad 那把尺，横向始终比纵向高一档 */
+  .xh-scope-popconfirm[data-part='content'][data-size='sm'] {
+    --xh-_popconfirm-py: var(--xh-surface-pad-sm);
+    --xh-_popconfirm-px: var(--xh-surface-pad-md);
+    --xh-_popconfirm-max-w: var(--xh-overlay-max-w-sm);
+  }
+
+  .xh-scope-popconfirm[data-part='content'][data-size='lg'] {
+    --xh-_popconfirm-py: var(--xh-surface-pad-lg);
+    --xh-_popconfirm-px: var(--xh-surface-pad-xl);
+    --xh-_popconfirm-max-w: var(--xh-overlay-max-w-lg);
+  }
+
+  /* 气泡标题：14px / medium / 正文色 */
+  .xh-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-medium));
+    line-height: var(--xh-leading-tight);
+    overflow-wrap: anywhere;
+    color: var(--xh-popconfirm-title-fg, var(--xh-material-frosted-fg));
+  }
+
+  /* 说明就是气泡的正文：14px 正文字号 + fg-muted 次级色 */
+  .xh-scope-popconfirm[data-part='description'] {
+    margin: 0;
+    min-inline-size: 0;
+    font-size: var(--xh-popconfirm-description-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-normal);
+    overflow-wrap: anywhere;
+    color: var(--xh-popconfirm-description-fg, var(--xh-fg-muted));
+  }
+
+  /* 箭头的底色与描边色，几何在 overlay-arrow.css。
+     交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中 */
+  .xh-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));
+  }
+
+  /*
+   * —— 两颗按钮 ——
+   * 确认与取消都是浮层末行的文字按钮：盒型、sm 档几何、四态面、0.97 按压并换底、粗指针命中区与
+   * 强制色由家族配方按连接层投影的 data-xh-action-variant / -size 给出。这里只把公开槽桥接到矩阵之前
+   * （使用者槽 → 形态矩阵 → 家族缺省）与几何映射；内衬与圆角槽取两颗共用的 action 段。
+   */
+  .xh-scope-popconfirm[data-part='confirm-trigger'],
+  .xh-scope-popconfirm[data-part='cancel-trigger'] {
+    --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));
+    /* 末行与上面的文字隔开：栅格行距只有标题与说明之间那 4px，钮再往下让 12px，文字与钮之间共 16px */
+    margin-block-start: var(--xh-popconfirm-action-mt, var(--xh-space-3));
+  }
+
+  /* 并排落在最后一行的右侧两格；取消在左、确认在右 */
+  .xh-scope-popconfirm[data-part='content'] > [data-part='cancel-trigger']:where(.xh-scope-popconfirm) {
+    grid-column: 2;
+  }
+
+  .xh-scope-popconfirm[data-part='content'] > [data-part='confirm-trigger']:where(.xh-scope-popconfirm) {
+    grid-column: 3;
+  }
+
+  /* 确认是实心的主操作。底色走共享语气槽：作者在 content 上写 data-tone="danger"
+     就整体换成危险色，不写则用品牌色——配方 solid 列本就读 --xh-_tone，这里只桥接使用者槽 */
+  .xh-scope-popconfirm[data-part='confirm-trigger'] {
+    --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));
+  }
+
+  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的 */
+  .xh-scope-popconfirm[data-part='confirm-trigger'][data-xh-action-variant='solid']:focus-visible {
+    --xh-action-ring-color-focus-visible: currentColor;
+  }
+
+  /* 异步确认挂起：环由加载环配方压在确认钮正中（连接层投影 data-xh-loading-ring="overlay"），直径取钮的图标档，
+     起始边取钮的真实前景、转速认使用者槽。不是禁用，焦点与对比度都保持，在途指针由家族 loading 面给。
+     确认文案随前景淡到透明留位：进入挂起等一个 micro 才起淡（快速落定什么都不闪），落定时不等、按 micro 淡回 */
+  .xh-scope-popconfirm[data-part='confirm-trigger'] {
+    --xh-_loading-ring-fg: var(--xh-popconfirm-confirm-fg, var(--xh-_action-variant-fg-loading));
+    --xh-_loading-ring-duration: var(--xh-popconfirm-loading-duration, var(--xh-motion-loop-spin));
+  }
+
+  .xh-scope-popconfirm[data-part='confirm-trigger'][data-loading] {
+    --xh-action-fg-loading: transparent;
+
+    transition-delay: var(--xh-motion-duration-micro);
+  }
+
+  /* 取消是中性的次要出口，不参与语气：content 上的 data-tone 会把 --xh-_tone-* 一路继承下来，
+     配方 outline 列的面、字与边都先读它，这里逐档钉回中性令牌——白底 / 磨砂面上走画布承载阶梯
+     悬停 --xh-bg-subtle（100）→ 按下 --xh-bg-subtle-hover（200）；聚焦档 -bg-focus / -fg-focus 两槽
+     桥到配方的 focus-visible 面，缺省透明底 + 静息字色吃库环 */
+  .xh-scope-popconfirm[data-part='cancel-trigger'] {
+    --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));
+  }
+
+  @media (forced-colors: active) {
+    /* 系统色接管内容边界；装饰顶光在这一档没有额外信息。两颗按钮的强制色由家族配方给 */
+    .xh-scope-popconfirm[data-part='content'] {
+      background-image: none;
+    }
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-popconfirm[data-part='root'][hidden],
+  .xh-scope-popconfirm[data-part='confirm-trigger'][hidden],
+  .xh-scope-popconfirm[data-part='cancel-trigger'][hidden] {
+    display: none;
+  }
+
+  @media print {
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
+       收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
+    .xh-scope-popconfirm[data-part='positioner'] {
+      display: none;
+    }
+  }
+}