@sdata/web-vue 3.13.0 → 3.14.0

package/es/avatar/style/index.css

@@ -80,7 +80,7 @@
   text-align: center;
   background-color: var(--sd-color-neutral-2);
   border-radius: var(--sd-border-radius-circle);
-  transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-avatar-trigger-icon-mask {
   position: absolute;
@@ -97,7 +97,7 @@
   background-color: color-mix(in srgb, #1d2129 60%, transparent);
   border-radius: var(--sd-border-radius-medium);
   opacity: 0;
-  transition: all 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-avatar-circle .sd-avatar-trigger-icon-mask {
   border-radius: var(--sd-border-radius-circle);

package/es/avatar/style/index.scss

@@ -80,7 +80,7 @@ $avatar-prefix-cls: string.unquote('#{theme.$prefix}-avatar');
     background-color: $avatar-color-trigger-button-bg;
     border-radius: $avatar-border-trigger-button-radius;
     transition: background-color theme.$transition-duration-1
-      theme.$transition-timing-function-linear;
+      theme.$transition-timing-function-standard;
   }
 
   &-trigger-icon-mask {
@@ -102,7 +102,7 @@ $avatar-prefix-cls: string.unquote('#{theme.$prefix}-avatar');
     );
     border-radius: $avatar-square-border-radius;
     opacity: 0;
-    transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+    transition: opacity theme.$transition-duration-1 theme.$transition-timing-function-standard;
   }
 
   &-circle &-trigger-icon-mask {

package/es/back-top/back-top.vue_vue_type_script_setup_true_lang.js

@@ -89,7 +89,11 @@ var back_top_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 					key: 0,
 					class: normalizeClass(unref(prefixCls)),
 					onClick: scrollToTop
-				}, [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("button", { class: normalizeClass(`${unref(prefixCls)}-btn`) }, [createVNode(unref(IconToTop))], 2)])], 2)) : createCommentVNode("", true)]),
+				}, [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("button", {
+					type: "button",
+					class: normalizeClass(`${unref(prefixCls)}-btn`),
+					"aria-label": "Back to top"
+				}, [createVNode(unref(IconToTop))], 2)])], 2)) : createCommentVNode("", true)]),
 				_: 3
 			});
 		};

package/es/back-top/style/index.css

@@ -32,7 +32,7 @@
   border-radius: var(--sd-border-radius-circle);
   outline: none;
   cursor: pointer;
-  transition: all 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-back-top-btn:hover {
   background-color: rgb(var(--sd-primary-5));

package/es/back-top/style/index.scss

@@ -21,7 +21,8 @@ $backtop-prefix-cls: string.unquote('#{theme.$prefix}-back-top');
     border-radius: $backtop-button-border-radius;
     outline: none;
     cursor: pointer;
-    transition: all theme.$transition-duration-2 theme.$transition-timing-function-linear;
+    transition: background-color theme.$transition-duration-2
+      theme.$transition-timing-function-standard;
 
     &:hover {
       background-color: $backtop-button-color-bg_hover;

package/es/badge/badge.js

@@ -126,9 +126,12 @@ var badge_default = /* @__PURE__ */ defineComponent({
 					[`${prefixCls}-status-${statusValue}`]: statusValue,
 					[`${prefixCls}-color-${colorValue}`]: colorValue
 				}],
-				"style": mergedStyle
+				"style": mergedStyle,
+				"aria-hidden": "true"
 			}, null), textValue && createVNode("span", { "class": `${prefixCls}-status-text` }, [textValue])]);
 			if ((dotValue || colorValue) && countValue > 0) return createVNode("span", {
+				"role": "status",
+				"aria-label": String(countValue),
 				"class": [`${prefixCls}-dot`, { [`${prefixCls}-color-${colorValue}`]: colorValue }],
 				"style": mergedStyle
 			}, null);

package/es/badge/style/index.css

@@ -144,7 +144,7 @@
 
 @keyframes sd-badge-scale {
   from {
-    transform: scale(0, 0);
+    transform: scale(0.5, 0.5);
   }
   to {
     transform: scale(1, 1);
@@ -152,7 +152,7 @@
 }
 .badge-zoom-enter,
 .badge-zoom-appear {
-  transform: translate(50%, -50%) scale(0.2, 0.2);
+  transform: translate(50%, -50%) scale(0.5, 0.5);
   transform-origin: center;
 }
 
@@ -171,7 +171,7 @@
 }
 
 .badge-zoom-exit-active {
-  transform: translate(50%, -50%) scale(0.2, 0.2);
+  transform: translate(50%, -50%) scale(0.5, 0.5);
   transform-origin: center;
   opacity: 0;
   transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);

package/es/badge/style/index.scss

@@ -159,7 +159,7 @@ $badge-prefix-cls: string.unquote('#{theme.$prefix}-badge');
 
 @keyframes #{theme.$prefix}-badge-scale {
   from {
-    transform: scale(0, 0);
+    transform: scale(0.5, 0.5);
   }
 
   to {
@@ -169,7 +169,7 @@ $badge-prefix-cls: string.unquote('#{theme.$prefix}-badge');
 
 .badge-zoom-enter,
 .badge-zoom-appear {
-  transform: translate(50%, -50%) scale(0.2, 0.2);
+  transform: translate(50%, -50%) scale(0.5, 0.5);
   // opacity: 0;
   transform-origin: center;
 }
@@ -191,7 +191,7 @@ $badge-prefix-cls: string.unquote('#{theme.$prefix}-badge');
 }
 
 .badge-zoom-exit-active {
-  transform: translate(50%, -50%) scale(0.2, 0.2);
+  transform: translate(50%, -50%) scale(0.5, 0.5);
   transform-origin: center;
   opacity: 0;
   transition:

package/es/breadcrumb/breadcrumb.js

@@ -105,6 +105,7 @@ var breadcrumb_default = /* @__PURE__ */ defineComponent({
 		return () => {
 			return createVNode("div", {
 				"role": "list",
+				"aria-label": "Breadcrumb",
 				"class": prefixCls
 			}, [slots.default ? renderByChildren() : renderByRoutes()]);
 		};

package/es/button/button.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ import IconLoading from "../icon/icon-loading/index.js";
 import { useSize } from "../_hooks/use-size.js";
 import Tooltip from "../tooltip/index.js";
 import { buttonGroupInjectionKey } from "./context.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, guardReactiveProps, inject, normalizeClass, normalizeProps, onMounted, onUpdated, openBlock, ref, renderSlot, resolveDynamicComponent, toRefs, unref, useSlots, withCtx } from "vue";
+import { cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, guardReactiveProps, inject, normalizeClass, normalizeProps, onMounted, onUpdated, openBlock, ref, renderSlot, resolveDynamicComponent, toRefs, unref, useSlots, withCtx } from "vue";
 //#region components/button/button.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["href"];
 var _hoisted_2 = { key: 2 };
@@ -114,10 +114,15 @@ var button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		*/
 		const { size, disabled } = toRefs(props);
 		const prefixCls = getPrefixCls("btn");
-		const PassThrough = (_, { slots: passSlots }) => {
-			var _passSlots$default;
-			return (_passSlots$default = passSlots.default) === null || _passSlots$default === void 0 ? void 0 : _passSlots$default.call(passSlots);
-		};
+		const PassThrough = defineComponent({
+			name: "ButtonPassThrough",
+			inheritAttrs: false,
+			setup: (_, { slots, attrs }) => () => {
+				var _slots$default;
+				const vnodes = (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
+				return (vnodes === null || vnodes === void 0 ? void 0 : vnodes.length) ? cloneVNode(vnodes[0], attrs) : void 0;
+			}
+		});
 		const slots = useSlots();
 		const hasTooltip = computed(() => props.tooltip != null || Boolean(slots.tooltip));
 		const tooltipWrapper = computed(() => hasTooltip.value ? Tooltip : PassThrough);

package/es/button/style/index.css

@@ -32,7 +32,7 @@
   white-space: nowrap;
   outline: none;
   cursor: pointer;
-  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), 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);
   appearance: none;
   user-select: none;
 }
@@ -40,7 +40,7 @@
   color: currentcolor;
 }
 .sd-btn:active {
-  transition: none;
+  transform: scale(0.97);
 }
 .sd-btn-long {
   display: flex;
@@ -80,13 +80,10 @@
   background: #fff;
   border-radius: inherit;
   opacity: 0.4;
-  transition: opacity 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
   content: "";
   pointer-events: none;
 }
-.sd-btn-loading-fixed-width {
-  transition: none;
-}
 .sd-btn-two-chinese-chars > *:not(svg) {
   margin-right: -0.3em;
   letter-spacing: 0.3em;
@@ -909,6 +906,9 @@
 .sd-btn-group .sd-btn-dashed:active {
   z-index: 2;
 }
+.sd-btn-group .sd-btn:active {
+  transform: none;
+}
 .sd-btn-group .sd-btn:first-child {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -923,4 +923,13 @@
 
 :where(body, [sd-theme])[sd-theme=dark] .sd-btn-primary.sd-btn-disabled {
   color: rgba(255, 255, 255, 0.3);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sd-btn:active {
+    transform: none;
+  }
+  .sd-btn .sd-icon-loading {
+    animation-duration: 3s;
+  }
 }

package/es/button/style/index.scss

@@ -63,7 +63,12 @@ $token-var-aliases: (
   white-space: nowrap;
   outline: none;
   cursor: pointer;
-  transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+  // 状态切换只过渡颜色与按压形变；box-shadow（聚焦环）保持即时切换以保证可见性
+  transition:
+    color theme.$transition-duration-1 theme.$transition-timing-function-standard,
+    background-color theme.$transition-duration-1 theme.$transition-timing-function-standard,
+    border-color theme.$transition-duration-1 theme.$transition-timing-function-standard,
+    transform theme.$transition-duration-1 theme.$transition-timing-function-standard;
   appearance: none;
   user-select: none;
 
@@ -72,7 +77,7 @@ $token-var-aliases: (
   }
 
   &:active {
-    transition: none;
+    transform: scale(0.97);
   }
 
   &-long {
@@ -119,16 +124,12 @@ $token-var-aliases: (
       background: #fff;
       border-radius: inherit;
       opacity: 0.4;
-      transition: opacity theme.$transition-duration-1 theme.$transition-timing-function-linear;
+      transition: opacity theme.$transition-duration-1 theme.$transition-timing-function-standard;
       content: '';
       pointer-events: none;
     }
   }
 
-  &-loading-fixed-width {
-    transition: none;
-  }
-
   &-two-chinese-chars > *:not(svg) {
     margin-right: -0.3em;
     letter-spacing: 0.3em;
@@ -324,6 +325,11 @@ $token-var-aliases: (
     }
   }
 
+  // 按钮组是连体控件，单个按钮按压形变会与相邻按钮产生缝隙，故禁用形变
+  .#{$btn-prefix-cls}:active {
+    transform: none;
+  }
+
   .#{$btn-prefix-cls}:first-child {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -344,3 +350,15 @@ $token-var-aliases: (
     color: rgb(255 255 255 / 30%);
   }
 }
+
+// 减少动态偏好：去掉按压形变（位移），保留颜色过渡（有助于理解状态）；
+// 放慢加载图标旋转，避免快速循环带来的不适，但仍可表达加载态
+@media (prefers-reduced-motion: reduce) {
+  .#{$btn-prefix-cls}:active {
+    transform: none;
+  }
+
+  .#{$btn-prefix-cls} .#{theme.$prefix}-icon-loading {
+    animation-duration: 3s;
+  }
+}

package/es/calendar/style/event.scss

@@ -56,7 +56,7 @@ $calendar-css-prefix: string.unquote('--#{theme.$prefix}-calendar');
 }
 
 [class*='-calendar-delete-btn-enter-from'] {
-  transform: scale(0) rotate(-90deg);
+  transform: scale(0.5) rotate(-90deg);
 }
 
 [class*='-calendar-delete-btn-enter-to'] {
@@ -64,6 +64,6 @@ $calendar-css-prefix: string.unquote('--#{theme.$prefix}-calendar');
 }
 
 [class*='-calendar-delete-btn-leave-active'] {
-  transform: scale(0);
+  transform: scale(0.5);
   transition: 0.3s ease-in-out;
 }

package/es/calendar/style/index.css

@@ -1626,7 +1626,7 @@
 }
 
 [class*=-calendar-delete-btn-enter-from] {
-  transform: scale(0) rotate(-90deg);
+  transform: scale(0.5) rotate(-90deg);
 }
 
 [class*=-calendar-delete-btn-enter-to] {
@@ -1634,6 +1634,6 @@
 }
 
 [class*=-calendar-delete-btn-leave-active] {
-  transform: scale(0);
+  transform: scale(0.5);
   transition: 0.3s ease-in-out;
 }

package/es/card/style/index.css

@@ -19,7 +19,7 @@
   position: relative;
   background: var(--sd-color-bg-2);
   border-radius: var(--sd-border-radius-none);
-  transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: box-shadow 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-card-header {
   position: relative;
@@ -79,7 +79,7 @@
   justify-content: center;
   color: var(--sd-color-text-2);
   cursor: pointer;
-  transition: color 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -124,7 +124,7 @@
 .sd-card-grid::before {
   position: absolute;
   inset: 0;
-  transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: box-shadow 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
   content: "";
   pointer-events: none;
 }

package/es/card/style/index.scss

@@ -23,7 +23,7 @@ $card-prefix-cls: string.unquote('#{theme.$prefix}-card');
   position: relative;
   background: $card-color-bg;
   border-radius: $card-border-radius-no-border;
-  transition: box-shadow theme.$transition-duration-2 theme.$transition-timing-function-linear;
+  transition: box-shadow theme.$transition-duration-2 theme.$transition-timing-function-standard;
 
   &-header {
     position: relative;
@@ -90,7 +90,7 @@ $card-prefix-cls: string.unquote('#{theme.$prefix}-card');
       justify-content: center;
       color: $card-color-action;
       cursor: pointer;
-      transition: color theme.$transition-duration-2 theme.$transition-timing-function-linear;
+      transition: color theme.$transition-duration-2 theme.$transition-timing-function-standard;
 
       @include text-ellipsis();
 
@@ -150,7 +150,7 @@ $card-prefix-cls: string.unquote('#{theme.$prefix}-card');
     &::before {
       position: absolute;
       inset: 0;
-      transition: box-shadow theme.$transition-duration-2 theme.$transition-timing-function-linear;
+      transition: box-shadow theme.$transition-duration-2 theme.$transition-timing-function-standard;
       content: '';
       pointer-events: none;
     }

package/es/carousel/carousel-arrow.vue.d.ts

@@ -8,8 +8,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    previousClick: (_ev: MouseEvent) => any;
-    nextClick: (_ev: MouseEvent) => any;
+    previousClick: (_ev: Event) => any;
+    nextClick: (_ev: Event) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     direction: {
         type: StringConstructor;
@@ -20,8 +20,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: string;
     };
 }>> & Readonly<{
-    onPreviousClick?: ((_ev: MouseEvent) => any) | undefined;
-    onNextClick?: ((_ev: MouseEvent) => any) | undefined;
+    onPreviousClick?: ((_ev: Event) => any) | undefined;
+    onNextClick?: ((_ev: Event) => any) | undefined;
 }>, {
     showArrow: string;
     direction: string;

package/es/carousel/carousel-arrow.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 IconDown from "../icon/icon-down/index.js";
 import IconLeft from "../icon/icon-left/index.js";
@@ -29,15 +30,30 @@ var carousel_arrow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		const onNextClick = (ev) => {
 			emit("nextClick", ev);
 		};
+		const onKeydown = (e, which) => {
+			if (isActivationKey(e)) {
+				e.preventDefault();
+				if (which === "previous") emit("previousClick", e);
+				else emit("nextClick", e);
+			}
+		};
 		const cls = computed(() => [`${prefixCls}-arrow`, { [`${prefixCls}-arrow-hover`]: props.showArrow === "hover" }]);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass(cls.value) }, [createElementVNode("div", {
+				role: "button",
+				tabindex: "0",
+				"aria-label": "Previous slide",
 				class: normalizeClass(`${unref(prefixCls)}-arrow-${__props.direction === "vertical" ? "top" : "left"}`),
-				onClick: onPreviousClick
-			}, [__props.direction === "horizontal" ? (openBlock(), createBlock(unref(IconLeft), { key: 0 })) : (openBlock(), createBlock(unref(IconUp), { key: 1 }))], 2), createElementVNode("div", {
+				onClick: onPreviousClick,
+				onKeydown: _cache[0] || (_cache[0] = (e) => onKeydown(e, "previous"))
+			}, [__props.direction === "horizontal" ? (openBlock(), createBlock(unref(IconLeft), { key: 0 })) : (openBlock(), createBlock(unref(IconUp), { key: 1 }))], 34), createElementVNode("div", {
+				role: "button",
+				tabindex: "0",
+				"aria-label": "Next slide",
 				class: normalizeClass(`${unref(prefixCls)}-arrow-${__props.direction === "vertical" ? "bottom" : "right"}`),
-				onClick: onNextClick
-			}, [__props.direction === "horizontal" ? (openBlock(), createBlock(unref(IconRight), { key: 0 })) : (openBlock(), createBlock(unref(IconDown), { key: 1 }))], 2)], 2);
+				onClick: onNextClick,
+				onKeydown: _cache[1] || (_cache[1] = (e) => onKeydown(e, "next"))
+			}, [__props.direction === "horizontal" ? (openBlock(), createBlock(unref(IconRight), { key: 0 })) : (openBlock(), createBlock(unref(IconDown), { key: 1 }))], 34)], 2);
 		};
 	}
 }));

package/es/carousel/carousel-indicator.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,15 @@
 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 { Fragment, computed, createElementBlock, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, unref } from "vue";
 //#region components/carousel/carousel-indicator.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-index"];
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = [
+	"data-index",
+	"aria-label",
+	"aria-current",
+	"onKeydown"
+];
 var carousel_indicator_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "Indicator" }), {}, {
 	__name: "carousel-indicator",
 	props: {
@@ -47,6 +54,12 @@ var carousel_indicator_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 				if (!Number.isNaN(index) && index !== props.activeIndex) emit("select", index);
 			}
 		};
+		const onItemKeydown = (event, index) => {
+			if (isActivationKey(event) && index !== props.activeIndex) {
+				event.preventDefault();
+				emit("select", index);
+			}
+		};
 		const eventHandlers = computed(() => {
 			return props.trigger === "click" ? { onClick } : { onMouseover: onClick };
 		});
@@ -66,13 +79,19 @@ var carousel_indicator_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 			return openBlock(), createElementBlock("div", mergeProps({ class: cls.value }, eventHandlers.value), [__props.type === "slider" ? (openBlock(), createElementBlock("span", {
 				key: 0,
 				style: normalizeStyle(sliderStyle.value),
+				"aria-label": `Slide ${__props.activeIndex + 1} of ${__props.count}`,
 				class: normalizeClass([`${unref(prefixCls)}-item`, `${unref(prefixCls)}-item-active`])
-			}, null, 6)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(Array(__props.count), (_, index) => {
+			}, null, 14, _hoisted_1)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(Array(__props.count), (_, index) => {
 				return openBlock(), createElementBlock("span", {
 					key: index,
+					role: "button",
+					tabindex: "0",
 					"data-index": index,
-					class: normalizeClass([`${unref(prefixCls)}-item`, { [`${unref(prefixCls)}-item-active`]: index === __props.activeIndex }])
-				}, null, 10, _hoisted_1);
+					"aria-label": `Go to slide ${index + 1}`,
+					"aria-current": index === __props.activeIndex ? "true" : void 0,
+					class: normalizeClass([`${unref(prefixCls)}-item`, { [`${unref(prefixCls)}-item-active`]: index === __props.activeIndex }]),
+					onKeydown: ($event) => onItemKeydown($event, index)
+				}, null, 42, _hoisted_2);
 			}), 128))], 16);
 		};
 	}

package/es/carousel/carousel-item.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { getPrefixCls } from "../_utils/global-config.js";
 import { carouselInjectionKey } from "./context.js";
 import { computed, createElementBlock, defineComponent, getCurrentInstance, inject, normalizeClass, normalizeStyle, openBlock, renderSlot } from "vue";
 //#region components/carousel/carousel-item.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-hidden"];
+var _hoisted_1 = ["aria-label", "aria-hidden"];
 var carousel_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "CarouselItem" }), {}, {
 	__name: "carousel-item",
 	setup(__props) {
@@ -14,6 +14,10 @@ var carousel_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			var _context$items$indexO, _context$items, _instance$uid;
 			return (_context$items$indexO = (_context$items = context.items) === null || _context$items === void 0 ? void 0 : _context$items.indexOf((_instance$uid = instance === null || instance === void 0 ? void 0 : instance.uid) !== null && _instance$uid !== void 0 ? _instance$uid : -1)) !== null && _context$items$indexO !== void 0 ? _context$items$indexO : -1;
 		});
+		const slideCount = computed(() => {
+			var _context$items$length, _context$items2;
+			return (_context$items$length = (_context$items2 = context.items) === null || _context$items2 === void 0 ? void 0 : _context$items2.length) !== null && _context$items$length !== void 0 ? _context$items$length : 0;
+		});
 		const isCurrent = computed(() => {
 			var _context$mergedIndexe;
 			return ((_context$mergedIndexe = context.mergedIndexes) === null || _context$mergedIndexe === void 0 ? void 0 : _context$mergedIndexe.mergedIndex) === index.value;
@@ -39,6 +43,9 @@ var carousel_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
+				role: "group",
+				"aria-roledescription": "slide",
+				"aria-label": `Slide ${index.value + 1} of ${slideCount.value}`,
 				"aria-hidden": !isCurrent.value,
 				class: normalizeClass(cls.value),
 				style: normalizeStyle(animationStyle.value)

package/es/carousel/carousel.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 { isNumber, isObject } from "../_utils/is.js";
+import { KEYBOARD_KEY } from "../_utils/keyboard.js";
 import { useChildrenComponents } from "../_hooks/use-children-components.js";
 import carousel_arrow_default from "./carousel-arrow.js";
 import carousel_indicator_default from "./carousel-indicator.js";
@@ -214,6 +215,15 @@ var carousel_default = /* @__PURE__ */ defineComponent({
 			isNegative: index < mergedIndexes.value.mergedIndex,
 			isManual: true
 		});
+		const onKeydown = (e) => {
+			if (e.key === KEYBOARD_KEY.ARROW_RIGHT || e.key === KEYBOARD_KEY.ARROW_DOWN) {
+				e.preventDefault();
+				onNextClick();
+			} else if (e.key === KEYBOARD_KEY.ARROW_LEFT || e.key === KEYBOARD_KEY.ARROW_UP) {
+				e.preventDefault();
+				onPreviousClick();
+			}
+		};
 		const eventHandlers = computed(() => {
 			return computedAutoPlay.value.hoverToPause ? {
 				onMouseenter: () => {
@@ -246,7 +256,14 @@ var carousel_default = /* @__PURE__ */ defineComponent({
 		return () => {
 			var _slots$default;
 			children.value = (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
-			return createVNode("div", mergeProps({ "class": cls.value }, eventHandlers.value), [
+			return createVNode("div", mergeProps({
+				"class": cls.value,
+				"role": "region",
+				"aria-roledescription": "carousel",
+				"aria-label": "Carousel",
+				"tabindex": "0",
+				"onKeydown": onKeydown
+			}, eventHandlers.value), [
 				createVNode("div", { "class": contentCls.value }, [children.value]),
 				hasIndicator.value && createVNode("div", { "class": indicatorCls.value }, [createVNode(carousel_indicator_default, {
 					"class": props.indicatorClass,

package/es/carousel/style/index.css

@@ -424,7 +424,7 @@
 }
 .sd-carousel-arrow-hover div {
   opacity: 0;
-  transition: all 0.3s;
+  transition: opacity 0.3s;
 }
 .sd-carousel:hover .sd-carousel-arrow-hover div {
   opacity: 1;

package/es/carousel/style/index.scss

@@ -372,7 +372,7 @@ $carousel-prefix-cls: string.unquote('#{theme.$prefix}-carousel');
 
   &-arrow-hover div {
     opacity: 0;
-    transition: all 0.3s;
+    transition: opacity 0.3s;
   }
 
   &:hover {