@xihan-ui/styles 2.0.0 → 3.0.0

package/css/marquee.css

@@ -5,6 +5,9 @@
 
 /* 定义 marquee 样式。 */
 
+/* 暂停开关走动作控件配方；独立皮肤同时传递引入，full bundle 递归去重。 */
+@import '../family/action-control.css';
+
 @layer xihan.motion {
   /*
    * 横轴一条、纵轴一条。四个方向乘两种铺法共八组起止点，若不外提就要写八份几乎一样的关键帧。
@@ -46,11 +49,13 @@
    * 后代式会一路匹配到别人家的节点上去。
    *
    * 一圈的时长 = 一份内容的长度 ÷ 每秒像素数。--xh-_marquee-span 是一份内容在滚动轴上的长度，
-   * 单位像素、写成纯数字。CSS 读不到布局尺寸，这里给的是缺省值；内容明显长于或短于它时，
-   * 由使用者改写 --xh-marquee-span 对齐真实长度，速度才逐字等于每秒那么多像素。
+   * 单位像素、写成纯数字：连接层挂载后实测、写成内联的 --xh-_marquee-measured-span，量到之前
+   * （无布局宿主、首帧）退回缺省值。使用者写了 --xh-marquee-span 以它为准。
    */
   [data-scope='marquee'][data-part='root'] {
-    --xh-_marquee-span: var(--xh-marquee-span, 600);
+    /* 暂停开关的边长：开关用它定尺，两端渐隐按它给开关留出位置，两处同源 */
+    --xh-_marquee-trigger-size: var(--xh-control-h-md);
+    --xh-_marquee-span: var(--xh-marquee-span, var(--xh-_marquee-measured-span, 600));
     --xh-_marquee-speed: var(--xh-marquee-speed, 60);
 
     /* 铺一份时一圈走两倍自身长度：从窗口一侧整段进来，再整段出到另一侧 */
@@ -71,6 +76,9 @@
     --xh-_marquee-from: 100%;
     --xh-_marquee-to: -100%;
 
+    /* 暂停开关压在窗口一端，定位基准是窗口；isolation 把开关的层号关在本组件内，不参与页面级层序 */
+    position: relative;
+    isolation: isolate;
     display: flex;
     overflow: hidden;
     max-inline-size: 100%;
@@ -134,15 +142,65 @@
     --xh-_marquee-to: 0%;
   }
 
-  /* 悬停暂停：只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态 */
+  /*
+   * 两端渐隐：窗口沿滚动方向两端各留一段遮罩，内容从一端淡入、从另一端淡出。
+   * 遮罩只画在窗口上，轨道照常整段移动；遮罩是静态的，不参与动画。
+   * 遮罩的几层取值都经私有槽下发，真正写 mask 的只有这一条：减弱动效与打印只需在同一特指度上盖掉它。
+   */
+  [data-scope='marquee'][data-part='root'][data-fade] {
+    --xh-_marquee-fade-size: var(--xh-marquee-fade-size, var(--xh-space-6));
+    /* 横排沿行内方向：角度乘方向符号，rtl 下行首在右，两端各自仍是淡入与淡出 */
+    --xh-_marquee-fade-dir: calc(90deg * var(--xh-direction-sign));
+    /* 行尾那一段收到哪里为止：没有暂停开关时收到窗口尽头 */
+    --xh-_marquee-fade-reserve: 0px;
+    --xh-_marquee-fade-reserve-size: 0 0;
+    --xh-_marquee-fade-reserve-at: var(--xh-direction-end) center;
+    /* 两层：沿滚动方向的 alpha 坡道，与给暂停开关留出的实心块；两种写法共用这一份 */
+    --xh-_marquee-fade-mask:
+      linear-gradient(var(--xh-_marquee-fade-dir), transparent 0, black var(--xh-_marquee-fade-size), black calc(100% - var(--xh-_marquee-fade-reserve) - var(--xh-_marquee-fade-size)), transparent calc(100% - var(--xh-_marquee-fade-reserve))),
+      linear-gradient(black, black);
+
+    -webkit-mask-image: var(--xh-_marquee-fade-mask);
+    mask-image: var(--xh-_marquee-fade-mask);
+    -webkit-mask-size: 100% 100%, var(--xh-_marquee-fade-reserve-size);
+    mask-size: 100% 100%, var(--xh-_marquee-fade-reserve-size);
+    -webkit-mask-position: 0 0, var(--xh-_marquee-fade-reserve-at);
+    mask-position: 0 0, var(--xh-_marquee-fade-reserve-at);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
+  [data-scope='marquee'][data-part='root'][data-fade][data-orientation='vertical'] {
+    --xh-_marquee-fade-dir: to bottom;
+  }
+
+  /*
+   * 暂停开关压在行尾一端：行尾那段渐隐收到开关之前，第二层实心遮罩把开关所在那一块整块露出来，
+   * 开关不被淡掉，开关与淡出段之间也不留一条没淡的缝。竖排时开关在块末那一角，露出的是那一角的方块。
+   */
+  [data-scope='marquee'][data-part='root'][data-fade]:has(> [data-scope='marquee'][data-part='autoplay-trigger']:not([hidden])) {
+    --xh-_marquee-fade-reserve: calc(var(--xh-marquee-trigger-inset, var(--xh-space-1)) + var(--xh-_marquee-trigger-size));
+    --xh-_marquee-fade-reserve-size: var(--xh-_marquee-fade-reserve) 100%;
+  }
+
+  [data-scope='marquee'][data-part='root'][data-fade][data-orientation='vertical']:has(> [data-scope='marquee'][data-part='autoplay-trigger']:not([hidden])) {
+    --xh-_marquee-fade-reserve-size: var(--xh-_marquee-fade-reserve) var(--xh-_marquee-fade-reserve);
+    --xh-_marquee-fade-reserve-at: var(--xh-direction-end) bottom;
+  }
+
+  /*
+   * 悬停暂停：只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态。
+   * 指针停在暂停开关上不算：那里显示的是开关自己的状态，按下「继续」时指针还在开关上，
+   * 若照样算悬停，轨道要等指针挪开才动，这一下按了像没按。
+   */
   @media (hover: hover) {
-    [data-scope='marquee'][data-part='root'][data-pause-on-hover]:hover {
+    [data-scope='marquee'][data-part='root'][data-pause-on-hover]:hover:not(:has(> [data-scope='marquee'][data-part='autoplay-trigger']:hover)) {
       --xh-_marquee-play: paused;
     }
   }
 
-  /* 键盘用户没有悬停：焦点落进窗口时同样停住，否则轨道里的链接刚聚焦就被带走了 */
-  [data-scope='marquee'][data-part='root'][data-pause-on-hover]:focus-within {
+  /* 键盘用户没有悬停：焦点落进窗口时同样停住，否则轨道里的链接刚聚焦就被带走了；焦点在暂停开关上同理不算 */
+  [data-scope='marquee'][data-part='root'][data-pause-on-hover]:focus-within:not(:has(> [data-scope='marquee'][data-part='autoplay-trigger']:focus)) {
     --xh-_marquee-play: paused;
   }
 
@@ -151,6 +209,56 @@
     --xh-_marquee-play: paused;
   }
 
+  /*
+   * 暂停开关：压在窗口行尾一端、上下居中；竖排时落在块末那一角。
+   * 窗口是裁切内容的单行，开关放进去会被轨道挤出视野，只能浮在上面。
+   * 盒型、描边、字色与 0.97 按压由动作控件配方按 icon 档的描边档给出；描边档静息不填底，
+   * 这里把底换成不透明的面，悬停 / 按下走同一承载面的不透明阶梯，后面走过的内容才透不上来。
+   */
+  [data-scope='marquee'][data-part='autoplay-trigger'] {
+    --xh-action-bg-rest: var(--xh-marquee-trigger-bg, var(--xh-bg-surface));
+    --xh-action-bg-hover: var(--xh-marquee-trigger-bg-hover, var(--xh-bg-subtle-opaque));
+    --xh-action-bg-pressed: var(--xh-marquee-trigger-bg-active, var(--xh-bg-subtle-hover-opaque));
+    --xh-action-bg-focus-visible: var(--xh-marquee-trigger-bg, var(--xh-bg-surface));
+    /* 作者塞进来的图标跟着 icon 档走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-marquee-icon-size, var(--xh-_action-profile-glyph-size));
+    /* 边长与两端渐隐给开关留的位置同源，都读根上那一支 */
+    --xh-action-visual-size: var(--xh-_marquee-trigger-size);
+
+    position: absolute;
+    z-index: 1;
+    inset-block: 0;
+    inset-inline-end: var(--xh-marquee-trigger-inset, var(--xh-space-1));
+    margin-block: auto;
+  }
+
+  [data-scope='marquee'][data-part='root'][data-orientation='vertical'] > [data-scope='marquee'][data-part='autoplay-trigger'] {
+    inset-block-start: auto;
+    inset-block-end: var(--xh-marquee-trigger-inset, var(--xh-space-1));
+    margin-block: 0;
+  }
+
+  [data-scope='marquee'][data-part='autoplay-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 不给内容时画图标：在走画暂停，停住画播放；图标随动作，与可及名同一口径 */
+  [data-scope='marquee'][data-part='autoplay-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-pause) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-pause) center / contain no-repeat;
+  }
+
+  [data-scope='marquee'][data-part='autoplay-trigger'][data-state='paused']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-play);
+    mask-image: var(--xh-glyph-mark-play);
+  }
+
   /* 轨道：走的是这一层，一圈走完立刻回到起点接着走 */
   [data-scope='marquee'][data-part='content'] {
     display: flex;
@@ -196,6 +304,17 @@
     [data-scope='marquee'][data-part='root'] {
       overflow: auto;
     }
+
+    /* 停下后窗口改成可滚：两端再淡就把可滚内容的首尾藏起来了 */
+    [data-scope='marquee'][data-part='root'][data-fade] {
+      -webkit-mask-image: none;
+      mask-image: none;
+    }
+
+    /* 轨道已经停在起点：没有可停的东西，开关只会挡住可滚的内容 */
+    [data-scope='marquee'][data-part='autoplay-trigger'] {
+      display: none;
+    }
   }
 
   :where([data-motion='reduce']) [data-scope='marquee'][data-part='content'] {
@@ -206,6 +325,15 @@
     overflow: auto;
   }
 
+  :where([data-motion='reduce']) [data-scope='marquee'][data-part='root'][data-fade] {
+    -webkit-mask-image: none;
+    mask-image: none;
+  }
+
+  :where([data-motion='reduce']) [data-scope='marquee'][data-part='autoplay-trigger'] {
+    display: none;
+  }
+
   @media print {
     /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
        取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
@@ -218,5 +346,33 @@
     [data-scope='marquee'][data-part='root'] {
       overflow: auto;
     }
+
+    [data-scope='marquee'][data-part='root'][data-fade] {
+      -webkit-mask-image: none;
+      mask-image: none;
+    }
+
+    [data-scope='marquee'][data-part='autoplay-trigger'] {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='marquee'][data-part='autoplay-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='marquee'][data-part='autoplay-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='marquee'][data-part='autoplay-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
   }
 }

package/css/matrix-code.css

@@ -33,7 +33,7 @@
 
     /* 占位与码面之间来回时，底色与那圈描边淡变 */
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 

package/css/mention.css

@@ -6,9 +6,11 @@
 /* Mention 独立皮肤同时传递引入字段视觉盒与浮层集合行；full bundle 递归去重。 */
 @import '../family/field-chrome.css';
 @import '../family/collection-item.css';
+@import '../family/loading-ring.css';
 
 /* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
 @import '../family/motion.css';
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -165,6 +167,13 @@
     display: none;
   }
 
+  /* 多行形态：正文可以换行，框随 rows 定起始高度、不钉单行控件高（家族的多行布局给）；
+     框自己就是 chrome，家族多行布局把上下内衬归零，这里按文本字段多行档同一支令牌补回，只许纵向拉伸 */
+  [data-scope='mention'][data-part='input'][data-xh-field-layout='textarea'] {
+    padding-block: var(--xh-mention-textarea-py, var(--xh-space-2));
+    resize: vertical;
+  }
+
   /* 输入框自身即 chrome，家族按 data-xh-field-input 给的占位色命不中它，占位色仍由本皮肤给 */
   [data-scope='mention'][data-part='input']::placeholder {
     color: var(--xh-mention-placeholder-fg, var(--xh-fg-subtle));
@@ -188,6 +197,15 @@
   }
 
   [data-scope='mention'][data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-mention-content-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-mention-content-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-mention-content-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-mention-content-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-mention-content-backdrop, var(--xh-_material-backdrop));
+    --xh-frosted-highlight: var(--xh-mention-content-highlight, var(--xh-_material-highlight));
+
     position: relative;
     display: flex;
     flex-direction: column;
@@ -201,31 +219,13 @@
     max-block-size: min(var(--xh-mention-content-max-h, var(--xh-overlay-max-h)), var(--xh-_mention-available-h));
     padding-block: var(--xh-mention-content-py, var(--xh-space-1));
     padding-inline: var(--xh-mention-content-px, var(--xh-space-1));
-    border: var(--xh-stroke-thin) solid var(--xh-mention-content-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-mention-content-radius, var(--xh-shape-overlay));
-    background: var(--xh-mention-content-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-mention-content-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-mention-content-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-mention-content-backdrop, var(--xh-material-frosted-backdrop));
-    backdrop-filter: var(--xh-mention-content-backdrop, var(--xh-material-frosted-backdrop));
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
     pointer-events: auto;
   }
 
-  /* 光效仅属于唯一外壳，不拦截候选或同级状态文字。 */
-  [data-scope='mention'][data-part='content']::before {
-    content: '';
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline: 0;
-    block-size: var(--xh-stroke-thin);
-    border-radius: inherit;
-    background: var(--xh-mention-content-highlight, var(--xh-material-frosted-highlight));
-    pointer-events: none;
-  }
-
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致：
      收起态连接层会给 content 打 hidden，而上面那条 display 正是要盖掉 UA 的
      [hidden]{display:none}——退场动画得先能播。presence 读的是 content 的 animationName，
@@ -240,8 +240,6 @@
 
   [data-scope='mention'][data-part='content'][data-state='open'] {
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
-    /* 只在开着的这一档挂：合成层随 data-state 一起收走，收起后不再占着 */
-    will-change: opacity, translate;
   }
 
   /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
@@ -258,7 +256,7 @@
     --xh-collection-inline-padding: var(--xh-mention-item-px, var(--xh-_mention-item-px));
     --xh-collection-gap: var(--xh-mention-item-gap, var(--xh-_mention-gap));
     --xh-collection-font-size: var(--xh-mention-item-font-size, var(--xh-_mention-font-size));
-    --xh-collection-radius: var(--xh-mention-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-mention-item-radius, var(--xh-shape-inset));
     --xh-collection-fg-rest: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
@@ -340,6 +338,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: var(--xh-_mention-gap);
     grid-area: 1 / 1;
     padding-block: var(--xh-mention-loading-py, var(--xh-space-3));
     padding-inline: var(--xh-mention-loading-px, var(--xh-_mention-item-px));
@@ -353,11 +352,26 @@
     display: none;
   }
 
+  /* 首次加载：文案前一枚加载环，由加载环配方画（连接层投影 data-xh-loading-ring 与 data-loading），
+     直径取所在尺寸档的图标档 */
+  [data-scope='mention'][data-part='loading']::before {
+    content: '';
+    flex: none;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+  }
+
   [data-scope='mention'][data-part='empty']:empty,
   [data-scope='mention'][data-part='loading']:empty {
     display: none;
   }
 
+  /* 刷新：已有候选时后台在取，保留上一帧，候选按 micro 淡下，数据到了再淡回；在途占位此时让位。
+     淡的是候选不是面：content 是整块磨砂面，整块淡下去面就透了 */
+  [data-scope='mention'][data-part='content'][aria-busy='true'] [data-scope='mention'][data-part='item'] {
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
   /* 手写结构可以把全部候选留在 DOM 里只加 hidden；没有可见 item 也没有状态文案时，
      打开的空 listbox 不画无意义框。closed 不命中，content 仍能完成 Presence 退场。 */
   [data-scope='mention'][data-part='positioner']:not(:has(

package/css/menu.css

@@ -7,7 +7,9 @@
 
 /* 共享关键帧由 family/motion.css 提供，条目走 Collection Item 家族；本皮肤 @import 它们，单独引入仍成立。 */
 @import '../family/collection-item.css';
+@import '../family/menu-choice.css';
 @import '../family/motion.css';
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -61,14 +63,23 @@
   }
 
   /* 触发器的长相归作者，皮肤只表达展开态：展开着的那一张是打开路径，落与家族 hover 同档的中性面——
-     打开中不是选中，不用品牌色、不接语气（§7.3）；哪一张开着由浮层本身说明。不加粗：加粗会推挤相邻内容 */
+     打开中不是选中，不用品牌色、不接语气；哪一张开着由浮层本身说明。不加粗：加粗会推挤相邻内容 */
   [data-scope='menu'][data-part='trigger']:not([data-disabled])[data-state='open'] {
     background: var(--xh-menu-trigger-bg-active, var(--xh-bg-subtle));
   }
 
   [data-scope='menu'][data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-menu-content-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-menu-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-menu-content-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-menu-content-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-menu-backdrop, var(--xh-_material-backdrop));
+    --xh-frosted-highlight: var(--xh-menu-highlight, var(--xh-_material-highlight));
+
     /* 条目外的字形（分组标题等）按档取尺，缺省 md，随 data-size 换档；条目里作者放的图标由家族随
-       data-xh-collection-size 下发（§6.5）。菜单自绘的状态字形（标记位的盒、子菜单的展开 chevron）不读这支：
+       data-xh-collection-size 下发。菜单自绘的状态字形（标记位的盒、子菜单的展开 chevron）不读这支：
        它们是指示符，走 --xh-control-indicator-* 一族——标记位在自己身上把 --xh-icon-size 改接到盒的尺，
        子菜单箭头走 --xh-menu-submenu-indicator-size */
     --xh-icon-size: var(--xh-menu-icon-size, var(--xh-glyph-size-md));
@@ -92,32 +103,14 @@
     max-block-size: min(var(--xh-menu-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_menu-available-h));
     padding-block: var(--xh-menu-content-py, var(--xh-surface-pad-xs));
     padding-inline: var(--xh-menu-content-px, var(--xh-surface-pad-xs));
-    border: var(--xh-stroke-thin) solid var(--xh-menu-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-menu-content-radius, var(--xh-shape-overlay));
-    background: var(--xh-menu-content-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-menu-content-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-menu-content-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-menu-backdrop, var(--xh-material-frosted-backdrop));
-    backdrop-filter: var(--xh-menu-backdrop, var(--xh-material-frosted-backdrop));
     /* 条目超过上限就在菜单内部滚。条目的焦点环是内收的，滚动容器裁在内边距缘上，环切不着。
-       浮层滚动面：到底后不把滚动链穿透给页面（§6.6） */
+       浮层滚动面：到底后不把滚动链穿透给页面 */
     overflow-y: auto;
     overscroll-behavior: contain;
     pointer-events: auto;
   }
 
-  /* 顶光是独立装饰层，不替换真实边框；高对比/强制色归零后四边轮廓仍完整。 */
-  [data-scope='menu'][data-part='content']::before {
-    content: '';
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline: 0;
-    block-size: var(--xh-stroke-thin);
-    border-radius: inherit;
-    background: var(--xh-menu-highlight, var(--xh-material-frosted-highlight));
-    pointer-events: none;
-  }
-
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致：
      收起态连接层会给 content 打 hidden，而上面那条 display 正是要盖掉 UA 的
      [hidden]{display:none}——退场动画得先能播。presence 读的是 content 的 animationName，
@@ -129,9 +122,8 @@
     outline: none;
   }
 
-  /* 在场那一档才提前备好合成层：属性随 data-state 一起消失，收起后不长期占着 */
-  [data-scope='menu'][data-part='content'][data-state='open'] {
-    will-change: opacity, translate;
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='menu'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -170,7 +162,7 @@
     --xh-collection-inline-padding: var(--xh-menu-item-px, var(--xh-_menu-item-px));
     --xh-collection-gap: 0;
     --xh-collection-font-size: var(--xh-menu-item-font-size, var(--xh-_menu-font-size));
-    --xh-collection-radius: var(--xh-menu-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-menu-item-radius, var(--xh-shape-inset));
     --xh-collection-fg-rest: var(--xh-menu-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-menu-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-menu-item-fg, var(--xh-material-frosted-fg));
@@ -211,7 +203,7 @@
     display: none;
   }
 
-  /* 标记位（勾选符号 / 图标）：定宽占位，切换内容不引起行宽抖动。盒是指示符（§6.5）：按指示符档取尺，
+  /* 标记位（勾选符号 / 图标）：定宽占位，切换内容不引起行宽抖动。盒是指示符：按指示符档取尺，
      与 Cascader / Select 的标记位同走 --xh-control-indicator-size，不读家族按档下发的 --xh-icon-size——
      按图标档取的 20px 会比同一行 16px 的指示符档大一圈。盒在自己身上把 --xh-icon-size 改接到盒的尺，
      作者塞进标记位的 XhIcon 与盒同尺；条目上那支只管作者直接放进条目里的图标 */
@@ -241,7 +233,8 @@
     order: 2;
     min-inline-size: 0;
     color: var(--xh-menu-item-description-fg, var(--xh-material-frosted-fg-muted));
-    font-size: var(--xh-menu-item-description-font-size, var(--xh-text-caption-size));
+    /* 与同一行的快捷键、Select 等列表的说明同档：控件次级字号，不取 caption 令牌 */
+    font-size: var(--xh-menu-item-description-font-size, var(--xh-control-caption-md));
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -261,7 +254,7 @@
   }
 
   /* 带子菜单的条目行尾画右向小箭头：不点开也看得出还有下一级。
-     箭头与作者内容同排，用自动外距推到行尾。箭头是指示符（§6.5）：与标记位的盒同走
+     箭头与作者内容同排，用自动外距推到行尾。箭头是指示符：与标记位的盒同走
      --xh-control-indicator-size，不读 --xh-icon-size——按图标档取的 20px 会比 16px 的标记位盒大一圈 */
   [data-scope='menu'][data-part='item'][aria-haspopup='menu']::after {
     content: '';
@@ -349,4 +342,23 @@
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='menu'][data-part='item'][aria-haspopup='menu']::after {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='menu'][data-part='item'][aria-haspopup='menu']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after {
+      background-color: HighlightText;
+    }
+
+    [data-scope='menu'][data-part='item'][aria-haspopup='menu']:is([aria-disabled='true'], [data-disabled])::after {
+      background-color: GrayText;
+    }
+  }
 }

package/css/menubar.css

@@ -7,7 +7,9 @@
 
 /* 共享关键帧由 family/motion.css 提供，条目走 Collection Item 家族；本皮肤 @import 它们，单独引入仍成立。 */
 @import '../family/collection-item.css';
+@import '../family/menu-choice.css';
 @import '../family/motion.css';
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -51,8 +53,8 @@
 
   /* 入口归 Collection Item 展开路径 / 打开中（nav 语境）：几何、字号与面全经家族桥接槽。静息字色取 default
      （菜单名不是次要文字，不取 nav 缺省的 muted），悬停走白底承载 hover 100，展开着的那一张由连接层投影
-     data-in-path，家族给与悬停同档的中性面——打开中不是选中，不用品牌色、不接语气、不加粗（§7.3）；
-     按下 pressed 200 只换面不缩放（§9.2）；禁用走 aria-disabled，家族给禁用字色与 not-allowed。
+     data-in-path，家族给与悬停同档的中性面——打开中不是选中，不用品牌色、不接语气、不加粗；
+     按下 pressed 200 只换面不缩放；禁用走 aria-disabled，家族给禁用字色与 not-allowed。
      本条 (0,2,0) 压过家族基础块 (0,1,0)，不能再写 background / color / cursor */
   [data-scope='menubar'][data-part='trigger'] {
     --xh-collection-block-padding: var(--xh-menubar-trigger-py, var(--xh-_menubar-trigger-py));
@@ -132,7 +134,7 @@
      缺省档写在第一条：trigger 与条目的行内内缩都走 control-px 档（随密度轴）、纵向走 space 档，换档各挪一级 */
   [data-scope='menubar']:is([data-part='root'], [data-part='positioner']) {
     /* 条目外的字形（分组标题、入口）按档取尺，缺省 md，随 data-size 换档；同样声明在 positioner 上，被搬走的
-       浮层才拿得到；条目里作者放的图标由家族随 data-xh-collection-size 下发（§6.5）。菜单栏自绘的状态字形（标记位的盒、
+       浮层才拿得到；条目里作者放的图标由家族随 data-xh-collection-size 下发。菜单栏自绘的状态字形（标记位的盒、
        盒里兜底的勾、子菜单的展开 chevron）不读这支：它们是指示符，走 --xh-control-indicator-* 一族——标记位在
        自己身上把 --xh-icon-size 改接到盒的尺，子菜单箭头走 --xh-menubar-submenu-indicator-size */
     --xh-icon-size: var(--xh-menubar-icon-size, var(--xh-glyph-size-md));
@@ -166,6 +168,15 @@
   }
 
   [data-scope='menubar'][data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-menubar-content-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-menubar-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-menubar-content-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-menubar-content-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-menubar-backdrop, var(--xh-_material-backdrop));
+    --xh-frosted-highlight: var(--xh-menubar-highlight, var(--xh-_material-highlight));
+
     position: relative;
     display: flex;
     flex-direction: column;
@@ -178,32 +189,14 @@
     max-block-size: min(var(--xh-menubar-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_menubar-available-h));
     padding-block: var(--xh-menubar-content-py, var(--xh-surface-pad-xs));
     padding-inline: var(--xh-menubar-content-px, var(--xh-surface-pad-xs));
-    border: var(--xh-stroke-thin) solid var(--xh-menubar-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-menubar-content-radius, var(--xh-shape-overlay));
-    background: var(--xh-menubar-content-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-menubar-content-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-menubar-content-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-menubar-backdrop, var(--xh-material-frosted-backdrop));
-    backdrop-filter: var(--xh-menubar-backdrop, var(--xh-material-frosted-backdrop));
     /* 条目超过上限就在菜单内部滚。条目的焦点环是内收的，滚动容器裁在内边距缘上，环切不着。
-       浮层滚动面：到底后不把滚动链穿透给页面（§6.6） */
+       浮层滚动面：到底后不把滚动链穿透给页面 */
     overflow-y: auto;
     overscroll-behavior: contain;
     pointer-events: auto;
   }
 
-  /* 顶光叠在真实四边 border 内侧；强制色撤掉装饰后，完整轮廓仍然存在。 */
-  [data-scope='menubar'][data-part='content']::before {
-    content: '';
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline: 0;
-    block-size: var(--xh-stroke-thin);
-    border-radius: inherit;
-    background: var(--xh-menubar-highlight, var(--xh-material-frosted-highlight));
-    pointer-events: none;
-  }
-
   /* display 会盖掉 hidden 属性的 UA 规则，收起态显式让位。
      连接层给 content 发 hidden，这一条漏了整张菜单就永远收不起来 */
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致：
@@ -217,8 +210,6 @@
 
   /* 首开从锚点一侧淡入短移，不缩放整张菜单面。 */
   [data-scope='menubar'][data-part='content'][data-state='open'] {
-    /* 在场那一档才提前备好合成层：属性随 data-state 一起消失，收起后不长期占着 */
-    will-change: opacity, translate;
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -270,7 +261,7 @@
     --xh-collection-inline-padding: var(--xh-menubar-item-px, var(--xh-_menubar-item-px));
     --xh-collection-gap: 0;
     --xh-collection-font-size: var(--xh-menubar-item-font-size, var(--xh-_menubar-font-size));
-    --xh-collection-radius: var(--xh-menubar-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-menubar-item-radius, var(--xh-shape-inset));
     --xh-collection-fg-rest: var(--xh-menubar-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-menubar-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-menubar-item-fg, var(--xh-material-frosted-fg));
@@ -305,7 +296,7 @@
 
   /* 带子菜单的条目行尾画右向小箭头：不点开也看得出还有下一级。
      description 按 order 独占下一行，箭头仍留在主行末端。
-     箭头是指示符（§6.5）：与标记位的盒同走 --xh-control-indicator-size，不读 --xh-icon-size——
+     箭头是指示符：与标记位的盒同走 --xh-control-indicator-size，不读 --xh-icon-size——
      按图标档取的 20px 会比 16px 的标记位盒大一圈 */
   [data-scope='menubar'][data-part='item'][aria-haspopup='menu']::after {
     content: '';
@@ -337,7 +328,7 @@
     display: none;
   }
 
-  /* 标记位（勾选符号 / 图标）按作者写入的位置留在主行，不为没写的条目强制占列。盒是指示符（§6.5）：按指示符档
+  /* 标记位（勾选符号 / 图标）按作者写入的位置留在主行，不为没写的条目强制占列。盒是指示符：按指示符档
      取尺，与 Menu / ContextMenu 的标记位同走 --xh-control-indicator-size，不读家族按档下发的 --xh-icon-size——
      按图标档取的 20px 会比同一行 16px 的指示符档大一圈。盒在自己身上把 --xh-icon-size 改接到盒的尺，
      皮肤画的兜底勾与作者塞进标记位的 XhIcon 读同一把尺、与盒同边长（行尾标记不是勾选格，不取 × 0.75）；
@@ -368,7 +359,8 @@
     order: 2;
     min-inline-size: 0;
     color: var(--xh-menubar-item-description-fg, var(--xh-material-frosted-fg-muted));
-    font-size: var(--xh-menubar-item-description-font-size, var(--xh-text-caption-size));
+    /* 与同一行的快捷键、Select 等列表的说明同档：控件次级字号，不取 caption 令牌 */
+    font-size: var(--xh-menubar-item-description-font-size, var(--xh-control-caption-md));
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -439,4 +431,26 @@
       background: CanvasText;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='menubar'][data-part='item'][aria-haspopup='menu']::after,
+    [data-scope='menubar'][data-part='item-indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='menubar'][data-part='item'][aria-haspopup='menu']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after,
+    [data-scope='menubar'][data-part='item']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted])) [data-scope='menubar'][data-part='item-indicator']:empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='menubar'][data-part='item'][aria-haspopup='menu']:is([aria-disabled='true'], [data-disabled])::after,
+    [data-scope='menubar'][data-part='item']:is([aria-disabled='true'], [data-disabled]) [data-scope='menubar'][data-part='item-indicator']:empty::before {
+      background-color: GrayText;
+    }
+  }
 }