niuma-ui 2.0.4 → 2.1.0

package/dist/components/tabs/src/RsTabs.impl.js

@@ -1,43 +1,79 @@
-import { DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger, TabsContent, TabsList, TabsRoot, TabsTrigger } from "../../_shared/src/reka.js";
+import { useRsConfigOptional } from "../../../composables/useRsConfig.js";
+import { resolveDirMode } from "../../../locale/apply.js";
 import { useRsI18n } from "../../../composables/useRsI18n.js";
 import RsIcon_default from "../../icon/src/RsIcon.js";
-import { buildTabContextMenuItems, getNextTabAfterBatchClose, getNextTabAfterClose, isTabClosable, isTabFixed, isTabRenamable, resolveTabsToClose } from "./tabs-utils.js";
+import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
+import RsDropdown_default from "../../dropdown/src/RsDropdown.js";
+import { buildTabContextMenuItems, getAdjacentTabValue, getEdgeTabValue, getNextTabAfterBatchClose, getNextTabAfterClose, isTabClosable, isTabFixed, isTabRenamable, isVerticalTabsPosition, resolveTabKeyboardMove, resolveTabsSize, resolveTabsToClose, shouldRenderTabPanel, tabPanelId, tabTriggerId } from "./tabs-utils.js";
 import { useRsTabsNav } from "../../../composables/useRsTabsNav.js";
 import RsContextMenu_default from "../../context-menu/src/RsContextMenu.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useModel, useSlots, vModelText, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useModel, useSlots, vModelText, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
 //#region src/components/tabs/src/RsTabs.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-tab-value"];
-var _hoisted_2 = { class: "rs-tabs__label" };
-var _hoisted_3 = {
+var _hoisted_1 = ["id"];
+var _hoisted_2 = ["data-tab-value"];
+var _hoisted_3 = { class: "rs-tabs__label" };
+var _hoisted_4 = {
 	key: 1,
 	class: "rs-tabs__badge"
 };
-var _hoisted_4 = ["aria-label"];
-var _hoisted_5 = [
+var _hoisted_5 = ["aria-label"];
+var _hoisted_6 = ["aria-label", "aria-orientation"];
+var _hoisted_7 = [
+	"id",
+	"aria-selected",
+	"aria-controls",
+	"tabindex",
+	"disabled",
+	"data-state",
+	"data-tab-value",
+	"data-fixed",
+	"draggable",
+	"onClick",
+	"onDragstart",
+	"onDragover",
+	"onDragleave",
+	"onDrop",
+	"onAuxclick"
+];
+var _hoisted_8 = {
+	key: 0,
+	class: "rs-tabs__drag",
+	"aria-hidden": "true"
+};
+var _hoisted_9 = [
 	"aria-label",
 	"placeholder",
 	"onKeydown",
 	"onBlur"
 ];
-var _hoisted_6 = ["title", "onDblclick"];
-var _hoisted_7 = {
-	key: 4,
+var _hoisted_10 = ["title", "onDblclick"];
+var _hoisted_11 = {
+	key: 5,
 	class: "rs-tabs__badge"
 };
-var _hoisted_8 = [
+var _hoisted_12 = [
 	"aria-label",
 	"disabled",
 	"onClick"
 ];
-var _hoisted_9 = { class: "rs-tabs__more-label" };
-var _hoisted_10 = ["aria-label"];
-var _hoisted_11 = ["aria-label"];
-var _hoisted_12 = { class: "rs-tabs__panel-inner" };
+var _hoisted_13 = ["aria-label"];
+var _hoisted_14 = { class: "rs-tabs__more-label" };
+var _hoisted_15 = ["aria-label"];
+var _hoisted_16 = ["aria-label"];
+var _hoisted_17 = [
+	"id",
+	"hidden",
+	"data-state",
+	"aria-labelledby",
+	"tabindex"
+];
+var _hoisted_18 = { class: "rs-tabs__panel-inner" };
 var RsTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsTabs",
 	__name: "RsTabs",
 	props: /*@__PURE__*/ mergeModels({
 		items: {},
-		size: { default: "md" },
+		size: {},
 		variant: { default: "line" },
 		panelless: {
 			type: Boolean,
@@ -49,6 +85,8 @@ var RsTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		},
 		contentGap: { default: "none" },
 		justify: { default: "start" },
+		tabPosition: { default: "top" },
+		activation: { default: "automatic" },
 		closable: {
 			type: Boolean,
 			default: false
@@ -66,6 +104,10 @@ var RsTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			type: Boolean,
 			default: false
 		},
+		showDragHandle: {
+			type: Boolean,
+			default: true
+		},
 		overflow: {
 			type: [String, Boolean],
 			default: false
@@ -74,12 +116,23 @@ var RsTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			type: Boolean,
 			default: false
 		},
-		beforeLeave: {}
+		beforeLeave: {},
+		lazy: {
+			type: Boolean,
+			default: false
+		},
+		destroyInactive: {
+			type: Boolean,
+			default: true
+		},
+		id: {},
+		ariaLabel: {}
 	}, {
 		"modelValue": { required: true },
 		"modelModifiers": {}
 	}),
 	emits: /*@__PURE__*/ mergeModels([
+		"change",
 		"close",
 		"closeBatch",
 		"add",
@@ -87,24 +140,40 @@ var RsTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		"reorder",
 		"contextMenu"
 	], ["update:modelValue"]),
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const model = useModel(__props, "modelValue");
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
-		const { t } = useRsI18n();
+		const { t, locale } = useRsI18n();
+		const config = useRsConfigOptional();
+		const autoId = useId();
 		const itemsRef = computed(() => props.items);
 		const overflowMode = computed(() => props.overflow);
+		const positionRef = computed(() => props.tabPosition);
 		const hasExtra = computed(() => Boolean(slots.extra));
 		const canAdd = computed(() => {
 			if (!props.addable) return false;
 			if (props.maxCount == null) return true;
 			return props.items.length < props.maxCount;
 		});
+		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const tabSize = computed(() => resolveTabsSize(resolvedSize.value));
+		const writingDir = computed(() => resolveDirMode(config?.dir.value ?? "auto", locale.value));
+		const vertical = computed(() => isVerticalTabsPosition(props.tabPosition));
+		const rootId = computed(() => props.id || `rs-tabs${autoId.replace(/[^a-zA-Z0-9_-]/g, "")}`);
+		const navLabel = computed(() => props.ariaLabel || t("tabs.label"));
+		const tabIconPx = computed(() => {
+			if (tabSize.value === "sm") return 12;
+			if (tabSize.value === "lg") return 16;
+			return 14;
+		});
+		const chromeIconPx = computed(() => tabSize.value === "lg" ? 14 : 12);
 		const navRef = ref(null);
 		const measureRef = ref(null);
 		const overflowWrapRef = ref(null);
 		const extraRef = ref(null);
+		const triggerEls = /* @__PURE__ */ new Map();
 		const { navViewportRef, useDropdownOverflow, useScrollOverflow, visibleTabItems, hiddenItems, overflowMenuItems, activeInHidden, showOverflowMenu, canScrollPrev, canScrollNext, scrollNav, onNavScroll, scheduleLayout } = useRsTabsNav({
 			items: itemsRef,
 			activeValue: model,
@@ -114,14 +183,35 @@ var RsTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			measureRef,
 			overflowRef: overflowWrapRef,
 			extraRef,
-			addButtonWidth: 36
+			addButtonWidth: 36,
+			position: positionRef
 		});
 		const renamingValue = ref(null);
 		const renameDraft = ref("");
 		const dragValue = ref(null);
 		const dragOverValue = ref(null);
+		const focusedValue = ref(model.value);
+		const visited = ref(new Set(model.value ? [model.value] : []));
 		let renameInputEl = null;
 		let leaveLock = false;
+		watch(model, (value) => {
+			focusedValue.value = value;
+			if (!value || visited.value.has(value)) return;
+			const next = new Set(visited.value);
+			next.add(value);
+			visited.value = next;
+		});
+		watch(() => props.items.map((item) => item.value).join("\0"), () => {
+			const values = new Set(props.items.map((item) => item.value));
+			visited.value = new Set([...visited.value].filter((value) => values.has(value)));
+		});
+		function setTriggerRef(value, el) {
+			if (el instanceof HTMLButtonElement) {
+				triggerEls.set(value, el);
+				return;
+			}
+			triggerEls.delete(value);
+		}
 		function setRenameInputRef(el, item) {
 			if (!(el instanceof HTMLInputElement) || renamingValue.value !== item.value) return;
 			renameInputEl = el;
@@ -133,7 +223,7 @@ var RsTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		const tabBarItems = computed(() => useDropdownOverflow.value ? visibleTabItems.value : props.items);
 		const moreLabel = computed(() => {
 			if (activeInHidden.value) return props.items.find((item) => item.value === model.value)?.label ?? t("tabs.more");
-			if (hiddenItems.value.length > 0) return `${t("tabs.more")} (${hiddenItems.value.length})`;
+			if (hiddenItems.value.length > 0) return t("tabs.moreCount", { count: hiddenItems.value.length });
 			return t("tabs.more");
 		});
 		const contextMenuLabels = computed(() => ({
@@ -143,40 +233,57 @@ var RsTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			closeRight: t("tabs.closeRight"),
 			closeAll: t("tabs.closeAll")
 		}));
+		const contextMenuMap = computed(() => {
+			if (!props.contextMenu) return /* @__PURE__ */ new Map();
+			const map = /* @__PURE__ */ new Map();
+			for (const item of props.items) map.set(item.value, buildTabContextMenuItems(props.items, item, props.closable, contextMenuLabels.value));
+			return map;
+		});
 		function closeAriaLabel(item) {
-			return t("tabs.close", "Close {label}").replace("{label}", item.label);
+			return t("tabs.close", { label: item.label });
 		}
 		function contextItemsFor(item) {
-			return buildTabContextMenuItems(props.items, item, props.closable, contextMenuLabels.value);
+			return contextMenuMap.value.get(item.value) ?? [];
 		}
 		function labelTitle(item) {
 			return item.label.length > 12 ? item.label : void 0;
 		}
+		function panelVisible(value) {
+			return shouldRenderTabPanel(value, model.value, visited.value, props.lazy, props.destroyInactive);
+		}
+		function setActive(value) {
+			if (model.value === value) return;
+			model.value = value;
+			focusedValue.value = value;
+			emit("change", value);
+		}
 		async function onSelectTab(next) {
 			const value = String(next);
-			if (value === model.value || leaveLock) return;
+			if (value === model.value || leaveLock) return value === model.value;
+			if (props.items.find((item) => item.value === value)?.disabled) return false;
 			if (props.beforeLeave) {
 				leaveLock = true;
 				try {
-					if (await props.beforeLeave(value, model.value) === false) return;
+					if (await props.beforeLeave(value, model.value) === false) return false;
 				} finally {
 					leaveLock = false;
 				}
 			}
-			model.value = value;
+			setActive(value);
+			return true;
 		}
 		function applyCloseValues(values, action, anchor) {
 			if (!values.length) return;
 			if (action === "close" && values.length === 1) {
 				const closed = values[0];
 				const next = getNextTabAfterClose(props.items, closed, model.value);
-				if (next && model.value === closed) model.value = next;
+				if (next && model.value === closed) setActive(next);
 				emit("close", closed);
 				return;
 			}
 			const next = getNextTabAfterBatchClose(props.items.filter((item) => !values.includes(item.value)), model.value, anchor);
-			if (next !== void 0 && next !== model.value) model.value = next;
-			else if (next === void 0) model.value = "";
+			if (next !== void 0 && next !== model.value) setActive(next);
+			else if (next === void 0 && model.value !== "") setActive("");
 			emit("closeBatch", values, action, anchor);
 		}
 		function onCloseTab(item) {
@@ -209,17 +316,6 @@ var RsTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			event.preventDefault();
 			onCloseTab(item);
 		}
-		/** 纵向滚轮转为横向滚动（scroll 溢出模式） */
-		function onNavWheel(event) {
-			if (!useScrollOverflow.value) return;
-			const viewport = navViewportRef.value;
-			if (!viewport) return;
-			if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
-			if (viewport.scrollWidth <= viewport.clientWidth) return;
-			event.preventDefault();
-			viewport.scrollLeft += event.deltaY;
-			onNavScroll();
-		}
 		async function startRename(item) {
 			if (!isTabRenamable(item, props.renamable) || item.disabled) return;
 			renamingValue.value = item.value;
@@ -274,251 +370,285 @@ var RsTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			dragValue.value = null;
 			dragOverValue.value = null;
 		}
+		async function moveFocus(value) {
+			focusedValue.value = value;
+			await nextTick();
+			triggerEls.get(value)?.focus();
+			if (props.activation === "automatic") onSelectTab(value);
+		}
+		function onTabListKeydown(event) {
+			if (renamingValue.value) return;
+			const move = resolveTabKeyboardMove(event.key, props.tabPosition, writingDir.value === "rtl");
+			if (move === "start" || move === "end") {
+				const next = getEdgeTabValue(tabBarItems.value, move);
+				if (!next) return;
+				event.preventDefault();
+				moveFocus(next);
+				return;
+			}
+			if (typeof move === "number") {
+				const next = getAdjacentTabValue(tabBarItems.value, focusedValue.value || model.value, move);
+				if (!next) return;
+				event.preventDefault();
+				moveFocus(next);
+				return;
+			}
+			if (event.key === "Enter" || event.key === " ") {
+				if (!focusedValue.value) return;
+				event.preventDefault();
+				onSelectTab(focusedValue.value);
+			}
+		}
+		function focus(value) {
+			const target = value ?? model.value;
+			if (!target) return;
+			focusedValue.value = target;
+			triggerEls.get(target)?.focus();
+		}
+		async function selectTab(value) {
+			return onSelectTab(value);
+		}
+		onUnmounted(() => {
+			triggerEls.clear();
+			renameInputEl = null;
+			leaveLock = false;
+		});
+		__expose({
+			focus,
+			selectTab
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(TabsRoot), {
-				"model-value": model.value,
+			return openBlock(), createElementBlock("div", {
+				id: __props.id,
 				class: normalizeClass(["rs-tabs", [
 					`rs-tabs--${__props.variant}`,
-					`rs-tabs--${__props.size}`,
+					`rs-tabs--${tabSize.value}`,
 					`rs-tabs--justify-${__props.justify}`,
 					`rs-tabs--content-gap-${__props.contentGap}`,
+					`rs-tabs--position-${__props.tabPosition}`,
 					{
 						"rs-tabs--panelless": __props.panelless,
 						"rs-tabs--borderless": __props.borderless,
 						"rs-tabs--scrollable": unref(useScrollOverflow),
 						"rs-tabs--dropdown-overflow": unref(useDropdownOverflow),
 						"rs-tabs--has-extra": hasExtra.value,
-						"rs-tabs--draggable": __props.draggable
+						"rs-tabs--draggable": __props.draggable,
+						"rs-tabs--vertical": vertical.value
 					}
-				]]),
-				"aria-label": unref(t)("tabs.label"),
-				"onUpdate:modelValue": onSelectTab
-			}, {
-				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(__props.panelless ? "rs-tabs__shell" : "rs-tabs__body") }, [
-					unref(useDropdownOverflow) ? (openBlock(), createElementBlock("div", {
-						key: 0,
-						ref_key: "measureRef",
-						ref: measureRef,
-						class: "rs-tabs__measure",
-						"aria-hidden": "true"
-					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
-						return openBlock(), createElementBlock("button", {
-							key: `measure-${item.value}`,
-							type: "button",
-							class: normalizeClass(["rs-tabs__trigger rs-tabs__measure-trigger", `rs-tabs__trigger--${__props.size}`]),
-							"data-tab-value": item.value,
-							tabindex: "-1"
-						}, [
-							item.icon ? (openBlock(), createBlock(RsIcon_default, {
-								key: 0,
-								name: item.icon,
-								size: 14,
-								class: "rs-tabs__icon"
-							}, null, 8, ["name"])) : createCommentVNode("", true),
-							createElementVNode("span", _hoisted_2, toDisplayString(item.label), 1),
-							item.badge != null && item.badge !== "" ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(item.badge), 1)) : createCommentVNode("", true)
-						], 10, _hoisted_1);
-					}), 128))], 512)) : createCommentVNode("", true),
-					createElementVNode("div", {
-						ref_key: "navRef",
-						ref: navRef,
-						class: "rs-tabs__nav"
+				]])
+			}, [createElementVNode("div", { class: normalizeClass(__props.panelless ? "rs-tabs__shell" : "rs-tabs__body") }, [
+				unref(useDropdownOverflow) ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "measureRef",
+					ref: measureRef,
+					class: "rs-tabs__measure",
+					"aria-hidden": "true"
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+					return openBlock(), createElementBlock("button", {
+						key: `measure-${item.value}`,
+						type: "button",
+						class: normalizeClass(["rs-tabs__trigger rs-tabs__measure-trigger", `rs-tabs__trigger--${tabSize.value}`]),
+						"data-tab-value": item.value,
+						tabindex: "-1"
 					}, [
-						unref(useScrollOverflow) && unref(canScrollPrev) ? (openBlock(), createElementBlock("button", {
+						item.icon ? (openBlock(), createBlock(RsIcon_default, {
 							key: 0,
-							type: "button",
-							class: "rs-tabs__scroll-btn rs-tabs__scroll-btn--prev",
-							"aria-label": unref(t)("tabs.scrollPrev"),
-							onClick: _cache[0] || (_cache[0] = ($event) => unref(scrollNav)(-1))
-						}, [createVNode(RsIcon_default, {
-							name: "chevron-left",
-							size: 14
-						})], 8, _hoisted_4)) : createCommentVNode("", true),
-						createElementVNode("div", mergeProps({
-							ref_key: "navViewportRef",
-							ref: navViewportRef,
-							class: "rs-tabs__nav-viewport",
-							onScrollPassive: _cache[9] || (_cache[9] = (...args) => unref(onNavScroll) && unref(onNavScroll)(...args))
-						}, unref(useScrollOverflow) ? { onWheel: onNavWheel } : {}), [createVNode(unref(TabsList), { class: "rs-tabs__list" }, {
-							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(tabBarItems.value, (item) => {
-								return openBlock(), createBlock(RsContextMenu_default, {
-									key: item.value,
-									items: contextItemsFor(item),
-									disabled: !__props.contextMenu,
-									onSelect: (key) => onContextSelect(key, item)
-								}, {
-									default: withCtx(() => [createVNode(unref(TabsTrigger), {
-										value: item.value,
-										disabled: item.disabled,
-										class: normalizeClass(["rs-tabs__trigger", {
-											"rs-tabs__trigger--dragging": dragValue.value === item.value,
-											"rs-tabs__trigger--drag-over": dragOverValue.value === item.value,
-											"rs-tabs__trigger--fixed": unref(isTabFixed)(item),
-											"rs-tabs__trigger--movable": canDragItem(item)
-										}]),
-										"data-tab-value": item.value,
-										"data-fixed": unref(isTabFixed)(item) ? "true" : void 0,
-										draggable: canDragItem(item) || void 0,
-										onDragstart: ($event) => onDragStart(item, $event),
-										onDragover: ($event) => onDragOver(item, $event),
-										onDragleave: ($event) => onDragLeave(item),
-										onDrop: ($event) => onDrop(item, $event),
-										onDragend: onDragEnd,
-										onAuxclick: ($event) => onTabAuxClick(item, $event)
-									}, {
-										default: withCtx(() => [
-											unref(isTabFixed)(item) ? (openBlock(), createBlock(RsIcon_default, {
-												key: 0,
-												name: "pin",
-												size: 12,
-												class: "rs-tabs__pin"
-											})) : createCommentVNode("", true),
-											item.icon ? (openBlock(), createBlock(RsIcon_default, {
-												key: 1,
-												name: item.icon,
-												size: 14,
-												class: "rs-tabs__icon"
-											}, null, 8, ["name"])) : createCommentVNode("", true),
-											renamingValue.value === item.value ? withDirectives((openBlock(), createElementBlock("input", {
-												key: 2,
-												ref_for: true,
-												ref: (el) => setRenameInputRef(el, item),
-												"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => renameDraft.value = $event),
-												class: "rs-tabs__rename-input",
-												"aria-label": unref(t)("tabs.rename"),
-												placeholder: unref(t)("tabs.renamePlaceholder"),
-												draggable: "false",
-												onKeydown: [withKeys(withModifiers(($event) => commitRename(item), ["prevent"]), ["enter"]), withKeys(withModifiers(cancelRename, ["prevent"]), ["escape"])],
-												onBlur: ($event) => commitRename(item),
-												onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
-												onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"])),
-												onDblclick: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"])),
-												onDragstart: _cache[5] || (_cache[5] = withModifiers(() => {}, ["stop", "prevent"]))
-											}, null, 40, _hoisted_5)), [[vModelText, renameDraft.value]]) : (openBlock(), createElementBlock("span", {
-												key: 3,
-												class: "rs-tabs__label",
-												title: labelTitle(item),
-												onDblclick: withModifiers(($event) => startRename(item), ["stop"])
-											}, toDisplayString(item.label), 41, _hoisted_6)),
-											item.badge != null && item.badge !== "" ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(item.badge), 1)) : createCommentVNode("", true),
-											unref(isTabClosable)(item, __props.closable) ? (openBlock(), createElementBlock("button", {
-												key: 5,
-												type: "button",
-												class: "rs-tabs__close",
-												"aria-label": closeAriaLabel(item),
-												disabled: item.disabled,
-												draggable: "false",
-												onMousedown: _cache[6] || (_cache[6] = withModifiers(() => {}, ["stop", "prevent"])),
-												onClick: withModifiers(($event) => onCloseTab(item), ["stop"]),
-												onAuxclick: _cache[7] || (_cache[7] = withModifiers(() => {}, ["stop", "prevent"])),
-												onDragstart: _cache[8] || (_cache[8] = withModifiers(() => {}, ["stop", "prevent"]))
-											}, [createVNode(RsIcon_default, {
-												name: "x",
-												size: 12
-											})], 40, _hoisted_8)) : createCommentVNode("", true)
-										]),
-										_: 2
-									}, 1032, [
-										"value",
-										"disabled",
-										"class",
-										"data-tab-value",
-										"data-fixed",
-										"draggable",
-										"onDragstart",
-										"onDragover",
-										"onDragleave",
-										"onDrop",
-										"onAuxclick"
-									])]),
-									_: 2
-								}, 1032, [
-									"items",
-									"disabled",
-									"onSelect"
-								]);
-							}), 128))]),
-							_: 1
-						})], 16),
-						unref(showOverflowMenu) ? (openBlock(), createElementBlock("div", {
-							key: 1,
-							ref_key: "overflowWrapRef",
-							ref: overflowWrapRef,
-							class: "rs-tabs__overflow-wrap"
-						}, [createVNode(unref(DropdownMenuRoot), null, {
-							default: withCtx(() => [createVNode(unref(DropdownMenuTrigger), { class: normalizeClass(["rs-tabs__more", { "rs-tabs__more--active": unref(activeInHidden) }]) }, {
-								default: withCtx(() => [createElementVNode("span", _hoisted_9, toDisplayString(moreLabel.value), 1), createVNode(RsIcon_default, {
-									name: "chevron-down",
-									size: 14,
-									class: "rs-tabs__more-icon"
-								})]),
-								_: 1
-							}, 8, ["class"]), createVNode(unref(DropdownMenuPortal), null, {
-								default: withCtx(() => [createVNode(unref(DropdownMenuContent), {
-									class: "rs-tabs__more-menu",
-									"side-offset": 4,
-									align: "end"
-								}, {
-									default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(overflowMenuItems), (item) => {
-										return openBlock(), createBlock(unref(DropdownMenuItem), {
-											key: item.value,
-											class: normalizeClass(["rs-tabs__more-item", { "rs-tabs__more-item--active": model.value === item.value }]),
-											onSelect: ($event) => onOverflowSelect(item.value)
-										}, {
-											default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
-											_: 2
-										}, 1032, ["class", "onSelect"]);
-									}), 128))]),
-									_: 1
-								})]),
-								_: 1
-							})]),
-							_: 1
-						})], 512)) : createCommentVNode("", true),
-						canAdd.value ? (openBlock(), createElementBlock("button", {
-							key: 2,
-							type: "button",
-							class: "rs-tabs__add",
-							"aria-label": unref(t)("tabs.add"),
-							onClick: onAddTab
-						}, [createVNode(RsIcon_default, {
-							name: "plus",
-							size: 14
-						})], 8, _hoisted_10)) : createCommentVNode("", true),
-						unref(useScrollOverflow) && unref(canScrollNext) ? (openBlock(), createElementBlock("button", {
-							key: 3,
-							type: "button",
-							class: "rs-tabs__scroll-btn rs-tabs__scroll-btn--next",
-							"aria-label": unref(t)("tabs.scrollNext"),
-							onClick: _cache[10] || (_cache[10] = ($event) => unref(scrollNav)(1))
-						}, [createVNode(RsIcon_default, {
-							name: "chevron-right",
-							size: 14
-						})], 8, _hoisted_11)) : createCommentVNode("", true),
-						hasExtra.value ? (openBlock(), createElementBlock("div", {
-							key: 4,
-							ref_key: "extraRef",
-							ref: extraRef,
-							class: "rs-tabs__extra"
-						}, [renderSlot(_ctx.$slots, "extra")], 512)) : createCommentVNode("", true)
-					], 512),
-					!__props.panelless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(__props.items, (item) => {
-						return openBlock(), createBlock(unref(TabsContent), {
-							key: `panel-${item.value}`,
-							value: item.value,
-							class: "rs-tabs__panel"
+							name: item.icon,
+							size: tabIconPx.value,
+							class: "rs-tabs__icon"
+						}, null, 8, ["name", "size"])) : createCommentVNode("", true),
+						createElementVNode("span", _hoisted_3, toDisplayString(item.label), 1),
+						item.badge != null && item.badge !== "" ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(item.badge), 1)) : createCommentVNode("", true)
+					], 10, _hoisted_2);
+				}), 128))], 512)) : createCommentVNode("", true),
+				createElementVNode("div", {
+					ref_key: "navRef",
+					ref: navRef,
+					class: "rs-tabs__nav"
+				}, [
+					unref(useScrollOverflow) && unref(canScrollPrev) ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						class: "rs-tabs__scroll-btn rs-tabs__scroll-btn--prev",
+						"aria-label": unref(t)("tabs.scrollPrev"),
+						tabindex: "-1",
+						onClick: _cache[0] || (_cache[0] = ($event) => unref(scrollNav)(-1))
+					}, [createVNode(RsIcon_default, {
+						name: "chevron-left",
+						size: tabIconPx.value
+					}, null, 8, ["size"])], 8, _hoisted_5)) : createCommentVNode("", true),
+					createElementVNode("div", {
+						ref_key: "navViewportRef",
+						ref: navViewportRef,
+						class: "rs-tabs__nav-viewport",
+						onScrollPassive: _cache[9] || (_cache[9] = (...args) => unref(onNavScroll) && unref(onNavScroll)(...args))
+					}, [createElementVNode("div", {
+						class: "rs-tabs__list",
+						role: "tablist",
+						"aria-label": navLabel.value,
+						"aria-orientation": vertical.value ? "vertical" : "horizontal",
+						onKeydown: onTabListKeydown
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(tabBarItems.value, (item) => {
+						return openBlock(), createBlock(RsContextMenu_default, {
+							key: item.value,
+							items: contextItemsFor(item),
+							disabled: !__props.contextMenu,
+							onSelect: (key) => onContextSelect(key, item)
 						}, {
-							default: withCtx(() => [createElementVNode("div", _hoisted_12, [renderSlot(_ctx.$slots, item.value)])]),
+							default: withCtx(() => [createElementVNode("button", {
+								id: unref(tabTriggerId)(rootId.value, item.value),
+								ref_for: true,
+								ref: (el) => setTriggerRef(item.value, el),
+								type: "button",
+								role: "tab",
+								class: normalizeClass(["rs-tabs__trigger", {
+									"rs-tabs__trigger--dragging": dragValue.value === item.value,
+									"rs-tabs__trigger--drag-over": dragOverValue.value === item.value,
+									"rs-tabs__trigger--fixed": unref(isTabFixed)(item),
+									"rs-tabs__trigger--movable": canDragItem(item)
+								}]),
+								"aria-selected": model.value === item.value,
+								"aria-controls": __props.panelless ? void 0 : unref(tabPanelId)(rootId.value, item.value),
+								tabindex: (focusedValue.value || model.value) === item.value ? 0 : -1,
+								disabled: item.disabled,
+								"data-state": model.value === item.value ? "active" : "inactive",
+								"data-tab-value": item.value,
+								"data-fixed": unref(isTabFixed)(item) ? "true" : void 0,
+								draggable: canDragItem(item) || void 0,
+								onClick: ($event) => onSelectTab(item.value),
+								onDragstart: ($event) => onDragStart(item, $event),
+								onDragover: ($event) => onDragOver(item, $event),
+								onDragleave: ($event) => onDragLeave(item),
+								onDrop: ($event) => onDrop(item, $event),
+								onDragend: onDragEnd,
+								onAuxclick: ($event) => onTabAuxClick(item, $event)
+							}, [renderSlot(_ctx.$slots, "tab", {
+								item,
+								active: model.value === item.value,
+								disabled: Boolean(item.disabled)
+							}, () => [
+								canDragItem(item) && __props.showDragHandle ? (openBlock(), createElementBlock("span", _hoisted_8)) : createCommentVNode("", true),
+								unref(isTabFixed)(item) ? (openBlock(), createBlock(RsIcon_default, {
+									key: 1,
+									name: "pin",
+									size: chromeIconPx.value,
+									class: "rs-tabs__pin"
+								}, null, 8, ["size"])) : createCommentVNode("", true),
+								item.icon ? (openBlock(), createBlock(RsIcon_default, {
+									key: 2,
+									name: item.icon,
+									size: tabIconPx.value,
+									class: "rs-tabs__icon"
+								}, null, 8, ["name", "size"])) : createCommentVNode("", true),
+								renamingValue.value === item.value ? withDirectives((openBlock(), createElementBlock("input", {
+									key: 3,
+									ref_for: true,
+									ref: (el) => setRenameInputRef(el, item),
+									"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => renameDraft.value = $event),
+									class: "rs-tabs__rename-input",
+									"aria-label": unref(t)("tabs.rename"),
+									placeholder: unref(t)("tabs.renamePlaceholder"),
+									draggable: "false",
+									onKeydown: [withKeys(withModifiers(($event) => commitRename(item), ["prevent"]), ["enter"]), withKeys(withModifiers(cancelRename, ["prevent"]), ["escape"])],
+									onBlur: ($event) => commitRename(item),
+									onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
+									onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"])),
+									onDblclick: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"])),
+									onDragstart: _cache[5] || (_cache[5] = withModifiers(() => {}, ["stop", "prevent"]))
+								}, null, 40, _hoisted_9)), [[vModelText, renameDraft.value]]) : (openBlock(), createElementBlock("span", {
+									key: 4,
+									class: "rs-tabs__label",
+									title: labelTitle(item),
+									onDblclick: withModifiers(($event) => startRename(item), ["stop"])
+								}, toDisplayString(item.label), 41, _hoisted_10)),
+								item.badge != null && item.badge !== "" ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(item.badge), 1)) : createCommentVNode("", true),
+								unref(isTabClosable)(item, __props.closable) ? (openBlock(), createElementBlock("button", {
+									key: 6,
+									type: "button",
+									class: "rs-tabs__close",
+									"aria-label": closeAriaLabel(item),
+									disabled: item.disabled,
+									tabindex: "-1",
+									draggable: "false",
+									onMousedown: _cache[6] || (_cache[6] = withModifiers(() => {}, ["stop", "prevent"])),
+									onClick: withModifiers(($event) => onCloseTab(item), ["stop"]),
+									onAuxclick: _cache[7] || (_cache[7] = withModifiers(() => {}, ["stop", "prevent"])),
+									onDragstart: _cache[8] || (_cache[8] = withModifiers(() => {}, ["stop", "prevent"]))
+								}, [createVNode(RsIcon_default, {
+									name: "x",
+									size: chromeIconPx.value
+								}, null, 8, ["size"])], 40, _hoisted_12)) : createCommentVNode("", true)
+							])], 42, _hoisted_7)]),
 							_: 2
-						}, 1032, ["value"]);
-					}), 128)) : createCommentVNode("", true)
-				], 2)]),
-				_: 3
-			}, 8, [
-				"model-value",
-				"class",
-				"aria-label"
-			]);
+						}, 1032, [
+							"items",
+							"disabled",
+							"onSelect"
+						]);
+					}), 128))], 40, _hoisted_6)], 544),
+					unref(showOverflowMenu) ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						ref_key: "overflowWrapRef",
+						ref: overflowWrapRef,
+						class: "rs-tabs__overflow-wrap"
+					}, [createVNode(RsDropdown_default, {
+						items: unref(overflowMenuItems),
+						"show-selected": false,
+						"content-width": "fit",
+						onSelect: onOverflowSelect
+					}, {
+						trigger: withCtx(() => [createElementVNode("button", {
+							type: "button",
+							class: normalizeClass(["rs-tabs__more", { "rs-tabs__more--active": unref(activeInHidden) }]),
+							"aria-label": moreLabel.value
+						}, [createElementVNode("span", _hoisted_14, toDisplayString(moreLabel.value), 1), createVNode(RsIcon_default, {
+							name: "chevron-down",
+							size: tabIconPx.value,
+							class: "rs-tabs__more-icon"
+						}, null, 8, ["size"])], 10, _hoisted_13)]),
+						_: 1
+					}, 8, ["items"])], 512)) : createCommentVNode("", true),
+					canAdd.value ? (openBlock(), createElementBlock("button", {
+						key: 2,
+						type: "button",
+						class: "rs-tabs__add",
+						"aria-label": unref(t)("tabs.add"),
+						onClick: onAddTab
+					}, [createVNode(RsIcon_default, {
+						name: "plus",
+						size: tabIconPx.value
+					}, null, 8, ["size"])], 8, _hoisted_15)) : createCommentVNode("", true),
+					unref(useScrollOverflow) && unref(canScrollNext) ? (openBlock(), createElementBlock("button", {
+						key: 3,
+						type: "button",
+						class: "rs-tabs__scroll-btn rs-tabs__scroll-btn--next",
+						"aria-label": unref(t)("tabs.scrollNext"),
+						tabindex: "-1",
+						onClick: _cache[10] || (_cache[10] = ($event) => unref(scrollNav)(1))
+					}, [createVNode(RsIcon_default, {
+						name: "chevron-right",
+						size: tabIconPx.value
+					}, null, 8, ["size"])], 8, _hoisted_16)) : createCommentVNode("", true),
+					hasExtra.value ? (openBlock(), createElementBlock("div", {
+						key: 4,
+						ref_key: "extraRef",
+						ref: extraRef,
+						class: "rs-tabs__extra"
+					}, [renderSlot(_ctx.$slots, "extra")], 512)) : createCommentVNode("", true)
+				], 512),
+				!__props.panelless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(__props.items, (item) => {
+					return openBlock(), createElementBlock(Fragment, { key: `panel-${item.value}` }, [panelVisible(item.value) ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						id: unref(tabPanelId)(rootId.value, item.value),
+						role: "tabpanel",
+						class: "rs-tabs__panel",
+						hidden: item.value !== model.value,
+						"data-state": item.value === model.value ? "active" : "inactive",
+						"aria-labelledby": unref(tabTriggerId)(rootId.value, item.value),
+						tabindex: item.value === model.value ? 0 : void 0
+					}, [createElementVNode("div", _hoisted_18, [renderSlot(_ctx.$slots, item.value)])], 8, _hoisted_17)) : createCommentVNode("", true)], 64);
+				}), 128)) : createCommentVNode("", true)
+			], 2)], 10, _hoisted_1);
 		};
 	}
 });