- **BsListTile**: fixed bug of <BsListTileSubtitle> text overlap with <BsListTileAction> when multiline is on and is in ripple animation state.

- Update CHANGELOG.md

Author: ahmadfajar

CHANGELOG.md

@@ -3,6 +3,16 @@
 > All notable changes to this project will be documented in this file.
 
 
+## v2.0.13
+
+Released: September XX, 2024
+
+### Bug Fixes
+
+- **BsListTile**: fixed bug of `<BsListTileSubtitle>` text overlap with `<BsListTileAction>` 
+  when `multiline` is on and is in ripple animation state.
+
+
 ## v2.0.12
 
 Released: September 20, 2024

src/components/ListView/listTile.scss

@@ -99,7 +99,7 @@
         padding: var(--#{$prefix}tile-padding-y) var(--#{$prefix}tile-padding-x);
         position: relative;
 
-        > div[class^="#{$prefix}list-tile-"] {
+        > div > div[class^="#{$prefix}list-tile-"] {
             &:nth-child(2),
             &:last-child:not(:first-child) {
                 margin-left: var(--#{$prefix}tile-padding-x);

src/components/ListView/mixins/listTileApi.ts

@@ -1,6 +1,11 @@
 import type { ComputedRef, Prop, Ref, ShallowRef, Slots, VNode } from 'vue';
 import { h } from 'vue';
-import { cssPrefix, useHasRouter, useRenderRouter } from '../../../mixins/CommonApi';
+import {
+    cssPrefix,
+    useHasRouter,
+    useRenderRouter,
+    useRenderSlotDefault,
+} from '../../../mixins/CommonApi';
 import type {
     IListItem,
     IListViewProvider,
@@ -86,7 +91,6 @@ function createListTileElement(
                 BsRipple,
                 {
                     class: [
-                        'd-flex',
                         provider?.itemRounded === true && !props.roundedOff ? 'rounded' : '',
                         provider?.itemRoundedPill === true && !props.pillOff ? 'rounded-pill' : '',
                     ],
@@ -96,7 +100,7 @@ function createListTileElement(
                         !(tagName === 'a' || props.navigable)) as Prop<boolean>,
                 },
                 {
-                    default: () => slots.default && slots.default(),
+                    default: () => useRenderSlotDefault('div', slots, 'd-flex'),
                 }
             ),
         ]