@xihan-ui/styles 3.2.0 → 4.0.0

package/dist/css/carousel.css

@@ -19,8 +19,9 @@
   .xh-scope-carousel[data-part='root'] {
     /* 自动播放开启时由 Headless 写入真实间隔；0ms 只用于未接入运行时的静态标记。 */
     --xh-_carousel-autoplay-duration: 0ms;
-    --xh-_carousel-progress-from: 0 1;
-    --xh-_carousel-progress-to: 1 1;
+    /* 进度条起步时裁掉的四边（inset 的上 右 下 左）：横轨从行尾那一侧整条裁掉。
+       clip-path 只认物理方向，行内轴两侧取书写方向的位置，rtl 下改从左往右收 */
+    --xh-_carousel-progress-cut: 0 var(--xh-direction-end) 0 var(--xh-direction-start);
 
     position: relative;
     display: block;
@@ -32,9 +33,9 @@
     display: none;
   }
 
+  /* 纵轨：从下沿整条裁掉，进度条从上往下长 */
   .xh-scope-carousel[data-part='root'][data-orientation='vertical'] {
-    --xh-_carousel-progress-from: 1 0;
-    --xh-_carousel-progress-to: 1 1;
+    --xh-_carousel-progress-cut: 0 0 100% 0;
   }
 
   /* 视口是裁切窗口：轨道比它宽（高），露在外面的那些张全靠它切掉。
@@ -131,7 +132,10 @@
   }
 
   /* 两端按钮与播放开关：浮在媒体之上的单图标圆钮，接 Action Control floating 档：
-     盒型（md = box-lg 48px，圆形）、四态面、0.97 按压与 44px 命中区由家族配方给出，组件没有 size 轴、固定 md。
+     圆形、四态面、按压与 44px 命中区由家族配方给出；视觉盒比 floating 档小，不压画面：
+     sm / md / lg 取 24 / 24 / 28px、字形 12 / 16 / 20px（sm 不低于 24px 的最小目标，只把字形收小）。
+     sm / md 直接取细指针最小目标 --xh-control-target-min，不随密度收：floating 档在细指针下不外扩命中区，
+     视觉盒就是命中区，紧凑档再收到 20px 就够不着 24px。
      连接层不投影 variant：面由这里桥接到磨砂缺省（使用者槽 → 磨砂面），悬停 / 按下的底走画布承载的阶梯
      （100 → 200，取不透明档：钮压在图上，半透明的墨色盖不住画面），边缘与投影不动；这里只留定位、桥接槽与图标尺 */
   .xh-scope-carousel[data-part='prev-trigger'],
@@ -167,14 +171,26 @@
     --xh-action-bg-pressed: var(--xh-carousel-trigger-bg-active, var(--xh-bg-subtle-hover-opaque));
     /* M2 顶光走配方的高光通道 */
     --xh-action-radius: var(--xh-carousel-trigger-radius, var(--xh-_action-profile-radius));
-    --xh-action-visual-size: var(--xh-carousel-trigger-size, var(--xh-_action-profile-visual-size));
-    /* 作者塞进来的图标跟着 floating 档走（md 24px），与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-carousel-icon-size, var(--xh-_action-profile-glyph-size));
+    --xh-_carousel-trigger-size: var(--xh-control-target-min);
+    --xh-_carousel-trigger-glyph: var(--xh-glyph-size-sm);
+    --xh-action-visual-size: var(--xh-carousel-trigger-size, var(--xh-_carousel-trigger-size));
+    --xh-action-min-inline-size: var(--xh-carousel-trigger-size, var(--xh-_carousel-trigger-size));
+    /* 作者塞进来的图标与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-carousel-icon-size, var(--xh-_carousel-trigger-glyph));
 
     position: absolute;
     z-index: 1;
   }
 
+  .xh-scope-carousel:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='autoplay-trigger'])[data-xh-action-size='sm'] {
+    --xh-_carousel-trigger-glyph: var(--xh-control-indicator-sm);
+  }
+
+  .xh-scope-carousel:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='autoplay-trigger'])[data-xh-action-size='lg'] {
+    --xh-_carousel-trigger-size: var(--xh-control-h-sm);
+    --xh-_carousel-trigger-glyph: var(--xh-glyph-size-md);
+  }
+
   .xh-scope-carousel[data-part='prev-trigger'],
   .xh-scope-carousel[data-part='next-trigger'] {
     inset-block-start: 50%;
@@ -224,7 +240,7 @@
     flex-wrap: nowrap;
     align-items: center;
     justify-content: center;
-    gap: var(--xh-carousel-indicator-gap, var(--xh-space-1));
+    gap: var(--xh-carousel-indicator-gap, var(--xh-space-2));
   }
 
   .xh-scope-carousel[data-part='indicator-group'][hidden] {
@@ -267,7 +283,7 @@
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  /* 分页点与 Tour 的步骤点同一种语言：8px 圆点，当前页拉长成 20px 胶囊并换品牌色。
+  /* 分页点与 Tour 的步骤点同一种语言：圆点（压在媒体上的这一排 6px、点距 8px），当前页拉长成 20px 胶囊并换品牌色。
      本体就是那颗点：没有文字（页码交给作者，默认不显示），底色即标记。
      悬停 / 按下的回执落在点的颜色上：中性标记按前景阶梯加深一档、再加深一档；当前页按品牌阶梯压一档。
      沿轨道的长度取 indicator-size（当前页 indicator-size-current），垂直于轨道的粗细取 indicator-thickness，
@@ -278,15 +294,15 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--xh-carousel-indicator-size, var(--xh-space-2));
-    block-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2)));
+    inline-size: var(--xh-carousel-indicator-size, var(--xh-space-1_5));
+    block-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-1_5)));
     padding: 0;
     border: 0;
     border-radius: var(--xh-carousel-indicator-radius, var(--xh-shape-circle));
     background: var(--xh-carousel-indicator-bg, var(--xh-bg-subtle-hover-opaque));
     font-size: 0;
-    /* 自动播放的进度条画在点里，超出胶囊的那截裁掉 */
-    overflow: hidden;
+    /* 不裁切：细指针下 ::after 把命中区外扩到点外，overflow 一裁命中区就缩回 6px 的点里；
+       自动播放的进度条自己带圆角、由 clip-path 裁出来，不靠点来裁 */
     cursor: pointer;
     transition:
       inline-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
@@ -299,15 +315,19 @@
     display: none;
   }
 
-  /* 细指针的命中区外扩到 24×24（8px 点四面各扩 8px）；粗指针下这颗伪元素改画点，盒子自己承担命中。
-     点调细了，垂直于轨道那一向多扩一些，命中区不低于 24px 的最小目标 */
+  /* 细指针的命中区外扩到不低于 24×24：两向都取「外扩 8px」与「补足到最小目标 --xh-control-target-min」
+     中大的一头（6px 点四面各扩 9px）；粗指针下这颗伪元素改画点，盒子自己承担命中。点调细了，垂直于轨道那一向照样补足。
+     相邻两点节距 14px，命中区沿轨道互相叠一截：后一颗画在上层，叠住的那段归它，每颗点自己的盒子仍只命中自己 */
   .xh-scope-carousel[data-part='indicator']::after {
     content: '';
     position: absolute;
-    inset-inline: calc(-1 * var(--xh-space-2));
+    inset-inline: min(
+      calc(-1 * var(--xh-space-2)),
+      calc((var(--xh-carousel-indicator-size, var(--xh-space-1_5)) - var(--xh-control-target-min)) / 2)
+    );
     inset-block: min(
       calc(-1 * var(--xh-space-2)),
-      calc((var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2))) - var(--xh-space-6)) / 2)
+      calc((var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-1_5))) - var(--xh-control-target-min)) / 2)
     );
   }
 
@@ -315,9 +335,12 @@
     > .xh-scope-carousel[data-part='indicator']::after {
     inset-inline: min(
       calc(-1 * var(--xh-space-2)),
-      calc((var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2))) - var(--xh-space-6)) / 2)
+      calc((var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-1_5))) - var(--xh-control-target-min)) / 2)
+    );
+    inset-block: min(
+      calc(-1 * var(--xh-space-2)),
+      calc((var(--xh-carousel-indicator-size, var(--xh-space-1_5)) - var(--xh-control-target-min)) / 2)
     );
-    inset-block: calc(-1 * var(--xh-space-2));
   }
 
   .xh-scope-carousel[data-part='indicator']:hover:not([data-current]) {
@@ -371,7 +394,9 @@
 
   /* 自动播放的进度：胶囊是品牌淡底当轨道（仍是「当前」语义；淡底上公共环够对比，不灌环色），
      品牌填充条从起点沿轨道方向长满这一页的时长。计时器每次恢复都重计一整个间隔，
-     进度条跟它同一口径：暂停时回到起点，恢复时从头走 */
+     进度条跟它同一口径：暂停时回到起点，恢复时从头走。
+     填充条铺满胶囊、自己带同一副圆角，未走的那一截由 clip-path 从行尾（纵轨从下沿）裁掉，裁口也取圆角：
+     不缩放就不会把圆头压扁，也不用点的盒子来裁——盒子一裁，细指针外扩的命中区跟着被裁掉 */
   .xh-scope-carousel[data-part='root'][data-autoplay]
     .xh-scope-carousel[data-part='indicator'][data-current],
   .xh-scope-carousel[data-part='root'][data-paused]
@@ -383,44 +408,35 @@
     .xh-scope-carousel[data-part='indicator'][data-current]::before,
   .xh-scope-carousel[data-part='root'][data-paused]
     .xh-scope-carousel[data-part='indicator'][data-current]::before {
+    --xh-_carousel-progress-radius: var(--xh-carousel-indicator-radius-current, var(--xh-shape-pill));
+
     content: '';
     position: absolute;
     inset: 0;
-    border-radius: inherit;
+    border-radius: var(--xh-_carousel-progress-radius);
     background: var(--xh-carousel-indicator-bg-selected, var(--xh-bg-brand));
-    transform-origin: left center;
     animation: xh-carousel-indicator-progress var(--xh-_carousel-autoplay-duration) var(--xh-motion-ease-loop) both;
   }
 
   .xh-scope-carousel[data-part='root'][data-paused]
     .xh-scope-carousel[data-part='indicator'][data-current]::before {
     animation: none;
-    scale: var(--xh-_carousel-progress-from);
+    clip-path: inset(var(--xh-_carousel-progress-cut) round var(--xh-_carousel-progress-radius));
   }
 
   /* 纵轨：胶囊沿块轴拉长，进度条从上往下长 */
   .xh-scope-carousel[data-part='indicator-group'][data-orientation='vertical']
     > .xh-scope-carousel[data-part='indicator'] {
-    inline-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2)));
-    block-size: var(--xh-carousel-indicator-size, var(--xh-space-2));
+    inline-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-1_5)));
+    block-size: var(--xh-carousel-indicator-size, var(--xh-space-1_5));
   }
 
   .xh-scope-carousel[data-part='indicator-group'][data-orientation='vertical']
     > .xh-scope-carousel[data-part='indicator'][data-current] {
-    inline-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2)));
+    inline-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-1_5)));
     block-size: var(--xh-carousel-indicator-size-current, var(--xh-space-5));
   }
 
-  .xh-scope-carousel[data-part='indicator-group'][data-orientation='vertical']
-    > .xh-scope-carousel[data-part='indicator'][data-current]::before {
-    transform-origin: center top;
-  }
-
-  [dir='rtl'] .xh-scope-carousel[data-part='indicator-group'][data-orientation='horizontal']
-    > .xh-scope-carousel[data-part='indicator']::before {
-    transform-origin: right center;
-  }
-
   .xh-scope-carousel[data-part='root'][data-orientation='vertical']
     > :is([data-part='prev-trigger'], [data-part='next-trigger']):where(.xh-scope-carousel) {
     inset-inline-start: 50%;
@@ -460,7 +476,7 @@
 
     .xh-scope-carousel[data-part='indicator'][data-current]::before {
       animation: none;
-      scale: var(--xh-_carousel-progress-to);
+      clip-path: none;
     }
   }
 
@@ -470,7 +486,7 @@
 
   :where([data-motion='reduce']) .xh-scope-carousel[data-part='indicator'][data-current]::before {
     animation: none;
-    scale: var(--xh-_carousel-progress-to);
+    clip-path: none;
   }
 
   @media (forced-colors: active) {
@@ -555,7 +571,7 @@
   }
 
   /* 手指落点：三颗钮的 44px 命中区由配方的 ::after 给（floating 档）。
-     分页点的视觉仍是 8 / 20px，按钮盒改成首尾相接的 44px 分区：直接用负 inset 外扩会让相邻页的命中区重叠，
+     分页点的视觉仍是 6 / 20px，按钮盒改成首尾相接的 44px 分区：直接用负 inset 外扩会让相邻页的命中区重叠，
      落点归属取决于绘制顺序；这里让真实按钮盒承担命中，点与进度条改由伪元素画在盒子中央 */
   @media (pointer: coarse) {
     .xh-scope-carousel[data-part='indicator-group'] {
@@ -578,15 +594,14 @@
       min-block-size: var(--xh-carousel-indicator-target-size, 44px);
       border-radius: 0;
       background: transparent;
-      overflow: visible;
     }
 
     .xh-scope-carousel[data-part='indicator']::after {
       inset: auto;
       inset-block-start: 50%;
       inset-inline-start: 50%;
-      inline-size: var(--xh-carousel-indicator-size, var(--xh-space-2));
-      block-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2)));
+      inline-size: var(--xh-carousel-indicator-size, var(--xh-space-1_5));
+      block-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-1_5)));
       border-radius: var(--xh-carousel-indicator-radius, var(--xh-shape-circle));
       background: var(--xh-carousel-indicator-bg, var(--xh-bg-subtle-hover-opaque));
       translate: -50% -50%;
@@ -636,7 +651,7 @@
       inset-inline-start: 50%;
       z-index: 1;
       inline-size: var(--xh-carousel-indicator-size-current, var(--xh-space-5));
-      block-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2)));
+      block-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-1_5)));
       border-radius: var(--xh-carousel-indicator-radius-current, var(--xh-shape-pill));
       translate: -50% -50%;
     }
@@ -654,8 +669,8 @@
       inset: auto;
       inset-block-start: 50%;
       inset-inline-start: 50%;
-      inline-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2)));
-      block-size: var(--xh-carousel-indicator-size, var(--xh-space-2));
+      inline-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-1_5)));
+      block-size: var(--xh-carousel-indicator-size, var(--xh-space-1_5));
     }
 
     .xh-scope-carousel[data-part='indicator-group'][data-orientation='vertical']
@@ -666,7 +681,7 @@
     .xh-scope-carousel[data-part='root'][data-paused]
       .xh-scope-carousel[data-part='indicator-group'][data-orientation='vertical']
       > .xh-scope-carousel[data-part='indicator'][data-current]::before {
-      inline-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-2)));
+      inline-size: var(--xh-carousel-indicator-thickness, var(--xh-carousel-indicator-size, var(--xh-space-1_5)));
       block-size: var(--xh-carousel-indicator-size-current, var(--xh-space-5));
     }
   }
@@ -698,13 +713,14 @@
 }
 
 @layer xihan.motion {
+  /* 进度条从整条裁掉长到整条露出：只重绘、不重排，裁口取填充条自己的圆角 */
   @keyframes xh-carousel-indicator-progress {
     from {
-      scale: var(--xh-_carousel-progress-from);
+      clip-path: inset(var(--xh-_carousel-progress-cut) round var(--xh-_carousel-progress-radius));
     }
 
     to {
-      scale: var(--xh-_carousel-progress-to);
+      clip-path: inset(0 round var(--xh-_carousel-progress-radius));
     }
   }
 }

package/dist/css/cascader.css

@@ -75,6 +75,7 @@
     --xh-_cascader-h: var(--xh-control-h-md);
     --xh-_cascader-px: var(--xh-control-px-md);
     --xh-_cascader-row-py: var(--xh-list-option-py-md);
+    --xh-_cascader-row-h: var(--xh-list-option-h-md);
     --xh-_cascader-row-px: var(--xh-control-px-md);
     --xh-_cascader-gap: var(--xh-control-gap-md);
     --xh-_cascader-font-size: var(--xh-control-font-md);
@@ -108,6 +109,7 @@
     --xh-_cascader-h: var(--xh-control-h-sm);
     --xh-_cascader-px: var(--xh-control-px-sm);
     --xh-_cascader-row-py: var(--xh-list-option-py-sm);
+    --xh-_cascader-row-h: var(--xh-list-option-h-sm);
     --xh-_cascader-row-px: var(--xh-control-px-sm);
     --xh-_cascader-gap: var(--xh-control-gap-sm);
     --xh-_cascader-font-size: var(--xh-control-font-sm);
@@ -118,13 +120,16 @@
     --xh-_cascader-h: var(--xh-control-h-lg);
     --xh-_cascader-px: var(--xh-control-px-lg);
     --xh-_cascader-row-py: var(--xh-list-option-py-lg);
+    --xh-_cascader-row-h: var(--xh-list-option-h-lg);
     --xh-_cascader-row-px: var(--xh-control-px-lg);
     --xh-_cascader-gap: var(--xh-control-gap-lg);
     --xh-_cascader-font-size: var(--xh-control-font-lg);
   }
 
   .xh-scope-cascader[data-part='label'] {
-    color: var(--xh-cascader-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-cascader-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-cascader-label-gap, var(--xh-space-2)) - var(--xh-cascader-gap, var(--xh-space-1)));
+    color: var(--xh-cascader-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-cascader-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-cascader-label-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
@@ -132,7 +137,7 @@
 
   /* 整个控件禁用会把 data-disabled 一路打到 label / value-text / indicator 上，各处观感保持一致 */
   .xh-scope-cascader[data-part='label'][data-disabled] {
-    color: var(--xh-cascader-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-cascader-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 盒：描边、底色、圆角、控件高度、行内内衬、聚焦环、五态与悬停由 Field Chrome 家族画在这一层，
@@ -153,8 +158,6 @@
     --xh-field-border-hover: var(--xh-cascader-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-cascader-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-cascader-control-border-invalid, var(--xh-_field-variant-border-invalid));
-    --xh-field-ring-focus: var(--xh-ring-focus);
-    --xh-field-ring-invalid: var(--xh-ring-invalid);
     --xh-field-shadow-rest: var(--xh-cascader-control-shadow, none);
     --xh-field-cursor-rest: pointer;
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
@@ -303,7 +306,7 @@
     align-items: stretch;
     /* 面板的下界：搜索视图与两个占位没有列托底，靠这一条不缩成一小块；可用区比它还窄时让位。
        可用宽写在定位层上、沿继承流下来 */
-    min-inline-size: min(var(--xh-cascader-content-min-w, var(--xh-overlay-menu-min-w)), var(--xh-_cascader-available-w));
+    min-inline-size: min(var(--xh-cascader-content-min-w, var(--xh-overlay-cascade-min-w)), var(--xh-_cascader-available-w));
     /* 列多起来时外框宽过可用区就收成可用宽度，溢出的列交给下面那条 overflow-x；
        缺省不封顶，作者要封顶写 --xh-cascader-content-max-w */
     max-inline-size: min(var(--xh-cascader-content-max-w, var(--xh-_cascader-available-w)), var(--xh-_cascader-available-w));
@@ -352,10 +355,10 @@
     flex-direction: column;
     gap: var(--xh-cascader-column-gap, var(--xh-list-option-gap));
     /* 每一列按条目的自然宽度，受菜单的下界托底；长选项撑到条目的上限为止，余下的在条目里截断 */
-    min-inline-size: var(--xh-cascader-column-min-w, var(--xh-overlay-menu-min-w));
+    min-inline-size: var(--xh-cascader-column-min-w, var(--xh-overlay-cascade-min-w));
     block-size: var(--xh-cascader-column-h, var(--xh-viewport-h-sm));
     padding-block: var(--xh-cascader-column-py, var(--xh-space-1));
-    padding-inline: var(--xh-cascader-column-px, var(--xh-space-1));
+    padding-inline: var(--xh-cascader-column-px, 0);
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
@@ -378,7 +381,7 @@
      用逻辑属性，rtl 下自动跑到另一侧。每列后面紧跟着它自己的竖条节点，相邻选择器接不到下一列，
      按「前面有过列」取后续的列 */
   .xh-scope-cascader[data-part='column'] ~ .xh-scope-cascader[data-part='column'] {
-    border-inline-start: var(--xh-stroke-thin) solid var(--xh-cascader-column-divider, var(--xh-material-solid-separator));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-cascader-column-divider, var(--xh-material-solid-border));
   }
 
   .xh-scope-cascader[data-part='column']:not([tabindex='0']):focus-visible {
@@ -407,9 +410,9 @@
     display: block;
     padding-block: var(--xh-cascader-group-label-py, var(--xh-space-1));
     padding-inline: var(--xh-cascader-group-label-px, var(--xh-_cascader-row-px));
-    color: var(--xh-cascader-group-label-fg, var(--xh-fg-muted));
+    color: var(--xh-cascader-group-label-fg, var(--xh-fg-subtle));
     font-size: var(--xh-cascader-group-label-font-size, var(--xh-text-caption-size));
-    font-weight: var(--xh-cascader-group-label-font-weight, var(--xh-font-weight-medium));
+    font-weight: var(--xh-cascader-group-label-font-weight, var(--xh-font-weight-regular));
     line-height: var(--xh-leading-none);
     user-select: none;
   }
@@ -428,10 +431,11 @@
      环只在真正的键盘焦点上接回，见下 */
   .xh-scope-cascader[data-part='item'] {
     --xh-collection-block-padding: var(--xh-cascader-item-py, var(--xh-_cascader-row-py));
+    --xh-collection-row-h: var(--xh-cascader-item-h, var(--xh-_cascader-row-h));
     --xh-collection-inline-padding: var(--xh-cascader-item-px, var(--xh-_cascader-row-px));
     --xh-collection-gap: var(--xh-cascader-item-gap, var(--xh-_cascader-gap));
     --xh-collection-font-size: var(--xh-cascader-item-font-size, var(--xh-_cascader-font-size));
-    --xh-collection-radius: var(--xh-cascader-item-radius, var(--xh-shape-inset));
+    --xh-collection-radius: var(--xh-cascader-item-radius, 0);
     --xh-collection-glyph-size: var(--xh-cascader-icon-size, var(--xh-_collection-glyph-size));
     --xh-collection-fg-rest: var(--xh-cascader-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-cascader-item-fg, var(--xh-material-frosted-fg));
@@ -443,10 +447,10 @@
     --xh-collection-fg-selected-pressed: var(--xh-cascader-item-fg-selected, var(--xh-cascader-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-pressed: var(--xh-cascader-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-font-weight-open-path: var(--xh-cascader-item-active-font-weight, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-highlight: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-hover: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-pressed: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-selected: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-highlight: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-hover: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-pressed: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-medium));
     --xh-collection-bg-hover: var(--xh-cascader-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-keyboard-highlight: var(--xh-cascader-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-open-path: var(--xh-cascader-item-bg-active, var(--xh-bg-subtle));
@@ -549,9 +553,10 @@
     inline-size: var(--xh-cascader-branch-arrow-size, var(--xh-control-indicator-size));
     block-size: var(--xh-cascader-branch-arrow-size, var(--xh-control-indicator-size));
     margin-inline-start: var(--xh-cascader-item-gap, var(--xh-_cascader-gap));
-    background-color: var(--xh-cascader-branch-arrow-fg, var(--xh-fg-subtle));
-    -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+    /* 盒与标记盒同为 16px，字形只画四分之三（12px），比行里的文字轻一档 */
+    background-color: var(--xh-cascader-branch-arrow-fg, var(--xh-fg-muted));
+    -webkit-mask: var(--xh-glyph-mark-chevron-right) center / 75% no-repeat;
+    mask: var(--xh-glyph-mark-chevron-right) center / 75% no-repeat;
   }
 
   .xh-scope-cascader[data-part='item'][data-branch][data-disabled]::after {
@@ -651,7 +656,7 @@
     padding-block: 0;
     padding-inline: var(--xh-cascader-input-px, var(--xh-_cascader-px));
     border: none;
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-cascader-search-divider, var(--xh-material-solid-separator));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-cascader-search-divider, var(--xh-material-solid-border));
     border-start-start-radius: inherit;
     border-start-end-radius: inherit;
     background: none;
@@ -719,10 +724,11 @@
      末端为同一枚皮肤对号预留固定轨 */
   .xh-scope-cascader[data-part='search-item'] {
     --xh-collection-block-padding: var(--xh-cascader-item-py, var(--xh-_cascader-row-py));
+    --xh-collection-row-h: var(--xh-cascader-item-h, var(--xh-_cascader-row-h));
     --xh-collection-inline-padding: var(--xh-cascader-item-px, var(--xh-_cascader-row-px));
     --xh-collection-gap: var(--xh-cascader-item-gap, var(--xh-_cascader-gap));
     --xh-collection-font-size: var(--xh-cascader-item-font-size, var(--xh-_cascader-font-size));
-    --xh-collection-radius: var(--xh-cascader-item-radius, var(--xh-shape-inset));
+    --xh-collection-radius: var(--xh-cascader-item-radius, 0);
     --xh-collection-fg-rest: var(--xh-cascader-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-cascader-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-cascader-item-fg, var(--xh-material-frosted-fg));
@@ -731,10 +737,10 @@
     --xh-collection-fg-selected-hover: var(--xh-cascader-item-fg-selected, var(--xh-cascader-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-selected-pressed: var(--xh-cascader-item-fg-selected, var(--xh-cascader-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-pressed: var(--xh-cascader-item-fg, var(--xh-material-frosted-fg));
-    --xh-collection-font-weight-selected: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-highlight: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-hover: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-pressed: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-selected: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-highlight: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-hover: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-pressed: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-medium));
     --xh-collection-bg-hover: var(--xh-cascader-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-keyboard-highlight: var(--xh-cascader-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-selected-highlight: var(--xh-cascader-item-bg-hover, var(--xh-bg-subtle));
@@ -818,8 +824,10 @@
     flex: 1 1 100%;
     align-items: center;
     justify-content: center;
+    /* 空态与在途占位撑到一列的高度，居中落在面板里，不缩成一条窄条 */
+    min-block-size: var(--xh-cascader-empty-min-h, var(--xh-viewport-h-sm));
     padding: var(--xh-cascader-empty-p, var(--xh-space-3));
-    color: var(--xh-cascader-empty-fg, var(--xh-fg-muted));
+    color: var(--xh-cascader-empty-fg, var(--xh-fg-subtle));
     font-size: var(--xh-cascader-item-font-size, var(--xh-_cascader-font-size));
   }
 
@@ -829,13 +837,17 @@
 
   /* 在途占位：与空态占位同一个位置、同一副观感，两者不同屏 */
   .xh-scope-cascader[data-part='loading'] {
+    /* 加载环取品牌色，文案仍是弱一档的前景 */
+    --xh-_loading-ring-fg: var(--xh-cascader-loading-ring-fg, var(--xh-fg-brand));
+
     display: flex;
     flex: 0 0 100%;
     align-items: center;
     justify-content: center;
     gap: var(--xh-_cascader-gap);
+    min-block-size: var(--xh-cascader-loading-min-h, var(--xh-viewport-h-sm));
     padding: var(--xh-cascader-loading-p, var(--xh-space-3));
-    color: var(--xh-cascader-loading-fg, var(--xh-fg-muted));
+    color: var(--xh-cascader-loading-fg, var(--xh-fg-subtle));
     font-size: var(--xh-cascader-loading-font-size, var(--xh-_cascader-font-size));
   }
 
@@ -892,10 +904,10 @@
     align-items: center;
     gap: var(--xh-cascader-footer-gap, var(--xh-space-2));
     padding-block: var(--xh-cascader-footer-py, var(--xh-space-2));
-    padding-inline: var(--xh-cascader-footer-px, var(--xh-space-2));
-    border-block-start: var(--xh-stroke-thin) solid var(--xh-cascader-footer-border, var(--xh-border-subtle));
+    padding-inline: var(--xh-cascader-footer-px, var(--xh-_cascader-row-px));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-cascader-footer-border, var(--xh-material-solid-border));
     color: var(--xh-cascader-footer-fg, var(--xh-fg-muted));
-    font-size: var(--xh-cascader-footer-font-size, var(--xh-text-secondary-size));
+    font-size: var(--xh-cascader-footer-font-size, var(--xh-_cascader-font-size));
   }
 
   /* 上面给了 display，UA 的 [hidden]{display:none} 已被盖掉，这里补回来 */

package/dist/css/checkbox-group.css

@@ -32,7 +32,7 @@
        没写 data-tone 时退回品牌色 */
     --xh-_checkbox-group-accent: var(--xh-_tone-border-control, var(--xh-bg-brand));
     --xh-_checkbox-group-on-accent: var(--xh-_tone-on, var(--xh-fg-on-brand));
-    /* 方框是字段家族的控制盒（字段静息形态）：透明底 + --xh-border-control 描边 + 无影，不消费海拔与顶光 */
+    /* 方框是控件盒：透明底 + --xh-border-strong 描边（与 Checkbox 同一重量）+ 无影，不消费海拔与顶光 */
     --xh-_checkbox-group-bg: var(--xh-checkbox-group-indicator-bg, transparent);
     /* 条目与全选格是方框的承载面：行自己坐画布走 100 → 200，行面上的方框按淡底容器阶梯再上一档（200 → 300）。
        两支私有槽是这一档的唯一来源——宿主拿它们给 --xh-action-host-bg-* 赋值（桥接槽只写不读），
@@ -125,13 +125,17 @@
     --xh-action-host-bg-pressed: var(--xh-_checkbox-group-host-bg-pressed);
 
     position: relative;
-    /* row 档铺满容器（inline-size: 100%）会把竖排的命中区拉到整行空白处、横排 wrap 也塌：
-       沿用「条目按内容收宽」的既有决定 */
-    inline-size: auto;
     /* ghost 的 1px 透明边位会把方框列相对组标题错开 1px：边归零，几何保持不变 */
     border-width: 0;
   }
 
+  /* 条目与全选格按内容收宽，盖掉 row 档的 inline-size: 100%（竖排时命中区拉到整行空白处，横排时每格独占一行）。
+     从根往下写，特指度高过 row 档，有层与无层两份产物里都生效 */
+  .xh-scope-checkbox-group[data-part='root'] .xh-scope-checkbox-group[data-part='item'],
+  .xh-scope-checkbox-group[data-part='root'] .xh-scope-checkbox-group[data-part='select-all-trigger'] {
+    inline-size: auto;
+  }
+
   /* 只读整组都改不动，但不是禁用：颜色照常，把整行的悬停 / 按下面与"可点"这个暗示一起收回来。
      家族的 :hover / 按压块不排 readonly，只能从槽上收回；排掉禁用项是因为这条选择器权重高过家族的禁用块，
      不排就会把 not-allowed 覆盖回 default */
@@ -156,7 +160,7 @@
     justify-content: center;
     inline-size: var(--xh-checkbox-group-indicator-size, var(--xh-_checkbox-group-box));
     block-size: var(--xh-checkbox-group-indicator-size, var(--xh-_checkbox-group-box));
-    border: var(--xh-stroke-thin) solid var(--xh-checkbox-group-indicator-border, var(--xh-border-control));
+    border: var(--xh-stroke-thin) solid var(--xh-checkbox-group-indicator-border, var(--xh-border-strong));
     border-radius: var(--xh-checkbox-group-indicator-radius, var(--xh-shape-inset));
     background-color: var(--xh-_checkbox-group-bg);
     color: var(--xh-checkbox-group-indicator-fg, var(--xh-_checkbox-group-on-accent));
@@ -301,7 +305,6 @@
     --xh-check-mark-fg: var(--xh-checkbox-group-indicator-fg, var(--xh-_checkbox-group-on-accent));
 
     position: relative;
-    inline-size: auto;
     border-width: 0;
     font-weight: var(--xh-checkbox-group-select-all-trigger-font-weight, var(--xh-font-weight-medium));
   }

package/dist/css/checkbox.css

@@ -28,14 +28,15 @@
     /* 实心底上的勾与横杠，同样没写 data-tone 时退回原来的品牌底前景色 */
     --xh-_checkbox-on-accent: var(--xh-_tone-on, var(--xh-fg-on-brand));
 
-    /* 方框接 Action Control icon 档（定尺方框）：盒型、悬停 / 按下 / 禁用面、0.97 缩放与换底、粗指针热区、
-       焦点环由家族配方给，这里只把使用者槽映射到桥接槽。面按字段静息形态取值：透明底 +
-       --xh-border-control 描边 + 无影，不消费海拔与顶光；悬停只把描边升一档，底不动；按下换到 200 档中性面
+    /* 方框接 Action Control icon 档（定尺方框）：盒型、悬停 / 按下 / 禁用面、按压与换底、粗指针热区、
+       焦点环由家族配方给，这里只把使用者槽映射到桥接槽。面取控件盒的静息形态：透明底 +
+       --xh-border-strong 描边（比字段边重一档，小方框要一眼认得出）+ 无影，不消费海拔与顶光；
+       悬停只把描边升一档，底不动；按下换到 200 档中性面
        （白底承载）；边长随 --xh-control-indicator-* 走，不取家族的 profile 尺寸。
        常态 / 勾中 / 校验失败 / 只读只换下面四支私有槽，桥接槽的映射写一次 */
     --xh-_checkbox-bg: var(--xh-checkbox-bg, transparent);
     --xh-_checkbox-bg-pressed: var(--xh-checkbox-bg-pressed, var(--xh-bg-subtle-hover));
-    --xh-_checkbox-border: var(--xh-checkbox-border, var(--xh-border-control));
+    --xh-_checkbox-border: var(--xh-checkbox-border, var(--xh-border-strong));
     --xh-_checkbox-border-hover: var(--xh-checkbox-border-hover, var(--xh-border-control-hover));
 
     --xh-action-visual-size: var(--xh-_checkbox-box);

package/dist/css/citation.css

@@ -274,7 +274,7 @@
     overflow: hidden;
     color: var(--xh-citation-title-fg, var(--xh-fg-default));
     font-size: var(--xh-citation-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-citation-title-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-citation-title-font-weight, var(--xh-font-weight-medium));
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -355,12 +355,17 @@
     --xh-action-radius: var(--xh-citation-source-radius, var(--xh-shape-control));
     --xh-action-fg-rest: var(--xh-citation-source-fg, var(--xh-fg-default));
 
-    display: grid;
     grid-template-columns: auto minmax(0, 1fr);
     align-items: start;
     text-align: start;
   }
 
+  /* 排成「序号 | 标题 / 来源」两列，盖掉 row 档的 display: flex。选择器点名 row 档，
+     有层与无层两份产物里都压得住它；收起的来源行留给 [hidden] 那条 */
+  .xh-scope-citation[data-part='source-link'][data-xh-action-profile='row']:not([hidden]) {
+    display: grid;
+  }
+
   .xh-scope-citation[data-part='source-link'][data-current] {
     --xh-action-bg-rest: var(--xh-bg-brand-subtle);
     --xh-action-bg-hover: var(--xh-bg-brand-subtle);