@sdata/web-vue 3.13.0 → 3.14.0

package/es/table/table-operation-td.d.ts

@@ -100,6 +100,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;
@@ -115,6 +119,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             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>;
@@ -217,6 +222,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;
@@ -229,6 +238,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             modelValue: boolean | (string | number | boolean)[];
             defaultChecked: boolean;
             indeterminate: boolean;
+            tabindex: string | number;
             uninjectGroupContext: boolean;
         }>;
         __isFragment?: never;
@@ -254,6 +264,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;
@@ -269,6 +283,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         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/table/table-tbody.js

@@ -7,7 +7,10 @@ var table_tbody_default = /* @__PURE__ */ defineComponent({
 		const prefixCls = getPrefixCls("table");
 		return () => {
 			var _slots$tbody$, _slots$tbody;
-			return createVNode((_slots$tbody$ = (_slots$tbody = slots.tbody) === null || _slots$tbody === void 0 ? void 0 : _slots$tbody.call(slots)[0]) !== null && _slots$tbody$ !== void 0 ? _slots$tbody$ : "div", { class: `${prefixCls}-tbody` }, { default: slots.default });
+			return createVNode((_slots$tbody$ = (_slots$tbody = slots.tbody) === null || _slots$tbody === void 0 ? void 0 : _slots$tbody.call(slots)[0]) !== null && _slots$tbody$ !== void 0 ? _slots$tbody$ : "div", {
+				class: `${prefixCls}-tbody`,
+				role: "rowgroup"
+			}, { default: slots.default });
 		};
 	}
 });

package/es/table/table-td.js

@@ -184,7 +184,8 @@ var table_td_default = /* @__PURE__ */ defineComponent({
 				rowIndex: (_props$rowIndex2 = props.rowIndex) !== null && _props$rowIndex2 !== void 0 ? _props$rowIndex2 : -1
 			})[0]) !== null && _slots$td$ !== void 0 ? _slots$td$ : "div", {
 				class: cls.value,
-				style: style.value
+				style: style.value,
+				role: "cell"
 			}, { default: () => [renderCell()] });
 		};
 	}

package/es/table/table-th.js

@@ -207,8 +207,10 @@ var table_th_default = /* @__PURE__ */ defineComponent({
 		return () => {
 			var _slots$th$, _slots$th;
 			return createVNode((_slots$th$ = (_slots$th = slots.th) === null || _slots$th === void 0 ? void 0 : _slots$th.call(slots, { column: props.column })[0]) !== null && _slots$th$ !== void 0 ? _slots$th$ : "div", {
-				class: cls.value,
-				style: style.value
+				"class": cls.value,
+				"style": style.value,
+				"role": "columnheader",
+				"aria-sort": hasSorter.value ? sortOrder.value === "ascend" ? "ascending" : sortOrder.value === "descend" ? "descending" : "none" : void 0
 			}, { default: () => [
 				renderCell(),
 				!filterIconAlignLeft.value && renderFilter(),

package/es/table/table-thead.js

@@ -7,7 +7,10 @@ var table_thead_default = /* @__PURE__ */ defineComponent({
 		const prefixCls = getPrefixCls("table");
 		return () => {
 			var _slots$thead$, _slots$thead;
-			return createVNode((_slots$thead$ = (_slots$thead = slots.thead) === null || _slots$thead === void 0 ? void 0 : _slots$thead.call(slots)[0]) !== null && _slots$thead$ !== void 0 ? _slots$thead$ : "div", { class: `${prefixCls}-thead` }, { default: slots.default });
+			return createVNode((_slots$thead$ = (_slots$thead = slots.thead) === null || _slots$thead === void 0 ? void 0 : _slots$thead.call(slots)[0]) !== null && _slots$thead$ !== void 0 ? _slots$thead$ : "div", {
+				class: `${prefixCls}-thead`,
+				role: "rowgroup"
+			}, { default: slots.default });
 		};
 	}
 });

package/es/table/table-tr.js

@@ -25,7 +25,10 @@ var table_tr_default = /* @__PURE__ */ defineComponent({
 			return createVNode((_slots$tr$ = (_slots$tr = slots.tr) === null || _slots$tr === void 0 ? void 0 : _slots$tr.call(slots, {
 				rowIndex: props.rowIndex,
 				record: (_props$record = props.record) === null || _props$record === void 0 ? void 0 : _props$record.raw
-			})[0]) !== null && _slots$tr$ !== void 0 ? _slots$tr$ : "div", { class: cls.value }, { default: slots.default });
+			})[0]) !== null && _slots$tr$ !== void 0 ? _slots$tr$ : "div", {
+				class: cls.value,
+				role: "row"
+			}, { default: slots.default });
 		};
 	}
 });

package/es/table/table.js

@@ -1502,11 +1502,15 @@ var table_default = /* @__PURE__ */ defineComponent({
 		});
 		const render = () => {
 			var _slots$columns;
-			if (slots.default) return createVNode("div", { "class": cls.value }, [renderTable(slots.default)]);
+			if (slots.default) return createVNode("div", {
+				"class": cls.value,
+				"role": "table"
+			}, [renderTable(slots.default)]);
 			children.value = (_slots$columns = slots.columns) === null || _slots$columns === void 0 ? void 0 : _slots$columns.call(slots);
 			return createVNode("div", {
 				"class": cls.value,
-				"style": style.value
+				"style": style.value,
+				"role": "table"
 			}, [children.value, createVNode(Spin, spinProps.value, { default: () => [
 				props.pagination !== false && (flattenData.value.length > 0 || sortedData.value.length > 0) && isPaginationTop.value && renderPagination(),
 				renderTable(),

package/es/tabs/context.d.ts

@@ -9,5 +9,6 @@ export interface TabsContext {
     removeItem: (id: number) => void;
     trigger: TabTriggerEvent;
     scrollbar: ScrollbarProps | false;
+    tabsId: string;
 }
 export declare const tabsInjectionKey: InjectionKey<TabsContext>;

package/es/tabs/style/index.css

@@ -113,7 +113,7 @@
   line-height: 1.5715;
   outline: none;
   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);
 }
 .sd-tabs-tab-title {
   display: inline-block;
@@ -169,7 +169,7 @@
   background-color: transparent;
   border-radius: var(--sd-border-radius-small);
   opacity: 1;
-  transition: background-color 0.2s cubic-bezier(0, 0, 1, 1), opacity 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
   content: "";
 }
 .sd-tabs-nav-type-line .sd-tabs-tab:hover .sd-tabs-tab-title::before {
@@ -195,7 +195,7 @@
   padding: 4px 16px;
   font-size: 14px;
   border: 1px solid var(--sd-color-neutral-3);
-  transition: padding 0.2s cubic-bezier(0, 0, 1, 1), color 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-tabs-nav-type-card .sd-tabs-tab-closable, .sd-tabs-nav-type-card-gutter .sd-tabs-tab-closable {
   padding-right: 12px;
@@ -370,7 +370,7 @@
   height: 14px;
   background-color: var(--sd-color-fill-3);
   transform: translateY(-50%);
-  transition: all 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
   content: "";
 }
 
@@ -407,7 +407,7 @@
   border-top: none;
 }
 .sd-tabs-content-animation {
-  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+  transition: margin 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-tabs-horizontal.sd-tabs-justify {
   display: flex;

package/es/tabs/style/index.scss

@@ -181,7 +181,7 @@ $tabs-prefix-cls: string.unquote('#{theme.$prefix}-tabs');
     line-height: 1.5715;
     outline: none;
     cursor: pointer;
-    transition: color theme.$transition-duration-2 theme.$transition-timing-function-linear;
+    transition: color theme.$transition-duration-2 theme.$transition-timing-function-standard;
 
     &-title {
       display: inline-block;
@@ -261,8 +261,8 @@ $tabs-prefix-cls: string.unquote('#{theme.$prefix}-tabs');
         border-radius: $tabs-line-border-radius;
         opacity: 1;
         transition:
-          background-color theme.$transition-duration-2 theme.$transition-timing-function-linear,
-          opacity theme.$transition-duration-2 theme.$transition-timing-function-linear;
+          background-color theme.$transition-duration-2 theme.$transition-timing-function-standard,
+          opacity theme.$transition-duration-2 theme.$transition-timing-function-standard;
         content: '';
       }
     }
@@ -318,8 +318,8 @@ $tabs-prefix-cls: string.unquote('#{theme.$prefix}-tabs');
       font-size: $tabs-size-default-font-size_card;
       border: $tabs-card-border-width solid $tabs-card-color-title-border;
       transition:
-        padding theme.$transition-duration-2 theme.$transition-timing-function-linear,
-        color theme.$transition-duration-2 theme.$transition-timing-function-linear;
+        padding theme.$transition-duration-2 theme.$transition-timing-function-standard,
+        color theme.$transition-duration-2 theme.$transition-timing-function-standard;
 
       &-closable {
         padding-right: $tabs-card-padding-title-right_editable;
@@ -574,7 +574,7 @@ $tabs-prefix-cls: string.unquote('#{theme.$prefix}-tabs');
         height: $tabs-capsule-size-separator-height;
         background-color: $tabs-capsule-color-separator-bg;
         transform: translateY(-50%);
-        transition: all theme.$transition-duration-2 theme.$transition-timing-function-linear;
+        transition: opacity theme.$transition-duration-2 theme.$transition-timing-function-standard;
         content: '';
       }
     }
@@ -627,7 +627,7 @@ $tabs-prefix-cls: string.unquote('#{theme.$prefix}-tabs');
   }
 
   &-content-animation {
-    transition: all theme.$transition-duration-2 theme.$transition-timing-function-standard;
+    transition: margin theme.$transition-duration-2 theme.$transition-timing-function-standard;
   }
 
   &-horizontal#{&}-justify {

package/es/tabs/tab-pane.vue_vue_type_script_setup_true_lang.js

@@ -4,6 +4,13 @@ import Scrollbar from "../scrollbar/index.js";
 import { tabsInjectionKey } from "./context.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, getCurrentInstance, inject, mergeProps, normalizeClass, onBeforeUnmount, onUpdated, openBlock, reactive, ref, renderSlot, toRefs, unref, useSlots, watch, withCtx } from "vue";
 //#region components/tabs/tab-pane.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"aria-labelledby",
+	"aria-hidden",
+	"tabindex",
+	"inert"
+];
 var tab_pane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "TabPane" }), {}, {
 	__name: "tab-pane",
 	props: {
@@ -53,6 +60,12 @@ var tab_pane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		const itemRef = ref();
 		const key = computed(() => instance === null || instance === void 0 ? void 0 : instance.vnode.key);
 		const active = computed(() => key.value === tabsCtx.activeKey);
+		const tabsId = computed(() => {
+			var _tabsCtx$tabsId;
+			return (_tabsCtx$tabsId = tabsCtx.tabsId) !== null && _tabsCtx$tabsId !== void 0 ? _tabsCtx$tabsId : "";
+		});
+		const panelId = computed(() => `${tabsId.value}-${key.value}-panel`);
+		const tabLabelledBy = computed(() => `${tabsId.value}-${key.value}-tab`);
 		const mounted = ref(tabsCtx.lazyLoad ? active.value : true);
 		const paneScrollbarProps = computed(() => {
 			const { scrollbar } = tabsCtx;
@@ -92,7 +105,13 @@ var tab_pane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			return openBlock(), createElementBlock("div", {
 				ref_key: "itemRef",
 				ref: itemRef,
-				class: normalizeClass([`${unref(prefixCls)}-content-item`, { [`${unref(prefixCls)}-content-item-active`]: active.value }])
+				class: normalizeClass([`${unref(prefixCls)}-content-item`, { [`${unref(prefixCls)}-content-item-active`]: active.value }]),
+				role: "tabpanel",
+				id: panelId.value,
+				"aria-labelledby": tabLabelledBy.value,
+				"aria-hidden": active.value ? void 0 : "true",
+				tabindex: active.value ? 0 : void 0,
+				inert: active.value ? void 0 : true
 			}, [mounted.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: normalizeClass(paneCls.value)
@@ -102,7 +121,7 @@ var tab_pane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			}, paneScrollbarProps.value), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 16, ["outer-class"])) : renderSlot(_ctx.$slots, "default", { key: 1 })], 2)) : createCommentVNode("", true)], 2);
+			}, 16, ["outer-class"])) : renderSlot(_ctx.$slots, "default", { key: 1 })], 2)) : createCommentVNode("", true)], 10, _hoisted_1);
 		};
 	}
 }));

package/es/tabs/tabs-nav.js

@@ -4,6 +4,7 @@ import { isNumber, isUndefined } from "../_utils/is.js";
 import resize_observer_default from "../_components/resize-observer.js";
 import { off, on } from "../_utils/dom.js";
 import icon_hover_default from "../_components/icon-hover.js";
+import { KEYBOARD_KEY } from "../_utils/keyboard.js";
 import IconPlus from "../icon/icon-plus/index.js";
 import tabs_button_default from "./tabs-button.js";
 import tabs_nav_ink_default from "./tabs-nav-ink.js";
@@ -171,6 +172,35 @@ var tabs_nav_default = /* @__PURE__ */ defineComponent({
 			const scrollDirection = type === "previous" !== isRtlHorizontal.value ? -1 : 1;
 			setOffset(offset.value + scrollDirection * wrapperLength.value);
 		};
+		const focusAndActivate = (key, ev) => {
+			const el = tabsRef.value[key];
+			if (el instanceof HTMLElement) el.focus();
+			emit("click", key, ev);
+		};
+		const handleListKeydown = (ev) => {
+			const enabled = props.tabs.filter((t) => !t.disabled);
+			if (enabled.length === 0) return;
+			const len = enabled.length;
+			const currentIdx = Math.max(0, enabled.findIndex((t) => t.key === activeKey.value));
+			let nextIdx = currentIdx;
+			const key = ev.key;
+			if (direction.value === "vertical") if (key === KEYBOARD_KEY.ARROW_DOWN) nextIdx = currentIdx + 1;
+			else if (key === KEYBOARD_KEY.ARROW_UP) nextIdx = currentIdx - 1;
+			else if (key === KEYBOARD_KEY.HOME) nextIdx = 0;
+			else if (key === KEYBOARD_KEY.END) nextIdx = len - 1;
+			else return;
+			else {
+				const rtl = isRtlHorizontal.value;
+				if (key === KEYBOARD_KEY.ARROW_RIGHT) nextIdx = rtl ? currentIdx - 1 : currentIdx + 1;
+				else if (key === KEYBOARD_KEY.ARROW_LEFT) nextIdx = rtl ? currentIdx + 1 : currentIdx - 1;
+				else if (key === KEYBOARD_KEY.HOME) nextIdx = 0;
+				else if (key === KEYBOARD_KEY.END) nextIdx = len - 1;
+				else return;
+			}
+			ev.preventDefault();
+			nextIdx = (nextIdx % len + len) % len;
+			focusAndActivate(enabled[nextIdx].key, ev);
+		};
 		const handleResize = () => {
 			getSize();
 			if (inkRef.value) inkRef.value.$forceUpdate();
@@ -229,7 +259,10 @@ var tabs_nav_default = /* @__PURE__ */ defineComponent({
 				}, [createVNode(resize_observer_default, { "onResize": handleResize }, { default: () => [createVNode("div", {
 					"ref": listRef,
 					"class": listCls.value,
-					"style": listStyle.value
+					"style": listStyle.value,
+					"role": "tablist",
+					"aria-orientation": direction.value === "vertical" ? "vertical" : "horizontal",
+					"onKeydown": handleListKeydown
 				}, [props.tabs.map((tab) => createVNode(tabs_tab_default, {
 					"key": tab.key,
 					"ref": (component) => {

package/es/tabs/tabs-tab.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,18 @@
 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 { KEYBOARD_KEY } from "../_utils/keyboard.js";
 import IconClose from "../icon/icon-close/index.js";
 import { tabsInjectionKey } from "./context.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, openBlock, renderSlot, unref, withCtx, withModifiers } from "vue";
 //#region components/tabs/tabs-tab.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"tabindex",
+	"aria-selected",
+	"aria-disabled",
+	"aria-controls"
+];
 var tabs_tab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "TabsTab" }), {}, {
 	__name: "tabs-tab",
 	props: {
@@ -21,11 +29,21 @@ var tabs_tab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		const emit = __emit;
 		const prefixCls = getPrefixCls("tabs-tab");
 		const tabsCtx = inject(tabsInjectionKey, {});
+		const tabsId = computed(() => {
+			var _tabsCtx$tabsId;
+			return (_tabsCtx$tabsId = tabsCtx.tabsId) !== null && _tabsCtx$tabsId !== void 0 ? _tabsCtx$tabsId : "";
+		});
+		const tabId = computed(() => `${tabsId.value}-${props.tab.key}-tab`);
+		const panelId = computed(() => `${tabsId.value}-${props.tab.key}-panel`);
 		const handleClick = (e) => {
 			if (!props.tab.disabled) emit("click", props.tab.key, e);
 		};
 		const onKeyDown = (ev) => {
-			if (ev.key === "Enter") handleClick(ev);
+			if (ev.key === KEYBOARD_KEY.ENTER) handleClick(ev);
+			else if (ev.key === KEYBOARD_KEY.SPACE) {
+				ev.preventDefault();
+				handleClick(ev);
+			}
 		};
 		const eventHandlers = computed(() => {
 			return Object.assign(tabsCtx.trigger === "click" ? { onClick: handleClick } : { onMouseover: handleClick }, { onKeydown: onKeyDown });
@@ -40,8 +58,13 @@ var tabs_tab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		}]);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
-				tabindex: "0",
-				class: cls.value
+				id: tabId.value,
+				class: cls.value,
+				role: "tab",
+				tabindex: __props.active && !__props.tab.disabled ? 0 : -1,
+				"aria-selected": __props.active,
+				"aria-disabled": __props.tab.disabled || void 0,
+				"aria-controls": panelId.value
 			}, eventHandlers.value), [createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-title`) }, [renderSlot(_ctx.$slots, "default")], 2), __props.editable && __props.tab.closable ? (openBlock(), createBlock(icon_hover_default, {
 				key: 0,
 				class: normalizeClass(`${unref(prefixCls)}-close-btn`),
@@ -49,7 +72,7 @@ var tabs_tab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			}, {
 				default: withCtx(() => [createVNode(unref(IconClose))]),
 				_: 1
-			}, 8, ["class"])) : createCommentVNode("", true)], 16);
+			}, 8, ["class"])) : createCommentVNode("", true)], 16, _hoisted_1);
 		};
 	}
 }));

package/es/tabs/tabs.js

@@ -6,7 +6,7 @@ import { useScrollbar } from "../_hooks/use-scrollbar.js";
 import { useChildrenComponents } from "../_hooks/use-children-components.js";
 import { tabsInjectionKey } from "./context.js";
 import tabs_nav_default from "./tabs-nav.js";
-import { computed, createVNode, defineComponent, inject, nextTick, provide, reactive, ref, toRef, toRefs } from "vue";
+import { computed, createVNode, defineComponent, getCurrentInstance, inject, nextTick, provide, reactive, ref, toRef, toRefs } from "vue";
 //#region components/tabs/tabs.tsx
 var tabs_default = /* @__PURE__ */ defineComponent({
 	name: "Tabs",
@@ -208,6 +208,7 @@ var tabs_default = /* @__PURE__ */ defineComponent({
 	setup(props, { emit, slots }) {
 		const { size, lazyLoad, destroyOnHide, trigger } = toRefs(props);
 		const prefixCls = getPrefixCls("tabs");
+		const tabsId = `${prefixCls}-${getCurrentInstance().uid}`;
 		const { mergedSize } = useSize(size);
 		const mergedPosition = computed(() => props.direction === "vertical" ? "left" : props.position);
 		const mergedDirection = computed(() => ["left", "right"].includes(mergedPosition.value) ? "vertical" : "horizontal");
@@ -248,7 +249,8 @@ var tabs_default = /* @__PURE__ */ defineComponent({
 			addItem,
 			removeItem,
 			trigger,
-			scrollbar: computed(() => props.fullHeight && props.scrollbar !== false ? scrollbarProps.value : false)
+			scrollbar: computed(() => props.fullHeight && props.scrollbar !== false ? scrollbarProps.value : false),
+			tabsId
 		}));
 		const handleChange = (key) => {
 			if (key !== computedActiveKey.value) {

package/es/tag/index.d.ts

@@ -74,12 +74,12 @@ declare const Tag: {
             default: undefined;
         };
     }>> & Readonly<{
-        onClose?: ((_ev: MouseEvent | KeyboardEvent) => any) | undefined;
+        onClose?: ((_ev: KeyboardEvent | MouseEvent) => any) | undefined;
         "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
         "onUpdate:checked"?: ((_checked: boolean) => any) | undefined;
         onCheck?: ((_checked: boolean, _ev: MouseEvent) => any) | undefined;
     }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-        close: (_ev: MouseEvent | KeyboardEvent) => any;
+        close: (_ev: KeyboardEvent | MouseEvent) => any;
         "update:visible": (_visible: boolean) => any;
         "update:checked": (_checked: boolean) => any;
         check: (_checked: boolean, _ev: MouseEvent) => any;
@@ -179,7 +179,7 @@ declare const Tag: {
             default: undefined;
         };
     }>> & Readonly<{
-        onClose?: ((_ev: MouseEvent | KeyboardEvent) => any) | undefined;
+        onClose?: ((_ev: KeyboardEvent | MouseEvent) => any) | undefined;
         "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
         "onUpdate:checked"?: ((_checked: boolean) => any) | undefined;
         onCheck?: ((_checked: boolean, _ev: MouseEvent) => any) | undefined;
@@ -276,12 +276,12 @@ declare const Tag: {
         default: undefined;
     };
 }>> & Readonly<{
-    onClose?: ((_ev: MouseEvent | KeyboardEvent) => any) | undefined;
+    onClose?: ((_ev: KeyboardEvent | MouseEvent) => any) | undefined;
     "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
     "onUpdate:checked"?: ((_checked: boolean) => any) | undefined;
     onCheck?: ((_checked: boolean, _ev: MouseEvent) => any) | undefined;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (_ev: MouseEvent | KeyboardEvent) => any;
+    close: (_ev: KeyboardEvent | MouseEvent) => any;
     "update:visible": (_visible: boolean) => any;
     "update:checked": (_checked: boolean) => any;
     check: (_checked: boolean, _ev: MouseEvent) => any;

package/es/tag/style/index.css

@@ -39,7 +39,7 @@
 }
 .sd-tag-checkable {
   cursor: pointer;
-  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);
 }
 .sd-tag-checkable:hover {
   background-color: var(--sd-color-fill-2);

package/es/tag/style/index.scss

@@ -68,7 +68,9 @@ $colors:
 
   &-checkable {
     cursor: pointer;
-    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;
   }
 
   &-checkable:hover {

package/es/tag/tag.vue.d.ts

@@ -84,7 +84,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: undefined;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (_ev: MouseEvent | KeyboardEvent) => any;
+    close: (_ev: KeyboardEvent | MouseEvent) => any;
     "update:visible": (_visible: boolean) => any;
     "update:checked": (_checked: boolean) => any;
     check: (_checked: boolean, _ev: MouseEvent) => any;
@@ -160,7 +160,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: undefined;
     };
 }>> & Readonly<{
-    onClose?: ((_ev: MouseEvent | KeyboardEvent) => any) | undefined;
+    onClose?: ((_ev: KeyboardEvent | MouseEvent) => any) | undefined;
     "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
     "onUpdate:checked"?: ((_checked: boolean) => any) | undefined;
     onCheck?: ((_checked: boolean, _ev: MouseEvent) => any) | undefined;

package/es/tag/tag.vue_vue_type_script_setup_true_lang.js

@@ -2,6 +2,7 @@ import { configProviderInjectionKey } from "../config-provider/context.js";
 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 IconClose from "../icon/icon-close/index.js";
 import IconLoading from "../icon/icon-loading/index.js";
 import { useSize } from "../_hooks/use-size.js";
@@ -12,6 +13,11 @@ import { computed, createBlock, createCommentVNode, createElementBlock, createSl
 import chroma from "chroma-js";
 import { isNil } from "es-toolkit/compat";
 //#region components/tag/tag.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"role",
+	"tabindex",
+	"aria-pressed"
+];
 var tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "Tag" }), {}, {
 	__name: "tag",
 	props: {
@@ -321,12 +327,23 @@ var tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompon
 				emit("check", newChecked, ev);
 			}
 		};
+		const handleTagKeydown = (ev) => {
+			if (!props.checkable) return;
+			if (isActivationKey(ev)) {
+				ev.preventDefault();
+				handleClick(ev);
+			}
+		};
 		return (_ctx, _cache) => {
 			return computedVisible.value ? (openBlock(), createElementBlock("span", {
 				key: 0,
 				class: normalizeClass(cls.value),
 				style: normalizeStyle(style.value),
-				onClick: handleClick
+				role: __props.checkable ? "button" : void 0,
+				tabindex: __props.checkable ? 0 : void 0,
+				"aria-pressed": __props.checkable ? computedChecked.value : void 0,
+				onClick: handleClick,
+				onKeydown: handleTagKeydown
 			}, [
 				_ctx.$slots.icon ? (openBlock(), createElementBlock("span", {
 					key: 0,
@@ -371,7 +388,7 @@ var tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompon
 					key: 4,
 					class: normalizeClass(`${unref(prefixCls)}-loading-icon`)
 				}, [createVNode(unref(IconLoading))], 2)) : createCommentVNode("", true)
-			], 6)) : createCommentVNode("", true);
+			], 46, _hoisted_1)) : createCommentVNode("", true);
 		};
 	}
 }));

package/es/textarea/style/index.css

@@ -32,7 +32,7 @@
   border: 1px solid transparent;
   border-radius: var(--sd-border-radius-small);
   cursor: text;
-  transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: 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), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-textarea-wrapper:hover {
   background-color: var(--sd-color-fill-3);
@@ -117,7 +117,7 @@
 }
 .sd-textarea-wrapper .sd-textarea-clear-btn > svg {
   position: relative;
-  transition: color 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-textarea-wrapper:hover .sd-textarea-clear-btn {
   visibility: visible;

package/es/textarea/textarea.vue_vue_type_script_setup_true_lang.js

@@ -4,6 +4,7 @@ import { getPrefixCls } from "../_utils/global-config.js";
 import { isFunction, isNull, isObject, isUndefined } from "../_utils/is.js";
 import resize_observer_default from "../_components/resize-observer.js";
 import icon_hover_default from "../_components/icon-hover.js";
+import { isActivationKey } from "../_utils/keyboard.js";
 import IconClose from "../icon/icon-close/index.js";
 import { useAllowClear } from "../_hooks/use-allow-clear.js";
 import { useCursor } from "../_hooks/use-cursor.js";
@@ -133,7 +134,7 @@ var textarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		const attrs = useAttrs();
 		const { disabled, error, modelValue, allowClear } = toRefs(props);
 		const prefixCls = getPrefixCls("textarea");
-		const { mergedDisabled, mergedError: _mergedError, eventHandlers } = useFormItem({
+		const { mergedDisabled, mergedError: _mergedError, eventHandlers, formItemCtx } = useFormItem({
 			disabled,
 			error
 		});
@@ -246,6 +247,12 @@ var textarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			emitChange("", ev);
 			emit("clear", ev);
 		};
+		const handleClearKeydown = (ev) => {
+			if (isActivationKey(ev)) {
+				ev.preventDefault();
+				handleClear(ev);
+			}
+		};
 		const handleKeyDown = (e) => {
 			if (props.readonly && !mergedDisabled.value && isReadonlyModificationKey(e)) showReadonlyTip();
 		};
@@ -257,6 +264,7 @@ var textarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		const rawTextareaAttrs = getTextareaAttrs(attrs);
 		const mergeTextareaAttrs = computed(() => {
 			const attrs = _objectSpread2(_objectSpread2({}, rawTextareaAttrs), props.textareaAttrs);
+			if (formItemCtx.fieldId && attrs.id === void 0) attrs.id = formItemCtx.fieldId;
 			if (mergedError.value) attrs["aria-invalid"] = true;
 			return attrs;
 		});
@@ -397,11 +405,15 @@ var textarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 					showClearBtn.value ? (openBlock(), createElementBlock("div", {
 						key: 2,
 						class: normalizeClass(`${unref(prefixCls)}-clear-btn`),
-						onClick: handleClear
+						role: "button",
+						tabindex: "0",
+						"aria-label": "Clear",
+						onClick: handleClear,
+						onKeydown: handleClearKeydown
 					}, [createVNode(icon_hover_default, null, {
 						default: withCtx(() => [createVNode(unref(IconClose))]),
 						_: 1
-					})], 2)) : createCommentVNode("", true)
+					})], 34)) : createCommentVNode("", true)
 				], 16)]),
 				_: 3
 			}, 8, ["popup-visible", "content"]);