@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/cjs/slider/slider.css

@@ -2,8 +2,8 @@
 /* sizing */
 /* spacing */
 .semi-slider {
-  padding: 0 13px;
-  margin: 0;
+  padding: 0px 13px;
+  margin: 0px;
 }
 .semi-slider-wrapper {
   box-sizing: border-box;
@@ -15,8 +15,8 @@
 }
 .semi-slider-rail {
   box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+  margin: 0px;
+  padding: 0px;
   color: rgba(0, 0, 0, 0.65);
   font-size: 14px;
   font-variant: tabular-nums;
@@ -45,11 +45,20 @@
   border-radius: 50%;
   cursor: pointer;
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
-  transform: scale(var(--semi-transform_scale-small));
+  transform: var(--semi-transform_scale-small) translateX(-50%) translateY(0px);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
 }
 .semi-slider-handle:focus-visible {
   outline: 2px solid var(--semi-color-primary-light-active);
 }
+.semi-slider-handle-dot {
+  background: var(--semi-color-primary);
+  width: 4px;
+  height: 4px;
+  border-radius: var(--semi-border-radius-circle);
+}
 .semi-slider-handle:hover {
   background-color: var(--semi-color-white);
 }
@@ -81,6 +90,7 @@
   background-color: var(--semi-color-white);
   border-radius: 50%;
   cursor: pointer;
+  transform: translateX(0px);
 }
 .semi-slider-dot-active {
   background-color: var(--semi-color-white);
@@ -88,7 +98,7 @@
 .semi-slider-marks {
   position: absolute;
   top: 23px;
-  left: 0;
+  left: 0px;
   width: 100%;
   font-size: 14px;
 }
@@ -103,7 +113,7 @@
 .semi-slider-marks-reverse {
   position: absolute;
   top: 23px;
-  left: 0;
+  left: 0px;
   width: 100%;
   font-size: 14px;
 }
@@ -127,10 +137,10 @@
   display: inline-block;
 }
 .semi-slider-boundary-min {
-  left: 0;
+  left: 0px;
 }
 .semi-slider-boundary-max {
-  right: 0;
+  right: 0px;
 }
 .semi-slider-boundary-show {
   visibility: visible;
@@ -156,11 +166,15 @@
 .semi-slider-vertical-wrapper .semi-slider-rail {
   width: 4px;
   height: 100%;
-  top: 0;
+  top: 0px;
 }
 .semi-slider-vertical-wrapper .semi-slider-handle {
-  margin-top: 0;
+  margin-top: 0px;
   margin-left: -10px;
+  transform: var(--semi-transform_scale-small) translateY(-50%) translateX(0px);
+}
+.semi-slider-vertical-wrapper .semi-slider-dot {
+  transform: translateY(0px);
 }
 
 .semi-slider-disabled {

package/lib/cjs/slider/slider.scss

@@ -57,10 +57,20 @@ $module: #{$prefix}-slider;
         border-radius: 50%;
         cursor: pointer;
         transition: background-color $transition_duration_slider_handle-bg $transition_function-slider-handle-bg $transition_delay-slider_handle-bg;
-        transform: scale($transform_scale-slider_handle);
+        transform: $transform_scale-slider_handle translateX(-50%) translateY($spacing-slider_handle-translateY);
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
         &:focus-visible {
             outline: $width-slider_handle-focus solid $color-slider_handle-focus;
         }
+
+        &-dot{
+            background:$color-slider_handle_dot;
+            width:$width-slider_handle_dot;
+            height: $width-slider_handle_dot;
+            border-radius: var(--semi-border-radius-circle);
+        }
     }
 
     &-handle:hover {
@@ -101,6 +111,7 @@ $module: #{$prefix}-slider;
         //border: 1px solid $color-control-bg-default;
         border-radius: 50%;
         cursor: pointer;
+        transform: translateX($spacing-slider_dot-translateX);
     }
 
     &-dot-active {
@@ -196,6 +207,10 @@ $module: #{$prefix}-slider;
     .#{$module}-handle {
         margin-top: $spacing-slider_vertical_handle-marginTop;
         margin-left: $spacing-slider_vertical_handle-marginLeft;
+        transform: $transform_scale-slider_handle translateY(-50%) translateX($spacing-slider_vertical_handle-translateX);
+    }
+    .#{$module}-dot{
+        transform: translateY($spacing-slider_vertical_dot-translateY);
     }
 }
 

package/lib/cjs/slider/variables.scss

@@ -15,29 +15,34 @@ $color-slider_rail: rgba(0, 0, 0, 0.65);
 $color-slider_track-bg-default: var(--semi-color-primary); // 滑动条轨道颜色 - 已填充
 $color-slider_track_disabled-bg: var(--semi-color-primary-disabled); // 禁用滑动条轨道颜色 - 已填充
 $color-slider_handle-focus: var(--semi-color-primary-light-active); // 圆形按钮轮廓 - 聚焦
+$color-slider_handle_dot: var(--semi-color-primary); // 圆形按钮内部圆点颜色
 
 // Spacing
 $spacing-slider-paddingX: 13px; // 滑动条整体水平内边距
-$spacing-slider-paddingY: 0; // 滑动条整体垂直内边距
-$spacing-slider-margin: 0; // 滑动条整体外边距
-$spacing-slider_rail-margin: 0; // 滑动条轨道外边距
-$spacing-slider_rail-padding: 0; // 滑动条轨道内边距
+$spacing-slider-paddingY: 0px; // 滑动条整体垂直内边距
+$spacing-slider-margin: 0px; // 滑动条整体外边距
+$spacing-slider_rail-margin: 0px; // 滑动条轨道外边距
+$spacing-slider_rail-padding: 0px; // 滑动条轨道内边距
 $spacing-slider_rail-top: 14px; // 滑动条未填充轨道顶部距离
 $spacing-slider_handle-marginTop: 4px; // 滑动条圆形按钮顶部外边距
 $spacing-slider_track-top: 14px; // 滑动条已填充轨道顶部距离
 $spacing-slider_tooltip-top: -40px; // 滑动条工具提示顶部距离
 $spacing-slider_dot-top: 14px; // 滑动条圆形刻度点顶部距离
 $spacing-slider_marks-top: 23px; // 滑动条刻度标签顶部距离
-$spacing-slider_marks-left: 0; // 滑动条刻度标签左侧距离
+$spacing-slider_marks-left: 0px; // 滑动条刻度标签左侧距离
 $spacing-slider_boundary-top: 30px;
-$spacing-slider_boundary_min-left: 0;
-$spacing-slider_boundary_max-right: 0;
+$spacing-slider_boundary_min-left: 0px;
+$spacing-slider_boundary_max-right: 0px;
 $spacing-slider_vertical_marks-marginTop: -30px; // 垂直滑动条刻度标签顶部外边距
 $spacing-slider_vertical_marks-marginLeft: 29px; // 垂直滑动条刻度标签左侧外边距
 $spacing-slider_vertical_marks-reverse-marginLeft: -26px; // 垂直滑动条刻度标签左侧外边距（标签在左侧时）
-$spacing-slider_vertical_rail-top: 0; // 垂直滑动条轨道顶部距离
-$spacing-slider_vertical_handle-marginTop: 0; // 垂直滑动条原型按钮顶部外边距
+$spacing-slider_vertical_rail-top: 0px; // 垂直滑动条轨道顶部距离
+$spacing-slider_vertical_handle-marginTop: 0px; // 垂直滑动条原型按钮顶部外边距
 $spacing-slider_vertical_handle-marginLeft: -10px; // 垂直滑动条原型按钮左侧外边距
+$spacing-slider_handle-translateY: 0px; //  水平滑动条原型按钮垂直偏移量
+$spacing-slider_vertical_handle-translateX: 0px; // 垂直滑动条原型按钮水平偏移量
+$spacing-slider_dot-translateX: 0px; //  水平滑动条圆形刻度点水平偏移量
+$spacing-slider_vertical_dot-translateY: 0px; // 垂直滑动条圆形刻度点垂直偏移量
 
 // Radius
 $radius-slider_rail: var(--semi-border-radius-small); // 滚动条未填充轨道圆角
@@ -53,6 +58,7 @@ $height-slider_track: 4px; // 滚动条已填充轨道高度
 $width-slider_dot: 4px; // 滚动条圆形刻度点宽度
 $width-slider_handle_border_disabled: 1px; // 禁用滚动条圆形按钮按下后描边宽度
 $width-slider_handle-focus: 2px; // 圆形按钮轮廓 - 聚焦
+$width-slider_handle_dot: 4px; // 圆形按钮内部圆点宽度
 
 // Font
 $font-slider_rail-fontSize: 14px; // 滚动条轨道文本字号

package/lib/cjs/space/constants.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-space")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-space`
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/spin/constants.js

@@ -4,10 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.numbers = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
-const PREFIX = "".concat(_constants.BASE_CLASS_PREFIX, "-spin");
+const PREFIX = `${_constants.BASE_CLASS_PREFIX}-spin`;
 const cssClasses = {
   PREFIX
 };

package/lib/cjs/spin/foundation.js

@@ -4,33 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class SpinFoundation extends _foundation.default {
-  constructor(adapter) {
-    super(Object.assign(Object.assign({}, SpinFoundation.spinDefaultAdapter), adapter));
-  }
-
   static get spinDefaultAdapter() {
     return {
       getProp: () => undefined,
       setLoading: val => undefined
     };
   }
-
+  constructor(adapter) {
+    super(Object.assign(Object.assign({}, SpinFoundation.spinDefaultAdapter), adapter));
+  }
   updateLoadingIfNeedDelay() {
     const {
       spinning: propsSpinning,
       delay: propsDelay
     } = this._adapter.getProps();
-
     const {
       delay
     } = this._adapter.getStates();
-
     if (delay) {
       const self = this;
       this._timer = setTimeout(() => {
@@ -41,15 +34,12 @@ class SpinFoundation extends _foundation.default {
       }, propsDelay);
     }
   }
-
   destroy() {
     if (this._timer) {
       clearTimeout(this._timer);
       this._timer = null;
     }
   }
-
 }
-
 var _default = SpinFoundation;
 exports.default = _default;

package/lib/cjs/spin/spin.css

@@ -25,12 +25,15 @@
 }
 .semi-spin-wrapper > svg {
   animation: 600ms linear infinite semi-animation-rotate;
+  animation-fill-mode: forwards;
+  vertical-align: top;
   width: 20px;
   height: 20px;
 }
 .semi-spin-animate {
   display: inline-flex;
   animation: 1600ms linear infinite semi-animation-rotate;
+  animation-fill-mode: forwards;
 }
 .semi-spin-children {
   opacity: 0.5;

package/lib/cjs/spin/spin.scss

@@ -28,6 +28,8 @@ $module: #{$prefix}-spin;
 
         & > svg {
             animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
+            animation-fill-mode: forwards;
+            vertical-align: top;
             @include size($width-spin_middle);
         }
     }
@@ -35,6 +37,7 @@ $module: #{$prefix}-spin;
     &-animate {
         display: inline-flex;
         animation: $animation_duration-spin_customChildren-spin linear infinite #{$prefix}-animation-rotate;
+        animation-fill-mode: forwards;
     }
 
     &-children {

package/lib/cjs/steps/bacisSteps.scss

@@ -84,6 +84,10 @@ $basicType: #{$module}-basic;
         display: flex;
         flex-flow: column nowrap;
 
+        .#{$item}-icon {
+            box-sizing: content-box;
+        }
+
         &.#{$module}-small {
             .#{$item} {
                 .#{$item}-content {
@@ -167,13 +171,16 @@ $basicType: #{$module}-basic;
         vertical-align: top;
         overflow: hidden;
         flex: 1;
-        cursor: pointer;
         transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text, //step文字color的transition变化
         background-color $transition_duration-steps_item-backgroundColor $transition_function-steps_item_backgroundColor $transition_delay-steps_item_backgroundColor; //step backgroundColor 的transition变化
         
         transform:scale($transform_scale-step-item);
 
-        &:hover {
+        &-clickable {
+            cursor: pointer;
+        }
+
+        &-hover:hover {
 
             .#{$item}-title {
                 color: $color-steps_item_title-text-hover;
@@ -267,7 +274,7 @@ $basicType: #{$module}-basic;
                 }
             }
 
-            &:hover {
+            &-hover:hover {
                 .#{$item}-left {
 
                     .#{$item}-icon {

package/lib/cjs/steps/constants.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.stepsClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const stepsClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-steps"),
-  ITEM: "".concat(_constants.BASE_CLASS_PREFIX, "-steps-item")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-steps`,
+  ITEM: `${_constants.BASE_CLASS_PREFIX}-steps-item`
 };
 exports.stepsClasses = stepsClasses;

package/lib/cjs/steps/fillSteps.scss

@@ -92,7 +92,7 @@ $module: #{$prefix}-steps;
                 color: $color-steps_success-text-default;
             }
 
-            &:hover {
+            &-hover:hover {
                 background-color: $color-steps-bg-hover;
 
                 .#{$prefix}-icon,
@@ -101,7 +101,7 @@ $module: #{$prefix}-steps;
                 }
             }
 
-            &:active {
+            &-active:active {
                 background-color: $color-steps-bg-active;
 
                 .#{$prefix}-icon,
@@ -118,7 +118,7 @@ $module: #{$prefix}-steps;
                 color: $color-steps_danger-text-default;
             }
 
-            &:hover {
+            &-hover:hover {
                 background: $color-steps-bg-hover;
 
                 .#{$prefix}-icon,
@@ -127,7 +127,7 @@ $module: #{$prefix}-steps;
                 }
             }
 
-            &:active {
+            &-active:active {
                 background-color: $color-steps-bg-active;
 
                 .#{$prefix}-icon,
@@ -144,7 +144,7 @@ $module: #{$prefix}-steps;
                 color: $color-steps_warning-text-default;
             }
 
-            &:hover {
+            &-hover:hover {
                 background: $color-steps-bg-hover;
 
                 .#{$module}-item-title,
@@ -153,7 +153,7 @@ $module: #{$prefix}-steps;
                 }
             }
 
-            &:active {
+            &-active:active {
                 background-color: $color-steps-bg-active;
 
                 .#{$module}-item-title,
@@ -195,4 +195,4 @@ $module: #{$prefix}-steps;
             overflow: hidden;
         }
     }
-}
+}

package/lib/cjs/steps/steps.css

@@ -64,54 +64,54 @@
 .semi-steps .semi-steps-item-finish .semi-steps-item-title {
   color: var(--semi-color-success);
 }
-.semi-steps .semi-steps-item-finish:hover {
+.semi-steps .semi-steps-item-finish-hover:hover {
   background-color: var(--semi-color-fill-0);
 }
-.semi-steps .semi-steps-item-finish:hover .semi-icon,
-.semi-steps .semi-steps-item-finish:hover .semi-steps-item-title {
+.semi-steps .semi-steps-item-finish-hover:hover .semi-icon,
+.semi-steps .semi-steps-item-finish-hover:hover .semi-steps-item-title {
   color: var(--semi-color-success-hover);
 }
-.semi-steps .semi-steps-item-finish:active {
+.semi-steps .semi-steps-item-finish-active:active {
   background-color: var(--semi-color-fill-1);
 }
-.semi-steps .semi-steps-item-finish:active .semi-icon,
-.semi-steps .semi-steps-item-finish:active .semi-steps-item-title {
+.semi-steps .semi-steps-item-finish-active:active .semi-icon,
+.semi-steps .semi-steps-item-finish-active:active .semi-steps-item-title {
   color: var(--semi-color-success-active);
 }
 .semi-steps .semi-steps-item-error .semi-icon,
 .semi-steps .semi-steps-item-error .semi-steps-item-title {
   color: var(--semi-color-danger);
 }
-.semi-steps .semi-steps-item-error:hover {
+.semi-steps .semi-steps-item-error-hover:hover {
   background: var(--semi-color-fill-0);
 }
-.semi-steps .semi-steps-item-error:hover .semi-icon,
-.semi-steps .semi-steps-item-error:hover .semi-steps-item-title {
+.semi-steps .semi-steps-item-error-hover:hover .semi-icon,
+.semi-steps .semi-steps-item-error-hover:hover .semi-steps-item-title {
   color: var(--semi-color-danger-hover);
 }
-.semi-steps .semi-steps-item-error:active {
+.semi-steps .semi-steps-item-error-active:active {
   background-color: var(--semi-color-fill-1);
 }
-.semi-steps .semi-steps-item-error:active .semi-icon,
-.semi-steps .semi-steps-item-error:active .semi-steps-item-title {
+.semi-steps .semi-steps-item-error-active:active .semi-icon,
+.semi-steps .semi-steps-item-error-active:active .semi-steps-item-title {
   color: var(--semi-color-danger-active);
 }
 .semi-steps .semi-steps-item-warning .semi-steps-item-title,
 .semi-steps .semi-steps-item-warning .semi-icon {
   color: var(--semi-color-warning);
 }
-.semi-steps .semi-steps-item-warning:hover {
+.semi-steps .semi-steps-item-warning-hover:hover {
   background: var(--semi-color-fill-0);
 }
-.semi-steps .semi-steps-item-warning:hover .semi-steps-item-title,
-.semi-steps .semi-steps-item-warning:hover .semi-icon {
+.semi-steps .semi-steps-item-warning-hover:hover .semi-steps-item-title,
+.semi-steps .semi-steps-item-warning-hover:hover .semi-icon {
   color: var(--semi-color-warning-hover);
 }
-.semi-steps .semi-steps-item-warning:active {
+.semi-steps .semi-steps-item-warning-active:active {
   background-color: var(--semi-color-fill-1);
 }
-.semi-steps .semi-steps-item-warning:active .semi-steps-item-title,
-.semi-steps .semi-steps-item-warning:active .semi-icon {
+.semi-steps .semi-steps-item-warning-active:active .semi-steps-item-title,
+.semi-steps .semi-steps-item-warning-active:active .semi-icon {
   color: var(--semi-color-warning-active);
 }
 .semi-steps .semi-steps-item-clickable {
@@ -204,6 +204,9 @@
   display: flex;
   flex-flow: column nowrap;
 }
+.semi-steps-basic.semi-steps-vertical .semi-steps-item-icon {
+  box-sizing: content-box;
+}
 .semi-steps-basic.semi-steps-vertical.semi-steps-small .semi-steps-item .semi-steps-item-content {
   min-height: 40px;
 }
@@ -260,14 +263,16 @@
   vertical-align: top;
   overflow: hidden;
   flex: 1;
-  cursor: pointer;
   transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-small));
 }
-.semi-steps-basic .semi-steps-item:hover .semi-steps-item-title {
+.semi-steps-basic .semi-steps-item-clickable {
+  cursor: pointer;
+}
+.semi-steps-basic .semi-steps-item-hover:hover .semi-steps-item-title {
   color: var(--semi-color-focus-border);
 }
-.semi-steps-basic .semi-steps-item:hover .semi-steps-item-description {
+.semi-steps-basic .semi-steps-item-hover:hover .semi-steps-item-description {
   color: var(--semi-color-focus-border);
 }
 .semi-steps-basic .semi-steps-item .semi-steps-item-container {
@@ -330,7 +335,7 @@
   background: var(--semi-color-fill-0);
   color: var(--semi-color-text-2);
 }
-.semi-steps-basic .semi-steps-item-wait:hover .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
+.semi-steps-basic .semi-steps-item-wait-hover:hover .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
   background: var(--semi-color-secondary-light-default);
   color: var(--semi-color-focus-border);
 }

package/lib/cjs/steps/variables.scss

@@ -16,10 +16,10 @@ $color-steps_item_error_left-icon: var(--semi-color-danger); // 错误步骤条
 $color-steps_item_error_left_number-icon: var(--semi-color-primary); // 错误步骤条数字序号文本颜色
 $color-steps_item_finish-icon: var(--semi-color-primary); // 已完成步骤条图标颜色
 $color-steps_item_finish_number-icon: var(--semi-color-white); // 已完成步骤条对勾图标颜色
-$color-steps_item_left_number_icon-bg: var(--semi-color-primary); // 已完成步骤条图标背景颜色
-$color-steps_item_left_number_icon-icon: var(--semi-color-white); // 已完成步骤条图标文字颜色
+$color-steps_item_left_number_icon-bg: var(--semi-color-primary); // 步骤条图标背景颜色
+$color-steps_item_left_number_icon-icon: var(--semi-color-white); // 步骤条图标文字颜色
 $color-steps_item_process_left-icon: var(--semi-color-primary); // 进行中步骤条对勾图标颜色
-$color-steps_item_process_left_number-icon: var(--semi-color-white); // 进行中步骤条对勾图标颜色
+$color-steps_item_process_left_number-icon: var(--semi-color-white); // 进行中步骤条内部图标颜色
 $color-steps_item_title-text-hover: var(--semi-color-focus-border); // 步骤条标题文字悬停颜色
 $color-steps_item_wait_left_icon-icon: var(--semi-color-text-2); // 未到达步骤条图标颜色
 $color-steps_item_wait_left_number_icon-bg-hover: var(--semi-color-secondary-light-default); // 未到达步骤条图标背景颜色 - 悬浮态

package/lib/cjs/switch/constants.js

@@ -4,23 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-switch"),
-  FOCUS: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-focus"),
-  LARGE: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-large"),
-  SMALL: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-small"),
-  CHECKED: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-checked"),
-  DISABLED: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-disabled"),
-  ACTIVE: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-active"),
-  KNOB: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-knob"),
-  NATIVE_CONTROL: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-native-control"),
-  CHECKED_TEXT: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-checked-text"),
-  UNCHECKED_TEXT: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-unchecked-text"),
-  LOADING_SPIN: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-loading-spin"),
-  LOADING: "".concat(_constants.BASE_CLASS_PREFIX, "-switch-loading")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-switch`,
+  FOCUS: `${_constants.BASE_CLASS_PREFIX}-switch-focus`,
+  LARGE: `${_constants.BASE_CLASS_PREFIX}-switch-large`,
+  SMALL: `${_constants.BASE_CLASS_PREFIX}-switch-small`,
+  CHECKED: `${_constants.BASE_CLASS_PREFIX}-switch-checked`,
+  DISABLED: `${_constants.BASE_CLASS_PREFIX}-switch-disabled`,
+  ACTIVE: `${_constants.BASE_CLASS_PREFIX}-switch-active`,
+  KNOB: `${_constants.BASE_CLASS_PREFIX}-switch-knob`,
+  NATIVE_CONTROL: `${_constants.BASE_CLASS_PREFIX}-switch-native-control`,
+  CHECKED_TEXT: `${_constants.BASE_CLASS_PREFIX}-switch-checked-text`,
+  UNCHECKED_TEXT: `${_constants.BASE_CLASS_PREFIX}-switch-unchecked-text`,
+  LOADING_SPIN: `${_constants.BASE_CLASS_PREFIX}-switch-loading-spin`,
+  LOADING: `${_constants.BASE_CLASS_PREFIX}-switch-loading`
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/switch/foundation.js

@@ -4,22 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _warning = _interopRequireDefault(require("../utils/warning"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class SwitchFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-
     this.handleFocusVisible = event => {
       const {
         target
       } = event;
-
       try {
         if (target.matches(':focus-visible')) {
           this._adapter.setFocusVisible(true);
@@ -28,46 +22,32 @@ class SwitchFoundation extends _foundation.default {
         (0, _warning.default)(true, 'Warning: [Semi Switch] The current browser does not support the focus-visible');
       }
     };
-
     this.handleBlur = () => {
       this._adapter.setFocusVisible(false);
     };
   }
-
   init() {
     const {
-      defaultChecked,
-      checked,
       disabled
     } = this.getProps();
-    this.setChecked(defaultChecked || checked);
     this.setDisabled(disabled);
   }
-
   setChecked(checked) {
     this._adapter.setNativeControlChecked(checked);
   }
-
   setDisabled(disabled) {
     this._adapter.setNativeControlDisabled(disabled);
   }
-
   handleChange(checked, e) {
     const propChecked = this.getProps().checked;
     const isControlledComponent = typeof propChecked !== 'undefined';
-
     if (isControlledComponent) {
       this._adapter.notifyChange(checked, e);
     } else {
       this._adapter.setNativeControlChecked(checked);
-
       this._adapter.notifyChange(checked, e);
     }
-  } // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
+  }
   destroy() {}
-
 }
-
 exports.default = SwitchFoundation;