@xihan-ui/styles 2.0.0 → 3.0.0

package/css/question-flow.css

@@ -9,6 +9,7 @@
    独立皮肤同时传递引入选项行与四颗钮的动作控件配方，full bundle 递归去重。 */
 @import '../family/motion.css';
 @import '../family/action-control.css';
+@import '../family/check-mark.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -16,10 +17,10 @@
     --xh-question-flow-skin: 1;
   }
 
-  /* 一张静态内容面：--xh-border-default 描边 + surface 底 + 无影（§5.3 边界只由描边承担）。
+  /* 一张静态内容面：--xh-border-default 描边 + surface 底 + 无影（边界只由描边承担）。
      三个视觉轴都落在 root 上：形态管底与描边怎么画，语气管用哪族颜色，尺寸管内衬、按钮高度与字号 */
   [data-scope='question-flow'][data-part='root'] {
-    /* 作者塞进翻页钮的图标按档取尺（§6.5），与皮肤画的兜底字形同一把尺 */
+    /* 作者塞进翻页钮的图标按档取尺，与皮肤画的兜底字形同一把尺 */
     --xh-icon-size: var(--xh-question-flow-icon-size, var(--xh-glyph-size-md));
     /* 尺寸缺省档：不写 data-size 时按中档走 */
     --xh-_question-flow-p: var(--xh-space-4);
@@ -37,7 +38,11 @@
     border-radius: var(--xh-question-flow-radius, var(--xh-shape-surface));
     background: var(--xh-question-flow-bg, var(--xh-bg-surface));
     box-shadow: var(--xh-question-flow-shadow, none);
-    animation: xh-question-flow-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 卡片出现时滑入；落在首帧就在的列表条目里（历史消息）时直接呈现，不跟着整屏一起入场 */
+  [data-scope='question-flow'][data-part='root']:not([data-scope][data-part='item'][data-instant] *) {
+    animation: xh-item-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
   /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
@@ -49,7 +54,7 @@
   /* 描边式是缺省档，写在上面那条基础规则里 */
   /* 填充式：底色顶替描边表达边界。描边只退成透明而不去掉，
      1px 的位置留着，与 outline 档并排时基线对得上；
-     淡底承载面向选项行与几颗中性钮下发 hover 200 → pressed 300（§7.2） */
+     淡底承载面向选项行与几颗中性钮下发 hover 200 → pressed 300 */
   [data-scope='question-flow'][data-part='root'][data-variant='subtle'] {
     --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
     --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
@@ -104,7 +109,7 @@
     display: block;
     overflow: hidden;
     block-size: var(--xh-question-flow-viewport-h, var(--xh-_question-flow-viewport-h));
-    transition: block-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
+    transition: block-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
   [data-scope='question-flow'][data-part='viewport'][hidden] {
@@ -119,7 +124,7 @@
     flex-direction: column;
     gap: var(--xh-question-flow-track-gap, var(--xh-_question-flow-gap));
     translate: 0 var(--xh-question-flow-track-y, var(--xh-_question-flow-track-y));
-    transition: translate var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
   [data-scope='question-flow'][data-part='track'][hidden] {
@@ -145,7 +150,7 @@
     pointer-events: auto;
   }
 
-  /* 题干就是这一题的标题，也是选项组的可访问名：走 Surface 标题档 14/600（§6.4） */
+  /* 题干就是这一题的标题，也是选项组的可访问名：走 Surface 标题档 14/600 */
   [data-scope='question-flow'][data-part='prompt'] {
     display: block;
     margin: 0;
@@ -170,9 +175,9 @@
   }
 
   /* 一个选项：整行可点、可聚焦，记号在左。盒型、悬停 / 按下 / 禁用面由 Action Control 的 row 档给
-     （ghost 形态：白底承载 hover 100 → pressed 200，按下只换面不缩放，§9.2；禁用守卫认 data-disabled），
+     （ghost 形态：白底承载 hover 100 → pressed 200，按下只换面不缩放；禁用守卫认 data-disabled），
      这里只把使用者槽映射到桥接槽，内衬与间距沿用本组件的档位；字色三态同一支，选中档在下面换一档。
-     行高不吃家族的单行档：row 档允许换行、高度随内容，一条会折行的选项文案走正文行高（§6.4） */
+     行高不吃家族的单行档：row 档允许换行、高度随内容，一条会折行的选项文案走正文行高 */
   [data-scope='question-flow'][data-part='item'] {
     --xh-action-gap: var(--xh-question-flow-item-gap, var(--xh-space-1_5));
     --xh-action-padding-inline: var(--xh-question-flow-item-px, var(--xh-space-2));
@@ -192,30 +197,31 @@
     display: none;
   }
 
-  /* 当前题的选项按位次错开开幕，换题时随 data-current 重跑。
+  /* 当前题的选项按位次错开开幕，换题时随 data-current 重跑：一道题的选项总是同一批一起露面，
+     位次就是到达顺序。落在首帧就在的列表条目里（历史消息）时直接呈现。
      backwards 不能省：等待期间起帧不生效的话，后面几条会先露一下再跳回去。
      第 6 条起并到同一拍上 */
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item'] {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:not([data-scope][data-part='item'][data-instant] *) {
     animation: xh-rise-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
   }
 
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(2) {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(2):not([data-scope][data-part='item'][data-instant] *) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 1);
   }
 
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(3) {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(3):not([data-scope][data-part='item'][data-instant] *) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 2);
   }
 
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(4) {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(4):not([data-scope][data-part='item'][data-instant] *) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 3);
   }
 
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(5) {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(5):not([data-scope][data-part='item'][data-instant] *) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 4);
   }
 
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(n + 6) {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(n + 6):not([data-scope][data-part='item'][data-instant] *) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 5);
   }
 
@@ -244,7 +250,7 @@
     inline-size: var(--xh-question-flow-indicator-size, var(--xh-_question-flow-indicator));
     block-size: var(--xh-question-flow-indicator-size, var(--xh-_question-flow-indicator));
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
@@ -253,31 +259,34 @@
     display: none;
   }
 
-  /* 单选那一档把方格收成圆：正方盒取 circle（§6.3） */
+  /* 单选那一档把方格收成圆：正方盒取 circle */
   [data-scope='question-flow'][data-part='item-indicator'][data-select-mode='single'] {
     border-radius: var(--xh-question-flow-indicator-radius-single, var(--xh-shape-circle));
   }
 
-  /* 没写内容就由皮肤画勾；作者往部件里塞了自己的图形，这条规则即不命中 */
-  [data-scope='question-flow'][data-part='item-indicator']:empty::before {
+  /* 多选的记号是勾选格：没写内容时勾由勾选标记配方画在 ::before 上，常驻、按状态淡变并轻缩放；
+     作者往部件里塞了自己的图形，配方与下面的圆点都不画。
+     单选那一档画实心点，由伪元素自己的底色画；直径按记号盒的一半量，与其余单选控件的圆点同源——
+     盒换档时点跟着换。圆点与 RadioGroup 同一套动效：没选中时缩放为 0（盒留在原位，翻面时整行不跳），
+     选中时落位略涨过 1 再收回、收起走强减速不过冲，换色走 micro */
+  [data-scope='question-flow'][data-part='item-indicator'][data-select-mode='single']:empty::before {
     content: '';
     display: inline-block;
-    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
-    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
-    vertical-align: var(--xh-glyph-baseline-shift);
-    background-color: currentColor;
-    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
-  }
-
-  /* 单选那一档把勾换成实心点：mask 撤掉，圆点由伪元素自己的底色画。
-     直径按记号盒的一半量，与其余单选控件的圆点同源——盒换档时点跟着换 */
-  [data-scope='question-flow'][data-part='item-indicator'][data-select-mode='single']:empty::before {
     inline-size: var(--xh-question-flow-dot-size, calc(var(--xh-question-flow-indicator-size, var(--xh-_question-flow-indicator)) / 2));
     block-size: var(--xh-question-flow-dot-size, calc(var(--xh-question-flow-indicator-size, var(--xh-_question-flow-indicator)) / 2));
     border-radius: var(--xh-question-flow-dot-radius, var(--xh-shape-circle));
-    -webkit-mask: none;
-    mask: none;
+    background-color: currentColor;
+    scale: 0;
+    transition:
+      scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='question-flow'][data-part='item-indicator'][data-select-mode='single'][data-state='checked']:empty::before {
+    scale: 1;
+    transition:
+      scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-settle),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='question-flow'][data-part='item-indicator'][data-state='checked'] {
@@ -285,11 +294,6 @@
     background: var(--xh-question-flow-indicator-bg-checked, var(--xh-_tone, var(--xh-bg-brand)));
   }
 
-  /* 没选中时把记号隐去而不是撤掉：盒留在原位，翻面时整行不跳 */
-  [data-scope='question-flow'][data-part='item-indicator'][data-state='unchecked'] {
-    color: transparent;
-  }
-
   [data-scope='question-flow'][data-part='item-text'] {
     display: block;
     flex: 1 1 auto;
@@ -299,6 +303,38 @@
     display: none;
   }
 
+  /* 选项带一行说明：说明另起一行、与文字左缘对齐，两行之间不留行距；字色取次级、字号小一档 */
+  [data-scope='question-flow'][data-part='item']:has(> [data-part='item-description']) {
+    flex-wrap: wrap;
+    row-gap: 0;
+  }
+
+  [data-scope='question-flow'][data-part='item-description'] {
+    display: block;
+    flex: 1 0 100%;
+    padding-inline-start: calc(var(--xh-question-flow-indicator-size, var(--xh-_question-flow-indicator)) + var(--xh-question-flow-item-gap, var(--xh-space-1_5)));
+    color: var(--xh-question-flow-item-description-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-question-flow-item-description-font-size, var(--xh-text-caption-size));
+    text-align: start;
+  }
+
+  [data-scope='question-flow'][data-part='item-description'][hidden] {
+    display: none;
+  }
+
+  /* 题目说明（含多选的数量要求）：题干下一行的次级文字 */
+  [data-scope='question-flow'][data-part='description'] {
+    display: block;
+    margin: 0;
+    color: var(--xh-question-flow-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-question-flow-description-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-leading-normal);
+  }
+
+  [data-scope='question-flow'][data-part='description'][hidden] {
+    display: none;
+  }
+
   /* 自由文本：与选项同等算数的一条答案，占满整行 */
   [data-scope='question-flow'][data-part='note'] {
     display: block;
@@ -455,15 +491,21 @@
     display: inline-flex;
     align-self: flex-start;
     align-items: center;
-    gap: var(--xh-question-flow-result-gap, var(--xh-space-1_5));
-    padding-inline: var(--xh-question-flow-result-px, var(--xh-space-2));
-    padding-block: var(--xh-question-flow-result-py, var(--xh-space-1));
+    gap: var(--xh-question-flow-result-gap, var(--xh-space-1));
+    padding-inline: var(--xh-question-flow-result-px, var(--xh-space-1_5));
+    padding-block: var(--xh-question-flow-result-py, var(--xh-space-0_5));
+    border: var(--xh-stroke-thin) solid transparent;
     border-radius: var(--xh-question-flow-result-radius, var(--xh-shape-pill));
-    background: var(--xh-question-flow-result-bg, var(--xh-bg-subtle));
-    color: var(--xh-question-flow-result-fg, var(--xh-fg-success));
+    background: var(--xh-question-flow-result-bg, var(--xh-_tone-subtle));
+    color: var(--xh-question-flow-result-fg, var(--xh-_tone-fg));
     font-size: var(--xh-question-flow-result-font-size, var(--xh-text-caption-size));
-    font-weight: var(--xh-question-flow-result-font-weight, var(--xh-text-label-weight));
-    animation: xh-question-flow-result-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+    font-weight: var(--xh-question-flow-result-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-control-indicator-md);
+  }
+
+  /* 落定结果弹出；落在首帧就在的列表条目里（历史消息）时直接呈现，不跟着整屏一起入场 */
+  [data-scope='question-flow'][data-part='result']:not([data-scope][data-part='item'][data-instant] *) {
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
   [data-scope='question-flow'][data-part='result'][hidden] {
@@ -482,32 +524,30 @@
     clip-path: inset(50%);
     white-space: nowrap;
   }
-}
 
-@layer xihan.motion {
-  /* 组件专属关键帧写在自己身上；共享的 xh-rise-in 由 family/motion.css 提供。 */
-  /* 幅度走令牌，减弱动效时由令牌层归零；位移用独立属性而非 transform 简写 */
-  @keyframes xh-question-flow-in {
-    from {
-      opacity: 0;
-      translate: 0 var(--xh-motion-distance-md);
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       落在勾选盒自己的实心面上（这一档里是 Canvas），整行悬停不换面，取 CanvasText；
+       禁用取 GrayText */
+    [data-scope='question-flow'][data-part='item-indicator'][data-select-mode='single']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
     }
 
-    to {
-      opacity: 1;
-      translate: 0 0;
+    [data-scope='question-flow']:is([data-part='prev-trigger'], [data-part='next-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
     }
-  }
 
-  @keyframes xh-question-flow-result-in {
-    from {
-      opacity: 0;
-      scale: var(--xh-motion-scale-enter);
+    [data-scope='question-flow']:is([data-part='prev-trigger'], [data-part='next-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
     }
 
-    to {
-      opacity: 1;
-      scale: 1;
+    [data-scope='question-flow'][data-part='item'][data-disabled] [data-scope='question-flow'][data-part='item-indicator'][data-select-mode='single']:empty::before,
+    [data-scope='question-flow']:is([data-part='prev-trigger'], [data-part='next-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
     }
   }
 }

package/css/radar-chart.css

@@ -0,0 +1,233 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 radar chart 样式。 */
+
+/* 标题、视口、图例、提示框、空态与焦点环走 Chart 家族配方。本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/chart.css';
+@import '../family/loading-ring.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='radar-chart'] {
+    --xh-radar-chart-skin: 1;
+  }
+
+  /* 几何要用的像素值以这里的私有槽为真源：机器挂载后从计算样式读它们，作者覆盖组件槽即改变几何 */
+  [data-scope='radar-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-radar-chart-line-width, var(--xh-chart-line-width));
+    --xh-_chart-metric-point-size: var(--xh-radar-chart-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-radar-chart-gap, var(--xh-space-3));
+  }
+
+  /* —— 家族配方的组件槽：标题、视口、图例、提示框与空态由 family/chart.css 画，本图表的覆盖槽写在
+     对应部件上接进配方的私有槽，作者在部件或它的祖先上覆盖都生效 —— */
+  [data-scope='radar-chart'][data-part='viewport'] {
+    --xh-_chart-height: var(--xh-radar-chart-height, var(--xh-chart-height));
+  }
+
+  [data-scope='radar-chart'][data-part='legend'] {
+    --xh-_chart-legend-gap: var(--xh-radar-chart-legend-gap, var(--xh-space-1));
+  }
+
+  [data-scope='radar-chart'][data-part='legend-swatch'] {
+    --xh-_chart-legend-swatch-radius: var(--xh-radar-chart-legend-swatch-radius, var(--xh-shape-inset));
+  }
+
+  [data-scope='radar-chart'][data-part='tooltip'] {
+    --xh-_chart-tooltip-gap: var(--xh-radar-chart-tooltip-gap, var(--xh-space-1));
+    --xh-_chart-tooltip-py: var(--xh-radar-chart-tooltip-py, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-px: var(--xh-radar-chart-tooltip-px, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-radius: var(--xh-radar-chart-tooltip-radius, var(--xh-shape-overlay));
+    --xh-_chart-tooltip-shadow: var(--xh-radar-chart-tooltip-shadow, var(--xh-material-frosted-shadow));
+  }
+
+  [data-scope='radar-chart'][data-part='tooltip-row'] {
+    --xh-_chart-tooltip-row-gap: var(--xh-radar-chart-tooltip-row-gap, var(--xh-space-2));
+  }
+
+  /* 提示框里被指着的那个实体：数值加粗，其余行照常 */
+  [data-scope='radar-chart'][data-part='tooltip-row'][data-current] {
+    font-weight: var(--xh-font-weight-semibold);
+  }
+
+  [data-scope='radar-chart'][data-part='tooltip-swatch'] {
+    --xh-_chart-tooltip-swatch-radius: var(--xh-radar-chart-tooltip-swatch-radius, var(--xh-shape-inset));
+  }
+
+  [data-scope='radar-chart'][data-part='empty'][data-state='loading'] {
+    --xh-_chart-empty-gap: var(--xh-radar-chart-empty-gap, var(--xh-space-2));
+  }
+
+  /* —— 色槽：身份由色槽承担，作者可以在系列上覆盖 --xh-radar-chart-series-color ——
+     系列分组、图例项与提示框的行都带着色槽，各自从这里取系列色 */
+  [data-scope='radar-chart'][data-xh-chart-slot='1'] {
+    --xh-_chart-series: var(--xh-radar-chart-series-color, var(--xh-chart-categorical-1));
+  }
+
+  [data-scope='radar-chart'][data-xh-chart-slot='2'] {
+    --xh-_chart-series: var(--xh-radar-chart-series-color, var(--xh-chart-categorical-2));
+  }
+
+  [data-scope='radar-chart'][data-xh-chart-slot='3'] {
+    --xh-_chart-series: var(--xh-radar-chart-series-color, var(--xh-chart-categorical-3));
+  }
+
+  [data-scope='radar-chart'][data-xh-chart-slot='4'] {
+    --xh-_chart-series: var(--xh-radar-chart-series-color, var(--xh-chart-categorical-4));
+  }
+
+  [data-scope='radar-chart'][data-xh-chart-slot='5'] {
+    --xh-_chart-series: var(--xh-radar-chart-series-color, var(--xh-chart-categorical-5));
+  }
+
+  [data-scope='radar-chart'][data-xh-chart-slot='6'] {
+    --xh-_chart-series: var(--xh-radar-chart-series-color, var(--xh-chart-categorical-6));
+  }
+
+  [data-scope='radar-chart'][data-xh-chart-slot='7'] {
+    --xh-_chart-series: var(--xh-radar-chart-series-color, var(--xh-chart-categorical-7));
+  }
+
+  [data-scope='radar-chart'][data-xh-chart-slot='8'] {
+    --xh-_chart-series: var(--xh-radar-chart-series-color, var(--xh-chart-categorical-8));
+  }
+
+  /* —— 图表家具：网格圈与指标轴是不承载数据的结构线，指标名是次级标注 —— */
+  [data-scope='radar-chart'][data-part='grid-ring'] {
+    fill: none;
+    stroke: var(--xh-chart-grid);
+    stroke-width: var(--xh-stroke-thin);
+  }
+
+  [data-scope='radar-chart'][data-part='spoke'] {
+    fill: none;
+    stroke: var(--xh-chart-axis);
+    stroke-width: var(--xh-stroke-thin);
+  }
+
+  [data-scope='radar-chart'][data-part='indicator-label'] {
+    fill: var(--xh-chart-label);
+  }
+
+  /* 各圈的数值：比指标名再退一层，只作量程的参照 */
+  [data-scope='radar-chart'][data-part='ring-label'] {
+    fill: var(--xh-radar-chart-ring-label-fg, var(--xh-chart-label));
+    opacity: var(--xh-radar-chart-ring-label-opacity, 0.8);
+  }
+
+  /* 激活的指标那根轴：准线色，压在网格之上、数据之下 */
+  [data-scope='radar-chart'][data-part='crosshair'] {
+    fill: none;
+    stroke: var(--xh-chart-crosshair);
+    stroke-width: var(--xh-stroke-thick);
+  }
+
+  /* —— 数据标记：一个实体一个分组，悬停图例或指着一个顶点时其余实体淡出 —— */
+  [data-scope='radar-chart'][data-part='series'] {
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='radar-chart'][data-part='series'][data-dimmed] {
+    opacity: var(--xh-chart-dim-alpha);
+  }
+
+  /* 面积：系列色淡洗，边上是同一条实色轮廓 */
+  [data-scope='radar-chart'][data-part='area-fill'] {
+    fill: var(--xh-_chart-series);
+    fill-opacity: var(--xh-chart-area-alpha);
+    stroke: none;
+  }
+
+  [data-scope='radar-chart'][data-part='line'] {
+    fill: none;
+    stroke: var(--xh-_chart-series);
+    stroke-width: var(--xh-_chart-metric-line-width);
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  /* 顶点带一圈承载面色的描边环，压在别的实体的轮廓上也分得开 */
+  [data-scope='radar-chart'][data-part='point'] {
+    fill: var(--xh-_chart-series);
+    stroke: var(--xh-chart-surface);
+    stroke-width: var(--xh-chart-gap);
+  }
+
+  /* —— 纹理：颜色不可用或不可靠时（强制色、打印、祖先写了 data-xh-chart-patterns），面积改用本系列在 defs 里的
+     纹理填充、描出轮廓，轮廓换线型。色标的纹理在配方里 —— */
+  :where([data-xh-chart-patterns]) [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='area-fill'] {
+    fill: var(--xh-_chart-pattern);
+    fill-opacity: 1;
+  }
+
+  :where([data-xh-chart-patterns]) [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='line'] {
+    stroke-dasharray: var(--xh-_chart-dash);
+  }
+
+  /* 强制色：数据标记改成系统色，网格取灰字色；纹理总是开启；焦点环与色标在配方里 */
+  @media (forced-colors: active) {
+    [data-scope='radar-chart'][data-part='grid-ring'] {
+      stroke: GrayText;
+    }
+
+    [data-scope='radar-chart'][data-part='spoke'] {
+      stroke: CanvasText;
+    }
+
+    [data-scope='radar-chart'][data-part='indicator-label'],
+    [data-scope='radar-chart'][data-part='ring-label'] {
+      fill: CanvasText;
+    }
+
+    [data-scope='radar-chart'][data-part='crosshair'] {
+      stroke: Highlight;
+    }
+
+    [data-scope='radar-chart'][data-part='line'] {
+      stroke: CanvasText;
+    }
+
+    [data-scope='radar-chart'][data-part='point'] {
+      fill: CanvasText;
+      stroke: Canvas;
+    }
+
+    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='area-fill'] {
+      forced-color-adjust: none;
+      fill: var(--xh-_chart-pattern);
+      fill-opacity: 1;
+    }
+
+    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='line'] {
+      stroke-dasharray: var(--xh-_chart-dash);
+    }
+  }
+
+  /* 打印：纸上没有指针，准线不印；纹理开启；提示框与焦点环在配方里 */
+  @media print {
+    [data-scope='radar-chart'][data-part='crosshair'] {
+      display: none;
+    }
+
+    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='area-fill'] {
+      fill: var(--xh-_chart-pattern);
+      fill-opacity: 1;
+    }
+
+    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='line'] {
+      stroke-dasharray: var(--xh-_chart-dash);
+    }
+  }
+}