@xihan-ui/styles 1.0.0 → 2.0.0

package/css/timeline.css

@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 timeline 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='timeline'] {
@@ -34,8 +41,11 @@
     flex-direction: column;
   }
 
+  /* 横排排成一行、允许折行：窄档里每条占满整行，于是一条一行地堆下来。
+     朝向两档都是 row，换档换的是下面每条的 flex 基准 */
   [data-scope='timeline'][data-part='root'][data-orientation='horizontal'] {
     flex-direction: row;
+    flex-wrap: wrap;
   }
 
   /* —— 尺寸 —— */
@@ -57,10 +67,13 @@
   }
 
   /* —— 条目 —— */
-  /* 圆点与连线占一列（横排时占一行），内容占另一列，用 grid 而不是再包一层节点：
-     解剖里没有那个包裹层，作者也不该被逼着多写一个 div */
+  /* 圆点与连线占一列，内容占另一列，用 grid 而不是再包一层节点：
+     解剖里没有那个包裹层，作者也不该被逼着多写一个 div。
+     这份两列的摆法是两个朝向共同的窄档，横排在下面的宽档里改写它 */
   [data-scope='timeline'][data-part='item'] {
     display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
     column-gap: var(--xh-timeline-gutter, var(--xh-_timeline-gutter));
     /* 库里没有全局 preflight，列表项的外边距在这里自己抹平 */
     margin: 0;
@@ -72,16 +85,9 @@
     display: none;
   }
 
-  [data-scope='timeline'][data-part='item'][data-orientation='vertical'] {
-    grid-template-columns: auto minmax(0, 1fr);
-    grid-template-rows: auto minmax(0, 1fr);
-  }
-
-  /* 横排时每条等分整行 */
+  /* 横排的窄档：每条占满整行，一条一行地堆下来 */
   [data-scope='timeline'][data-part='item'][data-orientation='horizontal'] {
-    grid-template-columns: auto minmax(0, 1fr);
-    grid-template-rows: auto minmax(0, 1fr);
-    flex: 1;
+    flex: 0 0 100%;
   }
 
   /* —— 圆点 —— */
@@ -92,19 +98,24 @@
     justify-content: center;
     inline-size: var(--xh-timeline-indicator-size, var(--xh-_timeline-dot-size));
     block-size: var(--xh-timeline-indicator-size, var(--xh-_timeline-dot-size));
-    border-radius: var(--xh-timeline-indicator-radius, var(--xh-shape-pill));
+    border-radius: var(--xh-timeline-indicator-radius, var(--xh-shape-circle));
     /* 使用者令牌排在语气之前；两者都没有时退回一个中性的实心点 */
     background: var(--xh-timeline-indicator-bg, var(--xh-_tone-soft, var(--xh-fg-muted)));
     color: var(--xh-timeline-indicator-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
     font-size: var(--xh-timeline-indicator-font-size, var(--xh-_timeline-caption-font-size));
     line-height: var(--xh-leading-none);
+    /* 语气色由每条自己的数据给，同一条的语气改了（事情办成了、出错了）走一遍过渡，
+       整列圆点不在数据回来的那一帧集体跳色 */
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='timeline'][data-part='indicator'][hidden] {
     display: none;
   }
 
-  [data-scope='timeline'][data-part='item'][data-orientation='vertical'] [data-scope='timeline'][data-part='indicator'] {
+  [data-scope='timeline'][data-part='item'] [data-scope='timeline'][data-part='indicator'] {
     grid-column: 1;
     grid-row: 1;
     /* 行高减去直径的一半：calc 里的除法要写成乘 0.5，除号在这儿是无效语法 */
@@ -113,11 +124,6 @@
     );
   }
 
-  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'] [data-scope='timeline'][data-part='indicator'] {
-    grid-column: 1;
-    grid-row: 1;
-  }
-
   /* —— 连线 —— */
   [data-scope='timeline'][data-part='connector'] {
     border-radius: var(--xh-timeline-connector-radius, var(--xh-shape-pill));
@@ -128,9 +134,9 @@
     display: none;
   }
 
-  /* 竖排：从圆点下沿一直伸到条目底边，接上下一条的圆点。
+  /* 堆叠时：从圆点下沿一直伸到条目底边，接上下一条的圆点。
      min-block-size 兜住内容极短的条目，那时也还看得见一截线 */
-  [data-scope='timeline'][data-part='item'][data-orientation='vertical'] [data-scope='timeline'][data-part='connector'] {
+  [data-scope='timeline'][data-part='item'] [data-scope='timeline'][data-part='connector'] {
     grid-column: 1;
     grid-row: 2;
     justify-self: center;
@@ -139,16 +145,6 @@
     margin-block-start: var(--xh-space-1);
   }
 
-  /* 横排：线转成横的一条，与圆点同一行 */
-  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'] [data-scope='timeline'][data-part='connector'] {
-    grid-column: 2;
-    grid-row: 1;
-    align-self: center;
-    min-inline-size: var(--xh-timeline-connector-min-length, var(--xh-space-4));
-    block-size: var(--xh-timeline-connector-thickness, var(--xh-stroke-thick));
-    margin-inline-start: var(--xh-space-1);
-  }
-
   /* 末条后面没有下一件事，那截线不该占地方；作者不写它也一样，写了就替他收掉 */
   [data-scope='timeline'][data-part='item']:last-child [data-scope='timeline'][data-part='connector'] {
     display: none;
@@ -167,28 +163,17 @@
   }
 
   /* 条目之间的留白由内容自己的边距撑出来，连线的那一列因此能一路连到下一条 */
-  [data-scope='timeline'][data-part='item'][data-orientation='vertical'] [data-scope='timeline'][data-part='content'] {
+  [data-scope='timeline'][data-part='item'] [data-scope='timeline'][data-part='content'] {
     grid-column: 2;
     grid-row: 1 / -1;
     padding-block-end: var(--xh-timeline-item-gap, var(--xh-_timeline-item-gap));
   }
 
-  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'] [data-scope='timeline'][data-part='content'] {
-    grid-column: 1 / -1;
-    grid-row: 2;
-    padding-block-start: var(--xh-timeline-content-pt, var(--xh-space-2));
-    padding-inline-end: var(--xh-timeline-item-gap, var(--xh-_timeline-item-gap));
-  }
-
   /* 末条的留白同样收掉：它后面已经没有要隔开的东西 */
-  [data-scope='timeline'][data-part='item'][data-orientation='vertical']:last-child [data-scope='timeline'][data-part='content'] {
+  [data-scope='timeline'][data-part='item']:last-child [data-scope='timeline'][data-part='content'] {
     padding-block-end: 0;
   }
 
-  [data-scope='timeline'][data-part='item'][data-orientation='horizontal']:last-child [data-scope='timeline'][data-part='content'] {
-    padding-inline-end: 0;
-  }
-
   /* —— 侧别 —— */
   /* 不写 placement 时内容落在结束侧，即上面那几条基础规则。
      start 把线挪到结束侧、内容挪到起始侧，文字一并靠向线 */
@@ -227,45 +212,179 @@
     text-align: end;
   }
 
-  /* 横排的 start 是把内容挪到线的上方，内容贴着线的那一边对齐 */
-  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='start'] {
-    grid-template-rows: minmax(0, 1fr) auto;
+  /* —— 坐标 —— */
+  /* 与内容对置的那一列。竖排三种侧别各给它一条轨道，横排不单开轨道、按流排在末尾 */
+  [data-scope='timeline'][data-part='label'] {
+    grid-column: var(--xh-_timeline-label-col, auto);
+    grid-row: var(--xh-_timeline-label-row, auto);
+    align-self: start;
+    min-inline-size: 0;
+    color: var(--xh-timeline-label-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-timeline-label-font-size, var(--xh-_timeline-caption-font-size));
+    /* 等宽数字：日期里的 1 与 7 在比例字体里宽度不同，不定住会让整列坐标左右抖一格 */
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-leading-tight);
+    text-align: var(--xh-_timeline-label-align, end);
   }
 
-  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='start'] [data-scope='timeline'][data-part='indicator'],
-  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='start'] [data-scope='timeline'][data-part='connector'] {
-    grid-row: 2;
+  /* 内容落在结束侧时坐标占线之前的那一列，圆点与连线让到第二列 */
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical']:where(:not([data-placement]), [data-placement='end']):has(> [data-scope='timeline'][data-part='label']) {
+    --xh-_timeline-label-col: 1;
+    --xh-_timeline-label-row: 1;
+
+    grid-template-columns: auto auto minmax(0, 1fr);
   }
 
-  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='start'] [data-scope='timeline'][data-part='content'] {
-    grid-row: 1;
-    align-self: end;
-    padding-block-start: 0;
-    padding-block-end: var(--xh-timeline-content-pb, var(--xh-space-2));
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical']:where(:not([data-placement]), [data-placement='end']):has(> [data-scope='timeline'][data-part='label']) > [data-scope='timeline'][data-part='indicator'],
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical']:where(:not([data-placement]), [data-placement='end']):has(> [data-scope='timeline'][data-part='label']) > [data-scope='timeline'][data-part='connector'] {
+    grid-column: 2;
   }
 
-  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='alternate'] {
-    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical']:where(:not([data-placement]), [data-placement='end']):has(> [data-scope='timeline'][data-part='label']) > [data-scope='timeline'][data-part='content'] {
+    grid-column: 3;
   }
 
-  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='alternate'] [data-scope='timeline'][data-part='indicator'],
-  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='alternate'] [data-scope='timeline'][data-part='connector'] {
-    grid-row: 2;
+  /* 横排的窄档摆成上下两格，坐标照竖排那样占线之前的一列。
+     不给这条轨道的话坐标会自动落进圆点那一列，把它撑宽，圆点与连线因此错开 */
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal']:has(> [data-scope='timeline'][data-part='label']) {
+    --xh-_timeline-label-col: 1;
+    --xh-_timeline-label-row: 1;
+
+    grid-template-columns: auto auto minmax(0, 1fr);
   }
 
-  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='alternate'] [data-scope='timeline'][data-part='content'] {
-    grid-row: 3;
-    align-self: start;
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal']:has(> [data-scope='timeline'][data-part='label']) > [data-scope='timeline'][data-part='indicator'],
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal']:has(> [data-scope='timeline'][data-part='label']) > [data-scope='timeline'][data-part='connector'] {
+    grid-column: 2;
   }
 
-  [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='alternate']:nth-child(even) [data-scope='timeline'][data-part='content'] {
-    grid-row: 1;
-    align-self: end;
-    padding-block-start: 0;
-    padding-block-end: var(--xh-timeline-content-pb, var(--xh-space-2));
+  [data-scope='timeline'][data-part='item'][data-orientation='horizontal']:has(> [data-scope='timeline'][data-part='label']) > [data-scope='timeline'][data-part='content'] {
+    grid-column: 3;
+  }
+
+  /* 内容落在起始侧时坐标占线之后的那一列 */
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical'][data-placement='start']:has(> [data-scope='timeline'][data-part='label']) {
+    --xh-_timeline-label-col: 3;
+    --xh-_timeline-label-row: 1;
+    --xh-_timeline-label-align: start;
+
+    grid-template-columns: minmax(0, 1fr) auto auto;
+  }
+
+  /* 逐条交替时坐标恒在内容的对面，时间戳因此不跟着内容左右横跳 */
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical'][data-placement='alternate'] {
+    --xh-_timeline-label-col: 1;
+    --xh-_timeline-label-row: 1;
+  }
+
+  [data-scope='timeline'][data-part='item'][data-orientation='vertical'][data-placement='alternate']:nth-child(even) {
+    --xh-_timeline-label-col: 3;
+    --xh-_timeline-label-align: start;
+  }
+
+  /* —— 横排的宽档 —— */
+  /* 上面那份两列的摆法是两个朝向共同的窄档。视口宽到放得下一行事件时，
+     横排在这里把圆点与连线转回同一行、内容落到下一行。
+     手机档停在窄档：一条一行，事件仍逐条读得完 */
+  @media (min-width: 768px) {
+    /* 每条等分整行 */
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal'] {
+      flex: 1;
+    }
+
+    /* 每条规则都带一条 :has(坐标) 的分支：窄档那条坐标轨道的选择器更重，
+       不把它写进来的话带坐标的那些条目会停在窄档的摆法上 */
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal'] [data-scope='timeline'][data-part='indicator'],
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal']:has(> [data-scope='timeline'][data-part='label']) > [data-scope='timeline'][data-part='indicator'] {
+      grid-column: 1;
+      grid-row: 1;
+      /* 圆点与内容不再上下对位，窄档那半行的下移收掉 */
+      margin-block-start: 0;
+    }
+
+    /* 线转成横的一条，与圆点同一行；窄档那几条竖着走的取值一并收掉 */
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal'] [data-scope='timeline'][data-part='connector'],
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal']:has(> [data-scope='timeline'][data-part='label']) > [data-scope='timeline'][data-part='connector'] {
+      grid-column: 2;
+      grid-row: 1;
+      align-self: center;
+      justify-self: stretch;
+      inline-size: auto;
+      min-inline-size: var(--xh-timeline-connector-min-length, var(--xh-space-4));
+      block-size: var(--xh-timeline-connector-thickness, var(--xh-stroke-thick));
+      min-block-size: 0;
+      margin-block-start: 0;
+      margin-inline-start: var(--xh-space-1);
+    }
+
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal'] [data-scope='timeline'][data-part='content'],
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal']:has(> [data-scope='timeline'][data-part='label']) > [data-scope='timeline'][data-part='content'] {
+      grid-column: 1 / -1;
+      grid-row: 2;
+      padding-block-start: var(--xh-timeline-content-pt, var(--xh-space-2));
+      padding-block-end: 0;
+      padding-inline-end: var(--xh-timeline-item-gap, var(--xh-_timeline-item-gap));
+    }
+
+    /* 末条的留白同样收掉：它后面已经没有要隔开的东西 */
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal']:last-child [data-scope='timeline'][data-part='content'] {
+      padding-inline-end: 0;
+    }
+
+    /* 宽档不给坐标单开轨道，它按流排在末尾；窄档那条轨道在这里收掉 */
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal']:has(> [data-scope='timeline'][data-part='label']) {
+      --xh-_timeline-label-col: auto;
+      --xh-_timeline-label-row: auto;
+
+      grid-template-columns: auto minmax(0, 1fr);
+    }
+
+    /* 横排的 start 是把内容挪到线的上方，内容贴着线的那一边对齐 */
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='start'] {
+      grid-template-rows: minmax(0, 1fr) auto;
+    }
+
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='start'] [data-scope='timeline'][data-part='indicator'],
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='start'] [data-scope='timeline'][data-part='connector'] {
+      grid-row: 2;
+    }
+
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='start'] [data-scope='timeline'][data-part='content'] {
+      grid-row: 1;
+      align-self: end;
+      padding-block-start: 0;
+      padding-block-end: var(--xh-timeline-content-pb, var(--xh-space-2));
+    }
+
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='alternate'] {
+      grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
+    }
+
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='alternate'] [data-scope='timeline'][data-part='indicator'],
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='alternate'] [data-scope='timeline'][data-part='connector'] {
+      grid-row: 2;
+    }
+
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='alternate'] [data-scope='timeline'][data-part='content'] {
+      grid-row: 3;
+      align-self: start;
+    }
+
+    [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='alternate']:nth-child(even) [data-scope='timeline'][data-part='content'] {
+      grid-row: 1;
+      align-self: end;
+      padding-block-start: 0;
+      padding-block-end: var(--xh-timeline-content-pb, var(--xh-space-2));
+    }
   }
 
   /* —— 文字 —— */
+  /* 中间没有断点的长串——单号、路径、无空格的标识——在框内断开。
+     每条的宽度由内容的最小宽度定，断不开就会把整条轴顶出容器 */
+  [data-scope='timeline']:is([data-part='title'], [data-part='description'], [data-part='time'], [data-part='label']) {
+    overflow-wrap: anywhere;
+  }
+
   [data-scope='timeline'][data-part='title'] {
     color: var(--xh-timeline-title-fg, var(--xh-fg-default));
     font-size: var(--xh-timeline-title-font-size, var(--xh-_timeline-title-font-size));
@@ -275,7 +394,7 @@
 
   [data-scope='timeline'][data-part='description'] {
     color: var(--xh-timeline-description-fg, var(--xh-fg-muted));
-    font-size: var(--xh-timeline-description-font-size, var(--xh-text-body-size));
+    font-size: var(--xh-timeline-description-font-size, var(--xh-text-secondary-size));
     line-height: var(--xh-leading-normal);
   }
 
@@ -286,4 +405,19 @@
     font-variant-numeric: tabular-nums;
     line-height: var(--xh-leading-normal);
   }
+
+  /*
+   * 打印：底色被丢掉，圆点与连线整个是底色画出来的，纸上这条轴的骨架就此不见，
+   * 只剩几段没有次序的文字。两处都改由描边承载：圆点成一个空心圈，
+   * 连线的两条边合起来就是那条线（线本身只有一个描边厚，两边各画一半正好填满）。
+   */
+  @media print {
+    [data-scope='timeline'][data-part='indicator'] {
+      border: var(--xh-stroke-thick) solid currentColor;
+    }
+
+    [data-scope='timeline'][data-part='connector'] {
+      border: var(--xh-stroke-thin) solid currentColor;
+    }
+  }
 }

package/css/timer.css

@@ -1,16 +1,24 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 timer 样式。 */
+
+/* Timer 独立皮肤同时传递引入起停钮的动作控件配方；full bundle 递归去重。 */
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='timer'] {
     --xh-timer-skin: 1;
   }
 
-  /* 三个尺寸档只换这几个私有槽，各部件从 root 继承它们，换档不必给每个部件各写一条选择器 */
+  /* 三个尺寸档只换这两个私有槽，各部件从 root 继承它们，换档不必给每个部件各写一条选择器；
+     起停钮的档位由连接层直接投给家族，这里不再中转 */
   [data-scope='timer'][data-part='root'] {
     --xh-_timer-digit-size: var(--xh-text-heading-2-size);
     --xh-_timer-gap: var(--xh-space-3);
-    --xh-_timer-control-h: var(--xh-control-h-md);
-    --xh-_timer-control-px: var(--xh-control-px-md);
-    --xh-_timer-control-gap: var(--xh-control-gap-md);
 
     display: inline-flex;
     align-items: center;
@@ -27,43 +35,48 @@
   [data-scope='timer'][data-part='root'][data-size='sm'] {
     --xh-_timer-digit-size: var(--xh-text-heading-3-size);
     --xh-_timer-gap: var(--xh-space-2);
-    --xh-_timer-control-h: var(--xh-control-h-sm);
-    --xh-_timer-control-px: var(--xh-control-px-sm);
-    --xh-_timer-control-gap: var(--xh-control-gap-sm);
   }
 
   [data-scope='timer'][data-part='root'][data-size='lg'] {
     --xh-_timer-digit-size: var(--xh-text-heading-1-size);
     --xh-_timer-gap: var(--xh-space-4);
-    --xh-_timer-control-h: var(--xh-control-h-lg);
-    --xh-_timer-control-px: var(--xh-control-px-lg);
-    --xh-_timer-control-gap: var(--xh-control-gap-lg);
   }
 
   /* —— 时间区 —— */
   /* 等宽数字：逐位宽度一致，秒数换位时分隔符与后面的段都不会左右挪动。
      direction 钉成 ltr：每段是一个独立的 flex 项，主轴方向跟着文字方向走，
      不钉住的话 rtl 页面上时分秒会整体倒过来排——时间串的读序两个方向都一样。 */
-  [data-scope='timer'][data-part='area'] {
+  [data-scope='timer'][data-part='display'] {
     display: inline-flex;
     align-items: baseline;
     direction: ltr;
-    color: var(--xh-timer-area-fg, var(--xh-fg-default));
+    color: var(--xh-timer-display-fg, var(--xh-fg-default));
+    /* 嵌在一句话里或摆在别人的数值槽里时把 --xh-timer-digit-font-size 写成 inherit，
+       数字就跟着上下文的字号走，不再自带展示档字号 */
     font-size: var(--xh-timer-digit-font-size, var(--xh-_timer-digit-size));
     font-variant-numeric: tabular-nums;
     font-weight: var(--xh-font-weight-semibold);
     line-height: var(--xh-leading-tight);
+    /* 走到点那一刻前景退一档，这里让它淡过去而不是硬跳 */
+    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  [data-scope='timer'][data-part='area'][hidden] {
+  [data-scope='timer'][data-part='display'][hidden] {
     display: none;
   }
 
   /* 走完之后这串数字不再是活的信息，退一档；暂停在半路的仍是要盯着看的数，不退 */
-  [data-scope='timer'][data-part='area'][data-state='completed'] {
+  [data-scope='timer'][data-part='display'][data-state='completed'] {
     color: var(--xh-timer-completed-fg, var(--xh-fg-muted));
   }
 
+  /* 数字段自己一个前景槽，与记号那个成对。
+     缺省是 inherit 而不是某个具体前景：时间区走完会整体退一档，
+     数字段照着继承下来才跟得上，写死取值就跟不动了 */
+  [data-scope='timer'][data-part='item'] {
+    color: var(--xh-timer-item-fg, inherit);
+  }
+
   /* 记号只是排版，比数字弱一档、两侧留一点气口 */
   [data-scope='timer'][data-part='separator'] {
     padding-inline: var(--xh-timer-separator-px, var(--xh-space-0_5));
@@ -71,49 +84,40 @@
     font-weight: var(--xh-font-weight-regular);
   }
 
-  /* —— 起停按钮 —— */
+  /* —— 起停按钮 ——
+     带文案（或图标）的离散动作钮：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、禁用面全由
+     Action Control 的 text outline 档给（连接层按 size 投档，缺省 md 一个控件高），组件只映射既有使用者槽。
+     中性描边、透明底；白底承载 hover 100 → pressed 200，不抬升；焦点边由家族给，不随语气 */
   [data-scope='timer'][data-part='control'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--xh-timer-control-gap, var(--xh-_timer-control-gap));
-    block-size: var(--xh-timer-control-h, var(--xh-_timer-control-h));
-    padding-inline: var(--xh-timer-control-px, var(--xh-_timer-control-px));
-    border: var(--xh-stroke-thin) solid var(--xh-timer-control-border, var(--xh-border-control));
-    border-radius: var(--xh-timer-control-radius, var(--xh-shape-control));
-    background: var(--xh-timer-control-bg, var(--xh-bg-surface));
-    color: var(--xh-timer-control-fg, var(--xh-fg-default));
-    font-size: var(--xh-text-label-size);
+    --xh-action-visual-size: var(--xh-timer-control-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-timer-control-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-gap: var(--xh-timer-control-gap, var(--xh-_action-profile-gap));
+    --xh-action-radius: var(--xh-timer-control-radius, var(--xh-shape-control));
+    --xh-action-bg-rest: var(--xh-timer-control-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-timer-control-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-timer-control-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-disabled: var(--xh-timer-control-bg-disabled, var(--xh-_action-variant-bg-disabled));
+    --xh-action-fg-rest: var(--xh-timer-control-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-timer-control-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-timer-control-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-border-rest: var(--xh-timer-control-border, var(--xh-_action-variant-border-rest));
+    --xh-action-border-hover: var(--xh-timer-control-border-hover, var(--xh-_action-variant-border-hover));
+    --xh-action-border-pressed: var(--xh-timer-control-border-hover, var(--xh-_action-variant-border-pressed));
+    --xh-action-border-focus-visible: var(--xh-timer-control-border-focus, var(--xh-_action-variant-border-focus-visible));
+    --xh-action-border-disabled: var(--xh-timer-control-border-disabled, var(--xh-_action-variant-border-disabled));
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: none;
+    --xh-action-shadow-hover: var(--xh-timer-control-shadow-hover, none);
+    --xh-action-shadow-pressed: var(--xh-timer-control-shadow-active, none);
+    --xh-action-font-size: var(--xh-text-label-size);
+    /* 作者塞进钮里的图标按档取字形尺寸，与文案同一把尺 */
+    --xh-icon-size: var(--xh-timer-icon-size, var(--xh-_action-profile-glyph-size));
+
     font-weight: var(--xh-text-label-weight);
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
+  /* 家族那条 display 会把 UA 的 [hidden]{display:none} 盖掉，作者收起它时要的是这一条 */
   [data-scope='timer'][data-part='control'][hidden] {
     display: none;
   }
-
-  [data-scope='timer'][data-part='control']:hover {
-    border-color: var(--xh-timer-control-border-hover, var(--xh-border-control-hover));
-    background: var(--xh-timer-control-bg-hover, var(--xh-bg-subtle-hover));
-  }
-
-  [data-scope='timer'][data-part='control']:active {
-    background: var(--xh-timer-control-bg-active, var(--xh-bg-subtle-active));
-  }
-
-  [data-scope='timer'][data-part='control']:focus-visible {
-    border-color: var(--xh-timer-control-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  /* 作者把按钮禁掉时的样子。文字改用 fg-disabled 就不再叠 opacity，两条一起上会掉到读不出来 */
-  [data-scope='timer'][data-part='control']:disabled {
-    border-color: var(--xh-timer-control-border-disabled, var(--xh-border-subtle));
-    background: var(--xh-timer-control-bg-disabled, var(--xh-bg-muted));
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
-  }
 }

package/css/timestamp.css

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 timestamp 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='timestamp'] {
+    --xh-timestamp-skin: 1;
+  }
+
+  [data-scope='timestamp'][data-part='root'] {
+    color: var(--xh-timestamp-fg, var(--xh-fg-default));
+    /* 等宽数字：秒数跳动时后面的字符不会左右挪 */
+    font-variant-numeric: tabular-nums;
+    /* 一个时间戳不该被拆到两行去 */
+    white-space: nowrap;
+    /* 时刻换成认不出的值时前景要换档，这里让它淡过去而不是硬跳 */
+    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 相对说法是一句话不是一串数字，等宽数字反而把字距拉开 */
+  [data-scope='timestamp'][data-part='root'][data-relative] {
+    font-variant-numeric: normal;
+  }
+
+  /* 没给时刻、或给了认不出的时刻：这时显示的是作者写在节点里的兜底文案，退成弱前景 */
+  [data-scope='timestamp'][data-part='root'][data-state='empty'],
+  [data-scope='timestamp'][data-part='root'][data-state='invalid'] {
+    color: var(--xh-timestamp-placeholder-fg, var(--xh-fg-muted));
+  }
+}