@xihan-ui/styles 2.1.0 → 3.1.0

package/css/date-range-picker.css

@@ -73,6 +73,7 @@
     --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* 没被声明，退回品牌色 */
     /* 内嵌日期段沿用日期输入的轻强调焦点：当前段是「当前项」，淡底 + 淡底前景，不另画一套实心选择态。 */
@@ -80,6 +81,15 @@
     --xh-_date-field-segment-fg: var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle));
     /* 对号画在普通面上，取语气前景角色，不拿实心强调底色充当前景。 */
     --xh-_date-range-picker-check-fg: var(--xh-_tone, var(--xh-fg-brand));
+    /* 时间列与预设的对号与 Select 等列表的对号同一把尺：指示符档，随密度收放 */
+    --xh-_date-range-picker-time-item-check-size: var(--xh-control-indicator-size);
+  }
+
+  /* 375px 复合面板要同时容下日历与两组时间列；手机档用正式小指示符，平板起恢复 16px。 */
+  @media not all and (min-width: 768px) {
+    [data-scope='date-range-picker']:is([data-part='root'], [data-part='positioner']) {
+      --xh-_date-range-picker-time-item-check-size: var(--xh-control-indicator-sm);
+    }
   }
 
   /* 与文本框、分段日期同一套堆叠：标签一行、输入行一行 */
@@ -108,6 +118,7 @@
     --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'] {
@@ -116,6 +127,7 @@
     --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}，收起态得自己还回去 */
@@ -220,6 +232,30 @@
     color: var(--xh-date-range-picker-literal-fg, var(--xh-fg-subtle));
   }
 
+  /* 整条占位：一段都没填、焦点也不在段上时，段位与分隔符让位给一句占位文字，焦点一进到段上就换回段位。
+     段位只是淡出（仍可聚焦、仍在读屏树里），文字以生成内容压在同一行上、不吃指针，点下去落到底下的段位 */
+  [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown] {
+    position: relative;
+    color: transparent;
+  }
+
+  [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown] > * {
+    opacity: 0;
+  }
+
+  [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown]::before {
+    content: attr(data-placeholder-text);
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 50%;
+    overflow: hidden;
+    color: var(--xh-date-range-picker-placeholder-fg, var(--xh-fg-subtle));
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    pointer-events: none;
+    translate: 0 -50%;
+  }
+
   /* 容器自己不占 Tab 位、也不承载焦点，环由 control 画，这里不再套一圈 */
   [data-scope='date-range-picker'][data-part='segment-group']:focus-visible {
     outline: none;
@@ -286,9 +322,10 @@
     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 时确认行就被挤到滚动里）；
        可用高度是定位引擎算出的视口余量，视口真放不下时再收一截 */
-    max-block-size: min(var(--xh-date-range-picker-max-h, var(--xh-viewport-h-lg)), var(--xh-_date-range-picker-available-h));
+    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));
     /* 两轴都滚：块轴放不下时面板内自己竖滚，行内轴放不下时面板内自己横滚，
        日历那几块保持各自的天然宽度，不被压 */
     overflow: auto;
@@ -312,7 +349,8 @@
     outline: none;
   }
 
-  [data-scope='date-range-picker'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='date-range-picker'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -350,7 +388,7 @@
      手机档两张月历折行堆叠，线画在块起始边 */
   [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-frosted-separator));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-date-range-picker-panel-divider, var(--xh-material-solid-separator));
   }
 
   /* 平板起两张月历并排放得下，线改画在行内起始边 */
@@ -359,7 +397,7 @@
       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-frosted-separator));
+      border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-range-picker-panel-divider, var(--xh-material-solid-separator));
     }
   }
 
@@ -410,7 +448,7 @@
     overflow-y: hidden;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-date-range-picker-column-divider, var(--xh-material-frosted-separator));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-date-range-picker-column-divider, var(--xh-material-solid-separator));
   }
 
   /* 平板起：换成贴在日历行内起始一侧的竖列，滚动轴与分隔线一起转过来 */
@@ -420,7 +458,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-frosted-separator));
+      border-inline-end: var(--xh-stroke-thin) solid var(--xh-date-range-picker-column-divider, var(--xh-material-solid-separator));
     }
   }
 
@@ -435,7 +473,7 @@
     --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-control));
+    --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);
@@ -462,7 +500,7 @@
     /* 对号的末端轨始终留着，切换选中时文字与整列宽度都不移动。 */
     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-glyph-size-sm)) +
+        var(--xh-date-range-picker-preset-check-size, var(--xh-control-indicator-size)) +
         var(--xh-space-1)
     );
     white-space: nowrap;
@@ -487,8 +525,8 @@
     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-glyph-size-sm));
-    block-size: var(--xh-date-range-picker-preset-check-size, var(--xh-glyph-size-sm));
+    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));
     translate: 0 -50%;
     background-color: var(--xh-date-range-picker-preset-check-fg, var(--xh-_date-range-picker-check-fg));
     opacity: 0;
@@ -506,6 +544,247 @@
     background-color: var(--xh-date-range-picker-preset-fg-disabled, var(--xh-fg-disabled));
   }
 
+  /* —— showTime：起止各一组时间列贴在日历旁边、逐列滚动，确认按钮收口 ——
+     与日历同处一条可折行的行内流：放得下就并排，放不下时两组时间列折到日历下面，组内几列仍横着排 */
+  [data-scope='date-range-picker'][data-part='content']:has(> [data-part='column-group']) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  /* 确认按钮沉到所在那一行的底边：它是整块面板的出口，不跟日历顶边对齐 */
+  [data-scope='date-range-picker'][data-part='content']:has(> [data-part='column-group']) > [data-part='confirm-trigger'] {
+    align-self: flex-end;
+  }
+
+  /* 一端的几列成组并排，小标题落在与日历标题栏等高的顶带里；两组之间多留一档空当，眼睛先分起止、再分时分 */
+  [data-scope='date-range-picker'][data-part='column-group'] {
+    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)))
+    );
+  }
+
+  [data-scope='date-range-picker'][data-part='column-group'][hidden] {
+    display: none;
+  }
+
+  [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));
+  }
+
+  /* 组的小标题：辅助文本档、次要前景；正在编辑的那一端换成正文前景与中等字重，看得出日历下一次点选改哪一端 */
+  [data-scope='date-range-picker'][data-part='column-group-label'] {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--xh-control-h-sm);
+    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);
+    line-height: var(--xh-leading-normal);
+    text-align: center;
+    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'] {
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    gap: var(--xh-date-range-picker-time-column-gap, 0);
+    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));
+    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));
+  }
+
+  [data-scope='date-range-picker'][data-part='time-column'][hidden] {
+    display: none;
+  }
+
+  /* 时间格：悬停 / 高亮 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-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-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));
+    --xh-collection-fg-pressed: var(--xh-date-range-picker-time-item-fg, var(--xh-material-frosted-fg));
+    --xh-collection-fg-selected: 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-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-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));
+    --xh-collection-bg-selected-hover: var(--xh-date-range-picker-time-item-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-bg-pressed: var(--xh-date-range-picker-time-item-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-selected-pressed: var(--xh-date-range-picker-time-item-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-collection-outline-keyboard-highlight: transparent;
+    --xh-collection-outline-selected-highlight: transparent;
+
+    position: relative;
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--xh-date-range-picker-time-item-h, auto);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-leading-normal);
+    text-align: center;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  [data-scope='date-range-picker'][data-part='time-item'][hidden] {
+    display: none;
+  }
+
+  /* 键盘焦点出现时环才接回并立即到位，不压在背景过渡的中间帧上 */
+  [data-scope='date-range-picker'][data-part='time-item']:focus-visible:not(:hover) {
+    --xh-collection-outline-keyboard-highlight: var(--xh-ring-focus);
+    --xh-collection-outline-selected-highlight: var(--xh-ring-focus);
+
+    transition: none;
+  }
+
+  [data-scope='date-range-picker'][data-part='time-item']::after {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    /* 标记占轨道末端，内缘与正文之间恒留一档间隙；与 padding 读同一个 rail，避免重叠。 */
+    inset-inline-end: calc(
+      var(--xh-_date-range-picker-time-item-rail) -
+        var(--xh-date-range-picker-time-item-check-size, var(--xh-_date-range-picker-time-item-check-size)) -
+        var(--xh-space-1)
+    );
+    inline-size: var(--xh-date-range-picker-time-item-check-size, var(--xh-_date-range-picker-time-item-check-size));
+    block-size: var(--xh-date-range-picker-time-item-check-size, var(--xh-_date-range-picker-time-item-check-size));
+    translate: 0 -50%;
+    background-color: var(--xh-date-range-picker-time-item-check-fg, var(--xh-_date-range-picker-check-fg));
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+  }
+
+  [data-scope='date-range-picker'][data-part='time-item'][data-state='checked']::after {
+    opacity: 1;
+  }
+
+  /* 界外、早于同一天的起点与被判为不可用的格走 aria-disabled，家族按它给禁用面；选中标记跟着降级 */
+  [data-scope='date-range-picker'][data-part='time-item'][data-disabled]::after {
+    background-color: var(--xh-fg-disabled);
+  }
+
+  @media not all and (min-width: 768px) {
+    [data-scope='date-range-picker'][data-part='time-column'] {
+      min-inline-size: var(--xh-date-range-picker-time-column-min-w-mobile, var(--xh-overlay-column-min-w));
+    }
+
+    [data-scope='date-range-picker'][data-part='time-item'] {
+      --xh-_date-range-picker-time-item-rail: var(
+        --xh-date-range-picker-time-item-check-size,
+        var(--xh-_date-range-picker-time-item-check-size)
+      );
+    }
+
+    [data-scope='date-range-picker'][data-part='time-item']::after {
+      inset-inline-end: 0;
+    }
+  }
+
+  /* 列整体禁用时格没有自己的 aria-disabled，禁用面按列的 aria-disabled 映射到家族槽：
+     字色降级、悬停 / 高亮 / 按下不换面、光标 not-allowed */
+  [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item'] {
+    --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);
+    --xh-collection-fg-pressed: var(--xh-fg-disabled);
+    --xh-collection-fg-selected: var(--xh-fg-disabled);
+    --xh-collection-bg-hover: transparent;
+    --xh-collection-bg-keyboard-highlight: transparent;
+    --xh-collection-bg-pressed: transparent;
+    --xh-collection-bg-selected-hover: transparent;
+    --xh-collection-bg-selected-highlight: transparent;
+    --xh-collection-bg-selected-pressed: transparent;
+    --xh-collection-cursor-rest: not-allowed;
+    --xh-collection-cursor-hover: not-allowed;
+    --xh-collection-cursor-keyboard-highlight: not-allowed;
+    --xh-collection-cursor-pressed: not-allowed;
+    --xh-collection-cursor-selected: not-allowed;
+  }
+
+  [data-scope='date-range-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']::after {
+    background-color: var(--xh-fg-disabled);
+  }
+
+  /* 确认钮是面板里唯一的主要动作：品牌实心、悬停 / 按下与 0.97 按压、焦点环全由 Action Control 的
+     text solid 档给；槽名统一按部件取 --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-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));
+    --xh-action-bg-pressed: var(--xh-date-range-picker-confirm-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-date-range-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-date-range-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-date-range-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-border-rest: transparent;
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: var(--xh-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);
+
+    border-width: 0;
+  }
+
+  /* 收起时连接层给的是 hidden 属性；家族那条 display 会把 UA 规则盖掉 */
+  [data-scope='date-range-picker'][data-part='confirm-trigger'][hidden] {
+    display: none;
+  }
+
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
   [data-scope='date-range-picker'][data-part='clear-trigger']:empty::before {
     content: '';
@@ -530,19 +809,63 @@
   }
 
   @media (forced-colors: active) {
+    /* 整条占位的文字照系统的弱色画；段位让位时的透明字不被强制换色顶回来 */
+    [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown] {
+      forced-color-adjust: none;
+    }
+
+    [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown]::before {
+      color: GrayText;
+    }
+
     /* 系统接管底色后仍保住末端对号；禁用标记改用系统失效色。 */
-    [data-scope='date-range-picker'][data-part='preset']::after {
+    [data-scope='date-range-picker'][data-part='preset']::after,
+    [data-scope='date-range-picker'][data-part='time-item']::after {
       forced-color-adjust: none;
       background-color: CanvasText;
     }
 
-    [data-scope='date-range-picker'][data-part='preset'][data-disabled]::after {
+    /* 按下与没被高亮时的悬停，家族把条目涂成 Highlight，对号跟着换 HighlightText */
+    [data-scope='date-range-picker'][data-part='preset']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after,
+    [data-scope='date-range-picker'][data-part='time-item']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after {
+      background-color: HighlightText;
+    }
+
+    [data-scope='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 {
       background-color: GrayText;
     }
 
-    [data-scope='date-range-picker'][data-part='preset'][data-disabled] {
+    [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'] {
       color: GrayText;
     }
+
+    /* 正在编辑的那一端靠字重与系统前景区分，不靠颜色 */
+    [data-scope='date-range-picker'][data-part='column-group-label'][data-editing] {
+      color: CanvasText;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='date-range-picker']:is([data-part='clear-trigger'], [data-part='trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='date-range-picker']:is([data-part='clear-trigger'], [data-part='trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='date-range-picker']:is([data-part='clear-trigger'], [data-part='trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
   }
 }
 

package/css/description.css

@@ -35,13 +35,29 @@
     color: var(--xh-fg-muted);
   }
 
-  /* 不 invalid 时节点带 hidden：此处不声明 display，交给浏览器的 [hidden] 规则收起 */
+  /* 错误文案出现时淡入。不 invalid 时节点带 hidden，但不交给浏览器的 [hidden] 规则收成 display: none：
+     从不生成盒到生成盒没有过渡的起点，淡入播不出来。收起态改成不占位（绝对定位、零高、裁切）、
+     不可见也不进可及树（visibility: hidden）的盒，露面时回到流里淡入；首帧就在的错误文案没有过渡起点，
+     直接呈现。收起那一下不占位的盒当场让位，不留淡出——同一行随即交还说明或整行收起，淡出只会叠在
+     别的内容上；Field 下方为错误文案预留了一行时，退场在那一行里淡出（见 field.css） */
   [data-scope='field'][data-part='error-text'],
   [data-scope='fieldset'][data-part='error-text'] {
     margin: 0;
     font-size: var(--xh-text-secondary-size);
     line-height: var(--xh-leading-normal);
     color: var(--xh-fg-danger);
+    transition: opacity var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='field'][data-part='error-text'][hidden],
+  [data-scope='fieldset'][data-part='error-text'][hidden] {
+    display: block;
+    position: absolute;
+    block-size: 0;
+    overflow: clip;
+    visibility: hidden;
+    opacity: 0;
+    transition: none;
   }
 
   [data-scope='field'][data-part='root'][data-invalid] > [data-scope='field'][data-part='description'],

package/css/descriptions.css

@@ -78,6 +78,46 @@
     --xh-_descriptions-font-size: var(--xh-control-font-lg);
   }
 
+  /* —— 头部 ——
+     列表之前的一行：左标题、右附加内容。它是根的兄弟，继承不到根上的私有槽，尺寸档自己再换一次 */
+  [data-scope='descriptions'][data-part='header'] {
+    --xh-_descriptions-header-mb: var(--xh-space-3);
+
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--xh-descriptions-header-gap, var(--xh-space-3));
+    margin-block-end: var(--xh-descriptions-header-mb, var(--xh-_descriptions-header-mb));
+  }
+
+  [data-scope='descriptions'][data-part='header'][data-size='sm'] {
+    --xh-_descriptions-header-mb: var(--xh-space-2);
+  }
+
+  [data-scope='descriptions'][data-part='header'][data-size='lg'] {
+    --xh-_descriptions-header-mb: var(--xh-space-4);
+  }
+
+  /* 标题是 Surface 内标题：正文字号 + 半粗；作者写成 h2 / h3 时 UA 的外边距与字号在这里清掉 */
+  [data-scope='descriptions'][data-part='title'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    margin: 0;
+    color: var(--xh-descriptions-title-fg, var(--xh-fg-default));
+    font-size: var(--xh-descriptions-title-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-descriptions-title-font-weight, var(--xh-font-weight-semibold));
+    line-height: var(--xh-leading-relaxed);
+  }
+
+  /* 附加内容贴在行尾：操作钮或状态标签，一行放不下时整块换到下一行 */
+  [data-scope='descriptions'][data-part='extra'] {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: var(--xh-descriptions-extra-gap, var(--xh-space-2));
+    margin-inline-start: auto;
+  }
+
   /* —— 每一格 —— */
   /* 一格自己也是网格：不写 placement 即标签一行、取值一行叠着排。
      窄档每格横跨根上排定的所有列，一行只摆一组，作者写在格上的 span 这一档不认 */
@@ -251,6 +291,8 @@
 
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='descriptions'][data-part='header'][hidden],
+  [data-scope='descriptions'][data-part='extra'][hidden],
   [data-scope='descriptions'][data-part='item'][hidden] {
     display: none;
   }