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

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/resizable.css

@@ -0,0 +1,113 @@
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='resizable'] {
+    --xh-resizable-skin: 1;
+  }
+
+  /* 分工：**尺寸与位移**由连接层每帧写进内联样式（inline-size / block-size / left / top）。
+     这份皮肤一条都不碰那四个——内联优先级更高，写了不但是死声明，
+     还会在拖动的每一帧跟连接层抢位置。皮肤只管定位上下文、把手落位与状态表现。 */
+
+  /* 定位上下文，八向可调靠它才成立：
+     推西边与北边时容器的起点会动，那段位移写成 left / top。relative 的 left / top
+     是视觉位移、元素仍占原位，因此对边钉得住。改成 static 会让这两个方向只变尺寸不移位。 */
+  [data-scope='resizable'][data-part='root'] {
+    position: relative;
+    /* 把层序关在容器里：把手的 1 / 2 只跟彼此比，不跟外面的层号打架 */
+    isolation: isolate;
+    box-sizing: border-box;
+  }
+
+  /* 调整期间关掉选中：把手一按就会把容器里的文字刷成选中态 */
+  [data-scope='resizable'][data-part='root'][data-resizing] {
+    user-select: none;
+  }
+
+  [data-scope='resizable'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 把手压在边上，往外挪半个身位，两侧各留出一点可抓的余量——
+     贴着边只有一两个像素能按到。落位按 data-edge 分派。 */
+  [data-scope='resizable'][data-part='handle'] {
+    position: absolute;
+    z-index: 1;
+    display: block;
+    touch-action: none;
+  }
+
+  [data-scope='resizable'][data-part='handle'][hidden] {
+    display: none;
+  }
+
+  /* 四条边：各占一整条，厚度是可抓的余量 */
+  [data-scope='resizable'][data-part='handle'][data-edge='n'],
+  [data-scope='resizable'][data-part='handle'][data-edge='s'] {
+    inset-inline: var(--xh-resizable-grip, var(--xh-space-2));
+    block-size: var(--xh-resizable-grip, var(--xh-space-2));
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='e'],
+  [data-scope='resizable'][data-part='handle'][data-edge='w'] {
+    inset-block: var(--xh-resizable-grip, var(--xh-space-2));
+    inline-size: var(--xh-resizable-grip, var(--xh-space-2));
+  }
+
+  /* 落位用逻辑属性：e 说的是行尾侧，从右往左排版时它就该落在屏幕左边——
+     机器那边也是把逻辑边翻成物理边再算几何的，两处同源 */
+  [data-scope='resizable'][data-part='handle'][data-edge='n'] {
+    inset-block-start: calc(var(--xh-resizable-grip, var(--xh-space-2)) / -2);
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='s'] {
+    inset-block-end: calc(var(--xh-resizable-grip, var(--xh-space-2)) / -2);
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='e'] {
+    inset-inline-end: calc(var(--xh-resizable-grip, var(--xh-space-2)) / -2);
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='w'] {
+    inset-inline-start: calc(var(--xh-resizable-grip, var(--xh-space-2)) / -2);
+  }
+
+  /* 四个角：压在两条边的交点上，盖过相邻两条边（它们同时动两轴） */
+  [data-scope='resizable'][data-part='handle'][data-edge='ne'],
+  [data-scope='resizable'][data-part='handle'][data-edge='nw'],
+  [data-scope='resizable'][data-part='handle'][data-edge='se'],
+  [data-scope='resizable'][data-part='handle'][data-edge='sw'] {
+    z-index: 2;
+    inline-size: var(--xh-resizable-corner, var(--xh-space-3));
+    block-size: var(--xh-resizable-corner, var(--xh-space-3));
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='nw'] {
+    inset-block-start: calc(var(--xh-resizable-corner, var(--xh-space-3)) / -2);
+    inset-inline-start: calc(var(--xh-resizable-corner, var(--xh-space-3)) / -2);
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='ne'] {
+    inset-block-start: calc(var(--xh-resizable-corner, var(--xh-space-3)) / -2);
+    inset-inline-end: calc(var(--xh-resizable-corner, var(--xh-space-3)) / -2);
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='sw'] {
+    inset-block-end: calc(var(--xh-resizable-corner, var(--xh-space-3)) / -2);
+    inset-inline-start: calc(var(--xh-resizable-corner, var(--xh-space-3)) / -2);
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='se'] {
+    inset-block-end: calc(var(--xh-resizable-corner, var(--xh-space-3)) / -2);
+    inset-inline-end: calc(var(--xh-resizable-corner, var(--xh-space-3)) / -2);
+  }
+
+  [data-scope='resizable'][data-part='handle']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 没开放的边不显示把手：留着一个抓不动的区域只会让人反复去试 */
+  [data-scope='resizable'][data-part='handle'][data-disabled] {
+    display: none;
+  }
+}

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%;
   }

package/css/sortable.css

@@ -0,0 +1,103 @@
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='sortable'] {
+    --xh-sortable-skin: 1;
+  }
+
+  /* 分工：**每一项的位移**由连接层每帧写进内联 transform（让位与跟手都在那儿算）。
+     这份皮肤一条都不碰 transform——内联优先级更高，写了不但是死声明，
+     还会在拖动的每一帧跟连接层抢位置。皮肤只管排布方向、间距、光标与状态表现。 */
+
+  [data-scope='sortable'][data-part='root'] {
+    display: flex;
+    gap: var(--xh-sortable-gap, var(--xh-space-2));
+  }
+
+  /* 拖动期间关掉选中：整项可拖时按下不 preventDefault，不关这条会一路刷蓝 */
+  [data-scope='sortable'][data-part='root'][data-dragging] {
+    user-select: none;
+  }
+
+  [data-scope='sortable'][data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  [data-scope='sortable'][data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  /* 换行网格：主轴横排、允许折行，落点按最近中心判，与单轴那两档是不同的判据 */
+  [data-scope='sortable'][data-part='root'][data-orientation='both'] {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  /* 项里面放什么、怎么排全是使用者的事：这里不给 display 也不给间距。
+     给了会盖掉使用者自己的单元格布局——网格里的一格被压成 flex 行之后就不再撑满，
+     看起来像是尺寸算错了。皮肤只管拖起来那一项的视觉反馈。 */
+
+  /* 让位期间关掉过渡，跟手的那一项才不会慢半拍粘在指针后面。
+     其余项反过来要过渡：它们是被让开的，瞬移会看不出发生了什么。 */
+  [data-scope='sortable'][data-part='root'][data-dragging] [data-part='item']:not([data-dragging]) {
+    transition: transform var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='sortable'][data-part='item'][data-dragging] {
+    /* 拖起来的那一项浮在上面。层级由连接层写内联，这里只管观感 */
+    box-shadow: var(--xh-sortable-item-shadow-dragging, var(--xh-elevation-raised));
+    opacity: var(--xh-sortable-item-opacity-dragging, 0.9);
+  }
+
+  [data-scope='sortable'][data-part='item-handle'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    inline-size: var(--xh-sortable-handle-size, var(--xh-control-action-size));
+    block-size: var(--xh-sortable-handle-size, var(--xh-control-action-size));
+    padding: 0;
+    border: 0;
+    border-radius: var(--xh-sortable-handle-radius, var(--xh-shape-control));
+    background: transparent;
+    color: var(--xh-sortable-handle-fg, var(--xh-fg-muted));
+    cursor: grab;
+  }
+
+  [data-scope='sortable'][data-part='item-handle']:hover {
+    background: var(--xh-sortable-handle-bg-hover, var(--xh-bg-subtle-hover));
+    color: var(--xh-sortable-handle-fg-hover, var(--xh-fg-default));
+  }
+
+  [data-scope='sortable'][data-part='item-handle'][data-dragging] {
+    cursor: grabbing;
+  }
+
+  [data-scope='sortable'][data-part='item-handle']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='sortable'][data-part='item-handle'][aria-disabled='true'] {
+    cursor: not-allowed;
+    color: var(--xh-sortable-handle-fg-disabled, var(--xh-fg-disabled));
+  }
+
+  /* 活动区域只说给读屏听，不占版面。声明与 shared/visually-hidden.ts 逐条同值。 */
+  [data-scope='sortable'][data-part='live-region'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+  /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
+     不补的话作者给节点加 hidden 后它照样显示 */
+  [data-scope='sortable'][data-part='root'][hidden],
+  [data-scope='sortable'][data-part='item-handle'][hidden] {
+    display: none;
+  }
+}

package/css/space.css

@@ -8,7 +8,7 @@
     display: flex;
     flex-wrap: nowrap;
     /* 不写档位也按 md 留白，这是与裸弹性容器的分野；使用者槽位排在档位之前，写死一个值即盖过所有档 */
-    gap: var(--xh-space-gap, var(--xh-space-3));
+    gap: var(--xh-space-gap, var(--xh-layout-gap-md));
   }
 
   /* 声明了 display 就盖掉了 UA 的 [hidden] 规则，这里还回去 */
@@ -96,22 +96,22 @@
   /* —— 间距档位 —— */
   /* 每一档指向一个间距令牌，折行时行与行之间也吃这份间距 */
   [data-scope='space'][data-part='root'][data-gap='xs'] {
-    gap: var(--xh-space-gap, var(--xh-space-1));
+    gap: var(--xh-space-gap, var(--xh-layout-gap-xs));
   }
 
   [data-scope='space'][data-part='root'][data-gap='sm'] {
-    gap: var(--xh-space-gap, var(--xh-space-2));
+    gap: var(--xh-space-gap, var(--xh-layout-gap-sm));
   }
 
   [data-scope='space'][data-part='root'][data-gap='md'] {
-    gap: var(--xh-space-gap, var(--xh-space-3));
+    gap: var(--xh-space-gap, var(--xh-layout-gap-md));
   }
 
   [data-scope='space'][data-part='root'][data-gap='lg'] {
-    gap: var(--xh-space-gap, var(--xh-space-4));
+    gap: var(--xh-space-gap, var(--xh-layout-gap-lg));
   }
 
   [data-scope='space'][data-part='root'][data-gap='xl'] {
-    gap: var(--xh-space-gap, var(--xh-space-6));
+    gap: var(--xh-space-gap, var(--xh-layout-gap-xl));
   }
 }