@xihan-ui/styles 1.0.0-alpha.0

package/css/slider.css

@@ -0,0 +1,197 @@
+@layer xihan.components {
+  /* 定位分工：已选区间与拇指在**主轴**上的起点与长度，由连接层每帧写进内联样式——
+     水平是 inset-inline-start / inline-size，竖直是 inset-block-end / block-size。
+     这份皮肤一个都不碰：内联优先级高于样式表，写了不但是死声明，
+     切换 orientation 的那一帧还会跟连接层清空另一轴的动作抢位置，把拇指钉在两轴都被约束的地方。
+     皮肤只管另一条轴（交叉轴）的尺寸、颜色、圆角与状态表现。 */
+
+  /* 私有槽位：组件令牌 → 中档字面量两级回退。轨道厚度与拇指直径同时被 control / track / thumb
+     三个角色节点用到，收成两个槽位挂在 root 上，尺寸档只改这两处，靠继承发到子部件。 */
+  [data-scope='slider'][data-part='root'] {
+    --xh-_thumb-size: var(--xh-slider-thumb-size, 18px);
+    --xh-_track-thickness: var(--xh-slider-track-thickness, 6px);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-slider-gap, var(--xh-stack-gap-md));
+  }
+
+  /* 竖排时整条控件收成一块，不再撑满一行：宽度由拇指直径决定 */
+  [data-scope='slider'][data-part='root'][data-orientation='vertical'] {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  /* 禁用的整体压暗只做一次，落在最外层：track / range / thumb 各自再叠一层 opacity 会越叠越黑 */
+  [data-scope='slider'][data-part='root'][data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
+  [data-scope='slider'][data-part='label'] {
+    color: var(--xh-slider-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-slider-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-slider-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+  }
+
+  [data-scope='slider'][data-part='label'][data-disabled] {
+    color: var(--xh-fg-subtle);
+  }
+
+  /* 拇指以它为定位上下文（拇指常常浮出轨道，挂在 track 上会被轨道的盒子束住）。
+     厚度取拇指直径：轨道只有几个像素，控件若按轨道高，浮出来的拇指会顶到上下相邻的元素。
+     touch-action 由连接层内联给（拖动要接管手势），这里不写。 */
+  [data-scope='slider'][data-part='control'] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    block-size: var(--xh-_thumb-size);
+    cursor: pointer;
+  }
+
+  [data-scope='slider'][data-part='control'][data-orientation='vertical'] {
+    flex-direction: column;
+    justify-content: center;
+    inline-size: var(--xh-_thumb-size);
+    block-size: var(--xh-slider-vertical-length, 10rem);
+  }
+
+  /* 按下轨道即跳，拖动中光标换成"抓着"的样子，手感与拇指一致 */
+  [data-scope='slider'][data-part='control'][data-dragging] {
+    cursor: grabbing;
+  }
+
+  [data-scope='slider'][data-part='control'][data-readonly] {
+    cursor: default;
+  }
+
+  [data-scope='slider'][data-part='control'][data-disabled] {
+    cursor: not-allowed;
+  }
+
+  /* 已选区间以它为定位上下文。不写 overflow: hidden：作者把拇指写进轨道里也是合法结构，
+     一裁就把拇指切掉半个；区间的圆角由它自己那条 border-radius 兜住，本就不靠轨道来裁。 */
+  [data-scope='slider'][data-part='track'] {
+    position: relative;
+    border-radius: var(--xh-slider-track-radius, var(--xh-shape-pill));
+    background: var(--xh-slider-track-bg, var(--xh-bg-subtle-active));
+  }
+
+  [data-scope='slider'][data-part='track'][data-orientation='horizontal'] {
+    inline-size: 100%;
+    block-size: var(--xh-_track-thickness);
+  }
+
+  [data-scope='slider'][data-part='track'][data-orientation='vertical'] {
+    block-size: 100%;
+    inline-size: var(--xh-_track-thickness);
+  }
+
+  /* 主轴（起点 + 长度）来自内联样式，这里只给定位模式与配色。
+     绝不给 inset / size 加过渡：拖拽时这两个值每帧都在变，一加过渡区间就永远追在指针后面。
+     语气槽由 root 上的 data-tone 声明、经继承发下来；没写 data-tone 时退回原来的品牌色。
+     轨道不跟着换族：区间与拇指换色即可读出语气，底槽保持中性才不会盖掉"已选/未选"的对比。 */
+  [data-scope='slider'][data-part='range'] {
+    position: absolute;
+    border-radius: var(--xh-slider-range-radius, var(--xh-shape-pill));
+    background: var(--xh-slider-range-bg, var(--xh-_tone, var(--xh-bg-brand)));
+  }
+
+  /* 交叉轴铺满轨道。这一侧的 inset 连接层每帧写成空串（即不设），样式表接手才有确定值；
+     不写的话绝对定位会退回"静态位置"，作者一给轨道加内边距就对不齐了。 */
+  [data-scope='slider'][data-part='range'][data-orientation='horizontal'] {
+    inset-block-start: 0;
+    block-size: 100%;
+  }
+
+  [data-scope='slider'][data-part='range'][data-orientation='vertical'] {
+    inset-inline-start: 0;
+    inline-size: 100%;
+  }
+
+  [data-scope='slider'][data-part='range'][data-invalid] {
+    background: var(--xh-slider-range-bg-invalid, var(--xh-color-danger-500));
+  }
+
+  /* 圆点浮在轨道之上：轨道是流内的，拇指是绝对定位的，天然后来居上，不必再堆 z-index。
+     box-sizing 必须显式写：描边要吃进直径里，否则实际盒子比 --xh-_thumb-size 宽两条边，
+     下面按半个直径回拉的负外边距就对不上圆心。 */
+  [data-scope='slider'][data-part='thumb'] {
+    position: absolute;
+    box-sizing: border-box;
+    inline-size: var(--xh-_thumb-size);
+    block-size: var(--xh-_thumb-size);
+    border: var(--xh-stroke-thick) solid var(--xh-slider-thumb-border, var(--xh-bg-surface));
+    border-radius: var(--xh-slider-thumb-radius, var(--xh-shape-pill));
+    background: var(--xh-slider-thumb-bg, var(--xh-_tone, var(--xh-bg-brand)));
+    box-shadow: var(--xh-slider-thumb-shadow, var(--xh-elevation-1));
+    cursor: grab;
+    transition: scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 内联样式把 inset-inline-start 定在值所在的比例上，那是拇指的**起始边**不是圆心；
+     用负的逻辑外边距回拉半个直径，圆心才落在比例点上。
+     这里刻意不用 translate(-50%)：rtl 下 inset-inline-start 映射到 right，
+     位移量是物理方向的，会把拇指推向错误的一侧；负的逻辑外边距自己就跟着换向。
+     交叉轴同理：inset-block-start 是连接层不写的那条轴，样式表接管即可。 */
+  [data-scope='slider'][data-part='thumb'][data-orientation='horizontal'] {
+    inset-block-start: 50%;
+    margin-block-start: calc(var(--xh-_thumb-size) / -2);
+    margin-inline-start: calc(var(--xh-_thumb-size) / -2);
+  }
+
+  /* 竖排的主轴是 inset-block-end（值向上增大），回拉也就换到 block-end 那侧 */
+  [data-scope='slider'][data-part='thumb'][data-orientation='vertical'] {
+    inset-inline-start: 50%;
+    margin-inline-start: calc(var(--xh-_thumb-size) / -2);
+    margin-block-end: calc(var(--xh-_thumb-size) / -2);
+  }
+
+  [data-scope='slider'][data-part='thumb']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 多拇指时只有手真正推着的那一个带 data-dragging，放大与光标因此不会全组一起变。
+     放大用 scale 而不是改尺寸：变换绕自身中心发生，圆心不动，负外边距的算式也不用跟着改。 */
+  [data-scope='slider'][data-part='thumb'][data-dragging] {
+    scale: var(--xh-slider-thumb-scale-dragging, 1.12);
+    cursor: grabbing;
+    box-shadow: var(--xh-slider-thumb-shadow-dragging, var(--xh-elevation-2));
+  }
+
+  [data-scope='slider'][data-part='thumb'][data-invalid] {
+    background: var(--xh-slider-thumb-bg-invalid, var(--xh-color-danger-500));
+  }
+
+  [data-scope='slider'][data-part='thumb'][data-readonly] {
+    cursor: default;
+  }
+
+  [data-scope='slider'][data-part='thumb'][data-disabled] {
+    cursor: not-allowed;
+  }
+
+  /* —— 尺寸 —— */
+  /* 尺寸只改 root 上那两个槽位，control / track / thumb 跟着一起走；中间档不写规则，缺省即中档。
+     两档都保持"拇指是轨道的三倍厚"这个比例，换档时圆点与底槽的关系看着不变。 */
+  [data-scope='slider'][data-part='root'][data-size='sm'] {
+    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-space-3));
+    --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-space-1));
+  }
+
+  [data-scope='slider'][data-part='root'][data-size='lg'] {
+    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-space-6));
+    --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-space-2));
+  }
+
+  /* display 会盖掉 UA 的 [hidden]{display:none}，凡是被赋了 display 的角色节点都要显式让位 */
+  [data-scope='slider'][data-part='root'][hidden],
+  [data-scope='slider'][data-part='control'][hidden] {
+    display: none;
+  }
+
+  /* hidden-input 是 type=hidden 的原生输入，浏览器本就不渲染它，
+     这里一条声明都不给：给了 display / 尺寸反而会把它拽回布局里，在拇指内部撑出一块空白。 */
+}

package/css/spinner.css

@@ -0,0 +1,74 @@
+@layer xihan.components {
+  /* 转圈的关键帧定义在本文件里。皮肤可以按需单独引入，
+     引用别处文件里的动画名时那份文件不一定在场，动画会静默地整个不跑 */
+  @keyframes xh-spinner-rotate {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+
+  /* 圆环画在伪元素上，root 自身不转：转的只是图形，同一行里的文案要留在原地读得动 */
+  [data-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);
+    vertical-align: middle;
+  }
+
+  [data-scope='spinner'][data-part='root']::before {
+    content: '';
+
+    /* 边框算进直径，换厚度不会把圆环撑大 */
+    box-sizing: border-box;
+    flex: none;
+    inline-size: var(--xh-spinner-size, var(--xh-control-action-size));
+    block-size: var(--xh-spinner-size, var(--xh-control-action-size));
+    border: var(--xh-spinner-thickness, var(--xh-stroke-thick)) solid var(--xh-spinner-track, var(--xh-border-default));
+
+    /* 一整圈是轨道色，只有起始边换成前景色，转起来才看得出方向 */
+    border-block-start-color: var(--xh-spinner-fg, var(--xh-bg-brand));
+    border-radius: var(--xh-spinner-radius, var(--xh-shape-pill));
+    animation: xh-spinner-rotate var(--xh-spinner-duration, calc(var(--xh-duration-slow) * 2)) linear infinite;
+  }
+
+  /* 三档直径对齐控件档位，缺省档写在上面的基础规则里 */
+  [data-scope='spinner'][data-part='root'][data-size='sm']::before {
+    inline-size: var(--xh-control-indicator-size);
+    block-size: var(--xh-control-indicator-size);
+  }
+
+  [data-scope='spinner'][data-part='root'][data-size='lg']::before {
+    inline-size: var(--xh-control-h-md);
+    block-size: var(--xh-control-h-md);
+  }
+
+  /* 语气只换起始边那一段，轨道留在中性描边上：轨道与起始边的反差就是转向的读法，
+     两者同时换成同一族颜色，转到哪儿就看不出来了。
+     选择器上带 [data-tone] 是必需的：语气槽会沿继承流下来，不限定在写了语气的
+     那个节点上，放在语气容器里的转圈会跟着一起改色 */
+  [data-scope='spinner'][data-part='root'][data-tone]::before {
+    border-block-start-color: var(--xh-spinner-fg, var(--xh-_tone, var(--xh-bg-brand)));
+  }
+
+  [data-scope='spinner'][data-part='label'] {
+    color: var(--xh-spinner-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-spinner-label-size, var(--xh-font-size-sm));
+    line-height: var(--xh-leading-none);
+  }
+
+  /* 减少动效：圆环停下并整圈换成虚线，静止的形状仍然读得出"这里还没好"；
+     "在等什么"由 role=status 上的名字与可见文案继续承担 */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='spinner'][data-part='root']::before {
+      border-style: dotted;
+      border-color: var(--xh-spinner-fg, var(--xh-bg-brand));
+      animation: none;
+    }
+
+    /* 静止态整圈同色，语气跟着铺满整圈 */
+    [data-scope='spinner'][data-part='root'][data-tone]::before {
+      border-color: var(--xh-spinner-fg, var(--xh-_tone, var(--xh-bg-brand)));
+    }
+  }
+}

package/css/splitter.css

@@ -0,0 +1,127 @@
+@layer xihan.components {
+  /* 分工：**面板在排布轴上的尺寸**由连接层每帧写进内联样式（flex-basis / flex-grow / flex-shrink）。
+     这份皮肤一条都不碰——内联优先级高于样式表，写了不但是死声明，
+     还会在切换 orientation 的那一帧跟连接层抢位置。皮肤只管排布方向、跨轴尺寸、
+     配色、光标与状态表现。
+
+     三个角色节点上的 data-orientation 说的都是**面板怎么排**（与 root 上那条同源）；
+     分隔条自身的横竖与它垂直，那件事写在 aria-orientation 上，样式不去读 ARIA。 */
+
+  [data-scope='splitter'][data-part='root'] {
+    display: flex;
+    /* 跨轴尺寸由作者给：竖排的分栏必须先有确定的高度，才谈得上把它分成几份 */
+    align-items: stretch;
+    overflow: hidden;
+    border-radius: var(--xh-splitter-radius, var(--xh-shape-surface));
+  }
+
+  [data-scope='splitter'][data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  [data-scope='splitter'][data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  /* 纯容器，焦点长在分隔条上，这里画环只会闪一下 */
+  [data-scope='splitter'][data-part='root']:focus-visible {
+    outline: none;
+  }
+
+  /* 禁用的整体压暗只做一次，落在最外层：面板与分隔条各自再叠一层 opacity 会越叠越黑 */
+  [data-scope='splitter'][data-part='root'][data-disabled] {
+    opacity: 0.6;
+  }
+
+  /* 拖动期间整块不许选中文字：手在分隔条上来回蹭时会顺带把两侧的正文刷成高亮 */
+  [data-scope='splitter'][data-part='root'][data-dragging] {
+    user-select: none;
+  }
+
+  /* 拖动中的光标写在容器上而不是分隔条上：那条线只有几像素宽，
+     手一快指针就跑到面板上去了，光标随即变回箭头，看着像拖拽断了 */
+  [data-scope='splitter'][data-part='root'][data-orientation='horizontal'][data-dragging] {
+    cursor: col-resize;
+  }
+
+  [data-scope='splitter'][data-part='root'][data-orientation='vertical'][data-dragging] {
+    cursor: row-resize;
+  }
+
+  /* 面板自己不许把容器撑破：内容再宽也只能溢出自己这一格，
+     否则连接层算好的比例会被一段长文本顶开 */
+  [data-scope='splitter'][data-part='panel'] {
+    position: relative;
+    overflow: hidden;
+  }
+
+  /* flex 项目的自动最小尺寸默认是内容宽，比 flex-basis 更硬——
+     不把它挪开，连接层内联写的 basis / shrink 在内容超宽时会被静默架空。
+     这两条给的不是尺寸，是"允许收到多小"的地板，因此不与内联样式冲突 */
+  [data-scope='splitter'][data-part='panel'][data-orientation='horizontal'] {
+    min-inline-size: 0;
+  }
+
+  [data-scope='splitter'][data-part='panel'][data-orientation='vertical'] {
+    min-block-size: 0;
+  }
+
+  [data-scope='splitter'][data-part='panel']:focus-visible {
+    outline: none;
+  }
+
+  /* 折叠到 0 时连边框都不该露出来：留一条缝比留一块面板更像坏了 */
+  [data-scope='splitter'][data-part='panel'][data-collapsed] {
+    border: none;
+  }
+
+  /* 分隔条自己的粗细归皮肤（连接层不碰它这条轴）。
+     flex: none 是必须的：它若跟着一起伸缩，面板的百分比就再也对不上了 */
+  [data-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 var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='splitter'][data-part='resize-trigger'][data-orientation='horizontal'] {
+    inline-size: var(--xh-splitter-trigger-thickness, var(--xh-space-1));
+    cursor: col-resize;
+  }
+
+  [data-scope='splitter'][data-part='resize-trigger'][data-orientation='vertical'] {
+    block-size: var(--xh-splitter-trigger-thickness, var(--xh-space-1));
+    cursor: row-resize;
+  }
+
+  [data-scope='splitter'][data-part='resize-trigger']:hover {
+    background: var(--xh-splitter-trigger-bg-hover, var(--xh-bg-subtle-active));
+  }
+
+  /* 只有正被拖的那条带 data-dragging：多条分隔条时全高亮就分不出手在哪一条上 */
+  [data-scope='splitter'][data-part='resize-trigger'][data-dragging] {
+    background: var(--xh-splitter-trigger-bg-dragging, var(--xh-bg-brand));
+  }
+
+  /* 焦点环往里画：分隔条只有几像素粗，往外画的那圈会被 root 的 overflow: hidden 切掉 */
+  [data-scope='splitter'][data-part='resize-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(var(--xh-ring-offset) * -1);
+  }
+
+  /* 分隔条是 div、role=separator，原生 disabled 在它身上不生效，
+     禁用只表达成 aria-disabled 与 data-disabled，写 :disabled 永远不命中 */
+  [data-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 后它照样显示 */
+  [data-scope='splitter'][data-part='root'][hidden],
+  [data-scope='splitter'][data-part='resize-trigger'][hidden] {
+    display: none;
+  }
+}

package/css/statistic.css

@@ -0,0 +1,67 @@
+@layer xihan.components {
+  /* 三个尺寸档只换这几个私有槽，各段从 root 继承它们，换档不必给每个部件各写一条选择器 */
+  [data-scope='statistic'][data-part='root'] {
+    --xh-_statistic-label-size: var(--xh-font-size-sm);
+    --xh-_statistic-value-size: var(--xh-font-size-2xl);
+    --xh-_statistic-affix-size: var(--xh-font-size-md);
+    --xh-_statistic-row-gap: var(--xh-space-1);
+
+    /* 折行排布：标签独占一行，前缀、数值、后缀在下一行按基线对齐排在一起 */
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    /* 前后缀默认贴着数值：货币符号与百分号中间留白就不成一个数了，要间距的写法自己开槽 */
+    column-gap: var(--xh-statistic-gap, var(--xh-space-0));
+    row-gap: var(--xh-statistic-row-gap, var(--xh-_statistic-row-gap));
+    color: var(--xh-statistic-fg, var(--xh-fg-default));
+  }
+
+  /* 上面声明了 display，会盖掉 UA 的 [hidden] 规则，收起态要在这里接回来 */
+  [data-scope='statistic'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 尺寸 —— */
+  [data-scope='statistic'][data-part='root'][data-size='sm'] {
+    --xh-_statistic-label-size: var(--xh-font-size-xs);
+    --xh-_statistic-value-size: var(--xh-font-size-xl);
+    --xh-_statistic-affix-size: var(--xh-font-size-sm);
+    --xh-_statistic-row-gap: var(--xh-space-0_5);
+  }
+
+  [data-scope='statistic'][data-part='root'][data-size='lg'] {
+    --xh-_statistic-label-size: var(--xh-font-size-md);
+    --xh-_statistic-value-size: var(--xh-font-size-3xl);
+    --xh-_statistic-affix-size: var(--xh-font-size-lg);
+    --xh-_statistic-row-gap: var(--xh-space-1_5);
+  }
+
+  /* —— 各段 —— */
+  /* 占满一整行，把前缀、数值、后缀挤到下一行去 */
+  [data-scope='statistic'][data-part='label'] {
+    flex: 0 0 100%;
+    color: var(--xh-statistic-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-statistic-label-font-size, var(--xh-_statistic-label-size));
+    font-weight: var(--xh-font-weight-regular);
+    line-height: var(--xh-leading-normal);
+  }
+
+  /* 等宽数字：逐位宽度一致，数值刷新时后面的字符不会左右挪动 */
+  [data-scope='statistic'][data-part='value'] {
+    color: var(--xh-statistic-value-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
+    font-size: var(--xh-statistic-value-font-size, var(--xh-_statistic-value-size));
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--xh-font-weight-semibold);
+    line-height: var(--xh-leading-tight);
+  }
+
+  /* 前后缀比数值小一档、跟着数值的语气走；没写语气时退成弱前景 */
+  [data-scope='statistic'][data-part='prefix'],
+  [data-scope='statistic'][data-part='suffix'] {
+    color: var(--xh-statistic-affix-fg, var(--xh-_tone-fg, var(--xh-fg-muted)));
+    font-size: var(--xh-statistic-affix-font-size, var(--xh-_statistic-affix-size));
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--xh-font-weight-regular);
+    line-height: var(--xh-leading-tight);
+  }
+}