@sdata/web-vue 3.13.0 → 3.15.0

package/es/table/style/index.scss

@@ -40,7 +40,8 @@ $table-cls-td: string.unquote('#{$table-prefix-cls}-td');
   border-radius: $table-border-radius-expand-button;
   outline: none;
   cursor: pointer;
-  transition: background-color theme.$transition-duration-1 theme.$transition-timing-function-linear;
+  transition: background-color theme.$transition-duration-1
+    theme.$transition-timing-function-standard;
 
   &:hover {
     color: $table-color-expand-icon_hover;
@@ -318,7 +319,7 @@ $table-cls-td: string.unquote('#{$table-prefix-cls}-td');
     width: $table-size-shadow-wrapper-width;
     box-shadow: none;
     transform: translateX(-100%);
-    transition: box-shadow theme.$transition-duration-1 theme.$transition-timing-function-linear;
+    transition: box-shadow theme.$transition-duration-1 theme.$transition-timing-function-standard;
     content: '';
     pointer-events: none;
   }
@@ -342,7 +343,8 @@ $table-cls-td: string.unquote('#{$table-prefix-cls}-td');
       border: $table-border-width solid $table-color-editable-body-cell-border;
       border-radius: $table-border-radius;
       cursor: pointer;
-      transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+      transition: border-color theme.$transition-duration-1
+        theme.$transition-timing-function-standard;
     }
 
     &:hover {
@@ -457,7 +459,7 @@ $table-cls-td: string.unquote('#{$table-prefix-cls}-td');
 
   &-th {
     transition: background-color theme.$transition-duration-1
-      theme.$transition-timing-function-linear;
+      theme.$transition-timing-function-standard;
   }
 
   &-cell-with-sorter {
@@ -516,7 +518,7 @@ $table-cls-td: string.unquote('#{$table-prefix-cls}-td');
       top: 50%;
       color: $table-color-header-sorter-icon;
       font-size: $table-font-size-header-sorter-icon;
-      transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+      transition: color theme.$transition-duration-1 theme.$transition-timing-function-standard;
     }
 
     .#{theme.$prefix}-icon-caret-up {
@@ -549,7 +551,8 @@ $table-cls-td: string.unquote('#{$table-prefix-cls}-td');
     vertical-align: 0;
     background-color: transparent;
     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;
 
     &:hover,
     &-open {
@@ -559,7 +562,7 @@ $table-cls-td: string.unquote('#{$table-prefix-cls}-td');
     svg {
       color: $table-color-header-filters-icon;
       font-size: $table-font-size-filters-icon;
-      transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+      transition: color theme.$transition-duration-1 theme.$transition-timing-function-standard;
     }
 
     &-active {
@@ -633,7 +636,7 @@ $table-cls-td: string.unquote('#{$table-prefix-cls}-td');
       width: $table-size-shadow-wrapper-width;
       height: 100%;
       box-shadow: none;
-      transition: box-shadow theme.$transition-duration-1 theme.$transition-timing-function-linear;
+      transition: box-shadow theme.$transition-duration-1 theme.$transition-timing-function-standard;
       content: '';
       pointer-events: none;
     }

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-operation-td.js

@@ -1,12 +1,12 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
-import Checkbox from "../checkbox/index.js";
-import Radio from "../radio/index.js";
 import IconMinus from "../icon/icon-minus/index.js";
 import IconPlus from "../icon/icon-plus/index.js";
-import IconDragDotVertical from "../icon/icon-drag-dot-vertical/index.js";
 import { tableInjectionKey } from "./context.js";
 import { getGridSpanStyle, getLeafKeys, getOperationFixedCls, getOperationStyle, getSelectionStatus } from "./utils.js";
+import Checkbox from "../checkbox/index.js";
+import IconDragDotVertical from "../icon/icon-drag-dot-vertical/index.js";
+import Radio from "../radio/index.js";
 import { computed, createVNode, defineComponent, inject } from "vue";
 //#region components/table/table-operation-td.tsx
 var table_operation_td_default = /* @__PURE__ */ defineComponent({

package/es/table/table-operation-th.js

@@ -1,9 +1,9 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isFunction } from "../_utils/is.js";
-import Checkbox from "../checkbox/index.js";
 import { tableInjectionKey } from "./context.js";
 import { getGridSpanStyle, getOperationFixedCls, getOperationStyle } from "./utils.js";
+import Checkbox from "../checkbox/index.js";
 import { computed, createVNode, defineComponent, inject } from "vue";
 //#region components/table/table-operation-th.tsx
 var table_operation_th_default = /* @__PURE__ */ defineComponent({

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.d.ts

@@ -32,8 +32,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     resizable: BooleanConstructor;
 }>> & Readonly<{}>, {
     column: TableColumnData;
-    resizable: boolean;
     dataColumns: TableColumnData[];
     operations: TableOperationColumn[];
+    resizable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/table/table-th.js

@@ -5,12 +5,12 @@ import icon_hover_default from "../_components/icon-hover.js";
 import { useI18n } from "../locale/index.js";
 import Trigger from "../trigger/index.js";
 import Button from "../button/index.js";
-import Checkbox from "../checkbox/index.js";
-import Radio from "../radio/index.js";
-import IconCaretDown from "../icon/icon-caret-down/index.js";
 import { tableInjectionKey } from "./context.js";
 import { getFixedCls, getGridSpanStyle, getStyle } from "./utils.js";
+import Checkbox from "../checkbox/index.js";
+import Radio from "../radio/index.js";
 import auto_tooltip_default from "../_components/auto-tooltip/auto-tooltip.js";
+import IconCaretDown from "../icon/icon-caret-down/index.js";
 import IconCaretUp from "../icon/icon-caret-up/index.js";
 import IconFilter from "../icon/icon-filter/index.js";
 import { useColumnFilter } from "./hooks/use-column-filter.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.d.ts

@@ -400,12 +400,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     bordered: boolean | TableBorder;
     columns: TableColumnData[];
     hoverable: boolean;
-    pagination: boolean | PaginationProps;
     defaultExpandAllRows: boolean;
     indentSize: number;
     filterIconAlignLeft: boolean;
     stripe: boolean;
     tableLayoutFixed: boolean;
+    pagination: boolean | PaginationProps;
     pagePosition: "top" | "tl" | "tr" | "bottom" | "bl" | "br";
     rowKey: string | ((record: TableData) => BaseType);
     showHeader: boolean;

package/es/table/table.js

@@ -10,12 +10,12 @@ import { useComponentRef } from "../_hooks/use-component-ref.js";
 import { useScrollbar } from "../_hooks/use-scrollbar.js";
 import Scrollbar from "../scrollbar/index.js";
 import Spin from "../spin/index.js";
-import Empty from "../empty/index.js";
 import { useChildrenComponents } from "../_hooks/use-children-components.js";
 import { debounce } from "../_utils/debounce.js";
+import { getValueByPath, setValueByPath } from "../_utils/get-value-by-path.js";
+import Empty from "../empty/index.js";
 import IconMinus from "../icon/icon-minus/index.js";
 import IconPlus from "../icon/icon-plus/index.js";
-import { getValueByPath, setValueByPath } from "../_utils/get-value-by-path.js";
 import Pagination from "../pagination/index.js";
 import { tableInjectionKey } from "./context.js";
 import { useColumnResize } from "./hooks/use-column-resize.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-button.js

@@ -1,8 +1,8 @@
 import { getPrefixCls } from "../_utils/global-config.js";
 import icon_hover_default from "../_components/icon-hover.js";
+import IconLeft from "../icon/icon-left/index.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";
 import IconUp from "../icon/icon-up/index.js";
 import { computed, createVNode, defineComponent, isVNode } from "vue";
 //#region components/tabs/tabs-button.tsx

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) {