wave-ui 3.28.0 → 4.0.1

package/src/wave-ui/components/w-switch.vue

@@ -37,13 +37,14 @@ component(
     :class="inputClasses")
     .w-switch__track(v-if="$slots.track")
       slot(name="track")
-    .w-switch__thumb(v-if="$slots.thumb || loading")
-      w-progress(
-        v-if="loading"
-        circle
-        color="inherit"
-        v-bind="typeof loading === 'number' && { 'model-value': loading }")
-      slot(v-else name="thumb")
+    .w-switch__thumb
+      .w-switch__thumb-content
+        w-progress(
+          v-if="loading"
+          circle
+          color="inherit"
+          v-bind="typeof loading === 'number' && { 'model-value': loading }")
+        slot(v-else-if="$slots.thumb" name="thumb")
   template(v-if="hasLabel && !labelOnLeft")
     label.w-switch__label.w-switch__label--right.w-form-el-shakable(
       v-if="$slots.default || label"
@@ -73,6 +74,12 @@ export default {
     thin: { type: Boolean },
     noRipple: { type: Boolean },
     loading: { type: [Boolean, Number], default: false },
+    // Sizes.
+    xs: { type: Boolean },
+    sm: { type: Boolean },
+    md: { type: Boolean },
+    lg: { type: Boolean },
+    xl: { type: Boolean },
     dark: { type: Boolean },
     light: { type: Boolean }
     // Props from mixin: id, name, disabled, readonly, required, tabindex, validators.
@@ -103,6 +110,10 @@ export default {
     hasLabel () {
       return this.label || this.$slots.default
     },
+    presetSize () {
+      return (this.xs && 'xs') || (this.sm && 'sm') || (this.md && 'md') || (this.lg && 'lg') || (this.xl && 'xl') || null
+    },
+
     classes () {
       return {
         [`w-switch w-switch--${this.isOn ? 'on' : 'off'}`]: true,
@@ -116,6 +127,7 @@ export default {
         'w-switch--rippled': this.ripple.end,
         'w-switch--dark': this.dark,
         'w-switch--light': this.light,
+        [`size--${this.presetSize}`]: !!this.presetSize,
         // With the inheritAttrs set to false any class on the component would be lost, so add it back.
         [this.$attrs.class]: !!this.$attrs.class
       }
@@ -161,11 +173,11 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 $outline-width: 2px;
 
 .w-switch {
+  // --_size resolves --w-size if set (e.g. via size class or inline style), otherwise the global default.
+  --_size: var(--w-size, var(--w-small-form-el-size));
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
@@ -191,15 +203,15 @@ $outline-width: 2px;
   // Switch.
   &__input {
     position: relative;
-    width: 2 * ($small-form-el-size + $outline-width);
-    height: $small-form-el-size + (2 * $outline-width);
+    width: calc(2 * (var(--_size) + #{$outline-width}));
+    height: calc(var(--_size) + (2 * #{$outline-width}));
     display: flex;
     flex: 0 0 auto; // Prevent stretching width or height.
     align-items: center;
     justify-content: center;
     border: $outline-width solid transparent;
     border-radius: 3em;
-    background-color: $switch-inactive-color;
+    background-color: var(--w-switch-inactive-color);
     cursor: inherit;
     @include default-transition;
 
@@ -215,13 +227,13 @@ $outline-width: 2px;
     .w-switch--thin & {
       box-sizing: border-box;
       border: none;
-      width: 2 * $small-form-el-size;
-      height: math.round(0.7 * $small-form-el-size);
+      width: calc(2 * var(--_size));
+      height: round(nearest, calc(0.7 * var(--_size)), 1px);
     }
-    .w-switch--thin :checked ~ & {background-color: $switch-inactive-color;}
+    .w-switch--thin :checked ~ & {background-color: var(--w-switch-inactive-color);}
 
     // Disabled.
-    .w-switch--disabled & {color: $disabled-color;}
+    .w-switch--disabled & {color: var(--w-disabled-color);}
     .w-switch--disabled :checked ~ & {opacity: 0.5;}
   }
 
@@ -238,76 +250,72 @@ $outline-width: 2px;
   }
   .w-switch--on &__track {left: 0;transform: translateX(0);}
 
-  // Thumb: show either the thumb slot if any, or :after otherwise.
-  &__thumb, &__input:after {
-    content: '';
+  // Thumb.
+  &__thumb {
     position: absolute;
     left: 0;
-    width: $small-form-el-size;
-    height: $small-form-el-size;
+    top: 50%;
+    width: calc(100% - var(--_size));
+    height: var(--_size);
+    transform: translateX(0) translateY(-50%);
+    @include default-transition;
+  }
+  .w-switch--on &__thumb {transform: translateX(100%) translateY(-50%);}
+
+  &__thumb-content {
+    position: relative;
+    isolation: isolate;
+    width: var(--_size);
+    height: var(--_size);
     display: flex;
     align-items: center;
     justify-content: center; // Center any content that could be put via slots.
-    background-color: $switch-thumb-color;
+    background-color: var(--w-switch-thumb-color);
     border-radius: 100%;
-    @include default-transition;
 
     .w-switch[class^="bdrs"] &, .w-switch[class*=" bdrs"] & {border-radius: inherit;}
 
-    .w-switch--on & {left: 100%;transform: translateX(-100%);}
-
     .w-switch--thin & {
-      top: - math.round(0.15 * $small-form-el-size);
       transform: scale(1.1);
-      box-shadow: $box-shadow;
+      box-shadow: var(--w-box-shadow);
     }
     .w-switch--thin.w-switch--on & {
-      transform: translateX(-100%) scale(1.1);
       background-color: currentColor;
     }
   }
   &--loading .w-progress {padding: 1px;}
   &--loading.w-switch--thin.w-switch--on .w-progress {color: #fff;}
-  &--loading &__input:after, &--custom-thumb &__input:after {display: none;}
 
   // The focus outline & ripple on switch activation.
-  &__input:before {
+  &__thumb-content:before {
     content: '';
     position: absolute;
-    left: 0;
-    top: 0;
-    width: $small-form-el-size;
-    aspect-ratio: 1;
+    inset: 0;
     background-color: currentColor;
     border-radius: 100%;
     opacity: 0;
     pointer-events: none;
+    z-index: -1;
     transition: 0.25s ease-in-out;
 
-    :checked ~ & {transform: translateX(-100%) scale(0);left: 100%;}
-
     .w-switch[class^="bdrs"] &, .w-switch[class*=" bdrs"] & {border-radius: inherit;}
-    .w-switch--thin & {top: - math.round(0.15 * $small-form-el-size);}
   }
 
-  &--ripple &__input:before {
+  &--ripple &__thumb-content:before {
     background-color: transparent;
     animation: w-switch-ripple 0.55s 0.15s ease;
   }
 
-  :focus ~ &__input:before {
-    transform: translateX(0) scale(1.8);
+  :focus ~ &__input &__thumb-content:before {
+    transform: scale(1.8);
     opacity: 0.2;
   }
-  :focus:checked ~ &__input:before {
-    transform: translateX(-100%) scale(1.8);
-  }
 
   // After ripple reset to default state, then remove the class via js and the
   // `:focus ~ &__input:before` will re-transition to normal focused outline.
-  &--rippled &__input:before {
+  &--rippled &__thumb-content:before {
     transition: none;
-    transform: translateX(-100%) scale(0);
+    transform: scale(0);
     opacity: 0;
   }
 
@@ -319,10 +327,26 @@ $outline-width: 2px;
 
     .w-switch--disabled & {opacity: 0.5;}
   }
+
+  // Sizes.
+  // ------------------------------------------------------
+  &.size--xs {--w-size: round(nearest, calc(0.86 * var(--w-base-font-size)), 2px);}
+  &.size--sm {--w-size: round(nearest, calc(1.14 * var(--w-base-font-size)), 2px);}
+  &.size--lg {--w-size: round(nearest, calc(1.43 * var(--w-base-font-size)), 2px);}
+  &.size--xl {--w-size: round(nearest, calc(1.71 * var(--w-base-font-size)), 2px);}
 }
 
 @keyframes w-switch-ripple {
-  0% {opacity: 0.8;transform: translateX(-100%) scale(1);background-color: currentColor;} // Start with visible ripple.
-  100% {opacity: 0;transform: translateX(-100%) scale(2.8);} // Propagate ripple to max radius and fade out.
+  // Start with visible ripple.
+  0% {
+    opacity: 0.8;
+    transform: scale(1);
+    background-color: currentColor;
+  }
+  // Propagate ripple to max radius and fade out.
+  100% {
+    opacity: 0;
+    transform: scale(2.8);
+  }
 }
 </style>

package/src/wave-ui/components/w-table.vue

@@ -19,6 +19,7 @@
             v-for="(header, i) in headers"
             :key="i"
             @click="!colResizing.dragging && header.sortable !== false && sortTable(header)"
+            @pointerdown="onHeaderPointerDown($event, header)"
             :class="headerClasses(header)")
             w-icon.w-table__header-sort(
               v-if="header.sortable !== false && header.align === 'right'"
@@ -73,13 +74,14 @@
             tr.w-table__row(
               v-else
               @click="doSelectRow(item, i)"
+              @pointerdown="onRowPointerDown"
               :class="{ 'w-table__row--selected': selectedRowsByUid[item._uid] !== undefined, 'w-table__row--expanded': expandedRowsByUid[item._uid] !== undefined, [item.class]: item.class }")
               template(v-for="(header, j) in headers")
                 td.w-table__cell(
                   v-if="$slots[`item-cell.${header.key}`] || $slots[`item-cell.${j + 1}`] || $slots['item-cell']"
                   :key="`${j}-a`"
                   :data-label="header.label"
-                  :class="{ [`text-${header.align || 'left'}`]: true, 'w-table__cell--sticky': header.sticky }")
+                  :class="cellClasses(header)")
                   slot(
                     v-if="$slots[`item-cell.${header.key}`]"
                     :name="`item-cell.${header.key}`"
@@ -109,7 +111,7 @@
                   v-else
                   :key="`${j}-b`"
                   :data-label="header.label"
-                  :class="{ [`text-${header.align || 'left'}`]: true, 'w-table__cell--sticky': header.sticky }")
+                  :class="cellClasses(header)")
                   div(v-html="item[header.key] || ''")
                   span.w-table__col-resizer(
                     v-if="j < headers.length - 1 && resizableColumns"
@@ -194,6 +196,7 @@
  * @todo: (Column Resizing) Recalc. on browser resize.
  */
 
+import RippleMixin from '../mixins/ripple'
 import { consoleError } from '../utils/console'
 
 // When column resizing is on, this is the minimum cell width that we can resize to.
@@ -201,6 +204,9 @@ const minColumnWidth = 15
 
 export default {
   name: 'w-table',
+
+  mixins: [RippleMixin],
+
   props: {
     items: { type: Array, required: true },
     headers: { type: Array, required: true },
@@ -383,6 +389,10 @@ export default {
       return this.headers.find(header => header.sticky)
     },
 
+    hasClickableRows () {
+      return this.expandableRows === '' || !!this.expandableRows || this.selectableRows === '' || !!this.selectableRows
+    },
+
     // Faster lookup than array.includes(uid) and also cached.
     selectedRowsByUid () {
       return this.selectedRowsInternal.reduce((obj, uid) => (obj[uid] = true) && obj, {})
@@ -397,6 +407,7 @@ export default {
   methods: {
     headerClasses (header) {
       return {
+        'w-ripple': this.rippleActive && header.sortable !== false,
         'w-table__header--sortable': header.sortable !== false, // Can also be falsy with `0`.
         'w-table__header--sticky': header.sticky,
         'w-table__header--resizable': !!this.resizableColumns,
@@ -404,6 +415,14 @@ export default {
       }
     },
 
+    cellClasses (header) {
+      return {
+        'w-ripple': this.rippleActive && this.hasClickableRows,
+        [`text-${header.align || 'left'}`]: true,
+        'w-table__cell--sticky': header.sticky
+      }
+    },
+
     headerSortClasses (header) {
       const headerSorting = this.activeSortingKeys[header.key]
       return [
@@ -426,6 +445,20 @@ export default {
       else if (typeof this.fetch === 'function') await this.callApiFetch()
     },
 
+    onHeaderPointerDown (e, header) {
+      if (header.sortable === false || e.target.closest?.('.w-table__col-resizer')) return
+      this.onRipple(e)
+    },
+
+    onRowPointerDown (e) {
+      if (!this.hasClickableRows || e.target.closest?.('.w-table__col-resizer')) return
+      const row = e.currentTarget
+      const rowRect = row.getBoundingClientRect()
+      row.querySelectorAll(':scope > .w-table__cell').forEach(cell => {
+        this.onRipple(e, cell, { sizeRect: rowRect })
+      })
+    },
+
     doSelectRow (item, index) {
       const expandable = this.expandableRows === '' ? true : this.expandableRows
       const selectable = this.selectableRows === '' ? true : this.selectableRows
@@ -730,8 +763,8 @@ $tr-border-top: 1px;
   position: relative;
   display: flex;
   flex-direction: column;
-  border-radius: $border-radius;
-  border: $border;
+  border-radius: var(--w-border-radius);
+  border: var(--w-border);
 
   &--loading {overflow: hidden;}
 
@@ -767,7 +800,7 @@ $tr-border-top: 1px;
   // ------------------------------------------------------
   thead {position: relative;}
 
-  &__header {padding: $base-increment;}
+  &__header {padding: var(--w-base-increment);}
   &__header--resizable {
     overflow: hidden;
     white-space: nowrap;
@@ -777,7 +810,7 @@ $tr-border-top: 1px;
   &--fixed-header thead {
     position: sticky;
     top: 0;
-    background-color: $base-bg-color;
+    background-color: var(--w-base-bg-color);
     z-index: 1; // For sticky columns to go under.
 
     &:after {
@@ -786,7 +819,7 @@ $tr-border-top: 1px;
       bottom: 0;
       left: 0;
       right: 0;
-      border-bottom: $border;
+      border-bottom: var(--w-border);
     }
   }
 
@@ -799,7 +832,7 @@ $tr-border-top: 1px;
       position: absolute;
       inset: 0;
       z-index: -1;
-      background-color: $base-bg-color;
+      background-color: var(--w-base-bg-color);
     }
   }
 
@@ -831,7 +864,7 @@ $tr-border-top: 1px;
 
     &:before {
       content: '';
-      border-right: $border;
+      border-right: var(--w-border);
       position: absolute;
       left: 50%;
       top: 0;
@@ -860,19 +893,19 @@ $tr-border-top: 1px;
     justify-content: center;
     height: 100%;
     width: 100%;
-    padding-top: 2 * $base-increment;
-    padding-bottom: 2 * $base-increment;
+    padding-top: calc(var(--w-base-increment) * 2);
+    padding-bottom: calc(var(--w-base-increment) * 2);
   }
 
   // Table body.
   // ------------------------------------------------------
-  tbody {transition: opacity $transition-duration;}
+  tbody {transition: opacity var(--w-transition-duration);}
   &--loading-in-header tbody {opacity: 0.6;}
 
   tbody tr {border-top: $tr-border-top solid color-mix(in srgb, var(--w-base-color) 6%, transparent);}
   // Don't apply built-in bg color if a bg color is already found on a tr.
-  tbody tr:nth-child(odd):not(.no-data):not([class*="--bg"]) {background-color: $table-tr-odd-color;}
-  tbody .w-table__row:hover:not(.no-data):not([class*="--bg"]) {background-color: $table-tr-hover-color;}
+  tbody tr:nth-child(odd):not(.no-data):not([class*="--bg"]) {background-color: var(--w-table-tr-odd-color);}
+  tbody .w-table__row:hover:not(.no-data):not([class*="--bg"]) {background-color: var(--w-table-tr-hover-color);}
 
   &__row--selected td {position: relative;}
   &__row--selected td:before {
@@ -884,9 +917,9 @@ $tr-border-top: 1px;
     pointer-events: none;
   }
 
-  &__cell {padding: math.round(divide($base-increment, 2)) $base-increment;}
-  &__header:first-child, &__cell:first-child {padding-left: 2 * $base-increment;}
-  &__header:last-child, &__cell:last-child {padding-right: 2 * $base-increment;}
+  &__cell {padding: calc(var(--w-base-increment) / 2) var(--w-base-increment);}
+  &__header:first-child, &__cell:first-child {padding-left: calc(var(--w-base-increment) * 2);}
+  &__header:last-child, &__cell:last-child {padding-right: calc(var(--w-base-increment) * 2);}
 
   &--resizable-cols &__cell {
     position: relative;
@@ -911,14 +944,14 @@ $tr-border-top: 1px;
       bottom: 0;
       z-index: -1;
     }
-    &:before {background-color: $base-bg-color;}
+    &:before {background-color: var(--w-base-bg-color);}
   }
-  tr:nth-child(odd) &__cell--sticky:after {background-color: $table-tr-odd-color;}
-  tr:hover &__cell--sticky:after {background-color: $table-tr-hover-color;}
+  tr:nth-child(odd) &__cell--sticky:after {background-color: var(--w-table-tr-odd-color);}
+  tr:hover &__cell--sticky:after {background-color: var(--w-table-tr-hover-color);}
 
   .no-data &__cell {
     background-color: rgba(255, 255, 255, 0.2);
-    padding: (2 * $base-increment) $base-increment;
+    padding: calc(var(--w-base-increment) * 2) var(--w-base-increment);
   }
 
   // Table footer.
@@ -926,7 +959,7 @@ $tr-border-top: 1px;
   &--fixed-footer tfoot {
     position: sticky;
     bottom: -1px;
-    background-color: $base-bg-color;
+    background-color: var(--w-base-bg-color);
     z-index: 1; // For sticky columns to go under.
 
     &:after {
@@ -935,13 +968,13 @@ $tr-border-top: 1px;
       top: 0;
       left: 0;
       right: 0;
-      border-top: $border;
+      border-top: var(--w-border);
     }
   }
 
   &__footer &__cell {
-    padding-top: $base-increment;
-    padding-bottom: $base-increment;
+    padding-top: var(--w-base-increment);
+    padding-bottom: var(--w-base-increment);
   }
 
   // Pagination.
@@ -950,8 +983,8 @@ $tr-border-top: 1px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 2 * $base-increment;
-    padding: $base-increment 2 * $base-increment;
+    gap: calc(var(--w-base-increment) * 2);
+    padding: var(--w-base-increment) calc(var(--w-base-increment) * 2);
 
     .w-pagination__items-per-page {
       flex: 0 0 auto;
@@ -963,7 +996,7 @@ $tr-border-top: 1px;
       padding-left: 1px; // Prevent overflow causing scrollbar.
       padding-right: 1px;
       max-height: 4.5em;
-      gap: 0.5 * $base-increment;
+      gap: calc(var(--w-base-increment) * 0.5);
       overflow-y: hidden;
     }
 
@@ -976,20 +1009,20 @@ $tr-border-top: 1px;
       background-color: color-mix(in srgb, var(--w-base-bg-color) 40%, transparent);
 
       &:hover:before {
-        background-color: $primary;
+        background-color: var(--w-primary-color);
         opacity: 0.1;
       }
       &:active:before {
-        background-color: $primary;
+        background-color: var(--w-primary-color);
         opacity: 0.2;
       }
 
       &--active {
         font-weight: bold;
-        color: $primary;
+        color: var(--w-primary-color);
 
         &:before {
-          background-color: $primary;
+          background-color: var(--w-primary-color);
           opacity: 0.1;
         }
       }
@@ -1016,14 +1049,14 @@ $tr-border-top: 1px;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    padding-top: $base-increment;
-    padding-bottom: $base-increment;
+    padding-top: var(--w-base-increment);
+    padding-bottom: var(--w-base-increment);
   }
 
   .w-table__cell {
     display: flex;
-    padding-left: 2 * $base-increment;
-    padding-right: 2 * $base-increment;
+    padding-left: calc(var(--w-base-increment) * 2);
+    padding-right: calc(var(--w-base-increment) * 2);
   }
 
   tr:not(.no-data) .text-center,

package/src/wave-ui/components/w-tabs/index.vue

@@ -361,12 +361,10 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 .w-tabs {
   z-index: 1;
-  border-radius: $border-radius;
-  border: $border;
+  border-radius: var(--w-border-radius);
+  border: var(--w-border);
   overflow: hidden;
 
   @include themeable;
@@ -382,13 +380,13 @@ export default {
 
     &--center {justify-content: center;}
     &--right {justify-content: flex-end;}
-    .w-tabs--pill-slider & {padding-left: $base-increment;}
+    .w-tabs--pill-slider & {padding-left: var(--w-base-increment);}
 
     .w-tabs--card &:after {
       content: '';
       display: flex;
       flex-grow: 1;
-      border-bottom: $border;
+      border-bottom: var(--w-border);
       align-self: flex-end;
     }
   }
@@ -399,18 +397,18 @@ export default {
     position: relative;
     display: flex;
     align-items: center;
-    padding: (2 * $base-increment) (3 * $base-increment);
+    padding: calc(var(--w-base-increment) * 2) calc(var(--w-base-increment) * 3);
     justify-content: center;
-    font-size: math.round(1.2 * $base-font-size);
-    transition: $transition-duration ease-in-out, flex-grow 0s, flex 0s; // `flex` for Safari.
+    font-size: round(nearest, calc(1.2 * var(--w-base-font-size)), 1px);
+    transition: var(--w-transition-duration) ease-in-out, flex-grow 0s, flex 0s; // `flex` for Safari.
     user-select: none;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
 
     .w-tabs--fill-bar & {flex-grow: 1;flex-basis: 0;}
     .w-tabs--card & {
-      border: $border;
-      border-radius: $border-radius $border-radius 0 0;
+      border: var(--w-border);
+      border-radius: var(--w-border-radius) var(--w-border-radius) 0 0;
       margin-right: -1px;
     }
     .w-tabs--card &--active {border-bottom-color: transparent;}
@@ -425,13 +423,12 @@ export default {
       content: '';
       position: absolute;
       inset: 0;
-      background-color: currentColor;
-      opacity: 0;
-      transition: $fast-transition-duration;
+      background-color: transparent;
+      transition: background-color var(--w-transition-duration-fast);
     }
 
-    &--active:before, &:focus:before, &:hover:before {opacity: 0.05;}
-    &:active:before {opacity: 0.08;}
+    &--active:before, &:focus:before, &:hover:before {background-color: color-mix(in srgb, currentColor 5%, transparent);}
+    &:active:before {background-color: color-mix(in srgb, currentColor 8%, transparent);}
     &--disabled:before {display: none;}
   }
   &--pill-slider &__bar-item:before {display: none;}
@@ -455,7 +452,7 @@ export default {
     bottom: 0;
     height: 2px;
     background-color: currentColor;
-    transition: $transition-duration ease-in-out;
+    transition: var(--w-transition-duration) ease-in-out;
   }
   &--pill-slider &__slider {
     opacity: 0.1;
@@ -473,12 +470,12 @@ export default {
     flex-grow: 1;
 
     .w-tabs--card & {
-      border: $border;
+      border: var(--w-border);
       border-top: none;
-      border-radius: 0 0 $border-radius $border-radius;
+      border-radius: 0 0 var(--w-border-radius) var(--w-border-radius);
     }
   }
-  &__content {padding: 3 * $base-increment;}
+  &__content {padding: calc(var(--w-base-increment) * 3);}
 }
 
 .w-tabs-slide-left-leave-active,
@@ -490,8 +487,8 @@ export default {
   overflow: hidden;
 }
 
-.w-tabs-slide-left-enter-active {animation: w-tabs-slide-left-enter $transition-duration + 0.15s;}
-.w-tabs-slide-left-leave-active {animation: w-tabs-slide-left-leave $transition-duration + 0.15s;}
+.w-tabs-slide-left-enter-active {animation: w-tabs-slide-left-enter calc(var(--w-transition-duration) + 0.15s);}
+.w-tabs-slide-left-leave-active {animation: w-tabs-slide-left-leave calc(var(--w-transition-duration) + 0.15s);}
 @keyframes w-tabs-slide-left-enter {
   0% {transform: translateX(100%);}
   100% {transform: translateX(0);}
@@ -501,8 +498,8 @@ export default {
   100% {transform: translateX(-100%);}
 }
 
-.w-tabs-slide-right-enter-active {animation: w-tabs-slide-right-enter $transition-duration + 0.15s;}
-.w-tabs-slide-right-leave-active {animation: w-tabs-slide-right-leave $transition-duration + 0.15s;}
+.w-tabs-slide-right-enter-active {animation: w-tabs-slide-right-enter calc(var(--w-transition-duration) + 0.15s);}
+.w-tabs-slide-right-leave-active {animation: w-tabs-slide-right-leave calc(var(--w-transition-duration) + 0.15s);}
 @keyframes w-tabs-slide-right-enter {
   0% {transform: translateX(-100%);}
   100% {transform: translateX(0);}