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

package/lib/components/VList/VListGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VList/VListGroup.tsx"],"names":["VExpandTransition","useList","makeTagProps","useNestedGroupActivator","useNestedItem","computed","defineComponent","toRef","genericComponent","VListGroupActivator","name","setup","_","slots","default","VListGroup","props","collapseIcon","type","String","expandIcon","value","isOpen","open","list","onClick","e","activatorProps","appendIcon","class","hasPrepend","activator"],"mappings":";AAAA;SACSA,iB,oCAET;;SACSC,O;SACAC,Y;SACAC,uB,EAAyBC,a,+CAElC;;AACA,SAASC,QAAT,EAAmBC,eAAnB,EAAoCC,KAApC,QAAiD,KAAjD;SACSC,gB,gCAET;;AAaA,MAAMC,mBAAmB,GAAGH,eAAe,CAAC;AAC1CI,EAAAA,IAAI,EAAE,qBADoC;;AAG1CC,EAAAA,KAAK,CAAEC,CAAF,QAAgB;AAAA,QAAX;AAAEC,MAAAA;AAAF,KAAW;AACnBV,IAAAA,uBAAuB;AAEvB,WAAO;AAAA;;AAAA,+BAAMU,KAAK,CAACC,OAAZ,qBAAM,oBAAAD,KAAK,CAAX;AAAA,KAAP;AACD;;AAPyC,CAAD,CAA3C;AAUA,OAAO,MAAME,UAAU,GAAGP,gBAAgB,GAQrC;AACHE,EAAAA,IAAI,EAAE,YADH;AAGHM,EAAAA,KAAK,EAAE;AACLC,IAAAA,YAAY,EAAE;AACZC,MAAAA,IAAI,EAAEC,MADM;AAEZL,MAAAA,OAAO,EAAE;AAFG,KADT;AAKLM,IAAAA,UAAU,EAAE;AACVF,MAAAA,IAAI,EAAEC,MADI;AAEVL,MAAAA,OAAO,EAAE;AAFC,KALP;AASLO,IAAAA,KAAK,EAAE,IATF;AAWL,OAAGnB,YAAY;AAXV,GAHJ;;AAiBHS,EAAAA,KAAK,CAAEK,KAAF,SAAoB;AAAA,QAAX;AAAEH,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAES,MAAAA,MAAF;AAAUC,MAAAA;AAAV,QAAmBnB,aAAa,CAACG,KAAK,CAACS,KAAD,EAAQ,OAAR,CAAN,EAAwB,IAAxB,CAAtC;AACA,UAAMQ,IAAI,GAAGvB,OAAO,EAApB;;AAEA,UAAMwB,OAAO,GAAIC,CAAD,IAAc;AAC5BH,MAAAA,IAAI,CAAC,CAACD,MAAM,CAACD,KAAT,EAAgBK,CAAhB,CAAJ;AACD,KAFD;;AAIA,UAAMC,cAAoD,GAAGtB,QAAQ,CAAC,OAAO;AAC3EoB,MAAAA,OAD2E;AAE3EG,MAAAA,UAAU,EAAEN,MAAM,CAACD,KAAP,GAAeL,KAAK,CAACC,YAArB,GAAoCD,KAAK,CAACI,UAFqB;AAG3ES,MAAAA,KAAK,EAAE;AAHoE,KAAP,CAAD,CAArE;AAMA,WAAO,MAAM;AAAA;;AACX;AAAA,iBAEW,CACL,cADK,EAEL;AACE,mCAAyBL,IAAzB,oBAAyBA,IAAI,CAAEM,UAAN,CAAiBT;AAD5C,SAFK;AAFX;AAAA,wBASMR,KAAK,CAACkB,SAAN;AAAA,0BAEIlB,KAAK,CAACkB,SAAN,CAAgB;AAAEf,YAAAA,KAAK,EAAEW,cAAc,CAACN;AAAxB,WAAhB,CAFJ;AAAA,UATN;AAAA;AAAA,qBAeiB;AAfjB,iCAgBUR,KAAK,CAACC,OAhBhB,qBAgBU,qBAAAD,KAAK,CAhBf,cAe+CS,MAAM,CAACD,KAftD;AAAA;AAAA;AAqBD,KAtBD;AAuBD;;AAtDE,CARqC,CAAnC","sourcesContent":["// Components\nimport { VExpandTransition } from '@/components/transitions'\n\n// Composables\nimport { useList } from './list'\nimport { makeTagProps } from '@/composables/tag'\nimport { useNestedGroupActivator, useNestedItem } from '@/composables/nested/nested'\n\n// Utilities\nimport { computed, defineComponent, toRef } from 'vue'\nimport { genericComponent } from '@/util'\n\n// Types\nimport type { Ref } from 'vue'\nimport type { MakeSlots } from '@/util'\nimport type { InternalListItem } from './VList'\n\nexport type ListGroupActivatorSlot = {\n  props: {\n    onClick: (e: Event) => void\n    appendIcon: string\n    class: string\n  }\n}\n\nconst VListGroupActivator = defineComponent({\n  name: 'VListGroupActivator',\n\n  setup (_, { slots }) {\n    useNestedGroupActivator()\n\n    return () => slots.default?.()\n  },\n})\n\nexport const VListGroup = genericComponent<new <T extends InternalListItem>() => {\n  $props: {\n    items?: T[]\n  }\n  $slots: MakeSlots<{\n    activator: [ListGroupActivatorSlot]\n    default: []\n  }>\n}>()({\n  name: 'VListGroup',\n\n  props: {\n    collapseIcon: {\n      type: String,\n      default: '$collapse',\n    },\n    expandIcon: {\n      type: String,\n      default: '$expand',\n    },\n    value: null,\n\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    const { isOpen, open } = useNestedItem(toRef(props, 'value'), true)\n    const list = useList()\n\n    const onClick = (e: Event) => {\n      open(!isOpen.value, e)\n    }\n\n    const activatorProps: Ref<ListGroupActivatorSlot['props']> = computed(() => ({\n      onClick,\n      appendIcon: isOpen.value ? props.collapseIcon : props.expandIcon,\n      class: 'v-list-group__header',\n    }))\n\n    return () => {\n      return (\n        <props.tag\n          class={[\n            'v-list-group',\n            {\n              'v-list-group--prepend': list?.hasPrepend.value,\n            },\n          ]}\n        >\n          { slots.activator && (\n            <VListGroupActivator>\n              { slots.activator({ props: activatorProps.value }) }\n            </VListGroupActivator>\n          ) }\n          <VExpandTransition>\n            <div class=\"v-list-group__items\" v-show={isOpen.value}>\n              { slots.default?.() }\n            </div>\n          </VExpandTransition>\n        </props.tag>\n      )\n    }\n  },\n})\n"],"file":"VListGroup.mjs"}
+{"version":3,"file":"VListGroup.mjs","names":["VDefaultsProvider","VExpandTransition","useList","IconValue","makeTagProps","useNestedGroupActivator","useNestedItem","computed","toRef","defineComponent","genericComponent","pick","propsFactory","useRender","VListGroupActivator","name","setup","_","slots","default","makeVListGroupProps","activeColor","String","color","collapseIcon","type","expandIcon","prependIcon","appendIcon","fluid","Boolean","subgroup","value","VListGroup","props","title","isOpen","open","list","onClick","e","activatorProps","class","toggleIcon","hasPrepend","activator","VListItem","active","filterListGroupProps","Object","keys"],"sources":["../../../src/components/VList/VListGroup.tsx"],"sourcesContent":["// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VExpandTransition } from '@/components/transitions'\n\n// Composables\nimport { useList } from './list'\nimport { IconValue } from '@/composables/icons'\nimport { makeTagProps } from '@/composables/tag'\nimport { useNestedGroupActivator, useNestedItem } from '@/composables/nested/nested'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { defineComponent, genericComponent, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { InternalListItem } from './VList'\nimport type { MakeSlots } from '@/util'\nimport type { ExtractPropTypes, Ref } from 'vue'\n\nexport type ListGroupActivatorSlot = {\n  props: {\n    onClick: (e: Event) => void\n    class: string\n  }\n}\n\nconst VListGroupActivator = defineComponent({\n  name: 'VListGroupActivator',\n\n  setup (_, { slots }) {\n    useNestedGroupActivator()\n\n    return () => slots.default?.()\n  },\n})\n\nexport const makeVListGroupProps = propsFactory({\n  activeColor: String,\n  color: String,\n  collapseIcon: {\n    type: IconValue,\n    default: '$collapse',\n  },\n  expandIcon: {\n    type: IconValue,\n    default: '$expand',\n  },\n  prependIcon: IconValue,\n  appendIcon: IconValue,\n  fluid: Boolean,\n  subgroup: Boolean,\n  value: null,\n\n  ...makeTagProps(),\n})\n\nexport const VListGroup = genericComponent<new <T extends InternalListItem>() => {\n  $props: {\n    items?: T[]\n  }\n  $slots: MakeSlots<{\n    activator: [ListGroupActivatorSlot]\n    default: []\n  }>\n}>()({\n  name: 'VListGroup',\n\n  props: {\n    title: String,\n\n    ...makeVListGroupProps(),\n  },\n\n  setup (props, { slots }) {\n    const { isOpen, open } = useNestedItem(toRef(props, 'value'), true)\n    const list = useList()\n\n    const onClick = (e: Event) => {\n      open(!isOpen.value, e)\n    }\n\n    const activatorProps: Ref<ListGroupActivatorSlot['props']> = computed(() => ({\n      onClick,\n      class: 'v-list-group__header',\n    }))\n\n    const toggleIcon = computed(() => isOpen.value ? props.collapseIcon : props.expandIcon)\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-list-group',\n          {\n            'v-list-group--prepend': list?.hasPrepend.value,\n            'v-list-group--fluid': props.fluid,\n            'v-list-group--subgroup': props.subgroup,\n          },\n        ]}\n      >\n        { slots.activator && (\n          <VDefaultsProvider\n            defaults={{\n              VListItem: {\n                active: isOpen.value,\n                activeColor: props.activeColor,\n                color: props.color,\n                prependIcon: props.prependIcon || (props.subgroup && toggleIcon.value),\n                appendIcon: props.appendIcon || (!props.subgroup && toggleIcon.value),\n                title: props.title,\n                value: props.value,\n              },\n            }}\n          >\n            <VListGroupActivator>\n              { slots.activator({ props: activatorProps.value, isOpen }) }\n            </VListGroupActivator>\n          </VDefaultsProvider>\n        ) }\n\n        <VExpandTransition>\n          <div class=\"v-list-group__items\" v-show={ isOpen.value }>\n            { slots.default?.() }\n          </div>\n        </VExpandTransition>\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport function filterListGroupProps (props: ExtractPropTypes<ReturnType<typeof makeVListGroupProps>>) {\n  return pick(props, Object.keys(VListGroup.props) as any)\n}\n"],"mappings":"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"}

package/lib/components/VList/VListImg.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VList/VListImg.ts"],"names":["createSimpleFunctional","VListImg"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,QAAQ,GAAGD,sBAAsB,CAAC,YAAD,CAAvC","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VListImg = createSimpleFunctional('v-list-img')\n"],"file":"VListImg.mjs"}
+{"version":3,"file":"VListImg.mjs","names":["createSimpleFunctional","VListImg"],"sources":["../../../src/components/VList/VListImg.ts"],"sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VListImg = createSimpleFunctional('v-list-img')\n"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,QAAQ,GAAGD,sBAAsB,CAAC,YAAD,CAAvC"}

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,32 @@
   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.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--active:focus-visible > .v-list-item__overlay, .v-list-item[aria-haspopup=menu][aria-expanded=true]:focus-visible > .v-list-item__overlay {
+  opacity: calc(0.24 * var(--v-theme-overlay-multiplier));
+}
+@supports not selector(:focus-visible) {
+  .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.24 * var(--v-theme-overlay-multiplier));
+  }
+}
+.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 +55,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 +71,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 +81,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 +101,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 +165,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 +187,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 +218,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 +342,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;
 }