vue3-router-tab 1.1.7 → 1.1.8

package/lib/scss/index.scss

@@ -1,19 +1,14 @@
 @use "sass:math";
 @use "sass:string";
 
-// Fallback palette (overridden by Vuetify CSS vars)
+// Fallback palette (overridden by CSS vars when present)
 $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);
+$tab-trans: all 0.3s ease-in-out;
 $hd-height: 40px;
 $tab-padding: 20px;
 $close-icon-margin: 4px;
@@ -24,30 +19,15 @@ $close-icon-size: 13px;
     @return string.unquote("var(#{$name}, #{$fallback})");
 }
 
-/// Mixin for reduced motion preferences
-@mixin reduced-motion {
-  @media (prefers-reduced-motion: reduce) {
-    @content;
-  }
-}
-
-/// Mixin for dark theme styles - works with data-theme="dark"
-@mixin dark-theme {
-  :root[data-theme="dark"] & {
-    @content;
-  }
-}
-
 .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)));
+  $bg: css-var(--router-tab-background, css-var(--theme-background, $light-bg));
+  $fg: css-var(--router-tab-foreground, css-var(--theme-foreground, $light-text));
+  $border: css-var(--router-tab-border, css-var(--theme-border, $light-border));
+  $primary: css-var(--router-tab-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));
+  $tooltip-bg: css-var(--router-tab-tooltip-background, rgba(15, 23, 42, 0.88));
+  $tooltip-fg: css-var(--router-tab-tooltip-foreground, #ffffff);
+  $tooltip-shadow: css-var(--router-tab-tooltip-shadow, 0 8px 24px rgba(15, 23, 42, 0.18));
 
   display: flex;
   flex-direction: column;
@@ -55,11 +35,6 @@ $close-icon-size: 13px;
   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);
-  }
-
   &__header {
     position: relative;
     z-index: 9;
@@ -69,12 +44,7 @@ $close-icon-size: 13px;
     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;
-    }
+    transition: all 0.2s ease-in-out;
   }
 
   &__scroll {
@@ -91,7 +61,6 @@ $close-icon-size: 13px;
       &.is-mobile {
         overflow-x: auto;
         overflow-y: hidden;
-        -webkit-overflow-scrolling: touch;
       }
     }
   }
@@ -104,14 +73,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 +88,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);
       }
     }
   }
@@ -164,28 +125,17 @@ $close-icon-size: 13px;
     user-select: none;
     background-color: transparent;
 
-    @include reduced-motion {
-      transition: none;
-    }
-
     &:first-child {
       border-left: 1px solid $border;
     }
 
-    // Keyboard focus styles using Vuetify primary color
-    &:focus-visible {
-      outline: 2px solid $primary;
-      outline-offset: -2px;
-      z-index: 1;
-    }
-
     &.is-contextmenu {
       color: $primary;
     }
 
     &.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: rgba(0, 0, 0, 0.05);
+      transition: background 0.15s ease;
     }
 
     &-title {
@@ -202,17 +152,11 @@ $close-icon-size: 13px;
       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;
     }
 
     &:hover,
@@ -242,15 +186,9 @@ $close-icon-size: 13px;
 
     &.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);
-      }
+      background: color-mix(in srgb, $primary 12%, $bg 88%);
+      box-shadow: inset 0 -2px 0 color-mix(in srgb, $primary 65%, transparent);
+      color: color-mix(in srgb, $primary 80%, $fg 20%);
 
       &::after {
         content: '';
@@ -261,7 +199,7 @@ $close-icon-size: 13px;
         height: 2px;
         border-radius: 999px;
         background: $primary;
-        opacity: 0.7;
+        opacity: 0.6;
         pointer-events: none;
       }
     }
@@ -274,12 +212,12 @@ $close-icon-size: 13px;
         bottom: calc(100% + 8px);
         display: inline-block;
         max-width: 320px;
-        padding: 6px 12px;
+        padding: 4px 10px;
         border-radius: 6px;
         background: $tooltip-bg;
         color: $tooltip-fg;
         font-size: 12px;
-        line-height: 1.4;
+        line-height: 1.3;
         text-align: center;
         white-space: normal;
         word-break: break-word;
@@ -287,14 +225,7 @@ $close-icon-size: 13px;
         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);
-        }
+        transition: opacity 0.2s ease, transform 0.2s ease;
       }
 
       &::before {
@@ -308,14 +239,7 @@ $close-icon-size: 13px;
         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);
-        }
+        transition: opacity 0.2s ease, transform 0.2s ease;
       }
 
       &:hover::after {
@@ -343,17 +267,6 @@ $close-icon-size: 13px;
       transition: $tab-trans;
       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 +278,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);
+        transition: background-color 0.2s ease-in-out;
         content: '';
-
-        @include reduced-motion {
-          transition: none;
-        }
       }
 
       &::before {
@@ -382,17 +291,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, $primary 40%, #ffffff 60%);
 
         &::before,
         &::after {
-          background-color: $primary;
+          background-color: #fff;
         }
       }
     }
@@ -406,9 +309,7 @@ $close-icon-size: 13px;
     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);
+    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
     border-radius: 8px;
 
     a,
@@ -416,40 +317,24 @@ $close-icon-size: 13px;
       display: block;
       width: 100%;
       padding: 0 16px;
-      line-height: 32px;
+      line-height: 30px;
       text-align: left;
       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;
 
       &[aria-disabled='true'] {
-        color: rgba(var(--v-theme-on-surface, 148, 163, 184), 0.4);
+        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);
+      &:hover,
+      &:focus-visible {
+        background: color-mix(in srgb, $primary 20%, #ffffff 80%);
         color: $primary;
-
-        @supports (background: color-mix(in srgb, red 50%, blue)) {
-          background: color-mix(in srgb, $primary 8%, transparent);
-        }
       }
     }
   }
@@ -463,44 +348,5 @@ $close-icon-size: 13px;
 }
 
 .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: css-var(--router-tab-border, css-var(--theme-border, $light-border));
 }
-
-// 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;
-
-      &-title {
-        max-width: var(--router-tab-title-max-width, 80px);
-      }
-
-      &:hover .router-tab__item-title {
-        max-width: var(--router-tab-title-hover-max-width, 150px);
-      }
-    }
-  }
-}
-
-// High contrast mode support
-@media (prefers-contrast: high) {
-  .router-tab {
-    &__item {
-      border-width: 2px;
-
-      &.is-active {
-        border-bottom-width: 3px;
-      }
-
-      &:focus-visible {
-        outline-width: 3px;
-      }
-    }
-  }
-}

package/package.json

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