@xihan-ui/styles 3.1.0 → 4.0.0

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

@@ -0,0 +1,639 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 calendar range picker 样式。 */
+
+@import '../family/action-control.css';
+@import './scrollbar.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-calendar-range-picker {
+    --xh-calendar-range-picker-skin: 1;
+  }
+
+  /* 标题栏与网格各自带内衬、彼此不留空当：标题栏下沿那道分隔线就是两块的界 */
+  .xh-scope-calendar-range-picker[data-part='root'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-calendar-range-picker-gap, var(--xh-space-0));
+    /* 数字等宽：1 与 7 的字形宽度在比例字体里并不相同，不定住会让整张网格随月份抖动 */
+    font-variant-numeric: tabular-nums;
+  }
+
+  .xh-scope-calendar-range-picker[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 标题栏：上下 8、左右 16 的内衬里放一排 24 高的钮与标题，下沿一道通栏分隔线。
+     翻页钮里的字形取 xs 图标钮的字形档（--xh-glyph-size-sm），作者塞进钮里的图标与皮肤画的兜底字形同一把尺；
+     这一档写在标题栏上而不是日历根上：日期范围选择器里的日历没有根节点，标题栏两边都有 */
+  .xh-scope-calendar-range-picker[data-part='header'] {
+    --xh-icon-size: var(--xh-calendar-range-picker-icon-size, var(--xh-glyph-size-sm));
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--xh-calendar-range-picker-header-gap, var(--xh-space-1));
+    min-block-size: calc(var(--xh-control-action-size) + 2 * var(--xh-calendar-range-picker-header-py, var(--xh-space-2)) + var(--xh-stroke-thin));
+    padding-block: var(--xh-calendar-range-picker-header-py, var(--xh-space-2));
+    padding-inline: var(--xh-calendar-range-picker-header-px, var(--xh-space-4));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-calendar-range-picker-header-border, var(--xh-material-solid-border));
+  }
+
+  .xh-scope-calendar-range-picker[data-part='header'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-calendar-range-picker[data-part='heading'] {
+    flex: 1;
+    text-align: center;
+    color: var(--xh-calendar-range-picker-heading-fg, var(--xh-fg-default));
+    font-size: var(--xh-calendar-range-picker-heading-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-calendar-range-picker-heading-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-none);
+    user-select: none;
+  }
+
+  /* 标题里的年与月：点它们逐级钻上去（年 → 十年格、月 → 月格）。
+     接 Action Control text 档（日期翻页按钮同族）、xs 档 24 高：盒、悬停 / 按下 / 禁用面、焦点环与过渡由家族配方给，
+     这里只把使用者槽映射到桥接槽。长得像标题而不像按钮——它本来就是标题，只是可点：静息透明（ghost）、
+     字色始终是标题色，悬停 100 → 按下 200 只换底（白底承载）；到顶那一层只作标题显示，光标别装成能点 */
+  .xh-scope-calendar-range-picker[data-part='heading-year-trigger']:not([hidden]),
+  .xh-scope-calendar-range-picker[data-part='heading-month-trigger']:not([hidden]) {
+    --xh-action-padding-inline: var(--xh-calendar-range-picker-heading-trigger-px, var(--xh-space-0_5));
+    --xh-action-radius: var(--xh-calendar-range-picker-heading-trigger-radius, var(--xh-shape-control));
+    --xh-action-bg-hover: var(--xh-calendar-range-picker-heading-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-calendar-range-picker-heading-trigger-bg-pressed, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-calendar-range-picker-heading-fg, var(--xh-fg-default));
+    --xh-action-fg-hover: var(--xh-calendar-range-picker-heading-fg, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-calendar-range-picker-heading-fg, var(--xh-fg-default));
+    --xh-action-fg-focus-visible: var(--xh-calendar-range-picker-heading-fg, var(--xh-fg-default));
+    --xh-action-fg-disabled: var(--xh-calendar-range-picker-heading-fg, var(--xh-fg-default));
+    --xh-action-font-size: var(--xh-calendar-range-picker-heading-font-size, var(--xh-text-label-size));
+    --xh-action-cursor-disabled: default;
+
+    font-weight: var(--xh-calendar-range-picker-heading-font-weight, var(--xh-font-weight-medium));
+  }
+
+  .xh-scope-calendar-range-picker[data-part='heading-year-trigger'][hidden],
+  .xh-scope-calendar-range-picker[data-part='heading-month-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 四颗方向钮接 Action Control icon 档 xs（24 见方）、ghost 形态：悬停 / 按下 / 禁用面、粗指针热区、焦点环与过渡
+     由家族配方给，这里只把使用者槽映射到桥接槽。钮是正方的单图标动作，取圆；坐在日历的白底上，悬停 100 → 按下 200 */
+  .xh-scope-calendar-range-picker[data-part='prev-year-trigger'],
+  .xh-scope-calendar-range-picker[data-part='prev-trigger'],
+  .xh-scope-calendar-range-picker[data-part='next-year-trigger'],
+  .xh-scope-calendar-range-picker[data-part='next-trigger'] {
+    --xh-action-visual-size: var(--xh-calendar-range-picker-nav-size, var(--xh-_action-profile-visual-size));
+    --xh-action-min-inline-size: var(--xh-calendar-range-picker-nav-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-calendar-range-picker-nav-radius, var(--xh-shape-circle));
+    --xh-action-bg-rest: var(--xh-calendar-range-picker-nav-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-calendar-range-picker-nav-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-calendar-range-picker-nav-bg-pressed, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-calendar-range-picker-nav-bg, var(--xh-_action-variant-bg-focus-visible));
+    --xh-action-fg-rest: var(--xh-calendar-range-picker-nav-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-calendar-range-picker-nav-fg-hover, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-calendar-range-picker-nav-fg-hover, var(--xh-fg-default));
+    --xh-action-fg-focus-visible: var(--xh-calendar-range-picker-nav-fg, var(--xh-fg-muted));
+  }
+
+  .xh-scope-calendar-range-picker[data-part='prev-year-trigger'][hidden],
+  .xh-scope-calendar-range-picker[data-part='prev-trigger'][hidden],
+  .xh-scope-calendar-range-picker[data-part='next-year-trigger'][hidden],
+  .xh-scope-calendar-range-picker[data-part='next-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 网格：上下 12、左右 16 的内衬；星期行与第一行日期之间不留空当 */
+  .xh-scope-calendar-range-picker[data-part='grid'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-calendar-range-picker-grid-gap, var(--xh-space-0));
+    padding-block: var(--xh-calendar-range-picker-grid-py, var(--xh-space-3));
+    padding-inline: var(--xh-calendar-range-picker-grid-px, var(--xh-space-4));
+  }
+
+  /* 周期视图与日视图同宽：钻上一层看月、年时面板不变窄，宽度按七列日期格加两侧内衬算 */
+  .xh-scope-calendar-range-picker[data-part='grid']:is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year']) {
+    min-inline-size: calc(7 * var(--xh-calendar-range-picker-cell-min-w, var(--xh-control-h-md)) + 2 * var(--xh-calendar-range-picker-grid-px, var(--xh-space-4)));
+  }
+
+  /* 周期视图：格子直接铺进网格，不再有周行那一层；格与格之间不留缝，区间的底色在一行里连成一条 */
+  .xh-scope-calendar-range-picker[data-part='grid'][data-view='week'] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--xh-calendar-range-picker-period-gap, var(--xh-space-0));
+  }
+
+  /* 月 3 列 × 4 行、季度 4 列一行、年 3 列。 */
+  .xh-scope-calendar-range-picker[data-part='grid'][data-view='month'],
+  .xh-scope-calendar-range-picker[data-part='grid'][data-view='year'] {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: var(--xh-calendar-range-picker-period-gap, var(--xh-space-0));
+  }
+
+  .xh-scope-calendar-range-picker[data-part='grid'][data-view='quarter'] {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: var(--xh-calendar-range-picker-period-gap, var(--xh-space-0));
+  }
+
+  /* 年网格限高自滚：原生细条落在内衬之外的边缘，内衬两侧仍对称 */
+  .xh-scope-calendar-range-picker[data-part='grid'][data-view='year'] {
+    align-content: start;
+    max-block-size: var(--xh-calendar-range-picker-year-grid-max-h, var(--xh-viewport-h-sm));
+    /* 页内结构容器走原生细条（reset 层统一给）、滚动链保持 auto；嵌进 date-range-picker 浮层时由那份皮肤补 contain */
+    overflow-y: auto;
+  }
+
+  .xh-scope-calendar-range-picker[data-part='grid'][hidden] {
+    display: none;
+  }
+
+  /* 网格自己不落焦（焦点永远在某一格上），这里不画环 */
+  .xh-scope-calendar-range-picker[data-part='grid']:focus-visible {
+    outline: none;
+  }
+
+  /* 拖着挑区间时整张网格保持手型：指针滑过格子之间的空隙也不切回箭头 */
+  .xh-scope-calendar-range-picker[data-part='grid'][data-dragging] {
+    cursor: pointer;
+  }
+
+  .xh-scope-calendar-range-picker[data-part='grid-head'],
+  .xh-scope-calendar-range-picker[data-part='grid-body'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-calendar-range-picker-row-gap, var(--xh-space-0));
+  }
+
+  .xh-scope-calendar-range-picker[data-part='grid-head'][hidden],
+  .xh-scope-calendar-range-picker[data-part='grid-body'][hidden] {
+    display: none;
+  }
+
+  /* 七等分：表头行与日期行共用同一条轨道定义，列才对得齐。每列不窄于中号控件高，
+     浮层里的日历按内容收时由这条下限撑出面板宽（七列加两侧内衬） */
+  .xh-scope-calendar-range-picker[data-part='week-row'] {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(var(--xh-calendar-range-picker-cell-min-w, var(--xh-control-h-md)), 1fr));
+  }
+
+  /* 摆了周序号格的行多让出行首一列。写 :not([hidden]) 而不是靠顺序压过下面那条兜底——
+     同特指度的规则谁在后面谁赢,收起态会被这条 display 掀开 */
+  .xh-scope-calendar-range-picker[data-part='week-row']:not([hidden]):has(> [data-part='week-number']) {
+    display: grid;
+    grid-template-columns:
+      var(--xh-calendar-range-picker-week-number-w, var(--xh-control-h-md))
+      repeat(7, minmax(var(--xh-calendar-range-picker-cell-min-w, var(--xh-control-h-md)), 1fr));
+  }
+
+  /* 周序号只是行的标号:比日子小一号、颜色压下去,不跟着选中态走 */
+  .xh-scope-calendar-range-picker[data-part='week-number'] {
+    display: grid;
+    place-items: center;
+    color: var(--xh-calendar-range-picker-week-number-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-calendar-range-picker-week-number-font-size, var(--xh-text-caption-size));
+    font-variant-numeric: tabular-nums;
+    user-select: none;
+  }
+
+  .xh-scope-calendar-range-picker[data-part='week-number'][hidden] {
+    display: none;
+  }
+  .xh-scope-calendar-range-picker[data-part='week-row'][hidden] {
+    display: none;
+  }
+
+  /* 星期行：与中号控件同高，正文字号、常规字重，颜色压一档 */
+  .xh-scope-calendar-range-picker[data-part='week-day'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--xh-calendar-range-picker-week-day-h, var(--xh-control-h-md));
+    color: var(--xh-calendar-range-picker-week-day-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-calendar-range-picker-week-day-font-size, var(--xh-text-body-size));
+    font-weight: var(--xh-calendar-range-picker-week-day-font-weight, var(--xh-font-weight-regular));
+    line-height: var(--xh-leading-none);
+    user-select: none;
+  }
+
+  .xh-scope-calendar-range-picker[data-part='week-day'][hidden] {
+    display: none;
+  }
+
+  /* 格子是等分轨道里的一格，也是格内几样东西的定位盒：区间轨道或禁用横条画在 ::before、今天的圆点画在 ::after，
+     日期钮的命中区（钮的 ::after）同样以它为包含块。上下各 6 的内衬把 24 高的钮撑成 36 的行距。
+     格子自成一层：轨道与横条压在钮的下面，不盖住钮（钮不当定位盒） */
+  .xh-scope-calendar-range-picker[data-part='cell'] {
+    /* 这副行距的半高：格内横条以格子中线为轴、按它收边，行距被拉高（粗指针）时横条不跟着变粗 */
+    --xh-_calendar-range-picker-row-half: calc(
+      var(--xh-calendar-range-picker-cell-size, var(--xh-control-action-size)) / 2
+      + var(--xh-calendar-range-picker-cell-py, var(--xh-space-1_5))
+    );
+    /* 区间轨道的半高：行距半高减去轨道上下各收的那截。帽以它为半径 */
+    --xh-_calendar-range-picker-range-r: calc(
+      var(--xh-_calendar-range-picker-row-half) - var(--xh-calendar-range-picker-range-inset, var(--xh-space-0_5))
+    );
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    isolation: isolate;
+    padding-block: var(--xh-calendar-range-picker-cell-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-calendar-range-picker-cell-px, var(--xh-space-0));
+  }
+
+  /* 周期格左右各留 4：钮在格里缩进一截，相邻两格的钮不贴在一起，区间轨道仍铺满整格 */
+  .xh-scope-calendar-range-picker[data-part='cell']:is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year']) {
+    padding-inline: var(--xh-calendar-range-picker-period-px, var(--xh-space-1));
+  }
+
+  .xh-scope-calendar-range-picker[data-part='cell'][hidden] {
+    display: none;
+  }
+
+  /* 不可用的日子：整格一条淡底横条，上下各收 2，相邻几天的横条连成一条带；落在区间里时让位给区间轨道 */
+  .xh-scope-calendar-range-picker[data-part='cell'][data-disabled]:not([data-in-range])::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    inset-block: calc(50% - var(--xh-_calendar-range-picker-row-half) + var(--xh-calendar-range-picker-disabled-inset, var(--xh-space-0_5)));
+    inset-inline: 0;
+    background-color: var(--xh-calendar-range-picker-cell-bg-disabled, var(--xh-bg-subtle));
+    pointer-events: none;
+  }
+
+  /* 区间轨道：横向铺满格子，相邻两格接成一条；纵向以格子中线为轴、比行距上下各收 2（36 的行距里 32 高），行与行之间留出空当。
+     轨道随 data-in-range 生灭，出现与消失都是当场的；过渡只在同一段轨道换底时走——
+     挑到一半的预览落定成区间，中性淡底淡变到品牌淡底 */
+  .xh-scope-calendar-range-picker[data-part='cell'][data-in-range]:not([data-outside-month])::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    inset-block: calc(50% - var(--xh-_calendar-range-picker-range-r));
+    inset-inline: 0;
+    background-color: var(--xh-calendar-range-picker-range-bg, var(--xh-bg-brand-subtle));
+    pointer-events: none;
+    transition: background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 挑到一半的预览还不是选中：品牌淡底专属选中 / 当前，预览铺中性淡底，与已落定的区间分开 */
+  .xh-scope-calendar-range-picker[data-part='cell'][data-in-range][data-range-preview]:not([data-outside-month])::before {
+    background-color: var(--xh-calendar-range-picker-range-preview-bg, var(--xh-bg-subtle));
+  }
+
+  /* 轨道两端收成半圆帽：端点那一格的实心圆坐在帽里。跨周折行处不收圆，一行的首尾是直边 */
+  .xh-scope-calendar-range-picker[data-part='cell'][data-in-range][data-range-start]::before {
+    border-start-start-radius: var(--xh-calendar-range-picker-range-cap-radius, var(--xh-shape-pill));
+    border-end-start-radius: var(--xh-calendar-range-picker-range-cap-radius, var(--xh-shape-pill));
+  }
+
+  .xh-scope-calendar-range-picker[data-part='cell'][data-in-range][data-range-end]::before {
+    border-start-end-radius: var(--xh-calendar-range-picker-range-cap-radius, var(--xh-shape-pill));
+    border-end-end-radius: var(--xh-calendar-range-picker-range-cap-radius, var(--xh-shape-pill));
+  }
+
+  /* 日视图的端点是格子正中的圆：帽从「格中线减半高」起算，圆心落在格子中线上，与端点圆同心。
+     从格边起算只在格宽恰为轨道高时重合，页内日历随容器铺宽、格子变宽后帽会偏到圆的外侧 */
+  .xh-scope-calendar-range-picker[data-part='cell'][data-view='day'][data-in-range][data-range-start]::before {
+    inset-inline-start: calc(50% - var(--xh-_calendar-range-picker-range-r));
+  }
+
+  .xh-scope-calendar-range-picker[data-part='cell'][data-view='day'][data-in-range][data-range-end]::before {
+    inset-inline-end: calc(50% - var(--xh-_calendar-range-picker-range-r));
+  }
+
+  /* 今天：数字下方一颗 4px 品牌圆点，数字保持正文色（brand-subtle 只留给选中）；
+     端点换实心面后圆点仍落在面的外面，落在区间里时压在轨道的下沿 */
+  .xh-scope-calendar-range-picker[data-part='cell'][data-today]::after {
+    content: '';
+    position: absolute;
+    inset-block-start: calc(50% + var(--xh-calendar-range-picker-cell-size, var(--xh-control-action-size)) / 2 + var(--xh-space-0_5));
+    inset-inline-start: 50%;
+    inline-size: var(--xh-calendar-range-picker-today-mark-size, var(--xh-space-1));
+    block-size: var(--xh-calendar-range-picker-today-mark-size, var(--xh-space-1));
+    border-radius: var(--xh-shape-circle);
+    background-color: var(--xh-calendar-range-picker-today-mark-bg, var(--xh-fg-brand));
+    translate: -50% 0;
+    pointer-events: none;
+  }
+
+  [dir='rtl'] .xh-scope-calendar-range-picker[data-part='cell'][data-today]::after {
+    translate: 50% 0;
+  }
+
+  /* 日期格接 Action Control text 档 xs（日历格是定尺控件，属格状当前）、ghost 形态：悬停 / 按下 / 禁用面、
+     焦点环与过渡由家族配方给，这里只把使用者槽映射到桥接槽。日视图是 24 见方的圆（下一条），
+     周期视图是铺满格宽的 24 高钮、控件圆角。钮不当定位盒：命中区挂在格子上。
+     格子坐在日历的白底上：悬停 100 → 按下 200；选中 / 邻月 / 不可用只换下面的私有槽 */
+  .xh-scope-calendar-range-picker[data-part='cell-trigger'] {
+    --xh-_calendar-range-picker-cell-bg: transparent;
+    --xh-_calendar-range-picker-cell-bg-hover: var(--xh-calendar-range-picker-cell-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-_calendar-range-picker-cell-bg-pressed: var(--xh-calendar-range-picker-cell-bg-pressed, var(--xh-_action-variant-bg-pressed));
+    --xh-_calendar-range-picker-cell-fg: var(--xh-calendar-range-picker-cell-fg, var(--xh-fg-default));
+
+    --xh-action-visual-size: var(--xh-calendar-range-picker-cell-size, var(--xh-_action-profile-visual-size));
+    --xh-action-min-inline-size: var(--xh-calendar-range-picker-cell-size, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: 0;
+    --xh-action-radius: var(--xh-calendar-range-picker-period-radius, var(--xh-shape-control));
+    --xh-action-bg-rest: var(--xh-_calendar-range-picker-cell-bg);
+    --xh-action-bg-hover: var(--xh-_calendar-range-picker-cell-bg-hover);
+    --xh-action-bg-pressed: var(--xh-_calendar-range-picker-cell-bg-pressed);
+    --xh-action-bg-focus-visible: var(--xh-_calendar-range-picker-cell-bg);
+    --xh-action-bg-disabled: var(--xh-_calendar-range-picker-cell-bg);
+    --xh-action-border-rest: transparent;
+    --xh-action-border-hover: transparent;
+    --xh-action-border-pressed: transparent;
+    --xh-action-border-focus-visible: transparent;
+    --xh-action-border-disabled: transparent;
+    --xh-action-fg-rest: var(--xh-_calendar-range-picker-cell-fg);
+    --xh-action-fg-hover: var(--xh-_calendar-range-picker-cell-fg);
+    --xh-action-fg-pressed: var(--xh-_calendar-range-picker-cell-fg);
+    --xh-action-fg-focus-visible: var(--xh-_calendar-range-picker-cell-fg);
+    --xh-action-font-size: var(--xh-calendar-range-picker-cell-font-size, var(--xh-text-body-size));
+    /* 按下只换面不缩放：缩放会让钮成为包含块，挂在格子上的命中区当场缩回钮里，抬起落空 */
+    --xh-action-scale-pressed: none;
+
+    position: static;
+    flex: none;
+    font-weight: var(--xh-calendar-range-picker-cell-font-weight, var(--xh-font-weight-medium));
+  }
+
+  /* 日视图：24 见方的日期钮取圆 */
+  .xh-scope-calendar-range-picker[data-part='cell-trigger'][data-view='day'] {
+    --xh-action-radius: var(--xh-calendar-range-picker-cell-radius, var(--xh-shape-circle));
+  }
+
+  /* 周期格（周、月、季、年）：钮铺满格子的内容宽，仍是 24 高、控件圆角；选中面只换颜色，不改变几何尺寸 */
+  .xh-scope-calendar-range-picker[data-part='cell-trigger']:is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year']) {
+    --xh-action-min-inline-size: 0;
+
+    inline-size: 100%;
+  }
+
+  /* 一行一个整周：文字从行首排起 */
+  .xh-scope-calendar-range-picker[data-part='cell-trigger'][data-view='week'] {
+    --xh-action-padding-inline: var(--xh-calendar-range-picker-week-cell-px, var(--xh-space-3));
+
+    justify-content: flex-start;
+  }
+
+  .xh-scope-calendar-range-picker[data-part='cell-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 命中区铺满整格：格子上下那截内衬也归它，指尖落在两行之间的空隙不会落空 */
+  .xh-scope-calendar-range-picker[data-part='cell-trigger']::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+
+  /* 粗指针：格子首尾相接，家族 text 档那套 ::after 外扩会压到上下相邻的格。改由格子自己长到 44 见方——
+     行距加到 44、列宽下限抬到 44，铺满整格的命中区随之到 44×44、彼此不重叠；钮仍是 24 的圆，
+     横条与区间轨道仍以格子中线为轴、按细指针那副行距收边，帽仍与端点圆同心。::after 钉回整格那副几何。
+     列宽下限再按视口收（同 calendar-picker）：手机窄屏里取扣掉页边与内衬后视口宽的七分之一，不撑出视口 */
+  @media (pointer: coarse) {
+    .xh-scope-calendar-range-picker[data-part='grid']:is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year']) {
+      min-inline-size: calc(7 * max(var(--xh-calendar-range-picker-cell-min-w, var(--xh-control-h-md)), min(var(--xh-control-hit-coarse), calc((100vw - 2 * var(--xh-space-4) - 2 * var(--xh-calendar-range-picker-grid-px, var(--xh-space-4))) / 7))) + 2 * var(--xh-calendar-range-picker-grid-px, var(--xh-space-4)));
+    }
+
+    .xh-scope-calendar-range-picker[data-part='week-row'] {
+      grid-template-columns: repeat(7, minmax(max(var(--xh-calendar-range-picker-cell-min-w, var(--xh-control-h-md)), min(var(--xh-control-hit-coarse), calc((100vw - 2 * var(--xh-space-4) - 2 * var(--xh-calendar-range-picker-grid-px, var(--xh-space-4))) / 7))), 1fr));
+    }
+
+    .xh-scope-calendar-range-picker[data-part='week-row']:not([hidden]):has(> [data-part='week-number']) {
+      grid-template-columns:
+        var(--xh-calendar-range-picker-week-number-w, var(--xh-control-h-md))
+        repeat(7, minmax(max(var(--xh-calendar-range-picker-cell-min-w, var(--xh-control-h-md)), min(var(--xh-control-hit-coarse), calc((100vw - 2 * var(--xh-space-4) - 2 * var(--xh-calendar-range-picker-grid-px, var(--xh-space-4)) - var(--xh-calendar-range-picker-week-number-w, var(--xh-control-h-md))) / 7))), 1fr));
+    }
+
+    .xh-scope-calendar-range-picker[data-part='cell'] {
+      min-block-size: var(--xh-control-hit-coarse);
+    }
+
+    .xh-scope-calendar-range-picker[data-part='cell-trigger']::after {
+      inline-size: auto;
+      block-size: auto;
+      min-block-size: 0;
+      translate: none;
+    }
+  }
+
+  /* 邻月的日子照样可点，只是压暗、字重回到常规——它们不是占位符 */
+  .xh-scope-calendar-range-picker[data-part='cell-trigger'][data-outside-month] {
+    --xh-_calendar-range-picker-cell-fg: var(--xh-calendar-range-picker-cell-fg-outside, var(--xh-fg-subtle));
+
+    font-weight: var(--xh-calendar-range-picker-cell-font-weight-outside, var(--xh-font-weight-regular));
+  }
+
+  /* 区间中段的格坐在品牌淡底的轨道上（页内选中 12%）：悬停 20%、按下 28%，铺在格子自己的圆上 */
+  .xh-scope-calendar-range-picker[data-part='cell-trigger'][data-in-range]:not([data-outside-month], [data-disabled], [data-range-start], [data-range-end]) {
+    --xh-_calendar-range-picker-cell-bg-hover: var(--xh-calendar-range-picker-range-cell-bg-hover, var(--xh-bg-brand-subtle-hover));
+    --xh-_calendar-range-picker-cell-bg-pressed: var(--xh-calendar-range-picker-range-cell-bg-pressed, var(--xh-bg-brand-subtle-active));
+  }
+
+  /* 预览中段坐在中性淡底上：交互阶梯按淡底承载走，悬停 200、按下 300 */
+  .xh-scope-calendar-range-picker[data-part='cell-trigger'][data-in-range][data-range-preview]:not([data-outside-month], [data-disabled], [data-range-start], [data-range-end]) {
+    --xh-_calendar-range-picker-cell-bg-hover: var(--xh-calendar-range-picker-range-preview-cell-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-_calendar-range-picker-cell-bg-pressed: var(--xh-calendar-range-picker-range-preview-cell-bg-pressed, var(--xh-bg-subtle-active));
+  }
+
+  /* 实心强调面只给单选 / 多选的选中格与区间的两端（格状当前）：悬停不换面，按下压到 active 档；
+     区间中段的格子由格子上的轨道铺底，自己不换面——不然一整段都是实心圆，就分不出哪两格是端点。
+     面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的 */
+  .xh-scope-calendar-range-picker[data-part='cell-trigger'][data-selected]:not([data-in-range]),
+  .xh-scope-calendar-range-picker[data-part='cell-trigger'][data-in-range]:not([data-outside-month]):is([data-range-start], [data-range-end]) {
+    --xh-action-bg-rest: var(--xh-calendar-range-picker-cell-bg-selected, var(--xh-bg-brand));
+    --xh-action-bg-hover: var(--xh-calendar-range-picker-cell-bg-selected, var(--xh-bg-brand));
+    --xh-action-bg-pressed: var(--xh-calendar-range-picker-cell-bg-selected-active, var(--xh-bg-brand-active));
+    --xh-action-bg-focus-visible: var(--xh-calendar-range-picker-cell-bg-selected, var(--xh-bg-brand));
+    --xh-action-border-rest: transparent;
+    --xh-action-border-hover: transparent;
+    --xh-action-border-pressed: transparent;
+    --xh-action-border-focus-visible: transparent;
+    --xh-action-fg-rest: var(--xh-calendar-range-picker-cell-fg-selected, var(--xh-fg-on-brand));
+    --xh-action-fg-hover: var(--xh-calendar-range-picker-cell-fg-selected, var(--xh-fg-on-brand));
+    --xh-action-fg-pressed: var(--xh-calendar-range-picker-cell-fg-selected, var(--xh-fg-on-brand));
+    --xh-action-fg-focus-visible: var(--xh-calendar-range-picker-cell-fg-selected, var(--xh-fg-on-brand));
+    --xh-action-ring-color-focus-visible: currentColor;
+  }
+
+  @media (forced-colors: active) {
+    /* 今天的圆点是一块底色，这一档会被系统抹掉：退出强制换色，直接取系统前景 */
+    .xh-scope-calendar-range-picker[data-part='cell'][data-today]::after {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    /* 强制色下底色被抹平，区间两端只剩描边能说明身份 */
+    .xh-scope-calendar-range-picker[data-part='cell-trigger'][data-in-range]:not([data-outside-month]):is([data-range-start], [data-range-end]) {
+      border-color: Highlight;
+    }
+
+    /* 落定的区间中段在这一档没有底色：轨道上下沿画实线 */
+    .xh-scope-calendar-range-picker[data-part='cell'][data-in-range]:not([data-range-preview], [data-outside-month])::before {
+      border-block: var(--xh-stroke-thin) solid Highlight;
+    }
+
+    /* 预览与落定的区间在这一档没有底色可分：还没确认的那一段在轨道上下沿画虚线 */
+    .xh-scope-calendar-range-picker[data-part='cell'][data-in-range][data-range-preview]:not([data-outside-month])::before {
+      border-block: var(--xh-stroke-thin) dashed Highlight;
+    }
+
+    /* 按下换的底在这一档由家族的按压块换成 Highlight（格子、方向钮与标题钮同走），这里不再另画 */
+  }
+
+  /* 不可用走 aria-disabled 而非原生 disabled：格子仍要可聚焦（它还得当方向键的起点），
+     所以只能靠 data-disabled 表达，写 :disabled 永远不命中；置灰字由家族的禁用块按映射给，
+     那一档不落焦点环的灌色（环取过来就跟底一起糊了），环由公共层画 */
+  .xh-scope-calendar-range-picker[data-part='cell-trigger'][data-disabled] {
+    --xh-action-fg-disabled: var(--xh-fg-disabled);
+    --xh-action-ring-color-focus-visible: var(--xh-ring-focus);
+  }
+
+  /* 不可用又选中的格：压在淡底横条上，钮退到再深一档的中性面 + 置灰字（禁用面），
+     选中身份仍由这块底与未选中的透明格分开 */
+  .xh-scope-calendar-range-picker[data-part='cell-trigger'][data-disabled][data-selected] {
+    --xh-action-bg-disabled: var(--xh-calendar-range-picker-cell-bg-selected-disabled, var(--xh-bg-subtle-hover));
+  }
+
+  /* 每张面板只画自己的月份：邻月格仍保留区间语义与可点能力，但不铺轨道或端点面。 */
+  .xh-scope-calendar-range-picker[data-part='cell-trigger'][data-outside-month][data-in-range] {
+    --xh-action-bg-rest: transparent;
+    --xh-action-bg-focus-visible: transparent;
+    --xh-action-border-rest: transparent;
+    --xh-action-border-hover: transparent;
+    --xh-action-border-pressed: transparent;
+    --xh-action-border-focus-visible: transparent;
+  }
+
+  /* 只读：日子改不动，但不是禁用——颜色照常，只把"可点"这个暗示收回来。
+     只收日视图这一档：粗粒度视图（月格、年格）点一格是往下钻一层，只读也照做，
+     那些格子仍是按得动的按钮，手型不能撤 */
+  .xh-scope-calendar-range-picker[data-part='grid'][data-readonly][data-view='day']
+    [data-part='cell-trigger']:where(.xh-scope-calendar-range-picker):not([data-disabled]) {
+    --xh-action-cursor-rest: default;
+    --xh-action-cursor-hover: default;
+    --xh-action-cursor-pressed: default;
+    --xh-action-cursor-focus-visible: default;
+  }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  .xh-scope-calendar-range-picker[data-part='prev-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-chevron-left) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-left) center / contain no-repeat;
+  }
+
+  .xh-scope-calendar-range-picker[data-part='next-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+  }
+
+  /* 大步翻那对画双箭头，与单步的单箭头同一把尺、同一副着色 */
+  .xh-scope-calendar-range-picker[data-part='prev-year-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-chevrons-left) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevrons-left) center / contain no-repeat;
+  }
+
+  .xh-scope-calendar-range-picker[data-part='next-year-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-chevrons-right) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevrons-right) center / contain no-repeat;
+  }
+
+  /* rtl 下月份从右往左排，四支箭头跟着指向行进方向 */
+  [dir='rtl'] .xh-scope-calendar-range-picker[data-part='prev-trigger']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-chevron-right);
+    mask-image: var(--xh-glyph-mark-chevron-right);
+  }
+
+  [dir='rtl'] .xh-scope-calendar-range-picker[data-part='next-trigger']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-chevron-left);
+    mask-image: var(--xh-glyph-mark-chevron-left);
+  }
+
+  [dir='rtl'] .xh-scope-calendar-range-picker[data-part='prev-year-trigger']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-chevrons-right);
+    mask-image: var(--xh-glyph-mark-chevrons-right);
+  }
+
+  [dir='rtl'] .xh-scope-calendar-range-picker[data-part='next-year-trigger']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-chevrons-left);
+    mask-image: var(--xh-glyph-mark-chevrons-left);
+  }
+
+  @media print {
+    /* 打印默认丢背景色：选中片与区间底都不画，一整张网格印出来是一模一样的三十来个数字。
+       两档各换一条不吃底色的通道——选中走实边加粗体，区间走格底下的一道线。 */
+    .xh-scope-calendar-range-picker[data-part='cell-trigger'][data-selected]:not([data-in-range]),
+    .xh-scope-calendar-range-picker[data-part='cell-trigger'][data-in-range]:not([data-outside-month]):is([data-range-start], [data-range-end]) {
+      border-color: currentColor;
+      /* 反白那层文字的取值是「压在实心底上的前景」，底一没就印成一片白，退回正文色 */
+      color: var(--xh-calendar-range-picker-cell-fg, var(--xh-fg-default));
+      font-weight: var(--xh-font-weight-bold);
+    }
+
+    /* 区间那块底收成格子下沿的一道横线：起点让开，只留下边那条描边 */
+    .xh-scope-calendar-range-picker[data-part='cell'][data-in-range]::before {
+      inset-block-start: auto;
+      border-block-end: var(--xh-stroke-thick) solid currentColor;
+    }
+
+    /* 今天的圆点同样是底色：改由描边把这颗点画满 */
+    .xh-scope-calendar-range-picker[data-part='cell'][data-today]::after {
+      border: calc(var(--xh-calendar-range-picker-today-mark-size, var(--xh-space-1)) / 2) solid var(--xh-fg-default);
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    .xh-scope-calendar-range-picker:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='prev-year-trigger'], [data-part='next-year-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-scope-calendar-range-picker:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='prev-year-trigger'], [data-part='next-year-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-calendar-range-picker:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='prev-year-trigger'], [data-part='next-year-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
+}