@douyinfe/semi-ui 2.10.0-alpha.0 → 2.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (130) hide show
  1. package/badge/_story/badge.stories.js +34 -2
  2. package/banner/_story/banner.stories.js +62 -1
  3. package/banner/index.tsx +5 -5
  4. package/button/buttonGroup.tsx +2 -2
  5. package/carousel/CarouselArrow.tsx +62 -0
  6. package/carousel/CarouselIndicator.tsx +83 -0
  7. package/carousel/__test__/carousel.test.js +159 -0
  8. package/carousel/_story/carousel.stories.js +486 -0
  9. package/carousel/index.tsx +292 -0
  10. package/carousel/interface.ts +63 -0
  11. package/cascader/index.tsx +1 -2
  12. package/checkbox/checkbox.tsx +8 -18
  13. package/datePicker/monthsGrid.tsx +8 -8
  14. package/dist/css/semi.css +343 -0
  15. package/dist/css/semi.min.css +1 -1
  16. package/dist/umd/semi-ui.js +23525 -22602
  17. package/dist/umd/semi-ui.js.map +1 -1
  18. package/dist/umd/semi-ui.min.js +1 -1
  19. package/dist/umd/semi-ui.min.js.map +1 -1
  20. package/form/baseForm.tsx +10 -1
  21. package/form/hoc/withField.tsx +25 -10
  22. package/index.ts +2 -0
  23. package/inputNumber/__test__/inputNumber.test.js +40 -3
  24. package/inputNumber/_story/inputNumber.stories.js +56 -1
  25. package/inputNumber/index.tsx +22 -14
  26. package/lib/cjs/_portal/index.d.ts +1 -1
  27. package/lib/cjs/banner/index.js +11 -5
  28. package/lib/cjs/button/buttonGroup.d.ts +1 -1
  29. package/lib/cjs/carousel/CarouselArrow.d.ts +8 -0
  30. package/lib/cjs/carousel/CarouselArrow.js +88 -0
  31. package/lib/cjs/carousel/CarouselIndicator.d.ts +23 -0
  32. package/lib/cjs/carousel/CarouselIndicator.js +145 -0
  33. package/lib/cjs/carousel/index.d.ts +58 -0
  34. package/lib/cjs/carousel/index.js +343 -0
  35. package/lib/cjs/carousel/interface.d.ts +61 -0
  36. package/lib/cjs/carousel/interface.js +7 -0
  37. package/lib/cjs/cascader/index.js +1 -1
  38. package/lib/cjs/checkbox/checkbox.d.ts +0 -4
  39. package/lib/cjs/checkbox/checkbox.js +13 -25
  40. package/lib/cjs/datePicker/dateInput.d.ts +1 -1
  41. package/lib/cjs/datePicker/datePicker.d.ts +1 -1
  42. package/lib/cjs/datePicker/insetInput.d.ts +1 -0
  43. package/lib/cjs/datePicker/monthsGrid.d.ts +1 -1
  44. package/lib/cjs/datePicker/monthsGrid.js +6 -6
  45. package/lib/cjs/dropdown/dropdownMenu.d.ts +1 -0
  46. package/lib/cjs/form/baseForm.d.ts +2 -1
  47. package/lib/cjs/form/baseForm.js +10 -1
  48. package/lib/cjs/form/field.d.ts +1 -1
  49. package/lib/cjs/form/hoc/withField.js +14 -5
  50. package/lib/cjs/index.d.ts +1 -0
  51. package/lib/cjs/index.js +9 -0
  52. package/lib/cjs/inputNumber/index.d.ts +2 -6
  53. package/lib/cjs/inputNumber/index.js +27 -11
  54. package/lib/cjs/modal/useModal/index.d.ts +1 -0
  55. package/lib/cjs/notification/useNotification/index.d.ts +1 -0
  56. package/lib/cjs/radio/radio.d.ts +1 -5
  57. package/lib/cjs/radio/radio.js +12 -26
  58. package/lib/cjs/radio/radioGroup.d.ts +1 -1
  59. package/lib/cjs/scrollList/scrollItem.js +1 -1
  60. package/lib/cjs/switch/index.d.ts +3 -0
  61. package/lib/cjs/switch/index.js +26 -6
  62. package/lib/cjs/timePicker/Combobox.d.ts +1 -0
  63. package/lib/cjs/timePicker/TimePicker.d.ts +2 -2
  64. package/lib/cjs/timePicker/TimeShape.d.ts +1 -1
  65. package/lib/cjs/timePicker/index.d.ts +2 -2
  66. package/lib/cjs/toast/useToast/index.d.ts +1 -0
  67. package/lib/cjs/tooltip/index.d.ts +1 -1
  68. package/lib/cjs/tooltip/index.js +11 -13
  69. package/lib/cjs/transfer/index.js +5 -5
  70. package/lib/cjs/treeSelect/index.js +1 -1
  71. package/lib/cjs/typography/title.d.ts +1 -1
  72. package/lib/cjs/upload/index.d.ts +1 -1
  73. package/lib/es/_portal/index.d.ts +1 -1
  74. package/lib/es/banner/index.js +11 -5
  75. package/lib/es/button/buttonGroup.d.ts +1 -1
  76. package/lib/es/carousel/CarouselArrow.d.ts +8 -0
  77. package/lib/es/carousel/CarouselArrow.js +70 -0
  78. package/lib/es/carousel/CarouselIndicator.d.ts +23 -0
  79. package/lib/es/carousel/CarouselIndicator.js +125 -0
  80. package/lib/es/carousel/index.d.ts +58 -0
  81. package/lib/es/carousel/index.js +309 -0
  82. package/lib/es/carousel/interface.d.ts +61 -0
  83. package/lib/es/carousel/interface.js +1 -0
  84. package/lib/es/cascader/index.js +1 -1
  85. package/lib/es/checkbox/checkbox.d.ts +0 -4
  86. package/lib/es/checkbox/checkbox.js +13 -25
  87. package/lib/es/datePicker/dateInput.d.ts +1 -1
  88. package/lib/es/datePicker/datePicker.d.ts +1 -1
  89. package/lib/es/datePicker/insetInput.d.ts +1 -0
  90. package/lib/es/datePicker/monthsGrid.d.ts +1 -1
  91. package/lib/es/datePicker/monthsGrid.js +7 -7
  92. package/lib/es/dropdown/dropdownMenu.d.ts +1 -0
  93. package/lib/es/form/baseForm.d.ts +2 -1
  94. package/lib/es/form/baseForm.js +10 -1
  95. package/lib/es/form/field.d.ts +1 -1
  96. package/lib/es/form/hoc/withField.js +14 -5
  97. package/lib/es/index.d.ts +1 -0
  98. package/lib/es/index.js +1 -0
  99. package/lib/es/inputNumber/index.d.ts +2 -6
  100. package/lib/es/inputNumber/index.js +26 -11
  101. package/lib/es/modal/useModal/index.d.ts +1 -0
  102. package/lib/es/notification/useNotification/index.d.ts +1 -0
  103. package/lib/es/radio/radio.d.ts +1 -5
  104. package/lib/es/radio/radio.js +12 -26
  105. package/lib/es/radio/radioGroup.d.ts +1 -1
  106. package/lib/es/scrollList/scrollItem.js +1 -1
  107. package/lib/es/switch/index.d.ts +3 -0
  108. package/lib/es/switch/index.js +26 -6
  109. package/lib/es/timePicker/Combobox.d.ts +1 -0
  110. package/lib/es/timePicker/TimePicker.d.ts +2 -2
  111. package/lib/es/timePicker/TimeShape.d.ts +1 -1
  112. package/lib/es/timePicker/index.d.ts +2 -2
  113. package/lib/es/toast/useToast/index.d.ts +1 -0
  114. package/lib/es/tooltip/index.d.ts +1 -1
  115. package/lib/es/tooltip/index.js +11 -13
  116. package/lib/es/transfer/index.js +1 -1
  117. package/lib/es/treeSelect/index.js +1 -1
  118. package/lib/es/typography/title.d.ts +1 -1
  119. package/lib/es/upload/index.d.ts +1 -1
  120. package/package.json +9 -9
  121. package/popover/_story/popover.stories.js +38 -2
  122. package/radio/radio.tsx +7 -17
  123. package/scrollList/scrollItem.tsx +1 -1
  124. package/switch/index.tsx +20 -3
  125. package/tagInput/__test__/tagInput.test.js +11 -11
  126. package/timePicker/TimePicker.tsx +1 -1
  127. package/timePicker/_story/timepicker.stories.js +20 -1
  128. package/tooltip/index.tsx +11 -8
  129. package/transfer/index.tsx +1 -1
  130. package/treeSelect/index.tsx +1 -1
package/dist/css/semi.css CHANGED
@@ -2592,6 +2592,345 @@ body[theme-mode=dark], body .semi-always-dark {
2592
2592
  margin-bottom: -1px;
2593
2593
  }
2594
2594
 
2595
+ .semi-carousel {
2596
+ position: relative;
2597
+ overflow: hidden;
2598
+ }
2599
+ .semi-carousel-content {
2600
+ width: 100%;
2601
+ height: 100%;
2602
+ overflow: hidden;
2603
+ position: relative;
2604
+ }
2605
+ .semi-carousel-content-item {
2606
+ position: absolute;
2607
+ left: 0;
2608
+ top: 0;
2609
+ width: 100%;
2610
+ height: 100%;
2611
+ overflow: hidden;
2612
+ }
2613
+ .semi-carousel-content-item-current {
2614
+ z-index: 1;
2615
+ }
2616
+ .semi-carousel-content-fade > * {
2617
+ opacity: 0;
2618
+ }
2619
+ .semi-carousel-content-fade .semi-carousel-content-item-current {
2620
+ opacity: 1;
2621
+ }
2622
+ .semi-carousel-content-slide > *:not(.semi-carousel-content-item-current) {
2623
+ visibility: hidden;
2624
+ }
2625
+ .semi-carousel-content-slide .semi-carousel-content-item-slide-out {
2626
+ display: block;
2627
+ animation: semi-carousel-content-item-keyframe-slide-out;
2628
+ }
2629
+ .semi-carousel-content-slide .semi-carousel-content-item-slide-in {
2630
+ display: block;
2631
+ animation: semi-carousel-content-item-keyframe-slide-in;
2632
+ }
2633
+ .semi-carousel-content-reverse .semi-carousel-content-item-slide-out {
2634
+ animation: semi-carousel-content-item-keyframe-slide-out-reverse;
2635
+ }
2636
+ .semi-carousel-content-reverse .semi-carousel-content-item-slide-in {
2637
+ animation: semi-carousel-content-item-keyframe-slide-in-reverse;
2638
+ }
2639
+ .semi-carousel-indicator {
2640
+ display: flex;
2641
+ align-items: flex-end;
2642
+ z-index: 2;
2643
+ }
2644
+ .semi-carousel-indicator-left {
2645
+ position: absolute;
2646
+ left: 32px;
2647
+ bottom: 32px;
2648
+ }
2649
+ .semi-carousel-indicator-center {
2650
+ position: absolute;
2651
+ left: 50%;
2652
+ bottom: 32px;
2653
+ transform: translate(-50%);
2654
+ }
2655
+ .semi-carousel-indicator-right {
2656
+ position: absolute;
2657
+ right: 32px;
2658
+ bottom: 32px;
2659
+ }
2660
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item {
2661
+ border-radius: 50%;
2662
+ cursor: pointer;
2663
+ }
2664
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item:not(:last-child) {
2665
+ margin-right: 8px;
2666
+ }
2667
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-small {
2668
+ width: 8px;
2669
+ height: 8px;
2670
+ }
2671
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-medium {
2672
+ width: 12px;
2673
+ height: 12px;
2674
+ }
2675
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary {
2676
+ background-color: rgba(var(--semi-blue-6), 0.4);
2677
+ }
2678
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active {
2679
+ background: rgba(var(--semi-blue-6), 1);
2680
+ }
2681
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary:hover {
2682
+ background-color: rgba(var(--semi-blue-6), 0.7);
2683
+ }
2684
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary:active {
2685
+ background: rgba(var(--semi-blue-6), 1);
2686
+ }
2687
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-light {
2688
+ background-color: rgba(var(--semi-white), 0.4);
2689
+ }
2690
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active {
2691
+ background: rgba(var(--semi-white), 1);
2692
+ }
2693
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-light:hover {
2694
+ background-color: rgba(var(--semi-white), 0.7);
2695
+ }
2696
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-light:active {
2697
+ background: rgba(var(--semi-white), 1);
2698
+ }
2699
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark {
2700
+ background-color: rgba(var(--semi-black), 0.5);
2701
+ }
2702
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active {
2703
+ background-color: rgba(var(--semi-black), 1);
2704
+ }
2705
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark:hover {
2706
+ background-color: rgba(var(--semi-black), 0.7);
2707
+ }
2708
+ .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark:active {
2709
+ background: rgba(var(--semi-black), 1);
2710
+ }
2711
+ .semi-carousel-indicator-line {
2712
+ width: 240px;
2713
+ }
2714
+ .semi-carousel-indicator-line .semi-carousel-indicator-item {
2715
+ flex: 1;
2716
+ cursor: pointer;
2717
+ }
2718
+ .semi-carousel-indicator-line .semi-carousel-indicator-item:not(:last-child) {
2719
+ margin-right: 4px;
2720
+ }
2721
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-small {
2722
+ height: 4px;
2723
+ }
2724
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-medium {
2725
+ height: 6px;
2726
+ }
2727
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-primary {
2728
+ background-color: rgba(var(--semi-blue-6), 0.4);
2729
+ }
2730
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active {
2731
+ background: rgba(var(--semi-blue-6), 1);
2732
+ }
2733
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-primary:hover {
2734
+ background-color: rgba(var(--semi-blue-6), 0.7);
2735
+ }
2736
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-primary:active {
2737
+ background: rgba(var(--semi-blue-6), 1);
2738
+ }
2739
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-light {
2740
+ background-color: rgba(var(--semi-white), 0.4);
2741
+ }
2742
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active {
2743
+ background: rgba(var(--semi-white), 1);
2744
+ }
2745
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-light:hover {
2746
+ background-color: rgba(var(--semi-white), 0.7);
2747
+ }
2748
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-light:active {
2749
+ background: rgba(var(--semi-white), 1);
2750
+ }
2751
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-dark {
2752
+ background-color: rgba(var(--semi-black), 0.5);
2753
+ }
2754
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active {
2755
+ background: rgba(var(--semi-black), 1);
2756
+ }
2757
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-dark:hover {
2758
+ background-color: rgba(var(--semi-black), 0.7);
2759
+ }
2760
+ .semi-carousel-indicator-line .semi-carousel-indicator-item-dark:active {
2761
+ background: rgba(var(--semi-black), 1);
2762
+ }
2763
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item {
2764
+ cursor: pointer;
2765
+ }
2766
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item:not(:last-child) {
2767
+ margin-right: 4px;
2768
+ }
2769
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-small {
2770
+ width: 4px;
2771
+ height: 12px;
2772
+ }
2773
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-small.semi-carousel-indicator-item-active {
2774
+ height: 20px;
2775
+ }
2776
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-medium {
2777
+ width: 6px;
2778
+ height: 20px;
2779
+ }
2780
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-medium.semi-carousel-indicator-item-active {
2781
+ height: 28px;
2782
+ }
2783
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary {
2784
+ background-color: rgba(var(--semi-blue-6), 0.4);
2785
+ }
2786
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active {
2787
+ background: rgba(var(--semi-blue-6), 1);
2788
+ }
2789
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary:hover {
2790
+ background-color: rgba(var(--semi-blue-6), 0.7);
2791
+ }
2792
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary:active {
2793
+ background: rgba(var(--semi-blue-6), 1);
2794
+ }
2795
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-light {
2796
+ background-color: rgba(var(--semi-white), 0.4);
2797
+ }
2798
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active {
2799
+ background: rgba(var(--semi-white), 1);
2800
+ }
2801
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-light:hover {
2802
+ background-color: rgba(var(--semi-white), 0.7);
2803
+ }
2804
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-light:active {
2805
+ background: rgba(var(--semi-white), 1);
2806
+ }
2807
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark {
2808
+ background-color: rgba(var(--semi-black), 0.5);
2809
+ }
2810
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active {
2811
+ background: rgba(var(--semi-black), 1);
2812
+ }
2813
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark:hover {
2814
+ background-color: rgba(var(--semi-black), 0.7);
2815
+ }
2816
+ .semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark:active {
2817
+ background: rgba(var(--semi-black), 1);
2818
+ }
2819
+ .semi-carousel-arrow {
2820
+ display: flex;
2821
+ font-size: 32px;
2822
+ cursor: pointer;
2823
+ }
2824
+ .semi-carousel-arrow-prev {
2825
+ position: absolute;
2826
+ top: 50%;
2827
+ left: 20px;
2828
+ transform: translateY(-50%);
2829
+ z-index: 2;
2830
+ }
2831
+ .semi-carousel-arrow-next {
2832
+ position: absolute;
2833
+ top: 50%;
2834
+ right: 20px;
2835
+ transform: translateY(-50%);
2836
+ z-index: 2;
2837
+ }
2838
+ .semi-carousel-arrow-light {
2839
+ color: rgba(var(--semi-white), 0.4);
2840
+ }
2841
+ .semi-carousel-arrow-light:hover {
2842
+ color: rgba(var(--semi-white), 1);
2843
+ }
2844
+ .semi-carousel-arrow-primary {
2845
+ color: rgba(var(--semi-blue-6), 0.4);
2846
+ }
2847
+ .semi-carousel-arrow-primary:hover {
2848
+ color: rgba(var(--semi-blue-6), 1);
2849
+ }
2850
+ .semi-carousel-arrow-dark {
2851
+ color: rgba(var(--semi-black), 0.5);
2852
+ }
2853
+ .semi-carousel-arrow-dark:hover {
2854
+ color: rgba(var(--semi-black), 1);
2855
+ }
2856
+ .semi-carousel-arrow-hover div {
2857
+ z-index: 2;
2858
+ opacity: 0;
2859
+ transition: all 0.3s;
2860
+ }
2861
+ .semi-carousel:hover .semi-carousel-arrow-hover div {
2862
+ opacity: 1;
2863
+ }
2864
+
2865
+ @keyframes semi-carousel-content-item-keyframe-slide-in {
2866
+ from {
2867
+ transform: translateX(100%);
2868
+ }
2869
+ to {
2870
+ transform: translateX(0);
2871
+ }
2872
+ }
2873
+ @keyframes semi-carousel-content-item-keyframe-slide-out {
2874
+ from {
2875
+ transform: translateX(0);
2876
+ }
2877
+ to {
2878
+ transform: translateX(-100%);
2879
+ }
2880
+ }
2881
+ @keyframes semi-carousel-content-item-keyframe-slide-in-reverse {
2882
+ from {
2883
+ transform: translateX(-100%);
2884
+ }
2885
+ to {
2886
+ transform: translateX(0);
2887
+ }
2888
+ }
2889
+ @keyframes semi-carousel-content-item-keyframe-slide-out-reverse {
2890
+ from {
2891
+ transform: translateX(0);
2892
+ }
2893
+ to {
2894
+ transform: translateX(100%);
2895
+ }
2896
+ }
2897
+ .semi-rtl .semi-carousel,
2898
+ .semi-portal-rtl .semi-carousel {
2899
+ direction: rtl;
2900
+ }
2901
+ .semi-rtl .semi-carousel-indicator,
2902
+ .semi-portal-rtl .semi-carousel-indicator {
2903
+ display: flex;
2904
+ }
2905
+ .semi-rtl .semi-carousel-indicator-dot .semi-carousel-indicator-item:not(:last-child),
2906
+ .semi-portal-rtl .semi-carousel-indicator-dot .semi-carousel-indicator-item:not(:last-child) {
2907
+ margin-right: 0;
2908
+ margin-left: 8px;
2909
+ }
2910
+ .semi-rtl .semi-carousel-indicator-columnar .semi-carousel-indicator-item:not(:last-child),
2911
+ .semi-portal-rtl .semi-carousel-indicator-columnar .semi-carousel-indicator-item:not(:last-child) {
2912
+ margin-right: 0;
2913
+ margin-left: 4px;
2914
+ }
2915
+ .semi-rtl .semi-carousel-arrow,
2916
+ .semi-portal-rtl .semi-carousel-arrow {
2917
+ flex-direction: row-reverse;
2918
+ }
2919
+ .semi-rtl .semi-carousel-arrow-prev,
2920
+ .semi-portal-rtl .semi-carousel-arrow-prev {
2921
+ left: auto;
2922
+ right: 20px;
2923
+ transform: scaleX(-1) translateY(-50%);
2924
+ z-index: 2;
2925
+ }
2926
+ .semi-rtl .semi-carousel-arrow-next,
2927
+ .semi-portal-rtl .semi-carousel-arrow-next {
2928
+ left: 20px;
2929
+ transform: scaleX(-1) translateY(-50%);
2930
+ right: auto;
2931
+ z-index: 2;
2932
+ }
2933
+
2595
2934
  .semi-cascader {
2596
2935
  box-sizing: border-box;
2597
2936
  border-radius: var(--semi-border-radius-small);
@@ -14622,6 +14961,7 @@ body[theme-mode=dark], body .semi-always-dark {
14622
14961
  }
14623
14962
  .semi-select-open:hover, .semi-select-focus:hover {
14624
14963
  background-color: var(--semi-color-fill-0);
14964
+ border: 1px solid var(--semi-color-focus-border);
14625
14965
  }
14626
14966
  .semi-select-warning {
14627
14967
  background-color: var(--semi-color-warning-light-default);
@@ -16005,6 +16345,9 @@ body[theme-mode=dark], body .semi-always-dark {
16005
16345
  .semi-switch:active .semi-switch-knob {
16006
16346
  width: 24px;
16007
16347
  }
16348
+ .semi-switch-focus {
16349
+ outline: 2px solid var(--semi-color-primary-light-active);
16350
+ }
16008
16351
  .semi-switch-checked {
16009
16352
  background-color: var(--semi-color-success);
16010
16353
  }