feat(VListItemSubtitle): add new opacity prop

resolves #16446

packages/vuetify/src/components/VList/VListItemSubtitle.tsx

@@ -0,0 +1,39 @@
+// Composables
+import { makeComponentProps } from '@/composables/component'
+import { makeTagProps } from '@/composables/tag'
+
+// Utilities
+import { genericComponent, propsFactory, useRender } from '@/util'
+
+export const makeVListItemSubtitleProps = propsFactory({
+  opacity: [Number, String],
+
+  ...makeComponentProps(),
+  ...makeTagProps(),
+}, 'VListItemSubtitle')
+
+export const VListItemSubtitle = genericComponent()({
+  name: 'VListItemSubtitle',
+
+  props: makeVListItemSubtitleProps(),
+
+  setup (props, { slots }) {
+    useRender(() => (
+      <props.tag
+        class={[
+          'v-list-item-subtitle',
+          props.class,
+        ]}
+        style={[
+          { '--v-list-item-subtitle-opacity': props.opacity },
+          props.style,
+        ]}
+        v-slots={ slots }
+      />
+    ))
+
+    return {}
+  },
+})
+
+export type VListItemSubtitle = InstanceType<typeof VListItemSubtitle>

packages/vuetify/src/components/VList/_variables.scss

@@ -93,7 +93,7 @@ $list-item-nav-subtitle-font-weight: tools.map-deep-get(settings.$typography, 'b
 $list-item-nav-subtitle-letter-spacing: tools.map-deep-get(settings.$typography, 'body-2', 'letter-spacing') !default;
 $list-item-nav-subtitle-line-height: 1rem !default;
 
-$list-item-subtitle-opacity: var(--v-medium-emphasis-opacity) !default;
+$list-item-subtitle-opacity: var(--v-list-item-subtitle-opacity, var(--v-medium-emphasis-opacity)) !default;
 $list-item-subtitle-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size') !default;
 $list-item-subtitle-font-weight: tools.map-deep-get(settings.$typography, 'body-2', 'weight') !default;
 $list-item-subtitle-letter-spacing: tools.map-deep-get(settings.$typography, 'body-2', 'letter-spacing') !default;