@xihan-ui/styles 2.0.0 → 3.0.0

package/css/tag.css

@@ -5,6 +5,9 @@
 
 /* 定义 tag 样式。 */
 
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='tag'] {
@@ -31,7 +34,7 @@
     padding-inline: var(--xh-tag-px, var(--xh-_tag-px));
     padding-block: var(--xh-tag-py, var(--xh-_tag-py));
     border: var(--xh-stroke-thin) solid var(--xh-tag-border, var(--xh-material-soft-border));
-    /* 状态 chip 的身份是胶囊（§6.3 pill 只给状态 chip 与一维对象） */
+    /* 状态 chip 的身份是胶囊（pill 只给状态 chip 与一维对象） */
     border-radius: var(--xh-tag-radius, var(--xh-shape-pill));
     background: var(--xh-tag-bg, var(--xh-material-soft-bg));
     box-shadow: var(--xh-tag-shadow, var(--xh-material-soft-shadow));
@@ -51,6 +54,12 @@
     display: none;
   }
 
+  /* 关掉的标签先原地淡出，播完连接层才写 hidden。
+     标签组与选择框的标签行里删掉的那一枚，由列表动效放回原处的替身也是 closed，同一段淡出 */
+  [data-scope='tag'][data-part='root'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
   /* 文字过长时截断，关闭钮才始终留在标签里 */
   [data-scope='tag'][data-part='label'] {
     overflow: hidden;
@@ -81,7 +90,7 @@
     line-height: var(--xh-leading-none);
     cursor: pointer;
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
   }
 
@@ -112,7 +121,7 @@
     transition-timing-function: var(--xh-motion-ease-press);
   }
 
-  /* 按住的叉落着焦点（§9.3 focus-visible + pressed 保留焦点环）：按压面是从字色兑出的 22% 底，
+  /* 按住的叉落着焦点（focus-visible + pressed 保留焦点环）：按压面是从字色兑出的 22% 底，
      压在淡底 / 选中面上把面往字色那头带了一档，默认环与这块混色面在浅色档上只剩 2.2–2.9。
      环改取叉自己的字色：按压面正是从这支色兑出来的，字色压在它上面的对比与字压在标签面上同源，
      六族语气与深浅两态都过 3:1；实心档本来就取字色，这条与它同一口径 */
@@ -161,6 +170,21 @@
     color: var(--xh-tag-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
   }
 
+  /* 实心档是一块彩色面（连接层打 data-xh-ink-surface）：面内的图标与作者内容按这块底取墨色。
+     底色随语气与禁用换，这里跟着换 */
+  [data-scope='tag'][data-part='root'][data-xh-ink-surface] {
+    --xh-ink-surface: var(--xh-tag-bg, var(--xh-bg-brand));
+  }
+
+  [data-scope='tag'][data-part='root'][data-xh-ink-surface][data-tone] {
+    --xh-ink-surface: var(--xh-tag-bg, var(--xh-_tone, var(--xh-bg-brand)));
+  }
+
+  [data-scope='tag'][data-part='root'][data-xh-ink-surface][data-disabled] {
+    /* 置灰面是墨色淡底：选墨只看分量、不看透明度，取它的不透明档 */
+    --xh-ink-surface: var(--xh-tag-bg-disabled, var(--xh-bg-muted-opaque));
+  }
+
   [data-scope='tag'][data-part='root'][data-variant='subtle'] {
     border-color: var(--xh-tag-border, var(--xh-material-soft-border));
     background: var(--xh-tag-bg, var(--xh-material-soft-bg));
@@ -244,17 +268,6 @@
     }
   }
 
-  /*
-   * 高对比档：关闭钮的按压面常态靠从 currentColor 兑出来的底色表出，这一档里底色被统一换成 Canvas，
-   * 按住那一下与静息塌成同一个样子；用系统高亮反色画回来，兜底字形读 currentColor、自己跟着换
-   */
-  @media (forced-colors: active) {
-    [data-scope='tag'][data-part='close-trigger']:not(:disabled):is(:active, [data-pressed]) {
-      background: Highlight;
-      color: HighlightText;
-    }
-  }
-
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
   [data-scope='tag'][data-part='close-trigger']:empty::before {
     content: '';
@@ -266,4 +279,32 @@
     -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
     mask: var(--xh-glyph-mark-close) center / contain no-repeat;
   }
+
+  /*
+   * 高对比档：关闭钮的按压面常态靠从 currentColor 兑出来的底色表出，这一档里底色被统一换成 Canvas，
+   * 按住那一下与静息塌成同一个样子；用系统高亮反色画回来。
+   * 兜底字形是 mask 挖出来的一块底色，同样会被换成 Canvas 而消失：退出强制换色、直接写系统色
+   * （不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）——
+   * 标签面上取 CanvasText，按住时跟着按压面换 HighlightText，禁用取 GrayText
+   */
+  @media (forced-colors: active) {
+    [data-scope='tag'][data-part='close-trigger']:not(:disabled):is(:active, [data-pressed]) {
+      background: Highlight;
+      color: HighlightText;
+    }
+
+    [data-scope='tag'][data-part='close-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='tag'][data-part='close-trigger']:not(:disabled):is(:active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='tag'][data-part='root'][data-disabled] [data-scope='tag'][data-part='close-trigger']:empty::before,
+    [data-scope='tag'][data-part='close-trigger']:disabled:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/tags-input.css

@@ -6,6 +6,8 @@
 /* TagsInput 独立皮肤同时传递引入字段视觉盒与字段内动作；full bundle 递归去重。 */
 @import '../family/field-chrome.css';
 @import '../family/action-control.css';
+/* 标签的进场与退场取共享关键帧。 */
+@import '../family/motion.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -113,6 +115,8 @@
        上限取滚动面最小的那一档，与页面上其它滚动面用同一把尺 */
     max-block-size: var(--xh-tags-input-control-max-h, var(--xh-viewport-h-sm));
     overflow-y: auto;
+    /* 删掉的标签由替身绝对定位在原处播完退场，定位基准是这个框（随框内滚动一起走） */
+    position: relative;
   }
 
   [data-scope='tags-input'][data-part='control'][hidden] {
@@ -137,7 +141,7 @@
 
     /* 撑满剩余宽度由家族的 flex: 1 1 auto 给，这里只换起算宽 */
     flex-basis: var(--xh-tags-input-input-basis, 6rem);
-    min-inline-size: var(--xh-tags-input-input-min-w, 4rem);
+    min-inline-size: var(--xh-tags-input-input-min-w, var(--xh-control-input-min-w));
     /* 行盒收到标签那一行的高度以内，输入框不去顶高整个框 */
     block-size: auto;
     line-height: var(--xh-leading-tight);
@@ -151,6 +155,20 @@
     flex: none;
     align-items: center;
     max-inline-size: 100%;
+    /* 前面的标签增删、其余标签换到新位置时，由列表动效先反向补偿、再沿这条过渡滑过去 */
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* 新落下的标签原地弹出，同一批按到达顺序错开；首帧就在的直接呈现（自己或 control 带 data-instant）。
+     横排胶囊不用竖向上浮：与来源方向不符，还会探出字段外壳的底边 */
+  [data-scope='tags-input'][data-part='item']:not([data-instant], [data-instant] > *) {
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
+    animation-delay: calc(var(--xh-_stagger-index, 0) * var(--xh-motion-stagger-step));
+  }
+
+  /* 删掉的标签：替身留在原处淡出，播完即移除 */
+  [data-scope='tags-input'][data-part='item'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
   [data-scope='tags-input'][data-part='item'][hidden] {
@@ -259,11 +277,11 @@
     mask: var(--xh-glyph-mark-close) center / contain no-repeat;
   }
 
-  /* 计数：排在控件行下面靠尾端的一行小字，与标题分列 root 的两端 */
+  /* 计数：排在控件行下面靠尾端的一行小字，与标题分列 root 的两端。它是次级标注，取说明档字号，不随控件档 */
   [data-scope='tags-input'][data-part='count'] {
     align-self: flex-end;
     color: var(--xh-tags-input-count-fg, var(--xh-fg-muted));
-    font-size: var(--xh-tags-input-count-font-size, var(--xh-_tags-input-item-font-size));
+    font-size: var(--xh-tags-input-count-font-size, var(--xh-text-caption-size));
     font-variant-numeric: tabular-nums;
     line-height: var(--xh-leading-normal);
   }
@@ -282,4 +300,23 @@
   [data-scope='tags-input'][data-part='count'][data-disabled] {
     color: var(--xh-tags-input-count-fg-disabled, var(--xh-fg-disabled));
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='tags-input'][data-part='clear-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='tags-input'][data-part='clear-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='tags-input'][data-part='clear-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/text-field.css

@@ -175,4 +175,23 @@
   [data-scope='text-field'][data-part='count'][data-disabled] {
     color: var(--xh-text-field-count-fg-disabled, var(--xh-fg-disabled));
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='text-field'][data-part='clear-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='text-field'][data-part='clear-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='text-field'][data-part='clear-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/time-field.css

@@ -139,7 +139,7 @@
     /* 触屏上连点两下不该被当成缩放手势 */
     touch-action: manipulation;
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -255,4 +255,23 @@
     white-space: nowrap;
     pointer-events: none;
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='time-field'][data-part='clear-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='time-field'][data-part='clear-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='time-field'][data-part='clear-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/time-picker.css

@@ -63,6 +63,7 @@
     --xh-_time-picker-control-px: var(--xh-control-px-md);
     --xh-_time-picker-gap: var(--xh-control-gap-md);
     --xh-_time-picker-font-size: var(--xh-control-font-md);
+    --xh-_time-picker-item-py: var(--xh-list-option-py-md);
 
     /* 段位强调随语气走：当前段是「当前项」，淡底 + 淡底前景；对号使用普通表面上的前景色。
        没写 data-tone 时这几个 --xh-_tone* 没被声明，退回品牌色 */
@@ -95,6 +96,7 @@
     --xh-_time-picker-control-px: var(--xh-control-px-sm);
     --xh-_time-picker-gap: var(--xh-control-gap-sm);
     --xh-_time-picker-font-size: var(--xh-control-font-sm);
+    --xh-_time-picker-item-py: var(--xh-list-option-py-sm);
   }
 
   [data-scope='time-picker']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
@@ -103,6 +105,7 @@
     --xh-_time-picker-control-px: var(--xh-control-px-lg);
     --xh-_time-picker-gap: var(--xh-control-gap-lg);
     --xh-_time-picker-font-size: var(--xh-control-font-lg);
+    --xh-_time-picker-item-py: var(--xh-list-option-py-lg);
   }
 
   /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
@@ -189,7 +192,7 @@
     /* 段是 role=spinbutton 的展示节点，双击选中一段文字只会碍事 */
     user-select: none;
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -320,9 +323,8 @@
     outline: none;
   }
 
-  [data-scope='time-picker'][data-part='content'][data-state='open'] {
-    /* 只在展开态挂着：随状态属性一起消失，不长期占着合成层 */
-    will-change: opacity, translate;
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='time-picker'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -343,7 +345,7 @@
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    border-inline-end: var(--xh-stroke-thin) solid var(--xh-time-picker-column-divider, var(--xh-material-frosted-separator));
+    border-inline-end: var(--xh-stroke-thin) solid var(--xh-time-picker-column-divider, var(--xh-material-solid-separator));
   }
 
   [data-scope='time-picker'][data-part='preset-group'][hidden] {
@@ -357,7 +359,7 @@
     --xh-collection-block-padding: var(--xh-time-picker-preset-py, var(--xh-space-1));
     --xh-collection-inline-padding: var(--xh-time-picker-preset-px, var(--xh-space-3));
     --xh-collection-font-size: var(--xh-text-secondary-size);
-    --xh-collection-radius: var(--xh-time-picker-preset-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-time-picker-preset-radius, var(--xh-shape-inset));
     /* 面板是实体面（floating），正文取页面前景 */
     --xh-collection-fg-rest: var(--xh-time-picker-preset-fg, var(--xh-fg-default));
     --xh-collection-fg-hover: var(--xh-time-picker-preset-fg, var(--xh-fg-default));
@@ -383,7 +385,7 @@
     /* 对号的末端轨始终留着，切换选中时文字与整列宽度都不移动。 */
     padding-inline-end: calc(
       var(--xh-time-picker-preset-px, var(--xh-space-3))
-      + var(--xh-time-picker-preset-check-size, var(--xh-glyph-size-sm))
+      + var(--xh-time-picker-preset-check-size, var(--xh-control-indicator-size))
       + var(--xh-space-1)
     );
     white-space: nowrap;
@@ -404,8 +406,8 @@
     position: absolute;
     inset-block-start: 50%;
     inset-inline-end: var(--xh-time-picker-preset-px, var(--xh-space-3));
-    inline-size: var(--xh-time-picker-preset-check-size, var(--xh-glyph-size-sm));
-    block-size: var(--xh-time-picker-preset-check-size, var(--xh-glyph-size-sm));
+    inline-size: var(--xh-time-picker-preset-check-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-time-picker-preset-check-size, var(--xh-control-indicator-size));
     background-color: var(--xh-time-picker-preset-check-fg, var(--xh-_time-picker-check-fg));
     opacity: 0;
     translate: 0 -50%;
@@ -452,7 +454,7 @@
 
   /* 每列后面紧跟着它自己的贴层条子节点，相邻选择器接不到下一列，按「前面有过列」取第二列起 */
   [data-scope='time-picker'][data-part='column'] ~ [data-scope='time-picker'][data-part='column'] {
-    border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-picker-column-divider, var(--xh-material-frosted-separator));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-picker-column-divider, var(--xh-material-solid-separator));
   }
 
   /* 焦点落在列上有两种情形：指针打开、这一段还空着、还没有任何格当锚点，或整列被界裁空。
@@ -474,13 +476,13 @@
   [data-scope='time-picker'][data-part='item'] {
     --xh-_time-picker-item-rail: max(
       var(--xh-time-picker-item-px, var(--xh-space-0_5)),
-      calc(var(--xh-time-picker-item-check-size, var(--xh-glyph-size-sm)) + var(--xh-space-0_5))
+      calc(var(--xh-time-picker-item-check-size, var(--xh-control-indicator-size)) + var(--xh-space-0_5))
     );
-    --xh-collection-block-padding: var(--xh-time-picker-item-py, 0);
+    --xh-collection-block-padding: var(--xh-time-picker-item-py, var(--xh-_time-picker-item-py));
     /* 两侧留同宽轨：对号绝对落在末端，数字仍在整格的数学中心。 */
     --xh-collection-inline-padding: var(--xh-_time-picker-item-rail);
     --xh-collection-font-size: var(--xh-time-picker-item-font-size, var(--xh-_time-picker-font-size));
-    --xh-collection-radius: var(--xh-time-picker-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-time-picker-item-radius, var(--xh-shape-inset));
     --xh-collection-fg-rest: var(--xh-time-picker-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-time-picker-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-time-picker-item-fg, var(--xh-material-frosted-fg));
@@ -507,9 +509,9 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    block-size: var(--xh-time-picker-item-h, var(--xh-overlay-column-item-h));
+    block-size: var(--xh-time-picker-item-h, auto);
     /* 居中的单个数字格没有截断层，行高保持紧排，列内多露几格 */
-    line-height: var(--xh-leading-none);
+    line-height: var(--xh-leading-normal);
     white-space: nowrap;
     user-select: none;
   }
@@ -532,8 +534,8 @@
     position: absolute;
     inset-block-start: 50%;
     inset-inline-end: var(--xh-space-0_5);
-    inline-size: var(--xh-time-picker-item-check-size, var(--xh-glyph-size-sm));
-    block-size: var(--xh-time-picker-item-check-size, var(--xh-glyph-size-sm));
+    inline-size: var(--xh-time-picker-item-check-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-time-picker-item-check-size, var(--xh-control-indicator-size));
     background-color: var(--xh-time-picker-item-check-fg, var(--xh-_time-picker-check-fg));
     opacity: 0;
     translate: 0 -50%;
@@ -566,6 +568,12 @@
       forced-color-adjust: none;
     }
 
+    /* 按下与没被高亮时的悬停，家族把条目涂成 Highlight，对号跟着换 HighlightText */
+    [data-scope='time-picker'][data-part='preset']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after,
+    [data-scope='time-picker'][data-part='item']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after {
+      background-color: HighlightText;
+    }
+
     [data-scope='time-picker'][data-part='preset'][data-disabled]::after,
     [data-scope='time-picker'][data-part='item'][data-disabled]::after {
       background-color: GrayText;
@@ -610,6 +618,25 @@
     -webkit-mask: var(--xh-glyph-mark-clock) center / contain no-repeat;
     mask: var(--xh-glyph-mark-clock) center / contain no-repeat;
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='time-picker']:is([data-part='clear-trigger'], [data-part='trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='time-picker']:is([data-part='clear-trigger'], [data-part='trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='time-picker']:is([data-part='clear-trigger'], [data-part='trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }
 
 @layer xihan.motion {

package/css/time-range-picker.css

@@ -70,6 +70,7 @@
     --xh-_time-range-picker-control-px: var(--xh-control-px-md);
     --xh-_time-range-picker-gap: var(--xh-control-gap-md);
     --xh-_time-range-picker-font-size: var(--xh-control-font-md);
+    --xh-_time-range-picker-item-py: var(--xh-list-option-py-md);
 
     /* 段位强调随语气走：当前段是「当前项」，淡底 + 淡底前景；对号使用普通表面上的前景色。
        没写 data-tone 时这几个 --xh-_tone* 没被声明，退回品牌色 */
@@ -102,6 +103,7 @@
     --xh-_time-range-picker-control-px: var(--xh-control-px-sm);
     --xh-_time-range-picker-gap: var(--xh-control-gap-sm);
     --xh-_time-range-picker-font-size: var(--xh-control-font-sm);
+    --xh-_time-range-picker-item-py: var(--xh-list-option-py-sm);
   }
 
   [data-scope='time-range-picker']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
@@ -110,6 +112,7 @@
     --xh-_time-range-picker-control-px: var(--xh-control-px-lg);
     --xh-_time-range-picker-gap: var(--xh-control-gap-lg);
     --xh-_time-range-picker-font-size: var(--xh-control-font-lg);
+    --xh-_time-range-picker-item-py: var(--xh-list-option-py-lg);
   }
 
   /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
@@ -222,7 +225,7 @@
     /* 段是 role=spinbutton 的展示节点，双击选中一段文字只会碍事 */
     user-select: none;
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -359,9 +362,8 @@
     outline: none;
   }
 
-  [data-scope='time-range-picker'][data-part='content'][data-state='open'] {
-    /* 只在展开态挂着：随状态属性一起消失，不长期占着合成层 */
-    will-change: opacity, translate;
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='time-range-picker'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -382,7 +384,7 @@
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    border-inline-end: var(--xh-stroke-thin) solid var(--xh-time-range-picker-column-divider, var(--xh-material-frosted-separator));
+    border-inline-end: var(--xh-stroke-thin) solid var(--xh-time-range-picker-column-divider, var(--xh-material-solid-separator));
   }
 
   [data-scope='time-range-picker'][data-part='preset-group'][hidden] {
@@ -396,7 +398,7 @@
     --xh-collection-block-padding: var(--xh-time-range-picker-preset-py, var(--xh-space-1));
     --xh-collection-inline-padding: var(--xh-time-range-picker-preset-px, var(--xh-space-3));
     --xh-collection-font-size: var(--xh-text-secondary-size);
-    --xh-collection-radius: var(--xh-time-range-picker-preset-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-time-range-picker-preset-radius, var(--xh-shape-inset));
     /* 面板是实体面（floating），正文取页面前景 */
     --xh-collection-fg-rest: var(--xh-time-range-picker-preset-fg, var(--xh-fg-default));
     --xh-collection-fg-hover: var(--xh-time-range-picker-preset-fg, var(--xh-fg-default));
@@ -422,7 +424,7 @@
     /* 对号的末端轨始终留着，切换选中时文字与整列宽度都不移动。 */
     padding-inline-end: calc(
       var(--xh-time-range-picker-preset-px, var(--xh-space-3))
-      + var(--xh-time-range-picker-preset-check-size, var(--xh-glyph-size-sm))
+      + var(--xh-time-range-picker-preset-check-size, var(--xh-control-indicator-size))
       + var(--xh-space-1)
     );
     white-space: nowrap;
@@ -443,8 +445,8 @@
     position: absolute;
     inset-block-start: 50%;
     inset-inline-end: var(--xh-time-range-picker-preset-px, var(--xh-space-3));
-    inline-size: var(--xh-time-range-picker-preset-check-size, var(--xh-glyph-size-sm));
-    block-size: var(--xh-time-range-picker-preset-check-size, var(--xh-glyph-size-sm));
+    inline-size: var(--xh-time-range-picker-preset-check-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-time-range-picker-preset-check-size, var(--xh-control-indicator-size));
     background-color: var(--xh-time-range-picker-preset-check-fg, var(--xh-_time-range-picker-check-fg));
     opacity: 0;
     translate: 0 -50%;
@@ -499,7 +501,7 @@
   [data-scope='time-range-picker'][data-part='column-group'] + [data-scope='time-range-picker'][data-part='column-group'] {
     margin-inline-start: var(--xh-time-range-picker-column-group-gap, var(--xh-space-2));
     padding-inline-start: var(--xh-time-range-picker-column-group-gap, var(--xh-space-2));
-    border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-range-picker-column-group-divider, var(--xh-material-frosted-separator));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-range-picker-column-group-divider, var(--xh-material-solid-separator));
   }
 
   /* 组顶上的小标题：独占一行，字号走辅助文本档 */
@@ -548,7 +550,7 @@
 
   /* 每列后面紧跟着它自己的贴层条子节点，相邻选择器接不到下一列，按「前面有过列」取第二列起 */
   [data-scope='time-range-picker'][data-part='column'] ~ [data-scope='time-range-picker'][data-part='column'] {
-    border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-range-picker-column-divider, var(--xh-material-frosted-separator));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-range-picker-column-divider, var(--xh-material-solid-separator));
   }
 
   /* 焦点落在列上有两种情形：指针打开、这一段还空着、还没有任何格当锚点，或整列被界裁空。
@@ -570,13 +572,13 @@
   [data-scope='time-range-picker'][data-part='item'] {
     --xh-_time-range-picker-item-rail: max(
       var(--xh-time-range-picker-item-px, var(--xh-space-0_5)),
-      calc(var(--xh-time-range-picker-item-check-size, var(--xh-glyph-size-sm)) + var(--xh-space-0_5))
+      calc(var(--xh-time-range-picker-item-check-size, var(--xh-control-indicator-size)) + var(--xh-space-0_5))
     );
-    --xh-collection-block-padding: var(--xh-time-range-picker-item-py, 0);
+    --xh-collection-block-padding: var(--xh-time-range-picker-item-py, var(--xh-_time-range-picker-item-py));
     /* 两侧留同宽轨：对号绝对落在末端，数字仍在整格的数学中心。 */
     --xh-collection-inline-padding: var(--xh-_time-range-picker-item-rail);
     --xh-collection-font-size: var(--xh-time-range-picker-item-font-size, var(--xh-_time-range-picker-font-size));
-    --xh-collection-radius: var(--xh-time-range-picker-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-time-range-picker-item-radius, var(--xh-shape-inset));
     --xh-collection-fg-rest: var(--xh-time-range-picker-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-time-range-picker-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-time-range-picker-item-fg, var(--xh-material-frosted-fg));
@@ -603,9 +605,9 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    block-size: var(--xh-time-range-picker-item-h, var(--xh-overlay-column-item-h));
+    block-size: var(--xh-time-range-picker-item-h, auto);
     /* 居中的单个数字格没有截断层，行高保持紧排，列内多露几格 */
-    line-height: var(--xh-leading-none);
+    line-height: var(--xh-leading-normal);
     white-space: nowrap;
     user-select: none;
   }
@@ -628,8 +630,8 @@
     position: absolute;
     inset-block-start: 50%;
     inset-inline-end: var(--xh-space-0_5);
-    inline-size: var(--xh-time-range-picker-item-check-size, var(--xh-glyph-size-sm));
-    block-size: var(--xh-time-range-picker-item-check-size, var(--xh-glyph-size-sm));
+    inline-size: var(--xh-time-range-picker-item-check-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-time-range-picker-item-check-size, var(--xh-control-indicator-size));
     background-color: var(--xh-time-range-picker-item-check-fg, var(--xh-_time-range-picker-check-fg));
     opacity: 0;
     translate: 0 -50%;
@@ -662,6 +664,12 @@
       forced-color-adjust: none;
     }
 
+    /* 按下与没被高亮时的悬停，家族把条目涂成 Highlight，对号跟着换 HighlightText */
+    [data-scope='time-range-picker'][data-part='preset']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after,
+    [data-scope='time-range-picker'][data-part='item']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after {
+      background-color: HighlightText;
+    }
+
     [data-scope='time-range-picker'][data-part='preset'][data-disabled]::after,
     [data-scope='time-range-picker'][data-part='item'][data-disabled]::after {
       background-color: GrayText;
@@ -706,6 +714,25 @@
     -webkit-mask: var(--xh-glyph-mark-clock) center / contain no-repeat;
     mask: var(--xh-glyph-mark-clock) center / contain no-repeat;
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='time-range-picker']:is([data-part='clear-trigger'], [data-part='trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='time-range-picker']:is([data-part='clear-trigger'], [data-part='trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='time-range-picker']:is([data-part='clear-trigger'], [data-part='trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }
 
 @layer xihan.motion {

package/css/timeline.css

@@ -107,7 +107,7 @@
     /* 语气色由每条自己的数据给，同一条的语气改了（事情办成了、出错了）走一遍过渡，
        整列圆点不在数据回来的那一帧集体跳色 */
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }