@xihan-ui/styles 3.2.0 → 4.0.0

package/dist/css/text-field.css

@@ -56,13 +56,15 @@
   }
 
   .xh-scope-text-field[data-part='label'] {
-    color: var(--xh-text-field-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-text-field-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-text-field-label-gap, var(--xh-space-2)) - var(--xh-text-field-gap, var(--xh-space-1)));
+    color: var(--xh-text-field-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-text-field-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-text-field-label-font-weight, var(--xh-text-label-weight));
   }
 
   .xh-scope-text-field[data-part='label'][data-disabled] {
-    color: var(--xh-text-field-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-text-field-label-fg-disabled, var(--xh-fg-muted));
   }
 
   .xh-scope-text-field[data-part='control'] {
@@ -80,8 +82,6 @@
     --xh-field-border-hover: var(--xh-text-field-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-text-field-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-text-field-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-text-field-control-shadow, none);
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
     --xh-field-glyph-size: var(--xh-text-field-icon-size, var(--xh-_field-size-glyph-size));
@@ -100,7 +100,7 @@
     --xh-field-placeholder-fg: var(--xh-text-field-placeholder-fg, var(--xh-fg-subtle));
     --xh-field-autofill-bg: var(--xh-text-field-input-autofill-bg, var(--xh-bg-canvas));
     --xh-field-autofill-fg: var(--xh-text-field-input-autofill-fg, var(--xh-fg-default));
-    --xh-field-textarea-padding-block: var(--xh-text-field-textarea-py, var(--xh-space-2));
+    --xh-field-textarea-padding-block: var(--xh-text-field-textarea-py, var(--xh-space-1));
   }
 
   .xh-scope-text-field[data-part='control'][hidden] {

package/dist/css/time-field.css

@@ -63,13 +63,15 @@
   }
 
   .xh-scope-time-field[data-part='label'] {
-    color: var(--xh-time-field-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-time-field-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-time-field-label-gap, var(--xh-space-2)) - var(--xh-time-field-gap, var(--xh-space-1)));
+    color: var(--xh-time-field-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-time-field-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-time-field-label-font-weight, var(--xh-text-label-weight));
   }
 
   .xh-scope-time-field[data-part='label'][data-disabled] {
-    color: var(--xh-time-field-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-time-field-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 几段合起来看着像一个输入框：描边、底色、圆角、聚焦环、五态与悬停由 Field Chrome 家族画在
@@ -89,8 +91,6 @@
     --xh-field-border-hover: var(--xh-time-field-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-time-field-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-time-field-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-field-control-shadow, none);
     --xh-field-cursor-rest: default;
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */

package/dist/css/time-picker.css

@@ -64,7 +64,6 @@
     --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* 没被声明，退回品牌色 */
@@ -97,7 +96,6 @@
     --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);
   }
 
   .xh-scope-time-picker:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
@@ -106,7 +104,6 @@
     --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}，收起态得自己还回去 */
@@ -115,14 +112,16 @@
   }
 
   .xh-scope-time-picker[data-part='label'] {
-    color: var(--xh-time-picker-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-time-picker-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-time-picker-label-gap, var(--xh-space-2)) - var(--xh-time-picker-gap, var(--xh-space-1)));
+    color: var(--xh-time-picker-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-time-picker-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-time-picker-label-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
   }
 
   .xh-scope-time-picker[data-part='label'][data-disabled] {
-    color: var(--xh-time-picker-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-time-picker-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 画成一个框的是 control：几段文字、展开按钮、清空按钮要看起来是一体的，
@@ -144,8 +143,6 @@
     --xh-field-border-hover: var(--xh-time-picker-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-time-picker-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-time-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-picker-control-shadow, none);
     /* 段位靠键盘编辑，盒上不是文本光标 */
     --xh-field-cursor-rest: default;
@@ -315,15 +312,16 @@
   /* 几列并排：整体高度由列自己撑，滚动发生在列里而不是整个面板上——
      整面板滚会让时列与分列一起走，挑分的时候时就看不见了。
      含多列的锚定面板走 floating 材质：实体底 + --xh-border-default 描边 + --xh-elevation-floating 落影，
-     不透景、不画顶光 */
+     不透景、不画顶光。面板自己不留内衬：各列与快捷选项列自带内衬，列间分隔线从面板顶边通到底边 */
   .xh-scope-time-picker[data-part='content'] {
     position: relative;
     display: flex;
     align-items: stretch;
-    padding-block: var(--xh-time-picker-content-py, var(--xh-space-1));
-    padding-inline: var(--xh-time-picker-content-px, var(--xh-space-1));
-    /* 列自己定高，面板整体不该再长过页内滚动面那一档 */
-    max-block-size: var(--xh-time-picker-content-max-h, var(--xh-viewport-h-lg));
+    padding-block: var(--xh-time-picker-content-py, var(--xh-space-0));
+    padding-inline: var(--xh-time-picker-content-px, var(--xh-space-0));
+    /* 列与底栏都按 px 定高（列取 --xh-overlay-time-column-h），面板的天然高度就是它们的和，缺省不另设上限：
+       按 rem 的滚动面档会随根字号缩小，根字号很小时底栏被挤到描边外 */
+    max-block-size: var(--xh-time-picker-content-max-h, none);
     border: var(--xh-stroke-thin) solid var(--xh-time-picker-content-border, var(--xh-border-default));
     border-radius: var(--xh-time-picker-content-radius, var(--xh-shape-overlay));
     background: var(--xh-time-picker-content-bg, var(--xh-bg-surface));
@@ -357,18 +355,25 @@
     animation: xh-overlay-slide-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
-  /* 「添加」沉到各列的右下角：它是多选时整块面板的出口，不跟列顶对齐 */
+  /* 有底栏时面板折行：各列与快捷选项列排在第一行，底栏独占下一行。
+     不加 :not([hidden])：content 收起态带 hidden 但仍在播退场动画，退回不折行会让底栏挤到各列旁边 */
+  .xh-scope-time-picker[data-part='content']:has(> [data-part='footer']) {
+    flex-wrap: wrap;
+  }
+
+  /* 「添加」沉到各列的右下角：它是多选时整块面板的出口，不跟列顶对齐；面板不留内衬，
+     钮自己与底边、末边各让一档空当 */
   .xh-scope-time-picker[data-part='content'] > .xh-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));
+    margin: var(--xh-time-picker-confirm-trigger-margin, var(--xh-space-2));
   }
 
-  /* 「添加」是面板里唯一的主要动作：品牌实心、悬停 / 按下与 0.97 按压、焦点环全由 Action Control 的
-     text solid 档给；槽名统一按部件取 --xh-time-picker-confirm-trigger-*，只映射到家族桥接槽 */
+  /* 「添加」是面板里唯一的主要动作：品牌实心、悬停 / 按下换面、焦点环全由 Action Control 的 text solid 档给，
+     xs 档 24 高、字取说明档 12px；槽名统一按部件取 --xh-time-picker-confirm-trigger-*，只映射到家族桥接槽 */
   .xh-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-padding-inline: var(--xh-time-picker-confirm-trigger-px, var(--xh-space-2));
     --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));
@@ -381,7 +386,7 @@
     --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);
+    --xh-action-font-size: var(--xh-time-picker-confirm-trigger-font-size, var(--xh-text-caption-size));
 
     border-width: 0;
   }
@@ -391,60 +396,126 @@
     display: none;
   }
 
-  /* 快捷选项也是一列，与时分秒那几列并排，排在行内起始一侧 */
+  /* 底栏：面板底部通栏的一条操作区，上沿一道 border-default 线与各列隔开，四周 8 的内衬；
+     独占一整行，落在快捷选项列与各列下面。
+     首个子节点落在撑满余宽的那条轨道上，其后的各自按内容宽排在行尾：作者另放的文字与链接排在行首，
+     「添加」总落在行尾；只放了「添加」时它独占那条轨道，靠 justify-self 贴到行尾。
+     底栏不参与撑宽：面板换行排布时，Chrome 把每个子项的固有宽相加当作面板的固有宽，
+     底栏的字与钮会把面板多撑出一截、最后一列末端空出一块。inline-size 包含让它的内容不计入固有宽，
+     行内内衬也就不能写在它自己身上（内衬照样计入），改由两端各一个定宽占位让出（见下面那条） */
+  .xh-scope-time-picker[data-part='footer'] {
+    /* 两端占位的宽：占位与相邻项之间本来就隔着一道 gap，占位自己只补到内衬的差额 */
+    --xh-_time-picker-footer-inset: max(
+      var(--xh-space-0),
+      calc(var(--xh-time-picker-footer-px, var(--xh-space-2)) - var(--xh-time-picker-footer-gap, var(--xh-space-2)))
+    );
+
+    display: grid;
+    contain: inline-size;
+    flex-basis: 100%;
+    grid-auto-flow: column;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: center;
+    gap: var(--xh-time-picker-footer-gap, var(--xh-space-2));
+    padding-block: var(--xh-time-picker-footer-py, var(--xh-space-2));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-time-picker-footer-border, var(--xh-material-solid-border));
+    color: var(--xh-time-picker-footer-fg, var(--xh-fg-muted));
+    font-size: var(--xh-time-picker-footer-font-size, var(--xh-text-caption-size));
+  }
+
+  /* 上面给了 display，UA 的 [hidden]{display:none} 已被盖掉，这里补回来 */
+  .xh-scope-time-picker[data-part='footer'][hidden] {
+    display: none;
+  }
+
+  /* 底栏里只放了「添加」、而「添加」按状态收起（单选）时，底栏一并让位，不留一条空栏 */
+  .xh-scope-time-picker[data-part='footer']:has(> .xh-scope-time-picker[data-part='confirm-trigger'][hidden]:only-child) {
+    display: none;
+  }
+
+  .xh-scope-time-picker[data-part='footer'] > .xh-scope-time-picker[data-part='confirm-trigger'] {
+    justify-self: end;
+  }
+
+  /* 行首行尾的内衬由两端的定宽占位让出，不挂在首末子节点上：首个子节点可能是裸文本，
+     末一个可能是按状态收起的「添加」，外边距都接不住。占位与其余子项一样在 inline-size 包含之内，不计入面板的固有宽 */
+  .xh-scope-time-picker[data-part='footer']::before,
+  .xh-scope-time-picker[data-part='footer']::after {
+    content: '';
+    inline-size: var(--xh-_time-picker-footer-inset);
+  }
+
+  /* 行首占位落在那条撑满余宽的显式轨道之前（在它前面长出一条隐式列），首个子节点仍落在那条轨道上。
+     占位不进显式轨道：尺寸包含照样计入显式轨道与轨道间的 gap，多一条显式列面板就多撑出一道 gap */
+  .xh-scope-time-picker[data-part='footer']::before {
+    grid-column: span 1 / 1;
+  }
+
+  /* 快捷选项也是一列，与时分秒那几列并排，排在行内起始一侧；限高与时间列同一档 */
   .xh-scope-time-picker[data-part='preset-group'] {
     display: flex;
     flex: none;
     flex-direction: column;
-    gap: var(--xh-time-picker-preset-group-gap, var(--xh-list-option-gap));
-    max-block-size: var(--xh-time-picker-preset-group-h, var(--xh-viewport-h-sm));
-    padding-inline: var(--xh-time-picker-preset-group-px, var(--xh-space-1));
+    gap: var(--xh-time-picker-preset-group-gap, var(--xh-space-1));
+    max-block-size: var(--xh-time-picker-preset-group-h, var(--xh-overlay-time-column-h));
+    padding-block: var(--xh-time-picker-preset-group-py, var(--xh-space-2_5));
+    padding-inline: var(--xh-time-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-picker-column-divider, var(--xh-material-solid-separator));
+    border-inline-end: var(--xh-stroke-thin) solid var(--xh-time-picker-column-divider, var(--xh-material-solid-border));
   }
 
   .xh-scope-time-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-picker[data-part='preset'] {
-    --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-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));
-    --xh-collection-fg-keyboard-highlight: var(--xh-time-picker-preset-fg, var(--xh-fg-default));
-    --xh-collection-fg-pressed: var(--xh-time-picker-preset-fg, var(--xh-fg-default));
-    --xh-collection-fg-selected: var(--xh-time-picker-preset-fg-checked, var(--xh-time-picker-preset-fg, var(--xh-fg-default)));
-    --xh-collection-fg-selected-highlight: var(--xh-time-picker-preset-fg-checked, var(--xh-time-picker-preset-fg, var(--xh-fg-default)));
-    --xh-collection-fg-selected-hover: var(--xh-time-picker-preset-fg-checked, var(--xh-time-picker-preset-fg, var(--xh-fg-default)));
-    --xh-collection-fg-selected-pressed: var(--xh-time-picker-preset-fg-checked, var(--xh-time-picker-preset-fg, var(--xh-fg-default)));
+    --xh-collection-block-padding: 0;
+    --xh-collection-inline-padding: var(--xh-time-picker-preset-px, var(--xh-space-2));
+    --xh-collection-font-size: var(--xh-time-picker-preset-font-size, var(--xh-text-caption-size));
+    --xh-collection-radius: var(--xh-time-picker-preset-radius, var(--xh-shape-control));
+    --xh-collection-fg-rest: var(--xh-time-picker-preset-fg, var(--xh-fg-muted));
+    --xh-collection-fg-selected: var(--xh-time-picker-preset-fg, var(--xh-fg-muted));
+    /* 悬停 / 高亮 / 按下时字换正文色：底升到 200 / 300 之后，次级前景在暗色下不足 4.5:1 */
+    --xh-collection-fg-hover: var(--xh-time-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-keyboard-highlight: var(--xh-time-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-pressed: var(--xh-time-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-selected-highlight: var(--xh-time-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-selected-hover: var(--xh-time-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-selected-pressed: var(--xh-time-picker-preset-fg-hover, var(--xh-fg-default));
     --xh-collection-fg-disabled: var(--xh-time-picker-preset-fg-disabled, var(--xh-fg-disabled));
-    --xh-collection-bg-hover: var(--xh-time-picker-preset-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-keyboard-highlight: var(--xh-time-picker-preset-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-selected-highlight: var(--xh-time-picker-preset-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-selected-hover: var(--xh-time-picker-preset-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-pressed: var(--xh-time-picker-preset-bg-pressed, var(--xh-bg-subtle-hover));
-    --xh-collection-bg-selected-pressed: var(--xh-time-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-picker-preset-bg, var(--xh-bg-subtle));
+    --xh-collection-bg-selected: var(--xh-time-picker-preset-bg, var(--xh-bg-subtle));
+    --xh-collection-bg-hover: var(--xh-time-picker-preset-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-keyboard-highlight: var(--xh-time-picker-preset-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-selected-highlight: var(--xh-time-picker-preset-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-selected-hover: var(--xh-time-picker-preset-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-pressed: var(--xh-time-picker-preset-bg-pressed, var(--xh-bg-subtle-active));
+    --xh-collection-bg-selected-pressed: var(--xh-time-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-picker-preset-h, var(--xh-control-action-size));
     /* 对号的末端轨始终留着，切换选中时文字与整列宽度都不移动。 */
     padding-inline-end: calc(
-      var(--xh-time-picker-preset-px, var(--xh-space-3))
-      + var(--xh-time-picker-preset-check-size, var(--xh-control-indicator-size))
+      var(--xh-time-picker-preset-px, var(--xh-space-2))
+      + var(--xh-time-picker-preset-check-size, var(--xh-control-indicator-sm))
       + var(--xh-space-1)
     );
+    /* 一行字在 24 高的钮里垂直居中 */
+    line-height: var(--xh-time-picker-preset-h, var(--xh-control-action-size));
     white-space: nowrap;
     user-select: none;
   }
@@ -462,9 +533,9 @@
     content: '';
     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-control-indicator-size));
-    block-size: var(--xh-time-picker-preset-check-size, var(--xh-control-indicator-size));
+    inset-inline-end: var(--xh-time-picker-preset-px, var(--xh-space-2));
+    inline-size: var(--xh-time-picker-preset-check-size, var(--xh-control-indicator-sm));
+    block-size: var(--xh-time-picker-preset-check-size, var(--xh-control-indicator-sm));
     background-color: var(--xh-time-picker-preset-check-fg, var(--xh-_time-picker-check-fg));
     opacity: 0;
     translate: 0 -50%;
@@ -488,15 +559,21 @@
     background-color: var(--xh-time-picker-preset-fg-disabled, var(--xh-fg-disabled));
   }
 
-  /* 一列一个滚动区：列与列之间用细分隔线，视觉上"时 | 分 | 秒"三栏分明 */
+  /* 一列一个滚动区：列与列之间用细分隔线，视觉上"时 | 分 | 秒"三栏分明。列宽取时间列档（两位数字加两侧对号轨），
+     列高是七格整行；列顶留 4，列底留出一截空白，末尾几格（23 时、55–59 分）也能滚到列顶，各列的选中落在同一行 */
   .xh-scope-time-picker[data-part='column'] {
+    --xh-_time-picker-column-h: var(--xh-time-picker-column-h, var(--xh-overlay-time-column-h));
+    --xh-_time-picker-column-py: var(--xh-time-picker-column-py, var(--xh-space-1));
+
     display: flex;
     flex: none;
     flex-direction: column;
-    gap: var(--xh-time-picker-column-gap, 0);
-    min-inline-size: var(--xh-time-picker-column-min-w, var(--xh-overlay-column-min-w));
+    gap: var(--xh-time-picker-column-gap, var(--xh-space-2));
+    min-inline-size: var(--xh-time-picker-column-min-w, var(--xh-overlay-time-column-w));
     /* 几列并排：定高而不是随内容收，否则时列与分列的可选值一多一少就错位 */
-    block-size: var(--xh-time-picker-column-h, var(--xh-viewport-h-sm));
+    block-size: var(--xh-_time-picker-column-h);
+    padding-block: var(--xh-_time-picker-column-py)
+      calc(var(--xh-_time-picker-column-h) - var(--xh-time-picker-item-h, var(--xh-control-action-size)) - var(--xh-_time-picker-column-py));
     padding-inline: var(--xh-time-picker-column-px, 0);
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
@@ -511,7 +588,7 @@
 
   /* 每列后面紧跟着它自己的贴层条子节点，相邻选择器接不到下一列，按「前面有过列」取第二列起 */
   .xh-scope-time-picker[data-part='column'] ~ .xh-scope-time-picker[data-part='column'] {
-    border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-picker-column-divider, var(--xh-material-solid-separator));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-picker-column-divider, var(--xh-material-solid-border));
   }
 
   /* 焦点落在列上有两种情形：指针打开、这一段还空着、还没有任何格当锚点，或整列被界裁空。
@@ -525,8 +602,8 @@
     outline: none;
   }
 
-  /* 时间格：悬停 / 高亮 100、按下 200 由 Collection Item 家族按 overlay 语境给，选中只留末端对号——
-     浮层瞬态集合的选中不上品牌淡底、不加粗、不变字色。格里只有数字、没有正文部件，保持自己的
+  /* 时间格：24 高的通栏条，列内间距 8 撑出 32 的行距；悬停 / 高亮 100、按下 200 由 Collection Item 家族按
+     overlay 语境给，选中透明底 + 中等字重 + 末端对号（对号集合的选中），不上品牌淡底、不变字色。格里只有数字、没有正文部件，保持自己的
      居中排版与等宽标记轨，家族只给状态面。行的字色与字重按值选择族的同一套映射写（--xh-time-picker-item-fg
      / -fg-selected / -font-weight-selected 使用者槽，缺省落家族配方的行字色 --xh-material-frosted-fg：
      它在各主题与 forced-colors 下都等于 --xh-fg-default，floating 面板上的面色仍由 content 自己给） */
@@ -535,11 +612,12 @@
       var(--xh-time-picker-item-px, 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, var(--xh-_time-picker-item-py));
+    --xh-collection-block-padding: 0;
     /* 两侧留同宽轨：对号绝对落在末端，数字仍在整格的数学中心。 */
     --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-inset));
+    /* 浮层里的列表是通栏行：格铺满列宽、不取圆角 */
+    --xh-collection-radius: var(--xh-time-picker-item-radius, 0);
     --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));
@@ -548,10 +626,10 @@
     --xh-collection-fg-selected-highlight: var(--xh-time-picker-item-fg-selected, var(--xh-time-picker-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-selected-hover: var(--xh-time-picker-item-fg-selected, var(--xh-time-picker-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-selected-pressed: var(--xh-time-picker-item-fg-selected, var(--xh-time-picker-item-fg, var(--xh-material-frosted-fg)));
-    --xh-collection-font-weight-selected: var(--xh-time-picker-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-highlight: var(--xh-time-picker-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-hover: var(--xh-time-picker-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-pressed: var(--xh-time-picker-item-font-weight-selected, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-selected: var(--xh-time-picker-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-highlight: var(--xh-time-picker-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-hover: var(--xh-time-picker-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-pressed: var(--xh-time-picker-item-font-weight-selected, var(--xh-font-weight-medium));
     --xh-collection-bg-hover: var(--xh-time-picker-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-keyboard-highlight: var(--xh-time-picker-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-selected-highlight: var(--xh-time-picker-item-bg-hover, var(--xh-bg-subtle));
@@ -566,7 +644,7 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    block-size: var(--xh-time-picker-item-h, auto);
+    block-size: var(--xh-time-picker-item-h, var(--xh-control-action-size));
     /* 居中的单个数字格没有截断层，行高保持紧排，列内多露几格 */
     line-height: var(--xh-leading-normal);
     white-space: nowrap;
@@ -582,6 +660,14 @@
   }
 
   /* 作者自己藏掉某几格时要让位，有 display 就得补这条 */
+  /* 命中区向上下各补半个列内间距：两格之间那 8px 缝归上下两格各一半，指针落在缝里不落空 */
+  .xh-scope-time-picker[data-part='item']::before {
+    content: '';
+    position: absolute;
+    inset-block: calc(-0.5 * var(--xh-time-picker-column-gap, var(--xh-space-2)));
+    inset-inline: 0;
+  }
+
   .xh-scope-time-picker[data-part='item'][hidden] {
     display: none;
   }