@youcan/celeste 0.11.0 → 0.12.0

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

@@ -3,8 +3,10 @@ const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.c
 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_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 = ["data-ready"];
 var segmented_control_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 	__name: "segmented-control",
 	props: {
@@ -33,9 +35,22 @@ 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 { 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_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", {
+					class: "celeste-segmented-control-indicator",
+					"data-ready": (0, vue.unref)(ready),
+					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"]);
 		};
@@ -43,7 +58,7 @@ var segmented_control_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 });
 //#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-9a13a9a8"]]);
 //#endregion
 Object.defineProperty(exports, "segmented_control_default", {
 	enumerable: true,

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 = ["data-ready"];
 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", {
+					class: "celeste-tab-menu-indicator",
+					"data-ready": (0, vue.unref)(ready),
+					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-bf1363bf"]]);
 //#endregion
 Object.defineProperty(exports, "tab_menu_list_default", {
 	enumerable: true,

package/dist/cjs/index.cjs

@@ -114,6 +114,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");
@@ -401,3 +402,4 @@ exports.useChartMotion = require_use_chart_motion.useChartMotion;
 exports.useDelegatedProps = require_use_delegated_props.useDelegatedProps;
 exports.useLocale = require_use_locale.useLocale;
 exports.useSidebar = require_use_sidebar.useSidebar;
+exports.useTabObserver = require_use_tab_observer.useTabObserver;

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
+		};
+		if (!ready.value) requestAnimationFrame(() => requestAnimationFrame(() => 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/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_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, {
     "update:modelValue": (payload: import('reka-ui').AcceptableValue | 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;

package/dist/composables/index.d.ts

@@ -2,3 +2,4 @@ export * from './use-chart-motion';
 export * from './use-delegated-props';
 export * from './use-locale';
 export * from './use-sidebar';
+export * from './use-tab-observer';

package/dist/composables/use-tab-observer.d.ts

@@ -0,0 +1,14 @@
+import { MaybeElement } from '@vueuse/core';
+import { Ref } from 'vue';
+export interface TabIndicator {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export interface TabObserver {
+    listRef: Ref<MaybeElement>;
+    indicator: Ref<TabIndicator>;
+    ready: Ref<boolean>;
+}
+export declare function useTabObserver(activeSelector: string): TabObserver;

package/dist/es/chunks/BubbleSelect.js

@@ -1,7 +1,7 @@
 import { t as isEqual } from "./ohash.D__AXeF1.js";
 import { t as createContext } from "./createContext.js";
 import { t as isNullish } from "./nullish.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as useDirection } from "./useDirection.js";
 import { t as useFormControl } from "./useFormControl.js";
 import { t as useCollection } from "./Collection.js";

package/dist/es/chunks/CollapsibleRoot.js

@@ -1,5 +1,5 @@
 import { t as createContext } from "./createContext.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { t as useForwardExpose } from "./useForwardExpose.js";
 import { createBlock, defineComponent, openBlock, renderSlot, toRefs, unref, withCtx } from "vue";

package/dist/es/chunks/ComboboxInput.js

@@ -1,5 +1,5 @@
 import { n as injectComboboxRootContext, r as injectListboxRootContext } from "./ComboboxRoot.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { t as useComposing } from "./useComposing.js";
 import { t as usePrimitiveElement } from "./usePrimitiveElement.js";

package/dist/es/chunks/ComboboxRoot.js

@@ -1,7 +1,7 @@
 import { t as isEqual } from "./ohash.D__AXeF1.js";
 import { t as createContext } from "./createContext.js";
 import { a as isClient, t as createEventHook } from "./dist.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { t as useDirection } from "./useDirection.js";
 import { t as useFormControl } from "./useFormControl.js";

package/dist/es/chunks/DialogRoot.js

@@ -1,5 +1,5 @@
 import { t as createContext } from "./createContext.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { defineComponent, ref, renderSlot, toRefs, unref } from "vue";
 //#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Dialog/DialogRoot.js
 var [injectDialogRootContext, provideDialogRootContext] = /*#__PURE__*/ createContext("DialogRoot");

package/dist/es/chunks/DropdownMenuRoot.js

@@ -1,5 +1,5 @@
 import { t as createContext } from "./createContext.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as useDirection } from "./useDirection.js";
 import { t as useForwardExpose } from "./useForwardExpose.js";
 import { t as MenuRoot_default } from "./MenuRoot.js";

package/dist/es/chunks/MenuRoot.js

@@ -1,6 +1,6 @@
 import { t as createContext } from "./createContext.js";
 import { r as createSharedComposable } from "./dist.js";
-import { f as useVModel, s as useEventListener } from "./dist2.js";
+import { p as useVModel, s as useEventListener } from "./dist2.js";
 import { t as useDirection } from "./useDirection.js";
 import { t as PopperRoot_default } from "./PopperRoot.js";
 import { createBlock, defineComponent, onMounted, openBlock, ref, renderSlot, toRefs, unref, withCtx } from "vue";

package/dist/es/chunks/MenuSub.js

@@ -1,5 +1,5 @@
 import { t as createContext } from "./createContext.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as PopperRoot_default } from "./PopperRoot.js";
 import { i as provideMenuContext, n as injectMenuContext } from "./MenuRoot.js";
 import { createBlock, defineComponent, openBlock, ref, renderSlot, unref, watchEffect, withCtx } from "vue";

package/dist/es/chunks/PaginationRoot.js

@@ -1,5 +1,5 @@
 import { t as createContext } from "./createContext.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { t as useForwardExpose } from "./useForwardExpose.js";
 import { computed, createBlock, defineComponent, openBlock, renderSlot, toRefs, unref, withCtx } from "vue";

package/dist/es/chunks/PinInputRoot.js

@@ -1,5 +1,5 @@
 import { t as createContext } from "./createContext.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { t as useDirection } from "./useDirection.js";
 import { t as useForwardExpose } from "./useForwardExpose.js";

package/dist/es/chunks/PopoverRoot.js

@@ -1,5 +1,5 @@
 import { t as createContext } from "./createContext.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as PopperRoot_default } from "./PopperRoot.js";
 import { createBlock, defineComponent, openBlock, ref, renderSlot, toRefs, unref, withCtx } from "vue";
 //#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Popover/PopoverRoot.js

package/dist/es/chunks/ProgressIndicator.js

@@ -1,6 +1,6 @@
 import { t as createContext } from "./createContext.js";
 import { t as isNullish } from "./nullish.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { t as useForwardExpose } from "./useForwardExpose.js";
 import { computed, createBlock, defineComponent, mergeProps, nextTick, openBlock, renderSlot, unref, watch, withCtx } from "vue";

package/dist/es/chunks/RadioGroupRoot.js

@@ -1,5 +1,5 @@
 import { t as createContext } from "./createContext.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { t as useDirection } from "./useDirection.js";
 import { t as useFormControl } from "./useFormControl.js";

package/dist/es/chunks/RovingFocusGroup.js

@@ -1,5 +1,5 @@
 import { t as createContext } from "./createContext.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { t as useDirection } from "./useDirection.js";
 import { t as useCollection } from "./Collection.js";

package/dist/es/chunks/SelectItemAlignedPosition.js

@@ -1,6 +1,6 @@
 import { t as clamp } from "./clamp.js";
 import { t as createContext } from "./createContext.js";
-import { i as unrefElement, u as useResizeObserver } from "./dist2.js";
+import { d as useResizeObserver, i as unrefElement } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { n as useBodyScrollLock, t as FocusScope_default } from "./FocusScope.js";
 import { t as useFocusGuards } from "./useFocusGuards.js";

package/dist/es/chunks/TabsRoot.js

@@ -1,5 +1,5 @@
 import { t as createContext } from "./createContext.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { t as useDirection } from "./useDirection.js";
 import { t as useForwardExpose } from "./useForwardExpose.js";

package/dist/es/chunks/ToggleGroupRoot.js

@@ -1,7 +1,7 @@
 import { t as isEqual } from "./ohash.D__AXeF1.js";
 import { t as createContext } from "./createContext.js";
 import { t as isValueEqualOrExist } from "./isValueEqualOrExist.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { t as useDirection } from "./useDirection.js";
 import { t as useFormControl } from "./useFormControl.js";

package/dist/es/chunks/TooltipRoot.js

@@ -1,6 +1,6 @@
 import { t as createContext } from "./createContext.js";
 import { y as useTimeoutFn } from "./dist.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as useForwardExpose } from "./useForwardExpose.js";
 import { t as PopperRoot_default } from "./PopperRoot.js";
 import { n as injectTooltipProviderContext } from "./TooltipProvider.js";

package/dist/es/chunks/bar-chart.js

@@ -1,5 +1,5 @@
 import { i as __toESM, n as __exportAll, t as __commonJSMin } from "./rolldown-runtime.js";
-import { d as useTextDirection, o as useElementSize } from "./dist2.js";
+import { f as useTextDirection, o as useElementSize } from "./dist2.js";
 import { useChartMotion } from "../use-chart-motion.js";
 import { useLocale } from "../use-locale.js";
 import { chartColor, formatCompact, formatNumber, niceTicks } from "../chart.js";

package/dist/es/chunks/calendar.js

@@ -1,7 +1,7 @@
 import { t as clsx } from "./clsx.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as createContext } from "./createContext.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { a as handleCalendarInitialFocus, d as toDate, g as $ad063034c8620db8$export$aa8b41735afcabd2, h as $ad063034c8620db8$export$a18c89cbd24170ff, i as getWeekStartsOn, m as $ad063034c8620db8$export$91b62ebf2ba703ee, n as useCalendarState, p as $ad063034c8620db8$export$629b0a497aa65267, s as getDefaultDate, t as useCalendar, v as $ad063034c8620db8$export$ea39ec197993aef0 } from "./useCalendar.js";
 import { t as useDirection } from "./useDirection.js";

package/dist/es/chunks/checkbox.js

@@ -3,7 +3,7 @@ import { t as isEqual } from "./ohash.D__AXeF1.js";
 import { t as createContext } from "./createContext.js";
 import { t as isNullish } from "./nullish.js";
 import { t as isValueEqualOrExist } from "./isValueEqualOrExist.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { t as useFormControl } from "./useFormControl.js";
 import { t as useForwardExpose } from "./useForwardExpose.js";

package/dist/es/chunks/counter-input.js

@@ -4,7 +4,7 @@ import { t as createContext } from "./createContext.js";
 import { t as getActiveElement } from "./getActiveElement.js";
 import { t as isNullish } from "./nullish.js";
 import { a as isClient, d as reactiveComputed, t as createEventHook } from "./dist.js";
-import { f as useVModel, i as unrefElement, s as useEventListener } from "./dist2.js";
+import { i as unrefElement, p as useVModel, s as useEventListener } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { t as useComposing } from "./useComposing.js";
 import { t as useFormControl } from "./useFormControl.js";

package/dist/es/chunks/dist2.js

@@ -458,4 +458,4 @@ function useVModel(props, key, emit, options = {}) {
 	});
 }
 //#endregion
-export { useDropZone as a, useMediaQuery as c, useTextDirection as d, useVModel as f, unrefElement as i, useMounted as l, defaultWindow as n, useElementSize as o, onKeyStroke as r, useEventListener as s, defaultDocument as t, useResizeObserver as u };
+export { useDropZone as a, useMediaQuery as c, useResizeObserver as d, useTextDirection as f, unrefElement as i, useMounted as l, defaultWindow as n, useElementSize as o, useVModel as p, onKeyStroke as r, useEventListener as s, defaultDocument as t, useMutationObserver as u };

package/dist/es/chunks/dropdown-menu-sub.js

@@ -1,4 +1,4 @@
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as useForwardExpose } from "./useForwardExpose.js";
 import { t as useForwardPropsEmits } from "./useForwardPropsEmits.js";
 import { t as MenuSub_default } from "./MenuSub.js";

package/dist/es/chunks/fancy-button.js

@@ -36,6 +36,6 @@ var fancy_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-970a57eb"]]);
+}), [["__scopeId", "data-v-262bd031"]]);
 //#endregion
 export { fancy_button_default as t };

package/dist/es/chunks/radio-group-item.js

@@ -2,7 +2,7 @@ import { t as clsx } from "./clsx.js";
 import { t as isEqual } from "./ohash.D__AXeF1.js";
 import { t as createContext } from "./createContext.js";
 import { t as handleAndDispatchCustomEvent } from "./handleAndDispatchCustomEvent.js";
-import { f as useVModel, s as useEventListener } from "./dist2.js";
+import { p as useVModel, s as useEventListener } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { t as useFormControl } from "./useFormControl.js";
 import { t as useForwardExpose } from "./useForwardExpose.js";

package/dist/es/chunks/range-calendar.js

@@ -1,7 +1,7 @@
 import { t as clsx } from "./clsx.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as createContext } from "./createContext.js";
-import { f as useVModel, s as useEventListener } from "./dist2.js";
+import { p as useVModel, s as useEventListener } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { a as handleCalendarInitialFocus, c as isBefore, d as toDate, f as $12a3c853105e5a70$export$ad991b66133851cf, g as $ad063034c8620db8$export$aa8b41735afcabd2, h as $ad063034c8620db8$export$a18c89cbd24170ff, i as getWeekStartsOn, l as isBetween, m as $ad063034c8620db8$export$91b62ebf2ba703ee, o as areAllDaysBetweenValid, p as $ad063034c8620db8$export$629b0a497aa65267, r as getDaysBetween, s as getDefaultDate, t as useCalendar, u as isBetweenInclusive, v as $ad063034c8620db8$export$ea39ec197993aef0 } from "./useCalendar.js";
 import { t as useDirection } from "./useDirection.js";

package/dist/es/chunks/scroll-area.js

@@ -1,6 +1,6 @@
 import { t as clsx } from "./clsx.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { u as useResizeObserver } from "./dist2.js";
+import { d as useResizeObserver } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { t as useForwardExpose } from "./useForwardExpose.js";
 import { t as useNonce } from "./useNonce.js";

package/dist/es/chunks/scroll-bar.js

@@ -3,7 +3,7 @@ import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-hel
 import { t as clamp } from "./clamp.js";
 import { t as createContext } from "./createContext.js";
 import { v as useDebounceFn, x as watchOnce } from "./dist.js";
-import { u as useResizeObserver } from "./dist2.js";
+import { d as useResizeObserver } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { t as useDirection } from "./useDirection.js";
 import { t as useForwardExpose } from "./useForwardExpose.js";
@@ -12,6 +12,7 @@ import { useDelegatedProps } from "../use-delegated-props.js";
 import "../use-chart-motion.js";
 import "../use-locale.js";
 import "../use-sidebar.js";
+import "../use-tab-observer.js";
 import { computed, createBlock, createCommentVNode, createVNode, defineComponent, mergeProps, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderSlot, toRefs, unref, watch, watchEffect, withCtx } from "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__*/ createContext("ScrollAreaRoot");

package/dist/es/chunks/segmented-control-item.js

@@ -1,7 +1,7 @@
 import { t as clsx } from "./clsx.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as isValueEqualOrExist } from "./isValueEqualOrExist.js";
-import { f as useVModel } from "./dist2.js";
+import { p as useVModel } from "./dist2.js";
 import { t as Primitive } from "./Primitive.js";
 import { t as useFormControl } from "./useFormControl.js";
 import { t as useForwardExpose } from "./useForwardExpose.js";
@@ -195,6 +195,6 @@ var segmented_control_item_default = /*#__PURE__*/ _plugin_vue_export_helper_def
 			}, 16, ["class"]);
 		};
 	}
-}), [["__scopeId", "data-v-e184b1ba"]]);
+}), [["__scopeId", "data-v-efe57652"]]);
 //#endregion
 export { segmented_control_item_default as t };

package/dist/es/chunks/segmented-control.js

@@ -3,7 +3,10 @@ import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-hel
 import { t as useForwardPropsEmits } from "./useForwardPropsEmits.js";
 import { t as ToggleGroupRoot_default } from "./ToggleGroupRoot.js";
 import { useDelegatedProps } from "../use-delegated-props.js";
-import { createBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { useTabObserver } from "../use-tab-observer.js";
+import { createBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/segmented-control/segmented-control.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-ready"];
 //#endregion
 //#region src/components/segmented-control/segmented-control.vue
 var segmented_control_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -34,13 +37,26 @@ var segmented_control_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 		const emits = __emit;
 		const delegatedProps = useDelegatedProps(props, "class");
 		const forwarded = useForwardPropsEmits(delegatedProps, emits);
+		const { listRef, indicator, ready } = useTabObserver("[data-state=\"on\"]");
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ToggleGroupRoot_default), mergeProps({ class: unref(clsx)("celeste-segmented-control", props.class) }, unref(forwarded), { type: "single" }), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+			return openBlock(), createBlock(unref(ToggleGroupRoot_default), mergeProps({
+				ref_key: "listRef",
+				ref: listRef,
+				class: unref(clsx)("celeste-segmented-control", props.class)
+			}, unref(forwarded), { type: "single" }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true), createElementVNode("div", {
+					class: "celeste-segmented-control-indicator",
+					"data-ready": unref(ready),
+					style: normalizeStyle({
+						width: `${unref(indicator).width}px`,
+						height: `${unref(indicator).height}px`,
+						transform: `translate3d(${unref(indicator).left}px, ${unref(indicator).top}px, 0)`
+					})
+				}, null, 12, _hoisted_1)]),
 				_: 3
 			}, 16, ["class"]);
 		};
 	}
-}), [["__scopeId", "data-v-fe40de14"]]);
+}), [["__scopeId", "data-v-9a13a9a8"]]);
 //#endregion
 export { segmented_control_default as t };