@xihan-ui/styles 1.0.0-alpha.0 → 1.0.0-alpha.2

package/css/progress.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='progress'] {
+    --xh-progress-skin: 1;
+  }
+
   /* 私有槽位：组件令牌 → 中档字面量两级回退。厚度写在 root 上而不是 track 上，
      尺寸档才改得动一处就够，track 靠继承拿到值。 */
   [data-scope='progress'][data-part='root'] {
@@ -26,7 +31,7 @@
   }
 
   /* —— 尺寸 —— */
-  /* 只有厚度分档；中间档不写规则，缺省即中档 */
+  /* 线形只有厚度分档；中间档不写规则，缺省即中档 */
   [data-scope='progress'][data-part='root'][data-size='sm'] {
     --xh-_thickness: var(--xh-progress-thickness, var(--xh-space-1));
   }
@@ -34,4 +39,71 @@
   [data-scope='progress'][data-part='root'][data-size='lg'] {
     --xh-_thickness: var(--xh-progress-thickness, var(--xh-space-2));
   }
+
+  /* —— 环形 —— */
+  /* 环画在固定的 100×100 viewBox 里，直径由这里的尺寸决定；
+     画面与环心文字叠在同一格上，文字因此恒在圆心 */
+  [data-scope='progress'][data-part='root'][data-variant='circle'],
+  [data-scope='progress'][data-part='root'][data-variant='dashboard'] {
+    --xh-_diameter: var(--xh-progress-size, 7.5rem);
+
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--xh-_diameter);
+    block-size: var(--xh-_diameter);
+  }
+
+  [data-scope='progress'][data-part='root'][data-variant='circle'][data-size='sm'],
+  [data-scope='progress'][data-part='root'][data-variant='dashboard'][data-size='sm'] {
+    --xh-_diameter: var(--xh-progress-size, 5rem);
+  }
+
+  [data-scope='progress'][data-part='root'][data-variant='circle'][data-size='lg'],
+  [data-scope='progress'][data-part='root'][data-variant='dashboard'][data-size='lg'] {
+    --xh-_diameter: var(--xh-progress-size, 10rem);
+  }
+
+  [data-scope='progress'][data-part='canvas'],
+  [data-scope='progress'][data-part='label'] {
+    grid-area: 1 / 1;
+  }
+
+  [data-scope='progress'][data-part='canvas'] {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  /* 环心文字：占位不撑格子，长内容自己换行由作者定 */
+  [data-scope='progress'][data-part='label'] {
+    color: var(--xh-progress-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-progress-label-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-none);
+    text-align: center;
+  }
+
+  /* 圆心、半径与那两段虚线都由连接层算好写进内联样式，这里只上色。
+     底槽不跟着语气换族：只有已完成的那段换色，才读得出"完成了多少" */
+  [data-scope='progress'][data-part='track'][data-variant='circle'],
+  [data-scope='progress'][data-part='track'][data-variant='dashboard'] {
+    stroke: var(--xh-progress-track, var(--xh-bg-subtle-active));
+  }
+
+  [data-scope='progress'][data-part='range'][data-variant='circle'],
+  [data-scope='progress'][data-part='range'][data-variant='dashboard'] {
+    stroke: var(--xh-progress-range, var(--xh-_tone, var(--xh-bg-brand)));
+    stroke-linecap: var(--xh-progress-linecap, round);
+    transition: stroke-dashoffset var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 零进度：圆角端点会在长度为 0 处画出一个圆点，收掉它 */
+  [data-scope='progress'][data-part='range'][data-empty] {
+    visibility: hidden;
+  }
+
+  /* 关掉动效的用户不该被进度条的补间晃一下；这里只管本组件 */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='progress'][data-part='range'] {
+      transition-duration: 0.01ms;
+    }
+  }
 }

package/css/qr-code.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='qr-code'] {
+    --xh-qr-code-skin: 1;
+  }
+
   /*
    * 根 <svg>。深浅两色取固定档而不是语义前景/背景：语义色跟着主题走，深色主题下整张码
    * 会翻成浅底深模块的反相图，一部分读码器不认反相码。要换配色改下面这三个覆盖槽。

package/css/radio-group.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='radio-group'] {
+    --xh-radio-group-skin: 1;
+  }
+
   [data-scope='radio-group'][data-part='root'] {
     /* 尺寸档只换这两个私有槽，标题与条目都从 root 继承它们，换档不必给每个部件各写一条选择器 */
     --xh-_radio-group-item-gap: var(--xh-control-gap-md);
@@ -69,7 +74,7 @@
     justify-content: center;
     inline-size: 16px;
     block-size: 16px;
-    border: var(--xh-stroke-thin) solid var(--xh-radio-group-indicator-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-radio-group-indicator-border, var(--xh-border-control));
     border-radius: var(--xh-shape-pill);
     background: var(--xh-radio-group-indicator-bg, var(--xh-bg-canvas));
     transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);

package/css/rating.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='rating'] {
+    --xh-rating-skin: 1;
+  }
+
   /* position 是给表单影子做定位基准的：那份输入被连接层内联写成绝对定位，
      根上不留基准它就会贴到更外层的定位祖先上，原生校验提示跟着飘到页面别处。 */
   [data-scope='rating'][data-part='root'] {

package/css/result.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='result'] {
+    --xh-result-skin: 1;
+  }
+
   [data-scope='result'][data-part='root'] {
     /* 三个尺寸档只换这几个私有槽，图标与标题都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */

package/css/scroll-area.css

@@ -11,15 +11,14 @@
       opacity: 1;
     }
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='scroll-area'] [data-part] {
-      animation-duration: 0.01ms !important;
-    }
-  }
 }
 
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='scroll-area'] {
+    --xh-scroll-area-skin: 1;
+  }
+
   /* 定位分工：滑块在**主轴**上的起点与长度由连接层每帧写进内联样式——
      竖向是 inset-block-start / block-size，横向是 inset-inline-start / inline-size。
      这份皮肤一个都不碰：内联优先级高于样式表，写了不但是死声明，

package/css/select.css

@@ -1,4 +1,23 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='select'] {
+    --xh-select-skin: 1;
+  }
+
   [data-scope='select'][data-part='root'] {
     /* 尺寸档只换这五个私有槽，触发器、标题与条目都从 root 继承它们，
        换档不必给每个部件各写一条选择器。浮层在 positioner 里、也是 root 的后代，一并继承 */
@@ -10,14 +29,13 @@
 
     /* 形态档只换这三个槽：缺省即 outline（描边 + 画布底） */
     --xh-_select-trigger-bg: var(--xh-bg-canvas);
-    --xh-_select-trigger-border: var(--xh-border-default);
-    --xh-_select-trigger-border-hover: var(--xh-border-strong);
+    --xh-_select-trigger-border: var(--xh-border-control);
+    --xh-_select-trigger-border-hover: var(--xh-border-control-hover);
 
-    /* 强调色随语气走，只落在聚焦与选中上，正文文字色不动。
-       没写 data-tone 时 --xh-_tone 没被声明，三处都退回原来的取值 */
+    /* 聚焦环恒用固定环色；强调色随语气走，只落在勾选标记与选中文字上，正文文字色不动。
+       没写 data-tone 时 --xh-_tone 没被声明，两处都退回原来的取值 */
     --xh-_select-ring: var(--xh-ring-focus);
     --xh-_select-accent: var(--xh-_tone, var(--xh-bg-brand));
-    --xh-_select-item-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
     --xh-_select-item-selected-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 
     display: inline-flex;
@@ -50,21 +68,21 @@
      形态只决定描边与底色怎么用，用哪族颜色由 data-tone 决定 */
   [data-scope='select'][data-part='root'][data-variant='outline'] {
     --xh-_select-trigger-bg: var(--xh-bg-canvas);
-    --xh-_select-trigger-border: var(--xh-border-default);
-    --xh-_select-trigger-border-hover: var(--xh-border-strong);
+    --xh-_select-trigger-border: var(--xh-border-control);
+    --xh-_select-trigger-border-hover: var(--xh-border-control-hover);
   }
 
   /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
   [data-scope='select'][data-part='root'][data-variant='subtle'] {
     --xh-_select-trigger-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
     --xh-_select-trigger-border: transparent;
-    --xh-_select-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_select-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   [data-scope='select'][data-part='root'][data-variant='ghost'] {
     --xh-_select-trigger-bg: transparent;
     --xh-_select-trigger-border: transparent;
-    --xh-_select-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_select-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   [data-scope='select'][data-part='label'] {
@@ -98,10 +116,126 @@
     cursor: pointer;
   }
 
-  [data-scope='select'][data-part='trigger']:hover:not(:disabled) {
+  /* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
+  [data-scope='select'][data-part='trigger']:hover:not(:disabled, [data-invalid]) {
     border-color: var(--xh-select-trigger-border-hover, var(--xh-_select-trigger-border-hover));
   }
 
+  [data-scope='select'][data-part='trigger'][data-invalid] {
+    border-color: var(--xh-select-trigger-border-invalid, var(--xh-color-danger-500));
+  }
+
+  /* 收纳容器：触发器与清空按钮的定位基准，触发器在里面占满一行 */
+  [data-scope='select'][data-part='control'] {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  [data-scope='select'][data-part='control'] > [data-part='trigger'] {
+    flex: 1;
+  }
+
+  /* 清空按钮：trigger 的兄弟节点，幽灵小圆钮；没选中或禁用时连接层给 hidden */
+  [data-scope='select'][data-part='clear-trigger'] {
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--xh-select-clear-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-select-clear-size, var(--xh-control-indicator-size));
+    padding: 0;
+    border: none;
+    border-radius: var(--xh-shape-pill);
+    background: none;
+    color: var(--xh-select-clear-fg, var(--xh-fg-subtle));
+
+    /* 字号行高钉死：继承页面字号会让行框高过按钮，字形被基线顶离正中 */
+    font-size: var(--xh-select-clear-font-size, var(--xh-font-size-xs));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+  }
+
+  [data-scope='select'][data-part='clear-trigger']:hover {
+    background: var(--xh-select-clear-bg-hover, var(--xh-bg-subtle-hover));
+    color: var(--xh-select-clear-fg-hover, var(--xh-fg-default));
+  }
+
+  [data-scope='select'][data-part='clear-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-_select-ring);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='select'][data-part='clear-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 进了 control 就嵌进触发器右端（与展开指示符同位），纵向钉在正中；平时不占位也不接指针 */
+  [data-scope='select'][data-part='control'] [data-part='clear-trigger'] {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: var(--xh-select-trigger-px, var(--xh-_select-px));
+    translate: 0 -50%;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* 悬停或键盘聚到清空钮上时显形 */
+  [data-scope='select'][data-part='control']:hover [data-part='clear-trigger']:not([hidden]),
+  [data-scope='select'][data-part='control'] [data-part='clear-trigger']:focus-visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* 清空钮显形期间展开指示符让位，两个图标不叠在一起 */
+  [data-scope='select'][data-part='control']:hover:has([data-part='clear-trigger']:not([hidden])) [data-part='indicator'],
+  [data-scope='select'][data-part='control']:has([data-part='clear-trigger']:focus-visible) [data-part='indicator'] {
+    opacity: 0;
+  }
+
+  /* 多选标签：淡底小药丸；放触发器里是纯展示，放外面配 tag-remove 可删 */
+  [data-scope='select'][data-part='tag'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-select-tag-gap, var(--xh-space-1));
+    padding-block: 0;
+    padding-inline: var(--xh-select-tag-px, var(--xh-space-2));
+    border-radius: var(--xh-select-tag-radius, var(--xh-shape-pill));
+    background: var(--xh-select-tag-bg, var(--xh-bg-subtle));
+    color: var(--xh-select-tag-fg, var(--xh-fg-default));
+    font-size: var(--xh-select-tag-font-size, var(--xh-font-size-xs));
+    line-height: var(--xh-leading-normal);
+    white-space: nowrap;
+  }
+
+  [data-scope='select'][data-part='tag'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  [data-scope='select'][data-part='tag-remove'] {
+    display: inline-grid;
+    place-items: center;
+    padding: 0;
+    border: none;
+    border-radius: var(--xh-shape-pill);
+    background: none;
+    color: var(--xh-select-tag-remove-fg, var(--xh-fg-subtle));
+    font-size: inherit;
+    cursor: pointer;
+  }
+
+  [data-scope='select'][data-part='tag-remove']:hover {
+    color: var(--xh-select-tag-remove-fg-hover, var(--xh-fg-default));
+  }
+
+  [data-scope='select'][data-part='tag-remove']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-_select-ring);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='select'][data-part='tag-remove'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
   [data-scope='select'][data-part='trigger']:focus-visible {
     outline: var(--xh-ring-width) solid var(--xh-_select-ring);
     outline-offset: var(--xh-ring-offset);
@@ -181,8 +315,14 @@
     display: none;
   }
 
-  /* 容器只是焦点域兜底落点，落焦不画环：高亮永远长在条目上 */
-  [data-scope='select'][data-part='content']:focus-visible {
+  /* 焦点落在容器上只有一种情形：指针打开、无选中值、还没有任何条目当锚点。
+     那一刻它认领着 Tab 位，环画在浮层内沿；有锚点时环长在条目上，容器不再画 */
+  [data-scope='select'][data-part='content'][tabindex='0']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  [data-scope='select'][data-part='content']:not([tabindex='0']):focus-visible {
     outline: none;
   }
 
@@ -194,8 +334,8 @@
     display: flex;
     align-items: center;
     gap: var(--xh-select-item-gap, var(--xh-_select-gap));
-    padding-block: var(--xh-select-item-py, var(--xh-space-1));
-    padding-inline: var(--xh-select-item-px, var(--xh-control-px-sm));
+    padding-block: var(--xh-select-item-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-select-item-px, var(--xh-control-px-md));
     border-radius: var(--xh-select-item-radius, var(--xh-shape-control));
     color: var(--xh-select-item-fg, var(--xh-fg-default));
     font-size: var(--xh-select-item-font-size, var(--xh-_select-font-size));
@@ -204,11 +344,14 @@
     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);
   }
 
-  /* 键盘高亮与指针高亮共用一套底色：条目本身承载焦点，不另画描边 */
+  /* 悬停与键盘锚点共用中性灰轻档：条目本身承载焦点，不另画描边 */
   [data-scope='select'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]) {
-    background: var(--xh-select-item-bg-highlight, var(--xh-_select-item-highlight-bg));
+    background: var(--xh-select-item-bg-hover, var(--xh-bg-subtle));
   }
 
   /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，
@@ -218,7 +361,14 @@
     font-weight: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-medium));
   }
 
-  [data-scope='select'][data-part='item']:focus {
+  /* 键盘走到条目上要画环：轻档底色对白底只有 1.1:1，够不上焦点指示器的对比度要求。
+     指针悬停走的是程序化聚焦，鼠标模态下 :focus-visible 不匹配，不会误画 */
+  [data-scope='select'][data-part='item']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  [data-scope='select'][data-part='item']:focus:not(:focus-visible) {
     outline: none;
   }
 

package/css/separator.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='separator'] {
+    --xh-separator-skin: 1;
+  }
+
   [data-scope='separator'][data-part='root'] {
     border: 0;
     background: var(--xh-separator-color, var(--xh-border-default));

package/css/side-nav.css

@@ -0,0 +1,168 @@
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='side-nav'] {
+    --xh-side-nav-skin: 1;
+  }
+
+  [data-scope='side-nav'][data-part='root'] {
+    inline-size: var(--xh-side-nav-w, 240px);
+    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));
+  }
+
+  /* 折叠成图标栏：整栏收窄，文字随行宽被裁掉 */
+  [data-scope='side-nav'][data-part='root'][data-collapsed] {
+    inline-size: var(--xh-side-nav-collapsed-w, 56px);
+  }
+
+  [data-scope='side-nav'][data-part='list'],
+  [data-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;
+  }
+
+  /* 子层靠嵌套缩进，层级越深自然越靠里 */
+  [data-scope='side-nav'][data-part='branch-content'] {
+    padding-inline-start: var(--xh-side-nav-indent, var(--xh-space-4));
+  }
+
+  [data-scope='side-nav'][data-part='branch-content'][hidden] {
+    display: none;
+  }
+
+  [data-scope='side-nav'][data-part='group'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-side-nav-gap, var(--xh-space-1));
+    list-style: none;
+  }
+
+  [data-scope='side-nav'][data-part='group-label'] {
+    padding-block: var(--xh-space-1);
+    padding-inline: var(--xh-control-px-md);
+    font-size: var(--xh-font-size-xs);
+    color: var(--xh-fg-subtle);
+    user-select: none;
+  }
+
+  /* 折叠时分组标题没有落点，藏掉 */
+  [data-scope='side-nav'][data-part='group-label'][data-collapsed] {
+    display: none;
+  }
+
+  [data-scope='side-nav'][data-part='branch'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-side-nav-gap, var(--xh-space-1));
+    list-style: none;
+  }
+
+  /* —— 行：分支按钮与链接同一副长相 —— */
+  [data-scope='side-nav'][data-part='branch-trigger'],
+  [data-scope='side-nav'][data-part='link'] {
+    display: flex;
+    align-items: center;
+    gap: var(--xh-control-gap-md);
+    inline-size: 100%;
+    min-block-size: var(--xh-control-h-md);
+    padding-inline: var(--xh-control-px-md);
+    border: none;
+    border-radius: var(--xh-shape-control);
+    background: none;
+    color: inherit;
+    font-size: var(--xh-text-body-size);
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  [data-scope='side-nav'][data-part='branch-trigger']:hover,
+  [data-scope='side-nav'][data-part='link']:hover {
+    background: var(--xh-bg-subtle-hover);
+  }
+
+  [data-scope='side-nav'][data-part='branch-trigger']:focus-visible,
+  [data-scope='side-nav'][data-part='link']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 选中的那条：品牌淡底 + 强调字 */
+  [data-scope='side-nav'][data-part='link'][data-selected] {
+    background: var(--xh-bg-brand-subtle);
+    color: var(--xh-fg-brand);
+    font-weight: var(--xh-font-weight-medium);
+  }
+
+  /* 选中项的祖先枝：只染字色，一路指到当前页 */
+  [data-scope='side-nav'][data-part='branch-trigger'][data-active] {
+    color: var(--xh-fg-brand);
+  }
+
+  [data-scope='side-nav'][data-part='branch-trigger'][data-disabled],
+  [data-scope='side-nav'][data-part='link'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='side-nav'][data-part='branch-text'],
+  [data-scope='side-nav'][data-part='link-text'] {
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* 折叠成图标栏：文字与展开指示整个藏掉、行内容居中，不裁半个字。
+     弹出面板里的行不在此列——面板是正常宽度的浮层，文字照常显示 */
+  [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] [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] *) {
+    justify-content: center;
+    padding-inline: 0;
+  }
+
+  /* 折叠态的弹出面板：贴着触发按钮旁侧的浮层卡片，坐标由连接层写在行内样式上。
+     面板自己不吃子层缩进（padding 整圈盖掉），面板内的嵌套子层照常缩进 */
+  [data-scope='side-nav'][data-part='branch-content'][data-popout] {
+    z-index: var(--xh-side-nav-popout-layer, var(--xh-layer-popover));
+    min-inline-size: var(--xh-side-nav-popout-min-w, var(--xh-overlay-menu-min-w));
+    max-inline-size: var(--xh-side-nav-popout-max-w, var(--xh-overlay-max-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-surface));
+    background: var(--xh-side-nav-popout-bg, var(--xh-bg-surface));
+    box-shadow: var(--xh-side-nav-popout-shadow, var(--xh-elevation-2));
+    pointer-events: auto;
+  }
+
+  [data-scope='side-nav'][data-part='branch-indicator'] {
+    margin-inline-start: auto;
+    display: inline-flex;
+    flex: none;
+    transition: rotate var(--xh-duration-fast) var(--xh-ease-standard);
+  }
+
+  [data-scope='side-nav'][data-part='branch-indicator'][data-state='open'] {
+    rotate: 90deg;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='side-nav'][data-part='branch-indicator'] {
+      transition: none;
+    }
+  }
+}

package/css/skeleton.css

@@ -13,6 +13,11 @@
 }
 
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='skeleton'] {
+    --xh-skeleton-skin: 1;
+  }
+
   /* 骨架容器：竖着码放各根骨架条 */
   [data-scope='skeleton'][data-part='root'] {
     display: flex;