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

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 上 */

package/css/popselect.css

@@ -37,6 +37,9 @@
        引擎没算（尚未落位 / 无引擎 / 贴边归零）时退回自己那档静态上限 */
     --xh-_popselect-available-h: 100vh;
 
+    /* 候选列表的自绘条浮在内容之上：轨道不上底色，实色轨道会在列表右缘糊一条竖灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
     position: fixed;
     z-index: var(--xh-popselect-layer, var(--xh-layer-popover));
     /* 空壳不吃指针，交互只发生在 content 上 */
@@ -53,8 +56,10 @@
     /* 尺寸档只换这四个私有槽，触发器与条目都从这两处继承它们，换档不必给每个部件各写一条选择器 */
     --xh-_popselect-h: var(--xh-control-h-md);
     --xh-_popselect-px: var(--xh-control-px-md);
+    --xh-_popselect-item-py: var(--xh-list-option-py-md);
+    --xh-_popselect-item-px: var(--xh-control-px-md);
     --xh-_popselect-gap: var(--xh-control-gap-md);
-    --xh-_popselect-font-size: var(--xh-text-body-size);
+    --xh-_popselect-font-size: var(--xh-control-font-md);
 
     /* 形态档只换这三个槽：缺省即 outline（描边 + 画布底） */
     --xh-_popselect-control-bg: var(--xh-bg-canvas);
@@ -64,7 +69,7 @@
     /* 聚焦环恒用固定环色；强调色随语气走，只落在勾选标记与选中文字上，正文文字色不动。
        没写 data-tone 时 --xh-_tone 没被声明，两处都退回原来的取值 */
     --xh-_popselect-ring: var(--xh-ring-focus);
-    --xh-_popselect-accent: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_popselect-accent: var(--xh-_tone, var(--xh-fg-brand));
     --xh-_popselect-item-selected-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
   }
 
@@ -91,6 +96,8 @@
   [data-scope='popselect']:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
     --xh-_popselect-h: var(--xh-control-h-sm);
     --xh-_popselect-px: var(--xh-control-px-sm);
+    --xh-_popselect-item-py: var(--xh-list-option-py-sm);
+    --xh-_popselect-item-px: var(--xh-control-px-sm);
     --xh-_popselect-gap: var(--xh-control-gap-sm);
     --xh-_popselect-font-size: var(--xh-control-font-sm);
   }
@@ -98,6 +105,8 @@
   [data-scope='popselect']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
     --xh-_popselect-h: var(--xh-control-h-lg);
     --xh-_popselect-px: var(--xh-control-px-lg);
+    --xh-_popselect-item-py: var(--xh-list-option-py-lg);
+    --xh-_popselect-item-px: var(--xh-control-px-lg);
     --xh-_popselect-gap: var(--xh-control-gap-lg);
     --xh-_popselect-font-size: var(--xh-control-font-lg);
   }
@@ -245,6 +254,7 @@
   [data-scope='popselect'][data-part='content'] {
     display: flex;
     flex-direction: column;
+    gap: var(--xh-popselect-content-gap, var(--xh-list-option-gap));
     min-inline-size: var(--xh-popselect-content-min-w, var(--xh-overlay-menu-min-w));
     max-inline-size: var(--xh-popselect-content-max-w, var(--xh-overlay-max-w));
     max-block-size: min(var(--xh-popselect-content-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_popselect-available-h));
@@ -290,8 +300,8 @@
     display: flex;
     align-items: center;
     gap: var(--xh-popselect-item-gap, var(--xh-_popselect-gap));
-    padding-block: var(--xh-popselect-item-py, var(--xh-space-1_5));
-    padding-inline: var(--xh-popselect-item-px, var(--xh-control-px-md));
+    padding-block: var(--xh-popselect-item-py, var(--xh-_popselect-item-py));
+    padding-inline: var(--xh-popselect-item-px, var(--xh-_popselect-item-px));
     border-radius: var(--xh-popselect-item-radius, var(--xh-shape-control));
     color: var(--xh-popselect-item-fg, var(--xh-fg-default));
     font-size: var(--xh-popselect-item-font-size, var(--xh-_popselect-font-size));
@@ -368,4 +378,14 @@
   [data-scope='popselect'][data-part='item-indicator'][data-state='checked'] {
     visibility: visible;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='popselect'][data-part='root'][hidden],
+  [data-scope='popselect'][data-part='control'][hidden],
+  [data-scope='popselect'][data-part='trigger'][hidden],
+  [data-scope='popselect'][data-part='item'][hidden],
+  [data-scope='popselect'][data-part='item-indicator'][hidden] {
+    display: none;
+  }
 }

package/css/progress.css

@@ -31,7 +31,7 @@
     overflow: hidden;
     inline-size: 100%;
     block-size: var(--xh-_thickness);
-    border-radius: var(--xh-shape-pill);
+    border-radius: var(--xh-progress-track-radius, var(--xh-shape-pill));
     background: var(--xh-progress-track, var(--xh-bg-subtle-active));
   }
 
@@ -39,7 +39,7 @@
      轨道不跟着换族：只有已完成的那段换色，底槽保持中性才读得出"完成了多少"。 */
   [data-scope='progress'][data-part='range'] {
     block-size: 100%;
-    border-radius: var(--xh-shape-pill);
+    border-radius: var(--xh-progress-range-radius, var(--xh-shape-pill));
     background: var(--xh-progress-range, var(--xh-_tone, var(--xh-bg-brand)));
     transition: inline-size var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
@@ -146,4 +146,10 @@
     visibility: hidden;
   }
 
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='progress'][data-part='root'][hidden] {
+    display: none;
+  }
 }

package/css/radio-group.css

@@ -7,7 +7,8 @@
   [data-scope='radio-group'][data-part='root'] {
     /* 尺寸档只换这两个私有槽，标题与条目都从 root 继承它们，换档不必给每个部件各写一条选择器 */
     --xh-_radio-group-item-gap: var(--xh-control-gap-md);
-    --xh-_radio-group-font-size: var(--xh-text-label-size);
+    --xh-_radio-group-font-size: var(--xh-control-font-md);
+    --xh-_radio-group-indicator: var(--xh-control-indicator-md);
     /* 选中色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的品牌色 */
     --xh-_radio-group-accent: var(--xh-_tone, var(--xh-bg-brand));
 
@@ -28,11 +29,13 @@
   [data-scope='radio-group'][data-part='root'][data-size='sm'] {
     --xh-_radio-group-item-gap: var(--xh-control-gap-sm);
     --xh-_radio-group-font-size: var(--xh-control-font-sm);
+    --xh-_radio-group-indicator: var(--xh-control-indicator-sm);
   }
 
   [data-scope='radio-group'][data-part='root'][data-size='lg'] {
     --xh-_radio-group-item-gap: var(--xh-control-gap-lg);
     --xh-_radio-group-font-size: var(--xh-control-font-lg);
+    --xh-_radio-group-indicator: var(--xh-control-indicator-lg);
   }
 
   [data-scope='radio-group'][data-part='label'] {
@@ -71,10 +74,10 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--xh-radio-group-indicator-size, var(--xh-control-indicator-size));
-    block-size: var(--xh-radio-group-indicator-size, var(--xh-control-indicator-size));
+    inline-size: var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator));
+    block-size: var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator));
     border: var(--xh-stroke-thin) solid var(--xh-radio-group-indicator-border, var(--xh-border-control));
-    border-radius: var(--xh-shape-pill);
+    border-radius: var(--xh-radio-group-indicator-radius, var(--xh-shape-pill));
     background: var(--xh-radio-group-indicator-bg, var(--xh-bg-canvas));
     transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
@@ -93,8 +96,8 @@
      直径取指示器的一半：换尺寸档时圈与点一起走，比例不散 */
   [data-scope='radio-group'][data-part='indicator']::before {
     content: '';
-    inline-size: calc(var(--xh-radio-group-indicator-size, var(--xh-control-indicator-size)) / 2);
-    block-size: calc(var(--xh-radio-group-indicator-size, var(--xh-control-indicator-size)) / 2);
+    inline-size: calc(var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator)) / 2);
+    block-size: calc(var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator)) / 2);
     border-radius: var(--xh-shape-pill);
     background: var(--xh-radio-group-indicator-dot, var(--xh-_radio-group-accent));
     scale: 0;
@@ -109,4 +112,12 @@
     color: inherit;
     user-select: none;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='radio-group'][data-part='root'][hidden],
+  [data-scope='radio-group'][data-part='item'][hidden],
+  [data-scope='radio-group'][data-part='indicator'][hidden] {
+    display: none;
+  }
 }

package/css/rating.css

@@ -8,9 +8,9 @@
      根上不留基准它就会贴到更外层的定位祖先上，原生校验提示跟着飘到页面别处。 */
   [data-scope='rating'][data-part='root'] {
     /* 尺寸档只换这三个私有槽，标题与星星都从 root 继承它们，换档不必给每个部件各写一条选择器 */
-    --xh-_rating-item-gap: var(--xh-space-1);
+    --xh-_rating-item-gap: var(--xh-control-gap-md);
     --xh-_rating-item-size: var(--xh-font-size-2xl);
-    --xh-_rating-font-size: var(--xh-text-label-size);
+    --xh-_rating-font-size: var(--xh-control-font-md);
     /* 点亮色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的警示色 */
     --xh-_rating-accent: var(--xh-_tone, var(--xh-color-warning-500));
 

package/css/result.css

@@ -8,7 +8,7 @@
     /* 三个尺寸档只换这几个私有槽，图标与标题都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */
     --xh-_result-gap: var(--xh-stack-gap-md);
-    --xh-_result-py: var(--xh-section-py);
+    --xh-_result-py: var(--xh-section-py-md);
     --xh-_result-icon-size: var(--xh-glyph-size-3xl);
     --xh-_result-title-size: var(--xh-text-heading-3-size);
     /* 说明的读行宽度：整句话不收窄就会拉成一条难读的长行 */
@@ -34,15 +34,15 @@
 
   /* —— 尺寸 —— */
   [data-scope='result'][data-part='root'][data-size='sm'] {
-    --xh-_result-gap: var(--xh-space-3);
-    --xh-_result-py: var(--xh-space-6);
+    --xh-_result-gap: var(--xh-stack-gap-sm);
+    --xh-_result-py: var(--xh-section-py-sm);
     --xh-_result-icon-size: var(--xh-glyph-size-2xl);
     --xh-_result-title-size: var(--xh-control-font-lg);
   }
 
   [data-scope='result'][data-part='root'][data-size='lg'] {
-    --xh-_result-gap: var(--xh-space-6);
-    --xh-_result-py: var(--xh-space-8);
+    --xh-_result-gap: var(--xh-stack-gap-lg);
+    --xh-_result-py: var(--xh-section-py-lg);
     --xh-_result-icon-size: var(--xh-glyph-size-4xl);
     --xh-_result-title-size: var(--xh-text-heading-2-size);
   }
@@ -75,6 +75,9 @@
     align-items: center;
     justify-content: center;
     flex: none;
+    /* 作者塞进图标槽的 XhIcon 与皮肤画的字形同一把尺，都按展示档的图标框量 */
+    --xh-icon-size: var(--xh-result-icon-size, var(--xh-_result-icon-size));
+
     block-size: var(--xh-result-icon-size, var(--xh-_result-icon-size));
     inline-size: var(--xh-result-icon-size, var(--xh-_result-icon-size));
     color: var(--xh-result-icon-fg, var(--xh-_result-accent));
@@ -106,4 +109,11 @@
     justify-content: center;
     gap: var(--xh-result-action-gap, var(--xh-space-2));
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='result'][data-part='icon'][hidden],
+  [data-scope='result'][data-part='action'][hidden] {
+    display: none;
+  }
 }

package/css/scrollbar.css

@@ -27,6 +27,9 @@
     --xh-_scrollbar-thickness: var(--xh-scrollbar-thickness-md);
 
     position: absolute;
+    /* 浮层的 positioner 一律 pointer-events: none，条子作为它的子节点会继承到，拖不动也点不着；
+       收起态那条规则优先级更高，仍旧穿透 */
+    pointer-events: auto;
     /* touch-action 关掉浏览器自己的手势：不关的话手指一按滑块页面就跟着滚，
        指针随即被系统收走（pointercancel），拖到一半的滑块停在原地。
        user-select 同理——拖动时选中页面文字会让滑块"粘"住。 */

package/css/segmented.css

@@ -11,7 +11,7 @@
     --xh-_segmented-h: var(--xh-control-h-md);
     --xh-_segmented-px: var(--xh-control-px-md);
     --xh-_segmented-gap: var(--xh-control-gap-md);
-    --xh-_segmented-font-size: var(--xh-text-label-size);
+    --xh-_segmented-font-size: var(--xh-control-font-md);
     /* 指示器底色与选中段的文字色；没写 data-tone 时就是这里的取值 */
     --xh-_segmented-indicator-bg: var(--xh-bg-surface);
     --xh-_segmented-fg-selected: var(--xh-fg-default);

package/css/select.css

@@ -54,9 +54,11 @@
        换档不必给每个部件各写一条选择器 */
     --xh-_select-h: var(--xh-control-h-md);
     --xh-_select-px: var(--xh-control-px-md);
+    --xh-_select-item-py: var(--xh-list-option-py-md);
+    --xh-_select-item-px: var(--xh-control-px-md);
     --xh-_select-gap: var(--xh-control-gap-md);
-    --xh-_select-font-size: var(--xh-text-body-size);
-    --xh-_select-label-font-size: var(--xh-text-label-size);
+    --xh-_select-font-size: var(--xh-control-font-md);
+    --xh-_select-label-font-size: var(--xh-control-font-md);
 
     /* 形态档只换这三个槽：缺省即 outline（描边 + 画布底） */
     --xh-_select-control-bg: var(--xh-bg-canvas);
@@ -66,7 +68,7 @@
     /* 聚焦环恒用固定环色；强调色随语气走，只落在勾选标记与选中文字上，正文文字色不动。
        没写 data-tone 时 --xh-_tone 没被声明，两处都退回原来的取值 */
     --xh-_select-ring: var(--xh-ring-focus);
-    --xh-_select-accent: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_select-accent: var(--xh-_tone, var(--xh-fg-brand));
     --xh-_select-item-selected-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
   }
 
@@ -86,6 +88,8 @@
   [data-scope='select']:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
     --xh-_select-h: var(--xh-control-h-sm);
     --xh-_select-px: var(--xh-control-px-sm);
+    --xh-_select-item-py: var(--xh-list-option-py-sm);
+    --xh-_select-item-px: var(--xh-control-px-sm);
     --xh-_select-gap: var(--xh-control-gap-sm);
     --xh-_select-font-size: var(--xh-control-font-sm);
     --xh-_select-label-font-size: var(--xh-control-font-sm);
@@ -103,6 +107,8 @@
   [data-scope='select']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
     --xh-_select-h: var(--xh-control-h-lg);
     --xh-_select-px: var(--xh-control-px-lg);
+    --xh-_select-item-py: var(--xh-list-option-py-lg);
+    --xh-_select-item-px: var(--xh-control-px-lg);
     --xh-_select-gap: var(--xh-control-gap-lg);
     --xh-_select-font-size: var(--xh-control-font-lg);
     --xh-_select-label-font-size: var(--xh-control-font-lg);
@@ -151,8 +157,6 @@
     block-size: var(--xh-select-control-h, var(--xh-_select-h));
     padding-inline: var(--xh-select-control-px, var(--xh-_select-px));
     min-inline-size: var(--xh-select-control-min-w, var(--xh-control-min-w));
-    /* 多选会把 N 项的文本连成一串，框宽必须封顶；与浮层同一个上限，两半看着才是一件东西 */
-    max-inline-size: var(--xh-select-control-max-w, var(--xh-overlay-max-w));
     border: var(--xh-stroke-thin) solid var(--xh-select-control-border, var(--xh-_select-control-border));
     border-radius: var(--xh-select-control-radius, var(--xh-shape-control));
     background: var(--xh-select-control-bg, var(--xh-_select-control-bg));
@@ -399,6 +403,7 @@
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
+    gap: var(--xh-select-list-gap, var(--xh-list-option-gap));
     min-block-size: 0;
     overflow-y: auto;
   }
@@ -453,8 +458,8 @@
     display: flex;
     align-items: center;
     gap: var(--xh-select-item-gap, var(--xh-_select-gap));
-    padding-block: var(--xh-select-item-py, var(--xh-space-1_5));
-    padding-inline: var(--xh-select-item-px, var(--xh-control-px-md));
+    padding-block: var(--xh-select-item-py, var(--xh-_select-item-py));
+    padding-inline: var(--xh-select-item-px, var(--xh-_select-item-px));
     border-radius: var(--xh-select-item-radius, var(--xh-shape-control));
     color: var(--xh-select-item-fg, var(--xh-fg-default));
     font-size: var(--xh-select-item-font-size, var(--xh-_select-font-size));
@@ -560,4 +565,17 @@
     -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
     mask: var(--xh-glyph-mark-close) center / contain no-repeat;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='select'][data-part='root'][hidden],
+  [data-scope='select'][data-part='control'][hidden],
+  [data-scope='select'][data-part='trigger'][hidden],
+  [data-scope='select'][data-part='tag'][hidden],
+  [data-scope='select'][data-part='indicator'][hidden],
+  [data-scope='select'][data-part='list'][hidden],
+  [data-scope='select'][data-part='item'][hidden],
+  [data-scope='select'][data-part='item-indicator'][hidden] {
+    display: none;
+  }
 }

package/css/side-nav.css

@@ -76,8 +76,8 @@
   }
 
   [data-scope='side-nav'][data-part='group-label'] {
-    padding-block: var(--xh-space-1);
-    padding-inline: var(--xh-control-px-md);
+    padding-block: var(--xh-side-nav-group-label-py, var(--xh-space-1));
+    padding-inline: var(--xh-side-nav-group-label-px, var(--xh-control-px-md));
     font-size: var(--xh-text-caption-size);
     color: var(--xh-fg-subtle);
     user-select: none;
@@ -107,12 +107,12 @@
   [data-scope='side-nav'][data-part='link'] {
     display: flex;
     align-items: center;
-    gap: var(--xh-control-gap-md);
+    gap: var(--xh-side-nav-link-gap, var(--xh-control-gap-md));
     inline-size: 100%;
     min-block-size: var(--xh-control-h-md);
-    padding-inline: var(--xh-control-px-md);
+    padding-inline: var(--xh-side-nav-link-px, var(--xh-control-px-md));
     border: none;
-    border-radius: var(--xh-shape-control);
+    border-radius: var(--xh-side-nav-link-radius, var(--xh-shape-control));
     background: none;
     color: inherit;
     font-size: var(--xh-text-body-size);
@@ -257,4 +257,15 @@
     -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
     mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='side-nav'][data-part='root'][hidden],
+  [data-scope='side-nav'][data-part='group'][hidden],
+  [data-scope='side-nav'][data-part='branch'][hidden],
+  [data-scope='side-nav'][data-part='item'][hidden],
+  [data-scope='side-nav'][data-part='link'][hidden],
+  [data-scope='side-nav'][data-part='branch-indicator'][hidden] {
+    display: none;
+  }
 }

package/css/slider.css

@@ -132,7 +132,9 @@
     background: var(--xh-slider-thumb-bg, var(--xh-_tone, var(--xh-bg-brand)));
     box-shadow: var(--xh-slider-thumb-shadow, var(--xh-elevation-raised));
     cursor: grab;
-    transition: scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition:
+      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 内联样式把 inset-inline-start 定在值所在的比例上，那是拇指的**起始边**不是圆心；
@@ -203,7 +205,7 @@
     inset-block-start: 50%;
     inline-size: var(--xh-slider-mark-size, var(--xh-space-1));
     block-size: var(--xh-slider-mark-size, var(--xh-space-1));
-    border-radius: var(--xh-shape-pill);
+    border-radius: var(--xh-slider-mark-radius, var(--xh-shape-pill));
     background: var(--xh-slider-mark-bg, var(--xh-border-strong));
     translate: -50% -50%;
   }