@xihan-ui/styles 2.1.0 → 3.0.0

package/css/virtualizer.css

@@ -54,6 +54,33 @@
     overflow-y: hidden;
   }
 
+  /* 随整页滚动：这层不再是滚动容器，高度随内容撑开，两向都不裁 */
+  [data-scope='virtualizer'][data-part='viewport'][data-scroll-container='window'] {
+    block-size: auto;
+    overflow-x: visible;
+    overflow-y: visible;
+  }
+
+  /* 贴底：不足一屏时把内容推到尽头那一侧，最新的一条贴着底；超过一屏时自动外距归零，照常滚动 */
+  [data-scope='virtualizer'][data-part='viewport'][data-anchor='end'] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  [data-scope='virtualizer'][data-part='viewport'][data-anchor='end'][data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  [data-scope='virtualizer'][data-part='viewport'][data-anchor='end'] > [data-scope='virtualizer'][data-part='content'] {
+    flex-shrink: 0;
+    margin-block-start: auto;
+  }
+
+  [data-scope='virtualizer'][data-part='viewport'][data-anchor='end'][data-orientation='horizontal'] > [data-scope='virtualizer'][data-part='content'] {
+    margin-block-start: 0;
+    margin-inline-start: auto;
+  }
+
   /* 撑出总长的那层，同时是条目的定位上下文——条目是绝对定位的，
      没有它就会以最近的定位祖先（多半是页面某处）为参照，整列飘走。 */
   [data-scope='virtualizer'][data-part='content'] {
@@ -86,6 +113,24 @@
     block-size: 100%;
   }
 
+  /* 钉住的分组标题：留在文档流里按 sticky 钉在视口起点（连接层不给它写主轴位移），
+     压在滚过去的条目上面，所以要一块实底 */
+  [data-scope='virtualizer'][data-part='item'][data-fixed] {
+    position: sticky;
+    z-index: var(--xh-virtualizer-sticky-layer, var(--xh-layer-sticky));
+    background: var(--xh-virtualizer-sticky-bg, var(--xh-bg-surface));
+  }
+
+  [data-scope='virtualizer'][data-part='item'][data-fixed][data-orientation='vertical'] {
+    inset-block-start: 0;
+  }
+
+  /* 横向时留在文档流里的块会铺满整条内容层，收成自身宽度 */
+  [data-scope='virtualizer'][data-part='item'][data-fixed][data-orientation='horizontal'] {
+    inset-inline-start: 0;
+    inline-size: fit-content;
+  }
+
   /* 除视口外全是纯容器：既不进 Tab 序列也不承载焦点，作者若给它们加了 tabindex，
      该显形的也该是视口那圈环，不是这里再多画一圈。
      条目内部的可聚焦内容（按钮、链接）有它们自己的焦点环，不受这条影响。 */
@@ -99,6 +144,17 @@
      滚动期间关掉 pointer-events 之类的常见招数会让"滚一下就点"落空，
      留给作者按自己的取舍去接。 */
 
+  /* 高对比档里实底换成系统底色、与滚过去的条目同色：钉住的标题补一条系统描边，与下面的内容分开 */
+  @media (forced-colors: active) {
+    [data-scope='virtualizer'][data-part='item'][data-fixed][data-orientation='vertical'] {
+      border-block-end: var(--xh-stroke-thin) solid CanvasText;
+    }
+
+    [data-scope='virtualizer'][data-part='item'][data-fixed][data-orientation='horizontal'] {
+      border-inline-end: var(--xh-stroke-thin) solid CanvasText;
+    }
+  }
+
   /* display 会盖掉 UA 的 [hidden]{display:none}，凡是被赋了 display 的角色节点都要显式让位。
      连接层只在条目上写 hidden（不在窗口里的那些），其余三个是防作者自己写 hidden */
   [data-scope='virtualizer'][data-part='root'][hidden],

package/css/watermark.css

@@ -50,6 +50,29 @@
     mask-size: var(--xh-watermark-tile, auto);
   }
 
+  /* 全屏档：印子固定铺满整个视口，压在页面一切内容之上（对话框、轻提示、文字提示都在它下面），页面滚动时原地不动。
+     根不再建层叠上下文：隔离了的话，印子的层号只在根里比大小，会被根外那些浮层压住 */
+  [data-scope='watermark'][data-part='root'][data-fullscreen] {
+    isolation: auto;
+  }
+
+  [data-scope='watermark'][data-part='root'][data-state='ready'][data-fullscreen]::after {
+    position: fixed;
+    z-index: var(--xh-watermark-layer, var(--xh-layer-tooltip));
+  }
+
+  /*
+   * 高对比档：印子的颜色是遮罩底下那块底色，这一档里被系统换成 Canvas，与页面同色，整层印子消失。
+   * 印子是防泄露的标记，不能因为读者开了高对比就不印：退出强制换色、取 GrayText——系统给「弱化内容」
+   * 留的那个角色，深浅仍由图样自带的透明度压着，不与正文抢对比
+   */
+  @media (forced-colors: active) {
+    [data-scope='watermark'][data-part='root'][data-state='ready']::after {
+      forced-color-adjust: none;
+      background-color: GrayText;
+    }
+  }
+
   /* 遮罩不支持时整层不画：只剩底色的话，盖上去的会是一整块实心色 */
   @supports not ((mask-image: none) or (-webkit-mask-image: none)) {
     [data-scope='watermark'][data-part='root'][data-state='ready']::after {

package/family/action-control.css

@@ -54,6 +54,7 @@
     transition:
       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),
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
@@ -116,7 +117,7 @@
     --xh-_action-variant-border-focus-visible: var(--xh-_tone-border-control, var(--xh-border-control));
     --xh-_action-variant-bg-disabled: transparent;
     --xh-_action-variant-fg-disabled: var(--xh-fg-disabled);
-    --xh-_action-variant-border-disabled: var(--xh-border-subtle);
+    --xh-_action-variant-border-disabled: var(--xh-border-default);
     --xh-_action-variant-bg-loading: transparent;
     --xh-_action-variant-fg-loading: var(--xh-_tone-fg, var(--xh-fg-default));
     --xh-_action-variant-border-loading: var(--xh-_tone-border-control, var(--xh-border-control));
@@ -156,8 +157,16 @@
     --xh-_action-variant-fg-loading: var(--xh-action-on-brand-solid);
   }
 
+  [data-xh-action-control][data-xh-ink-surface] {
+    --xh-ink-surface: var(--xh-action-bg-rest, var(--xh-_action-variant-bg-rest));
+  }
+
+  [data-xh-action-control][data-xh-ink-surface][data-disabled] {
+    --xh-ink-surface: var(--xh-action-bg-disabled, var(--xh-bg-subtle-opaque));
+  }
+
   [data-xh-action-control][data-xh-action-size='xs'] {
-    --xh-_action-profile-visual-size: 24px;
+    --xh-_action-profile-visual-size: var(--xh-control-action-size);
     --xh-_action-profile-padding-inline: var(--xh-space-1);
     --xh-_action-profile-padding-block: 0;
     --xh-_action-profile-gap: var(--xh-space-1);
@@ -216,13 +225,13 @@
   }
 
   [data-xh-action-control][data-xh-action-profile='field-inset'][data-xh-action-size='xs'] {
-    --xh-_action-profile-glyph-size: 12px;
+    --xh-_action-profile-glyph-size: var(--xh-control-indicator-sm);
     --xh-_action-profile-font-size: var(--xh-control-caption-sm);
   }
 
   [data-xh-action-control][data-xh-action-profile='field-inset'][data-xh-action-size='sm'] {
-    --xh-_action-profile-visual-size: 24px;
-    --xh-_action-profile-glyph-size: 14px;
+    --xh-_action-profile-visual-size: var(--xh-control-action-size);
+    --xh-_action-profile-glyph-size: var(--xh-control-indicator-md);
     --xh-_action-profile-font-size: var(--xh-control-caption-sm);
   }
 

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);
+    }
+  }
+}