@xihan-ui/styles 2.0.0 → 3.0.0

package/css/tree-select.css

@@ -7,9 +7,12 @@
 @import '../family/field-chrome.css';
 @import '../family/action-control.css';
 @import '../family/collection-item.css';
+@import '../family/loading-ring.css';
 
 /* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
 @import '../family/motion.css';
+@import '../family/material.css';
+@import '../family/tag-list.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -25,8 +28,8 @@
     /* 落定那一侧的可用宽度，同样由定位引擎经内联自定义属性写进来，行内轴据此夹取；
        引擎没算（尚未落位 / 无引擎 / 贴边归零）时退到视口宽 */
     --xh-_tree-select-available-w: 100vw;
-    /* 触发器实测宽度，由定位引擎经内联自定义属性写进来，内容层拿它当最小宽的下界；
-       引擎没算（尚未落位 / 无引擎）时为 0，max 取静态档，等于不抬宽 */
+    /* 字段盒实测宽度，由定位引擎经内联自定义属性写进来，内容层与它等宽；
+       引擎没算（尚未落位 / 无引擎）时为 0，面板取下界 */
     --xh-_tree-select-anchor-w: 0px;
     /* 独立浮层先截断祖先方向，再按自身 placement 开启一侧。 */
     --xh-_overlay-enter-up: 0;
@@ -69,7 +72,7 @@
   [data-scope='tree-select']:is([data-part='root'], [data-part='positioner']) {
     /* 作者塞进触发器指示符槽 / 清除钮的图标跟着尺寸档走，与皮肤画的兜底字形同一把尺。这支只管作者放进
        盒与行里的图标：面板里自绘的状态字形（展开方向、行尾对号与半选杠）是指示符，各部件在自己身上
-       把 --xh-icon-size 改接到 --xh-control-indicator-* 一族的盒尺（§6.5） */
+       把 --xh-icon-size 改接到 --xh-control-indicator-* 一族的盒尺 */
     --xh-icon-size: var(--xh-tree-select-icon-size, var(--xh-glyph-size-md));
 
     /* 尺寸档只换这几个私有槽，盒与树里的行都从这两处继承它们，换档不必给每个部件各写一条选择器；
@@ -216,6 +219,18 @@
     color: var(--xh-fg-disabled);
   }
 
+  /* 标签行：触发器里收着可见标签与 +N 那一枚的一行，行里每一枚都是 tag（data-scope="tag"），样子归 tag.css；
+     行怎么排、标签怎么进出归标签行家族配方（family/tag-list.css），这里只把使用者的间距槽接进去 */
+  [data-scope='tree-select'][data-part='tag-list'] {
+    --xh-tag-list-gap: var(--xh-tree-select-tag-list-gap, var(--xh-space-1));
+  }
+
+  /* 标签行露面时 value-text 让位：两者是触发器里的同一格，占位文字与标签不同屏。
+     value-text 留在 DOM 里，trigger 的可及名仍从它取到完整的选中项文本 */
+  [data-scope='tree-select'][data-part='trigger']:has([data-part='tag-list']:not([hidden])) [data-part='value-text'] {
+    display: none;
+  }
+
   /* 有值时清空钮顶上来，箭头让位：两个图标并排堆着，用户分不清点哪个。
      判据查的是盒里此刻真有一颗没收起的清空钮，不是「有没有值」——
      作者没摆清空钮时箭头照常留着，不然让了位没人接，指示符整个消失 */
@@ -229,7 +244,7 @@
     align-items: center;
     justify-content: center;
     color: var(--xh-tree-select-indicator-fg, var(--xh-fg-muted));
-    transition: rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter-strong);
+    transition: rotate var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
   }
 
   [data-scope='tree-select'][data-part='indicator'][hidden] {
@@ -275,45 +290,35 @@
   }
 
   [data-scope='tree-select'][data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-tree-select-content-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-tree-select-content-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-tree-select-content-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-tree-select-content-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-tree-select-content-backdrop, var(--xh-_material-backdrop));
+    --xh-frosted-highlight: var(--xh-tree-select-content-highlight, var(--xh-_material-highlight));
+
     position: relative;
     display: flex;
     flex-direction: column;
-    /* min 优先于 max，锚点与静态下界也必须受可用宽度约束。 */
-    min-inline-size: min(
-      max(var(--xh-tree-select-content-min-w, var(--xh-overlay-min-w)), var(--xh-_tree-select-anchor-w)),
+    /* 列表型浮层与字段盒等宽：长选项在条目里截断，面板不随最长的一条变宽。锚点比下界还窄时取下界，
+       比可用区还宽时收成可用宽度；要封顶由作者另写上界槽 */
+    inline-size: min(
+      max(var(--xh-tree-select-content-min-w, var(--xh-overlay-menu-min-w)), var(--xh-_tree-select-anchor-w)),
       var(--xh-_tree-select-available-w)
     );
-    /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的内容就点不到了 */
-    max-inline-size: min(var(--xh-tree-select-content-max-w, var(--xh-overlay-max-w)), var(--xh-_tree-select-available-w));
-    max-block-size: min(var(--xh-tree-select-content-max-h, var(--xh-overlay-max-h)), var(--xh-_tree-select-available-h));
+    max-inline-size: var(--xh-tree-select-content-max-w, none);
+    max-block-size: min(var(--xh-tree-select-content-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_tree-select-available-h));
     padding-block: var(--xh-tree-select-content-py, var(--xh-space-1));
     padding-inline: var(--xh-tree-select-content-px, var(--xh-space-1));
-    border: var(--xh-stroke-thin) solid var(--xh-tree-select-content-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-tree-select-content-radius, var(--xh-shape-overlay));
-    background: var(--xh-tree-select-content-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-tree-select-content-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-tree-select-content-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-tree-select-content-backdrop, var(--xh-material-frosted-backdrop));
-    backdrop-filter: var(--xh-tree-select-content-backdrop, var(--xh-material-frosted-backdrop));
-    /* 两轴一起给：深层节点靠缩进往行末推，横向溢出是常态，得够得着 */
-    overflow: auto;
-    /* 浮层滚动面：滚到头不把页面一起带走 */
-    overscroll-behavior: contain;
+    /* 面板只是外壳，滚动归树：搜索框与底部操作区因此钉在树的上下沿，不随行滚走。
+       行的悬停底色是方角，滚到两端时会探出外壳的圆角 */
+    overflow: hidden;
     pointer-events: auto;
   }
 
-  /* 顶光位于真实边框内侧，不参与布局或拦截树行操作。 */
-  [data-scope='tree-select'][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-tree-select-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，
@@ -325,10 +330,9 @@
     outline: none;
   }
 
-  [data-scope='tree-select'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='tree-select'][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);
-    /* 只在开着的这一档挂：合成层随 data-state 一起收走，收起后不再占着 */
-    will-change: opacity, translate;
   }
 
   /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
@@ -337,17 +341,75 @@
     animation: xh-overlay-slide-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
-  /* 边框、底色与滚动都归 content，树本身只把行竖着排开 */
+  /* 边框与底色归 content，树只管滚动并把行竖着排开。
+     两轴都滚：深层节点靠缩进往行末推，横向溢出是常态，得够得着。
+     min-block-size: 0 是弹性子项能真正滚动的前提——不给的话它按内容撑高，
+     外壳的 max-block-size 就只会把溢出的部分裁掉而不是交给它滚 */
   [data-scope='tree-select'][data-part='tree'] {
     display: flex;
+    flex: 1 1 auto;
     flex-direction: column;
     gap: var(--xh-tree-select-tree-gap, var(--xh-list-option-gap));
+    min-block-size: 0;
+    overflow: auto;
+    /* 浮层滚动面：滚到头不把页面一起带走 */
+    overscroll-behavior: contain;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 刷新：已有节点时后台在取，保留上一帧，树按 micro 淡下，数据到了再淡回；在途占位此时让位 */
+  [data-scope='tree-select'][data-part='tree'][aria-busy='true'] {
+    opacity: var(--xh-state-disabled-opacity);
   }
 
   [data-scope='tree-select'][data-part='tree'][hidden] {
     display: none;
   }
 
+  /* 浮层内搜索框：排在树上方，框自己不画边不画底，只在底下画一道分隔线把它与树分开；边界归面板 */
+  /* 面板内嵌的搜索框：通栏一行，控件高与字号随尺寸档，只画一道面内分隔的下划线（取面材质的分隔令牌）；
+     重置与占位前景由字段家族按 data-xh-field-input 给，占位与值文本的占位同一支组件槽 */
+  [data-scope='tree-select'][data-part='input'] {
+    --xh-field-placeholder-fg: var(--xh-tree-select-placeholder-fg, var(--xh-fg-subtle));
+
+    flex: none;
+    min-inline-size: 0;
+    block-size: var(--xh-tree-select-input-h, var(--xh-_tree-select-h));
+    margin-block-end: var(--xh-tree-select-input-gap, var(--xh-space-1));
+    padding-block: 0;
+    padding-inline: var(--xh-tree-select-input-px, var(--xh-_tree-select-px));
+    border: none;
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-tree-select-search-divider, var(--xh-material-frosted-separator));
+    background: none;
+    color: inherit;
+    font-family: inherit;
+    font-size: var(--xh-tree-select-input-font-size, var(--xh-_tree-select-font-size));
+    line-height: var(--xh-leading-normal);
+  }
+
+  /* 聚焦不画环：插入符就是焦点指示。框没有外壳，全局那圈键盘焦点环只会压在通栏一行上 */
+  [data-scope='tree-select'][data-part='input']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='tree-select'][data-part='input'][hidden] {
+    display: none;
+  }
+
+  /* 自动填充：引擎给填过的框强加一套系统色，盖得过 background 与 color。
+     底改用 inset 阴影铺回来，字改用 -webkit-text-fill-color 接回来；
+     两个选择器名分写两条，一条列表里只要有一个名字不被认识整条就被丢弃。
+     搜索框排在浮层面里，铺的底取浮起面而不是页面底 */
+  [data-scope='tree-select'][data-part='input']:autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-tree-select-input-autofill-bg, var(--xh-bg-surface));
+    -webkit-text-fill-color: var(--xh-tree-select-input-autofill-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='tree-select'][data-part='input']:-webkit-autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-tree-select-input-autofill-bg, var(--xh-bg-surface));
+    -webkit-text-fill-color: var(--xh-tree-select-input-autofill-fg, var(--xh-fg-default));
+  }
+
   /* 空态占位：待在 content 里、tree 的兄弟（role=tree 只许拥有 treeitem 与 group）。
      盒与阴影归 content，这里只画一句居中的次要文字 */
   [data-scope='tree-select'][data-part='empty'] {
@@ -368,7 +430,10 @@
 
   /* 在途占位：与空态占位同一个位置、同一副观感，两者不同屏 */
   [data-scope='tree-select'][data-part='loading'] {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-_tree-select-gap);
     flex: none;
     padding-block: var(--xh-tree-select-loading-py, var(--xh-space-3));
     padding-inline: var(--xh-tree-select-loading-px, var(--xh-_tree-select-row-px));
@@ -382,6 +447,15 @@
     display: none;
   }
 
+  /* 首次加载：文案前一枚加载环，由加载环配方画（连接层投影 data-xh-loading-ring 与 data-loading），
+     直径取所在尺寸档的图标档 */
+  [data-scope='tree-select'][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='tree-select'][data-part='footer'] {
     display: flex;
@@ -434,7 +508,7 @@
     --xh-collection-inline-padding: var(--xh-tree-select-item-px, var(--xh-_tree-select-row-px));
     --xh-collection-gap: var(--xh-tree-select-item-gap, var(--xh-_tree-select-gap));
     --xh-collection-font-size: var(--xh-tree-select-item-font-size, var(--xh-_tree-select-font-size));
-    --xh-collection-radius: var(--xh-tree-select-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-tree-select-item-radius, var(--xh-shape-inset));
     --xh-collection-glyph-size: var(--xh-tree-select-icon-size, var(--xh-_collection-glyph-size));
     --xh-collection-fg-rest: var(--xh-tree-select-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-tree-select-item-fg, var(--xh-material-frosted-fg));
@@ -552,7 +626,7 @@
   /* 勾选标记落在家族网格的 indicator 列；未选中时占位不塌，切换选中不引起行宽抖动。
      尺寸槽按各自部件取名：行内的勾与展开箭头分别是 item- 与 branch- 段，
      触发器上那枚箭头是 --xh-tree-select-indicator-*，三处各调各的。
-     盒里的对号 / 半选杠是指示符（§6.5）：在自己身上把 --xh-icon-size 改接到盒的尺，兜底字形与作者
+     盒里的对号 / 半选杠是指示符：在自己身上把 --xh-icon-size 改接到盒的尺，兜底字形与作者
      塞进盒里的 XhIcon 读同一把尺、与盒同边长；不读家族按档下发到行的 --xh-icon-size——那支只管
      作者放进行里的图标，按图标档取的 20px 会比 16 / 14 的盒还大 */
   [data-scope='tree-select'][data-part='item-indicator'] {
@@ -572,7 +646,7 @@
   /* 家族只按行的 aria-selected 显示对号：分支行的 aria-selected 在 branch 上、半选没有选中语义，
      这两档按标记自身的 data-selected / data-indeterminate 显形 */
   [data-scope='tree-select'][data-part='item-indicator']:is([data-selected], [data-indeterminate]) {
-    visibility: visible;
+    opacity: 1;
   }
 
   /* 分支行的禁用不在行的 aria-disabled 上（那在 branch 上），标记按自身的 data-disabled 降级 */
@@ -582,7 +656,7 @@
 
   /* 展开箭头与方向指示符：两者都可能被作者用作「点这里展开」的把手，
      所以尺寸与叶子的勾选标记一致，两种行的文字起点才对得齐。
-     盒里的 chevron 是指示符（§6.5）：与盒同边长，--xh-icon-size 在自己身上改接到盒的尺 */
+     盒里的 chevron 是指示符：与盒同边长，--xh-icon-size 在自己身上改接到盒的尺 */
   [data-scope='tree-select'][data-part='branch-trigger'],
   [data-scope='tree-select'][data-part='branch-indicator'] {
     --xh-icon-size: var(--xh-tree-select-branch-indicator-size, var(--xh-control-indicator-size));
@@ -593,7 +667,7 @@
     justify-content: center;
     inline-size: var(--xh-tree-select-branch-indicator-size, var(--xh-control-indicator-size));
     color: var(--xh-tree-select-branch-indicator-fg, var(--xh-fg-subtle));
-    transition: rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter-strong);
+    transition: rotate var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
   }
 
   [data-scope='tree-select'][data-part='branch-trigger'][hidden],
@@ -601,20 +675,15 @@
     display: none;
   }
 
-  /* 收起时朝向行首、展开时转向下方，与逻辑书写方向一致：
-     rtl 下 inline-start 在右侧，箭头因此要反着转 */
-  [data-scope='tree-select'][data-part='branch-trigger'][data-state='open'],
-  [data-scope='tree-select'][data-part='branch-indicator'][data-state='open'] {
-    rotate: 90deg;
-  }
-
-  [dir='rtl'] [data-scope='tree-select'][data-part='branch-trigger'],
-  [dir='rtl'] [data-scope='tree-select'][data-part='branch-indicator'] {
-    rotate: 180deg;
+  /* 收起时指向行尾、展开时转向下方，与逻辑书写方向一致：rtl 下行尾在左侧，收起的箭头转半圈；
+     旋转角乘书写方向的符号（ltr 0deg、rtl 180deg），按就近的 dir 走 */
+  [data-scope='tree-select'][data-part='branch-trigger'],
+  [data-scope='tree-select'][data-part='branch-indicator'] {
+    rotate: calc(90deg - 90deg * var(--xh-direction-sign));
   }
 
-  [dir='rtl'] [data-scope='tree-select'][data-part='branch-trigger'][data-state='open'],
-  [dir='rtl'] [data-scope='tree-select'][data-part='branch-indicator'][data-state='open'] {
+  [data-scope='tree-select'][data-part='branch-trigger'][data-state='open'],
+  [data-scope='tree-select'][data-part='branch-indicator'][data-state='open'] {
     rotate: 90deg;
   }
 
@@ -632,6 +701,69 @@
     padding-inline-start: var(--xh-tree-select-indent, var(--xh-space-4));
   }
 
+  /* 分支首次展开取子项时的三种占位落在子层的位置（与子层同一缩进），与整树的占位同一副样子：
+     在途一枚加载环 + 文案、成功为空一句文案、失败一枚警示字形 + 说明。它们不是 treeitem，不接悬停与按下 */
+  [data-scope='tree-select']:is([data-part='branch-loading'], [data-part='branch-empty'], [data-part='branch-error']) {
+    display: flex;
+    align-items: center;
+    gap: var(--xh-_tree-select-gap);
+    padding-block: var(--xh-tree-select-branch-status-py, var(--xh-_tree-select-row-py));
+    padding-inline: calc(var(--xh-tree-select-indent, var(--xh-space-4)) + var(--xh-_tree-select-row-px)) var(--xh-_tree-select-row-px);
+    color: var(--xh-tree-select-branch-status-fg, var(--xh-material-frosted-fg-muted));
+    font-size: var(--xh-tree-select-branch-status-font-size, var(--xh-_tree-select-font-size));
+    line-height: var(--xh-leading-none);
+    user-select: none;
+  }
+
+  [data-scope='tree-select'][data-part='branch-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='tree-select'][data-part='branch-error']::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));
+    background-color: var(--xh-tree-select-branch-error-fg, var(--xh-fg-danger));
+    -webkit-mask: var(--xh-glyph-mark-warning) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-warning) center / contain no-repeat;
+  }
+
+  /* 重试钮排在失败说明之下、与说明同一缩进；指针入口，键盘在出错的分支行上按 Enter / Space 重试 */
+  [data-scope='tree-select'][data-part='branch-retry-trigger'] {
+    align-self: flex-start;
+    margin-inline-start: calc(var(--xh-tree-select-indent, var(--xh-space-4)) + var(--xh-_tree-select-row-px));
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--xh-tree-select-branch-retry-fg, var(--xh-fg-brand));
+    font: inherit;
+    font-size: var(--xh-tree-select-branch-status-font-size, var(--xh-_tree-select-font-size));
+    line-height: var(--xh-leading-normal);
+    text-decoration-line: underline;
+    text-decoration-color: transparent;
+    text-underline-offset: var(--xh-space-0_5);
+    cursor: pointer;
+    transition: text-decoration-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='tree-select'][data-part='branch-retry-trigger']:hover {
+    text-decoration-color: currentColor;
+  }
+
+  [data-scope='tree-select'][data-part='branch-retry-trigger']:disabled {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='tree-select']:is([data-part='branch-loading'], [data-part='branch-empty'], [data-part='branch-error'], [data-part='branch-retry-trigger'])[hidden] {
+    display: none;
+  }
+
   /* 收起态的唯一开关：display 盖掉了 UA 的 [hidden]{display:none}，漏了这条整棵子树就收不起来 */
   [data-scope='tree-select'][data-part='branch-content'][hidden],
   [data-scope='tree-select'][data-part='branch-content'][data-state='closed'] {
@@ -652,6 +784,8 @@
     mask: var(--xh-glyph-mark-chevron-down) center / contain no-repeat;
   }
 
+  /* 勾与半选杠叠成两层遮罩，按状态只换两层的尺寸：离开半选淡出的那一段里横杠留着，
+     淡出播完才换回勾——不在淡出途中闪出一枚勾 */
   [data-scope='tree-select'][data-part='item-indicator']:empty::before {
     content: '';
     display: inline-block;
@@ -659,13 +793,21 @@
     block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
     vertical-align: var(--xh-glyph-baseline-shift);
     background-color: currentColor;
-    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+    -webkit-mask: var(--xh-glyph-mark-check) center / 100% 100% no-repeat, var(--xh-glyph-mark-minus) center / 0 0 no-repeat;
+    mask: var(--xh-glyph-mark-check) center / 100% 100% no-repeat, var(--xh-glyph-mark-minus) center / 0 0 no-repeat;
+    transition:
+      -webkit-mask-size 0s var(--xh-motion-duration-micro),
+      mask-size 0s var(--xh-motion-duration-micro);
+  }
+
+  [data-scope='tree-select'][data-part='item-indicator'][data-selected]:empty::before {
+    transition-delay: 0s;
   }
 
   [data-scope='tree-select'][data-part='item-indicator'][data-indeterminate]:not([data-selected]):empty::before {
-    -webkit-mask-image: var(--xh-glyph-mark-minus);
-    mask-image: var(--xh-glyph-mark-minus);
+    -webkit-mask-size: 0 0, 100% 100%;
+    mask-size: 0 0, 100% 100%;
+    transition-delay: 0s;
   }
 
   [data-scope='tree-select'][data-part='branch-trigger']:empty::before,
@@ -698,4 +840,39 @@
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       字段面上取 CanvasText；
+       落在 Canvas 面上的取 CanvasText；
+       禁用取 GrayText */
+    [data-scope='tree-select'][data-part='branch-error']::before,
+    [data-scope='tree-select'][data-part='indicator']:empty::before,
+    [data-scope='tree-select'][data-part='item-indicator']:empty::before,
+    [data-scope='tree-select']:is([data-part='branch-trigger'], [data-part='branch-indicator']):empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='tree-select'][data-part='clear-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='tree-select'][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='tree-select'][data-part='item-indicator']:empty::before,
+    [data-scope='tree-select'][data-part='branch-control']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted])) [data-scope='tree-select']:is([data-part='branch-trigger'], [data-part='branch-indicator']):empty::before,
+    [data-scope='tree-select'][data-part='clear-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='tree-select'][data-part='control'][data-disabled] [data-scope='tree-select'][data-part='indicator']:empty::before,
+    [data-scope='tree-select'][data-part='item']:is([aria-disabled='true'], [data-disabled]) [data-scope='tree-select'][data-part='item-indicator']:empty::before,
+    [data-scope='tree-select'][data-part='branch-control']:is([aria-disabled='true'], [data-disabled]) [data-scope='tree-select']:is([data-part='branch-trigger'], [data-part='branch-indicator']):empty::before,
+    [data-scope='tree-select'][data-part='clear-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }