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

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。
      这份皮肤一个都不碰：内联优先级高于样式表，写了不但是死声明，
@@ -186,6 +191,61 @@
     --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-space-2));
   }
 
+  /* —— 刻度：圆点钉在轨道上、文案排在轨道外侧，坐标由连接层按百分比内联给出 —— */
+  [data-scope='slider'][data-part='marks'] {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  [data-scope='slider'][data-part='mark'] {
+    position: absolute;
+    inset-block-start: 50%;
+    inline-size: var(--xh-slider-mark-size, var(--xh-space-1));
+    block-size: var(--xh-slider-mark-size, var(--xh-space-1));
+    border-radius: var(--xh-shape-pill);
+    background: var(--xh-slider-mark-bg, var(--xh-border-strong));
+    translate: -50% -50%;
+  }
+
+  /* 落进已选区间的刻度点跟 range 同色 */
+  [data-scope='slider'][data-part='mark'][data-active] {
+    background: var(--xh-slider-mark-bg-active, var(--xh-_tone, var(--xh-bg-brand)));
+  }
+
+  [data-scope='slider'][data-part='mark-label'] {
+    position: absolute;
+    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));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    translate: -50% 0;
+    cursor: pointer;
+    pointer-events: auto;
+    user-select: none;
+  }
+
+  [data-scope='slider'][data-part='mark-label'][data-active] {
+    color: var(--xh-slider-mark-label-fg-active, var(--xh-fg-default));
+  }
+
+  /* 竖直轨道：点与文案换轴，坐标由连接层写在 block 轴上 */
+  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='mark'] {
+    inset-block-start: auto;
+    inset-inline-start: 50%;
+    translate: -50% 50%;
+  }
+
+  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='mark-label'] {
+    inset-block-start: auto;
+    inset-inline-start: 100%;
+    margin-block-start: 0;
+    margin-inline-start: var(--xh-slider-mark-label-gap, var(--xh-space-1));
+    translate: 0 50%;
+  }
+
   /* display 会盖掉 UA 的 [hidden]{display:none}，凡是被赋了 display 的角色节点都要显式让位 */
   [data-scope='slider'][data-part='root'][hidden],
   [data-scope='slider'][data-part='control'][hidden] {

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'] {

package/css/splitter.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='splitter'] {
+    --xh-splitter-skin: 1;
+  }
+
   /* 分工：**面板在排布轴上的尺寸**由连接层每帧写进内联样式（flex-basis / flex-grow / flex-shrink）。
      这份皮肤一条都不碰——内联优先级高于样式表，写了不但是死声明，
      还会在切换 orientation 的那一帧跟连接层抢位置。皮肤只管排布方向、跨轴尺寸、

package/css/statistic.css

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

package/css/steps.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='steps'] {
+    --xh-steps-skin: 1;
+  }
+
   [data-scope='steps'][data-part='root'] {
     /* 尺寸档只换这三个私有槽，序号圆点、标题与说明都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */
@@ -176,8 +181,8 @@
   }
 
   [data-scope='steps'][data-part='item'][data-disabled] [data-scope='steps'][data-part='indicator'] {
-    border-color: var(--xh-fg-disabled);
-    color: var(--xh-fg-disabled);
+    border-color: var(--xh-steps-indicator-border-disabled, var(--xh-fg-disabled));
+    color: var(--xh-steps-indicator-fg-disabled, var(--xh-fg-disabled));
   }
 
   /* 标题与说明都在右列：不给 display，网格布局会替它们块级化，

package/css/switch.css

@@ -1,4 +1,18 @@
+@layer xihan.motion {
+  /* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
+  @keyframes xh-switch-rotate {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='switch'] {
+    --xh-switch-skin: 1;
+  }
+
   [data-scope='switch'][data-part='root'] {
     /* 尺寸档只换轨道高度这一个私有槽，其余几何都从它算出来：
        滑块边长 = 轨道高 − 两条留白，轨道宽 = 两倍轨道高 − 两条留白，滑块行程因此正好等于自身边长 */
@@ -58,4 +72,24 @@
   [data-scope='switch'][data-part='thumb'][data-state='checked'] {
     translate: var(--xh-_switch-thumb-size) 0;
   }
+
+  /* 提交中：指针挂起、滑块里转圈；不是禁用，焦点与对比度都保持 */
+  [data-scope='switch'][data-part='root'][data-loading] {
+    cursor: wait;
+  }
+
+  [data-scope='switch'][data-part='thumb'][data-loading] {
+    display: grid;
+    place-items: center;
+  }
+
+  [data-scope='switch'][data-part='thumb'][data-loading]::after {
+    content: '';
+    inline-size: 60%;
+    block-size: 60%;
+    border: var(--xh-stroke-thin) solid transparent;
+    border-block-start-color: var(--xh-switch-loading-fg, var(--xh-bg-brand));
+    border-radius: var(--xh-shape-pill);
+    animation: xh-switch-rotate var(--xh-switch-loading-duration, calc(var(--xh-duration-slow) * 2)) linear infinite;
+  }
 }

package/css/table.css

@@ -18,6 +18,11 @@
 }
 
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='table'] {
+    --xh-table-skin: 1;
+  }
+
   /* 表格自己滚动：吸顶表头与横向吸附列都要一个确定的滚动容器才钉得住 */
   [data-scope='table'][data-part='root'] {
     /* 密度档只换这两个私有槽：单元格与列标题从 root 继承前者，字号靠 font-size 本身继承下去，
@@ -135,10 +140,10 @@
     border-block-end: none;
   }
 
-  /* 键盘高亮与指针高亮共用一套底色。data-highlighted 跟的是连接层记的焦点行，
+  /* 悬停与键盘锚点共用中性灰轻档。data-highlighted 跟的是连接层记的焦点行，
      与选中互相独立：可以停在一个没被选中的行上 */
   [data-scope='table'][data-part='body'] > [data-scope='table'][data-part='row']:not([data-disabled]):is(:hover, [data-highlighted]) {
-    background: var(--xh-table-row-bg-highlight, var(--xh-bg-subtle-hover));
+    background: var(--xh-table-row-bg-hover, var(--xh-bg-subtle));
   }
 
   /* 选中比高亮更"实"：它表达的是数据状态，翻页回来还在 */
@@ -223,14 +228,14 @@
      切换选中不引起行宽抖动 */
   [data-scope='table'][data-part='select-all-trigger'],
   [data-scope='table'][data-part='row-select-trigger'] {
-    border: var(--xh-stroke-thin) solid var(--xh-table-trigger-border, var(--xh-border-strong));
+    border: var(--xh-stroke-thin) solid var(--xh-table-trigger-border, var(--xh-border-control));
     color: var(--xh-table-trigger-fg, var(--xh-fg-on-brand));
     visibility: visible;
   }
 
   [data-scope='table'][data-part='select-all-trigger']:is([data-state='all'], [data-state='some']),
   [data-scope='table'][data-part='row-select-trigger'][data-selected] {
-    border-color: var(--xh-table-trigger-bg-checked, var(--xh-bg-brand));
+    border-color: var(--xh-table-trigger-border-checked, var(--xh-table-trigger-bg-checked, var(--xh-bg-brand)));
     background: var(--xh-table-trigger-bg-checked, var(--xh-bg-brand));
   }
 
@@ -379,7 +384,7 @@
   }
 
   /* 两个状态节点常挂，只在表体为空时才显形 */
-  [data-scope='table'][data-part='empty-state'],
+  [data-scope='table'][data-part='empty'],
   [data-scope='table'][data-part='loading-state'] {
     display: flex;
     flex-direction: column;
@@ -393,7 +398,7 @@
     text-align: center;
   }
 
-  [data-scope='table'][data-part='empty-state'][hidden],
+  [data-scope='table'][data-part='empty'][hidden],
   [data-scope='table'][data-part='loading-state'][hidden] {
     display: none;
   }

package/css/tabs.css

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

package/css/tags-input.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='tags-input'] {
+    --xh-tags-input-skin: 1;
+  }
+
   /* root 只负责纵向堆叠：标题一行、控件一行。可见的那个"框"长在 control 上，
      因为标签、输入框、清空按钮都在它里面，边框必须把三者一起圈住 */
   [data-scope='tags-input'][data-part='root'] {
@@ -12,8 +17,8 @@
     --xh-_tags-input-label-font-size: var(--xh-text-label-size);
     /* 形态档只换这三个私有槽，缺省这一份就是描边式（描边 + 画布底） */
     --xh-_tags-input-control-bg: var(--xh-bg-canvas);
-    --xh-_tags-input-control-border: var(--xh-border-default);
-    --xh-_tags-input-control-border-hover: var(--xh-border-strong);
+    --xh-_tags-input-control-border: var(--xh-border-control);
+    --xh-_tags-input-control-border-hover: var(--xh-border-control-hover);
     /* 聚焦环与标签块的强调色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的取值 */
     --xh-_tags-input-ring: var(--xh-ring-focus);
     --xh-_tags-input-accent: var(--xh-_tone, var(--xh-bg-brand));
@@ -35,22 +40,22 @@
      不做 solid：实心填充盖住了"这里能打字"这件事，输入框用不上它 */
   [data-scope='tags-input'][data-part='root'][data-variant='outline'] {
     --xh-_tags-input-control-bg: var(--xh-bg-canvas);
-    --xh-_tags-input-control-border: var(--xh-border-default);
-    --xh-_tags-input-control-border-hover: var(--xh-border-strong);
+    --xh-_tags-input-control-border: var(--xh-border-control);
+    --xh-_tags-input-control-border-hover: var(--xh-border-control-hover);
   }
 
   /* 填充式：底色圈出可输入的范围，描边让位给底色 */
   [data-scope='tags-input'][data-part='root'][data-variant='subtle'] {
     --xh-_tags-input-control-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
     --xh-_tags-input-control-border: transparent;
-    --xh-_tags-input-control-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_tags-input-control-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   /* 无边框、透明底：静息时框完全隐入背景，可见反馈全靠悬停描边与聚焦环 */
   [data-scope='tags-input'][data-part='root'][data-variant='ghost'] {
     --xh-_tags-input-control-bg: transparent;
     --xh-_tags-input-control-border: transparent;
-    --xh-_tags-input-control-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_tags-input-control-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   /* —— 尺寸 —— */
@@ -290,7 +295,7 @@
     max-inline-size: 100%;
     padding-block: var(--xh-tags-input-item-py, var(--xh-space-1));
     padding-inline: var(--xh-tags-input-item-px, var(--xh-space-2));
-    border: var(--xh-stroke-thin) solid var(--xh-tags-input-item-input-border, var(--xh-border-strong));
+    border: var(--xh-stroke-thin) solid var(--xh-tags-input-item-input-border, var(--xh-border-control));
     border-radius: var(--xh-tags-input-item-radius, var(--xh-shape-pill));
     background: var(--xh-tags-input-item-input-bg, var(--xh-bg-canvas));
     color: var(--xh-tags-input-item-input-fg, var(--xh-fg-default));

package/css/text-field.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='text-field'] {
+    --xh-text-field-skin: 1;
+  }
+
   /* root 只负责纵向堆叠：标签一行、输入行一行。
      输入框与清空按钮中间那层包裹是作者自己写的、不在角色表里，
      所以尺寸与间距一律长在各自的角色节点上，不去假设那层存在 */
@@ -13,13 +18,13 @@
 
     /* 形态档只换这三个私有槽：底、常态描边、悬停描边 */
     --xh-_text-field-bg: var(--xh-bg-canvas);
-    --xh-_text-field-border: var(--xh-border-default);
-    --xh-_text-field-border-hover: var(--xh-border-strong);
+    --xh-_text-field-border: var(--xh-border-control);
+    --xh-_text-field-border-hover: var(--xh-border-control-hover);
 
     /* 语气只落在聚焦这一处：环与聚焦态描边。正文颜色不归它管。
        没写 data-tone 时 --xh-_tone 没被声明，退回原来的聚焦环色与常态描边 */
     --xh-_text-field-ring: var(--xh-ring-focus);
-    --xh-_text-field-border-focus: var(--xh-text-field-input-border, var(--xh-_tone, var(--xh-border-default)));
+    --xh-_text-field-border-focus: var(--xh-text-field-input-border, var(--xh-_tone, var(--xh-border-control)));
 
     display: inline-flex;
     flex-direction: column;
@@ -54,9 +59,9 @@
      输入框没有实心档：填满一个要往里打字的框，字与底就没法同时读 */
   [data-scope='text-field'][data-part='root'][data-variant='outline'] {
     --xh-_text-field-bg: var(--xh-bg-canvas);
-    --xh-_text-field-border: var(--xh-border-default);
-    --xh-_text-field-border-hover: var(--xh-border-strong);
-    --xh-_text-field-border-focus: var(--xh-text-field-input-border, var(--xh-_tone, var(--xh-border-default)));
+    --xh-_text-field-border: var(--xh-border-control);
+    --xh-_text-field-border-hover: var(--xh-border-control-hover);
+    --xh-_text-field-border-focus: var(--xh-text-field-input-border, var(--xh-_tone, var(--xh-border-control)));
   }
 
   /* 填充式：底色顶替描边表达边界。描边只退成透明而不去掉，1px 的位置留着，
@@ -64,16 +69,16 @@
   [data-scope='text-field'][data-part='root'][data-variant='subtle'] {
     --xh-_text-field-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
     --xh-_text-field-border: transparent;
-    --xh-_text-field-border-hover: var(--xh-_tone-border, var(--xh-border-default));
-    --xh-_text-field-border-focus: var(--xh-_tone, var(--xh-border-default));
+    --xh-_text-field-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
+    --xh-_text-field-border-focus: var(--xh-_tone, var(--xh-border-control));
   }
 
   /* 无框：底与描边都透明，平时只看得见字，悬停与聚焦才浮出边界 */
   [data-scope='text-field'][data-part='root'][data-variant='ghost'] {
     --xh-_text-field-bg: transparent;
     --xh-_text-field-border: transparent;
-    --xh-_text-field-border-hover: var(--xh-_tone-border, var(--xh-border-default));
-    --xh-_text-field-border-focus: var(--xh-_tone, var(--xh-border-default));
+    --xh-_text-field-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
+    --xh-_text-field-border-focus: var(--xh-_tone, var(--xh-border-control));
   }
 
   [data-scope='text-field'][data-part='label'] {
@@ -102,6 +107,19 @@
     transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
+  /* 多行宿主：定高换成行数撑高，纵向留出内边距；autoSize 接管高度后拉柄与滚动都收掉 */
+  [data-scope='text-field'][data-part='input'][data-multiline] {
+    block-size: auto;
+    min-block-size: var(--xh-text-field-input-h, var(--xh-_text-field-h));
+    padding-block: var(--xh-text-field-textarea-py, var(--xh-space-2));
+    resize: vertical;
+  }
+
+  [data-scope='text-field'][data-part='input'][data-multiline][data-autosize] {
+    overflow: hidden;
+    resize: none;
+  }
+
   [data-scope='text-field'][data-part='input']::placeholder {
     color: var(--xh-text-field-placeholder-fg, var(--xh-fg-subtle));
   }

package/css/thread.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='thread'] {
+    --xh-thread-skin: 1;
+  }
+
   /* 自建定位上下文，作为绝对定位的回到底部按钮的参照系；
      block-size: 100% 让高度由外部决定，使滚动发生在内部。 */
   [data-scope='thread'][data-part='root'] {
@@ -57,7 +62,7 @@
     min-inline-size: var(--xh-thread-scroll-button-h, var(--xh-control-h-md));
     block-size: var(--xh-thread-scroll-button-h, var(--xh-control-h-md));
     padding-inline: var(--xh-thread-scroll-button-px, var(--xh-control-px-md));
-    border: var(--xh-stroke-thin) solid var(--xh-thread-scroll-button-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-thread-scroll-button-border, var(--xh-border-control));
     border-radius: var(--xh-thread-scroll-button-radius, var(--xh-shape-pill));
     background: var(--xh-thread-scroll-button-bg, var(--xh-bg-surface));
     color: var(--xh-thread-scroll-button-fg, var(--xh-fg-default));

package/css/time-field.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='time-field'] {
+    --xh-time-field-skin: 1;
+  }
+
   /* 与文本框、数字框同一套堆叠：标签一行、控件一行 */
   [data-scope='time-field'][data-part='root'] {
     /* 尺寸档只换这四个私有槽，标题与控件都从 root 继承它们，换档不必给每个部件各写一条选择器 */
@@ -8,8 +13,8 @@
     --xh-_time-field-label-font-size: var(--xh-text-label-size);
     /* 形态档只换这三个私有槽：底色与两档描边 */
     --xh-_time-field-control-bg: var(--xh-bg-canvas);
-    --xh-_time-field-control-border: var(--xh-border-default);
-    --xh-_time-field-control-border-hover: var(--xh-border-strong);
+    --xh-_time-field-control-border: var(--xh-border-control);
+    --xh-_time-field-control-border-hover: var(--xh-border-control-hover);
     /* 聚焦描边与段位反白随语气走。没写 data-tone 时这几个 --xh-_tone* 没被声明，退回原来的焦点色与品牌色 */
     --xh-_time-field-ring: var(--xh-ring-focus);
     --xh-_time-field-segment-bg: var(--xh-_tone, var(--xh-bg-brand));
@@ -39,15 +44,15 @@
   /* 描边式：与缺省等价，写出来是为了三档形态在皮肤里都看得见 */
   [data-scope='time-field'][data-part='root'][data-variant='outline'] {
     --xh-_time-field-control-bg: var(--xh-bg-canvas);
-    --xh-_time-field-control-border: var(--xh-border-default);
-    --xh-_time-field-control-border-hover: var(--xh-border-strong);
+    --xh-_time-field-control-border: var(--xh-border-control);
+    --xh-_time-field-control-border-hover: var(--xh-border-control-hover);
   }
 
   /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
   [data-scope='time-field'][data-part='root'][data-variant='subtle'] {
     --xh-_time-field-control-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
     --xh-_time-field-control-border: transparent;
-    --xh-_time-field-control-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_time-field-control-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   /* 无框式：底与边都让开，可见反馈只剩聚焦那一档 */

package/css/time-picker.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='time-picker'] {
+    --xh-time-picker-skin: 1;
+  }
+
   /* 与文本框、时间输入同一套堆叠：标签一行、控件一行 */
   [data-scope='time-picker'][data-part='root'] {
     display: inline-flex;
@@ -35,7 +40,7 @@
     block-size: var(--xh-time-picker-control-h, var(--xh-control-h-md));
     padding-inline: var(--xh-time-picker-control-px, var(--xh-control-px-md));
     padding-block: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-time-picker-control-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-time-picker-control-border, var(--xh-border-control));
     border-radius: var(--xh-time-picker-control-radius, var(--xh-shape-control));
     background: var(--xh-time-picker-control-bg, var(--xh-bg-canvas));
     color: var(--xh-time-picker-control-fg, var(--xh-fg-default));
@@ -54,7 +59,7 @@
 
   /* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
   [data-scope='time-picker'][data-part='control']:hover:not([data-disabled], [data-invalid]) {
-    border-color: var(--xh-time-picker-control-border-hover, var(--xh-border-strong));
+    border-color: var(--xh-time-picker-control-border-hover, var(--xh-border-control-hover));
   }
 
   /* 焦点真正落在段或按钮上，但整块看起来才是一个控件：内部有焦点时整框亮起来。
@@ -242,8 +247,7 @@
     max-block-size: var(--xh-time-picker-column-max-h, 12rem);
     padding-inline: var(--xh-time-picker-column-px, var(--xh-space-1));
     overflow-y: auto;
-    /* 滚动容器在某些浏览器里会被自动塞进 Tab 序列，落焦时不画环——
-       焦点该落在格上，列只在整列被界卡空时才兜底占一个 Tab 位 */
+    /* 滚动容器在某些浏览器里会被自动塞进 Tab 序列，是否画环见下方按 tabindex 分档的两条 */
     scrollbar-width: thin;
   }
 
@@ -256,51 +260,62 @@
     border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-picker-column-divider, var(--xh-border-subtle));
   }
 
-  [data-scope='time-picker'][data-part='column']:focus-visible {
+  /* 焦点落在列上有两种情形：指针打开、这一段还空着、还没有任何格当锚点，或整列被界裁空。
+     那一刻它认领着 Tab 位，环画在列内沿；有锚点时环长在格上，列不再画 */
+  [data-scope='time-picker'][data-part='column'][tabindex='0']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  [data-scope='time-picker'][data-part='column']:not([tabindex='0']):focus-visible {
     outline: none;
   }
 
-  [data-scope='time-picker'][data-part='option'] {
+  [data-scope='time-picker'][data-part='item'] {
     display: flex;
     flex: none;
     align-items: center;
     justify-content: center;
-    padding-block: var(--xh-time-picker-option-py, var(--xh-space-1));
-    padding-inline: var(--xh-time-picker-option-px, var(--xh-space-2));
-    border-radius: var(--xh-time-picker-option-radius, var(--xh-shape-control));
-    color: var(--xh-time-picker-option-fg, var(--xh-fg-default));
-    font-size: var(--xh-time-picker-option-font-size, var(--xh-text-body-size));
+    padding-block: var(--xh-time-picker-item-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-time-picker-item-px, var(--xh-control-px-md));
+    border-radius: var(--xh-time-picker-item-radius, var(--xh-shape-control));
+    color: var(--xh-time-picker-item-fg, var(--xh-fg-default));
+    font-size: var(--xh-time-picker-item-font-size, var(--xh-text-body-size));
+    /* 居中的单个数字格没有截断层，行高保持紧排，列内多露几格 */
     line-height: var(--xh-leading-none);
     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);
   }
 
   /* 作者自己藏掉某几格时要让位，有 display 就得补这条 */
-  [data-scope='time-picker'][data-part='option'][hidden] {
+  [data-scope='time-picker'][data-part='item'][hidden] {
     display: none;
   }
 
-  /* 焦点所在与选中互相独立：可以停在一个没被选中的格上 */
-  [data-scope='time-picker'][data-part='option'][data-highlighted]:not([data-disabled]),
-  [data-scope='time-picker'][data-part='option']:hover:not([data-disabled]) {
-    background: var(--xh-time-picker-option-bg-highlight, var(--xh-bg-subtle-hover));
+  /* 悬停与键盘锚点共用中性灰轻档；焦点所在与选中互相独立：可以停在一个没被选中的格上 */
+  [data-scope='time-picker'][data-part='item'][data-highlighted]:not([data-disabled]),
+  [data-scope='time-picker'][data-part='item']:hover:not([data-disabled]) {
+    background: var(--xh-time-picker-item-bg-hover, var(--xh-bg-subtle));
   }
 
-  [data-scope='time-picker'][data-part='option'][data-state='checked'] {
-    background: var(--xh-time-picker-option-bg-checked, var(--xh-bg-brand));
-    color: var(--xh-time-picker-option-fg-checked, var(--xh-fg-on-brand));
-    font-weight: var(--xh-time-picker-option-weight-checked, var(--xh-font-weight-medium));
+  [data-scope='time-picker'][data-part='item'][data-state='checked'] {
+    background: var(--xh-time-picker-item-bg-checked, var(--xh-bg-brand));
+    color: var(--xh-time-picker-item-fg-checked, var(--xh-fg-on-brand));
+    font-weight: var(--xh-time-picker-item-weight-checked, var(--xh-font-weight-medium));
   }
 
-  /* 选中格上再落焦点或悬停时，底色留在品牌色一侧：上面那条中性高亮的选择器更具体，
+  /* 选中格上再落焦点或悬停时，底色留在品牌色一侧：上面那条中性轻档的选择器更具体，
      不写这条就只有底色被换走、文字仍是品牌底上的反白色 */
-  [data-scope='time-picker'][data-part='option'][data-state='checked'][data-highlighted]:not([data-disabled]),
-  [data-scope='time-picker'][data-part='option'][data-state='checked']:hover:not([data-disabled]) {
-    background: var(--xh-time-picker-option-bg-checked-highlight, var(--xh-bg-brand-hover));
+  [data-scope='time-picker'][data-part='item'][data-state='checked'][data-highlighted]:not([data-disabled]),
+  [data-scope='time-picker'][data-part='item'][data-state='checked']:hover:not([data-disabled]) {
+    background: var(--xh-time-picker-item-bg-checked-hover, var(--xh-bg-brand-hover));
   }
 
-  [data-scope='time-picker'][data-part='option']:focus-visible {
+  [data-scope='time-picker'][data-part='item']:focus-visible {
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     /* 往内收：选项在滚动列里挨着排，环画在外沿会被列的溢出裁掉 */
     outline-offset: calc(-1 * var(--xh-ring-offset));
@@ -308,7 +323,7 @@
 
   /* 禁用走 aria-disabled 而非原生 disabled（原生 disabled 不派 click，禁用守卫就走不到），
      所以只能靠 data-disabled 表达，写 :disabled 永远不命中 */
-  [data-scope='time-picker'][data-part='option'][data-disabled] {
+  [data-scope='time-picker'][data-part='item'][data-disabled] {
     color: var(--xh-fg-disabled);
     cursor: not-allowed;
   }
@@ -336,7 +351,7 @@
   @keyframes xh-time-picker-panel-in {
     from {
       opacity: 0;
-      translate: 0 calc(-1 * var(--xh-space-1));
+      translate: 0 calc(-1 * var(--xh-motion-distance-sm));
     }
 
     to {

package/css/time.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='time'] {
+    --xh-time-skin: 1;
+  }
+
   [data-scope='time'][data-part='root'] {
     color: var(--xh-time-fg, var(--xh-fg-default));
     /* 等宽数字：秒数跳动时后面的字符不会左右挪 */

package/css/timeline.css

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