@xihan-ui/styles 2.1.0 → 3.1.0

package/family/chart.css

@@ -0,0 +1,480 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* AUTO-GENERATED by build/chart-recipe.mjs — do not edit. */
+
+/* 转圈与淡入关键帧由 motion.css 提供：引入本配方的图表皮肤同时 @import 它；家族文件之间不互相引入，
+   全量入口里每份家族只内联一次。 */
+@layer xihan.components {
+  /* 根不画外边、不填底，透出宿主面；需要框时由作者放进 Card。提示框按根的内边距盒绝对定位，参照系就是它；
+     它抬的那一层只在根里排序。图随容器铺满：在 flex / grid 里也不按内容收缩成默认的 300px */
+  [data-xh-chart-part='root'] {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-_chart-gap);
+    inline-size: 100%;
+    margin: 0;
+    min-inline-size: 0;
+    color: var(--xh-fg-default);
+    font-size: var(--xh-text-body-size);
+    --xh-_chart-seq-start: var(--xh-chart-sequential-start);
+    --xh-_chart-seq-mid: var(--xh-chart-sequential-mid);
+    --xh-_chart-seq-end: var(--xh-chart-sequential-end);
+  }
+
+  /* 顺序色阶的色板：换到基础色板里同名的色相上。起点按承载面、终点按正文色兑出，亮暗主题下都是由浅入深地
+     远离承载面；按值着色的标记与色阶图例都从这三个锚点取色 */
+  [data-xh-chart-part='root'][data-palette] {
+    --xh-_chart-seq-start: color-mix(in oklab, var(--xh-_chart-palette) 16%, var(--xh-chart-surface));
+    --xh-_chart-seq-mid: var(--xh-_chart-palette);
+    --xh-_chart-seq-end: color-mix(in oklab, var(--xh-_chart-palette) 55%, var(--xh-fg-default));
+  }
+
+  [data-xh-chart-part='root'][data-palette='red'] {
+    --xh-_chart-palette: var(--xh-color-red-500);
+  }
+
+  [data-xh-chart-part='root'][data-palette='orange'] {
+    --xh-_chart-palette: var(--xh-color-orange-500);
+  }
+
+  [data-xh-chart-part='root'][data-palette='amber'] {
+    --xh-_chart-palette: var(--xh-color-amber-500);
+  }
+
+  [data-xh-chart-part='root'][data-palette='yellow'] {
+    --xh-_chart-palette: var(--xh-color-yellow-500);
+  }
+
+  [data-xh-chart-part='root'][data-palette='lime'] {
+    --xh-_chart-palette: var(--xh-color-lime-500);
+  }
+
+  [data-xh-chart-part='root'][data-palette='green'] {
+    --xh-_chart-palette: var(--xh-color-green-500);
+  }
+
+  [data-xh-chart-part='root'][data-palette='teal'] {
+    --xh-_chart-palette: var(--xh-color-teal-500);
+  }
+
+  [data-xh-chart-part='root'][data-palette='cyan'] {
+    --xh-_chart-palette: var(--xh-color-cyan-500);
+  }
+
+  [data-xh-chart-part='root'][data-palette='blue'] {
+    --xh-_chart-palette: var(--xh-color-blue-500);
+  }
+
+  [data-xh-chart-part='root'][data-palette='indigo'] {
+    --xh-_chart-palette: var(--xh-color-indigo-500);
+  }
+
+  [data-xh-chart-part='root'][data-palette='purple'] {
+    --xh-_chart-palette: var(--xh-color-purple-500);
+  }
+
+  [data-xh-chart-part='root'][data-palette='pink'] {
+    --xh-_chart-palette: var(--xh-color-pink-500);
+  }
+
+  [data-xh-chart-part='root'][data-palette='gray'] {
+    --xh-_chart-palette: var(--xh-color-neutral-500);
+  }
+
+  [data-xh-chart-part='caption'] {
+    font-size: var(--xh-text-label-size);
+    font-weight: var(--xh-text-label-weight);
+    color: var(--xh-fg-default);
+  }
+
+  /* 视口的块尺寸含坐标轴与标签带，宽度铺满；卡片里不出现嵌套的纵向滚动。它是尺寸观测的宿主 */
+  [data-xh-chart-part='viewport'] {
+    position: relative;
+    inline-size: 100%;
+    block-size: var(--xh-_chart-height);
+    min-inline-size: 0;
+  }
+
+  /* 重取数据：保留上一帧，整体淡下去，不闪骨架、不跳布局 */
+  [data-xh-chart-part='root'][data-loading] > [data-xh-chart-part='viewport'] {
+    opacity: var(--xh-chart-pending-alpha);
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 绘图区脱离文档流：svg 的 width 属性来自测得的视口宽，留在流里会反过来撑住视口，容器收窄时图不跟着缩。
+     斜排的刻度标签与外侧标签会伸出盒子，不裁；焦点环由 focus-ring 部件画在标记外，不靠 SVG 元素自己的 outline */
+  [data-xh-chart-part='plot'] {
+    position: absolute;
+    inset: 0;
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    font-size: var(--xh-_chart-metric-font-size);
+    font-variant-numeric: tabular-nums;
+    outline: none;
+  }
+
+  [data-xh-chart-part='plot'] [tabindex] {
+    outline: none;
+  }
+
+  [data-xh-chart-part='focus-ring'] {
+    fill: none;
+    stroke: var(--xh-ring-focus);
+    stroke-width: var(--xh-ring-width);
+  }
+
+  /* 引导线是标注：结构线色的细线，不取系列色；所属的系列或扇区淡出时一起淡出 */
+  [data-xh-chart-part='leader-line'] {
+    fill: none;
+    stroke: var(--xh-chart-axis);
+    stroke-width: var(--xh-stroke-thin);
+  }
+
+  [data-xh-chart-part='leader-line'][data-dimmed] {
+    opacity: var(--xh-chart-dim-alpha);
+  }
+
+  /* 首次出现：等描线的笔尖或扫开的边缘到了才淡入。连接层写入它占入场时长的比例，乘上入场时长就是延迟，
+     作者改时长、系统开减弱动效时跟着缩放 */
+  [data-xh-chart-part='leader-line'][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));
+  }
+
+  /* 图例：工具条，项是 Action Control 的 text 档 */
+  [data-xh-chart-part='legend'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--xh-_chart-legend-gap);
+  }
+
+  [data-xh-chart-part='legend-item'] {
+    color: var(--xh-fg-default);
+  }
+
+  /* 色标：面（柱、面积、扇区）是 inset 圆角的方块，折线是一段短线；隐藏时只留描边（空心）。
+     方块边长取 12px：inset 圆角是 4px，再小就成了圆点，与散点的符号分不开 */
+  [data-xh-chart-part='legend-swatch'] {
+    flex: none;
+    inline-size: var(--xh-space-3);
+    block-size: var(--xh-space-3);
+    border: var(--xh-stroke-thick) solid var(--xh-_chart-series);
+    border-radius: var(--xh-_chart-legend-swatch-radius);
+    background: var(--xh-_chart-series);
+  }
+
+  [data-xh-chart-part='legend-swatch'][data-mark='line'] {
+    inline-size: var(--xh-space-3);
+    block-size: 0;
+    border-width: var(--xh-stroke-thin);
+    border-radius: var(--xh-_chart-legend-swatch-line-radius);
+  }
+
+  /* 显隐标记：开是常态，不用品牌淡底；隐藏的项空心色标、次级字色、删除线 */
+  [data-xh-chart-part='legend-item'][aria-pressed='false'] {
+    color: var(--xh-fg-subtle);
+    text-decoration: line-through;
+  }
+
+  [data-xh-chart-part='legend-item'][aria-pressed='false'] > [data-xh-chart-part='legend-swatch'] {
+    background: transparent;
+  }
+
+  /* 按值着色的数据：连接层在标记与色标上写段号与段内百分比，这里用一层 color-mix 在相邻两个锚点之间兑出颜色，
+     放进私有槽；各图表的标记从槽里取色，提示框的色标画成数据自己的颜色 */
+  [data-xh-chart-part='root'] [data-seg='low'] {
+    --xh-_chart-seq-fill: color-mix(in oklch, var(--xh-_chart-seq-mid) var(--xh-_chart-p), var(--xh-_chart-seq-start));
+  }
+
+  [data-xh-chart-part='root'] [data-seg='high'] {
+    --xh-_chart-seq-fill: color-mix(in oklch, var(--xh-_chart-seq-end) var(--xh-_chart-p), var(--xh-_chart-seq-mid));
+  }
+
+  [data-xh-chart-part='tooltip-swatch'][data-seg] {
+    background: var(--xh-_chart-seq-fill);
+  }
+
+  /* 提示框：frosted 材质，画在根里；绘图区不随 RTL 镜像，这里的左右也是物理方向。正文排版，与根同一档：
+     不反白、不缩字，色标按承载面校准。提示框不接指针：跟着指针走时压住下面的标记，命中就断了 */
+  [data-xh-chart-part='tooltip'] {
+    position: absolute;
+    inset-block-start: var(--xh-_chart-tip-y, 0);
+    /* stylelint-disable-next-line property-disallowed-list -- 绘图区不随 RTL 镜像，锚点横坐标由连接层按物理左缘写入 */
+    left: var(--xh-_chart-tip-x, 0);
+    z-index: 1;
+    display: grid;
+    gap: var(--xh-_chart-tooltip-gap);
+    min-inline-size: 8rem;
+    padding-block: var(--xh-_chart-tooltip-py);
+    padding-inline: var(--xh-_chart-tooltip-px);
+    border: var(--xh-stroke-thin) solid var(--xh-material-frosted-border);
+    border-radius: var(--xh-_chart-tooltip-radius);
+    background:
+      linear-gradient(
+        to bottom,
+        var(--xh-material-frosted-highlight) 0 var(--xh-stroke-thin),
+        transparent var(--xh-stroke-thin)
+      ),
+      var(--xh-material-frosted-bg);
+    color: var(--xh-material-frosted-fg);
+    box-shadow: var(--xh-_chart-tooltip-shadow);
+    -webkit-backdrop-filter: var(--xh-material-frosted-backdrop);
+    backdrop-filter: var(--xh-material-frosted-backdrop);
+    font-size: var(--xh-text-body-size);
+    white-space: nowrap;
+    pointer-events: none;
+    translate: var(--xh-space-3) calc(-100% - var(--xh-space-2));
+  }
+
+  /* 落点：锚点在右半边时长在左侧，在上半边时向下长 */
+  [data-xh-chart-part='tooltip'][data-placement='top-left'] {
+    translate: calc(-100% - var(--xh-space-3)) calc(-100% - var(--xh-space-2));
+  }
+
+  [data-xh-chart-part='tooltip'][data-placement='bottom-right'] {
+    translate: var(--xh-space-3) var(--xh-space-2);
+  }
+
+  [data-xh-chart-part='tooltip'][data-placement='bottom-left'] {
+    translate: calc(-100% - var(--xh-space-3)) var(--xh-space-2);
+  }
+
+  /* 露不露是从激活的数据算出来的派生显隐：首次出现淡入，跟着指针移动时不做位置过渡 */
+  [data-xh-chart-part='tooltip'][data-state='hidden'] {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  [data-xh-chart-part='tooltip'][data-state='visible'] {
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-xh-chart-part='tooltip-header'] {
+    font-weight: var(--xh-font-weight-medium);
+  }
+
+  /* 一行：色标、数值、说明。数值在前并加重，说明在后是次级文字——读者已知系列，要看的是数 */
+  [data-xh-chart-part='tooltip-row'] {
+    display: flex;
+    align-items: center;
+    gap: var(--xh-_chart-tooltip-row-gap);
+  }
+
+  [data-xh-chart-part='tooltip-swatch'] {
+    flex: none;
+    inline-size: var(--xh-space-3);
+    block-size: var(--xh-space-3);
+    border-radius: var(--xh-_chart-tooltip-swatch-radius);
+    background: var(--xh-_chart-series);
+  }
+
+  [data-xh-chart-part='tooltip-swatch'][data-mark='line'] {
+    inline-size: var(--xh-space-3);
+    block-size: var(--xh-stroke-thick);
+    border-radius: var(--xh-_chart-tooltip-swatch-line-radius);
+  }
+
+  [data-xh-chart-part='tooltip-value'] {
+    font-weight: var(--xh-font-weight-medium);
+    font-variant-numeric: tabular-nums;
+  }
+
+  [data-xh-chart-part='tooltip-name'] {
+    color: var(--xh-fg-muted);
+  }
+
+  /* 指针或焦点所在的那个系列：说明升为正文色，一眼找到自己指着的那一行 */
+  [data-xh-chart-part='tooltip-row'][data-current] > [data-xh-chart-part='tooltip-name'] {
+    color: var(--xh-fg-default);
+  }
+
+  /* 空态叠在视口上，居中 */
+  [data-xh-chart-part='empty'] {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--xh-fg-muted);
+    font-size: var(--xh-text-secondary-size);
+  }
+
+  /* 取数中、还没有可画的数据：文字前一枚加载环。环由加载环配方画（连接层在空态部件上投影 data-xh-loading-ring 与
+     data-loading），与 Spinner 同一副画法，减弱动效与打印停成点线环；这里只给它占的那一格 */
+  [data-xh-chart-part='empty'][data-state='loading'] {
+    gap: var(--xh-_chart-empty-gap);
+  }
+
+  [data-xh-chart-part='empty'][data-state='loading']::before {
+    content: '';
+    flex: none;
+    inline-size: var(--xh-glyph-size-md);
+    block-size: var(--xh-glyph-size-md);
+  }
+
+  /* 声明了 display 的部件：作者写 hidden 时照样收起 */
+  [data-xh-chart-part='root'][hidden],
+  [data-xh-chart-part='legend'][hidden],
+  [data-xh-chart-part='plot'][hidden],
+  [data-xh-chart-part='tooltip'][hidden],
+  [data-xh-chart-part='tooltip-row'][hidden],
+  [data-xh-chart-part='empty'][hidden] {
+    display: none;
+  }
+
+  /* 纹理的序号：与 defs 里的纹理一一对应。每个序号给出色标上的纹理（线距按数据点直径换算，与纹理的格子同尺）、
+     折线的线型与色标上的线型（线宽的倍数） */
+  [data-xh-chart-pattern='1'] {
+    --xh-_chart-hatch: repeating-linear-gradient(135deg, var(--xh-_chart-series) 0 var(--xh-stroke-thin), transparent 0 var(--xh-_chart-metric-point-size));
+    --xh-_chart-dash: none;
+    --xh-_chart-dash-swatch: var(--xh-_chart-series);
+  }
+
+  [data-xh-chart-pattern='2'] {
+    --xh-_chart-hatch: repeating-linear-gradient(45deg, var(--xh-_chart-series) 0 var(--xh-stroke-thin), transparent 0 var(--xh-_chart-metric-point-size));
+    --xh-_chart-dash: calc(var(--xh-_chart-metric-line-width) * 4) calc(var(--xh-_chart-metric-line-width) * 2);
+    --xh-_chart-dash-swatch: repeating-linear-gradient(90deg, var(--xh-_chart-series) 0 calc(var(--xh-_chart-metric-line-width) * 4), transparent 0 calc(var(--xh-_chart-metric-line-width) * 6));
+  }
+
+  [data-xh-chart-pattern='3'] {
+    --xh-_chart-hatch: repeating-linear-gradient(135deg, var(--xh-_chart-series) 0 var(--xh-stroke-thin), transparent 0 calc(var(--xh-_chart-metric-point-size) * 0.75));
+    --xh-_chart-dash: 0 calc(var(--xh-_chart-metric-line-width) * 2);
+    --xh-_chart-dash-swatch: repeating-linear-gradient(90deg, var(--xh-_chart-series) 0 var(--xh-_chart-metric-line-width), transparent 0 calc(var(--xh-_chart-metric-line-width) * 2));
+  }
+
+  [data-xh-chart-pattern='4'] {
+    --xh-_chart-hatch: repeating-linear-gradient(45deg, var(--xh-_chart-series) 0 var(--xh-stroke-thin), transparent 0 calc(var(--xh-_chart-metric-point-size) * 0.75));
+    --xh-_chart-dash: calc(var(--xh-_chart-metric-line-width) * 4) calc(var(--xh-_chart-metric-line-width) * 2) 0 calc(var(--xh-_chart-metric-line-width) * 2);
+    --xh-_chart-dash-swatch: repeating-linear-gradient(90deg, var(--xh-_chart-series) 0 calc(var(--xh-_chart-metric-line-width) * 4), transparent 0 calc(var(--xh-_chart-metric-line-width) * 6), var(--xh-_chart-series) 0 calc(var(--xh-_chart-metric-line-width) * 7), transparent 0 calc(var(--xh-_chart-metric-line-width) * 8));
+  }
+
+  [data-xh-chart-pattern='5'] {
+    --xh-_chart-hatch: repeating-linear-gradient(135deg, var(--xh-_chart-series) 0 var(--xh-stroke-thin), transparent 0 calc(var(--xh-_chart-metric-point-size) * 0.5));
+    --xh-_chart-dash: calc(var(--xh-_chart-metric-line-width) * 2) calc(var(--xh-_chart-metric-line-width) * 2);
+    --xh-_chart-dash-swatch: repeating-linear-gradient(90deg, var(--xh-_chart-series) 0 calc(var(--xh-_chart-metric-line-width) * 2), transparent 0 calc(var(--xh-_chart-metric-line-width) * 4));
+  }
+
+  [data-xh-chart-pattern='6'] {
+    --xh-_chart-hatch: repeating-linear-gradient(45deg, var(--xh-_chart-series) 0 var(--xh-stroke-thin), transparent 0 calc(var(--xh-_chart-metric-point-size) * 0.5));
+    --xh-_chart-dash: calc(var(--xh-_chart-metric-line-width) * 4) calc(var(--xh-_chart-metric-line-width) * 2) 0 calc(var(--xh-_chart-metric-line-width) * 2) 0 calc(var(--xh-_chart-metric-line-width) * 2);
+    --xh-_chart-dash-swatch: repeating-linear-gradient(90deg, var(--xh-_chart-series) 0 calc(var(--xh-_chart-metric-line-width) * 4), transparent 0 calc(var(--xh-_chart-metric-line-width) * 6), var(--xh-_chart-series) 0 calc(var(--xh-_chart-metric-line-width) * 7), transparent 0 calc(var(--xh-_chart-metric-line-width) * 8), var(--xh-_chart-series) 0 calc(var(--xh-_chart-metric-line-width) * 9), transparent 0 calc(var(--xh-_chart-metric-line-width) * 10));
+  }
+
+  [data-xh-chart-pattern='7'] {
+    --xh-_chart-hatch: repeating-linear-gradient(135deg, var(--xh-_chart-series) 0 var(--xh-stroke-thin), transparent 0 var(--xh-_chart-metric-point-size)), repeating-linear-gradient(45deg, var(--xh-_chart-series) 0 var(--xh-stroke-thin), transparent 0 var(--xh-_chart-metric-point-size));
+    --xh-_chart-dash: calc(var(--xh-_chart-metric-line-width) * 8) calc(var(--xh-_chart-metric-line-width) * 2);
+    --xh-_chart-dash-swatch: repeating-linear-gradient(90deg, var(--xh-_chart-series) 0 calc(var(--xh-_chart-metric-line-width) * 8), transparent 0 calc(var(--xh-_chart-metric-line-width) * 10));
+  }
+
+  [data-xh-chart-pattern='8'] {
+    --xh-_chart-hatch: repeating-linear-gradient(90deg, var(--xh-_chart-series) 0 var(--xh-stroke-thin), transparent 0 var(--xh-_chart-metric-point-size)), repeating-linear-gradient(0deg, var(--xh-_chart-series) 0 var(--xh-stroke-thin), transparent 0 var(--xh-_chart-metric-point-size));
+    --xh-_chart-dash: calc(var(--xh-_chart-metric-line-width) * 2) calc(var(--xh-_chart-metric-line-width) * 2) 0 calc(var(--xh-_chart-metric-line-width) * 2);
+    --xh-_chart-dash-swatch: repeating-linear-gradient(90deg, var(--xh-_chart-series) 0 calc(var(--xh-_chart-metric-line-width) * 2), transparent 0 calc(var(--xh-_chart-metric-line-width) * 4), var(--xh-_chart-series) 0 calc(var(--xh-_chart-metric-line-width) * 5), transparent 0 calc(var(--xh-_chart-metric-line-width) * 6));
+  }
+
+  /* 纹理的线取所属系列色：每个 pattern 带着它的色槽 */
+  [data-xh-chart-part='pattern-line'] {
+    fill: none;
+    stroke: var(--xh-_chart-series);
+    stroke-width: var(--xh-stroke-thin);
+  }
+
+  /* 作者在祖先上写 data-xh-chart-patterns 即开启纹理；强制色与打印下总是开启，规则写在下面两个块里 */
+  :where([data-xh-chart-patterns]) [data-xh-chart-pattern] > [data-xh-chart-part='legend-swatch'],
+  :where([data-xh-chart-patterns]) [data-xh-chart-pattern] > [data-xh-chart-part='tooltip-swatch'] {
+    background: var(--xh-_chart-hatch);
+  }
+
+  :where([data-xh-chart-patterns]) [data-xh-chart-pattern] > [data-xh-chart-part='legend-swatch'][data-mark='line'],
+  :where([data-xh-chart-patterns]) [data-xh-chart-pattern] > [data-xh-chart-part='tooltip-swatch'][data-mark='line'] {
+    inline-size: var(--xh-space-5);
+    block-size: var(--xh-_chart-metric-line-width);
+    border: none;
+    background: var(--xh-_chart-dash-swatch);
+  }
+
+  /* 强制色：焦点环取高亮色，引导线取系统前景色；色标退出强制着色保住形状，填系统前景色；
+     图例隐藏态保留空心与删除线。纹理总是开启，纹理的线与色标上的纹理都取系统前景色 */
+  @media (forced-colors: active) {
+    [data-xh-chart-part='focus-ring'] {
+      stroke: Highlight;
+    }
+
+    [data-xh-chart-part='leader-line'] {
+      stroke: CanvasText;
+    }
+
+    [data-xh-chart-part='legend-swatch'],
+    [data-xh-chart-part='tooltip-swatch'] {
+      forced-color-adjust: none;
+      border-color: CanvasText;
+      background: CanvasText;
+    }
+
+    [data-xh-chart-part='legend-item'][aria-pressed='false'] > [data-xh-chart-part='legend-swatch'] {
+      background: Canvas;
+    }
+
+    [data-xh-chart-part='tooltip'] {
+      background-image: none;
+    }
+
+    [data-xh-chart-part='pattern'] {
+      forced-color-adjust: none;
+    }
+
+    [data-xh-chart-part='pattern-line'] {
+      stroke: CanvasText;
+    }
+
+    [data-xh-chart-part='legend-item'][data-xh-chart-pattern],
+    [data-xh-chart-part='tooltip-row'][data-xh-chart-pattern] {
+      --xh-_chart-series: CanvasText;
+    }
+
+    [data-xh-chart-pattern] > [data-xh-chart-part='legend-swatch'],
+    [data-xh-chart-pattern] > [data-xh-chart-part='tooltip-swatch'] {
+      background: var(--xh-_chart-hatch);
+    }
+
+    [data-xh-chart-pattern] > [data-xh-chart-part='legend-swatch'][data-mark='line'],
+    [data-xh-chart-pattern] > [data-xh-chart-part='tooltip-swatch'][data-mark='line'] {
+      inline-size: var(--xh-space-5);
+      block-size: var(--xh-_chart-metric-line-width);
+      border: none;
+      background: var(--xh-_chart-dash-swatch);
+    }
+  }
+
+  /* 打印：纸上没有指针，提示框与焦点环不印；数据色照印，纹理开启 */
+  @media print {
+    [data-xh-chart-part='root'] {
+      print-color-adjust: exact;
+    }
+
+    [data-xh-chart-part='tooltip'],
+    [data-xh-chart-part='focus-ring'] {
+      display: none;
+    }
+
+    [data-xh-chart-pattern] > [data-xh-chart-part='legend-swatch'],
+    [data-xh-chart-pattern] > [data-xh-chart-part='tooltip-swatch'] {
+      background: var(--xh-_chart-hatch);
+    }
+
+    [data-xh-chart-pattern] > [data-xh-chart-part='legend-swatch'][data-mark='line'],
+    [data-xh-chart-pattern] > [data-xh-chart-part='tooltip-swatch'][data-mark='line'] {
+      inline-size: var(--xh-space-5);
+      block-size: var(--xh-_chart-metric-line-width);
+      border: none;
+      background: var(--xh-_chart-dash-swatch);
+    }
+  }
+}

package/family/check-mark.css

@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/*
+ * 勾选格里的勾与半选杠：Checkbox、CheckboxGroup、Transfer、Table、QuestionFlow 多选共用一份标记语言。
+ *
+ * 连接层在画标记的节点上投影两位：data-xh-check-mark 是标记的状态（checked / indeterminate / unchecked），
+ * data-xh-check-mark-profile 说标记画在哪——
+ *   box：节点就是方框（或铺满方框的指示器），标记是它的 ::before；作者往节点里放了自己的图形时不画。
+ *   row：节点是一整行，方框由皮肤画在它的 ::before 上，标记是 ::after，叠在方框正中；
+ *        皮肤写两支桥接槽：--xh-check-mark-box-size（方框边长）与 --xh-check-mark-fg（标记色）。
+ *
+ * 标记常驻，不按状态生成或撤掉：未勾时透明并略缩，勾上时淡入并回到原尺寸——淡变走 micro，
+ * 缩放走 nudge，减弱动效下缩放归一、只剩淡变。勾与半选杠叠成两层遮罩，按状态只换两层的尺寸；
+ * 离开勾选时尺寸的切换延后一个 micro，淡出途中标记保持原来的形状，半选淡出时不会闪出一枚勾。
+ *
+ * 尺寸读节点上的 --xh-icon-size（方框边长 × 0.75，由各皮肤按方框的尺改接）；
+ * 选择器只让 [data-xh-check-mark] 计入特指度，状态与形态包在 :where() 里，皮肤按部件覆盖即可压过。
+ */
+@layer xihan.components {
+  [data-xh-check-mark]:where([data-xh-check-mark-profile='box']):empty::before,
+  [data-xh-check-mark]:where([data-xh-check-mark-profile='row'])::after {
+    content: '';
+    display: inline-block;
+    flex: none;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: var(--xh-check-mark-fg, currentColor);
+    opacity: 0;
+    scale: var(--xh-motion-scale-enter);
+    pointer-events: none;
+    -webkit-mask: var(--xh-glyph-mark-check) center / 100% 100% no-repeat, var(--xh-glyph-mark-minus) center / 0 0 no-repeat;
+    mask: var(--xh-glyph-mark-check) center / 100% 100% no-repeat, var(--xh-glyph-mark-minus) center / 0 0 no-repeat;
+    transition:
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong),
+      -webkit-mask-size 0s var(--xh-motion-duration-micro),
+      mask-size 0s var(--xh-motion-duration-micro);
+  }
+
+  /* 行里的方框是行首那颗 ::before：标记按「方框与标记的边长差之半」内推即落在方框正中，纵向靠
+     inset-block: 0 + margin-block: auto 居中。粗指针下 Action Control 在同一个 ::after 上铺的热区
+     （起点 50%、44px 下限、-50% 平移）在这里逐项钉回，标记不被拖走、也不被撑大 */
+  [data-xh-check-mark]:where([data-xh-check-mark-profile='row'])::after {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    min-inline-size: 0;
+    min-block-size: 0;
+    margin-block: auto;
+    margin-inline-start: calc(
+      (var(--xh-check-mark-box-size, var(--xh-control-indicator-size)) - var(--xh-icon-size, var(--xh-glyph-size-text))) / 2
+    );
+    translate: none;
+  }
+
+  [data-xh-check-mark]:where([data-xh-check-mark='checked'], [data-xh-check-mark='indeterminate']):where([data-xh-check-mark-profile='box']):empty::before,
+  [data-xh-check-mark]:where([data-xh-check-mark='checked'], [data-xh-check-mark='indeterminate']):where([data-xh-check-mark-profile='row'])::after {
+    opacity: 1;
+    scale: 1;
+    transition-delay: 0s;
+  }
+
+  /* 半选：aria-checked=mixed 在视觉上也得与全选分得开，横杠与勾同走字形令牌 */
+  [data-xh-check-mark]:where([data-xh-check-mark='indeterminate']):where([data-xh-check-mark-profile='box']):empty::before,
+  [data-xh-check-mark]:where([data-xh-check-mark='indeterminate']):where([data-xh-check-mark-profile='row'])::after {
+    -webkit-mask-size: 0 0, 100% 100%;
+    mask-size: 0 0, 100% 100%;
+  }
+
+  /* 强制色：遮罩保留字形轮廓，标记退出强制换色、直接写系统前景（不能取 currentColor：退出强制换色的伪元素
+     读到的是被系统换掉之前的作者色）；禁用取置灰前景。
+     节点自己就是一颗动作控件的方框（Table 的勾选把手）：悬停与按下时家族把方框涂成 Highlight，标记跟着换 HighlightText。
+     方框另有实心面的（CheckboxGroup、Transfer 的勾选盒，行档的方框）在这一档里是 Canvas，整行悬停不换面，不在此列 */
+  @media (forced-colors: active) {
+    [data-xh-check-mark]:where([data-xh-check-mark-profile='box']):empty::before,
+    [data-xh-check-mark]:where([data-xh-check-mark-profile='row'])::after {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-xh-check-mark][data-xh-action-control]:where([data-xh-check-mark-profile='box']):where(:not([data-disabled]):not([data-loading])):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-xh-check-mark]:where([data-disabled]):where([data-xh-check-mark-profile='box']):empty::before,
+    [data-xh-check-mark]:where([data-disabled]):where([data-xh-check-mark-profile='row'])::after {
+      background-color: GrayText;
+    }
+  }
+}

package/family/choice-card.css

@@ -0,0 +1,97 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/*
+ * 选择卡片家族配方：RadioGroup 与 CheckboxGroup 的 card 档条目共用一副卡面——一张可点的描边卡，
+ * 行首照旧是圆圈 / 方框，文案与说明排在它右侧，整张卡是命中区。
+ *
+ * 连接层在 card 档条目上投影 data-xh-choice-card，并把 Action Control 的形态换成 outline（row 档照旧：
+ * 宽度由容器给、高度随内容、按下只换面不缩放）。配方只管卡面：
+ *   形状取 surface（8px），内衬 space-3 / space-4；
+ *   未选中是描边卡：透明底 + --xh-border-control，白底承载阶梯 100 → 200，不随语气染色；
+ *   选中是「页内持久集合的选中」那一种标记：卡面换品牌淡底 12 → 悬停 20 → 按压 28、前景 fg-on-brand-subtle，
+ *   写了 data-tone 时换成语气淡底；描边不换，行首的圆点 / 勾照常表达选中；
+ *   只读不给悬停与按下面，选中面照常；禁用走家族禁用面，选中又禁用时底色掺一半中性面，选中信息不丢。
+ *
+ * 选择器带上 [data-scope][data-part]：皮肤里条目的基础规则写的是 (0,2,0)，配方排在皮肤之前，
+ * 同权重时皮肤赢；卡面要压过列表档的那几条（边归零、内衬归零、圆角取 control）。
+ */
+@layer xihan.components {
+  [data-scope][data-part][data-xh-choice-card] {
+    --xh-action-radius: var(--xh-shape-surface);
+    --xh-action-padding-inline: var(--xh-space-4);
+    --xh-action-padding-block: var(--xh-space-3);
+    --xh-action-bg-rest: transparent;
+    --xh-action-bg-hover: var(--xh-bg-subtle);
+    --xh-action-bg-pressed: var(--xh-bg-subtle-hover);
+    --xh-action-bg-focus-visible: transparent;
+    --xh-action-bg-disabled: var(--xh-bg-subtle);
+    --xh-action-border-rest: var(--xh-border-control);
+    --xh-action-border-hover: var(--xh-border-control-hover);
+    --xh-action-border-pressed: var(--xh-border-control-hover);
+    --xh-action-border-focus-visible: var(--xh-border-control);
+    --xh-action-border-disabled: var(--xh-border-default);
+
+    /* 行首标记一列、文案一列；说明落在文案下方同一列（皮肤给说明写 grid-column: 2） */
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    row-gap: var(--xh-space-1);
+    border-width: var(--xh-stroke-thin);
+    line-height: var(--xh-leading-normal);
+  }
+
+  [data-scope][data-part][data-xh-choice-card][data-state='checked'] {
+    --xh-action-bg-rest: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+    --xh-action-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-brand-subtle-hover));
+    --xh-action-bg-pressed: var(--xh-_tone-subtle-active, var(--xh-bg-brand-subtle-active));
+    --xh-action-bg-focus-visible: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+    /* 掺的是淡底的不透明档：墨色淡底半透明，掺进去整块面会跟着变半透明 */
+    --xh-action-bg-disabled: color-mix(in oklab, var(--xh-_tone-subtle, var(--xh-bg-brand-subtle)) 50%, var(--xh-bg-subtle-opaque));
+    --xh-action-fg-rest: var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle));
+    --xh-action-fg-hover: var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle));
+    --xh-action-fg-pressed: var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle));
+    --xh-action-fg-focus-visible: var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle));
+  }
+
+  /* 只读改不动：悬停与按下都停在静息面上（选中卡仍是淡底），收回可点的手型 */
+  [data-scope][data-part][data-xh-choice-card][data-readonly]:not([data-disabled]) {
+    --xh-action-bg-hover: transparent;
+    --xh-action-bg-pressed: transparent;
+    --xh-action-border-hover: var(--xh-border-control);
+    --xh-action-border-pressed: var(--xh-border-control);
+    --xh-action-cursor-rest: default;
+    --xh-action-cursor-hover: default;
+    --xh-action-cursor-pressed: default;
+    --xh-action-cursor-focus-visible: default;
+  }
+
+  [data-scope][data-part][data-xh-choice-card][data-readonly][data-state='checked']:not([data-disabled]) {
+    --xh-action-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+    --xh-action-bg-pressed: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+  }
+
+  /* 卡面本身已够大：粗指针下不再把命中区外扩到 44px 高，外扩会压进相邻的卡 */
+  @media (pointer: coarse) {
+    [data-scope][data-part][data-xh-choice-card]::after {
+      min-block-size: 0;
+    }
+  }
+
+  /* 强制色：底色一律换成 Canvas，选中卡的淡底看不见了，描边换系统高亮色表出选中 */
+  @media (forced-colors: active) {
+    [data-scope][data-part][data-xh-choice-card][data-state='checked'] {
+      border-color: Highlight;
+    }
+  }
+
+  /* 打印丢底色：选中卡的淡底落不到纸上，描边加粗一档表出选中 */
+  @media print {
+    [data-scope][data-part][data-xh-choice-card][data-state='checked'] {
+      border-width: var(--xh-stroke-thick);
+      border-color: currentColor;
+    }
+  }
+}