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

package/dist/vuetify.esm.js

@@ -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.
 */
@@ -10999,7 +10999,11 @@ const makeLocationStrategyProps = propsFactory({
     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 = ref({});
@@ -11186,8 +11190,7 @@ function connectedLocationStrategy(data, props, contentStyles) {
 
     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)) {
@@ -11208,10 +11211,10 @@ function connectedLocationStrategy(data, props, contentStyles) {
       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;
@@ -15407,6 +15410,7 @@ const makeVBreadcrumbsItemProps = propsFactory({
   disabled: Boolean,
   title: String,
   ...makeComponentProps(),
+  ...pick(makeDimensionProps(), ['width', 'maxWidth']),
   ...makeRouterProps(),
   ...makeTagProps({
     tag: 'li'
@@ -15422,6 +15426,9 @@ const VBreadcrumbsItem = genericComponent()({
     } = _ref;
     const link = useLink(props, attrs);
     const isActive = computed(() => props.active || link.isActive?.value);
+    const {
+      dimensionStyles
+    } = useDimension(props);
     const {
       textColorClasses,
       textColorStyles
@@ -15433,7 +15440,7 @@ const VBreadcrumbsItem = genericComponent()({
           'v-breadcrumbs-item--disabled': props.disabled,
           [`${props.activeClass}`]: isActive.value && props.activeClass
         }, textColorClasses.value, props.class]),
-        "style": normalizeStyle([textColorStyles.value, props.style]),
+        "style": normalizeStyle([textColorStyles.value, dimensionStyles.value, props.style]),
         "aria-current": isActive.value ? 'page' : undefined
       }, {
         default: () => [!link.isLink.value ? slots.default?.() ?? props.title : createElementVNode("a", mergeProps({
@@ -15463,6 +15470,7 @@ const makeVBreadcrumbsProps = propsFactory({
     type: Array,
     default: () => []
   },
+  itemProps: Boolean,
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeRoundedProps(),
@@ -15544,7 +15552,7 @@ const VBreadcrumbs = genericComponent()({
             "disabled": index >= array.length - 1
           }, typeof item === 'string' ? {
             title: item
-          } : item), {
+          } : item, props.itemProps && isObject(raw) ? raw : {}), {
             default: slots.title ? () => slots.title?.({
               item,
               index
@@ -28597,7 +28605,7 @@ const makeVSnackbarProps = propsFactory({
   ...makeThemeProps(),
   ...omit(makeVOverlayProps({
     transition: 'v-snackbar-transition'
-  }), ['persistent', 'noClickAnimation', 'scrim', 'scrollStrategy', 'stickToTarget'])
+  }), ['persistent', 'noClickAnimation', 'scrim', 'scrollStrategy', 'stickToTarget', 'viewportMargin'])
 }, 'VSnackbar');
 const VSnackbar = genericComponent()({
   name: 'VSnackbar',
@@ -30035,6 +30043,8 @@ const VTabsSymbol = Symbol.for('vuetify:v-tabs');
 const makeVTabProps = propsFactory({
   fixed: Boolean,
   sliderColor: String,
+  sliderTransition: String,
+  sliderTransitionDuration: [String, Number],
   hideSlider: Boolean,
   direction: {
     type: String,
@@ -30061,6 +30071,38 @@ const VTab = genericComponent()({
     const sliderEl = ref();
     const isHorizontal = computed(() => props.direction === 'horizontal');
     const isSelected = 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
@@ -30070,26 +30112,21 @@ const VTab = genericComponent()({
         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
         });
       }
@@ -30223,7 +30260,7 @@ const makeVTabsProps = propsFactory({
   },
   hideSlider: Boolean,
   sliderColor: String,
-  ...pick(makeVTabProps(), ['spaced']),
+  ...pick(makeVTabProps(), ['spaced', 'sliderTransition', 'sliderTransitionDuration']),
   ...makeVSlideGroupProps({
     mandatory: 'force',
     selectedClass: 'v-tab-item--selected'
@@ -30256,12 +30293,14 @@ const VTabs = genericComponent()({
     } = useScopeId();
     provideDefaults({
       VTab: {
-        color: toRef(() => props.color),
-        direction: toRef(() => props.direction),
-        stacked: toRef(() => props.stacked),
-        fixed: toRef(() => props.fixedTabs),
-        sliderColor: toRef(() => props.sliderColor),
-        hideSlider: toRef(() => props.hideSlider)
+        color: toRef(props, 'color'),
+        direction: toRef(props, 'direction'),
+        stacked: toRef(props, 'stacked'),
+        fixed: toRef(props, 'fixedTabs'),
+        sliderColor: toRef(props, 'sliderColor'),
+        sliderTransition: toRef(props, 'sliderTransition'),
+        sliderTransitionDuration: toRef(props, 'sliderTransitionDuration'),
+        hideSlider: toRef(props, 'hideSlider')
       }
     });
     useRender(() => {
@@ -32714,7 +32753,7 @@ function createVuetify$1() {
     };
   });
 }
-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
@@ -32739,7 +32778,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.10.9-dev.2025-11-05";
+const version = "3.10.9-dev.2025-11-06";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useHotkey, useLayout, useLocale, useMask, useRtl, useTheme, version };