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

package/css/popconfirm.css

@@ -120,6 +120,29 @@
     color: var(--xh-popconfirm-confirm-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
   }
 
+  /* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
+  @keyframes xh-popconfirm-rotate {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+
+  /* 异步确认挂起：按钮转圈、指针挂起；不是禁用，焦点与对比度都保持 */
+  [data-scope='popconfirm'][data-part='confirm-trigger'][data-loading] {
+    cursor: wait;
+  }
+
+  [data-scope='popconfirm'][data-part='confirm-trigger'][data-loading]::before {
+    content: '';
+    inline-size: 1em;
+    block-size: 1em;
+    margin-inline-end: var(--xh-space-1);
+    border: var(--xh-stroke-thin) solid transparent;
+    border-block-start-color: currentcolor;
+    border-radius: var(--xh-shape-pill);
+    animation: xh-popconfirm-rotate var(--xh-popconfirm-loading-duration, calc(var(--xh-duration-slow) * 2)) linear infinite;
+  }
+
   [data-scope='popconfirm'][data-part='confirm-trigger']:hover {
     background: var(--xh-_tone-hover, var(--xh-bg-brand-hover));
   }

package/css/popover.css

@@ -110,40 +110,44 @@
   }
 
   /* 箭头是旋转 45° 的方块，只保留朝向锚点那两条边的描边；
-     引擎不产出箭头偏移，因此沿交叉轴固定居中 */
+     交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中 */
   [data-scope='popover'][data-part='arrow'] {
+    --xh-_popover-arrow-size: var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size));
+    --xh-_popover-arrow-x: 50%;
+    --xh-_popover-arrow-y: 50%;
+
     position: absolute;
-    inline-size: var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size));
-    block-size: var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size));
+    inline-size: var(--xh-_popover-arrow-size);
+    block-size: var(--xh-_popover-arrow-size);
     background: var(--xh-popover-bg, var(--xh-bg-surface));
     border: var(--xh-stroke-thin) solid var(--xh-popover-border, var(--xh-border-default));
     rotate: 45deg;
   }
 
   [data-scope='popover'][data-part='arrow'][data-placement^='bottom'] {
-    inset-block-start: calc(var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-inline-start: calc(50% - var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-block-start: calc(var(--xh-_popover-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_popover-arrow-x) - var(--xh-_popover-arrow-size) / 2);
     border-block-end: 0;
     border-inline-end: 0;
   }
 
   [data-scope='popover'][data-part='arrow'][data-placement^='top'] {
-    inset-block-end: calc(var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-inline-start: calc(50% - var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-block-end: calc(var(--xh-_popover-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_popover-arrow-x) - var(--xh-_popover-arrow-size) / 2);
     border-block-start: 0;
     border-inline-start: 0;
   }
 
   [data-scope='popover'][data-part='arrow'][data-placement^='right'] {
-    inset-inline-start: calc(var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-block-start: calc(50% - var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-inline-start: calc(var(--xh-_popover-arrow-size) / -2);
+    inset-block-start: calc(var(--xh-_popover-arrow-y) - var(--xh-_popover-arrow-size) / 2);
     border-block-start: 0;
     border-inline-end: 0;
   }
 
   [data-scope='popover'][data-part='arrow'][data-placement^='left'] {
-    inset-inline-end: calc(var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-block-start: calc(50% - var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-inline-end: calc(var(--xh-_popover-arrow-size) / -2);
+    inset-block-start: calc(var(--xh-_popover-arrow-y) - var(--xh-_popover-arrow-size) / 2);
     border-block-end: 0;
     border-inline-start: 0;
   }

package/css/popselect.css

@@ -9,14 +9,13 @@
 
     /* 形态档只换这三个槽：缺省即 outline（描边 + 画布底） */
     --xh-_popselect-trigger-bg: var(--xh-bg-canvas);
-    --xh-_popselect-trigger-border: var(--xh-border-default);
-    --xh-_popselect-trigger-border-hover: var(--xh-border-strong);
+    --xh-_popselect-trigger-border: var(--xh-border-control);
+    --xh-_popselect-trigger-border-hover: var(--xh-border-control-hover);
 
-    /* 强调色随语气走，只落在聚焦与选中上，正文文字色不动。
-       没写 data-tone 时 --xh-_tone 没被声明，三处都退回原来的取值 */
+    /* 聚焦环恒用固定环色；强调色随语气走，只落在勾选标记与选中文字上，正文文字色不动。
+       没写 data-tone 时 --xh-_tone 没被声明，两处都退回原来的取值 */
     --xh-_popselect-ring: var(--xh-ring-focus);
     --xh-_popselect-accent: var(--xh-_tone, var(--xh-bg-brand));
-    --xh-_popselect-item-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
     --xh-_popselect-item-selected-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 
     display: inline-flex;
@@ -42,21 +41,21 @@
   /* 形态只决定描边与底色怎么用，用哪族颜色由 data-tone 决定 */
   [data-scope='popselect'][data-part='root'][data-variant='outline'] {
     --xh-_popselect-trigger-bg: var(--xh-bg-canvas);
-    --xh-_popselect-trigger-border: var(--xh-border-default);
-    --xh-_popselect-trigger-border-hover: var(--xh-border-strong);
+    --xh-_popselect-trigger-border: var(--xh-border-control);
+    --xh-_popselect-trigger-border-hover: var(--xh-border-control-hover);
   }
 
   /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
   [data-scope='popselect'][data-part='root'][data-variant='subtle'] {
     --xh-_popselect-trigger-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
     --xh-_popselect-trigger-border: transparent;
-    --xh-_popselect-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_popselect-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   [data-scope='popselect'][data-part='root'][data-variant='ghost'] {
     --xh-_popselect-trigger-bg: transparent;
     --xh-_popselect-trigger-border: transparent;
-    --xh-_popselect-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_popselect-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   [data-scope='popselect'][data-part='trigger'] {
@@ -130,8 +129,14 @@
     display: none;
   }
 
-  /* 容器只是焦点域兜底落点，落焦不画环：高亮永远长在条目上 */
-  [data-scope='popselect'][data-part='content']:focus-visible {
+  /* 焦点落在容器上只有一种情形：指针打开、无选中值、还没有任何条目当锚点。
+     那一刻它认领着 Tab 位，环画在浮层内沿；有锚点时环长在条目上，容器不再画 */
+  [data-scope='popselect'][data-part='content'][tabindex='0']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  [data-scope='popselect'][data-part='content']:not([tabindex='0']):focus-visible {
     outline: none;
   }
 
@@ -143,8 +148,8 @@
     display: flex;
     align-items: center;
     gap: var(--xh-popselect-item-gap, var(--xh-_popselect-gap));
-    padding-block: var(--xh-popselect-item-py, var(--xh-space-1));
-    padding-inline: var(--xh-popselect-item-px, var(--xh-control-px-sm));
+    padding-block: var(--xh-popselect-item-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-popselect-item-px, var(--xh-control-px-md));
     border-radius: var(--xh-popselect-item-radius, var(--xh-shape-control));
     color: var(--xh-popselect-item-fg, var(--xh-fg-default));
     font-size: var(--xh-popselect-item-font-size, var(--xh-_popselect-font-size));
@@ -153,11 +158,14 @@
     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);
   }
 
-  /* 键盘高亮与指针高亮共用一套底色：条目本身承载焦点，不另画描边 */
+  /* 悬停与键盘锚点共用中性灰轻档：条目本身承载焦点，不另画描边 */
   [data-scope='popselect'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]) {
-    background: var(--xh-popselect-item-bg-highlight, var(--xh-_popselect-item-highlight-bg));
+    background: var(--xh-popselect-item-bg-hover, var(--xh-bg-subtle));
   }
 
   /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，两者因此能同时看见 */
@@ -166,7 +174,14 @@
     font-weight: var(--xh-popselect-item-font-weight-selected, var(--xh-font-weight-medium));
   }
 
-  [data-scope='popselect'][data-part='item']:focus {
+  /* 键盘走到条目上要画环：轻档底色对白底只有 1.1:1，够不上焦点指示器的对比度要求。
+     指针悬停走的是程序化聚焦，鼠标模态下 :focus-visible 不匹配，不会误画 */
+  [data-scope='popselect'][data-part='item']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  [data-scope='popselect'][data-part='item']:focus:not(:focus-visible) {
     outline: none;
   }
 

package/css/progress.css

@@ -26,7 +26,7 @@
   }
 
   /* —— 尺寸 —— */
-  /* 只有厚度分档；中间档不写规则，缺省即中档 */
+  /* 线形只有厚度分档；中间档不写规则，缺省即中档 */
   [data-scope='progress'][data-part='root'][data-size='sm'] {
     --xh-_thickness: var(--xh-progress-thickness, var(--xh-space-1));
   }
@@ -34,4 +34,71 @@
   [data-scope='progress'][data-part='root'][data-size='lg'] {
     --xh-_thickness: var(--xh-progress-thickness, var(--xh-space-2));
   }
+
+  /* —— 环形 —— */
+  /* 环画在固定的 100×100 viewBox 里，直径由这里的尺寸决定；
+     画面与环心文字叠在同一格上，文字因此恒在圆心 */
+  [data-scope='progress'][data-part='root'][data-variant='circle'],
+  [data-scope='progress'][data-part='root'][data-variant='dashboard'] {
+    --xh-_diameter: var(--xh-progress-size, 7.5rem);
+
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--xh-_diameter);
+    block-size: var(--xh-_diameter);
+  }
+
+  [data-scope='progress'][data-part='root'][data-variant='circle'][data-size='sm'],
+  [data-scope='progress'][data-part='root'][data-variant='dashboard'][data-size='sm'] {
+    --xh-_diameter: var(--xh-progress-size, 5rem);
+  }
+
+  [data-scope='progress'][data-part='root'][data-variant='circle'][data-size='lg'],
+  [data-scope='progress'][data-part='root'][data-variant='dashboard'][data-size='lg'] {
+    --xh-_diameter: var(--xh-progress-size, 10rem);
+  }
+
+  [data-scope='progress'][data-part='canvas'],
+  [data-scope='progress'][data-part='label'] {
+    grid-area: 1 / 1;
+  }
+
+  [data-scope='progress'][data-part='canvas'] {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  /* 环心文字：占位不撑格子，长内容自己换行由作者定 */
+  [data-scope='progress'][data-part='label'] {
+    color: var(--xh-progress-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-progress-label-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-none);
+    text-align: center;
+  }
+
+  /* 圆心、半径与那两段虚线都由连接层算好写进内联样式，这里只上色。
+     底槽不跟着语气换族：只有已完成的那段换色，才读得出"完成了多少" */
+  [data-scope='progress'][data-part='track'][data-variant='circle'],
+  [data-scope='progress'][data-part='track'][data-variant='dashboard'] {
+    stroke: var(--xh-progress-track, var(--xh-bg-subtle-active));
+  }
+
+  [data-scope='progress'][data-part='range'][data-variant='circle'],
+  [data-scope='progress'][data-part='range'][data-variant='dashboard'] {
+    stroke: var(--xh-progress-range, var(--xh-_tone, var(--xh-bg-brand)));
+    stroke-linecap: var(--xh-progress-linecap, round);
+    transition: stroke-dashoffset var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 零进度：圆角端点会在长度为 0 处画出一个圆点，收掉它 */
+  [data-scope='progress'][data-part='range'][data-empty] {
+    visibility: hidden;
+  }
+
+  /* 关掉动效的用户不该被进度条的补间晃一下；这里只管本组件 */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='progress'][data-part='range'] {
+      transition-duration: 0.01ms;
+    }
+  }
 }

package/css/radio-group.css

@@ -69,7 +69,7 @@
     justify-content: center;
     inline-size: 16px;
     block-size: 16px;
-    border: var(--xh-stroke-thin) solid var(--xh-radio-group-indicator-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-radio-group-indicator-border, var(--xh-border-control));
     border-radius: var(--xh-shape-pill);
     background: var(--xh-radio-group-indicator-bg, var(--xh-bg-canvas));
     transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);

package/css/select.css

@@ -10,14 +10,13 @@
 
     /* 形态档只换这三个槽：缺省即 outline（描边 + 画布底） */
     --xh-_select-trigger-bg: var(--xh-bg-canvas);
-    --xh-_select-trigger-border: var(--xh-border-default);
-    --xh-_select-trigger-border-hover: var(--xh-border-strong);
+    --xh-_select-trigger-border: var(--xh-border-control);
+    --xh-_select-trigger-border-hover: var(--xh-border-control-hover);
 
-    /* 强调色随语气走，只落在聚焦与选中上，正文文字色不动。
-       没写 data-tone 时 --xh-_tone 没被声明，三处都退回原来的取值 */
+    /* 聚焦环恒用固定环色；强调色随语气走，只落在勾选标记与选中文字上，正文文字色不动。
+       没写 data-tone 时 --xh-_tone 没被声明，两处都退回原来的取值 */
     --xh-_select-ring: var(--xh-ring-focus);
     --xh-_select-accent: var(--xh-_tone, var(--xh-bg-brand));
-    --xh-_select-item-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
     --xh-_select-item-selected-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 
     display: inline-flex;
@@ -50,21 +49,21 @@
      形态只决定描边与底色怎么用，用哪族颜色由 data-tone 决定 */
   [data-scope='select'][data-part='root'][data-variant='outline'] {
     --xh-_select-trigger-bg: var(--xh-bg-canvas);
-    --xh-_select-trigger-border: var(--xh-border-default);
-    --xh-_select-trigger-border-hover: var(--xh-border-strong);
+    --xh-_select-trigger-border: var(--xh-border-control);
+    --xh-_select-trigger-border-hover: var(--xh-border-control-hover);
   }
 
   /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
   [data-scope='select'][data-part='root'][data-variant='subtle'] {
     --xh-_select-trigger-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
     --xh-_select-trigger-border: transparent;
-    --xh-_select-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_select-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   [data-scope='select'][data-part='root'][data-variant='ghost'] {
     --xh-_select-trigger-bg: transparent;
     --xh-_select-trigger-border: transparent;
-    --xh-_select-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_select-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   [data-scope='select'][data-part='label'] {
@@ -98,10 +97,126 @@
     cursor: pointer;
   }
 
-  [data-scope='select'][data-part='trigger']:hover:not(:disabled) {
+  /* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
+  [data-scope='select'][data-part='trigger']:hover:not(:disabled, [data-invalid]) {
     border-color: var(--xh-select-trigger-border-hover, var(--xh-_select-trigger-border-hover));
   }
 
+  [data-scope='select'][data-part='trigger'][data-invalid] {
+    border-color: var(--xh-select-trigger-border-invalid, var(--xh-color-danger-500));
+  }
+
+  /* 收纳容器：触发器与清空按钮的定位基准，触发器在里面占满一行 */
+  [data-scope='select'][data-part='control'] {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  [data-scope='select'][data-part='control'] > [data-part='trigger'] {
+    flex: 1;
+  }
+
+  /* 清空按钮：trigger 的兄弟节点，幽灵小圆钮；没选中或禁用时连接层给 hidden */
+  [data-scope='select'][data-part='clear-trigger'] {
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--xh-select-clear-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-select-clear-size, var(--xh-control-indicator-size));
+    padding: 0;
+    border: none;
+    border-radius: var(--xh-shape-pill);
+    background: none;
+    color: var(--xh-select-clear-fg, var(--xh-fg-subtle));
+
+    /* 字号行高钉死：继承页面字号会让行框高过按钮，字形被基线顶离正中 */
+    font-size: var(--xh-select-clear-font-size, var(--xh-font-size-xs));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+  }
+
+  [data-scope='select'][data-part='clear-trigger']:hover {
+    background: var(--xh-select-clear-bg-hover, var(--xh-bg-subtle-hover));
+    color: var(--xh-select-clear-fg-hover, var(--xh-fg-default));
+  }
+
+  [data-scope='select'][data-part='clear-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-_select-ring);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='select'][data-part='clear-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 进了 control 就嵌进触发器右端（与展开指示符同位），纵向钉在正中；平时不占位也不接指针 */
+  [data-scope='select'][data-part='control'] [data-part='clear-trigger'] {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: var(--xh-select-trigger-px, var(--xh-_select-px));
+    translate: 0 -50%;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* 悬停或键盘聚到清空钮上时显形 */
+  [data-scope='select'][data-part='control']:hover [data-part='clear-trigger']:not([hidden]),
+  [data-scope='select'][data-part='control'] [data-part='clear-trigger']:focus-visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* 清空钮显形期间展开指示符让位，两个图标不叠在一起 */
+  [data-scope='select'][data-part='control']:hover:has([data-part='clear-trigger']:not([hidden])) [data-part='indicator'],
+  [data-scope='select'][data-part='control']:has([data-part='clear-trigger']:focus-visible) [data-part='indicator'] {
+    opacity: 0;
+  }
+
+  /* 多选标签：淡底小药丸；放触发器里是纯展示，放外面配 tag-remove 可删 */
+  [data-scope='select'][data-part='tag'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-select-tag-gap, var(--xh-space-1));
+    padding-block: 0;
+    padding-inline: var(--xh-select-tag-px, var(--xh-space-2));
+    border-radius: var(--xh-select-tag-radius, var(--xh-shape-pill));
+    background: var(--xh-select-tag-bg, var(--xh-bg-subtle));
+    color: var(--xh-select-tag-fg, var(--xh-fg-default));
+    font-size: var(--xh-select-tag-font-size, var(--xh-font-size-xs));
+    line-height: var(--xh-leading-normal);
+    white-space: nowrap;
+  }
+
+  [data-scope='select'][data-part='tag'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  [data-scope='select'][data-part='tag-remove'] {
+    display: inline-grid;
+    place-items: center;
+    padding: 0;
+    border: none;
+    border-radius: var(--xh-shape-pill);
+    background: none;
+    color: var(--xh-select-tag-remove-fg, var(--xh-fg-subtle));
+    font-size: inherit;
+    cursor: pointer;
+  }
+
+  [data-scope='select'][data-part='tag-remove']:hover {
+    color: var(--xh-select-tag-remove-fg-hover, var(--xh-fg-default));
+  }
+
+  [data-scope='select'][data-part='tag-remove']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-_select-ring);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='select'][data-part='tag-remove'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
   [data-scope='select'][data-part='trigger']:focus-visible {
     outline: var(--xh-ring-width) solid var(--xh-_select-ring);
     outline-offset: var(--xh-ring-offset);
@@ -181,8 +296,14 @@
     display: none;
   }
 
-  /* 容器只是焦点域兜底落点，落焦不画环：高亮永远长在条目上 */
-  [data-scope='select'][data-part='content']:focus-visible {
+  /* 焦点落在容器上只有一种情形：指针打开、无选中值、还没有任何条目当锚点。
+     那一刻它认领着 Tab 位，环画在浮层内沿；有锚点时环长在条目上，容器不再画 */
+  [data-scope='select'][data-part='content'][tabindex='0']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  [data-scope='select'][data-part='content']:not([tabindex='0']):focus-visible {
     outline: none;
   }
 
@@ -194,8 +315,8 @@
     display: flex;
     align-items: center;
     gap: var(--xh-select-item-gap, var(--xh-_select-gap));
-    padding-block: var(--xh-select-item-py, var(--xh-space-1));
-    padding-inline: var(--xh-select-item-px, var(--xh-control-px-sm));
+    padding-block: var(--xh-select-item-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-select-item-px, var(--xh-control-px-md));
     border-radius: var(--xh-select-item-radius, var(--xh-shape-control));
     color: var(--xh-select-item-fg, var(--xh-fg-default));
     font-size: var(--xh-select-item-font-size, var(--xh-_select-font-size));
@@ -204,11 +325,14 @@
     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);
   }
 
-  /* 键盘高亮与指针高亮共用一套底色：条目本身承载焦点，不另画描边 */
+  /* 悬停与键盘锚点共用中性灰轻档：条目本身承载焦点，不另画描边 */
   [data-scope='select'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]) {
-    background: var(--xh-select-item-bg-highlight, var(--xh-_select-item-highlight-bg));
+    background: var(--xh-select-item-bg-hover, var(--xh-bg-subtle));
   }
 
   /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，
@@ -218,7 +342,14 @@
     font-weight: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-medium));
   }
 
-  [data-scope='select'][data-part='item']:focus {
+  /* 键盘走到条目上要画环：轻档底色对白底只有 1.1:1，够不上焦点指示器的对比度要求。
+     指针悬停走的是程序化聚焦，鼠标模态下 :focus-visible 不匹配，不会误画 */
+  [data-scope='select'][data-part='item']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  [data-scope='select'][data-part='item']:focus:not(:focus-visible) {
     outline: none;
   }