@xihan-ui/styles 2.0.0 → 3.0.0

package/css/floating-panel.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 探一次，取不到就说明这份皮肤没被引入。 */
@@ -21,7 +22,7 @@
      皮肤只管层级、配色、圆角、阴影、把手的摆放与状态表现。 */
 
   [data-scope='floating-panel'][data-part='root'] {
-    /* 作者塞进面板里的图标按控件档取（§6.5）；标题栏上的按钮另由家族配方按各自的档下发字形尺 */
+    /* 作者塞进面板里的图标按控件档取；标题栏上的按钮另由家族配方按各自的档下发字形尺 */
     --xh-icon-size: var(--xh-floating-panel-icon-size, var(--xh-glyph-size-md));
 
     /* 面板本身是 fixed 定位，root 只是作者那棵树里的容器，不参与排布 */
@@ -39,7 +40,7 @@
   }
 
   /*
-   * 开合触发器是页面上的独立文字按钮（§9.1）：盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
+   * 开合触发器是页面上的独立文字按钮：盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
    * 由家族配方按连接层投影的 data-xh-action-variant / -size 给出（此前只缩放不换底）。这里只把公开槽桥接到
    * 矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与几何槽映射。
    */
@@ -84,9 +85,8 @@
      面板整棵子树都在 positioner 底下，它一收就不生成盒子，退场动画一帧都播不出来。
      真正的收起由宿主在退场结束后落成内联 display:none。 */
 
-  /* 在场那一档才提前备好合成层：属性随 data-state 一起消失，收起后不长期占着 */
-  [data-scope='floating-panel'][data-part='positioner'][data-state='open'] {
-    will-change: opacity, scale;
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='floating-panel'][data-part='positioner'][data-state='open']:not([data-instant]) {
     animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -97,39 +97,52 @@
   }
 
   [data-scope='floating-panel'][data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-floating-panel-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-floating-panel-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-floating-panel-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-floating-panel-shadow, var(--xh-_material-shadow));
+
     position: relative;
     block-size: 100%;
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    /* 默认态是 M2 磨砂面：背景、边缘、高光、投影与光学采样同出一张配方。
-       作者既有的面板槽仍排在外层；没有覆写时才落进这套磨砂令牌。 */
-    border: var(--xh-stroke-thin) solid var(--xh-floating-panel-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-floating-panel-radius, var(--xh-shape-overlay));
-    background:
-      linear-gradient(
-        to bottom,
-        var(--xh-material-frosted-highlight) 0 var(--xh-stroke-thin),
-        transparent var(--xh-stroke-thin)
-      ),
-      var(--xh-floating-panel-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-floating-panel-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-floating-panel-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-material-frosted-backdrop);
-    backdrop-filter: var(--xh-material-frosted-backdrop);
-    /* 铺满那一档要把投影整个撤掉，海拔的这一跳跟着过渡走 */
-    transition: box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    /* 铺满那一档要把投影与描边色整个撤掉，海拔的这一跳跟着过渡走 */
+    transition:
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 最大化时几何层把面板写成铺满视口（left/top 归零、宽高 100%），四条边全贴着视口：
      圆角会在四角把底下的页面露出来，描边缩成一圈贴边的多余框线，投影整块落在视口之外。
-     三样一起撤，与抽屉贴住视口的那条边不圆角是同一回事。 */
+     三样一起撤，与抽屉贴住视口的那条边不圆角是同一回事。描边只撤颜色、不撤宽度，
+     进出最大化时盒子不因描边一收一放跳一像素 */
   [data-scope='floating-panel'][data-part='content'][data-window-state='maximized'] {
-    border: 0;
+    border-color: transparent;
     border-radius: 0;
     box-shadow: none;
   }
 
+  /* 进出最大化：位置与尺寸按指示档补过去，圆角同步收放，不再瞬切。只在这一段挂——
+     拖动与改尺寸要跟手，平时的定位层不带过渡；减弱动效下即刻到位 */
+  [data-scope='floating-panel'][data-part='positioner'][data-animating] {
+    transition:
+      left var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      top var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      width var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      height var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  [data-scope='floating-panel'][data-part='positioner'][data-animating] [data-scope='floating-panel'][data-part='content'] {
+    transition:
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-radius var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
   [data-scope='floating-panel'][data-part='content'][hidden] {
     display: none;
   }
@@ -159,7 +172,7 @@
     display: none;
   }
 
-  /* 浮层内标题（§6.4）：14 / 600 */
+  /* 浮层内标题：14 / 600 */
   [data-scope='floating-panel'][data-part='title'] {
     margin: 0;
     flex: 1 1 auto;
@@ -276,7 +289,7 @@
 
   /*
    * —— 标题栏上的按钮 ——
-   * 形态钮与关闭钮是标题栏上的单图标钮（§9.1）：正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针
+   * 形态钮与关闭钮是标题栏上的单图标钮：正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针
    * 命中区由家族配方给出——磨砂白面上走画布承载阶梯悬停 --xh-bg-subtle（100）→ 按下 --xh-bg-subtle-hover（200），
    * 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）；
    * 静息前景取磨砂面的 muted 字色，悬停 / 按下回到 fg-default。
@@ -309,7 +322,7 @@
     display: none;
   }
 
-  /* 当前形态的那颗钮是按下的开关（aria-pressed），无滑块开关的 on 态取品牌淡底（§7.3）：
+  /* 当前形态的那颗钮是按下的开关（aria-pressed），无滑块开关的 on 态取品牌淡底：
      rest 12% → hover 20% → pressed 28%，前景一律 --xh-fg-on-brand-subtle（对比度由该令牌承担）；
      淡底不是实心面，焦点吃库环 */
   [data-scope='floating-panel'][data-part='window-state-trigger'][data-state='on'] {
@@ -330,7 +343,7 @@
     }
   }
 
-  /* 正文是浮在页面之上的 Overlay 滚动面（§6.6）：原生细条由 reset 层统一给，滚到头不把页面一起带走；
+  /* 正文是浮在页面之上的 Overlay 滚动面：原生细条由 reset 层统一给，滚到头不把页面一起带走；
      内容高度不动态变化，不写 scrollbar-gutter */
   [data-scope='floating-panel'][data-part='body'] {
     flex: 1 1 auto;
@@ -394,4 +407,23 @@
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='floating-panel']:is([data-part='close-trigger'], [data-part='window-state-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='floating-panel']:is([data-part='close-trigger'], [data-part='window-state-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='floating-panel']:is([data-part='close-trigger'], [data-part='window-state-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/form.css

@@ -5,8 +5,11 @@
 
 /* 定义 form 样式。 */
 
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
 /* Form 独立皮肤同时传递引入提交 / 重置钮的动作控件配方；full bundle 递归去重。 */
 @import '../family/action-control.css';
+@import '../family/loading-ring.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -187,7 +190,7 @@
     color: var(--xh-form-summary-fg, var(--xh-fg-danger));
     font-size: var(--xh-form-summary-font-size, var(--xh-text-body-size));
     line-height: var(--xh-leading-normal);
-    /* 静态反馈面：边界由描边承担，不带落影（§8 solid 无影） */
+    /* 静态反馈面：边界由描边承担，不带落影（solid 无影） */
     box-shadow: var(--xh-form-summary-shadow, none);
   }
 
@@ -204,11 +207,16 @@
   /* 从收起翻成显出的那一下给一小段入场：读屏靠 role=alert 播报，
      视觉这边也得有个"它是刚冒出来的"的交代，否则像一直杵在那儿 */
   [data-scope='form'][data-part='error-summary'][data-state='invalid'] {
-    animation: xh-form-summary-enter var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+    animation: xh-drop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
-  /* 摘要里的每一条是一个真链接，指向对应字段容器。铺满一行的集合行（§9.2）：悬停 / 按下只换面不缩放，
-     底面坐在摘要的 surface 白底上，走白底承载阶梯 100 → 200；换面走按压时间线，释放回 release 档 */
+  /* 错误全改完或重置时淡出，播完连接层才写 hidden。收起态常挂 hidden，这条只在退场途中命中 */
+  [data-scope='form'][data-part='error-summary'][data-state='idle'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 摘要里的每一条是一个真链接，指向对应字段容器。铺满一行的集合行：悬停 / 按下只换面不缩放，
+     底面坐在摘要的 surface 白底上，走白底承载阶梯 100 → 200；换面按下走 press，其余走 micro */
   [data-scope='form'][data-part='error-summary-item'] {
     display: block;
     padding-inline: var(--xh-form-summary-item-px, var(--xh-space-1));
@@ -220,7 +228,7 @@
     text-underline-offset: var(--xh-form-summary-item-underline-offset, var(--xh-space-0_5));
     cursor: pointer;
     transition:
-      background-color var(--xh-motion-duration-release) var(--xh-motion-ease-release),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -232,7 +240,7 @@
   /* 摘要显出时条目逐条入场，越靠后起步越晚。
      backwards 让还没轮到的条目停在首帧，不是先显出再重播 */
   [data-scope='form'][data-part='error-summary'][data-state='invalid'] [data-part='error-summary-item'] {
-    animation: xh-form-summary-enter var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
+    animation: xh-drop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
   }
 
   /* 排序按"前面有几条露面的"数，不按 nth-child：作者一次把所有字段的条目都写上，
@@ -303,7 +311,7 @@
 
   /* 两颗按钮是离散动作控件：盒几何、悬停 / 按下与 0.97 按压、焦点环、禁用面全由 Action Control 的 text 档给，
      组件只映射既有使用者槽。提交走 solid 档：表单提交是这一组里的主要动作，与 Button 缺省同为品牌实心；
-     重置走 outline 档：非 Button 的触发器缺省中性描边（§7.2.2）。两颗共用的几何与字号写在一起 */
+     重置走 outline 档：非 Button 的触发器缺省中性描边。两颗共用的几何与字号写在一起 */
   [data-scope='form'][data-part='submit-trigger'],
   [data-scope='form'][data-part='reset-trigger'] {
     --xh-action-visual-size: var(--xh-form-trigger-h, var(--xh-_action-profile-visual-size));
@@ -360,20 +368,18 @@
     --xh-action-shadow-pressed: var(--xh-form-submit-shadow, var(--xh-_highlight-brand));
     --xh-action-ring-color-focus-visible: currentColor;
   }
-}
 
-@layer xihan.motion {
-  /* 关键帧写在自己文件里、名字带组件前缀：motion.css 是公共的，
-     往那儿加一条只服务本组件的动画会让所有组件都得跟着重下载 */
-  @keyframes xh-form-summary-enter {
-    from {
-      opacity: 0;
-      translate: 0 calc(-1 * var(--xh-motion-distance-sm));
-    }
+  /* 提交回调在途：环由加载环配方压在提交钮正中（连接层投影 data-xh-loading-ring="overlay"），直径取钮的图标档，
+     起始边取钮的真实前景、转速认使用者槽。不是禁用，焦点与对比度都保持，在途指针由家族 loading 面给。
+     提交文案随前景淡到透明留位：进入在途等一个 micro 才起淡（快速落定什么都不闪），落定时不等、按 micro 淡回 */
+  [data-scope='form'][data-part='submit-trigger'] {
+    --xh-_loading-ring-fg: var(--xh-form-submit-fg, var(--xh-_action-variant-fg-loading));
+    --xh-_loading-ring-duration: var(--xh-form-loading-duration, var(--xh-motion-loop-spin));
+  }
 
-    to {
-      opacity: 1;
-      translate: 0 0;
-    }
+  [data-scope='form'][data-part='submit-trigger'][data-loading] {
+    --xh-action-fg-loading: transparent;
+
+    transition-delay: var(--xh-motion-duration-micro);
   }
 }

package/css/funnel-chart.css

@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 funnel chart 样式。 */
+
+/* 标题、视口、提示框、空态、焦点环与顺序色阶走 Chart 家族配方。本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/chart.css';
+@import '../family/loading-ring.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='funnel-chart'] {
+    --xh-funnel-chart-skin: 1;
+  }
+
+  /* 几何要用的像素值以这里的私有槽为真源：机器挂载后从计算样式读它们，作者覆盖组件槽即改变几何 */
+  [data-scope='funnel-chart'][data-part='root'] {
+    --xh-_chart-metric-bar-max: var(--xh-chart-bar-max);
+    --xh-_chart-metric-gap: var(--xh-funnel-chart-stage-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-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-funnel-chart-gap, var(--xh-space-3));
+  }
+
+  /* —— 家族配方的组件槽：标题、视口、提示框与空态由 family/chart.css 画，本图表的覆盖槽写在
+     对应部件上接进配方的私有槽，作者在部件或它的祖先上覆盖都生效 —— */
+  [data-scope='funnel-chart'][data-part='viewport'] {
+    --xh-_chart-height: var(--xh-funnel-chart-height, var(--xh-chart-height));
+  }
+
+  [data-scope='funnel-chart'][data-part='tooltip'] {
+    --xh-_chart-tooltip-gap: var(--xh-funnel-chart-tooltip-gap, var(--xh-space-1));
+    --xh-_chart-tooltip-py: var(--xh-funnel-chart-tooltip-py, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-px: var(--xh-funnel-chart-tooltip-px, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-radius: var(--xh-funnel-chart-tooltip-radius, var(--xh-shape-overlay));
+    --xh-_chart-tooltip-shadow: var(--xh-funnel-chart-tooltip-shadow, var(--xh-material-frosted-shadow));
+  }
+
+  [data-scope='funnel-chart'][data-part='tooltip-row'] {
+    --xh-_chart-tooltip-row-gap: var(--xh-funnel-chart-tooltip-row-gap, var(--xh-space-2));
+  }
+
+  [data-scope='funnel-chart'][data-part='tooltip-swatch'] {
+    --xh-_chart-tooltip-swatch-radius: var(--xh-funnel-chart-tooltip-swatch-radius, var(--xh-shape-inset));
+  }
+
+  [data-scope='funnel-chart'][data-part='empty'][data-state='loading'] {
+    --xh-_chart-empty-gap: var(--xh-funnel-chart-empty-gap, var(--xh-space-2));
+  }
+
+  /* —— 阶段：顺序色阶由深入浅，颜色由 Chart 家族配方按段号与段内百分比兑好放在私有槽里；
+     相邻阶段之间的间隙由几何留出，不画描边；指着一个阶段时其余阶段淡出，被指着的不位移 —— */
+  [data-scope='funnel-chart'][data-part='stage'] {
+    fill: var(--xh-_chart-seq-fill);
+    stroke: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='funnel-chart'][data-part='stage'][data-dimmed],
+  [data-scope='funnel-chart'][data-part='stage-label'][data-dimmed],
+  [data-scope='funnel-chart'][data-part='conversion'][data-dimmed] {
+    opacity: var(--xh-chart-dim-alpha);
+  }
+
+  /* 阶段标签与转化率是标注：标注字色，不取色阶色 */
+  [data-scope='funnel-chart'][data-part='stage-label'],
+  [data-scope='funnel-chart'][data-part='conversion'] {
+    fill: var(--xh-chart-label);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* 写在阶段里的标签压在色阶色上：深浅两端都要读得清，描一圈承载面色 */
+  [data-scope='funnel-chart'][data-part='stage-label'][data-placement='inside'] {
+    stroke: var(--xh-chart-surface);
+    stroke-width: var(--xh-stroke-thick);
+    paint-order: stroke;
+    font-weight: var(--xh-font-weight-medium);
+  }
+
+  /* 强制色：阶段改成系统色的面与描边，标注取正文色；焦点环在配方里 */
+  @media (forced-colors: active) {
+    [data-scope='funnel-chart'][data-part='stage'] {
+      fill: Canvas;
+      stroke: CanvasText;
+      stroke-width: var(--xh-stroke-thin);
+    }
+
+    [data-scope='funnel-chart'][data-part='stage-label'],
+    [data-scope='funnel-chart'][data-part='conversion'] {
+      fill: CanvasText;
+    }
+
+    [data-scope='funnel-chart'][data-part='stage-label'][data-placement='inside'] {
+      stroke: Canvas;
+    }
+  }
+}

package/css/graph-chart.css

@@ -0,0 +1,205 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 graph chart 样式。 */
+
+/* 标题、视口、图例、提示框、空态与焦点环走 Chart 家族配方。本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/chart.css';
+@import '../family/loading-ring.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='graph-chart'] {
+    --xh-graph-chart-skin: 1;
+  }
+
+  /* 几何要用的像素值以这里的私有槽为真源：机器挂载后从计算样式读它们，作者覆盖组件槽即改变几何。
+     节点的基准半径借点径那一格传进去 */
+  [data-scope='graph-chart'][data-part='root'] {
+    --xh-_chart-metric-bar-max: var(--xh-chart-bar-max);
+    --xh-_chart-metric-gap: var(--xh-chart-gap);
+    --xh-_chart-metric-line-width: var(--xh-chart-line-width);
+    --xh-_chart-metric-point-size: var(--xh-graph-chart-node-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-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-graph-chart-gap, var(--xh-space-3));
+  }
+
+  /* —— 家族配方的组件槽：标题、视口、图例、提示框与空态由 family/chart.css 画，本图表的覆盖槽写在
+     对应部件上接进配方的私有槽，作者在部件或它的祖先上覆盖都生效 —— */
+  [data-scope='graph-chart'][data-part='viewport'] {
+    --xh-_chart-height: var(--xh-graph-chart-height, var(--xh-chart-height));
+  }
+
+  [data-scope='graph-chart'][data-part='legend'] {
+    --xh-_chart-legend-gap: var(--xh-graph-chart-legend-gap, var(--xh-space-1));
+  }
+
+  [data-scope='graph-chart'][data-part='legend-swatch'] {
+    --xh-_chart-legend-swatch-radius: var(--xh-graph-chart-legend-swatch-radius, var(--xh-shape-inset));
+  }
+
+  [data-scope='graph-chart'][data-part='tooltip'] {
+    --xh-_chart-tooltip-gap: var(--xh-graph-chart-tooltip-gap, var(--xh-space-1));
+    --xh-_chart-tooltip-py: var(--xh-graph-chart-tooltip-py, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-px: var(--xh-graph-chart-tooltip-px, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-radius: var(--xh-graph-chart-tooltip-radius, var(--xh-shape-overlay));
+    --xh-_chart-tooltip-shadow: var(--xh-graph-chart-tooltip-shadow, var(--xh-material-frosted-shadow));
+  }
+
+  [data-scope='graph-chart'][data-part='tooltip-row'] {
+    --xh-_chart-tooltip-row-gap: var(--xh-graph-chart-tooltip-row-gap, var(--xh-space-2));
+  }
+
+  [data-scope='graph-chart'][data-part='empty'][data-state='loading'] {
+    --xh-_chart-empty-gap: var(--xh-graph-chart-empty-gap, var(--xh-space-2));
+  }
+
+  /* —— 色槽：分组由色槽承担，作者可以在节点上覆盖 --xh-graph-chart-series-color ——
+     节点、被强调的连线、图例项都带着色槽，各自从这里取系列色 */
+  [data-scope='graph-chart'][data-xh-chart-slot='1'] {
+    --xh-_chart-series: var(--xh-graph-chart-series-color, var(--xh-chart-categorical-1));
+  }
+
+  [data-scope='graph-chart'][data-xh-chart-slot='2'] {
+    --xh-_chart-series: var(--xh-graph-chart-series-color, var(--xh-chart-categorical-2));
+  }
+
+  [data-scope='graph-chart'][data-xh-chart-slot='3'] {
+    --xh-_chart-series: var(--xh-graph-chart-series-color, var(--xh-chart-categorical-3));
+  }
+
+  [data-scope='graph-chart'][data-xh-chart-slot='4'] {
+    --xh-_chart-series: var(--xh-graph-chart-series-color, var(--xh-chart-categorical-4));
+  }
+
+  [data-scope='graph-chart'][data-xh-chart-slot='5'] {
+    --xh-_chart-series: var(--xh-graph-chart-series-color, var(--xh-chart-categorical-5));
+  }
+
+  [data-scope='graph-chart'][data-xh-chart-slot='6'] {
+    --xh-_chart-series: var(--xh-graph-chart-series-color, var(--xh-chart-categorical-6));
+  }
+
+  [data-scope='graph-chart'][data-xh-chart-slot='7'] {
+    --xh-_chart-series: var(--xh-graph-chart-series-color, var(--xh-chart-categorical-7));
+  }
+
+  [data-scope='graph-chart'][data-xh-chart-slot='8'] {
+    --xh-_chart-series: var(--xh-graph-chart-series-color, var(--xh-chart-categorical-8));
+  }
+
+  /* —— 连线：次要的中性色细线，有权重时按权重加粗（宽度由连接层写进私有槽）；箭头与线同色。
+     指着一个节点时连着它的线换成它的颜色，其余淡出 —— */
+  [data-scope='graph-chart'][data-part='link'],
+  [data-scope='graph-chart'][data-part='arrow'] {
+    --xh-_graph-link: var(--xh-graph-chart-link-color, var(--xh-fg-subtle));
+
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='graph-chart'][data-part='link'] {
+    fill: none;
+    stroke: var(--xh-_graph-link);
+    stroke-width: var(--xh-_graph-link-width, var(--xh-graph-chart-link-width, var(--xh-stroke-thin)));
+    stroke-linecap: round;
+  }
+
+  [data-scope='graph-chart'][data-part='arrow'] {
+    fill: var(--xh-_graph-link);
+    stroke: none;
+  }
+
+  [data-scope='graph-chart'][data-part='link'][data-highlighted],
+  [data-scope='graph-chart'][data-part='arrow'][data-highlighted] {
+    --xh-_graph-link: var(--xh-_chart-series);
+  }
+
+  /* —— 节点：取分组的系列色，外面描一圈承载面色，节点挨在一起、压在连线上时边界照样分明 —— */
+  [data-scope='graph-chart'][data-part='node'] {
+    fill: var(--xh-_chart-series);
+    stroke: var(--xh-chart-surface);
+    stroke-width: var(--xh-chart-gap);
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='graph-chart'][data-part='link'][data-dimmed],
+  [data-scope='graph-chart'][data-part='arrow'][data-dimmed],
+  [data-scope='graph-chart'][data-part='node'][data-dimmed],
+  [data-scope='graph-chart'][data-part='node-label'][data-dimmed],
+  [data-scope='graph-chart'][data-part='link-label'][data-dimmed] {
+    opacity: var(--xh-chart-dim-alpha);
+  }
+
+  /* 节点名可能压在连线上：正文色，描一圈承载面色，交叠处也读得清。名字不接指针，命中归节点 */
+  [data-scope='graph-chart'][data-part='node-label'] {
+    fill: var(--xh-fg-default);
+    stroke: var(--xh-chart-surface);
+    stroke-width: var(--xh-stroke-thick);
+    stroke-linejoin: round;
+    paint-order: stroke;
+    pointer-events: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 连线上的字就压在线上：次级文字色与节点名分出主次，同样描一圈承载面色把线从字底下断开 */
+  [data-scope='graph-chart'][data-part='link-label'] {
+    fill: var(--xh-fg-muted);
+    stroke: var(--xh-chart-surface);
+    stroke-width: var(--xh-stroke-thick);
+    stroke-linejoin: round;
+    paint-order: stroke;
+    pointer-events: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* —— 直接操纵：能拖的节点给抓手，拖着时整张图是抓紧的手；放大后空白处也能拖着平移。
+     触屏在节点上的拖动归图，其余地方照常滚动页面 —— */
+  [data-scope='graph-chart'][data-part='plot'][data-draggable] [data-part='node'] {
+    cursor: grab;
+    touch-action: none;
+  }
+
+  [data-scope='graph-chart'][data-part='plot'][data-zoomed] {
+    cursor: grab;
+    touch-action: none;
+  }
+
+  [data-scope='graph-chart'][data-part='plot'][data-dragging],
+  [data-scope='graph-chart'][data-part='plot'][data-dragging] [data-part='node'] {
+    cursor: grabbing;
+  }
+
+  /* 强制色：节点改成系统色的面与描边，连线取次级系统色、被强调的取高亮色，名字取正文色；
+     焦点环、图例与色标在配方里 */
+  @media (forced-colors: active) {
+    [data-scope='graph-chart'][data-part='node'] {
+      fill: Canvas;
+      stroke: CanvasText;
+      stroke-width: var(--xh-stroke-thin);
+    }
+
+    [data-scope='graph-chart'][data-part='link'],
+    [data-scope='graph-chart'][data-part='arrow'] {
+      --xh-_graph-link: GrayText;
+    }
+
+    [data-scope='graph-chart'][data-part='link'][data-highlighted],
+    [data-scope='graph-chart'][data-part='arrow'][data-highlighted] {
+      --xh-_graph-link: Highlight;
+    }
+
+    [data-scope='graph-chart'][data-part='node-label'],
+    [data-scope='graph-chart'][data-part='link-label'] {
+      fill: CanvasText;
+      stroke: Canvas;
+    }
+  }
+}