@vuetify/nightly 3.10.9-dev.2025-11-05 → 3.10.9-dev.2025-11-06

package/dist/vuetify.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.10.9-dev.2025-11-05
+* Vuetify v3.10.9-dev.2025-11-06
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -11003,7 +11003,11 @@
       default: 'auto'
     },
     offset: [Number, String, Array],
-    stickToTarget: Boolean
+    stickToTarget: Boolean,
+    viewportMargin: {
+      type: [Number, String],
+      default: 12
+    }
   }, 'VOverlay-location-strategies');
   function useLocationStrategies(props, data) {
     const contentStyles = vue.ref({});
@@ -11190,8 +11194,7 @@
 
       const contentBox = getIntrinsicSize(data.contentEl.value, data.isRtl.value);
       const scrollParents = getScrollParents(data.contentEl.value);
-      const viewportMargin = props.stickToTarget ? 0 : 12; // TOOD: prop.viewportMargin
-
+      const viewportMargin = Number(props.viewportMargin);
       if (!scrollParents.length) {
         scrollParents.push(document.documentElement);
         if (!(data.contentEl.value.style.top && data.contentEl.value.style.left)) {
@@ -11212,10 +11215,10 @@
         return scrollBox;
       }, undefined);
       if (props.stickToTarget) {
-        viewport.x += Math.min(0, targetBox.x);
-        viewport.y += Math.min(0, targetBox.y);
-        viewport.width = Math.max(viewport.width, targetBox.x + targetBox.width);
-        viewport.height = Math.max(viewport.height, targetBox.y + targetBox.height);
+        viewport.x += Math.min(viewportMargin, targetBox.x);
+        viewport.y += Math.min(viewportMargin, targetBox.y);
+        viewport.width = Math.max(viewport.width - viewportMargin * 2, targetBox.x + targetBox.width - viewportMargin);
+        viewport.height = Math.max(viewport.height - viewportMargin * 2, targetBox.y + targetBox.height - viewportMargin);
       } else {
         viewport.x += viewportMargin;
         viewport.y += viewportMargin;
@@ -15411,6 +15414,7 @@
     disabled: Boolean,
     title: String,
     ...makeComponentProps(),
+    ...pick(makeDimensionProps(), ['width', 'maxWidth']),
     ...makeRouterProps(),
     ...makeTagProps({
       tag: 'li'
@@ -15426,6 +15430,9 @@
       } = _ref;
       const link = useLink(props, attrs);
       const isActive = vue.computed(() => props.active || link.isActive?.value);
+      const {
+        dimensionStyles
+      } = useDimension(props);
       const {
         textColorClasses,
         textColorStyles
@@ -15437,7 +15444,7 @@
             'v-breadcrumbs-item--disabled': props.disabled,
             [`${props.activeClass}`]: isActive.value && props.activeClass
           }, textColorClasses.value, props.class]),
-          "style": vue.normalizeStyle([textColorStyles.value, props.style]),
+          "style": vue.normalizeStyle([textColorStyles.value, dimensionStyles.value, props.style]),
           "aria-current": isActive.value ? 'page' : undefined
         }, {
           default: () => [!link.isLink.value ? slots.default?.() ?? props.title : vue.createElementVNode("a", vue.mergeProps({
@@ -15467,6 +15474,7 @@
       type: Array,
       default: () => []
     },
+    itemProps: Boolean,
     ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeRoundedProps(),
@@ -15548,7 +15556,7 @@
               "disabled": index >= array.length - 1
             }, typeof item === 'string' ? {
               title: item
-            } : item), {
+            } : item, props.itemProps && isObject(raw) ? raw : {}), {
               default: slots.title ? () => slots.title?.({
                 item,
                 index
@@ -28601,7 +28609,7 @@
     ...makeThemeProps(),
     ...omit(makeVOverlayProps({
       transition: 'v-snackbar-transition'
-    }), ['persistent', 'noClickAnimation', 'scrim', 'scrollStrategy', 'stickToTarget'])
+    }), ['persistent', 'noClickAnimation', 'scrim', 'scrollStrategy', 'stickToTarget', 'viewportMargin'])
   }, 'VSnackbar');
   const VSnackbar = genericComponent()({
     name: 'VSnackbar',
@@ -30039,6 +30047,8 @@
   const makeVTabProps = propsFactory({
     fixed: Boolean,
     sliderColor: String,
+    sliderTransition: String,
+    sliderTransitionDuration: [String, Number],
     hideSlider: Boolean,
     direction: {
       type: String,
@@ -30065,6 +30075,38 @@
       const sliderEl = vue.ref();
       const isHorizontal = vue.computed(() => props.direction === 'horizontal');
       const isSelected = vue.computed(() => rootEl.value?.group?.isSelected.value ?? false);
+      function fade(nextEl, prevEl) {
+        return {
+          opacity: [0, 1]
+        };
+      }
+      function grow(nextEl, prevEl) {
+        return props.direction === 'vertical' ? {
+          transform: ['scaleY(0)', 'scaleY(1)']
+        } : {
+          transform: ['scaleX(0)', 'scaleX(1)']
+        };
+      }
+      function shift(nextEl, prevEl) {
+        const prevBox = prevEl.getBoundingClientRect();
+        const nextBox = nextEl.getBoundingClientRect();
+        const xy = isHorizontal.value ? 'x' : 'y';
+        const XY = isHorizontal.value ? 'X' : 'Y';
+        const rightBottom = isHorizontal.value ? 'right' : 'bottom';
+        const widthHeight = isHorizontal.value ? 'width' : 'height';
+        const prevPos = prevBox[xy];
+        const nextPos = nextBox[xy];
+        const delta = prevPos > nextPos ? prevBox[rightBottom] - nextBox[rightBottom] : prevBox[xy] - nextBox[xy];
+        const origin = Math.sign(delta) > 0 ? isHorizontal.value ? 'right' : 'bottom' : Math.sign(delta) < 0 ? isHorizontal.value ? 'left' : 'top' : 'center';
+        const size = Math.abs(delta) + (Math.sign(delta) < 0 ? prevBox[widthHeight] : nextBox[widthHeight]);
+        const scale = size / Math.max(prevBox[widthHeight], nextBox[widthHeight]) || 0;
+        const initialScale = prevBox[widthHeight] / nextBox[widthHeight] || 0;
+        const sigma = 1.5;
+        return {
+          transform: [`translate${XY}(${delta}px) scale${XY}(${initialScale})`, `translate${XY}(${delta / sigma}px) scale${XY}(${(scale - 1) / sigma + 1})`, 'none'],
+          transformOrigin: Array(3).fill(origin)
+        };
+      }
       function updateSlider(_ref2) {
         let {
           value
@@ -30074,26 +30116,21 @@
           const nextEl = sliderEl.value;
           if (!prevEl || !nextEl) return;
           const color = getComputedStyle(prevEl).color;
-          const prevBox = prevEl.getBoundingClientRect();
-          const nextBox = nextEl.getBoundingClientRect();
-          const xy = isHorizontal.value ? 'x' : 'y';
-          const XY = isHorizontal.value ? 'X' : 'Y';
-          const rightBottom = isHorizontal.value ? 'right' : 'bottom';
-          const widthHeight = isHorizontal.value ? 'width' : 'height';
-          const prevPos = prevBox[xy];
-          const nextPos = nextBox[xy];
-          const delta = prevPos > nextPos ? prevBox[rightBottom] - nextBox[rightBottom] : prevBox[xy] - nextBox[xy];
-          const origin = Math.sign(delta) > 0 ? isHorizontal.value ? 'right' : 'bottom' : Math.sign(delta) < 0 ? isHorizontal.value ? 'left' : 'top' : 'center';
-          const size = Math.abs(delta) + (Math.sign(delta) < 0 ? prevBox[widthHeight] : nextBox[widthHeight]);
-          const scale = size / Math.max(prevBox[widthHeight], nextBox[widthHeight]) || 0;
-          const initialScale = prevBox[widthHeight] / nextBox[widthHeight] || 0;
-          const sigma = 1.5;
+          const keyframes = {
+            fade,
+            grow,
+            shift
+          }[props.sliderTransition ?? 'shift'] ?? shift;
+          const duration = Number(props.sliderTransitionDuration) || ({
+            fade: 400,
+            grow: 350,
+            shift: 225
+          }[props.sliderTransition ?? 'shift'] ?? 225);
           animate(nextEl, {
             backgroundColor: [color, 'currentcolor'],
-            transform: [`translate${XY}(${delta}px) scale${XY}(${initialScale})`, `translate${XY}(${delta / sigma}px) scale${XY}(${(scale - 1) / sigma + 1})`, 'none'],
-            transformOrigin: Array(3).fill(origin)
+            ...keyframes(nextEl, prevEl)
           }, {
-            duration: 225,
+            duration,
             easing: standardEasing
           });
         }
@@ -30227,7 +30264,7 @@
     },
     hideSlider: Boolean,
     sliderColor: String,
-    ...pick(makeVTabProps(), ['spaced']),
+    ...pick(makeVTabProps(), ['spaced', 'sliderTransition', 'sliderTransitionDuration']),
     ...makeVSlideGroupProps({
       mandatory: 'force',
       selectedClass: 'v-tab-item--selected'
@@ -30260,12 +30297,14 @@
       } = useScopeId();
       provideDefaults({
         VTab: {
-          color: vue.toRef(() => props.color),
-          direction: vue.toRef(() => props.direction),
-          stacked: vue.toRef(() => props.stacked),
-          fixed: vue.toRef(() => props.fixedTabs),
-          sliderColor: vue.toRef(() => props.sliderColor),
-          hideSlider: vue.toRef(() => props.hideSlider)
+          color: vue.toRef(props, 'color'),
+          direction: vue.toRef(props, 'direction'),
+          stacked: vue.toRef(props, 'stacked'),
+          fixed: vue.toRef(props, 'fixedTabs'),
+          sliderColor: vue.toRef(props, 'sliderColor'),
+          sliderTransition: vue.toRef(props, 'sliderTransition'),
+          sliderTransitionDuration: vue.toRef(props, 'sliderTransitionDuration'),
+          hideSlider: vue.toRef(props, 'hideSlider')
         }
       });
       useRender(() => {
@@ -32718,7 +32757,7 @@
       };
     });
   }
-  const version$1 = "3.10.9-dev.2025-11-05";
+  const version$1 = "3.10.9-dev.2025-11-06";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -32743,7 +32782,7 @@
       ...options
     });
   };
-  const version = "3.10.9-dev.2025-11-05";
+  const version = "3.10.9-dev.2025-11-06";
   createVuetify.version = version;
 
   exports.blueprints = index;