@xihan-ui/styles 2.0.0 → 3.0.0

package/css/signature-pad.css

@@ -23,7 +23,7 @@
     gap: var(--xh-signature-pad-gap, var(--xh-space-2));
   }
 
-  /* 复合单字段的标签（§6.4）：14 / 500 / fg-default，不随档；贴画布 space-1——
+  /* 复合单字段的标签：14 / 500 / fg-default，不随档；贴画布 space-1——
      容器的 gap 归画布之后的部件，标签在它之上补一段差值把距离收成目标值 */
   [data-scope='signature-pad'][data-part='label'] {
     margin-block-end: calc(
@@ -42,7 +42,7 @@
   /* 画布是块状的写字区：宽度铺满外层，高度由宽高比决定。
      控件行高那把尺量的是一行控件，一块要写字的面积用不上它。
      touch-action 由连接层内联写死，触摸落笔才不会被页面滚动抢走。
-     外壳按字段规则自绘（§8.3 登记的画布型字段例外：字段家族配方钉死控件行高，画布按宽高比撑高吃不下它）：
+     外壳按字段规则自绘（登记的画布型字段例外：字段家族配方钉死控件行高，画布按宽高比撑高吃不下它）：
      静息透明底 + border-control 描边 + control 圆角 + 无影 */
   [data-scope='signature-pad'][data-part='control'] {
     display: block;
@@ -57,7 +57,7 @@
     /* 落笔、校验不过与禁用三档各换一次描边或底色，换的过程要看得出来 */
     transition:
       border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='signature-pad'][data-part='control'][data-invalid] {
@@ -71,13 +71,13 @@
   }
 
   /* 只读仍看得见签名，只是改不动：收掉手型，别暗示"在这儿能写"；
-     面按字段只读规则只换到淡底，描边不动（§7.2 第 9 条） */
+     面按字段只读规则只换到淡底，描边不动 */
   [data-scope='signature-pad'][data-part='control'][data-readonly]:not([data-disabled]) {
     background: var(--xh-signature-pad-bg-readonly, var(--xh-bg-subtle));
     cursor: default;
   }
 
-  /* 字段禁用面（§7.2 第 9 条）：描边退到 border-default、底换淡底 */
+  /* 字段禁用面：描边退到 border-default、底换淡底 */
   [data-scope='signature-pad'][data-part='control'][data-disabled] {
     border-color: var(--xh-signature-pad-border-disabled, var(--xh-border-default));
     background: var(--xh-signature-pad-bg-disabled, var(--xh-bg-subtle));
@@ -100,9 +100,9 @@
   }
 
   /*
-   * 清空按钮是画布旁的独立文字按钮（§9.1）：盒型、sm 档几何、outline 四态面、0.97 按压与粗指针命中区由家族配方
+   * 清空按钮是画布旁的独立文字按钮：盒型、sm 档几何、outline 四态面、0.97 按压与粗指针命中区由家族配方
    * 按连接层投影的 data-xh-action-variant / -size 给出（缺省 outline，白底承载阶梯 100 → 200）。这里只把公开槽
-   * 桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与几何槽映射，矩阵各态无影（§8.3 淡底与阴影互斥）。
+   * 桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与几何槽映射，矩阵各态无影（淡底与阴影互斥）。
    */
   [data-scope='signature-pad'][data-part='clear-trigger'] {
     --xh-action-bg-rest: var(--xh-signature-pad-clear-bg, var(--xh-_action-variant-bg-rest));
@@ -137,12 +137,25 @@
     --xh-action-fg-rest: var(--xh-signature-pad-clear-fg-empty, var(--xh-fg-muted));
   }
 
+  /*
+   * 撤销与重做按钮与清空按钮同一身份：盒型、sm 档几何、outline 四态面、0.97 按压与粗指针命中区全由家族配方给出。
+   * 没有可撤销或可重做的一步时连接层投影 data-disabled + aria-disabled，家族给置灰面，焦点仍留在钮上。
+   */
+  [data-scope='signature-pad'][data-part='undo-trigger'],
+  [data-scope='signature-pad'][data-part='redo-trigger'] {
+    /* 作者塞进来的图标随档取字形尺（sm = 16px） */
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+
+    /* 竖排容器里不铺满一行：按钮只占自己的宽 */
+    align-self: flex-start;
+  }
+
   /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色 */
   [data-scope='signature-pad'][data-part='clear-trigger'][data-xh-action-variant='solid']:focus-visible {
     --xh-action-ring-color-focus-visible: currentColor;
   }
 
-  /* 签没签的那句话是说明角色（§6.4）：13 / fg-muted / leading-normal。读屏靠它播报，看得见的人也用得上，因此不做视觉隐藏 */
+  /* 签没签的那句话是说明角色：13 / fg-muted / leading-normal。读屏靠它播报，看得见的人也用得上，因此不做视觉隐藏 */
   [data-scope='signature-pad'][data-part='status'] {
     color: var(--xh-signature-pad-status-fg, var(--xh-fg-muted));
     font-size: var(--xh-signature-pad-status-font-size, var(--xh-text-secondary-size));
@@ -158,6 +171,8 @@
   /* display 会盖掉 UA 的 [hidden]{display:none}，凡是被赋了 display 的角色节点都要显式让位 */
   [data-scope='signature-pad'][data-part='root'][hidden],
   [data-scope='signature-pad'][data-part='control'][hidden],
+  [data-scope='signature-pad'][data-part='undo-trigger'][hidden],
+  [data-scope='signature-pad'][data-part='redo-trigger'][hidden],
   [data-scope='signature-pad'][data-part='clear-trigger'][hidden] {
     display: none;
   }

package/css/skeleton.css

@@ -5,19 +5,10 @@
 
 /* 定义 skeleton 样式。 */
 
-@layer xihan.motion {
-  /* 一条比底色略亮的窄带从头扫到尾。背景图比自身宽一倍，靠移动背景位置扫过去，
-     不动 transform 也不动布局，整段动画只在合成层上跑 */
-  @keyframes xh-skeleton-shimmer {
-    from {
-      background-position: 200% 0;
-    }
-
-    to {
-      background-position: -200% 0;
-    }
-  }
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
 
+@layer xihan.motion {
   /* 呼吸档：整根条子在原色与禁用档之间来回淡。往返由 alternate 给，帧里只写一端 */
   @keyframes xh-skeleton-pulse {
     to {
@@ -44,6 +35,13 @@
     display: none;
   }
 
+  /* 刚加载完：机器已把骨架原地抬出文档流、钉住原来的尺寸，真实内容补上它空出来的位置；
+     骨架盖在内容之上淡出，播完才收起，不挡内容的指针。挂载时就已加载完的直接收起，不播这一段 */
+  [data-scope='skeleton'][data-part='root'][data-state='loaded']:not([hidden]) {
+    pointer-events: none;
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
   /*
    * 单根骨架条。底色与微光两层叠在一起：
    * background-color 是静止时看到的那层，background-image 是扫过去的那道光。
@@ -63,7 +61,8 @@
     );
     background-repeat: no-repeat;
     background-size: 200% 100%;
-    animation: xh-skeleton-shimmer var(--xh-skeleton-duration, var(--xh-shimmer-duration)) var(--xh-motion-ease-loop) infinite;
+    /* 扫光与思考中文字、工具调用进行中同一段共享关键帧：同屏时亮带扫过的距离与节奏一致 */
+    animation: xh-shimmer var(--xh-skeleton-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-loop) infinite;
   }
 
   /* 一行文字的高度取正文字号，圆角拉满，看起来就是一行还没排出来的字 */
@@ -93,7 +92,7 @@
    */
   [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
     background-image: none;
-    animation: xh-skeleton-pulse var(--xh-skeleton-pulse-duration, var(--xh-shimmer-duration)) var(--xh-motion-ease-sweep) infinite alternate;
+    animation: xh-skeleton-pulse var(--xh-skeleton-pulse-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-sweep) infinite alternate;
   }
 
   /* 静止档：底色留着，两层动效都撤掉 */

package/css/slider.css

@@ -25,7 +25,7 @@
 
     display: flex;
     flex-direction: column;
-    /* 字段标签贴控件（§6.4 复合单字段） */
+    /* 字段标签贴控件（复合单字段） */
     gap: var(--xh-slider-gap, var(--xh-space-1));
   }
 
@@ -35,10 +35,10 @@
     align-items: center;
   }
 
-  /* 禁用不整体压暗（§7.2 第 9 条）：前景与表面各自降级——连接层把 data-disabled 发到每个角色节点上，
+  /* 禁用不整体压暗：前景与表面各自降级——连接层把 data-disabled 发到每个角色节点上，
      轨道、区间、拇指、刻度与标签就近消费，写在各自的规则里 */
 
-  /* 字段标签：14 / 500 / fg-default（§6.4），禁用换到 --xh-fg-subtle */
+  /* 字段标签：14 / 500 / fg-default，禁用换到 --xh-fg-subtle */
   [data-scope='slider'][data-part='label'] {
     color: var(--xh-slider-label-fg, var(--xh-fg-default));
     font-size: var(--xh-slider-label-font-size, var(--xh-text-label-size));
@@ -133,6 +133,15 @@
     inline-size: 100%;
   }
 
+  /* 两端拇指之间可以整段拖动：区间给出「抓得住」的光标，拖动中换成「抓着」 */
+  [data-scope='slider'][data-part='range'][data-draggable] {
+    cursor: grab;
+  }
+
+  [data-scope='slider'][data-part='range'][data-draggable][data-dragging] {
+    cursor: grabbing;
+  }
+
   [data-scope='slider'][data-part='range'][data-invalid] {
     background: var(--xh-slider-range-bg-invalid, var(--xh-border-invalid));
   }
@@ -144,13 +153,15 @@
   /* 圆点浮在轨道之上：轨道是流内的，拇指是绝对定位的，天然后来居上，不必再堆 z-index。
      box-sizing 必须显式写：描边要吃进直径里，否则实际盒子比 --xh-_thumb-size 宽两条边，
      下面按半个直径回拉的负外边距就对不上圆心。
-     拇指是可拖起的 raised 面（§8）：描边取 --xh-border-default，raised 影只是加成、不作边界 */
+     拇指是可拖起的 raised 面：描边取装饰边（不透明档），raised 影只是加成、不作边界 */
   [data-scope='slider'][data-part='thumb'] {
     position: absolute;
     box-sizing: border-box;
     inline-size: var(--xh-_thumb-size);
     block-size: var(--xh-_thumb-size);
-    border: var(--xh-stroke-thick) solid var(--xh-slider-thumb-border, var(--xh-border-default));
+    /* 描边取装饰边的不透明档：墨色描边半透明，压在圆点自己的底上只会是底色的深一档，框不住圆点，
+       拇指就与同色的已选区间糊成一片 */
+    border: var(--xh-stroke-thick) solid var(--xh-slider-thumb-border, var(--xh-border-default-opaque));
     border-radius: var(--xh-slider-thumb-radius, var(--xh-shape-circle));
     background: var(--xh-slider-thumb-bg, var(--xh-_tone, var(--xh-bg-brand)));
     /* 圆点上没有字，这一支是给环用的：环灌 currentColor 时取到的是与这块底配对的前景色，
@@ -159,7 +170,7 @@
     box-shadow: var(--xh-slider-thumb-shadow, var(--xh-elevation-raised));
     cursor: grab;
     transition:
-      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter-strong),
+      scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong),
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -193,7 +204,10 @@
      海拔从静态的 raised 换到 lifted：跟着手走的东西比贴在页面上的抬得高一档，
      又不到锚定浮层那一层——用 floating 会让拇指和下拉面板一样重。 */
   [data-scope='slider'][data-part='thumb'][data-dragging] {
-    scale: var(--xh-slider-thumb-scale-dragging, var(--xh-motion-scale-drag));
+    /* 放大比例落进私有槽：挂在拇指里的值气泡读同一支反向缩回原尺寸 */
+    --xh-_slider-thumb-scale: var(--xh-slider-thumb-scale-dragging, var(--xh-motion-scale-drag));
+
+    scale: var(--xh-_slider-thumb-scale);
     cursor: grabbing;
     box-shadow: var(--xh-slider-thumb-shadow-dragging, var(--xh-elevation-lifted));
   }
@@ -215,16 +229,19 @@
   }
 
   /* 值气泡：挂在拇指里，跟着拇指一起走位。
-     两侧 inset 都钉在 50% 再靠自动外边距回中：气泡宽度由文字撑出，用 translate 回中的话
-     rtl 下 inset-inline-start 映射到 right，位移是物理方向的，会把气泡推向错误的一侧。
+     气泡宽度由文字撑出，只能靠平移回中。不能两侧 inset 都钉在 50% 再靠自动外边距回中：
+     那样可用宽度是 0，气泡比它宽，自动外边距按规范取 0，气泡从拇指中线起排、偏出半个自身宽。
+     起点是逻辑属性、平移是物理通道：平移乘书写方向的符号，rtl 下行内分量掉头，气泡才落回拇指正上方。
+     拖动时拇指放大，气泡按同一比例反向缩回、与拇指同一段过渡：文字不跟着放大，缩放原点在贴着拇指那一边。
      默认只在推动那一刻露面，静止时留在 DOM 里但不占视线 */
   [data-scope='slider'][data-part='value-text'] {
     position: absolute;
     inset-block-end: 100%;
-    inset-inline: 50%;
+    inset-inline-start: 50%;
     inline-size: max-content;
     margin-block-end: var(--xh-slider-value-text-offset, var(--xh-space-2));
-    margin-inline: auto;
+    translate: calc(-50% * var(--xh-direction-sign)) 0;
+    transform-origin: 50% 100%;
     padding-block: var(--xh-slider-value-text-py, var(--xh-space-0_5));
     padding-inline: var(--xh-slider-value-text-px, var(--xh-space-2));
     border-radius: var(--xh-slider-value-text-radius, var(--xh-shape-control));
@@ -236,7 +253,9 @@
     /* 气泡贴在拇指上方，指针要落到拇指上，不能被它挡住 */
     pointer-events: none;
     opacity: 0;
-    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition:
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
   }
 
   [data-scope='slider'][data-part='value-text'][hidden] {
@@ -246,15 +265,17 @@
   /* 只有手真正推着的那一个拇指带 data-dragging，多拇指时气泡不会全组一起冒出来 */
   [data-scope='slider'][data-part='value-text'][data-dragging] {
     opacity: 1;
+    scale: calc(1 / var(--xh-_slider-thumb-scale, 1));
   }
 
-  /* 竖排轨道的气泡挪到行侧：压在拇指上方会挡住上一档的值 */
+  /* 竖排轨道的气泡挪到行侧：压在拇指上方会挡住上一档的值；反向缩放的原点换到贴着拇指的行首那一侧 */
   [data-scope='slider'][data-part='value-text'][data-orientation='vertical'] {
     inset-block: 50%;
     inset-inline: 100% auto;
     block-size: max-content;
     margin-block: auto;
     margin-inline: var(--xh-slider-value-text-offset, var(--xh-space-2)) 0;
+    transform-origin: calc(50% - 50% * var(--xh-direction-sign)) 50%;
   }
 
   /* —— 尺寸 —— */
@@ -277,7 +298,7 @@
     pointer-events: none;
   }
 
-  /* 刻度点是正方盒，取 circle（§6.3 正方盒不得用 pill 冒充圆） */
+  /* 刻度点是正方盒，取 circle（正方盒不得用 pill 冒充圆） */
   [data-scope='slider'][data-part='tick'] {
     position: absolute;
     inset-block-start: 50%;
@@ -285,7 +306,8 @@
     block-size: var(--xh-slider-tick-size, var(--xh-space-1));
     border-radius: var(--xh-slider-tick-radius, var(--xh-shape-circle));
     background: var(--xh-slider-tick-bg, var(--xh-border-strong));
-    translate: -50% -50%;
+    /* 连接层把比例点写在 inset-inline-start 上：平移的行内分量乘书写方向的符号，rtl 下掉头，刻度点才以比例点为中心 */
+    translate: calc(-50% * var(--xh-direction-sign)) -50%;
   }
 
   /* 落进已选区间的刻度点跟 range 同色 */
@@ -301,7 +323,7 @@
     font-size: var(--xh-slider-tick-label-font-size, var(--xh-text-caption-size));
     line-height: var(--xh-leading-none);
     white-space: nowrap;
-    translate: -50% 0;
+    translate: calc(-50% * var(--xh-direction-sign)) 0;
     cursor: pointer;
     pointer-events: auto;
     user-select: none;
@@ -330,7 +352,7 @@
   [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick'] {
     inset-block-start: auto;
     inset-inline-start: 50%;
-    translate: -50% 50%;
+    translate: calc(-50% * var(--xh-direction-sign)) 50%;
   }
 
   [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick-label'] {

package/css/sortable.css

@@ -14,8 +14,8 @@
     --xh-sortable-skin: 1;
   }
 
-  /* 分工：**每一项的位移**由连接层每帧写进内联 transform（让位与跟手都在那儿算）。
-     这份皮肤一条都不碰 transform——内联优先级更高，写了不但是死声明，
+  /* 分工：**每一项的位移**由连接层每帧写进内联 translate（让位与跟手都在那儿算）。
+     这份皮肤一条都不碰 translate——内联优先级更高，写了不但是死声明，
      还会在拖动的每一帧跟连接层抢位置。皮肤只管排布方向、间距、光标与状态表现。 */
 
   [data-scope='sortable'][data-part='root'] {
@@ -47,18 +47,40 @@
      看起来像是尺寸算错了。皮肤只管拖起来那一项的视觉反馈。 */
 
   /* 让位期间关掉过渡，跟手的那一项才不会慢半拍粘在指针后面。
-     其余项反过来要过渡：它们是被让开的，瞬移会看不出发生了什么。 */
-  [data-scope='sortable'][data-part='root'][data-dragging] [data-part='item']:not([data-dragging]) {
-    transition: transform var(--xh-motion-duration-micro) var(--xh-motion-ease-continuous);
+     其余项反过来要过渡：它们是被让开的，瞬移会看不出发生了什么。
+     键盘拖动时被拖那一项不跟手、逐格挪，与让位的邻项同一段一起滑；抓起时的抬升照常淡变。
+     同组别的列表的一项悬在这里（data-drop='inside'）时，插入点及其后的项同样是被让开的 */
+  [data-scope='sortable'][data-part='root']:is([data-dragging], [data-drop='inside']) [data-part='item']:not([data-dragging]) {
+    transition: translate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous);
   }
 
-  /* 抓起与放下时的抬升、压深都淡变。位移不进这条：它由连接层每帧写内联 transform */
+  /* 让位把末项挪出了原来的末端：容器末尾垫出落进来那一格的大小（连接层写进 --xh-_sortable-incoming-size），
+     容器随之长出一格，末项不会掉出容器的面。垫块是一个 flex 子项，沿主轴取那一格的尺寸、与各项之间同样隔一个 gap；
+     列表为空时它是唯一的子项，不带 gap，正好是那一格 */
+  [data-scope='sortable'][data-part='root'][data-drop='inside']::after {
+    content: '';
+    flex: 0 0 var(--xh-_sortable-incoming-size);
+  }
+
+  [data-scope='sortable'][data-part='root'][data-drag-mode='keyboard'] [data-part='item'][data-dragging] {
+    transition:
+      translate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 抓起与放下时的抬升、压深都淡变。位移不进这条：它由连接层每帧写内联 translate */
   [data-scope='sortable'][data-part='item'] {
     transition:
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
+  /* 放下后那一项由弹簧带着松手速度逐帧收进新位置：只在这一档备好合成层，落定即撤 */
+  [data-scope='sortable'][data-part='item'][data-animating] {
+    will-change: translate;
+  }
+
   [data-scope='sortable'][data-part='item'][data-dragging] {
     /* 拖起来的那一项浮在上面。层级由连接层写内联，这里只管观感。
        海拔取 lifted：被指针拎起、正跟着手走的东西比贴在页面上的 raised 高一档，又不到锚定浮层那一层。
@@ -67,7 +89,7 @@
     opacity: var(--xh-sortable-item-opacity-dragging, 0.9);
   }
 
-  /* 把手是只有字形的离散动作钮（§9.1 定尺把手）：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、
+  /* 把手是只有字形的离散动作钮（定尺把手）：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、
      禁用面全由 Action Control 的 icon ghost 档给（连接层投 xs：24px 正方盒，与此前 --xh-control-action-size
      同尺寸），组件只映射既有使用者槽。静息透明，白底承载 hover 100 → pressed 200（此前悬停落 200 是错档）。
      手型不是 pointer：抓起来拖的东西给 grab，按住拖动中给 grabbing；家族的手型槽逐态映射 */
@@ -161,7 +183,7 @@
     border-radius: var(--xh-sortable-drop-indicator-radius, var(--xh-shape-pill));
     background: var(--xh-sortable-drop-indicator-bg, var(--xh-bg-brand));
     /* 落点一格一格地跳，线跟着滑过去 */
-    transition: transform var(--xh-motion-duration-micro) var(--xh-motion-ease-continuous);
+    transition: translate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous);
   }
 
   /* 竖排时是一条横线铺满容器，横排与换行网格时是一条竖线 */
@@ -176,6 +198,14 @@
     block-size: 100%;
   }
 
+  /* 落点线是一块纯底色，高对比档里底色被统一换成 Canvas，整根消失：换成系统高亮色画回来。
+     跨列表时落在哪个列表只靠这条线与让出的那一格表出，这一档里同样要看得见 */
+  @media (forced-colors: active) {
+    [data-scope='sortable'][data-part='drop-indicator'] {
+      background: Highlight;
+    }
+  }
+
   /* 活动区域只说给读屏听，不占版面。声明与 shared/visually-hidden.ts 逐条同值。 */
   [data-scope='sortable'][data-part='live-region'] {
     position: absolute;

package/css/sparkline.css

@@ -0,0 +1,164 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 sparkline 样式。 */
+
+/* 描线与淡入关键帧由 family/motion.css 提供；本皮肤 @import 它，单独引入仍成立。
+   迷你图只消费色槽与线宽，不接 Chart 家族配方的标题、图例与提示框。 */
+@import '../family/motion.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='sparkline'] {
+    --xh-sparkline-skin: 1;
+  }
+
+  /* 根就是 <svg>：随文排版，宽度缺省 6rem，高度缺省一行字高，放进表格单元格与指标卡都不撑高一行。
+     几何要用的像素值以这里的私有槽为真源：机器挂载后从计算样式读它们，作者覆盖组件槽即改变几何 */
+  [data-scope='sparkline'][data-part='root'] {
+    --xh-_chart-metric-line-width: var(--xh-sparkline-line-width, var(--xh-chart-line-width));
+    --xh-_chart-metric-point-size: var(--xh-sparkline-marker-size, var(--xh-chart-point-size));
+    --xh-_chart-metric-gap: var(--xh-chart-gap);
+    --xh-_chart-metric-bar-max: var(--xh-sparkline-bar-max, var(--xh-chart-bar-max));
+    --xh-_chart-metric-radius: var(--xh-sparkline-bar-radius, var(--xh-shape-inset));
+
+    /* 缺省中性：线与柱退到弱化色，只让标记点取品牌色相的色槽 1，读者先看到「现在在哪」 */
+    --xh-_sparkline-color: var(--xh-sparkline-color, var(--xh-chart-deemphasis));
+    --xh-_sparkline-accent: var(--xh-sparkline-accent-color, var(--xh-chart-categorical-1));
+
+    display: inline-block;
+    inline-size: var(--xh-sparkline-width, 6rem);
+    /* 级联兜底：先写一行的高度算式（正文字号 × 正文行距），再写 1lh。
+       1lh 晚于本库声明的浏览器地板，取不到时旧引擎丢掉后一条、留下前一条。 */
+    block-size: var(--xh-sparkline-height, calc(var(--xh-text-body-size) * var(--xh-text-body-leading)));
+    block-size: var(--xh-sparkline-height, 1lh);
+    /* 高度正好是一个行盒：顶边贴行盒顶边，行高不被撑开；居中对齐会按字的 x 高度再挪半格，行盒就多出一截 */
+    vertical-align: top;
+  }
+
+  /* 写了语气就整条取语气色：颜色本身带好坏含义，线、柱与标记点同色 */
+  [data-scope='sparkline'][data-part='root'][data-tone]:not([data-tone='neutral']) {
+    --xh-_sparkline-color: var(--xh-sparkline-color, var(--xh-_tone));
+    --xh-_sparkline-accent: var(--xh-sparkline-accent-color, var(--xh-_tone));
+  }
+
+  /* 参考带是注释：淡底画在数据之下 */
+  [data-scope='sparkline'][data-part='band'] {
+    fill: var(--xh-sparkline-band-bg, var(--xh-bg-subtle));
+    stroke: none;
+  }
+
+  /* 参考线：读数据的尺子，取标注色的细虚线，压在数据底下 */
+  [data-scope='sparkline'][data-part='reference-line'] {
+    fill: none;
+    stroke: var(--xh-sparkline-reference-color, var(--xh-chart-label));
+    stroke-width: var(--xh-stroke-thin);
+    stroke-dasharray: calc(var(--xh-stroke-thick) * 2) calc(var(--xh-stroke-thick) * 2);
+  }
+
+  [data-scope='sparkline'][data-part='line'] {
+    fill: none;
+    stroke: var(--xh-_sparkline-color);
+    stroke-width: var(--xh-_chart-metric-line-width);
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  /* 面积：线色淡洗，上沿是同一条折线 */
+  [data-scope='sparkline'][data-part='area-fill'] {
+    fill: var(--xh-_sparkline-color);
+    fill-opacity: var(--xh-chart-area-alpha);
+    stroke: none;
+  }
+
+  /* 柱：相邻柱之间的间隙由几何留出，不画描边；标出的那几根换成强调色 */
+  [data-scope='sparkline'][data-part='bar'] {
+    fill: var(--xh-_sparkline-color);
+    stroke: none;
+  }
+
+  [data-scope='sparkline'][data-part='bar'][data-marker] {
+    fill: var(--xh-_sparkline-accent);
+  }
+
+  /* 盈亏：正负各取涨跌色，缺省绿涨红跌，主题覆盖令牌即可对调 */
+  [data-scope='sparkline'][data-part='bar'][data-trend='rise'] {
+    fill: var(--xh-chart-rise);
+  }
+
+  [data-scope='sparkline'][data-part='bar'][data-trend='fall'] {
+    fill: var(--xh-chart-fall);
+  }
+
+  /* 标记点带一圈承载面色的描边环，压在线上也分得开 */
+  [data-scope='sparkline'][data-part='dot'] {
+    fill: var(--xh-_sparkline-accent);
+    stroke: var(--xh-chart-surface);
+    stroke-width: var(--xh-chart-gap);
+  }
+
+  /* 首次出现：折线从头描到尾，连接层在它入场的这一轮写 data-drawing 与 pathLength="1"，过渡结束即撤掉 */
+  [data-scope='sparkline'][data-part='line'][data-drawing] {
+    stroke-dasharray: 1;
+    animation: xh-draw var(--xh-motion-duration-reveal) var(--xh-motion-ease-continuous) both;
+  }
+
+  /* 标记点等描线的笔尖扫到才淡入：连接层写入它占入场时长的比例，乘上入场时长就是延迟 */
+  [data-scope='sparkline'][data-part='dot'][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));
+  }
+
+  /* 减弱动效下折线直接在场，只随过渡淡入。两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='sparkline'][data-part='line'][data-drawing] {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='sparkline'][data-part='line'][data-drawing] {
+    animation: none;
+  }
+
+  /* 强制色：线与柱取系统文字色，标出的点与柱取强调色；面积不铺，参考带只留轮廓；
+     盈亏的正负靠在中线上方还是下方表达，不靠颜色 */
+  @media (forced-colors: active) {
+    [data-scope='sparkline'][data-part='band'] {
+      fill: none;
+      stroke: GrayText;
+      stroke-width: var(--xh-stroke-thin);
+    }
+
+    [data-scope='sparkline'][data-part='reference-line'] {
+      stroke: CanvasText;
+    }
+
+    [data-scope='sparkline'][data-part='line'] {
+      stroke: CanvasText;
+    }
+
+    [data-scope='sparkline'][data-part='area-fill'] {
+      fill: none;
+    }
+
+    [data-scope='sparkline'][data-part='bar'],
+    [data-scope='sparkline'][data-part='bar'][data-trend] {
+      fill: CanvasText;
+    }
+
+    [data-scope='sparkline'][data-part='bar'][data-marker],
+    [data-scope='sparkline'][data-part='dot'] {
+      fill: Highlight;
+    }
+
+    [data-scope='sparkline'][data-part='dot'] {
+      stroke: Canvas;
+    }
+  }
+
+  [data-scope='sparkline'][data-part='root'][hidden] {
+    display: none;
+  }
+}