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

package/css/image-viewer.css

@@ -0,0 +1,196 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes xh-fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+}
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='image-viewer'] {
+    --xh-image-viewer-skin: 1;
+  }
+
+  [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) forwards;
+  }
+
+  [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) forwards;
+  }
+
+  [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='image'] {
+      transition: none;
+    }
+  }
+}

package/css/image.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='image'] {
+    --xh-image-skin: 1;
+  }
+
   /* 尺寸交给三个变量而不是写死：这个组件既要能当封面图，也要能当头图与缩略图。
      给了 --xh-image-ratio 才有确定高度，回退内容与图片在同一个盒子里换人时不会跳。 */
   [data-scope='image'][data-part='root'] {

package/css/infinite-scroll.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='infinite-scroll'] {
+    --xh-infinite-scroll-skin: 1;
+  }
+
   /*
    * 列表外壳这一层刻意不给盒模型：滚的是页面还是作者自己的 overflow 容器、列表长什么样，
    * 都归作者的布局管，组件只往它身上挂 data-state / data-loading / data-disabled 供作者取用。

package/css/layout.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='layout'] {
+    --xh-layout-skin: 1;
+  }
+
   /* 页面骨架排成三行两列：头与脚各横贯一整行，侧栏与内容并排占中间那一行。
      缺哪一段，对应的行/列就没有条目，宽高自动收成 0，不必为"少写一段"另立规则。
 

package/css/list.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='list'] {
+    --xh-list-skin: 1;
+  }
+
   [data-scope='list'][data-part='root'] {
     /* 一个尺寸档只换这几个私有槽，条目与两行文字都从根上继承它们，
        换档不必给每个部件各写一条选择器 */

package/css/listbox.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='listbox'] {
+    --xh-listbox-skin: 1;
+  }
+
   [data-scope='listbox'][data-part='root'] {
     display: flex;
     flex-direction: column;
@@ -74,7 +79,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 +99,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 +109,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 +119,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/loading-bar.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='loading-bar'] {
+    --xh-loading-bar-skin: 1;
+  }
+
   /*
    * 贴在视口顶边的一条细带。厚度那条轴（block-size）由连接层写进内联样式——
    * height 这个 prop 的缺省值在 connect 里收口，这里再声明一次只会被内联盖掉，

package/css/log.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='log'] {
+    --xh-log-skin: 1;
+  }
+
   /* 行高是本组件的定尺基准：视口按行数定高、每行排版，都从这一个槽位来。
      它的兜底值须与连接层内联高度里用的那份逐字一致，否则 rows 算出来的高度对不上行。 */
   [data-scope='log'][data-part='root'] {

package/css/marquee.css

@@ -25,6 +25,11 @@
 }
 
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='marquee'] {
+    --xh-marquee-skin: 1;
+  }
+
   /*
    * 窗口：只露出轨道的一段。
    *

package/css/mention.css

@@ -1,4 +1,23 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='mention'] {
+    --xh-mention-skin: 1;
+  }
+
   [data-scope='mention'][data-part='root'] {
     /* 尺寸档只换这四个私有槽，输入框与候选都从 root 继承它们，换档不必给每个部件各写一条选择器。
        浮层在 positioner 里、也是 root 的后代，一并继承 */
@@ -9,14 +28,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 +63,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 +182,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 +192,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 +227,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

@@ -1,4 +1,23 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='menu'] {
+    --xh-menu-skin: 1;
+  }
+
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   [data-scope='menu'][data-part='positioner'] {
     position: fixed;
@@ -15,13 +34,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 +72,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 +97,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 +134,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;
   }