@xihan-ui/styles 3.2.0 → 4.0.0

package/dist/css/label.css

@@ -6,8 +6,8 @@
 /*
  * 字段族标签的公共层，按 [data-part='label'] 匹配下面逐个列出的 scope。
  *
- * 收在这里的是逐值相同的四条：行距取 --xh-leading-none，禁用档字色取 --xh-fg-subtle，
- * 必填星号取 --xh-glyph-mark-required + --xh-space-1 + --xh-fg-danger，无效档字色取 --xh-fg-danger。
+ * 收在这里的是逐值相同的四条：行距取 --xh-leading-none，禁用档字色留在 --xh-fg-muted，
+ * 必填星号取 --xh-glyph-mark-required + --xh-space-1 + --xh-fg-danger、排在标签文字之前，无效档字色取 --xh-fg-danger。
  * 字色、字号、字重三条留在各组件皮肤——它们挂着 --xh-<组件>-label-* 覆盖槽，
  * 槽名里带组件名，写不进一条共享规则。
  *
@@ -42,29 +42,45 @@
   }
 
   /*
-   * 禁用档的字色：公共层默认统一 --xh-fg-subtle。这四家没有 --xh-<组件>-label-fg-disabled 覆盖槽，
-   * 取值只有这一处；挂了那个槽的组件在各自皮肤里另写一条，排在本份之后，压过这里。
+   * 禁用档的字色：字段标签禁用不另变色，留在静息的 --xh-fg-muted。再淡一档的 --xh-fg-subtle 与它几乎分不出，
+   * --xh-fg-disabled 只有 2.66:1，读屏与无障碍扫描都把关联禁用控件的标签当正文判对比度；禁用由控件自己的
+   * 禁用面表出。这四家没有 --xh-<组件>-label-fg-disabled 覆盖槽，取值只有这一处；挂了那个槽的组件在各自皮肤里
+   * 另写一条，排在本份之后，压过这里。
    */
   .xh-scope-color-picker[data-part='label'][data-disabled],
   .xh-scope-rating[data-part='label'][data-disabled],
   .xh-scope-signature-pad[data-part='label'][data-disabled],
   .xh-scope-slider[data-part='label'][data-disabled] {
-    color: var(--xh-fg-subtle);
+    color: var(--xh-fg-muted);
   }
 
   /*
-   * 必填星号：跟着标签自己的 data-required 亮，选填不标。字形、间距、颜色是公共层规则，
-   * 自带标签的字段不得各画一套。
+   * 必填星号：跟着标签自己的 data-required 亮，选填不标。字形、字号、间距、颜色是公共层规则，
+   * 自带标签的字段不得各画一套。星号排在标签文字之前（一列标签的星号在同一条起始线上，扫读时先看到），
+   * 取说明字号——它是标记，不与标签文字抢层级。
    *
    * 接入 = connect 在标签部件投影 data-required + 把 scope 加进这张列表；控件本体不画。
    * 有 --xh-<组件>-label-star 覆盖槽的组件在各自皮肤里只另写一条 color 压过这里（field 的
-   * --xh-field-label-star、fieldset 的 --xh-fieldset-legend-star），content 与间距不再重写。
+   * --xh-field-label-star、fieldset 的 --xh-fieldset-legend-star），content、字号与间距不再重写。
+   *
+   * 星号排在文字之前，就进了经 aria-labelledby / for 算出的控件名开头，读屏先念一声「星号」。
+   * 必填已由控件上的 aria-required 表达，星号只给眼睛看：content 带一段空的替代文本，可及树里不念。
+   * 替代文本的写法晚于浏览器地板（Firefox 128 / Safari 17.4 起），而 content 里带 var() 不在解析期校验，
+   * 不认的引擎整条落空、星号跟着没了，同块写两条兜不住：块外留旧写法，新写法收进同一特性的 @supports 里
    */
-  .xh-scope-field[data-part='label'][data-required]::after,
-  .xh-scope-fieldset[data-part='legend'][data-required]::after {
+  .xh-scope-field[data-part='label'][data-required]::before,
+  .xh-scope-fieldset[data-part='legend'][data-required]::before {
     content: var(--xh-glyph-mark-required);
-    margin-inline-start: var(--xh-space-1);
+    margin-inline-end: var(--xh-space-1);
     color: var(--xh-fg-danger);
+    font-size: var(--xh-text-caption-size);
+  }
+
+  @supports (content: '' / '') {
+    .xh-scope-field[data-part='label'][data-required]::before,
+    .xh-scope-fieldset[data-part='legend'][data-required]::before {
+      content: var(--xh-glyph-mark-required) / '';
+    }
   }
 
   /*

package/dist/css/layout.css

@@ -33,7 +33,7 @@
     --xh-_layout-sider-expanded-w: var(--xh-layout-sider-w, var(--xh-sider-w));
     --xh-_layout-sider-w: var(--xh-_layout-sider-expanded-w);
     --xh-_layout-sider-collapsed-w: var(--xh-layout-sider-collapsed-w, var(--xh-sider-collapsed-w));
-    --xh-_layout-header-h: var(--xh-layout-header-h, 3.5rem);
+    --xh-_layout-header-h: var(--xh-layout-header-h, var(--xh-app-header-h));
     /* 侧栏吸附时钉在哪条线上：缺省贴滚动容器上沿，头也吸顶时改成让开头的高度 */
     --xh-_layout-sider-offset: 0px;
   }
@@ -92,11 +92,8 @@
   }
 
   /* 宽度过渡在这里声明一次，展开与折叠两档、以及 props 直接写进内联的宽度，走的都是这一条。
-     占位档的侧栏是淡底承载面：把手摆进来时由它下发 hover 200 → pressed 300；
-     覆盖档换成 elevated 白底，那一档的规则把阶梯写回 100 → 200 */
+     侧栏与头同是白底承载面，坐在灰的页面底上：把手摆进来走白底阶梯 hover 100 → pressed 200 */
   .xh-scope-layout[data-part='sider'] {
-    --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
-    --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
     /* 内衬缺省一档，装了 SideNav 的侧栏在下面归零；覆盖档与安全区取大时读的也是这一支 */
     --xh-_layout-sider-padding: var(--xh-space-3);
 
@@ -104,7 +101,7 @@
     inline-size: var(--xh-_layout-sider-w);
     overflow: hidden;
     padding: var(--xh-layout-sider-padding, var(--xh-_layout-sider-padding));
-    background: var(--xh-layout-sider-bg, var(--xh-bg-subtle));
+    background: var(--xh-layout-sider-bg, var(--xh-bg-surface));
     transition: inline-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
@@ -160,6 +157,20 @@
   }
 
   /* —— 分隔线 —— */
+  /* 头与侧栏都是白底：头的下沿与侧栏挨着内容的那一边缺省画一条内部分隔，两块白面才分得开；
+     作者开了 split 再换成 border-default，并把内容与尾也隔开 */
+  .xh-scope-layout[data-part='header'] {
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-layout-border, var(--xh-border-subtle));
+  }
+
+  .xh-scope-layout[data-part='sider'][data-placement='start'] {
+    border-inline-end: var(--xh-stroke-thin) solid var(--xh-layout-border, var(--xh-border-subtle));
+  }
+
+  .xh-scope-layout[data-part='sider'][data-placement='end'] {
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-layout-border, var(--xh-border-subtle));
+  }
+
   /* 后代选择器带上 data-scope：骨架里装着整页内容，光凭 data-part 会连里面别的组件同名段一起画上线 */
   .xh-scope-layout[data-part='root'][data-split] .xh-scope-layout[data-part='header'] {
     border-block-end: var(--xh-stroke-thin) solid var(--xh-layout-border, var(--xh-border-default));
@@ -251,10 +262,6 @@
        减弱动效下归零。写成槽位而不是写死物理方向：贴边用的是逻辑 inset，RTL 下行首落在物理右边，
        位移若写死物理方向就会出现「贴在右边、却从左边滑进来」 */
     --xh-_layout-sheet-shift: calc(-1 * var(--xh-motion-travel));
-    /* 这一档的底是 elevated 白底：交互阶梯按承载面走，把上面占位档下发的 200 → 300 写回
-       白底的 hover 100 → pressed 200 */
-    --xh-action-host-bg-hover: var(--xh-bg-subtle);
-    --xh-action-host-bg-pressed: var(--xh-bg-subtle-hover);
 
     position: fixed;
     z-index: var(--xh-layout-sider-layer, var(--xh-layer-drawer));

package/dist/css/list.css

@@ -16,9 +16,9 @@
        换档不必给每个部件各写一条选择器 */
     --xh-_list-item-py: var(--xh-list-item-py-md);
     --xh-_list-item-px: var(--xh-list-item-px-md);
-    --xh-_list-item-gap: var(--xh-space-3);
+    --xh-_list-item-gap: var(--xh-space-4);
     --xh-_list-title-size: var(--xh-control-font-md);
-    --xh-_list-description-size: var(--xh-control-caption-md);
+    --xh-_list-description-size: var(--xh-control-font-md);
     /* 条目悬停换到的面：坐在白底上是 100，淡底档的根把它抬到 200（按承载面的阶梯） */
     --xh-_list-item-bg-hover: var(--xh-bg-subtle);
 
@@ -29,6 +29,8 @@
     padding: 0;
     list-style: none;
     color: var(--xh-list-fg, var(--xh-fg-default));
+    font-size: var(--xh-text-body-size);
+    line-height: var(--xh-text-body-leading);
   }
 
   /* 上面声明了 display，会盖掉 UA 的 [hidden] 规则，收起态要在这里接回来 */
@@ -40,17 +42,17 @@
   .xh-scope-list[data-part='root'][data-size='sm'] {
     --xh-_list-item-py: var(--xh-list-item-py-sm);
     --xh-_list-item-px: var(--xh-list-item-px-sm);
-    --xh-_list-item-gap: var(--xh-space-2);
+    --xh-_list-item-gap: var(--xh-space-3);
     --xh-_list-title-size: var(--xh-control-font-sm);
-    --xh-_list-description-size: var(--xh-control-caption-sm);
+    --xh-_list-description-size: var(--xh-control-font-sm);
   }
 
   .xh-scope-list[data-part='root'][data-size='lg'] {
     --xh-_list-item-py: var(--xh-list-item-py-lg);
     --xh-_list-item-px: var(--xh-list-item-px-lg);
-    --xh-_list-item-gap: var(--xh-space-4);
+    --xh-_list-item-gap: var(--xh-space-5);
     --xh-_list-title-size: var(--xh-control-font-lg);
-    --xh-_list-description-size: var(--xh-control-caption-lg);
+    --xh-_list-description-size: var(--xh-control-font-lg);
   }
 
   /* —— 形态：ghost 即基础规则，不画壳 —— */
@@ -87,7 +89,7 @@
   .xh-scope-list[data-part='root'][data-split]
     > .xh-scope-list[data-part='item']
     + .xh-scope-list[data-part='item'] {
-    border-block-start: var(--xh-stroke-thin) solid var(--xh-list-divider, var(--xh-border-subtle));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-list-divider, var(--xh-border-default));
   }
 
   .xh-scope-list[data-part='root'][data-hoverable] > .xh-scope-list[data-part='item'] {
@@ -114,7 +116,9 @@
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
-    gap: var(--xh-list-content-gap, var(--xh-space-1));
+    gap: var(--xh-list-content-gap, var(--xh-space-0_5));
+    /* 标题与说明两行再上下各让出 4px，两行条目与单行条目的高度差拉开，扫读时一条一块 */
+    padding-block: var(--xh-list-item-content-py, var(--xh-space-1));
     /* flex 项默认不肯收到内容以下，这行让长文本能被压窄 */
     min-inline-size: 0;
   }
@@ -123,7 +127,7 @@
     color: var(--xh-list-title-fg, var(--xh-fg-default));
     font-size: var(--xh-list-title-font-size, var(--xh-_list-title-size));
     font-weight: var(--xh-list-title-font-weight, var(--xh-font-weight-medium));
-    line-height: var(--xh-leading-tight);
+    line-height: var(--xh-leading-normal);
   }
 
   .xh-scope-list[data-part='item-description'] {

package/dist/css/listbox.css

@@ -239,7 +239,7 @@
   /* 取下一页的按钮：铺满一行摆在列表尾——铺满一行的独立动作条目，接 Action Control 的 row 档、
      ghost 形态：宽度由容器给、高度随内容、按下只换面不缩放；盒几何、悬停 / 按下 / 禁用面、
      焦点环与粗指针热区全由家族给，白底承载 hover 100 → pressed 200。
-     这里只把使用者槽映射到桥接槽并把文案居中：它是一行里唯一的东西，靠起始缘会像一条没对齐的条目 */
+     这里只把使用者槽映射到桥接槽，文案居中写在下一条 */
   .xh-scope-listbox[data-part='load-more-trigger'] {
     --xh-action-gap: var(--xh-listbox-load-more-trigger-gap, var(--xh-_listbox-gap));
     --xh-action-padding-block: var(--xh-listbox-load-more-trigger-py, var(--xh-_listbox-item-py));
@@ -251,12 +251,17 @@
     --xh-action-fg-pressed: var(--xh-listbox-load-more-trigger-fg, var(--xh-_tone-fg, var(--xh-fg-brand-strong)));
     --xh-action-font-size: var(--xh-listbox-load-more-trigger-font-size, var(--xh-_listbox-font-size));
 
-    justify-content: center;
-    text-align: center;
     /* row 档允许换行、高度随内容，折行的文案走正文行高 */
     line-height: var(--xh-leading-normal);
   }
 
+  /* 文案居中（单行整段居中，折行逐行居中），盖掉 row 档的靠起始缘排布：它是一行里唯一的东西，
+     靠起始缘会像一条没对齐的条目。选择器点名 row 档，有层与无层两份产物里都压得住它 */
+  .xh-scope-listbox[data-part='load-more-trigger'][data-xh-action-profile='row'] {
+    justify-content: center;
+    text-align: center;
+  }
+
   .xh-scope-listbox[data-part='load-more-trigger'][hidden] {
     display: none;
   }
@@ -282,10 +287,10 @@
     --xh-collection-fg-selected-hover: var(--xh-listbox-item-fg-selected, var(--xh-listbox-item-fg, var(--xh-fg-default)));
     --xh-collection-fg-selected-highlight: var(--xh-listbox-item-fg-selected, var(--xh-listbox-item-fg, var(--xh-fg-default)));
     --xh-collection-fg-selected-pressed: var(--xh-listbox-item-fg-selected, var(--xh-listbox-item-fg, var(--xh-fg-default)));
-    --xh-collection-font-weight-selected: var(--xh-listbox-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-hover: var(--xh-listbox-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-highlight: var(--xh-listbox-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-pressed: var(--xh-listbox-item-font-weight-selected, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-selected: var(--xh-listbox-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-hover: var(--xh-listbox-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-highlight: var(--xh-listbox-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-pressed: var(--xh-listbox-item-font-weight-selected, var(--xh-font-weight-medium));
     --xh-collection-bg-hover: var(--xh-listbox-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-keyboard-highlight: var(--xh-listbox-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-pressed: var(--xh-listbox-item-bg-pressed, var(--xh-bg-subtle-hover));

package/dist/css/loading-bar.css

@@ -68,6 +68,9 @@
   .xh-scope-loading-bar[data-part='range'] {
     inline-size: 100%;
     block-size: 100%;
+    /* 露出的前端（行尾）是一维对象的圆头；行首一端由轨道与视口边裁掉，保持方头贴边 */
+    border-start-end-radius: var(--xh-loading-bar-range-radius, var(--xh-shape-pill));
+    border-end-end-radius: var(--xh-loading-bar-range-radius, var(--xh-shape-pill));
     background: var(--xh-loading-bar-range, var(--xh-_tone-soft, var(--xh-bg-brand)));
     translate: calc((var(--xh-_loading-bar-value, 0) - 1) * 100%) 0;
     transition: translate var(--xh-loading-bar-speed, var(--xh-motion-duration-move)) var(--xh-motion-ease-continuous);

package/dist/css/mention.css

@@ -75,6 +75,7 @@
     --xh-_mention-h: var(--xh-control-h-md);
     --xh-_mention-px: var(--xh-control-px-md);
     --xh-_mention-item-py: var(--xh-list-option-py-md);
+    --xh-_mention-item-h: var(--xh-list-option-h-md);
     --xh-_mention-item-px: var(--xh-control-px-md);
     --xh-_mention-gap: var(--xh-control-gap-md);
     --xh-_mention-font-size: var(--xh-control-font-md);
@@ -98,8 +99,8 @@
   /* 标题：与输入框上下排，行距不留额外空白 */
   .xh-scope-mention[data-part='label'] {
     display: block;
-    margin-block-end: var(--xh-mention-label-gap, var(--xh-space-1));
-    color: var(--xh-mention-label-fg, var(--xh-fg-default));
+    margin-block-end: var(--xh-mention-label-gap, var(--xh-space-2));
+    color: var(--xh-mention-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-mention-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-mention-label-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
@@ -110,7 +111,7 @@
   }
 
   .xh-scope-mention[data-part='label'][data-disabled] {
-    color: var(--xh-mention-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-mention-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* —— 尺寸 —— */
@@ -119,6 +120,7 @@
     --xh-_mention-h: var(--xh-control-h-sm);
     --xh-_mention-px: var(--xh-control-px-sm);
     --xh-_mention-item-py: var(--xh-list-option-py-sm);
+    --xh-_mention-item-h: var(--xh-list-option-h-sm);
     --xh-_mention-item-px: var(--xh-control-px-sm);
     --xh-_mention-gap: var(--xh-control-gap-sm);
     --xh-_mention-font-size: var(--xh-control-font-sm);
@@ -128,6 +130,7 @@
     --xh-_mention-h: var(--xh-control-h-lg);
     --xh-_mention-px: var(--xh-control-px-lg);
     --xh-_mention-item-py: var(--xh-list-option-py-lg);
+    --xh-_mention-item-h: var(--xh-list-option-h-lg);
     --xh-_mention-item-px: var(--xh-control-px-lg);
     --xh-_mention-gap: var(--xh-control-gap-lg);
     --xh-_mention-font-size: var(--xh-control-font-lg);
@@ -152,8 +155,6 @@
     --xh-field-border-hover: var(--xh-mention-input-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-mention-input-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-mention-input-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-mention-input-shadow, none);
 
     inline-size: 100%;
@@ -170,7 +171,7 @@
   /* 多行形态：正文可以换行，框随 rows 定起始高度、不钉单行控件高（家族的多行布局给）；
      框自己就是 chrome，家族多行布局把上下内衬归零，这里按文本字段多行档同一支令牌补回，只许纵向拉伸 */
   .xh-scope-mention[data-part='input'][data-xh-field-layout='textarea'] {
-    padding-block: var(--xh-mention-textarea-py, var(--xh-space-2));
+    padding-block: var(--xh-mention-textarea-py, var(--xh-space-1));
     resize: vertical;
   }
 
@@ -218,7 +219,7 @@
     min-block-size: var(--xh-mention-content-min-h, var(--xh-_mention-h));
     max-block-size: min(var(--xh-mention-content-max-h, var(--xh-overlay-max-h)), var(--xh-_mention-available-h));
     padding-block: var(--xh-mention-content-py, var(--xh-space-1));
-    padding-inline: var(--xh-mention-content-px, var(--xh-space-1));
+    padding-inline: var(--xh-mention-content-px, 0);
     border-radius: var(--xh-mention-content-radius, var(--xh-shape-overlay));
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
@@ -253,10 +254,11 @@
      overlay 语境的选中面透明，高亮与悬停同走 --xh-bg-subtle，正文保持常规字重 */
   .xh-scope-mention[data-part='item'] {
     --xh-collection-block-padding: var(--xh-mention-item-py, var(--xh-_mention-item-py));
+    --xh-collection-row-h: var(--xh-mention-item-h, var(--xh-_mention-item-h));
     --xh-collection-inline-padding: var(--xh-mention-item-px, var(--xh-_mention-item-px));
     --xh-collection-gap: var(--xh-mention-item-gap, var(--xh-_mention-gap));
     --xh-collection-font-size: var(--xh-mention-item-font-size, var(--xh-_mention-font-size));
-    --xh-collection-radius: var(--xh-mention-item-radius, var(--xh-shape-inset));
+    --xh-collection-radius: var(--xh-mention-item-radius, 0);
     --xh-collection-fg-rest: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));

package/dist/css/menu.css

@@ -87,6 +87,7 @@
     /* 尺寸档只换这四个私有槽，条目从 content 继承它们，换档不必给每个部件各写一条选择器。
        菜单没有 root 部件（浮层树的最外层就是 content），三轴属性都落在这里 */
     --xh-_menu-item-py: var(--xh-list-option-py-md);
+    --xh-_menu-item-h: var(--xh-list-option-h-md);
     --xh-_menu-item-px: var(--xh-control-px-md);
     --xh-_menu-item-gap: var(--xh-control-gap-md);
     --xh-_menu-font-size: var(--xh-control-font-md);
@@ -102,7 +103,7 @@
        列表族的 16rem 对命令菜单偏矮，这里另给一档 */
     max-block-size: min(var(--xh-menu-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_menu-available-h));
     padding-block: var(--xh-menu-content-py, var(--xh-surface-pad-xs));
-    padding-inline: var(--xh-menu-content-px, var(--xh-surface-pad-xs));
+    padding-inline: var(--xh-menu-content-px, 0);
     border-radius: var(--xh-menu-content-radius, var(--xh-shape-overlay));
     /* 条目超过上限就在菜单内部滚。条目的焦点环是内收的，滚动容器裁在内边距缘上，环切不着。
        浮层滚动面：到底后不把滚动链穿透给页面 */
@@ -140,6 +141,7 @@
   .xh-scope-menu[data-part='content'][data-size='sm'] {
     --xh-icon-size: var(--xh-menu-icon-size, var(--xh-glyph-size-sm));
     --xh-_menu-item-py: var(--xh-list-option-py-sm);
+    --xh-_menu-item-h: var(--xh-list-option-h-sm);
     --xh-_menu-item-px: var(--xh-control-px-sm);
     --xh-_menu-item-gap: var(--xh-control-gap-sm);
     --xh-_menu-font-size: var(--xh-control-font-sm);
@@ -148,6 +150,7 @@
   .xh-scope-menu[data-part='content'][data-size='lg'] {
     --xh-icon-size: var(--xh-menu-icon-size, var(--xh-glyph-size-lg));
     --xh-_menu-item-py: var(--xh-list-option-py-lg);
+    --xh-_menu-item-h: var(--xh-list-option-h-lg);
     --xh-_menu-item-px: var(--xh-control-px-lg);
     --xh-_menu-item-gap: var(--xh-control-gap-lg);
     --xh-_menu-font-size: var(--xh-control-font-lg);
@@ -159,10 +162,11 @@
      子菜单箭头是行尾的伪元素；间距统一由行的 gap 给，家族按槽下发的外边距归零 */
   .xh-scope-menu[data-part='item'] {
     --xh-collection-block-padding: var(--xh-menu-item-py, var(--xh-_menu-item-py));
+    --xh-collection-row-h: var(--xh-menu-item-h, var(--xh-_menu-item-h));
     --xh-collection-inline-padding: var(--xh-menu-item-px, var(--xh-_menu-item-px));
     --xh-collection-gap: 0;
     --xh-collection-font-size: var(--xh-menu-item-font-size, var(--xh-_menu-font-size));
-    --xh-collection-radius: var(--xh-menu-item-radius, var(--xh-shape-inset));
+    --xh-collection-radius: var(--xh-menu-item-radius, 0);
     --xh-collection-fg-rest: var(--xh-menu-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-menu-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-menu-item-fg, var(--xh-material-frosted-fg));
@@ -263,7 +267,7 @@
     margin-inline-start: auto;
     inline-size: var(--xh-menu-submenu-indicator-size, var(--xh-control-indicator-size));
     block-size: var(--xh-menu-submenu-indicator-size, var(--xh-control-indicator-size));
-    background-color: var(--xh-menu-submenu-indicator-fg, var(--xh-material-frosted-fg-muted));
+    background-color: var(--xh-menu-submenu-indicator-fg, currentColor);
     -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
     mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
   }
@@ -284,15 +288,16 @@
     display: none;
   }
 
-  /* 分组标题不是条目、进不了导航，画成小号次要文字，
+  /* 分组标题不是条目、进不了导航，画成小号常规字重的次要文字，上方让出 8px 与上一组分开；
      内缩与条目对齐（同一个 padding-inline），标题与条目文字才在一条竖线上 */
   .xh-scope-menu[data-part='group-label'] {
     display: block;
+    margin-block-start: var(--xh-menu-group-label-mt, var(--xh-space-2));
     padding-block: var(--xh-menu-group-label-py, var(--xh-space-1));
     padding-inline: var(--xh-menu-group-label-px, var(--xh-_menu-item-px));
     color: var(--xh-menu-group-label-fg, var(--xh-material-frosted-fg-muted));
     font-size: var(--xh-menu-group-label-font-size, var(--xh-text-caption-size));
-    font-weight: var(--xh-menu-group-label-font-weight, var(--xh-font-weight-medium));
+    font-weight: var(--xh-menu-group-label-font-weight, var(--xh-font-weight-regular));
     line-height: var(--xh-leading-none);
     user-select: none;
   }

package/dist/css/menubar.css

@@ -139,9 +139,10 @@
        自己身上把 --xh-icon-size 改接到盒的尺，子菜单箭头走 --xh-menubar-submenu-indicator-size */
     --xh-icon-size: var(--xh-menubar-icon-size, var(--xh-glyph-size-md));
 
-    --xh-_menubar-trigger-py: var(--xh-space-1);
+    --xh-_menubar-trigger-py: var(--xh-space-2);
     --xh-_menubar-trigger-px: var(--xh-control-px-md);
     --xh-_menubar-item-py: var(--xh-list-option-py-md);
+    --xh-_menubar-item-h: var(--xh-list-option-h-md);
     --xh-_menubar-item-px: var(--xh-control-px-md);
     --xh-_menubar-item-gap: var(--xh-control-gap-md);
     --xh-_menubar-font-size: var(--xh-control-font-md);
@@ -149,9 +150,10 @@
 
   .xh-scope-menubar[data-size='sm']:is([data-part='root'], [data-part='positioner']) {
     --xh-icon-size: var(--xh-menubar-icon-size, var(--xh-glyph-size-sm));
-    --xh-_menubar-trigger-py: var(--xh-space-0_5);
+    --xh-_menubar-trigger-py: var(--xh-space-1_5);
     --xh-_menubar-trigger-px: var(--xh-control-px-sm);
     --xh-_menubar-item-py: var(--xh-list-option-py-sm);
+    --xh-_menubar-item-h: var(--xh-list-option-h-sm);
     --xh-_menubar-item-px: var(--xh-control-px-sm);
     --xh-_menubar-item-gap: var(--xh-control-gap-sm);
     --xh-_menubar-font-size: var(--xh-control-font-sm);
@@ -159,9 +161,10 @@
 
   .xh-scope-menubar[data-size='lg']:is([data-part='root'], [data-part='positioner']) {
     --xh-icon-size: var(--xh-menubar-icon-size, var(--xh-glyph-size-lg));
-    --xh-_menubar-trigger-py: var(--xh-space-2);
+    --xh-_menubar-trigger-py: var(--xh-space-2_5);
     --xh-_menubar-trigger-px: var(--xh-control-px-lg);
     --xh-_menubar-item-py: var(--xh-list-option-py-lg);
+    --xh-_menubar-item-h: var(--xh-list-option-h-lg);
     --xh-_menubar-item-px: var(--xh-control-px-lg);
     --xh-_menubar-item-gap: var(--xh-control-gap-lg);
     --xh-_menubar-font-size: var(--xh-control-font-lg);
@@ -188,7 +191,7 @@
        列表族的 16rem 对命令菜单偏矮，这里另给一档 */
     max-block-size: min(var(--xh-menubar-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_menubar-available-h));
     padding-block: var(--xh-menubar-content-py, var(--xh-surface-pad-xs));
-    padding-inline: var(--xh-menubar-content-px, var(--xh-surface-pad-xs));
+    padding-inline: var(--xh-menubar-content-px, 0);
     border-radius: var(--xh-menubar-content-radius, var(--xh-shape-overlay));
     /* 条目超过上限就在菜单内部滚。条目的焦点环是内收的，滚动容器裁在内边距缘上，环切不着。
        浮层滚动面：到底后不把滚动链穿透给页面 */
@@ -235,15 +238,16 @@
     display: none;
   }
 
-  /* 分组标题不是条目、进不了导航，画成小号次要文字，
+  /* 分组标题不是条目、进不了导航，画成小号常规字重的次要文字，上方让出 8px 与上一组分开；
      内缩与条目对齐（同一个 padding-inline），标题与条目文字才在一条竖线上 */
   .xh-scope-menubar[data-part='group-label'] {
     display: block;
+    margin-block-start: var(--xh-menubar-group-label-mt, var(--xh-space-2));
     padding-block: var(--xh-menubar-group-label-py, var(--xh-space-1));
     padding-inline: var(--xh-menubar-group-label-px, var(--xh-_menubar-item-px));
     color: var(--xh-menubar-group-label-fg, var(--xh-material-frosted-fg-muted));
     font-size: var(--xh-menubar-group-label-font-size, var(--xh-text-caption-size));
-    font-weight: var(--xh-menubar-group-label-font-weight, var(--xh-font-weight-medium));
+    font-weight: var(--xh-menubar-group-label-font-weight, var(--xh-font-weight-regular));
     line-height: var(--xh-leading-none);
     user-select: none;
   }
@@ -258,10 +262,11 @@
      子菜单箭头是行尾的伪元素；间距统一由行的 gap 给，家族按槽下发的外边距归零 */
   .xh-scope-menubar[data-part='item'] {
     --xh-collection-block-padding: var(--xh-menubar-item-py, var(--xh-_menubar-item-py));
+    --xh-collection-row-h: var(--xh-menubar-item-h, var(--xh-_menubar-item-h));
     --xh-collection-inline-padding: var(--xh-menubar-item-px, var(--xh-_menubar-item-px));
     --xh-collection-gap: 0;
     --xh-collection-font-size: var(--xh-menubar-item-font-size, var(--xh-_menubar-font-size));
-    --xh-collection-radius: var(--xh-menubar-item-radius, var(--xh-shape-inset));
+    --xh-collection-radius: var(--xh-menubar-item-radius, 0);
     --xh-collection-fg-rest: var(--xh-menubar-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-menubar-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-menubar-item-fg, var(--xh-material-frosted-fg));
@@ -305,7 +310,7 @@
     margin-inline-start: auto;
     inline-size: var(--xh-menubar-submenu-indicator-size, var(--xh-control-indicator-size));
     block-size: var(--xh-menubar-submenu-indicator-size, var(--xh-control-indicator-size));
-    background-color: var(--xh-menubar-submenu-indicator-fg, var(--xh-material-frosted-fg-muted));
+    background-color: var(--xh-menubar-submenu-indicator-fg, currentColor);
     -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
     mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
   }

package/dist/css/navigation-menu.css

@@ -38,7 +38,7 @@
     --xh-_navigation-menu-highlight-bg: var(--xh-bg-subtle);
 
     /* 语气只落在指示条上；没写 data-tone 时 --xh-_tone 没被声明，退回品牌色。
-       当前链接的字色不随语气：导航当前页恒取 --xh-fg-brand-strong。聚焦环恒是 --xh-ring-focus */
+       当前链接的字色不随语气：导航当前页恒取 --xh-fg-brand。聚焦环恒是 --xh-ring-focus */
     --xh-_navigation-menu-accent: var(--xh-_tone, var(--xh-fg-brand));
 
     position: relative;
@@ -224,7 +224,7 @@
     --xh-collection-bg-hover: var(--xh-navigation-menu-link-bg-hover, var(--xh-_navigation-menu-highlight-bg));
     --xh-collection-bg-keyboard-highlight: var(--xh-navigation-menu-link-bg-hover, var(--xh-_navigation-menu-highlight-bg));
     --xh-collection-bg-pressed: var(--xh-navigation-menu-link-bg-pressed, var(--xh-bg-subtle-hover));
-    --xh-collection-fg-current: var(--xh-navigation-menu-link-fg-current, var(--xh-fg-brand-strong));
+    --xh-collection-fg-current: var(--xh-navigation-menu-link-fg-current, var(--xh-fg-brand));
     --xh-collection-font-weight-current: var(--xh-navigation-menu-link-font-weight-current, var(--xh-font-weight-medium));
 
     position: relative;