@xihan-ui/styles 1.0.0-alpha.0

package/css/mention.css

@@ -0,0 +1,222 @@
+@layer xihan.components {
+  [data-scope='mention'][data-part='root'] {
+    /* 尺寸档只换这四个私有槽，输入框与候选都从 root 继承它们，换档不必给每个部件各写一条选择器。
+       浮层在 positioner 里、也是 root 的后代，一并继承 */
+    --xh-_mention-px: var(--xh-control-px-md);
+    --xh-_mention-py: var(--xh-field-py);
+    --xh-_mention-gap: var(--xh-control-gap-md);
+    --xh-_mention-font-size: var(--xh-text-body-size);
+
+    /* 形态档只换这三个槽：缺省即 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);
+
+    /* 强调色随语气走，只落在聚焦与高亮上，正文文字色不动。
+       没写 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;
+  }
+
+  /* 只要声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  [data-scope='mention'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  [data-scope='mention'][data-part='root'][data-size='sm'] {
+    --xh-_mention-px: var(--xh-control-px-sm);
+    --xh-_mention-py: var(--xh-space-1);
+    --xh-_mention-gap: var(--xh-control-gap-sm);
+    --xh-_mention-font-size: var(--xh-font-size-sm);
+  }
+
+  [data-scope='mention'][data-part='root'][data-size='lg'] {
+    --xh-_mention-px: var(--xh-control-px-lg);
+    --xh-_mention-py: var(--xh-space-3);
+    --xh-_mention-gap: var(--xh-control-gap-lg);
+    --xh-_mention-font-size: var(--xh-font-size-lg);
+  }
+
+  /* —— 形态 —— */
+  /* 输入类不做 solid：实心底压着可编辑的正文，读起来像块不可点的色板。
+     形态只决定描边与底色怎么用，用哪族颜色由 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);
+  }
+
+  /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
+  [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));
+  }
+
+  [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));
+  }
+
+  /* 框与聚焦环都长在输入框自己身上：这里没有把输入框和别的控件裹成一体的输入行，
+     整个组件在视觉上就是这一个可打字的方框 */
+  [data-scope='mention'][data-part='input'] {
+    display: block;
+    inline-size: 100%;
+    padding-block: var(--xh-mention-input-py, var(--xh-_mention-py));
+    padding-inline: var(--xh-mention-input-px, var(--xh-_mention-px));
+    border: var(--xh-stroke-thin) solid var(--xh-mention-input-border, var(--xh-_mention-input-border));
+    border-radius: var(--xh-mention-input-radius, var(--xh-shape-control));
+    background: var(--xh-mention-input-bg, var(--xh-_mention-input-bg));
+    color: var(--xh-mention-input-fg, var(--xh-fg-default));
+    /* 表单控件不继承页面字体，只给字号会让输入框用 UA 默认字族，与周围文本对不上 */
+    font-family: inherit;
+    font-size: var(--xh-mention-input-font-size, var(--xh-_mention-font-size));
+    line-height: var(--xh-leading-normal);
+    /* 多行宿主只许纵向拉伸：横向拉宽会把浮层与输入框的对齐拽歪 */
+    resize: vertical;
+    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='mention'][data-part='input'][hidden] {
+    display: none;
+  }
+
+  [data-scope='mention'][data-part='input']::placeholder {
+    color: var(--xh-mention-placeholder-fg, var(--xh-fg-subtle));
+  }
+
+  [data-scope='mention'][data-part='input']:hover:not(:disabled) {
+    border-color: var(--xh-mention-input-border-hover, var(--xh-_mention-input-border-hover));
+  }
+
+  [data-scope='mention'][data-part='input']:focus-visible {
+    border-color: var(--xh-mention-input-border-focus, var(--xh-_mention-ring));
+    outline: var(--xh-ring-width) solid var(--xh-_mention-ring);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 输入框是单体表单控件，禁用走原生 disabled（候选那边一律 aria-disabled） */
+  [data-scope='mention'][data-part='input']:disabled {
+    background: var(--xh-mention-input-bg-disabled, var(--xh-bg-subtle));
+    color: var(--xh-fg-disabled);
+    /* 禁用时连拉伸把手也一并收走，免得留一个拖得动却改不了内容的角 */
+    resize: none;
+    cursor: not-allowed;
+  }
+
+  /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
+  [data-scope='mention'][data-part='positioner'] {
+    position: fixed;
+    z-index: var(--xh-layer-popover);
+    /* 空壳不吃指针，交互只发生在 content 上 */
+    pointer-events: none;
+  }
+
+  /* 输入框被滚出可视区：整个浮层随之收起 */
+  [data-scope='mention'][data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  [data-scope='mention'][data-part='content'] {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: var(--xh-mention-content-min-w, var(--xh-overlay-min-w));
+    max-inline-size: var(--xh-mention-content-max-w, var(--xh-overlay-max-w));
+    max-block-size: var(--xh-mention-content-max-h, var(--xh-overlay-max-h));
+    padding-block: var(--xh-mention-content-py, var(--xh-space-1));
+    padding-inline: var(--xh-mention-content-px, var(--xh-space-1));
+    border: var(--xh-stroke-thin) solid var(--xh-mention-content-border, var(--xh-border-default));
+    border-radius: var(--xh-mention-content-radius, var(--xh-shape-surface));
+    background: var(--xh-mention-content-bg, var(--xh-bg-surface));
+    color: var(--xh-mention-content-fg, var(--xh-fg-default));
+    box-shadow: var(--xh-mention-content-shadow, var(--xh-elevation-2));
+    overflow-y: auto;
+    pointer-events: auto;
+  }
+
+  /* display 会盖掉 hidden 属性的 UA 规则，收起态显式让位 */
+  [data-scope='mention'][data-part='content'][hidden] {
+    display: none;
+  }
+
+  /* 宿主把候选全筛没了：浮层还开着，但这一副框壳没有内容可框，整个让位。
+     组件不替宿主判空——「没有匹配项」要不要说话、说什么，是宿主的事 */
+  [data-scope='mention'][data-part='content']:empty {
+    display: none;
+  }
+
+  /* 列表从不承载焦点（焦点恒在输入框，高亮走 aria-activedescendant），
+     可滚动容器在某些浏览器里会被自动塞进 Tab 序列，落焦时不画环 */
+  [data-scope='mention'][data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='mention'][data-part='content'][data-state='open'] {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='mention'][data-part='item'] {
+    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));
+    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));
+    /* 行高留出文字的上下伸展空间，行内那层 overflow:hidden 才不会把字削掉 */
+    line-height: var(--xh-mention-item-leading, var(--xh-leading-normal));
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  [data-scope='mention'][data-part='item'][hidden] {
+    display: none;
+  }
+
+  /* 只认 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));
+  }
+
+  /* 禁用走 aria-disabled 而非原生 disabled（原生 disabled 不派 click，禁用守卫就走不到），
+     所以只能靠 data-disabled 表达，写 :disabled 永远不命中 */
+  [data-scope='mention'][data-part='item'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='mention'][data-part='item-text'] {
+    flex: 1;
+    /* 弹性项默认 min-width: auto 不肯收缩到内容以下，省略号因此永不生效 */
+    min-inline-size: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  [data-scope='mention'][data-part='item-text'][hidden] {
+    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

@@ -0,0 +1,144 @@
+@layer xihan.components {
+  /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
+  [data-scope='menu'][data-part='positioner'] {
+    position: fixed;
+    z-index: var(--xh-layer-popover);
+    /* 空壳不吃指针，交互只发生在 content 上 */
+    pointer-events: none;
+  }
+
+  /* 锚点被滚出可视区：整个浮层随之收起 */
+  [data-scope='menu'][data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  [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-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));
+
+    display: flex;
+    flex-direction: column;
+    min-inline-size: var(--xh-menu-min-w, var(--xh-overlay-menu-min-w));
+    max-inline-size: var(--xh-menu-max-w, var(--xh-overlay-max-w));
+    padding-block: var(--xh-menu-py, var(--xh-space-1));
+    padding-inline: var(--xh-menu-px, var(--xh-space-1));
+    border: var(--xh-stroke-thin) solid var(--xh-menu-border, var(--xh-border-default));
+    border-radius: var(--xh-menu-radius, var(--xh-shape-surface));
+    background: var(--xh-menu-bg, var(--xh-bg-surface));
+    color: var(--xh-menu-fg, var(--xh-fg-default));
+    box-shadow: var(--xh-menu-shadow, var(--xh-elevation-2));
+    pointer-events: auto;
+  }
+
+  /* display 会盖掉 hidden 属性的 UA 规则，收起态显式让位 */
+  [data-scope='menu'][data-part='content'][hidden] {
+    display: none;
+  }
+
+  /* 容器只是焦点域兜底落点，落焦不画环：高亮永远长在条目上 */
+  [data-scope='menu'][data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='menu'][data-part='content'][data-state='open'] {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在 content 的基础规则里。条目内外边距缺省档本就不在 control-h/px 那把尺上
+     （高度由 padding 撑出来、行内内缩取的是 sm 档），故按 space 档上下各挪一级 */
+  [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-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-gap: var(--xh-control-gap-lg);
+    --xh-_menu-font-size: var(--xh-font-size-lg);
+  }
+
+  [data-scope='menu'][data-part='item'] {
+    display: flex;
+    align-items: center;
+    gap: var(--xh-menu-item-gap, var(--xh-_menu-item-gap));
+    padding-block: var(--xh-menu-item-py, var(--xh-_menu-item-py));
+    padding-inline: var(--xh-menu-item-px, var(--xh-_menu-item-px));
+    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);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  /* 键盘高亮与指针高亮共用一套底色：条目本身承载焦点，不另画描边 */
+  [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));
+  }
+
+  [data-scope='menu'][data-part='item']:focus {
+    outline: none;
+  }
+
+  [data-scope='menu'][data-part='item'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='menu'][data-part='separator'] {
+    block-size: var(--xh-menu-separator-thickness, var(--xh-stroke-thin));
+    margin-block: var(--xh-menu-separator-my, var(--xh-space-1));
+    background: var(--xh-menu-separator-color, var(--xh-border-default));
+  }
+
+  /* 箭头是旋转 45° 的方块，只保留朝向锚点那两条边的描边；
+     引擎不产出箭头偏移，因此沿交叉轴固定居中 */
+  [data-scope='menu'][data-part='arrow'] {
+    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));
+    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);
+    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);
+    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);
+    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);
+    border-block-end: 0;
+    border-inline-start: 0;
+  }
+}

package/css/menubar.css

@@ -0,0 +1,271 @@
+@layer xihan.components {
+  /* 一排 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-2);
+    --xh-_menubar-item-px: var(--xh-control-px-sm);
+    --xh-_menubar-font-size: var(--xh-text-body-size);
+
+    /* 高亮底随语气走：展开着的那张菜单的 trigger 与菜单里的高亮条目共用这一档。
+       没写 data-tone 时 --xh-_tone-subtle-hover 没被声明，退回原来的中性底。
+       聚焦环不在其列，它恒是 --xh-ring-focus */
+    --xh-_menubar-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+
+    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));
+  }
+
+  [data-scope='menubar'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  [data-scope='menubar'][data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里。内边距的缺省档已经落在控件内边距尺的 sm 那一格，
+     往下没有更小的一格，sm 档改取空间尺；lg 档回到控件尺的下一格 */
+  [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-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-font-size: var(--xh-font-size-lg);
+  }
+
+  /* root 只是 roving tabindex 的兜底落点，焦点转投给 trigger 之后就不再停留，不画环 */
+  [data-scope='menubar'][data-part='root']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='menubar'][data-part='root'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  [data-scope='menubar'][data-part='trigger'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: var(--xh-menubar-trigger-gap, var(--xh-control-gap-sm));
+    padding-block: var(--xh-menubar-trigger-py, var(--xh-_menubar-trigger-py));
+    padding-inline: var(--xh-menubar-trigger-px, var(--xh-_menubar-trigger-px));
+    border: none;
+    border-radius: var(--xh-menubar-trigger-radius, var(--xh-shape-control));
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: var(--xh-menubar-trigger-font-size, var(--xh-_menubar-font-size));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  [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));
+  }
+
+  /* trigger 自带 Tab 位（整条菜单栏唯一的那个），必须画得出焦点 */
+  [data-scope='menubar'][data-part='trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 禁用走 aria-disabled 而非原生 disabled：trigger 仍要可聚焦（它还得当方向键的起点），
+     所以只能靠 data-disabled 表达，写 :disabled 永远不命中 */
+  [data-scope='menubar'][data-part='trigger'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
+  [data-scope='menubar'][data-part='positioner'] {
+    position: fixed;
+    z-index: var(--xh-layer-popover);
+    /* 空壳不吃指针，交互只发生在 content 上 */
+    pointer-events: none;
+  }
+
+  /* 锚点被滚出可视区：整个浮层随之收起 */
+  [data-scope='menubar'][data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  [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));
+    pointer-events: auto;
+  }
+
+  /* display 会盖掉 hidden 属性的 UA 规则，收起态显式让位。
+     连接层给 content 发 hidden，这一条漏了整张菜单就永远收不起来 */
+  [data-scope='menubar'][data-part='content'][hidden] {
+    display: none;
+  }
+
+  /* 容器只是"没有条目锚点时"的 Tab 兜底落点，落焦不画环：高亮永远长在条目上 */
+  [data-scope='menubar'][data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  /* 展开时轻微涨开。只在切换到别张菜单时不重播——那由 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);
+  }
+
+  /* 关掉动效的用户不该被涨开动画晃一下；这里只管本组件，公共那份不动 */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='menubar'][data-part='content'][data-state='open'] {
+      animation-duration: 0.01ms;
+    }
+  }
+
+  [data-scope='menubar'][data-part='group'] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  [data-scope='menubar'][data-part='group'][hidden] {
+    display: none;
+  }
+
+  /* 分组标题不是条目、进不了导航，画成小号次要文字，
+     内缩与条目对齐（同一个 padding-inline），标题与条目文字才在一条竖线上 */
+  [data-scope='menubar'][data-part='group-label'] {
+    display: block;
+    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-weight: var(--xh-menubar-group-label-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-none);
+    user-select: none;
+  }
+
+  [data-scope='menubar'][data-part='group-label'][hidden] {
+    display: none;
+  }
+
+  [data-scope='menubar'][data-part='item'] {
+    display: flex;
+    align-items: center;
+    gap: var(--xh-menubar-item-gap, var(--xh-control-gap-md));
+    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));
+    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);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  /* 条目可以按需收起（按上下文过滤掉的命令），有 display 就得补这条 */
+  [data-scope='menubar'][data-part='item'][hidden] {
+    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));
+  }
+
+  [data-scope='menubar'][data-part='item']:focus {
+    outline: none;
+  }
+
+  [data-scope='menubar'][data-part='item'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='menubar'][data-part='item-text'] {
+    display: block;
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  [data-scope='menubar'][data-part='item-text'][hidden] {
+    display: none;
+  }
+
+  /* 标记位（勾选符号 / 图标 / 快捷键提示）：定宽占位，切换内容不引起行宽抖动 */
+  [data-scope='menubar'][data-part='item-indicator'] {
+    display: inline-flex;
+    flex: none;
+    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));
+  }
+
+  [data-scope='menubar'][data-part='item-indicator'][hidden] {
+    display: none;
+  }
+
+  [data-scope='menubar'][data-part='item-indicator'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 分隔线横跨菜单，与菜单栏自身的 orientation 无关：菜单永远是一列条目。
+     不给 display，因此 UA 的 [hidden]{display:none} 自己就压得住 */
+  [data-scope='menubar'][data-part='separator'] {
+    block-size: var(--xh-menubar-separator-thickness, var(--xh-stroke-thin));
+    margin-block: var(--xh-menubar-separator-my, var(--xh-space-1));
+    background: var(--xh-menubar-separator-color, var(--xh-border-default));
+  }
+}
+
+@layer xihan.motion {
+  /* 自带前缀独占一个名字，不动公共的那份关键帧 */
+  @keyframes xh-menubar-in {
+    from {
+      opacity: 0;
+      scale: 0.96;
+    }
+
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+}

package/css/motion.css

@@ -0,0 +1,58 @@
+@layer xihan.motion {
+  @keyframes xh-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes xh-fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes xh-dialog-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px) scale(0.98);
+    }
+
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @keyframes xh-dialog-out {
+    from {
+      opacity: 1;
+      transform: none;
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(8px) scale(0.98);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='dialog'] [data-part],
+    [data-scope='button'] [data-part] {
+      animation-duration: 0.01ms !important;
+    }
+  }
+}