@sdata/web-vue 3.12.0 → 3.14.0

package/es/menu/item.js

@@ -1,4 +1,5 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
+import { isActivationKey } from "../_utils/keyboard.js";
 import { omit } from "../_utils/omit.js";
 import Tooltip from "../tooltip/index.js";
 import Ellipsis from "../ellipsis/index.js";
@@ -95,13 +96,25 @@ disabled: {
 		].filter(Boolean);
 		const itemElement = createVNode("div", mergeProps({
 			"ref": "refItemElement",
+			"role": "menuitem",
+			"tabindex": disabled ? void 0 : 0,
+			"aria-disabled": disabled || void 0,
+			"aria-current": isSelected ? "page" : void 0,
 			"class": [`${prefixCls}-item`, {
 				[`${prefixCls}-disabled`]: disabled,
 				[`${prefixCls}-selected`]: isSelected,
 				[`${prefixCls}-has-icon`]: iconElement,
 				[`${prefixCls}-item-indented`]: showIndent
 			}]
-		}, this.$attrs, { "onClick": onClick }), [content, isSelected && mode === "horizontal" && createVNode("div", { "class": `${prefixCls}-selected-label` }, null)]);
+		}, this.$attrs, {
+			"onClick": onClick,
+			"onKeydown": (e) => {
+				if (isActivationKey(e)) {
+					e.preventDefault();
+					onClick(e);
+				}
+			}
+		}), [content, isSelected && mode === "horizontal" && createVNode("div", { "class": `${prefixCls}-selected-label` }, null)]);
 		if (needTooltip) return createVNode(Tooltip, mergeProps({
 			"position": "right",
 			"class": [`${prefixCls}-item-tooltip`, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.class].filter(Boolean)

package/es/menu/style/index.css

@@ -90,13 +90,13 @@
 .sd-menu .sd-menu-pop-header.sd-menu-selected,
 .sd-menu .sd-menu-inline-header.sd-menu-selected {
   font-weight: 500;
-  transition: color 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-menu .sd-menu-item.sd-menu-selected svg,
 .sd-menu .sd-menu-group-title.sd-menu-selected svg,
 .sd-menu .sd-menu-pop-header.sd-menu-selected svg,
 .sd-menu .sd-menu-inline-header.sd-menu-selected svg {
-  transition: color 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-menu .sd-menu-item .sd-icon,
 .sd-menu .sd-menu-item .sd-menu-icon,
@@ -202,7 +202,7 @@
 .sd-menu-light.sd-menu-horizontal .sd-menu-pop-header.sd-menu-selected,
 .sd-menu-light.sd-menu-horizontal .sd-menu-inline-header.sd-menu-selected {
   background: none;
-  transition: color 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-menu-light.sd-menu-horizontal .sd-menu-item.sd-menu-selected:hover,
 .sd-menu-light.sd-menu-horizontal .sd-menu-group-title.sd-menu-selected:hover,
@@ -309,7 +309,7 @@
 .sd-menu-dark.sd-menu-horizontal .sd-menu-pop-header.sd-menu-selected,
 .sd-menu-dark.sd-menu-horizontal .sd-menu-inline-header.sd-menu-selected {
   background: none;
-  transition: color 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-menu-dark.sd-menu-horizontal .sd-menu-item.sd-menu-selected:hover,
 .sd-menu-dark.sd-menu-horizontal .sd-menu-group-title.sd-menu-selected:hover,
@@ -514,7 +514,7 @@
   left: 12px;
   height: 3px;
   background-color: rgb(var(--sd-primary-6));
-  animation: sd-menu-selected-item-label-enter 0.2s cubic-bezier(0, 0, 1, 1);
+  animation: sd-menu-selected-item-label-enter 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-menu-pop-button {
   width: auto;
@@ -647,7 +647,7 @@
   color: var(--sd-color-text-1);
   font-weight: 500;
   background-color: transparent;
-  transition: all 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-trigger-menu-item:hover, .sd-trigger-menu-pop-header:hover {
   color: var(--sd-color-text-1);

package/es/menu/style/index.scss

@@ -62,7 +62,7 @@ $token-vars: map.merge(meta.module-variables('dropdownToken'), meta.module-varia
 }
 
 @mixin menu-text-color-transition() {
-  transition: color theme.$transition-duration-2 theme.$transition-timing-function-linear;
+  transition: color theme.$transition-duration-2 theme.$transition-timing-function-standard;
 }
 
 @mixin menu-item-base() {
@@ -400,7 +400,7 @@ $token-vars: map.merge(meta.module-variables('dropdownToken'), meta.module-varia
     height: $menu-height-label-item-selected;
     background-color: $menu-color-label-item-selected;
     animation: #{theme.$prefix}-menu-selected-item-label-enter theme.$transition-duration-2
-      theme.$transition-timing-function-linear;
+      theme.$transition-timing-function-standard;
   }
 
   &-pop-button {
@@ -578,7 +578,9 @@ $token-vars: map.merge(meta.module-variables('dropdownToken'), meta.module-varia
       color: $dropdown-option-color-text_selected;
       font-weight: $dropdown-option-font-weight_selected;
       background-color: $dropdown-option-color-bg_selected;
-      transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+      transition:
+        color theme.$transition-duration-1 theme.$transition-timing-function-standard,
+        background-color theme.$transition-duration-1 theme.$transition-timing-function-standard;
     }
 
     // hover

package/es/message/style/index.css

@@ -50,7 +50,7 @@
   border: 1px solid var(--sd-color-neutral-3);
   border-radius: var(--sd-border-radius-small);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  transition: all 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
   pointer-events: auto;
 }
 .sd-message-icon {
@@ -59,7 +59,7 @@
   color: var(--sd-color-text-1);
   font-size: 20px;
   vertical-align: middle;
-  animation: sd-msg-fade 0.1s cubic-bezier(0, 0, 1, 1), sd-msg-fade 0.4s cubic-bezier(0.3, 1.3, 0.3, 1);
+  animation: sd-msg-fade 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), sd-msg-fade 0.4s cubic-bezier(0.3, 1.3, 0.3, 1);
 }
 .sd-message-content {
   color: var(--sd-color-text-1);
@@ -138,7 +138,7 @@
 
 .fade-message-enter-active,
 .fade-message-appear-active {
-  transition: opacity 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 
 .fade-message-leave-from {

package/es/message/style/index.scss

@@ -44,7 +44,9 @@ $message-prefix-cls: string.unquote('#{theme.$prefix}-message');
   border: $message-border-width $message-border-style $message-normal-color-border;
   border-radius: $message-border-radius;
   box-shadow: global.$shadow2-down;
-  transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+  transition:
+    background-color theme.$transition-duration-1 theme.$transition-timing-function-standard,
+    border-color theme.$transition-duration-1 theme.$transition-timing-function-standard;
   pointer-events: auto;
 
   &-icon {
@@ -55,7 +57,7 @@ $message-prefix-cls: string.unquote('#{theme.$prefix}-message');
     vertical-align: middle;
     animation:
       #{theme.$prefix}-msg-fade theme.$transition-duration-1
-        theme.$transition-timing-function-linear,
+        theme.$transition-timing-function-standard,
       #{theme.$prefix}-msg-fade theme.$transition-duration-4
         theme.$transition-timing-function-overshoot;
   }
@@ -156,7 +158,7 @@ $message-prefix-cls: string.unquote('#{theme.$prefix}-message');
 
 .fade-message-enter-active,
 .fade-message-appear-active {
-  transition: opacity theme.$transition-duration-1 theme.$transition-timing-function-linear;
+  transition: opacity theme.$transition-duration-1 theme.$transition-timing-function-standard;
 }
 
 .fade-message-leave-from {

package/es/modal/index.d.ts

@@ -148,6 +148,7 @@ declare const Modal: {
         visible: boolean;
         unmountOnClose: boolean;
         renderToBody: boolean;
+        escToClose: boolean;
         defaultVisible: boolean;
         closable: boolean;
         simple: boolean;
@@ -155,7 +156,6 @@ declare const Modal: {
         titleEllipsisTooltip: boolean | import("../index.ts").EllipsisTooltipProps;
         maskClosable: boolean;
         okLoading: boolean;
-        escToClose: boolean;
         hideCancel: boolean;
         alignCenter: boolean;
         titleAlign: "center" | "start";
@@ -308,6 +308,7 @@ declare const Modal: {
         visible: boolean;
         unmountOnClose: boolean;
         renderToBody: boolean;
+        escToClose: boolean;
         defaultVisible: boolean;
         closable: boolean;
         simple: boolean;
@@ -315,7 +316,6 @@ declare const Modal: {
         titleEllipsisTooltip: boolean | import("../index.ts").EllipsisTooltipProps;
         maskClosable: boolean;
         okLoading: boolean;
-        escToClose: boolean;
         hideCancel: boolean;
         alignCenter: boolean;
         titleAlign: "center" | "start";
@@ -473,6 +473,7 @@ declare const Modal: {
     visible: boolean;
     unmountOnClose: boolean;
     renderToBody: boolean;
+    escToClose: boolean;
     defaultVisible: boolean;
     closable: boolean;
     simple: boolean;
@@ -480,7 +481,6 @@ declare const Modal: {
     titleEllipsisTooltip: boolean | import("../index.ts").EllipsisTooltipProps;
     maskClosable: boolean;
     okLoading: boolean;
-    escToClose: boolean;
     hideCancel: boolean;
     alignCenter: boolean;
     titleAlign: "center" | "start";

package/es/modal/modal.vue.d.ts

@@ -279,6 +279,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     visible: boolean;
     unmountOnClose: boolean;
     renderToBody: boolean;
+    escToClose: boolean;
     defaultVisible: boolean;
     closable: boolean;
     simple: boolean;
@@ -286,7 +287,6 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     titleEllipsisTooltip: boolean | EllipsisTooltipProps;
     maskClosable: boolean;
     okLoading: boolean;
-    escToClose: boolean;
     hideCancel: boolean;
     alignCenter: boolean;
     titleAlign: "center" | "start";

package/es/modal/modal.vue_vue_type_script_setup_true_lang.js

@@ -1,26 +1,28 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isBoolean, isFunction, isNumber, isPromise } from "../_utils/is.js";
-import { contains, getElement, off, on } from "../_utils/dom.js";
+import { getElement, off, on } from "../_utils/dom.js";
 import icon_hover_default from "../_components/icon-hover.js";
+import { KEYBOARD_KEY, onActivate } from "../_utils/keyboard.js";
 import IconCheckCircleFill from "../icon/icon-check-circle-fill/index.js";
 import IconClose from "../icon/icon-close/index.js";
 import IconCloseCircleFill from "../icon/icon-close-circle-fill/index.js";
 import IconExclamationCircleFill from "../icon/icon-exclamation-circle-fill/index.js";
 import IconInfoCircleFill from "../icon/icon-info-circle-fill/index.js";
 import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/asyncToGenerator.js";
-import Button from "../button/index.js";
-import { KEYBOARD_KEY } from "../_utils/keyboard.js";
+import { useI18n } from "../locale/index.js";
 import client_only_default from "../_components/client-only.js";
 import usePopupManager from "../_hooks/use-popup-manager.js";
 import { useTeleportContainer } from "../_hooks/use-teleport-container.js";
-import { useI18n } from "../locale/index.js";
+import Button from "../button/index.js";
 import Ellipsis from "../ellipsis/index.js";
 import { useConfigProviderProp } from "../_hooks/use-config-provider-prop.js";
+import { getFocusableElements, useFocusTrap } from "../_hooks/use-focus-trap.js";
 import { useOverflow } from "../_hooks/use-overflow.js";
 import { useDraggable } from "./hooks/use-draggable.js";
-import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, toDisplayString, toRefs, unref, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, toDisplayString, toRefs, unref, useSlots, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 //#region components/modal/modal.vue?vue&type=script&setup=true&lang.tsx
+var _hoisted_1 = ["aria-labelledby"];
 var modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
 	name: "Modal",
 	inheritAttrs: false
@@ -319,8 +321,13 @@ var modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 		const { fullscreen, popupContainer, alignCenter, mask, maskClosable, maskStyle, closable, titleAlign, top, footer, hideCancel, escToClose, draggable, okText, cancelText, okButtonProps, cancelButtonProps, titleEllipsisTooltip, width } = toRefs(props);
 		const prefixCls = getPrefixCls("modal");
 		const { t } = useI18n();
+		const slots = useSlots();
 		const wrapperRef = ref();
 		const modalRef = ref();
+		const titleId = `sd-modal-title-${getCurrentInstance().uid}`;
+		const bodyId = `sd-modal-body-${getCurrentInstance().uid}`;
+		const hasTitle = computed(() => !props.hideTitle && (Boolean(props.title) || Boolean(slots.title)));
+		const { activate: activateFocusTrap, deactivate: deactivateFocusTrap } = useFocusTrap(modalRef, { initialFocus: (c) => getFocusableElements(c).find((el) => !el.closest(".sd-modal-close-btn")) });
 		const { mergedValue: mergedMask } = useConfigProviderProp(mask, {
 			propNames: ["mask"],
 			getGlobalValue: (configProviderCtx) => {
@@ -537,10 +544,7 @@ var modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 			if (mergedMask.value && mergedMaskClosable.value && currentIsMask.value) handleCancel(e);
 		};
 		const handleOpen = () => {
-			if (computedVisible.value) {
-				if (!contains(wrapperRef.value, document.activeElement) && document.activeElement instanceof HTMLElement) document.activeElement.blur();
-				emit("open");
-			}
+			if (computedVisible.value) emit("open");
 		};
 		const handleClose = () => {
 			if (!computedVisible.value) {
@@ -556,6 +560,7 @@ var modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 			if (computedVisible.value) {
 				setOverflowHidden();
 				if (mergedEscToClose.value) addGlobalKeyDownListener();
+				nextTick(() => activateFocusTrap());
 			}
 		});
 		onBeforeUnmount(() => {
@@ -570,9 +575,11 @@ var modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 				currentIsMask.value = false;
 				setOverflowHidden();
 				addGlobalKeyDownListener();
+				nextTick(() => activateFocusTrap());
 			} else {
 				emit("beforeClose");
 				removeGlobalKeyDownListener();
+				deactivateFocusTrap();
 			}
 		});
 		watch(fullscreen, () => {
@@ -635,14 +642,20 @@ var modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 						ref_key: "modalRef",
 						ref: modalRef,
 						class: normalizeClass(modalCls.value),
-						style: normalizeStyle(mergedModalStyle.value)
+						style: normalizeStyle(mergedModalStyle.value),
+						role: "dialog",
+						"aria-modal": "true",
+						"aria-labelledby": hasTitle.value ? titleId : void 0,
+						"aria-describedby": bodyId,
+						tabindex: "-1"
 					}, [
 						!__props.hideTitle && (_ctx.$slots.title || __props.title || unref(mergedClosable)) ? (openBlock(), createElementBlock("div", {
 							key: 0,
 							class: normalizeClass(headerCls.value),
-							onMousedown: _cache[0] || (_cache[0] = (...args) => unref(handleMoveDown) && unref(handleMoveDown)(...args))
+							onMousedown: _cache[1] || (_cache[1] = (...args) => unref(handleMoveDown) && unref(handleMoveDown)(...args))
 						}, [_ctx.$slots.title || __props.title ? (openBlock(), createElementBlock("div", {
 							key: 0,
+							id: titleId,
 							class: normalizeClass([
 								`${unref(prefixCls)}-title`,
 								`${unref(prefixCls)}-title-align-${unref(mergedTitleAlign)}`,
@@ -664,16 +677,18 @@ var modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 							_: 3
 						}, 8, ["class", "tooltip"])], 2)) : createCommentVNode("", true), !__props.simple && unref(mergedClosable) ? (openBlock(), createElementBlock("div", {
 							key: 1,
-							tabindex: "-1",
+							tabindex: "0",
 							role: "button",
 							"aria-label": "Close",
 							class: normalizeClass(`${unref(prefixCls)}-close-btn`),
-							onClick: handleCancel
+							onClick: handleCancel,
+							onKeydown: _cache[0] || (_cache[0] = ($event) => unref(onActivate)(handleCancel))
 						}, [createVNode(icon_hover_default, null, {
 							default: withCtx(() => [createVNode(unref(IconClose))]),
 							_: 1
-						})], 2)) : createCommentVNode("", true)], 34)) : createCommentVNode("", true),
+						})], 34)) : createCommentVNode("", true)], 34)) : createCommentVNode("", true),
 						createElementVNode("div", {
+							id: bodyId,
 							class: normalizeClass([`${unref(prefixCls)}-body`, __props.bodyClass]),
 							style: normalizeStyle(__props.bodyStyle)
 						}, [renderSlot(_ctx.$slots, "default")], 6),
@@ -690,7 +705,7 @@ var modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 							default: withCtx(() => [createTextVNode(toDisplayString(okDisplayText.value), 1)]),
 							_: 1
 						}, 16, ["loading"])])], 2)) : createCommentVNode("", true)
-					], 6), [[vShow, computedVisible.value]])]),
+					], 14, _hoisted_1), [[vShow, computedVisible.value]])]),
 					_: 3
 				}, 8, ["name"])], 34)], 16)), [[vShow, computedVisible.value || mounted.value]]) : createCommentVNode("", true)], 8, ["to", "disabled"]))]),
 				_: 3

package/es/modal/style/index.css

@@ -198,7 +198,7 @@
 
 .zoom-modal-enter-from,
 .zoom-modal-appear-from {
-  transform: scale(0.5, 0.5);
+  transform: scale(0.94, 0.94);
   opacity: 0;
 }
 
@@ -219,7 +219,7 @@
 }
 
 .zoom-modal-leave-to {
-  transform: scale(0.5, 0.5);
+  transform: scale(0.94, 0.94);
   opacity: 0;
 }
 

package/es/modal/style/index.scss

@@ -238,7 +238,8 @@ $modal-prefix-cls: string.unquote('#{theme.$prefix}-modal');
 
 .zoom-modal-enter-from,
 .zoom-modal-appear-from {
-  transform: scale(0.5, 0.5);
+  // 从 scale(0.94) 起步而非 scale(0.5)：弹窗只需轻微放大，过大的缩放显得突兀
+  transform: scale(0.94, 0.94);
   opacity: 0;
 }
 
@@ -261,7 +262,7 @@ $modal-prefix-cls: string.unquote('#{theme.$prefix}-modal');
 }
 
 .zoom-modal-leave-to {
-  transform: scale(0.5, 0.5);
+  transform: scale(0.94, 0.94);
   opacity: 0;
 }
 

package/es/notification/style/index.css

@@ -56,7 +56,7 @@
   border-radius: var(--sd-border-radius-medium);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   opacity: 1;
-  transition: opacity 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-notification:not(:last-child) {
   margin-bottom: 20px;
@@ -186,7 +186,7 @@
 }
 
 .slide-left-notification-leave-active {
-  transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
+  transition: height 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), margin 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), padding 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 
 .slide-right-notification-enter-from,
@@ -218,5 +218,5 @@
 }
 
 .slide-right-notification-leave-active {
-  transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
+  transition: height 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), margin 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), padding 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
 }

package/es/notification/style/index.scss

@@ -55,7 +55,7 @@ $notification-prefix-cls: string.unquote('#{theme.$prefix}-notification');
   border-radius: $notification-border-radius;
   box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
   opacity: 1;
-  transition: opacity theme.$transition-duration-2 theme.$transition-timing-function-linear;
+  transition: opacity theme.$transition-duration-2 theme.$transition-timing-function-standard;
 
   &:not(:last-child) {
     margin-bottom: $notification-margin-bottom;
@@ -213,7 +213,11 @@ $notification-prefix-cls: string.unquote('#{theme.$prefix}-notification');
 }
 
 .slide-left-notification-leave-active {
-  transition: all theme.$transition-duration-3 theme.$transition-timing-function-standard;
+  transition:
+    height theme.$transition-duration-3 theme.$transition-timing-function-standard,
+    margin theme.$transition-duration-3 theme.$transition-timing-function-standard,
+    padding theme.$transition-duration-3 theme.$transition-timing-function-standard,
+    opacity theme.$transition-duration-3 theme.$transition-timing-function-standard;
 }
 
 .slide-right-notification-enter-from,
@@ -245,5 +249,9 @@ $notification-prefix-cls: string.unquote('#{theme.$prefix}-notification');
 }
 
 .slide-right-notification-leave-active {
-  transition: all theme.$transition-duration-3 theme.$transition-timing-function-standard;
+  transition:
+    height theme.$transition-duration-3 theme.$transition-timing-function-standard,
+    margin theme.$transition-duration-3 theme.$transition-timing-function-standard,
+    padding theme.$transition-duration-3 theme.$transition-timing-function-standard,
+    opacity theme.$transition-duration-3 theme.$transition-timing-function-standard;
 }

package/es/page-header/page-header.vue.d.ts

@@ -1,16 +1,16 @@
-declare var __VLS_1: {}, __VLS_11: {}, __VLS_18: {}, __VLS_20: {}, __VLS_22: {}, __VLS_24: {};
+declare var __VLS_1: {}, __VLS_12: {}, __VLS_19: {}, __VLS_21: {}, __VLS_23: {}, __VLS_25: {};
 type __VLS_Slots = {} & {
     breadcrumb?: (props: typeof __VLS_1) => any;
 } & {
-    'back-icon'?: (props: typeof __VLS_11) => any;
+    'back-icon'?: (props: typeof __VLS_12) => any;
 } & {
-    title?: (props: typeof __VLS_18) => any;
+    title?: (props: typeof __VLS_19) => any;
 } & {
-    subtitle?: (props: typeof __VLS_20) => any;
+    subtitle?: (props: typeof __VLS_21) => any;
 } & {
-    extra?: (props: typeof __VLS_22) => any;
+    extra?: (props: typeof __VLS_23) => any;
 } & {
-    default?: (props: typeof __VLS_24) => any;
+    default?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     title: StringConstructor;

package/es/page-header/page-header.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import icon_hover_default from "../_components/icon-hover.js";
+import { isActivationKey } from "../_utils/keyboard.js";
 import IconLeft from "../icon/icon-left/index.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
 //#region components/page-header/page-header.vue?vue&type=script&setup=true&lang.ts
@@ -65,6 +66,12 @@ var page_header_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		const handleBack = (e) => {
 			emit("back", e);
 		};
+		const handleBackKeydown = (ev) => {
+			if (isActivationKey(ev)) {
+				ev.preventDefault();
+				handleBack(ev);
+			}
+		};
 		const cls = computed(() => [prefixCls, {
 			[`${prefixCls}-with-breadcrumb`]: Boolean(slots.breadcrumb),
 			[`${prefixCls}-with-content`]: Boolean(slots.default)
@@ -78,7 +85,11 @@ var page_header_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 					key: 0,
 					class: normalizeClass(`${unref(prefixCls)}-back-btn`),
 					prefix: unref(prefixCls),
-					onClick: handleBack
+					role: "button",
+					tabindex: "0",
+					"aria-label": "Back",
+					onClick: handleBack,
+					onKeydown: handleBackKeydown
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "back-icon", {}, () => [createVNode(unref(IconLeft))])]),
 					_: 3

package/es/pagination/page-item-ellipsis.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,6 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
+import { isActivationKey } from "../_utils/keyboard.js";
 import IconMore from "../icon/icon-more/index.js";
 import { getLegalPage } from "./utils.js";
 import { computed, createElementBlock, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
@@ -32,12 +33,21 @@ var page_item_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		const handleClick = (e) => {
 			emit("click", nextPage.value);
 		};
+		const handleKeydown = (e) => {
+			if (isActivationKey(e)) {
+				e.preventDefault();
+				emit("click", nextPage.value);
+			}
+		};
 		const cls = computed(() => [prefixCls, `${prefixCls}-ellipsis`]);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("li", {
 				class: normalizeClass(cls.value),
-				onClick: handleClick
-			}, [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(unref(IconMore))])], 2);
+				tabindex: "0",
+				"aria-label": "More pages",
+				onClick: handleClick,
+				onKeydown: handleKeydown
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(unref(IconMore))])], 34);
 		};
 	}
 }));

package/es/pagination/page-item-step.vue.d.ts

@@ -1,8 +1,8 @@
-declare var __VLS_10: {
+declare var __VLS_11: {
     type: string;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     pages: {

package/es/pagination/page-item-step.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,6 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
+import { isActivationKey } from "../_utils/keyboard.js";
 import IconRight from "../icon/icon-right/index.js";
 import IconLeft from "../icon/icon-left/index.js";
 import { getLegalPage } from "./utils.js";
@@ -48,6 +49,13 @@ var page_item_step_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		const handleClick = (e) => {
 			if (!mergedDisabled.value) emit("click", nextPage.value);
 		};
+		const handleKeydown = (e) => {
+			if (mergedDisabled.value) return;
+			if (isActivationKey(e)) {
+				e.preventDefault();
+				emit("click", nextPage.value);
+			}
+		};
 		const cls = computed(() => [
 			prefixCls,
 			`${prefixCls}-${props.type}`,
@@ -56,11 +64,20 @@ var page_item_step_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(resolveDynamicComponent(__props.simple ? "span" : "li"), {
 				class: normalizeClass(cls.value),
-				onClick: handleClick
+				"aria-label": isNext ? "Next page" : "Previous page",
+				"aria-disabled": mergedDisabled.value || void 0,
+				tabindex: mergedDisabled.value ? -1 : 0,
+				onClick: handleClick,
+				onKeydown: handleKeydown
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { type: isNext ? "next" : "previous" }, () => [isNext ? (openBlock(), createBlock(unref(IconRight), { key: 0 })) : (openBlock(), createBlock(unref(IconLeft), { key: 1 }))])]),
 				_: 3
-			}, 8, ["class"]);
+			}, 40, [
+				"class",
+				"aria-label",
+				"aria-disabled",
+				"tabindex"
+			]);
 		};
 	}
 }));

package/es/pagination/page-item.vue.d.ts

@@ -23,7 +23,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<CSSProperties>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (_pageNumber: number, _e: MouseEvent) => any;
+    click: (_pageNumber: number, _e: Event) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     pageNumber: {
         type: NumberConstructor;
@@ -42,7 +42,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<CSSProperties>;
     };
 }>> & Readonly<{
-    onClick?: ((_pageNumber: number, _e: MouseEvent) => any) | undefined;
+    onClick?: ((_pageNumber: number, _e: Event) => any) | undefined;
 }>, {
     disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;