@xihan-ui/styles 3.2.0 → 4.0.0

package/dist/css/time-range-picker.css

@@ -70,7 +70,6 @@
     --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* 没被声明，退回品牌色 */
@@ -103,7 +102,6 @@
     --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);
   }
 
   .xh-scope-time-range-picker:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
@@ -112,7 +110,6 @@
     --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}，收起态得自己还回去 */
@@ -121,14 +118,16 @@
   }
 
   .xh-scope-time-range-picker[data-part='label'] {
-    color: var(--xh-time-range-picker-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-time-range-picker-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-time-range-picker-label-gap, var(--xh-space-2)) - var(--xh-time-range-picker-gap, var(--xh-space-1)));
+    color: var(--xh-time-range-picker-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-time-range-picker-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-time-range-picker-label-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
   }
 
   .xh-scope-time-range-picker[data-part='label'][data-disabled] {
-    color: var(--xh-time-range-picker-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-time-range-picker-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 画成一个框的是 control：几段文字、展开按钮、清空按钮要看起来是一体的，
@@ -150,8 +149,6 @@
     --xh-field-border-hover: var(--xh-time-range-picker-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-time-range-picker-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-time-range-picker-control-border-invalid, var(--xh-_field-variant-border-invalid));
-    --xh-field-ring-focus: var(--xh-ring-focus);
-    --xh-field-ring-invalid: var(--xh-ring-invalid);
     --xh-field-shadow-rest: var(--xh-time-range-picker-control-shadow, none);
     /* 段位靠键盘编辑，盒上不是文本光标 */
     --xh-field-cursor-rest: default;
@@ -325,21 +322,22 @@
   /* 几列并排：整体高度由列自己撑，滚动发生在列里而不是整个面板上——
      整面板滚会让时列与分列一起走，挑分的时候时就看不见了。
      含多列的锚定面板走 floating 材质：实体底 + --xh-border-default 描边 + --xh-elevation-floating 落影，
-     不透景、不画顶光 */
+     不透景、不画顶光。面板自己不留内衬：各列与快捷选项列自带内衬，列间分隔线从面板顶边通到底边 */
   .xh-scope-time-range-picker[data-part='content'] {
     position: relative;
     display: flex;
     align-items: stretch;
-    padding-block: var(--xh-time-range-picker-content-py, var(--xh-space-2));
-    padding-inline: var(--xh-time-range-picker-content-px, var(--xh-space-2));
+    padding-block: var(--xh-time-range-picker-content-py, var(--xh-space-0));
+    padding-inline: var(--xh-time-range-picker-content-px, var(--xh-space-0));
     /* 行内轴的上限是落位后的可用宽度：两组时列并排，秒与上下午都开时八列合计会越过最窄视口，
        放不下时面板内自己横滚，每一列保持自己的宽度不被压 */
     max-inline-size: var(--xh-_time-range-picker-available-w);
     overflow-x: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    /* 列自己定高，面板整体不该再长过页内滚动面那一档 */
-    max-block-size: var(--xh-time-range-picker-content-max-h, var(--xh-viewport-h-lg));
+    /* 两组时列都按 px 定高（列取 --xh-overlay-time-column-h），面板的天然高度就是它们的和，缺省不另设上限：
+       按 rem 的滚动面档会随根字号缩小，根字号很小时面板出竖滚 */
+    max-block-size: var(--xh-time-range-picker-content-max-h, none);
     border: var(--xh-stroke-thin) solid var(--xh-time-range-picker-content-border, var(--xh-border-default));
     border-radius: var(--xh-time-range-picker-content-radius, var(--xh-shape-overlay));
     background: var(--xh-time-range-picker-content-bg, var(--xh-bg-surface));
@@ -373,60 +371,71 @@
     animation: xh-overlay-slide-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
-  /* 快捷选项也是一列，与时分秒那几列并排，排在行内起始一侧 */
+  /* 快捷选项也是一列，与时分秒那几列并排，排在行内起始一侧；限高与时间列同一档 */
   .xh-scope-time-range-picker[data-part='preset-group'] {
     display: flex;
     flex: none;
     flex-direction: column;
-    gap: var(--xh-time-range-picker-preset-group-gap, var(--xh-list-option-gap));
-    max-block-size: var(--xh-time-range-picker-preset-group-h, var(--xh-viewport-h-sm));
-    padding-inline: var(--xh-time-range-picker-preset-group-px, var(--xh-space-1));
+    gap: var(--xh-time-range-picker-preset-group-gap, var(--xh-space-1));
+    max-block-size: var(--xh-time-range-picker-preset-group-h, var(--xh-overlay-time-column-h));
+    padding-block: var(--xh-time-range-picker-preset-group-py, var(--xh-space-2_5));
+    padding-inline: var(--xh-time-range-picker-preset-group-px, var(--xh-space-2));
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    border-inline-end: var(--xh-stroke-thin) solid var(--xh-time-range-picker-column-divider, var(--xh-material-solid-separator));
+    border-inline-end: var(--xh-stroke-thin) solid var(--xh-time-range-picker-column-divider, var(--xh-material-solid-border));
   }
 
   .xh-scope-time-range-picker[data-part='preset-group'][hidden] {
     display: none;
   }
 
-  /* 快捷选项：悬停 / 高亮 100、按下 200、禁用面由 Collection Item 家族按 overlay 语境给（选中 = 透明底 +
-     行尾对号，正文保持 rest 色与常规字重）。选项没有正文部件，匿名文本进不了家族网格的 text 列，
-     行保持块级排版，末端为对号预留固定轨 */
+  /* 快捷选项：每一项是一颗 24 高的淡底小钮——静息 100、悬停 / 高亮 200、按下 300（淡底承载阶梯），
+     字取说明档 12px、次级前景；禁用面由 Collection Item 家族按 overlay 语境给。headless 把它投成 listbox 的
+     option、当前值落在哪一项就报 aria-selected，选中仍画行尾对号（面与字不变），对号是这条状态唯一的视觉通道。
+     选项没有正文部件，匿名文本进不了家族网格的 text 列，行保持块级排版，末端为对号预留固定轨 */
   .xh-scope-time-range-picker[data-part='preset'] {
-    --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-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));
-    --xh-collection-fg-keyboard-highlight: var(--xh-time-range-picker-preset-fg, var(--xh-fg-default));
-    --xh-collection-fg-pressed: var(--xh-time-range-picker-preset-fg, var(--xh-fg-default));
-    --xh-collection-fg-selected: var(--xh-time-range-picker-preset-fg-checked, var(--xh-time-range-picker-preset-fg, var(--xh-fg-default)));
-    --xh-collection-fg-selected-highlight: var(--xh-time-range-picker-preset-fg-checked, var(--xh-time-range-picker-preset-fg, var(--xh-fg-default)));
-    --xh-collection-fg-selected-hover: var(--xh-time-range-picker-preset-fg-checked, var(--xh-time-range-picker-preset-fg, var(--xh-fg-default)));
-    --xh-collection-fg-selected-pressed: var(--xh-time-range-picker-preset-fg-checked, var(--xh-time-range-picker-preset-fg, var(--xh-fg-default)));
+    --xh-collection-block-padding: 0;
+    --xh-collection-inline-padding: var(--xh-time-range-picker-preset-px, var(--xh-space-2));
+    --xh-collection-font-size: var(--xh-time-range-picker-preset-font-size, var(--xh-text-caption-size));
+    --xh-collection-radius: var(--xh-time-range-picker-preset-radius, var(--xh-shape-control));
+    --xh-collection-fg-rest: var(--xh-time-range-picker-preset-fg, var(--xh-fg-muted));
+    --xh-collection-fg-selected: var(--xh-time-range-picker-preset-fg, var(--xh-fg-muted));
+    /* 悬停 / 高亮 / 按下时字换正文色：底升到 200 / 300 之后，次级前景在暗色下不足 4.5:1 */
+    --xh-collection-fg-hover: var(--xh-time-range-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-keyboard-highlight: var(--xh-time-range-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-pressed: var(--xh-time-range-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-selected-highlight: var(--xh-time-range-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-selected-hover: var(--xh-time-range-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-selected-pressed: var(--xh-time-range-picker-preset-fg-hover, var(--xh-fg-default));
     --xh-collection-fg-disabled: var(--xh-time-range-picker-preset-fg-disabled, var(--xh-fg-disabled));
-    --xh-collection-bg-hover: var(--xh-time-range-picker-preset-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-keyboard-highlight: var(--xh-time-range-picker-preset-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-selected-highlight: var(--xh-time-range-picker-preset-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-selected-hover: var(--xh-time-range-picker-preset-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-pressed: var(--xh-time-range-picker-preset-bg-pressed, var(--xh-bg-subtle-hover));
-    --xh-collection-bg-selected-pressed: var(--xh-time-range-picker-preset-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-collection-font-weight-selected: var(--xh-font-weight-regular);
+    --xh-collection-font-weight-selected-highlight: var(--xh-font-weight-regular);
+    --xh-collection-font-weight-selected-hover: var(--xh-font-weight-regular);
+    --xh-collection-font-weight-selected-pressed: var(--xh-font-weight-regular);
+    --xh-collection-bg-rest: var(--xh-time-range-picker-preset-bg, var(--xh-bg-subtle));
+    --xh-collection-bg-selected: var(--xh-time-range-picker-preset-bg, var(--xh-bg-subtle));
+    --xh-collection-bg-hover: var(--xh-time-range-picker-preset-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-keyboard-highlight: var(--xh-time-range-picker-preset-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-selected-highlight: var(--xh-time-range-picker-preset-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-selected-hover: var(--xh-time-range-picker-preset-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-pressed: var(--xh-time-range-picker-preset-bg-pressed, var(--xh-bg-subtle-active));
+    --xh-collection-bg-selected-pressed: var(--xh-time-range-picker-preset-bg-pressed, var(--xh-bg-subtle-active));
     --xh-collection-outline-keyboard-highlight: transparent;
     --xh-collection-outline-selected-highlight: transparent;
 
     position: relative;
     display: block;
     flex: none;
+    block-size: var(--xh-time-range-picker-preset-h, var(--xh-control-action-size));
     /* 对号的末端轨始终留着，切换选中时文字与整列宽度都不移动。 */
     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-control-indicator-size))
+      var(--xh-time-range-picker-preset-px, var(--xh-space-2))
+      + var(--xh-time-range-picker-preset-check-size, var(--xh-control-indicator-sm))
       + var(--xh-space-1)
     );
+    /* 一行字在 24 高的钮里垂直居中 */
+    line-height: var(--xh-time-range-picker-preset-h, var(--xh-control-action-size));
     white-space: nowrap;
     user-select: none;
   }
@@ -444,9 +453,9 @@
     content: '';
     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-control-indicator-size));
-    block-size: var(--xh-time-range-picker-preset-check-size, var(--xh-control-indicator-size));
+    inset-inline-end: var(--xh-time-range-picker-preset-px, var(--xh-space-2));
+    inline-size: var(--xh-time-range-picker-preset-check-size, var(--xh-control-indicator-sm));
+    block-size: var(--xh-time-range-picker-preset-check-size, var(--xh-control-indicator-sm));
     background-color: var(--xh-time-range-picker-preset-check-fg, var(--xh-_time-range-picker-check-fg));
     opacity: 0;
     translate: 0 -50%;
@@ -470,7 +479,7 @@
     background-color: var(--xh-time-range-picker-preset-fg-disabled, var(--xh-fg-disabled));
   }
 
-  /* 一端的几列成组并排，小标题独占顶上一行；两组之间留一道更宽的分隔，眼睛先分起止、再分时分 */
+  /* 一端的几列成组并排，小标题独占顶上一行；两组之间不另留空当，只隔一道竖线，眼睛先分起止、再分时分 */
   .xh-scope-time-range-picker[data-part='column-group'] {
     --xh-_time-range-picker-column-group-label-py: var(
       --xh-time-range-picker-column-group-py,
@@ -499,9 +508,9 @@
   }
 
   .xh-scope-time-range-picker[data-part='column-group'] + .xh-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-solid-separator));
+    margin-inline-start: var(--xh-time-range-picker-column-group-gap, var(--xh-space-0));
+    padding-inline-start: var(--xh-time-range-picker-column-group-gap, var(--xh-space-0));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-range-picker-column-group-divider, var(--xh-material-solid-border));
   }
 
   /* 组顶上的小标题：独占一行，字号走辅助文本档 */
@@ -527,15 +536,21 @@
     display: none;
   }
 
-  /* 一列一个滚动区：列与列之间用细分隔线，视觉上"时 | 分 | 秒"三栏分明 */
+  /* 一列一个滚动区：列与列之间用细分隔线，视觉上"时 | 分 | 秒"三栏分明。列宽取时间列档（两位数字加两侧对号轨），
+     列高是七格整行；列顶留 4，列底留出一截空白，末尾几格（23 时、55–59 分）也能滚到列顶，各列的选中落在同一行 */
   .xh-scope-time-range-picker[data-part='column'] {
+    --xh-_time-range-picker-column-h: var(--xh-time-range-picker-column-h, var(--xh-overlay-time-column-h));
+    --xh-_time-range-picker-column-py: var(--xh-time-range-picker-column-py, var(--xh-space-1));
+
     display: flex;
     flex: none;
     flex-direction: column;
-    gap: var(--xh-time-range-picker-column-gap, 0);
-    min-inline-size: var(--xh-time-range-picker-column-min-w, var(--xh-overlay-column-min-w));
+    gap: var(--xh-time-range-picker-column-gap, var(--xh-space-2));
+    min-inline-size: var(--xh-time-range-picker-column-min-w, var(--xh-overlay-time-column-w));
     /* 几列并排：定高而不是随内容收，否则时列与分列的可选值一多一少就错位 */
-    block-size: var(--xh-time-range-picker-column-h, var(--xh-viewport-h-sm));
+    block-size: var(--xh-_time-range-picker-column-h);
+    padding-block: var(--xh-_time-range-picker-column-py)
+      calc(var(--xh-_time-range-picker-column-h) - var(--xh-time-range-picker-item-h, var(--xh-control-action-size)) - var(--xh-_time-range-picker-column-py));
     padding-inline: var(--xh-time-range-picker-column-px, 0);
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
@@ -543,6 +558,11 @@
     /* 滚动容器在某些浏览器里会被自动塞进 Tab 序列，是否画环见下方按 tabindex 分档的两条 */
   }
 
+  /* 组里的列顶画一道线：组顶小标题那一带与列分开，起止两组的线在组边接上 */
+  .xh-scope-time-range-picker[data-part='column-group'] > .xh-scope-time-range-picker[data-part='column'] {
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-time-range-picker-column-divider, var(--xh-material-solid-border));
+  }
+
   /* granularity 关掉的列（精度不到秒时的秒列）由连接层打 hidden */
   .xh-scope-time-range-picker[data-part='column'][hidden] {
     display: none;
@@ -550,7 +570,7 @@
 
   /* 每列后面紧跟着它自己的贴层条子节点，相邻选择器接不到下一列，按「前面有过列」取第二列起 */
   .xh-scope-time-range-picker[data-part='column'] ~ .xh-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-solid-separator));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-range-picker-column-divider, var(--xh-material-solid-border));
   }
 
   /* 焦点落在列上有两种情形：指针打开、这一段还空着、还没有任何格当锚点，或整列被界裁空。
@@ -564,8 +584,8 @@
     outline: none;
   }
 
-  /* 时间格：悬停 / 高亮 100、按下 200 由 Collection Item 家族按 overlay 语境给，选中只留末端对号——
-     浮层瞬态集合的选中不上品牌淡底、不加粗、不变字色。格里只有数字、没有正文部件，保持自己的
+  /* 时间格：24 高的通栏条，列内间距 8 撑出 32 的行距；悬停 / 高亮 100、按下 200 由 Collection Item 家族按
+     overlay 语境给，选中透明底 + 中等字重 + 末端对号（对号集合的选中），不上品牌淡底、不变字色。格里只有数字、没有正文部件，保持自己的
      居中排版与等宽标记轨，家族只给状态面。行的字色与字重按值选择族的同一套映射写（--xh-time-range-picker-item-fg
      / -fg-selected / -font-weight-selected 使用者槽，缺省落家族配方的行字色 --xh-material-frosted-fg：
      它在各主题与 forced-colors 下都等于 --xh-fg-default，floating 面板上的面色仍由 content 自己给） */
@@ -574,11 +594,12 @@
       var(--xh-time-range-picker-item-px, 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, var(--xh-_time-range-picker-item-py));
+    --xh-collection-block-padding: 0;
     /* 两侧留同宽轨：对号绝对落在末端，数字仍在整格的数学中心。 */
     --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-inset));
+    /* 浮层里的列表是通栏行：格铺满列宽、不取圆角 */
+    --xh-collection-radius: var(--xh-time-range-picker-item-radius, 0);
     --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));
@@ -587,10 +608,10 @@
     --xh-collection-fg-selected-highlight: var(--xh-time-range-picker-item-fg-selected, var(--xh-time-range-picker-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-selected-hover: var(--xh-time-range-picker-item-fg-selected, var(--xh-time-range-picker-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-selected-pressed: var(--xh-time-range-picker-item-fg-selected, var(--xh-time-range-picker-item-fg, var(--xh-material-frosted-fg)));
-    --xh-collection-font-weight-selected: var(--xh-time-range-picker-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-highlight: var(--xh-time-range-picker-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-hover: var(--xh-time-range-picker-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-pressed: var(--xh-time-range-picker-item-font-weight-selected, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-selected: var(--xh-time-range-picker-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-highlight: var(--xh-time-range-picker-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-hover: var(--xh-time-range-picker-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-pressed: var(--xh-time-range-picker-item-font-weight-selected, var(--xh-font-weight-medium));
     --xh-collection-bg-hover: var(--xh-time-range-picker-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-keyboard-highlight: var(--xh-time-range-picker-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-selected-highlight: var(--xh-time-range-picker-item-bg-hover, var(--xh-bg-subtle));
@@ -605,7 +626,7 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    block-size: var(--xh-time-range-picker-item-h, auto);
+    block-size: var(--xh-time-range-picker-item-h, var(--xh-control-action-size));
     /* 居中的单个数字格没有截断层，行高保持紧排，列内多露几格 */
     line-height: var(--xh-leading-normal);
     white-space: nowrap;
@@ -621,6 +642,14 @@
   }
 
   /* 作者自己藏掉某几格时要让位，有 display 就得补这条 */
+  /* 命中区向上下各补半个列内间距：两格之间那 8px 缝归上下两格各一半，指针落在缝里不落空 */
+  .xh-scope-time-range-picker[data-part='item']::before {
+    content: '';
+    position: absolute;
+    inset-block: calc(-0.5 * var(--xh-time-range-picker-column-gap, var(--xh-space-2)));
+    inset-inline: 0;
+  }
+
   .xh-scope-time-range-picker[data-part='item'][hidden] {
     display: none;
   }

package/dist/css/timeline.css

@@ -14,14 +14,15 @@
   .xh-scope-timeline[data-part='root'] {
     /* 尺寸档只换这几个私有槽，条目、圆点与文字都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */
-    --xh-_timeline-dot-size: var(--xh-space-2_5);
-    --xh-_timeline-gutter: var(--xh-space-3);
-    --xh-_timeline-item-gap: var(--xh-space-5);
+    /* 圆点只标位置，6px 实心；圆点到内容 16px；条目之间 32px，事件一条条分得开 */
+    --xh-_timeline-dot-size: var(--xh-space-1_5);
+    --xh-_timeline-gutter: var(--xh-space-4);
+    --xh-_timeline-item-gap: var(--xh-space-8);
     --xh-_timeline-title-font-size: var(--xh-control-font-md);
     --xh-_timeline-caption-font-size: var(--xh-text-caption-size);
     /* 标题首行占多高。圆点按它居中下移，圆心才落在标题这一行的中线上 */
     --xh-_timeline-line-h: calc(
-      var(--xh-timeline-title-font-size, var(--xh-_timeline-title-font-size)) * var(--xh-leading-tight)
+      var(--xh-timeline-title-font-size, var(--xh-_timeline-title-font-size)) * var(--xh-leading-normal)
     );
 
     /* 条目之间不设 gap：留白由 content 自己的边距撑出来，连线才连得到下一条的圆点。
@@ -51,17 +52,17 @@
   /* —— 尺寸 —— */
   /* 缺省档写在上面的基础规则里。圆点直径不在控件高度那把尺上，三档走空间尺相邻的三格 */
   .xh-scope-timeline[data-part='root'][data-size='sm'] {
-    --xh-_timeline-dot-size: var(--xh-space-2);
-    --xh-_timeline-gutter: var(--xh-space-2);
-    --xh-_timeline-item-gap: var(--xh-space-4);
+    --xh-_timeline-dot-size: var(--xh-space-1);
+    --xh-_timeline-gutter: var(--xh-space-3);
+    --xh-_timeline-item-gap: var(--xh-space-6);
     --xh-_timeline-title-font-size: var(--xh-control-font-sm);
     /* 字号档最小就是 xs，时刻文本不再往下走，故不重声明 caption */
   }
 
   .xh-scope-timeline[data-part='root'][data-size='lg'] {
-    --xh-_timeline-dot-size: var(--xh-space-3);
-    --xh-_timeline-gutter: var(--xh-space-4);
-    --xh-_timeline-item-gap: var(--xh-space-6);
+    --xh-_timeline-dot-size: var(--xh-space-2);
+    --xh-_timeline-gutter: var(--xh-space-5);
+    --xh-_timeline-item-gap: calc(var(--xh-space-8) + var(--xh-space-2));
     --xh-_timeline-title-font-size: var(--xh-control-font-lg);
     --xh-_timeline-caption-font-size: var(--xh-text-secondary-size);
   }
@@ -99,8 +100,8 @@
     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-circle));
-    /* 使用者令牌排在语气之前；两者都没有时退回一个中性的实心点 */
-    background: var(--xh-timeline-indicator-bg, var(--xh-_tone-soft, var(--xh-fg-muted)));
+    /* 使用者令牌排在语气之前；两者都没有时退回品牌色的实心点 */
+    background: var(--xh-timeline-indicator-bg, var(--xh-_tone-soft, var(--xh-fg-brand)));
     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);
@@ -140,7 +141,7 @@
     grid-column: 1;
     grid-row: 2;
     justify-self: center;
-    inline-size: var(--xh-timeline-connector-thickness, var(--xh-stroke-thick));
+    inline-size: var(--xh-timeline-connector-thickness, var(--xh-stroke-thin));
     min-block-size: var(--xh-timeline-connector-min-length, var(--xh-space-4));
     margin-block-start: var(--xh-space-1);
   }
@@ -223,7 +224,8 @@
     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);
+    /* 坐标的行盒与标题首行同高，小一号的坐标字落在标题那一行的中线上 */
+    line-height: var(--xh-_timeline-line-h);
     text-align: var(--xh-_timeline-label-align, end);
   }
 
@@ -311,17 +313,17 @@
       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));
+      block-size: var(--xh-timeline-connector-thickness, var(--xh-stroke-thin));
       min-block-size: 0;
       margin-block-start: 0;
-      margin-inline-start: var(--xh-space-1);
+      margin-inline: var(--xh-space-1_5) var(--xh-space-1);
     }
 
     .xh-scope-timeline[data-part='item'][data-orientation='horizontal'] .xh-scope-timeline[data-part='content'],
     .xh-scope-timeline[data-part='item'][data-orientation='horizontal']:has(> .xh-scope-timeline[data-part='label']) > .xh-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-start: var(--xh-timeline-content-pt, var(--xh-space-4));
       padding-block-end: 0;
       padding-inline-end: var(--xh-timeline-item-gap, var(--xh-_timeline-item-gap));
     }
@@ -353,7 +355,7 @@
       grid-row: 1;
       align-self: end;
       padding-block-start: 0;
-      padding-block-end: var(--xh-timeline-content-pb, var(--xh-space-2));
+      padding-block-end: var(--xh-timeline-content-pb, var(--xh-space-4));
     }
 
     .xh-scope-timeline[data-part='item'][data-orientation='horizontal'][data-placement='alternate'] {
@@ -374,7 +376,7 @@
       grid-row: 1;
       align-self: end;
       padding-block-start: 0;
-      padding-block-end: var(--xh-timeline-content-pb, var(--xh-space-2));
+      padding-block-end: var(--xh-timeline-content-pb, var(--xh-space-4));
     }
   }
 
@@ -389,7 +391,7 @@
     color: var(--xh-timeline-title-fg, var(--xh-fg-default));
     font-size: var(--xh-timeline-title-font-size, var(--xh-_timeline-title-font-size));
     font-weight: var(--xh-timeline-title-font-weight, var(--xh-text-label-weight));
-    line-height: var(--xh-leading-tight);
+    line-height: var(--xh-leading-normal);
   }
 
   .xh-scope-timeline[data-part='description'] {
@@ -411,6 +413,21 @@
    * 只剩几段没有次序的文字。两处都改由描边承载：圆点成一个空心圈，
    * 连线的两条边合起来就是那条线（线本身只有一个描边厚，两边各画一半正好填满）。
    */
+  /* 强制色：圆点与连线都是底色画的，系统会把底色换成 Canvas，整条轴就此消失。
+     两处退出强制换色、直接写系统色；圆点里的序号字取 Canvas 压在 CanvasText 上 */
+  @media (forced-colors: active) {
+    .xh-scope-timeline[data-part='indicator'] {
+      forced-color-adjust: none;
+      background: CanvasText;
+      color: Canvas;
+    }
+
+    .xh-scope-timeline[data-part='connector'] {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+  }
+
   @media print {
     .xh-scope-timeline[data-part='indicator'] {
       border: var(--xh-stroke-thick) solid currentColor;

package/dist/css/timer.css

@@ -17,7 +17,7 @@
   /* 三个尺寸档只换这两个私有槽，各部件从 root 继承它们，换档不必给每个部件各写一条选择器；
      起停钮的档位由连接层直接投给家族，这里不再中转 */
   .xh-scope-timer[data-part='root'] {
-    --xh-_timer-digit-size: var(--xh-text-heading-2-size);
+    --xh-_timer-digit-size: var(--xh-text-heading-1-size);
     --xh-_timer-gap: var(--xh-space-3);
 
     display: inline-flex;
@@ -33,12 +33,12 @@
 
   /* —— 尺寸 —— */
   .xh-scope-timer[data-part='root'][data-size='sm'] {
-    --xh-_timer-digit-size: var(--xh-text-heading-3-size);
+    --xh-_timer-digit-size: var(--xh-text-heading-2-size);
     --xh-_timer-gap: var(--xh-space-2);
   }
 
   .xh-scope-timer[data-part='root'][data-size='lg'] {
-    --xh-_timer-digit-size: var(--xh-text-heading-1-size);
+    --xh-_timer-digit-size: var(--xh-text-display-size);
     --xh-_timer-gap: var(--xh-space-4);
   }
 

package/dist/css/toggle-group.css

@@ -35,7 +35,7 @@
     --xh-_toggle-group-item-bg: var(--xh-bg-subtle);
     --xh-_toggle-group-item-bg-hover: var(--xh-bg-subtle-hover);
     --xh-_toggle-group-item-bg-active: var(--xh-bg-subtle-active);
-    --xh-_toggle-group-item-fg: var(--xh-fg-default);
+    --xh-_toggle-group-item-fg: var(--xh-fg-muted);
     --xh-_toggle-group-item-border: transparent;
     --xh-_toggle-group-item-bg-on: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
     --xh-_toggle-group-item-bg-on-hover: var(
@@ -86,7 +86,7 @@
     --xh-_toggle-group-item-bg: var(--xh-bg-subtle);
     --xh-_toggle-group-item-bg-hover: var(--xh-bg-subtle-hover);
     --xh-_toggle-group-item-bg-active: var(--xh-bg-subtle-active);
-    --xh-_toggle-group-item-fg: var(--xh-fg-default);
+    --xh-_toggle-group-item-fg: var(--xh-fg-muted);
     --xh-_toggle-group-item-border: transparent;
     --xh-_toggle-group-item-bg-on: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
     --xh-_toggle-group-item-bg-on-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-brand-subtle-hover));
@@ -101,7 +101,7 @@
     --xh-_toggle-group-item-bg: transparent;
     --xh-_toggle-group-item-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle));
     --xh-_toggle-group-item-bg-active: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
-    --xh-_toggle-group-item-fg: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_toggle-group-item-fg: var(--xh-_tone-fg, var(--xh-fg-muted));
     --xh-_toggle-group-item-border: transparent;
     --xh-_toggle-group-item-bg-on: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
     --xh-_toggle-group-item-bg-on-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-brand-subtle-hover));
@@ -129,7 +129,7 @@
     --xh-_toggle-group-item-bg: transparent;
     --xh-_toggle-group-item-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle));
     --xh-_toggle-group-item-bg-active: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
-    --xh-_toggle-group-item-fg: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_toggle-group-item-fg: var(--xh-_tone-fg, var(--xh-fg-muted));
     --xh-_toggle-group-item-border: transparent;
     --xh-_toggle-group-item-bg-on: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
     --xh-_toggle-group-item-bg-on-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-brand-subtle-hover));

package/dist/css/tool-call.css

@@ -211,13 +211,15 @@
     display: none;
   }
 
-  /* 三档落定的阶段收成状态 chip：几何与 Tag 的 sm 档同一把尺，淡底 + 同族可读字取连接层投影的语气。
-     在跑的两档不带底，让扫光自己说话 */
+  /* 三档落定的阶段收成状态 chip：与 Tag 的 sm 档同一副方签——control 圆角、块尺寸取 chip 档、竖向内衬为 0，
+     淡底 + 同族可读字取连接层投影的语气。在跑的两档不带底，让扫光自己说话 */
   .xh-scope-tool-call[data-part='status'][data-tone] {
-    padding-block: var(--xh-tool-call-status-py, var(--xh-space-0_5));
+    box-sizing: border-box;
+    min-block-size: var(--xh-tool-call-status-h, var(--xh-chip-h-sm));
+    padding-block: var(--xh-tool-call-status-py, 0);
     padding-inline: var(--xh-tool-call-status-px, var(--xh-space-1_5));
     border: var(--xh-stroke-thin) solid transparent;
-    border-radius: var(--xh-tool-call-status-radius, var(--xh-shape-pill));
+    border-radius: var(--xh-tool-call-status-radius, var(--xh-shape-control));
     font-weight: var(--xh-font-weight-medium);
     line-height: var(--xh-control-indicator-md);
   }

package/dist/css/toolbar.css

@@ -149,7 +149,7 @@
      200 → 300）；这里只把使用者槽映射到桥接槽（-gap / -h / -px / -radius / -bg / -bg-hover /
      -bg-active / -bg-disabled / -fg / -font-size 保留为第一参数）。作者仍可用类名或内联样式完整覆盖。 */
   .xh-scope-toolbar[data-part='item'] {
-    --xh-action-gap: var(--xh-toolbar-item-gap, var(--xh-control-gap-sm));
+    --xh-action-gap: var(--xh-toolbar-item-gap, var(--xh-_action-profile-gap));
     --xh-action-visual-size: var(--xh-toolbar-item-h, var(--xh-_action-profile-visual-size));
     --xh-action-padding-inline: var(--xh-toolbar-item-px, var(--xh-_action-profile-padding-inline));
     --xh-action-radius: var(--xh-toolbar-item-radius, var(--xh-_action-profile-radius));
@@ -237,13 +237,14 @@
     inline-size: var(--xh-toolbar-separator-thickness, var(--xh-stroke-thin));
     block-size: var(--xh-_toolbar-separator-size);
     margin-block: var(--xh-toolbar-separator-inset, var(--xh-space-0));
-    margin-inline: var(--xh-toolbar-separator-gap, var(--xh-space-0));
+    /* 散落的分隔线两侧各让出 12px，与工具条间距叠起来把前后两组分开 */
+    margin-inline: var(--xh-toolbar-separator-gap, var(--xh-space-3));
   }
 
   .xh-scope-toolbar[data-part='separator'][data-orientation='horizontal'] {
     block-size: var(--xh-toolbar-separator-thickness, var(--xh-stroke-thin));
     inline-size: var(--xh-_toolbar-separator-size);
-    margin-block: var(--xh-toolbar-separator-gap, var(--xh-space-0));
+    margin-block: var(--xh-toolbar-separator-gap, var(--xh-space-3));
     margin-inline: var(--xh-toolbar-separator-inset, var(--xh-space-0));
   }
 
@@ -255,11 +256,11 @@
   }
 
   .xh-scope-toolbar[data-part='group'] > .xh-scope-toolbar[data-part='separator'][data-orientation='vertical'] {
-    margin-inline-start: calc(-1 * var(--xh-toolbar-separator-thickness, var(--xh-stroke-thin)));
+    margin-inline: calc(-1 * var(--xh-toolbar-separator-thickness, var(--xh-stroke-thin))) 0;
   }
 
   .xh-scope-toolbar[data-part='group'] > .xh-scope-toolbar[data-part='separator'][data-orientation='horizontal'] {
-    margin-block-start: calc(-1 * var(--xh-toolbar-separator-thickness, var(--xh-stroke-thin)));
+    margin-block: calc(-1 * var(--xh-toolbar-separator-thickness, var(--xh-stroke-thin))) 0;
   }
 
   /* —— 收纳 —— */