@xihan-ui/styles 3.1.0 → 4.0.0

package/css/date-range-picker.css

@@ -73,7 +73,6 @@
     --xh-_date-range-picker-control-px: var(--xh-control-px-md);
     --xh-_date-range-picker-gap: var(--xh-control-gap-md);
     --xh-_date-range-picker-font-size: var(--xh-control-font-md);
-    --xh-_date-range-picker-item-py: var(--xh-list-option-py-md);
 
     /* 选中对号随语气走。没写 data-tone 时这几个 --xh-_tone* 没被声明，退回品牌色 */
     /* 内嵌日期段沿用日期输入的轻强调焦点：当前段是「当前项」，淡底 + 淡底前景，不另画一套实心选择态。 */
@@ -101,12 +100,11 @@
     flex-direction: column;
     gap: var(--xh-date-range-picker-gap, var(--xh-space-1));
 
-    /* 起止两组段位、分隔符与日历钮排在一行，按日的内容本身就比字段缺省宽（--xh-control-w）宽，
-       钉成缺省宽会裁掉终点的段位：这一件缺省按内容撑开，使用者要钉宽仍走这条槽。
-       地板抬到一族的缺省宽：按年、按月的内容比缺省宽窄，不能比别的字段还窄，底线槽只在高过缺省宽时起作用。
-       父容器给不出这么宽时整件跟着收，地板同步让步，不越出父容器 */
-    inline-size: var(--xh-date-range-picker-control-w, max-content);
-    min-inline-size: min(max(var(--xh-control-w), var(--xh-date-range-picker-control-min-w, var(--xh-control-min-w))), 100%);
+    /* 与别的字段同一个缺省宽：放在一排筛选条件里不比相邻的字段宽出一截。
+       起止两组按日带时刻的段位放不进时由两组各自收住（见 segment-group），分隔符与日历钮始终留在框里；
+       要整段都露出来，经这条槽钉宽。父容器给不出这么宽时整件跟着收，地板同步让步，不越出父容器 */
+    inline-size: var(--xh-date-range-picker-control-w, var(--xh-control-w));
+    min-inline-size: min(var(--xh-date-range-picker-control-w, var(--xh-control-w)), var(--xh-date-range-picker-control-min-w, var(--xh-control-min-w)), 100%);
     max-inline-size: 100%;
   }
 
@@ -118,7 +116,6 @@
     --xh-_date-range-picker-control-px: var(--xh-control-px-sm);
     --xh-_date-range-picker-gap: var(--xh-control-gap-sm);
     --xh-_date-range-picker-font-size: var(--xh-control-font-sm);
-    --xh-_date-range-picker-item-py: var(--xh-list-option-py-sm);
   }
 
   [data-scope='date-range-picker']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
@@ -127,7 +124,6 @@
     --xh-_date-range-picker-control-px: var(--xh-control-px-lg);
     --xh-_date-range-picker-gap: var(--xh-control-gap-lg);
     --xh-_date-range-picker-font-size: var(--xh-control-font-lg);
-    --xh-_date-range-picker-item-py: var(--xh-list-option-py-lg);
   }
 
   /* 只要声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
@@ -136,7 +132,9 @@
   }
 
   [data-scope='date-range-picker'][data-part='label'] {
-    color: var(--xh-date-range-picker-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-date-range-picker-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-date-range-picker-label-gap, var(--xh-space-2)) - var(--xh-date-range-picker-gap, var(--xh-space-1)));
+    color: var(--xh-date-range-picker-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-date-range-picker-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-date-range-picker-label-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
@@ -147,7 +145,7 @@
   }
 
   [data-scope='date-range-picker'][data-part='label'][data-disabled] {
-    color: var(--xh-date-range-picker-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-date-range-picker-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 画成一个框的是 control 而不是 input：段位、清空按钮、日历按钮三者要看起来是一体的，
@@ -169,8 +167,6 @@
     --xh-field-border-hover: var(--xh-date-range-picker-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-date-range-picker-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-date-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-date-range-picker-control-shadow, none);
     /* 段位靠键盘编辑，盒上不是文本光标 */
     --xh-field-cursor-rest: default;
@@ -183,12 +179,15 @@
   }
 
   /* 段位与作者写在段间的分隔符都在这一层里：段位自己那身皮由 date-field 那份样式负责
-     （它们戴的是那一份解剖的标记），这里只管把一排段位横过来、占满输入行剩下的宽度 */
+     （它们戴的是那一份解剖的标记），这里只管把一排段位横过来、占满输入行剩下的宽度。
+     框比两组段位窄时（缺省宽里放按日带时刻的区间），两组按各自内容宽的比例一起收、各在组内裁掉放不下的段位：
+     不裁的话终点那组会被挤成零宽、段位与日历钮一起冒出框外。裁掉的段位仍可聚焦，键盘走到它时组跟着滚过去 */
   [data-scope='date-range-picker'][data-part='segment-group'] {
     display: inline-flex;
     flex: 1 1 auto;
     align-items: center;
     min-inline-size: 0;
+    overflow: hidden;
     block-size: 100%;
     color: inherit;
     /* 表单控件不继承页面字体，只给字号会让段位用 UA 默认字族，与周围文本对不上 */
@@ -201,9 +200,10 @@
     display: none;
   }
 
-  /* 起点那组只占自己的宽度，分隔符紧跟在起点后面；剩下的宽度全给终点那组 */
+  /* 起点那组只占自己的宽度，分隔符紧跟在起点后面；剩下的宽度全给终点那组。
+     放不下时它同样收缩，与终点那组一起让，不把终点那组挤成零宽 */
   [data-scope='date-range-picker'][data-part='segment-group'][data-index='0']:has(+ [data-part='range-separator']) {
-    flex: 0 0 auto;
+    flex: 0 1 auto;
   }
 
   [data-scope='date-range-picker'][data-part='range-separator'] {
@@ -239,8 +239,14 @@
     color: transparent;
   }
 
-  [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown] > * {
-    opacity: 0;
+  /* 段位与分隔符（后者是不带解剖的文字节点）一起淡出：显隐写在 segment-group 自己的私有槽上，
+     子节点只读槽——主体无特征的规则不挂在 data-placeholder-shown 后面，输入时翻转只让这一组失效 */
+  [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown] {
+    --xh-_date-range-picker-segment-opacity: 0;
+  }
+
+  [data-scope='date-range-picker'][data-part='segment-group'] > * {
+    opacity: var(--xh-_date-range-picker-segment-opacity, 1);
   }
 
   [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown]::before {
@@ -309,21 +315,22 @@
   }
 
   /* 浮层：含两张日历网格的锚定面板，走 floating 材质——实体底 + --xh-border-default 描边 +
-     --xh-elevation-floating 落影，不透景、不画顶光 */
+     --xh-elevation-floating 落影，不透景、不画顶光。面板自己不留内衬：标题栏、网格、快捷选项列与时间列各带内衬，
+     分隔线才能从面板一边通到另一边 */
   [data-scope='date-range-picker'][data-part='content'] {
     position: relative;
     display: block;
     /* 行内轴只有落位后的可用宽度这一个上限：不夹住，浮层就会被定位层的包含块压窄，
        网格轨道跟着缩到比日期钮还窄，相邻两颗日期钮互相盖住 */
     max-inline-size: var(--xh-_date-range-picker-available-w);
-    padding-block: var(--xh-date-range-picker-content-py, var(--xh-space-2));
-    padding-inline: var(--xh-date-range-picker-content-px, var(--xh-space-2));
+    padding-block: var(--xh-date-range-picker-content-py, var(--xh-space-0));
+    padding-inline: var(--xh-date-range-picker-content-px, var(--xh-space-0));
     border: var(--xh-stroke-thin) solid var(--xh-date-range-picker-content-border, var(--xh-border-default));
     border-radius: var(--xh-date-range-picker-content-radius, var(--xh-shape-overlay));
     background: var(--xh-date-range-picker-content-bg, var(--xh-bg-surface));
     color: var(--xh-date-range-picker-content-fg, var(--xh-fg-default));
-    /* 日历是定高结构：网格、时间列与确认行都按 px 排，天然高度就是它们的和，缺省不另设上限
-       （按 rem 的滚动面档会随根字号缩小，根字号低于 16px 时确认行就被挤到滚动里）；
+    /* 日历是定高结构：网格、时间列与底栏都按 px 排，天然高度就是它们的和，缺省不另设上限
+       （按 rem 的滚动面档会随根字号缩小，根字号低于 16px 时底栏就被挤到滚动里）；
        可用高度是定位引擎算出的视口余量，视口真放不下时再收一截 */
     max-block-size: min(var(--xh-date-range-picker-max-h, var(--xh-_date-range-picker-available-h)), var(--xh-_date-range-picker-available-h));
     /* 两轴都滚：块轴放不下时面板内自己竖滚，行内轴放不下时面板内自己横滚，
@@ -383,38 +390,8 @@
     align-items: stretch;
   }
 
-  /* 第二个起的面板画一道分隔线：两张网格挨着排时要有条界，
-     否则 8 月末与 9 月初那两列看着像同一张表。
-     手机档两张月历折行堆叠，线画在块起始边 */
-  [data-scope='date-range-picker'][data-part='calendar'] + [data-scope='date-range-picker'][data-part='calendar'] {
-    padding-block-start: var(--xh-date-range-picker-panel-gap, var(--xh-space-3));
-    border-block-start: var(--xh-stroke-thin) solid var(--xh-date-range-picker-panel-divider, var(--xh-material-solid-separator));
-  }
-
-  /* 平板起两张月历并排放得下，线改画在行内起始边 */
-  @media (min-width: 768px) {
-    [data-scope='date-range-picker'][data-part='calendar'] + [data-scope='date-range-picker'][data-part='calendar'] {
-      padding-block-start: 0;
-      padding-inline-start: var(--xh-date-range-picker-panel-gap, var(--xh-space-3));
-      border-block-start: none;
-      border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-range-picker-panel-divider, var(--xh-material-solid-separator));
-    }
-  }
-
-  /* 快捷选项与它旁边那张日历之间留出同样的空当。
-     手机档选项条在上、日历在下，空当留在块轴。
-     选项列后面紧跟着它自己的两条条子节点，相邻选择器接不到日历，按「前面有过选项列」取日历 */
-  [data-scope='date-range-picker'][data-part='preset-group'] ~ [data-scope='date-range-picker'][data-part='calendar'] {
-    padding-block-start: var(--xh-date-range-picker-panel-gap, var(--xh-space-3));
-  }
-
-  /* 平板起选项列回到日历一侧，空当跟着回到行内轴，两道分隔线左右对称 */
-  @media (min-width: 768px) {
-    [data-scope='date-range-picker'][data-part='preset-group'] ~ [data-scope='date-range-picker'][data-part='calendar'] {
-      padding-block-start: 0;
-      padding-inline-start: var(--xh-date-range-picker-panel-gap, var(--xh-space-3));
-    }
-  }
+  /* 两张日历并排时不画竖线、不另留空当：各自左右 16 的内衬合成 32 的空白就是两张网格的界，
+     两条标题栏的下沿分隔线首尾相接连成一条 */
 
   [data-scope='date-range-picker'][data-part='calendar'] {
     display: flex;
@@ -422,11 +399,18 @@
        撑出去的那截交给面板自己横滚 */
     min-inline-size: max-content;
     flex-direction: column;
-    gap: var(--xh-date-range-picker-calendar-gap, var(--xh-space-2));
+    gap: var(--xh-date-range-picker-calendar-gap, var(--xh-space-0));
     /* 数字等宽：1 与 7 的字形宽度在比例字体里并不相同，不定住会让整张网格随月份抖动 */
     font-variant-numeric: tabular-nums;
   }
 
+  /* 浮层里的日历标题取常规字重：面板标题栏只是年月的读数，不压过网格 */
+  [data-scope='date-range-picker'][data-part='calendar'] [data-scope='calendar-range-picker'][data-part='heading'],
+  [data-scope='date-range-picker'][data-part='calendar'] [data-scope='calendar-range-picker'][data-part='heading-year-trigger'],
+  [data-scope='date-range-picker'][data-part='calendar'] [data-scope='calendar-range-picker'][data-part='heading-month-trigger'] {
+    font-weight: var(--xh-date-range-picker-heading-font-weight, var(--xh-font-weight-regular));
+  }
+
   [data-scope='date-range-picker'][data-part='calendar'][hidden] {
     display: none;
   }
@@ -440,15 +424,16 @@
     /* 这一条的另一轴由并排的那块给：不写就按内容收，分隔线只画到最后一条选项 */
     align-self: stretch;
     flex-direction: row;
-    gap: var(--xh-date-range-picker-preset-group-gap, var(--xh-list-option-gap));
+    gap: var(--xh-date-range-picker-preset-group-gap, var(--xh-space-1));
     /* 选项多起来时这一条自己滚，不把整张面板撑大 */
     max-block-size: var(--xh-date-range-picker-preset-group-h, var(--xh-viewport-h-lg));
-    padding: var(--xh-date-range-picker-preset-group-padding, var(--xh-space-1));
+    padding-block: var(--xh-date-range-picker-preset-group-py, var(--xh-space-2_5));
+    padding-inline: var(--xh-date-range-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-range-picker-column-divider, var(--xh-material-solid-separator));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-date-range-picker-column-divider, var(--xh-material-solid-border));
   }
 
   /* 平板起：换成贴在日历行内起始一侧的竖列，滚动轴与分隔线一起转过来 */
@@ -458,7 +443,7 @@
       flex-direction: column;
       overflow: auto;
       border-block-end: none;
-      border-inline-end: var(--xh-stroke-thin) solid var(--xh-date-range-picker-column-divider, var(--xh-material-solid-separator));
+      border-inline-end: var(--xh-stroke-thin) solid var(--xh-date-range-picker-column-divider, var(--xh-material-solid-border));
     }
   }
 
@@ -466,30 +451,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-range-picker'][data-part='preset'] {
-    --xh-collection-block-padding: var(--xh-date-range-picker-preset-py, var(--xh-space-1));
-    --xh-collection-inline-padding: var(--xh-date-range-picker-preset-px, var(--xh-space-3));
-    --xh-collection-font-size: var(--xh-text-secondary-size);
-    --xh-collection-radius: var(--xh-date-range-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-range-picker-preset-fg-selected, var(--xh-fg-default));
-    --xh-collection-fg-selected-highlight: var(--xh-date-range-picker-preset-fg-selected, var(--xh-fg-default));
-    --xh-collection-fg-selected-hover: var(--xh-date-range-picker-preset-fg-selected, var(--xh-fg-default));
-    --xh-collection-fg-selected-pressed: var(--xh-date-range-picker-preset-fg-selected, var(--xh-fg-default));
+    --xh-collection-block-padding: 0;
+    --xh-collection-inline-padding: var(--xh-date-range-picker-preset-px, var(--xh-space-2));
+    --xh-collection-font-size: var(--xh-date-range-picker-preset-font-size, var(--xh-text-caption-size));
+    --xh-collection-radius: var(--xh-date-range-picker-preset-radius, var(--xh-shape-control));
+    --xh-collection-fg-rest: var(--xh-date-range-picker-preset-fg, var(--xh-fg-muted));
+    --xh-collection-fg-selected: var(--xh-date-range-picker-preset-fg, var(--xh-fg-muted));
+    /* 悬停 / 高亮 / 按下时字换正文色：底升到 200 / 300 之后，次级前景在暗色下不足 4.5:1 */
+    --xh-collection-fg-hover: var(--xh-date-range-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-keyboard-highlight: var(--xh-date-range-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-pressed: var(--xh-date-range-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-selected-highlight: var(--xh-date-range-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-selected-hover: var(--xh-date-range-picker-preset-fg-hover, var(--xh-fg-default));
+    --xh-collection-fg-selected-pressed: var(--xh-date-range-picker-preset-fg-hover, var(--xh-fg-default));
     --xh-collection-fg-disabled: var(--xh-date-range-picker-preset-fg-disabled, var(--xh-fg-disabled));
-    --xh-collection-bg-hover: var(--xh-date-range-picker-preset-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-keyboard-highlight: var(--xh-date-range-picker-preset-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-selected-highlight: var(--xh-date-range-picker-preset-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-selected-hover: var(--xh-date-range-picker-preset-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-bg-pressed: var(--xh-date-range-picker-preset-bg-pressed, var(--xh-bg-subtle-hover));
-    --xh-collection-bg-selected-pressed: var(--xh-date-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-date-range-picker-preset-bg, var(--xh-bg-subtle));
+    --xh-collection-bg-selected: var(--xh-date-range-picker-preset-bg, var(--xh-bg-subtle));
+    --xh-collection-bg-hover: var(--xh-date-range-picker-preset-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-keyboard-highlight: var(--xh-date-range-picker-preset-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-selected-highlight: var(--xh-date-range-picker-preset-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-selected-hover: var(--xh-date-range-picker-preset-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-pressed: var(--xh-date-range-picker-preset-bg-pressed, var(--xh-bg-subtle-active));
+    --xh-collection-bg-selected-pressed: var(--xh-date-range-picker-preset-bg-pressed, var(--xh-bg-subtle-active));
     --xh-collection-outline-keyboard-highlight: transparent;
     --xh-collection-outline-selected-highlight: transparent;
 
@@ -497,12 +489,15 @@
     position: relative;
     display: block;
     flex: none;
+    block-size: var(--xh-date-range-picker-preset-h, var(--xh-control-action-size));
     /* 对号的末端轨始终留着，切换选中时文字与整列宽度都不移动。 */
     padding-inline-end: calc(
-      var(--xh-date-range-picker-preset-px, var(--xh-space-3)) +
-        var(--xh-date-range-picker-preset-check-size, var(--xh-control-indicator-size)) +
+      var(--xh-date-range-picker-preset-px, var(--xh-space-2)) +
+        var(--xh-date-range-picker-preset-check-size, var(--xh-control-indicator-sm)) +
         var(--xh-space-1)
     );
+    /* 一行字在 24 高的钮里垂直居中 */
+    line-height: var(--xh-date-range-picker-preset-h, var(--xh-control-action-size));
     white-space: nowrap;
     user-select: none;
   }
@@ -524,9 +519,9 @@
     content: '';
     position: absolute;
     inset-block-start: 50%;
-    inset-inline-end: var(--xh-date-range-picker-preset-px, var(--xh-space-3));
-    inline-size: var(--xh-date-range-picker-preset-check-size, var(--xh-control-indicator-size));
-    block-size: var(--xh-date-range-picker-preset-check-size, var(--xh-control-indicator-size));
+    inset-inline-end: var(--xh-date-range-picker-preset-px, var(--xh-space-2));
+    inline-size: var(--xh-date-range-picker-preset-check-size, var(--xh-control-indicator-sm));
+    block-size: var(--xh-date-range-picker-preset-check-size, var(--xh-control-indicator-sm));
     translate: 0 -50%;
     background-color: var(--xh-date-range-picker-preset-check-fg, var(--xh-_date-range-picker-check-fg));
     opacity: 0;
@@ -552,24 +547,30 @@
     align-items: flex-start;
   }
 
-  /* 确认按钮沉到所在那一行的底边：它是整块面板的出口，不跟日历顶边对齐 */
-  [data-scope='date-range-picker'][data-part='content']:has(> [data-part='column-group']) > [data-part='confirm-trigger'] {
+  /* 确认按钮沉到所在那一行的底边：它是整块面板的出口，不跟日历顶边对齐。面板不留内衬，
+     钮自己与底边、末边各让一档空当 */
+  [data-scope='date-range-picker'][data-part='content']:has(> [data-part='column-group']) > [data-part='confirm-trigger']:where([data-scope='date-range-picker']) {
     align-self: flex-end;
+    margin: var(--xh-date-range-picker-confirm-trigger-margin, var(--xh-space-2));
   }
 
-  /* 一端的几列成组并排，小标题落在与日历标题栏等高的顶带里；两组之间多留一档空当，眼睛先分起止、再分时分 */
+  /* 一端的几列成组并排，小标题落在与日历标题栏等高的顶带里（不含它下沿那道线）；
+     组的行内起始边画一道整高的竖线，日历与起点组、起点组与终点组之间各一道，组内列与列之间不画线 */
   [data-scope='date-range-picker'][data-part='column-group'] {
+    --xh-_date-range-picker-column-group-offset: var(
+      --xh-date-range-picker-column-group-offset,
+      calc(var(--xh-control-action-size) + 2 * var(--xh-space-2))
+    );
+
     position: relative;
     display: flex;
     flex: none;
     flex-wrap: nowrap;
     align-items: stretch;
     min-inline-size: 0;
-    /* 让出与日历标题栏等高的一带放小标题，列的顶边因此与日历网格对齐 */
-    padding-block-start: var(
-      --xh-date-range-picker-column-group-offset,
-      calc(var(--xh-control-h-sm) + var(--xh-date-range-picker-calendar-gap, var(--xh-space-2)))
-    );
+    /* 让出与日历标题栏等高的一带放小标题；列自己的上沿描边接着标题栏的分隔线画过去 */
+    padding-block-start: var(--xh-_date-range-picker-column-group-offset);
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-range-picker-column-divider, var(--xh-material-solid-border));
   }
 
   [data-scope='date-range-picker'][data-part='column-group'][hidden] {
@@ -577,10 +578,11 @@
   }
 
   [data-scope='date-range-picker'][data-part='column-group'] + [data-scope='date-range-picker'][data-part='column-group'] {
-    margin-inline-start: var(--xh-date-range-picker-column-group-gap, var(--xh-space-2));
+    margin-inline-start: var(--xh-date-range-picker-column-group-gap, var(--xh-space-0));
   }
 
-  /* 组的小标题：辅助文本档、次要前景；正在编辑的那一端换成正文前景与中等字重，看得出日历下一次点选改哪一端 */
+  /* 组的小标题：辅助文本档、次要前景，起止两组同一副样式（与时间范围选择器一致）。正在编辑的那一端虽然投影了
+     data-editing，这里不拿它分档：并排的两个标题一深一浅，读起来像一个可用、一个不可用 */
   [data-scope='date-range-picker'][data-part='column-group-label'] {
     position: absolute;
     inset-block-start: 0;
@@ -589,7 +591,7 @@
     box-sizing: border-box;
     align-items: center;
     justify-content: center;
-    block-size: var(--xh-control-h-sm);
+    block-size: var(--xh-_date-range-picker-column-group-offset);
     padding-inline: var(--xh-date-range-picker-column-group-label-px, var(--xh-space-1));
     color: var(--xh-date-range-picker-column-group-label-fg, var(--xh-fg-subtle));
     font-size: var(--xh-text-caption-size);
@@ -598,48 +600,57 @@
     user-select: none;
   }
 
-  [data-scope='date-range-picker'][data-part='column-group-label'][data-editing] {
-    color: var(--xh-date-range-picker-column-group-label-fg-active, var(--xh-fg-default));
-    font-weight: var(--xh-date-range-picker-column-group-label-font-weight-active, var(--xh-font-weight-medium));
-  }
-
   [data-scope='date-range-picker'][data-part='column-group-label'][hidden] {
     display: none;
   }
 
+  /* 时间列：列高与日历网格同高（再加列顶那道线），列底与网格底边对齐；列与列之间不画线 */
   [data-scope='date-range-picker'][data-part='time-column'] {
+    --xh-_date-range-picker-time-column-h: var(--xh-date-range-picker-time-column-h, var(--xh-overlay-calendar-column-h));
+    --xh-_date-range-picker-time-column-py: var(--xh-date-range-picker-time-column-py, var(--xh-space-1));
+
     display: flex;
     flex: none;
     flex-direction: column;
-    gap: var(--xh-date-range-picker-time-column-gap, 0);
+    gap: var(--xh-date-range-picker-time-column-gap, var(--xh-space-2));
     min-inline-size: var(--xh-date-range-picker-time-column-min-w, var(--xh-overlay-column-min-w));
     /* 几列并排：定高而不是随内容收，否则时列与分列的可选值一多一少就错位 */
-    block-size: var(--xh-date-range-picker-time-column-h, var(--xh-overlay-calendar-column-h));
-    padding-block: var(--xh-date-range-picker-time-column-padding, var(--xh-space-1));
+    block-size: calc(var(--xh-_date-range-picker-time-column-h) + var(--xh-stroke-thin));
+    /* 列底留出一截空白：末尾几格（23 时、55–59 分）也能滚到列顶，各列的选中落在同一行 */
+    padding-block: var(--xh-_date-range-picker-time-column-py)
+      calc(var(--xh-_date-range-picker-time-column-h) - var(--xh-date-range-picker-time-item-h, var(--xh-control-action-size)) - var(--xh-_date-range-picker-time-column-py));
     padding-inline: var(--xh-date-range-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-range-picker-column-divider, var(--xh-material-solid-separator));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-date-range-picker-column-divider, var(--xh-material-solid-border));
   }
 
   [data-scope='date-range-picker'][data-part='time-column'][hidden] {
     display: none;
   }
 
-  /* 时间格：悬停 / 高亮 100、按下 200 由 Collection Item 家族按 overlay 语境给，选中只留末端对号——
-     浮层瞬态集合的选中不上品牌淡底、不加粗、不变字色。格里只有数字、没有正文部件，保持自己的
-     居中排版与等宽标记轨，家族只给状态面 */
+  /* 粗指针下日历格长到 44 见方（行距从 36 加到 44），网格多出六行的那截；列高跟着加，列底仍与网格底边对齐 */
+  @media (pointer: coarse) {
+    [data-scope='date-range-picker'][data-part='time-column'] {
+      --xh-_date-range-picker-time-column-h: var(--xh-date-range-picker-time-column-h, var(--xh-overlay-calendar-column-h-coarse));
+    }
+  }
+
+  /* 时间格：24 高的通栏条，列内间距 8 撑出 32 的行距；悬停 / 高亮 100、按下 200 由 Collection Item 家族按
+     overlay 语境给，选中透明底 + 中等字重 + 末端对号（对号集合的选中），不上品牌淡底、不变字色。
+     格里只有数字、没有正文部件，保持自己的居中排版与等宽标记轨，家族只给状态面 */
   [data-scope='date-range-picker'][data-part='time-item'] {
     --xh-_date-range-picker-time-item-rail: max(
       var(--xh-date-range-picker-time-item-px, var(--xh-space-0_5)),
       calc(var(--xh-date-range-picker-time-item-check-size, var(--xh-_date-range-picker-time-item-check-size)) + var(--xh-space-0_5))
     );
-    --xh-collection-block-padding: var(--xh-date-range-picker-time-item-py, var(--xh-_date-range-picker-item-py));
+    --xh-collection-block-padding: 0;
     --xh-collection-inline-padding: var(--xh-_date-range-picker-time-item-rail);
     --xh-collection-font-size: var(--xh-date-range-picker-time-item-font-size, var(--xh-_date-range-picker-font-size));
-    --xh-collection-radius: var(--xh-date-range-picker-time-item-radius, var(--xh-shape-inset));
+    /* 浮层里的列表是通栏行：格铺满列宽、不取圆角 */
+    --xh-collection-radius: var(--xh-date-range-picker-time-item-radius, 0);
     --xh-collection-fg-rest: var(--xh-date-range-picker-time-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-date-range-picker-time-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-date-range-picker-time-item-fg, var(--xh-material-frosted-fg));
@@ -648,10 +659,10 @@
     --xh-collection-fg-selected-highlight: var(--xh-date-range-picker-time-item-fg-selected, var(--xh-date-range-picker-time-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-selected-hover: var(--xh-date-range-picker-time-item-fg-selected, var(--xh-date-range-picker-time-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-selected-pressed: var(--xh-date-range-picker-time-item-fg-selected, var(--xh-date-range-picker-time-item-fg, var(--xh-material-frosted-fg)));
-    --xh-collection-font-weight-selected: var(--xh-date-range-picker-time-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-highlight: var(--xh-date-range-picker-time-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-hover: var(--xh-date-range-picker-time-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-pressed: var(--xh-date-range-picker-time-item-font-weight-selected, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-selected: var(--xh-date-range-picker-time-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-highlight: var(--xh-date-range-picker-time-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-hover: var(--xh-date-range-picker-time-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-pressed: var(--xh-date-range-picker-time-item-font-weight-selected, var(--xh-font-weight-medium));
     --xh-collection-bg-hover: var(--xh-date-range-picker-time-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-keyboard-highlight: var(--xh-date-range-picker-time-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-selected-highlight: var(--xh-date-range-picker-time-item-bg-hover, var(--xh-bg-subtle));
@@ -666,7 +677,7 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    block-size: var(--xh-date-range-picker-time-item-h, auto);
+    block-size: var(--xh-date-range-picker-time-item-h, var(--xh-control-action-size));
     font-variant-numeric: tabular-nums;
     line-height: var(--xh-leading-normal);
     text-align: center;
@@ -674,6 +685,14 @@
     user-select: none;
   }
 
+  /* 命中区向上下各补半个列内间距：两格之间那 8px 缝归上下两格各一半，指针落在缝里不落空 */
+  [data-scope='date-range-picker'][data-part='time-item']::before {
+    content: '';
+    position: absolute;
+    inset-block: calc(-0.5 * var(--xh-date-range-picker-time-column-gap, var(--xh-space-2)));
+    inset-inline: 0;
+  }
+
   [data-scope='date-range-picker'][data-part='time-item'][hidden] {
     display: none;
   }
@@ -735,7 +754,7 @@
 
   /* 列整体禁用时格没有自己的 aria-disabled，禁用面按列的 aria-disabled 映射到家族槽：
      字色降级、悬停 / 高亮 / 按下不换面、光标 not-allowed */
-  [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item'] {
+  [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-range-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);
@@ -754,15 +773,15 @@
     --xh-collection-cursor-selected: not-allowed;
   }
 
-  [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']::after {
+  [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-range-picker'])::after {
     background-color: var(--xh-fg-disabled);
   }
 
-  /* 确认钮是面板里唯一的主要动作：品牌实心、悬停 / 按下与 0.97 按压、焦点环全由 Action Control 的
-     text solid 档给；槽名统一按部件取 --xh-date-range-picker-confirm-trigger-*，只映射到家族桥接槽 */
+  /* 确认钮是面板里唯一的主要动作：品牌实心、悬停 / 按下换面、焦点环全由 Action Control 的 text solid 档给，
+     xs 档 24 高、字取说明档 12px；槽名统一按部件取 --xh-date-range-picker-confirm-trigger-*，只映射到家族桥接槽 */
   [data-scope='date-range-picker'][data-part='confirm-trigger'] {
     --xh-action-visual-size: var(--xh-date-range-picker-confirm-trigger-h, var(--xh-_action-profile-visual-size));
-    --xh-action-padding-inline: var(--xh-date-range-picker-confirm-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-padding-inline: var(--xh-date-range-picker-confirm-trigger-px, var(--xh-space-2));
     --xh-action-radius: var(--xh-date-range-picker-confirm-trigger-radius, var(--xh-shape-control));
     --xh-action-bg-rest: var(--xh-date-range-picker-confirm-trigger-bg, var(--xh-_action-variant-bg-rest));
     --xh-action-bg-hover: var(--xh-date-range-picker-confirm-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
@@ -775,7 +794,7 @@
     --xh-action-shadow-rest: var(--xh-date-range-picker-confirm-trigger-shadow, none);
     --xh-action-shadow-hover: var(--xh-date-range-picker-confirm-trigger-shadow, none);
     --xh-action-shadow-pressed: var(--xh-date-range-picker-confirm-trigger-shadow, none);
-    --xh-action-font-size: var(--xh-text-secondary-size);
+    --xh-action-font-size: var(--xh-date-range-picker-confirm-trigger-font-size, var(--xh-text-caption-size));
 
     border-width: 0;
   }
@@ -785,6 +804,61 @@
     display: none;
   }
 
+  /* 底栏：面板底部通栏的一条操作区，上沿一道 border-default 线与日历、时间组隔开，四周 8 的内衬；
+     面板换行排布（并排两张日历、快捷选项列、起止两组时间列）时独占一整行，落在它们下面。
+     首个子节点落在撑满余宽的那条轨道上，其后的各自按内容宽排在行尾：作者另放的文字与链接排在行首，
+     确认钮总落在行尾；只放了确认钮时它独占那条轨道，靠 justify-self 贴到行尾。
+     底栏不参与撑宽：面板换行排布时，Chrome 把每个子项的固有宽相加当作面板的固有宽，
+     底栏的字与钮会把面板多撑出一截、日历与时间组末端空出一块。inline-size 包含让它的内容不计入固有宽，
+     行内内衬也就不能写在它自己身上（内衬照样计入），改由两端各一个定宽占位让出（见下面那条） */
+  [data-scope='date-range-picker'][data-part='footer'] {
+    /* 两端占位的宽：占位与相邻项之间本来就隔着一道 gap，占位自己只补到内衬的差额 */
+    --xh-_date-range-picker-footer-inset: max(
+      var(--xh-space-0),
+      calc(var(--xh-date-range-picker-footer-px, var(--xh-space-2)) - var(--xh-date-range-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-range-picker-footer-gap, var(--xh-space-2));
+    padding-block: var(--xh-date-range-picker-footer-py, var(--xh-space-2));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-date-range-picker-footer-border, var(--xh-material-solid-border));
+    color: var(--xh-date-range-picker-footer-fg, var(--xh-fg-muted));
+    font-size: var(--xh-date-range-picker-footer-font-size, var(--xh-text-caption-size));
+  }
+
+  /* 上面给了 display，UA 的 [hidden]{display:none} 已被盖掉，这里补回来 */
+  [data-scope='date-range-picker'][data-part='footer'][hidden] {
+    display: none;
+  }
+
+  /* 底栏里只放了确认钮、而确认钮按状态收起（没开 showTime）时，底栏一并让位，不留一条空栏 */
+  [data-scope='date-range-picker'][data-part='footer']:has(> [data-scope='date-range-picker'][data-part='confirm-trigger'][hidden]:only-child) {
+    display: none;
+  }
+
+  [data-scope='date-range-picker'][data-part='footer'] > [data-scope='date-range-picker'][data-part='confirm-trigger'] {
+    justify-self: end;
+  }
+
+  /* 行首行尾的内衬由两端的定宽占位让出，不挂在首末子节点上：首个子节点可能是裸文本，
+     末一个可能是按状态收起的确认钮，外边距都接不住。占位与其余子项一样在 inline-size 包含之内，不计入面板的固有宽 */
+  [data-scope='date-range-picker'][data-part='footer']::before,
+  [data-scope='date-range-picker'][data-part='footer']::after {
+    content: '';
+    inline-size: var(--xh-_date-range-picker-footer-inset);
+  }
+
+  /* 行首占位落在那条撑满余宽的显式轨道之前（在它前面长出一条隐式列），首个子节点仍落在那条轨道上。
+     占位不进显式轨道：尺寸包含照样计入显式轨道与轨道间的 gap，多一条显式列面板就多撑出一道 gap */
+  [data-scope='date-range-picker'][data-part='footer']::before {
+    grid-column: span 1 / 1;
+  }
+
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
   [data-scope='date-range-picker'][data-part='clear-trigger']:empty::before {
     content: '';
@@ -833,20 +907,15 @@
 
     [data-scope='date-range-picker'][data-part='preset'][data-disabled]::after,
     [data-scope='date-range-picker'][data-part='time-item'][data-disabled]::after,
-    [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']::after {
+    [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-range-picker'])::after {
       background-color: GrayText;
     }
 
     [data-scope='date-range-picker'][data-part='preset'][data-disabled],
     [data-scope='date-range-picker'][data-part='time-item'][data-disabled],
-    [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item'] {
+    [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']:where([data-scope='date-range-picker']) {
       color: GrayText;
     }
-
-    /* 正在编辑的那一端靠字重与系统前景区分，不靠颜色 */
-    [data-scope='date-range-picker'][data-part='column-group-label'][data-editing] {
-      color: CanvasText;
-    }
   }
 
   @media (forced-colors: active) {