@vuetify/nightly 3.9.0-beta.1-dev.2025-07-05 → 3.9.0-dev.2025-07-15

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.0-beta.1-dev.2025-07-05
+* Vuetify v3.9.0-dev.2025-07-15
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -469,6 +469,10 @@ function ensureValidVNode(vnodes) {
     return child.type !== Fragment || ensureValidVNode(child.children);
   }) ? vnodes : null;
 }
+function renderSlot(slot, props, fallback) {
+  // TODO: check if slot returns elements: #18308
+  return slot?.(props) ?? fallback?.(props);
+}
 function defer(timeout, cb) {
   if (!IN_BROWSER || timeout === 0) {
     cb();
@@ -1614,6 +1618,40 @@ function isPotentiallyScrollable(el) {
   return ['scroll', 'auto'].includes(style.overflowY);
 }
 
+// Types
+
+function getIndentLines(_ref) {
+  let {
+    depth,
+    isLast,
+    isLastGroup,
+    leafLinks,
+    separateRoots,
+    parentIndentLines,
+    variant
+  } = _ref;
+  if (!parentIndentLines || !depth) {
+    return {
+      leaf: undefined,
+      node: undefined,
+      children: parentIndentLines
+    };
+  }
+  if (variant === 'simple') {
+    return {
+      leaf: [...parentIndentLines, 'line'],
+      node: [...parentIndentLines, 'line'],
+      children: [...parentIndentLines, 'line']
+    };
+  }
+  const isLastLeaf = isLast && (!isLastGroup || separateRoots || depth > 1);
+  return {
+    leaf: [...parentIndentLines, isLastLeaf ? 'last-leaf' : 'leaf', ...(leafLinks ? ['leaf-link'] : [])],
+    node: [...parentIndentLines, isLastLeaf ? 'last-leaf' : 'leaf'],
+    children: [...parentIndentLines, isLastLeaf ? 'none' : 'line']
+  };
+}
+
 function isFixedPosition(el) {
   while (el) {
     if (window.getComputedStyle(el).position === 'fixed') {
@@ -9798,6 +9836,11 @@ const VListItem = genericComponent()({
     const isLink = toRef(() => props.link !== false && link.isLink.value);
     const isSelectable = computed(() => !!list && (root.selectable.value || root.activatable.value || props.value != null));
     const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || isSelectable.value));
+    const role = computed(() => list ? isSelectable.value ? 'option' : 'listitem' : undefined);
+    const ariaSelected = computed(() => {
+      if (!isSelectable.value) return undefined;
+      return root.activatable.value ? isActivated.value : root.selectable.value ? isSelected.value : isActive.value;
+    });
     const roundedProps = toRef(() => props.rounded || props.nav);
     const color = toRef(() => props.color ?? props.activeColor);
     const variantProps = toRef(() => ({
@@ -9901,7 +9944,8 @@ const VListItem = genericComponent()({
         }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value, props.class],
         "style": [colorStyles.value, dimensionStyles.value, props.style],
         "tabindex": isClickable.value ? list ? -2 : 0 : undefined,
-        "aria-selected": isSelectable.value ? root.activatable.value ? isActivated.value : root.selectable.value ? isSelected.value : isActive.value : undefined,
+        "aria-selected": ariaSelected.value,
+        "role": role.value,
         "onClick": onClick,
         "onKeydown": isClickable.value && !isLink.value && onKeyDown
       }, link.linkProps), {
@@ -10144,6 +10188,10 @@ const makeItemsProps = propsFactory({
     type: [Boolean, String, Array, Function],
     default: 'props'
   },
+  itemType: {
+    type: [Boolean, String, Array, Function],
+    default: 'type'
+  },
   returnObject: Boolean,
   valueComparator: Function
 }, 'list-items');
@@ -10151,6 +10199,7 @@ function transformItem$3(props, item) {
   const title = getPropertyFromItem(item, props.itemTitle, item);
   const value = getPropertyFromItem(item, props.itemValue, title);
   const children = getPropertyFromItem(item, props.itemChildren);
+  const type = getPropertyFromItem(item, props.itemType, 'item');
   const itemProps = props.itemProps === true ? typeof item === 'object' && item != null && !Array.isArray(item) ? 'children' in item ? omit(item, ['children']) : item : undefined : getPropertyFromItem(item, props.itemProps);
   const _props = {
     title,
@@ -10158,15 +10207,16 @@ function transformItem$3(props, item) {
     ...itemProps
   };
   return {
+    type,
     title: String(_props.title ?? ''),
     value: _props.value,
     props: _props,
-    children: Array.isArray(children) ? transformItems$3(props, children) : undefined,
+    children: type === 'item' && Array.isArray(children) ? transformItems$3(props, children) : undefined,
     raw: item
   };
 }
 function transformItems$3(props, items) {
-  const _props = pick(props, ['itemTitle', 'itemValue', 'itemChildren', 'itemProps', 'returnObject', 'valueComparator']);
+  const _props = pick(props, ['itemTitle', 'itemValue', 'itemChildren', 'itemProps', 'itemType', 'returnObject', 'valueComparator']);
   const array = [];
   for (const item of items) {
     array.push(transformItem$3(_props, item));
@@ -10208,7 +10258,7 @@ function useItems(props) {
     const _returnObject = props.returnObject;
     const hasValueComparator = !!props.valueComparator;
     const valueComparator = props.valueComparator || deepEqual;
-    const _props = pick(props, ['itemTitle', 'itemValue', 'itemChildren', 'itemProps', 'returnObject', 'valueComparator']);
+    const _props = pick(props, ['itemTitle', 'itemValue', 'itemChildren', 'itemProps', 'itemType', 'returnObject', 'valueComparator']);
     const returnValue = [];
     main: for (const v of value) {
       // When the model value is null, return an InternalItem
@@ -10328,10 +10378,6 @@ const makeVListProps = propsFactory({
   ...makeDensityProps(),
   ...makeDimensionProps(),
   ...makeElevationProps(),
-  itemType: {
-    type: String,
-    default: 'type'
-  },
   ...makeItemsProps(),
   ...makeRoundedProps(),
   ...makeTagProps(),
@@ -10391,6 +10437,7 @@ const VList = genericComponent()({
     const activeColor = toRef(() => props.activeColor);
     const baseColor = toRef(() => props.baseColor);
     const color = toRef(() => props.color);
+    const isSelectable = toRef(() => props.selectable || props.activatable);
     createList({
       filterable: props.filterable
     });
@@ -10460,7 +10507,7 @@ const VList = genericComponent()({
         }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, props.class]),
         "style": normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, props.style]),
         "tabindex": props.disabled ? -1 : 0,
-        "role": "listbox",
+        "role": isSelectable.value ? 'listbox' : 'list',
         "aria-activedescendant": undefined,
         "onFocusin": onFocusin,
         "onFocusout": onFocusout,
@@ -13525,6 +13572,7 @@ const VSelect = genericComponent()({
             "onKeydown": onListKeydown,
             "onFocusin": onFocusin,
             "tabindex": "-1",
+            "selectable": true,
             "aria-live": "polite",
             "aria-label": `${props.label}-list`,
             "color": props.itemColor ?? props.color
@@ -13550,7 +13598,7 @@ const VSelect = genericComponent()({
                   key: item.value,
                   onClick: () => select(item, null)
                 });
-                if (item.raw.type === 'divider') {
+                if (item.type === 'divider') {
                   return slots.divider?.({
                     props: item.raw,
                     index
@@ -13558,7 +13606,7 @@ const VSelect = genericComponent()({
                     "key": `divider-${index}`
                   }), null);
                 }
-                if (item.raw.type === 'subheader') {
+                if (item.type === 'subheader') {
                   return slots.subheader?.({
                     props: item.raw,
                     index
@@ -13726,7 +13774,7 @@ function filterItems(items, query, options) {
     let match = -1;
     if ((query || customFiltersLength > 0) && !options?.noFilter) {
       if (typeof item === 'object') {
-        if (['divider', 'subheader'].includes(item.raw?.type)) {
+        if (item.type === 'divider' || item.type === 'subheader') {
           continue;
         }
         const filterKeys = keys || Object.keys(transformed);
@@ -14144,6 +14192,7 @@ const VAutocomplete = genericComponent()({
             "onFocusin": onFocusin,
             "onFocusout": onFocusout,
             "tabindex": "-1",
+            "selectable": true,
             "aria-live": "polite",
             "color": props.itemColor ?? props.color
           }, listEvents, props.listProps), {
@@ -14168,7 +14217,7 @@ const VAutocomplete = genericComponent()({
                   active: highlightFirst.value && index === 0 ? true : undefined,
                   onClick: () => select(item, null)
                 });
-                if (item.raw.type === 'divider') {
+                if (item.type === 'divider') {
                   return slots.divider?.({
                     props: item.raw,
                     index
@@ -14176,7 +14225,7 @@ const VAutocomplete = genericComponent()({
                     "key": `divider-${index}`
                   }), null);
                 }
-                if (item.raw.type === 'subheader') {
+                if (item.type === 'subheader') {
                   return slots.subheader?.({
                     props: item.raw,
                     index
@@ -19231,6 +19280,7 @@ const VCombobox = genericComponent()({
             "selected": selectedValues.value,
             "selectStrategy": props.multiple ? 'independent' : 'single-independent',
             "onMousedown": e => e.preventDefault(),
+            "selectable": true,
             "onKeydown": onListKeydown,
             "onFocusin": onFocusin,
             "onFocusout": onFocusout,
@@ -19259,7 +19309,7 @@ const VCombobox = genericComponent()({
                   active: highlightFirst.value && index === 0 ? true : undefined,
                   onClick: () => select(item, null)
                 });
-                if (item.raw.type === 'divider') {
+                if (item.type === 'divider') {
                   return slots.divider?.({
                     props: item.raw,
                     index
@@ -19267,7 +19317,7 @@ const VCombobox = genericComponent()({
                     "key": `divider-${index}`
                   }), null);
                 }
-                if (item.raw.type === 'subheader') {
+                if (item.type === 'subheader') {
                   return slots.subheader?.({
                     props: item.raw,
                     index
@@ -23609,7 +23659,8 @@ const VDatePicker = genericComponent()({
     }
     function allowedMonths(month) {
       if (typeof props.allowedDates === 'function') {
-        const startOfMonth = adapter.parseISO(`${year.value}-${month + 1}-01`);
+        const monthTwoDigits = String(month + 1).padStart(2, '0');
+        const startOfMonth = adapter.parseISO(`${year.value}-${monthTwoDigits}-01`);
         return isAllowedInRange(startOfMonth, adapter.endOfMonth(startOfMonth));
       }
       if (Array.isArray(props.allowedDates) && props.allowedDates.length) {
@@ -30405,6 +30456,8 @@ const VTreeviewSymbol = Symbol.for('vuetify:v-treeview');
 
 const makeVTreeviewItemProps = propsFactory({
   loading: Boolean,
+  hideActions: Boolean,
+  indentLines: Array,
   toggleIcon: IconValue,
   ...makeVListItemProps({
     slim: true
@@ -30441,7 +30494,7 @@ const VTreeviewItem = genericComponent()({
     }
     useRender(() => {
       const listItemProps = VListItem.filterProps(props);
-      const hasPrepend = slots.prepend || props.toggleIcon;
+      const hasPrepend = slots.prepend || props.toggleIcon || props.indentLines;
       return createVNode(VListItem, mergeProps({
         "ref": vListItemRef
       }, listItemProps, {
@@ -30455,7 +30508,15 @@ const VTreeviewItem = genericComponent()({
       }), {
         ...slots,
         prepend: hasPrepend ? slotProps => {
-          return createElementVNode(Fragment, null, [createVNode(VListItemAction, {
+          return createElementVNode(Fragment, null, [props.indentLines && props.indentLines.length > 0 ? createElementVNode("div", {
+            "key": "indent-lines",
+            "class": "v-treeview-indent-lines",
+            "style": {
+              '--v-indent-parts': props.indentLines.length
+            }
+          }, [props.indentLines.map(type => createElementVNode("div", {
+            "class": normalizeClass(`v-treeview-indent-line v-treeview-indent-line--${type}`)
+          }, null))]) : '', !props.hideActions && createVNode(VListItemAction, {
             "start": true
           }, {
             default: () => [props.toggleIcon ? createVNode(VBtn, {
@@ -30507,10 +30568,15 @@ const makeVTreeviewChildrenProps = propsFactory({
   selectedColor: String,
   selectStrategy: [String, Function, Object],
   index: Number,
+  isLastGroup: Boolean,
+  separateRoots: Boolean,
+  parentIndentLines: Array,
+  indentLinesVariant: String,
   path: {
     type: Array,
     default: () => []
   },
+  ...pick(makeVTreeviewItemProps(), ['hideActions']),
   ...makeDensityProps()
 }, 'VTreeviewChildren');
 const VTreeviewChildren = genericComponent()({
@@ -30539,19 +30605,32 @@ const VTreeviewChildren = genericComponent()({
         select(isSelected);
       }
     }
-    return () => slots.default?.() ?? props.items?.map((item, index) => {
+    return () => slots.default?.() ?? props.items?.map((item, index, items) => {
       const {
         children,
         props: itemProps
       } = item;
       const loading = isLoading.has(item.value);
+      const nextItemHasChildren = !!items.at(index + 1)?.children;
+      const depth = props.path?.length ?? 0;
+      const isLast = items.length - 1 === index;
       const treeItemProps = {
         index,
-        depth: props.path?.length ?? 0,
+        depth,
         isFirst: index === 0,
-        isLast: props.items ? props.items.length - 1 === index : false,
-        path: [...props.path, index]
+        isLast,
+        path: [...props.path, index],
+        hideAction: props.hideActions
       };
+      const indentLines = getIndentLines({
+        depth,
+        isLast,
+        isLastGroup: props.isLastGroup,
+        leafLinks: !props.hideActions,
+        separateRoots: props.separateRoots,
+        parentIndentLines: props.parentIndentLines,
+        variant: props.indentLinesVariant
+      });
       const slotsWithItem = {
         prepend: slotProps => createElementVNode(Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && createElementVNode("div", null, [createVNode(VCheckboxBtn, {
           "key": item.value,
@@ -30617,21 +30696,40 @@ const VTreeviewChildren = genericComponent()({
           return createVNode(VTreeviewItem, mergeProps({
             "ref": el => activatorItems.value[index] = el
           }, listItemProps, {
+            "hideActions": props.hideActions,
+            "indentLines": indentLines.node,
             "value": props.returnObject ? item.raw : itemProps.value,
             "loading": loading
           }), slotsWithItem);
         },
         default: () => createVNode(VTreeviewChildren, mergeProps(treeviewChildrenProps, {
           "items": children,
+          "indentLinesVariant": props.indentLinesVariant,
+          "parentIndentLines": indentLines.children,
+          "isLastGroup": nextItemHasChildren,
           "returnObject": props.returnObject
         }), slots)
-      }) : slots.item?.({
+      }) : renderSlot(slots.item, {
         props: itemProps,
         item: item.raw,
         internalItem: item
-      }) ?? createVNode(VTreeviewItem, mergeProps(itemProps, {
-        "value": props.returnObject ? toRaw(item.raw) : itemProps.value
-      }), slotsWithItem);
+      }, () => {
+        if (item.type === 'divider') {
+          return renderSlot(slots.divider, {
+            props: item.raw
+          }, () => createVNode(VDivider, item.props, null));
+        }
+        if (item.type === 'subheader') {
+          return renderSlot(slots.subheader, {
+            props: item.raw
+          }, () => createVNode(VListSubheader, item.props, null));
+        }
+        return createVNode(VTreeviewItem, mergeProps(itemProps, {
+          "hideActions": props.hideActions,
+          "indentLines": indentLines.leaf,
+          "value": props.returnObject ? toRaw(item.raw) : itemProps.value
+        }), slotsWithItem);
+      });
     });
   }
 });
@@ -30647,16 +30745,17 @@ function flatten(items) {
 const makeVTreeviewProps = propsFactory({
   fluid: Boolean,
   openAll: Boolean,
+  indentLines: [Boolean, String],
   search: String,
   ...makeFilterProps({
     filterKeys: ['title']
   }),
-  ...omit(makeVTreeviewChildrenProps(), ['index', 'path']),
+  ...omit(makeVTreeviewChildrenProps(), ['index', 'path', 'indentLinesVariant', 'parentIndentLines', 'isLastGroup']),
   ...omit(makeVListProps({
     collapseIcon: '$treeviewCollapse',
     expandIcon: '$treeviewExpand',
     slim: true
-  }), ['itemType', 'nav', 'openStrategy']),
+  }), ['nav', 'openStrategy']),
   modelValue: Array
 }, 'VTreeview');
 const VTreeview = genericComponent()({
@@ -30753,6 +30852,7 @@ const VTreeview = genericComponent()({
     useRender(() => {
       const listProps = VList.filterProps(props);
       const treeviewChildrenProps = VTreeviewChildren.filterProps(props);
+      const indentLinesVariant = typeof props.indentLines === 'boolean' ? 'default' : props.indentLines;
       return createVNode(VList, mergeProps({
         "ref": vListRef
       }, listProps, {
@@ -30770,7 +30870,9 @@ const VTreeview = genericComponent()({
         default: () => [createVNode(VTreeviewChildren, mergeProps(treeviewChildrenProps, {
           "density": props.density,
           "returnObject": props.returnObject,
-          "items": items.value
+          "items": items.value,
+          "parentIndentLines": props.indentLines ? [] : undefined,
+          "indentLinesVariant": indentLinesVariant
         }), slots)]
       });
     });
@@ -31290,7 +31392,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.9.0-beta.1-dev.2025-07-05";
+const version$1 = "3.9.0-dev.2025-07-15";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -31315,7 +31417,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.9.0-beta.1-dev.2025-07-05";
+const version = "3.9.0-dev.2025-07-15";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useHotkey, useLayout, useLocale, useRtl, useTheme, version };