From 565a794b7eebafbdf65e0efab8d39ba6abb700e3 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 15 Apr 2024 20:49:16 -0500
Subject: [PATCH] feat(VListItemSubtitle): add new opacity prop

resolves #16446
---
 .../src/components/VList/VListItemSubtitle.ts |  6 ---
 .../components/VList/VListItemSubtitle.tsx    | 39 +++++++++++++++++++
 .../src/components/VList/_variables.scss      |  2 +-
 3 files changed, 40 insertions(+), 7 deletions(-)
 delete mode 100644 packages/vuetify/src/components/VList/VListItemSubtitle.ts
 create mode 100644 packages/vuetify/src/components/VList/VListItemSubtitle.tsx

diff --git a/packages/vuetify/src/components/VList/VListItemSubtitle.ts b/packages/vuetify/src/components/VList/VListItemSubtitle.ts
deleted file mode 100644
index 3f5a19ba9ca..00000000000
--- a/packages/vuetify/src/components/VList/VListItemSubtitle.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// Utilities
-import { createSimpleFunctional } from '@/util'
-
-export const VListItemSubtitle = createSimpleFunctional('v-list-item-subtitle')
-
-export type VListItemSubtitle = InstanceType<typeof VListItemSubtitle>
diff --git a/packages/vuetify/src/components/VList/VListItemSubtitle.tsx b/packages/vuetify/src/components/VList/VListItemSubtitle.tsx
new file mode 100644
index 00000000000..10856bd1af7
--- /dev/null
+++ b/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>
diff --git a/packages/vuetify/src/components/VList/_variables.scss b/packages/vuetify/src/components/VList/_variables.scss
index 5848399f42a..b173a4cb3bd 100644
--- a/packages/vuetify/src/components/VList/_variables.scss
+++ b/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;