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

package/css/image-viewer.css

@@ -0,0 +1,176 @@
+@layer xihan.components {
+  [data-scope='image-viewer'][data-part='backdrop'] {
+    position: fixed;
+    inset: 0;
+    z-index: var(--xh-layer-modal);
+    /* 看片要压住页面底色，遮罩比普通对话框更深 */
+    background: var(--xh-image-viewer-backdrop-bg, color-mix(in oklab, var(--xh-color-neutral-950) 78%, transparent));
+  }
+
+  [data-scope='image-viewer'][data-part='backdrop'][data-state='open'] {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='image-viewer'][data-part='backdrop'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit);
+  }
+
+  [data-scope='image-viewer'][data-part='positioner'] {
+    position: fixed;
+    inset: 0;
+    z-index: var(--xh-layer-modal);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  [data-scope='image-viewer'][data-part='content'] {
+    position: relative;
+    inline-size: 100%;
+    block-size: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+    /* 深色底上的工具条与计数固定用浅字，不随主题翻 */
+    color: var(--xh-image-viewer-fg, var(--xh-color-neutral-0));
+  }
+
+  [data-scope='image-viewer'][data-part='content'][data-state='open'] {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='image-viewer'][data-part='content'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit);
+  }
+
+  [data-scope='image-viewer'][data-part='content'][hidden] {
+    display: none;
+  }
+
+  [data-scope='image-viewer'][data-part='viewport'] {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    cursor: grab;
+    /* 平移与滚轮都归指针会话，浏览器手势不抢 */
+    touch-action: none;
+  }
+
+  [data-scope='image-viewer'][data-part='viewport'][data-panning] {
+    cursor: grabbing;
+  }
+
+  [data-scope='image-viewer'][data-part='image'] {
+    max-inline-size: 90%;
+    max-block-size: 85%;
+    user-select: none;
+    /* 变换是内联 style 写的，只给缩放旋转一点缓动；拖拽平移要跟手，不缓 */
+    transition: transform var(--xh-duration-fast) var(--xh-ease-out);
+  }
+
+  [data-scope='image-viewer'][data-part='image'][data-panning] {
+    transition: none;
+  }
+
+  /* —— 悬浮件共用：半透明深底加浅字 —— */
+  [data-scope='image-viewer'][data-part='toolbar'],
+  [data-scope='image-viewer'][data-part='counter'],
+  [data-scope='image-viewer'][data-part='prev-trigger'],
+  [data-scope='image-viewer'][data-part='next-trigger'],
+  [data-scope='image-viewer'][data-part='close-trigger'] {
+    position: absolute;
+    z-index: 1;
+    background: var(--xh-image-viewer-chrome-bg, color-mix(in oklab, var(--xh-color-neutral-950) 55%, transparent));
+    color: inherit;
+    border: none;
+    border-radius: var(--xh-shape-pill);
+  }
+
+  [data-scope='image-viewer'][data-part='toolbar'] {
+    inset-block-end: var(--xh-space-6);
+    inset-inline-start: 50%;
+    translate: -50% 0;
+    display: flex;
+    align-items: center;
+    gap: var(--xh-space-1);
+    padding: var(--xh-space-1_5) var(--xh-space-3);
+  }
+
+  /* 工具条里的按钮：底色交给工具条，本体只管命中区 */
+  [data-scope='image-viewer'][data-part='toolbar'] > [data-part] {
+    position: static;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-control-action-size);
+    block-size: var(--xh-control-action-size);
+    background: none;
+    border: none;
+    border-radius: var(--xh-shape-control);
+    color: inherit;
+    font-size: var(--xh-glyph-size-sm);
+    cursor: pointer;
+  }
+
+  [data-scope='image-viewer'][data-part='counter'] {
+    inset-block-start: var(--xh-space-6);
+    inset-inline-start: 50%;
+    translate: -50% 0;
+    padding: var(--xh-space-1) var(--xh-space-3);
+    font-size: var(--xh-font-size-sm);
+  }
+
+  [data-scope='image-viewer'][data-part='prev-trigger'],
+  [data-scope='image-viewer'][data-part='next-trigger'],
+  [data-scope='image-viewer'][data-part='close-trigger'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-control-h-lg);
+    block-size: var(--xh-control-h-lg);
+    font-size: var(--xh-glyph-size-md);
+    cursor: pointer;
+  }
+
+  [data-scope='image-viewer'][data-part='prev-trigger'] {
+    inset-inline-start: var(--xh-space-6);
+    inset-block-start: 50%;
+    translate: 0 -50%;
+  }
+
+  [data-scope='image-viewer'][data-part='next-trigger'] {
+    inset-inline-end: var(--xh-space-6);
+    inset-block-start: 50%;
+    translate: 0 -50%;
+  }
+
+  [data-scope='image-viewer'][data-part='close-trigger'] {
+    inset-block-start: var(--xh-space-6);
+    inset-inline-end: var(--xh-space-6);
+  }
+
+  [data-scope='image-viewer'] button[data-part]:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='image-viewer'] button[data-part]:disabled {
+    opacity: var(--xh-state-disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='image-viewer'][data-part='backdrop'],
+    [data-scope='image-viewer'][data-part='content'] {
+      animation-duration: 0.01ms;
+    }
+
+    [data-scope='image-viewer'][data-part='image'] {
+      transition: none;
+    }
+  }
+}

package/css/listbox.css

@@ -74,7 +74,7 @@
   [data-scope='listbox'][data-part='item-group-label'] {
     display: block;
     padding-block: var(--xh-listbox-group-label-py, var(--xh-space-1));
-    padding-inline: var(--xh-listbox-group-label-px, var(--xh-control-px-sm));
+    padding-inline: var(--xh-listbox-group-label-px, var(--xh-control-px-md));
     color: var(--xh-listbox-group-label-fg, var(--xh-fg-subtle));
     font-size: var(--xh-listbox-group-label-font-size, var(--xh-font-size-xs));
     font-weight: var(--xh-listbox-group-label-font-weight, var(--xh-font-weight-medium));
@@ -94,8 +94,8 @@
     display: flex;
     align-items: center;
     gap: var(--xh-listbox-item-gap, var(--xh-control-gap-md));
-    padding-block: var(--xh-listbox-item-py, var(--xh-space-1));
-    padding-inline: var(--xh-listbox-item-px, var(--xh-control-px-sm));
+    padding-block: var(--xh-listbox-item-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-listbox-item-px, var(--xh-control-px-md));
     border-radius: var(--xh-listbox-item-radius, var(--xh-shape-control));
     color: var(--xh-listbox-item-fg, var(--xh-fg-default));
     font-size: var(--xh-listbox-item-font-size, var(--xh-text-body-size));
@@ -104,6 +104,9 @@
     white-space: nowrap;
     cursor: pointer;
     user-select: none;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 条目可以按需收起（过滤掉的选项），有 display 就得补这条 */
@@ -111,10 +114,10 @@
     display: none;
   }
 
-  /* 键盘高亮与指针高亮共用一套底色：条目本身承载焦点，不另画描边。
-     data-highlighted 跟的是连接层记的焦点条目，与选中互相独立 */
+  /* 悬停与键盘锚点共用中性灰轻档：data-highlighted 跟的是连接层记的焦点条目，
+     与选中互相独立 */
   [data-scope='listbox'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]) {
-    background: var(--xh-listbox-item-bg-highlight, var(--xh-bg-subtle-hover));
+    background: var(--xh-listbox-item-bg-hover, var(--xh-bg-subtle));
   }
 
   /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，

package/css/mention.css

@@ -9,14 +9,11 @@
 
     /* 形态档只换这三个槽：缺省即 outline（描边 + 画布底） */
     --xh-_mention-input-bg: var(--xh-bg-canvas);
-    --xh-_mention-input-border: var(--xh-border-default);
-    --xh-_mention-input-border-hover: var(--xh-border-strong);
+    --xh-_mention-input-border: var(--xh-border-control);
+    --xh-_mention-input-border-hover: var(--xh-border-control-hover);
 
-    /* 强调色随语气走，只落在聚焦与高亮上，正文文字色不动。
-       没写 data-tone 时 --xh-_tone 没被声明，三处都退回原来的取值 */
+    /* 聚焦环恒用固定环色，不随语气走 */
     --xh-_mention-ring: var(--xh-ring-focus);
-    --xh-_mention-item-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
-    --xh-_mention-item-highlight-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 
     display: block;
   }
@@ -47,21 +44,21 @@
      形态只决定描边与底色怎么用，用哪族颜色由 data-tone 决定 */
   [data-scope='mention'][data-part='root'][data-variant='outline'] {
     --xh-_mention-input-bg: var(--xh-bg-canvas);
-    --xh-_mention-input-border: var(--xh-border-default);
-    --xh-_mention-input-border-hover: var(--xh-border-strong);
+    --xh-_mention-input-border: var(--xh-border-control);
+    --xh-_mention-input-border-hover: var(--xh-border-control-hover);
   }
 
   /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
   [data-scope='mention'][data-part='root'][data-variant='subtle'] {
     --xh-_mention-input-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
     --xh-_mention-input-border: transparent;
-    --xh-_mention-input-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_mention-input-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   [data-scope='mention'][data-part='root'][data-variant='ghost'] {
     --xh-_mention-input-bg: transparent;
     --xh-_mention-input-border: transparent;
-    --xh-_mention-input-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_mention-input-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   /* 框与聚焦环都长在输入框自己身上：这里没有把输入框和别的控件裹成一体的输入行，
@@ -166,8 +163,8 @@
     display: flex;
     align-items: center;
     gap: var(--xh-mention-item-gap, var(--xh-_mention-gap));
-    padding-block: var(--xh-mention-item-py, var(--xh-space-1));
-    padding-inline: var(--xh-mention-item-px, var(--xh-control-px-sm));
+    padding-block: var(--xh-mention-item-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-mention-item-px, var(--xh-control-px-md));
     border-radius: var(--xh-mention-item-radius, var(--xh-shape-control));
     color: var(--xh-mention-item-fg, var(--xh-fg-default));
     font-size: var(--xh-mention-item-font-size, var(--xh-_mention-font-size));
@@ -176,18 +173,19 @@
     white-space: nowrap;
     cursor: pointer;
     user-select: none;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='mention'][data-part='item'][hidden] {
     display: none;
   }
 
-  /* 只认 data-highlighted，不写 :hover：指针划过时连接层已经把高亮搬过来了，
+  /* 键盘锚点走中性灰轻档。只认 data-highlighted，不写 :hover：指针划过时连接层已经把高亮搬过来了，
      两套底色各画各的会出现"鼠标停在 A 上、回车却插进了 B" */
   [data-scope='mention'][data-part='item'][data-highlighted]:not([data-disabled]) {
-    background: var(--xh-mention-item-bg-highlight, var(--xh-_mention-item-highlight-bg));
-    color: var(--xh-mention-item-fg-highlight, var(--xh-_mention-item-highlight-fg));
-    font-weight: var(--xh-mention-item-font-weight-highlight, var(--xh-font-weight-medium));
+    background: var(--xh-mention-item-bg-hover, var(--xh-bg-subtle));
   }
 
   /* 禁用走 aria-disabled 而非原生 disabled（原生 disabled 不派 click，禁用守卫就走不到），
@@ -210,12 +208,6 @@
     display: none;
   }
 
-  /* 候选行里除文本以外的部分（作者摆的头像、副标题）由作者自己画；
-     这里只把强调色透出去，作者要用就取它 */
-  [data-scope='mention'][data-part='item'][data-highlighted] [data-part='item-text'] {
-    color: var(--xh-mention-item-fg-highlight, var(--xh-_mention-item-highlight-fg));
-  }
-
   [data-scope='mention'][data-part='item'][data-disabled] [data-part='item-text'] {
     color: var(--xh-fg-disabled);
   }

package/css/menu.css

@@ -15,13 +15,14 @@
   [data-scope='menu'][data-part='content'] {
     /* 尺寸档只换这四个私有槽，条目从 content 继承它们，换档不必给每个部件各写一条选择器。
        菜单没有 root 部件（浮层树的最外层就是 content），三轴属性都落在这里 */
-    --xh-_menu-item-py: var(--xh-space-2);
-    --xh-_menu-item-px: var(--xh-control-px-sm);
+    --xh-_menu-item-py: var(--xh-space-1_5);
+    --xh-_menu-item-px: var(--xh-control-px-md);
     --xh-_menu-item-gap: var(--xh-control-gap-md);
     --xh-_menu-font-size: var(--xh-text-body-size);
 
-    /* 条目高亮底随语气走。没写 data-tone 时 --xh-_tone-subtle-hover 没被声明，退回原来的取值 */
-    --xh-_menu-item-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    /* 打开子菜单的触发条目走品牌淡底强档，随语气换色相；没写 data-tone 时退回品牌淡底。
+       悬停与键盘焦点恒中性灰轻档、不接语气槽——两档同色相的话打开路径就认不出来了 */
+    --xh-_menu-item-active-bg: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
 
     display: flex;
     flex-direction: column;
@@ -52,18 +53,18 @@
   }
 
   /* —— 尺寸 —— */
-  /* 缺省档写在 content 的基础规则里。条目内外边距缺省档本就不在 control-h/px 那把尺上
-     （高度由 padding 撑出来、行内内缩取的是 sm 档），故按 space 档上下各挪一级 */
+  /* 缺省档写在 content 的基础规则里。条目高度由 padding 撑出来：
+     纵向走 space 档、行内内缩走 control-px 档（随密度轴），换档各挪一级 */
   [data-scope='menu'][data-part='content'][data-size='sm'] {
     --xh-_menu-item-py: var(--xh-space-1);
-    --xh-_menu-item-px: var(--xh-space-1);
+    --xh-_menu-item-px: var(--xh-control-px-sm);
     --xh-_menu-item-gap: var(--xh-control-gap-sm);
     --xh-_menu-font-size: var(--xh-font-size-sm);
   }
 
   [data-scope='menu'][data-part='content'][data-size='lg'] {
-    --xh-_menu-item-py: var(--xh-space-3);
-    --xh-_menu-item-px: var(--xh-space-3);
+    --xh-_menu-item-py: var(--xh-space-2);
+    --xh-_menu-item-px: var(--xh-control-px-lg);
     --xh-_menu-item-gap: var(--xh-control-gap-lg);
     --xh-_menu-font-size: var(--xh-font-size-lg);
   }
@@ -77,15 +78,25 @@
     border-radius: var(--xh-menu-item-radius, var(--xh-shape-control));
     color: var(--xh-menu-item-fg, var(--xh-fg-default));
     font-size: var(--xh-menu-item-font-size, var(--xh-_menu-font-size));
-    line-height: var(--xh-leading-none);
+    line-height: var(--xh-menu-item-leading, var(--xh-leading-normal));
     white-space: nowrap;
     cursor: pointer;
     user-select: none;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  /* 键盘高亮与指针高亮共用一套底色：条目本身承载焦点，不另画描边 */
+  /* 悬停与键盘焦点共用中性灰轻档：条目本身承载焦点，不另画描边 */
   [data-scope='menu'][data-part='item']:not([data-disabled]):is(:hover, :focus) {
-    background: var(--xh-menu-item-bg-highlight, var(--xh-_menu-item-highlight-bg));
+    background: var(--xh-menu-item-bg-hover, var(--xh-bg-subtle));
+  }
+
+  /* 打开子菜单的触发条目是展开路径，走品牌淡底加粗强档。
+     必须排在轻档之后：悬停或焦点回到它身上时同特指度靠书写顺序压过轻档 */
+  [data-scope='menu'][data-part='item']:not([data-disabled])[data-state='open'] {
+    background: var(--xh-menu-item-bg-active, var(--xh-_menu-item-active-bg));
+    font-weight: var(--xh-menu-item-active-font-weight, var(--xh-font-weight-semibold));
   }
 
   [data-scope='menu'][data-part='item']:focus {
@@ -104,40 +115,44 @@
   }
 
   /* 箭头是旋转 45° 的方块，只保留朝向锚点那两条边的描边；
-     引擎不产出箭头偏移，因此沿交叉轴固定居中 */
+     交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中 */
   [data-scope='menu'][data-part='arrow'] {
+    --xh-_menu-arrow-size: var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size));
+    --xh-_menu-arrow-x: 50%;
+    --xh-_menu-arrow-y: 50%;
+
     position: absolute;
-    inline-size: var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size));
-    block-size: var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size));
+    inline-size: var(--xh-_menu-arrow-size);
+    block-size: var(--xh-_menu-arrow-size);
     background: var(--xh-menu-bg, var(--xh-bg-surface));
     border: var(--xh-stroke-thin) solid var(--xh-menu-border, var(--xh-border-default));
     rotate: 45deg;
   }
 
   [data-scope='menu'][data-part='arrow'][data-placement^='bottom'] {
-    inset-block-start: calc(var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-inline-start: calc(50% - var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-block-start: calc(var(--xh-_menu-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_menu-arrow-x) - var(--xh-_menu-arrow-size) / 2);
     border-block-end: 0;
     border-inline-end: 0;
   }
 
   [data-scope='menu'][data-part='arrow'][data-placement^='top'] {
-    inset-block-end: calc(var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-inline-start: calc(50% - var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-block-end: calc(var(--xh-_menu-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_menu-arrow-x) - var(--xh-_menu-arrow-size) / 2);
     border-block-start: 0;
     border-inline-start: 0;
   }
 
   [data-scope='menu'][data-part='arrow'][data-placement^='right'] {
-    inset-inline-start: calc(var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-block-start: calc(50% - var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-inline-start: calc(var(--xh-_menu-arrow-size) / -2);
+    inset-block-start: calc(var(--xh-_menu-arrow-y) - var(--xh-_menu-arrow-size) / 2);
     border-block-start: 0;
     border-inline-end: 0;
   }
 
   [data-scope='menu'][data-part='arrow'][data-placement^='left'] {
-    inset-inline-end: calc(var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-block-start: calc(50% - var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-inline-end: calc(var(--xh-_menu-arrow-size) / -2);
+    inset-block-start: calc(var(--xh-_menu-arrow-y) - var(--xh-_menu-arrow-size) / 2);
     border-block-end: 0;
     border-inline-start: 0;
   }

package/css/menubar.css

@@ -5,14 +5,14 @@
        换档不必给每个部件各写一条选择器。菜单浮层在 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-2);
-    --xh-_menubar-item-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-_tone-subtle-hover 没被声明，退回原来的中性底。
+    /* 展开着的那张菜单的 trigger 走品牌淡底强档，随语气换色相；没写 data-tone 时退回品牌淡底。
+       悬停与键盘焦点恒中性灰轻档、不接语气槽——两档同色相的话哪张开着就认不出来了。
        聚焦环不在其列，它恒是 --xh-ring-focus */
-    --xh-_menubar-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    --xh-_menubar-active-bg: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
 
     display: flex;
     align-items: center;
@@ -34,21 +34,21 @@
   }
 
   /* —— 尺寸 —— */
-  /* 缺省档写在上面的基础规则里。内边距的缺省档已经落在控件内边距尺的 sm 那一格，
-     往下没有更小的一格，sm 档改取空间尺；lg 档回到控件尺的下一格 */
+  /* 缺省档写在上面的基础规则里。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_5);
-    --xh-_menubar-item-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-3);
-    --xh-_menubar-item-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);
   }
 
@@ -78,15 +78,23 @@
     white-space: nowrap;
     cursor: pointer;
     user-select: none;
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='menubar'][data-part='trigger'][hidden] {
     display: none;
   }
 
-  /* 展开着的那一项与指针悬停共用一套底色：菜单栏里"哪一张开着"必须一眼看得出来 */
-  [data-scope='menubar'][data-part='trigger']:not([data-disabled]):is(:hover, [data-state='open']) {
-    background: var(--xh-menubar-trigger-bg-active, var(--xh-_menubar-highlight-bg));
+  /* 指针悬停走中性灰轻档 */
+  [data-scope='menubar'][data-part='trigger']:not([data-disabled]):hover {
+    background: var(--xh-menubar-trigger-bg-hover, var(--xh-bg-subtle));
+  }
+
+  /* 展开着的那一张是打开路径，走品牌淡底强档：菜单栏里"哪一张开着"必须一眼看得出来。
+     不加粗：横排的栏加粗会推挤相邻触发器。
+     必须排在轻档之后：指针回到它身上时同特指度靠书写顺序压过轻档 */
+  [data-scope='menubar'][data-part='trigger']:not([data-disabled])[data-state='open'] {
+    background: var(--xh-menubar-trigger-bg-active, var(--xh-_menubar-active-bg));
   }
 
   /* trigger 自带 Tab 位（整条菜单栏唯一的那个），必须画得出焦点 */
@@ -189,10 +197,13 @@
     border-radius: var(--xh-menubar-item-radius, var(--xh-shape-control));
     color: var(--xh-menubar-item-fg, var(--xh-fg-default));
     font-size: var(--xh-menubar-item-font-size, var(--xh-_menubar-font-size));
-    line-height: var(--xh-leading-none);
+    line-height: var(--xh-menubar-item-leading, var(--xh-leading-normal));
     white-space: nowrap;
     cursor: pointer;
     user-select: none;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 条目可以按需收起（按上下文过滤掉的命令），有 display 就得补这条 */
@@ -200,11 +211,11 @@
     display: none;
   }
 
-  /* 键盘高亮与指针高亮共用一套底色：条目本身承载焦点，不另画描边。
+  /* 悬停与键盘焦点共用中性灰轻档：条目本身承载焦点，不另画描边。
      data-highlighted 跟的是连接层记的焦点条目，与 :focus 说的是同一件事，
      子部件够不着那个伪类，只能读这个标记 */
   [data-scope='menubar'][data-part='item']:not([data-disabled]):is(:hover, :focus, [data-highlighted]) {
-    background: var(--xh-menubar-item-bg-highlight, var(--xh-_menubar-highlight-bg));
+    background: var(--xh-menubar-item-bg-hover, var(--xh-bg-subtle));
   }
 
   [data-scope='menubar'][data-part='item']:focus {

package/css/number-field.css

@@ -12,18 +12,18 @@
 
     /* 形态档只换这几个私有槽：输入框的底与描边，加减钮的底与描边 */
     --xh-_number-field-bg: var(--xh-bg-canvas);
-    --xh-_number-field-border: var(--xh-border-default);
-    --xh-_number-field-border-hover: var(--xh-border-strong);
+    --xh-_number-field-border: var(--xh-border-control);
+    --xh-_number-field-border-hover: var(--xh-border-control-hover);
     --xh-_number-field-trigger-bg: var(--xh-bg-subtle);
     --xh-_number-field-trigger-bg-hover: var(--xh-bg-subtle-hover);
     --xh-_number-field-trigger-bg-active: var(--xh-bg-subtle-active);
-    --xh-_number-field-trigger-border: var(--xh-border-default);
-    --xh-_number-field-trigger-border-hover: var(--xh-border-strong);
+    --xh-_number-field-trigger-border: var(--xh-border-control);
+    --xh-_number-field-trigger-border-hover: var(--xh-border-control-hover);
 
     /* 语气只落在聚焦这一处：环与聚焦态描边。框里的数字不归它管。
        没写 data-tone 时 --xh-_tone 没被声明，退回原来的聚焦环色与常态描边 */
     --xh-_number-field-ring: var(--xh-ring-focus);
-    --xh-_number-field-border-focus: var(--xh-number-field-input-border, var(--xh-_tone, var(--xh-border-default)));
+    --xh-_number-field-border-focus: var(--xh-number-field-input-border, var(--xh-_tone, var(--xh-border-control)));
 
     display: inline-flex;
     flex-direction: column;
@@ -58,14 +58,14 @@
      输入框没有实心档：填满一个要往里打字的框，字与底就没法同时读 */
   [data-scope='number-field'][data-part='root'][data-variant='outline'] {
     --xh-_number-field-bg: var(--xh-bg-canvas);
-    --xh-_number-field-border: var(--xh-border-default);
-    --xh-_number-field-border-hover: var(--xh-border-strong);
+    --xh-_number-field-border: var(--xh-border-control);
+    --xh-_number-field-border-hover: var(--xh-border-control-hover);
     --xh-_number-field-trigger-bg: var(--xh-bg-subtle);
     --xh-_number-field-trigger-bg-hover: var(--xh-bg-subtle-hover);
     --xh-_number-field-trigger-bg-active: var(--xh-bg-subtle-active);
-    --xh-_number-field-trigger-border: var(--xh-border-default);
-    --xh-_number-field-trigger-border-hover: var(--xh-border-strong);
-    --xh-_number-field-border-focus: var(--xh-number-field-input-border, var(--xh-_tone, var(--xh-border-default)));
+    --xh-_number-field-trigger-border: var(--xh-border-control);
+    --xh-_number-field-trigger-border-hover: var(--xh-border-control-hover);
+    --xh-_number-field-border-focus: var(--xh-number-field-input-border, var(--xh-_tone, var(--xh-border-control)));
   }
 
   /* 填充式：底色顶替描边表达边界。描边只退成透明而不去掉，1px 的位置留着，
@@ -73,26 +73,26 @@
   [data-scope='number-field'][data-part='root'][data-variant='subtle'] {
     --xh-_number-field-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
     --xh-_number-field-border: transparent;
-    --xh-_number-field-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_number-field-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
     --xh-_number-field-trigger-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
     --xh-_number-field-trigger-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
     --xh-_number-field-trigger-bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
     --xh-_number-field-trigger-border: transparent;
-    --xh-_number-field-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-default));
-    --xh-_number-field-border-focus: var(--xh-_tone, var(--xh-border-default));
+    --xh-_number-field-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
+    --xh-_number-field-border-focus: var(--xh-_tone, var(--xh-border-control));
   }
 
   /* 无框：底与描边都透明，平时只看得见数字，悬停与聚焦才浮出边界 */
   [data-scope='number-field'][data-part='root'][data-variant='ghost'] {
     --xh-_number-field-bg: transparent;
     --xh-_number-field-border: transparent;
-    --xh-_number-field-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_number-field-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
     --xh-_number-field-trigger-bg: transparent;
     --xh-_number-field-trigger-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle-hover));
     --xh-_number-field-trigger-bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
     --xh-_number-field-trigger-border: transparent;
-    --xh-_number-field-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-default));
-    --xh-_number-field-border-focus: var(--xh-_tone, var(--xh-border-default));
+    --xh-_number-field-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
+    --xh-_number-field-border-focus: var(--xh-_tone, var(--xh-border-control));
   }
 
   [data-scope='number-field'][data-part='label'] {

package/css/pin-input.css

@@ -8,8 +8,8 @@
     --xh-_pin-input-label-font-size: var(--xh-text-label-size);
     /* 形态档只换这三个私有槽，缺省这一份就是描边式（描边 + 画布底） */
     --xh-_pin-input-box-bg: var(--xh-bg-canvas);
-    --xh-_pin-input-box-border: var(--xh-border-default);
-    --xh-_pin-input-box-border-hover: var(--xh-border-strong);
+    --xh-_pin-input-box-border: var(--xh-border-control);
+    --xh-_pin-input-box-border-hover: var(--xh-border-control-hover);
     /* 聚焦环与填满态的强调色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的取值 */
     --xh-_pin-input-ring: var(--xh-ring-focus);
     --xh-_pin-input-accent: var(--xh-_tone, var(--xh-bg-brand));
@@ -29,22 +29,22 @@
      不做 solid：实心填充盖住了"这里能打字"这件事，输入框用不上它 */
   [data-scope='pin-input'][data-part='root'][data-variant='outline'] {
     --xh-_pin-input-box-bg: var(--xh-bg-canvas);
-    --xh-_pin-input-box-border: var(--xh-border-default);
-    --xh-_pin-input-box-border-hover: var(--xh-border-strong);
+    --xh-_pin-input-box-border: var(--xh-border-control);
+    --xh-_pin-input-box-border-hover: var(--xh-border-control-hover);
   }
 
   /* 填充式：底色说明这里是一格输入位，描边让位给底色 */
   [data-scope='pin-input'][data-part='root'][data-variant='subtle'] {
     --xh-_pin-input-box-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
     --xh-_pin-input-box-border: transparent;
-    --xh-_pin-input-box-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_pin-input-box-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   /* 无边框、透明底：静息时格子完全隐入背景，可见反馈全靠悬停描边与聚焦环 */
   [data-scope='pin-input'][data-part='root'][data-variant='ghost'] {
     --xh-_pin-input-box-bg: transparent;
     --xh-_pin-input-box-border: transparent;
-    --xh-_pin-input-box-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_pin-input-box-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   /* —— 尺寸 —— */