@sdata/web-vue 3.13.0 → 3.14.0

package/es/cascader/cascader.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,13 @@
 import { useFormItem } from "../_hooks/use-form-item.js";
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { isArray, isFunction, isNull, isUndefined } from "../_utils/is.js";
+import { KEYBOARD_KEY, getKeyDownHandler } from "../_utils/keyboard.js";
 import { useAllowClear } from "../_hooks/use-allow-clear.js";
 import { useDropdownVirtualListProps } from "../_hooks/use-dropdown-virtual-list-props.js";
 import { resolveDropdownVirtualListProps } from "../_utils/virtual-dropdown.js";
 import { useReadonlyTip, useReadonlyTipText } from "../_hooks/use-readonly-tip.js";
 import Trigger from "../trigger/index.js";
 import Tooltip from "../tooltip/index.js";
-import { KEYBOARD_KEY, getKeyDownHandler } from "../_utils/keyboard.js";
 import { useTrigger } from "../_hooks/use-trigger.js";
 import { cascaderInjectionKey } from "./context.js";
 import { getCheckedStatus, getLeafOptionInfos, getLeafOptionKeys, getOptionInfos, getOptionLabel, getValidValues, getValueKey } from "./utils.js";
@@ -185,6 +185,12 @@ var cascader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			var _props$triggerProps;
 			return (_props$triggerProps = props.triggerProps) !== null && _props$triggerProps !== void 0 ? _props$triggerProps : {};
 		});
+		const triggerInputAttrs = computed(() => ({
+			"role": "combobox",
+			"aria-expanded": computedPopupVisible.value,
+			"aria-haspopup": "menu",
+			"aria-autocomplete": mergedAllowSearch.value ? "list" : "none"
+		}));
 		watch(modelValue, (nextModelValue) => {
 			if (isUndefined(nextModelValue) || isNull(nextModelValue)) _value.value = getDefaultValue(props.multiple, props.pathMode);
 		});
@@ -483,6 +489,7 @@ var cascader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 					"popup-container": unref(popupContainer),
 					"prevent-focus": true,
 					"click-to-close": !Boolean(unref(mergedAllowSearch)),
+					"aria-has-popup": "menu",
 					onPopupVisibleChange: handlePopupVisibleChange
 				}), {
 					content: withCtx(() => [showSearchPanel.value ? (openBlock(), createBlock(unref(cascader_search_panel_default), {
@@ -542,7 +549,8 @@ var cascader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 						placeholder: unref(placeholder),
 						loading: unref(loading),
 						"max-tag-count": unref(maxTagCount),
-						"tag-nowrap": unref(tagNowrap)
+						"tag-nowrap": unref(tagNowrap),
+						"input-attrs": triggerInputAttrs.value
 					}, unref(attrs), {
 						onInputValueChange: handleInputValueChange,
 						onClear: handleClear,
@@ -590,6 +598,7 @@ var cascader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 						"loading",
 						"max-tag-count",
 						"tag-nowrap",
+						"input-attrs",
 						"onKeydown"
 					])]),
 					_: 3

package/es/cascader/style/index.css

@@ -85,7 +85,7 @@
 .sd-select-dropdown .sd-select-option-active, .sd-select-dropdown .sd-select-option:not(.sd-select-dropdown .sd-select-option-disabled):hover {
   color: var(--sd-color-text-1);
   background-color: var(--sd-color-fill-2);
-  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-select-dropdown .sd-select-option-disabled {
   color: var(--sd-color-text-4);
@@ -289,7 +289,7 @@
 .sd-cascader-option-active {
   color: var(--sd-color-text-1);
   background-color: var(--sd-color-fill-2);
-  transition: all 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-cascader-option-active:hover {
   color: var(--sd-color-text-1);

package/es/cascader/style/index.scss

@@ -217,7 +217,9 @@ $cascader-prefix-cls: string.unquote('#{theme.$prefix}-cascader');
     &-active {
       color: $cascader-color-item-text_active;
       background-color: $cascader-color-item-bg_active;
-      transition: all theme.$transition-duration-2 theme.$transition-timing-function-linear;
+      transition:
+        color theme.$transition-duration-2 theme.$transition-timing-function-standard,
+        background-color theme.$transition-duration-2 theme.$transition-timing-function-standard;
 
       &:hover {
         color: $cascader-color-item-text_active;

package/es/checkbox/checkbox-group.js

@@ -130,7 +130,10 @@ var checkbox_group_default = /* @__PURE__ */ defineComponent({
 		};
 		return () => {
 			var _slots$default;
-			return createVNode("span", { "class": cls.value }, [options.value.length > 0 ? renderOptions() : (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]);
+			return createVNode("span", {
+				"role": "group",
+				"class": cls.value
+			}, [options.value.length > 0 ? renderOptions() : (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]);
 		};
 	}
 });

package/es/checkbox/checkbox.d.ts

@@ -19,6 +19,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    tabindex: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     uninjectGroupContext: {
         type: BooleanConstructor;
         default: boolean;
@@ -46,6 +50,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    tabindex: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     uninjectGroupContext: {
         type: BooleanConstructor;
         default: boolean;
@@ -58,6 +66,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     modelValue: boolean | (string | number | boolean)[];
     defaultChecked: boolean;
     indeterminate: boolean;
+    tabindex: string | number;
     uninjectGroupContext: boolean;
 }, {}, {
     IconCheck: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/checkbox/checkbox.js

@@ -55,6 +55,14 @@ var checkbox_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		/**
+		* @zh 原生 input 的 tabindex（默认不渲染，input 保持原生可聚焦；树节点内传 -1 把 checkbox 移出 Tab 序列，改由 treeitem 统一聚焦/操作）
+		* @en tabindex for the native input (omitted by default so the input stays natively focusable; pass -1 in tree nodes to remove the checkbox from the Tab order and operate it via the treeitem)
+		*/
+		tabindex: {
+			type: [Number, String],
+			default: void 0
+		},
 		uninjectGroupContext: {
 			type: Boolean,
 			default: false
@@ -149,6 +157,11 @@ var checkbox_default = /* @__PURE__ */ defineComponent({
 			if (_checked.value !== checked) _checked.value = checked;
 			if (checkboxRef.value && checkboxRef.value.checked !== checked) checkboxRef.value.checked = checked;
 		});
+		watch(() => props.indeterminate, () => {
+			nextTick(() => {
+				if (checkboxRef.value) checkboxRef.value.indeterminate = props.indeterminate;
+			});
+		}, { immediate: true });
 		return () => {
 			var _ref, _ref2, _slots$checkbox, _checkboxGroupCtx$slo;
 			return createVNode("label", {
@@ -158,6 +171,7 @@ var checkbox_default = /* @__PURE__ */ defineComponent({
 				createVNode("input", {
 					"ref": checkboxRef,
 					"type": "checkbox",
+					"tabindex": props.tabindex,
 					"checked": computedChecked.value,
 					"value": props.value,
 					"class": `${prefixCls}-target`,

package/es/checkbox/index.d.ts

@@ -23,6 +23,10 @@ declare const Checkbox: {
             type: BooleanConstructor;
             default: boolean;
         };
+        tabindex: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
         uninjectGroupContext: {
             type: BooleanConstructor;
             default: boolean;
@@ -38,6 +42,7 @@ declare const Checkbox: {
         modelValue: boolean | (string | number | boolean)[];
         defaultChecked: boolean;
         indeterminate: boolean;
+        tabindex: string | number;
         uninjectGroupContext: boolean;
     }, true, {}, {}, {
         IconCheck: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -140,6 +145,10 @@ declare const Checkbox: {
             type: BooleanConstructor;
             default: boolean;
         };
+        tabindex: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
         uninjectGroupContext: {
             type: BooleanConstructor;
             default: boolean;
@@ -152,6 +161,7 @@ declare const Checkbox: {
         modelValue: boolean | (string | number | boolean)[];
         defaultChecked: boolean;
         indeterminate: boolean;
+        tabindex: string | number;
         uninjectGroupContext: boolean;
     }>;
     __isFragment?: never;
@@ -177,6 +187,10 @@ declare const Checkbox: {
         type: BooleanConstructor;
         default: boolean;
     };
+    tabindex: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     uninjectGroupContext: {
         type: BooleanConstructor;
         default: boolean;
@@ -192,6 +206,7 @@ declare const Checkbox: {
     modelValue: boolean | (string | number | boolean)[];
     defaultChecked: boolean;
     indeterminate: boolean;
+    tabindex: string | number;
     uninjectGroupContext: boolean;
 }, {}, string, {}, {
     IconCheck: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/checkbox/style/index.css

@@ -82,7 +82,7 @@
 }
 .sd-checkbox:hover .sd-checkbox-icon {
   border-color: var(--sd-color-fill-4);
-  transition: border-color 0.1s cubic-bezier(0, 0, 1, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
+  transition: border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
 }
 .sd-checkbox-checked:hover .sd-checkbox-icon, .sd-checkbox-indeterminate:hover .sd-checkbox-icon {
   transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);

package/es/checkbox/style/index.scss

@@ -84,7 +84,7 @@
   &:hover &-icon {
     border-color: $checkbox-mask-color-border_hover;
     transition:
-      border-color theme.$transition-duration-1 theme.$transition-timing-function-linear,
+      border-color theme.$transition-duration-1 theme.$transition-timing-function-standard,
       transform theme.$transition-duration-3 theme.$transition-timing-function-overshoot;
   }
 

package/es/collapse/collapse-item.js

@@ -1,6 +1,7 @@
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isNumber } from "../_utils/is.js";
 import icon_hover_default from "../_components/icon-hover.js";
+import { isActivationKey } from "../_utils/keyboard.js";
 import IconCaretLeft from "../icon/icon-caret-left/index.js";
 import IconCaretRight from "../icon/icon-caret-right/index.js";
 import { collapseKey } from "./context.js";
@@ -90,6 +91,16 @@ var collapse_item_default = /* @__PURE__ */ defineComponent({
 				(_collapseCtx$handleCl = collapseCtx.handleClick) === null || _collapseCtx$handleCl === void 0 || _collapseCtx$handleCl.call(collapseCtx, key, e);
 			}
 		};
+		const headerId = `${prefixCls}-${instance === null || instance === void 0 ? void 0 : instance.uid}-header`;
+		const contentId = `${prefixCls}-${instance === null || instance === void 0 ? void 0 : instance.uid}-content`;
+		const handleKeydown = (e) => {
+			if (props.disabled) return;
+			if (isActivationKey(e)) {
+				var _collapseCtx$handleCl2;
+				e.preventDefault();
+				(_collapseCtx$handleCl2 = collapseCtx.handleClick) === null || _collapseCtx$handleCl2 === void 0 || _collapseCtx$handleCl2.call(collapseCtx, key, e);
+			}
+		};
 		watch(isActive, (isActive) => {
 			if (isActive && !mounted.value) mounted.value = true;
 		});
@@ -137,17 +148,24 @@ var collapse_item_default = /* @__PURE__ */ defineComponent({
 				"role": "button",
 				"aria-disabled": props.disabled,
 				"aria-expanded": isActive.value,
-				"tabindex": "0",
+				"aria-controls": contentId,
+				"tabindex": props.disabled ? -1 : 0,
 				"class": headerCls.value,
-				"onClick": handleClick
+				"onClick": handleClick,
+				"onKeydown": handleKeydown
 			}, [
 				expandIconRender(),
-				createVNode("div", { "class": `${prefixCls}-header-title` }, [(_slots$header = (_slots$header2 = slots.header) === null || _slots$header2 === void 0 ? void 0 : _slots$header2.call(slots)) !== null && _slots$header !== void 0 ? _slots$header : props.header]),
+				createVNode("div", {
+					"id": headerId,
+					"class": `${prefixCls}-header-title`
+				}, [(_slots$header = (_slots$header2 = slots.header) === null || _slots$header2 === void 0 ? void 0 : _slots$header2.call(slots)) !== null && _slots$header !== void 0 ? _slots$header : props.header]),
 				slots.extra && createVNode("div", { "class": `${prefixCls}-header-extra` }, [(_slots$extra = slots.extra) === null || _slots$extra === void 0 ? void 0 : _slots$extra.call(slots)])
 			]), createVNode(Transition, mergeProps({ "name": "collapse-slider" }, transitionEvents), { default: () => {
 				var _slots$default;
 				return [withDirectives(createVNode("div", {
 					"role": "region",
+					"id": contentId,
+					"aria-labelledby": headerId,
 					"class": contentCls.value
 				}, [mounted.value && createVNode("div", {
 					"ref": "contentBoxRef",

package/es/collapse/context.d.ts

@@ -5,6 +5,6 @@ export interface CollapseContext {
     showExpandIcon?: boolean;
     expandIconPosition: string;
     destroyOnHide: boolean;
-    handleClick: (key: string | number, e: MouseEvent) => void;
+    handleClick: (key: string | number, e: Event) => void;
 }
 export declare const collapseKey: InjectionKey<CollapseContext>;

package/es/color-picker/color-picker.js

@@ -140,6 +140,7 @@ var color_picker_default = /* @__PURE__ */ defineComponent({
 	setup(props, { emit, slots }) {
 		const prefixCls = getPrefixCls("color-picker");
 		const innerValue = ref(props.defaultValue);
+		const popupVisible = ref(false);
 		const innerRecentColors = ref(Array.isArray(props.defaultRecentColors) ? props.defaultRecentColors : []);
 		const mergedValue = computed(() => {
 			var _props$modelValue;
@@ -201,6 +202,7 @@ var color_picker_default = /* @__PURE__ */ defineComponent({
 			handleColorChange(formatColorState(parseColorState(value, props.colorModes), normalizedFormat.value, mergedEnableAlpha.value), "input");
 		};
 		const onPopupVisibleChange = (visible) => {
+			popupVisible.value = visible;
 			emit("popup-visible-change", visible, triggerInputValue.value);
 		};
 		const { tipVisible, show: showReadonlyTip } = useReadonlyTip(toRef(props, "readonly"), toRef(props, "disabled"));
@@ -229,6 +231,10 @@ var color_picker_default = /* @__PURE__ */ defineComponent({
 				"disabled": props.disabled,
 				"readonly": props.readonly,
 				"modelValue": triggerInputValue.value,
+				"inputAttrs": {
+					"aria-haspopup": "dialog",
+					"aria-expanded": popupVisible.value
+				},
 				"onChange": handleTriggerInputChange,
 				"onClear": handleClear
 			}, props.inputProps), { prefix: () => createVNode("div", {

package/es/copy/copy.vue_vue_type_script_setup_true_lang.js

@@ -6,7 +6,7 @@ import Button from "../button/index.js";
 import IconCopy from "../icon/icon-copy/index.js";
 import Link from "../link/index.js";
 import Message from "../message/index.js";
-import { computed, createBlock, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, unref, useAttrs, withCtx } from "vue";
+import { computed, createBlock, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, unref, useAttrs, useSlots, withCtx } from "vue";
 import copy from "copy-to-clipboard";
 //#region components/copy/copy.vue?vue&type=script&setup=true&lang.ts
 var copy_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
@@ -49,7 +49,14 @@ var copy_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		const props = __props;
 		const emit = __emit;
 		const attrs = useAttrs();
+		const slots = useSlots();
 		const prefixCls = getPrefixCls("copy");
+		const computedAriaLabel = computed(() => {
+			const consumer = attrs["aria-label"];
+			if (consumer !== void 0) return consumer;
+			if (slots.default) return void 0;
+			return props.tooltip;
+		});
 		const componentMap = {
 			link: Link,
 			button: Button
@@ -81,12 +88,13 @@ var copy_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			return openBlock(), createBlock(unref(Tooltip), normalizeProps(guardReactiveProps(mergedTooltipProps.value)), {
 				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(renderComponent.value), mergeProps(unref(attrs), {
 					class: componentClass.value,
+					"aria-label": computedAriaLabel.value,
 					onClick: handleCopy
 				}), {
 					icon: withCtx(() => [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(unref(IconCopy))])]),
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 					_: 3
-				}, 16, ["class"]))]),
+				}, 16, ["class", "aria-label"]))]),
 				_: 3
 			}, 16);
 		};

package/es/date-picker/panels/body.vue_vue_type_script_setup_true_lang.js

@@ -5,6 +5,9 @@ import useCellClassName from "../hooks/use-cell-class-name.js";
 import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, reactive, renderList, renderSlot, toDisplayString, toRefs, unref } from "vue";
 //#region components/date-picker/panels/body.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
+	"aria-label",
+	"aria-selected",
+	"aria-disabled",
 	"onMouseenter",
 	"onMouseleave",
 	"onClick"
@@ -45,6 +48,7 @@ var body_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			now
 		}));
 		const isCellDisabled = (cellData) => isDisabledDate(cellData.value, disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate.value, mode === null || mode === void 0 ? void 0 : mode.value);
+		const isCellSelected = (cellData) => Boolean((value === null || value === void 0 ? void 0 : value.value) && (isSameTime === null || isSameTime === void 0 ? void 0 : isSameTime.value) && isSameTime.value(cellData.value, value.value));
 		const isWeek = computed(() => (mode === null || mode === void 0 ? void 0 : mode.value) === "week");
 		const isHiddenNotInViewCell = (cellData) => props.hideNotInViewDates && (cellData.isPrev || cellData.isNext);
 		const getCellClassNameFn = (cellData) => {
@@ -63,17 +67,26 @@ var body_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			emit("cell-mouse-enter", cellData);
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(`${unref(prefixCls)}-body`) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rows, (row, rowIndex) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(`${unref(prefixCls)}-body`),
+				role: "grid"
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rows, (row, rowIndex) => {
 				return openBlock(), createElementBlock("div", {
 					key: rowIndex,
+					role: "row",
 					class: normalizeClass([`${unref(prefixCls)}-row`, { [`${unref(prefixCls)}-row-week`]: isWeek.value }])
 				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, colIndex) => {
+					var _cell$value;
 					return openBlock(), createElementBlock(Fragment, null, [isWeek.value && colIndex === 0 ? (openBlock(), createElementBlock("div", {
 						key: colIndex,
 						class: normalizeClass([`${unref(prefixCls)}-cell`, `${unref(prefixCls)}-cell-week`])
 					}, [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-date`) }, [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-date-value`) }, toDisplayString(cell.label), 3)], 2)], 2)) : (openBlock(), createElementBlock("div", {
 						key: colIndex,
 						class: normalizeClass(getCellClassNameFn(cell)),
+						role: "gridcell",
+						"aria-label": (_cell$value = cell.value) === null || _cell$value === void 0 ? void 0 : _cell$value.format("YYYY-MM-DD"),
+						"aria-selected": isCellSelected(cell) ? "true" : void 0,
+						"aria-disabled": isCellDisabled(cell) || isHiddenNotInViewCell(cell) || void 0,
 						onMouseenter: () => {
 							onCellMouseEnter(cell);
 						},

package/es/date-picker/picker.vue_vue_type_script_setup_true_lang.js

@@ -637,6 +637,7 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				"popup-visible": unref(panelVisible),
 				"unmount-on-close": __props.unmountOnClose,
 				"popup-container": __props.popupContainer,
+				"aria-has-popup": "dialog",
 				onPopupVisibleChange: onPanelVisibleChange
 			}), {
 				content: withCtx(() => [renderSlot(_ctx.$slots, "panelRender", {

package/es/date-picker/style/index.css

@@ -30,7 +30,7 @@
   background-color: var(--sd-color-fill-2);
   border: 1px solid transparent;
   border-radius: var(--sd-border-radius-small);
-  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), box-shadow 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-picker-input {
   display: inline-flex;
@@ -46,7 +46,7 @@
   background-color: transparent;
   border: none;
   outline: none;
-  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-picker input::placeholder {
   color: var(--sd-color-text-3);
@@ -261,7 +261,7 @@
   text-align: center;
   background-color: var(--sd-color-bg-popup);
   border-radius: 50%;
-  transition: all 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
   user-select: none;
 }
 .sd-picker-header-icon:not(.sd-picker-header-icon-hidden) {
@@ -274,7 +274,7 @@
   padding: 2px;
   border-radius: 2px;
   cursor: pointer;
-  transition: all 0.1s;
+  transition: background-color 0.1s;
 }
 .sd-picker-header-label:hover {
   background-color: var(--sd-color-fill-3);
@@ -330,7 +330,7 @@
 .sd-picker-cell-selected .sd-picker-date-value {
   color: var(--sd-color-white);
   background-color: rgb(var(--sd-primary-6));
-  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-picker-cell-in-view:not(.sd-picker-cell-selected, .sd-picker-cell-range-start, .sd-picker-cell-range-end, .sd-picker-cell-disabled, .sd-picker-cell-week) .sd-picker-date-value:hover {
   color: var(--sd-color-text-1);

package/es/date-picker/style/index.scss

@@ -88,7 +88,8 @@ $picker-prefix-cls: string.unquote('#{theme.$prefix}-picker');
       text-align: center;
       background-color: $picker-color-bg-switch-icon;
       border-radius: 50%;
-      transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+      transition: background-color theme.$transition-duration-1
+        theme.$transition-timing-function-standard;
       user-select: none;
     }
 
@@ -104,7 +105,7 @@ $picker-prefix-cls: string.unquote('#{theme.$prefix}-picker');
       padding: 2px;
       border-radius: 2px;
       cursor: pointer;
-      transition: all theme.$transition-duration-1;
+      transition: background-color theme.$transition-duration-1;
 
       &:hover {
         background-color: $picker-panel-color-bg-label_hover;
@@ -172,7 +173,7 @@ $picker-prefix-cls: string.unquote('#{theme.$prefix}-picker');
     color: $picker-panel-color-text-cell_selected;
     background-color: $picker-panel-color-bg-cell_selected;
     transition: background-color theme.$transition-duration-1
-      theme.$transition-timing-function-linear;
+      theme.$transition-timing-function-standard;
   }
 
   &-cell-in-view:not(

package/es/drawer/drawer.vue.d.ts

@@ -218,6 +218,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     visible: boolean;
     unmountOnClose: boolean;
     renderToBody: boolean;
+    escToClose: boolean;
     height: string | number;
     defaultVisible: boolean;
     closable: boolean;
@@ -226,7 +227,6 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     titleEllipsisTooltip: boolean | EllipsisTooltipProps;
     maskClosable: boolean;
     okLoading: boolean;
-    escToClose: boolean;
     hideCancel: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/es/drawer/drawer.vue_vue_type_script_setup_true_lang.js

@@ -3,6 +3,7 @@ import { getPrefixCls } from "../_utils/global-config.js";
 import { isBoolean, isFunction, isNumber, isPromise } from "../_utils/is.js";
 import { off, on } from "../_utils/dom.js";
 import icon_hover_default from "../_components/icon-hover.js";
+import { KEYBOARD_KEY, onActivate } from "../_utils/keyboard.js";
 import IconClose from "../icon/icon-close/index.js";
 import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/asyncToGenerator.js";
 import { useI18n } from "../locale/index.js";
@@ -10,13 +11,14 @@ 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 { DRAWER_PLACEMENTS } from "./utils.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 } 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 } from "vue";
 //#region components/drawer/drawer.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-labelledby"];
 var drawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
 	name: "Drawer",
 	inheritAttrs: false
@@ -255,6 +257,12 @@ var drawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		const { popupContainer, placement, mask, maskClosable, escToClose, closable, header, footer, hideCancel, okText, cancelText, okButtonProps, cancelButtonProps, titleEllipsisTooltip, width, height } = toRefs(props);
 		const prefixCls = getPrefixCls("drawer");
 		const { t } = useI18n();
+		const slots = useSlots();
+		const drawerRef = ref();
+		const titleId = `sd-drawer-title-${getCurrentInstance().uid}`;
+		const bodyId = `sd-drawer-body-${getCurrentInstance().uid}`;
+		const hasTitle = computed(() => mergedHeader.value && !slots.header && (Boolean(props.title) || Boolean(slots.title)));
+		const { activate: activateFocusTrap, deactivate: deactivateFocusTrap } = useFocusTrap(drawerRef, { initialFocus: (c) => getFocusableElements(c).find((el) => !el.closest(".sd-drawer-close-btn")) });
 		const { mergedValue: mergedPlacement } = useConfigProviderProp(placement, {
 			propNames: ["placement"],
 			getGlobalValue: (configProviderCtx) => {
@@ -463,6 +471,7 @@ var drawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				mounted.value = true;
 				setOverflowHidden();
 				if (mergedEscToClose.value) addGlobalKeyDownListener();
+				nextTick(() => activateFocusTrap());
 			}
 		});
 		onBeforeUnmount(() => {
@@ -476,9 +485,11 @@ var drawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				mounted.value = true;
 				setOverflowHidden();
 				addGlobalKeyDownListener();
+				nextTick(() => activateFocusTrap());
 			} else {
 				emit("beforeClose");
 				removeGlobalKeyDownListener();
+				deactivateFocusTrap();
 			}
 		});
 		const style = computed(() => {
@@ -516,14 +527,22 @@ var drawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 					onAfterLeave: handleClose
 				}, {
 					default: withCtx(() => [withDirectives(createElementVNode("div", {
+						ref_key: "drawerRef",
+						ref: drawerRef,
 						class: normalizeClass(unref(prefixCls)),
-						style: normalizeStyle(style.value)
+						style: normalizeStyle(style.value),
+						role: "dialog",
+						"aria-modal": "true",
+						"aria-labelledby": hasTitle.value ? titleId : void 0,
+						"aria-describedby": bodyId,
+						tabindex: "-1"
 					}, [
 						unref(mergedHeader) ? (openBlock(), createElementBlock("div", {
 							key: 0,
 							class: normalizeClass(`${unref(prefixCls)}-header`)
 						}, [renderSlot(_ctx.$slots, "header", {}, () => [_ctx.$slots.title || __props.title ? (openBlock(), createElementBlock("div", {
 							key: 0,
+							id: titleId,
 							class: normalizeClass(`${unref(prefixCls)}-title`)
 						}, [createVNode(unref(Ellipsis), {
 							class: normalizeClass(`${unref(prefixCls)}-title-text`),
@@ -533,16 +552,18 @@ var drawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 							_: 3
 						}, 8, ["class", "tooltip"])], 2)) : createCommentVNode("", true), 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)])], 2)) : createCommentVNode("", true),
+						})], 34)) : createCommentVNode("", true)])], 2)) : createCommentVNode("", true),
 						createElementVNode("div", {
+							id: bodyId,
 							class: normalizeClass([`${unref(prefixCls)}-body`, __props.bodyClass]),
 							style: normalizeStyle(__props.bodyStyle)
 						}, [renderSlot(_ctx.$slots, "default")], 6),
@@ -559,7 +580,7 @@ var drawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 							default: withCtx(() => [createTextVNode(toDisplayString(unref(mergedOkText) || unref(t)("drawer.okText")), 1)]),
 							_: 1
 						}, 16, ["loading"])])], 2)) : createCommentVNode("", true)
-					], 6), [[vShow, computedVisible.value]])]),
+					], 14, _hoisted_1), [[vShow, computedVisible.value]])]),
 					_: 3
 				}, 8, ["name"])], 16)), [[vShow, computedVisible.value || mounted.value]]) : createCommentVNode("", true)], 8, ["to", "disabled"]))]),
 				_: 3