@xihan-ui/styles 3.1.0 → 4.0.0

package/css/date-field.css

@@ -63,7 +63,9 @@
   }
 
   [data-scope='date-field'][data-part='label'] {
-    color: var(--xh-date-field-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-date-field-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-date-field-label-gap, var(--xh-space-2)) - var(--xh-date-field-gap, var(--xh-space-1)));
+    color: var(--xh-date-field-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-date-field-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-date-field-label-font-weight, var(--xh-text-label-weight));
   }
@@ -73,7 +75,7 @@
   }
 
   [data-scope='date-field'][data-part='label'][data-disabled] {
-    color: var(--xh-date-field-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-date-field-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 分段框整体长得像一个输入框：描边、底色、圆角、聚焦环、五态与悬停由 Field Chrome 家族画在
@@ -93,8 +95,6 @@
     --xh-field-border-hover: var(--xh-date-field-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-date-field-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-date-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-date-field-control-shadow, none);
     --xh-field-cursor-rest: default;
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
@@ -130,8 +130,14 @@
     color: transparent;
   }
 
-  [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown] > * {
-    opacity: 0;
+  /* 段位与分隔符（后者是不带解剖的文字节点）一起淡出：显隐写在 segment-group 自己的私有槽上，
+     子节点只读槽——主体无特征的规则不挂在 data-placeholder-shown 后面，输入时翻转只让这一组失效 */
+  [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown] {
+    --xh-_date-field-segment-opacity: 0;
+  }
+
+  [data-scope='date-field'][data-part='segment-group'] > * {
+    opacity: var(--xh-_date-field-segment-opacity, 1);
   }
 
   [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown]::before {

package/css/date-picker.css

@@ -74,7 +74,6 @@
     --xh-_date-picker-control-px: var(--xh-control-px-md);
     --xh-_date-picker-gap: var(--xh-control-gap-md);
     --xh-_date-picker-font-size: var(--xh-control-font-md);
-    --xh-_date-picker-item-py: var(--xh-list-option-py-md);
 
     /* 选中对号随语气走。没写 data-tone 时这几个 --xh-_tone* 没被声明，退回品牌色 */
     /* 内嵌日期段沿用日期输入的轻强调焦点：当前段是「当前项」，淡底 + 淡底前景，不另画一套实心选择态。 */
@@ -110,7 +109,6 @@
     --xh-_date-picker-control-px: var(--xh-control-px-sm);
     --xh-_date-picker-gap: var(--xh-control-gap-sm);
     --xh-_date-picker-font-size: var(--xh-control-font-sm);
-    --xh-_date-picker-item-py: var(--xh-list-option-py-sm);
   }
 
   [data-scope='date-picker']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
@@ -119,7 +117,6 @@
     --xh-_date-picker-control-px: var(--xh-control-px-lg);
     --xh-_date-picker-gap: var(--xh-control-gap-lg);
     --xh-_date-picker-font-size: var(--xh-control-font-lg);
-    --xh-_date-picker-item-py: var(--xh-list-option-py-lg);
   }
 
   /* 375px 复合面板要同时容下日历与时/分两列；手机档用正式小指示符，平板起恢复16px。 */
@@ -135,7 +132,9 @@
   }
 
   [data-scope='date-picker'][data-part='label'] {
-    color: var(--xh-date-picker-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-date-picker-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-date-picker-label-gap, var(--xh-space-2)) - var(--xh-date-picker-gap, var(--xh-space-1)));
+    color: var(--xh-date-picker-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-date-picker-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-date-picker-label-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
@@ -146,7 +145,7 @@
   }
 
   [data-scope='date-picker'][data-part='label'][data-disabled] {
-    color: var(--xh-date-picker-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-date-picker-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 画成一个框的是 control 而不是 input：段位、清空按钮、日历按钮三者要看起来是一体的，
@@ -168,8 +167,6 @@
     --xh-field-border-hover: var(--xh-date-picker-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-date-picker-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-date-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-date-picker-control-shadow, none);
     /* 段位靠键盘编辑，盒上不是文本光标 */
     --xh-field-cursor-rest: default;
@@ -211,8 +208,14 @@
     color: transparent;
   }
 
-  [data-scope='date-picker'][data-part='segment-group'][data-placeholder-shown] > * {
-    opacity: 0;
+  /* 段位与分隔符（后者是不带解剖的文字节点）一起淡出：显隐写在 segment-group 自己的私有槽上，
+     子节点只读槽——主体无特征的规则不挂在 data-placeholder-shown 后面，输入时翻转只让这一组失效 */
+  [data-scope='date-picker'][data-part='segment-group'][data-placeholder-shown] {
+    --xh-_date-picker-segment-opacity: 0;
+  }
+
+  [data-scope='date-picker'][data-part='segment-group'] > * {
+    opacity: var(--xh-_date-picker-segment-opacity, 1);
   }
 
   [data-scope='date-picker'][data-part='segment-group'][data-placeholder-shown]::before {
@@ -316,21 +319,22 @@
   }
 
   /* 浮层：含日历网格与时间列的锚定面板，走 floating 材质——实体底 + --xh-border-default 描边 +
-     --xh-elevation-floating 落影，不透景、不画顶光 */
+     --xh-elevation-floating 落影，不透景、不画顶光。面板自己不留内衬：标题栏、网格、快捷选项列与时间列各带内衬，
+     分隔线才能从面板一边通到另一边 */
   [data-scope='date-picker'][data-part='content'] {
     position: relative;
     display: block;
     /* 行内轴只有落位后的可用宽度这一个上限：不夹住，浮层就会被定位层的包含块压窄，
        网格轨道跟着缩到比日期钮还窄，相邻两颗日期钮互相盖住 */
     max-inline-size: var(--xh-_date-picker-available-w);
-    padding-block: var(--xh-date-picker-content-py, var(--xh-space-2));
-    padding-inline: var(--xh-date-picker-content-px, var(--xh-space-2));
+    padding-block: var(--xh-date-picker-content-py, var(--xh-space-0));
+    padding-inline: var(--xh-date-picker-content-px, var(--xh-space-0));
     border: var(--xh-stroke-thin) solid var(--xh-date-picker-content-border, var(--xh-border-default));
     border-radius: var(--xh-date-picker-content-radius, var(--xh-shape-overlay));
     background: var(--xh-date-picker-content-bg, var(--xh-bg-surface));
     color: var(--xh-date-picker-content-fg, var(--xh-fg-default));
-    /* 日历是定高结构：网格、时间列与确认行都按 px 排，天然高度就是它们的和，缺省不另设上限
-       （按 rem 的滚动面档会随根字号缩小，根字号低于 16px 时确认行就被挤到滚动里）；
+    /* 日历是定高结构：网格、时间列与底栏都按 px 排，天然高度就是它们的和，缺省不另设上限
+       （按 rem 的滚动面档会随根字号缩小，根字号低于 16px 时底栏就被挤到滚动里）；
        可用高度是定位引擎算出的视口余量，视口真放不下时再收一截 */
     max-block-size: min(var(--xh-date-picker-max-h, var(--xh-_date-picker-available-h)), var(--xh-_date-picker-available-h));
     /* 两轴都滚：块轴放不下时面板内自己竖滚，行内轴放不下时面板内自己横滚，
@@ -371,7 +375,7 @@
      [data-scope='calendar-picker'][data-part='root'] 上，而这里没有那个节点，
      所以网格外层该有的排布得在这儿补齐（网格内部的皮仍归 calendar-picker 那一份） */
   /* 真的摆了两张日历才横过来。写成 :has 而不是无条件 flex 行:
-     showTime 那套结构里 content 直属子节点是作者自己的包裹块与确认行,
+     showTime 那套结构里 content 直属子节点是作者自己的包裹块与底栏,
      无条件横排会把它们并到日历旁边去。
      不加 :not([hidden])：content 收起态带 hidden 但仍在播退场动画，
      排除掉会让它在那几帧退回 block、两张日历竖着堆一下。
@@ -400,43 +404,15 @@
     align-items: flex-start;
   }
 
-  /* 确认按钮沉到所在那一行的底边：它是整块面板的出口，不跟日历顶边对齐 */
-  [data-scope='date-picker'][data-part='content']:has(> [data-part='time-column']) > [data-part='confirm-trigger'] {
+  /* 确认按钮沉到所在那一行的底边：它是整块面板的出口，不跟日历顶边对齐。面板不留内衬，
+     钮自己与底边、末边各让一档空当 */
+  [data-scope='date-picker'][data-part='content']:has(> [data-part='time-column']) > [data-part='confirm-trigger']:where([data-scope='date-picker']) {
     align-self: flex-end;
+    margin: var(--xh-date-picker-confirm-trigger-margin, var(--xh-space-2));
   }
 
-  /* 第二个起的面板画一道分隔线：两张网格挨着排时要有条界，
-     否则 8 月末与 9 月初那两列看着像同一张表。
-     手机档两张月历折行堆叠，线画在块起始边 */
-  [data-scope='date-picker'][data-part='calendar'] + [data-scope='date-picker'][data-part='calendar'] {
-    padding-block-start: var(--xh-date-picker-panel-gap, var(--xh-space-3));
-    border-block-start: var(--xh-stroke-thin) solid var(--xh-date-picker-panel-divider, var(--xh-material-solid-separator));
-  }
-
-  /* 平板起两张月历并排放得下，线改画在行内起始边 */
-  @media (min-width: 768px) {
-    [data-scope='date-picker'][data-part='calendar'] + [data-scope='date-picker'][data-part='calendar'] {
-      padding-block-start: 0;
-      padding-inline-start: var(--xh-date-picker-panel-gap, var(--xh-space-3));
-      border-block-start: none;
-      border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-picker-panel-divider, var(--xh-material-solid-separator));
-    }
-  }
-
-  /* 快捷选项与它旁边那张日历之间留出同样的空当。
-     手机档选项条在上、日历在下，空当留在块轴。
-     选项列后面紧跟着它自己的两条条子节点，相邻选择器接不到日历，按「前面有过选项列」取日历 */
-  [data-scope='date-picker'][data-part='preset-group'] ~ [data-scope='date-picker'][data-part='calendar'] {
-    padding-block-start: var(--xh-date-picker-panel-gap, var(--xh-space-3));
-  }
-
-  /* 平板起选项列回到日历一侧，空当跟着回到行内轴，两道分隔线左右对称 */
-  @media (min-width: 768px) {
-    [data-scope='date-picker'][data-part='preset-group'] ~ [data-scope='date-picker'][data-part='calendar'] {
-      padding-block-start: 0;
-      padding-inline-start: var(--xh-date-picker-panel-gap, var(--xh-space-3));
-    }
-  }
+  /* 两张日历并排时不画竖线、不另留空当：各自左右 16 的内衬合成 32 的空白就是两张网格的界，
+     两条标题栏的下沿分隔线首尾相接连成一条 */
 
   [data-scope='date-picker'][data-part='calendar'] {
     display: flex;
@@ -444,11 +420,18 @@
        撑出去的那截交给面板自己横滚 */
     min-inline-size: max-content;
     flex-direction: column;
-    gap: var(--xh-date-picker-calendar-gap, var(--xh-space-2));
+    gap: var(--xh-date-picker-calendar-gap, var(--xh-space-0));
     /* 数字等宽：1 与 7 的字形宽度在比例字体里并不相同，不定住会让整张网格随月份抖动 */
     font-variant-numeric: tabular-nums;
   }
 
+  /* 浮层里的日历标题取常规字重：面板标题栏只是年月的读数，不压过网格 */
+  [data-scope='date-picker'][data-part='calendar'] [data-scope='calendar-picker'][data-part='heading'],
+  [data-scope='date-picker'][data-part='calendar'] [data-scope='calendar-picker'][data-part='heading-year-trigger'],
+  [data-scope='date-picker'][data-part='calendar'] [data-scope='calendar-picker'][data-part='heading-month-trigger'] {
+    font-weight: var(--xh-date-picker-heading-font-weight, var(--xh-font-weight-regular));
+  }
+
   [data-scope='date-picker'][data-part='calendar']:has(+ [data-part='time-column']) {
     position: relative;
   }
@@ -459,7 +442,7 @@
     inset-block: 0;
     inset-inline-end: calc(-1 * var(--xh-stroke-thin));
     inline-size: var(--xh-stroke-thin);
-    background: var(--xh-date-picker-column-divider, var(--xh-material-solid-separator));
+    background: var(--xh-date-picker-column-divider, var(--xh-material-solid-border));
     pointer-events: none;
   }
 
@@ -476,15 +459,16 @@
     /* 这一条的另一轴由并排的那块给：不写就按内容收，分隔线只画到最后一条选项 */
     align-self: stretch;
     flex-direction: row;
-    gap: var(--xh-date-picker-preset-group-gap, var(--xh-list-option-gap));
+    gap: var(--xh-date-picker-preset-group-gap, var(--xh-space-1));
     /* 选项多起来时这一条自己滚，不把整张面板撑大 */
     max-block-size: var(--xh-date-picker-preset-group-h, var(--xh-viewport-h-lg));
-    padding: var(--xh-date-picker-preset-group-padding, var(--xh-space-1));
+    padding-block: var(--xh-date-picker-preset-group-py, var(--xh-space-2_5));
+    padding-inline: var(--xh-date-picker-preset-group-px, var(--xh-space-2));
     overflow-x: auto;
     overflow-y: hidden;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-material-solid-separator));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-material-solid-border));
   }
 
   /* 平板起：换成贴在日历行内起始一侧的竖列，滚动轴与分隔线一起转过来 */
@@ -494,7 +478,7 @@
       flex-direction: column;
       overflow: auto;
       border-block-end: none;
-      border-inline-end: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-material-solid-separator));
+      border-inline-end: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-material-solid-border));
     }
   }
 
@@ -502,30 +486,37 @@
     display: none;
   }
 
-  /* 快捷选项：悬停 / 高亮 100、按下 200、禁用面由 Collection Item 家族按 overlay 语境给（选中 = 透明底 +
-     行尾对号，正文保持 rest 色与常规字重）。选项没有正文部件，匿名文本进不了家族网格的 text 列，
-     行保持块级排版，末端为对号预留固定轨 */
+  /* 快捷选项：每一项是一颗 24 高的淡底小钮——静息 100、悬停 / 高亮 200、按下 300（淡底承载阶梯），
+     字取说明档 12px、次级前景；禁用面由 Collection Item 家族按 overlay 语境给。headless 把它投成 listbox 的
+     option、当前值落在哪一项就报 aria-selected，选中仍画行尾对号（面与字不变），对号是这条状态唯一的视觉通道。
+     选项没有正文部件，匿名文本进不了家族网格的 text 列，行保持块级排版，末端为对号预留固定轨 */
   [data-scope='date-picker'][data-part='preset'] {
-    --xh-collection-block-padding: var(--xh-date-picker-preset-py, var(--xh-space-1));
-    --xh-collection-inline-padding: var(--xh-date-picker-preset-px, var(--xh-space-3));
-    --xh-collection-font-size: var(--xh-text-secondary-size);
-    --xh-collection-radius: var(--xh-date-picker-preset-radius, var(--xh-shape-inset));
-    /* 面板是实体面（floating），正文取页面前景 */
-    --xh-collection-fg-rest: var(--xh-fg-default);
-    --xh-collection-fg-hover: var(--xh-fg-default);
-    --xh-collection-fg-keyboard-highlight: var(--xh-fg-default);
-    --xh-collection-fg-pressed: var(--xh-fg-default);
-    --xh-collection-fg-selected: var(--xh-date-picker-preset-fg-selected, var(--xh-fg-default));
-    --xh-collection-fg-selected-highlight: var(--xh-date-picker-preset-fg-selected, var(--xh-fg-default));
-    --xh-collection-fg-selected-hover: var(--xh-date-picker-preset-fg-selected, var(--xh-fg-default));
-    --xh-collection-fg-selected-pressed: var(--xh-date-picker-preset-fg-selected, var(--xh-fg-default));
+    --xh-collection-block-padding: 0;
+    --xh-collection-inline-padding: var(--xh-date-picker-preset-px, var(--xh-space-2));
+    --xh-collection-font-size: var(--xh-date-picker-preset-font-size, var(--xh-text-caption-size));
+    --xh-collection-radius: var(--xh-date-picker-preset-radius, var(--xh-shape-control));
+    --xh-collection-fg-rest: var(--xh-date-picker-preset-fg, var(--xh-fg-muted));
+    --xh-collection-fg-selected: var(--xh-date-picker-preset-fg, var(--xh-fg-muted));
+    /* 悬停 / 高亮 / 按下时字换正文色：底升到 200 / 300 之后，次级前景在暗色下不足 4.5:1 */
+    --xh-collection-fg-hover: var(--xh-date-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-keyboard-highlight: var(--xh-date-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-pressed: var(--xh-date-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-selected-highlight: var(--xh-date-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-selected-hover: var(--xh-date-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-selected-pressed: var(--xh-date-picker-preset-fg-hover, var(--xh-fg-default));
     --xh-collection-fg-disabled: var(--xh-date-picker-preset-fg-disabled, var(--xh-fg-disabled));
-    --xh-collection-bg-hover: var(--xh-date-picker-preset-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-keyboard-highlight: var(--xh-date-picker-preset-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-selected-highlight: var(--xh-date-picker-preset-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-selected-hover: var(--xh-date-picker-preset-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-pressed: var(--xh-date-picker-preset-bg-pressed, var(--xh-bg-subtle-hover));
-    --xh-collection-bg-selected-pressed: var(--xh-date-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-date-picker-preset-bg, var(--xh-bg-subtle));
+    --xh-collection-bg-selected: var(--xh-date-picker-preset-bg, var(--xh-bg-subtle));
+    --xh-collection-bg-hover: var(--xh-date-picker-preset-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-keyboard-highlight: var(--xh-date-picker-preset-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-selected-highlight: var(--xh-date-picker-preset-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-selected-hover: var(--xh-date-picker-preset-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-pressed: var(--xh-date-picker-preset-bg-pressed, var(--xh-bg-subtle-active));
+    --xh-collection-bg-selected-pressed: var(--xh-date-picker-preset-bg-pressed, var(--xh-bg-subtle-active));
     --xh-collection-outline-keyboard-highlight: transparent;
     --xh-collection-outline-selected-highlight: transparent;
 
@@ -533,12 +524,15 @@
     position: relative;
     display: block;
     flex: none;
+    block-size: var(--xh-date-picker-preset-h, var(--xh-control-action-size));
     /* 对号的末端轨始终留着，切换选中时文字与整列宽度都不移动。 */
     padding-inline-end: calc(
-      var(--xh-date-picker-preset-px, var(--xh-space-3)) +
-        var(--xh-date-picker-preset-check-size, var(--xh-control-indicator-size)) +
+      var(--xh-date-picker-preset-px, var(--xh-space-2)) +
+        var(--xh-date-picker-preset-check-size, var(--xh-control-indicator-sm)) +
         var(--xh-space-1)
     );
+    /* 一行字在 24 高的钮里垂直居中 */
+    line-height: var(--xh-date-picker-preset-h, var(--xh-control-action-size));
     white-space: nowrap;
     user-select: none;
   }
@@ -560,9 +554,9 @@
     content: '';
     position: absolute;
     inset-block-start: 50%;
-    inset-inline-end: var(--xh-date-picker-preset-px, var(--xh-space-3));
-    inline-size: var(--xh-date-picker-preset-check-size, var(--xh-control-indicator-size));
-    block-size: var(--xh-date-picker-preset-check-size, var(--xh-control-indicator-size));
+    inset-inline-end: var(--xh-date-picker-preset-px, var(--xh-space-2));
+    inline-size: var(--xh-date-picker-preset-check-size, var(--xh-control-indicator-sm));
+    block-size: var(--xh-date-picker-preset-check-size, var(--xh-control-indicator-sm));
     translate: 0 -50%;
     background-color: var(--xh-date-picker-preset-check-fg, var(--xh-_date-picker-check-fg));
     opacity: 0;
@@ -581,34 +575,49 @@
   }
 
   /* —— showTime：时间列贴在日历右侧、逐列滚动，确认按钮收口 ——
-     content 是 block，作者把日历与时间列包进一行排布；列自身只管滚与选项画法 */
+     content 是 block，作者把日历与时间列包进一行排布；列自身只管滚与选项画法。
+     列顶让出与日历标题栏等高的一带（不含它下沿那道线；作者改了标题栏的内衬就同步改 --xh-date-picker-time-column-offset），列自己的上沿描边接着标题栏的分隔线画过去，
+     两段连成一条；列与列之间不画线，日历与时间区之间那道竖线由日历的 ::after 画。
+     列高与日历网格同高（再加列顶那道线），列底与网格底边对齐 */
   [data-scope='date-picker'][data-part='time-column'] {
+    --xh-_date-picker-time-column-h: var(--xh-date-picker-time-column-h, var(--xh-overlay-calendar-column-h));
+    --xh-_date-picker-time-column-py: var(--xh-date-picker-time-column-py, var(--xh-space-1));
+
     display: flex;
     flex: none;
     flex-direction: column;
-    gap: var(--xh-date-picker-time-column-gap, 0);
+    gap: var(--xh-date-picker-time-column-gap, var(--xh-space-2));
     min-inline-size: var(--xh-date-picker-time-column-min-w, var(--xh-overlay-column-min-w));
     /* 几列并排：定高而不是随内容收，否则时列与分列的可选值一多一少就错位 */
-    block-size: var(--xh-date-picker-time-column-h, var(--xh-overlay-calendar-column-h));
+    block-size: calc(var(--xh-_date-picker-time-column-h) + var(--xh-stroke-thin));
     margin-block-start: var(
       --xh-date-picker-time-column-offset,
-      calc(var(--xh-control-h-sm) + var(--xh-date-picker-calendar-gap, var(--xh-space-2)))
+      calc(var(--xh-control-action-size) + 2 * var(--xh-space-2))
     );
-    padding-block: var(--xh-date-picker-time-column-padding, var(--xh-space-1));
+    /* 列底留出一截空白：末尾几格（23 时、55–59 分）也能滚到列顶，各列的选中落在同一行 */
+    padding-block: var(--xh-_date-picker-time-column-py)
+      calc(var(--xh-_date-picker-time-column-h) - var(--xh-date-picker-time-item-h, var(--xh-control-action-size)) - var(--xh-_date-picker-time-column-py));
     padding-inline: var(--xh-date-picker-time-column-px, 0);
     overflow-x: hidden;
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-material-solid-separator));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-material-solid-border));
   }
 
   [data-scope='date-picker'][data-part='time-column'][hidden] {
     display: none;
   }
 
-  /* 时间格：悬停 / 高亮 100、按下 200 由 Collection Item 家族按 overlay 语境给，选中只留末端对号——
-     浮层瞬态集合的选中不上品牌淡底、不加粗、不变字色。格里只有数字、没有正文部件，保持自己的
+  /* 粗指针下日历格长到 44 见方（行距从 36 加到 44），网格多出六行的那截；列高跟着加，列底仍与网格底边对齐 */
+  @media (pointer: coarse) {
+    [data-scope='date-picker'][data-part='time-column'] {
+      --xh-_date-picker-time-column-h: var(--xh-date-picker-time-column-h, var(--xh-overlay-calendar-column-h-coarse));
+    }
+  }
+
+  /* 时间格：24 高的通栏条，列内间距 8 撑出 32 的行距；悬停 / 高亮 100、按下 200 由 Collection Item 家族按
+     overlay 语境给，选中透明底 + 中等字重 + 末端对号（对号集合的选中），不上品牌淡底、不变字色。格里只有数字、没有正文部件，保持自己的
      居中排版与等宽标记轨，家族只给状态面。行的字色与字重按值选择族的同一套映射写（--xh-date-picker-time-item-fg
      / -fg-selected / -font-weight-selected 使用者槽，缺省落家族配方的行字色 --xh-material-frosted-fg：
      它在各主题与 forced-colors 下都等于 --xh-fg-default，floating 面板上的面色仍由 content 自己给） */
@@ -617,10 +626,11 @@
       var(--xh-date-picker-time-item-px, var(--xh-space-0_5)),
       calc(var(--xh-date-picker-time-item-check-size, var(--xh-_date-picker-time-item-check-size)) + var(--xh-space-0_5))
     );
-    --xh-collection-block-padding: var(--xh-date-picker-time-item-py, var(--xh-_date-picker-item-py));
+    --xh-collection-block-padding: 0;
     --xh-collection-inline-padding: var(--xh-_date-picker-time-item-rail);
     --xh-collection-font-size: var(--xh-date-picker-time-item-font-size, var(--xh-_date-picker-font-size));
-    --xh-collection-radius: var(--xh-date-picker-time-item-radius, var(--xh-shape-inset));
+    /* 浮层里的列表是通栏行：格铺满列宽、不取圆角 */
+    --xh-collection-radius: var(--xh-date-picker-time-item-radius, 0);
     --xh-collection-fg-rest: var(--xh-date-picker-time-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-date-picker-time-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-date-picker-time-item-fg, var(--xh-material-frosted-fg));
@@ -629,10 +639,10 @@
     --xh-collection-fg-selected-highlight: var(--xh-date-picker-time-item-fg-selected, var(--xh-date-picker-time-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-selected-hover: var(--xh-date-picker-time-item-fg-selected, var(--xh-date-picker-time-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-selected-pressed: var(--xh-date-picker-time-item-fg-selected, var(--xh-date-picker-time-item-fg, var(--xh-material-frosted-fg)));
-    --xh-collection-font-weight-selected: var(--xh-date-picker-time-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-highlight: var(--xh-date-picker-time-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-hover: var(--xh-date-picker-time-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-pressed: var(--xh-date-picker-time-item-font-weight-selected, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-selected: var(--xh-date-picker-time-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-highlight: var(--xh-date-picker-time-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-hover: var(--xh-date-picker-time-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-pressed: var(--xh-date-picker-time-item-font-weight-selected, var(--xh-font-weight-medium));
     --xh-collection-bg-hover: var(--xh-date-picker-time-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-keyboard-highlight: var(--xh-date-picker-time-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-selected-highlight: var(--xh-date-picker-time-item-bg-hover, var(--xh-bg-subtle));
@@ -647,7 +657,7 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    block-size: var(--xh-date-picker-time-item-h, auto);
+    block-size: var(--xh-date-picker-time-item-h, var(--xh-control-action-size));
     font-variant-numeric: tabular-nums;
     line-height: var(--xh-leading-normal);
     text-align: center;
@@ -655,6 +665,14 @@
     user-select: none;
   }
 
+  /* 命中区向上下各补半个列内间距：两格之间那 8px 缝归上下两格各一半，指针落在缝里不落空 */
+  [data-scope='date-picker'][data-part='time-item']::before {
+    content: '';
+    position: absolute;
+    inset-block: calc(-0.5 * var(--xh-date-picker-time-column-gap, var(--xh-space-2)));
+    inset-inline: 0;
+  }
+
   [data-scope='date-picker'][data-part='time-item'][hidden] {
     display: none;
   }
@@ -698,10 +716,6 @@
   }
 
   @media not all and (min-width: 768px) {
-    [data-scope='date-picker'][data-part='content'] {
-      padding-inline: var(--xh-date-picker-content-px, var(--xh-space-2));
-    }
-
     [data-scope='date-picker'][data-part='time-column'] {
       min-inline-size: var(--xh-date-picker-time-column-min-w-mobile, 2.75rem);
       padding-inline: var(--xh-date-picker-time-column-px-mobile, 0);
@@ -721,7 +735,7 @@
 
   /* 列整体禁用时格没有自己的 aria-disabled，禁用面按列的 aria-disabled 映射到家族槽：
      字色降级、悬停 / 高亮 / 按下不换面、光标 not-allowed */
-  [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item'] {
+  [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-picker']) {
     --xh-collection-fg-rest: var(--xh-fg-disabled);
     --xh-collection-fg-hover: var(--xh-fg-disabled);
     --xh-collection-fg-keyboard-highlight: var(--xh-fg-disabled);
@@ -740,15 +754,15 @@
     --xh-collection-cursor-selected: not-allowed;
   }
 
-  [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']::after {
+  [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-picker'])::after {
     background-color: var(--xh-fg-disabled);
   }
 
-  /* 确认钮是面板里唯一的主要动作：品牌实心、悬停 / 按下与 0.97 按压、焦点环全由 Action Control 的
-     text solid 档给；槽名统一按部件取 --xh-date-picker-confirm-trigger-*，只映射到家族桥接槽 */
+  /* 确认钮是面板里唯一的主要动作：品牌实心、悬停 / 按下换面、焦点环全由 Action Control 的 text solid 档给，
+     xs 档 24 高、字取说明档 12px；槽名统一按部件取 --xh-date-picker-confirm-trigger-*，只映射到家族桥接槽 */
   [data-scope='date-picker'][data-part='confirm-trigger'] {
     --xh-action-visual-size: var(--xh-date-picker-confirm-trigger-h, var(--xh-_action-profile-visual-size));
-    --xh-action-padding-inline: var(--xh-date-picker-confirm-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-padding-inline: var(--xh-date-picker-confirm-trigger-px, var(--xh-space-2));
     --xh-action-radius: var(--xh-date-picker-confirm-trigger-radius, var(--xh-shape-control));
     --xh-action-bg-rest: var(--xh-date-picker-confirm-trigger-bg, var(--xh-_action-variant-bg-rest));
     --xh-action-bg-hover: var(--xh-date-picker-confirm-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
@@ -761,7 +775,7 @@
     --xh-action-shadow-rest: var(--xh-date-picker-confirm-trigger-shadow, none);
     --xh-action-shadow-hover: var(--xh-date-picker-confirm-trigger-shadow, none);
     --xh-action-shadow-pressed: var(--xh-date-picker-confirm-trigger-shadow, none);
-    --xh-action-font-size: var(--xh-text-secondary-size);
+    --xh-action-font-size: var(--xh-date-picker-confirm-trigger-font-size, var(--xh-text-caption-size));
 
     border-width: 0;
   }
@@ -771,6 +785,61 @@
     display: none;
   }
 
+  /* 底栏：面板底部通栏的一条操作区，上沿一道 border-default 线与日历、时间列隔开，四周 8 的内衬；
+     面板换行排布（并排两张日历、快捷选项列、直接排在面板里的时间列）时独占一整行，落在它们下面。
+     首个子节点落在撑满余宽的那条轨道上，其后的各自按内容宽排在行尾：作者另放的文字与链接排在行首，
+     确认钮总落在行尾；只放了确认钮时它独占那条轨道，靠 justify-self 贴到行尾。
+     底栏不参与撑宽：面板换行排布时，Chrome 把每个子项的固有宽相加当作面板的固有宽，
+     底栏的字与钮会把面板多撑出一截、日历与时间列末端空出一块。inline-size 包含让它的内容不计入固有宽，
+     行内内衬也就不能写在它自己身上（内衬照样计入），改由两端各一个定宽占位让出（见下面那条） */
+  [data-scope='date-picker'][data-part='footer'] {
+    /* 两端占位的宽：占位与相邻项之间本来就隔着一道 gap，占位自己只补到内衬的差额 */
+    --xh-_date-picker-footer-inset: max(
+      var(--xh-space-0),
+      calc(var(--xh-date-picker-footer-px, var(--xh-space-2)) - var(--xh-date-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-date-picker-footer-gap, var(--xh-space-2));
+    padding-block: var(--xh-date-picker-footer-py, var(--xh-space-2));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-date-picker-footer-border, var(--xh-material-solid-border));
+    color: var(--xh-date-picker-footer-fg, var(--xh-fg-muted));
+    font-size: var(--xh-date-picker-footer-font-size, var(--xh-text-caption-size));
+  }
+
+  /* 上面给了 display，UA 的 [hidden]{display:none} 已被盖掉，这里补回来 */
+  [data-scope='date-picker'][data-part='footer'][hidden] {
+    display: none;
+  }
+
+  /* 底栏里只放了确认钮、而确认钮按状态收起（没开 showTime）时，底栏一并让位，不留一条空栏 */
+  [data-scope='date-picker'][data-part='footer']:has(> [data-scope='date-picker'][data-part='confirm-trigger'][hidden]:only-child) {
+    display: none;
+  }
+
+  [data-scope='date-picker'][data-part='footer'] > [data-scope='date-picker'][data-part='confirm-trigger'] {
+    justify-self: end;
+  }
+
+  /* 行首行尾的内衬由两端的定宽占位让出，不挂在首末子节点上：首个子节点可能是裸文本，
+     末一个可能是按状态收起的确认钮，外边距都接不住。占位与其余子项一样在 inline-size 包含之内，不计入面板的固有宽 */
+  [data-scope='date-picker'][data-part='footer']::before,
+  [data-scope='date-picker'][data-part='footer']::after {
+    content: '';
+    inline-size: var(--xh-_date-picker-footer-inset);
+  }
+
+  /* 行首占位落在那条撑满余宽的显式轨道之前（在它前面长出一条隐式列），首个子节点仍落在那条轨道上。
+     占位不进显式轨道：尺寸包含照样计入显式轨道与轨道间的 gap，多一条显式列面板就多撑出一道 gap */
+  [data-scope='date-picker'][data-part='footer']::before {
+    grid-column: span 1 / 1;
+  }
+
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
   [data-scope='date-picker'][data-part='clear-trigger']:empty::before {
     content: '';
@@ -820,13 +889,13 @@
 
     [data-scope='date-picker'][data-part='preset'][data-disabled]::after,
     [data-scope='date-picker'][data-part='time-item'][data-disabled]::after,
-    [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']::after {
+    [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-picker'])::after {
       background-color: GrayText;
     }
 
     [data-scope='date-picker'][data-part='preset'][data-disabled],
     [data-scope='date-picker'][data-part='time-item'][data-disabled],
-    [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item'] {
+    [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-picker']) {
       color: GrayText;
     }
   }