@youcan/celeste 0.10.4 → 0.12.0

package/ai/component-registry.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "version": "0.10.4",
-  "generatedAt": "2026-08-29T09:03:41.551Z",
+  "version": "0.12.0",
+  "generatedAt": "2026-09-04T17:20:36.110Z",
   "components": {
     "Alert": {
       "name": "Alert",
@@ -9466,6 +9466,16 @@
       "file": "src/components/tab-menu/tab-menu-list.vue",
       "import": "@youcan/celeste",
       "props": [
+        {
+          "name": "align",
+          "type": "\"start\" | \"center\"",
+          "values": [
+            "start",
+            "center"
+          ],
+          "required": false,
+          "default": "\"start\""
+        },
         {
           "name": "as",
           "type": "AsTag | Component",
@@ -9478,16 +9488,34 @@
           "required": false,
           "description": "Render the child element instead of this component's own, merging props onto it."
         },
+        {
+          "name": "bordered",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
         {
           "name": "class",
           "type": "ClassValue",
           "required": false
         },
+        {
+          "name": "fill",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
         {
           "name": "loop",
           "type": "boolean",
           "required": false,
           "description": "When `true`, keyboard navigation will loop from last tab to first, and vice versa."
+        },
+        {
+          "name": "scrollable",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
         }
       ],
       "events": [],

package/ai/component-registry.md

@@ -1,6 +1,6 @@
 # Celeste Component Registry
 
-> Generated from source for `@youcan/celeste@0.10.4`. Do not edit.
+> Generated from source for `@youcan/celeste@0.12.0`. Do not edit.
 > Regenerate with `pnpm --filter @youcan/celeste codegen:registry`.
 
 Every component below is imported from `@youcan/celeste`:
@@ -3036,10 +3036,14 @@ reach for when several look similar, see the `celeste-ui` skill.
 
 **Props**
 
+- `align`: `start` | `center` — default `"start"`
 - `as`: `AsTag | Component` — Element or component to render as.
 - `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `bordered`: `boolean` — default `true`
 - `class`: `ClassValue`
+- `fill`: `boolean` — default `false`
 - `loop`: `boolean` — When `true`, keyboard navigation will loop from last tab to first, and vice versa.
+- `scrollable`: `boolean` — default `false`
 
 **Slots**
 

package/ai/icons.md

@@ -1,6 +1,6 @@
 # Celeste Icons
 
-> Generated from `@youcan/celeste-icons@0.10.4`. Do not edit.
+> Generated from `@youcan/celeste-icons@0.12.0`. Do not edit.
 
 **3148 icons.** Render one as a class, not a component:
 

package/ai/tokens.md

@@ -1,8 +1,8 @@
 # Celeste Design Tokens
 
-> Generated from `@youcan/celeste-tokens@0.10.4`. Do not edit.
+> Generated from `@youcan/celeste-tokens@0.12.0`. Do not edit.
 
-**347 tokens.** Use them as CSS custom properties: `var(--color-text-sub-600)`.
+**352 tokens.** Use them as CSS custom properties: `var(--color-text-sub-600)`.
 
 **70 are semantic** — they change automatically under `[data-theme="dark"]`.
 Always prefer a semantic token over the primitive it resolves to: `--color-text-sub-600`
@@ -23,6 +23,16 @@ to follow the OS. Never hard-code a dark colour.
 
 ---
 
+## breakpoint
+
+- `--breakpoint-2xl`: 1536px
+- `--breakpoint-lg`: 1024px
+- `--breakpoint-md`: 768px
+- `--breakpoint-sm`: 640px
+- `--breakpoint-xl`: 1280px
+
+---
+
 ## color
 
 ### Semantic — prefer these

package/dist/celeste.css

@@ -2067,8 +2067,9 @@ to {
   initial-value: rgba(0, 0, 0, 0);
   inherits: false;
 }
-.celeste-fbutton[data-v-970a57eb] {
+.celeste-fbutton[data-v-262bd031] {
   display: inline-flex;
+  position: relative;
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
@@ -2081,96 +2082,138 @@ to {
   text-decoration: none;
   cursor: pointer;
 }
-.celeste-fbutton[data-v-970a57eb]:disabled {
+.celeste-fbutton[data-v-262bd031]:disabled {
   background-color: var(--color-bg-weak-50);
   color: var(--color-text-disabled-300);
   cursor: default;
 }
-.celeste-fbutton[data-v-970a57eb] i {
+.celeste-fbutton[data-v-262bd031] i {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
 }
-.celeste-fbutton[data-v-970a57eb]:focus {
+.celeste-fbutton[data-v-262bd031]:focus {
   outline: none;
 }
-.celeste-fbutton-xs[data-v-970a57eb] {
+.celeste-fbutton-xs[data-v-262bd031] {
   gap: var(--spacing-4);
   height: 32px;
   padding: var(--spacing-6) var(--spacing-8);
   border-radius: var(--radius-8);
 }
-.celeste-fbutton-sm[data-v-970a57eb] {
+.celeste-fbutton-sm[data-v-262bd031] {
   gap: var(--spacing-6);
   height: 36px;
   padding: var(--spacing-8) var(--spacing-10);
   border-radius: var(--radius-8);
 }
-.celeste-fbutton-md[data-v-970a57eb] {
+.celeste-fbutton-md[data-v-262bd031] {
   gap: var(--spacing-6);
   height: 40px;
   padding: var(--spacing-10) var(--spacing-12);
   border-radius: var(--radius-10);
 }
-.celeste-fbutton-primary[data-v-970a57eb]:not(.celeste-fbutton-basic, :disabled) {
+.celeste-fbutton-primary[data-v-262bd031]:not(.celeste-fbutton-basic, :disabled) {
   --celeste-fbutton-bg-start: rgb(255 255 255 / 16%);
   --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
   background: linear-gradient(180deg, var(--celeste-fbutton-bg-start) 0%, var(--celeste-fbutton-bg-end) 100%), var(--color-primary-base);
-  box-shadow: inset 0 1px 0.5px 0.5px hsla(0, 0%, 100%, 0.12), var(--shadow-fancy-buttons-primary);
+  box-shadow: var(--shadow-fancy-buttons-primary);
   color: var(--color-text-white-0);
 }
-.celeste-fbutton-primary[data-v-970a57eb]:not(.celeste-fbutton-basic, :disabled):hover {
+.celeste-fbutton-primary[data-v-262bd031]:not(.celeste-fbutton-basic, :disabled)::before {
+  content: "";
+  position: absolute;
+  padding: 1px;
+  border-radius: inherit;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
+  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
+          mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
+  -webkit-mask-clip: content-box, border-box;
+          mask-clip: content-box, border-box;
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  inset: 0;
+}
+.celeste-fbutton-primary[data-v-262bd031]:not(.celeste-fbutton-basic, :disabled):hover {
   --celeste-fbutton-bg-start: rgb(255 255 255 / 24%);
   --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
 }
-.celeste-fbutton-primary[data-v-970a57eb]:not(.celeste-fbutton-basic, :disabled):focus {
+.celeste-fbutton-primary[data-v-262bd031]:not(.celeste-fbutton-basic, :disabled):focus {
   --celeste-fbutton-bg-start: rgb(255 255 255 / 24%);
   --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
-  box-shadow: inset 0 1px 0.5px 0.5px hsla(0, 0%, 100%, 0.12), var(--shadow-fancy-buttons-primary), var(--shadow-buttons-primary-focus);
+  box-shadow: var(--shadow-fancy-buttons-primary), var(--shadow-buttons-primary-focus);
 }
-.celeste-fbutton-neutral[data-v-970a57eb]:not(.celeste-fbutton-basic, :disabled) {
+.celeste-fbutton-neutral[data-v-262bd031]:not(.celeste-fbutton-basic, :disabled) {
   --celeste-fbutton-bg-start: rgb(255 255 255 / 16%);
   --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
   background: linear-gradient(180deg, var(--celeste-fbutton-bg-start) 0%, var(--celeste-fbutton-bg-end) 100%), var(--color-bg-strong-950);
-  box-shadow: inset 0 1px 0.5px 0.5px hsla(0, 0%, 100%, 0.12), var(--shadow-fancy-buttons-neutral);
+  box-shadow: var(--shadow-fancy-buttons-neutral);
   color: var(--color-text-white-0);
 }
-.celeste-fbutton-neutral[data-v-970a57eb]:not(.celeste-fbutton-basic, :disabled):hover {
+.celeste-fbutton-neutral[data-v-262bd031]:not(.celeste-fbutton-basic, :disabled)::before {
+  content: "";
+  position: absolute;
+  padding: 1px;
+  border-radius: inherit;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
+  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
+          mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
+  -webkit-mask-clip: content-box, border-box;
+          mask-clip: content-box, border-box;
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  inset: 0;
+}
+.celeste-fbutton-neutral[data-v-262bd031]:not(.celeste-fbutton-basic, :disabled):hover {
   --celeste-fbutton-bg-start: rgb(255 255 255 / 24%);
   --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
 }
-.celeste-fbutton-neutral[data-v-970a57eb]:not(.celeste-fbutton-basic, :disabled):focus {
+.celeste-fbutton-neutral[data-v-262bd031]:not(.celeste-fbutton-basic, :disabled):focus {
   --celeste-fbutton-bg-start: rgb(255 255 255 / 24%);
   --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
-  box-shadow: inset 0 1px 0.5px 0.5px hsla(0, 0%, 100%, 0.12), var(--shadow-fancy-buttons-neutral), var(--shadow-buttons-important-focus);
+  box-shadow: var(--shadow-fancy-buttons-neutral), var(--shadow-buttons-important-focus);
 }
-.celeste-fbutton-error[data-v-970a57eb]:not(.celeste-fbutton-basic, :disabled) {
+.celeste-fbutton-error[data-v-262bd031]:not(.celeste-fbutton-basic, :disabled) {
   --celeste-fbutton-bg-start: rgb(255 255 255 / 16%);
   --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
   background: linear-gradient(180deg, var(--celeste-fbutton-bg-start) 0%, var(--celeste-fbutton-bg-end) 100%), var(--color-state-error-base);
-  box-shadow: inset 0 1px 0.5px 0.5px hsla(0, 0%, 100%, 0.12), var(--shadow-fancy-buttons-error);
+  box-shadow: var(--shadow-fancy-buttons-error);
   color: var(--color-text-white-0);
 }
-.celeste-fbutton-error[data-v-970a57eb]:not(.celeste-fbutton-basic, :disabled):hover {
+.celeste-fbutton-error[data-v-262bd031]:not(.celeste-fbutton-basic, :disabled)::before {
+  content: "";
+  position: absolute;
+  padding: 1px;
+  border-radius: inherit;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
+  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
+          mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
+  -webkit-mask-clip: content-box, border-box;
+          mask-clip: content-box, border-box;
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  inset: 0;
+}
+.celeste-fbutton-error[data-v-262bd031]:not(.celeste-fbutton-basic, :disabled):hover {
   --celeste-fbutton-bg-start: rgb(255 255 255 / 24%);
   --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
 }
-.celeste-fbutton-error[data-v-970a57eb]:not(.celeste-fbutton-basic, :disabled):focus {
+.celeste-fbutton-error[data-v-262bd031]:not(.celeste-fbutton-basic, :disabled):focus {
   --celeste-fbutton-bg-start: rgb(255 255 255 / 24%);
   --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
-  box-shadow: inset 0 1px 0.5px 0.5px hsla(0, 0%, 100%, 0.12), var(--shadow-fancy-buttons-error), var(--shadow-buttons-error-focus);
+  box-shadow: var(--shadow-fancy-buttons-error), var(--shadow-buttons-error-focus);
 }
-.celeste-fbutton-basic[data-v-970a57eb] {
+.celeste-fbutton-basic[data-v-262bd031] {
   background: var(--color-bg-white-0);
   box-shadow: var(--shadow-fancy-buttons-stroke);
   color: var(--color-text-sub-600);
 }
-.celeste-fbutton-basic[data-v-970a57eb]:hover {
+.celeste-fbutton-basic[data-v-262bd031]:hover {
   background: var(--color-bg-weak-50);
   box-shadow: none;
   color: var(--text-strong-950);
 }
-.celeste-fbutton-basic[data-v-970a57eb]:focus {
+.celeste-fbutton-basic[data-v-262bd031]:focus {
   background: var(--color-bg-weak-50);
   box-shadow: var(--shadow-buttons-important-focus);
   color: var(--text-strong-950);
@@ -2326,16 +2369,17 @@ to {
 .celeste-select-icon[data-v-c6783f07] > :where(i, svg, img) {
   width: 100%;
   height: 100%;
-}.celeste-text-input-affix[data-v-440f2745] {
+}.celeste-text-input-affix[data-v-a6d421c4] {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   color: var(--celeste-text-input-affix-color);
 }
-.celeste-text-input-affix[inline=false][data-v-440f2745] {
+.celeste-text-input-affix[inline=false][data-v-a6d421c4] {
   padding-inline: var(--spacing-10);
   background-color: var(--celeste-text-input-affix-background-color);
 }
-.celeste-text-input-affix[askbd=true][data-v-440f2745] {
+.celeste-text-input-affix[askbd=true][data-v-a6d421c4] {
   width: -moz-fit-content;
   width: fit-content;
   height: -moz-fit-content;
@@ -4304,37 +4348,37 @@ to {
 }.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 .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);
 }
 .celeste-switch .celeste-switch-thumb[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));
 }
 .celeste-switch .celeste-switch-thumb::before {
   content: "";
@@ -4342,31 +4386,32 @@ to {
   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) .celeste-switch .celeste-switch-thumb {
+  --direction: -1;
+}
 .celeste-switch[aria-checked=true] {
   --bg-color: var(--color-primary-base);
 }
 .celeste-switch: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:disabled .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;
 }
-.celeste-switch:disabled .celeste-switch-thumb[data-state=checked] {
-  inset-inline-start: calc(100% - var(--thumb-size));
-}
-.celeste-switch:active:not(:disabled) .celeste-switch-thumb {
-  --thumb-size: 10px;
+.celeste-switch:active:not(:disabled) {
+  --thumb-scale: 0.833;
 }
 .celeste-switch:hover:not(:active, :disabled) {
   --bg-color: var(--color-bg-sub-300);
@@ -4378,7 +4423,7 @@ to {
     flex: 1;
 }
 
-.celeste-tab-menu-list[data-v-3c860830] {
+.celeste-tab-menu-list[data-v-bf1363bf] {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -4386,17 +4431,59 @@ to {
   padding: var(--spacing-10);
   gap: var(--spacing-8);
 }
-.celeste-tab-menu-list[data-orientation='horizontal'][data-v-3c860830] {
+.celeste-tab-menu-list[data-orientation='horizontal'][data-v-bf1363bf] {
+    position: relative;
     flex-direction: row;
     padding: var(--spacing-0);
-    border-block: 1px solid var(--color-stroke-soft-200);
     gap: 24px;
 }
-.celeste-tab-menu-list[data-orientation='vertical'][data-v-3c860830] {
+.celeste-tab-menu-list[data-orientation='horizontal'][data-bordered='true'][data-v-bf1363bf] {
+      border-block: 1px solid var(--color-stroke-soft-200);
+}
+.celeste-tab-menu-list[data-orientation='vertical'][data-v-bf1363bf] {
     flex-direction: column;
 }
+.celeste-tab-menu-list[data-scrollable='true'][data-v-bf1363bf] {
+    overflow-x: auto;
+    scrollbar-width: none;
+}
+.celeste-tab-menu-list[data-scrollable='true'][data-v-bf1363bf]::-webkit-scrollbar {
+      display: none;
+}
+.celeste-tab-menu-list[data-fill='true'][data-v-bf1363bf] .celeste-tab-menu-item {
+    flex: 1 1 0;
+    width: auto;
+}
+.celeste-tab-menu-list[data-align='center'][data-v-bf1363bf] .celeste-tab-menu-item {
+    justify-content: center;
+}
+.celeste-tab-menu-list[data-align='center'][data-v-bf1363bf] .celeste-tab-menu-item-label {
+    flex: 0 1 auto;
+}
+.celeste-tab-menu-indicator[data-v-bf1363bf] {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  transition-property: transform, width;
+  transition-duration: 0s;
+  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
+  opacity: 0;
+  background-color: var(--color-primary-base);
+  pointer-events: none;
+}
+.celeste-tab-menu-list[data-scrollable='true'] > .celeste-tab-menu-indicator[data-v-bf1363bf] {
+    bottom: 0;
+}
+.celeste-tab-menu-indicator[data-ready='true'][data-v-bf1363bf] {
+    transition-duration: var(--animation-normal);
+    opacity: 1;
+}
+.celeste-tab-menu-list[data-orientation='vertical'] > .celeste-tab-menu-indicator[data-v-bf1363bf] {
+    display: none;
+}
 
-.celeste-tab-menu-item[data-v-3c27e2e4] {
+.celeste-tab-menu-item[data-v-512ad887] {
   --animation-function: cubic-bezier(0, 0, 0.2, 1);
 
   display: inline-flex;
@@ -4404,74 +4491,73 @@ to {
   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);
 }
-.celeste-tab-menu-item[data-v-3c27e2e4] i {
+.celeste-tab-menu-item[data-v-512ad887] i {
     width: 20px;
     height: 20px;
+    transition: color var(--animation-fast) var(--animation-function);
 }
-.celeste-tab-menu-item[data-v-3c27e2e4]:focus {
+.celeste-tab-menu-item[data-v-512ad887]:focus {
     outline: none;
 }
-.celeste-tab-menu-item[data-orientation='horizontal'][data-v-3c27e2e4] {
-    position: relative;
+.celeste-tab-menu-item[data-orientation='horizontal'][data-v-512ad887] {
     width: -moz-fit-content;
     width: fit-content;
     padding-block: var(--spacing-14);
     padding-inline: var(--spacing-0);
+    background-color: var(--color-bg-white-0);
 }
-.celeste-tab-menu-item[data-orientation='horizontal'][data-v-3c27e2e4]::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;
-}
-.celeste-tab-menu-item[data-orientation='vertical'][data-state='active'][data-v-3c27e2e4] {
-    background-color: var(--color-bg-weak-50);
-}
-.celeste-tab-menu-item[data-orientation='horizontal'][data-state='active'][data-v-3c27e2e4] {
+.celeste-tab-menu-item[data-orientation='vertical'][data-v-512ad887] {
     background-color: var(--color-bg-white-0);
 }
-.celeste-tab-menu-item[data-orientation='horizontal'][data-state='active'][data-v-3c27e2e4]::after {
-      background-color: var(--color-primary-base);
+.celeste-tab-menu-item[data-orientation='vertical'][data-v-512ad887]:hover,.celeste-tab-menu-item[data-orientation='vertical'][data-state='active'][data-v-512ad887] {
+      background-color: var(--color-bg-weak-50);
+}
+.celeste-tab-menu-item[data-orientation='vertical'] .celeste-tab-menu-item-postfix[data-v-512ad887] {
+      display: inline-flex;
+      transform: scale(0.75);
+      transition:
+        transform var(--animation-fast) var(--animation-function),
+        opacity var(--animation-fast) var(--animation-function);
+      opacity: 0;
 }
-.celeste-tab-menu-item[data-state='active'][data-v-3c27e2e4] i {
+.celeste-tab-menu-item[data-orientation='vertical'][data-state='active'] .celeste-tab-menu-item-postfix[data-v-512ad887] {
+      transform: scale(1);
+      opacity: 1;
+}
+.celeste-tab-menu-item[data-state='active'][data-v-512ad887] i {
       color: var(--color-primary-base);
 }
-.celeste-tab-menu-item[data-state='active'] span[data-v-3c27e2e4] {
+.celeste-tab-menu-item[data-state='active'] span[data-v-512ad887] {
       color: var(--color-text-strong-950);
 }
-.celeste-tab-menu-item[data-state='inactive'][data-v-3c27e2e4] {
-    background-color: var(--color-bg-white-0);
-}
-.celeste-tab-menu-item .celeste-tab-menu-item-label[data-v-3c27e2e4] {
+.celeste-tab-menu-item .celeste-tab-menu-item-label[data-v-512ad887] {
     flex: 1;
     overflow: hidden;
-    font-size: var(--font-size-2);
     text-align: start;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-.celeste-segmented-control-item[data-v-e184b1ba] {
+.celeste-segmented-control-item[data-v-efe57652] {
   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;
@@ -4479,16 +4565,14 @@ to {
   font: var(--label-sm);
   cursor: pointer;
 }
-.celeste-segmented-control-item[data-state='on'][data-v-e184b1ba] {
-    background-color: var(--color-bg-white-0);
-    box-shadow: var(--shadow-toggle-switch);
+.celeste-segmented-control-item[data-state='on'][data-v-efe57652] {
     color: var(--color-text-strong-950);
     pointer-events: none;
 }
-.celeste-segmented-control-item[data-state='off'][data-v-e184b1ba]:hover {
+.celeste-segmented-control-item[data-state='off'][data-v-efe57652]:hover {
     color: var(--color-text-sub-600);
 }
-.celeste-segmented-control-item[data-v-e184b1ba]:disabled {
+.celeste-segmented-control-item[data-v-efe57652]:disabled {
     color: var(--color-text-disabled-300);
     pointer-events: none;
     -webkit-user-select: none;
@@ -5290,18 +5374,38 @@ to {
 .celeste-select-item[data-state=checked][data-v-3fe18f57] .i-celeste-check-line {
   display: none;
 }
-.celeste-segmented-control[data-v-fe40de14] {
+.celeste-segmented-control[data-v-9a13a9a8] {
   display: flex;
+  position: relative;
   gap: var(--spacing-4);
+  isolation: isolate;
   align-items: center;
   width: 100%;
   padding: var(--spacing-4);
   border-radius: var(--radius-10);
   background-color: var(--color-bg-weak-50);
 }
-.celeste-segmented-control[data-orientation='vertical'][data-v-fe40de14] {
+.celeste-segmented-control[data-orientation='vertical'][data-v-9a13a9a8] {
     flex-direction: column;
 }
+.celeste-segmented-control-indicator[data-v-9a13a9a8] {
+  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;
+}
+.celeste-segmented-control-indicator[data-ready='true'][data-v-9a13a9a8] {
+    transition-duration: var(--animation-normal);
+    opacity: 1;
+}
 
 .celeste-sheet-close[data-v-a922d9c4] {
   position: absolute;

package/dist/cjs/chunks/dist2.cjs

@@ -512,6 +512,12 @@ Object.defineProperty(exports, "useMounted", {
 		return useMounted;
 	}
 });
+Object.defineProperty(exports, "useMutationObserver", {
+	enumerable: true,
+	get: function() {
+		return useMutationObserver;
+	}
+});
 Object.defineProperty(exports, "useResizeObserver", {
 	enumerable: true,
 	get: function() {

package/dist/cjs/chunks/fancy-button.cjs

@@ -38,7 +38,7 @@ var fancy_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 });
 //#endregion
 //#region src/components/button/fancy-button.vue
-var fancy_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(fancy_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-970a57eb"]]);
+var fancy_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(fancy_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-262bd031"]]);
 //#endregion
 Object.defineProperty(exports, "fancy_button_default", {
 	enumerable: true,

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

@@ -12,6 +12,7 @@ const require_use_delegated_props = require("../use-delegated-props.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");