@xihan-ui/styles 2.1.0 → 3.1.0

package/css/select.css

@@ -7,7 +7,10 @@
 @import '../family/field-chrome.css';
 @import '../family/action-control.css';
 @import '../family/collection-item.css';
+@import '../family/loading-ring.css';
 @import '../family/motion.css';
+@import '../family/material.css';
+@import '../family/tag-list.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -23,8 +26,8 @@
     /* 落定那一侧的可用宽度，同样由定位引擎经内联自定义属性写进来，行内轴据此夹取；
        引擎没算（尚未落位 / 无引擎 / 贴边归零）时退到视口宽 */
     --xh-_select-available-w: 100vw;
-    /* 触发器实测宽度，由定位引擎经内联自定义属性写进来，内容层拿它当最小宽的下界；
-       引擎没算（尚未落位 / 无引擎）时为 0，max 取静态档，等于不抬宽 */
+    /* 字段盒实测宽度，由定位引擎经内联自定义属性写进来，内容层与它等宽；
+       引擎没算（尚未落位 / 无引擎）时为 0，面板取下界 */
     --xh-_select-anchor-w: 0px;
     /* WC 嵌套层仍在父层 DOM 内；先截断父 positioner 的方向，再按本层 placement 开一侧。 */
     --xh-_overlay-enter-up: 0;
@@ -212,22 +215,11 @@
     display: none;
   }
 
-  /* 标签行：触发器里收着可见标签与 +N 那一枚的一行，行里每一枚都是 tag（data-scope="tag"），
-     样子归 tag.css，这里只管行怎么排。它是弹性子项，只缩不涨：
-     得允许自己被压缩并把溢出裁掉，否则标签会冲出盒的右缘、把展开箭头挤到盒外；
+  /* 标签行：触发器里收着可见标签与 +N 那一枚的一行，行里每一枚都是 tag（data-scope="tag"），样子归 tag.css；
+     行怎么排、标签怎么进出归标签行家族配方（family/tag-list.css），这里只把使用者的间距槽接进去。
      展开箭头靠触发器的 space-between 留在末端，行本身不必撑开 */
   [data-scope='select'][data-part='tag-list'] {
-    display: inline-flex;
-    flex: 0 1 auto;
-    align-items: center;
-    gap: var(--xh-select-tag-list-gap, var(--xh-space-1));
-    min-inline-size: 0;
-    overflow: hidden;
-  }
-
-  /* 无选中时连接层给 hidden，占位文字回来 */
-  [data-scope='select'][data-part='tag-list'][hidden] {
-    display: none;
+    --xh-tag-list-gap: var(--xh-select-tag-list-gap, var(--xh-space-1));
   }
 
   /* 标签行露面时 value-text 让位：两者是触发器里的同一格，占位文字与标签不同屏。
@@ -236,18 +228,6 @@
     display: none;
   }
 
-  /* 行里的标签：行装不下时各自缩短，截断落在 tag 自己的 label 上；弹性子项默认最小尺寸是内容尺寸，
-     不归零则长标签把行撑破、省略号永远轮不到。+N 那一枚（带 data-count）不缩，始终完整可见。
-     标签里的删除钮是 tag 的 close-trigger，样子全归 tag.css，这里不画 */
-  [data-scope='select'][data-part='tag-list'] > [data-scope='tag'][data-part='root'] {
-    flex: 0 1 auto;
-    min-inline-size: 0;
-  }
-
-  [data-scope='select'][data-part='tag-list'] > [data-scope='tag'][data-part='root'][data-count] {
-    flex: none;
-  }
-
   /* 环画在盒上，按钮自己不再画：两圈套着的环读起来像两个控件 */
   [data-scope='select'][data-part='trigger']:focus-visible {
     outline: none;
@@ -289,7 +269,7 @@
     inline-size: var(--xh-select-action-size, var(--xh-control-action-size));
     block-size: var(--xh-select-action-size, var(--xh-control-action-size));
     color: var(--xh-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);
   }
 
   /* 没写内容就由皮肤画箭头；作者往部件里塞了自己的图形，这条规则即不命中 */
@@ -311,44 +291,34 @@
   /* 浮层外壳：描边、底色、阴影与整体尺寸归它。它自己不滚——滚的是里面的 list，
      底部操作区因此留在视口里，不随条目滚走 */
   [data-scope='select'][data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-select-content-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-select-content-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-select-content-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-select-content-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-select-content-backdrop, var(--xh-_material-backdrop));
+    --xh-frosted-highlight: var(--xh-select-content-highlight, var(--xh-_material-highlight));
+
     position: relative;
     display: flex;
     flex-direction: column;
-    /* 下界跟着触发器走，面板不窄于它；可用宽度的夹取写在这一侧：
-       min-inline-size 恒压过 max-inline-size，锚点比可用区还宽时只夹 max 等于没夹 */
-    min-inline-size: min(
+    /* 列表型浮层与字段盒等宽：长选项在条目里截断，面板不随最长的一条变宽。锚点比下界还窄时取下界，
+       比可用区还宽时收成可用宽度；要封顶由作者另写上界槽 */
+    inline-size: min(
       max(var(--xh-select-content-min-w, var(--xh-overlay-menu-min-w)), var(--xh-_select-anchor-w)),
       var(--xh-_select-available-w)
     );
-    /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的内容就点不到了 */
-    max-inline-size: min(var(--xh-select-content-max-w, var(--xh-overlay-max-w)), var(--xh-_select-available-w));
+    max-inline-size: var(--xh-select-content-max-w, none);
     max-block-size: min(var(--xh-select-content-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_select-available-h));
     padding-block: var(--xh-select-content-py, var(--xh-space-1));
     padding-inline: var(--xh-select-content-px, var(--xh-space-1));
-    border: var(--xh-stroke-thin) solid var(--xh-select-content-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-select-content-radius, var(--xh-shape-overlay));
-    background: var(--xh-select-content-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-select-content-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-select-content-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-select-content-backdrop, var(--xh-material-frosted-backdrop));
-    backdrop-filter: var(--xh-select-content-backdrop, var(--xh-material-frosted-backdrop));
     /* 条目的悬停底色是方角，滚到两端时会探出外壳的圆角 */
     overflow: hidden;
     pointer-events: auto;
   }
 
-  /* 顶光单独叠在真实四边 border 内侧；强制色归零后轮廓仍在。 */
-  [data-scope='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-select-content-highlight, var(--xh-material-frosted-highlight));
-    pointer-events: none;
-  }
-
   /* 列表框本体：只管滚动，留白归外壳。
      min-block-size: 0 是 flex 子项能真正滚动的前提——不给的话它按内容撑高，
      外壳的 max-block-size 就只会把溢出的部分裁掉而不是交给它滚 */
@@ -361,6 +331,12 @@
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 刷新：已有候选时后台在取，保留上一帧，列表按 micro 淡下，数据到了再淡回；在途占位此时让位 */
+  [data-scope='select'][data-part='list'][aria-busy='true'] {
+    opacity: var(--xh-state-disabled-opacity);
   }
 
   /* 底部操作区：贴在列表下沿，用一道分隔线与条目断开。
@@ -392,7 +368,8 @@
     outline: none;
   }
 
-  [data-scope='select'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='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);
   }
 
@@ -422,7 +399,10 @@
 
   /* 在途占位：与空态占位同一个位置、同一副观感，两者不同屏 */
   [data-scope='select'][data-part='loading'] {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-_select-gap);
     flex: none;
     padding-block: var(--xh-select-loading-py, var(--xh-space-3));
     padding-inline: var(--xh-select-loading-px, var(--xh-_select-item-px));
@@ -436,6 +416,15 @@
     display: none;
   }
 
+  /* 首次加载：文案前一枚加载环，由加载环配方画（连接层投影 data-xh-loading-ring 与 data-loading），
+     直径取所在尺寸档的图标档 */
+  [data-scope='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='select'][data-part='group'] {
     display: flex;
     flex-direction: column;
@@ -476,7 +465,7 @@
     --xh-collection-inline-padding: var(--xh-select-item-px, var(--xh-_select-item-px));
     --xh-collection-gap: var(--xh-select-item-gap, var(--xh-_select-gap));
     --xh-collection-font-size: var(--xh-select-item-font-size, var(--xh-_select-font-size));
-    --xh-collection-radius: var(--xh-select-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-select-item-radius, var(--xh-shape-inset));
     --xh-collection-fg-rest: var(--xh-select-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-select-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-select-item-fg, var(--xh-material-frosted-fg));
@@ -590,4 +579,34 @@
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       字段面上取 CanvasText；
+       禁用取 GrayText */
+    [data-scope='select'][data-part='indicator']:empty::before,
+    [data-scope='select'][data-part='item-indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='select'][data-part='clear-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='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='select'][data-part='item-indicator']:empty::before,
+    [data-scope='select'][data-part='clear-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='select'][data-part='control'][data-disabled] [data-scope='select'][data-part='indicator']:empty::before,
+    [data-scope='select'][data-part='item']:is([aria-disabled='true'], [data-disabled]) [data-scope='select'][data-part='item-indicator']:empty::before,
+    [data-scope='select'][data-part='clear-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/side-nav.css

@@ -5,10 +5,16 @@
 
 /* 定义 side nav 样式。 */
 
-/* 共享关键帧由 family/motion.css 提供，行走 Collection Item 家族；本皮肤 @import 它们，单独引入仍成立。 */
+/* 共享关键帧由 family/motion.css 提供，行走 Collection Item 家族，搜索框的重置与占位前景走字段家族；
+   本皮肤 @import 它们，单独引入仍成立。 */
+@import '../family/field-chrome.css';
 @import '../family/collection-item.css';
 @import '../family/motion.css';
 
+/* 图标栏的名称提示就是库内的 Tooltip（data-scope="tooltip" 的 positioner 与 content），
+   反白面、进退场与各环境档都由它的皮肤给；本皮肤 @import 它，单独引入仍成立 */
+@import './tooltip.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='side-nav'] {
@@ -49,21 +55,83 @@
     --xh-_side-nav-row-font-size: var(--xh-control-font-lg);
   }
 
+  /* 展开与折叠两档宽度缺省取侧栏令牌，与 Layout 的侧栏同源 */
   [data-scope='side-nav'][data-part='root'] {
-    inline-size: var(--xh-side-nav-w, 240px);
+    inline-size: var(--xh-side-nav-w, var(--xh-sider-w));
     display: flex;
     flex-direction: column;
     gap: var(--xh-side-nav-gap, var(--xh-space-1));
     padding: var(--xh-side-nav-p, var(--xh-space-2));
     color: var(--xh-side-nav-fg, var(--xh-fg-default));
+    /* 占位式侧栏折叠是屏内的尺寸变化：与 Layout 侧栏同一段 move、同一条曲线，放在侧栏里时两者一起收放 */
+    transition: inline-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
-  /* 折叠成图标栏：整栏收窄，文字随行宽被裁掉 */
+  /* 折叠成图标栏：整栏收窄；行文字先淡出，收窄落定之后才裁掉（见下） */
   [data-scope='side-nav'][data-part='root'][data-collapsed] {
-    inline-size: var(--xh-side-nav-collapsed-w, 56px);
+    inline-size: var(--xh-side-nav-collapsed-w, var(--xh-sider-collapsed-w));
+  }
+
+  /* 搜索框：面板内嵌搜索的写法——不画字段外壳，通栏一行，高与字号随尺寸档，只画一道面内分隔的下划线；
+     重置与占位前景由字段家族按 data-xh-field-input 给，行内内衬与行同一支槽 */
+  [data-scope='side-nav'][data-part='input'] {
+    --xh-field-placeholder-fg: var(--xh-side-nav-placeholder-fg, var(--xh-fg-subtle));
+
+    flex: none;
+    min-inline-size: 0;
+    block-size: var(--xh-side-nav-input-h, var(--xh-_side-nav-row-h));
+    padding-block: 0;
+    padding-inline: var(--xh-side-nav-input-px, var(--xh-_side-nav-row-px));
+    border: none;
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-side-nav-search-divider, var(--xh-material-solid-separator));
+    background: none;
+    color: inherit;
+    font-family: inherit;
+    font-size: var(--xh-side-nav-input-font-size, var(--xh-_side-nav-row-font-size));
+    line-height: var(--xh-leading-normal);
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 聚焦不画环：插入符就是焦点指示。框没有外壳，全局那圈键盘焦点环只会压在通栏一行上 */
+  [data-scope='side-nav'][data-part='input']:focus-visible {
+    outline: none;
+  }
+
+  /* 自动填充：引擎给填过的框强加一套系统色，盖得过 background 与 color。
+     底改用 inset 阴影铺回来，字改用 -webkit-text-fill-color 接回来；
+     两个选择器名分写两条，一条列表里只要有一个名字不被认识整条就被丢弃 */
+  [data-scope='side-nav'][data-part='input']:autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-side-nav-input-autofill-bg, var(--xh-bg-surface));
+    -webkit-text-fill-color: var(--xh-side-nav-input-autofill-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='side-nav'][data-part='input']:-webkit-autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-side-nav-input-autofill-bg, var(--xh-bg-surface));
+    -webkit-text-fill-color: var(--xh-side-nav-input-autofill-fg, var(--xh-fg-default));
+  }
+
+  /* 折叠一开始搜索框就与行文字一起淡出，展开等整栏宽度落定才淡入；落成图标栏之后让位：
+     留着高度、不可见也不可聚焦（过滤此时暂停），下面的行不上下跳 */
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='input'] {
+    opacity: 0;
+  }
+
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='input'] {
+    visibility: hidden;
   }
 
+  /* 搜索一条都没命中的占位：list 的兄弟，只一句次要文字，面归侧栏所在的宿主 */
+  [data-scope='side-nav'][data-part='empty'] {
+    padding-block: var(--xh-side-nav-empty-py, var(--xh-space-3));
+    padding-inline: var(--xh-side-nav-empty-px, var(--xh-_side-nav-row-px));
+    color: var(--xh-side-nav-empty-fg, var(--xh-fg-muted));
+    font-size: var(--xh-side-nav-empty-font-size, var(--xh-_side-nav-row-font-size));
+    text-align: center;
+  }
+
+  /* 三层列表同一副排法：顶层、分组里的与分支的子层都是 ul，行与行之间同一个 gap，不带 UA 的缩进与外边距 */
   [data-scope='side-nav'][data-part='list'],
+  [data-scope='side-nav'][data-part='group-list'],
   [data-scope='side-nav'][data-part='branch-content'] {
     display: flex;
     flex-direction: column;
@@ -82,6 +150,7 @@
     display: none;
   }
 
+  /* 分组是上一层列表里的一条：标题与组内列表上下排，间距与行距同一个 gap */
   [data-scope='side-nav'][data-part='group'] {
     display: flex;
     flex-direction: column;
@@ -90,17 +159,31 @@
   }
 
   [data-scope='side-nav'][data-part='group-label'] {
+    position: relative;
     padding-block: var(--xh-side-nav-group-label-py, var(--xh-space-1));
     padding-inline: var(--xh-side-nav-group-label-px, var(--xh-_side-nav-row-px));
     font-size: var(--xh-text-caption-size);
     font-weight: var(--xh-text-label-weight);
     color: var(--xh-fg-subtle);
     user-select: none;
+    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  /* 折叠时分组标题没有落点，藏掉 */
-  [data-scope='side-nav'][data-part='group-label'][data-collapsed] {
-    display: none;
+  /* 图标栏里分组标题没有落点：字淡成透明、仍参与播报，标题留着自己的高度，下面的行不上下跳；
+     折叠一开始就淡出，展开等整栏宽度落定才淡入。落成图标栏之后在这一格里画一道细分隔，分组仍看得出来 */
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='group-label'] {
+    overflow: hidden;
+    color: transparent;
+    white-space: nowrap;
+  }
+
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='group-label']::after {
+    content: '';
+    position: absolute;
+    inset-inline: var(--xh-_side-nav-row-px);
+    inset-block-start: calc(50% - var(--xh-stroke-thin) / 2);
+    block-size: var(--xh-stroke-thin);
+    background: var(--xh-border-subtle);
   }
 
   [data-scope='side-nav'][data-part='branch'] {
@@ -140,16 +223,16 @@
     --xh-collection-bg-hover: var(--xh-side-nav-row-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-keyboard-highlight: var(--xh-side-nav-row-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-pressed: var(--xh-side-nav-row-bg-pressed, var(--xh-bg-subtle-hover));
-    /* 当前页：公开槽名不变，缺省前景由品牌深字改为淡底前景，字重保持 medium；2px 指示条取品牌色 */
+    /* 当前页：页内持久集合的唯一标记是品牌淡底行面 + 淡底前景，字重不变（与静息同为 regular） */
     --xh-collection-bg-current: var(--xh-side-nav-row-bg-active, var(--xh-bg-brand-subtle));
     --xh-collection-fg-current: var(--xh-side-nav-row-fg-active, var(--xh-fg-on-brand-subtle));
     --xh-collection-fg-current-hover: var(--xh-side-nav-row-fg-active, var(--xh-fg-on-brand-subtle));
     --xh-collection-fg-current-highlight: var(--xh-side-nav-row-fg-active, var(--xh-fg-on-brand-subtle));
     --xh-collection-fg-current-pressed: var(--xh-side-nav-row-fg-active, var(--xh-fg-on-brand-subtle));
-    --xh-collection-font-weight-current: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-medium));
-    --xh-collection-font-weight-current-hover: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-medium));
-    --xh-collection-font-weight-current-highlight: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-medium));
-    --xh-collection-font-weight-current-pressed: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-current: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-current-hover: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-current-highlight: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-current-pressed: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-regular));
     --xh-collection-indicator-fg-current: var(--xh-side-nav-indicator-color, var(--xh-fg-brand));
     --xh-collection-indicator-fg-current-hover: var(--xh-side-nav-indicator-color, var(--xh-fg-brand));
     --xh-collection-indicator-fg-current-highlight: var(--xh-side-nav-indicator-color, var(--xh-fg-brand));
@@ -187,15 +270,24 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  /* 折叠成图标栏：行文字裁到看不见但仍参与播报，行内容居中，不裁半个字。
+  /* 行文字与展开箭头的淡变：折叠一开始就淡出，此时仍在行里、由收窄的行宽裁着；展开时等整栏宽度落定才淡入。
+     弹出面板里的行不在此列 */
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='branch-text']:not([data-popout] *),
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='link-text']:not([data-popout] *),
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='branch-indicator']:not([data-popout] *) {
+    opacity: 0;
+  }
+
+  /* 落成图标栏（收窄落定）：行文字裁到看不见但仍参与播报，行内容居中，不裁半个字。
      用 clip-path 而不是 display:none——图标栏里按钮与链接的可及名就是这段文字，
      藏成 display:none 它们就一个名字都没有了。
      white-space: nowrap 防止 1px 宽把文本挤成竖排。
      弹出面板里的行不在此列——面板是正常宽度的浮层，文字照常显示 */
-  [data-scope='side-nav'][data-part='root'][data-collapsed] [data-part='branch-text']:not([data-popout] *),
-  [data-scope='side-nav'][data-part='root'][data-collapsed] [data-part='link-text']:not([data-popout] *) {
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-text']:not([data-popout] *),
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='link-text']:not([data-popout] *) {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -207,13 +299,13 @@
     border: 0;
   }
 
-  /* 展开指示是纯装饰（aria-hidden），折叠态整个不占位 */
-  [data-scope='side-nav'][data-part='root'][data-collapsed] [data-part='branch-indicator']:not([data-popout] *) {
+  /* 展开指示是纯装饰（aria-hidden），落成图标栏之后整个不占位 */
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-indicator']:not([data-popout] *) {
     display: none;
   }
 
-  [data-scope='side-nav'][data-part='root'][data-collapsed] [data-part='branch-trigger']:not([data-popout] *),
-  [data-scope='side-nav'][data-part='root'][data-collapsed] [data-part='link']:not([data-popout] *) {
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-trigger']:not([data-popout] *),
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='link']:not([data-popout] *) {
     --xh-collection-inline-padding: 0;
 
     justify-content: center;
@@ -230,11 +322,34 @@
        引擎没算（尚未落位 / 无引擎 / 贴边归零）时退到视口宽 */
     --xh-_side-nav-available-w: 100vw;
 
+    /* 弹出面板从锚点一侧短移入，方向按实际落位只激活一支；先清零，截断父层定位层的方向继承 */
+    --xh-_overlay-enter-up: 0;
+    --xh-_overlay-enter-down: 0;
+    --xh-_overlay-enter-left: 0;
+    --xh-_overlay-enter-right: 0;
+
     position: fixed;
     z-index: var(--xh-side-nav-popout-layer, var(--xh-_layer, var(--xh-layer-popover)));
     pointer-events: auto;
   }
 
+  /* 物理 placement 与定位引擎同一套，不随书写方向翻 */
+  [data-scope='side-nav'][data-part='positioner'][data-placement^='top'] {
+    --xh-_overlay-enter-down: 1;
+  }
+
+  [data-scope='side-nav'][data-part='positioner'][data-placement^='bottom'] {
+    --xh-_overlay-enter-up: 1;
+  }
+
+  [data-scope='side-nav'][data-part='positioner'][data-placement^='left'] {
+    --xh-_overlay-enter-right: 1;
+  }
+
+  [data-scope='side-nav'][data-part='positioner'][data-placement^='right'] {
+    --xh-_overlay-enter-left: 1;
+  }
+
   /* 还没落位就先藏着：visibility 而非 display，display:none 会让引擎量不到面板尺寸 */
   [data-scope='side-nav'][data-part='positioner'][data-hidden] {
     visibility: hidden;
@@ -259,14 +374,15 @@
     overscroll-behavior: contain;
   }
 
+  /* 弹出分支是锚定在分支行旁侧的一列导航，与菜单同属锚定列表：从锚点一侧短移淡入，不缩放 */
   [data-scope='side-nav'][data-part='branch-content'][data-popout][data-state='open'] {
-    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+    animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
   /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
      免得动画结束到收起落下来之间闪一下原样 */
   [data-scope='side-nav'][data-part='branch-content'][data-popout][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;
   }
 
   /* 箭头是行尾的后缀：auto 外边距把它顶到行尾，家族按 suffix 槽下发的外边距已在行上归零。
@@ -284,7 +400,12 @@
     justify-content: center;
     inline-size: var(--xh-side-nav-branch-indicator-size, var(--xh-control-indicator-size));
     block-size: var(--xh-side-nav-branch-indicator-size, var(--xh-control-indicator-size));
-    transition: rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter-strong);
+    /* 收起时指向行尾、展开时转向下方，与逻辑书写方向一致：rtl 下行尾在左侧，收起的箭头转半圈；
+       旋转角乘书写方向的符号（ltr 0deg、rtl 180deg），按就近的 dir 走 */
+    rotate: calc(90deg - 90deg * var(--xh-direction-sign));
+    transition:
+      rotate var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong),
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='side-nav'][data-part='branch-indicator'][data-state='open'] {
@@ -309,6 +430,7 @@
   [data-scope='side-nav'][data-part='root'][hidden],
   [data-scope='side-nav'][data-part='list'][hidden],
   [data-scope='side-nav'][data-part='group'][hidden],
+  [data-scope='side-nav'][data-part='group-list'][hidden],
   [data-scope='side-nav'][data-part='branch'][hidden],
   [data-scope='side-nav'][data-part='branch-trigger'][hidden],
   [data-scope='side-nav'][data-part='item'][hidden],
@@ -317,11 +439,38 @@
     display: none;
   }
 
+  @media (forced-colors: active) {
+    /* 图标栏里分组之间那道细分隔画的是一块底色，这一档里底色被统一换成 Canvas、整道消失；换成 GrayText 画回来 */
+    [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='group-label']::after {
+      background: GrayText;
+    }
+  }
+
   @media print {
-    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文；搜索框同理，纸上没法输入。
        收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
-    [data-scope='side-nav'][data-part='positioner'] {
+    [data-scope='side-nav'][data-part='positioner'],
+    [data-scope='side-nav'][data-part='input'] {
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='side-nav'][data-part='branch-indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='side-nav'][data-part='branch-trigger']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted])) [data-scope='side-nav'][data-part='branch-indicator']:empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='side-nav'][data-part='branch-trigger']:is([aria-disabled='true'], [data-disabled]) [data-scope='side-nav'][data-part='branch-indicator']:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/signature-pad.css

@@ -57,7 +57,7 @@
     /* 落笔、校验不过与禁用三档各换一次描边或底色，换的过程要看得出来 */
     transition:
       border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='signature-pad'][data-part='control'][data-invalid] {
@@ -137,6 +137,19 @@
     --xh-action-fg-rest: var(--xh-signature-pad-clear-fg-empty, var(--xh-fg-muted));
   }
 
+  /*
+   * 撤销与重做按钮与清空按钮同一身份：盒型、sm 档几何、outline 四态面、0.97 按压与粗指针命中区全由家族配方给出。
+   * 没有可撤销或可重做的一步时连接层投影 data-disabled + aria-disabled，家族给置灰面，焦点仍留在钮上。
+   */
+  [data-scope='signature-pad'][data-part='undo-trigger'],
+  [data-scope='signature-pad'][data-part='redo-trigger'] {
+    /* 作者塞进来的图标随档取字形尺（sm = 16px） */
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+
+    /* 竖排容器里不铺满一行：按钮只占自己的宽 */
+    align-self: flex-start;
+  }
+
   /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色 */
   [data-scope='signature-pad'][data-part='clear-trigger'][data-xh-action-variant='solid']:focus-visible {
     --xh-action-ring-color-focus-visible: currentColor;
@@ -158,6 +171,8 @@
   /* display 会盖掉 UA 的 [hidden]{display:none}，凡是被赋了 display 的角色节点都要显式让位 */
   [data-scope='signature-pad'][data-part='root'][hidden],
   [data-scope='signature-pad'][data-part='control'][hidden],
+  [data-scope='signature-pad'][data-part='undo-trigger'][hidden],
+  [data-scope='signature-pad'][data-part='redo-trigger'][hidden],
   [data-scope='signature-pad'][data-part='clear-trigger'][hidden] {
     display: none;
   }

package/css/skeleton.css

@@ -5,19 +5,10 @@
 
 /* 定义 skeleton 样式。 */
 
-@layer xihan.motion {
-  /* 一条比底色略亮的窄带从头扫到尾。背景图比自身宽一倍，靠移动背景位置扫过去，
-     不动 transform 也不动布局，整段动画只在合成层上跑 */
-  @keyframes xh-skeleton-shimmer {
-    from {
-      background-position: 200% 0;
-    }
-
-    to {
-      background-position: -200% 0;
-    }
-  }
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
 
+@layer xihan.motion {
   /* 呼吸档：整根条子在原色与禁用档之间来回淡。往返由 alternate 给，帧里只写一端 */
   @keyframes xh-skeleton-pulse {
     to {
@@ -44,6 +35,13 @@
     display: none;
   }
 
+  /* 刚加载完：机器已把骨架原地抬出文档流、钉住原来的尺寸，真实内容补上它空出来的位置；
+     骨架盖在内容之上淡出，播完才收起，不挡内容的指针。挂载时就已加载完的直接收起，不播这一段 */
+  [data-scope='skeleton'][data-part='root'][data-state='loaded']:not([hidden]) {
+    pointer-events: none;
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
   /*
    * 单根骨架条。底色与微光两层叠在一起：
    * background-color 是静止时看到的那层，background-image 是扫过去的那道光。
@@ -63,7 +61,8 @@
     );
     background-repeat: no-repeat;
     background-size: 200% 100%;
-    animation: xh-skeleton-shimmer var(--xh-skeleton-duration, var(--xh-shimmer-duration)) var(--xh-motion-ease-loop) infinite;
+    /* 扫光与思考中文字、工具调用进行中同一段共享关键帧：同屏时亮带扫过的距离与节奏一致 */
+    animation: xh-shimmer var(--xh-skeleton-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-loop) infinite;
   }
 
   /* 一行文字的高度取正文字号，圆角拉满，看起来就是一行还没排出来的字 */
@@ -93,7 +92,7 @@
    */
   [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
     background-image: none;
-    animation: xh-skeleton-pulse var(--xh-skeleton-pulse-duration, var(--xh-shimmer-duration)) var(--xh-motion-ease-sweep) infinite alternate;
+    animation: xh-skeleton-pulse var(--xh-skeleton-pulse-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-sweep) infinite alternate;
   }
 
   /* 静止档：底色留着，两层动效都撤掉 */