@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/sparkline.css

@@ -0,0 +1,170 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 sparkline 样式。 */
+
+/* 描线与淡入关键帧由 family/motion.css 提供；本皮肤 @import 它，单独引入仍成立。
+   迷你图只消费色槽与线宽，不接 Chart 家族配方的标题、图例与提示框。 */
+@import '../family/motion.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-sparkline {
+    --xh-sparkline-skin: 1;
+  }
+
+  /* 根就是 <svg>：随文排版，宽度缺省 6rem，高度缺省一行字高，放进表格单元格与指标卡都不撑高一行。
+     几何要用的像素值以这里的私有槽为真源：机器挂载后从计算样式读它们，作者覆盖组件槽即改变几何 */
+  .xh-scope-sparkline[data-part='root'] {
+    --xh-_chart-metric-line-width: var(--xh-sparkline-line-width, var(--xh-chart-line-width));
+    --xh-_chart-metric-point-size: var(--xh-sparkline-marker-size, var(--xh-chart-point-size));
+    --xh-_chart-metric-gap: var(--xh-chart-gap);
+    --xh-_chart-metric-bar-max: var(--xh-sparkline-bar-max, var(--xh-chart-bar-max));
+    --xh-_chart-metric-radius: var(--xh-sparkline-bar-radius, var(--xh-shape-inset));
+    /* 迷你图不画轴、标签与命中区，这几项照样写全：度量槽登记成了长度，不写的那项读到的是初始值 0，不是缺省 */
+    --xh-_chart-metric-hit-min: var(--xh-chart-hit-min);
+    --xh-_chart-metric-tick-length: var(--xh-chart-tick-length);
+    --xh-_chart-metric-label-gap: var(--xh-chart-label-gap);
+    --xh-_chart-metric-font-size: var(--xh-text-caption-size);
+    --xh-_chart-metric-leading: var(--xh-leading-tight);
+
+    /* 缺省中性：线与柱退到弱化色，只让标记点取品牌色相的色槽 1，读者先看到「现在在哪」 */
+    --xh-_sparkline-color: var(--xh-sparkline-color, var(--xh-chart-deemphasis));
+    --xh-_sparkline-accent: var(--xh-sparkline-accent-color, var(--xh-chart-categorical-1));
+
+    display: inline-block;
+    inline-size: var(--xh-sparkline-width, 6rem);
+    /* 级联兜底：先写一行正文的行框令牌（正文字号 × 正文行距），再写 1lh。
+       1lh 晚于本库声明的浏览器地板，取不到时旧引擎丢掉后一条、留下前一条。 */
+    block-size: var(--xh-sparkline-height, var(--xh-text-body-line-h));
+    block-size: var(--xh-sparkline-height, 1lh);
+    /* 高度正好是一个行盒：顶边贴行盒顶边，行高不被撑开；居中对齐会按字的 x 高度再挪半格，行盒就多出一截 */
+    vertical-align: top;
+  }
+
+  /* 写了语气就整条取语气色：颜色本身带好坏含义，线、柱与标记点同色 */
+  .xh-scope-sparkline[data-part='root'][data-tone]:not([data-tone='neutral']) {
+    --xh-_sparkline-color: var(--xh-sparkline-color, var(--xh-_tone));
+    --xh-_sparkline-accent: var(--xh-sparkline-accent-color, var(--xh-_tone));
+  }
+
+  /* 参考带是注释：淡底画在数据之下 */
+  .xh-scope-sparkline[data-part='band'] {
+    fill: var(--xh-sparkline-band-bg, var(--xh-bg-subtle));
+    stroke: none;
+  }
+
+  /* 参考线：读数据的尺子，取标注色的细虚线，压在数据底下 */
+  .xh-scope-sparkline[data-part='reference-line'] {
+    fill: none;
+    stroke: var(--xh-sparkline-reference-color, var(--xh-chart-label));
+    stroke-width: var(--xh-stroke-thin);
+    stroke-dasharray: calc(var(--xh-stroke-thick) * 2) calc(var(--xh-stroke-thick) * 2);
+  }
+
+  .xh-scope-sparkline[data-part='line'] {
+    fill: none;
+    stroke: var(--xh-_sparkline-color);
+    stroke-width: var(--xh-_chart-metric-line-width);
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  /* 面积：线色淡洗，上沿是同一条折线 */
+  .xh-scope-sparkline[data-part='area-fill'] {
+    fill: var(--xh-_sparkline-color);
+    fill-opacity: var(--xh-chart-area-alpha);
+    stroke: none;
+  }
+
+  /* 柱：相邻柱之间的间隙由几何留出，不画描边；标出的那几根换成强调色 */
+  .xh-scope-sparkline[data-part='bar'] {
+    fill: var(--xh-_sparkline-color);
+    stroke: none;
+  }
+
+  .xh-scope-sparkline[data-part='bar'][data-marker] {
+    fill: var(--xh-_sparkline-accent);
+  }
+
+  /* 盈亏：正负各取涨跌色，缺省绿涨红跌，主题覆盖令牌即可对调 */
+  .xh-scope-sparkline[data-part='bar'][data-trend='rise'] {
+    fill: var(--xh-chart-rise);
+  }
+
+  .xh-scope-sparkline[data-part='bar'][data-trend='fall'] {
+    fill: var(--xh-chart-fall);
+  }
+
+  /* 标记点带一圈承载面色的描边环，压在线上也分得开 */
+  .xh-scope-sparkline[data-part='dot'] {
+    fill: var(--xh-_sparkline-accent);
+    stroke: var(--xh-chart-surface);
+    stroke-width: var(--xh-chart-gap);
+  }
+
+  /* 首次出现：折线从头描到尾，连接层在它入场的这一轮写 data-drawing 与 pathLength="1"，过渡结束即撤掉 */
+  .xh-scope-sparkline[data-part='line'][data-drawing] {
+    stroke-dasharray: 1;
+    animation: xh-draw var(--xh-motion-duration-reveal) var(--xh-motion-ease-continuous) both;
+  }
+
+  /* 标记点等描线的笔尖扫到才淡入：连接层写入它占入场时长的比例，乘上入场时长就是延迟 */
+  .xh-scope-sparkline[data-part='dot'][data-drawing] {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter) both;
+    animation-delay: calc(var(--xh-motion-duration-reveal) * var(--xh-_chart-reveal-at));
+  }
+
+  /* 减弱动效下折线直接在场，只随过渡淡入。两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    .xh-scope-sparkline[data-part='line'][data-drawing] {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) .xh-scope-sparkline[data-part='line'][data-drawing] {
+    animation: none;
+  }
+
+  /* 强制色：线与柱取系统文字色，标出的点与柱取强调色；面积不铺，参考带只留轮廓；
+     盈亏的正负靠在中线上方还是下方表达，不靠颜色 */
+  @media (forced-colors: active) {
+    .xh-scope-sparkline[data-part='band'] {
+      fill: none;
+      stroke: GrayText;
+      stroke-width: var(--xh-stroke-thin);
+    }
+
+    .xh-scope-sparkline[data-part='reference-line'] {
+      stroke: CanvasText;
+    }
+
+    .xh-scope-sparkline[data-part='line'] {
+      stroke: CanvasText;
+    }
+
+    .xh-scope-sparkline[data-part='area-fill'] {
+      fill: none;
+    }
+
+    .xh-scope-sparkline[data-part='bar'],
+    .xh-scope-sparkline[data-part='bar'][data-trend] {
+      fill: CanvasText;
+    }
+
+    .xh-scope-sparkline[data-part='bar'][data-marker],
+    .xh-scope-sparkline[data-part='dot'] {
+      fill: Highlight;
+    }
+
+    .xh-scope-sparkline[data-part='dot'] {
+      stroke: Canvas;
+    }
+  }
+
+  .xh-scope-sparkline[data-part='root'][hidden] {
+    display: none;
+  }
+}

package/dist/css/spinner.css

@@ -0,0 +1,256 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 spinner 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+
+@layer xihan.motion {
+  /* 三点档的波：一条亮带沿行扫过三枚点，点依次亮起再暗回禁用档，不再整组同步明暗 */
+  @keyframes xh-spinner-dots {
+    from {
+      -webkit-mask-position: 100% 0;
+      mask-position: 100% 0;
+    }
+
+    to {
+      -webkit-mask-position: 0 0;
+      mask-position: 0 0;
+    }
+  }
+}
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-spinner {
+    --xh-spinner-skin: 1;
+  }
+
+
+  /* 圆环画在伪元素上，root 自身不转：转的只是图形，同一行里的文案要留在原地读得动 */
+  .xh-scope-spinner[data-part='root'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-spinner-gap, var(--xh-control-gap-md));
+    line-height: var(--xh-leading-none);
+    pointer-events: none;
+    vertical-align: middle;
+  }
+
+  /* 竖排：转圈在上、配文在下居中，整块区域的等待用它 */
+  .xh-scope-spinner[data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+    gap: var(--xh-spinner-gap, var(--xh-space-1_5));
+  }
+
+  /* 露面前的等待：整块藏起、位置照留，露面那一刻布局不跳；visibility 同时把它从读屏里摘掉 */
+  .xh-scope-spinner[data-part='root'][data-state='hidden'] {
+    visibility: hidden;
+  }
+
+  .xh-scope-spinner[data-part='root']::before {
+    content: '';
+
+    /* 边框算进直径，换厚度不会把圆环撑大 */
+    box-sizing: border-box;
+    flex: none;
+    inline-size: var(--xh-spinner-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-spinner-size, var(--xh-glyph-size-md));
+    border: var(--xh-spinner-thickness, var(--xh-stroke-thick)) solid var(--xh-spinner-fg, var(--xh-fg-brand));
+
+    /* 一段 270° 的品牌色弧：起始边那一段是缺口（不画轨道，缺省透明），缺口转起来就看得出方向 */
+    border-block-start-color: var(--xh-spinner-track, transparent);
+    border-radius: var(--xh-spinner-radius, var(--xh-shape-circle));
+    animation: xh-spin var(--xh-spinner-duration, var(--xh-motion-loop-spin)) var(--xh-motion-ease-loop) infinite;
+  }
+
+  /* 三档直径走字形尺寸那把尺，与控件内图标同档（sm 16 / md 20 / lg 24）：圆环与同一行文字里的图标同级，
+     三档同族才不会在 compact 下错位。缺省档写在上面的基础规则里 */
+  .xh-scope-spinner[data-part='root'][data-size='sm']::before {
+    inline-size: var(--xh-glyph-size-sm);
+    block-size: var(--xh-glyph-size-sm);
+  }
+
+  .xh-scope-spinner[data-part='root'][data-size='lg']::before {
+    inline-size: var(--xh-glyph-size-lg);
+    block-size: var(--xh-glyph-size-lg);
+  }
+
+  /* 语气只换弧那三段，缺口照旧：弧与缺口的反差就是转向的读法。
+     选择器上带 [data-tone] 是必需的：语气槽会沿继承流下来，不限定在写了语气的
+     那个节点上，放在语气容器里的转圈会跟着一起改色 */
+  .xh-scope-spinner[data-part='root'][data-tone]::before {
+    border-color: var(--xh-spinner-fg, var(--xh-_tone));
+    border-block-start-color: var(--xh-spinner-track, transparent);
+  }
+
+  /*
+   * 渐隐弧：一整圈的色相由角度扫过来，再用一圈环形遮罩把中心挖空，剩下的就是一段
+   * 由浓到无的弧。转的还是同一条 xh-spin——这一档只换画法，不换节拍。
+   * 遮罩只吃 alpha，用 currentColor 当不透明的那一端即可。
+   */
+  .xh-scope-spinner[data-part='root'][data-variant='arc']::before {
+    border: 0;
+    background: conic-gradient(transparent, var(--xh-spinner-fg, var(--xh-fg-brand)));
+    -webkit-mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--xh-spinner-thickness, var(--xh-stroke-thick))),
+      currentColor 0
+    );
+    mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--xh-spinner-thickness, var(--xh-stroke-thick))),
+      currentColor 0
+    );
+  }
+
+  .xh-scope-spinner[data-part='root'][data-variant='arc'][data-tone]::before {
+    background: conic-gradient(transparent, var(--xh-spinner-fg, var(--xh-_tone)));
+  }
+
+  /*
+   * 三点：一行三枚圆点，依次亮起成一道波。它不转，因此圆角与描边都撤掉，
+   * 图形改由三层径向渐变画；点取品牌色，语气档只换这一处。
+   * 明暗不靠整组的不透明度（那样三点同步明灭，读起来像整体在闪），而是一层三倍宽的遮罩：
+   * 两端压在禁用档的不透明度，正中一道满不透明度的亮带，遮罩位置从行首外扫到行尾外，
+   * 亮带依次掠过三枚点。
+   */
+  .xh-scope-spinner[data-part='root'][data-variant='dots']::before {
+    --xh-_spinner-dot-dim: color-mix(in srgb, currentColor calc(var(--xh-state-disabled-opacity) * 100%), transparent);
+
+    border: 0;
+    border-radius: 0;
+    background:
+      radial-gradient(circle closest-side, var(--xh-spinner-fg, var(--xh-fg-brand)) 100%, transparent) 0 50% / 25% 25% no-repeat,
+      radial-gradient(circle closest-side, var(--xh-spinner-fg, var(--xh-fg-brand)) 100%, transparent) 50% 50% / 25% 25% no-repeat,
+      radial-gradient(circle closest-side, var(--xh-spinner-fg, var(--xh-fg-brand)) 100%, transparent) 100% 50% / 25% 25% no-repeat;
+    -webkit-mask: linear-gradient(90deg, var(--xh-_spinner-dot-dim) 40%, currentColor 50%, var(--xh-_spinner-dot-dim) 60%) 100% 0 / 300% 100% no-repeat;
+    mask: linear-gradient(90deg, var(--xh-_spinner-dot-dim) 40%, currentColor 50%, var(--xh-_spinner-dot-dim) 60%) 100% 0 / 300% 100% no-repeat;
+    animation: xh-spinner-dots var(--xh-spinner-duration, var(--xh-motion-loop-spin)) var(--xh-motion-ease-loop) infinite;
+    /* 波跟着书写方向走：三枚点左右对称，按书写方向符号水平翻过来，RTL 下就从右往左依次亮起 */
+    scale: var(--xh-direction-sign) 1;
+  }
+
+  .xh-scope-spinner[data-part='root'][data-variant='dots'][data-tone]::before {
+    background:
+      radial-gradient(circle closest-side, var(--xh-spinner-fg, var(--xh-_tone)) 100%, transparent) 0 50% / 25% 25% no-repeat,
+      radial-gradient(circle closest-side, var(--xh-spinner-fg, var(--xh-_tone)) 100%, transparent) 50% 50% / 25% 25% no-repeat,
+      radial-gradient(circle closest-side, var(--xh-spinner-fg, var(--xh-_tone)) 100%, transparent) 100% 50% / 25% 25% no-repeat;
+  }
+
+  /* 三点档的波自带一条动画，压不住上面那两块基础降级里的 animation: none，
+     因此这一档各自再写一份；遮罩一并撤掉，三点满不透明度静止。两组规则是同一件事的两个触发条件 */
+  @media (prefers-reduced-motion: reduce) {
+    .xh-scope-spinner[data-part='root'][data-variant='dots']::before {
+      -webkit-mask: none;
+      mask: none;
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) .xh-scope-spinner[data-part='root'][data-variant='dots']::before {
+    -webkit-mask: none;
+    mask: none;
+    animation: none;
+  }
+
+  @media print {
+    .xh-scope-spinner[data-part='root'][data-variant='dots']::before {
+      -webkit-mask: none;
+      mask: none;
+      animation: none;
+    }
+  }
+
+  /* 配文与转圈同一族颜色：品牌色、正文字号、中等字重 */
+  .xh-scope-spinner[data-part='label'] {
+    color: var(--xh-spinner-label-fg, var(--xh-fg-brand));
+    font-size: var(--xh-spinner-label-size, var(--xh-text-body-size));
+    font-weight: var(--xh-spinner-label-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-none);
+  }
+
+  /* 减少动效：圆环停下并整圈换成虚线，静止的形状仍然读得出"这里还没好"；
+     "在等什么"由 role=status 上的名字与可见文案继续承担。
+     两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    .xh-scope-spinner[data-part='root']::before {
+      border-style: dotted;
+      border-color: var(--xh-spinner-fg, var(--xh-fg-brand));
+      animation: none;
+    }
+
+    /* 静止态整圈同色，语气跟着铺满整圈 */
+    .xh-scope-spinner[data-part='root'][data-tone]::before {
+      border-color: var(--xh-spinner-fg, var(--xh-_tone));
+    }
+  }
+
+  :where([data-motion='reduce']) .xh-scope-spinner[data-part='root']::before {
+    border-style: dotted;
+    border-color: var(--xh-spinner-fg, var(--xh-fg-brand));
+    animation: none;
+  }
+
+  :where([data-motion='reduce']) .xh-scope-spinner[data-part='root'][data-tone]::before {
+    border-color: var(--xh-spinner-fg, var(--xh-_tone));
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-spinner[data-part='root'][hidden] {
+    display: none;
+  }
+
+  @media print {
+    /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
+       取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
+       :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
+       并成一条之后这层配对关系在文本上就断了。 */
+    .xh-scope-spinner[data-part='root']::before {
+      border-style: dotted;
+      border-color: var(--xh-spinner-fg, var(--xh-fg-brand));
+      animation: none;
+    }
+
+    .xh-scope-spinner[data-part='root'][data-tone]::before {
+      border-color: var(--xh-spinner-fg, var(--xh-_tone));
+    }
+  }
+
+  /*
+   * 高对比档：这一档把整层背景图丢掉，而渐隐弧与三点都画在背景上——屏幕上会一片空白。
+   * 三档一并退回环档的画法：高亮色的弧加一段画布色的缺口，转的还是同一条动画。
+   * 伪元素退出强制换色、直接写系统色，缺口不被换成别的颜色。
+   * 带语气的那几条（[data-tone]、[data-variant][data-tone]）特指度更高，这里逐条写上同样的限定：
+   * 退出了强制换色的伪元素不会再被系统改色，少一条语气色的弧或渐变就原样画出来
+   */
+  @media (forced-colors: active) {
+    .xh-scope-spinner[data-part='root']::before,
+    .xh-scope-spinner[data-part='root'][data-tone]::before {
+      forced-color-adjust: none;
+      border-color: Highlight;
+      border-block-start-color: Canvas;
+    }
+
+    .xh-scope-spinner[data-part='root'][data-variant='arc']::before,
+    .xh-scope-spinner[data-part='root'][data-variant='arc'][data-tone]::before,
+    .xh-scope-spinner[data-part='root'][data-variant='dots']::before,
+    .xh-scope-spinner[data-part='root'][data-variant='dots'][data-tone]::before {
+      border: var(--xh-spinner-thickness, var(--xh-stroke-thick)) solid Highlight;
+      border-block-start-color: Canvas;
+      border-radius: var(--xh-spinner-radius, var(--xh-shape-circle));
+      background-image: none;
+    }
+
+    /* 三点档退回描边后撤掉扫点的遮罩，改转圆环那一条 */
+    .xh-scope-spinner[data-part='root'][data-variant='dots']::before {
+      -webkit-mask: none;
+      mask: none;
+      animation-name: xh-spin;
+    }
+  }
+}

package/dist/css/splitter.css

@@ -0,0 +1,159 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 splitter 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-splitter {
+    --xh-splitter-skin: 1;
+  }
+
+  /* 分工：**面板在排布轴上的尺寸**由连接层每帧写进内联样式（flex-basis / flex-grow / flex-shrink）。
+     这份皮肤一条都不碰——内联优先级高于样式表，写了不但是死声明，
+     还会在切换 orientation 的那一帧跟连接层抢位置。皮肤只管排布方向、跨轴尺寸、
+     配色、光标与状态表现。
+
+     三个角色节点上的 data-orientation 说的都是**面板怎么排**（与 root 上那条同源）；
+     分隔条自身的横竖与它垂直，那件事写在 aria-orientation 上，样式不去读 ARIA。 */
+
+  .xh-scope-splitter[data-part='root'] {
+    display: flex;
+    /* 跨轴尺寸由作者给：竖排的分栏必须先有确定的高度，才谈得上把它分成几份 */
+    align-items: stretch;
+    overflow: hidden;
+    border-radius: var(--xh-splitter-radius, var(--xh-shape-surface));
+  }
+
+  .xh-scope-splitter[data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  .xh-scope-splitter[data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  /* 纯容器，焦点长在分隔条上，这里画环只会闪一下 */
+  .xh-scope-splitter[data-part='root']:focus-visible {
+    outline: none;
+  }
+
+  /* 禁用的整体压暗只做一次，落在最外层：面板与分隔条各自再叠一层 opacity 会越叠越黑。
+     这一档压的是宿主塞进面板里的正文，不是控件自己的图形，所以地板比 --xh-state-disabled-opacity
+     高：那一档是 0.5，黑字白底压完只有 3.94:1，读不出字。压暗仍要表达「这块动不了」，
+     所以留一个槽让使用者按自己的配色调，而不是直接不压。 */
+  .xh-scope-splitter[data-part='root'][data-disabled] {
+    opacity: var(--xh-splitter-disabled-opacity, 0.6);
+  }
+
+  /* 拖动期间整块不许选中文字：手在分隔条上来回蹭时会顺带把两侧的正文刷成高亮 */
+  .xh-scope-splitter[data-part='root'][data-dragging] {
+    user-select: none;
+  }
+
+  /* 拖动中的光标写在容器上而不是分隔条上：那条线只有几像素宽，
+     手一快指针就跑到面板上去了，光标随即变回箭头，看着像拖拽断了 */
+  .xh-scope-splitter[data-part='root'][data-orientation='horizontal'][data-dragging] {
+    cursor: col-resize;
+  }
+
+  .xh-scope-splitter[data-part='root'][data-orientation='vertical'][data-dragging] {
+    cursor: row-resize;
+  }
+
+  /* 面板自己不许把容器撑破：内容再宽也只能溢出自己这一格，
+     否则连接层算好的比例会被一段长文本顶开 */
+  .xh-scope-splitter[data-part='panel'] {
+    position: relative;
+    overflow: hidden;
+  }
+
+  /* flex 项目的自动最小尺寸默认是内容宽，比 flex-basis 更硬——
+     不把它挪开，连接层内联写的 basis / shrink 在内容超宽时会被静默架空。
+     这两条给的不是尺寸，是"允许收到多小"的地板，因此不与内联样式冲突 */
+  .xh-scope-splitter[data-part='panel'][data-orientation='horizontal'] {
+    min-inline-size: 0;
+  }
+
+  .xh-scope-splitter[data-part='panel'][data-orientation='vertical'] {
+    min-block-size: 0;
+  }
+
+  .xh-scope-splitter[data-part='panel']:focus-visible {
+    outline: none;
+  }
+
+  /* 折叠 / 展开（Enter、双击、命令式）时面板尺寸走过渡，与 Layout 侧栏折叠同一种节奏；
+     拖拽与方向键步进跟手，连接层不投影 data-animating，照旧瞬时。尺寸仍由连接层写内联，这里只挂过渡 */
+  .xh-scope-splitter[data-part='root'][data-animating] > .xh-scope-splitter[data-part='panel'] {
+    transition: flex-basis var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* 折叠到 0 时连边框都不该露出来：留一条缝比留一块面板更像坏了 */
+  .xh-scope-splitter[data-part='panel'][data-collapsed] {
+    border: none;
+  }
+
+  /* 分隔条自己的粗细归皮肤（连接层不碰它这条轴）。
+     flex: none 是必须的：它若跟着一起伸缩，面板的百分比就再也对不上了 */
+  .xh-scope-splitter[data-part='resize-trigger'] {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    background: var(--xh-splitter-trigger-bg, var(--xh-border-default));
+    transition: background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-splitter[data-part='resize-trigger'][data-orientation='horizontal'] {
+    inline-size: var(--xh-splitter-trigger-thickness, var(--xh-space-1));
+    cursor: col-resize;
+  }
+
+  .xh-scope-splitter[data-part='resize-trigger'][data-orientation='vertical'] {
+    block-size: var(--xh-splitter-trigger-thickness, var(--xh-space-1));
+    cursor: row-resize;
+  }
+
+  /* 分隔条是一根线不是一块面：悬停不走面阶梯（300 只留给 pressed），
+     按线取——与字段描边 rest → hover 同向加深一档 */
+  .xh-scope-splitter[data-part='resize-trigger']:hover {
+    background: var(--xh-splitter-trigger-bg-hover, var(--xh-border-control));
+  }
+
+  /* 只有正被拖的那条带 data-dragging：多条分隔条时全高亮就分不出手在哪一条上 */
+  .xh-scope-splitter[data-part='resize-trigger'][data-dragging] {
+    background: var(--xh-splitter-trigger-bg-dragging, var(--xh-bg-brand));
+  }
+
+  /* 常态灰面与公共品牌环已经过线；拖动态才改用品牌面配对前景，避免同色环。 */
+  .xh-scope-splitter[data-part='resize-trigger'][data-dragging]:focus-visible {
+    --xh-_ring-color: var(--xh-fg-on-brand);
+  }
+
+  /* 分隔条是 div、role=separator，原生 disabled 在它身上不生效，
+     禁用只表达成 aria-disabled 与 data-disabled，写 :disabled 永远不命中。
+     光标不交给公共层：上面两条按走向给的 col-resize / row-resize 特异性相同又排在后面，
+     公共层那条压不过它们 */
+  .xh-scope-splitter[data-part='resize-trigger'][data-disabled] {
+    background: var(--xh-splitter-trigger-bg-disabled, var(--xh-border-subtle));
+    cursor: not-allowed;
+  }
+
+  /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
+     不补的话作者给节点加 hidden 后它照样显示 */
+  .xh-scope-splitter[data-part='root'][hidden],
+  .xh-scope-splitter[data-part='resize-trigger'][hidden] {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    /* 分隔条画的是一块纯底色，这一档里底色被统一换成 Canvas，那条线整根消失，
+       两侧面板就糊成一块。换成前景色画回来 */
+    .xh-scope-splitter[data-part='resize-trigger'] {
+      background: CanvasText;
+    }
+  }
+}