@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.10

package/lib/components/VList/VListItem.css

@@ -1,11 +1,13 @@
 .v-list-item {
   align-items: center;
-  display: flex;
-  padding: 8px 16px;
-  position: relative;
+  display: grid;
+  flex: none;
+  grid-template-areas: "prepend content append";
+  grid-template-columns: max-content auto max-content;
   outline: none;
+  padding: 4px 16px;
+  position: relative;
   text-decoration: none;
-  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   border-style: solid;
   border-width: 0;
@@ -15,25 +17,27 @@
   border-width: thin;
   box-shadow: none;
 }
-.v-list-item:hover .v-list-item__overlay {
+.v-list-item:hover > .v-list-item__overlay {
   opacity: calc(0.04 * var(--v-theme-overlay-multiplier));
 }
-.v-list-item:focus-visible .v-list-item__overlay {
+.v-list-item:focus-visible > .v-list-item__overlay {
   opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
 }
 @supports not selector(:focus-visible) {
-  .v-list-item:focus .v-list-item__overlay {
+  .v-list-item:focus > .v-list-item__overlay {
     opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
   }
 }
-.v-list-item--active:hover.v-list-item__overlay,
-.v-list-item--active .v-list-item__overlay {
+.v-list-item--active > .v-list-item__overlay, .v-list-item[aria-haspopup=menu][aria-expanded=true] > .v-list-item__overlay {
   opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
 }
-.v-list-item--active:focus .v-list-item__overlay {
+.v-list-item--active:hover > .v-list-item__overlay, .v-list-item[aria-haspopup=menu][aria-expanded=true]:hover > .v-list-item__overlay {
+  opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
+}
+.v-list-item--active:focus > .v-list-item__overlay, .v-list-item[aria-haspopup=menu][aria-expanded=true]:focus > .v-list-item__overlay {
   opacity: calc(0.16 * var(--v-theme-overlay-multiplier));
 }
-.v-list-item--variant-plain, .v-list-item--variant-outlined, .v-list-item--variant-text, .v-list-item--variant-contained-text {
+.v-list-item--variant-plain, .v-list-item--variant-outlined, .v-list-item--variant-text, .v-list-item--variant-tonal {
   background: transparent;
   color: inherit;
 }
@@ -46,12 +50,15 @@
 .v-list-item--variant-plain .v-list-item__overlay {
   display: none;
 }
-.v-list-item--variant-contained, .v-list-item--variant-contained-flat {
+.v-list-item--variant-elevated, .v-list-item--variant-flat {
   background: rgba(var(--v-theme-surface));
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 }
-.v-list-item--variant-contained-flat {
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+.v-list-item--variant-elevated {
+  box-shadow: 0px 2px 1px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 1px 1px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 3px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-list-item--variant-flat {
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
 }
 .v-list-item--variant-outlined {
   border: thin solid currentColor;
@@ -59,7 +66,7 @@
 .v-list-item--variant-text .v-list-item__overlay {
   background: currentColor;
 }
-.v-list-item--variant-contained-text .v-list-item__underlay {
+.v-list-item--variant-tonal .v-list-item__underlay {
   background: currentColor;
   opacity: var(--v-activated-opacity);
   border-radius: inherit;
@@ -69,7 +76,13 @@
   bottom: 0;
   left: 0;
   pointer-events: none;
-  transition: opacity 0.2s ease-in-out;
+}
+.v-list-item__prepend > .v-icon, .v-list-item__append > .v-icon {
+  opacity: var(--v-medium-emphasis-opacity);
+}
+.v-list-item--active .v-list-item__prepend > .v-icon,
+.v-list-item--active .v-list-item__append > .v-icon {
+  opacity: 1;
 }
 .v-list-item--rounded {
   border-radius: 4px;
@@ -83,38 +96,58 @@
   cursor: pointer;
 }
 
-.v-list-item-avatar {
+.v-list-item__prepend {
+  align-items: center;
   align-self: center;
-  transition: inherit;
-  transition-property: height, width;
-}
-.v-list-item-avatar > .v-icon {
-  opacity: var(--v-medium-emphasis-opacity);
+  display: flex;
+  grid-area: prepend;
 }
-.v-list-item-avatar--start {
+.v-list-item__prepend > .v-avatar {
   margin-inline-end: 16px;
 }
-.v-list-item-avatar--end {
-  margin-inline-start: 16px;
+.v-list-item__prepend > .v-icon {
+  margin-inline-end: 32px;
 }
-.v-list--density-default.v-list--three-line .v-list-item-avatar {
-  margin-top: 4px;
+.v-list-item--two-line .v-list-item__prepend, .v-list-item--three-line .v-list-item__prepend {
+  align-self: start;
 }
 
-.v-list--density-comfortable.v-list--three-line .v-list-item-avatar {
-  margin-top: 8px;
+.v-list-item__append {
+  align-self: center;
+  display: flex;
+  align-items: center;
+  grid-area: append;
+}
+.v-list-item__append > .v-avatar {
+  margin-inline-start: 16px;
+}
+.v-list-item__append > .v-icon {
+  margin-inline-start: 32px;
+}
+.v-list-item--two-line .v-list-item__append, .v-list-item--three-line .v-list-item__append {
+  align-self: start;
 }
 
-.v-list--density-compact.v-list--three-line .v-list-item-avatar {
-  margin-top: 12px;
+.v-list-item__content {
+  align-self: center;
+  grid-area: content;
+  overflow: hidden;
 }
 
-.v-list--two-line .v-list-item-avatar {
-  margin-top: 4px;
-  margin-bottom: 4px;
+.v-list-item-action {
+  align-self: center;
+  display: flex;
+  align-items: center;
+  grid-area: prepend;
+  flex: none;
+  transition: inherit;
+  transition-property: height, width;
+}
+.v-list-item-action--start {
+  margin-inline-end: 12px;
 }
-.v-list--three-line .v-list-item-avatar {
-  align-self: flex-start;
+.v-list-item-action--end {
+  margin-inline-start: 12px;
 }
 
 .v-list-item-media {
@@ -127,20 +160,15 @@
 .v-list-item-media--end {
   margin-inline-start: 16px;
 }
-.v-list--two-line .v-list-item-media {
+.v-list-item--two-line .v-list-item-media {
   margin-top: -4px;
   margin-bottom: -4px;
 }
-.v-list--three-line .v-list-item-media {
+.v-list-item--three-line .v-list-item-media {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.v-list-item-header {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
 .v-list-item-subtitle {
   -webkit-box-orient: vertical;
   display: -webkit-box;
@@ -154,13 +182,16 @@
   line-height: 1rem;
   text-transform: none;
 }
-.v-list--two-line .v-list-item-subtitle {
+.v-list-item--one-line .v-list-item-subtitle {
   -webkit-line-clamp: 1;
 }
-.v-list--three-line .v-list-item-subtitle {
+.v-list-item--two-line .v-list-item-subtitle {
   -webkit-line-clamp: 2;
 }
-.v-list--nav .v-list-item-subtitle {
+.v-list-item--three-line .v-list-item-subtitle {
+  -webkit-line-clamp: 3;
+}
+.v-list-item--nav .v-list-item-subtitle {
   font-size: 0.75rem;
   font-weight: 400;
   letter-spacing: 0.0178571429em;
@@ -182,50 +213,116 @@
   line-height: 1.5rem;
   text-transform: none;
 }
-.v-list--nav .v-list-item-title {
+.v-list-item--nav .v-list-item-title {
   font-size: 0.8125rem;
   font-weight: 500;
   letter-spacing: normal;
   line-height: 1rem;
 }
 
-.v-list--density-default.v-list--one-line .v-list-item {
+.v-list-item--density-default {
+  min-height: 40px;
+}
+.v-list-item--density-default.v-list-item--one-line {
   min-height: 48px;
-  padding: 8px 16px;
+  padding-top: 4px;
+  padding-bottom: 4px;
 }
-.v-list--density-default.v-list--two-line .v-list-item {
+.v-list-item--density-default.v-list-item--two-line {
   min-height: 64px;
-  padding: 12px 16px;
+  padding-top: 12px;
+  padding-bottom: 12px;
 }
-.v-list--density-default.v-list--three-line .v-list-item {
+.v-list-item--density-default.v-list-item--three-line {
   min-height: 88px;
-  padding: 16px 16px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+.v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+.v-list-item--density-default:not(.v-list-item--nav).v-list-item--two-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+.v-list-item--density-default:not(.v-list-item--nav).v-list-item--three-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
 }
 
-.v-list--density-comfortable.v-list--one-line .v-list-item {
+.v-list-item--density-comfortable {
+  min-height: 36px;
+}
+.v-list-item--density-comfortable.v-list-item--one-line {
   min-height: 44px;
-  padding: 4px 16px;
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
-.v-list--density-comfortable.v-list--two-line .v-list-item {
+.v-list-item--density-comfortable.v-list-item--two-line {
   min-height: 60px;
-  padding: 8px 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
-.v-list--density-comfortable.v-list--three-line .v-list-item {
+.v-list-item--density-comfortable.v-list-item--three-line {
   min-height: 84px;
-  padding: 12px 16px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.v-list-item--density-comfortable:not(.v-list-item--nav).v-list-item--one-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+.v-list-item--density-comfortable:not(.v-list-item--nav).v-list-item--two-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+.v-list-item--density-comfortable:not(.v-list-item--nav).v-list-item--three-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
 }
 
-.v-list--density-compact.v-list--one-line .v-list-item {
+.v-list-item--density-compact {
+  min-height: 32px;
+}
+.v-list-item--density-compact.v-list-item--one-line {
   min-height: 40px;
-  padding: 0px 16px;
+  padding-top: -4px;
+  padding-bottom: -4px;
 }
-.v-list--density-compact.v-list--two-line .v-list-item {
+.v-list-item--density-compact.v-list-item--two-line {
   min-height: 56px;
-  padding: 4px 16px;
+  padding-top: 4px;
+  padding-bottom: 4px;
 }
-.v-list--density-compact.v-list--three-line .v-list-item {
+.v-list-item--density-compact.v-list-item--three-line {
   min-height: 80px;
-  padding: 8px 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.v-list-item--density-compact:not(.v-list-item--nav).v-list-item--one-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+.v-list-item--density-compact:not(.v-list-item--nav).v-list-item--two-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+.v-list-item--density-compact:not(.v-list-item--nav).v-list-item--three-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+
+.v-list-item--nav {
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
+}
+.v-list .v-list-item--nav:not(:last-child):not(:only-child) {
+  margin-bottom: 4px;
+}
+
+.v-list-item__underlay {
+  position: absolute;
 }
 
 .v-list-item__overlay {
@@ -240,34 +337,40 @@
   top: 0;
   transition: opacity 0.2s ease-in-out;
 }
-.v-list-item--active.v-list-item--contained .v-list-item__overlay {
+.v-list-item--active.v-list-item--variant-elevated .v-list-item__overlay {
   --v-theme-overlay-multiplier: 0;
 }
 
 .v-list {
   --indent-padding: 0px;
 }
+.v-list--nav {
+  --indent-padding: -8px;
+}
 
 .v-list-group {
+  --list-indent-size: 16px;
   --parent-padding: var(--indent-padding);
+  --prepend-width: 40px;
+}
+.v-list-group--fluid {
+  --list-indent-size: 0px;
 }
 .v-list-group--prepend {
-  --parent-padding: calc(var(--indent-padding) + 40px);
+  --parent-padding: calc(var(--indent-padding) + var(--prepend-width));
+}
+.v-list-group--fluid.v-list-group--prepend {
+  --parent-padding: var(--indent-padding);
 }
 
 .v-list-group__items {
-  --indent-padding: calc(var(--parent-padding) + 16px);
+  --indent-padding: calc(var(--parent-padding) + var(--list-indent-size));
 }
 
 .v-list-group__items .v-list-item {
   padding-inline-start: calc(16px + var(--indent-padding)) !important;
 }
 
-.v-list-item--prepend,
-.v-list-group__items .v-list-item--prepend {
-  padding-inline-start: calc(16px + var(--indent-padding) + 40px + 16px) !important;
-}
-
 .v-list-group__header.v-list-item--active .v-list-item__overlay {
   display: none;
 }

package/lib/components/VList/VListItem.mjs

@@ -3,12 +3,15 @@ import { withDirectives as _withDirectives, resolveDirective as _resolveDirectiv
 import "./VListItem.css"; // Components
 
 import { VAvatar } from "../VAvatar/index.mjs";
-import { VListItemAvatar } from "./VListItemAvatar.mjs";
-import { VListItemHeader } from "./VListItemHeader.mjs";
+import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
+import { VIcon } from "../VIcon/index.mjs";
 import { VListItemSubtitle } from "./VListItemSubtitle.mjs";
-import { VListItemTitle } from "./VListItemTitle.mjs"; // Composables
+import { VListItemTitle } from "./VListItemTitle.mjs"; // Directives
+
+import { Ripple } from "../../directives/ripple/index.mjs"; // Composables
 
 import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs";
+import { IconValue } from "../../composables/icons.mjs";
 import { makeBorderProps, useBorder } from "../../composables/border.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
@@ -17,13 +20,11 @@ import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeRouterProps, useLink } from "../../composables/router.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
-import { useList } from "./list.mjs"; // Directives
-
-import { Ripple } from "../../directives/ripple/index.mjs"; // Utilities
+import { useList } from "./list.mjs";
+import { useNestedItem } from "../../composables/nested/nested.mjs"; // Utilities
 
-import { computed, onMounted, watch } from 'vue';
-import { genericComponent, useRender } from "../../util/index.mjs";
-import { useNestedItem } from "../../composables/nested/nested.mjs"; // Types
+import { computed, watch } from 'vue';
+import { genericComponent, useRender } from "../../util/index.mjs"; // Types
 
 export const VListItem = genericComponent()({
   name: 'VListItem',
@@ -31,17 +32,25 @@ export const VListItem = genericComponent()({
     Ripple
   },
   props: {
-    active: Boolean,
-    activeColor: String,
+    active: {
+      type: Boolean,
+      default: undefined
+    },
     activeClass: String,
+    activeColor: String,
     appendAvatar: String,
-    appendIcon: String,
+    appendIcon: IconValue,
     disabled: Boolean,
-    link: Boolean,
+    lines: String,
+    link: {
+      type: Boolean,
+      default: undefined
+    },
+    nav: Boolean,
     prependAvatar: String,
-    prependIcon: String,
-    subtitle: String,
-    title: String,
+    prependIcon: IconValue,
+    subtitle: [String, Number, Boolean],
+    title: [String, Number, Boolean],
     value: null,
     ...makeBorderProps(),
     ...makeDensityProps(),
@@ -62,48 +71,43 @@ export const VListItem = genericComponent()({
       slots
     } = _ref;
     const link = useLink(props, attrs);
-    const id = computed(() => {
-      var _props$value;
-
-      return (_props$value = props.value) != null ? _props$value : link.href.value;
-    });
+    const id = computed(() => props.value ?? link.href.value);
     const {
       select,
       isSelected,
+      isIndeterminate,
+      isGroupActivator,
       root,
-      parent
+      parent,
+      openOnSelect
     } = useNestedItem(id, false);
     const list = useList();
     const isActive = computed(() => {
       var _link$isExactActive;
 
-      return props.active || ((_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value) || isSelected.value;
-    });
-    const variantProps = computed(() => {
-      var _props$activeColor;
-
-      const activeColor = (_props$activeColor = props.activeColor) != null ? _props$activeColor : props.color;
-      return {
-        color: isActive.value ? activeColor : props.color,
-        textColor: props.textColor,
-        variant: props.variant
-      };
-    });
-    onMounted(() => {
-      var _link$isExactActive2;
-
-      if ((_link$isExactActive2 = link.isExactActive) != null && _link$isExactActive2.value && parent.value != null) {
-        root.open(parent.value, true);
-      }
+      return props.active !== false && (props.active || ((_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value) || isSelected.value);
     });
+    const isLink = computed(() => props.link !== false && link.isLink.value);
+    const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!list));
+    const roundedProps = computed(() => props.rounded || props.nav);
+    const variantProps = computed(() => ({
+      color: isActive.value ? props.activeColor ?? props.color : props.color,
+      variant: props.variant
+    }));
     watch(() => {
-      var _link$isExactActive3;
+      var _link$isExactActive2;
 
-      return (_link$isExactActive3 = link.isExactActive) == null ? void 0 : _link$isExactActive3.value;
+      return (_link$isExactActive2 = link.isExactActive) == null ? void 0 : _link$isExactActive2.value;
     }, val => {
       if (val && parent.value != null) {
         root.open(parent.value, true);
       }
+
+      if (val) {
+        openOnSelect(val);
+      }
+    }, {
+      immediate: true
     });
     const {
       themeClasses
@@ -127,70 +131,108 @@ export const VListItem = genericComponent()({
     } = useElevation(props);
     const {
       roundedClasses
-    } = useRounded(props);
+    } = useRounded(roundedProps);
+    const lineClasses = computed(() => props.lines ? `v-list-item--${props.lines}-line` : undefined);
     const slotProps = computed(() => ({
       isActive: isActive.value,
       select,
-      isSelected: isSelected.value
+      isSelected: isSelected.value,
+      isIndeterminate: isIndeterminate.value
     }));
     useRender(() => {
-      var _slots$default;
+      var _slots$prepend, _slots$title, _slots$subtitle, _slots$default, _slots$append;
 
-      const Tag = link.isLink.value ? 'a' : props.tag;
+      const Tag = isLink.value ? 'a' : props.tag;
+      const hasColor = !list || isSelected.value || isActive.value;
       const hasTitle = slots.title || props.title;
       const hasSubtitle = slots.subtitle || props.subtitle;
-      const hasHeader = !!(hasTitle || hasSubtitle);
       const hasAppend = !!(slots.append || props.appendAvatar || props.appendIcon);
       const hasPrepend = !!(slots.prepend || props.prependAvatar || props.prependIcon);
-      const isClickable = !props.disabled && (link.isClickable.value || props.link || props.value != null);
       list == null ? void 0 : list.updateHasPrepend(hasPrepend);
       return _withDirectives(_createVNode(Tag, {
         "class": ['v-list-item', {
           'v-list-item--active': isActive.value,
           'v-list-item--disabled': props.disabled,
-          'v-list-item--link': isClickable,
+          'v-list-item--link': isClickable.value,
+          'v-list-item--nav': props.nav,
           'v-list-item--prepend': !hasPrepend && (list == null ? void 0 : list.hasPrepend.value),
-          [`${props.activeClass}`]: isActive.value && props.activeClass
-        }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, variantClasses.value],
-        "style": [colorStyles.value, dimensionStyles.value],
+          [`${props.activeClass}`]: isActive.value
+        }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value],
+        "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value],
         "href": link.href.value,
-        "tabindex": isClickable ? 0 : undefined,
-        "onClick": isClickable && (e => {
+        "tabindex": isClickable.value ? 0 : undefined,
+        "onClick": isClickable.value && (e => {
           var _link$navigate;
 
+          if (isGroupActivator) return;
           (_link$navigate = link.navigate) == null ? void 0 : _link$navigate.call(link, e);
-          select(!isSelected.value, e);
+          props.value != null && select(!isSelected.value, e);
         })
       }, {
-        default: () => [genOverlays(isClickable || isActive.value, 'v-list-item'), hasPrepend && (slots.prepend ? slots.prepend(slotProps.value) : _createVNode(VListItemAvatar, {
-          "left": true
+        default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && _createVNode(VDefaultsProvider, {
+          "key": "prepend",
+          "defaults": {
+            VAvatar: {
+              density: props.density,
+              image: props.prependAvatar
+            },
+            VIcon: {
+              density: props.density,
+              icon: props.prependIcon
+            },
+            VListItemAction: {
+              start: true
+            }
+          }
+        }, {
+          default: () => [_createVNode("div", {
+            "class": "v-list-item__prepend"
+          }, [props.prependAvatar && _createVNode(VAvatar, {
+            "key": "prepend-avatar"
+          }, null), props.prependIcon && _createVNode(VIcon, {
+            "key": "prepend-icon"
+          }, null), (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value)])]
+        }), _createVNode("div", {
+          "class": "v-list-item__content"
+        }, [hasTitle && _createVNode(VListItemTitle, {
+          "key": "title"
+        }, {
+          default: () => [((_slots$title = slots.title) == null ? void 0 : _slots$title.call(slots, {
+            title: props.title
+          })) ?? props.title]
+        }), hasSubtitle && _createVNode(VListItemSubtitle, {
+          "key": "subtitle"
         }, {
-          default: () => [_createVNode(VAvatar, {
-            "density": props.density,
-            "icon": props.prependIcon,
-            "image": props.prependAvatar
-          }, null)]
-        })), hasHeader && _createVNode(VListItemHeader, null, {
-          default: () => [hasTitle && _createVNode(VListItemTitle, null, {
-            default: () => [slots.title ? slots.title({
-              title: props.title
-            }) : props.title]
-          }), hasSubtitle && _createVNode(VListItemSubtitle, null, {
-            default: () => [slots.subtitle ? slots.subtitle({
-              subtitle: props.subtitle
-            }) : props.subtitle]
-          })]
-        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value), hasAppend && (slots.append ? slots.append(slotProps.value) : _createVNode(VListItemAvatar, {
-          "right": true
+          default: () => [((_slots$subtitle = slots.subtitle) == null ? void 0 : _slots$subtitle.call(slots, {
+            subtitle: props.subtitle
+          })) ?? props.subtitle]
+        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value)]), hasAppend && _createVNode(VDefaultsProvider, {
+          "key": "append",
+          "defaults": {
+            VAvatar: {
+              density: props.density,
+              image: props.appendAvatar
+            },
+            VIcon: {
+              density: props.density,
+              icon: props.appendIcon
+            },
+            VListItemAction: {
+              end: true
+            }
+          }
         }, {
-          default: () => [_createVNode(VAvatar, {
-            "density": props.density,
-            "icon": props.appendIcon,
-            "image": props.appendAvatar
-          }, null)]
-        }))]
-      }), [[_resolveDirective("ripple"), isClickable]]);
+          default: () => [_createVNode("div", {
+            "class": "v-list-item__append"
+          }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value), props.appendIcon && _createVNode(VIcon, {
+            "key": "append-icon"
+          }, null), props.appendAvatar && _createVNode(VAvatar, {
+            "key": "append-avatar"
+          }, null)])]
+        })]
+      }), [[_resolveDirective("ripple"), isClickable.value]]);
     });
+    return {};
   }
 
 });