@element-plus/nightly 0.0.20260202 → 0.0.20260204

package/theme-chalk/src/button.scss

@@ -149,6 +149,23 @@ $button-icon-span-gap: map.merge(
   @include when(round) {
     border-radius: getCssVar('border-radius', 'round');
   }
+
+  @include when(dashed) {
+    border-style: dashed;
+    @include css-var-from-global(
+      ('button', 'hover', 'text-color'),
+      ('color', 'primary')
+    );
+    @include css-var-from-global(
+      ('button', 'hover', 'bg-color'),
+      ('fill-color', 'blank')
+    );
+    @include css-var-from-global(
+      ('button', 'hover', 'border-color'),
+      ('color', 'primary')
+    );
+  }
+
   @include when(circle) {
     width: map.get($input-height, 'default');
     border-radius: 50%;

package/theme-chalk/src/carousel.scss

@@ -16,6 +16,17 @@
     overflow: hidden;
   }
 
+  // When vertical with outside indicators, use flex layout for horizontal arrangement
+  @include when(vertical-outside) {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    @include e(container) {
+      flex: 1;
+    }
+  }
+
   @include e(container) {
     position: relative;
     height: 300px;
@@ -79,10 +90,6 @@
     }
 
     @include m(outside) {
-      bottom: calc(
-        getCssVar('carousel-indicator-height') +
-          getCssVar('carousel-indicator-padding-vertical') * 2
-      );
       text-align: center;
       position: static;
       transform: none;
@@ -102,14 +109,7 @@
     }
 
     @include m(labels) {
-      left: 0;
-      right: 0;
-      transform: none;
-      text-align: center;
-
       .#{$namespace}-carousel__button {
-        height: auto;
-        width: auto;
         padding: 2px 18px;
         font-size: 12px;
         color: $color-black;
@@ -164,6 +164,13 @@
     margin: 0;
     cursor: pointer;
     transition: getCssVar('transition-duration');
+
+    // To prevent styles from being overridden
+    // When labels exist, use auto size so button content can center correctly
+    .#{$namespace}-carousel__indicators--labels & {
+      height: auto;
+      width: auto;
+    }
   }
 }
 

package/theme-chalk/src/mixins/_button.scss

@@ -60,6 +60,77 @@
   }
 }
 
+@mixin button-dashed($type) {
+  $button-color-types: (
+    '': (
+      'text-color': (
+        'color',
+        $type,
+      ),
+      'bg-color': (
+        'color',
+        $type,
+        'light-9',
+      ),
+      'border-color': (
+        'color',
+        $type,
+        'light-5',
+      ),
+    ),
+    'hover': (
+      'text-color': (
+        'color',
+        $type,
+      ),
+      'bg-color': (
+        'color',
+        $type,
+        'light-9',
+      ),
+      'border-color': (
+        'color',
+        $type,
+        'light-3',
+      ),
+    ),
+    'active': (
+      'text-color': (
+        'color',
+        $type,
+        'dark-2',
+      ),
+      'bg-color': (
+        'color',
+        $type,
+        'light-9',
+      ),
+      'border-color': (
+        'color',
+        $type,
+        'dark-2',
+      ),
+    ),
+  );
+
+  @each $type, $typeMap in $button-color-types {
+    @each $typeColor, $list in $typeMap {
+      @include css-var-from-global(('button', $type, $typeColor), $list);
+    }
+  }
+
+  &.is-disabled {
+    &,
+    &:hover,
+    &:focus,
+    &:active {
+      color: getCssVar('color', $type, 'light-5');
+      background-color: getCssVar('color', $type, 'light-9');
+      border-color: getCssVar('color', $type, 'light-8');
+    }
+  }
+}
+
 @mixin button-variant($type) {
   $button-color-types: (
     '': (
@@ -148,6 +219,10 @@
   &.is-link {
     @include button-plain($type);
   }
+
+  &.is-dashed {
+    @include button-dashed($type);
+  }
 }
 
 @mixin button-size(