@youcan/celeste 0.11.0 → 0.13.0

package/dist/cjs/chunks/scroll-area.cjs

@@ -2,10 +2,12 @@ const require_clsx = require("./clsx.cjs");
 const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
 const require_dist = require("./dist2.cjs");
 const require_Primitive = require("./Primitive.cjs");
+const require_ConfigProvider = require("./ConfigProvider.cjs");
 const require_useForwardExpose = require("./useForwardExpose.cjs");
 const require_useNonce = require("./useNonce.cjs");
 const require_scroll_bar = require("./scroll-bar.cjs");
 const require_use_delegated_props = require("../use-delegated-props.cjs");
+const require_use_direction = require("../use-direction.cjs");
 let vue = require("vue");
 //#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/ScrollArea/ScrollAreaCornerImpl.js
 var ScrollAreaCornerImpl_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -159,25 +161,29 @@ var scroll_area_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 	setup(__props) {
 		const props = __props;
 		const delegatedProps = require_use_delegated_props.useDelegatedProps(props, "class");
+		const direction = require_use_direction.useDirection();
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_scroll_bar.ScrollAreaRoot_default), (0, vue.mergeProps)((0, vue.unref)(delegatedProps), { class: (0, vue.unref)(require_clsx.clsx)("celeste-scroll-area", props.class) }), {
-				default: (0, vue.withCtx)(() => [
-					(0, vue.createVNode)((0, vue.unref)(ScrollAreaViewport_default), { class: "celeste-scroll-area-viewport" }, {
-						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
-						_: 3
-					}),
-					(0, vue.createVNode)(require_scroll_bar.scroll_bar_default),
-					(0, vue.createVNode)(require_scroll_bar.scroll_bar_default, { orientation: "horizontal" }),
-					(0, vue.createVNode)((0, vue.unref)(ScrollAreaCorner_default))
-				]),
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_ConfigProvider.ConfigProvider_default), { dir: props.dir ?? (0, vue.unref)(direction) }, {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_scroll_bar.ScrollAreaRoot_default), (0, vue.mergeProps)((0, vue.unref)(delegatedProps), { class: (0, vue.unref)(require_clsx.clsx)("celeste-scroll-area", props.class) }), {
+					default: (0, vue.withCtx)(() => [
+						(0, vue.createVNode)((0, vue.unref)(ScrollAreaViewport_default), { class: "celeste-scroll-area-viewport" }, {
+							default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
+							_: 3
+						}),
+						(0, vue.createVNode)(require_scroll_bar.scroll_bar_default),
+						(0, vue.createVNode)(require_scroll_bar.scroll_bar_default, { orientation: "horizontal" }),
+						(0, vue.createVNode)((0, vue.unref)(ScrollAreaCorner_default))
+					]),
+					_: 3
+				}, 16, ["class"])]),
 				_: 3
-			}, 16, ["class"]);
+			}, 8, ["dir"]);
 		};
 	}
 });
 //#endregion
 //#region src/components/scroll-area/scroll-area.vue
-var scroll_area_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(scroll_area_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-af5a144a"]]);
+var scroll_area_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(scroll_area_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-1bb37e0a"]]);
 //#endregion
 Object.defineProperty(exports, "scroll_area_default", {
 	enumerable: true,

package/dist/cjs/chunks/scroll-bar.cjs

@@ -9,9 +9,11 @@ const require_useDirection = require("./useDirection.cjs");
 const require_useForwardExpose = require("./useForwardExpose.cjs");
 const require_Presence = require("./Presence.cjs");
 const require_use_delegated_props = require("../use-delegated-props.cjs");
+require("../use-direction.cjs");
 require("../use-chart-motion.cjs");
 require("../use-locale.cjs");
 require("../use-sidebar.cjs");
+require("../use-tab-observer.cjs");
 let vue = require("vue");
 //#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/ScrollArea/ScrollAreaRoot.js
 var [injectScrollAreaRootContext, provideScrollAreaRootContext] = /*#__PURE__*/ require_createContext.createContext("ScrollAreaRoot");

package/dist/cjs/chunks/segmented-control-item.cjs

@@ -198,7 +198,7 @@ var segmented_control_item_vue_vue_type_script_setup_true_lang_default = /*@__PU
 });
 //#endregion
 //#region src/components/segmented-control/segmented-control-item.vue
-var segmented_control_item_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(segmented_control_item_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-e184b1ba"]]);
+var segmented_control_item_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(segmented_control_item_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-efe57652"]]);
 //#endregion
 Object.defineProperty(exports, "segmented_control_item_default", {
 	enumerable: true,

package/dist/cjs/chunks/segmented-control.cjs

@@ -1,10 +1,14 @@
 const require_clsx = require("./clsx.cjs");
 const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
+const require_ConfigProvider = require("./ConfigProvider.cjs");
 const require_useForwardPropsEmits = require("./useForwardPropsEmits.cjs");
 const require_ToggleGroupRoot = require("./ToggleGroupRoot.cjs");
 const require_use_delegated_props = require("../use-delegated-props.cjs");
+const require_use_direction = require("../use-direction.cjs");
+const require_use_tab_observer = require("../use-tab-observer.cjs");
 let vue = require("vue");
 //#region src/components/segmented-control/segmented-control.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["hidden"];
 var segmented_control_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 	__name: "segmented-control",
 	props: {
@@ -33,17 +37,34 @@ var segmented_control_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		const emits = __emit;
 		const delegatedProps = require_use_delegated_props.useDelegatedProps(props, "class");
 		const forwarded = require_useForwardPropsEmits.useForwardPropsEmits(delegatedProps, emits);
+		const direction = require_use_direction.useDirection();
+		const { listRef, indicator, ready } = require_use_tab_observer.useTabObserver("[data-state=\"on\"]");
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_ToggleGroupRoot.ToggleGroupRoot_default), (0, vue.mergeProps)({ class: (0, vue.unref)(require_clsx.clsx)("celeste-segmented-control", props.class) }, (0, vue.unref)(forwarded), { type: "single" }), {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_ConfigProvider.ConfigProvider_default), { dir: props.dir ?? (0, vue.unref)(direction) }, {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_ToggleGroupRoot.ToggleGroupRoot_default), (0, vue.mergeProps)({
+					ref_key: "listRef",
+					ref: listRef,
+					class: (0, vue.unref)(require_clsx.clsx)("celeste-segmented-control", props.class)
+				}, (0, vue.unref)(forwarded), { type: "single" }), {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true), (0, vue.createElementVNode)("div", {
+						hidden: !(0, vue.unref)(ready),
+						class: "celeste-segmented-control-indicator",
+						style: (0, vue.normalizeStyle)({
+							width: `${(0, vue.unref)(indicator).width}px`,
+							height: `${(0, vue.unref)(indicator).height}px`,
+							transform: `translate3d(${(0, vue.unref)(indicator).left}px, ${(0, vue.unref)(indicator).top}px, 0)`
+						})
+					}, null, 12, _hoisted_1)]),
+					_: 3
+				}, 16, ["class"])]),
 				_: 3
-			}, 16, ["class"]);
+			}, 8, ["dir"]);
 		};
 	}
 });
 //#endregion
 //#region src/components/segmented-control/segmented-control.vue
-var segmented_control_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(segmented_control_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-fe40de14"]]);
+var segmented_control_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(segmented_control_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-1b4b28d6"]]);
 //#endregion
 Object.defineProperty(exports, "segmented_control_default", {
 	enumerable: true,

package/dist/cjs/chunks/select.cjs

@@ -1,7 +1,9 @@
 const require_clsx = require("./clsx.cjs");
+const require_ConfigProvider = require("./ConfigProvider.cjs");
 const require_useForwardPropsEmits = require("./useForwardPropsEmits.cjs");
 const require_BubbleSelect = require("./BubbleSelect.cjs");
 const require_use_delegated_props = require("../use-delegated-props.cjs");
+const require_use_direction = require("../use-direction.cjs");
 let vue = require("vue");
 //#endregion
 //#region src/components/select/select.vue
@@ -34,11 +36,15 @@ var select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const emits = __emit;
 		const delegatedProps = require_use_delegated_props.useDelegatedProps(props, "class");
 		const forwarded = require_useForwardPropsEmits.useForwardPropsEmits(delegatedProps, emits);
+		const direction = require_use_direction.useDirection();
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_BubbleSelect.SelectRoot_default), (0, vue.mergeProps)((0, vue.unref)(forwarded), { class: (0, vue.unref)(require_clsx.clsx)("celeste-select", props.class) }), {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_ConfigProvider.ConfigProvider_default), { dir: props.dir ?? (0, vue.unref)(direction) }, {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_BubbleSelect.SelectRoot_default), (0, vue.mergeProps)((0, vue.unref)(forwarded), { class: (0, vue.unref)(require_clsx.clsx)("celeste-select", props.class) }), {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, ["class"])]),
 				_: 3
-			}, 16, ["class"]);
+			}, 8, ["dir"]);
 		};
 	}
 });

package/dist/cjs/chunks/slider.cjs

@@ -3,6 +3,7 @@ const require_clamp = require("./clamp.cjs");
 const require_createContext = require("./createContext.cjs");
 const require_dist = require("./dist2.cjs");
 const require_Primitive = require("./Primitive.cjs");
+const require_ConfigProvider = require("./ConfigProvider.cjs");
 const require_useDirection = require("./useDirection.cjs");
 const require_useFormControl = require("./useFormControl.cjs");
 const require_useForwardExpose = require("./useForwardExpose.cjs");
@@ -11,6 +12,7 @@ const require_useSize = require("./useSize.cjs");
 const require_Collection = require("./Collection.cjs");
 const require_VisuallyHiddenInput = require("./VisuallyHiddenInput.cjs");
 const require_use_delegated_props = require("../use-delegated-props.cjs");
+const require_use_direction = require("../use-direction.cjs");
 let vue = require("vue");
 //#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/utils.js
 function getNextSortedValues(prevValues = [], nextValue, atIndex) {
@@ -784,19 +786,23 @@ var slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const emits = __emit;
 		const delegatedProps = require_use_delegated_props.useDelegatedProps(props, "class");
 		const forwarded = require_useForwardPropsEmits.useForwardPropsEmits(delegatedProps, emits);
+		const direction = require_use_direction.useDirection();
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(SliderRoot_default), (0, vue.mergeProps)((0, vue.unref)(forwarded), { class: (0, vue.unref)(require_clsx.clsx)("celeste-slider", props.class) }), {
-				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(SliderTrack_default), { class: "celeste-slider-track" }, {
-					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(SliderRange_default), { class: "celeste-slider-range" })]),
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_ConfigProvider.ConfigProvider_default), { dir: props.dir ?? (0, vue.unref)(direction) }, {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(SliderRoot_default), (0, vue.mergeProps)((0, vue.unref)(forwarded), { class: (0, vue.unref)(require_clsx.clsx)("celeste-slider", props.class) }), {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(SliderTrack_default), { class: "celeste-slider-track" }, {
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(SliderRange_default), { class: "celeste-slider-range" })]),
+						_: 1
+					}), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.modelValue, (_, key) => {
+						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(SliderThumb_default), {
+							key,
+							class: "celeste-slider-thumb"
+						});
+					}), 128))]),
 					_: 1
-				}), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.modelValue, (_, key) => {
-					return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(SliderThumb_default), {
-						key,
-						class: "celeste-slider-thumb"
-					});
-				}), 128))]),
+				}, 16, ["class"])]),
 				_: 1
-			}, 16, ["class"]);
+			}, 8, ["dir"]);
 		};
 	}
 });

package/dist/cjs/chunks/tab-menu-item.cjs

@@ -92,6 +92,10 @@ var _hoisted_1 = {
 	key: 0,
 	class: "celeste-tab-menu-item-label"
 };
+var _hoisted_2 = {
+	key: 1,
+	class: "celeste-tab-menu-item-postfix"
+};
 var tab_menu_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 	__name: "tab-menu-item",
 	props: {
@@ -116,7 +120,7 @@ var tab_menu_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 				default: (0, vue.withCtx)(() => [
 					(0, vue.renderSlot)(_ctx.$slots, "prefix", {}, void 0, true),
 					_ctx.$slots.default ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
-					(0, vue.renderSlot)(_ctx.$slots, "postfix", {}, void 0, true)
+					_ctx.$slots.postfix ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2, [(0, vue.renderSlot)(_ctx.$slots, "postfix", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true)
 				]),
 				_: 3
 			}, 16, ["class"]);
@@ -125,7 +129,7 @@ var tab_menu_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 });
 //#endregion
 //#region src/components/tab-menu/tab-menu-item.vue
-var tab_menu_item_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(tab_menu_item_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3c27e2e4"]]);
+var tab_menu_item_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(tab_menu_item_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-512ad887"]]);
 //#endregion
 Object.defineProperty(exports, "tab_menu_item_default", {
 	enumerable: true,

package/dist/cjs/chunks/tab-menu-list.cjs

@@ -5,6 +5,7 @@ const require_useForwardExpose = require("./useForwardExpose.cjs");
 const require_RovingFocusGroup = require("./RovingFocusGroup.cjs");
 const require_TabsRoot = require("./TabsRoot.cjs");
 const require_use_delegated_props = require("../use-delegated-props.cjs");
+const require_use_tab_observer = require("../use-tab-observer.cjs");
 let vue = require("vue");
 //#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Tabs/TabsList.js
 var TabsList_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -61,34 +62,77 @@ var TabsList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/tab-menu/tab-menu-list.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["hidden"];
 var tab_menu_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 	__name: "tab-menu-list",
 	props: {
-		loop: { type: Boolean },
-		asChild: { type: Boolean },
-		as: {},
 		class: { type: [
 			Boolean,
 			null,
 			String,
 			Object,
 			Array
-		] }
+		] },
+		bordered: {
+			type: Boolean,
+			default: true
+		},
+		scrollable: {
+			type: Boolean,
+			default: false
+		},
+		fill: {
+			type: Boolean,
+			default: false
+		},
+		align: { default: "start" },
+		loop: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {}
 	},
 	setup(__props) {
 		const props = __props;
-		const delegatedProps = require_use_delegated_props.useDelegatedProps(props, "class");
+		const delegatedProps = require_use_delegated_props.useDelegatedProps(props, [
+			"class",
+			"bordered",
+			"scrollable",
+			"fill",
+			"align"
+		]);
+		const { listRef, indicator, ready } = require_use_tab_observer.useTabObserver("[data-state=\"active\"]");
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(TabsList_default), (0, vue.mergeProps)((0, vue.unref)(delegatedProps), { class: (0, vue.unref)(require_clsx.clsx)("celeste-tab-menu-list", props.class) }), {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(TabsList_default), (0, vue.mergeProps)({
+				ref_key: "listRef",
+				ref: listRef
+			}, (0, vue.unref)(delegatedProps), {
+				"data-bordered": __props.bordered,
+				"data-scrollable": __props.scrollable,
+				"data-fill": __props.fill,
+				"data-align": __props.align,
+				class: (0, vue.unref)(require_clsx.clsx)("celeste-tab-menu-list", props.class)
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true), (0, vue.createElementVNode)("div", {
+					hidden: !(0, vue.unref)(ready),
+					class: "celeste-tab-menu-indicator",
+					style: (0, vue.normalizeStyle)({
+						width: `${(0, vue.unref)(indicator).width}px`,
+						transform: `translate3d(${(0, vue.unref)(indicator).left}px, 0, 0)`
+					})
+				}, null, 12, _hoisted_1)]),
 				_: 3
-			}, 16, ["class"]);
+			}, 16, [
+				"data-bordered",
+				"data-scrollable",
+				"data-fill",
+				"data-align",
+				"class"
+			]);
 		};
 	}
 });
 //#endregion
 //#region src/components/tab-menu/tab-menu-list.vue
-var tab_menu_list_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(tab_menu_list_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3c860830"]]);
+var tab_menu_list_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(tab_menu_list_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-baf19a75"]]);
 //#endregion
 Object.defineProperty(exports, "tab_menu_list_default", {
 	enumerable: true,

package/dist/cjs/chunks/tab-menu.cjs

@@ -1,6 +1,8 @@
 const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
+const require_ConfigProvider = require("./ConfigProvider.cjs");
 const require_useForwardPropsEmits = require("./useForwardPropsEmits.cjs");
 const require_TabsRoot = require("./TabsRoot.cjs");
+const require_use_direction = require("../use-direction.cjs");
 let vue = require("vue");
 //#region src/components/tab-menu/tab-menu.vue?vue&type=script&setup=true&lang.ts
 var tab_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
@@ -17,18 +19,23 @@ var tab_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
-		const forwarded = require_useForwardPropsEmits.useForwardPropsEmits(__props, __emit);
+		const props = __props;
+		const forwarded = require_useForwardPropsEmits.useForwardPropsEmits(props, __emit);
+		const direction = require_use_direction.useDirection();
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_TabsRoot.TabsRoot_default), (0, vue.mergeProps)((0, vue.unref)(forwarded), { class: "celeste-tab-menu-root" }), {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_ConfigProvider.ConfigProvider_default), { dir: props.dir ?? (0, vue.unref)(direction) }, {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_TabsRoot.TabsRoot_default), (0, vue.mergeProps)((0, vue.unref)(forwarded), { class: "celeste-tab-menu-root" }), {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
+					_: 3
+				}, 16)]),
 				_: 3
-			}, 16);
+			}, 8, ["dir"]);
 		};
 	}
 });
 //#endregion
 //#region src/components/tab-menu/tab-menu.vue
-var tab_menu_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(tab_menu_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-bd0a38f2"]]);
+var tab_menu_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(tab_menu_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d5a36238"]]);
 //#endregion
 Object.defineProperty(exports, "tab_menu_default", {
 	enumerable: true,

package/dist/cjs/chunks/text-input.cjs

@@ -109,7 +109,7 @@ var text_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, v
 });
 //#endregion
 //#region src/components/text-input/text-input.vue
-var text_input_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-74d9ab66"]]);
+var text_input_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d61fa3e2"]]);
 //#endregion
 Object.defineProperty(exports, "text_input_default", {
 	enumerable: true,

package/dist/cjs/command-root.cjs

@@ -1,5 +1,7 @@
 const require_ComboboxRoot = require("./chunks/ComboboxRoot.cjs");
+const require_ConfigProvider = require("./chunks/ConfigProvider.cjs");
 const require_useForwardPropsEmits = require("./chunks/useForwardPropsEmits.cjs");
+const require_use_direction = require("./use-direction.cjs");
 let vue = require("vue");
 //#endregion
 //#region src/components/command/command-root.vue
@@ -49,11 +51,15 @@ var command_root_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return delegated;
 		});
 		const forwarded = require_useForwardPropsEmits.useForwardPropsEmits(delegatedProps, emits);
+		const direction = require_use_direction.useDirection();
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_ComboboxRoot.ComboboxRoot_default), (0, vue.mergeProps)((0, vue.unref)(forwarded), { class: ["celeste-command-root", props.class] }), {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_ConfigProvider.ConfigProvider_default), { dir: props.dir ?? (0, vue.unref)(direction) }, {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_ComboboxRoot.ComboboxRoot_default), (0, vue.mergeProps)((0, vue.unref)(forwarded), { class: ["celeste-command-root", props.class] }), {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, ["class"])]),
 				_: 3
-			}, 16, ["class"]);
+			}, 8, ["dir"]);
 		};
 	}
 });

package/dist/cjs/index.cjs

@@ -59,6 +59,7 @@ const require_link_button = require("./chunks/link-button.cjs");
 const require_social_button = require("./chunks/social-button.cjs");
 const require_color_picker = require("./chunks/color-picker.cjs");
 const require_use_delegated_props = require("./use-delegated-props.cjs");
+const require_use_direction = require("./use-direction.cjs");
 const require_bar_chart = require("./chunks/bar-chart.cjs");
 const require_use_chart_motion = require("./use-chart-motion.cjs");
 const require_use_locale = require("./use-locale.cjs");
@@ -114,6 +115,7 @@ const require_radio_group = require("./chunks/radio-group.cjs");
 const require_range_picker = require("./chunks/range-picker.cjs");
 const require_rich_editor = require("./chunks/rich-editor.cjs");
 const require_use_sidebar = require("./use-sidebar.cjs");
+const require_use_tab_observer = require("./use-tab-observer.cjs");
 const require_segmented_control = require("./chunks/segmented-control.cjs");
 const require_sheet_close = require("./chunks/sheet-close.cjs");
 const require_sheet_content = require("./chunks/sheet-content.cjs");
@@ -399,5 +401,7 @@ exports.truncColorValue = require_color.truncColorValue;
 exports.uid = require_crypto.uid;
 exports.useChartMotion = require_use_chart_motion.useChartMotion;
 exports.useDelegatedProps = require_use_delegated_props.useDelegatedProps;
+exports.useDirection = require_use_direction.useDirection;
 exports.useLocale = require_use_locale.useLocale;
 exports.useSidebar = require_use_sidebar.useSidebar;
+exports.useTabObserver = require_use_tab_observer.useTabObserver;

package/dist/cjs/use-direction.cjs

@@ -0,0 +1,31 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let vue = require("vue");
+//#region src/composables/use-direction.ts
+var revision = (0, vue.ref)(0);
+var observer;
+function observeDocument() {
+	if (observer || typeof document === "undefined") return;
+	observer = new MutationObserver(() => revision.value++);
+	observer.observe(document.documentElement, {
+		attributeFilter: ["dir"],
+		subtree: true
+	});
+}
+function documentDirection() {
+	return typeof document !== "undefined" && document.documentElement.dir === "rtl" ? "rtl" : "ltr";
+}
+function useDirection() {
+	const instance = (0, vue.getCurrentInstance)();
+	const direction = (0, vue.ref)(documentDirection());
+	observeDocument();
+	function read() {
+		const node = instance?.vnode.el;
+		const element = node instanceof HTMLElement ? node : node?.parentElement;
+		direction.value = element ? getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr" : documentDirection();
+	}
+	(0, vue.onMounted)(read);
+	(0, vue.watch)(revision, read);
+	return direction;
+}
+//#endregion
+exports.useDirection = useDirection;

package/dist/cjs/use-tab-observer.cjs

@@ -0,0 +1,42 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_dist = require("./chunks/dist2.cjs");
+let vue = require("vue");
+//#region src/composables/use-tab-observer.ts
+function useTabObserver(activeSelector) {
+	const listRef = (0, vue.shallowRef)(null);
+	const indicator = (0, vue.ref)({
+		left: 0,
+		top: 0,
+		width: 0,
+		height: 0
+	});
+	const ready = (0, vue.ref)(false);
+	function update() {
+		const active = require_dist.unrefElement(listRef)?.querySelector(activeSelector);
+		if (!active) {
+			ready.value = false;
+			return;
+		}
+		indicator.value = {
+			left: active.offsetLeft,
+			top: active.offsetTop,
+			width: active.offsetWidth,
+			height: active.offsetHeight
+		};
+		ready.value = true;
+	}
+	require_dist.useResizeObserver(listRef, update);
+	require_dist.useMutationObserver(listRef, update, {
+		childList: true,
+		subtree: true,
+		attributes: true,
+		attributeFilter: ["data-state"]
+	});
+	return {
+		listRef,
+		indicator,
+		ready
+	};
+}
+//#endregion
+exports.useTabObserver = useTabObserver;

package/dist/components/combobox/combobox-root.d.ts

@@ -1,8 +1,8 @@
 import { ComboboxRootProps } from 'reka-ui';
 type __VLS_Props = ComboboxRootProps;
-declare var __VLS_8: {};
+declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: import('reka-ui').AcceptableValue) => any;

package/dist/components/dropdown-menu/dropdown-menu.d.ts

@@ -3,9 +3,9 @@ import { HTMLAttributes } from 'vue';
 type __VLS_Props = DropdownMenuRootProps & {
     class?: HTMLAttributes['class'];
 };
-declare var __VLS_8: {};
+declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:open": (payload: boolean) => any;

package/dist/components/radio-group/radio-group.d.ts

@@ -3,9 +3,9 @@ import { HTMLAttributes } from 'vue';
 type __VLS_Props = RadioGroupRootProps & {
     class?: HTMLAttributes['class'];
 };
-declare var __VLS_8: {};
+declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (payload: import('reka-ui').AcceptableValue) => any;

package/dist/components/scroll-area/scroll-area.d.ts

@@ -3,9 +3,9 @@ import { HTMLAttributes } from 'vue';
 type __VLS_Props = ScrollAreaRootProps & {
     class?: HTMLAttributes['class'];
 };
-declare var __VLS_14: {};
+declare var __VLS_20: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_20) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/segmented-control/segmented-control.d.ts

@@ -3,9 +3,9 @@ import { HTMLAttributes } from 'vue';
 type __VLS_Props = Omit<ToggleGroupRootProps, 'type'> & {
     class?: HTMLAttributes['class'];
 };
-declare var __VLS_8: {};
+declare var __VLS_16: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (payload: import('reka-ui').AcceptableValue | import('reka-ui').AcceptableValue[]) => any;

package/dist/components/select/select.d.ts

@@ -3,9 +3,9 @@ import { HTMLAttributes } from 'vue';
 type __VLS_Props = SelectRootProps & {
     class?: HTMLAttributes['class'];
 };
-declare var __VLS_8: {};
+declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: import('reka-ui').AcceptableValue) => any;

package/dist/components/tab-menu/tab-menu-list.d.ts

@@ -1,13 +1,22 @@
 import { TabsListProps } from 'reka-ui';
 import { HTMLAttributes } from 'vue';
-type __VLS_Props = TabsListProps & {
+export interface TabMenuListProps extends TabsListProps {
     class?: HTMLAttributes['class'];
-};
-declare var __VLS_8: {};
+    bordered?: boolean;
+    scrollable?: boolean;
+    fill?: boolean;
+    align?: 'start' | 'center';
+}
+declare var __VLS_9: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_9) => any;
 };
-declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import('vue').DefineComponent<TabMenuListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TabMenuListProps> & Readonly<{}>, {
+    fill: boolean;
+    align: "start" | "center";
+    bordered: boolean;
+    scrollable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;