@xihan-ui/styles 1.0.0-alpha.3 → 1.1.0

package/css/notification.css

@@ -0,0 +1,377 @@
+@layer xihan.motion {
+  /*
+   * 九个位共用同一条进出场，位移不跟着落位走：要按位置分方向，就得从 group 的
+   * data-placement 反向选到卡片上，落位一改名整条动效静默失效。
+   * 竖向一小段位移在九个位上都说得通。
+   */
+  @keyframes xh-notification-in {
+    from {
+      opacity: 0;
+      translate: 0 var(--xh-motion-distance-md);
+      scale: var(--xh-motion-scale-enter);
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+      scale: 1;
+    }
+  }
+
+  /* loading 那枚字形自己转。逐皮肤自带一份：跨皮肤共用动画名，
+     引用方那份皮肤不在场时动画就静默不跑 */
+  @keyframes xh-notification-spin {
+    to {
+      rotate: 360deg;
+    }
+  }
+
+  @keyframes xh-notification-out {
+    from {
+      opacity: 1;
+      translate: 0 0;
+      scale: 1;
+    }
+
+    to {
+      opacity: 0;
+      translate: 0 var(--xh-motion-distance-md);
+      scale: var(--xh-motion-scale-enter);
+    }
+  }
+}
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='notification'] {
+    --xh-notification-skin: 1;
+  }
+
+  /* 作用域包装不占布局：通知落在哪儿由九个 group 各自的 fixed 说了算，
+     root 只是把队列的作用域圈起来（地标挂在那一摞上，不在这里）。
+     它若留下一个块盒，写在页面中段的用法（按钮和队列摆在一起）就会凭空多出一行空白。
+     另一件必须提防的事：fixed 认的是视口，祖先上一旦出现
+     transform / filter / backdrop-filter / contain，包含块就被抢走，整摞通知立刻贴错位置——
+     所以这里连 position 都不碰，也别往覆盖钩子里加这几个属性。 */
+  [data-scope='notification'][data-part='root'] {
+    display: contents;
+  }
+
+  /* 只要声明过 display，就盖掉了 UA 的 [hidden]{display:none}，收起态得自己补回来 */
+  [data-scope='notification'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /*
+   * 一摞 = 一整面视口大小的定位面：贴边靠 padding，九个位靠 justify/align 表达。
+   * 不用四角 inset 逐个摆，是因为 column flex 的 align-items 走的是行内轴，
+   * RTL 下 start/end 自动跟着翻；写死 inset-inline-start 的话居中那三个位
+   * 还得再配一次 translate，方向一变就错。
+   * 条目次序按队列原样（旧的在前）：贴底那三个位于是新的离屏幕边最近，符合直觉。
+   */
+  [data-scope='notification'][data-part='group'] {
+    position: fixed;
+    inset-block: 0;
+    inset-inline: 0;
+    z-index: var(--xh-notification-layer, var(--xh-layer-toast));
+    display: flex;
+    flex-direction: column;
+    /* 基线按默认落位 bottom-end 写，下面只覆盖跟它不同的那几个位 */
+    justify-content: flex-end;
+    align-items: center;
+    padding-block: var(--xh-notification-inset, var(--xh-space-6));
+    padding-inline: var(--xh-notification-inset, var(--xh-space-6));
+    /* 摞内间距由连接层写进内联 style（两个适配器共用同一份），这里绝不重复写：
+       写了也会被内联盖掉，只会让人误以为间距归样式层管 */
+    /* 整面铺开就等于罩住了整块视口。面本身不吃指针，只有卡片吃（见下），
+       否则九个位一叠，底下的页面就再也点不动了 */
+    pointer-events: none;
+  }
+
+  [data-scope='notification'][data-part='group'][hidden] {
+    display: none;
+  }
+
+  /* 空摞直接撤掉：九个位同时挂九张全屏定位面，白白多九个合成层 */
+  [data-scope='notification'][data-part='group'][data-empty] {
+    display: none;
+  }
+
+  /* 块轴落位：^= 一次吃掉某一行的三个位（top / top-start / top-end） */
+  [data-scope='notification'][data-part='group'][data-placement^='top'] {
+    justify-content: flex-start;
+  }
+
+  [data-scope='notification'][data-part='group'][data-placement^='middle'] {
+    justify-content: center;
+  }
+
+  /* 行内轴落位：不带后缀的 top / middle / bottom 用基线的居中 */
+  [data-scope='notification'][data-part='group'][data-placement$='-start'] {
+    align-items: flex-start;
+  }
+
+  [data-scope='notification'][data-part='group'][data-placement$='-end'] {
+    align-items: flex-end;
+  }
+
+  /*
+   * 一张通知卡：左列一枚类型字形，右列「标题 + 说明 + 操作」竖着排，叉钉在右上角。
+   * 用网格而不是竖排 flex：叉要脱离文档流钉到角上，正文要在字形右边成一列——
+   * 竖排 flex 里这两件事都做不到（叉会变成第三行）。
+   * 底与描边一律中性，语气只由左列那枚字形承载：整片兑色是轻提示那条的做法，
+   * 一张有标题有正文的卡片全片染色会把两层文字都压在同一片语气色上。
+   */
+  [data-scope='notification'][data-part='item'] {
+    /* 叉与操作钮的兜底字形按控件指示符那一档走；左列那枚类型字形另有自己的尺寸 */
+    --xh-icon-size: var(--xh-notification-icon-size, var(--xh-control-indicator-size));
+
+    position: relative;
+    display: grid;
+    /* 左列宽度由字形自己决定，作者不放指示符时它就是 0，正文自然贴到左内衬 */
+    grid-template-columns: auto 1fr;
+    align-items: start;
+    column-gap: var(--xh-notification-gap, var(--xh-space-3));
+    row-gap: var(--xh-notification-row-gap, var(--xh-space-2));
+    inline-size: var(--xh-notification-w, var(--xh-overlay-max-w-lg));
+    /* 摞是整面视口宽的定位面且带内边距，取 100% 就等于自动让出两侧留白，
+       窄屏上不必再算一遍 viewport 减法 */
+    max-inline-size: 100%;
+    padding-block: var(--xh-notification-py, var(--xh-space-4));
+    padding-inline: var(--xh-notification-px, var(--xh-space-4));
+    border: var(--xh-stroke-thin) solid var(--xh-notification-border, var(--xh-border-default));
+    border-radius: var(--xh-notification-radius, var(--xh-shape-surface));
+    background: var(--xh-notification-bg, var(--xh-bg-surface-raised));
+    color: var(--xh-notification-fg, var(--xh-fg-default));
+    box-shadow: var(--xh-notification-shadow, var(--xh-elevation-sheet));
+    font-size: var(--xh-notification-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-notification-leading, var(--xh-text-body-leading));
+    /* 摞的定位面整面铺开且不吃指针，卡片必须自己吃回来：
+       悬停按住计时、按钮可点、焦点进出，全指着这一条 */
+    pointer-events: auto;
+  }
+
+  /* 除指示符外一律落第二列：作者往卡片里塞的任何东西都跟着正文走 */
+  [data-scope='notification'][data-part='item'] > *:not([data-part='item-indicator']) {
+    grid-column: 2;
+  }
+
+  /* 退场窗口走完连接层给的是 hidden 属性，而上面声明了 display——
+     漏掉这条，已经"卸载"的通知会一直杵在屏幕上，且再也没人来收 */
+  [data-scope='notification'][data-part='item'][hidden] {
+    display: none;
+  }
+
+  /* 生命周期只有三段，unmounted 那段由上面的 [hidden] 收走，这里只管前两段 */
+  [data-scope='notification'][data-part='item'][data-state='visible'] {
+    animation: xh-notification-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* forwards 不能省：退场窗口（removeDelay 默认 200ms）比退场动画长，
+     不定住末帧的话动画跑完会弹回全不透明，卡片在被收起前先闪一下 */
+  [data-scope='notification'][data-part='item'][data-state='dismissing'] {
+    animation: xh-notification-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 独占第一列第一行，并与标题首行顶对齐：盒高取一行标题的行高，
+     字形在盒里居中，标题字号改了也不会错位 */
+  [data-scope='notification'][data-part='item-indicator'] {
+    --xh-icon-size: var(--xh-notification-indicator-size, var(--xh-glyph-size-md));
+
+    grid-column: 1;
+    grid-row: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: calc(var(--xh-notification-title-font-size, var(--xh-text-label-size)) * var(--xh-leading-tight));
+    inline-size: var(--xh-notification-indicator-size, var(--xh-glyph-size-md));
+    color: var(--xh-notification-indicator-fg, var(--xh-_tone-fg));
+  }
+
+  [data-scope='notification'][data-part='item-indicator'][hidden] {
+    display: none;
+  }
+
+  /* 作者没往指示符里写内容就由皮肤画兜底字形，按语气各画一枚；
+     塞了自己的图形这几条即不命中 */
+  [data-scope='notification'][data-part='item-indicator']: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-info) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-info) center / contain no-repeat;
+  }
+
+  [data-scope='notification'][data-part='item'][data-type='success'] [data-part='item-indicator']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-check);
+    mask-image: var(--xh-glyph-mark-check);
+  }
+
+  [data-scope='notification'][data-part='item'][data-type='warning'] [data-part='item-indicator']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-warning);
+    mask-image: var(--xh-glyph-mark-warning);
+  }
+
+  [data-scope='notification'][data-part='item'][data-type='error'] [data-part='item-indicator']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-close);
+    mask-image: var(--xh-glyph-mark-close);
+  }
+
+  /* loading 说的是「事情还没完」，不是好消息也不是坏消息：走中性前景档而不是语气色 */
+  [data-scope='notification'][data-part='item'][data-type='loading'] [data-part='item-indicator'] {
+    color: var(--xh-notification-indicator-fg, var(--xh-fg-muted));
+  }
+
+  [data-scope='notification'][data-part='item'][data-type='loading'] [data-part='item-indicator']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-rotate-right);
+    mask-image: var(--xh-glyph-mark-rotate-right);
+    animation: xh-notification-spin var(--xh-spin-duration) linear infinite;
+  }
+
+  /* 减少动效：转圈停下，静止的箭头仍然读得出「还没好」；
+     "在等什么"由卡片上的 role=status 与可见文案继续承担。
+     两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='notification'][data-part='item'][data-type='loading'] [data-part='item-indicator']:empty::before {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='notification'][data-part='item'][data-type='loading'] [data-part='item-indicator']:empty::before {
+    animation: none;
+  }
+
+  [data-scope='notification'][data-part='item-title'] {
+    /* 作者可能把它写成 h2/p，外边距得先归零，否则卡片内的行距对不上 */
+    margin: 0;
+    color: var(--xh-notification-title-fg, var(--xh-fg-default));
+    font-size: var(--xh-notification-title-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-notification-title-font-weight, var(--xh-font-weight-semibold));
+    line-height: var(--xh-notification-title-leading, var(--xh-leading-tight));
+  }
+
+  /* 叉钉在右上角，标题得给它让位；说明与操作在第二行往下，不受影响 */
+  [data-scope='notification'][data-part='item']:has([data-part='item-close-trigger']) [data-part='item-title'] {
+    padding-inline-end: calc(var(--xh-notification-close-size, var(--xh-control-h-sm)) + var(--xh-space-2));
+  }
+
+  [data-scope='notification'][data-part='item-description'] {
+    margin: 0;
+    color: var(--xh-notification-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-notification-description-font-size, var(--xh-text-secondary-size));
+  }
+
+  /* 没给文案的那一个仍然要留在 DOM 里（aria-labelledby / aria-describedby 指着它），
+     但空盒子会照吃一份 gap，卡片看着就多出一截莫名的留白 */
+  [data-scope='notification'][data-part='item-title']:empty,
+  [data-scope='notification'][data-part='item-description']:empty {
+    display: none;
+  }
+
+  [data-scope='notification'][data-part='item-title'][hidden],
+  [data-scope='notification'][data-part='item-description'][hidden] {
+    display: none;
+  }
+
+  [data-scope='notification'][data-part='item-action-trigger'] {
+    /* 网格列默认拉满，按钮要贴着起始侧收成自己的宽度 */
+    justify-self: start;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--xh-notification-action-h, var(--xh-control-h-sm));
+    padding-inline: var(--xh-notification-action-px, var(--xh-control-px-sm));
+    border: var(--xh-stroke-thin) solid var(--xh-notification-action-border, var(--xh-border-default));
+    border-radius: var(--xh-notification-action-radius, var(--xh-shape-control));
+    background: var(--xh-notification-action-bg, var(--xh-bg-subtle));
+    color: var(--xh-notification-action-fg, var(--xh-fg-default));
+    /* 按钮不继承字族字号，不接回来的话卡片里会突然冒出一段系统 UI 字体 */
+    font: inherit;
+    font-weight: var(--xh-notification-action-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+  }
+
+  [data-scope='notification'][data-part='item-action-trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='notification'][data-part='item-action-trigger']:hover:not(:disabled) {
+    background: var(--xh-notification-action-bg-hover, var(--xh-bg-subtle-hover));
+  }
+
+  [data-scope='notification'][data-part='item-action-trigger']:active:not(:disabled) {
+    background: var(--xh-notification-action-bg-active, var(--xh-bg-subtle-active));
+  }
+
+  [data-scope='notification'][data-part='item-action-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 钉在右上角的内衬处，不参与网格排布——留在流里它会变成正文下面的第三行 */
+  [data-scope='notification'][data-part='item-close-trigger'] {
+    position: absolute;
+    inset-block-start: var(--xh-notification-close-inset, var(--xh-space-3));
+    inset-inline-end: var(--xh-notification-close-inset, var(--xh-space-3));
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--xh-notification-close-size, var(--xh-control-h-sm));
+    inline-size: var(--xh-notification-close-size, var(--xh-control-h-sm));
+    border: 0;
+    border-radius: var(--xh-notification-close-radius, var(--xh-shape-control));
+    background: transparent;
+    color: var(--xh-notification-close-fg, var(--xh-fg-muted));
+    font: inherit;
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* closable=false 时连接层同时给了 hidden 与 disabled，这条是它真正收起的那一半：
+     上面声明了 display，不补回来就会留下一个按不动的叉，比压根没有叉更让人困惑 */
+  [data-scope='notification'][data-part='item-close-trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='notification'][data-part='item-close-trigger']:hover:not(:disabled) {
+    background: var(--xh-notification-close-bg-hover, var(--xh-bg-subtle-hover));
+    color: var(--xh-notification-close-fg-hover, var(--xh-fg-default));
+  }
+
+  [data-scope='notification'][data-part='item-close-trigger']:active {
+    background: var(--xh-notification-close-bg-active, var(--xh-bg-subtle-active));
+    scale: var(--xh-motion-scale-press);
+  }
+
+  /* 单体控件用原生 disabled。常规路径下它与 hidden 同时出现看不见，
+     但作者若在覆盖层把收起改了回来，至少还能看出这颗叉是按不动的 */
+  [data-scope='notification'][data-part='item-close-trigger']:disabled {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='notification'][data-part='item-close-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  [data-scope='notification'][data-part='item-close-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-close) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+  }
+}

package/css/number-field.css

@@ -17,9 +17,9 @@
     --xh-_number-field-h: var(--xh-control-h-md);
     --xh-_number-field-px: var(--xh-control-px-md);
     --xh-_number-field-gap: var(--xh-control-gap-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-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));
@@ -378,4 +378,10 @@
     -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/page-header.css

@@ -87,4 +87,11 @@
     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-control-px-md);
-    --xh-_pagination-font-size: var(--xh-text-label-size);
+    --xh-_pagination-font-size: var(--xh-control-font-md);
 
     /* 当前页的选中态随语气走。没写 data-tone 时这几个 --xh-_tone-* 都没被声明，
        退回原来的品牌底与其配色。聚焦环不在其列，它恒是 --xh-ring-focus */
@@ -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);
+  }
 }

package/css/password-input.css

@@ -17,11 +17,11 @@
     --xh-_password-input-h: var(--xh-control-h-md);
     --xh-_password-input-px: var(--xh-control-px-md);
     --xh-_password-input-gap: var(--xh-control-gap-md);
-    --xh-_password-input-font-size: var(--xh-text-body-size);
-    --xh-_password-input-label-font-size: var(--xh-text-label-size);
+    --xh-_password-input-font-size: var(--xh-control-font-md);
+    --xh-_password-input-label-font-size: var(--xh-control-font-md);
     /* 提示与切换钮里的字形都比正文小一档，三个尺寸档各自换过，不是一个恒等的中转 */
-    --xh-_password-input-hint-font-size: var(--xh-text-secondary-size);
-    --xh-_password-input-trigger-font-size: var(--xh-text-secondary-size);
+    --xh-_password-input-hint-font-size: var(--xh-control-caption-md);
+    --xh-_password-input-trigger-font-size: var(--xh-control-caption-md);
 
     /* 盒子的圆角 */
     --xh-_password-input-radius: var(--xh-password-input-input-radius, var(--xh-shape-control));

package/css/pin-input.css

@@ -8,9 +8,9 @@
   [data-scope='pin-input'][data-part='root'] {
     /* 尺寸档只换这四个私有槽，标题与格子都从 root 继承它们，换档不必给每个部件各写一条选择器 */
     --xh-_pin-input-box-size: var(--xh-control-box-md);
-    --xh-_pin-input-box-gap: var(--xh-space-2);
+    --xh-_pin-input-box-gap: var(--xh-control-gap-md);
     --xh-_pin-input-box-font-size: var(--xh-text-heading-3-size);
-    --xh-_pin-input-label-font-size: var(--xh-text-label-size);
+    --xh-_pin-input-label-font-size: var(--xh-control-font-md);
     /* 形态档只换这三个私有槽，缺省这一份就是描边式（描边 + 画布底） */
     --xh-_pin-input-box-bg: var(--xh-bg-canvas);
     --xh-_pin-input-box-border: var(--xh-border-control);

package/css/popconfirm.css

@@ -141,9 +141,9 @@
     align-items: center;
     justify-content: center;
     block-size: var(--xh-control-h-sm);
-    padding-inline: var(--xh-control-px-sm);
+    padding-inline: var(--xh-popconfirm-cancel-trigger-px, var(--xh-control-px-sm));
     border: var(--xh-stroke-thin) solid transparent;
-    border-radius: var(--xh-shape-control);
+    border-radius: var(--xh-popconfirm-action-radius, var(--xh-shape-control));
     font-size: var(--xh-text-secondary-size);
     font-weight: var(--xh-text-label-weight);
     line-height: var(--xh-leading-none);
@@ -227,4 +227,11 @@
     border-color: currentColor;
     animation: none;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='popconfirm'][data-part='root'][hidden],
+  [data-scope='popconfirm'][data-part='cancel-trigger'][hidden] {
+    display: none;
+  }
 }

package/css/popover.css

@@ -38,6 +38,9 @@
        引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
     --xh-_popover-available-h: 100vh;
 
+    /* 面板内容的自绘条浮在内容之上：轨道不上底色，实色轨道会在面板右缘糊一条竖灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
     position: fixed;
     z-index: var(--xh-popover-layer, var(--xh-layer-popover));
     /* 空壳不吃指针，交互只发生在 content 上 */