@xihan-ui/styles 1.0.0-alpha.1 → 1.0.0-alpha.3

package/css/side-nav.css

@@ -1,5 +1,41 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-pop-in {
+    from {
+      opacity: 0;
+      scale: var(--xh-motion-scale-enter);
+    }
+
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @keyframes xh-pop-out {
+    from {
+      opacity: 1;
+      scale: 1;
+    }
+
+    to {
+      opacity: 0;
+      scale: var(--xh-motion-scale-enter);
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='side-nav'] {
+    --xh-side-nav-skin: 1;
+  }
+
   [data-scope='side-nav'][data-part='root'] {
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-side-nav-icon-size, var(--xh-glyph-size-text));
+
     inline-size: var(--xh-side-nav-w, 240px);
     display: flex;
     flex-direction: column;
@@ -42,7 +78,7 @@
   [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);
+    font-size: var(--xh-text-caption-size);
     color: var(--xh-fg-subtle);
     user-select: none;
   }
@@ -59,6 +95,13 @@
     list-style: none;
   }
 
+  /* 叶子行的列表项：链接自己撑满，这一层只负责列表语义 */
+  [data-scope='side-nav'][data-part='item'] {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+  }
+
   /* —— 行：分支按钮与链接同一副长相 —— */
   [data-scope='side-nav'][data-part='branch-trigger'],
   [data-scope='side-nav'][data-part='link'] {
@@ -78,9 +121,10 @@
     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-highlighted，不读 :focus */
+  [data-scope='side-nav'][data-part='branch-trigger']:not([data-disabled]):is(:hover, [data-highlighted]),
+  [data-scope='side-nav'][data-part='link']:not([data-disabled]):is(:hover, [data-highlighted]) {
+    background: var(--xh-side-nav-row-bg-hover, var(--xh-bg-subtle));
   }
 
   [data-scope='side-nav'][data-part='branch-trigger']:focus-visible,
@@ -89,15 +133,17 @@
     outline-offset: var(--xh-ring-offset);
   }
 
-  /* 选中的那条：品牌淡底 + 强调字 */
-  [data-scope='side-nav'][data-part='link'][data-selected] {
+  /* 选中的那条：品牌淡底 + 强调字。
+     守卫与轻档那条同特指度，写在其后才压得住——键盘走到当前页那一行时底色仍是品牌淡底 */
+  [data-scope='side-nav'][data-part='link']:not([data-disabled])[data-current] {
     background: var(--xh-bg-brand-subtle);
-    color: var(--xh-fg-brand);
+    /* 淡底上的字走 strong 档：fg-brand（600）压在 brand-subtle（100）上只有 4.21 */
+    color: var(--xh-fg-brand-strong);
     font-weight: var(--xh-font-weight-medium);
   }
 
   /* 选中项的祖先枝：只染字色，一路指到当前页 */
-  [data-scope='side-nav'][data-part='branch-trigger'][data-active] {
+  [data-scope='side-nav'][data-part='branch-trigger'][data-in-path] {
     color: var(--xh-fg-brand);
   }
 
@@ -116,10 +162,25 @@
     white-space: nowrap;
   }
 
-  /* 折叠成图标栏：文字与展开指示整个藏掉、行内容居中，不裁半个字。
+  /* 折叠成图标栏：行文字裁到看不见但仍参与播报，行内容居中，不裁半个字。
+     用 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] [data-part='link-text']:not([data-popout] *) {
+    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），折叠态整个不占位 */
   [data-scope='side-nav'][data-part='root'][data-collapsed] [data-part='branch-indicator']:not([data-popout] *) {
     display: none;
   }
@@ -130,34 +191,70 @@
     padding-inline: 0;
   }
 
-  /* 折叠态的弹出面板：贴着触发按钮旁侧的浮层卡片，坐标由连接层写在行内样式上。
+  /* 弹出面板的定位层：坐标由连接层写在行内样式上，这里只管层号与命中区。
+     它被搬到浮层落点、不在侧栏子树内，所以卡片外观仍归面板本身；
+     这里不设 display，UA 的 [hidden]{display:none} 就仍然压得住收起态 */
+  [data-scope='side-nav'][data-part='positioner'] {
+    /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，面板继承它限高；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
+    --xh-_side-nav-available-h: 100vh;
+
+    position: fixed;
+    z-index: var(--xh-side-nav-popout-layer, var(--xh-layer-popover));
+    pointer-events: auto;
+  }
+
+  /* 还没落位就先藏着：visibility 而非 display，display:none 会让引擎量不到面板尺寸 */
+  [data-scope='side-nav'][data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  /* 折叠态的弹出面板：贴着触发按钮旁侧的浮层卡片。
      面板自己不吃子层缩进（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;
+    box-shadow: var(--xh-side-nav-popout-shadow, var(--xh-elevation-floating));
+
+    /* 子导航条目数没有上限，矮视口下不限高就整块伸出视口且滚不到 */
+    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;
+  }
+
+  [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);
+  }
+
+  /* 退场：收起那一帧 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;
   }
 
   [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);
+    transition: rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [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;
-    }
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  [data-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;
   }
 }

package/css/signature-pad.css

@@ -0,0 +1,144 @@
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='signature-pad'] {
+    --xh-signature-pad-skin: 1;
+  }
+
+  /* position 是给表单影子做定位基准的：那份输入被连接层内联写成绝对定位，
+     根上不留基准它就会贴到更外层的定位祖先上，原生校验提示跟着飘到页面别处。 */
+  [data-scope='signature-pad'][data-part='root'] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-signature-pad-gap, var(--xh-stack-gap-md));
+  }
+
+  [data-scope='signature-pad'][data-part='label'] {
+    color: var(--xh-signature-pad-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-signature-pad-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-signature-pad-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+  }
+
+  [data-scope='signature-pad'][data-part='label'][data-disabled] {
+    color: var(--xh-fg-subtle);
+  }
+
+  /* 画布是块状的写字区：宽度铺满外层，高度由宽高比决定。
+     控件行高那把尺量的是一行控件，一块要写字的面积用不上它。
+     touch-action 由连接层内联写死，触摸落笔才不会被页面滚动抢走。 */
+  [data-scope='signature-pad'][data-part='control'] {
+    display: block;
+    inline-size: 100%;
+    aspect-ratio: var(--xh-signature-pad-aspect-ratio, 5 / 2);
+    border: var(--xh-stroke-thin) solid var(--xh-signature-pad-border, var(--xh-border-control));
+    border-radius: var(--xh-signature-pad-radius, var(--xh-shape-surface));
+    background: var(--xh-signature-pad-bg, var(--xh-bg-surface));
+    cursor: crosshair;
+    /* 一划就会把画布连同旁边的文字一起刷成选中态 */
+    user-select: none;
+  }
+
+  [data-scope='signature-pad'][data-part='control'][data-invalid] {
+    border-color: var(--xh-border-invalid);
+  }
+
+  /* 落笔期间把描边压深一档。border-strong 是装饰梯度里的一档，比 border-control 更淡，
+     用在这儿会让描边在落笔时反而变弱 */
+  [data-scope='signature-pad'][data-part='control'][data-drawing] {
+    border-color: var(--xh-signature-pad-border-drawing, var(--xh-border-control-hover));
+  }
+
+  /* 只读仍看得见签名，只是改不动：收掉手型，别暗示"在这儿能写" */
+  [data-scope='signature-pad'][data-part='control'][data-readonly] {
+    cursor: default;
+  }
+
+  [data-scope='signature-pad'][data-part='control'][data-disabled] {
+    background: var(--xh-signature-pad-bg-disabled, var(--xh-bg-muted));
+    cursor: not-allowed;
+  }
+
+  /* 基准线：位置由连接层按百分比给出，这里只管它长什么样。
+     它是"请在这条线上签"的功能性提示，不是装饰，颜色走控件描边那一档才看得见 */
+  [data-scope='signature-pad'][data-part='guide'] {
+    stroke: var(--xh-signature-pad-guide-stroke, var(--xh-border-control));
+    stroke-width: var(--xh-stroke-thin);
+    stroke-dasharray: 6 6;
+  }
+
+  /* 笔迹是一条填充路径（每一笔是它的一条子路径），不是描边：
+     粗细要随压感变，而 stroke-width 全线只有一个值 */
+  [data-scope='signature-pad'][data-part='segment'] {
+    fill: var(--xh-signature-pad-ink, var(--xh-fg-default));
+    stroke: none;
+  }
+
+  [data-scope='signature-pad'][data-part='clear-trigger'] {
+    display: inline-flex;
+    align-self: flex-start;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-signature-pad-clear-gap, var(--xh-control-gap-sm));
+    block-size: var(--xh-signature-pad-clear-h, var(--xh-control-h-sm));
+    padding-inline: var(--xh-signature-pad-clear-px, var(--xh-control-px-sm));
+    border: var(--xh-stroke-thin) solid var(--xh-signature-pad-clear-border, var(--xh-border-control));
+    border-radius: var(--xh-signature-pad-clear-radius, var(--xh-shape-control));
+    background: var(--xh-signature-pad-clear-bg, var(--xh-bg-surface));
+    color: var(--xh-signature-pad-clear-fg, var(--xh-fg-default));
+    font-size: var(--xh-text-label-size);
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='signature-pad'][data-part='clear-trigger']:hover {
+    background: var(--xh-signature-pad-clear-bg-hover, var(--xh-bg-subtle-hover));
+  }
+
+  /* 按下：换到按压档底色并轻微下压，松手弹回；禁用钮不压 */
+  [data-scope='signature-pad'][data-part='clear-trigger']:not(:disabled):active {
+    background: var(--xh-signature-pad-clear-bg-active, var(--xh-bg-subtle-active));
+    scale: var(--xh-motion-scale-press);
+  }
+
+  [data-scope='signature-pad'][data-part='clear-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 空画布时按钮照常可按（收起它会让焦点掉回 body），只把它压淡一档 */
+  [data-scope='signature-pad'][data-part='clear-trigger'][data-empty] {
+    color: var(--xh-fg-muted);
+  }
+
+  /* 单体原生控件走 :disabled；集合条目那套 [data-disabled] 在这里命不中。
+     禁用只换前景色，不再叠 opacity——两样一起上会把文字压到看不见 */
+  [data-scope='signature-pad'][data-part='clear-trigger']:disabled {
+    background: var(--xh-signature-pad-clear-bg-disabled, var(--xh-bg-muted));
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 签没签的那句话。读屏靠它播报，看得见的人也用得上，因此不做视觉隐藏 */
+  [data-scope='signature-pad'][data-part='status'] {
+    color: var(--xh-signature-pad-status-fg, var(--xh-fg-muted));
+    font-size: var(--xh-signature-pad-status-font-size, var(--xh-text-label-size));
+    line-height: var(--xh-leading-none);
+  }
+
+  /* 表单影子的视觉隐藏（绝对定位 + 1px + clip-path）连接层内联给全了，这里不重复也不覆盖，
+     只掐掉指针命中：那个 1px 的框压在画布上会截走本该落到画布上的落笔。 */
+  [data-scope='signature-pad'][data-part='hidden-input'] {
+    pointer-events: none;
+  }
+
+  /* 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='clear-trigger'][hidden] {
+    display: 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;
@@ -41,7 +46,7 @@
     );
     background-repeat: no-repeat;
     background-size: 200% 100%;
-    animation: xh-skeleton-shimmer var(--xh-skeleton-duration, calc(var(--xh-duration-slow) * 5)) var(--xh-ease-standard) infinite;
+    animation: xh-skeleton-shimmer var(--xh-skeleton-duration, var(--xh-shimmer-duration)) var(--xh-ease-standard) infinite;
   }
 
   /* 一行文字的高度取正文字号，圆角拉满，看起来就是一行还没排出来的字 */
@@ -68,6 +73,7 @@
    * 减少动效：撤掉微光那层，只留静态底色。
    * 骨架屏是自己冒出来、会一直循环到数据回来为止的动效，正是最容易引发不适的那一类；
    * 这里不能只把时长压到接近零——那样光带会停在某一帧上，留下一道说不清的渐变。
+   * 两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion。
    */
   @media (prefers-reduced-motion: reduce) {
     [data-scope='skeleton'][data-part='bone'] {
@@ -75,4 +81,9 @@
       animation: none;
     }
   }
+
+  :where([data-motion='reduce']) [data-scope='skeleton'][data-part='bone'] {
+    background-image: none;
+    animation: none;
+  }
 }

package/css/slider.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='slider'] {
+    --xh-slider-skin: 1;
+  }
+
   /* 定位分工：已选区间与拇指在**主轴**上的起点与长度，由连接层每帧写进内联样式——
      水平是 inset-inline-start / inline-size，竖直是 inset-block-end / block-size。
      这份皮肤一个都不碰：内联优先级高于样式表，写了不但是死声明，
@@ -8,8 +13,8 @@
   /* 私有槽位：组件令牌 → 中档字面量两级回退。轨道厚度与拇指直径同时被 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);
+    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-track-thumb-size));
+    --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-track-thickness));
 
     display: flex;
     flex-direction: column;
@@ -111,7 +116,7 @@
   }
 
   [data-scope='slider'][data-part='range'][data-invalid] {
-    background: var(--xh-slider-range-bg-invalid, var(--xh-color-danger-500));
+    background: var(--xh-slider-range-bg-invalid, var(--xh-border-invalid));
   }
 
   /* 圆点浮在轨道之上：轨道是流内的，拇指是绝对定位的，天然后来居上，不必再堆 z-index。
@@ -125,7 +130,7 @@
     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));
+    box-shadow: var(--xh-slider-thumb-shadow, var(--xh-elevation-raised));
     cursor: grab;
     transition: scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
@@ -156,13 +161,13 @@
   /* 多拇指时只有手真正推着的那一个带 data-dragging，放大与光标因此不会全组一起变。
      放大用 scale 而不是改尺寸：变换绕自身中心发生，圆心不动，负外边距的算式也不用跟着改。 */
   [data-scope='slider'][data-part='thumb'][data-dragging] {
-    scale: var(--xh-slider-thumb-scale-dragging, 1.12);
+    scale: var(--xh-slider-thumb-scale-dragging, var(--xh-motion-scale-drag));
     cursor: grabbing;
-    box-shadow: var(--xh-slider-thumb-shadow-dragging, var(--xh-elevation-2));
+    box-shadow: var(--xh-slider-thumb-shadow-dragging, var(--xh-elevation-floating));
   }
 
   [data-scope='slider'][data-part='thumb'][data-invalid] {
-    background: var(--xh-slider-thumb-bg-invalid, var(--xh-color-danger-500));
+    background: var(--xh-slider-thumb-bg-invalid, var(--xh-border-invalid));
   }
 
   [data-scope='slider'][data-part='thumb'][data-readonly] {
@@ -204,7 +209,7 @@
   }
 
   /* 落进已选区间的刻度点跟 range 同色 */
-  [data-scope='slider'][data-part='mark'][data-active] {
+  [data-scope='slider'][data-part='mark'][data-passed] {
     background: var(--xh-slider-mark-bg-active, var(--xh-_tone, var(--xh-bg-brand)));
   }
 
@@ -213,7 +218,7 @@
     inset-block-start: 100%;
     margin-block-start: var(--xh-slider-mark-label-gap, var(--xh-space-1));
     color: var(--xh-slider-mark-label-fg, var(--xh-fg-subtle));
-    font-size: var(--xh-slider-mark-label-font-size, var(--xh-font-size-xs));
+    font-size: var(--xh-slider-mark-label-font-size, var(--xh-text-caption-size));
     line-height: var(--xh-leading-none);
     white-space: nowrap;
     translate: -50% 0;
@@ -222,7 +227,7 @@
     user-select: none;
   }
 
-  [data-scope='slider'][data-part='mark-label'][data-active] {
+  [data-scope='slider'][data-part='mark-label'][data-passed] {
     color: var(--xh-slider-mark-label-fg-active, var(--xh-fg-default));
   }
 

package/css/space.css

@@ -0,0 +1,117 @@
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='space'] {
+    --xh-space-skin: 1;
+  }
+
+  [data-scope='space'][data-part='root'] {
+    display: flex;
+    flex-wrap: nowrap;
+    /* 不写档位也按 md 留白，这是与裸弹性容器的分野；使用者槽位排在档位之前，写死一个值即盖过所有档 */
+    gap: var(--xh-space-gap, var(--xh-space-3));
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden] 规则，这里还回去 */
+  [data-scope='space'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 行内盒：宽度收到内容，能和文字排在同一行 */
+  [data-scope='space'][data-part='root'][data-inline]:not([hidden]) {
+    display: inline-flex;
+  }
+
+  /* 分隔符：夹在两个子项之间的装饰件，样子由放进去的内容决定。
+     这里只兜住两件事——不被主轴挤扁（一条 1px 的竖线会被弹性收缩吃没），
+     交叉轴上不单独发话，跟着容器的对齐走：横排随中线、竖排随拉伸 */
+  [data-scope='space'][data-part='split'] {
+    flex: none;
+  }
+
+  /* —— 方向与缺省对齐 —— */
+  /* 横排时按中线对齐：一排里混着文字、按钮、标签，高度本就不齐，居中最不容易看出错位 */
+  [data-scope='space'][data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  /* 竖排时拉伸：一列里的块级子项该占满容器宽度 */
+  [data-scope='space'][data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  /* —— 折行 —— */
+  [data-scope='space'][data-part='root'][data-wrap] {
+    flex-wrap: wrap;
+  }
+
+  /* —— 交叉轴对齐 —— */
+  /* 排在方向之后：两者特指度相同，写了 align 就该压过随方向来的那份缺省 */
+  [data-scope='space'][data-part='root'][data-align='start'] {
+    align-items: flex-start;
+  }
+
+  [data-scope='space'][data-part='root'][data-align='center'] {
+    align-items: center;
+  }
+
+  [data-scope='space'][data-part='root'][data-align='end'] {
+    align-items: flex-end;
+  }
+
+  [data-scope='space'][data-part='root'][data-align='stretch'] {
+    align-items: stretch;
+  }
+
+  [data-scope='space'][data-part='root'][data-align='baseline'] {
+    align-items: baseline;
+  }
+
+  /* —— 主轴分布 —— */
+  [data-scope='space'][data-part='root'][data-justify='start'] {
+    justify-content: flex-start;
+  }
+
+  [data-scope='space'][data-part='root'][data-justify='center'] {
+    justify-content: center;
+  }
+
+  [data-scope='space'][data-part='root'][data-justify='end'] {
+    justify-content: flex-end;
+  }
+
+  [data-scope='space'][data-part='root'][data-justify='between'] {
+    justify-content: space-between;
+  }
+
+  [data-scope='space'][data-part='root'][data-justify='around'] {
+    justify-content: space-around;
+  }
+
+  [data-scope='space'][data-part='root'][data-justify='evenly'] {
+    justify-content: space-evenly;
+  }
+
+  /* —— 间距档位 —— */
+  /* 每一档指向一个间距令牌，折行时行与行之间也吃这份间距 */
+  [data-scope='space'][data-part='root'][data-gap='xs'] {
+    gap: var(--xh-space-gap, var(--xh-space-1));
+  }
+
+  [data-scope='space'][data-part='root'][data-gap='sm'] {
+    gap: var(--xh-space-gap, var(--xh-space-2));
+  }
+
+  [data-scope='space'][data-part='root'][data-gap='md'] {
+    gap: var(--xh-space-gap, var(--xh-space-3));
+  }
+
+  [data-scope='space'][data-part='root'][data-gap='lg'] {
+    gap: var(--xh-space-gap, var(--xh-space-4));
+  }
+
+  [data-scope='space'][data-part='root'][data-gap='xl'] {
+    gap: var(--xh-space-gap, var(--xh-space-6));
+  }
+}

package/css/spinner.css

@@ -1,4 +1,4 @@
-@layer xihan.components {
+@layer xihan.motion {
   /* 转圈的关键帧定义在本文件里。皮肤可以按需单独引入，
      引用别处文件里的动画名时那份文件不一定在场，动画会静默地整个不跑 */
   @keyframes xh-spinner-rotate {
@@ -6,6 +6,14 @@
       transform: rotate(1turn);
     }
   }
+}
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='spinner'] {
+    --xh-spinner-skin: 1;
+  }
+
 
   /* 圆环画在伪元素上，root 自身不转：转的只是图形，同一行里的文案要留在原地读得动 */
   [data-scope='spinner'][data-part='root'] {
@@ -22,25 +30,26 @@
     /* 边框算进直径，换厚度不会把圆环撑大 */
     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));
+    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-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;
+    animation: xh-spinner-rotate var(--xh-spinner-duration, var(--xh-spin-duration)) linear infinite;
   }
 
-  /* 三档直径对齐控件档位，缺省档写在上面的基础规则里 */
+  /* 三档直径走字形尺寸那把尺：圆环与同一行文字里的图标同级，三档同族才不会在 compact 下错位。
+     缺省档写在上面的基础规则里 */
   [data-scope='spinner'][data-part='root'][data-size='sm']::before {
-    inline-size: var(--xh-control-indicator-size);
-    block-size: var(--xh-control-indicator-size);
+    inline-size: var(--xh-glyph-size-sm);
+    block-size: var(--xh-glyph-size-sm);
   }
 
   [data-scope='spinner'][data-part='root'][data-size='lg']::before {
-    inline-size: var(--xh-control-h-md);
-    block-size: var(--xh-control-h-md);
+    inline-size: var(--xh-glyph-size-lg);
+    block-size: var(--xh-glyph-size-lg);
   }
 
   /* 语气只换起始边那一段，轨道留在中性描边上：轨道与起始边的反差就是转向的读法，
@@ -53,12 +62,13 @@
 
   [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));
+    font-size: var(--xh-spinner-label-size, var(--xh-text-secondary-size));
     line-height: var(--xh-leading-none);
   }
 
   /* 减少动效：圆环停下并整圈换成虚线，静止的形状仍然读得出"这里还没好"；
-     "在等什么"由 role=status 上的名字与可见文案继续承担 */
+     "在等什么"由 role=status 上的名字与可见文案继续承担。
+     两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
   @media (prefers-reduced-motion: reduce) {
     [data-scope='spinner'][data-part='root']::before {
       border-style: dotted;
@@ -71,4 +81,14 @@
       border-color: var(--xh-spinner-fg, var(--xh-_tone, var(--xh-bg-brand)));
     }
   }
+
+  :where([data-motion='reduce']) [data-scope='spinner'][data-part='root']::before {
+    border-style: dotted;
+    border-color: var(--xh-spinner-fg, var(--xh-bg-brand));
+    animation: none;
+  }
+
+  :where([data-motion='reduce']) [data-scope='spinner'][data-part='root'][data-tone]::before {
+    border-color: var(--xh-spinner-fg, var(--xh-_tone, var(--xh-bg-brand)));
+  }
 }