vant 3.2.5 → 3.3.0

package/lib/submit-bar/index.css

@@ -1 +1 @@
-:root{--van-submit-bar-height:50px;--van-submit-bar-z-index:100;--van-submit-bar-background-color:var(--van-white);--van-submit-bar-button-width:110px;--van-submit-bar-price-color:var(--van-danger-color);--van-submit-bar-price-font-size:var(--van-font-size-sm);--van-submit-bar-price-integer-font-size:20px;--van-submit-bar-price-font-family:var(--van-price-integer-font-family);--van-submit-bar-currency-font-size:var(--van-font-size-md);--van-submit-bar-text-color:var(--van-text-color);--van-submit-bar-text-font-size:var(--van-font-size-md);--van-submit-bar-tip-padding:var(--van-padding-xs) var(--van-padding-sm);--van-submit-bar-tip-font-size:var(--van-font-size-sm);--van-submit-bar-tip-line-height:1.5;--van-submit-bar-tip-color:#f56723;--van-submit-bar-tip-background-color:#fff7cc;--van-submit-bar-tip-icon-size:12px;--van-submit-bar-button-height:40px;--van-submit-bar-padding:0 var(--van-padding-md)}.van-submit-bar{position:fixed;bottom:0;left:0;z-index:var(--van-submit-bar-z-index);width:100%;background-color:var(--van-submit-bar-background-color);-webkit-user-select:none;user-select:none}.van-submit-bar__tip{padding:var(--van-submit-bar-tip-padding);color:var(--van-submit-bar-tip-color);font-size:var(--van-submit-bar-tip-font-size);line-height:var(--van-submit-bar-tip-line-height);background-color:var(--van-submit-bar-tip-background-color)}.van-submit-bar__tip-icon{margin-right:var(--van-padding-base);font-size:var(--van-submit-bar-tip-icon-size);vertical-align:middle}.van-submit-bar__tip-text{vertical-align:middle}.van-submit-bar__bar{display:flex;align-items:center;justify-content:flex-end;height:var(--van-submit-bar-height);padding:var(--van-submit-bar-padding);font-size:var(--van-submit-bar-text-font-size)}.van-submit-bar__text{flex:1;padding-right:var(--van-padding-sm);color:var(--van-submit-bar-text-color);text-align:right}.van-submit-bar__text span{display:inline-block}.van-submit-bar__suffix-label{margin-left:var(--van-padding-base);font-weight:var(--van-font-weight-bold)}.van-submit-bar__price{color:var(--van-submit-bar-price-color);font-weight:var(--van-font-weight-bold);font-size:var(--van-submit-bar-price-font-size)}.van-submit-bar__price-integer{font-size:var(--van-submit-bar-price-integer-font-size);font-family:var(--van-submit-bar-price-font-family)}.van-submit-bar__button{width:var(--van-submit-bar-button-width);height:var(--van-submit-bar-button-height);font-weight:var(--van-font-weight-bold);border:none}.van-submit-bar__button--danger{background:var(--van-gradient-red)}
+:root{--van-submit-bar-height:50px;--van-submit-bar-z-index:100;--van-submit-bar-background-color:var(--van-background-color-light);--van-submit-bar-button-width:110px;--van-submit-bar-price-color:var(--van-danger-color);--van-submit-bar-price-font-size:var(--van-font-size-sm);--van-submit-bar-price-integer-font-size:20px;--van-submit-bar-price-font-family:var(--van-price-integer-font-family);--van-submit-bar-currency-font-size:var(--van-font-size-md);--van-submit-bar-text-color:var(--van-text-color);--van-submit-bar-text-font-size:var(--van-font-size-md);--van-submit-bar-tip-padding:var(--van-padding-xs) var(--van-padding-sm);--van-submit-bar-tip-font-size:var(--van-font-size-sm);--van-submit-bar-tip-line-height:1.5;--van-submit-bar-tip-color:var(--van-orange-dark);--van-submit-bar-tip-background-color:var(--van-orange-light);--van-submit-bar-tip-icon-size:12px;--van-submit-bar-button-height:40px;--van-submit-bar-padding:0 var(--van-padding-md)}.van-submit-bar{position:fixed;bottom:0;left:0;z-index:var(--van-submit-bar-z-index);width:100%;background:var(--van-submit-bar-background-color);-webkit-user-select:none;user-select:none}.van-submit-bar__tip{padding:var(--van-submit-bar-tip-padding);color:var(--van-submit-bar-tip-color);font-size:var(--van-submit-bar-tip-font-size);line-height:var(--van-submit-bar-tip-line-height);background:var(--van-submit-bar-tip-background-color)}.van-submit-bar__tip-icon{margin-right:var(--van-padding-base);font-size:var(--van-submit-bar-tip-icon-size);vertical-align:middle}.van-submit-bar__tip-text{vertical-align:middle}.van-submit-bar__bar{display:flex;align-items:center;justify-content:flex-end;height:var(--van-submit-bar-height);padding:var(--van-submit-bar-padding);font-size:var(--van-submit-bar-text-font-size)}.van-submit-bar__text{flex:1;padding-right:var(--van-padding-sm);color:var(--van-submit-bar-text-color);text-align:right}.van-submit-bar__text span{display:inline-block}.van-submit-bar__suffix-label{margin-left:var(--van-padding-base);font-weight:var(--van-font-weight-bold)}.van-submit-bar__price{color:var(--van-submit-bar-price-color);font-weight:var(--van-font-weight-bold);font-size:var(--van-submit-bar-price-font-size)}.van-submit-bar__price-integer{font-size:var(--van-submit-bar-price-integer-font-size);font-family:var(--van-submit-bar-price-font-family)}.van-submit-bar__button{width:var(--van-submit-bar-button-width);height:var(--van-submit-bar-button-height);font-weight:var(--van-font-weight-bold);border:none}.van-submit-bar__button--danger{background:var(--van-gradient-red)}

package/lib/submit-bar/index.d.ts

@@ -9,7 +9,7 @@ export declare const SubmitBar: import("../utils").WithInstall<import("vue").Def
         default: string;
     };
     disabled: BooleanConstructor;
-    textAlign: import("vue").PropType<import("csstype").TextAlignProperty | undefined>;
+    textAlign: import("vue").PropType<import("./SubmitBar").SubmitBarTextAlign>;
     buttonText: StringConstructor;
     buttonType: {
         type: import("vue").PropType<import("..").ButtonType>;
@@ -50,7 +50,7 @@ export declare const SubmitBar: import("../utils").WithInstall<import("vue").Def
 } & {
     label?: string | undefined;
     price?: number | undefined;
-    textAlign?: import("csstype").TextAlignProperty | undefined;
+    textAlign?: import("./SubmitBar").SubmitBarTextAlign | undefined;
     tip?: string | undefined;
     tipIcon?: string | undefined;
     buttonText?: string | undefined;
@@ -67,3 +67,4 @@ export declare const SubmitBar: import("../utils").WithInstall<import("vue").Def
     buttonType: import("..").ButtonType;
 }>>;
 export default SubmitBar;
+export type { SubmitBarProps, SubmitBarTextAlign } from './SubmitBar';

package/lib/submit-bar/index.less

@@ -28,7 +28,7 @@
   left: 0;
   z-index: var(--van-submit-bar-z-index);
   width: 100%;
-  background-color: var(--van-submit-bar-background-color);
+  background: var(--van-submit-bar-background-color);
   user-select: none;
 
   &__tip {
@@ -36,7 +36,7 @@
     color: var(--van-submit-bar-tip-color);
     font-size: var(--van-submit-bar-tip-font-size);
     line-height: var(--van-submit-bar-tip-line-height);
-    background-color: var(--van-submit-bar-tip-background-color);
+    background: var(--van-submit-bar-tip-background-color);
   }
 
   &__tip-icon {

package/lib/submit-bar/var.less

@@ -2,7 +2,7 @@
 
 @submit-bar-height: 50px;
 @submit-bar-z-index: 100;
-@submit-bar-background-color: var(--van-white);
+@submit-bar-background-color: var(--van-background-color-light);
 @submit-bar-button-width: 110px;
 @submit-bar-price-color: var(--van-danger-color);
 @submit-bar-price-font-size: var(--van-font-size-md);
@@ -12,8 +12,8 @@
 @submit-bar-tip-padding: var(--van-padding-xs) var(--van-padding-sm);
 @submit-bar-tip-font-size: var(--van-font-size-sm);
 @submit-bar-tip-line-height: 1.5;
-@submit-bar-tip-color: #f56723;
-@submit-bar-tip-background-color: #fff7cc;
+@submit-bar-tip-color: var(--van-orange-dark);
+@submit-bar-tip-background-color: var(--van-orange-light);
 @submit-bar-tip-icon-size: 12px;
 @submit-bar-button-height: 40px;
 @submit-bar-padding: 0 var(--van-padding-md);

package/lib/swipe/Swipe.d.ts

@@ -1,6 +1,6 @@
 import { InjectionKey, ExtractPropTypes } from 'vue';
 import { SwipeProvide } from './types';
-declare const props: {
+declare const swipeProps: {
     loop: {
         type: BooleanConstructor;
         default: true;
@@ -35,7 +35,7 @@ declare const props: {
         default: true;
     };
 };
-export declare type SwipeProps = ExtractPropTypes<typeof props>;
+export declare type SwipeProps = ExtractPropTypes<typeof swipeProps>;
 export declare const SWIPE_KEY: InjectionKey<SwipeProvide>;
 declare const _default: import("vue").DefineComponent<{
     loop: {

package/lib/swipe/Swipe.js

@@ -18,7 +18,7 @@ var _onPopupReopen = require("../composables/on-popup-reopen");
 // Utils
 // Composables
 var [name, bem] = (0, _utils.createNamespace)('swipe');
-var props = {
+var swipeProps = {
   loop: _utils.truthProp,
   width: _utils.numericProp,
   height: _utils.numericProp,
@@ -37,13 +37,14 @@ exports.SWIPE_KEY = SWIPE_KEY;
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props,
+  props: swipeProps,
   emits: ['change'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var root = (0, _vue.ref)();
     var state = (0, _vue.reactive)({
       rect: null,
@@ -54,7 +55,6 @@ var _default = (0, _vue.defineComponent)({
       swiping: false
     });
     var touch = (0, _useTouch.useTouch)();
-    var windowSize = (0, _use.useWindowSize)();
     var {
       children,
       linkChildren
@@ -109,7 +109,11 @@ var _default = (0, _vue.defineComponent)({
       return active;
     };
 
-    var getTargetOffset = (targetActive, offset = 0) => {
+    var getTargetOffset = function (targetActive, offset) {
+      if (offset === void 0) {
+        offset = 0;
+      }
+
       var currentPosition = targetActive * size.value;
 
       if (!props.loop) {
@@ -125,11 +129,13 @@ var _default = (0, _vue.defineComponent)({
       return targetOffset;
     };
 
-    var move = ({
-      pace = 0,
-      offset = 0,
-      emitChange
-    }) => {
+    var move = _ref2 => {
+      var {
+        pace = 0,
+        offset = 0,
+        emitChange
+      } = _ref2;
+
       if (count.value <= 1) {
         return;
       }
@@ -216,7 +222,11 @@ var _default = (0, _vue.defineComponent)({
     }; // initialize swipe position
 
 
-    var initialize = (active = +props.initialSwipe) => {
+    var initialize = function (active) {
+      if (active === void 0) {
+        active = +props.initialSwipe;
+      }
+
       if (!root.value) {
         return;
       }
@@ -304,7 +314,11 @@ var _default = (0, _vue.defineComponent)({
       autoplay();
     };
 
-    var swipeTo = (index, options = {}) => {
+    var swipeTo = function (index, options) {
+      if (options === void 0) {
+        options = {};
+      }
+
       correctPosition();
       touch.reset();
       (0, _use.doubleRaf)(() => {
@@ -376,7 +390,7 @@ var _default = (0, _vue.defineComponent)({
     (0, _vue.watch)(() => props.initialSwipe, value => initialize(+value));
     (0, _vue.watch)(count, () => initialize(state.active));
     (0, _vue.watch)(() => props.autoplay, autoplay);
-    (0, _vue.watch)([windowSize.width, windowSize.height], resize);
+    (0, _vue.watch)([_utils.windowWidth, _utils.windowHeight], resize);
     (0, _vue.watch)((0, _use.usePageVisibility)(), visible => {
       if (visible === 'visible') {
         autoplay();

package/lib/swipe/types.d.ts

@@ -19,9 +19,7 @@ export declare type SwipeExpose = {
     next: () => void;
     resize: () => void;
     swipeTo: (index: number, options?: SwipeToOptions) => void;
-    /**
-     * @private
-     */
+    /** @private */
     state: SwipeState;
 };
 export declare type SwipeProvide = {

package/lib/swipe-cell/SwipeCell.d.ts

@@ -1,6 +1,6 @@
 import { PropType, ExtractPropTypes } from 'vue';
 import { Interceptor } from '../utils';
-declare const props: {
+declare const swipeCellProps: {
     name: {
         type: (NumberConstructor | StringConstructor)[];
         default: string;
@@ -11,7 +11,7 @@ declare const props: {
     beforeClose: PropType<Interceptor>;
     stopPropagation: BooleanConstructor;
 };
-export declare type SwipeCellProps = ExtractPropTypes<typeof props>;
+export declare type SwipeCellProps = ExtractPropTypes<typeof swipeCellProps>;
 declare const _default: import("vue").DefineComponent<{
     name: {
         type: (NumberConstructor | StringConstructor)[];

package/lib/swipe-cell/SwipeCell.js

@@ -16,7 +16,7 @@ var _useExpose = require("../composables/use-expose");
 // Utils
 // Composables
 var [name, bem] = (0, _utils.createNamespace)('swipe-cell');
-var props = {
+var swipeCellProps = {
   name: (0, _utils.makeNumericProp)(''),
   disabled: Boolean,
   leftWidth: _utils.numericProp,
@@ -27,13 +27,14 @@ var props = {
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props,
+  props: swipeCellProps,
   emits: ['open', 'close', 'click'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var opened;
     var lockClick;
     var startOffset;
@@ -126,12 +127,15 @@ var _default = (0, _vue.defineComponent)({
       }
     };
 
-    var onClick = (position = 'outside') => {
+    var onClick = function (position) {
+      if (position === void 0) {
+        position = 'outside';
+      }
+
       emit('click', position);
 
       if (opened && !lockClick) {
-        (0, _utils.callInterceptor)({
-          interceptor: props.beforeClose,
+        (0, _utils.callInterceptor)(props.beforeClose, {
           args: [{
             name: props.name,
             position

package/lib/swipe-item/SwipeItem.js

@@ -20,9 +20,10 @@ var [name, bem] = (0, _utils.createNamespace)('swipe-item');
 var _default = (0, _vue.defineComponent)({
   name,
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
     var rendered;
     var state = (0, _vue.reactive)({
       offset: 0,

package/lib/switch/Switch.d.ts

@@ -1,3 +1,21 @@
+import { ExtractPropTypes } from 'vue';
+declare const switchProps: {
+    size: (NumberConstructor | StringConstructor)[];
+    loading: BooleanConstructor;
+    disabled: BooleanConstructor;
+    modelValue: import("vue").PropType<unknown>;
+    activeColor: StringConstructor;
+    inactiveColor: StringConstructor;
+    activeValue: {
+        type: import("vue").PropType<unknown>;
+        default: unknown;
+    };
+    inactiveValue: {
+        type: import("vue").PropType<unknown>;
+        default: unknown;
+    };
+};
+export declare type SwitchProps = ExtractPropTypes<typeof switchProps>;
 declare const _default: import("vue").DefineComponent<{
     size: (NumberConstructor | StringConstructor)[];
     loading: BooleanConstructor;

package/lib/switch/Switch.js

@@ -12,30 +12,33 @@ var _use = require("@vant/use");
 var _loading = require("../loading");
 
 var [name, bem] = (0, _utils.createNamespace)('switch');
+var switchProps = {
+  size: _utils.numericProp,
+  loading: Boolean,
+  disabled: Boolean,
+  modelValue: _utils.unknownProp,
+  activeColor: String,
+  inactiveColor: String,
+  activeValue: {
+    type: _utils.unknownProp,
+    default: true
+  },
+  inactiveValue: {
+    type: _utils.unknownProp,
+    default: false
+  }
+};
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: {
-    size: _utils.numericProp,
-    loading: Boolean,
-    disabled: Boolean,
-    modelValue: _utils.unknownProp,
-    activeColor: String,
-    inactiveColor: String,
-    activeValue: {
-      type: _utils.unknownProp,
-      default: true
-    },
-    inactiveValue: {
-      type: _utils.unknownProp,
-      default: false
-    }
-  },
+  props: switchProps,
   emits: ['change', 'update:modelValue'],
 
-  setup(props, {
-    emit
-  }) {
+  setup(props, _ref) {
+    var {
+      emit
+    } = _ref;
+
     var isChecked = () => props.modelValue === props.activeValue;
 
     var onClick = () => {
@@ -78,6 +81,7 @@ var _default = (0, _vue.defineComponent)({
           disabled
         }),
         "style": style,
+        "tabindex": disabled ? undefined : 0,
         "aria-checked": checked,
         "onClick": onClick
       }, [(0, _vue.createVNode)("div", {

package/lib/switch/index.css

@@ -1 +1 @@
-:root{--van-switch-size:30px;--van-switch-width:2em;--van-switch-height:1em;--van-switch-node-size:1em;--van-switch-node-background-color:var(--van-white);--van-switch-node-box-shadow:0 3px 1px 0 rgba(0, 0, 0, 0.05),0 2px 2px 0 rgba(0, 0, 0, 0.1),0 3px 3px 0 rgba(0, 0, 0, 0.05);--van-switch-background-color:var(--van-white);--van-switch-on-background-color:var(--van-primary-color);--van-switch-transition-duration:var(--van-animation-duration-base);--van-switch-disabled-opacity:var(--van-disabled-opacity);--van-switch-border:var(--van-border-width-base) solid rgba(0, 0, 0, 0.1)}.van-switch{position:relative;display:inline-block;box-sizing:content-box;width:var(--van-switch-width);height:var(--van-switch-height);font-size:var(--van-switch-size);background-color:var(--van-switch-background-color);border:var(--van-switch-border);border-radius:var(--van-switch-node-size);cursor:pointer;transition:background-color var(--van-switch-transition-duration)}.van-switch__node{position:absolute;top:0;left:0;width:var(--van-switch-node-size);height:var(--van-switch-node-size);background-color:var(--van-switch-node-background-color);border-radius:100%;box-shadow:var(--van-switch-node-box-shadow);transition:transform var(--van-switch-transition-duration) cubic-bezier(.3, 1.05, .4, 1.05)}.van-switch__loading{top:25%;left:25%;width:50%;height:50%;line-height:1}.van-switch--on{background-color:var(--van-switch-on-background-color)}.van-switch--on .van-switch__node{transform:translateX(calc(var(--van-switch-width) - var(--van-switch-node-size)))}.van-switch--on .van-switch__loading{color:var(--van-switch-on-background-color)}.van-switch--disabled{cursor:not-allowed;opacity:var(--van-switch-disabled-opacity)}.van-switch--loading{cursor:default}
+:root{--van-switch-size:30px;--van-switch-width:2em;--van-switch-height:1em;--van-switch-node-size:1em;--van-switch-node-background-color:var(--van-white);--van-switch-node-box-shadow:0 3px 1px 0 rgba(0, 0, 0, 0.05),0 2px 2px 0 rgba(0, 0, 0, 0.1),0 3px 3px 0 rgba(0, 0, 0, 0.05);--van-switch-background-color:var(--van-background-color-light);--van-switch-on-background-color:var(--van-primary-color);--van-switch-transition-duration:var(--van-animation-duration-base);--van-switch-disabled-opacity:var(--van-disabled-opacity);--van-switch-border:var(--van-border-width-base) solid rgba(0, 0, 0, 0.1)}.van-switch{position:relative;display:inline-block;box-sizing:content-box;width:var(--van-switch-width);height:var(--van-switch-height);font-size:var(--van-switch-size);background:var(--van-switch-background-color);border:var(--van-switch-border);border-radius:var(--van-switch-node-size);cursor:pointer;transition:background-color var(--van-switch-transition-duration)}.van-switch__node{position:absolute;top:0;left:0;width:var(--van-switch-node-size);height:var(--van-switch-node-size);font-size:inherit;background:var(--van-switch-node-background-color);border-radius:100%;box-shadow:var(--van-switch-node-box-shadow);transition:transform var(--van-switch-transition-duration) cubic-bezier(.3, 1.05, .4, 1.05)}.van-switch__loading{top:25%;left:25%;width:50%;height:50%;line-height:1}.van-switch--on{background:var(--van-switch-on-background-color)}.van-switch--on .van-switch__node{transform:translateX(calc(var(--van-switch-width) - var(--van-switch-node-size)))}.van-switch--on .van-switch__loading{color:var(--van-switch-on-background-color)}.van-switch--disabled{cursor:not-allowed;opacity:var(--van-switch-disabled-opacity)}.van-switch--loading{cursor:default}

package/lib/switch/index.d.ts

@@ -42,3 +42,4 @@ export declare const Switch: import("../utils").WithInstall<import("vue").Define
     inactiveValue: unknown;
 }>>;
 export default Switch;
+export type { SwitchProps } from './Switch';

package/lib/switch/index.less

@@ -21,7 +21,7 @@
   width: var(--van-switch-width);
   height: var(--van-switch-height);
   font-size: var(--van-switch-size);
-  background-color: var(--van-switch-background-color);
+  background: var(--van-switch-background-color);
   border: var(--van-switch-border);
   border-radius: var(--van-switch-node-size);
   cursor: pointer;
@@ -33,7 +33,9 @@
     left: 0;
     width: var(--van-switch-node-size);
     height: var(--van-switch-node-size);
-    background-color: var(--van-switch-node-background-color);
+    // https://github.com/youzan/vant/issues/9839
+    font-size: inherit;
+    background: var(--van-switch-node-background-color);
     border-radius: 100%;
     box-shadow: var(--van-switch-node-box-shadow);
     transition: transform var(--van-switch-transition-duration)
@@ -49,7 +51,7 @@
   }
 
   &--on {
-    background-color: var(--van-switch-on-background-color);
+    background: var(--van-switch-on-background-color);
 
     .van-switch__node {
       transform: translateX(

package/lib/switch/var.less

@@ -7,7 +7,7 @@
 @switch-node-background-color: var(--van-white);
 @switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05),
   0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
-@switch-background-color: var(--van-white);
+@switch-background-color: var(--van-background-color-light);
 @switch-on-background-color: var(--van-primary-color);
 @switch-transition-duration: var(--van-animation-duration-base);
 @switch-disabled-opacity: var(--van-disabled-opacity);

package/lib/tab/Tab.d.ts

@@ -1,4 +1,22 @@
-import { PropType, CSSProperties } from 'vue';
+import { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+declare const tabProps: {
+    to: PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    name: (NumberConstructor | StringConstructor)[];
+    badge: (NumberConstructor | StringConstructor)[];
+    title: StringConstructor;
+    disabled: BooleanConstructor;
+    titleClass: PropType<unknown>;
+    titleStyle: PropType<string | CSSProperties>;
+    showZeroBadge: {
+        type: BooleanConstructor;
+        default: true;
+    };
+};
+export declare type TabProps = ExtractPropTypes<typeof tabProps>;
 declare const _default: import("vue").DefineComponent<{
     to: PropType<import("vue-router").RouteLocationRaw>;
     url: StringConstructor;

package/lib/tab/Tab.js

@@ -11,6 +11,10 @@ var _Tabs = require("../tabs/Tabs");
 
 var _use = require("@vant/use");
 
+var _useId = require("../composables/use-id");
+
+var _useExpose = require("../composables/use-expose");
+
 var _useRoute = require("../composables/use-route");
 
 var _useTabStatus = require("../composables/use-tab-status");
@@ -21,23 +25,26 @@ var _swipeItem = require("../swipe-item");
 // Composables
 // Components
 var [name, bem] = (0, _utils.createNamespace)('tab');
+var tabProps = (0, _utils.extend)({}, _useRoute.routeProps, {
+  dot: Boolean,
+  name: _utils.numericProp,
+  badge: _utils.numericProp,
+  title: String,
+  disabled: Boolean,
+  titleClass: _utils.unknownProp,
+  titleStyle: [String, Object],
+  showZeroBadge: _utils.truthProp
+});
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: (0, _utils.extend)({}, _useRoute.routeProps, {
-    dot: Boolean,
-    name: _utils.numericProp,
-    badge: _utils.numericProp,
-    title: String,
-    disabled: Boolean,
-    titleClass: _utils.unknownProp,
-    titleStyle: [String, Object],
-    showZeroBadge: _utils.truthProp
-  }),
-
-  setup(props, {
-    slots
-  }) {
+  props: tabProps,
+
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
+    var id = (0, _useId.useId)();
     var inited = (0, _vue.ref)(false);
     var {
       parent,
@@ -83,6 +90,7 @@ var _default = (0, _vue.defineComponent)({
     });
     (0, _vue.provide)(_useTabStatus.TAB_STATUS_KEY, active);
     return () => {
+      var label = parent.id + "-" + index.value;
       var {
         animated,
         swipeable,
@@ -98,23 +106,32 @@ var _default = (0, _vue.defineComponent)({
 
       if (animated || swipeable) {
         return (0, _vue.createVNode)(_swipeItem.SwipeItem, {
+          "id": id,
           "role": "tabpanel",
-          "aria-hidden": !active.value,
           "class": bem('pane-wrapper', {
             inactive: !active.value
-          })
+          }),
+          "tabindex": active.value ? 0 : -1,
+          "aria-hidden": !active.value,
+          "aria-labelledby": label
         }, {
           default: () => [(0, _vue.createVNode)("div", {
-            "class": bem('pane')
+            "class": bem('panel')
           }, [slots.default == null ? void 0 : slots.default()])]
         });
       }
 
       var shouldRender = inited.value || scrollspy || !lazyRender;
       var Content = shouldRender ? slots.default == null ? void 0 : slots.default() : null;
+      (0, _useExpose.useExpose)({
+        id
+      });
       return (0, _vue.withDirectives)((0, _vue.createVNode)("div", {
+        "id": id,
         "role": "tabpanel",
-        "class": bem('pane')
+        "class": bem('panel'),
+        "tabindex": show ? 0 : -1,
+        "aria-labelledby": label
       }, [Content]), [[_vue.vShow, show]]);
     };
   }

package/lib/tab/index.css

@@ -1 +1 @@
-.van-tab__pane,.van-tab__pane-wrapper{flex-shrink:0;box-sizing:border-box;width:100%}.van-tab__pane-wrapper--inactive{height:0;overflow:visible}
+.van-tab__panel,.van-tab__panel-wrapper{flex-shrink:0;box-sizing:border-box;width:100%}.van-tab__panel-wrapper--inactive{height:0;overflow:visible}

package/lib/tab/index.d.ts

@@ -46,3 +46,4 @@ export declare const Tab: import("../utils").WithInstall<import("vue").DefineCom
     showZeroBadge: boolean;
 }>>;
 export default Tab;
+export type { TabProps } from './Tab';

package/lib/tab/index.less

@@ -1,5 +1,5 @@
 .van-tab {
-  &__pane {
+  &__panel {
     &,
     &-wrapper {
       flex-shrink: 0;

package/lib/tabbar/Tabbar.d.ts

@@ -1,6 +1,6 @@
 import { PropType, InjectionKey, ExtractPropTypes } from 'vue';
 import { Interceptor } from '../utils';
-declare const props: {
+declare const tabbarProps: {
     route: BooleanConstructor;
     fixed: {
         type: BooleanConstructor;
@@ -24,9 +24,10 @@ declare const props: {
         default: null;
     };
 };
+export declare type TabbarProps = ExtractPropTypes<typeof tabbarProps>;
 export declare type TabbarProvide = {
-    props: ExtractPropTypes<typeof props>;
-    setActive: (active: number | string) => void;
+    props: TabbarProps;
+    setActive: (active: number | string, afterChange: () => void) => void;
 };
 export declare const TABBAR_KEY: InjectionKey<TabbarProvide>;
 declare const _default: import("vue").DefineComponent<{

package/lib/tabbar/Tabbar.js

@@ -14,7 +14,7 @@ var _usePlaceholder = require("../composables/use-placeholder");
 // Utils
 // Composables
 var [name, bem] = (0, _utils.createNamespace)('tabbar');
-var props = {
+var tabbarProps = {
   route: Boolean,
   fixed: _utils.truthProp,
   border: _utils.truthProp,
@@ -34,13 +34,14 @@ exports.TABBAR_KEY = TABBAR_KEY;
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props,
+  props: tabbarProps,
   emits: ['change', 'update:modelValue'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var root = (0, _vue.ref)();
     var {
       linkChildren
@@ -61,6 +62,7 @@ var _default = (0, _vue.defineComponent)({
       } = props;
       return (0, _vue.createVNode)("div", {
         "ref": root,
+        "role": "tablist",
         "style": (0, _utils.getZIndexStyle)(zIndex),
         "class": [bem({
           fixed
@@ -71,19 +73,17 @@ var _default = (0, _vue.defineComponent)({
       }, [slots.default == null ? void 0 : slots.default()]);
     };
 
-    var setActive = active => {
-      if (active !== props.modelValue) {
-        (0, _utils.callInterceptor)({
-          interceptor: props.beforeChange,
-          args: [active],
+    var setActive = (active, afterChange) => {
+      (0, _utils.callInterceptor)(props.beforeChange, {
+        args: [active],
 
-          done() {
-            emit('update:modelValue', active);
-            emit('change', active);
-          }
+        done() {
+          emit('update:modelValue', active);
+          emit('change', active);
+          afterChange();
+        }
 
-        });
-      }
+      });
     };
 
     linkChildren({

package/lib/tabbar/index.css

@@ -1 +1 @@
-:root{--van-tabbar-height:50px;--van-tabbar-z-index:1;--van-tabbar-background-color:var(--van-white)}.van-tabbar{z-index:var(--van-tabbar-z-index);display:flex;box-sizing:content-box;width:100%;height:var(--van-tabbar-height);background-color:var(--van-tabbar-background-color)}.van-tabbar--fixed{position:fixed;bottom:0;left:0}
+:root{--van-tabbar-height:50px;--van-tabbar-z-index:1;--van-tabbar-background-color:var(--van-background-color-light)}.van-tabbar{z-index:var(--van-tabbar-z-index);display:flex;box-sizing:content-box;width:100%;height:var(--van-tabbar-height);background:var(--van-tabbar-background-color)}.van-tabbar--fixed{position:fixed;bottom:0;left:0}

package/lib/tabbar/index.d.ts

@@ -56,3 +56,4 @@ export declare const Tabbar: import("../utils").WithInstall<import("vue").Define
     route: boolean;
 }>>;
 export default Tabbar;
+export type { TabbarProps } from './Tabbar';