@xihan-ui/styles 1.0.0-alpha.2 → 1.0.0

package/css/number-field.css

@@ -5,15 +5,24 @@
   }
 
   /* 与文本框同一套堆叠：标签一行、输入行一行。
-     加减钮与输入框中间那层包裹归作者，这里不碰，三者各自把高度对齐即可成一体 */
+     输入框与加减钮放进 control 部件即得一体式：视觉盒画在 control 上，
+     减在左、加在右、输入框居中，前后缀图标/文字可直接流式插在框内。
+     不写 control 时退回旧式三件并排的观感（下方 input / 按钮的基础规则原样生效） */
   [data-scope='number-field'][data-part='root'] {
+    /* 作者塞进来的图标跟着控件的尺寸档走；它自己写了 size 时仍以作者的为准 */
+    --xh-icon-size: var(--xh-number-field-icon-size, var(--xh-glyph-size-md));
+
     /* 尺寸档只换这几个私有槽，标题、输入框与加减钮都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */
     --xh-_number-field-h: var(--xh-control-h-md);
     --xh-_number-field-px: var(--xh-control-px-md);
-    --xh-_number-field-font-size: var(--xh-text-body-size);
-    --xh-_number-field-label-font-size: var(--xh-text-label-size);
-    --xh-_number-field-trigger-font-size: var(--xh-text-body-size);
+    --xh-_number-field-gap: var(--xh-control-gap-md);
+    --xh-_number-field-font-size: var(--xh-control-font-md);
+    --xh-_number-field-label-font-size: var(--xh-control-font-md);
+    --xh-_number-field-trigger-font-size: var(--xh-control-font-md);
+
+    /* 盒子的圆角 */
+    --xh-_number-field-radius: var(--xh-number-field-input-radius, var(--xh-shape-control));
 
     /* 形态档只换这几个私有槽：输入框的底与描边，加减钮的底与描边 */
     --xh-_number-field-bg: var(--xh-bg-canvas);
@@ -28,7 +37,7 @@
     /* 语气只落在聚焦这一处：环与聚焦态描边。框里的数字不归它管。
        没写 data-tone 时 --xh-_tone 没被声明，退回原来的聚焦环色与常态描边 */
     --xh-_number-field-ring: var(--xh-ring-focus);
-    --xh-_number-field-border-focus: var(--xh-number-field-input-border, var(--xh-_tone, var(--xh-border-control)));
+    --xh-_number-field-border-focus: var(--xh-number-field-input-border, var(--xh-_tone, var(--xh-border-control-focus)));
 
     display: inline-flex;
     flex-direction: column;
@@ -43,19 +52,23 @@
   /* —— 尺寸 —— */
   /* 缺省档写在上面的基础规则里 */
   [data-scope='number-field'][data-part='root'][data-size='sm'] {
+    --xh-icon-size: var(--xh-number-field-icon-size, var(--xh-glyph-size-sm));
     --xh-_number-field-h: var(--xh-control-h-sm);
     --xh-_number-field-px: var(--xh-control-px-sm);
-    --xh-_number-field-font-size: var(--xh-font-size-sm);
-    --xh-_number-field-label-font-size: var(--xh-font-size-sm);
-    --xh-_number-field-trigger-font-size: var(--xh-font-size-sm);
+    --xh-_number-field-gap: var(--xh-control-gap-sm);
+    --xh-_number-field-font-size: var(--xh-control-font-sm);
+    --xh-_number-field-label-font-size: var(--xh-control-font-sm);
+    --xh-_number-field-trigger-font-size: var(--xh-control-font-sm);
   }
 
   [data-scope='number-field'][data-part='root'][data-size='lg'] {
+    --xh-icon-size: var(--xh-number-field-icon-size, var(--xh-glyph-size-lg));
     --xh-_number-field-h: var(--xh-control-h-lg);
     --xh-_number-field-px: var(--xh-control-px-lg);
-    --xh-_number-field-font-size: var(--xh-font-size-lg);
-    --xh-_number-field-label-font-size: var(--xh-font-size-lg);
-    --xh-_number-field-trigger-font-size: var(--xh-font-size-lg);
+    --xh-_number-field-gap: var(--xh-control-gap-lg);
+    --xh-_number-field-font-size: var(--xh-control-font-lg);
+    --xh-_number-field-label-font-size: var(--xh-control-font-lg);
+    --xh-_number-field-trigger-font-size: var(--xh-control-font-lg);
   }
 
   /* —— 形态 —— */
@@ -70,7 +83,7 @@
     --xh-_number-field-trigger-bg-active: var(--xh-bg-subtle-active);
     --xh-_number-field-trigger-border: var(--xh-border-control);
     --xh-_number-field-trigger-border-hover: var(--xh-border-control-hover);
-    --xh-_number-field-border-focus: var(--xh-number-field-input-border, var(--xh-_tone, var(--xh-border-control)));
+    --xh-_number-field-border-focus: var(--xh-number-field-input-border, var(--xh-_tone, var(--xh-border-control-focus)));
   }
 
   /* 填充式：底色顶替描边表达边界。描边只退成透明而不去掉，1px 的位置留着，
@@ -84,10 +97,10 @@
     --xh-_number-field-trigger-bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
     --xh-_number-field-trigger-border: transparent;
     --xh-_number-field-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
-    --xh-_number-field-border-focus: var(--xh-_tone, var(--xh-border-control));
+    --xh-_number-field-border-focus: var(--xh-_tone, var(--xh-border-control-focus));
   }
 
-  /* 无框：底与描边都透明，平时只看得见数字，悬停与聚焦才浮出边界 */
+  /* 无框：底与常态描边透明，悬停与聚焦浮出描边 */
   [data-scope='number-field'][data-part='root'][data-variant='ghost'] {
     --xh-_number-field-bg: transparent;
     --xh-_number-field-border: transparent;
@@ -97,7 +110,7 @@
     --xh-_number-field-trigger-bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
     --xh-_number-field-trigger-border: transparent;
     --xh-_number-field-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
-    --xh-_number-field-border-focus: var(--xh-_tone, var(--xh-border-control));
+    --xh-_number-field-border-focus: var(--xh-_tone, var(--xh-border-control-focus));
   }
 
   [data-scope='number-field'][data-part='label'] {
@@ -111,12 +124,130 @@
     color: var(--xh-number-field-label-fg-disabled, var(--xh-fg-subtle));
   }
 
+  /* —— 一体式 control：输入框与加减钮同框 —— */
+  /* control 是唯一的视觉盒：描边、底色、圆角、聚焦环全画在它身上，盒内三件都退成透明分段，
+     整枚控件从头到尾只有这一道描边。减钮在前、input 居中、加钮在后（作者在模板里的顺序决定），
+     前后缀内容直接流式插在框里。
+     focus-within 而不是 :focus 上的聚焦态：按钮也能触发聚焦环 */
+  [data-scope='number-field'][data-part='control'] {
+    position: relative;
+    display: inline-flex;
+    /* 居中而不是拉伸：作者插在框里的前后缀是一行文字，被拉满整框高度后字会贴着框顶 */
+    align-items: center;
+    gap: var(--xh-number-field-control-gap, var(--xh-_number-field-gap));
+    min-inline-size: var(--xh-number-field-control-min-w, var(--xh-control-min-w));
+    block-size: var(--xh-number-field-control-h, var(--xh-_number-field-h));
+    padding-inline: var(--xh-number-field-control-px, var(--xh-_number-field-px));
+    border: var(--xh-stroke-thin) solid var(--xh-number-field-input-border, var(--xh-_number-field-border));
+    border-radius: var(--xh-_number-field-radius);
+    background: var(--xh-number-field-input-bg, var(--xh-_number-field-bg));
+    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='number-field'][data-part='control']:hover:not([data-disabled], [data-invalid]) {
+    border-color: var(--xh-number-field-input-border-hover, var(--xh-_number-field-border-hover));
+  }
+
+  [data-scope='number-field'][data-part='control']:focus-within:not([data-disabled]) {
+    border-color: var(--xh-number-field-input-border-focus, var(--xh-_number-field-border-focus));
+    outline: var(--xh-ring-width) solid var(--xh-_number-field-ring);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='number-field'][data-part='control'][data-invalid] {
+    border-color: var(--xh-number-field-input-border-invalid, var(--xh-border-invalid));
+
+    /* 校验失败时环也跟着变红：两圈等宽相邻却一红一蓝，读的人不知道哪个才是当前状态 */
+    --xh-_number-field-ring: var(--xh-ring-invalid);
+  }
+
+  [data-scope='number-field'][data-part='control'][data-readonly] {
+    background: var(--xh-number-field-input-bg-readonly, var(--xh-bg-subtle));
+  }
+
+  [data-scope='number-field'][data-part='control'][data-disabled] {
+    background: var(--xh-number-field-input-bg-disabled, var(--xh-bg-subtle));
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 盒内 input：无边框无底无圆角，观感全归 control；行内内衬也归 control，
+     这里再留一份就是框内套了一圈空白。数字居中排在两个按钮之间；
+     前后缀图标/文字直接流式排在 input 两侧，不用再绝对定位 */
+  [data-scope='number-field'][data-part='control'] [data-part='input'] {
+    flex: 1 1 auto;
+    inline-size: var(--xh-number-field-input-w, 5em);
+    min-inline-size: 0;
+    block-size: 100%;
+    padding-inline: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    text-align: var(--xh-number-field-input-align, center);
+  }
+
+  /* 盒内 input 不再自己画各态，全部交还 control。hover 这条带上与基础规则同样的
+     :not 条件：基础 hover 的特异度里有它们，不带就打不过 */
+  [data-scope='number-field'][data-part='control'] [data-part='input']:hover:not(:disabled, [data-invalid]) {
+    border-color: transparent;
+  }
+
+  [data-scope='number-field'][data-part='control'] [data-part='input']:focus-visible {
+    border-color: transparent;
+    outline: none;
+  }
+
+  [data-scope='number-field'][data-part='control'] [data-part='input'][data-invalid] {
+    border-color: transparent;
+  }
+
+  [data-scope='number-field'][data-part='control'] [data-part='input']:disabled,
+  [data-scope='number-field'][data-part='control'] [data-part='input'][readonly] {
+    background: transparent;
+  }
+
+  /* 盒内按钮：尺寸与圆角走基础规则那枚行内动作方钮，这里只把底与描边交还 control——
+     按钮自带一块底色就会把一个盒子读成三块拼起来的；
+     常态只剩符号，符号取次级前景，悬停与按下才浮出底色 */
+  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger'],
+  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger'] {
+    margin: 0;
+    border: 0;
+    background: transparent;
+    color: var(--xh-number-field-trigger-fg, var(--xh-fg-muted));
+  }
+
+  /* 悬停只在分段自己身上浮出一块底色与更实的符号，盒子的描边纹丝不动 */
+  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:hover:not(:disabled),
+  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:hover:not(:disabled) {
+    background: var(--xh-number-field-trigger-bg-hover, var(--xh-_number-field-trigger-bg-hover));
+    color: var(--xh-number-field-trigger-fg-hover, var(--xh-fg-default));
+  }
+
+  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:active:not(:disabled),
+  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:active:not(:disabled) {
+    background: var(--xh-number-field-trigger-bg-active, var(--xh-_number-field-trigger-bg-active));
+  }
+
+  /* 焦点落到盒内按钮时 control 已经 focus-within 起了环，按钮自己再画一圈就是框里套框 */
+  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:focus-visible,
+  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:focus-visible {
+    outline: none;
+  }
+
+  /* 贴住 min / max 的那一侧只把符号压灰，不铺一块灰底：铺了底就又成了框上贴着的一个方块 */
+  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:disabled,
+  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:disabled {
+    background: transparent;
+    color: var(--xh-fg-disabled);
+  }
+
   [data-scope='number-field'][data-part='input'] {
     block-size: var(--xh-number-field-input-h, var(--xh-_number-field-h));
     padding-inline: var(--xh-number-field-input-px, var(--xh-_number-field-px));
     padding-block: 0;
     border: var(--xh-stroke-thin) solid var(--xh-number-field-input-border, var(--xh-_number-field-border));
-    border-radius: var(--xh-number-field-input-radius, var(--xh-shape-control));
+    border-radius: var(--xh-_number-field-radius);
     background: var(--xh-number-field-input-bg, var(--xh-_number-field-bg));
     color: var(--xh-number-field-input-fg, var(--xh-fg-default));
     /* 表单控件不继承页面字体，只给字号会让输入框用 UA 默认字族 */
@@ -146,7 +277,10 @@
   }
 
   [data-scope='number-field'][data-part='input'][data-invalid] {
-    border-color: var(--xh-number-field-input-border-invalid, var(--xh-color-danger-500));
+    border-color: var(--xh-number-field-input-border-invalid, var(--xh-border-invalid));
+
+    /* 校验失败时环也跟着变红：两圈等宽相邻却一红一蓝，读的人不知道哪个才是当前状态 */
+    --xh-_number-field-ring: var(--xh-ring-invalid);
   }
 
   /* 只读仍可聚焦、可复制，不置灰，只把底色压下去表示"改不动" */
@@ -169,8 +303,8 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--xh-number-field-trigger-size, var(--xh-_number-field-h));
-    block-size: var(--xh-number-field-trigger-size, var(--xh-_number-field-h));
+    inline-size: var(--xh-number-field-trigger-size, var(--xh-control-action-size));
+    block-size: var(--xh-number-field-trigger-size, var(--xh-control-action-size));
     padding: 0;
     border: var(--xh-stroke-thin) solid var(--xh-number-field-trigger-border, var(--xh-_number-field-trigger-border));
     border-radius: var(--xh-number-field-trigger-radius, var(--xh-shape-control));
@@ -221,4 +355,33 @@
     color: var(--xh-fg-disabled);
     cursor: not-allowed;
   }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  [data-scope='number-field'][data-part='increment-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-plus) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-plus) center / contain no-repeat;
+  }
+
+  [data-scope='number-field'][data-part='decrement-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-minus) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='number-field'][data-part='control'][hidden] {
+    display: none;
+  }
 }

package/css/overlay-arrow.css

@@ -0,0 +1,51 @@
+/*
+ * 浮层箭头的几何，六份浮层皮肤共用一份，按 [data-part='arrow'] 匹配。
+ *
+ * 箭头是正方形转 45°，构成尖角的是哪两条物理边，所以贴边与摘边框都写物理属性。
+ * 行内轴上的中心点仍写逻辑属性：定位引擎在 RTL 下已把 arrow-x 镜像成逻辑量。
+ *
+ * 底色与描边色留在各组件皮肤，它们同时把自己的内联落点槽接到这里的统一名字上。
+ * 引入顺序排在六份浮层皮肤之后：摘边框那几条要压过各皮肤的 border 简写。
+ */
+@layer xihan.components {
+  [data-part='arrow'] {
+    position: absolute;
+    inline-size: var(--xh-_overlay-arrow-size);
+    block-size: var(--xh-_overlay-arrow-size);
+    rotate: 45deg;
+  }
+
+  /* 浮层落在锚点下方：箭头贴 content 上缘，摘掉埋进 content 的下、右两条边 */
+  [data-part='arrow'][data-placement^='bottom'] {
+    top: calc(var(--xh-_overlay-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_overlay-arrow-x) - var(--xh-_overlay-arrow-size) / 2);
+    border-right: 0;
+    border-bottom: 0;
+  }
+
+  /* 浮层落在锚点上方：箭头贴 content 下缘，摘掉上、左两条边 */
+  [data-part='arrow'][data-placement^='top'] {
+    bottom: calc(var(--xh-_overlay-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_overlay-arrow-x) - var(--xh-_overlay-arrow-size) / 2);
+    border-top: 0;
+    border-left: 0;
+  }
+
+  /* 浮层落在锚点右侧：箭头贴 content 左缘，摘掉上、右两条边 */
+  [data-part='arrow'][data-placement^='right'] {
+    top: calc(var(--xh-_overlay-arrow-y) - var(--xh-_overlay-arrow-size) / 2);
+    /* stylelint-disable-next-line property-disallowed-list -- 旋转是物理的，贴边跟着物理走 */
+    left: calc(var(--xh-_overlay-arrow-size) / -2);
+    border-top: 0;
+    border-right: 0;
+  }
+
+  /* 浮层落在锚点左侧：箭头贴 content 右缘，摘掉下、左两条边 */
+  [data-part='arrow'][data-placement^='left'] {
+    top: calc(var(--xh-_overlay-arrow-y) - var(--xh-_overlay-arrow-size) / 2);
+    /* stylelint-disable-next-line property-disallowed-list -- 旋转是物理的，贴边跟着物理走 */
+    right: calc(var(--xh-_overlay-arrow-size) / -2);
+    border-bottom: 0;
+    border-left: 0;
+  }
+}

package/css/page-header.css

@@ -8,7 +8,7 @@
     /* 尺寸档只换这三个私有槽，各段从根上继承它们，换档不必给每个部件各写一条选择器 */
     --xh-_page-header-py: var(--xh-space-4);
     --xh-_page-header-row-gap: var(--xh-space-2);
-    --xh-_page-header-title-size: var(--xh-font-size-xl);
+    --xh-_page-header-title-size: var(--xh-text-heading-3-size);
 
     /* 一行排不下就折行；返回位、标题、副标题排在同一行，操作贴到行尾，页脚整行另起 */
     display: flex;
@@ -29,13 +29,13 @@
   [data-scope='page-header'][data-part='root'][data-size='sm'] {
     --xh-_page-header-py: var(--xh-space-3);
     --xh-_page-header-row-gap: var(--xh-space-1);
-    --xh-_page-header-title-size: var(--xh-font-size-lg);
+    --xh-_page-header-title-size: var(--xh-control-font-lg);
   }
 
   [data-scope='page-header'][data-part='root'][data-size='lg'] {
     --xh-_page-header-py: var(--xh-space-6);
     --xh-_page-header-row-gap: var(--xh-space-3);
-    --xh-_page-header-title-size: var(--xh-font-size-2xl);
+    --xh-_page-header-title-size: var(--xh-text-heading-2-size);
   }
 
   /* —— 分隔线 —— */
@@ -67,7 +67,7 @@
     flex: 1 1 auto;
     min-inline-size: 0;
     color: var(--xh-page-header-subtitle-fg, var(--xh-fg-muted));
-    font-size: var(--xh-page-header-subtitle-font-size, var(--xh-font-size-sm));
+    font-size: var(--xh-page-header-subtitle-font-size, var(--xh-text-secondary-size));
     line-height: var(--xh-leading-normal);
   }
 
@@ -84,7 +84,14 @@
   [data-scope='page-header'][data-part='footer'] {
     flex: 1 0 100%;
     color: var(--xh-page-header-footer-fg, var(--xh-fg-muted));
-    font-size: var(--xh-page-header-footer-font-size, var(--xh-font-size-sm));
+    font-size: var(--xh-page-header-footer-font-size, var(--xh-text-secondary-size));
     line-height: var(--xh-leading-normal);
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='page-header'][data-part='back-trigger'][hidden],
+  [data-scope='page-header'][data-part='extra'][hidden] {
+    display: none;
+  }
 }

package/css/pagination.css

@@ -1,3 +1,30 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-pop-in {
+    from {
+      opacity: 0;
+      scale: var(--xh-motion-scale-enter);
+    }
+
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+  @keyframes xh-pop-out {
+    from {
+      opacity: 1;
+      scale: 1;
+    }
+
+    to {
+      opacity: 0;
+      scale: var(--xh-motion-scale-enter);
+    }
+  }
+}
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='pagination'] {
@@ -8,11 +35,14 @@
      页数为 0 时连接层会打 data-empty，这里不拿它做隐藏：作者常把「第 x-y 条」这类
      区间回显也写在 nav 里，整块藏掉会连那行字一起吞了，是否隐藏交给作者决定 */
   [data-scope='pagination'][data-part='root'] {
+    /* 作者塞进上一页/下一页的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-pagination-icon-size, var(--xh-glyph-size-text));
+
     /* 尺寸档只换这三个私有槽，上一页/下一页、页码与省略号都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */
     --xh-_pagination-item-size: var(--xh-control-h-md);
-    --xh-_pagination-item-px: var(--xh-space-2);
-    --xh-_pagination-font-size: var(--xh-text-label-size);
+    --xh-_pagination-item-px: var(--xh-control-px-md);
+    --xh-_pagination-font-size: var(--xh-control-font-md);
 
     /* 当前页的选中态随语气走。没写 data-tone 时这几个 --xh-_tone-* 都没被声明，
        退回原来的品牌底与其配色。聚焦环不在其列，它恒是 --xh-ring-focus */
@@ -29,18 +59,18 @@
   }
 
   /* —— 尺寸 —— */
-  /* 缺省档写在上面的基础规则里。格子高度走控件高度尺；内边距不在控件内边距那把尺上
-     （页码格子靠最小宽度撑等宽，内边距比同高的控件窄一档），三档一律取空间尺 */
+  /* 缺省档写在上面的基础规则里。格子高度、内边距、字号三者各走控件尺的同一档；
+     页码格子靠最小宽度撑等宽，内边距只在页码超出最小宽度时才起作用 */
   [data-scope='pagination'][data-part='root'][data-size='sm'] {
     --xh-_pagination-item-size: var(--xh-control-h-sm);
-    --xh-_pagination-item-px: var(--xh-space-1_5);
-    --xh-_pagination-font-size: var(--xh-font-size-sm);
+    --xh-_pagination-item-px: var(--xh-control-px-sm);
+    --xh-_pagination-font-size: var(--xh-control-font-sm);
   }
 
   [data-scope='pagination'][data-part='root'][data-size='lg'] {
     --xh-_pagination-item-size: var(--xh-control-h-lg);
-    --xh-_pagination-item-px: var(--xh-space-3);
-    --xh-_pagination-font-size: var(--xh-font-size-lg);
+    --xh-_pagination-item-px: var(--xh-control-px-lg);
+    --xh-_pagination-font-size: var(--xh-control-font-lg);
   }
 
   [data-scope='pagination'][data-part='root'][hidden] {
@@ -98,13 +128,13 @@
      页码条目从不禁用（连接层只给上一页/下一页发原生 disabled），故这边不必再排除 :disabled */
   [data-scope='pagination'][data-part='prev-trigger']:hover:not(:disabled),
   [data-scope='pagination'][data-part='next-trigger']:hover:not(:disabled),
-  [data-scope='pagination'][data-part='item']:not([data-selected]):hover {
+  [data-scope='pagination'][data-part='item']:not([data-current]):hover {
     background: var(--xh-pagination-item-bg-hover, var(--xh-bg-subtle-hover));
   }
 
   [data-scope='pagination'][data-part='prev-trigger']:active:not(:disabled),
   [data-scope='pagination'][data-part='next-trigger']:active:not(:disabled),
-  [data-scope='pagination'][data-part='item']:not([data-selected]):active {
+  [data-scope='pagination'][data-part='item']:not([data-current]):active {
     background: var(--xh-pagination-item-bg-active, var(--xh-bg-subtle-active));
   }
 
@@ -124,21 +154,21 @@
     cursor: not-allowed;
   }
 
-  /* 当前页：data-selected 与 aria-current='page' 由连接层成对给出，
+  /* 当前页：data-current 与 aria-current='page' 由连接层成对给出，
      样式挂在 data 钩子上，无障碍语义留给 aria，两边各司其职。
      只换底色不加粗——字重一变字形就变宽，页码格子会跟着长一点，正是这里要避免的抖动 */
-  [data-scope='pagination'][data-part='item'][data-selected] {
+  [data-scope='pagination'][data-part='item'][data-current] {
     border-color: var(--xh-pagination-item-border-selected, var(--xh-_pagination-selected-bg));
     background: var(--xh-pagination-item-bg-selected, var(--xh-_pagination-selected-bg));
     color: var(--xh-pagination-item-fg-selected, var(--xh-_pagination-selected-fg));
   }
 
-  [data-scope='pagination'][data-part='item'][data-selected]:hover {
+  [data-scope='pagination'][data-part='item'][data-current]:hover {
     border-color: var(--xh-pagination-item-border-selected-hover, var(--xh-_pagination-selected-bg-hover));
     background: var(--xh-pagination-item-bg-selected-hover, var(--xh-_pagination-selected-bg-hover));
   }
 
-  [data-scope='pagination'][data-part='item'][data-selected]:active {
+  [data-scope='pagination'][data-part='item'][data-current]:active {
     border-color: var(--xh-pagination-item-border-selected-active, var(--xh-_pagination-selected-bg-active));
     background: var(--xh-pagination-item-bg-selected-active, var(--xh-_pagination-selected-bg-active));
   }
@@ -150,4 +180,131 @@
     cursor: default;
     pointer-events: none;
   }
+  /* 每页条数控制器：原生 select，抹掉系统外观后与页码格子共用同一副骨架。
+     箭头用背景图而非伪元素——原生 select 不生成 ::before */
+  [data-scope='pagination'][data-part='page-size-select'] {
+    flex: none;
+    block-size: var(--xh-pagination-item-h, var(--xh-_pagination-item-size));
+    padding-inline: var(--xh-pagination-item-px, var(--xh-_pagination-item-px));
+    /* 右侧让开箭头 */
+    padding-inline-end: calc(
+      var(--xh-pagination-item-px, var(--xh-_pagination-item-px)) +
+        var(--xh-icon-size, var(--xh-glyph-size-text)) + var(--xh-space-1)
+    );
+    border: var(--xh-stroke-thin) solid var(--xh-pagination-page-size-border, var(--xh-border-default));
+    border-radius: var(--xh-pagination-item-radius, var(--xh-shape-control));
+    background: var(--xh-pagination-page-size-bg, var(--xh-bg-surface));
+    color: var(--xh-pagination-item-fg, var(--xh-fg-default));
+    font-size: var(--xh-pagination-font-size, var(--xh-_pagination-font-size));
+    line-height: var(--xh-leading-none);
+    appearance: none;
+    cursor: pointer;
+  }
+
+  [data-scope='pagination'][data-part='page-size-select']:hover:not(:disabled) {
+    border-color: var(--xh-pagination-page-size-border-hover, var(--xh-border-strong));
+  }
+
+  [data-scope='pagination'][data-part='page-size-select']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='pagination'][data-part='page-size-select']:disabled {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 摊开省略位的定位层。三处坐标系必须同为 fixed：机器交给引擎的 strategy、
+     连接层的内联 position、这里 —— 差一处就会算在错的坐标系里 */
+  [data-scope='pagination'][data-part='positioner'] {
+    /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，面板继承它限高；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
+    --xh-_pagination-available-h: 100vh;
+
+    /* 页码面板的自绘条浮在内容之上：轨道不上底色，实色轨道会在面板右缘糊一条竖灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
+    position: fixed;
+    z-index: var(--xh-pagination-layer, var(--xh-layer-popover));
+    /* 空壳不吃指针：省略位与面板之间那段间隙要能点得穿 */
+    pointer-events: none;
+  }
+
+  /* 锚点被滚出可视区：整个浮层随之收起 */
+  [data-scope='pagination'][data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  /* 摊开的页码面板：一串页码格子，横着排、必要时折行 */
+  [data-scope='pagination'][data-part='content'] {
+    /* 浮层被搬到 portal 落点，继承不到 root 上那把尺，这里再声明一遍 */
+    --xh-icon-size: var(--xh-pagination-icon-size, var(--xh-glyph-size-text));
+
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--xh-pagination-gap, var(--xh-space-1));
+    /* 页码不可预知有多少：不限高就整块伸出视口且滚不到 */
+    max-inline-size: var(--xh-pagination-content-max-w, var(--xh-overlay-max-w));
+    max-block-size: min(
+      var(--xh-pagination-content-max-h, var(--xh-overlay-max-h)),
+      var(--xh-_pagination-available-h)
+    );
+    overflow-y: auto;
+    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-surface));
+    background: var(--xh-pagination-content-bg, var(--xh-bg-surface));
+    box-shadow: var(--xh-pagination-content-shadow, var(--xh-elevation-floating));
+    /* 定位层不吃指针，面板本体必须吃：里面的页码要点得到 */
+    pointer-events: auto;
+  }
+
+  [data-scope='pagination'][data-part='content'][data-state='open'] {
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
+     免得动画结束到真收起之间闪一下原样 */
+  [data-scope='pagination'][data-part='content'][data-state='closed'] {
+    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 这里刻意没有 [data-part='content'][hidden] { display: none }：
+     补了退场就一帧都播不出来，真正的收起由适配器落成内联 display */
+
+  /* 没写内容就由皮肤画兜底字形：上一页/下一页默认就是两枚箭头，
+     作者往部件里塞了自己的图形或文字，这两条即不命中 */
+  [data-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;
+  }
+
+  [data-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;
+  }
+
+  /* rtl 下页序从右往左走，箭头跟着指向行进方向 */
+  [dir='rtl'] [data-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'] [data-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);
+  }
 }