@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/pagination.css

@@ -0,0 +1,447 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 pagination 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立；四类格子接 Action Control 配方，同理 */
+@import '../family/motion.css';
+@import '../family/action-control.css';
+@import '../family/field-chrome.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-pagination {
+    --xh-pagination-skin: 1;
+  }
+
+  /* 私有槽同时声明在根与 positioner 上：摊开的页码面板被搬到 portal 落点，
+     不是根的后代，继承不过去。面板里的页码格子与主区那排消费的是同一批槽 */
+  .xh-scope-pagination:is([data-part='root'], [data-part='positioner']) {
+    /* 作者塞进面板或分页行里的图标按档取字形尺；四类格子上另按家族档位取同一把尺 */
+    --xh-icon-size: var(--xh-pagination-icon-size, var(--xh-glyph-size-md));
+
+    /* 尺寸档只换这几个私有槽，上一页/下一页、页码与省略号都从这两处继承它们，
+       换档不必给每个部件各写一条选择器。格子的横内衬比控件尺窄一档：一位数的页码加两侧内衬
+       要收得进方格的最小宽度，格子才是正方的；跳页输入框是字段，仍取控件尺的横内衬 */
+    --xh-_pagination-item-size: var(--xh-control-h-md);
+    --xh-_pagination-item-px: var(--xh-space-2);
+    --xh-_pagination-jumper-px: var(--xh-control-px-md);
+    --xh-_pagination-font-size: var(--xh-control-font-md);
+
+    /* 当前页的选中态随语气走。没写 data-tone 时这几个 --xh-_tone-* 都没被声明，
+       退回原来的品牌底与其配色。聚焦环不在其列，它恒是 --xh-ring-focus */
+    --xh-_pagination-selected-bg: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+    --xh-_pagination-selected-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-brand-subtle-hover));
+    --xh-_pagination-selected-bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-brand-subtle-active));
+    --xh-_pagination-selected-fg: var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle));
+    --xh-_pagination-selected-border: var(--xh-_tone-border-control, var(--xh-bg-brand));
+    /* 当前页那一格是实心底，顶边画一条极浅的内高光把它衬出厚度（solid 面允许顶高光，经家族的 highlight 槽画） */
+  }
+
+  /* 根节点是 nav 地标，只负责把上一页 / 页码 / 下一页排成一行。
+     页数为 0 时连接层会打 data-empty，这里不拿它做隐藏：作者常把「第 x-y 条」这类
+     区间回显也写在 nav 里，整块藏掉会连那行字一起吞了，是否隐藏交给作者决定 */
+  .xh-scope-pagination[data-part='root'] {
+    display: flex;
+    align-items: center;
+    /* 页码多到一行放不下就换行，宁可折行也不要把按钮压扁或撑出横向滚动 */
+    flex-wrap: wrap;
+    gap: var(--xh-pagination-gap, var(--xh-space-1));
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里。格子高度、内边距、字号三者各走控件尺的同一档；
+     页码格子靠最小宽度撑等宽，内边距只在页码超出最小宽度时才起作用 */
+  .xh-scope-pagination:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
+    --xh-icon-size: var(--xh-pagination-icon-size, var(--xh-glyph-size-sm));
+    --xh-_pagination-item-size: var(--xh-control-h-sm);
+    --xh-_pagination-item-px: var(--xh-space-1_5);
+    --xh-_pagination-jumper-px: var(--xh-control-px-sm);
+    --xh-_pagination-font-size: var(--xh-control-font-sm);
+  }
+
+  .xh-scope-pagination:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
+    --xh-icon-size: var(--xh-pagination-icon-size, var(--xh-glyph-size-lg));
+    --xh-_pagination-item-size: var(--xh-control-h-lg);
+    --xh-_pagination-item-px: var(--xh-space-2_5);
+    --xh-_pagination-jumper-px: var(--xh-control-px-lg);
+    --xh-_pagination-font-size: var(--xh-control-font-lg);
+  }
+
+  .xh-scope-pagination[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 各类格子接 Action Control 的 text 档（连接层投影 ghost 形态）：盒型、三档几何、禁用面、按压与过渡都由家族给。
+     分页把每一格画成描边方块：静息一道装饰边、透明底，悬停边加深一档、字转正文色，底走家族的承载面阶梯；
+     省略位也占同样一格，几种格子内容盒等高，一行里对得齐。这里把使用者槽映射到桥接槽并保留分页自己的排版。
+     等宽的关键：1 与 10 的内容宽度不同，靠最小宽度把它们撑到同一格，行宽才不会随当前页左右抖动 */
+  .xh-scope-pagination[data-part='first-trigger'],
+  .xh-scope-pagination[data-part='prev-trigger'],
+  .xh-scope-pagination[data-part='next-trigger'],
+  .xh-scope-pagination[data-part='last-trigger'],
+  .xh-scope-pagination[data-part='item'],
+  .xh-scope-pagination[data-part='ellipsis-trigger'] {
+    --xh-action-min-inline-size: var(--xh-pagination-item-min-size, var(--xh-_pagination-item-size));
+    --xh-action-visual-size: var(--xh-pagination-item-h, var(--xh-_pagination-item-size));
+    --xh-action-padding-inline: var(--xh-pagination-item-px, var(--xh-_pagination-item-px));
+    --xh-action-radius: var(--xh-pagination-item-radius, var(--xh-shape-surface));
+    --xh-action-font-size: var(--xh-pagination-font-size, var(--xh-_pagination-font-size));
+    --xh-action-bg-rest: var(--xh-pagination-item-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-pagination-item-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-pagination-item-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-border-rest: var(--xh-pagination-item-border, var(--xh-border-default));
+    --xh-action-border-hover: var(--xh-pagination-item-border-hover, var(--xh-border-strong));
+    --xh-action-border-pressed: var(--xh-pagination-item-border-hover, var(--xh-border-strong));
+    --xh-action-border-focus-visible: var(--xh-pagination-item-border, var(--xh-border-default));
+    --xh-action-border-disabled: var(--xh-pagination-item-border, var(--xh-border-default));
+    --xh-action-fg-rest: var(--xh-pagination-item-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-pagination-item-fg, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-pagination-item-fg, var(--xh-fg-default));
+    /* 作者塞进翻页钮的图标按档取字形尺，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-pagination-icon-size, var(--xh-_action-profile-glyph-size));
+
+    flex: none;
+    font-weight: var(--xh-pagination-item-font-weight, var(--xh-text-label-weight));
+    /* 等宽数字：1 与 7 的字形宽度在比例字体里并不相同，不定住会让同位数页码抖一格 */
+    font-variant-numeric: tabular-nums;
+  }
+
+  .xh-scope-pagination[data-part='first-trigger'][hidden],
+  .xh-scope-pagination[data-part='prev-trigger'][hidden],
+  .xh-scope-pagination[data-part='next-trigger'][hidden],
+  .xh-scope-pagination[data-part='last-trigger'][hidden],
+  .xh-scope-pagination[data-part='item'][hidden],
+  .xh-scope-pagination[data-part='ellipsis-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 到头那一侧的翻页钮是原生 disabled（不可聚焦、进不了 Tab 序列），连接层同时给 data-disabled，
+     家族按 data-disabled 画禁用面（透明底 + --xh-fg-disabled）；整组 disabled 时页码与省略位同样如此 */
+
+  /* 当前页：data-current 与 aria-current='page' 由连接层成对给出，样式挂在 data 钩子上，无障碍语义留给 aria。
+     品牌描边 + 品牌淡底 + 淡底前景、不加粗——字重一变字形就变宽，页码格子会跟着长一点，正是这里要避免的抖动；
+     悬停 / 按下沿淡底 12% → 20% → 28% 走，边不变，三态都经桥接槽交给家族画 */
+  .xh-scope-pagination[data-part='item'][data-current] {
+    --xh-action-bg-rest: var(--xh-pagination-item-bg-selected, var(--xh-_pagination-selected-bg));
+    --xh-action-bg-hover: var(--xh-pagination-item-bg-selected-hover, var(--xh-_pagination-selected-bg-hover));
+    --xh-action-bg-pressed: var(--xh-pagination-item-bg-selected-active, var(--xh-_pagination-selected-bg-active));
+    --xh-action-bg-focus-visible: var(--xh-pagination-item-bg-selected, var(--xh-_pagination-selected-bg));
+    --xh-action-fg-rest: var(--xh-pagination-item-fg-selected, var(--xh-_pagination-selected-fg));
+    --xh-action-fg-hover: var(--xh-pagination-item-fg-selected, var(--xh-_pagination-selected-fg));
+    --xh-action-fg-pressed: var(--xh-pagination-item-fg-selected, var(--xh-_pagination-selected-fg));
+    --xh-action-fg-focus-visible: var(--xh-pagination-item-fg-selected, var(--xh-_pagination-selected-fg));
+    --xh-action-border-rest: var(--xh-pagination-item-border-selected, var(--xh-_pagination-selected-border));
+    --xh-action-border-hover: var(--xh-pagination-item-border-selected-hover, var(--xh-_pagination-selected-border));
+    --xh-action-border-pressed: var(--xh-pagination-item-border-selected-active, var(--xh-_pagination-selected-border));
+    --xh-action-border-focus-visible: var(--xh-pagination-item-border-selected, var(--xh-_pagination-selected-border));
+    --xh-action-shadow-rest: var(--xh-pagination-item-shadow, none);
+    --xh-action-shadow-hover: var(--xh-pagination-item-shadow, none);
+    --xh-action-shadow-pressed: var(--xh-pagination-item-shadow, none);
+    --xh-action-shadow-focus-visible: var(--xh-pagination-item-shadow, none);
+  }
+
+  /* 整组禁用时当前页不跟着透明：品牌淡底退成中性淡底、字取禁用色，格子仍标得出位置，又一眼看得出按不动 */
+  .xh-scope-pagination[data-part='item'][data-current][data-disabled] {
+    --xh-action-bg-disabled: var(--xh-bg-subtle);
+    --xh-action-border-disabled: var(--xh-bg-subtle);
+  }
+
+  /* 省略位是可展开的按钮：折进去的那几页只有它一个入口，指针与键盘都得点得到，
+     所以它与页码同一副骨架、同一条阶梯。这里只把字色压淡一档与页码区分开，三态都压——
+     家族的悬停 / 按下规则比基础块特定，只映射静息那一支会在悬停时被换回缺省字色 */
+  .xh-scope-pagination[data-part='ellipsis-trigger'] {
+    --xh-action-fg-rest: var(--xh-pagination-ellipsis-trigger-fg, var(--xh-fg-subtle));
+    --xh-action-fg-hover: var(--xh-pagination-ellipsis-trigger-fg, var(--xh-fg-subtle));
+    --xh-action-fg-pressed: var(--xh-pagination-ellipsis-trigger-fg, var(--xh-fg-subtle));
+  }
+  /* 每页条数控制器的挂载点：里头装的是库里的 select，控件本身的描边、底色、聚焦环与
+     浮层都归 select 那份皮肤，这一格只把它摆进分页行。
+     在分页行里按内容定宽：选项是「10 条 / 页」一类短串，字段缺省宽在这一行里过宽；
+     地板一并放开，盒子刚好装下回显与箭头 */
+  .xh-scope-pagination[data-part='page-size-select'] {
+    --xh-select-control-w: var(--xh-pagination-page-size-select-w, max-content);
+    --xh-select-control-min-w: 0px;
+
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+  }
+
+  .xh-scope-pagination[data-part='page-size-select'][hidden] {
+    display: none;
+  }
+
+  /* 信息区：一段次要文字，与页码格子同一条基线 */
+  .xh-scope-pagination[data-part='summary'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    block-size: var(--xh-pagination-item-h, var(--xh-_pagination-item-size));
+    color: var(--xh-pagination-summary-fg, var(--xh-fg-muted));
+    font-size: var(--xh-pagination-font-size, var(--xh-_pagination-font-size));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+  }
+
+  .xh-scope-pagination[data-part='summary'][hidden] {
+    display: none;
+  }
+
+  /* 跳页输入框自身就是字段外壳（连接层投影 data-xh-field-chrome）：静息描边、悬停升控件悬停边、
+     聚焦换聚焦边加环、禁用面都由字段家族给，这里只把使用者槽映到家族桥接槽，
+     高度、内衬与圆角跟页码格子同一把尺，宽度按页码位数留够 */
+  .xh-scope-pagination[data-part='jumper'] {
+    --xh-field-control-height: var(--xh-pagination-item-h, var(--xh-_pagination-item-size));
+    --xh-field-control-padding-inline: var(--xh-pagination-item-px, var(--xh-_pagination-jumper-px));
+    --xh-field-control-min-inline-size: 0;
+    --xh-field-control-radius: var(--xh-pagination-item-radius, var(--xh-shape-control));
+    --xh-field-bg-rest: var(--xh-pagination-jumper-bg, var(--xh-_field-variant-bg-rest));
+    --xh-field-bg-hover: var(--xh-pagination-jumper-bg-hover, var(--xh-_field-variant-bg-hover));
+    --xh-field-bg-disabled: var(--xh-pagination-jumper-bg-disabled, var(--xh-_field-variant-bg-disabled));
+    --xh-field-fg-rest: var(--xh-pagination-item-fg, var(--xh-fg-default));
+    --xh-field-border-rest: var(--xh-pagination-jumper-border, var(--xh-_field-variant-border-rest));
+    --xh-field-border-hover: var(--xh-pagination-jumper-border-hover, var(--xh-_field-variant-border-hover));
+    --xh-field-border-focus: var(--xh-pagination-jumper-border-focus, var(--xh-_field-variant-border-focus));
+    --xh-field-border-invalid: var(--xh-pagination-jumper-border-invalid, var(--xh-_field-variant-border-invalid));
+    --xh-field-shadow-rest: none;
+
+    flex: none;
+    inline-size: var(--xh-pagination-jumper-w, calc(var(--xh-space-8) * 2));
+    /* 表单控件不继承页面字体，只给字号会让框里用 UA 默认字族 */
+    font-family: inherit;
+    font-size: var(--xh-pagination-font-size, var(--xh-_pagination-font-size));
+    line-height: var(--xh-leading-none);
+    appearance: none;
+  }
+
+  .xh-scope-pagination[data-part='jumper'][hidden] {
+    display: none;
+  }
+
+  /* 越界的页码（超出 1 到总页数）：浏览器的约束校验在用户动过之后判失败，与字段家族的校验失败同一副边。
+     家族的失败档认 data-invalid，跳页框的取值不进状态机，失败由原生约束给出 */
+  .xh-scope-pagination[data-part='jumper']:user-invalid {
+    border-color: var(--xh-field-border-invalid, var(--xh-_field-variant-border-invalid));
+  }
+
+  /* 摊开省略位的定位层。三处坐标系必须同为 fixed：机器交给引擎的 strategy、
+     连接层的内联 position、这里 —— 差一处就会算在错的坐标系里 */
+  .xh-scope-pagination[data-part='positioner'] {
+    /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，面板继承它限高；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
+    --xh-_pagination-available-h: 100vh;
+    /* 落定那一侧的可用宽度，同样由定位引擎经内联自定义属性写进来，行内轴据此夹取；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时退到视口宽 */
+    --xh-_pagination-available-w: 100vw;
+
+    /* 页码面板的自绘条浮在内容之上：轨道不上底色，实色轨道会在面板右缘糊一条竖灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
+    /* 面板从锚点一侧短移入，方向按实际落位只激活一支 */
+    --xh-_overlay-enter-up: 0;
+    --xh-_overlay-enter-down: 0;
+    --xh-_overlay-enter-left: 0;
+    --xh-_overlay-enter-right: 0;
+
+    position: fixed;
+    z-index: var(--xh-pagination-layer, var(--xh-_layer, var(--xh-layer-popover)));
+    /* 空壳不吃指针：省略位与面板之间那段间隙要能点得穿 */
+    pointer-events: none;
+  }
+
+  /* 物理 placement 与定位引擎同一套，不随书写方向翻 */
+  .xh-scope-pagination[data-part='positioner'][data-placement^='top'] {
+    --xh-_overlay-enter-down: 1;
+  }
+
+  .xh-scope-pagination[data-part='positioner'][data-placement^='bottom'] {
+    --xh-_overlay-enter-up: 1;
+  }
+
+  .xh-scope-pagination[data-part='positioner'][data-placement^='left'] {
+    --xh-_overlay-enter-right: 1;
+  }
+
+  .xh-scope-pagination[data-part='positioner'][data-placement^='right'] {
+    --xh-_overlay-enter-left: 1;
+  }
+
+  /* 锚点被滚出可视区：整个浮层随之收起 */
+  .xh-scope-pagination[data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  /* 摊开的页码面板：一串页码格子，横着排、必要时折行 */
+  .xh-scope-pagination[data-part='content'] {
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--xh-pagination-gap, var(--xh-space-1));
+    /* 页码不可预知有多少：不限高就整块伸出视口且滚不到 */
+    /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的内容就点不到了 */
+    max-inline-size: min(var(--xh-pagination-content-max-w, var(--xh-overlay-max-w)), var(--xh-_pagination-available-w));
+    max-block-size: min(
+      var(--xh-pagination-content-max-h, var(--xh-overlay-max-h)),
+      var(--xh-_pagination-available-h)
+    );
+    overflow-y: auto;
+    /* 浮层滚动面：滚到底不把滚动量交给页面（只给 Overlay 家族滚动面） */
+    overscroll-behavior: contain;
+    padding: var(--xh-pagination-content-p, var(--xh-space-1));
+    border: var(--xh-stroke-thin) solid var(--xh-pagination-content-border, var(--xh-border-default));
+    border-radius: var(--xh-pagination-content-radius, var(--xh-shape-overlay));
+    background: var(--xh-pagination-content-bg, var(--xh-bg-surface));
+    box-shadow: var(--xh-pagination-content-shadow, var(--xh-elevation-floating));
+    /* 定位层不吃指针，面板本体必须吃：里面的页码要点得到 */
+    pointer-events: auto;
+  }
+
+  /* 摊开的页码面板锚定在省略位上、从中挑一页，与菜单同属锚定列表：从锚点一侧短移淡入，不缩放 */
+  .xh-scope-pagination[data-part='content'][data-state='open'] {
+    animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
+     免得动画结束到真收起之间闪一下原样 */
+  .xh-scope-pagination[data-part='content'][data-state='closed'] {
+    animation: xh-overlay-slide-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 这里刻意没有 [data-part='content'][hidden] { display: none }：
+     补了退场就一帧都播不出来，真正的收起由适配器落成内联 display */
+
+  /* 没写内容就由皮肤画兜底字形：上一页 / 下一页默认就是两枚箭头，首页 / 末页是两枚双箭头，
+     作者往部件里塞了自己的图形或文字，这几条即不命中 */
+  .xh-scope-pagination[data-part='first-trigger']:empty::before,
+  .xh-scope-pagination[data-part='last-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-pagination[data-part='last-trigger']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-chevrons-right);
+    mask-image: var(--xh-glyph-mark-chevrons-right);
+  }
+
+  .xh-scope-pagination[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-pagination[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-pagination[data-part='ellipsis-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-ellipsis) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-ellipsis) center / contain no-repeat;
+  }
+
+  /* rtl 下页序从右往左走，箭头跟着指向行进方向 */
+  [dir='rtl'] .xh-scope-pagination[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-pagination[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-pagination[data-part='first-trigger']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-chevrons-right);
+    mask-image: var(--xh-glyph-mark-chevrons-right);
+  }
+
+  [dir='rtl'] .xh-scope-pagination[data-part='last-trigger']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-chevrons-left);
+    mask-image: var(--xh-glyph-mark-chevrons-left);
+  }
+
+  /* 手指落点：命中区由绝对定位的伪元素向块轴两侧外扩，格子的盒一点不动——
+     加高格子会把整条 nav 撑高，行宽也会跟着当前页抖。
+     只扩块轴：格与格在行内轴上只隔一格间距，往两侧扩会与相邻格的命中区叠上。
+     取 8px 是按最矮的 sm 档算的（28 + 8 × 2 = 44），md 与 lg 档更宽裕。
+     用 ::after：::before 已经被两枚箭头的兜底字形占着 */
+  @media (pointer: coarse) {
+    .xh-scope-pagination[data-part='first-trigger'],
+    .xh-scope-pagination[data-part='prev-trigger'],
+    .xh-scope-pagination[data-part='next-trigger'],
+    .xh-scope-pagination[data-part='last-trigger'],
+    .xh-scope-pagination[data-part='item'] {
+      position: relative;
+    }
+
+    .xh-scope-pagination[data-part='first-trigger']::after,
+    .xh-scope-pagination[data-part='prev-trigger']::after,
+    .xh-scope-pagination[data-part='next-trigger']::after,
+    .xh-scope-pagination[data-part='last-trigger']::after,
+    .xh-scope-pagination[data-part='item']::after {
+      content: '';
+      position: absolute;
+      inset-block: -8px;
+      inset-inline: 0;
+    }
+  }
+
+  @media print {
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
+       收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
+    .xh-scope-pagination[data-part='positioner'] {
+      display: none;
+    }
+
+    /* 打印默认丢背景：当前页那格的实心底印不出来，一排页码看上去完全一样。
+       改用字重表达同一件事——常态之所以不加粗是怕格子变宽、行宽跟着抖，纸上没有这回事 */
+    .xh-scope-pagination[data-part='item'][data-current] {
+      font-weight: var(--xh-font-weight-semibold);
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    .xh-scope-pagination:is([data-part='first-trigger'], [data-part='last-trigger'], [data-part='prev-trigger'], [data-part='next-trigger'], [data-part='ellipsis-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-scope-pagination:is([data-part='first-trigger'], [data-part='last-trigger'], [data-part='prev-trigger'], [data-part='next-trigger'], [data-part='ellipsis-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-pagination:is([data-part='first-trigger'], [data-part='last-trigger'], [data-part='prev-trigger'], [data-part='next-trigger'], [data-part='ellipsis-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
+}