diff --git a/demo/components/DemoTabs.svelte b/demo/components/DemoTabs.svelte
index 714afae..eaa2038 100644
--- a/demo/components/DemoTabs.svelte
+++ b/demo/components/DemoTabs.svelte
@@ -14,9 +14,9 @@
   import NeoTab from '~/nav/NeoTab.svelte';
   import NeoTabs from '~/nav/NeoTabs.svelte';
 
-  const { onClick, loading: loading$, onLoading, skeleton: skeleton$, onSkeleton } = useButtonState('DemoTabsClicked');
+  const { onClick, loading: loading$, onLoading } = useButtonState('DemoTabsClicked');
   const loading = $derived.by(loading$);
-  const skeleton = $derived.by(skeleton$);
+  let skeleton = $state(false);
 
   const { matches } = useWatchMedia('(max-width: 1550px)');
   const vertical = $derived.by(matches);
@@ -36,12 +36,14 @@
   let active: unknown | undefined = $state('button');
   let value: unknown | undefined = $state('button');
 
-  const onChange = (id: TabId, _value?: unknown) => {
+  const onChange = (id?: TabId, _value?: unknown) => {
     active = id;
     value = _value;
   };
 
-  const options = $state({ disabled: false, close: true, add: true, slide: false });
+  const onClear = () => onChange();
+
+  const options = $state({ disabled: false, close: true, add: true, slide: true });
 
   const columns = [
     { label: 'Default' },
@@ -63,13 +65,12 @@
   <NeoTab tabId="icon" value="icon" {loading} close={false} onclick={onLoading} {icon} />
   <NeoTab tabId="icon-label" value="icon-label" close={false} onclick={onClick} {icon}>Icon</NeoTab>
   <NeoTab tabId="reversed" value="reversed" reverse close={false} onclick={onClick} {icon}>Reversed</NeoTab>
-  <NeoTab tabId="skeleton" value="skeleton" {skeleton} close={false} onclick={onSkeleton}>Skeleton</NeoTab>
 {/snippet}
 
 {#snippet group(props: NeoButtonGroupContext = {})}
   <NeoTabs bind:active onchange={onChange} {vertical} {skeleton} {onclose} {onadd} {...options} {...props}>
     {@render buttons()}
-    {#each added as { text, ...tab }}
+    {#each added as { text, ...tab } (tab.tabId)}
       <NeoTab {...tab}>{text}</NeoTab>
     {/each}
   </NeoTabs>
@@ -87,6 +88,8 @@
       <NeoButton toggle bind:checked={options.add}>Add</NeoButton>
       <NeoButton toggle bind:checked={options.close}>Close</NeoButton>
       <NeoButton toggle bind:checked={options.slide}>Slide</NeoButton>
+      <NeoButton toggle bind:checked={skeleton}>Skeleton</NeoButton>
+      <NeoButton onclick={onClear}>Clear</NeoButton>
     </NeoButtonGroup>
   </div>
 </div>
diff --git a/src/lib/buttons/NeoButton.svelte b/src/lib/buttons/NeoButton.svelte
index 561910f..92f19ac 100644
--- a/src/lib/buttons/NeoButton.svelte
+++ b/src/lib/buttons/NeoButton.svelte
@@ -160,7 +160,7 @@
     color: var(--neo-btn-text-color, inherit);
     text-decoration: inherit;
     background-color: var(--neo-btn-bg-color, var(--background-color));
-    border: 1px var(--neo-btn-border-color, transparent) solid;
+    border: var(--border-width, 1px) var(--neo-btn-border-color, transparent) solid;
     border-radius: var(--neo-btn-border-radius, var(--border-radius));
     box-shadow: var(--box-shadow-raised-2);
     cursor: pointer;
diff --git a/src/lib/buttons/NeoButtonGroup.svelte b/src/lib/buttons/NeoButtonGroup.svelte
index 3751215..b83c343 100644
--- a/src/lib/buttons/NeoButtonGroup.svelte
+++ b/src/lib/buttons/NeoButtonGroup.svelte
@@ -78,7 +78,7 @@
     margin: 0.25rem;
     padding: 0.25rem;
     background-color: var(--neo-btn-bg-color, var(--background-color));
-    border: 1px var(--neo-btn-border-color, transparent) solid;
+    border: var(--border-width, 1px) var(--neo-btn-border-color, transparent) solid;
     border-radius: calc(var(--neo-btn-border-radius, var(--border-radius)) + 0.25rem);
     transition:
       color 0.3s ease,
diff --git a/src/lib/nav/NeoTab.svelte b/src/lib/nav/NeoTab.svelte
index 216ddbb..00b3959 100644
--- a/src/lib/nav/NeoTab.svelte
+++ b/src/lib/nav/NeoTab.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
   import { height, width } from '@dvcol/svelte-utils/transition';
 
+  import { untrack } from 'svelte';
+
   import type { NeoTabProps } from '~/nav/neo-tab.model.js';
 
   import NeoButton from '~/buttons/NeoButton.svelte';
   import IconClose from '~/icons/IconClose.svelte';
   import { getTabContext } from '~/nav/neo-tabs-context.svelte.js';
+  import { defaultTransitionDuration, enterTransition } from '~/utils/transition.utils.js';
 
   const {
     // Snippets
@@ -32,26 +35,29 @@
   const disabled = $derived(rest.disabled || (rest.disabled !== false && context?.disabled));
   const closeable = $derived(close || (close !== false && context?.closeable));
   const transition = $derived(context?.vertical ? height : width);
+  const slide = $derived(context?.slide);
 
   const onClick: NeoTabProps['onclick'] = (e: MouseEvent) => {
     context?.onChange(tabId);
     onclick?.(e);
   };
 
+  let ref: HTMLDivElement | undefined;
   $effect(() => {
-    context?.register(tabId, value);
+    if (!ref) return;
+    untrack(() => context?.register(tabId, ref!, value));
     return () => context?.remove(tabId);
   });
 
   const onClose = (e: MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    onclose?.(tabId);
-    context?.onClose(tabId);
+    onclose?.(tabId, value, ref);
+    context?.onClose(tabId, value, ref);
   };
 </script>
 
-<div class="neo-tab" transition:transition={{ duration: 200, css: `overflow: hidden; white-space: nowrap` }} {...tabProps}>
+<div bind:this={ref} class="neo-tab" class:active class:slide transition:transition={enterTransition} {...tabProps}>
   <NeoButton
     role="tab"
     data-tab-id={tabId}
@@ -66,7 +72,13 @@
   >
     {@render children?.({ active, tabId, value })}
     {#if closeable}
-      <button class="neo-tab-close" class:reverse={rest.reverse} class:disabled transition:width={{ duration: 200 }} onclick={onClose}>
+      <button
+        class="neo-tab-close"
+        class:reverse={rest.reverse}
+        class:disabled
+        transition:width={{ duration: defaultTransitionDuration }}
+        onclick={onClose}
+      >
         <IconClose class="icon-close" />
       </button>
     {/if}
@@ -83,6 +95,13 @@
         opacity: 1;
       }
     }
+
+    &.slide {
+      :global(.neo-button:active .icon-close),
+      :global(.neo-button.pressed .icon-close) {
+        transition-delay: 0.3s;
+      }
+    }
   }
 
   .neo-tab-close {
diff --git a/src/lib/nav/NeoTabs.svelte b/src/lib/nav/NeoTabs.svelte
index c3f3881..b3fa47d 100644
--- a/src/lib/nav/NeoTabs.svelte
+++ b/src/lib/nav/NeoTabs.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
   import { height, width } from '@dvcol/svelte-utils/transition';
 
+  import { untrack } from 'svelte';
+
   import type { OnChange, TabsProps } from '~/nav/neo-tabs.model.js';
 
   import NeoButton from '~/buttons/NeoButton.svelte';
   import NeoButtonGroup from '~/buttons/NeoButtonGroup.svelte';
   import IconAdd from '~/icons/IconAdd.svelte';
   import { setTabContext } from '~/nav/neo-tabs-context.svelte.js';
+  import { useTimeout } from '~/utils/timeout.util.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
   let {
@@ -34,18 +37,47 @@
   /* eslint-enable prefer-const */
 
   // reflect context active to component
-  const onChange: OnChange = (_tabId, _value) => {
+  const onChange: OnChange = (_tabId, _value, _ref) => {
     active = _tabId;
-    onchange?.(_tabId, _value);
+    onchange?.(_tabId, _value, _ref);
   };
 
   const context = setTabContext(active, { onChange, onClose: onclose });
   const transition = $derived(rest.vertical ? height : width);
 
+  // to allow time for the box-shadow enter transition (0.3s)
+  let delay = $state();
+  const { start, immediate } = useTimeout(() => {
+    delay = active;
+  }, 300);
+
+  $effect.pre(() => {
+    if (!slide) return;
+    if (!active) return immediate();
+    start();
+  });
+
+  // to allow time for the box-shadow exit transition (0.3s)
+  let position = $state();
+  const { immediate: setPosition, start: clearPosition } = useTimeout((val = '') => {
+    position = val;
+  }, 300);
+
+  $effect.pre(() => {
+    if (!slide) return;
+    const { top: _top, left: _left, width: _width, height: _height } = context.position;
+    if (!_width || !_height) return clearPosition();
+    setPosition(
+      `--neo-tab-active-left: ${_left}px; --neo-tab-active-top: ${_top}px; --neo-tab-active-width: ${_width}px; --neo-tab-active-height: ${_height}px`,
+    );
+  });
+
+  const style = $derived([tabsProps?.style, position].filter(Boolean).join('; '));
+
   // reflect component active to context
   $effect(() => {
     if (active === context.active) return;
-    context.onChange(active);
+    untrack(() => context.onChange(active));
   });
 
   $effect(() => {
@@ -57,7 +89,20 @@
   <IconAdd />
 {/snippet}
 
-<div class="neo-tabs" class:add class:slide class:flat={rest.flat} class:text={rest.text} class:vertical={rest.vertical} {...tabsProps}>
+<div
+  class="neo-tabs"
+  class:add
+  class:slide
+  class:active
+  class:delay
+  class:position
+  class:flat={rest.flat}
+  class:text={rest.text}
+  class:vertical={rest.vertical}
+  class:rounded={rest.rounded}
+  {...tabsProps}
+  {style}
+>
   <NeoButtonGroup {...rest}>
     {@render children?.({ active, disabled, slide, close, add, vertical: rest.vertical })}
     {#if add}
@@ -103,26 +148,59 @@
     }
 
     &.slide {
-      position: relative;
+      :global(.neo-button-group) {
+        position: relative;
+        overflow: hidden;
+      }
 
+      :global(:has(.neo-tab.active[inert]).neo-button-group::before),
+      &:not(.active) :global(.neo-button-group::before),
       :global(.neo-tab .neo-button) {
         box-shadow: var(--box-shadow-flat);
       }
 
-      &.text {
-        ::after {
-          position: absolute;
-          bottom: 2px;
-          left: var(--neo-tab-active-left, 0);
-          width: var(--neo-tab-active-width, 1.5rem);
-          height: 2px;
-          background-color: var(--color-primary);
-          transition:
-            left 1s var(--transition-bezier),
-            bottom 1s var(--transition-bezier),
-            width 1s var(--transition-bezier);
-          content: '';
-        }
+      :global(.neo-tab .neo-button:hover) {
+        color: var(--neo-tab-hover-color, var(--text-color-hover));
+      }
+
+      :global(.neo-tab .neo-button:hover.pressed),
+      :global(.neo-tab .neo-button:hover:active) {
+        color: var(--neo-tab-hover-color-active, var(--text-color-hover-active));
+      }
+
+      :global(:has(.neo-tab[inert].active).neo-button-group::before) {
+        transition: box-shadow 0.1s ease;
+      }
+
+      &:not(.delay) :global(.neo-button-group::before) {
+        transition:
+          left 0.3s var(--transition-bezier),
+          top 0.3s var(--transition-bezier),
+          box-shadow 0.3s ease;
+      }
+
+      :global(.neo-button-group::before) {
+        position: absolute;
+        top: calc(var(--neo-tab-active-top, 0) - var(--border-width, 1px));
+        left: calc(var(--neo-tab-active-left, 0) - var(--border-width, 1px));
+        z-index: var(--z-index-in-front, 1);
+        width: var(--neo-tab-active-width, 0);
+        height: var(--neo-tab-active-height, 0);
+        border: var(--border-width, 1px) var(--neo-tab-border-color, transparent) solid;
+        border-radius: var(--neo-tab-border-radius, var(--border-radius));
+        box-shadow: var(--box-shadow-inset-2);
+        transition:
+          left 0.5s var(--transition-bezier),
+          top 0.5s var(--transition-bezier),
+          width 0.5s var(--transition-bezier),
+          height 0.5s var(--transition-bezier),
+          box-shadow 0.3s ease;
+        content: '';
+        pointer-events: none;
+      }
+
+      &.rounded :global(.neo-button-group::before) {
+        border-radius: var(--neo-tab-border-radius, var(--border-radius-lg));
       }
     }
   }
diff --git a/src/lib/nav/neo-tabs-context.svelte.ts b/src/lib/nav/neo-tabs-context.svelte.ts
index 62e674c..a667eba 100644
--- a/src/lib/nav/neo-tabs-context.svelte.ts
+++ b/src/lib/nav/neo-tabs-context.svelte.ts
@@ -4,6 +4,8 @@ import { SvelteMap } from 'svelte/reactivity';
 import type { TabId } from '~/nav/neo-tab.model.js';
 import type { OnChange } from '~/nav/neo-tabs.model.js';
 
+export type NeoTabContextPosition = { top: number; left: number; width: number; height: number };
+
 type NeoTabContextOptions = {
   slide?: boolean;
   closeable?: boolean;
@@ -11,13 +13,17 @@ type NeoTabContextOptions = {
   vertical?: boolean;
 };
 
-type NeoTabContextCallbacks<T> = { onChange?: OnChange<T>; onClose?: OnChange<T> };
+type NeoTabContextCallbacks<T = unknown> = { onChange?: OnChange<T>; onClose?: OnChange<T> };
+type NeoTabContextValue<T = unknown> = { value?: T; ref: HTMLDivElement };
+
+const defaultPosition: NeoTabContextPosition = { top: 0, left: 0, width: 0, height: 0 };
 
 export class NeoTabContext<T = unknown> {
-  readonly #tabs: Map<TabId, T> = new SvelteMap<TabId, T>();
+  readonly #tabs: Map<TabId, NeoTabContextValue<T>> = new SvelteMap();
   readonly #onChange?: OnChange<T>;
   readonly #onClose?: OnChange<T>;
   #active?: TabId = $state();
+  #position: NeoTabContextPosition = $state(defaultPosition);
   #options: NeoTabContextOptions = $state({});
 
   get active() {
@@ -25,7 +31,11 @@ export class NeoTabContext<T = unknown> {
   }
 
   get value() {
-    return this.#getValue(this.active);
+    return this.#getValue(this.active)?.value;
+  }
+
+  get ref() {
+    return this.#getValue(this.active)?.ref;
   }
 
   get disabled() {
@@ -44,14 +54,8 @@ export class NeoTabContext<T = unknown> {
     return this.#options?.vertical;
   }
 
-  get state() {
-    return {
-      active: this.active,
-      disabled: this.disabled,
-      slide: this.slide,
-      closeable: this.closeable,
-      vertical: this.vertical,
-    };
+  get position() {
+    return this.#position;
   }
 
   constructor(active?: TabId, { onChange, onClose }: NeoTabContextCallbacks<T> = {}) {
@@ -69,23 +73,43 @@ export class NeoTabContext<T = unknown> {
     Object.assign(this.#options, options);
   }
 
+  onPosition() {
+    const parent = this.ref?.parentElement?.getBoundingClientRect();
+    const rect = this.ref?.getBoundingClientRect();
+    if (!parent || !rect) {
+      this.#position = defaultPosition;
+      return;
+    }
+    this.#position = {
+      top: rect.top - parent.top,
+      left: rect.left - parent.left,
+      width: rect.width,
+      height: rect.height,
+    };
+    return this.position;
+  }
+
   onChange(tabId?: TabId, emit = true) {
     if (tabId === this.#active) return;
     this.#active = tabId;
-    if (emit) this.#onChange?.(this.active, this.value);
+    if (emit) this.#onChange?.(this.active, this.value, this.ref);
+    this.onPosition();
   }
 
-  onClose(tabId?: TabId, value?: T) {
-    this.#onClose?.(tabId, value ?? this.#getValue(tabId));
+  onClose(tabId?: TabId, value?: T, ref?: HTMLDivElement) {
+    const active = this.#getValue(tabId);
+    this.#onClose?.(tabId, value ?? active?.value, ref ?? active?.ref);
   }
 
-  register(tabId: TabId, value: T) {
-    this.#tabs.set(tabId, value);
+  register(tabId: TabId, ref: HTMLDivElement, value?: T) {
+    this.#tabs.set(tabId, { value, ref });
+    this.onPosition();
   }
 
   remove(tabId: TabId) {
     this.#tabs.delete(tabId);
     if (this.#active === tabId) this.onChange();
+    else this.onPosition();
   }
 }
 
diff --git a/src/lib/nav/neo-tabs.model.ts b/src/lib/nav/neo-tabs.model.ts
index 997d5c4..99f27d0 100644
--- a/src/lib/nav/neo-tabs.model.ts
+++ b/src/lib/nav/neo-tabs.model.ts
@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 import type { NeoButtonGroup } from '~/buttons/neo-button-group.model.js';
 import type { NeoTabProps, TabId } from '~/nav/neo-tab.model.js';
 
-export type OnChange<T = unknown> = (tabId?: TabId, value?: T) => unknown;
+export type OnChange<T = unknown> = (tabId?: TabId, value?: T, ref?: HTMLDivElement) => unknown;
 export type NeoTabsContext = {
   // States
   active?: TabId;
diff --git a/src/lib/styles/common/colors.scss b/src/lib/styles/common/colors.scss
index 5eb803d..ee82fa9 100644
--- a/src/lib/styles/common/colors.scss
+++ b/src/lib/styles/common/colors.scss
@@ -45,8 +45,8 @@
   --text-color-active: color-mix(in srgb, currentcolor, white 10%);
   --text-color-focused: var(--purple-80);
   --text-color-focused-active: color-mix(in srgb, var(--text-color-focused), white 10%);
-  --text-color-hover: var(--color-primary);
-  --text-color-hover-active: color-mix(in srgb, var(--text-color-hover), white 10%);
+  --text-color-hover: color-mix(in srgb, currentcolor, var(--color-primary) 50%);
+  --text-color-hover-active: color-mix(in srgb, var(--text-color-hover), white 20%);
   --text-color-disabled: var(--text-color);
   --border-color: var(--grey-strong-20);
   --border-color-focused: var(--purple-50);
@@ -74,8 +74,8 @@
   --dark-text-color-active: color-mix(in srgb, currentcolor, black 10%);
   --dark-text-color-focused: var(--purple-soft-80);
   --dark-text-color-focused-active: color-mix(in srgb, var(--dark-text-color-focused), black 10%);
-  --dark-text-color-hover: var(--dark-color-primary);
-  --dark-text-color-hover-active: color-mix(in srgb, var(--dark-text-color-hover), black 10%);
+  --dark-text-color-hover: color-mix(in srgb, currentcolor, var(--dark-color-primary) 50%);
+  --dark-text-color-hover-active: color-mix(in srgb, var(--dark-text-color-hover), black 20%);
   --dark-text-color-disabled: var(--white-soft-50);
   --dark-border-color: var(--grey-soft-10);
   --dark-border-color-focused: var(--purple-soft-50);
diff --git a/src/lib/styles/common/spacing.scss b/src/lib/styles/common/spacing.scss
index 0127923..55f79df 100644
--- a/src/lib/styles/common/spacing.scss
+++ b/src/lib/styles/common/spacing.scss
@@ -1,6 +1,7 @@
 :root,
 :host {
   /* Borders */
+  --border-width: 1px;
   --border-radius: 0.5rem;
   --border-radius-lg: 2rem;
 
diff --git a/src/lib/styles/mixin.scss b/src/lib/styles/mixin.scss
index 0e08338..4ec4026 100644
--- a/src/lib/styles/mixin.scss
+++ b/src/lib/styles/mixin.scss
@@ -165,6 +165,10 @@
     border-color 1s;
   animation: skeleton $timing $easing infinite;
 
+  &::before,
+  &::after,
+  :global(> *::before),
+  :global(> *::after),
   :global(> *) {
     visibility: hidden;
     pointer-events: none;
diff --git a/src/lib/utils/timeout.util.ts b/src/lib/utils/timeout.util.ts
new file mode 100644
index 0000000..6840860
--- /dev/null
+++ b/src/lib/utils/timeout.util.ts
@@ -0,0 +1,15 @@
+export const useTimeout = <T extends any[]>(cb: (...args: T) => void, delay: number) => {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  const clear = () => clearTimeout(timeout);
+  return {
+    start: (...args: T) => {
+      clear();
+      timeout = setTimeout(() => cb(...args), delay);
+    },
+    immediate: (...args: T) => {
+      clear();
+      cb(...args);
+    },
+    clear,
+  };
+};
diff --git a/src/lib/utils/transition.utils.ts b/src/lib/utils/transition.utils.ts
new file mode 100644
index 0000000..1d6a4b8
--- /dev/null
+++ b/src/lib/utils/transition.utils.ts
@@ -0,0 +1,9 @@
+import type { TransitionProps } from '@dvcol/svelte-utils/transition';
+
+export const defaultTransitionDuration = 300;
+
+export const enterTransition: TransitionProps = {
+  duration: defaultTransitionDuration,
+  freeze: true,
+  css: `overflow: hidden; white-space: nowrap`,
+};