@xihan-ui/styles 1.0.0 → 2.0.0

package/css/mention.css

@@ -1,29 +1,14 @@
-@layer xihan.motion {
-  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
-     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
-  @keyframes xh-pop-in {
-    from {
-      opacity: 0;
-      scale: var(--xh-motion-scale-enter);
-    }
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
 
-    to {
-      opacity: 1;
-      scale: 1;
-    }
-  }
-  @keyframes xh-pop-out {
-    from {
-      opacity: 1;
-      scale: 1;
-    }
+/* Mention 独立皮肤同时传递引入字段视觉盒与浮层集合行；full bundle 递归去重。 */
+@import '../family/field-chrome.css';
+@import '../family/collection-item.css';
 
-    to {
-      opacity: 0;
-      scale: var(--xh-motion-scale-enter);
-    }
-  }
-}
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -36,12 +21,22 @@
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
        引擎没算（尚未落位 / 无引擎）时不额外限高 */
     --xh-_mention-available-h: 100vh;
+    /* 落定那一侧的可用宽度，同样由定位引擎经内联自定义属性写进来，行内轴据此夹取；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时退到视口宽 */
+    --xh-_mention-available-w: 100vw;
+    /* 本层先清空祖先方向，再使用实际落位方向。 */
+    --xh-_overlay-enter-up: 0;
+    --xh-_overlay-enter-down: 0;
+    --xh-_overlay-enter-left: 0;
+    --xh-_overlay-enter-right: 0;
 
     /* 候选列表的自绘条浮在内容之上：轨道不上底色，实色轨道会在列表右缘糊一条竖灰带 */
     --xh-scrollbar-track-bg: transparent;
 
     position: fixed;
-    z-index: var(--xh-mention-layer, var(--xh-layer-popover));
+    /* listbox 与同级状态文字占同一个格；content 始终是唯一拥有材质的表面。 */
+    display: grid;
+    z-index: var(--xh-mention-layer, var(--xh-_layer, var(--xh-layer-popover)));
     /* 空壳不吃指针，交互只发生在 content 上 */
     pointer-events: none;
   }
@@ -51,28 +46,46 @@
     visibility: hidden;
   }
 
+  [data-scope='mention'][data-part='positioner'][hidden] {
+    display: none;
+  }
+
+  /* 进退场按实际落位的物理方向移动，不随书写方向翻转。 */
+  [data-scope='mention'][data-part='positioner'][data-placement^='top'] {
+    --xh-_overlay-enter-down: 1;
+  }
+
+  [data-scope='mention'][data-part='positioner'][data-placement^='bottom'] {
+    --xh-_overlay-enter-up: 1;
+  }
+
+  [data-scope='mention'][data-part='positioner'][data-placement^='left'] {
+    --xh-_overlay-enter-right: 1;
+  }
+
+  [data-scope='mention'][data-part='positioner'][data-placement^='right'] {
+    --xh-_overlay-enter-left: 1;
+  }
+
   /* 私有槽同时声明在根与 positioner 上：浮层被搬到 portal 落点，不是根的后代，继承不过去 */
   [data-scope='mention']:is([data-part='root'], [data-part='positioner']) {
-    /* 尺寸档只换这五个私有槽，输入框与候选都从这两处继承它们，换档不必给每个部件各写一条选择器 */
+    /* 尺寸档只换这六个私有槽，输入框与候选都从这两处继承它们，换档不必给每个部件各写一条选择器 */
     --xh-_mention-h: var(--xh-control-h-md);
     --xh-_mention-px: var(--xh-control-px-md);
     --xh-_mention-item-py: var(--xh-list-option-py-md);
     --xh-_mention-item-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-control-font-md);
-
-    /* 形态档只换这三个槽：缺省即 outline（描边 + 画布底） */
-    --xh-_mention-input-bg: var(--xh-bg-canvas);
-    --xh-_mention-input-border: var(--xh-border-control);
-    --xh-_mention-input-border-hover: var(--xh-border-control-hover);
-
-    /* 聚焦环恒用固定环色，不随语气走 */
-    --xh-_mention-ring: var(--xh-ring-focus);
   }
 
   [data-scope='mention'][data-part='root'] {
     display: block;
+
+    /* 不传尺寸时一律这么宽，宽度不随内容走；父容器给不出这么宽时整件跟着收，地板同步让步，不越出父容器。
+       地板不高过缺省宽：使用者把缺省宽钉到底线以下时不必再放开底线 */
+    inline-size: var(--xh-mention-input-w, var(--xh-control-w));
+    min-inline-size: min(var(--xh-mention-input-w, var(--xh-control-w)), var(--xh-mention-input-min-w, var(--xh-control-min-w)), 100%);
+    max-inline-size: 100%;
   }
 
   /* 只要声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
@@ -80,6 +93,24 @@
     display: none;
   }
 
+  /* 标题：与输入框上下排，行距不留额外空白 */
+  [data-scope='mention'][data-part='label'] {
+    display: block;
+    margin-block-end: var(--xh-mention-label-gap, var(--xh-space-1));
+    color: var(--xh-mention-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-mention-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-mention-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+  }
+
+  [data-scope='mention'][data-part='label'][hidden] {
+    display: none;
+  }
+
+  [data-scope='mention'][data-part='label'][data-disabled] {
+    color: var(--xh-mention-label-fg-disabled, var(--xh-fg-subtle));
+  }
+
   /* —— 尺寸 —— */
   /* 缺省档写在上面的基础规则里 */
   [data-scope='mention']:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
@@ -87,7 +118,6 @@
     --xh-_mention-px: var(--xh-control-px-sm);
     --xh-_mention-item-py: var(--xh-list-option-py-sm);
     --xh-_mention-item-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-control-font-sm);
   }
@@ -97,132 +127,111 @@
     --xh-_mention-px: var(--xh-control-px-lg);
     --xh-_mention-item-py: var(--xh-list-option-py-lg);
     --xh-_mention-item-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-control-font-lg);
   }
 
-  /* —— 形态 —— */
-  /* 输入类不做 solid：实心底压着可编辑的正文，读起来像块不可点的色板。
-     形态只决定描边与底色怎么用，用哪族颜色由 data-tone 决定 */
-  [data-scope='mention']:is([data-part='root'], [data-part='positioner'])[data-variant='outline'] {
-    --xh-_mention-input-bg: var(--xh-bg-canvas);
-    --xh-_mention-input-border: var(--xh-border-control);
-    --xh-_mention-input-border-hover: var(--xh-border-control-hover);
-  }
-
-  /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
-  [data-scope='mention']:is([data-part='root'], [data-part='positioner'])[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-control-hover));
-  }
-
-  [data-scope='mention']:is([data-part='root'], [data-part='positioner'])[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-control-hover));
-  }
-
   /* 框与聚焦环都长在输入框自己身上：这里没有把输入框和别的控件裹成一体的输入行，
-     整个组件在视觉上就是这一个可打字的方框 */
+     整个组件在视觉上就是这一个可打字的方框。描边、底色、圆角、聚焦环、五态与悬停由 Field Chrome
+     家族画在它身上（自身聚焦同样命中家族的 :focus-within）；组件只映射既有公开槽。
+     家族 chrome 不设字号，输入框的字号仍由本皮肤给；形态三档由家族按 data-variant 生成 */
   [data-scope='mention'][data-part='input'] {
-    display: block;
+    --xh-field-control-height: var(--xh-mention-input-h, var(--xh-_mention-h));
+    --xh-field-control-padding-inline: var(--xh-mention-input-px, var(--xh-_mention-px));
+    --xh-field-control-gap: 0;
+    --xh-field-control-min-inline-size: var(--xh-mention-input-min-w, var(--xh-control-min-w));
+    --xh-field-control-radius: var(--xh-mention-input-radius, var(--xh-shape-control));
+    --xh-field-bg-rest: var(--xh-mention-input-bg, var(--xh-_field-variant-bg-rest));
+    --xh-field-bg-hover: var(--xh-mention-input-bg-hover, var(--xh-_field-variant-bg-hover));
+    --xh-field-bg-read-only: var(--xh-mention-input-bg-readonly, var(--xh-_field-variant-bg-read-only));
+    --xh-field-bg-disabled: var(--xh-mention-input-bg-disabled, var(--xh-_field-variant-bg-disabled));
+    --xh-field-fg-rest: var(--xh-mention-input-fg, var(--xh-fg-default));
+    --xh-field-border-rest: var(--xh-mention-input-border, var(--xh-_field-variant-border-rest));
+    --xh-field-border-hover: var(--xh-mention-input-border-hover, var(--xh-_field-variant-border-hover));
+    --xh-field-border-focus: var(--xh-mention-input-border-focus, var(--xh-_field-variant-border-focus));
+    --xh-field-border-invalid: var(--xh-mention-input-border-invalid, var(--xh-_field-variant-border-invalid));
+    --xh-field-ring-focus: var(--xh-ring-focus);
+    --xh-field-ring-invalid: var(--xh-ring-invalid);
+    --xh-field-shadow-rest: var(--xh-mention-input-shadow, none);
+
     inline-size: 100%;
-    min-inline-size: var(--xh-mention-input-min-w, var(--xh-control-min-w));
-    /* 缺省宿主是 textarea：高度按行数撑，控件档只兜住底线 */
-    min-block-size: var(--xh-mention-input-h, var(--xh-_mention-h));
-    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);
-  }
-
-  /* 单行宿主定高到控件档，纵向内距归零，与并排的其他控件等高。
-     单行与多行在 DOM 上只差一个标签名，没有别的标记可选，所以按标签名分支 */
-  input[data-scope='mention'][data-part='input'] {
-    block-size: var(--xh-mention-input-h, var(--xh-_mention-h));
-    padding-block: 0;
   }
 
   [data-scope='mention'][data-part='input'][hidden] {
     display: none;
   }
 
+  /* 输入框自身即 chrome，家族按 data-xh-field-input 给的占位色命不中它，占位色仍由本皮肤给 */
   [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, [data-invalid]) {
-    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-_tone, var(--xh-border-control-focus)));
-    outline: var(--xh-ring-width) solid var(--xh-_mention-ring);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  [data-scope='mention'][data-part='input'][data-invalid] {
-    border-color: var(--xh-mention-input-border-invalid, var(--xh-border-invalid));
-
-    /* 校验失败时环也跟着变红：两圈等宽相邻却一红一蓝，读的人不知道哪个才是当前状态 */
-    --xh-_mention-ring: var(--xh-ring-invalid);
-  }
-
-  /* 只读仍可聚焦、可复制，所以不置灰，只把底色压下去表示"改不动" */
-  [data-scope='mention'][data-part='input'][readonly] {
-    background: var(--xh-mention-input-bg-readonly, var(--xh-bg-subtle));
+  /* 自动填充：引擎给填过的框强加一套系统色（多数是黄底黑字），盖得过 background 与 color，
+     深色档下就剩一个不跟主题走的黄框。底改用 inset 阴影铺回来，扩散量 100vmax 填满内容盒；
+     字改用 -webkit-text-fill-color 接回来，那是这个态下唯一还听样式表的前景通道。
+     不去拉长 transition 把系统底推迟显现：那只是把它藏起来，减弱动效通道一关过渡就当场露出。
+     两个选择器名分写两条：一条选择器列表里只要有一个名字不被认识，整条规则就被丢弃。
+     家族按 data-xh-field-input 给的两条命不中自身即 chrome 的输入框，这里自写；底取不透明的面令牌，
+     ghost 档下透明底铺了等于没铺。描边式静息无影，不再叠落影 */
+  [data-scope='mention'][data-part='input']:autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-mention-input-autofill-bg, var(--xh-bg-canvas));
+    -webkit-text-fill-color: var(--xh-mention-input-autofill-fg, var(--xh-fg-default));
   }
 
-  /* 输入框是单体表单控件，禁用走原生 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;
+  [data-scope='mention'][data-part='input']:-webkit-autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-mention-input-autofill-bg, var(--xh-bg-canvas));
+    -webkit-text-fill-color: var(--xh-mention-input-autofill-fg, var(--xh-fg-default));
   }
 
   [data-scope='mention'][data-part='content'] {
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: var(--xh-mention-content-gap, var(--xh-list-option-gap));
-    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));
+    grid-area: 1 / 1;
+    min-inline-size: min(var(--xh-mention-content-min-w, var(--xh-overlay-min-w)), var(--xh-_mention-available-w));
+    /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的内容就点不到了 */
+    max-inline-size: min(var(--xh-mention-content-max-w, var(--xh-overlay-max-w)), var(--xh-_mention-available-w));
+    /* 状态文字先隐藏时仍保留完整退场面，不塌回一条空边。 */
+    min-block-size: var(--xh-mention-content-min-h, var(--xh-_mention-h));
     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-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-floating));
+    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，
      真正的收起由宿主在退场结束后落成内联 display:none（Vue 那边直接不渲染）。
      其余声明了 display 的角色节点仍补 [hidden]，那几处没有退场动画。 */
 
-  /* 宿主把候选全筛没了：浮层还开着，但这一副框壳没有内容可框，整个让位。
-     组件不替宿主判空——「没有匹配项」要不要说话、说什么，是宿主的事 */
-  [data-scope='mention'][data-part='content']:empty {
-    display: none;
-  }
-
   /* 列表从不承载焦点（焦点恒在输入框，高亮走 aria-activedescendant），
      可滚动容器在某些浏览器里会被自动塞进 Tab 序列，落焦时不画环 */
   [data-scope='mention'][data-part='content']:focus-visible {
@@ -230,57 +239,69 @@
   }
 
   [data-scope='mention'][data-part='content'][data-state='open'] {
-    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+    animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+    /* 只在开着的这一档挂：合成层随 data-state 一起收走，收起后不再占着 */
+    will-change: opacity, translate;
   }
 
   /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
      免得动画结束到真收起之间闪一下原样 */
   [data-scope='mention'][data-part='content'][data-state='closed'] {
-    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+    animation: xh-overlay-slide-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
+  /* 候选行：网格、尺寸档、悬停 / 高亮 100、按下 200 与禁用面由 Collection Item 家族按 overlay 语境给，
+     公开 Mention 槽只映射到家族合同。提及即选即执行，aria-selected 只标当前高亮那一条：
+     overlay 语境的选中面透明，高亮与悬停同走 --xh-bg-subtle，正文保持常规字重 */
   [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-_mention-item-py));
-    padding-inline: var(--xh-mention-item-px, var(--xh-_mention-item-px));
-    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));
+    --xh-collection-block-padding: var(--xh-mention-item-py, var(--xh-_mention-item-py));
+    --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-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));
+    --xh-collection-fg-selected: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
+    --xh-collection-fg-selected-highlight: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
+    --xh-collection-fg-selected-hover: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
+    --xh-collection-fg-selected-pressed: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
+    --xh-collection-fg-pressed: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
+    --xh-collection-font-weight-selected: var(--xh-font-weight-regular);
+    --xh-collection-font-weight-selected-highlight: var(--xh-font-weight-regular);
+    --xh-collection-font-weight-selected-hover: var(--xh-font-weight-regular);
+    --xh-collection-font-weight-selected-pressed: var(--xh-font-weight-regular);
+    --xh-collection-bg-hover: var(--xh-mention-item-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-bg-keyboard-highlight: var(--xh-mention-item-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-bg-selected-highlight: var(--xh-mention-item-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-bg-selected-hover: var(--xh-mention-item-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-bg-pressed: var(--xh-mention-item-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-selected-pressed: var(--xh-mention-item-bg-pressed, var(--xh-bg-subtle-hover));
+    /* data-highlighted 同时覆盖指针与键盘路径；焦点恒在输入框，候选不接环 */
+    --xh-collection-outline-keyboard-highlight: transparent;
+    --xh-collection-outline-selected-highlight: transparent;
+
     /* 行高留出文字的上下伸展空间，行内那层 overflow:hidden 才不会把字削掉 */
     line-height: var(--xh-mention-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，UA 的 [hidden]{display: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-hover, var(--xh-bg-subtle));
-    /* 焦点恒在输入框，高亮条目自带内收环；列表是滚动容器，环画在外沿会被裁掉 */
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: calc(-1 * var(--xh-ring-width));
-  }
-
-  /* 禁用走 aria-disabled 而非原生 disabled（原生 disabled 不派 click，禁用守卫就走不到），
-     所以只能靠 data-disabled 表达，写 :disabled 永远不命中 */
-  [data-scope='mention'][data-part='item'][data-disabled] {
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+  /* 只读时正文插不进东西，候选也就不该再摆出可点的样子。
+     标记读定位层那一份：候选被搬到 portal 落点，根上的只读标记够不着它们。
+     排掉禁用条目是因为这条选择器权重高过上面那条，不排就会把 not-allowed 覆盖回 default */
+  [data-scope='mention'][data-part='positioner'][data-readonly]
+    [data-part='item']:not([data-disabled]) {
+    cursor: default;
   }
 
+  /* 正文落在家族网格的 text 列；网格项默认最小尺寸是内容尺寸，不归零则长文本把行撑破、省略号轮不上 */
   [data-scope='mention'][data-part='item-text'] {
-    flex: 1;
-    /* 弹性项默认 min-width: auto 不肯收缩到内容以下，省略号因此永不生效 */
     min-inline-size: 0;
     overflow: hidden;
     white-space: nowrap;
@@ -291,7 +312,68 @@
     display: none;
   }
 
-  [data-scope='mention'][data-part='item'][data-disabled] [data-part='item-text'] {
-    color: var(--xh-fg-disabled);
+
+
+  /* 空态保持为 listbox 的同级 role=status，只把文字叠到 content 的唯一表面。 */
+  [data-scope='mention'][data-part='empty'] {
+    /* 同级定位保证状态文字绘制在磨砂 content 上方，不需要额外层号。 */
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    grid-area: 1 / 1;
+    padding-block: var(--xh-mention-empty-py, var(--xh-space-3));
+    padding-inline: var(--xh-mention-empty-px, var(--xh-_mention-item-px));
+    color: var(--xh-mention-empty-fg, var(--xh-material-frosted-fg-muted));
+    font-size: var(--xh-mention-empty-font-size, var(--xh-_mention-font-size));
+    line-height: var(--xh-leading-none);
+    text-align: center;
+  }
+
+  [data-scope='mention'][data-part='empty'][hidden] {
+    display: none;
+  }
+
+  /* 在途占位与空态同格、两者不同屏；它同样不重复绘制表面。 */
+  [data-scope='mention'][data-part='loading'] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    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));
+    color: var(--xh-mention-loading-fg, var(--xh-material-frosted-fg-muted));
+    font-size: var(--xh-mention-loading-font-size, var(--xh-_mention-font-size));
+    line-height: var(--xh-leading-none);
+    text-align: center;
+  }
+
+  [data-scope='mention'][data-part='loading'][hidden] {
+    display: none;
+  }
+
+  [data-scope='mention'][data-part='empty']:empty,
+  [data-scope='mention'][data-part='loading']:empty {
+    display: none;
+  }
+
+  /* 手写结构可以把全部候选留在 DOM 里只加 hidden；没有可见 item 也没有状态文案时，
+     打开的空 listbox 不画无意义框。closed 不命中，content 仍能完成 Presence 退场。 */
+  [data-scope='mention'][data-part='positioner']:not(:has(
+    > [data-scope='mention'][data-part='empty']:not([hidden]):not(:empty),
+    > [data-scope='mention'][data-part='loading']:not([hidden]):not(:empty)
+  )) > [data-scope='mention'][data-part='content'][data-state='open']:not(:has(
+    > [data-scope='mention'][data-part='item']:not([hidden])
+  )) {
+    visibility: hidden;
+  }
+
+  @media print {
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
+       收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
+    [data-scope='mention'][data-part='positioner'] {
+      display: none;
+    }
   }
 }