@xihan-ui/styles 3.0.0 → 3.2.0

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

@@ -0,0 +1,554 @@
+/*
+ * 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'] {
+    /* 翻页钮是 sm 档的图标钮（--xh-control-h-sm 见方），钮里的图标按 sm 档取 --xh-glyph-size-sm；
+       作者塞进去的图标与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-calendar-range-picker-icon-size, var(--xh-glyph-size-sm));
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-calendar-range-picker-gap, var(--xh-space-2));
+    /* 数字等宽：1 与 7 的字形宽度在比例字体里并不相同，不定住会让整张网格随月份抖动 */
+    font-variant-numeric: tabular-nums;
+  }
+
+  .xh-scope-calendar-range-picker[data-part='root'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-calendar-range-picker[data-part='header'] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--xh-calendar-range-picker-header-gap, var(--xh-space-2));
+    min-block-size: var(--xh-control-h-sm);
+  }
+
+  .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-semibold));
+    line-height: var(--xh-leading-none);
+    user-select: none;
+  }
+
+  /* 标题里的年与月：点它们逐级钻上去（年 → 十年格、月 → 月格）。
+     长得像标题而不像按钮——它本来就是标题，只是可点 */
+  /* 标题里的年与月接 Action Control text 档（日期翻页按钮同族）：盒、按下 / 禁用面、0.97 缩放与换底、焦点环与过渡
+     由家族配方给，这里只把使用者槽映射到桥接槽。长得像标题而不像按钮——它本来就是标题，只是可点：静息透明（ghost），
+     悬停只换字色不换底（标题不是一枚按钮面），按下换到 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-1));
+    --xh-action-radius: var(--xh-calendar-range-picker-heading-trigger-radius, var(--xh-shape-control));
+    --xh-action-bg-hover: transparent;
+    --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-trigger-fg-hover, var(--xh-fg-brand));
+    --xh-action-fg-pressed: var(--xh-calendar-range-picker-heading-trigger-fg-hover, var(--xh-fg-brand));
+    --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-semibold));
+  }
+
+  .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 档（日期翻页按钮）、ghost 形态：正方盒、悬停 / 按下 / 禁用面、0.97 缩放与换底、
+     粗指针热区、焦点环与过渡由家族配方给，这里只把使用者槽映射到桥接槽；钮坐在日历的白底上，悬停 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-control));
+    --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;
+  }
+
+
+  .xh-scope-calendar-range-picker[data-part='grid'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-calendar-range-picker-grid-gap, var(--xh-space-1));
+  }
+
+  /* 周期视图：格子直接铺进网格，不再有周行那一层。 */
+  .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-1));
+  }
+
+  /* 月 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-1));
+  }
+
+  .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-1));
+  }
+
+  .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));
+    padding-inline-end: var(--xh-calendar-range-picker-year-grid-pe, var(--xh-space-1));
+    /* 页内结构容器走原生细条（reset 层统一给）、滚动链保持 auto；嵌进 date-picker 浮层时由那份皮肤补 contain */
+    overflow-y: auto;
+  }
+
+  /* 周期格沿横轴铺开，但始终保持控制件高度；选中面只换颜色，不改变几何尺寸。 */
+  .xh-scope-calendar-range-picker[data-part='grid']:is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year']) [data-part='cell-trigger']:where(.xh-scope-calendar-range-picker) {
+    flex: 0 0 auto;
+    aspect-ratio: auto;
+    min-inline-size: 0;
+    inline-size: min(3.5rem, 100%);
+    padding-block: var(--xh-calendar-range-picker-period-py, var(--xh-space-2));
+    border-radius: var(--xh-calendar-range-picker-period-radius, var(--xh-shape-control));
+  }
+
+  .xh-scope-calendar-range-picker[data-part='grid'][data-view='week'] [data-part='cell-trigger']:where(.xh-scope-calendar-range-picker) {
+    flex: 1 1 auto;
+    justify-content: flex-start;
+    inline-size: 100%;
+    padding-inline: var(--xh-calendar-range-picker-week-cell-px, var(--xh-space-3));
+  }
+
+  .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(0, 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(0, 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-sm));
+    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-caption-size));
+    font-weight: var(--xh-calendar-range-picker-week-day-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-none);
+    user-select: none;
+  }
+
+  .xh-scope-calendar-range-picker[data-part='week-day'][hidden] {
+    display: none;
+  }
+
+  /* 格子是区间底色的画布：底色由格子的 ::before 铺出来，圆角的选中片留给 trigger。
+     铺在 trigger 上会被格间空隙切断，区间看起来就是一串断开的圆点 */
+  .xh-scope-calendar-range-picker[data-part='cell'] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--xh-calendar-range-picker-cell-gap, var(--xh-space-0_5));
+  }
+
+  .xh-scope-calendar-range-picker[data-part='cell'][hidden] {
+    display: none;
+  }
+
+  /* 区间底色：横向铺满格子，相邻两格接成一条；纵向收在格子内衬里，行与行之间留出空当。
+     轨道随 data-in-range 生灭，出现与消失都是当场的；过渡只在同一段轨道换底时走——
+     挑到一半的预览落定成区间，中性淡底淡变到品牌淡底 */
+  .xh-scope-calendar-range-picker[data-part='cell'][data-in-range]:not([data-outside-month])::before {
+    content: '';
+    position: absolute;
+    inset-block: var(--xh-calendar-range-picker-cell-gap, var(--xh-space-0_5));
+    inset-inline: 0;
+    background: var(--xh-calendar-range-picker-range-bg, var(--xh-bg-brand-subtle));
+    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: var(--xh-calendar-range-picker-range-preview-bg, var(--xh-bg-subtle));
+  }
+
+  /* 行首与行尾收圆：区间跨周时每一行各是一条两头圆的横杠。
+     摆了周序号格的行里，行首那一格排在它后面 */
+  .xh-scope-calendar-range-picker[data-part='week-row'] > [data-part='cell'][data-in-range]:where(.xh-scope-calendar-range-picker):first-child::before,
+  .xh-scope-calendar-range-picker[data-part='week-row'] > [data-part='week-number'] + [data-part='cell'][data-in-range]:where(.xh-scope-calendar-range-picker)::before {
+    border-start-start-radius: var(--xh-calendar-range-picker-range-row-radius, var(--xh-shape-inset));
+    border-end-start-radius: var(--xh-calendar-range-picker-range-row-radius, var(--xh-shape-inset));
+  }
+
+  .xh-scope-calendar-range-picker[data-part='week-row'] > [data-part='cell'][data-in-range]:where(.xh-scope-calendar-range-picker):last-child::before {
+    border-start-end-radius: var(--xh-calendar-range-picker-range-row-radius, var(--xh-shape-inset));
+    border-end-end-radius: var(--xh-calendar-range-picker-range-row-radius, var(--xh-shape-inset));
+  }
+
+  .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-inset));
+    border-end-start-radius: var(--xh-calendar-range-picker-range-cap-radius, var(--xh-shape-inset));
+  }
+
+  .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-inset));
+    border-end-end-radius: var(--xh-calendar-range-picker-range-cap-radius, var(--xh-shape-inset));
+  }
+
+  /* 粗粒度的格子之间有间隙，底色本就接不成一条，每一格各自收圆 */
+  .xh-scope-calendar-range-picker[data-part='grid']:is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year']) > [data-part='cell'][data-in-range]:where(.xh-scope-calendar-range-picker)::before {
+    border-radius: var(--xh-calendar-range-picker-cell-radius, var(--xh-shape-inset));
+  }
+
+  /* 日期格接 Action Control text 档（日历格是定尺控件，属格状当前）、ghost 形态：悬停 / 按下 / 禁用面、
+     0.97 缩放与换底、焦点环与过渡由家族配方给，这里只把使用者槽映射到桥接槽。几何仍由网格给：宽度由 week-row 的
+     等分轨道给、高度按 aspect-ratio 跟着走（block-size 归 auto，不取家族的固定高），日历才不会被长月份拉扁。
+     格子坐在日历的白底上：悬停 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-border: transparent;
+    --xh-_calendar-range-picker-cell-fg: var(--xh-calendar-range-picker-cell-fg, var(--xh-fg-default));
+
+    --xh-action-visual-size: auto;
+    --xh-action-min-inline-size: var(--xh-calendar-range-picker-cell-size, var(--xh-control-h-sm));
+    --xh-action-padding-inline: 0;
+    --xh-action-radius: var(--xh-calendar-range-picker-cell-radius, var(--xh-shape-inset));
+    --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: var(--xh-_calendar-range-picker-cell-border);
+    --xh-action-border-hover: var(--xh-_calendar-range-picker-cell-border);
+    --xh-action-border-pressed: var(--xh-_calendar-range-picker-cell-border);
+    --xh-action-border-focus-visible: var(--xh-_calendar-range-picker-cell-border);
+    --xh-action-border-disabled: var(--xh-_calendar-range-picker-cell-border);
+    --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));
+
+    display: flex;
+    flex: 1;
+    /* 正方格：宽度由 week-row 的等分轨道给，高度跟着走 */
+    aspect-ratio: 1;
+    font-weight: var(--xh-calendar-range-picker-cell-font-weight, var(--xh-font-weight-medium));
+  }
+
+  /* 家族 text 档在粗指针下用 ::after 扩热区到 44px 高，这里的 ::after 是铺满整格（含四周留白）的命中区：
+     钉回 inset 那副几何，不让家族的定位与下限把它挪走或撑高压到相邻的格 */
+  @media (pointer: 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'][hidden] {
+    display: none;
+  }
+
+  /* 命中区铺满整格：格子四周那圈留白也归它，指尖落在两格之间的空隙不会落空 */
+  .xh-scope-calendar-range-picker[data-part='cell-trigger']::after {
+    content: '';
+    position: absolute;
+    inset: calc(-1 * var(--xh-calendar-range-picker-cell-gap, var(--xh-space-0_5)));
+  }
+
+  /* 邻月的日子照样可点，只是压暗——它们不是占位符 */
+  .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));
+  }
+
+  /* 区间中段的格坐在品牌淡底的轨道上（页内选中 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));
+  }
+
+  /* 今天：1px 品牌环 + 品牌字（brand-subtle 退出 today 语义），底透明、悬停走普通格的阶梯；
+     落在区间里时环压在轨道上，选中仍用后面的实心强调面，状态叠加时不会混成同一种反馈 */
+  .xh-scope-calendar-range-picker[data-part='cell-trigger'][data-today] {
+    --xh-_calendar-range-picker-cell-bg: var(--xh-calendar-range-picker-today-bg, transparent);
+    --xh-_calendar-range-picker-cell-border: var(--xh-calendar-range-picker-today-border, var(--xh-fg-brand));
+    --xh-_calendar-range-picker-cell-fg: var(--xh-calendar-range-picker-today-fg, var(--xh-fg-brand));
+  }
+
+  /* 实心强调面只给单选 / 多选的选中格与区间的两端（格状当前）：悬停不换面，按下压到 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-trigger'][data-today] {
+      border-color: Highlight;
+    }
+
+    /* 强制色下底色被抹平，区间两端只剩描边能说明身份 */
+    .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][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));
+  }
+
+  /* 每张面板只画自己的月份：邻月格仍保留区间语义与可点能力，但不铺轨道或端点面。 */
+  .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;
+    }
+  }
+
+  @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;
+    }
+  }
+}