vue3-router-tab 1.1.6 → 1.1.8

package/lib/scss/index.scss

@@ -7,11 +7,6 @@ $light-bg: #ffffff;
 $light-text: #1e293b;
 $light-border: rgba(15, 23, 42, 0.08);
 
-// Dark mode fallbacks
-$dark-bg: #0f172a;
-$dark-text: #e2e8f0;
-$dark-border: rgba(226, 232, 240, 0.12);
-
 $font-size: 14px;
 $tab-trans: all 0.3s ease-in-out;
 $hd-height: 40px;
@@ -24,20 +19,6 @@ $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 {
   $bg: css-var(--router-tab-background, css-var(--theme-background, $light-bg));
   $fg: css-var(--router-tab-foreground, css-var(--theme-foreground, $light-text));
@@ -54,16 +35,6 @@ $close-icon-size: 13px;
   background-color: transparent;
   color: inherit;
 
-  // Dark theme default values
-  @include dark-theme {
-    --router-tab-background: #{$dark-bg};
-    --router-tab-foreground: #{$dark-text};
-    --router-tab-border: #{$dark-border};
-    --router-tab-tooltip-background: rgba(226, 232, 240, 0.95);
-    --router-tab-tooltip-foreground: #{$dark-bg};
-    --router-tab-tooltip-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-  }
-
   &__header {
     position: relative;
     z-index: 9;
@@ -72,12 +43,8 @@ $close-icon-size: 13px;
     box-sizing: border-box;
     height: $hd-height;
     border-bottom: 1px solid $border;
-    background-color: transparent;
+    background-color: $header-bg;
     transition: all 0.2s ease-in-out;
-
-    @include reduced-motion {
-      transition: none;
-    }
   }
 
   &__scroll {
@@ -94,7 +61,6 @@ $close-icon-size: 13px;
       &.is-mobile {
         overflow-x: auto;
         overflow-y: hidden;
-        -webkit-overflow-scrolling: touch;
       }
     }
   }
@@ -112,10 +78,6 @@ $close-icon-size: 13px;
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
 
-    @include reduced-motion {
-      transition: none;
-    }
-
     .router-tab__scroll:hover &,
     &.is-dragging {
       opacity: 1;
@@ -130,29 +92,11 @@ $close-icon-size: 13px;
       border-radius: $h;
       transition: background-color 0.3s ease-in-out;
 
-      @include reduced-motion {
-        transition: none;
-      }
-
       &:hover,
       .router-tab__scrollbar.is-dragging & {
         background-color: rgba(0, 0, 0, 0.2);
       }
     }
-
-    // Dark theme scrollbar
-    @include dark-theme {
-      background-color: rgba(255, 255, 255, 0.15);
-
-      .router-tab__scrollbar-thumb {
-        background-color: rgba(255, 255, 255, 0.2);
-
-        &:hover,
-        &.is-dragging {
-          background-color: rgba(255, 255, 255, 0.35);
-        }
-      }
-    }
   }
 
   &__nav {
@@ -181,21 +125,10 @@ $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
-    &:focus-visible {
-      outline: 2px solid $primary;
-      outline-offset: -2px;
-      z-index: 1;
-    }
-
     &.is-contextmenu {
       color: $primary;
     }
@@ -203,10 +136,6 @@ $close-icon-size: 13px;
     &.is-drag-over {
       background: rgba(0, 0, 0, 0.05);
       transition: background 0.15s ease;
-
-      @include dark-theme {
-        background: rgba(255, 255, 255, 0.08);
-      }
     }
 
     &-title {
@@ -223,17 +152,11 @@ $close-icon-size: 13px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      transition: max-width 0.3s ease-in-out;
-
-      @include reduced-motion {
-        transition: none;
-      }
     }
 
     &-icon {
       margin-right: 5px;
       font-size: 16px;
-      flex-shrink: 0;
     }
 
     &:hover,
@@ -263,10 +186,7 @@ $close-icon-size: 13px;
 
     &.is-active {
       border-bottom-color: $bg;
-      // Fallback for browsers without color-mix support
-      background: rgba(99, 91, 255, 0.12);
       background: color-mix(in srgb, $primary 12%, $bg 88%);
-      box-shadow: inset 0 -2px 0 rgba(99, 91, 255, 0.65);
       box-shadow: inset 0 -2px 0 color-mix(in srgb, $primary 65%, transparent);
       color: color-mix(in srgb, $primary 80%, $fg 20%);
 
@@ -306,12 +226,6 @@ $close-icon-size: 13px;
         opacity: 0;
         pointer-events: none;
         transition: opacity 0.2s ease, transform 0.2s ease;
-        z-index: 10;
-
-        @include reduced-motion {
-          transition: opacity 0.2s ease;
-          transform: translate(-50%, 0);
-        }
       }
 
       &::before {
@@ -326,12 +240,6 @@ $close-icon-size: 13px;
         opacity: 0;
         pointer-events: none;
         transition: opacity 0.2s ease, transform 0.2s ease;
-        z-index: 9;
-
-        @include reduced-motion {
-          transition: opacity 0.2s ease;
-          transform: translate(-50%, 0) rotate(45deg);
-        }
       }
 
       &:hover::after {
@@ -359,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 {
@@ -383,10 +280,6 @@ $close-icon-size: 13px;
         background-color: currentColor;
         transition: background-color 0.2s ease-in-out;
         content: '';
-
-        @include reduced-motion {
-          transition: none;
-        }
       }
 
       &::before {
@@ -398,8 +291,6 @@ $close-icon-size: 13px;
       }
 
       &:hover {
-        // Fallback for browsers without color-mix
-        background-color: rgba(99, 91, 255, 0.4);
         background-color: color-mix(in srgb, $primary 40%, #ffffff 60%);
 
         &::before,
@@ -407,14 +298,6 @@ $close-icon-size: 13px;
           background-color: #fff;
         }
       }
-
-      // Dark theme close button
-      @include dark-theme {
-        &:hover {
-          background-color: rgba(99, 91, 255, 0.6);
-          background-color: color-mix(in srgb, $primary 60%, transparent 40%);
-        }
-      }
     }
   }
 
@@ -429,11 +312,6 @@ $close-icon-size: 13px;
     box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
     border-radius: 8px;
 
-    // Dark theme context menu
-    @include dark-theme {
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-    }
-
     a,
     button {
       display: block;
@@ -448,36 +326,15 @@ $close-icon-size: 13px;
       font: inherit;
       transition: background-color 0.2s ease-in-out;
 
-      @include reduced-motion {
-        transition: none;
-      }
-
-      // Keyboard focus
-      &:focus-visible {
-        outline: 2px solid $primary;
-        outline-offset: -2px;
-      }
-
       &[aria-disabled='true'] {
         color: rgba(148, 163, 184, 0.6);
         pointer-events: none;
-        cursor: not-allowed;
-
-        @include dark-theme {
-          color: rgba(226, 232, 240, 0.3);
-        }
       }
 
-      &:hover:not([aria-disabled='true']),
-      &:focus-visible:not([aria-disabled='true']) {
-        // Fallback for browsers without color-mix
-        background: rgba(99, 91, 255, 0.2);
+      &:hover,
+      &:focus-visible {
         background: color-mix(in srgb, $primary 20%, #ffffff 80%);
         color: $primary;
-
-        @include dark-theme {
-          background: color-mix(in srgb, $primary 25%, transparent 75%);
-        }
       }
     }
   }
@@ -493,42 +350,3 @@ $close-icon-size: 13px;
 .router-tab__item.is-active + .router-tab__item {
   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.6",
+  "version": "1.1.8",
   "type": "module",
   "files": [
     "dist",