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

package/css/menubar.css

@@ -1,27 +1,22 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='menubar'] {
+    --xh-menubar-skin: 1;
+  }
+
   /* 一排 trigger。主轴跟着 data-orientation 走：菜单栏本身可以横排也可以竖排 */
   [data-scope='menubar'][data-part='root'] {
-    /* 尺寸档只换这五个私有槽，trigger 与菜单里的条目都从 root 继承它们，
-       换档不必给每个部件各写一条选择器。菜单浮层在 positioner 里、也是 root 的后代，一并继承 */
-    --xh-_menubar-trigger-py: var(--xh-space-1);
-    --xh-_menubar-trigger-px: var(--xh-control-px-sm);
-    --xh-_menubar-item-py: var(--xh-space-1_5);
-    --xh-_menubar-item-px: var(--xh-control-px-md);
-    --xh-_menubar-font-size: var(--xh-text-body-size);
-
-    /* 展开着的那张菜单的 trigger 走品牌淡底强档，随语气换色相；没写 data-tone 时退回品牌淡底。
-       悬停与键盘焦点恒中性灰轻档、不接语气槽——两档同色相的话哪张开着就认不出来了。
-       聚焦环不在其列，它恒是 --xh-ring-focus */
-    --xh-_menubar-active-bg: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-menubar-icon-size, var(--xh-glyph-size-text));
 
     display: flex;
     align-items: center;
-    gap: var(--xh-menubar-gap, var(--xh-space-1));
-    padding-block: var(--xh-menubar-py, var(--xh-space-1));
-    padding-inline: var(--xh-menubar-px, var(--xh-space-1));
-    border-radius: var(--xh-menubar-radius, var(--xh-shape-control));
-    background: var(--xh-menubar-bg, transparent);
-    color: var(--xh-menubar-fg, var(--xh-fg-default));
+    gap: var(--xh-menubar-root-gap, var(--xh-space-1));
+    padding-block: var(--xh-menubar-root-py, var(--xh-space-1));
+    padding-inline: var(--xh-menubar-root-px, var(--xh-space-1));
+    border-radius: var(--xh-menubar-root-radius, var(--xh-shape-control));
+    background: var(--xh-menubar-root-bg, transparent);
+    color: var(--xh-menubar-root-fg, var(--xh-fg-default));
   }
 
   [data-scope='menubar'][data-part='root'][hidden] {
@@ -33,25 +28,6 @@
     align-items: stretch;
   }
 
-  /* —— 尺寸 —— */
-  /* 缺省档写在上面的基础规则里。trigger 的行内内缩缺省落在控件尺 sm 档、再往下取空间尺；
-     条目纵向走 space 档、行内内缩走 control-px 档（随密度轴），换档各挪一级 */
-  [data-scope='menubar'][data-part='root'][data-size='sm'] {
-    --xh-_menubar-trigger-py: var(--xh-space-0_5);
-    --xh-_menubar-trigger-px: var(--xh-space-1_5);
-    --xh-_menubar-item-py: var(--xh-space-1);
-    --xh-_menubar-item-px: var(--xh-control-px-sm);
-    --xh-_menubar-font-size: var(--xh-font-size-sm);
-  }
-
-  [data-scope='menubar'][data-part='root'][data-size='lg'] {
-    --xh-_menubar-trigger-py: var(--xh-space-2);
-    --xh-_menubar-trigger-px: var(--xh-control-px-md);
-    --xh-_menubar-item-py: var(--xh-space-2);
-    --xh-_menubar-item-px: var(--xh-control-px-lg);
-    --xh-_menubar-font-size: var(--xh-font-size-lg);
-  }
-
   /* root 只是 roving tabindex 的兜底落点，焦点转投给 trigger 之后就不再停留，不画环 */
   [data-scope='menubar'][data-part='root']:focus-visible {
     outline: none;
@@ -112,8 +88,12 @@
 
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   [data-scope='menubar'][data-part='positioner'] {
+    /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，content 继承它限高；
+       引擎没算（尚未落位 / 无引擎）时不额外限高 */
+    --xh-_menubar-available-h: 100vh;
+
     position: fixed;
-    z-index: var(--xh-layer-popover);
+    z-index: var(--xh-menubar-layer, var(--xh-layer-popover));
     /* 空壳不吃指针，交互只发生在 content 上 */
     pointer-events: none;
   }
@@ -123,26 +103,71 @@
     visibility: hidden;
   }
 
+  /* —— 尺寸 —— */
+  /* 尺寸档只换这六个私有槽，换档不必给每个部件各写一条选择器。
+     root 与 positioner 各起一头：trigger 从 root 继承，菜单里的条目从 positioner 继承——
+     浮层搬去了 portal 落点，不再是 root 的后代。
+     缺省档写在第一条：trigger 与条目的行内内缩都走 control-px 档（随密度轴）、纵向走 space 档，换档各挪一级 */
+  [data-scope='menubar']:is([data-part='root'], [data-part='positioner']) {
+    --xh-_menubar-trigger-py: var(--xh-space-1);
+    --xh-_menubar-trigger-px: var(--xh-control-px-md);
+    --xh-_menubar-item-py: var(--xh-space-1_5);
+    --xh-_menubar-item-px: var(--xh-control-px-md);
+    --xh-_menubar-item-gap: var(--xh-control-gap-md);
+    --xh-_menubar-font-size: var(--xh-text-body-size);
+
+    /* 展开着的那张菜单的 trigger 走品牌淡底强档，随语气换色相；没写 data-tone 时退回品牌淡底。
+       悬停与键盘焦点恒中性灰轻档、不接语气槽——两档同色相的话哪张开着就认不出来了。
+       聚焦环不在其列，它恒是 --xh-ring-focus */
+    --xh-_menubar-active-bg: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+
+    /* 打开子菜单的触发条目走品牌淡底强档，随语气换色相；没写 data-tone 时退回品牌淡底 */
+    --xh-_menubar-item-active-bg: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+  }
+
+  [data-scope='menubar'][data-size='sm']:is([data-part='root'], [data-part='positioner']) {
+    --xh-_menubar-trigger-py: var(--xh-space-0_5);
+    --xh-_menubar-trigger-px: var(--xh-control-px-sm);
+    --xh-_menubar-item-py: var(--xh-space-1);
+    --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);
+  }
+
+  [data-scope='menubar'][data-size='lg']:is([data-part='root'], [data-part='positioner']) {
+    --xh-_menubar-trigger-py: var(--xh-space-2);
+    --xh-_menubar-trigger-px: var(--xh-control-px-lg);
+    --xh-_menubar-item-py: var(--xh-space-2);
+    --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);
+  }
+
   [data-scope='menubar'][data-part='content'] {
     display: flex;
     flex-direction: column;
-    min-inline-size: var(--xh-menubar-menu-min-w, var(--xh-overlay-menu-min-w));
-    max-inline-size: var(--xh-menubar-menu-max-w, 20rem);
-    padding-block: var(--xh-menubar-menu-py, var(--xh-space-1));
-    padding-inline: var(--xh-menubar-menu-px, var(--xh-space-1));
-    border: var(--xh-stroke-thin) solid var(--xh-menubar-menu-border, var(--xh-border-default));
-    border-radius: var(--xh-menubar-menu-radius, var(--xh-shape-surface));
-    background: var(--xh-menubar-menu-bg, var(--xh-bg-surface));
-    color: var(--xh-menubar-menu-fg, var(--xh-fg-default));
-    box-shadow: var(--xh-menubar-menu-shadow, var(--xh-elevation-2));
+    min-inline-size: var(--xh-menubar-min-w, var(--xh-overlay-menu-min-w));
+    max-inline-size: var(--xh-menubar-max-w, var(--xh-overlay-max-w));
+    /* 两道上限取更小的那道：自己的高度上限，以及落定那一侧真正剩下的空间。
+       列表族的 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-py, var(--xh-space-1));
+    padding-inline: var(--xh-menubar-px, var(--xh-space-1));
+    border: var(--xh-stroke-thin) solid var(--xh-menubar-border, var(--xh-border-default));
+    border-radius: var(--xh-menubar-radius, var(--xh-shape-surface));
+    background: var(--xh-menubar-bg, var(--xh-bg-surface));
+    color: var(--xh-menubar-fg, var(--xh-fg-default));
+    box-shadow: var(--xh-menubar-shadow, var(--xh-elevation-floating));
+    /* 条目超过上限就在菜单内部滚。条目的焦点环是内收的，滚动容器裁在内边距缘上，环切不着 */
+    overflow-y: auto;
     pointer-events: auto;
   }
 
   /* display 会盖掉 hidden 属性的 UA 规则，收起态显式让位。
      连接层给 content 发 hidden，这一条漏了整张菜单就永远收不起来 */
-  [data-scope='menubar'][data-part='content'][hidden] {
-    display: none;
-  }
+  /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致：
+     收起态连接层会给 content 打 hidden，而上面那条 display 正是要盖掉 UA 的
+     [hidden]{display:none}——退场动画得先能播。真正的收起由宿主在退场结束后落成内联 display。 */
 
   /* 容器只是"没有条目锚点时"的 Tab 兜底落点，落焦不画环：高亮永远长在条目上 */
   [data-scope='menubar'][data-part='content']:focus-visible {
@@ -152,14 +177,19 @@
   /* 展开时轻微涨开。只在切换到别张菜单时不重播——那由 data-state 的翻转天然保证：
      一张关一张开，动画各跑各的 */
   [data-scope='menubar'][data-part='content'][data-state='open'] {
-    animation: xh-menubar-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
-  /* 关掉动效的用户不该被涨开动画晃一下；这里只管本组件，公共那份不动 */
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='menubar'][data-part='content'][data-state='open'] {
-      animation-duration: 0.01ms;
-    }
+  /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来 */
+  [data-scope='menubar'][data-part='content'][data-state='closed'] {
+    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 在一排入口间换张时两侧都瞬时：交叉淡变读起来就是闪烁，且退场关键帧从不透明度 1
+     起跳，打断未播完的进场还会亮一下。原生菜单栏的成规——首开有进场、末收有退场、
+     换张不播。没有动画时退场闸门当场落定，收起即藏 */
+  [data-scope='menubar'][data-part='content'][data-instant] {
+    animation: none;
   }
 
   [data-scope='menubar'][data-part='group'] {
@@ -178,7 +208,7 @@
     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-fg-subtle));
-    font-size: var(--xh-menubar-group-label-font-size, var(--xh-font-size-xs));
+    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));
     line-height: var(--xh-leading-none);
     user-select: none;
@@ -191,7 +221,7 @@
   [data-scope='menubar'][data-part='item'] {
     display: flex;
     align-items: center;
-    gap: var(--xh-menubar-item-gap, var(--xh-control-gap-md));
+    gap: var(--xh-menubar-item-gap, var(--xh-_menubar-item-gap));
     padding-block: var(--xh-menubar-item-py, var(--xh-_menubar-item-py));
     padding-inline: var(--xh-menubar-item-px, var(--xh-_menubar-item-px));
     border-radius: var(--xh-menubar-item-radius, var(--xh-shape-control));
@@ -211,14 +241,44 @@
     display: none;
   }
 
-  /* 悬停与键盘焦点共用中性灰轻档：条目本身承载焦点，不另画描边。
-     data-highlighted 跟的是连接层记的焦点条目，与 :focus 说的是同一件事，
-     子部件够不着那个伪类，只能读这个标记 */
-  [data-scope='menubar'][data-part='item']:not([data-disabled]):is(:hover, :focus, [data-highlighted]) {
+  /* 悬停与键盘锚点共用中性灰轻档：锚点只认连接层打的 data-highlighted，不读 :focus */
+  [data-scope='menubar'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]) {
     background: var(--xh-menubar-item-bg-hover, var(--xh-bg-subtle));
   }
 
-  [data-scope='menubar'][data-part='item']:focus {
+  /* 打开子菜单的触发条目是展开路径，走品牌淡底加粗强档。
+     必须排在轻档之后：悬停或焦点回到它身上时同特指度靠书写顺序压过轻档 */
+  [data-scope='menubar'][data-part='item']:not([data-disabled])[data-state='open'] {
+    background: var(--xh-menubar-item-bg-active, var(--xh-_menubar-item-active-bg));
+    font-weight: var(--xh-menubar-item-active-font-weight, var(--xh-font-weight-semibold));
+  }
+
+  /* 带子菜单的条目行尾画右向小箭头：不点开也看得出还有下一级。
+     位置靠 margin 顶到行尾，图形取兜底字形令牌 */
+  [data-scope='menubar'][data-part='item'][aria-haspopup='menu']::after {
+    content: '';
+    flex: none;
+    margin-inline-start: auto;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    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='menubar'][data-part='item'][aria-haspopup='menu']::after {
+    -webkit-mask-image: var(--xh-glyph-mark-chevron-left);
+    mask-image: var(--xh-glyph-mark-chevron-left);
+  }
+
+  /* 键盘落焦的条目画内收环；指针触发的聚焦不画 */
+  [data-scope='menubar'][data-part='item']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  [data-scope='menubar'][data-part='item']:focus:not(:focus-visible) {
     outline: none;
   }
 
@@ -246,7 +306,7 @@
     align-items: center;
     justify-content: center;
     inline-size: var(--xh-menubar-item-indicator-size, var(--xh-control-indicator-size));
-    color: var(--xh-menubar-item-indicator-fg, var(--xh-fg-subtle));
+    color: var(--xh-menubar-item-indicator-fg, var(--xh-fg-brand));
   }
 
   [data-scope='menubar'][data-part='item-indicator'][hidden] {
@@ -264,14 +324,26 @@
     margin-block: var(--xh-menubar-separator-my, var(--xh-space-1));
     background: var(--xh-menubar-separator-color, var(--xh-border-default));
   }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  [data-scope='menubar'][data-part='item-indicator']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+  }
 }
 
 @layer xihan.motion {
   /* 自带前缀独占一个名字，不动公共的那份关键帧 */
-  @keyframes xh-menubar-in {
+  @keyframes xh-pop-in {
     from {
       opacity: 0;
-      scale: 0.96;
+      scale: var(--xh-motion-scale-enter);
     }
 
     to {
@@ -279,4 +351,16 @@
       scale: 1;
     }
   }
+
+  @keyframes xh-pop-out {
+    from {
+      opacity: 1;
+      scale: 1;
+    }
+
+    to {
+      opacity: 0;
+      scale: var(--xh-motion-scale-enter);
+    }
+  }
 }

package/css/navigation-menu.css

@@ -1,19 +1,36 @@
 @layer xihan.motion {
   /* 面板往下探一小截再落位：纯淡入看不出它是从哪条 trigger 长出来的 */
-  @keyframes xh-navigation-menu-in {
+  @keyframes xh-pop-in {
     from {
       opacity: 0;
-      translate: 0 -4px;
+      scale: var(--xh-motion-scale-enter);
     }
 
     to {
       opacity: 1;
-      translate: 0 0;
+      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='navigation-menu'] {
+    --xh-navigation-menu-skin: 1;
+  }
+
   /* 根节点是 nav 地标，不参与排版；给 relative 是为了让共享外壳（viewport）有个定位参照系。
      这里不给 display，UA 的 [hidden]{display:none} 就仍然压得住 */
   [data-scope='navigation-menu'][data-part='root'] {
@@ -24,14 +41,17 @@
     --xh-_navigation-menu-trigger-h: var(--xh-control-h-md);
     --xh-_navigation-menu-trigger-px: var(--xh-control-px-md);
     --xh-_navigation-menu-trigger-gap: var(--xh-control-gap-md);
-    --xh-_navigation-menu-link-p: var(--xh-space-2);
+    --xh-_navigation-menu-link-py: var(--xh-space-1_5);
+    --xh-_navigation-menu-link-px: var(--xh-control-px-md);
     --xh-_navigation-menu-link-font-size: var(--xh-text-body-size);
 
-    /* 语气落在三处：条目的高亮底、展开着的 trigger 与当前链接的文字色、指示条。
-       没写 data-tone 时这几个 --xh-_tone-* 都没被声明，各自退回原来的取值。
+    /* 悬停与键盘锚点恒中性灰轻档、不接语气槽——两档同色相的话打开路径就认不出来了 */
+    --xh-_navigation-menu-highlight-bg: var(--xh-bg-subtle);
+
+    /* 语气落在三处：展开着的 trigger 的底色、当前链接的文字色、指示条。
+       没写 data-tone 时这几个 --xh-_tone-* 都没被声明，各自退回品牌色。
        聚焦环不在其列，它恒是 --xh-ring-focus */
-    --xh-_navigation-menu-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
-    --xh-_navigation-menu-open-fg: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_navigation-menu-active-bg: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
     --xh-_navigation-menu-current-fg: var(--xh-_tone-fg, var(--xh-fg-brand));
     --xh-_navigation-menu-accent: var(--xh-_tone, var(--xh-fg-brand));
 
@@ -44,21 +64,23 @@
   /* 缺省档写在上面的基础规则里。链接的内边距不在控件内边距那把尺上（它比控件矮一档），
      三档一律取空间尺，缺省档的取值原样保留 */
   [data-scope='navigation-menu'][data-part='root'][data-size='sm'] {
-    --xh-_navigation-menu-font-size: var(--xh-font-size-sm);
+    --xh-_navigation-menu-font-size: var(--xh-control-font-sm);
     --xh-_navigation-menu-trigger-h: var(--xh-control-h-sm);
     --xh-_navigation-menu-trigger-px: var(--xh-control-px-sm);
     --xh-_navigation-menu-trigger-gap: var(--xh-control-gap-sm);
-    --xh-_navigation-menu-link-p: var(--xh-space-1_5);
-    --xh-_navigation-menu-link-font-size: var(--xh-font-size-sm);
+    --xh-_navigation-menu-link-py: var(--xh-space-1);
+    --xh-_navigation-menu-link-px: var(--xh-control-px-sm);
+    --xh-_navigation-menu-link-font-size: var(--xh-control-font-sm);
   }
 
   [data-scope='navigation-menu'][data-part='root'][data-size='lg'] {
-    --xh-_navigation-menu-font-size: var(--xh-font-size-lg);
+    --xh-_navigation-menu-font-size: var(--xh-control-font-lg);
     --xh-_navigation-menu-trigger-h: var(--xh-control-h-lg);
     --xh-_navigation-menu-trigger-px: var(--xh-control-px-lg);
     --xh-_navigation-menu-trigger-gap: var(--xh-control-gap-lg);
-    --xh-_navigation-menu-link-p: var(--xh-space-3);
-    --xh-_navigation-menu-link-font-size: var(--xh-font-size-lg);
+    --xh-_navigation-menu-link-py: var(--xh-space-2);
+    --xh-_navigation-menu-link-px: var(--xh-control-px-lg);
+    --xh-_navigation-menu-link-font-size: var(--xh-control-font-lg);
   }
 
   /* 指示条的定位参照系（它是 absolute，量出来的偏移就是相对这里的）。
@@ -109,7 +131,7 @@
     line-height: var(--xh-leading-none);
     white-space: nowrap;
     cursor: pointer;
-    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='navigation-menu'][data-part='trigger'][hidden] {
@@ -125,8 +147,11 @@
     outline-offset: var(--xh-ring-offset);
   }
 
+  /* 展开着的那一张是打开路径，走品牌淡底强档：哪一张开着必须一眼看得出来。
+     不加粗：横排的栏加粗会推挤相邻触发器。
+     必须排在轻档之后：指针回到它身上时同特指度靠书写顺序压过轻档 */
   [data-scope='navigation-menu'][data-part='trigger'][data-state='open'] {
-    color: var(--xh-navigation-menu-trigger-fg-open, var(--xh-_navigation-menu-open-fg));
+    background: var(--xh-navigation-menu-trigger-bg-active, var(--xh-_navigation-menu-active-bg));
   }
 
   /* 集合条目用 data-disabled，不用 :disabled：它带的是 aria-disabled，
@@ -144,24 +169,24 @@
   /* 面板贴着自己那一项落位：横排从 trigger 底下长出来 */
   [data-scope='navigation-menu'][data-part='content'] {
     position: absolute;
-    z-index: var(--xh-layer-popover);
+    z-index: var(--xh-navigation-menu-layer, var(--xh-layer-popover));
     inset-block-start: calc(100% + var(--xh-navigation-menu-content-offset, var(--xh-space-1)));
     inset-inline-start: 0;
     display: flex;
     flex-direction: column;
     gap: var(--xh-navigation-menu-content-gap, var(--xh-space-1));
-    min-inline-size: var(--xh-navigation-menu-content-min-w, var(--xh-overlay-min-w));
-    padding: var(--xh-navigation-menu-content-p, var(--xh-space-2));
+    min-inline-size: var(--xh-navigation-menu-content-min-w, var(--xh-overlay-menu-min-w));
+    padding: var(--xh-navigation-menu-content-p, var(--xh-space-1));
     border: var(--xh-stroke-thin) solid var(--xh-navigation-menu-content-border, var(--xh-border-default));
     border-radius: var(--xh-navigation-menu-content-radius, var(--xh-shape-surface));
     background: var(--xh-navigation-menu-content-bg, var(--xh-bg-surface));
-    box-shadow: var(--xh-navigation-menu-content-shadow, var(--xh-elevation-2));
+    box-shadow: var(--xh-navigation-menu-content-shadow, var(--xh-elevation-floating));
   }
 
   /* display 会盖掉 hidden 属性的 UA 规则，收起态显式让位 */
-  [data-scope='navigation-menu'][data-part='content'][hidden] {
-    display: none;
-  }
+  /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致：
+     收起态连接层会给 content 打 hidden，而上面那条 display 正是要盖掉 UA 的
+     [hidden]{display:none}——退场动画得先能播。真正的收起由宿主在退场结束后落成内联 display。 */
 
   /* 竖排导航：面板改从侧边长出来 */
   [data-scope='navigation-menu'][data-part='content'][data-orientation='vertical'] {
@@ -170,7 +195,12 @@
   }
 
   [data-scope='navigation-menu'][data-part='content'][data-state='open'] {
-    animation: xh-navigation-menu-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来 */
+  [data-scope='navigation-menu'][data-part='content'][data-state='closed'] {
+    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
   /* 面板整批塞进共享外壳时，落位归外壳管，面板自己回到静态流里——
@@ -186,8 +216,8 @@
   [data-scope='navigation-menu'][data-part='link'] {
     display: flex;
     align-items: center;
-    padding-block: var(--xh-navigation-menu-link-py, var(--xh-_navigation-menu-link-p));
-    padding-inline: var(--xh-navigation-menu-link-px, var(--xh-_navigation-menu-link-p));
+    padding-block: var(--xh-navigation-menu-link-py, var(--xh-_navigation-menu-link-py));
+    padding-inline: var(--xh-navigation-menu-link-px, var(--xh-_navigation-menu-link-px));
     border-radius: var(--xh-navigation-menu-link-radius, var(--xh-shape-control));
     color: var(--xh-navigation-menu-link-fg, var(--xh-fg-default));
     font-size: var(--xh-navigation-menu-link-font-size, var(--xh-_navigation-menu-link-font-size));
@@ -222,7 +252,7 @@
     margin: 0;
     inset-block-end: calc(var(--xh-navigation-menu-indicator-thickness, var(--xh-stroke-thick)) * -1);
     block-size: var(--xh-navigation-menu-indicator-thickness, var(--xh-stroke-thick));
-    border-radius: var(--xh-navigation-menu-indicator-radius, var(--xh-radius-full));
+    border-radius: var(--xh-navigation-menu-indicator-radius, var(--xh-shape-pill));
     background: var(--xh-navigation-menu-indicator-color, var(--xh-_navigation-menu-accent));
     transition:
       inset-inline-start var(--xh-motion-duration-enter) var(--xh-motion-ease-enter),
@@ -247,7 +277,7 @@
   /* 共享面板外壳：只管落位与统一的面板外观，里面装哪一份内容归 content */
   [data-scope='navigation-menu'][data-part='viewport'] {
     position: absolute;
-    z-index: var(--xh-layer-popover);
+    z-index: var(--xh-navigation-menu-layer, var(--xh-layer-popover));
     inset-block-start: calc(100% + var(--xh-navigation-menu-content-offset, var(--xh-space-1)));
     inset-inline-start: 0;
     display: block;
@@ -255,7 +285,7 @@
     border: var(--xh-stroke-thin) solid var(--xh-navigation-menu-content-border, var(--xh-border-default));
     border-radius: var(--xh-navigation-menu-content-radius, var(--xh-shape-surface));
     background: var(--xh-navigation-menu-content-bg, var(--xh-bg-surface));
-    box-shadow: var(--xh-navigation-menu-content-shadow, var(--xh-elevation-2));
+    box-shadow: var(--xh-navigation-menu-content-shadow, var(--xh-elevation-floating));
   }
 
   [data-scope='navigation-menu'][data-part='viewport'][hidden] {

package/css/number-animation.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='number-animation'] {
+    --xh-number-animation-skin: 1;
+  }
+
   [data-scope='number-animation'][data-part='root'] {
     /* 不写尺寸就跟着上下文的字号走：这个数常常摆在别人的标题、卡片标题或统计数值槽里，
        自带一个字号只会跟摆放它的地方打架。三个档位各自换掉这个私有槽 */
@@ -19,14 +24,14 @@
 
   /* —— 尺寸 —— */
   [data-scope='number-animation'][data-part='root'][data-size='sm'] {
-    --xh-_number-animation-size: var(--xh-font-size-lg);
+    --xh-_number-animation-size: var(--xh-control-font-lg);
   }
 
   [data-scope='number-animation'][data-part='root'][data-size='md'] {
-    --xh-_number-animation-size: var(--xh-font-size-2xl);
+    --xh-_number-animation-size: var(--xh-text-heading-2-size);
   }
 
   [data-scope='number-animation'][data-part='root'][data-size='lg'] {
-    --xh-_number-animation-size: var(--xh-font-size-3xl);
+    --xh-_number-animation-size: var(--xh-text-heading-1-size);
   }
 }