@sdata/web-vue 4.7.1 → 5.0.0

package/es/tooltip/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -23,3 +24,48 @@ $tooltip-border-radius: global.$radius-small;
 $tooltip-color-text: #fff;
 
 $tooltip-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-tooltip-bg'));
+
+// @generated runtime tokens — pnpm theme:generate
+$tooltip-padding-horizontal: theme-runtime.token(
+  'tooltip',
+  'tooltip-padding-horizontal',
+  $tooltip-padding-horizontal,
+  'spacing-6'
+);
+$tooltip-padding-vertical: theme-runtime.token(
+  'tooltip',
+  'tooltip-padding-vertical',
+  $tooltip-padding-vertical,
+  'spacing-4'
+);
+$tooltip-mini-padding-horizontal: theme-runtime.token(
+  'tooltip',
+  'tooltip-mini-padding-horizontal',
+  $tooltip-mini-padding-horizontal,
+  'spacing-6'
+);
+$tooltip-mini-padding-vertical: theme-runtime.token(
+  'tooltip',
+  'tooltip-mini-padding-vertical',
+  $tooltip-mini-padding-vertical,
+  'spacing-2'
+);
+$tooltip-mini-font-size: theme-runtime.token(
+  'tooltip',
+  'tooltip-mini-font-size',
+  $tooltip-mini-font-size,
+  'font-size-body-3'
+);
+$tooltip-font-size: theme-runtime.token(
+  'tooltip',
+  'tooltip-font-size',
+  $tooltip-font-size,
+  'font-size-body-3'
+);
+$tooltip-border-radius: theme-runtime.token(
+  'tooltip',
+  'tooltip-border-radius',
+  $tooltip-border-radius
+);
+$tooltip-color-text: theme-runtime.token('tooltip', 'tooltip-color-text', $tooltip-color-text);
+$tooltip-color-bg: theme-runtime.token('tooltip', 'tooltip-color-bg', $tooltip-color-bg);

package/es/tour/style/index.css

@@ -16,7 +16,7 @@
 /******** radius *******/
 /********* icon hover *********/
 .sd-tour-overlay {
-  z-index: 1000;
+  z-index: var(--component-tour-tour-z-index-overlay, var(--component-tour-z-index-overlay, 1000));
   pointer-events: none;
 }
 
@@ -44,7 +44,7 @@ body.sd-tour-active .sd-tour-popover * {
 
 .sd-tour-popover {
   position: fixed;
-  z-index: 1001;
+  z-index: var(--component-tour-tour-z-index-popover, var(--component-tour-z-index-popover, 1001));
   box-sizing: border-box;
   min-width: 280px;
   max-width: 360px;
@@ -60,12 +60,12 @@ body.sd-tour-active .sd-tour-popover * {
 }
 
 .sd-tour-popover {
-  padding: 12px 16px;
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-bg-popup);
-  border: 1px solid var(--sd-color-neutral-3);
-  border-radius: var(--sd-border-radius-medium);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
+  padding: var(--component-tour-tour-padding-vertical, var(--component-tour-padding-vertical, var(--spacing-6, 12px))) var(--component-tour-tour-padding-horizontal, var(--component-tour-padding-horizontal, var(--spacing-7, 16px)));
+  color: var(--component-tour-tour-color-text, var(--component-tour-color-text, var(--sd-color-text-1)));
+  background-color: var(--component-tour-tour-color-bg, var(--component-tour-color-bg, var(--sd-color-bg-popup)));
+  border: 1px solid var(--component-tour-tour-color-border, var(--component-tour-color-border, var(--sd-color-neutral-3)));
+  border-radius: var(--component-tour-tour-border-radius, var(--component-tour-border-radius, var(--sd-border-radius-medium)));
+  box-shadow: var(--component-tour-tour-shadow, var(--component-tour-shadow, 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08)));
 }
 
 .sd-tour-popover .sd-tour-content {
@@ -74,44 +74,44 @@ body.sd-tour-active .sd-tour-popover * {
 }
 
 .sd-tour-popover .sd-tour-popover-title {
-  color: var(--sd-color-text-1);
-  font-size: 16px;
+  color: var(--component-tour-tour-color-text, var(--component-tour-color-text, var(--sd-color-text-1)));
+  font-size: var(--component-tour-tour-font-size-title, var(--component-tour-font-size-title, var(--font-size-title-1, 16px)));
   line-height: 1.5715;
 }
 
 .sd-tour-popover .sd-tour-popover-description {
-  color: var(--sd-color-text-2);
-  font-size: 14px;
+  color: var(--component-tour-tour-color-description, var(--component-tour-color-description, var(--sd-color-text-2)));
+  font-size: var(--component-tour-tour-font-size-body, var(--component-tour-font-size-body, var(--font-size-body-3, 14px)));
 }
 
 .sd-tour-popover .sd-tour-popover-title[style*=block] + .sd-tour-popover-description {
-  margin-top: 4px;
+  margin-top: var(--component-tour-tour-gap-title, var(--component-tour-gap-title, var(--spacing-2, 4px)));
 }
 
 .sd-tour-popover .sd-tour-popover-progress-text {
-  color: var(--sd-color-text-2);
-  font-size: 12px;
+  color: var(--component-tour-tour-color-description, var(--component-tour-color-description, var(--sd-color-text-2)));
+  font-size: var(--component-tour-tour-font-size-progress, var(--component-tour-font-size-progress, var(--font-size-body-1, 12px)));
 }
 
 .sd-tour-popover .sd-tour-popover-close-btn {
-  color: var(--sd-color-text-2);
+  color: var(--component-tour-tour-color-description, var(--component-tour-color-description, var(--sd-color-text-2)));
 }
 
 .sd-tour-popover .sd-tour-popover-close-btn:hover,
 .sd-tour-popover .sd-tour-popover-close-btn:focus {
-  color: var(--sd-color-text-1);
+  color: var(--component-tour-tour-color-text, var(--component-tour-color-text, var(--sd-color-text-1)));
 }
 
 .sd-tour-popover .sd-tour-popover-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-top: 10px;
+  margin-top: var(--component-tour-tour-gap-footer, var(--component-tour-gap-footer, var(--spacing-5, 10px)));
 }
 
 .sd-tour-popover .sd-tour-popover-navigation-btns {
   display: inline-flex;
-  gap: 4px;
+  gap: var(--component-tour-tour-gap-buttons, var(--component-tour-gap-buttons, var(--spacing-2, 4px)));
 }
 
 .sd-tour-popover .sd-tour-popover-progress-text {
@@ -133,7 +133,7 @@ body.sd-tour-active .sd-tour-popover * {
   width: 24px;
   height: 24px;
   padding: 0;
-  color: var(--sd-color-text-2);
+  color: var(--component-tour-tour-color-description, var(--component-tour-color-description, var(--sd-color-text-2)));
   font-size: 20px;
   line-height: 1;
   background: transparent;
@@ -150,17 +150,17 @@ body.sd-tour-active .sd-tour-popover * {
   position: absolute;
   width: 12px;
   height: 12px;
-  background: var(--sd-color-bg-popup);
-  border-top: 1px solid var(--sd-color-neutral-3);
-  border-left: 1px solid var(--sd-color-neutral-3);
+  background: var(--component-tour-tour-color-bg, var(--component-tour-color-bg, var(--sd-color-bg-popup)));
+  border-top: 1px solid var(--component-tour-tour-color-border, var(--component-tour-color-border, var(--sd-color-neutral-3)));
+  border-left: 1px solid var(--component-tour-tour-color-border, var(--component-tour-color-border, var(--sd-color-neutral-3)));
   transform: rotate(45deg);
 }
 
 .sd-tour-popover-arrow-side-top {
   bottom: -7px;
   border-top: 0;
-  border-right: 1px solid var(--sd-color-neutral-3);
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  border-right: 1px solid var(--component-tour-tour-color-border, var(--component-tour-color-border, var(--sd-color-neutral-3)));
+  border-bottom: 1px solid var(--component-tour-tour-color-border, var(--component-tour-color-border, var(--sd-color-neutral-3)));
   border-left: 0;
 }
 
@@ -171,8 +171,8 @@ body.sd-tour-active .sd-tour-popover * {
 .sd-tour-popover-arrow-side-left {
   right: -7px;
   border-top: 0;
-  border-right: 1px solid var(--sd-color-neutral-3);
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  border-right: 1px solid var(--component-tour-tour-color-border, var(--component-tour-color-border, var(--sd-color-neutral-3)));
+  border-bottom: 1px solid var(--component-tour-tour-color-border, var(--component-tour-color-border, var(--sd-color-neutral-3)));
   border-left: 0;
 }
 
@@ -217,7 +217,7 @@ body.sd-tour-active .sd-tour-popover * {
 
 .sd-tour-active-element {
   position: relative;
-  z-index: var(--sd-tour-active-z-index, 1001);
+  z-index: var(--sd-tour-active-z-index, var(--component-tour-tour-z-index-popover, var(--component-tour-z-index-popover, 1001)));
 }
 
 .sd-tour-no-interaction,

package/es/tour/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -25,3 +26,67 @@ $tour-button-padding-y: global.$spacing-1;
 $tour-button-padding-x: global.$spacing-4;
 $tour-z-index-overlay: global.$z-index-popup;
 $tour-z-index-popover: global.$z-index-drawer;
+
+// @generated runtime tokens — pnpm theme:generate
+$tour-color-bg: theme-runtime.token('tour', 'tour-color-bg', $tour-color-bg);
+$tour-color-text: theme-runtime.token('tour', 'tour-color-text', $tour-color-text);
+$tour-color-description: theme-runtime.token(
+  'tour',
+  'tour-color-description',
+  $tour-color-description
+);
+$tour-color-border: theme-runtime.token('tour', 'tour-color-border', $tour-color-border);
+$tour-color-primary-text: theme-runtime.token(
+  'tour',
+  'tour-color-primary-text',
+  $tour-color-primary-text
+);
+$tour-border-radius: theme-runtime.token('tour', 'tour-border-radius', $tour-border-radius);
+$tour-shadow: theme-runtime.token('tour', 'tour-shadow', $tour-shadow);
+$tour-font-size-title: theme-runtime.token(
+  'tour',
+  'tour-font-size-title',
+  $tour-font-size-title,
+  'font-size-title-1'
+);
+$tour-font-size-body: theme-runtime.token(
+  'tour',
+  'tour-font-size-body',
+  $tour-font-size-body,
+  'font-size-body-3'
+);
+$tour-font-size-progress: theme-runtime.token(
+  'tour',
+  'tour-font-size-progress',
+  $tour-font-size-progress,
+  'font-size-body-1'
+);
+$tour-padding-vertical: theme-runtime.token(
+  'tour',
+  'tour-padding-vertical',
+  $tour-padding-vertical,
+  'spacing-6'
+);
+$tour-padding-horizontal: theme-runtime.token(
+  'tour',
+  'tour-padding-horizontal',
+  $tour-padding-horizontal,
+  'spacing-7'
+);
+$tour-gap-title: theme-runtime.token('tour', 'tour-gap-title', $tour-gap-title, 'spacing-2');
+$tour-gap-footer: theme-runtime.token('tour', 'tour-gap-footer', $tour-gap-footer, 'spacing-5');
+$tour-gap-buttons: theme-runtime.token('tour', 'tour-gap-buttons', $tour-gap-buttons, 'spacing-2');
+$tour-button-padding-y: theme-runtime.token(
+  'tour',
+  'tour-button-padding-y',
+  $tour-button-padding-y,
+  'spacing-1'
+);
+$tour-button-padding-x: theme-runtime.token(
+  'tour',
+  'tour-button-padding-x',
+  $tour-button-padding-x,
+  'spacing-4'
+);
+$tour-z-index-overlay: theme-runtime.token('tour', 'tour-z-index-overlay', $tour-z-index-overlay);
+$tour-z-index-popover: theme-runtime.token('tour', 'tour-z-index-popover', $tour-z-index-popover);

package/es/transfer/style/index.css

@@ -23,13 +23,13 @@
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  width: 200px;
-  height: 224px;
-  border: 1px solid var(--sd-color-neutral-3);
-  border-radius: var(--sd-border-radius-small);
+  width: var(--component-transfer-transfer-width, var(--component-transfer-width, 200px));
+  height: var(--component-transfer-transfer-height, var(--component-transfer-height, 224px));
+  border: var(--component-transfer-transfer-border-width, var(--component-transfer-border-width, var(--border-1, 1px))) solid var(--component-transfer-transfer-border-color, var(--component-transfer-border-color, var(--sd-color-neutral-3)));
+  border-radius: var(--component-transfer-transfer-border-radius, var(--component-transfer-border-radius, var(--sd-border-radius-small)));
 }
 .sd-transfer-view-search {
-  padding: 8px 12px 4px 12px;
+  padding: var(--component-transfer-transfer-search-padding-top, var(--component-transfer-search-padding-top, 8px)) var(--component-transfer-transfer-search-padding-right, var(--component-transfer-search-padding-right, 12px)) var(--component-transfer-transfer-search-padding-bottom, var(--component-transfer-search-padding-bottom, 4px)) var(--component-transfer-transfer-search-padding-left, var(--component-transfer-search-padding-left, 12px));
 }
 .sd-transfer-view-list {
   flex: 1;
@@ -41,7 +41,7 @@
 .sd-transfer-view-header {
   display: flex;
   align-items: center;
-  padding: 0 10px;
+  padding: 0 var(--component-transfer-transfer-item-padding-horizontal, var(--component-transfer-item-padding-horizontal, var(--spacing-5, 10px)));
 }
 .sd-transfer-view-header > *:first-child {
   flex: 1;
@@ -53,12 +53,12 @@
   margin-right: 8px;
 }
 .sd-transfer-view-header {
-  height: 40px;
-  color: var(--sd-color-text-1);
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 40px;
-  background-color: var(--sd-color-fill-1);
+  height: var(--component-transfer-transfer-height-title, var(--component-transfer-height-title, var(--size-10, 40px)));
+  color: var(--component-transfer-transfer-color-text-header, var(--component-transfer-color-text-header, var(--sd-color-text-1)));
+  font-weight: var(--component-transfer-transfer-font-weight-header, var(--component-transfer-font-weight-header, var(--font-weight-500, 500)));
+  font-size: var(--component-transfer-transfer-font-size-header, var(--component-transfer-font-size-header, var(--font-size-body-3, 14px)));
+  line-height: var(--component-transfer-transfer-height-title, var(--component-transfer-height-title, var(--size-10, 40px)));
+  background-color: var(--component-transfer-transfer-color-bg-header, var(--component-transfer-color-bg-header, var(--sd-color-fill-1)));
 }
 .sd-transfer-view-header-title {
   display: flex;
@@ -84,18 +84,18 @@
   text-overflow: ellipsis;
 }
 .sd-transfer-view-header-clear-btn {
-  color: var(--sd-color-text-2);
-  font-size: 12px;
+  color: var(--component-transfer-transfer-color-icon, var(--component-transfer-color-icon, var(--sd-color-text-2)));
+  font-size: var(--component-transfer-transfer-font-size-icon, var(--component-transfer-font-size-icon, var(--font-size-body-1, 12px)));
   cursor: pointer;
 }
 .sd-transfer-view-header-clear-btn:hover::before {
-  background-color: var(--sd-color-fill-3);
+  background-color: var(--component-transfer-transfer-color-bg-icon, var(--component-transfer-color-bg-icon, var(--sd-color-fill-3)));
 }
 .sd-transfer-view-header-count {
   margin-right: 2px;
-  color: var(--sd-color-text-3);
+  color: var(--component-transfer-transfer-color-text-header-unit, var(--component-transfer-color-text-header-unit, var(--sd-color-text-3)));
   font-weight: normal;
-  font-size: 12px;
+  font-size: var(--component-transfer-transfer-font-size-header-unit, var(--component-transfer-font-size-header-unit, var(--font-size-body-1, 12px)));
 }
 .sd-transfer-view-body {
   flex: 1 1 auto;
@@ -123,21 +123,21 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  height: 40px;
-  padding: 0 8px;
+  height: var(--component-transfer-transfer-height-footer, var(--component-transfer-height-footer, var(--size-10, 40px)));
+  padding: 0 var(--component-transfer-transfer-padding-horizontal-footer, var(--component-transfer-padding-horizontal-footer, var(--spacing-4, 8px)));
 }
 .sd-transfer-view .sd-list .sd-pagination {
   position: absolute;
   top: 50%;
-  right: 8px;
+  right: var(--component-transfer-transfer-padding-horizontal-footer, var(--component-transfer-padding-horizontal-footer, var(--spacing-4, 8px)));
   margin: 0;
   transform: translateY(-50%);
 }
 .sd-transfer-view .sd-list .sd-pagination-jumper-input {
-  width: 24px;
+  width: var(--component-transfer-transfer-pagination-width-input, var(--component-transfer-pagination-width-input, var(--size-6, 24px)));
 }
 .sd-transfer-view .sd-list .sd-pagination-jumper-separator {
-  padding: 0 8px;
+  padding: 0 var(--component-transfer-transfer-pagination-gap-separator, var(--component-transfer-pagination-gap-separator, var(--spacing-4, 8px)));
 }
 .sd-transfer-view .sd-checkbox {
   padding-left: 6px;
@@ -146,22 +146,22 @@
   display: inline;
 }
 .sd-transfer-view .sd-checkbox .sd-icon-hover:hover::before {
-  background-color: var(--sd-color-fill-3);
+  background-color: var(--component-transfer-transfer-color-bg-icon, var(--component-transfer-color-bg-icon, var(--sd-color-fill-3)));
 }
 .sd-transfer-list-item {
   position: relative;
   display: flex;
   align-items: center;
-  height: 36px;
-  padding: 0 10px;
-  color: var(--sd-color-text-1);
-  line-height: 36px;
+  height: var(--component-transfer-transfer-item-height, var(--component-transfer-item-height, var(--size-9, 36px)));
+  padding: 0 var(--component-transfer-transfer-item-padding-horizontal, var(--component-transfer-item-padding-horizontal, var(--spacing-5, 10px)));
+  color: var(--component-transfer-transfer-item-color-default, var(--component-transfer-item-color-default, var(--sd-color-text-1)));
+  line-height: var(--component-transfer-transfer-item-height, var(--component-transfer-item-height, var(--size-9, 36px)));
   list-style: none;
-  background-color: transparent;
+  background-color: var(--component-transfer-transfer-item-color-bg-default, var(--component-transfer-item-color-bg-default, var(--color-transparent, var(--sd-color-transparent, transparent))));
   cursor: default;
 }
 .sd-transfer-list-item-content {
-  font-size: 14px;
+  font-size: var(--component-transfer-transfer-item-font-size, var(--component-transfer-item-font-size, var(--font-size-body-3, 14px)));
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -172,13 +172,14 @@
   text-overflow: ellipsis;
 }
 .sd-transfer-list-item-disabled {
-  color: var(--sd-color-text-4);
-  background-color: transparent;
+  color: var(--component-transfer-transfer-item-color-disabled, var(--component-transfer-item-color-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-transfer-transfer-item-color-bg-disabled, var(--component-transfer-item-color-bg-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
   cursor: not-allowed;
 }
-.sd-transfer-list-item:not(.sd-transfer-list-item-disabled):hover {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-fill-2);
+.sd-transfer-list-item:not(.sd-transfer-list-item-disabled):hover, .sd-transfer-list-item:not(.sd-transfer-list-item-disabled):focus-visible {
+  color: var(--component-transfer-transfer-item-color-hover, var(--component-transfer-item-color-hover, var(--sd-color-text-1)));
+  background-color: var(--component-transfer-transfer-item-color-bg-hover, var(--component-transfer-item-color-bg-hover, var(--sd-color-fill-2)));
+  outline: none;
 }
 .sd-transfer-list-item .sd-checkbox {
   width: 100%;
@@ -188,12 +189,12 @@
 }
 .sd-transfer-list-item-remove-btn {
   margin-left: auto;
-  color: var(--sd-color-text-2);
-  font-size: 12px;
+  color: var(--component-transfer-transfer-color-icon, var(--component-transfer-color-icon, var(--sd-color-text-2)));
+  font-size: var(--component-transfer-transfer-font-size-icon, var(--component-transfer-font-size-icon, var(--font-size-body-1, 12px)));
   cursor: pointer;
 }
 .sd-transfer-list-item-remove-btn:hover::before {
-  background-color: var(--sd-color-fill-3);
+  background-color: var(--component-transfer-transfer-color-bg-icon, var(--component-transfer-color-bg-icon, var(--sd-color-fill-3)));
 }
 .sd-transfer-list-item-draggable::before {
   position: absolute;
@@ -206,28 +207,28 @@
 }
 .sd-transfer-list-item-gap-bottom::before {
   bottom: -2px;
-  background-color: rgb(var(--sd-primary-6));
+  background-color: var(--component-transfer-transfer-item-draggable-color-bg-gap, var(--component-transfer-item-draggable-color-bg-gap, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-transfer-list-item-gap-top::before {
   top: -2px;
-  background-color: rgb(var(--sd-primary-6));
+  background-color: var(--component-transfer-transfer-item-draggable-color-bg-gap, var(--component-transfer-item-draggable-color-bg-gap, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-transfer-list-item-dragging {
-  color: var(--sd-color-text-4) !important;
-  background-color: var(--sd-color-fill-1) !important;
+  color: var(--component-transfer-transfer-item-draggable-color-dragging, var(--component-transfer-item-draggable-color-dragging, var(--sd-color-text-4))) !important;
+  background-color: var(--component-transfer-transfer-item-draggable-color-bg-dragging, var(--component-transfer-item-draggable-color-bg-dragging, var(--sd-color-fill-1))) !important;
 }
 .sd-transfer-list-item-dragged {
   animation: sd-transfer-drag-item-blink 0.4s;
   animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-transfer-operations {
-  padding: 0 20px;
+  padding: 0 var(--component-transfer-transfer-operation-padding-horizontal, var(--component-transfer-operation-padding-horizontal, var(--spacing-8, 20px)));
 }
 .sd-transfer-operations .sd-btn {
   display: block;
 }
 .sd-transfer-operations .sd-btn:last-child {
-  margin-top: 12px;
+  margin-top: var(--component-transfer-transfer-operation-gap-buttons, var(--component-transfer-operation-gap-buttons, var(--spacing-6, 12px)));
 }
 .sd-transfer-operations-words .sd-btn {
   width: 100%;
@@ -244,12 +245,12 @@
   border-bottom-left-radius: 0;
 }
 .sd-transfer-disabled .sd-transfer-view-header {
-  color: var(--sd-color-text-4);
+  color: var(--component-transfer-transfer-item-color-disabled, var(--component-transfer-item-color-disabled, var(--sd-color-text-4)));
 }
 
 @keyframes sd-transfer-drag-item-blink {
   0% {
-    background-color: var(--sd-color-primary-light-1);
+    background-color: var(--component-transfer-transfer-item-draggable-color-blink, var(--component-transfer-item-draggable-color-blink, var(--sd-color-primary-light-1)));
   }
   100% {
     background-color: transparent;

package/es/transfer/style/index.scss

@@ -191,9 +191,12 @@ $transfer-prefix-cls: string.unquote('#{theme.$prefix}-transfer');
       cursor: not-allowed;
     }
 
-    &:not(#{&}-disabled):hover {
+    // 键盘焦点与 hover 保持同一视觉
+    &:not(#{&}-disabled):hover,
+    &:not(#{&}-disabled):focus-visible {
       color: $transfer-item-color_hover;
       background-color: $transfer-item-color-bg_hover;
+      outline: none;
     }
 
     .#{theme.$prefix}-checkbox {