@youcan/celeste 0.11.0 → 0.12.0

package/dist/es/chunks/sidebar-provider.js

@@ -1,5 +1,5 @@
 import { t as clsx } from "./clsx.js";
-import { c as useMediaQuery, f as useVModel, s as useEventListener, t as defaultDocument } from "./dist2.js";
+import { c as useMediaQuery, p as useVModel, s as useEventListener, t as defaultDocument } from "./dist2.js";
 import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, provideSidebarContext } from "../use-sidebar.js";
 import { computed, createElementBlock, defineComponent, mergeProps, openBlock, ref, renderSlot, unref } from "vue";
 //#endregion

package/dist/es/chunks/slider.js

@@ -1,7 +1,7 @@
 import { t as clsx } from "./clsx.js";
 import { t as clamp } from "./clamp.js";
 import { t as createContext } from "./createContext.js";
-import { f as useVModel, l as useMounted } from "./dist2.js";
+import { l as useMounted, 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/switch.js

@@ -1,6 +1,6 @@
 import { t as clsx } from "./clsx.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 { t as useFormControl } from "./useFormControl.js";
 import { t as useForwardExpose } from "./useForwardExpose.js";

package/dist/es/chunks/tab-menu-item.js

@@ -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"
+};
 //#endregion
 //#region src/components/tab-menu/tab-menu-item.vue
 var tab_menu_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -118,12 +122,12 @@ var tab_menu_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 				default: withCtx(() => [
 					renderSlot(_ctx.$slots, "prefix", {}, void 0, true),
 					_ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])) : createCommentVNode("", true),
-					renderSlot(_ctx.$slots, "postfix", {}, void 0, true)
+					_ctx.$slots.postfix ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "postfix", {}, void 0, true)])) : createCommentVNode("", true)
 				]),
 				_: 3
 			}, 16, ["class"]);
 		};
 	}
-}), [["__scopeId", "data-v-3c27e2e4"]]);
+}), [["__scopeId", "data-v-512ad887"]]);
 //#endregion
 export { tab_menu_item_default as t };

package/dist/es/chunks/tab-menu-list.js

@@ -5,7 +5,8 @@ import { t as useForwardExpose } from "./useForwardExpose.js";
 import { t as RovingFocusGroup_default } from "./RovingFocusGroup.js";
 import { n as injectTabsRootContext } from "./TabsRoot.js";
 import { useDelegatedProps } from "../use-delegated-props.js";
-import { createBlock, createVNode, defineComponent, mergeProps, openBlock, renderSlot, toRefs, unref, withCtx } from "vue";
+import { useTabObserver } from "../use-tab-observer.js";
+import { createBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeStyle, openBlock, 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/Tabs/TabsList.js
 var TabsList_default = /* @__PURE__ */ defineComponent({
 	__name: "TabsList",
@@ -60,31 +61,76 @@ var TabsList_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/tab-menu/tab-menu-list.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-ready"];
+//#endregion
 //#region src/components/tab-menu/tab-menu-list.vue
 var tab_menu_list_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ 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 = useDelegatedProps(props, "class");
+		const delegatedProps = useDelegatedProps(props, [
+			"class",
+			"bordered",
+			"scrollable",
+			"fill",
+			"align"
+		]);
+		const { listRef, indicator, ready } = useTabObserver("[data-state=\"active\"]");
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(TabsList_default), mergeProps(unref(delegatedProps), { class: unref(clsx)("celeste-tab-menu-list", props.class) }), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+			return openBlock(), createBlock(unref(TabsList_default), mergeProps({
+				ref_key: "listRef",
+				ref: listRef
+			}, unref(delegatedProps), {
+				"data-bordered": __props.bordered,
+				"data-scrollable": __props.scrollable,
+				"data-fill": __props.fill,
+				"data-align": __props.align,
+				class: unref(clsx)("celeste-tab-menu-list", props.class)
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true), createElementVNode("div", {
+					class: "celeste-tab-menu-indicator",
+					"data-ready": unref(ready),
+					style: normalizeStyle({
+						width: `${unref(indicator).width}px`,
+						transform: `translate3d(${unref(indicator).left}px, 0, 0)`
+					})
+				}, null, 12, _hoisted_1)]),
 				_: 3
-			}, 16, ["class"]);
+			}, 16, [
+				"data-bordered",
+				"data-scrollable",
+				"data-fill",
+				"data-align",
+				"class"
+			]);
 		};
 	}
-}), [["__scopeId", "data-v-3c860830"]]);
+}), [["__scopeId", "data-v-bf1363bf"]]);
 //#endregion
 export { tab_menu_list_default as t };

package/dist/es/index.js

@@ -113,6 +113,7 @@ import { t as radio_group_default } from "./chunks/radio-group.js";
 import { t as range_picker_default } from "./chunks/range-picker.js";
 import { t as rich_editor_default } from "./chunks/rich-editor.js";
 import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, provideSidebarContext, useSidebar } from "./use-sidebar.js";
+import { useTabObserver } from "./use-tab-observer.js";
 import { t as segmented_control_default } from "./chunks/segmented-control.js";
 import { t as sheet_close_default } from "./chunks/sheet-close.js";
 import { t as sheet_content_default } from "./chunks/sheet-content.js";
@@ -221,4 +222,4 @@ var Celeste = { install(vue) {
 	});
 } };
 //#endregion
-export { alert_default as Alert, alpha_slider_default as AlphaSlider, badge_default as Badge, bar_chart_default as BarChart, button_default as Button, CHART_DURATION, CHART_SERIES_COLORS, COLOR_NUMBER_VALIDATION_PATTERN, calendar_default as Calendar, Celeste, chart_card_default as ChartCard, chart_legend_default as ChartLegend, chart_plot_default as ChartPlot, checkbox_default as Checkbox, checkbox_card_default as CheckboxCard, checkbox_label_default as CheckboxLabel, collapsible_default as Collapsible, collapsible_content_default as CollapsibleContent, collapsible_trigger_default as CollapsibleTrigger, color_area_default as ColorArea, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, combobox_default as Combobox, combobox_anchor_default as ComboboxAnchor, combobox_empty_default as ComboboxEmpty, combobox_group_default as ComboboxGroup, combobox_input_default as ComboboxInput, combobox_item_default as ComboboxItem, combobox_list_default as ComboboxList, combobox_root_default as ComboboxRoot, combobox_separator_default as ComboboxSeparator, combobox_trigger_default as ComboboxTrigger, compact_button_default as CompactButton, content_divider_default as ContentDivider, counter_input_default as CounterInput, DEFAULT_SWATCH, date_picker_default as DatePicker, digit_input_default as DigitInput, digit_input_group_default as DigitInputGroup, digit_input_slot_default as DigitInputSlot, dropdown_menu_default as DropdownMenu, dropdown_menu_content_default as DropdownMenuContent, dropdown_menu_group_default as DropdownMenuGroup, dropdown_menu_item_default as DropdownMenuItem, dropdown_menu_label_default as DropdownMenuLabel, dropdown_menu_separator_default as DropdownMenuSeparator, dropdown_menu_sub_default as DropdownMenuSub, dropdown_menu_sub_content_default as DropdownMenuSubContent, dropdown_menu_sub_trigger_default as DropdownMenuSubTrigger, dropdown_menu_trigger_default as DropdownMenuTrigger, fancy_button_default as FancyButton, file_upload_area_default as FileUploadArea, HEX_VALIDATION_PATTERN, hint_text_default as HintText, hue_slider_default as HueSlider, label_default as Label, link_button_default as LinkButton, modal_default as Modal, modal_body_default as ModalBody, modal_close_default as ModalClose, modal_content_default as ModalContent, modal_footer_default as ModalFooter, modal_header_default as ModalHeader, modal_trigger_default as ModalTrigger, pagination_default as Pagination, pagination_content_default as PaginationContent, pagination_ellipsis_default as PaginationEllipsis, pagination_first_default as PaginationFirst, pagination_item_default as PaginationItem, pagination_last_default as PaginationLast, pagination_next_default as PaginationNext, pagination_previous_default as PaginationPrevious, popover_default as Popover, popover_content_default as PopoverContent, popover_trigger_default as PopoverTrigger, progress_bar_default as ProgressBar, progress_circle_default as ProgressCircle, radio_group_default as RadioGroup, radio_group_card_default as RadioGroupCard, radio_group_item_default as RadioGroupItem, radio_group_label_default as RadioGroupLabel, range_calendar_default as RangeCalendar, range_picker_default as RangePicker, rich_editor_default as RichEditor, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, scroll_area_default as ScrollArea, segmented_control_default as SegmentedControl, segmented_control_item_default as SegmentedControlItem, select_default as Select, select_content_default as SelectContent, select_group_default as SelectGroup, select_icon_default as SelectIcon, select_item_default as SelectItem, select_label_default as SelectLabel, select_separator_default as SelectSeparator, select_trigger_default as SelectTrigger, select_value_default as SelectValue, sheet_default as Sheet, sheet_close_default as SheetClose, sheet_content_default as SheetContent, sheet_description_default as SheetDescription, sheet_footer_default as SheetFooter, sheet_header_default as SheetHeader, sheet_title_default as SheetTitle, sheet_trigger_default as SheetTrigger, sidebar_default as Sidebar, sidebar_content_default as SidebarContent, sidebar_element_default as SidebarElement, sidebar_footer_default as SidebarFooter, sidebar_group_default as SidebarGroup, sidebar_group_content_default as SidebarGroupContent, sidebar_group_label_default as SidebarGroupLabel, sidebar_header_default as SidebarHeader, sidebar_menu_default as SidebarMenu, sidebar_menu_action_default as SidebarMenuAction, sidebar_menu_badge_default as SidebarMenuBadge, sidebar_menu_button_default as SidebarMenuButton, sidebar_menu_item_default as SidebarMenuItem, sidebar_menu_sub_default as SidebarMenuSub, sidebar_menu_sub_button_default as SidebarMenuSubButton, sidebar_menu_sub_item_default as SidebarMenuSubItem, sidebar_provider_default as SidebarProvider, sidebar_separator_default as SidebarSeparator, sidebar_trigger_default as SidebarTrigger, slider_default as Slider, social_button_default as SocialButton, sonner_default as Sonner, sonner_alert_default as SonnerAlert, status_badge_default as StatusBadge, switch_default as Switch, tab_menu_default as TabMenu, tab_menu_content_default as TabMenuContent, tab_menu_item_default as TabMenuItem, tab_menu_list_default as TabMenuList, table_default as Table, table_body_default as TableBody, table_caption_default as TableCaption, table_cell_default as TableCell, table_empty_default as TableEmpty, table_footer_default as TableFooter, table_head_default as TableHead, table_header_default as TableHeader, table_row_default as TableRow, tag_default as Tag, text_input_default as TextInput, text_input_affix_default as TextInputAffix, text_input_button_default as TextInputButton, textarea_default as Textarea, tooltip_default as Tooltip, tooltip_content_default as TooltipContent, tooltip_provider_default as TooltipProvider, tooltip_root_default as TooltipRoot, tooltip_trigger_default as TooltipTrigger, bumpColorValue, chartColor, chartTooltip, clamp, formatCompact, formatNumber, getAbsolutePosition, getColorConstraints, getFractionDigit, getPageXYFromEvent, getScrollXY, niceTicks, provideSidebarContext, resolveArrowDirection, toast, truncColorValue, uid, useChartMotion, useDelegatedProps, useLocale, useSidebar };
+export { alert_default as Alert, alpha_slider_default as AlphaSlider, badge_default as Badge, bar_chart_default as BarChart, button_default as Button, CHART_DURATION, CHART_SERIES_COLORS, COLOR_NUMBER_VALIDATION_PATTERN, calendar_default as Calendar, Celeste, chart_card_default as ChartCard, chart_legend_default as ChartLegend, chart_plot_default as ChartPlot, checkbox_default as Checkbox, checkbox_card_default as CheckboxCard, checkbox_label_default as CheckboxLabel, collapsible_default as Collapsible, collapsible_content_default as CollapsibleContent, collapsible_trigger_default as CollapsibleTrigger, color_area_default as ColorArea, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, combobox_default as Combobox, combobox_anchor_default as ComboboxAnchor, combobox_empty_default as ComboboxEmpty, combobox_group_default as ComboboxGroup, combobox_input_default as ComboboxInput, combobox_item_default as ComboboxItem, combobox_list_default as ComboboxList, combobox_root_default as ComboboxRoot, combobox_separator_default as ComboboxSeparator, combobox_trigger_default as ComboboxTrigger, compact_button_default as CompactButton, content_divider_default as ContentDivider, counter_input_default as CounterInput, DEFAULT_SWATCH, date_picker_default as DatePicker, digit_input_default as DigitInput, digit_input_group_default as DigitInputGroup, digit_input_slot_default as DigitInputSlot, dropdown_menu_default as DropdownMenu, dropdown_menu_content_default as DropdownMenuContent, dropdown_menu_group_default as DropdownMenuGroup, dropdown_menu_item_default as DropdownMenuItem, dropdown_menu_label_default as DropdownMenuLabel, dropdown_menu_separator_default as DropdownMenuSeparator, dropdown_menu_sub_default as DropdownMenuSub, dropdown_menu_sub_content_default as DropdownMenuSubContent, dropdown_menu_sub_trigger_default as DropdownMenuSubTrigger, dropdown_menu_trigger_default as DropdownMenuTrigger, fancy_button_default as FancyButton, file_upload_area_default as FileUploadArea, HEX_VALIDATION_PATTERN, hint_text_default as HintText, hue_slider_default as HueSlider, label_default as Label, link_button_default as LinkButton, modal_default as Modal, modal_body_default as ModalBody, modal_close_default as ModalClose, modal_content_default as ModalContent, modal_footer_default as ModalFooter, modal_header_default as ModalHeader, modal_trigger_default as ModalTrigger, pagination_default as Pagination, pagination_content_default as PaginationContent, pagination_ellipsis_default as PaginationEllipsis, pagination_first_default as PaginationFirst, pagination_item_default as PaginationItem, pagination_last_default as PaginationLast, pagination_next_default as PaginationNext, pagination_previous_default as PaginationPrevious, popover_default as Popover, popover_content_default as PopoverContent, popover_trigger_default as PopoverTrigger, progress_bar_default as ProgressBar, progress_circle_default as ProgressCircle, radio_group_default as RadioGroup, radio_group_card_default as RadioGroupCard, radio_group_item_default as RadioGroupItem, radio_group_label_default as RadioGroupLabel, range_calendar_default as RangeCalendar, range_picker_default as RangePicker, rich_editor_default as RichEditor, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, scroll_area_default as ScrollArea, segmented_control_default as SegmentedControl, segmented_control_item_default as SegmentedControlItem, select_default as Select, select_content_default as SelectContent, select_group_default as SelectGroup, select_icon_default as SelectIcon, select_item_default as SelectItem, select_label_default as SelectLabel, select_separator_default as SelectSeparator, select_trigger_default as SelectTrigger, select_value_default as SelectValue, sheet_default as Sheet, sheet_close_default as SheetClose, sheet_content_default as SheetContent, sheet_description_default as SheetDescription, sheet_footer_default as SheetFooter, sheet_header_default as SheetHeader, sheet_title_default as SheetTitle, sheet_trigger_default as SheetTrigger, sidebar_default as Sidebar, sidebar_content_default as SidebarContent, sidebar_element_default as SidebarElement, sidebar_footer_default as SidebarFooter, sidebar_group_default as SidebarGroup, sidebar_group_content_default as SidebarGroupContent, sidebar_group_label_default as SidebarGroupLabel, sidebar_header_default as SidebarHeader, sidebar_menu_default as SidebarMenu, sidebar_menu_action_default as SidebarMenuAction, sidebar_menu_badge_default as SidebarMenuBadge, sidebar_menu_button_default as SidebarMenuButton, sidebar_menu_item_default as SidebarMenuItem, sidebar_menu_sub_default as SidebarMenuSub, sidebar_menu_sub_button_default as SidebarMenuSubButton, sidebar_menu_sub_item_default as SidebarMenuSubItem, sidebar_provider_default as SidebarProvider, sidebar_separator_default as SidebarSeparator, sidebar_trigger_default as SidebarTrigger, slider_default as Slider, social_button_default as SocialButton, sonner_default as Sonner, sonner_alert_default as SonnerAlert, status_badge_default as StatusBadge, switch_default as Switch, tab_menu_default as TabMenu, tab_menu_content_default as TabMenuContent, tab_menu_item_default as TabMenuItem, tab_menu_list_default as TabMenuList, table_default as Table, table_body_default as TableBody, table_caption_default as TableCaption, table_cell_default as TableCell, table_empty_default as TableEmpty, table_footer_default as TableFooter, table_head_default as TableHead, table_header_default as TableHeader, table_row_default as TableRow, tag_default as Tag, text_input_default as TextInput, text_input_affix_default as TextInputAffix, text_input_button_default as TextInputButton, textarea_default as Textarea, tooltip_default as Tooltip, tooltip_content_default as TooltipContent, tooltip_provider_default as TooltipProvider, tooltip_root_default as TooltipRoot, tooltip_trigger_default as TooltipTrigger, bumpColorValue, chartColor, chartTooltip, clamp, formatCompact, formatNumber, getAbsolutePosition, getColorConstraints, getFractionDigit, getPageXYFromEvent, getScrollXY, niceTicks, provideSidebarContext, resolveArrowDirection, toast, truncColorValue, uid, useChartMotion, useDelegatedProps, useLocale, useSidebar, useTabObserver };

package/dist/es/use-tab-observer.js

@@ -0,0 +1,41 @@
+import { d as useResizeObserver, i as unrefElement, u as useMutationObserver } from "./chunks/dist2.js";
+import { ref, shallowRef } from "vue";
+//#region src/composables/use-tab-observer.ts
+function useTabObserver(activeSelector) {
+	const listRef = shallowRef(null);
+	const indicator = ref({
+		left: 0,
+		top: 0,
+		width: 0,
+		height: 0
+	});
+	const ready = ref(false);
+	function update() {
+		const active = 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));
+	}
+	useResizeObserver(listRef, update);
+	useMutationObserver(listRef, update, {
+		childList: true,
+		subtree: true,
+		attributes: true,
+		attributeFilter: ["data-state"]
+	});
+	return {
+		listRef,
+		indicator,
+		ready
+	};
+}
+//#endregion
+export { useTabObserver };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "author": "YouCan <tech@youcan.shop>",
   "repository": {
     "type": "git",
@@ -52,8 +52,8 @@
     "reka-ui": "^2.10.1",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.9",
-    "@youcan/celeste-icons": "0.11.0",
-    "@youcan/celeste-tokens": "0.11.0"
+    "@youcan/celeste-icons": "0.12.0",
+    "@youcan/celeste-tokens": "0.12.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.3.0",

package/src/components/button/fancy-button.vue

@@ -81,6 +81,7 @@ $intent-map: (
 
 .celeste-fbutton {
   display: inline-flex;
+  position: relative;
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
@@ -127,11 +128,21 @@ $intent-map: (
       background:
         linear-gradient(180deg, var(--celeste-fbutton-bg-start) 0%, var(--celeste-fbutton-bg-end) 100%),
         #{map.get($v, bg)};
-      box-shadow:
-        inset 0 1px 0.5px 0.5px hsl(0deg 0% 100% / 12%),
-        var(--shadow-fancy-buttons-#{$k});
+      box-shadow: var(--shadow-fancy-buttons-#{$k});
       color: var(--color-text-white-0);
 
+      &::before {
+        content: '';
+        position: absolute;
+        padding: 1px;
+        border-radius: inherit;
+        background: linear-gradient(180deg, rgb(255 255 255 / 12%) 0%, rgb(255 255 255 / 0%) 100%);
+        mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
+        mask-clip: content-box, border-box;
+        mask-composite: exclude;
+        inset: 0;
+      }
+
       &:hover {
         --celeste-fbutton-bg-start: rgb(255 255 255 / 24%);
         --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
@@ -142,7 +153,6 @@ $intent-map: (
         --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
 
         box-shadow:
-          inset 0 1px 0.5px 0.5px hsl(0deg 0% 100% / 12%),
           var(--shadow-fancy-buttons-#{$k}),
           if($k == 'neutral', var(--shadow-buttons-important-focus), var(--shadow-buttons-#{$k}-focus));
       }

package/src/components/segmented-control/segmented-control-item.vue

@@ -30,12 +30,14 @@ function onKeydown(e: KeyboardEvent) {
 <style scoped>
 .celeste-segmented-control-item {
   display: flex;
+  position: relative;
+  z-index: 1;
   align-items: center;
   gap: var(--spacing-6);
   justify-content: center;
   width: 100%;
   padding: var(--spacing-4);
-  transition: all var(--animation-fast) ease-out;
+  transition: color var(--animation-normal) ease-out;
   border: none;
   border-radius: var(--radius-6);
   background-color: transparent;
@@ -44,8 +46,6 @@ function onKeydown(e: KeyboardEvent) {
   cursor: pointer;
 
   &[data-state='on'] {
-    background-color: var(--color-bg-white-0);
-    box-shadow: var(--shadow-toggle-switch);
     color: var(--color-text-strong-950);
     pointer-events: none;
   }

package/src/components/segmented-control/segmented-control.vue

@@ -4,28 +4,43 @@ import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 import { ToggleGroupRoot as SegmentedControlRoot, useForwardPropsEmits } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
+import { useTabObserver } from '@/composables/use-tab-observer';
 
 const props = defineProps<Omit<ToggleGroupRootProps, 'type'> & { class?: HTMLAttributes['class'] }>();
 const emits = defineEmits<ToggleGroupRootEmits>();
 
 const delegatedProps = useDelegatedProps(props, 'class');
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const { listRef, indicator, ready } = useTabObserver('[data-state="on"]');
 </script>
 
 <template>
   <SegmentedControlRoot
+    ref="listRef"
     :class="clsx('celeste-segmented-control', props.class)"
     v-bind="forwarded"
     type="single"
   >
     <slot />
+    <div
+      class="celeste-segmented-control-indicator"
+      :data-ready="ready"
+      :style="{
+        width: `${indicator.width}px`,
+        height: `${indicator.height}px`,
+        transform: `translate3d(${indicator.left}px, ${indicator.top}px, 0)`,
+      }"
+    />
   </SegmentedControlRoot>
 </template>
 
 <style scoped>
 .celeste-segmented-control {
   display: flex;
+  position: relative;
   gap: var(--spacing-4);
+  isolation: isolate;
   align-items: center;
   width: 100%;
   padding: var(--spacing-4);
@@ -36,4 +51,24 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     flex-direction: column;
   }
 }
+
+.celeste-segmented-control-indicator {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  transition-property: transform, width, height;
+  transition-duration: 0s;
+  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
+  border-radius: var(--radius-6);
+  opacity: 0;
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-toggle-switch);
+  pointer-events: none;
+
+  &[data-ready='true'] {
+    transition-duration: var(--animation-normal);
+    opacity: 1;
+  }
+}
 </style>

package/src/components/switch/switch.vue

@@ -25,39 +25,39 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 .celeste-switch {
   --width: 26px;
   --height: 16px;
+  --thumb-size: 12px;
+  --thumb-inset: 1px;
+  --travel: calc(var(--width) - var(--thumb-size) - var(--thumb-inset) * 2 - 2px);
   --bg-color: var(--color-bg-soft-200);
-  --animation-function: cubic-bezier(0.18, 0.89, 0.43, 1.19);
 
   position: relative;
+  box-sizing: border-box;
   width: var(--width);
   height: var(--height);
-  transition: background var(--animation-fast) ease-out;
+  transition: background-color var(--animation-fast) ease-out;
   border: 1px solid transparent;
   border-radius: var(--radius-full);
   background-color: var(--bg-color);
   cursor: pointer;
 
   .celeste-switch-thumb {
-    --thumb-size: 12px;
     --thumb-hole: 4px;
+    --direction: 1;
 
     position: absolute;
     box-sizing: border-box;
     width: var(--thumb-size);
     height: var(--thumb-size);
-    transform: translateY(-50%);
-    transition-property: inset-inline-start, width, height;
-    transition-duration: var(--animation-fast);
-    transition-timing-function: var(--animation-function), ease-out, ease-out;
+    transform: translateY(-50%) scale(var(--thumb-scale, 1));
+    transition: transform var(--animation-fast) ease-out;
     border-radius: var(--radius-full);
     background-color: var(--color-static-white);
     box-shadow: var(--shadow-toggle-switch);
     inset-block-start: 50%;
-    inset-inline-start: 1px;
-    will-change: transform;
+    inset-inline-start: var(--thumb-inset);
 
     &[data-state='checked'] {
-      inset-inline-start: calc(100% - var(--thumb-size) - 1px);
+      transform: translateY(-50%) translateX(calc(var(--travel) * var(--direction))) scale(var(--thumb-scale, 1));
     }
 
     &::before {
@@ -66,11 +66,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       width: var(--thumb-hole);
       height: var(--thumb-hole);
       margin: auto;
-      transition: background var(--animation-fast) ease-out;
+      transition: background-color var(--animation-fast) ease-out;
       border-radius: var(--radius-full);
       background-color: var(--bg-color);
       inset: var(--spacing-0);
     }
+
+    :dir(rtl) & {
+      --direction: -1;
+    }
   }
 
   &[aria-checked='true'] {
@@ -79,25 +83,22 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
   &:disabled {
     --bg-color: var(--color-bg-white-0);
+    --thumb-inset: var(--spacing-2);
+    --travel: calc(var(--width) - var(--thumb-size) - var(--thumb-inset) - 2px);
 
     border-color: var(--color-stroke-soft-200);
     background-color: var(--bg-color);
     pointer-events: none;
 
     .celeste-switch-thumb {
-      inset-inline-start: var(--spacing-2);
       border-color: var(--color-bg-soft-200);
       background-color: var(--color-bg-soft-200);
       box-shadow: none;
-
-      &[data-state='checked'] {
-        inset-inline-start: calc(100% - var(--thumb-size));
-      }
     }
   }
 
-  &:active:not(:disabled) .celeste-switch-thumb {
-    --thumb-size: 10px;
+  &:active:not(:disabled) {
+    --thumb-scale: 0.833;
   }
 
   &:hover:not(:active, :disabled) {

package/src/components/tab-menu/stories/tab-menu.stories.ts

@@ -237,3 +237,42 @@ export const IconsOnly: Story = {
     `,
   }),
 };
+
+export const FilledAndScrollable: Story = {
+  args: {
+    orientation: 'horizontal',
+    defaultValue: 'orders',
+  },
+  render: args => ({
+    components: { TabMenu, TabMenuList, TabMenuItem, TabMenuContent, HintText },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px; width: 480px; margin: 0 auto;">
+        <TabMenu v-bind="args">
+          <TabMenuList fill align="center">
+            <TabMenuItem value="orders">Orders</TabMenuItem>
+            <TabMenuItem value="products">Products</TabMenuItem>
+            <TabMenuItem value="customers">Customers</TabMenuItem>
+          </TabMenuList>
+          <TabMenuContent value="orders"><div style="padding: 16px;"><HintText text="fill + align center" /></div></TabMenuContent>
+          <TabMenuContent value="products"><div style="padding: 16px;"><HintText text="fill + align center" /></div></TabMenuContent>
+          <TabMenuContent value="customers"><div style="padding: 16px;"><HintText text="fill + align center" /></div></TabMenuContent>
+        </TabMenu>
+
+        <TabMenu v-bind="args">
+          <TabMenuList scrollable :bordered="false">
+            <TabMenuItem value="orders">Orders</TabMenuItem>
+            <TabMenuItem value="products">Products</TabMenuItem>
+            <TabMenuItem value="customers">Customers</TabMenuItem>
+            <TabMenuItem value="discounts">Discounts</TabMenuItem>
+            <TabMenuItem value="analytics">Analytics</TabMenuItem>
+            <TabMenuItem value="marketing">Marketing</TabMenuItem>
+          </TabMenuList>
+          <TabMenuContent value="orders"><div style="padding: 16px;"><HintText text="scrollable, no border" /></div></TabMenuContent>
+        </TabMenu>
+      </div>
+    `,
+  }),
+};

package/src/components/tab-menu/tab-menu-item.vue

@@ -23,7 +23,9 @@ const forwardedProps = useForwardProps(delegatedProps);
     <span v-if="$slots.default" class="celeste-tab-menu-item-label">
       <slot />
     </span>
-    <slot name="postfix" />
+    <span v-if="$slots.postfix" class="celeste-tab-menu-item-postfix">
+      <slot name="postfix" />
+    </span>
   </TabsTrigger>
 </template>
 
@@ -36,17 +38,20 @@ const forwardedProps = useForwardProps(delegatedProps);
   justify-content: flex-start;
   width: 100%;
   padding: var(--spacing-8);
-  transition: all var(--animation-fast) var(--animation-function);
+  transition:
+    background-color var(--animation-fast) var(--animation-function),
+    color var(--animation-fast) var(--animation-function);
   border: none;
   border-radius: var(--radius-8);
   color: var(--color-text-sub-600);
-  font-size: var(--font-size-10);
+  font: var(--label-sm);
   cursor: pointer;
   gap: var(--spacing-6);
 
   &:deep(i) {
     width: 20px;
     height: 20px;
+    transition: color var(--animation-fast) var(--animation-function);
   }
 
   &:focus {
@@ -54,33 +59,32 @@ const forwardedProps = useForwardProps(delegatedProps);
   }
 
   &[data-orientation='horizontal'] {
-    position: relative;
     width: fit-content;
     padding-block: var(--spacing-14);
     padding-inline: var(--spacing-0);
-
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      inset-inline: 0;
-      inset-block-end: 0;
-      width: 100%;
-      height: 2px;
-      transition: all var(--animation-fast) var(--animation-function);
-      background-color: transparent;
-    }
-  }
-
-  &[data-orientation='vertical'][data-state='active'] {
-    background-color: var(--color-bg-weak-50);
+    background-color: var(--color-bg-white-0);
   }
 
-  &[data-orientation='horizontal'][data-state='active'] {
+  &[data-orientation='vertical'] {
     background-color: var(--color-bg-white-0);
 
-    &::after {
-      background-color: var(--color-primary-base);
+    &:hover,
+    &[data-state='active'] {
+      background-color: var(--color-bg-weak-50);
+    }
+
+    .celeste-tab-menu-item-postfix {
+      display: inline-flex;
+      transform: scale(0.75);
+      transition:
+        transform var(--animation-fast) var(--animation-function),
+        opacity var(--animation-fast) var(--animation-function);
+      opacity: 0;
+    }
+
+    &[data-state='active'] .celeste-tab-menu-item-postfix {
+      transform: scale(1);
+      opacity: 1;
     }
   }
 
@@ -94,14 +98,9 @@ const forwardedProps = useForwardProps(delegatedProps);
     }
   }
 
-  &[data-state='inactive'] {
-    background-color: var(--color-bg-white-0);
-  }
-
   .celeste-tab-menu-item-label {
     flex: 1;
     overflow: hidden;
-    font-size: var(--font-size-2);
     text-align: start;
     text-overflow: ellipsis;
     white-space: nowrap;