@xihan-ui/styles 2.1.0 → 3.1.0

package/css/time-picker.css

@@ -12,6 +12,7 @@
 
 /* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
 @import '../family/motion.css';
+@import '../family/tag-list.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -63,6 +64,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 +97,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 +106,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}，收起态得自己还回去 */
@@ -173,6 +177,27 @@
     display: none;
   }
 
+  /* 多选的标签行：段位让位，选中的时刻在盒里排成标签，超过 maxTagCount 的折进 +N。
+     行里每一枚都是 tag（data-scope="tag"），样子归 tag.css；行怎么排、标签怎么进出归标签行家族配方。
+     基准取 0：只吃两颗钮剩下的宽度、在自己里面折行；按内容宽算基准的话，盒子会先在钮前面折行，把钮挤到最后一行 */
+  [data-scope='time-picker'][data-part='tag-list'] {
+    --xh-tag-list-gap: var(--xh-time-picker-tag-list-gap, var(--xh-space-1));
+
+    flex: 1 1 0;
+    flex-wrap: wrap;
+  }
+
+  /* 时刻标签是定长文字，截短了就读不出是几点：不收缩，排不下就折到下一行（与标签输入同一种排法），
+     盒随行数长高（字段家族的 multi-tag 布局给），到上限后在盒内滚动 */
+  [data-scope='time-picker'][data-part='tag-list'] > [data-scope='tag'][data-part='root'] {
+    flex: none;
+  }
+
+  [data-scope='time-picker'][data-part='control'][data-xh-field-layout='multi-tag'] {
+    max-block-size: var(--xh-time-picker-control-max-h, var(--xh-viewport-h-sm));
+    overflow-y: auto;
+  }
+
   [data-scope='time-picker'][data-part='segment-group'] > :not([data-scope]) {
     color: var(--xh-time-picker-literal-fg, var(--xh-fg-subtle));
   }
@@ -189,7 +214,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);
   }
 
@@ -278,10 +303,11 @@
     --xh-action-fg-rest: var(--xh-time-picker-action-fg-hover, var(--xh-fg-default));
   }
 
-  /* 有值时清空钮顶上来，展开钮让位：两颗并排堆着用户分不清点哪个 */
+  /* 有值时清空钮顶上来，展开钮让位：两颗并排堆着用户分不清点哪个。
+     多选不让位：段位收起后展开钮是唯一的键盘入口（退格摘标签也在它身上），藏了键盘就进不来 */
   [data-scope='time-picker'][data-part='control']:has(
       > [data-scope='time-picker'][data-part='clear-trigger']:not([hidden])
-    )
+    ):not(:has(> [data-scope='time-picker'][data-part='tag-list']:not([hidden])))
     > [data-scope='time-picker'][data-part='trigger'] {
     display: none;
   }
@@ -320,7 +346,8 @@
     outline: none;
   }
 
-  [data-scope='time-picker'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（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);
   }
 
@@ -330,6 +357,40 @@
     animation: xh-overlay-slide-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
+  /* 「添加」沉到各列的右下角：它是多选时整块面板的出口，不跟列顶对齐 */
+  [data-scope='time-picker'][data-part='content'] > [data-scope='time-picker'][data-part='confirm-trigger'] {
+    flex: none;
+    align-self: flex-end;
+    margin-inline-start: var(--xh-time-picker-confirm-trigger-gap, var(--xh-space-1));
+  }
+
+  /* 「添加」是面板里唯一的主要动作：品牌实心、悬停 / 按下与 0.97 按压、焦点环全由 Action Control 的
+     text solid 档给；槽名统一按部件取 --xh-time-picker-confirm-trigger-*，只映射到家族桥接槽 */
+  [data-scope='time-picker'][data-part='confirm-trigger'] {
+    --xh-action-visual-size: var(--xh-time-picker-confirm-trigger-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-time-picker-confirm-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-time-picker-confirm-trigger-radius, var(--xh-shape-control));
+    --xh-action-bg-rest: var(--xh-time-picker-confirm-trigger-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-time-picker-confirm-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-time-picker-confirm-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-time-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-time-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-time-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-border-rest: transparent;
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: var(--xh-time-picker-confirm-trigger-shadow, none);
+    --xh-action-shadow-hover: var(--xh-time-picker-confirm-trigger-shadow, none);
+    --xh-action-shadow-pressed: var(--xh-time-picker-confirm-trigger-shadow, none);
+    --xh-action-font-size: var(--xh-text-secondary-size);
+
+    border-width: 0;
+  }
+
+  /* 单选时连接层给的是 hidden 属性；家族那条 display 会把 UA 规则盖掉 */
+  [data-scope='time-picker'][data-part='confirm-trigger'][hidden] {
+    display: none;
+  }
+
   /* 快捷选项也是一列，与时分秒那几列并排，排在行内起始一侧 */
   [data-scope='time-picker'][data-part='preset-group'] {
     display: flex;
@@ -341,7 +402,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] {
@@ -355,7 +416,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));
@@ -381,7 +442,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;
@@ -402,8 +463,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%;
@@ -450,7 +511,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));
   }
 
   /* 焦点落在列上有两种情形：指针打开、这一段还空着、还没有任何格当锚点，或整列被界裁空。
@@ -472,13 +533,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));
@@ -505,9 +566,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;
   }
@@ -530,8 +591,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%;
@@ -564,6 +625,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;
@@ -608,6 +675,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,7 +362,8 @@
     outline: none;
   }
 
-  [data-scope='time-range-picker'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（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);
   }
 
@@ -380,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] {
@@ -394,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));
@@ -420,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;
@@ -441,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%;
@@ -497,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));
   }
 
   /* 组顶上的小标题：独占一行，字号走辅助文本档 */
@@ -546,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));
   }
 
   /* 焦点落在列上有两种情形：指针打开、这一段还空着、还没有任何格当锚点，或整列被界裁空。
@@ -568,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));
@@ -601,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;
   }
@@ -626,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%;
@@ -660,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;
@@ -704,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);
   }
 

package/css/toggle-group.css

@@ -215,18 +215,18 @@
     font-weight: var(--xh-toggle-group-item-font-weight, var(--xh-text-label-weight));
   }
 
-  /* 共边：后一段往回挪一个描边宽度，两条相邻的边重合成一条。
+  /* 共边只画一次：后一段不画起始边，由前一段的末端边承担。墨色描边半透明，两条重合会加深。
      方向跟着 data-orientation 走，横排收 inline 轴、竖排收 block 轴 */
   [data-scope='toggle-group'][data-part='root'][data-orientation='horizontal']
     > [data-scope='toggle-group'][data-part='item']
     + [data-scope='toggle-group'][data-part='item'] {
-    margin-inline-start: calc(-1 * var(--xh-stroke-thin));
+    border-inline-start-width: 0;
   }
 
   [data-scope='toggle-group'][data-part='root'][data-orientation='vertical']
     > [data-scope='toggle-group'][data-part='item']
     + [data-scope='toggle-group'][data-part='item'] {
-    margin-block-start: calc(-1 * var(--xh-stroke-thin));
+    border-block-start-width: 0;
   }
 
   /* 两端圆角用逻辑角属性写，rtl 与竖排都跟着换边，不必另写一套。
@@ -270,7 +270,7 @@
     --xh-action-bg-focus-visible: var(--xh-toggle-group-item-bg-on, var(--xh-_toggle-group-item-bg-on));
     --xh-action-bg-disabled: var(
       --xh-toggle-group-item-bg-on-disabled,
-      color-mix(in oklab, var(--xh-_toggle-group-item-bg-on) 50%, var(--xh-bg-muted))
+      color-mix(in oklab, var(--xh-_toggle-group-item-bg-on) 50%, var(--xh-bg-muted-opaque))
     );
     --xh-action-fg-rest: var(--xh-toggle-group-item-fg-on, var(--xh-_toggle-group-item-fg-on));
     --xh-action-fg-hover: var(--xh-toggle-group-item-fg-on, var(--xh-_toggle-group-item-fg-on));

package/css/toggle.css

@@ -34,10 +34,11 @@
     );
     --xh-_toggle-fg-on: var(--xh-toggle-fg-on, var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle)));
     --xh-_toggle-border-on: var(--xh-toggle-border-on, transparent);
-    /* 禁用同时降级前景与表面，不靠 opacity；选中且禁用时底色掺一半中性面，选中信息不丢。 */
+    /* 禁用同时降级前景与表面，不靠 opacity；选中且禁用时底色掺一半中性面，选中信息不丢。
+       掺的是淡底的不透明档：墨色淡底半透明，掺进去整块面会跟着变半透明 */
     --xh-_toggle-bg-on-disabled: var(
       --xh-toggle-bg-on-disabled,
-      color-mix(in oklab, var(--xh-_toggle-bg-on) 50%, var(--xh-bg-subtle))
+      color-mix(in oklab, var(--xh-_toggle-bg-on) 50%, var(--xh-bg-subtle-opaque))
     );
     --xh-_toggle-fg-on-disabled: var(--xh-toggle-fg-on-disabled, var(--xh-_toggle-fg-on));
     --xh-action-bg-rest: var(--xh-toggle-bg, var(--xh-_action-variant-bg-rest));
@@ -113,7 +114,7 @@
   [data-scope='toggle'][data-part='root'][data-variant='solid'][data-state='on'] {
     --xh-action-bg-disabled: var(
       --xh-toggle-bg-on-disabled,
-      color-mix(in oklab, var(--xh-_action-variant-bg-rest) 50%, var(--xh-bg-subtle))
+      color-mix(in oklab, var(--xh-_action-variant-bg-rest) 50%, var(--xh-bg-subtle-opaque))
     );
     --xh-action-fg-disabled: var(--xh-toggle-fg-on-disabled, var(--xh-_action-variant-fg-rest));
     --xh-action-highlight-rest: var(--xh-_highlight-tone);