@manohub/ui 0.10.5 → 1.0.0

package/dist/styles/components/pagination.css

@@ -1,303 +1,303 @@
-/**
- * Pagination —— 分页条（总数文案 + 每页条数 + 页码窗口 + 翻页箭头 + 空态 + 简单档）。
- *
- * 出处：设计稿《MH后台-0911》的分页器（`0:4047` 466×28：页码项 **28×28 / r6 / 白底 / 边 `#e6e6e6`**、
- * 选中页码底 `#eff5ff`、条数选择器 `0:4092` 28×28 r6）与 `@aihub/theme` 的 `src/components/pagination.css`
- * （圆角控件档 / 字号 13 / 组间 12 / 页码间 4 / 省略号 subtle）。
- * ⚠️ 设计给 **28**、规范给 **26**、改前本件取 32 —— 三者都不同；本轮按设计取 28（规范值登记为偏差）。
- *
- * **顺序是一维右对齐流**：`共 N 条，` → `每页 N 条 ▾` → `‹ 1 … 10 11 12 … 50 ›`。别把总数额外搬到左侧。
- *
- * **不做跳页输入框**：规范里没有「跳至第 N 页」的样张（重写者若需要须自行定位置），本仓按"不做规范没演示的"
- * 处理 —— 要保持族谱齐全的判据就该守在规范有标记示例的范围内，而不是替规范发明控件。
- *
- * **页码项三源等价**（本仓通例）：原生 `:has(> input:checked)` / 组件下发 `[data-state='selected']` /
- * 静态档 `.is-selected` 指向同一份声明 —— 原生态给零 JS 用法（原生 radio 互斥 + ← → 换页），组件态给 v-model。
- *
- * 翻页箭头用**两个字形**（上一页 `chevron-left` / 下一页 `chevron-right`），本层不转向：方位由字形自表达
- * （包内硬约束：不得靠 `transform: rotate()` 把别的图标转成方位，`back` 只作"返回"语义）。条数选择器的
- * 折叠指示走操作层 `.mh-popup-caret`（展开时翻向），与本层同样零自画折线。
- */
-
-/* 几何只挂在页码条上：令牌在同名 `.tokens.css`（锚 `[data-manohub-ui]`），几何若跟着挂会把空态也排成右对齐的行 */
-.mh-pagination {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--ui-pagination-gap);
-  font-size: var(--ui-pagination-font-size);
-  color: var(--ui-pagination-text);
-}
-/* 外框档：规范只给了「1px 描边 + 控件圆角」，内距本仓定为横 12、竖不额外加（项高即条高） */
-.mh-pagination--boxed {
-  padding: 0 var(--ui-space-4);
-  border: 1px solid var(--ui-base-300);
-  border-radius: var(--ui-pagination-item-radius);
-}
-
-/* ===== 总数文案 / 空态 / 简单档 ===== */
-.mh-pagination__total {
-  white-space: nowrap;
-}
-.mh-pagination__empty {
-  color: var(--ui-pagination-ellipsis);
-}
-.mh-pagination__plain {
-  white-space: nowrap;
-}
-
-/* ===== 每页条数选择器（触发器：文字 + 转向箭头） =====
-   面板是「操作层 + 本件皮肤」的组合写法：`class="mh-popup mh-pagination__panel"` ——
-   开合 / Esc / 点外部关闭 / 顶层渲染 / 定位档归 `styles/operations/popup.css`，面（底 / 圆角 / 内距 / 阴影）归本件。 */
-.mh-pagination__size {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-1);
-  padding: 0;
-  border: none;
-  background: transparent;
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-  cursor: pointer;
-}
-.mh-pagination__size:hover,
-.mh-pagination__size[data-state='hover'] {
-  color: var(--ui-pagination-border-hover);
-}
-.mh-pagination__size[data-state='active'] {
-  color: var(--ui-pagination-text-active);
-}
-.mh-pagination__size:disabled {
-  color: var(--ui-base-content-subtle);
-  cursor: not-allowed;
-}
-
-/* 面板皮肤：**组件自渲染的菜单必须自带面** —— 操作层把 popover 的 UA 装饰（含 `background`）归零成
-   `transparent`，只挂 `.mh-popup` 的面板会整个透出底下的表格（实测踩坑，就是这条缺失造成的）。
-   只给面，不碰开合与定位（那些归操作层）。 */
-.mh-pagination__panel {
-  padding: var(--ui-space-1) 0;
-  border-radius: var(--ui-radius-control); /* 控件圆角档（与选择器面板同档） */
-  background: var(--ui-base-100);
-  box-shadow: var(--ui-shadow-popover); /* 条数选择器是锚定浮层，不是居中浮层 */
-}
-
-/* 菜单里的单选项：本件是**单选组**（原生 radio，箭头键可选），与选择器的 listbox 面板不是一回事，故不复用其皮肤 */
-.mh-pagination__size-option {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  padding: var(--ui-space-1) var(--ui-space-3);
-  border-radius: var(--ui-radius-sm);
-  font-size: var(--ui-pagination-font-size);
-  color: var(--ui-pagination-text);
-  cursor: pointer;
-  white-space: nowrap;
-}
-.mh-pagination__size-option:hover {
-  background: var(--ui-pagination-bg-selected);
-}
-.mh-pagination__size-option input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  border: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  clip-path: inset(50%);
-  appearance: none;
-  pointer-events: none;
-}
-.mh-pagination__size-option:has(input:focus-visible) {
-  outline: 2px solid var(--ui-primary);
-  outline-offset: -2px;
-}
-
-/* ===== 页码行 ===== */
-.mh-pagination__pages {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-pagination-page-gap);
-}
-
-.mh-pagination__btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  min-width: var(--ui-pagination-item-size);
-  height: var(--ui-pagination-item-size);
-  padding: 0 var(--ui-space-1);
-  border: 1px solid transparent;
-  border-radius: var(--ui-pagination-item-radius);
-  background: transparent;
-  font-family: inherit;
-  font-size: var(--ui-pagination-font-size);
-  color: var(--ui-pagination-text);
-  cursor: pointer;
-  transition-property: background-color, border-color, color;
-  transition-duration: 0.15s;
-  transition-timing-function: ease;
-}
-/* 滑过 / 按下：只描边转色（底仍透明，规范如此） */
-.mh-pagination__btn:hover,
-.mh-pagination__btn.is-hover {
-  border-color: var(--ui-pagination-border-hover);
-}
-.mh-pagination__btn:active,
-.mh-pagination__btn.is-active {
-  border-color: var(--ui-pagination-border-active);
-}
-/* 选中：淡底 + 主色描边 + 主色字 + 中粗（三源等价） */
-.mh-pagination__btn.is-selected,
-.mh-pagination__btn[data-state='selected'],
-.mh-pagination__btn:has(> input:checked) {
-  border-color: var(--ui-pagination-border-active);
-  background: var(--ui-pagination-bg-selected);
-  color: var(--ui-pagination-text-active);
-  font-weight: var(--ui-weight-medium);
-}
-.mh-pagination__btn:disabled {
-  color: var(--ui-base-content-subtle);
-  cursor: not-allowed;
-}
-.mh-pagination__btn:disabled:hover {
-  border-color: transparent;
-}
-
-/* 省略号：不可点、字距拉开（规范 2px） */
-.mh-pagination__btn--ellipsis {
-  color: var(--ui-pagination-ellipsis);
-  letter-spacing: 2px;
-  cursor: default;
-}
-.mh-pagination__btn--ellipsis:hover {
-  border-color: transparent;
-}
-
-/* 翻页箭头：**朝向在字形里**（上一页 `chevron-left` / 下一页 `chevron-right`），本层只给颜色 ——
-   整段零 `transform`，不走"把别的图标转成方位"的老路（包内硬约束）。
-   `--prev` / `--next` 保留为**状态钩子**（消费方与测试按它们定位两端的箭头按钮），不再承载转向。 */
-.mh-pagination__btn--arrow {
-  color: var(--ui-pagination-arrow);
-}
-
-/* 槽位尺寸：**常规图标一律取全局图标档**（`--ui-font-icon`）—— 翻页箭头与条数选择器的折叠箭头
-   改前无声明、掉到 `<svg>` 的默认 16，本层不另定数值（字形由 `@manohub/icon` 给）。 */
-.mh-pagination__btn--arrow > svg,
-.mh-pagination__size > svg {
-  width: var(--ui-font-icon);
-  height: var(--ui-font-icon);
-}
-
-/* ===== 外框档内的三态：不描边、不落底，只靠**文字变色** =====
-   判据：boxed 档自己已经画了一圈外框，框内再来一圈描边（滑过/按下/选中）或一块淡底（选中）就是双重勾线，
-   故框内的态一律收敛成「文字色」这一种手段 —— 滑过转浅主色（复用描边档的滑过色 `#529dff`）、按下与选中
-   转主色。中粗**不在此重复声明**：基类选中规则已给 `--ui-weight-medium`，这里只覆盖 border/底/字色三件，
-   旧口径（主色字 + 中粗）完整保留。
-   两处排除都是必须的：`--ellipsis`（省略号与按钮共用基类，但它不可点、只该保持浅色）与 `:disabled`
-   （不可点的箭头不该被悬停染成主色）；排除项包在 `:where()` 里，使其**不抬特异性** —— 这样三条覆盖同为
-   0-3-0，靠源序让「选中」压住「悬停」（悬停已选中的项仍显示选中色，与非 boxed 档一致）。
-   三源等价（原生 `:has(> input:checked)` / 组件 `[data-state='selected']` / 静态 `.is-selected`）一并覆盖。 */
-.mh-pagination--boxed .mh-pagination__btn:not(:where(.mh-pagination__btn--ellipsis, :disabled)):hover,
-.mh-pagination--boxed .mh-pagination__btn:not(:where(.mh-pagination__btn--ellipsis, :disabled)).is-hover {
-  border-color: transparent;
-  color: var(--ui-pagination-border-hover);
-}
-.mh-pagination--boxed .mh-pagination__btn:not(:where(.mh-pagination__btn--ellipsis, :disabled)):active,
-.mh-pagination--boxed .mh-pagination__btn:not(:where(.mh-pagination__btn--ellipsis, :disabled)).is-active {
-  border-color: transparent;
-  color: var(--ui-pagination-border-active);
-}
-.mh-pagination--boxed .mh-pagination__btn.is-selected,
-.mh-pagination--boxed .mh-pagination__btn[data-state='selected'],
-.mh-pagination--boxed .mh-pagination__btn:has(> input:checked) {
-  border-color: transparent;
-  background: transparent;
-  color: var(--ui-pagination-text-active);
-}
-
-/* 原生态的开关（同名 radio）隐身但可聚焦：零 JS 用法下选中态由 `:has(> input:checked)` 驱动 */
-.mh-pagination__btn > input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  clip-path: inset(50%);
-  appearance: none;
-  pointer-events: none;
-}
-
-/* 键盘焦点环画在可见项上（原生态的开关是隐身的） */
-.mh-pagination__btn:focus-visible,
-.mh-pagination__btn:has(> input:focus-visible) {
-  outline: 2px solid var(--ui-primary);
-  outline-offset: -2px;
-}
-
-/* ===== 尺寸档（只覆盖令牌）=====
-   标准档 28 拿的是设计实测值，故两档以它为中心各让 4px（24 / 32），而不是继续引用控件三档
-   （24 / 32 / 40 —— 那样标准档就落不到 28 上）。 */
-.mh-pagination--sm {
-  --ui-pagination-item-size: 24px;
-  --ui-pagination-font-size: var(--ui-font-caption);
-}
-.mh-pagination--lg {
-  --ui-pagination-item-size: 32px;
-  --ui-pagination-font-size: var(--ui-font-body);
-}
-
-/* ===== 跳页（showQuickJumper） =====
- *
- * 跳页框是**输入框**，画线取 `--ui-base-300` —— 与 `Input` 同一条口径（`base-300` 是全库唯一的
- * 「线 / 框」色，出处 `@manohub/theme` 的 `default/colors.css` 头「三条口径」第 2 条；
- * `base-400` 只服务勾选类小控件框体）。**改前取的是 `base-400`**：同一个「输入框」在库里因此
- * 有过两种线色，属跨件口径漏改（2026-09-30 收敛）。
- * 禁用档与 `Input` 同构：底转 `base-200`、线仍 `base-300` —— 即**靠底色区分禁用**，不再靠线深。 */
-.mh-pagination__jump {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  font-size: var(--ui-pagination-font-size);
-  color: var(--ui-pagination-text);
-}
-.mh-pagination__jump-input {
-  width: 56px;
-  height: var(--ui-pagination-item-size);
-  padding: 0 var(--ui-space-2);
-  border: 1px solid var(--ui-base-300);
-  border-radius: var(--ui-pagination-item-radius);
-  background: var(--ui-base-100);
-  font-family: inherit;
-  font-size: var(--ui-pagination-font-size);
-  color: var(--ui-base-content);
-  text-align: center;
-  outline: none;
-  /* 数字输入的上下箭头在 56px 宽里会挤掉数字，直接收掉 */
-  appearance: textfield;
-  -moz-appearance: textfield;
-}
-.mh-pagination__jump-input::-webkit-outer-spin-button,
-.mh-pagination__jump-input::-webkit-inner-spin-button {
-  appearance: none;
-  margin: 0;
-}
-.mh-pagination__jump-input:hover {
-  border-color: var(--ui-pagination-border-hover);
-}
-.mh-pagination__jump-input:focus {
-  border-color: var(--ui-pagination-border-active);
-  box-shadow: 0 0 0 2px var(--ui-primary-weak);
-}
-.mh-pagination__jump-input:disabled {
-  background: var(--ui-base-200);
-  border-color: var(--ui-base-300);
-  color: var(--ui-base-content-subtle);
-  cursor: not-allowed;
-}
+/**
+ * Pagination —— 分页条（总数文案 + 每页条数 + 页码窗口 + 翻页箭头 + 空态 + 简单档）。
+ *
+ * 出处：设计稿《MH后台-0911》的分页器（`0:4047` 466×28：页码项 **28×28 / r6 / 白底 / 边 `#e6e6e6`**、
+ * 选中页码底 `#eff5ff`、条数选择器 `0:4092` 28×28 r6）与 `@aihub/theme` 的 `src/components/pagination.css`
+ * （圆角控件档 / 字号 13 / 组间 12 / 页码间 4 / 省略号 subtle）。
+ * ⚠️ 设计给 **28**、规范给 **26**、改前本件取 32 —— 三者都不同；本轮按设计取 28（规范值登记为偏差）。
+ *
+ * **顺序是一维右对齐流**：`共 N 条，` → `每页 N 条 ▾` → `‹ 1 … 10 11 12 … 50 ›`。别把总数额外搬到左侧。
+ *
+ * **不做跳页输入框**：规范里没有「跳至第 N 页」的样张（重写者若需要须自行定位置），本仓按"不做规范没演示的"
+ * 处理 —— 要保持族谱齐全的判据就该守在规范有标记示例的范围内，而不是替规范发明控件。
+ *
+ * **页码项三源等价**（本仓通例）：原生 `:has(> input:checked)` / 组件下发 `[data-state='selected']` /
+ * 静态档 `.is-selected` 指向同一份声明 —— 原生态给零 JS 用法（原生 radio 互斥 + ← → 换页），组件态给 v-model。
+ *
+ * 翻页箭头用**两个字形**（上一页 `chevron-left` / 下一页 `chevron-right`），本层不转向：方位由字形自表达
+ * （包内硬约束：不得靠 `transform: rotate()` 把别的图标转成方位，`back` 只作"返回"语义）。条数选择器的
+ * 折叠指示走操作层 `.mh-popup-caret`（展开时翻向），与本层同样零自画折线。
+ */
+
+/* 几何只挂在页码条上：令牌在同名 `.tokens.css`（锚 `[data-manohub-ui]`），几何若跟着挂会把空态也排成右对齐的行 */
+.mh-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--ui-pagination-gap);
+  font-size: var(--ui-pagination-font-size);
+  color: var(--ui-pagination-text);
+}
+/* 外框档：规范只给了「1px 描边 + 控件圆角」，内距本仓定为横 12、竖不额外加（项高即条高） */
+.mh-pagination--boxed {
+  padding: 0 var(--ui-space-4);
+  border: 1px solid var(--ui-base-300);
+  border-radius: var(--ui-pagination-item-radius);
+}
+
+/* ===== 总数文案 / 空态 / 简单档 ===== */
+.mh-pagination__total {
+  white-space: nowrap;
+}
+.mh-pagination__empty {
+  color: var(--ui-pagination-ellipsis);
+}
+.mh-pagination__plain {
+  white-space: nowrap;
+}
+
+/* ===== 每页条数选择器（触发器：文字 + 转向箭头） =====
+   面板是「操作层 + 本件皮肤」的组合写法：`class="mh-popup mh-pagination__panel"` ——
+   开合 / Esc / 点外部关闭 / 顶层渲染 / 定位档归 `styles/operations/popup.css`，面（底 / 圆角 / 内距 / 阴影）归本件。 */
+.mh-pagination__size {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+.mh-pagination__size:hover,
+.mh-pagination__size[data-state='hover'] {
+  color: var(--ui-pagination-border-hover);
+}
+.mh-pagination__size[data-state='active'] {
+  color: var(--ui-pagination-text-active);
+}
+.mh-pagination__size:disabled {
+  color: var(--ui-base-content-subtle);
+  cursor: not-allowed;
+}
+
+/* 面板皮肤：**组件自渲染的菜单必须自带面** —— 操作层把 popover 的 UA 装饰（含 `background`）归零成
+   `transparent`，只挂 `.mh-popup` 的面板会整个透出底下的表格（实测踩坑，就是这条缺失造成的）。
+   只给面，不碰开合与定位（那些归操作层）。 */
+.mh-pagination__panel {
+  padding: var(--ui-space-1) 0;
+  border-radius: var(--ui-radius-control); /* 控件圆角档（与选择器面板同档） */
+  background: var(--ui-base-100);
+  box-shadow: var(--ui-shadow-popover); /* 条数选择器是锚定浮层，不是居中浮层 */
+}
+
+/* 菜单里的单选项：本件是**单选组**（原生 radio，箭头键可选），与选择器的 listbox 面板不是一回事，故不复用其皮肤 */
+.mh-pagination__size-option {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  padding: var(--ui-space-1) var(--ui-space-3);
+  border-radius: var(--ui-radius-sm);
+  font-size: var(--ui-pagination-font-size);
+  color: var(--ui-pagination-text);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.mh-pagination__size-option:hover {
+  background: var(--ui-pagination-bg-selected);
+}
+.mh-pagination__size-option input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+  appearance: none;
+  pointer-events: none;
+}
+.mh-pagination__size-option:has(input:focus-visible) {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+
+/* ===== 页码行 ===== */
+.mh-pagination__pages {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-pagination-page-gap);
+}
+
+.mh-pagination__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--ui-pagination-item-size);
+  height: var(--ui-pagination-item-size);
+  padding: 0 var(--ui-space-1);
+  border: 1px solid transparent;
+  border-radius: var(--ui-pagination-item-radius);
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--ui-pagination-font-size);
+  color: var(--ui-pagination-text);
+  cursor: pointer;
+  transition-property: background-color, border-color, color;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
+}
+/* 滑过 / 按下：只描边转色（底仍透明，规范如此） */
+.mh-pagination__btn:hover,
+.mh-pagination__btn.is-hover {
+  border-color: var(--ui-pagination-border-hover);
+}
+.mh-pagination__btn:active,
+.mh-pagination__btn.is-active {
+  border-color: var(--ui-pagination-border-active);
+}
+/* 选中：淡底 + 主色描边 + 主色字 + 中粗（三源等价） */
+.mh-pagination__btn.is-selected,
+.mh-pagination__btn[data-state='selected'],
+.mh-pagination__btn:has(> input:checked) {
+  border-color: var(--ui-pagination-border-active);
+  background: var(--ui-pagination-bg-selected);
+  color: var(--ui-pagination-text-active);
+  font-weight: var(--ui-weight-medium);
+}
+.mh-pagination__btn:disabled {
+  color: var(--ui-base-content-subtle);
+  cursor: not-allowed;
+}
+.mh-pagination__btn:disabled:hover {
+  border-color: transparent;
+}
+
+/* 省略号：不可点、字距拉开（规范 2px） */
+.mh-pagination__btn--ellipsis {
+  color: var(--ui-pagination-ellipsis);
+  letter-spacing: 2px;
+  cursor: default;
+}
+.mh-pagination__btn--ellipsis:hover {
+  border-color: transparent;
+}
+
+/* 翻页箭头：**朝向在字形里**（上一页 `chevron-left` / 下一页 `chevron-right`），本层只给颜色 ——
+   整段零 `transform`，不走"把别的图标转成方位"的老路（包内硬约束）。
+   `--prev` / `--next` 保留为**状态钩子**（消费方与测试按它们定位两端的箭头按钮），不再承载转向。 */
+.mh-pagination__btn--arrow {
+  color: var(--ui-pagination-arrow);
+}
+
+/* 槽位尺寸：**常规图标一律取全局图标档**（`--ui-font-icon`）—— 翻页箭头与条数选择器的折叠箭头
+   改前无声明、掉到 `<svg>` 的默认 16，本层不另定数值（字形由 `@manohub/icon` 给）。 */
+.mh-pagination__btn--arrow > svg,
+.mh-pagination__size > svg {
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+}
+
+/* ===== 外框档内的三态：不描边、不落底，只靠**文字变色** =====
+   判据：boxed 档自己已经画了一圈外框，框内再来一圈描边（滑过/按下/选中）或一块淡底（选中）就是双重勾线，
+   故框内的态一律收敛成「文字色」这一种手段 —— 滑过转浅主色（复用描边档的滑过色 `#529dff`）、按下与选中
+   转主色。中粗**不在此重复声明**：基类选中规则已给 `--ui-weight-medium`，这里只覆盖 border/底/字色三件，
+   旧口径（主色字 + 中粗）完整保留。
+   两处排除都是必须的：`--ellipsis`（省略号与按钮共用基类，但它不可点、只该保持浅色）与 `:disabled`
+   （不可点的箭头不该被悬停染成主色）；排除项包在 `:where()` 里，使其**不抬特异性** —— 这样三条覆盖同为
+   0-3-0，靠源序让「选中」压住「悬停」（悬停已选中的项仍显示选中色，与非 boxed 档一致）。
+   三源等价（原生 `:has(> input:checked)` / 组件 `[data-state='selected']` / 静态 `.is-selected`）一并覆盖。 */
+.mh-pagination--boxed .mh-pagination__btn:not(:where(.mh-pagination__btn--ellipsis, :disabled)):hover,
+.mh-pagination--boxed .mh-pagination__btn:not(:where(.mh-pagination__btn--ellipsis, :disabled)).is-hover {
+  border-color: transparent;
+  color: var(--ui-pagination-border-hover);
+}
+.mh-pagination--boxed .mh-pagination__btn:not(:where(.mh-pagination__btn--ellipsis, :disabled)):active,
+.mh-pagination--boxed .mh-pagination__btn:not(:where(.mh-pagination__btn--ellipsis, :disabled)).is-active {
+  border-color: transparent;
+  color: var(--ui-pagination-border-active);
+}
+.mh-pagination--boxed .mh-pagination__btn.is-selected,
+.mh-pagination--boxed .mh-pagination__btn[data-state='selected'],
+.mh-pagination--boxed .mh-pagination__btn:has(> input:checked) {
+  border-color: transparent;
+  background: transparent;
+  color: var(--ui-pagination-text-active);
+}
+
+/* 原生态的开关（同名 radio）隐身但可聚焦：零 JS 用法下选中态由 `:has(> input:checked)` 驱动 */
+.mh-pagination__btn > input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+  appearance: none;
+  pointer-events: none;
+}
+
+/* 键盘焦点环画在可见项上（原生态的开关是隐身的） */
+.mh-pagination__btn:focus-visible,
+.mh-pagination__btn:has(> input:focus-visible) {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+
+/* ===== 尺寸档（只覆盖令牌）=====
+   标准档 28 拿的是设计实测值，故两档以它为中心各让 4px（24 / 32），而不是继续引用控件三档
+   （24 / 32 / 40 —— 那样标准档就落不到 28 上）。 */
+.mh-pagination--sm {
+  --ui-pagination-item-size: 24px;
+  --ui-pagination-font-size: var(--ui-font-caption);
+}
+.mh-pagination--lg {
+  --ui-pagination-item-size: 32px;
+  --ui-pagination-font-size: var(--ui-font-body);
+}
+
+/* ===== 跳页（showQuickJumper） =====
+ *
+ * 跳页框是**输入框**，画线取 `--ui-base-300` —— 与 `Input` 同一条口径（`base-300` 是全库唯一的
+ * 「线 / 框」色，出处 `@manohub/theme` 的 `default/colors.css` 头「三条口径」第 2 条；
+ * `base-400` 只服务勾选类小控件框体）。**改前取的是 `base-400`**：同一个「输入框」在库里因此
+ * 有过两种线色，属跨件口径漏改（2026-09-30 收敛）。
+ * 禁用档与 `Input` 同构：底转 `base-200`、线仍 `base-300` —— 即**靠底色区分禁用**，不再靠线深。 */
+.mh-pagination__jump {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  font-size: var(--ui-pagination-font-size);
+  color: var(--ui-pagination-text);
+}
+.mh-pagination__jump-input {
+  width: 56px;
+  height: var(--ui-pagination-item-size);
+  padding: 0 var(--ui-space-2);
+  border: 1px solid var(--ui-base-300);
+  border-radius: var(--ui-pagination-item-radius);
+  background: var(--ui-base-100);
+  font-family: inherit;
+  font-size: var(--ui-pagination-font-size);
+  color: var(--ui-base-content);
+  text-align: center;
+  outline: none;
+  /* 数字输入的上下箭头在 56px 宽里会挤掉数字，直接收掉 */
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+.mh-pagination__jump-input::-webkit-outer-spin-button,
+.mh-pagination__jump-input::-webkit-inner-spin-button {
+  appearance: none;
+  margin: 0;
+}
+.mh-pagination__jump-input:hover {
+  border-color: var(--ui-pagination-border-hover);
+}
+.mh-pagination__jump-input:focus {
+  border-color: var(--ui-pagination-border-active);
+  box-shadow: 0 0 0 2px var(--ui-primary-weak);
+}
+.mh-pagination__jump-input:disabled {
+  background: var(--ui-base-200);
+  border-color: var(--ui-base-300);
+  color: var(--ui-base-content-subtle);
+  cursor: not-allowed;
+}