vue3-router-tab 1.1.7 → 1.1.9

package/lib/components/RouterTab.vue

@@ -12,22 +12,28 @@
           v-bind="tabTransitionProps"
         >
           <li
-            v-for="tab in tabs"
+            v-for="(tab, index) in tabs"
             :key="tab.id"
             :class="buildTabClass(tab)"
-            :data-title="tabTitle(tab)"
+            :data-title="getTabTitle(tab)"
+            :draggable="sortable"
             @click="activate(tab)"
             @auxclick.middle.prevent="close(tab)"
             @contextmenu.prevent="showContextMenu(tab, $event)"
+            @dragstart="onDragStart(tab, index, $event)"
+            @dragover="onDragOver(index, $event)"
+            @dragenter="onDragEnter(index)"
+            @dragleave="onDragLeave"
+            @drop="onDrop(index, $event)"
+            @dragend="onDragEnd"
           >
-            <span class="router-tab__item-title" :title="tabTitle(tab)">
+            <span class="router-tab__item-title" :title="getTabTitle(tab)">
               <i v-if="tab.icon" :class="['router-tab__item-icon', tab.icon]" />
-              {{ tabTitle(tab) }}
+              {{ getTabTitle(tab) }}
             </span>
             <a
               v-if="isClosable(tab)"
               class="router-tab__item-close"
-              type="button"
               @click.stop="close(tab)"
             />
           </li>
@@ -125,7 +131,6 @@ import { getTransOpt } from '../util/index'
 import { routerTabsKey, routerTabsCookie } from '../constants'
 import { useRouterTabsPersistence } from '../persistence'
 
-
 interface ResolvedMenuItem {
   id: string
   label: string
@@ -180,9 +185,18 @@ export default defineComponent({
     persistence: {
       type: Object as PropType<RouterTabsPersistenceOptions | null>,
       default: null
+    },
+    sortable: {
+      type: Boolean,
+      default: true
+    },
+    titleResolver: {
+      type: Function as PropType<(tab: TabRecord) => string>,
+      default: null
     }
   },
-  setup(props) {
+  emits: ['tab-sort', 'tab-sorted'],
+  setup(props, { emit }) {
     const instance = getCurrentInstance()
     if (!instance) {
       throw new Error('[RouterTab] component must be used within a Vue application context.')
@@ -199,7 +213,7 @@ export default defineComponent({
       maxAlive: props.maxAlive,
       keepLastTab: props.keepLastTab,
       appendPosition: props.append,
-      defaultRoute: props.defaultPage
+      defaultRoute: props.defaultPage,
     })
 
     provide(routerTabsKey, controller)
@@ -228,6 +242,14 @@ export default defineComponent({
       position: { x: 0, y: 0 }
     })
 
+    // Drag and drop state
+    const dragState = reactive({
+      dragging: false,
+      dragIndex: -1,
+      dropIndex: -1,
+      dragTab: null as TabRecord | null
+    })
+
     type MenuConfig = RouterTabsMenuConfig
     type MenuActionContext = RouterTabsMenuContext
     type CustomMenuOption = RouterTabsMenuItem
@@ -385,7 +407,10 @@ export default defineComponent({
       await item.action()
     }
 
-    function tabTitle(tab: TabRecord) {
+    function getTabTitle(tab: TabRecord): string {
+      if (props.titleResolver) {
+        return props.titleResolver(tab)
+      }
       if (typeof tab.title === 'string') return tab.title
       if (Array.isArray(tab.title) && tab.title.length) return String(tab.title[0])
       return tab.fullPath
@@ -411,7 +436,9 @@ export default defineComponent({
         'router-tab__item',
         {
           'is-active': controller.activeId.value === tab.id,
-          'is-closable': isClosable(tab)
+          'is-closable': isClosable(tab),
+          'is-dragging': dragState.dragging && dragState.dragTab?.id === tab.id,
+          'is-drag-over': dragState.dropIndex === getTabIndex(tab.id)
         },
         tab.tabClass
       ]
@@ -421,6 +448,66 @@ export default defineComponent({
       return controller.refreshingKey.value === controller.getRouteKey(route)
     }
 
+    // Drag and drop handlers
+    function onDragStart(tab: TabRecord, index: number, event: DragEvent) {
+      if (!props.sortable) return
+      
+      dragState.dragging = true
+      dragState.dragIndex = index
+      dragState.dragTab = tab
+      
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = 'move'
+        event.dataTransfer.setData('text/plain', tab.id)
+      }
+
+      emit('tab-sort', { tab, index })
+    }
+
+    function onDragOver(index: number, event: DragEvent) {
+      if (!props.sortable || !dragState.dragging) return
+      event.preventDefault()
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'move'
+      }
+    }
+
+    function onDragEnter(index: number) {
+      if (!props.sortable || !dragState.dragging) return
+      dragState.dropIndex = index
+    }
+
+    function onDragLeave() {
+      if (!props.sortable || !dragState.dragging) return
+      // Don't reset dropIndex immediately to prevent flicker
+    }
+
+    function onDrop(index: number, event: DragEvent) {
+      if (!props.sortable || !dragState.dragging) return
+      
+      event.preventDefault()
+      
+      if (dragState.dragIndex !== -1 && dragState.dragIndex !== index) {
+        const movedTab = controller.tabs.splice(dragState.dragIndex, 1)[0]
+        controller.tabs.splice(index, 0, movedTab)
+        
+        emit('tab-sorted', {
+          tab: movedTab,
+          fromIndex: dragState.dragIndex,
+          toIndex: index
+        })
+      }
+
+      onDragEnd()
+    }
+
+    function onDragEnd() {
+      dragState.dragging = false
+      dragState.dragIndex = -1
+      dragState.dropIndex = -1
+      dragState.dragTab = null
+    }
+
     onMounted(() => {
       document.addEventListener('keydown', hideContextMenu)
     })
@@ -474,11 +561,17 @@ export default defineComponent({
       handleMenuAction,
       showContextMenu,
       hideContextMenu,
-      tabTitle,
+      getTabTitle,
       isClosable,
       isRefreshing,
-      hasCustomSlot
+      hasCustomSlot,
+      onDragStart,
+      onDragOver,
+      onDragEnter,
+      onDragLeave,
+      onDrop,
+      onDragEnd
     }
   }
 })
-</script>
+</script>

package/lib/scss/index.scss

@@ -1,64 +1,42 @@
 @use "sass:math";
-@use "sass:string";
-
-// Fallback palette (overridden by Vuetify CSS vars)
-$primary-fallback: #635bff;
-$light-bg: #ffffff;
-$light-text: #1e293b;
-$light-border: rgba(15, 23, 42, 0.08);
-
-// Dark mode fallbacks
-$dark-bg: #1e1e1e;
-$dark-text: #e2e8f0;
-$dark-border: rgba(226, 232, 240, 0.12);
-
-$font-size: 14px;
-$tab-trans: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-$hd-height: 40px;
-$tab-padding: 20px;
-$close-icon-margin: 4px;
-$close-icon-size: 13px;
-
-/// Utility to fetch a CSS variable with a graceful fallback.
-@function css-var($name, $fallback) {
-    @return string.unquote("var(#{$name}, #{$fallback})");
+@use "sass:color";
+@use "variables" as *;
+
+// Theme Setup
+:root[data-theme="light"] {
+  color-scheme: light;
+  --router-tab-background: #{$router-tab-bg-light};
+  --router-tab-foreground: #{$router-tab-text-light};
+  --router-tab-border: #{$router-tab-border-light};
+  --router-tab-header-bg: #{$router-tab-bg-light};
 }
 
-/// Mixin for reduced motion preferences
-@mixin reduced-motion {
-  @media (prefers-reduced-motion: reduce) {
-    @content;
-  }
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --router-tab-active-border: #ffff;
+  --router-tab-background: #{$router-tab-bg-dark};
+  --router-tab-foreground: #{$router-tab-text-dark};
+  --router-tab-border: #{$router-tab-border-dark};
+  --router-tab-header-bg: #{$router-tab-bg-dark};
 }
 
-/// Mixin for dark theme styles - works with data-theme="dark"
-@mixin dark-theme {
-  :root[data-theme="dark"] & {
-    @content;
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --router-tab-background: #{$router-tab-bg-dark};
+    --router-tab-foreground: #{$router-tab-text-dark};
+    --router-tab-border: #{$router-tab-border-dark};
+    --router-tab-header-bg: #{$router-tab-bg-dark};
   }
 }
 
+// Main Component Styles
 .router-tab {
-  // Use Vuetify theme colors with fallbacks
-  $bg: css-var(--router-tab-background, css-var(--v-theme-surface, css-var(--theme-background, $light-bg)));
-  $fg: css-var(--router-tab-foreground, css-var(--v-theme-on-surface, css-var(--theme-foreground, $light-text)));
-  $border: css-var(--router-tab-border, css-var(--v-border-color, css-var(--theme-border, $light-border)));
-  $primary: css-var(--router-tab-primary, css-var(--v-theme-primary, css-var(--theme-primary, $primary-fallback)));
-  $header-bg: css-var(--router-tab-header-bg, $bg);
-  $tooltip-bg: css-var(--router-tab-tooltip-background, rgba(var(--v-theme-on-surface), 0.9));
-  $tooltip-fg: css-var(--router-tab-tooltip-foreground, css-var(--v-theme-surface, #ffffff));
-  $tooltip-shadow: css-var(--router-tab-tooltip-shadow, 0 8px 24px rgba(0, 0, 0, 0.18));
-
   display: flex;
   flex-direction: column;
   min-height: 300px;
-  background-color: transparent;
-  color: inherit;
-
-  // Dark theme default values
-  @include dark-theme {
-    --router-tab-tooltip-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
-  }
+  background-color: var(--router-tab-background);
+  color: var(--router-tab-foreground);
 
   &__header {
     position: relative;
@@ -66,21 +44,22 @@ $close-icon-size: 13px;
     display: flex;
     flex: none;
     box-sizing: border-box;
-    height: $hd-height;
-    border-bottom: 1px solid $border;
-    background-color: $header-bg;
-    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-                background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-
-    @include reduced-motion {
-      transition: none;
-    }
+    height: var(--router-tab-header-height, $router-tab-header-height);
+    background-color: var(--router-tab-header-bg);
+    transition: $router-tab-transition-fast;
+    border-bottom: 1px solid var(--router-tab-border);
+  }
+
+  &__slot-start,
+  &__slot-end {
+    display: flex;
+    align-items: center;
   }
 
   &__scroll {
     position: relative;
     flex: 1 1 0px;
-    height: $hd-height;
+    height: var(--router-tab-header-height, $router-tab-header-height);
     overflow: hidden;
 
     &-container {
@@ -91,7 +70,6 @@ $close-icon-size: 13px;
       &.is-mobile {
         overflow-x: auto;
         overflow-y: hidden;
-        -webkit-overflow-scrolling: touch;
       }
     }
   }
@@ -104,14 +82,10 @@ $close-icon-size: 13px;
     bottom: 0;
     left: 0;
     height: $h;
-    background-color: rgba(var(--v-theme-on-surface, 0, 0, 0), 0.1);
+    background-color: rgba(0, 0, 0, 0.1);
     border-radius: $h;
     opacity: 0;
-    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-    @include reduced-motion {
-      transition: none;
-    }
+    transition: opacity 0.3s ease-in-out;
 
     .router-tab__scroll:hover &,
     &.is-dragging {
@@ -123,17 +97,13 @@ $close-icon-size: 13px;
       top: 0;
       left: 0;
       height: 100%;
-      background-color: rgba(var(--v-theme-on-surface, 0, 0, 0), 0.15);
+      background-color: rgba(0, 0, 0, 0.1);
       border-radius: $h;
-      transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-      @include reduced-motion {
-        transition: none;
-      }
+      transition: background-color 0.3s ease-in-out;
 
       &:hover,
       .router-tab__scrollbar.is-dragging & {
-        background-color: rgba(var(--v-theme-on-surface, 0, 0, 0), 0.25);
+        background-color: rgba(0, 0, 0, 0.2);
       }
     }
   }
@@ -153,180 +123,90 @@ $close-icon-size: 13px;
     display: flex;
     flex: none;
     align-items: center;
-    padding: 0 $tab-padding;
+    padding: 0 var(--router-tab-padding, $router-tab-padding);
     color: inherit;
-    font-size: $font-size;
-    border: 1px solid $border;
-    border-left: none;
+    font-size: var(--router-tab-font-size, $router-tab-font-size);
     transform-origin: left bottom;
     cursor: pointer;
-    transition: $tab-trans;
+    transition: var(--router-tab-transition, $router-tab-transition);
     user-select: none;
     background-color: transparent;
-
-    @include reduced-motion {
-      transition: none;
-    }
+    border-right: 1px solid var(--router-tab-border);
 
     &:first-child {
-      border-left: 1px solid $border;
+      border-left: 1px solid var(--router-tab-border);
     }
 
-    // Keyboard focus styles using Vuetify primary color
-    &:focus-visible {
-      outline: 2px solid $primary;
-      outline-offset: -2px;
-      z-index: 1;
+    &.is-contextmenu {
+      color: var(--router-tab-primary);
     }
 
-    &.is-contextmenu {
-      color: $primary;
+    // Drag and drop states
+    &.is-dragging {
+      opacity: $router-tab-drag-opacity;
+      cursor: $router-tab-drag-cursor;
     }
 
     &.is-drag-over {
-      background: rgba(var(--v-theme-on-surface, 0, 0, 0), 0.05);
-      transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+      background: $router-tab-drag-over-bg;
+      transition: background 0.15s ease;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: -2px;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        background: var(--router-tab-primary);
+      }
+    }
+
+    &[draggable="true"] {
+      cursor: $router-tab-drag-cursor;
     }
 
     &-title {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      gap: var(--router-tab-title-gap, 0);
-      min-width: var(--router-tab-title-min-width, 30px);
-      max-width: var(--router-tab-title-max-width, 120px);
-      color: var(--router-tab-title-color, inherit);
-      font-weight: var(--router-tab-title-font-weight, inherit);
-      letter-spacing: var(--router-tab-title-letter-spacing, normal);
-      text-transform: var(--router-tab-title-transform, none);
+      min-width: $router-tab-title-min-width;
+      max-width: $router-tab-title-max-width;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-      @include reduced-motion {
-        transition: none;
-      }
     }
 
     &-icon {
-      margin-right: 5px;
-      font-size: 16px;
-      flex-shrink: 0;
+      margin-right: $router-tab-icon-margin;
+      font-size: $router-tab-icon-size;
     }
 
     &:hover,
     &.is-active {
-      color: $primary;
+      color: var(--router-tab-active-border);
 
       &.is-closable {
-        padding: 0 ($tab-padding - math.div($close-icon-size + $close-icon-margin, 2));
+        padding: 0
+          calc(
+            var(--router-tab-padding, #{$router-tab-padding}) -
+              (#{$router-tab-close-icon-size} + #{$router-tab-close-icon-margin}) / 2
+          );
       }
 
       .router-tab__item-close {
-        width: $close-icon-size;
-        margin-left: $close-icon-margin;
+        width: $router-tab-close-icon-size;
+        margin-left: $router-tab-close-icon-margin;
 
         &::before,
         &::after {
-          background-color: #fff;
+          background-color: currentColor;
         }
       }
     }
 
-    &:hover {
-      .router-tab__item-title {
-        max-width: var(--router-tab-title-hover-max-width, 220px);
-      }
-    }
-
     &.is-active {
-      border-bottom-color: $bg;
-      // Use rgba with Vuetify primary color variable
-      background: rgba(var(--v-theme-primary, 99, 91, 255), 0.08);
-      box-shadow: inset 0 -2px 0 rgba(var(--v-theme-primary, 99, 91, 255), 0.5);
-      
-      // Fallback for browsers with color-mix support
-      @supports (background: color-mix(in srgb, red 50%, blue)) {
-        background: color-mix(in srgb, $primary 8%, $bg 92%);
-        box-shadow: inset 0 -2px 0 color-mix(in srgb, $primary 50%, transparent);
-      }
-
-      &::after {
-        content: '';
-        position: absolute;
-        left: 16px;
-        right: 16px;
-        bottom: 6px;
-        height: 2px;
-        border-radius: 999px;
-        background: $primary;
-        opacity: 0.7;
-        pointer-events: none;
-      }
-    }
-
-    &[data-title] {
-      &::after {
-        content: attr(data-title);
-        position: absolute;
-        left: 50%;
-        bottom: calc(100% + 8px);
-        display: inline-block;
-        max-width: 320px;
-        padding: 6px 12px;
-        border-radius: 6px;
-        background: $tooltip-bg;
-        color: $tooltip-fg;
-        font-size: 12px;
-        line-height: 1.4;
-        text-align: center;
-        white-space: normal;
-        word-break: break-word;
-        transform: translate(-50%, 4px);
-        box-shadow: $tooltip-shadow;
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-                    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-        z-index: 10;
-
-        @include reduced-motion {
-          transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-          transform: translate(-50%, 0);
-        }
-      }
-
-      &::before {
-        content: '';
-        position: absolute;
-        left: 50%;
-        bottom: calc(100% + 4px);
-        width: 8px;
-        height: 8px;
-        background: $tooltip-bg;
-        transform: translate(-50%, 6px) rotate(45deg);
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-                    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-        z-index: 9;
-
-        @include reduced-motion {
-          transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-          transform: translate(-50%, 0) rotate(45deg);
-        }
-      }
-
-      &:hover::after {
-        opacity: 1;
-        transform: translate(-50%, 0);
-      }
-
-      &:hover::before {
-        opacity: 1;
-        transform: translate(-50%, 0) rotate(45deg);
-      }
+      background-color: var(--router-tab-background);
+      color: var(--router-tab-active-border);
+      border-bottom: 2px solid var(--router-tab-active-border);
+      font-weight: 510;
     }
 
     &-close {
@@ -335,25 +215,14 @@ $close-icon-size: 13px;
       position: relative;
       display: block;
       width: 0;
-      height: $close-icon-size;
+      height: $router-tab-close-icon-size;
       margin-left: 0;
       overflow: hidden;
       border-radius: 50%;
       cursor: pointer;
-      transition: $tab-trans;
+      transition: var(--router-tab-transition, $router-tab-transition);
       background: transparent;
       border: none;
-      flex-shrink: 0;
-
-      @include reduced-motion {
-        transition: none;
-      }
-
-      // Keyboard focus
-      &:focus-visible {
-        outline: 2px solid $primary;
-        outline-offset: 2px;
-      }
 
       &::before,
       &::after {
@@ -365,12 +234,8 @@ $close-icon-size: 13px;
         height: 1px;
         margin-left: math.div(-$inner, 2);
         background-color: currentColor;
-        transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-        content: '';
-
-        @include reduced-motion {
-          transition: none;
-        }
+        transition: background-color 0.2s ease-in-out;
+        content: "";
       }
 
       &::before {
@@ -382,17 +247,11 @@ $close-icon-size: 13px;
       }
 
       &:hover {
-        // Use Vuetify primary color with rgba
-        background-color: rgba(var(--v-theme-primary, 99, 91, 255), 0.15);
-
-        // Fallback for browsers with color-mix support
-        @supports (background: color-mix(in srgb, red 50%, blue)) {
-          background-color: color-mix(in srgb, $primary 15%, transparent);
-        }
+        background-color: color-mix(in srgb, var(--router-tab-primary) 40%, transparent 60%);
 
         &::before,
         &::after {
-          background-color: $primary;
+          background-color: #fff;
         }
       }
     }
@@ -401,106 +260,88 @@ $close-icon-size: 13px;
   &__contextmenu {
     position: fixed;
     z-index: 1000;
-    min-width: 140px;
-    padding: 8px 0;
-    font-size: $font-size;
-    background: $bg;
-    border: 1px solid $border;
-    box-shadow: 0 5px 15px -3px rgba(var(--v-shadow-key-umbra-opacity, 0, 0, 0), 0.2),
-                0 8px 20px 1px rgba(var(--v-shadow-key-penumbra-opacity, 0, 0, 0), 0.14),
-                0 3px 24px 2px rgba(var(--v-shadow-key-ambient-opacity, 0, 0, 0), 0.12);
-    border-radius: 8px;
-
-    a,
-    button {
+    min-width: $router-tab-contextmenu-min-width;
+    padding: $router-tab-contextmenu-padding;
+    font-size: var(--router-tab-font-size, $router-tab-font-size);
+    background: var(--router-tab-background);
+    border: 1px solid var(--router-tab-border);
+    box-shadow: $router-tab-contextmenu-shadow;
+    border-radius: $router-tab-contextmenu-border-radius;
+
+    &-item {
       display: block;
       width: 100%;
-      padding: 0 16px;
-      line-height: 32px;
+      padding: $router-tab-contextmenu-item-padding;
+      line-height: $router-tab-contextmenu-item-height;
       text-align: left;
+      text-decoration: none;
       background: transparent;
       border: none;
       color: inherit;
       cursor: pointer;
       font: inherit;
-      transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-                  color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-
-      @include reduced-motion {
-        transition: none;
-      }
-
-      // Keyboard focus
-      &:focus-visible {
-        outline: 2px solid $primary;
-        outline-offset: -2px;
-      }
+      transition: background-color 0.2s ease-in-out;
+      border-radius: calc(#{$router-tab-contextmenu-border-radius} - 4px);
 
-      &[aria-disabled='true'] {
-        color: rgba(var(--v-theme-on-surface, 148, 163, 184), 0.4);
+      &[aria-disabled="true"] {
+        color: rgba(148, 163, 184, 0.6);
         pointer-events: none;
         cursor: not-allowed;
       }
 
-      &:hover:not([aria-disabled='true']),
-      &:focus-visible:not([aria-disabled='true']) {
-        background: rgba(var(--v-theme-primary, 99, 91, 255), 0.08);
-        color: $primary;
-
-        @supports (background: color-mix(in srgb, red 50%, blue)) {
-          background: color-mix(in srgb, $primary 8%, transparent);
-        }
+      &:hover:not([aria-disabled="true"]),
+      &:focus-visible {
+        background: color-mix(in srgb, var(--router-tab-primary) 10%, transparent 90%);
+        color: var(--router-tab-primary);
       }
     }
   }
-}
 
-.router-tab__container {
-  padding: 1rem;
-  position: relative;
-  flex: 1 1 auto;
-  background-color: transparent;
+  &__container {
+    position: relative;
+    flex: 1 1 auto;
+    background-color: var(--router-tab-background);
+    overflow: hidden;
+  }
+}
+.router-tab__item.is-active:after {
+  display: none !important;
 }
 
 .router-tab__item.is-active + .router-tab__item {
-  border-left-color: css-var(--router-tab-border, css-var(--v-border-color, css-var(--theme-border, $light-border)));
+  border-left-color: transparent;
 }
 
-// Container query support (progressive enhancement)
-@supports (container-type: inline-size) {
-  .router-tab {
-    container-type: inline-size;
-    container-name: router-tab;
-  }
-
-  @container router-tab (max-width: 600px) {
-    .router-tab__item {
-      padding: 0 12px;
+// Transition animations
+.router-tab-zoom-enter-active,
+.router-tab-zoom-leave-active {
+  transition: all 0.3s ease;
+}
 
-      &-title {
-        max-width: var(--router-tab-title-max-width, 80px);
-      }
+.router-tab-zoom-enter-from,
+.router-tab-zoom-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
 
-      &:hover .router-tab__item-title {
-        max-width: var(--router-tab-title-hover-max-width, 150px);
-      }
-    }
-  }
+.router-tab-swap-enter-active,
+.router-tab-swap-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
 }
 
-// High contrast mode support
-@media (prefers-contrast: high) {
-  .router-tab {
-    &__item {
-      border-width: 2px;
+.router-tab-swap-enter-from {
+  opacity: 0;
+  transform: translateX(10px);
+}
 
-      &.is-active {
-        border-bottom-width: 3px;
-      }
+.router-tab-swap-leave-to {
+  opacity: 0;
+  transform: translateX(-10px);
+}
 
-      &:focus-visible {
-        outline-width: 3px;
-      }
-    }
-  }
-}
+.router-tab-page {
+  width: 100%;
+  height: 100%;
+}

package/lib/scss/variables.scss

@@ -0,0 +1,47 @@
+// variables.scss
+
+// Tab colors (light + dark theme overrides in :root)
+$router-tab-bg-light: #ffffff !default;
+$router-tab-bg-dark: #1e293b !default;
+
+$router-tab-text-light: #0f172a !default;
+$router-tab-text-dark: #f1f5f9 !default;
+
+$router-tab-border-light: #e2e8f0 !default;
+$router-tab-border-dark: #334155 !default;
+
+$router-tab-primary: #3b82f6 !default; // default primary color
+
+// Sizes
+$router-tab-header-height: 42px !default;
+$router-tab-padding: 12px !default;
+$router-tab-font-size: 14px !default;
+
+// Title
+$router-tab-title-min-width: 60px !default;
+$router-tab-title-max-width: 180px !default;
+
+// Icons
+$router-tab-icon-size: 14px !default;
+$router-tab-icon-margin: 6px !default;
+
+// Close icon
+$router-tab-close-icon-size: 16px !default;
+$router-tab-close-icon-margin: 4px !default;
+
+// Context menu
+$router-tab-contextmenu-min-width: 160px !default;
+$router-tab-contextmenu-padding: 6px 0 !default;
+$router-tab-contextmenu-item-height: 32px !default;
+$router-tab-contextmenu-item-padding: 0 12px !default;
+$router-tab-contextmenu-border-radius: 8px !default;
+$router-tab-contextmenu-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !default;
+
+// Dragging
+$router-tab-drag-opacity: 0.6 !default;
+$router-tab-drag-cursor: grabbing !default;
+$router-tab-drag-over-bg: rgba(0, 0, 0, 0.05) !default;
+
+// Transitions
+$router-tab-transition-fast: all 0.2s ease !default;
+$router-tab-transition: all 0.3s ease !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-router-tab",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "type": "module",
   "files": [
     "dist",