@sdata/web-vue 3.13.0 → 3.15.0

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,29 @@
 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 { useI18n } from "../locale/index.js";
+import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/asyncToGenerator.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 Button from "../button/index.js";
-import { KEYBOARD_KEY } from "../_utils/keyboard.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 _hoisted_2 = ["aria-label"];
 var modal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
 	name: "Modal",
 	inheritAttrs: false
@@ -319,8 +322,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 +545,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 +561,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 +576,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 +643,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 +678,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",
+							"aria-label": unref(t)("a11y.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),
+						})], 42, _hoisted_2)) : 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 +706,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/overflow-list/overflow-list.js

@@ -1,8 +1,8 @@
 import { getPrefixCls } from "../_utils/global-config.js";
 import { getAllElements } from "../_utils/vue-utils.js";
 import resize_observer_v2_default from "../_components/resize-observer-v2.js";
-import Tag from "../tag/index.js";
 import { getReverse } from "../_utils/array.js";
+import Tag from "../tag/index.js";
 import { computed, createTextVNode, createVNode, defineComponent, mergeProps, onMounted, ref, watch } from "vue";
 //#region components/overflow-list/overflow-list.tsx
 var overflow_list_default = /* @__PURE__ */ defineComponent({

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,8 @@
 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 { useI18n } from "../locale/index.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
@@ -61,10 +63,17 @@ var page_header_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		* @slot extra
 		*/
 		const slots = useSlots();
+		const { t } = useI18n();
 		const prefixCls = getPrefixCls("page-header");
 		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,11 +87,19 @@ 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": unref(t)("a11y.back"),
+					onClick: handleBack,
+					onKeydown: handleBackKeydown
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "back-icon", {}, () => [createVNode(unref(IconLeft))])]),
 					_: 3
-				}, 8, ["class", "prefix"])) : createCommentVNode("", true),
+				}, 8, [
+					"class",
+					"prefix",
+					"aria-label"
+				])) : createCommentVNode("", true),
 				createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-title`) }, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2),
 				_ctx.$slots.subtitle || __props.subtitle ? (openBlock(), createElementBlock("span", {
 					key: 1,

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

@@ -1,9 +1,12 @@
 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 { useI18n } from "../locale/index.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";
 //#region components/pagination/page-item-ellipsis.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
 var page_item_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "EllipsisPager" }), {}, {
 	__name: "page-item-ellipsis",
 	props: {
@@ -24,6 +27,7 @@ var page_item_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const { t } = useI18n();
 		const prefixCls = getPrefixCls("pagination-item");
 		const nextPage = computed(() => getLegalPage(props.current + props.step, {
 			min: 1,
@@ -32,12 +36,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": unref(t)("a11y.morePages"),
+				onClick: handleClick,
+				onKeydown: handleKeydown
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(unref(IconMore))])], 42, _hoisted_1);
 		};
 	}
 }));

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,8 +1,10 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
-import IconRight from "../icon/icon-right/index.js";
-import IconLeft from "../icon/icon-left/index.js";
+import { isActivationKey } from "../_utils/keyboard.js";
+import { useI18n } from "../locale/index.js";
 import { getLegalPage } from "./utils.js";
+import IconLeft from "../icon/icon-left/index.js";
+import IconRight from "../icon/icon-right/index.js";
 import { computed, createBlock, defineComponent, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
 //#region components/pagination/page-item-step.vue?vue&type=script&setup=true&lang.ts
 var page_item_step_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "StepPager" }), {}, {
@@ -33,6 +35,7 @@ var page_item_step_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const { t } = useI18n();
 		const prefixCls = getPrefixCls("pagination-item");
 		const isNext = props.type === "next";
 		const mergedDisabled = computed(() => {
@@ -48,6 +51,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 +66,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 ? unref(t)("a11y.nextPage") : unref(t)("a11y.prevPage"),
+				"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>;

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

@@ -1,7 +1,13 @@
 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 { computed, createElementBlock, createTextVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString } from "vue";
 //#region components/pagination/page-item.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"tabindex",
+	"aria-current",
+	"aria-disabled"
+];
 var page_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "Pager" }), {}, {
 	__name: "page-item",
 	props: {
@@ -20,9 +26,17 @@ var page_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const emit = __emit;
 		const prefixCls = getPrefixCls("pagination-item");
 		const isActive = computed(() => props.current === props.pageNumber);
-		const handleClick = (e) => {
+		const activate = (e) => {
 			if (!props.disabled) emit("click", props.pageNumber, e);
 		};
+		const handleClick = (e) => activate(e);
+		const handleKeydown = (e) => {
+			if (props.disabled) return;
+			if (isActivationKey(e)) {
+				e.preventDefault();
+				activate(e);
+			}
+		};
 		const cls = computed(() => [prefixCls, { [`${prefixCls}-active`]: isActive.value }]);
 		const mergedStyle = computed(() => {
 			return isActive.value ? props.activeStyle : props.style;
@@ -31,8 +45,12 @@ var page_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			return openBlock(), createElementBlock("li", {
 				class: normalizeClass(cls.value),
 				style: normalizeStyle(mergedStyle.value),
-				onClick: handleClick
-			}, [renderSlot(_ctx.$slots, "default", { page: __props.pageNumber }, () => [createTextVNode(toDisplayString(__props.pageNumber), 1)])], 6);
+				tabindex: __props.disabled ? -1 : 0,
+				"aria-current": isActive.value ? "page" : void 0,
+				"aria-disabled": __props.disabled || void 0,
+				onClick: handleClick,
+				onKeydown: handleKeydown
+			}, [renderSlot(_ctx.$slots, "default", { page: __props.pageNumber }, () => [createTextVNode(toDisplayString(__props.pageNumber), 1)])], 46, _hoisted_1);
 		};
 	}
 }));

package/es/pagination/pagination.js

@@ -432,7 +432,11 @@ var pagination_default = /* @__PURE__ */ defineComponent({
 		return () => {
 			var _slots$total, _slots$total2, _mergedPageSizeOption;
 			if (props.hideOnSinglePage && pages.value <= 1) return null;
-			return createVNode("div", { "class": cls.value }, [
+			return createVNode("div", {
+				"role": "navigation",
+				"aria-label": t("a11y.pagination"),
+				"class": cls.value
+			}, [
 				mergedShowTotal.value && createVNode("span", { "class": `${prefixCls}-total` }, [(_slots$total = (_slots$total2 = slots.total) === null || _slots$total2 === void 0 ? void 0 : _slots$total2.call(slots, { total: props.total })) !== null && _slots$total !== void 0 ? _slots$total : t("pagination.total", props.total)]),
 				renderPager(),
 				mergedShowPageSize.value && createVNode(page_options_default, {

package/es/pagination/style/index.css

@@ -41,7 +41,13 @@
   border-radius: var(--sd-border-radius-small);
   outline: 0;
   cursor: pointer;
+  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), border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), transform 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
   user-select: none;
+}
+.sd-pagination-item:active:not(.sd-pagination-item-disabled) {
+  transform: scale(0.97);
+}
+.sd-pagination-item {
   min-width: 32px;
   height: 32px;
   font-size: 14px;
@@ -59,7 +65,6 @@
   color: rgb(var(--sd-primary-6));
   background-color: var(--sd-color-primary-light-1);
   border-color: transparent;
-  transition: color 0.2s cubic-bezier(0, 0, 1, 1), background-color 0.2s cubic-bezier(0, 0, 1, 1);
 }
 .sd-pagination-item-disabled, .sd-pagination-item-disabled:hover {
   color: var(--sd-color-text-4);