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

package/css/side-nav.css

@@ -0,0 +1,163 @@
+@layer xihan.components {
+  [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/slider.css

@@ -186,6 +186,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/steps.css

@@ -176,8 +176,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

@@ -58,4 +58,31 @@
   [data-scope='switch'][data-part='thumb'][data-state='checked'] {
     translate: var(--xh-_switch-thumb-size) 0;
   }
+
+  /* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
+  @keyframes xh-switch-rotate {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+
+  /* 提交中：指针挂起、滑块里转圈；不是禁用，焦点与对比度都保持 */
+  [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

@@ -135,10 +135,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 +223,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 +379,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 +393,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/tags-input.css

@@ -12,8 +12,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 +35,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 +290,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

@@ -13,13 +13,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 +54,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 +64,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 +102,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

@@ -57,7 +57,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

@@ -8,8 +8,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 +39,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

@@ -35,7 +35,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 +54,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 +242,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 +255,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 +318,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;
   }

package/css/toggle-group.css

@@ -31,7 +31,7 @@
     --xh-_bg-hover: var(--xh-toggle-group-item-bg-hover, var(--xh-bg-subtle-hover));
     --xh-_bg-active: var(--xh-toggle-group-item-bg-active, var(--xh-bg-subtle-active));
     --xh-_fg: var(--xh-toggle-group-item-fg, var(--xh-fg-default));
-    --xh-_border: var(--xh-toggle-group-item-border, var(--xh-border-default));
+    --xh-_border: var(--xh-toggle-group-item-border, var(--xh-border-control));
 
     /* 相邻两段靠负外边距压掉一条重边，谁的描边浮在上面必须能指定，
        因此条目必须是定位元素——静态元素的 z-index 不生效 */

package/css/toggle.css

@@ -68,7 +68,7 @@
     --xh-_bg-pressed: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
     --xh-_fg-pressed: var(--xh-_tone-fg, var(--xh-fg-default));
 
-    border-color: var(--xh-_tone-border, var(--xh-border-default));
+    border-color: var(--xh-_tone-border-control, var(--xh-border-control));
   }
 
   [data-scope='toggle'][data-part='root'][data-variant='ghost'] {

package/css/tone.css

@@ -38,6 +38,9 @@
     --xh-_tone-subtle-hover: color-mix(in oklab, var(--xh-_tone) 20%, var(--xh-bg-surface));
     --xh-_tone-subtle-active: color-mix(in oklab, var(--xh-_tone) 28%, var(--xh-bg-surface));
     --xh-_tone-border: color-mix(in oklab, var(--xh-_tone) 40%, var(--xh-bg-surface));
+    /* 控件的可操作区边界要 3:1，兑了底色的 --xh-_tone-border 六族全在 1.44–2.18，够不着。
+       这一支直接取主色本体；两族在各自的底上仍不够，在下面按主题单独兜 */
+    --xh-_tone-border-control: var(--xh-_tone);
     /* 在普通背景上表达该语气的文字色：往前景色兑，浅色态变深、深色态变浅 */
     --xh-_tone-fg: color-mix(in oklab, var(--xh-_tone) 72%, var(--xh-fg-default));
   }
@@ -82,4 +85,23 @@
     --xh-_tone-on: var(--xh-color-neutral-950);
     --xh-_tone-shift: var(--xh-color-neutral-0);
   }
+
+  /* 主色本体在各自的底上有两族够不到 3:1：黄在白底上只有 2.70，中性在深色底上只有 2.54。
+     语气色是固定原语、不随主题翻，所以这两族只能按主题各兜一次。
+     浅色是缺省态（不写 data-theme 也算浅色），深色靠属性选择器压过它 */
+  [data-tone='warning'] {
+    --xh-_tone-border-control: var(--xh-color-warning-700);
+  }
+
+  [data-theme='dark'] [data-tone='warning'] {
+    --xh-_tone-border-control: var(--xh-color-warning-600);
+  }
+
+  [data-tone='neutral'] {
+    --xh-_tone-border-control: var(--xh-color-neutral-600);
+  }
+
+  [data-theme='dark'] [data-tone='neutral'] {
+    --xh-_tone-border-control: var(--xh-color-neutral-550);
+  }
 }