@xihan-ui/styles 2.0.0 → 3.0.0

package/css/pie-chart.css

@@ -0,0 +1,247 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 pie chart 样式。 */
+
+/* 淡入关键帧由 family/motion.css 提供；标题、视口、图例、提示框、空态、焦点环与引导线走 Chart 家族配方。
+   本皮肤 @import 它们，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/chart.css';
+@import '../family/loading-ring.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='pie-chart'] {
+    --xh-pie-chart-skin: 1;
+  }
+
+  /* 几何要用的像素值以这里的私有槽为真源：机器挂载后从计算样式读它们，作者覆盖组件槽即改变几何 */
+  [data-scope='pie-chart'][data-part='root'] {
+    --xh-_chart-metric-bar-max: var(--xh-chart-bar-max);
+    --xh-_chart-metric-gap: var(--xh-pie-chart-slice-gap, var(--xh-chart-gap));
+    --xh-_chart-metric-line-width: var(--xh-chart-line-width);
+    --xh-_chart-metric-point-size: var(--xh-chart-point-size);
+    --xh-_chart-metric-hit-min: var(--xh-chart-hit-min);
+    --xh-_chart-metric-tick-length: var(--xh-chart-tick-length);
+    --xh-_chart-metric-label-gap: var(--xh-chart-label-gap);
+    --xh-_chart-metric-radius: var(--xh-pie-chart-slice-radius, var(--xh-shape-inset));
+    --xh-_chart-metric-font-size: var(--xh-text-caption-size);
+    --xh-_chart-metric-leading: var(--xh-leading-tight);
+    --xh-_chart-gap: var(--xh-pie-chart-gap, var(--xh-space-3));
+  }
+
+  /* —— 家族配方的组件槽：标题、视口、图例、提示框与空态由 family/chart.css 画，本图表的覆盖槽写在
+     对应部件上接进配方的私有槽，作者在部件或它的祖先上覆盖都生效 —— */
+  [data-scope='pie-chart'][data-part='viewport'] {
+    --xh-_chart-height: var(--xh-pie-chart-height, var(--xh-chart-height));
+  }
+
+  [data-scope='pie-chart'][data-part='legend'] {
+    --xh-_chart-legend-gap: var(--xh-pie-chart-legend-gap, var(--xh-space-1));
+  }
+
+  [data-scope='pie-chart'][data-part='legend-swatch'] {
+    --xh-_chart-legend-swatch-radius: var(--xh-pie-chart-legend-swatch-radius, var(--xh-shape-inset));
+  }
+
+  [data-scope='pie-chart'][data-part='tooltip'] {
+    --xh-_chart-tooltip-gap: var(--xh-pie-chart-tooltip-gap, var(--xh-space-1));
+    --xh-_chart-tooltip-py: var(--xh-pie-chart-tooltip-py, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-px: var(--xh-pie-chart-tooltip-px, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-radius: var(--xh-pie-chart-tooltip-radius, var(--xh-shape-overlay));
+    --xh-_chart-tooltip-shadow: var(--xh-pie-chart-tooltip-shadow, var(--xh-material-frosted-shadow));
+  }
+
+  [data-scope='pie-chart'][data-part='tooltip-row'] {
+    --xh-_chart-tooltip-row-gap: var(--xh-pie-chart-tooltip-row-gap, var(--xh-space-2));
+  }
+
+  [data-scope='pie-chart'][data-part='tooltip-swatch'] {
+    --xh-_chart-tooltip-swatch-radius: var(--xh-pie-chart-tooltip-swatch-radius, var(--xh-shape-inset));
+  }
+
+  [data-scope='pie-chart'][data-part='empty'][data-state='loading'] {
+    --xh-_chart-empty-gap: var(--xh-pie-chart-empty-gap, var(--xh-space-2));
+  }
+
+  /* —— 色槽：身份由色槽承担，作者可以在扇区上覆盖 --xh-pie-chart-series-color ——
+     扇区、内侧标签、图例项与提示框的行都带着色槽，各自从这里取系列色与配对的前景色 */
+  [data-scope='pie-chart'][data-xh-chart-slot='1'] {
+    --xh-_chart-series: var(--xh-pie-chart-series-color, var(--xh-chart-categorical-1));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-1);
+  }
+
+  [data-scope='pie-chart'][data-xh-chart-slot='2'] {
+    --xh-_chart-series: var(--xh-pie-chart-series-color, var(--xh-chart-categorical-2));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-2);
+  }
+
+  [data-scope='pie-chart'][data-xh-chart-slot='3'] {
+    --xh-_chart-series: var(--xh-pie-chart-series-color, var(--xh-chart-categorical-3));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-3);
+  }
+
+  [data-scope='pie-chart'][data-xh-chart-slot='4'] {
+    --xh-_chart-series: var(--xh-pie-chart-series-color, var(--xh-chart-categorical-4));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-4);
+  }
+
+  [data-scope='pie-chart'][data-xh-chart-slot='5'] {
+    --xh-_chart-series: var(--xh-pie-chart-series-color, var(--xh-chart-categorical-5));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-5);
+  }
+
+  [data-scope='pie-chart'][data-xh-chart-slot='6'] {
+    --xh-_chart-series: var(--xh-pie-chart-series-color, var(--xh-chart-categorical-6));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-6);
+  }
+
+  [data-scope='pie-chart'][data-xh-chart-slot='7'] {
+    --xh-_chart-series: var(--xh-pie-chart-series-color, var(--xh-chart-categorical-7));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-7);
+  }
+
+  [data-scope='pie-chart'][data-xh-chart-slot='8'] {
+    --xh-_chart-series: var(--xh-pie-chart-series-color, var(--xh-chart-categorical-8));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-8);
+  }
+
+  /* 合并出来的「其他」取中性色：它不是一个类目，不占分类色 */
+  [data-scope='pie-chart'][data-xh-chart-slot='other'] {
+    --xh-_chart-series: var(--xh-chart-categorical-other);
+  }
+
+  /* —— 扇区：相邻扇区之间的间隙由几何留出，不画描边；悬停时其余扇区淡出，被指着的不位移 —— */
+  [data-scope='pie-chart'][data-part='slice'] {
+    fill: var(--xh-_chart-series);
+    stroke: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='pie-chart'][data-part='slice'][data-dimmed],
+  [data-scope='pie-chart'][data-part='slice-label'][data-dimmed] {
+    opacity: var(--xh-chart-dim-alpha);
+  }
+
+  /* 外侧标签是标注：标注字色，不取扇区色；引导线的画法在配方里 */
+  [data-scope='pie-chart'][data-part='slice-label'] {
+    fill: var(--xh-chart-label);
+  }
+
+  /* 内侧标签压在扇区色上：取与色槽配对的前景色 */
+  [data-scope='pie-chart'][data-part='slice-label'][data-xh-chart-slot] {
+    fill: var(--xh-_chart-on-series);
+    font-weight: var(--xh-font-weight-medium);
+  }
+
+  /* —— 环形中心：叠在视口上，圆心与内径由几何给出；文字不超出内圈 —— */
+  /* 首次出现：外侧标签等扫开的边缘到了才淡入，连接层写入它占入场时长的比例，乘上入场时长就是延迟；
+     环形中心等整圈扫完再淡入 */
+  [data-scope='pie-chart'][data-part='slice-label'][data-drawing] {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter) both;
+    animation-delay: calc(var(--xh-motion-duration-reveal) * var(--xh-_chart-reveal-at));
+  }
+
+  [data-scope='pie-chart'][data-part='center'][data-drawing] {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter) both;
+    animation-delay: var(--xh-motion-duration-reveal);
+  }
+
+  [data-scope='pie-chart'][data-part='center'] {
+    position: absolute;
+    inset-block-start: var(--xh-_chart-center-y, 50%);
+    /* stylelint-disable-next-line property-disallowed-list -- 绘图区不随 RTL 镜像，圆心横坐标由连接层按物理左缘写入 */
+    left: var(--xh-_chart-center-x, 50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--xh-pie-chart-center-gap, var(--xh-space-0_5));
+    max-inline-size: calc(var(--xh-_chart-center-size, 0px) * 0.8);
+    text-align: center;
+    /* 中心不接指针：它压在内圈的空洞上，不挡扇区的命中 */
+    pointer-events: none;
+    translate: -50% -50%;
+  }
+
+  [data-scope='pie-chart'][data-part='center'][data-placement='top'] {
+    translate: -50% -100%;
+  }
+
+  [data-scope='pie-chart'][data-part='center'][hidden] {
+    display: none;
+  }
+
+  [data-scope='pie-chart'][data-part='center-value'] {
+    color: var(--xh-fg-default);
+    font-size: var(--xh-pie-chart-center-value-font-size, var(--xh-text-heading-3-size));
+    font-weight: var(--xh-font-weight-semibold);
+    line-height: var(--xh-leading-tight);
+    font-variant-numeric: tabular-nums;
+  }
+
+  [data-scope='pie-chart'][data-part='center-label'] {
+    color: var(--xh-fg-muted);
+    font-size: var(--xh-text-secondary-size);
+  }
+
+  /* —— 纹理：颜色不可用或不可靠时（强制色、打印、祖先写了 data-xh-chart-patterns），扇区改用本色槽在 defs 里的
+     纹理填充、描出轮廓（「其他」不带纹理）；压在扇区上的标签改用标签色、描一圈承载面色。色标的纹理在配方里 —— */
+  :where([data-xh-chart-patterns]) [data-scope='pie-chart'][data-part='slice'][data-xh-chart-pattern] {
+    fill: var(--xh-_chart-pattern);
+    stroke: var(--xh-_chart-series);
+    stroke-width: var(--xh-stroke-thin);
+  }
+
+  :where([data-xh-chart-patterns]) [data-scope='pie-chart'][data-part='slice-label'][data-xh-chart-slot] {
+    fill: var(--xh-chart-label);
+    stroke: var(--xh-chart-surface);
+    stroke-width: var(--xh-stroke-thick);
+    paint-order: stroke;
+  }
+
+  /* 强制色：扇区改成系统色的面与描边；纹理总是开启；焦点环、引导线与色标在配方里 */
+  @media (forced-colors: active) {
+    [data-scope='pie-chart'][data-part='slice'] {
+      fill: Canvas;
+      stroke: CanvasText;
+      stroke-width: var(--xh-stroke-thin);
+    }
+
+    [data-scope='pie-chart'][data-part='slice-label'],
+    [data-scope='pie-chart'][data-part='slice-label'][data-xh-chart-slot] {
+      fill: CanvasText;
+    }
+
+    [data-scope='pie-chart'][data-part='slice'][data-xh-chart-pattern] {
+      forced-color-adjust: none;
+      fill: var(--xh-_chart-pattern);
+      stroke: CanvasText;
+      stroke-width: var(--xh-stroke-thin);
+    }
+
+    [data-scope='pie-chart'][data-part='slice-label'][data-xh-chart-slot] {
+      fill: CanvasText;
+      stroke: Canvas;
+      stroke-width: var(--xh-stroke-thick);
+      paint-order: stroke;
+    }
+  }
+
+  /* 打印：纹理开启；提示框与焦点环在配方里 */
+  @media print {
+    [data-scope='pie-chart'][data-part='slice'][data-xh-chart-pattern] {
+      fill: var(--xh-_chart-pattern);
+      stroke: var(--xh-_chart-series);
+      stroke-width: var(--xh-stroke-thin);
+    }
+
+    [data-scope='pie-chart'][data-part='slice-label'][data-xh-chart-slot] {
+      fill: var(--xh-chart-label);
+      stroke: var(--xh-chart-surface);
+      stroke-width: var(--xh-stroke-thick);
+      paint-order: stroke;
+    }
+  }
+}

package/css/popconfirm.css

@@ -8,16 +8,8 @@
 /* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
 @import '../family/motion.css';
 @import '../family/action-control.css';
-
-@layer xihan.motion {
-  /* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
-  @keyframes xh-popconfirm-rotate {
-    to {
-      transform: rotate(1turn);
-    }
-  }
-}
-
+@import '../family/loading-ring.css';
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -31,7 +23,7 @@
   }
 
   /*
-   * 触发器是页面上的独立文字按钮（§9.1）：盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
+   * 触发器是页面上的独立文字按钮：盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
    * 由家族配方按连接层投影的 data-xh-action-variant / -size 给出。皮肤没有自己的外观规则，
    * 只把作者塞进按钮的图标接到随档字形尺（md = 20px）。
    */
@@ -90,10 +82,38 @@
     --xh-_overlay-enter-left: 1;
   }
 
+  /* 交叉轴原点按对齐取：start / end 对齐时面板与锚点在那一端齐平，缩放从那一端涨开，贴着小触发器的面板
+     才像是从触发器里长出来；居中对齐留在中线。上下两侧的 start / end 是行内轴上的逻辑对齐，RTL 下起始缘在右；
+     左右两侧的 start / end 落在块轴上，不随书写方向翻 */
+  /* 起始缘与末尾缘按就近的书写方向取：LTR 起始在左，RTL 起始在右 */
+  [data-scope='popconfirm'][data-part='positioner']:is([data-placement='top-start'], [data-placement='bottom-start']) {
+    --xh-_overlay-origin-x: var(--xh-direction-start);
+  }
+
+  [data-scope='popconfirm'][data-part='positioner']:is([data-placement='top-end'], [data-placement='bottom-end']) {
+    --xh-_overlay-origin-x: var(--xh-direction-end);
+  }
+
+  [data-scope='popconfirm'][data-part='positioner']:is([data-placement='left-start'], [data-placement='right-start']) {
+    --xh-_overlay-origin-y: 0;
+  }
+
+  [data-scope='popconfirm'][data-part='positioner']:is([data-placement='left-end'], [data-placement='right-end']) {
+    --xh-_overlay-origin-y: 100%;
+  }
+
   /* 面板排成三列：左列吃掉剩余宽度，右两列各摆一颗按钮。
      标题、说明与作者塞进来的内容各占一整行，两颗按钮因此并排落在最后一行的右侧。 */
   [data-scope='popconfirm'][data-part='content'] {
-    /* 作者塞进面板里的图标按控件档取（§6.5）；两颗动作钮另由家族配方按 sm 档下发字形尺 */
+    /* 材质由家族配方画（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));
     /* 尺寸档只换这两个私有槽 */
     --xh-_popconfirm-pad: var(--xh-surface-pad-md);
@@ -110,24 +130,11 @@
     /* 说明文案长度由作者给，矮视口下不限高面板会整块伸出视口且滚不到 */
     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）：滚到头不把页面一起带走 */
+    /* 浮在页面之上的 Overlay 滚动面：滚到头不把页面一起带走 */
     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%);
@@ -152,10 +159,9 @@
     outline: none;
   }
 
-  [data-scope='popconfirm'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-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);
-    /* 只在开着的这一档挂：合成层随 data-state 一起收走，收起后不再占着 */
-    will-change: opacity, scale, translate;
   }
 
   /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
@@ -186,7 +192,7 @@
     color: var(--xh-popconfirm-title-fg, var(--xh-material-frosted-fg));
   }
 
-  /* 说明文字走说明档（§6.4）：13px + fg-muted */
+  /* 说明文字走说明档：13px + fg-muted */
   [data-scope='popconfirm'][data-part='description'] {
     margin: 0;
     min-inline-size: 0;
@@ -211,7 +217,7 @@
 
   /*
    * —— 两颗按钮 ——
-   * 确认与取消都是浮层末行的文字按钮（§9.1）：盒型、sm 档几何、四态面、0.97 按压并换底、粗指针命中区与
+   * 确认与取消都是浮层末行的文字按钮：盒型、sm 档几何、四态面、0.97 按压并换底、粗指针命中区与
    * 强制色由家族配方按连接层投影的 data-xh-action-variant / -size 给出。这里只把公开槽桥接到矩阵之前
    * （使用者槽 → 形态矩阵 → 家族缺省）与几何映射；内衬与圆角槽取两颗共用的 action 段。
    */
@@ -236,7 +242,7 @@
     grid-column: 3;
   }
 
-  /* 确认是实心的主操作（§7.2 第 2 条）。底色走共享语气槽：作者在 content 上写 data-tone="danger"
+  /* 确认是实心的主操作。底色走共享语气槽：作者在 content 上写 data-tone="danger"
      就整体换成危险色，不写则用品牌色——配方 solid 列本就读 --xh-_tone，这里只桥接使用者槽 */
   [data-scope='popconfirm'][data-part='confirm-trigger'] {
     --xh-action-bg-rest: var(--xh-popconfirm-confirm-bg, var(--xh-_action-variant-bg-rest));
@@ -256,16 +262,18 @@
     --xh-action-ring-color-focus-visible: currentColor;
   }
 
-  /* 异步确认挂起：确认文案前转一枚圆环；不是禁用，焦点与对比度都保持，在途指针由家族 loading 面给 */
-  [data-scope='popconfirm'][data-part='confirm-trigger'][data-loading]::before {
-    content: '';
-    inline-size: 1em;
-    block-size: 1em;
-    margin-inline-end: var(--xh-space-1);
-    border: var(--xh-stroke-thin) solid transparent;
-    border-block-start-color: currentcolor;
-    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;
+  /* 异步确认挂起：环由加载环配方压在确认钮正中（连接层投影 data-xh-loading-ring="overlay"），直径取钮的图标档，
+     起始边取钮的真实前景、转速认使用者槽。不是禁用，焦点与对比度都保持，在途指针由家族 loading 面给。
+     确认文案随前景淡到透明留位：进入挂起等一个 micro 才起淡（快速落定什么都不闪），落定时不等、按 micro 淡回 */
+  [data-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));
+  }
+
+  [data-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-* 一路继承下来，
@@ -287,22 +295,6 @@
     --xh-action-border-focus-visible: var(--xh-popconfirm-cancel-border, var(--xh-border-control));
   }
 
-  /* 减少动效：圆环停下并整圈换成虚线，静止的形状仍然读得出"还没好"。
-     两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='popconfirm'][data-part='confirm-trigger'][data-loading]::before {
-      border-style: dotted;
-      border-color: currentColor;
-      animation: none;
-    }
-  }
-
-  :where([data-motion='reduce']) [data-scope='popconfirm'][data-part='confirm-trigger'][data-loading]::before {
-    border-style: dotted;
-    border-color: currentColor;
-    animation: none;
-  }
-
   @media (forced-colors: active) {
     /* 系统色接管内容边界；装饰顶光在这一档没有额外信息。两颗按钮的强制色由家族配方给 */
     [data-scope='popconfirm'][data-part='content'] {

package/css/popover.css

@@ -8,6 +8,7 @@
 /* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
 @import '../family/motion.css';
 @import '../family/action-control.css';
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -61,8 +62,28 @@
     --xh-_overlay-enter-left: 1;
   }
 
+  /* 交叉轴原点按对齐取：start / end 对齐时面板与锚点在那一端齐平，缩放从那一端涨开，贴着小触发器的面板
+     才像是从触发器里长出来；居中对齐留在中线。上下两侧的 start / end 是行内轴上的逻辑对齐，RTL 下起始缘在右；
+     左右两侧的 start / end 落在块轴上，不随书写方向翻 */
+  /* 起始缘与末尾缘按就近的书写方向取：LTR 起始在左，RTL 起始在右 */
+  [data-scope='popover'][data-part='positioner']:is([data-placement='top-start'], [data-placement='bottom-start']) {
+    --xh-_overlay-origin-x: var(--xh-direction-start);
+  }
+
+  [data-scope='popover'][data-part='positioner']:is([data-placement='top-end'], [data-placement='bottom-end']) {
+    --xh-_overlay-origin-x: var(--xh-direction-end);
+  }
+
+  [data-scope='popover'][data-part='positioner']:is([data-placement='left-start'], [data-placement='right-start']) {
+    --xh-_overlay-origin-y: 0;
+  }
+
+  [data-scope='popover'][data-part='positioner']:is([data-placement='left-end'], [data-placement='right-end']) {
+    --xh-_overlay-origin-y: 100%;
+  }
+
   /*
-   * 触发器是页面上的独立文字按钮（§9.1）：盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
+   * 触发器是页面上的独立文字按钮：盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
    * 由家族配方按连接层投影的 data-xh-action-variant / -size 给出。皮肤没有自己的外观规则，
    * 只把作者塞进按钮的图标接到随档字形尺（md = 20px）。
    */
@@ -76,7 +97,15 @@
   }
 
   [data-scope='popover'][data-part='content'] {
-    /* 作者塞进面板里的图标按控件档取（§6.5）；关闭钮另由家族配方按 sm 档下发字形尺 */
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-popover-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-popover-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-popover-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-popover-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-popover-backdrop, var(--xh-_material-backdrop));
+
+    /* 作者塞进面板里的图标按控件档取；关闭钮另由家族配方按 sm 档下发字形尺 */
     --xh-icon-size: var(--xh-popover-icon-size, var(--xh-glyph-size-md));
 
     /* 尺寸档只换这两个私有槽。popover 没有 root 部件，size 落在浮层树最外层的 content 上。
@@ -94,24 +123,11 @@
     /* 内容由作者给，长度不可预知：不限高就整块伸出视口且滚不到 */
     max-block-size: min(var(--xh-popover-max-h, var(--xh-overlay-max-h)), var(--xh-_popover-available-h));
     overflow-y: auto;
-    /* 浮在页面之上的 Overlay 滚动面（§6.6）：滚到头不把页面一起带走 */
+    /* 浮在页面之上的 Overlay 滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
     padding-block: var(--xh-popover-py, var(--xh-_popover-pad));
     padding-inline: var(--xh-popover-px, var(--xh-_popover-pad));
-    border: var(--xh-stroke-thin) solid var(--xh-popover-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-popover-radius, var(--xh-shape-overlay));
-    /* 顶光只占内侧一像素；透明 tint 是底层，正文自己保持不透明。 */
-    background:
-      linear-gradient(
-        to bottom,
-        var(--xh-material-frosted-highlight) 0 var(--xh-stroke-thin),
-        transparent var(--xh-stroke-thin)
-      ),
-      var(--xh-popover-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-popover-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-popover-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-popover-backdrop, var(--xh-material-frosted-backdrop));
-    backdrop-filter: var(--xh-popover-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%);
@@ -127,10 +143,9 @@
     outline: none;
   }
 
-  [data-scope='popover'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='popover'][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);
-    /* 只在开着的这一档挂：合成层随 data-state 一起收走，收起后不再占着 */
-    will-change: opacity, scale, translate;
   }
 
   /* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
@@ -158,7 +173,7 @@
     color: var(--xh-popover-title-fg, var(--xh-material-frosted-fg));
   }
 
-  /* 说明文字走说明档（§6.4）：13px + fg-muted */
+  /* 说明文字走说明档：13px + fg-muted */
   [data-scope='popover'][data-part='description'] {
     margin: 0;
     font-size: var(--xh-popover-description-font-size, var(--xh-text-secondary-size));
@@ -173,7 +188,7 @@
   }
 
   /*
-   * 关闭钮是浮层角落的单图标钮（§9.1）：正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
+   * 关闭钮是浮层角落的单图标钮：正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
    * 由家族配方给出——磨砂白面上走画布承载阶梯悬停 --xh-bg-subtle（100）→ 按下 --xh-bg-subtle-hover（200），
    * 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与摆放，
    * 聚焦档的 -bg-focus / -fg-focus 两槽同样桥到配方的 focus-visible 面，缺省仍是透明底与悬停字色：
@@ -242,4 +257,23 @@
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='popover'][data-part='close-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='popover'][data-part='close-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='popover'][data-part='close-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }