@auronui/vue 1.0.4 → 1.0.6

package/dist/cjs/index.cjs

@@ -373,7 +373,7 @@ function createContext(contextName) {
 }
 //#endregion
 //#region src/components/spinner/Spinner.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$58 = ["aria-label"];
+var _hoisted_1$59 = ["aria-label"];
 var _hoisted_2$32 = {
 	"data-slot": "spinner-icon",
 	viewBox: "0 0 24 24",
@@ -447,13 +447,13 @@ var Spinner_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					fill: `url(#${gradId2})`,
 					transform: "translate(1.5 1.625)"
 				}, null, 8, _hoisted_5$10)
-			])]))], 10, _hoisted_1$58);
+			])]))], 10, _hoisted_1$59);
 		};
 	}
 });
 //#endregion
 //#region src/components/separator/Separator.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$57 = { class: "separator__content" };
+var _hoisted_1$58 = { class: "separator__content" };
 //#endregion
 //#region src/components/separator/Separator.vue
 var Separator_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -487,7 +487,7 @@ var Separator_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"aria-orientation": "horizontal"
 			}, [
 				_cache[0] || (_cache[0] = (0, vue.createElementVNode)("div", { class: "separator__line" }, null, -1)),
-				(0, vue.createElementVNode)("div", _hoisted_1$57, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				(0, vue.createElementVNode)("div", _hoisted_1$58, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_cache[1] || (_cache[1] = (0, vue.createElementVNode)("div", { class: "separator__line" }, null, -1))
 			], 2));
 		};
@@ -539,7 +539,7 @@ var Text_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/label/Label.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$56 = ["for"];
+var _hoisted_1$57 = ["for"];
 //#endregion
 //#region src/components/label/Label.vue
 var Label_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -571,13 +571,13 @@ var Label_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
 				class: (0, vue.normalizeClass)(classes.value),
 				for: props.for
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$56);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$57);
 		};
 	}
 });
 //#endregion
 //#region src/components/description/Description.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$55 = ["id"];
+var _hoisted_1$56 = ["id"];
 //#endregion
 //#region src/components/description/Description.vue
 var Description_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -593,7 +593,7 @@ var Description_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("p", {
 				id: props.id,
 				class: (0, vue.normalizeClass)(classes.value)
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$55);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$56);
 		};
 	}
 });
@@ -661,7 +661,7 @@ var Badge_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/chip/Chip.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$54 = ["aria-label"];
+var _hoisted_1$55 = ["aria-label"];
 //#endregion
 //#region src/components/chip/Chip.vue
 var Chip_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -734,7 +734,7 @@ var Chip_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					y1: "6",
 					x2: "18",
 					y2: "18"
-				})], -1)])], 10, _hoisted_1$54)) : (0, vue.createCommentVNode)("", true)
+				})], -1)])], 10, _hoisted_1$55)) : (0, vue.createCommentVNode)("", true)
 			], 2);
 		};
 	}
@@ -767,7 +767,7 @@ var Surface_default = /* @__PURE__ */ (0, vue.defineComponent)({
 var { useProvide: useCardProvide, useInject: useCardInject, key: cardContextKey } = createContext("Card");
 //#endregion
 //#region src/components/card/Card.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$53 = [
+var _hoisted_1$54 = [
 	"role",
 	"tabindex",
 	"aria-disabled",
@@ -843,7 +843,7 @@ var Card_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"data-disabled": __props.isDisabled || void 0,
 				onClick,
 				onKeydown
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 42, _hoisted_1$53);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 42, _hoisted_1$54);
 		};
 	}
 });
@@ -1068,7 +1068,7 @@ var Button_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/button/ButtonGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$52 = ["data-orientation"];
+var _hoisted_1$53 = ["data-orientation"];
 //#endregion
 //#region src/components/button/ButtonGroup.vue
 var ButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -1133,7 +1133,7 @@ var ButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
 				"data-orientation": props.orientation,
 				role: "group"
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$52);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$53);
 		};
 	}
 });
@@ -1205,7 +1205,7 @@ var CloseButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
 var { useProvide: useToggleButtonGroupProvide, useInject: useToggleButtonGroupInject, key: toggleButtonGroupContextKey } = createContext("ToggleButtonGroup");
 //#endregion
 //#region src/components/button/ToggleButton.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$51 = ["disabled", "data-orientation"];
+var _hoisted_1$52 = ["disabled", "data-orientation"];
 //#endregion
 //#region src/components/button/ToggleButton.vue
 var ToggleButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -1276,7 +1276,7 @@ var ToggleButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					disabled: isDisabled.value || void 0,
 					"data-orientation": (0, vue.unref)(groupCtx).orientation.value,
 					type: "button"
-				}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$51)]),
+				}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$52)]),
 				_: 3
 			}, 8, [
 				"disabled",
@@ -1288,7 +1288,7 @@ var ToggleButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/button/ToggleButtonGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$50 = ["data-orientation"];
+var _hoisted_1$51 = ["data-orientation"];
 //#endregion
 //#region src/components/button/ToggleButtonGroup.vue
 var ToggleButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -1355,7 +1355,7 @@ var ToggleButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
 				"data-orientation": props.orientation,
 				role: "group"
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$50);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$51);
 		};
 	}
 });
@@ -1681,7 +1681,7 @@ var FormField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/input/Input.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$49 = [
+var _hoisted_1$50 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -1946,13 +1946,13 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 1,
 				id: descriptionId.value,
 				class: (0, vue.normalizeClass)(slotFns.value.description())
-			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_12)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$49);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_12)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$50);
 		};
 	}
 });
 //#endregion
 //#region src/components/textarea/Textarea.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$48 = [
+var _hoisted_1$49 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -2169,13 +2169,13 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 1,
 				id: descriptionId.value,
 				class: (0, vue.normalizeClass)(slotFns.value.description())
-			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_9)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$48);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_9)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$49);
 		};
 	}
 });
 //#endregion
 //#region src/components/number-field/NumberField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$47 = ["for"];
+var _hoisted_1$48 = ["for"];
 //#endregion
 //#region src/components/number-field/NumberField.vue
 var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -2255,7 +2255,7 @@ var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					for: resolvedInputId.value,
 					class: (0, vue.normalizeClass)(isLabelVisible.value ? void 0 : "sr-only"),
 					"data-slot": "label"
-				}, (0, vue.toDisplayString)(props.label || props.ariaLabel), 11, _hoisted_1$47)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", {
+				}, (0, vue.toDisplayString)(props.label || props.ariaLabel), 11, _hoisted_1$48)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", {
 					class: (0, vue.normalizeClass)(slotFns.value.group()),
 					"data-slot": "group"
 				}, [
@@ -2318,7 +2318,7 @@ var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/fieldset/Fieldset.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$46 = ["disabled"];
+var _hoisted_1$47 = ["disabled"];
 //#endregion
 //#region src/components/fieldset/Fieldset.vue
 var Fieldset_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -2346,7 +2346,7 @@ var Fieldset_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, [props.legend ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("legend", {
 				key: 0,
 				class: (0, vue.normalizeClass)((0, vue.unref)(styles).legend())
-			}, (0, vue.toDisplayString)(props.legend), 3)) : (0, vue.createCommentVNode)("", true), (0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$46);
+			}, (0, vue.toDisplayString)(props.legend), 3)) : (0, vue.createCommentVNode)("", true), (0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$47);
 		};
 	}
 });
@@ -2355,7 +2355,7 @@ var Fieldset_default = /* @__PURE__ */ (0, vue.defineComponent)({
 var { useProvide: useCheckboxGroupProvide, useInject: useCheckboxGroupInject, key: checkboxGroupContextKey } = createContext("CheckboxGroup");
 //#endregion
 //#region src/components/checkbox/Checkbox.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$45 = {
+var _hoisted_1$46 = {
 	key: 0,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "12",
@@ -2442,7 +2442,7 @@ var Checkbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"onUpdate:modelValue": handleUpdate
 			}), {
 				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.control()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.CheckboxIndicator), { class: (0, vue.normalizeClass)(slotFns.value.indicator()) }, {
-					default: (0, vue.withCtx)(() => [props.isIndeterminate ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$45, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("line", {
+					default: (0, vue.withCtx)(() => [props.isIndeterminate ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$46, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("line", {
 						x1: "5",
 						y1: "12",
 						x2: "19",
@@ -2463,7 +2463,7 @@ var Checkbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/checkbox/CheckboxGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$44 = ["aria-labelledby", "data-orientation"];
+var _hoisted_1$45 = ["aria-labelledby", "data-orientation"];
 var _hoisted_2$28 = { class: "checkbox-group__wrapper" };
 var _hoisted_3$18 = {
 	key: 1,
@@ -2521,7 +2521,7 @@ var CheckboxGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, (0, vue.toDisplayString)(props.label), 1)) : (0, vue.createCommentVNode)("", true),
 				(0, vue.createElementVNode)("div", _hoisted_2$28, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$18, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
-			], 10, _hoisted_1$44);
+			], 10, _hoisted_1$45);
 		};
 	}
 });
@@ -2572,7 +2572,7 @@ var Radio_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/radio/RadioGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$43 = { class: "radio-group__wrapper" };
+var _hoisted_1$44 = { class: "radio-group__wrapper" };
 var _hoisted_2$27 = {
 	key: 1,
 	class: "radio-group__description"
@@ -2622,7 +2622,7 @@ var RadioGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						id: labelId,
 						class: "radio-group__label"
 					}, (0, vue.toDisplayString)(props.label), 1)) : (0, vue.createCommentVNode)("", true),
-					(0, vue.createElementVNode)("div", _hoisted_1$43, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+					(0, vue.createElementVNode)("div", _hoisted_1$44, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 					props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$27, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
 				]),
 				_: 3
@@ -2714,7 +2714,7 @@ var Switch_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/switch/SwitchGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$42 = ["aria-labelledby", "data-orientation"];
+var _hoisted_1$43 = ["aria-labelledby", "data-orientation"];
 var _hoisted_2$26 = {
 	key: 1,
 	class: "switch-group__description"
@@ -2771,7 +2771,7 @@ var SwitchGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, (0, vue.toDisplayString)(props.label), 1)) : (0, vue.createCommentVNode)("", true),
 				(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(groupSlots.value.items()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2),
 				props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$26, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
-			], 10, _hoisted_1$42);
+			], 10, _hoisted_1$43);
 		};
 	}
 });
@@ -12583,7 +12583,7 @@ var AlertDialogOverlay_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/alert-dialog/AlertDialogContent.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$41 = ["data-placement"];
+var _hoisted_1$42 = ["data-placement"];
 //#endregion
 //#region src/components/alert-dialog/AlertDialogContent.vue
 var AlertDialogContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -12618,7 +12618,7 @@ var AlertDialogContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 					_: 3
-				}, 8, ["class", "data-placement"])], 10, _hoisted_1$41)]),
+				}, 8, ["class", "data-placement"])], 10, _hoisted_1$42)]),
 				_: 3
 			});
 		};
@@ -12768,7 +12768,7 @@ var AlertDialogDescription_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/alert-dialog/AlertDialogIcon.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$40 = {
+var _hoisted_1$41 = {
 	key: 0,
 	"data-slot": "alert-dialog-default-icon",
 	viewBox: "0 0 24 24",
@@ -12830,7 +12830,7 @@ var AlertDialogIcon_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(styles).icon({ status: resolvedStatus() }), props.class)),
 				"aria-hidden": "true"
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [resolvedStatus() === "danger" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$40, [..._cache[0] || (_cache[0] = [
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [resolvedStatus() === "danger" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$41, [..._cache[0] || (_cache[0] = [
 				(0, vue.createElementVNode)("circle", {
 					cx: "12",
 					cy: "12",
@@ -13180,26 +13180,34 @@ var Tabs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const internalValue = (0, vue.ref)(props.modelValue ?? props.defaultValue);
+		(0, vue.watch)(() => props.modelValue, (v) => {
+			if (v !== void 0) internalValue.value = v;
+		});
+		function changeTab(value) {
+			internalValue.value = value;
+			emit("update:modelValue", value);
+		}
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.tabsVariants)({ variant: props.variant }));
 		useTabsProvide({
 			slotFns,
-			orientation: (0, vue.toRef)(props, "orientation")
+			orientation: (0, vue.toRef)(props, "orientation"),
+			currentValue: internalValue,
+			changeTab
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TabsRoot), {
-				"model-value": props.modelValue,
-				"default-value": props.defaultValue,
+				"model-value": internalValue.value,
 				orientation: props.orientation,
 				"activation-mode": props.activationMode,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
 				"data-orientation": props.orientation,
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => emit("update:modelValue", v))
+				"onUpdate:modelValue": changeTab
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
 			}, 8, [
 				"model-value",
-				"default-value",
 				"orientation",
 				"activation-mode",
 				"class",
@@ -13209,24 +13217,283 @@ var Tabs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
+//#region src/components/tabs/TabList.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$40 = {
+	key: 0,
+	class: "tabs__overflow-menu",
+	role: "menu"
+};
+//#endregion
 //#region src/components/tabs/TabList.vue
 var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "TabList",
 	props: {
 		loop: { type: Boolean },
+		overflow: {},
 		class: {}
 	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useTabsInject();
+		const scrollWrapperEl = (0, vue.useTemplateRef)("scrollWrapperEl");
+		const canScrollLeft = (0, vue.ref)(false);
+		const canScrollRight = (0, vue.ref)(false);
+		function updateScrollButtons() {
+			const el = scrollWrapperEl.value;
+			if (!el) {
+				canScrollLeft.value = false;
+				canScrollRight.value = false;
+				return;
+			}
+			canScrollLeft.value = el.scrollLeft > 1;
+			canScrollRight.value = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+		}
+		function scrollTabs(dir) {
+			const el = scrollWrapperEl.value;
+			if (!el) return;
+			el.scrollBy({
+				left: dir === "left" ? -200 : 200,
+				behavior: "smooth"
+			});
+			setTimeout(updateScrollButtons, 150);
+			setTimeout(updateScrollButtons, 350);
+		}
+		(0, vue.watch)(scrollWrapperEl, (el, oldEl) => {
+			if (oldEl) oldEl.removeEventListener("scroll", updateScrollButtons);
+			if (el) {
+				el.addEventListener("scroll", updateScrollButtons, { passive: true });
+				(0, vue.nextTick)(updateScrollButtons);
+			}
+		}, { immediate: true });
+		(0, _vueuse_core.useResizeObserver)(scrollWrapperEl, () => (0, vue.nextTick)(updateScrollButtons));
+		const containerEl = (0, vue.useTemplateRef)("containerEl");
+		const moreBtnEl = (0, vue.useTemplateRef)("moreBtnEl");
+		const dropdownEl = (0, vue.useTemplateRef)("dropdownEl");
+		const hiddenTabs = (0, vue.ref)([]);
+		const dropdownOpen = (0, vue.ref)(false);
+		const hasOverflow = (0, vue.computed)(() => hiddenTabs.value.length > 0);
+		let moreBtnNaturalWidth = 48;
+		(0, _vueuse_core.onClickOutside)(dropdownEl, () => {
+			dropdownOpen.value = false;
+		});
+		function computeOverflow() {
+			if (!containerEl.value) return;
+			const allTabs = Array.from(containerEl.value.querySelectorAll("[data-tab-value]"));
+			allTabs.forEach((t) => t.removeAttribute("data-overflow-hidden"));
+			const listEl = containerEl.value.querySelector("[role=\"tablist\"]");
+			if (listEl) {
+				listEl.style.overflow = "visible";
+				allTabs.forEach((t) => {
+					t.style.flexShrink = "0";
+					t.style.width = "auto";
+				});
+				listEl.offsetWidth;
+			}
+			const containerWidth = containerEl.value.clientWidth;
+			const tabWidths = allTabs.map((t) => t.offsetWidth);
+			const totalWidth = tabWidths.reduce((sum, w) => sum + w, 0);
+			if (listEl) {
+				listEl.style.overflow = "";
+				allTabs.forEach((t) => {
+					t.style.flexShrink = "";
+					t.style.width = "";
+				});
+			}
+			if (totalWidth <= containerWidth) {
+				hiddenTabs.value = [];
+				return;
+			}
+			const available = containerWidth - moreBtnNaturalWidth;
+			let accumulated = 0;
+			const newHidden = [];
+			const visibleEls = [];
+			for (let i = 0; i < allTabs.length; i++) {
+				const tab = allTabs[i];
+				const w = tabWidths[i];
+				if (accumulated + w <= available) {
+					accumulated += w;
+					visibleEls.push(tab);
+				} else {
+					newHidden.push({
+						value: tab.getAttribute("data-tab-value") ?? "",
+						label: tab.textContent?.trim() ?? "",
+						disabled: tab.hasAttribute("data-disabled") || tab.getAttribute("aria-disabled") === "true"
+					});
+					tab.setAttribute("data-overflow-hidden", "");
+				}
+			}
+			const activeValue = ctx.currentValue.value;
+			if (activeValue) {
+				const hiddenActiveIdx = newHidden.findIndex((t) => t.value === activeValue);
+				if (hiddenActiveIdx !== -1 && visibleEls.length > 0) {
+					const displacedEl = visibleEls[visibleEls.length - 1];
+					const activeEl = allTabs.find((t) => t.getAttribute("data-tab-value") === activeValue);
+					if (displacedEl && activeEl) {
+						displacedEl.setAttribute("data-overflow-hidden", "");
+						activeEl.removeAttribute("data-overflow-hidden");
+						const displaced = {
+							value: displacedEl.getAttribute("data-tab-value") ?? "",
+							label: displacedEl.textContent?.trim() ?? "",
+							disabled: displacedEl.hasAttribute("data-disabled") || displacedEl.getAttribute("aria-disabled") === "true"
+						};
+						newHidden.splice(hiddenActiveIdx, 1);
+						newHidden.unshift(displaced);
+					}
+				}
+			}
+			hiddenTabs.value = newHidden;
+		}
+		(0, _vueuse_core.useResizeObserver)(containerEl, () => (0, vue.nextTick)(computeOverflow));
+		(0, vue.onMounted)(() => {
+			const btnEl = moreBtnEl.value?.$el;
+			if (btnEl) {
+				btnEl.style.display = "flex";
+				btnEl.offsetWidth;
+				moreBtnNaturalWidth = btnEl.offsetWidth;
+				btnEl.style.display = "";
+			}
+			(0, vue.nextTick)(computeOverflow);
+		});
+		(0, vue.watch)(() => ctx.currentValue.value, () => {
+			if (props.overflow === "dropdown") (0, vue.nextTick)(computeOverflow);
+		});
+		(0, vue.watch)(hasOverflow, () => {
+			if (props.overflow === "dropdown") (0, vue.nextTick)(computeOverflow);
+		});
+		function selectOverflowTab(value) {
+			ctx.changeTab(value);
+			dropdownOpen.value = false;
+		}
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TabsList), {
+			return !props.overflow ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TabsList), {
+				key: 0,
 				loop: props.loop ?? true,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabList(), props.class))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["loop", "class"]);
+			}, 8, ["loop", "class"])) : props.overflow === "arrows" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 1,
+				class: (0, vue.normalizeClass)(["tabs__list-container tabs__list-container--arrows", {
+					"has-left": canScrollLeft.value,
+					"has-right": canScrollRight.value
+				}])
+			}, [
+				(0, vue.createVNode)(Button_default, {
+					variant: "secondary",
+					size: "sm",
+					radius: "full",
+					"is-icon-only": true,
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)("tabs__arrow tabs__arrow--left", canScrollLeft.value && "is-visible")),
+					"aria-label": "Scroll tabs left",
+					tabindex: "-1",
+					onClick: _cache[0] || (_cache[0] = ($event) => scrollTabs("left"))
+				}, {
+					default: (0, vue.withCtx)(() => [..._cache[3] || (_cache[3] = [(0, vue.createElementVNode)("svg", {
+						width: "14",
+						height: "14",
+						viewBox: "0 0 14 14",
+						fill: "none",
+						"aria-hidden": "true"
+					}, [(0, vue.createElementVNode)("path", {
+						d: "M9 11L5 7L9 3",
+						stroke: "currentColor",
+						"stroke-width": "1.75",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round"
+					})], -1)])]),
+					_: 1
+				}, 8, ["class"]),
+				(0, vue.createElementVNode)("div", {
+					ref_key: "scrollWrapperEl",
+					ref: scrollWrapperEl,
+					class: "tabs__scroll-wrapper"
+				}, [(0, vue.createVNode)((0, vue.unref)(reka_ui.TabsList), {
+					loop: props.loop ?? true,
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabList(), "tabs__list--scroll", props.class))
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+					_: 3
+				}, 8, ["loop", "class"])], 512),
+				(0, vue.createVNode)(Button_default, {
+					variant: "secondary",
+					size: "sm",
+					radius: "full",
+					"is-icon-only": true,
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)("tabs__arrow tabs__arrow--right", canScrollRight.value && "is-visible")),
+					"aria-label": "Scroll tabs right",
+					tabindex: "-1",
+					onClick: _cache[1] || (_cache[1] = ($event) => scrollTabs("right"))
+				}, {
+					default: (0, vue.withCtx)(() => [..._cache[4] || (_cache[4] = [(0, vue.createElementVNode)("svg", {
+						width: "14",
+						height: "14",
+						viewBox: "0 0 14 14",
+						fill: "none",
+						"aria-hidden": "true"
+					}, [(0, vue.createElementVNode)("path", {
+						d: "M5 3L9 7L5 11",
+						stroke: "currentColor",
+						"stroke-width": "1.75",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round"
+					})], -1)])]),
+					_: 1
+				}, 8, ["class"])
+			], 2)) : props.overflow === "dropdown" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 2,
+				ref_key: "containerEl",
+				ref: containerEl,
+				class: "tabs__list-container tabs__list-container--dropdown"
+			}, [(0, vue.createVNode)((0, vue.unref)(reka_ui.TabsList), {
+				loop: props.loop ?? true,
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabList(), "tabs__list--clipped", props.class))
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["loop", "class"]), (0, vue.createElementVNode)("div", {
+				ref_key: "dropdownEl",
+				ref: dropdownEl,
+				class: (0, vue.normalizeClass)(["tabs__more", { "tabs__more--visible": hasOverflow.value }])
+			}, [(0, vue.createVNode)(Button_default, {
+				ref_key: "moreBtnEl",
+				ref: moreBtnEl,
+				variant: "secondary",
+				size: "sm",
+				radius: "full",
+				class: "tabs__more-btn",
+				"aria-expanded": dropdownOpen.value,
+				"aria-haspopup": "menu",
+				onClick: _cache[2] || (_cache[2] = ($event) => dropdownOpen.value = !dropdownOpen.value)
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)(" +" + (0, vue.toDisplayString)(hiddenTabs.value.length) + " ", 1), _cache[5] || (_cache[5] = (0, vue.createElementVNode)("svg", {
+					width: "12",
+					height: "12",
+					viewBox: "0 0 12 12",
+					fill: "none",
+					"aria-hidden": "true"
+				}, [(0, vue.createElementVNode)("path", {
+					d: "M2 4L6 8L10 4",
+					stroke: "currentColor",
+					"stroke-width": "1.5",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				})], -1))]),
+				_: 1
+			}, 8, ["aria-expanded"]), dropdownOpen.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$40, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(hiddenTabs.value, (tab) => {
+				return (0, vue.openBlock)(), (0, vue.createBlock)(Button_default, {
+					key: tab.value,
+					variant: "ghost",
+					radius: "lg",
+					class: "tabs__overflow-item",
+					role: "menuitem",
+					disabled: tab.disabled,
+					onClick: ($event) => selectOverflowTab(tab.value)
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(tab.label), 1)]),
+					_: 2
+				}, 1032, ["disabled", "onClick"]);
+			}), 128))])) : (0, vue.createCommentVNode)("", true)], 2)], 512)) : (0, vue.createCommentVNode)("", true);
 		};
 	}
 });
@@ -13246,6 +13513,7 @@ var Tab_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TabsTrigger), {
 				value: props.value,
 				disabled: props.disabled,
+				"data-tab-value": props.value,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tab(), props.class))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
@@ -13253,6 +13521,7 @@ var Tab_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, 8, [
 				"value",
 				"disabled",
+				"data-tab-value",
 				"class"
 			]);
 		};