@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/separator.css

@@ -0,0 +1,140 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 separator 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-separator {
+    --xh-separator-skin: 1;
+  }
+
+  /*
+   * 线的颜色与线型都先收进两个私有槽，再由 root（只有它一个时）与 line（有分节文字时）
+   * 各自取用：换档只改槽，画在哪个节点上互不影响。
+   */
+  .xh-scope-separator[data-part='root'] {
+    --xh-_separator-color: var(--xh-separator-color, var(--xh-border-default));
+    --xh-_separator-dash: var(--xh-separator-dash-length, var(--xh-space-1_5));
+    --xh-_separator-dash-gap: var(--xh-separator-dash-gap, var(--xh-space-1_5));
+    --xh-_separator-paint: var(--xh-_separator-color);
+
+    border: 0;
+    border-radius: var(--xh-separator-radius, var(--xh-shape-pill));
+    background: var(--xh-_separator-paint);
+  }
+
+  /* 分隔线自带上下（竖向为左右）留白：横向上下各 20px，竖向左右各 12px，放进内容里不必另包一层加边距 */
+  .xh-scope-separator[data-part='root'][data-orientation='horizontal'] {
+    inline-size: 100%;
+    block-size: var(--xh-separator-thickness, var(--xh-stroke-thin));
+    margin-block: var(--xh-separator-my, var(--xh-space-5));
+  }
+
+  .xh-scope-separator[data-part='root'][data-orientation='vertical'] {
+    align-self: stretch;
+    inline-size: var(--xh-separator-thickness, var(--xh-stroke-thin));
+    block-size: 100%;
+    /* 父容器没有高度时也留一截与文字等高的线 */
+    min-block-size: var(--xh-glyph-size-text);
+    margin-inline: var(--xh-separator-mx, var(--xh-space-3));
+  }
+
+  /* —— 形态 ——
+     三档只换线的深浅，缺省档写在上面的基础规则里。使用者槽排在档值前面，
+     写了 --xh-separator-color 的那一条仍然压过档值 */
+  .xh-scope-separator[data-part='root'][data-variant='subtle'] {
+    --xh-_separator-color: var(--xh-separator-color, var(--xh-material-soft-separator));
+  }
+
+  .xh-scope-separator[data-part='root'][data-variant='strong'] {
+    --xh-_separator-color: var(--xh-separator-color, var(--xh-border-strong));
+  }
+
+  /* —— 虚线 ——
+     实线段与空白段交替铺；方向由 data-orientation 选，表达式只写这两条 */
+  .xh-scope-separator[data-part='root'][data-dashed][data-orientation='horizontal'] {
+    --xh-_separator-paint: repeating-linear-gradient(
+      to right,
+      var(--xh-_separator-color) 0 var(--xh-_separator-dash),
+      transparent var(--xh-_separator-dash) calc(var(--xh-_separator-dash) + var(--xh-_separator-dash-gap))
+    );
+  }
+
+  .xh-scope-separator[data-part='root'][data-dashed][data-orientation='vertical'] {
+    --xh-_separator-paint: repeating-linear-gradient(
+      to bottom,
+      var(--xh-_separator-color) 0 var(--xh-_separator-dash),
+      transparent var(--xh-_separator-dash) calc(var(--xh-_separator-dash) + var(--xh-_separator-dash-gap))
+    );
+  }
+
+  /* —— 带分节文字的三段形态 ——
+     渲染了 content 之后 root 改当容器：自己不再画线，线交给两条 line。
+     形态由部件在不在决定，没有开关 */
+  .xh-scope-separator[data-part='root']:has([data-part='content']) {
+    display: flex;
+    align-items: center;
+    inline-size: 100%;
+    block-size: auto;
+    gap: var(--xh-separator-gap, var(--xh-space-4));
+    /* 文字自带一行行高，上下留白收一半，整段占的高度与单线时相当 */
+    margin-block: var(--xh-separator-my, var(--xh-space-2_5));
+    background: none;
+  }
+
+  .xh-scope-separator[data-part='root'][data-orientation='vertical']:has([data-part='content']) {
+    flex-direction: column;
+    inline-size: auto;
+    block-size: 100%;
+  }
+
+  /* 两条线等分剩下的地方；粗细与颜色跟 root 单节点时同源 */
+  .xh-scope-separator[data-part='line'] {
+    flex: 1 1 0;
+    border-radius: var(--xh-separator-radius, var(--xh-shape-pill));
+    background: var(--xh-_separator-paint);
+  }
+
+  .xh-scope-separator[data-part='line'][data-orientation='horizontal'] {
+    block-size: var(--xh-separator-thickness, var(--xh-stroke-thin));
+  }
+
+  .xh-scope-separator[data-part='line'][data-orientation='vertical'] {
+    inline-size: var(--xh-separator-thickness, var(--xh-stroke-thin));
+  }
+
+  /* 分节文字：不参与等分，也不折行 */
+  .xh-scope-separator[data-part='content'] {
+    flex: none;
+    color: var(--xh-separator-content-fg, var(--xh-fg-default));
+    font-size: var(--xh-separator-content-font-size, var(--xh-text-body-size));
+    font-weight: var(--xh-separator-content-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-normal);
+    white-space: nowrap;
+  }
+
+  /* 文字靠边：靠哪边就把那一侧的线收成一小截，另一侧照旧等分 */
+  .xh-scope-separator[data-part='root'][data-align='start'] > [data-part='line']:where(.xh-scope-separator):first-child,
+  .xh-scope-separator[data-part='root'][data-align='end'] > [data-part='line']:where(.xh-scope-separator):last-child {
+    flex: 0 0 var(--xh-separator-align-length, var(--xh-space-6));
+  }
+
+  /* 强制色：线是底色（与虚线的渐变）画的，系统会把底色换成 Canvas，线就此消失。
+     线退出强制换色、颜色直接取 CanvasText，实线与虚线同一条槽 */
+  @media (forced-colors: active) {
+    .xh-scope-separator:is([data-part='root'], [data-part='line']) {
+      --xh-_separator-color: CanvasText;
+
+      forced-color-adjust: none;
+    }
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-separator[data-part='root'][hidden] {
+    display: none;
+  }
+}

package/dist/css/side-nav.css

@@ -0,0 +1,481 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 side nav 样式。 */
+
+/* 共享关键帧由 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 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-side-nav {
+    --xh-side-nav-skin: 1;
+  }
+
+  /* 私有槽同时声明在根与定位层上：折叠态的弹出面板被搬到 portal 落点，
+     不是根的后代，继承不过去。面板里的行与栏内那些消费的是同一批槽 */
+  .xh-scope-side-nav:is([data-part='root'], [data-part='positioner']) {
+    /* 行外的字形按档取尺，缺省 md，随 data-size 换档并同样声明在定位层上（弹出面板里的行也拿得到）；
+       行内的由家族随 data-xh-collection-size 下发。这支只管作者放进行里的图标：
+       侧栏自绘的状态字形（分支行尾的展开方向 chevron）是指示符，branch-indicator 在自己身上
+       把 --xh-icon-size 改接到 --xh-control-indicator-* 一族的盒尺 */
+    --xh-icon-size: var(--xh-side-nav-icon-size, var(--xh-glyph-size-md));
+
+    /* 尺寸档只换这三个私有槽，行从这两处继承它们，换档不必给每个部件各写一条选择器。
+       行高取导航行的尺（比同档控件高一截） */
+    --xh-_side-nav-row-h: var(--xh-nav-row-h-md);
+    /* 面板内的搜索框是字段，高度仍走控件尺 */
+    --xh-_side-nav-input-h: var(--xh-control-h-md);
+    --xh-_side-nav-row-px: var(--xh-control-px-md);
+    --xh-_side-nav-row-gap: var(--xh-control-gap-md);
+    --xh-_side-nav-row-font-size: var(--xh-control-font-md);
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面那条里 */
+  .xh-scope-side-nav:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
+    --xh-icon-size: var(--xh-side-nav-icon-size, var(--xh-glyph-size-sm));
+    --xh-_side-nav-row-h: var(--xh-nav-row-h-sm);
+    --xh-_side-nav-input-h: var(--xh-control-h-sm);
+    --xh-_side-nav-row-px: var(--xh-control-px-sm);
+    --xh-_side-nav-row-gap: var(--xh-control-gap-sm);
+    --xh-_side-nav-row-font-size: var(--xh-control-font-sm);
+  }
+
+  .xh-scope-side-nav:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
+    --xh-icon-size: var(--xh-side-nav-icon-size, var(--xh-glyph-size-lg));
+    --xh-_side-nav-row-h: var(--xh-nav-row-h-lg);
+    --xh-_side-nav-input-h: var(--xh-control-h-lg);
+    --xh-_side-nav-row-px: var(--xh-control-px-lg);
+    --xh-_side-nav-row-gap: var(--xh-control-gap-lg);
+    --xh-_side-nav-row-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 展开与折叠两档宽度缺省取侧栏令牌，与 Layout 的侧栏同源 */
+  .xh-scope-side-nav[data-part='root'] {
+    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);
+  }
+
+  /* 折叠成图标栏：整栏收窄；行文字先淡出，收窄落定之后才裁掉（见下） */
+  .xh-scope-side-nav[data-part='root'][data-collapsed] {
+    inline-size: var(--xh-side-nav-collapsed-w, var(--xh-sider-collapsed-w));
+  }
+
+  /* 搜索框：面板内嵌搜索的写法——不画字段外壳，通栏一行，高与字号随尺寸档，只画一道面内分隔的下划线；
+     重置与占位前景由字段家族按 data-xh-field-input 给，行内内衬与行同一支槽 */
+  .xh-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-input-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);
+  }
+
+  /* 聚焦不画环：插入符就是焦点指示。框没有外壳，全局那圈键盘焦点环只会压在通栏一行上 */
+  .xh-scope-side-nav[data-part='input']:focus-visible {
+    outline: none;
+  }
+
+  /* 自动填充：引擎给填过的框强加一套系统色，盖得过 background 与 color。
+     底改用 inset 阴影铺回来，字改用 -webkit-text-fill-color 接回来；
+     两个选择器名分写两条，一条列表里只要有一个名字不被认识整条就被丢弃 */
+  .xh-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));
+  }
+
+  .xh-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));
+  }
+
+  /* 折叠一开始搜索框就与行文字一起淡出，展开等整栏宽度落定才淡入；落成图标栏之后让位：
+     留着高度、不可见也不可聚焦（过滤此时暂停），下面的行不上下跳 */
+  .xh-scope-side-nav[data-part='root']:is([data-collapsed], [data-animating]) [data-part='input']:where(.xh-scope-side-nav) {
+    opacity: 0;
+  }
+
+  .xh-scope-side-nav[data-part='root'][data-collapsed]:not([data-animating]) [data-part='input']:where(.xh-scope-side-nav) {
+    visibility: hidden;
+  }
+
+  /* 搜索一条都没命中的占位：list 的兄弟，只一句次要文字，面归侧栏所在的宿主 */
+  .xh-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 的缩进与外边距 */
+  .xh-scope-side-nav[data-part='list'],
+  .xh-scope-side-nav[data-part='group-list'],
+  .xh-scope-side-nav[data-part='branch-content'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-side-nav-gap, var(--xh-space-1));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* 子层靠嵌套缩进，层级越深自然越靠里 */
+  .xh-scope-side-nav[data-part='branch-content'] {
+    padding-inline-start: var(--xh-side-nav-indent, var(--xh-space-4));
+  }
+
+  .xh-scope-side-nav[data-part='branch-content'][hidden] {
+    display: none;
+  }
+
+  /* 分组是上一层列表里的一条：标题与组内列表上下排，间距与行距同一个 gap */
+  .xh-scope-side-nav[data-part='group'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-side-nav-gap, var(--xh-space-1));
+    list-style: none;
+  }
+
+  .xh-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);
+  }
+
+  /* 图标栏里分组标题没有落点：字淡成透明、仍参与播报，标题留着自己的高度，下面的行不上下跳；
+     折叠一开始就淡出，展开等整栏宽度落定才淡入。落成图标栏之后在这一格里画一道细分隔，分组仍看得出来 */
+  .xh-scope-side-nav[data-part='root']:is([data-collapsed], [data-animating]) [data-part='group-label']:where(.xh-scope-side-nav) {
+    overflow: hidden;
+    color: transparent;
+    white-space: nowrap;
+  }
+
+  .xh-scope-side-nav[data-part='root'][data-collapsed]:not([data-animating]) [data-part='group-label']:where(.xh-scope-side-nav)::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);
+  }
+
+  .xh-scope-side-nav[data-part='branch'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-side-nav-gap, var(--xh-space-1));
+    list-style: none;
+  }
+
+  /* 叶子行的列表项：链接自己撑满，这一层只负责列表语义 */
+  .xh-scope-side-nav[data-part='item'] {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+  }
+
+  /* —— 行：分支按钮与链接同一副长相 ——
+     两种行都走 Collection Item 的 page 语境（页内持久集合）：悬停 / 高亮 / 按下面（白底承载 hover 100 →
+     pressed 200，只换面不缩放）、当前页（品牌淡底 + 淡底前景 + 起始侧 2px 指示条，current+hover 20% /
+     +pressed 28%）、展开路径（与 hover 同档的中性面，不用品牌色、不加粗）与禁用面都由家族按 data-current /
+     data-in-path / aria-disabled 给出。这里只把公开槽映射到桥接槽。
+     布局保持 flex 而不用家族网格：一行里可以并排作者自己的图标与徽标，间距统一由行的 gap 给，
+     家族按槽下发的外边距（--xh-collection-gap）归零；行高由 min-block-size 撑起，家族的块向内衬归零 */
+  .xh-scope-side-nav[data-part='branch-trigger'],
+  .xh-scope-side-nav[data-part='link'] {
+    --xh-collection-block-padding: 0;
+    --xh-collection-inline-padding: var(--xh-side-nav-link-px, var(--xh-_side-nav-row-px));
+    --xh-collection-gap: 0;
+    --xh-collection-font-size: var(--xh-side-nav-link-font-size, var(--xh-_side-nav-row-font-size));
+    --xh-collection-radius: var(--xh-side-nav-link-radius, var(--xh-shape-surface));
+    /* 作者的图标尺槽经桥接槽下发到行，家族缺省按 data-xh-collection-size 取档 */
+    --xh-collection-glyph-size: var(--xh-side-nav-icon-size, var(--xh-_collection-glyph-size));
+    --xh-collection-fg-rest: var(--xh-side-nav-row-fg, currentColor);
+    --xh-collection-fg-hover: var(--xh-side-nav-row-fg, currentColor);
+    --xh-collection-fg-keyboard-highlight: var(--xh-side-nav-row-fg, currentColor);
+    --xh-collection-fg-pressed: var(--xh-side-nav-row-fg, currentColor);
+    --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));
+    /* 当前页：页内持久集合的标记是品牌淡底行面 + 淡底前景；侧栏另把字重提到 semibold，整列扫读时当前项一眼可见 */
+    --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-semibold));
+    --xh-collection-font-weight-current-hover: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-semibold));
+    --xh-collection-font-weight-current-highlight: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-semibold));
+    --xh-collection-font-weight-current-pressed: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-semibold));
+    --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));
+    --xh-collection-indicator-fg-current-pressed: var(--xh-side-nav-indicator-color, var(--xh-fg-brand));
+    /* 展开路径：中性面，字色缺省由品牌色改回行的常态色 */
+    --xh-collection-bg-open-path: var(--xh-side-nav-row-bg-in-path, var(--xh-bg-subtle));
+    --xh-collection-fg-open-path: var(--xh-side-nav-row-fg-in-path, var(--xh-side-nav-row-fg, currentColor));
+    /* data-highlighted 跟的是连接层记的焦点行（指针点选也会落焦）：只换面，焦点环在 :focus-visible 下再接回 */
+    --xh-collection-outline-keyboard-highlight: transparent;
+    --xh-collection-outline-current-highlight: transparent;
+
+    display: flex;
+    align-items: center;
+    gap: var(--xh-side-nav-link-gap, var(--xh-_side-nav-row-gap));
+    inline-size: 100%;
+    min-block-size: var(--xh-side-nav-link-h, var(--xh-_side-nav-row-h));
+    border: none;
+    text-align: start;
+    text-decoration: none;
+  }
+
+  /* 键盘焦点出现时环才接回并立即到位，不压在背景过渡的中间帧上 */
+  .xh-scope-side-nav[data-part='branch-trigger']:focus-visible:not(:hover),
+  .xh-scope-side-nav[data-part='link']:focus-visible:not(:hover) {
+    --xh-collection-outline-keyboard-highlight: var(--xh-ring-focus);
+    --xh-collection-outline-current-highlight: var(--xh-ring-focus);
+
+    transition: none;
+  }
+
+  .xh-scope-side-nav[data-part='branch-text'],
+  .xh-scope-side-nav[data-part='link-text'] {
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 行文字与展开箭头的淡变：折叠一开始就淡出，此时仍在行里、由收窄的行宽裁着；展开时等整栏宽度落定才淡入。
+     弹出面板里的行不在此列 */
+  .xh-scope-side-nav[data-part='root']:is([data-collapsed], [data-animating]) [data-part='branch-text']:where(.xh-scope-side-nav):not([data-popout] :where(.xh-scope-side-nav)),
+  .xh-scope-side-nav[data-part='root']:is([data-collapsed], [data-animating]) [data-part='link-text']:where(.xh-scope-side-nav):not([data-popout] :where(.xh-scope-side-nav)),
+  .xh-scope-side-nav[data-part='root']:is([data-collapsed], [data-animating]) [data-part='branch-indicator']:where(.xh-scope-side-nav):not([data-popout] :where(.xh-scope-side-nav)) {
+    opacity: 0;
+  }
+
+  /* 落成图标栏（收窄落定）：行文字裁到看不见但仍参与播报，行内容居中，不裁半个字。
+     用 clip-path 而不是 display:none——图标栏里按钮与链接的可及名就是这段文字，
+     藏成 display:none 它们就一个名字都没有了。
+     white-space: nowrap 防止 1px 宽把文本挤成竖排。
+     弹出面板里的行不在此列——面板是正常宽度的浮层，文字照常显示 */
+  .xh-scope-side-nav[data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-text']:where(.xh-scope-side-nav):not([data-popout] :where(.xh-scope-side-nav)),
+  .xh-scope-side-nav[data-part='root'][data-collapsed]:not([data-animating]) [data-part='link-text']:where(.xh-scope-side-nav):not([data-popout] :where(.xh-scope-side-nav)) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* 展开指示是纯装饰（aria-hidden），落成图标栏之后整个不占位 */
+  .xh-scope-side-nav[data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-indicator']:where(.xh-scope-side-nav):not([data-popout] :where(.xh-scope-side-nav)) {
+    display: none;
+  }
+
+  .xh-scope-side-nav[data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-trigger']:where(.xh-scope-side-nav):not([data-popout] :where(.xh-scope-side-nav)),
+  .xh-scope-side-nav[data-part='root'][data-collapsed]:not([data-animating]) [data-part='link']:where(.xh-scope-side-nav):not([data-popout] :where(.xh-scope-side-nav)) {
+    --xh-collection-inline-padding: 0;
+
+    justify-content: center;
+  }
+
+  /* 弹出面板的定位层：坐标由连接层写在行内样式上，这里只管层号与命中区。
+     它被搬到浮层落点、不在侧栏子树内，所以卡片外观仍归面板本身；
+     这里不设 display，UA 的 [hidden]{display:none} 就仍然压得住收起态 */
+  .xh-scope-side-nav[data-part='positioner'] {
+    /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，面板继承它限高；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
+    --xh-_side-nav-available-h: 100vh;
+    /* 落定那一侧的可用宽度，同样由定位引擎经内联自定义属性写进来，行内轴据此夹取；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时退到视口宽 */
+    --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 与定位引擎同一套，不随书写方向翻 */
+  .xh-scope-side-nav[data-part='positioner'][data-placement^='top'] {
+    --xh-_overlay-enter-down: 1;
+  }
+
+  .xh-scope-side-nav[data-part='positioner'][data-placement^='bottom'] {
+    --xh-_overlay-enter-up: 1;
+  }
+
+  .xh-scope-side-nav[data-part='positioner'][data-placement^='left'] {
+    --xh-_overlay-enter-right: 1;
+  }
+
+  .xh-scope-side-nav[data-part='positioner'][data-placement^='right'] {
+    --xh-_overlay-enter-left: 1;
+  }
+
+  /* 还没落位就先藏着：visibility 而非 display，display:none 会让引擎量不到面板尺寸 */
+  .xh-scope-side-nav[data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  /* 折叠态的弹出面板：贴着触发按钮旁侧的浮层卡片。
+     面板自己不吃子层缩进（padding 整圈盖掉），面板内的嵌套子层照常缩进 */
+  .xh-scope-side-nav[data-part='branch-content'][data-popout] {
+    min-inline-size: var(--xh-side-nav-popout-min-w, var(--xh-overlay-menu-min-w));
+    /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的内容就点不到了 */
+    max-inline-size: min(var(--xh-side-nav-popout-max-w, var(--xh-overlay-max-w)), var(--xh-_side-nav-available-w));
+    padding: var(--xh-side-nav-popout-p, var(--xh-space-1));
+    border: var(--xh-stroke-thin) solid var(--xh-side-nav-popout-border, var(--xh-border-default));
+    border-radius: var(--xh-side-nav-popout-radius, var(--xh-shape-overlay));
+    background: var(--xh-side-nav-popout-bg, var(--xh-bg-surface));
+    box-shadow: var(--xh-side-nav-popout-shadow, var(--xh-elevation-floating));
+
+    /* 子导航条目数没有上限，矮视口下不限高就整块伸出视口且滚不到。
+       浮层滚动面：到底后不把滚动链穿透给页面；细条由 reset 层给 */
+    max-block-size: min(var(--xh-side-nav-popout-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_side-nav-available-h));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* 弹出分支是锚定在分支行旁侧的一列导航，与菜单同属锚定列表：从锚点一侧短移淡入，不缩放 */
+  .xh-scope-side-nav[data-part='branch-content'][data-popout][data-state='open'] {
+    animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
+     免得动画结束到收起落下来之间闪一下原样 */
+  .xh-scope-side-nav[data-part='branch-content'][data-popout][data-state='closed'] {
+    animation: xh-overlay-slide-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 箭头是行尾的后缀：auto 外边距把它顶到行尾，家族按 suffix 槽下发的外边距已在行上归零。
+     盒里的 chevron 是指示符：盒按指示符档定尺（comfortable 16 / compact 14，与 Tree / TreeSelect
+     的 branch-indicator 同款定尺盒），--xh-icon-size 在自己身上改接到盒的尺，兜底字形与作者塞进盒里的
+     XhIcon 读同一把尺、与盒同边长；不读家族按档下发到行的 --xh-icon-size——那支只管作者放进行里的
+     图标，按图标档取的 20px 比指示符档大一圈。盒自己定尺而不随字形撑开：转 90° 时才不抖 */
+  .xh-scope-side-nav[data-part='branch-indicator'] {
+    --xh-icon-size: var(--xh-side-nav-branch-indicator-size, var(--xh-control-indicator-size));
+
+    margin-inline-start: auto;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    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));
+    /* 收起时指向行尾、展开时转向下方，与逻辑书写方向一致：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);
+  }
+
+  .xh-scope-side-nav[data-part='branch-indicator'][data-state='open'] {
+    rotate: 90deg;
+  }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中。
+     尺寸读部件自己改接过的 --xh-icon-size：chevron 与盒同边长（见上面那块） */
+  .xh-scope-side-nav[data-part='branch-indicator']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    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-chevron-right) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-side-nav[data-part='root'][hidden],
+  .xh-scope-side-nav[data-part='list'][hidden],
+  .xh-scope-side-nav[data-part='group'][hidden],
+  .xh-scope-side-nav[data-part='group-list'][hidden],
+  .xh-scope-side-nav[data-part='branch'][hidden],
+  .xh-scope-side-nav[data-part='branch-trigger'][hidden],
+  .xh-scope-side-nav[data-part='item'][hidden],
+  .xh-scope-side-nav[data-part='link'][hidden],
+  .xh-scope-side-nav[data-part='branch-indicator'][hidden] {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    /* 图标栏里分组之间那道细分隔画的是一块底色，这一档里底色被统一换成 Canvas、整道消失；换成 GrayText 画回来 */
+    .xh-scope-side-nav[data-part='root'][data-collapsed]:not([data-animating]) [data-part='group-label']:where(.xh-scope-side-nav)::after {
+      background: GrayText;
+    }
+  }
+
+  @media print {
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文；搜索框同理，纸上没法输入。
+       收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
+    .xh-scope-side-nav[data-part='positioner'],
+    .xh-scope-side-nav[data-part='input'] {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       禁用取 GrayText */
+    .xh-scope-side-nav[data-part='branch-indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    .xh-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])) .xh-scope-side-nav[data-part='branch-indicator']:empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-side-nav[data-part='branch-trigger']:is([aria-disabled='true'], [data-disabled]) .xh-scope-side-nav[data-part='branch-indicator']:empty::before {
+      background-color: GrayText;
+    }
+  }
+}