@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/hierarchy-chart.css

@@ -0,0 +1,298 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 hierarchy chart 样式。 */
+
+/* 标题、图例容器、视口、提示框、空态、焦点环与顺序色阶走 Chart 家族配方；下钻路径的项归 Collection Item 导航当前（nav 语境），
+   面、字色、字重与按压时间线由家族配方给，本皮肤只映射桥接槽。两份都 @import，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/chart.css';
+@import '../family/loading-ring.css';
+@import '../family/collection-item.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-hierarchy-chart {
+    --xh-hierarchy-chart-skin: 1;
+  }
+
+  /* 几何要用的像素值以这里的私有槽为真源：机器挂载后从计算样式读它们，作者覆盖组件槽即改变几何 */
+  .xh-scope-hierarchy-chart[data-part='root'] {
+    --xh-_chart-metric-bar-max: var(--xh-chart-bar-max);
+    --xh-_chart-metric-gap: var(--xh-hierarchy-chart-node-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-hierarchy-chart-node-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-hierarchy-chart-gap, var(--xh-space-3));
+    /* 路径上的尖角与作者塞进来的图标跟着路径的字号档走 */
+    --xh-icon-size: var(--xh-hierarchy-chart-icon-size, var(--xh-glyph-size-sm));
+  }
+
+  /* —— 家族配方的组件槽：标题、视口、提示框与空态由 family/chart.css 画，本图表的覆盖槽写在
+     对应部件上接进配方的私有槽，作者在部件或它的祖先上覆盖都生效 —— */
+  .xh-scope-hierarchy-chart[data-part='viewport'] {
+    --xh-_chart-height: var(--xh-hierarchy-chart-height, var(--xh-chart-height));
+  }
+
+  .xh-scope-hierarchy-chart[data-part='legend'] {
+    --xh-_chart-legend-gap: var(--xh-hierarchy-chart-legend-gap, var(--xh-space-4));
+  }
+
+  .xh-scope-hierarchy-chart[data-part='tooltip'] {
+    --xh-_chart-tooltip-gap: var(--xh-hierarchy-chart-tooltip-gap, var(--xh-space-1));
+    --xh-_chart-tooltip-py: var(--xh-hierarchy-chart-tooltip-py, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-px: var(--xh-hierarchy-chart-tooltip-px, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-radius: var(--xh-hierarchy-chart-tooltip-radius, var(--xh-shape-overlay));
+    --xh-_chart-tooltip-shadow: var(--xh-hierarchy-chart-tooltip-shadow, var(--xh-material-frosted-shadow));
+  }
+
+  .xh-scope-hierarchy-chart[data-part='tooltip-row'] {
+    --xh-_chart-tooltip-row-gap: var(--xh-hierarchy-chart-tooltip-row-gap, var(--xh-space-2));
+  }
+
+  .xh-scope-hierarchy-chart[data-part='tooltip-swatch'] {
+    --xh-_chart-tooltip-swatch-radius: var(--xh-hierarchy-chart-tooltip-swatch-radius, var(--xh-shape-inset));
+  }
+
+  .xh-scope-hierarchy-chart[data-part='empty'][data-state='loading'] {
+    --xh-_chart-empty-gap: var(--xh-hierarchy-chart-empty-gap, var(--xh-space-2));
+  }
+
+  /* —— 下钻路径：一行按钮，项与项之间画一个向前的尖角。尖角画在项的外面、不接指针，按钮的命中区只是自己的名字 —— */
+  .xh-scope-hierarchy-chart[data-part='path'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: var(--xh-hierarchy-chart-path-column-gap, calc(var(--xh-icon-size, var(--xh-glyph-size-sm)) + var(--xh-space-1) * 2));
+    row-gap: var(--xh-hierarchy-chart-path-row-gap, var(--xh-space-1));
+    font-size: var(--xh-hierarchy-chart-path-font-size, var(--xh-control-font-sm));
+  }
+
+  .xh-scope-hierarchy-chart[data-part='path'][hidden] {
+    display: none;
+  }
+
+  /* 项的几何、字号与面全经家族桥接槽：静息 muted，悬停换面，当前的根由连接层投影 data-xh-collection-terminal，
+     走家族的 terminal 态（不响应悬停与按下）。本条 (0,2,0) 压过家族基础块 (0,1,0)，不能再写 color / background */
+  .xh-scope-hierarchy-chart[data-part='path-item'] {
+    --xh-collection-block-padding: var(--xh-space-0);
+    --xh-collection-inline-padding: var(--xh-hierarchy-chart-path-item-px, var(--xh-space-1));
+    --xh-collection-radius: var(--xh-hierarchy-chart-path-item-radius, var(--xh-shape-control));
+    --xh-collection-font-size: var(--xh-hierarchy-chart-path-font-size, var(--xh-control-font-sm));
+    --xh-collection-fg-rest: var(--xh-hierarchy-chart-path-fg, var(--xh-fg-muted));
+    --xh-collection-bg-hover: var(--xh-hierarchy-chart-path-item-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-fg-hover: var(--xh-hierarchy-chart-path-item-fg-hover, var(--xh-fg-default));
+    --xh-collection-bg-pressed: var(--xh-hierarchy-chart-path-item-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-collection-fg-terminal: var(--xh-hierarchy-chart-path-item-fg-current, var(--xh-fg-default));
+    --xh-collection-font-weight-terminal: var(--xh-hierarchy-chart-path-item-font-weight-current, var(--xh-font-weight-medium));
+
+    /* 不裁溢出：尖角画在项的盒子外面。名字长时整条路径折行，不截断 */
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    border: none;
+    font-family: inherit;
+    line-height: var(--xh-leading-tight);
+    white-space: nowrap;
+  }
+
+  .xh-scope-hierarchy-chart[data-part='path-item'] + .xh-scope-hierarchy-chart[data-part='path-item']::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: calc(100% + var(--xh-space-1));
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    margin-block: auto;
+    background-color: var(--xh-hierarchy-chart-path-separator-fg, var(--xh-fg-subtle));
+    -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+    pointer-events: none;
+  }
+
+  .xh-scope-hierarchy-chart[data-part='path-item'][hidden] {
+    display: none;
+  }
+
+  /* 从右往左排版时「向前」在左边 */
+  [dir='rtl'] .xh-scope-hierarchy-chart[data-part='path-item']::before {
+    rotate: 180deg;
+  }
+
+  /* —— 色槽：第一层分支各取一个分类色，后代继承；作者可以在节点上覆盖 --xh-hierarchy-chart-series-color。
+     节点、名字与提示框的色标都带着色槽，各自从这里取系列色与配对的前景色 —— */
+  .xh-scope-hierarchy-chart[data-xh-chart-slot='1'] {
+    --xh-_chart-series: var(--xh-hierarchy-chart-series-color, var(--xh-chart-categorical-1));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-1);
+  }
+
+  .xh-scope-hierarchy-chart[data-xh-chart-slot='2'] {
+    --xh-_chart-series: var(--xh-hierarchy-chart-series-color, var(--xh-chart-categorical-2));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-2);
+  }
+
+  .xh-scope-hierarchy-chart[data-xh-chart-slot='3'] {
+    --xh-_chart-series: var(--xh-hierarchy-chart-series-color, var(--xh-chart-categorical-3));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-3);
+  }
+
+  .xh-scope-hierarchy-chart[data-xh-chart-slot='4'] {
+    --xh-_chart-series: var(--xh-hierarchy-chart-series-color, var(--xh-chart-categorical-4));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-4);
+  }
+
+  .xh-scope-hierarchy-chart[data-xh-chart-slot='5'] {
+    --xh-_chart-series: var(--xh-hierarchy-chart-series-color, var(--xh-chart-categorical-5));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-5);
+  }
+
+  .xh-scope-hierarchy-chart[data-xh-chart-slot='6'] {
+    --xh-_chart-series: var(--xh-hierarchy-chart-series-color, var(--xh-chart-categorical-6));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-6);
+  }
+
+  .xh-scope-hierarchy-chart[data-xh-chart-slot='7'] {
+    --xh-_chart-series: var(--xh-hierarchy-chart-series-color, var(--xh-chart-categorical-7));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-7);
+  }
+
+  .xh-scope-hierarchy-chart[data-xh-chart-slot='8'] {
+    --xh-_chart-series: var(--xh-hierarchy-chart-series-color, var(--xh-chart-categorical-8));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-8);
+  }
+
+  /* —— 节点：第一层取满色，往下每层向承载面混色变浅；名字的前景随之换：满色上取配对的前景色，
+     浅色上取正文色。连接层写的层按当前的根数，下钻之后看得见的第一层照样是满色 —— */
+  .xh-scope-hierarchy-chart[data-part='node'],
+  .xh-scope-hierarchy-chart[data-part='node-label'],
+  .xh-scope-hierarchy-chart[data-part='group-header'] {
+    --xh-_hierarchy-mix: 100%;
+    --xh-_hierarchy-ink: var(--xh-_chart-on-series);
+  }
+
+  .xh-scope-hierarchy-chart[data-level='2'] {
+    --xh-_hierarchy-mix: 48%;
+    --xh-_hierarchy-ink: var(--xh-fg-default);
+  }
+
+  .xh-scope-hierarchy-chart[data-level='3'] {
+    --xh-_hierarchy-mix: 32%;
+    --xh-_hierarchy-ink: var(--xh-fg-default);
+  }
+
+  .xh-scope-hierarchy-chart[data-level='4'] {
+    --xh-_hierarchy-mix: 22%;
+    --xh-_hierarchy-ink: var(--xh-fg-default);
+  }
+
+  /* 相邻节点之间的间隙由几何留出，不画描边；指着一个节点时不在同一条祖孙链上的节点淡出，被指着的不位移 */
+  .xh-scope-hierarchy-chart[data-part='node'] {
+    --xh-_hierarchy-fill: color-mix(in oklab, var(--xh-_chart-series) var(--xh-_hierarchy-mix), var(--xh-chart-surface));
+
+    fill: var(--xh-_hierarchy-fill);
+    stroke: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 有子节点的节点点下去是下钻 */
+  .xh-scope-hierarchy-chart[data-part='node'][aria-expanded] {
+    cursor: pointer;
+  }
+
+  /* 按值着色：颜色由 Chart 家族配方按段号与段内百分比兑好放在私有槽里，不再按层变浅。色阶的起点贴着承载面、
+     终点远离承载面：浅的一段写正文色，深的一段写承载面色，亮暗主题下都读得清 */
+  .xh-scope-hierarchy-chart[data-part='node'][data-seg] {
+    fill: var(--xh-_chart-seq-fill);
+  }
+
+  .xh-scope-hierarchy-chart[data-seg='low'] {
+    --xh-_hierarchy-ink: var(--xh-fg-default);
+  }
+
+  .xh-scope-hierarchy-chart[data-seg='high'] {
+    --xh-_hierarchy-ink: var(--xh-chart-surface);
+  }
+
+  .xh-scope-hierarchy-chart[data-part='node'][data-dimmed],
+  .xh-scope-hierarchy-chart[data-part='node-label'][data-dimmed],
+  .xh-scope-hierarchy-chart[data-part='group-header'][data-dimmed] {
+    opacity: var(--xh-chart-dim-alpha);
+  }
+
+  /* 名字与分组标题压在节点的颜色上：前景随层与着色方式取；它们不接指针，命中归节点 */
+  .xh-scope-hierarchy-chart[data-part='node-label'],
+  .xh-scope-hierarchy-chart[data-part='group-header'] {
+    fill: var(--xh-_hierarchy-ink);
+    pointer-events: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-hierarchy-chart[data-part='group-header'] {
+    font-weight: var(--xh-font-weight-medium);
+  }
+
+  /* 色阶图例：每层一条，名字、低端的值、渐变条、高端的值排成一行；值是标注字色、等宽数字 */
+  .xh-scope-hierarchy-chart[data-part='legend-scale'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-hierarchy-chart-legend-scale-gap, var(--xh-space-2));
+    color: var(--xh-fg-muted);
+    font-size: var(--xh-text-caption-size);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .xh-scope-hierarchy-chart[data-part='legend-scale-name'] {
+    color: var(--xh-fg-default);
+    font-size: var(--xh-text-body-size);
+  }
+
+  .xh-scope-hierarchy-chart[data-part='legend-scale-bar'] {
+    inline-size: var(--xh-hierarchy-chart-legend-scale-width, var(--xh-chart-legend-scale-width));
+    block-size: var(--xh-space-2);
+    border-radius: var(--xh-hierarchy-chart-legend-scale-bar-radius, var(--xh-shape-inset));
+    /* 低端在行首：角度乘方向符号，rtl 下渐变从右往左 */
+    background: linear-gradient(calc(90deg * var(--xh-direction-sign)), var(--xh-_hierarchy-scale-from), var(--xh-_chart-seq-mid) 28.6%, var(--xh-_chart-seq-end));
+    /* 节点只用色阶上 0.3–1 这一段（最浅的一段压在承载面上看不见）：渐变按同一段画，起点即 0.3 处的颜色，
+       中点落在 (0.5 − 0.3) / 0.7 处 */
+    --xh-_hierarchy-scale-from: color-mix(in oklch, var(--xh-_chart-seq-mid) 60%, var(--xh-_chart-seq-start));
+  }
+
+  /* 强制色：节点改成系统色的面与描边，名字取正文色；路径的尖角取正文色；色阶只留轮廓；焦点环在配方里 */
+  @media (forced-colors: active) {
+    .xh-scope-hierarchy-chart[data-part='node'],
+    .xh-scope-hierarchy-chart[data-part='node'][data-seg] {
+      fill: Canvas;
+      stroke: CanvasText;
+      stroke-width: var(--xh-stroke-thin);
+    }
+
+    .xh-scope-hierarchy-chart[data-part='node-label'],
+    .xh-scope-hierarchy-chart[data-part='group-header'] {
+      fill: CanvasText;
+    }
+
+    .xh-scope-hierarchy-chart[data-part='path-item'] + .xh-scope-hierarchy-chart[data-part='path-item']::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    /* 色阶在系统色下画不出来：只留轮廓，两端的值照常可读 */
+    .xh-scope-hierarchy-chart[data-part='legend-scale-bar'] {
+      border: var(--xh-stroke-thin) solid CanvasText;
+      background: Canvas;
+    }
+  }
+
+  /* 色阶声明了 display：作者写 hidden 时照样收起 */
+  .xh-scope-hierarchy-chart[data-part='legend-scale'][hidden] {
+    display: none;
+  }
+}

package/dist/css/highlight.css

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 highlight 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-highlight {
+    --xh-highlight-skin: 1;
+  }
+
+  /* 文本按原样显示：命中位置是按原串逐字符算的，折叠掉连续空格与换行会让看到的
+     与算出来的对不上。pre-wrap 保留空白但仍在容器边界换行 */
+  .xh-scope-highlight[data-part='root'] {
+    white-space: pre-wrap;
+  }
+
+  /* 浏览器给 mark 的默认底色是一个固定的亮黄，暗色主题下压在深底上刺眼、
+     配的黑字也不随主题走；这里整份换成随主题走的品牌淡底。
+     槽名带 mark 段与部件对上 */
+  .xh-scope-highlight[data-part='mark'] {
+    padding-inline: var(--xh-highlight-mark-px, var(--xh-space-0_5));
+    border-radius: var(--xh-highlight-mark-radius, var(--xh-shape-inset));
+    background: var(--xh-highlight-mark-bg, var(--xh-bg-brand-subtle));
+    color: var(--xh-highlight-mark-fg, var(--xh-fg-brand-strong));
+    font-weight: var(--xh-highlight-mark-font-weight, var(--xh-font-weight-medium));
+    /* 命中片段跨行时两半各自收边，否则圆角与内边距只画在整段的首尾。
+       两条都写：WebKit 只认带前缀那条 */
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
+
+  /* 语气落在根上而不是每个 mark 上：命中片段有好几个，用哪族颜色是整段的属性。
+     使用者槽排在语气之前：写死了 mark 的底与字色，六族语气一并让位 */
+  .xh-scope-highlight[data-part='root'][data-tone] [data-part='mark']:where(.xh-scope-highlight) {
+    background: var(--xh-highlight-mark-bg, var(--xh-_tone-subtle));
+    color: var(--xh-highlight-mark-fg, var(--xh-_tone-fg));
+  }
+}

package/dist/css/hover-card.css

@@ -0,0 +1,226 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 hover card 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/material.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-hover-card {
+    --xh-hover-card-skin: 1;
+  }
+
+  /* 根节点只把 trigger 与浮层收在一处，不参与定位（坐标系仍由祖先的定位上下文决定） */
+  .xh-scope-hover-card[data-part='root'] {
+    display: inline-block;
+  }
+
+  .xh-scope-hover-card[data-part='root'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-hover-card[data-part='trigger'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-hover-card-trigger-gap, var(--xh-control-gap-sm));
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: inherit;
+  }
+
+  .xh-scope-hover-card[data-part='trigger'][hidden] {
+    display: none;
+  }
+
+  /* 这里的 data-disabled 关掉的是卡片，不是宿主控件：光标仍旧交给宿主 */
+  .xh-scope-hover-card[data-part='root'][data-disabled],
+  .xh-scope-hover-card[data-part='trigger'][data-disabled] {
+    cursor: inherit;
+  }
+
+  /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
+  .xh-scope-hover-card[data-part='positioner'] {
+    /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
+    --xh-_hover-card-available-h: 100vh;
+    /* 落定那一侧的可用宽度，同样由定位引擎经内联自定义属性写进来，行内轴据此夹取；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时退到视口宽 */
+    --xh-_hover-card-available-w: 100vw;
+
+    /* 卡片内容的自绘条浮在内容之上：轨道不上底色，实色轨道会在卡片右缘糊一条竖灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
+    position: fixed;
+    z-index: var(--xh-hover-card-layer, var(--xh-_layer, var(--xh-layer-popover)));
+    /* 空壳不吃指针：trigger 与 content 之间那段间隙要能点得穿，
+       指针穿行的判定全靠 content 自己的进出事件 */
+    pointer-events: none;
+  }
+
+  /* 锚点被滚出可视区：整个浮层随之收起 */
+  .xh-scope-hover-card[data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  /* 缩放原点与进场位移按落定的那一侧给：卡片从贴着锚点的那条边涨开、沿主轴退让一小段。
+     两个槽由 content 继承。placement 是物理方向（引擎按 top / right / bottom / left 出值），
+     origin 与 translate 也是物理量，两边同轴，不随书写方向翻 */
+  .xh-scope-hover-card[data-part='positioner'][data-placement^='top'] {
+    --xh-_overlay-origin-y: 100%;
+    --xh-_overlay-enter-down: 1;
+  }
+
+  .xh-scope-hover-card[data-part='positioner'][data-placement^='bottom'] {
+    --xh-_overlay-origin-y: 0;
+    --xh-_overlay-enter-up: 1;
+  }
+
+  .xh-scope-hover-card[data-part='positioner'][data-placement^='left'] {
+    --xh-_overlay-origin-x: 100%;
+    --xh-_overlay-enter-right: 1;
+  }
+
+  .xh-scope-hover-card[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-hover-card[data-part='positioner']:is([data-placement='top-start'], [data-placement='bottom-start']) {
+    --xh-_overlay-origin-x: var(--xh-direction-start);
+  }
+
+  .xh-scope-hover-card[data-part='positioner']:is([data-placement='top-end'], [data-placement='bottom-end']) {
+    --xh-_overlay-origin-x: var(--xh-direction-end);
+  }
+
+  .xh-scope-hover-card[data-part='positioner']:is([data-placement='left-start'], [data-placement='right-start']) {
+    --xh-_overlay-origin-y: 0;
+  }
+
+  .xh-scope-hover-card[data-part='positioner']:is([data-placement='left-end'], [data-placement='right-end']) {
+    --xh-_overlay-origin-y: 100%;
+  }
+
+  /* 与 tooltip 不同：卡片本体承载交互，必须吃指针——
+     指针停在卡片上就不该收起，里面的链接与按钮也要点得到 */
+  .xh-scope-hover-card[data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-hover-card-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-hover-card-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-hover-card-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-hover-card-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-hover-card-backdrop, var(--xh-_material-backdrop));
+
+    /* 尺寸档只换这两个私有槽。size 落在 content 上而非 root：root 是可选部件，
+       面板几何也长在 content 上。语气不接：卡片是内容容器，语气该由里面的内容表达 */
+    --xh-_hover-card-pad: var(--xh-surface-pad-md);
+    --xh-_hover-card-max-w: var(--xh-overlay-max-w);
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-hover-card-gap, var(--xh-space-2));
+    inline-size: max-content;
+    /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的内容就点不到了 */
+    max-inline-size: min(var(--xh-hover-card-max-w, var(--xh-_hover-card-max-w)), var(--xh-_hover-card-available-w));
+    /* 内容由作者给，长度不可预知：不限高就整块伸出视口且滚不到 */
+    max-block-size: min(var(--xh-hover-card-max-h, var(--xh-overlay-max-h)), var(--xh-_hover-card-available-h));
+    overflow-y: auto;
+    /* 浮在页面之上的 Overlay 滚动面：滚到头不把页面一起带走 */
+    overscroll-behavior: contain;
+    padding-block: var(--xh-hover-card-py, var(--xh-_hover-card-pad));
+    padding-inline: var(--xh-hover-card-px, var(--xh-_hover-card-pad));
+    border-radius: var(--xh-hover-card-radius, var(--xh-shape-overlay));
+    pointer-events: auto;
+    /* 进退场的缩放锚在贴着锚点的那条边上；两个分量由 positioner 按 placement 写进私有槽 */
+    transform-origin: var(--xh-_overlay-origin-x, 50%) var(--xh-_overlay-origin-y, 50%);
+  }
+
+  /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致：
+     收起态连接层会给 content 打 hidden，而上面那条 display 正是要盖掉 UA 的
+     [hidden]{display:none}——退场动画得先能播。presence 读的是 content 的 animationName，
+     真正的收起由宿主在退场结束后落成内联 display:none（Vue 那边直接不渲染）。
+     其余声明了 display 的角色节点仍补 [hidden]，那几处没有退场动画。 */
+
+  /* 卡片是可编程聚焦的容器（tabindex=-1），焦点环留给里面真正的可聚焦元素 */
+  .xh-scope-hover-card[data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  .xh-scope-hover-card[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-hover-card[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-hover-card[data-part='content'][data-size='sm'] {
+    --xh-_hover-card-pad: var(--xh-surface-pad-sm);
+    --xh-_hover-card-max-w: var(--xh-overlay-max-w-sm);
+  }
+
+  .xh-scope-hover-card[data-part='content'][data-size='lg'] {
+    --xh-_hover-card-pad: var(--xh-surface-pad-lg);
+    --xh-_hover-card-max-w: var(--xh-overlay-max-w-lg);
+  }
+
+  .xh-scope-hover-card[data-part='title'] {
+    margin: 0;
+    font-size: var(--xh-hover-card-title-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-hover-card-title-font-weight, var(--xh-font-weight-semibold));
+    color: var(--xh-hover-card-title-fg, var(--xh-fg-default));
+  }
+
+  /* 说明文字走说明档：13px + fg-muted */
+  .xh-scope-hover-card[data-part='description'] {
+    margin: 0;
+    font-size: var(--xh-hover-card-description-font-size, var(--xh-text-secondary-size));
+    color: var(--xh-hover-card-description-fg, var(--xh-fg-muted));
+  }
+
+  /* 箭头的底色与描边色，几何在 overlay-arrow.css。
+     交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中 */
+  .xh-scope-hover-card[data-part='arrow'] {
+    --xh-_hover-card-arrow-x: 50%;
+    --xh-_hover-card-arrow-y: 50%;
+    --xh-_overlay-arrow-size: var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size));
+    --xh-_overlay-arrow-x: var(--xh-_hover-card-arrow-x);
+    --xh-_overlay-arrow-y: var(--xh-_hover-card-arrow-y);
+
+    background: var(--xh-hover-card-bg, var(--xh-material-frosted-bg));
+    border: var(--xh-stroke-thin) solid var(--xh-hover-card-border, var(--xh-material-frosted-border));
+  }
+
+  @media (forced-colors: active) {
+    .xh-scope-hover-card[data-part='content'] {
+      background-image: none;
+    }
+  }
+
+  @media print {
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
+       收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
+    .xh-scope-hover-card[data-part='positioner'] {
+      display: none;
+    }
+  }
+}