wave-ui 1.52.0 → 1.53.0

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

@@ -13,15 +13,10 @@ component(
     //- Left label.
     template(v-if="labelPosition === 'left'")
       label.w-input__label.w-input__label--left.w-form-el-shakable(
-        v-if="$slots.default"
+        v-if="$slots.default || label"
         :for="`w-input--${_uid}`"
-        :class="validationClasses")
-        slot
-      label.w-input__label.w-input__label--left.w-form-el-shakable(
-        v-else-if="label"
-        :for="`w-input--${_uid}`"
-        :class="validationClasses"
-        v-html="label")
+        :class="labelClasses")
+        slot {{ label }}
 
     //- Input wrapper.
     .w-input__input-wrap(:class="inputWrapClasses")
@@ -81,15 +76,10 @@ component(
 
       template(v-if="labelPosition === 'inside' && showLabelInside")
         label.w-input__label.w-input__label--inside.w-form-el-shakable(
-          v-if="$slots.default"
-          :for="`w-input--${_uid}`"
-          :class="validationClasses")
-          slot
-        label.w-input__label.w-input__label--inside.w-form-el-shakable(
-          v-else-if="label"
+          v-if="$slots.default || label"
           :for="`w-input--${_uid}`"
-          v-html="label"
-          :class="validationClasses")
+          :class="labelClasses")
+          slot {{ label }}
       w-icon.w-input__icon.w-input__icon--inner-right(
         v-if="innerIconRight"
         tag="label"
@@ -117,15 +107,10 @@ component(
     //- Right label.
     template(v-if="labelPosition === 'right'")
       label.w-input__label.w-input__label--right.w-form-el-shakable(
-        v-if="$slots.default"
-        :for="`w-input--${_uid}`"
-        :class="validationClasses")
-        slot
-      label.w-input__label.w-input__label--right.w-form-el-shakable(
-        v-else-if="label"
+        v-if="$slots.default || label"
         :for="`w-input--${_uid}`"
-        :class="validationClasses"
-        v-html="label")
+        :class="labelClasses")
+        slot {{ label }}
 </template>
 
 <script>
@@ -146,12 +131,12 @@ export default {
     labelPosition: { type: String, default: 'inside' },
     innerIconLeft: { type: String },
     innerIconRight: { type: String },
-    // When label is inside, allows to move the label above on focus or when filled.
-    staticLabel: { type: Boolean },
+    staticLabel: { type: Boolean }, // When label is inside, fix the label above.
     placeholder: { type: String },
     color: { type: String, default: 'primary' },
-    progressColor: { type: String },
     bgColor: { type: String },
+    labelColor: { type: String, default: 'primary' },
+    progressColor: { type: String },
     minlength: { type: [Number, String] },
     maxlength: { type: [Number, String] },
     step: { type: [Number, String] },
@@ -237,7 +222,7 @@ export default {
     },
 
     overallFilesProgress () {
-      const progress = this.inputFiles.reduce((total, file) => total + file.progress, 0)
+      const progress = +this.inputFiles.reduce((total, file) => total + file.progress, 0)
       const total = progress / this.inputFiles.length
       this.$emit('update:overallProgress', this.inputFiles.length ? total : undefined)
 
@@ -269,15 +254,9 @@ export default {
       }
     },
 
-    validationClasses () {
-      return this.isFocused && {
-        [this.valid === false ? 'error' : this.color]: this.color || this.valid === false
-      }
-    },
-
     inputWrapClasses () {
       return {
-        [this.valid === false ? 'error' : this.color]: this.color || this.valid === false,
+        [this.valid === false ? this.validationColor : this.color]: this.color || this.valid === false,
         [`${this.bgColor}--bg`]: this.bgColor,
         'w-input__input-wrap--file': this.type === 'file',
         'w-input__input-wrap--round': this.round,
@@ -635,8 +614,6 @@ $inactive-color: #777;
     .w-input--filled.w-input--floating-label.w-input--inner-icon-left & {left: 0;}
     // Chrome & Safari - Must remain in a separated rule as Firefox discard the whole rule seeing -webkit-.
     .w-input--floating-label.w-input--inner-icon-left .w-input__input:-webkit-autofill & {left: 0;}
-
-    .w-input--focused & {color: currentColor;}
   }
 }
 </style>

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

@@ -88,6 +88,14 @@ export default {
     // alignRight, noPosition, zIndex, activator.
   },
 
+  provide () {
+    return {
+      // If a detachable is used inside a w-menu without an appendTo, default to the menu element
+      // instead of the w-app.
+      detachableDefaultRoot: () => this.$refs.detachable?.$el || this.$refs.detachable || null
+    }
+  },
+
   emits: ['input', 'update:modelValue', 'open', 'close'],
 
   data: () => ({

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

@@ -1,7 +1,9 @@
 <template lang="pug">
 transition(:name="transitionName" appear)
   .w-notification(v-if="show" :class="classes" :style="styles")
-    w-alert.white--bg(v-bind="alertProps" @input="$emit('update:modelValue', false);$emit('input', false)")
+    w-alert.white--bg(
+      v-bind="alertProps"
+      @input="$emit('update:modelValue', false);$emit('input', false)")
       slot
 </template>
 

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

@@ -1,9 +1,9 @@
 <template lang="pug">
-transition(name="fade" appear @after-leave="onClosed")
+transition(name="fade" appear @after-leave="onClose")
   .w-overlay(
     v-if="showOverlay"
-    v-show="value"
-    :style="(value && styles) || null"
+    ref="overlay"
+    :style="styles || null"
     @keydown.escape.stop="onClick"
     @click="onClick"
     v-focus
@@ -25,7 +25,15 @@ export default {
     persistentNoAnimation: { type: Boolean }
   },
 
-  emits: ['input', 'update:modelValue', 'click', 'close', 'closed'],
+  provide () {
+    return {
+      // If a detachable is used inside a w-overlay without an appendTo, default to the overlay element
+      // instead of the w-app.
+      detachableDefaultRoot: () => this.$refs.overlay || null
+    }
+  },
+
+  emits: ['input', 'update:modelValue', 'click', 'before-close', 'close'],
 
   data: () => ({
     persistentAnimate: false,
@@ -60,21 +68,19 @@ export default {
         setTimeout(() => (this.persistentAnimate = false), 150) // Must match CSS animation duration.
       }
       else if (!this.persistent) {
-        this.$emit('update:modelValue', false)
-        this.$emit('input', false)
-        this.$emit('close')
+        this.showOverlay = false
+        this.$emit('before-close')
       }
 
       this.$emit('click', e)
     },
 
-    // Wait until the end of the closing transition to unmount the components it contains.
-    // This way, in case of w-select in w-dialog, the w-select will only remove its activator
-    // element from the DOM once the dialog is completely closed.
-    // https://github.com/antoniandre/wave-ui/issues/82
-    onClosed () {
-      this.showOverlay = false
-      this.$emit('closed')
+    // Wait until the end of the closing transition (v-show) to completely unmount (v-if).
+    // The onClose method is called twice from the transition: once for the v-show, and once for the v-if.
+    onClose () {
+      this.$emit('update:modelValue', false)
+      this.$emit('input', false)
+      this.$emit('close') // Only emit once.
     }
   },
 
@@ -84,7 +90,7 @@ export default {
 
   watch: {
     value (bool) {
-      if (bool) this.showOverlay = true
+      if (this.showOverlay !== bool) this.showOverlay = bool
     }
   }
 }

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

@@ -20,16 +20,20 @@ component(
     :aria-checked="inputValue || 'false'"
     role="radio")
   template(v-if="hasLabel && labelOnLeft")
-    label.w-radio__label.w-form-el-shakable.pr2(v-if="$slots.default" :for="`w-radio--${_uid}`")
-      slot
-    label.w-radio__label.w-form-el-shakable.pr2(v-else-if="label" :for="`w-radio--${_uid}`" v-html="label")
+    label.w-radio__label.w-form-el-shakable.pr2(
+      v-if="$slots.default || label"
+      :for="`w-radio--${_uid}`"
+      :class="labelClasses")
+      slot {{ label }}
   .w-radio__input(
     @click="$refs.input.focus();$refs.input.click()"
     :class="this.color")
   template(v-if="hasLabel && !labelOnLeft")
-    label.w-radio__label.w-form-el-shakable.pl2(v-if="$slots.default" :for="`w-radio--${_uid}`")
-      slot
-    label.w-radio__label.w-form-el-shakable.pl2(v-else-if="label" :for="`w-radio--${_uid}`" v-html="label")
+    label.w-radio__label.w-form-el-shakable.pl2(
+      v-if="$slots.default || label"
+      :for="`w-radio--${_uid}`"
+      :class="labelClasses")
+      slot {{ label }}
 </template>
 
 <script>
@@ -48,6 +52,7 @@ export default {
     label: { type: String },
     labelOnLeft: { type: Boolean },
     color: { type: String, default: 'primary' },
+    labelColor: { type: String, default: 'primary' },
     noRipple: { type: Boolean }
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.

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

@@ -15,26 +15,16 @@ component(
     @focus="$emit('focus', $event)"
     :name="inputName"
     :value="item.value === value"
-    :label="item.label"
-    :label-on-left="labelOnLeft"
-    :color="item.color"
+    v-bind="{ label: item.label, color: item.color, labelOnLeft, labelColor }"
     :disabled="isDisabled || null"
     :readonly="isReadonly || null"
     :class="{ mt1: !inline && i }")
     slot(
-      v-if="$scopedSlots[`item.${i + 1}`]"
-      :name="`item.${i + 1}`"
+      v-if="$slots[`item.${i + 1}`] || $slots.item"
+      :name="$slots[`item.${i + 1}`] ? `item.${i + 1}` : 'item'"
       :item="getOriginalItem(item)"
       :index="i + 1"
-      :checked="item.value === value"
-      v-html="item.label")
-    slot(
-      v-else-if="$scopedSlots.item"
-      name="item"
-      :item="getOriginalItem(item)"
-      :index="i + 1"
-      :checked="item.value === value"
-      v-html="item.label")
+      :checked="item.value === value")
 </template>
 
 <script>
@@ -52,7 +42,8 @@ export default {
     itemValueKey: { type: String, default: 'value' },
     itemColorKey: { type: String, default: 'color' }, // Support a different color per item.
     inline: { type: Boolean },
-    color: { type: String, default: 'primary' }
+    color: { type: String, default: 'primary' },
+    labelColor: { type: String, default: 'primary' }
     // Props from mixin: name, disabled, readonly, required, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },

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

@@ -9,24 +9,19 @@ component(
   :class="classes")
   template(v-if="labelPosition === 'left'")
     label.w-select__label.w-select__label--left.w-form-el-shakable(
-      v-if="$slots.default"
-      :for="`w-select--${_uid}`")
-      slot
-    label.w-select__label.w-select__label--left.w-form-el-shakable(
-      v-else-if="label"
+      v-if="$slots.default || label"
       :for="`w-select--${_uid}`"
-      v-html="label")
+      :class="labelClasses")
+      slot {{ label }}
 
   w-menu(
     v-model="showMenu"
     :menu-class="`w-select__menu ${menuClass || ''}`"
     transition="slide-fade-down"
-    :append-to="(menuProps || {}).appendTo !== undefined ? (menuProps || {}).appendTo : '.w-app'"
+    :append-to="(menuProps || {}).appendTo !== undefined ? (menuProps || {}).appendTo : undefined"
     align-left
     custom
     min-width="activator"
-    @mousedown="isFocused = true, selectingItem = true"
-    @mouseup="isFocused = true, selectingItem = false"
     v-bind="menuProps || {}")
     template(#activator="{ on }")
       //- Input wrapper.
@@ -69,15 +64,10 @@ component(
           :name="inputName + (multiple ? '[]' : '')")
         template(v-if="labelPosition === 'inside' && showLabelInside")
           label.w-select__label.w-select__label--inside.w-form-el-shakable(
-            v-if="$slots.default"
-            :for="`w-select--${_uid}`"
-            :class="isFocused && { [valid === false ? 'error' : color]: color || valid === false }")
-            slot
-          label.w-select__label.w-select__label--inside.w-form-el-shakable(
-            v-else-if="label"
+            v-if="$slots.default || label"
             :for="`w-select--${_uid}`"
-            v-html="label"
-            :class="isFocused && { [valid === false ? 'error' : color]: color || valid === false }")
+            :class="labelClasses")
+            slot {{ label }}
         w-icon.w-select__icon.w-select__icon--inner-right(
           v-if="innerIconRight"
           tag="label"
@@ -113,13 +103,10 @@ component(
 
   template(v-if="labelPosition === 'right'")
     label.w-select__label.w-select__label--right.w-form-el-shakable(
-      v-if="$slots.default"
-      :for="`w-select--${_uid}`")
-      slot
-    label.w-select__label.w-select__label--right.w-form-el-shakable(
-      v-else-if="label"
+      v-if="$slots.default || label"
       :for="`w-select--${_uid}`"
-      v-html="label")
+      :class="labelClasses")
+      slot {{ label }}
 </template>
 
 <script>
@@ -150,8 +137,9 @@ export default {
     itemClass: { type: String },
     menuClass: { type: String },
     color: { type: String, default: 'primary' }, // Applies to all the items.
-    selectionColor: { type: String, default: 'primary' }, // Applies to the selected items only.
     bgColor: { type: String }, // Applies to all the items.
+    labelColor: { type: String, default: 'primary' },
+    selectionColor: { type: String, default: 'primary' }, // Applies to the selected items only.
     outline: { type: Boolean },
     round: { type: Boolean },
     shadow: { type: Boolean },
@@ -175,7 +163,6 @@ export default {
     showMenu: false,
     menuMinWidth: 0,
     isFocused: false,
-    selectingItem: false,
     selectionWrapRef: undefined
   }),
 
@@ -213,7 +200,7 @@ export default {
         'w-select--disabled': this.isDisabled,
         'w-select--readonly': this.isReadonly,
         [`w-select--${this.hasValue ? 'filled' : 'empty'}`]: true,
-        'w-select--focused': (this.isFocused || this.selectingItem) && !this.isReadonly,
+        'w-select--focused': (this.isFocused || this.showMenu) && !this.isReadonly,
         'w-select--dark': this.dark,
         'w-select--floating-label': this.hasLabel && this.labelPosition === 'inside' && !this.staticLabel,
         'w-select--no-padding': !this.outline && !this.bgColor && !this.shadow && !this.round,
@@ -579,8 +566,6 @@ export default {
     .w-select--filled.w-select--floating-label.w-select--inner-icon-left & {left: 0;}
     // Chrome & Safari - Must remain in a separated rule as Firefox discard the whole rule seeing -webkit-.
     .w-select--floating-label.w-select--inner-icon-left .w-select__select:-webkit-autofill & {left: 0;}
-
-    .w-select--focused &, .w-select--open & {color: currentColor;}
   }
 
   // Menu.

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

@@ -5,15 +5,17 @@ component(
   v-bind="formRegister && { validators, inputValue: rangeValueScaled, disabled: isDisabled, readonly: isReadonly }"
   :valid.sync="valid"
   @reset="rangeValuePercent = 0;updateRangeValueScaled()"
-  wrap
+  :wrap="formRegister || null"
   :class="wrapperClasses")
   label.w-slider__label.w-slider__label--left.w-form-el-shakable(
     v-if="$slots['label-left']"
-    :for="`button--${_uid}`")
+    :for="`button--${_uid}`"
+    :class="labelClasses")
     slot(name="label-left")
   label.w-slider__label.w-slider__label--left.w-form-el-shakable(
     v-else-if="labelLeft"
     :for="`button--${_uid}`"
+    :class="labelClasses"
     v-html="labelLeft")
   .w-slider__track-wrap
     .w-slider__track(
@@ -39,6 +41,7 @@ component(
           :disabled="isDisabled || null"
           :readonly="isReadonly || null"
           :aria-readonly="isReadonly ? 'true' : 'false'"
+          :tabindex="isDisabled || isReadonly ? -1 : null"
           @keydown.left="onKeyDown($event, -1)"
           @keydown.right="onKeyDown($event, 1)"
           @focus="$emit('focus', $event)"
@@ -64,11 +67,13 @@ component(
         style="left: 100%") {{ this.maxVal }}
   label.w-slider__label.w-slider__label--right.w-form-el-shakable(
     v-if="$slots['label-right']"
-    :for="`button--${_uid}`")
+    :for="`button--${_uid}`"
+    :class="labelClasses")
     slot(name="label-right")
   label.w-slider__label.w-slider__label--right.w-form-el-shakable(
     v-else-if="labelRight"
     :for="`button--${_uid}`"
+    :class="labelClasses"
     v-html="labelRight")
 </template>
 
@@ -83,6 +88,7 @@ export default {
     value: { type: Number, default: 0 },
     color: { type: String, default: 'primary' },
     bgColor: { type: String },
+    labelColor: { type: String, default: 'primary' },
     stepLabels: { type: [Boolean, Array] },
     thumbLabel: { type: [Boolean, String] }, // One of true, false, 'droplet'.
     thumbLabelClass: { type: String },
@@ -378,16 +384,17 @@ export default {
     &:before, &:after {
       content: '';
       position: absolute;
+      border-radius: inherit;
+      @include default-transition;
     }
+    // Colored border on thumb when hover and active - but with a transparency.
     &:before {
       left: 0;
       right: 0;
       top: 0;
       bottom: 0;
       opacity: 0.5;
-      border-radius: inherit;
       border: 1px solid currentColor;
-      @include default-transition;
     }
     &:hover:before, &:focus:before {opacity: 0.7;}
     &:active:before, .w-slider--dragging &:before {
@@ -398,13 +405,17 @@ export default {
     .w-slider--disabled &:before,
     .w-slider--readonly &:before {box-shadow: none;opacity: 0.4;}
 
-    // For fat fingers.
+    // The outline when focused, but also a bigger reactive zone for fat fingers when not.
     &:after {
-      left: -6px;
-      right: -6px;
-      top: -6px;
-      bottom: -6px;
+      left: -2 * $base-increment;
+      right: -2 * $base-increment;
+      top: -2 * $base-increment;
+      bottom: -2 * $base-increment;
+      opacity: 0;
+      background-color: currentColor;
     }
+    &:focus:after {opacity: 0.15;}
+    .w-slider--dragging &:after, &:active:after {opacity: 0.1;transform: scale(1.2);}
   }
 
   // Thumb label.

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

@@ -22,17 +22,25 @@ component(
     :aria-checked="isOn || 'false'"
     role="switch")
   template(v-if="hasLabel && labelOnLeft")
-    label.w-switch__label.w-form-el-shakable(v-if="$slots.default" :for="`w-switch--${_uid}`")
-      slot
-    label.w-switch__label.w-form-el-shakable(v-else-if="label" :for="`w-switch--${_uid}`" v-html="label")
+    label.w-switch__label.w-switch__label--left.w-form-el-shakable(
+      v-if="$slots.default || label"
+      :for="`w-switch--${_uid}`"
+      :class="labelClasses")
+      slot {{ label }}
   .w-switch__input(
     @click="$refs.input.focus();$refs.input.click()"
     v-on="$listeners"
     :class="inputClasses")
+    .w-switch__track(v-if="$slots.track")
+      slot(name="track")
+    .w-switch__thumb(v-if="$slots.thumb")
+      slot(name="thumb")
   template(v-if="hasLabel && !labelOnLeft")
-    label.w-switch__label.w-form-el-shakable(v-if="$slots.default" :for="`w-switch--${_uid}`")
-      slot
-    label.w-switch__label.w-form-el-shakable(v-else-if="label" :for="`w-switch--${_uid}`" v-html="label")
+    label.w-switch__label.w-switch__label--right.w-form-el-shakable(
+      v-if="$slots.default || label"
+      :for="`w-switch--${_uid}`"
+      :class="labelClasses")
+      slot {{ label }}
 </template>
 
 <script>
@@ -47,6 +55,7 @@ export default {
     label: { type: String, default: '' },
     labelOnLeft: { type: Boolean },
     color: { type: String, default: 'primary' },
+    labelColor: { type: String, default: 'primary' },
     thin: { type: Boolean },
     noRipple: { type: Boolean }
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
@@ -77,6 +86,8 @@ export default {
         'w-switch--disabled': this.isDisabled,
         'w-switch--readonly': this.isReadonly,
         'w-switch--ripple': this.ripple.start,
+        'w-switch--custom-thumb': this.$slots.thumb,
+        'w-switch--custom-track': this.$slots.track,
         'w-switch--rippled': this.ripple.end
       }
     },
@@ -186,8 +197,18 @@ $disabled-color: #ddd;
     }
   }
 
-  // Thumb.
-  &__input:after {
+  // Track slot, if any.
+  &__track {
+    position: absolute;
+    left: 100%;
+    padding: 0 4px;
+    transform: translateX(-100%);
+    @include default-transition;
+  }
+  .w-switch--on &__track {left: 0;transform: translateX(0);}
+
+  // Thumb: show either the thumb slot if any, or :after otherwise.
+  &__thumb, &__input:after {
     content: '';
     position: absolute;
     left: 0;
@@ -196,22 +217,28 @@ $disabled-color: #ddd;
     height: $small-form-el-size;
     background-color: #fff;
     border-radius: 100%;
+    text-align: center;
     @include default-transition;
 
     .w-switch[class^="bdrs"] &, .w-switch[class*=" bdrs"] & {border-radius: inherit;}
 
-    :checked ~ & {transform: translateX(100%);}
+    .w-switch--on & {left: 100%;transform: translateX(-100%);}
 
     .w-switch--thin & {
       top: - round(0.15 * $small-form-el-size);
       transform: scale(1.1);
       box-shadow: $box-shadow;
     }
-    .w-switch--thin :checked ~ & {
-      transform: translateX(100%) scale(1.1);
+    .w-switch--thin.w-switch--on & {
+      transform: translateX(-100%) scale(1.1);
       background-color: currentColor;
     }
   }
+  &--custom-thumb &__input:after {display: none;}
+  &__thumb > * {
+    width: inherit;
+    height: inherit;
+  }
 
   // The focus outline & ripple on switch activation.
   &__input:before {
@@ -223,11 +250,12 @@ $disabled-color: #ddd;
     height: $small-form-el-size;
     background-color: currentColor;
     border-radius: 100%;
-    transform: translateX(100%) scale(0);
     opacity: 0;
     pointer-events: none;
     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: - round(0.15 * $small-form-el-size);}
   }
@@ -242,14 +270,14 @@ $disabled-color: #ddd;
     opacity: 0.2;
   }
   :focus:checked ~ &__input:before {
-    transform: translateX(100%) scale(1.8);
+    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 {
     transition: none;
-    transform: translateX(100%) scale(0);
+    transform: translateX(-100%) scale(0);
     opacity: 0;
   }
 
@@ -264,7 +292,7 @@ $disabled-color: #ddd;
 }
 
 @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.
+  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.
 }
 </style>

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

@@ -65,6 +65,7 @@ export default {
     titleClass: { type: String },
     activeClass: { type: String, default: 'primary' },
     noSlider: { type: Boolean },
+    pillSlider: { type: Boolean },
     sliderColor: { type: String, default: 'primary' },
     contentClass: { type: String },
     transition: { type: [String, Boolean], default: '' },
@@ -122,6 +123,7 @@ export default {
       return {
         'w-tabs--card': this.card,
         'w-tabs--no-slider': this.noSlider,
+        'w-tabs--pill-slider': this.pillSlider,
         'w-tabs--fill-bar': this.fillBar,
         'w-tabs--init': this.init
       }
@@ -252,11 +254,11 @@ export default {
   &__bar {
     position: relative;
     display: flex;
-    // align-items: center;
     overflow-x: auto;
 
     &--center {justify-content: center;}
     &--right {justify-content: flex-end;}
+    .w-tabs--pill-slider & {padding-left: $base-increment;}
 
     .w-tabs--card &:after {
       content: '';
@@ -310,6 +312,7 @@ export default {
     &:active:before {opacity: 0.08;}
     &--disabled:before {display: none;}
   }
+  &--pill-slider &__bar-item:before {display: none;}
 
   // Bar Extra.
   // ------------------------------------------------------
@@ -330,6 +333,13 @@ export default {
     background-color: currentColor;
     transition: $transition-duration ease-in-out;
   }
+  &--pill-slider &__slider {
+    opacity: 0.1;
+    bottom: 15%;
+    height: 70%;
+    border-radius: 99em;
+  }
+
   &--init &__slider {transition: none;}
 
   // Content.