HTML element DETAILS is rendered with extra border on the bottom

I have added fixes and created patch for the above HTML element border issue, and also attached the screenshot for reference.

1. It is INCORRECT to change styles in dist, as it contains clean files from the Bootstrap theme.
2. It is not correct to update styles only in the css file, as they will be overwritten after compiling the scss styles.
3. You should update not the details component with the class "card", but the summary tag with the class "card-header".

@VladimirAus & @jannakha, a question for you, maybe we should update the details.html.twig template, because at the moment this template uses classes of the card component, although it looks and performs the functionality of the accordion component.
Or is it simple to update the styles for the summary tag of this template?

@abyss if border class 'border-0' will be added directly on details.html.twig then the border of details will be removed. The issue is on collapse due to the summary tag having a border that should remove when the details tag closes so I have created a patch according to it.

@ravi kant

1. Let's wait for a response from the maintainers, because we may need to update the template for details.
2. While we wait, could you please update your patch as it:
   • Not applicable, as it has the wrong path (the path should be from inside the bootstrap5 theme)
   • There is an obvious problem with compiling the styles, as most of the changes are just whitespace.

@Abyss

Adding new patch but whole style files is updated for white space. I have checked with 'sass scss/style.scss css/style.css' and 'npm run build:sass'.

Removed the border for the summary tag.

@Abyss
The patch is not applying.

Very strange. I double-checked the patch and everything seems to be working correctly.
@ravi kant could you tell us what you used to apply the patch?

@abyss
Copied patch in theme root and apply patch from theme root in terminal using following command.
git apply patch_file.patch

@ravi kant what version of the theme do you use? 3.0.x-dev?
Because styles are a very delicate thing, and a patch that may apply to one version will not apply to another.

@Abyss
The version is Bootstrap5 3.0.8.

the patch was applied on the 3.0.x-dev and 3.0.8
RTBS

The patch was successfully applied on the 3.0.x-dev

this issue is not fixed, see screenshot:

Patch is in MR

Closed:

Open:

Thank you for MR! 🍰
Looks great!

ok! here's a proper solution I think!

- as per #5 by @Abyss - yes, you're correct the template needs to be updated
- I have started moving to CSS variables so we can have good things (like dark mode) and actually implementing things the Bootstrap5 way (now that they're moving to CSS variables too)

checkout MR49 - https://git.drupalcode.org/project/bootstrap5/-/merge_requests/49/diffs

HTML component now looks like Bootstrap accordion:

this also will solve issue:
https://www.drupal.org/project/bootstrap5/issues/3380986 🐛 Layout builder block category label not visible with simple block module enabled Closed: duplicate

Looks good! 🧁

Thank you! Committed! 🍻

Reverting. More work needed.
See 🐛 Tabbed fieldgroups broken after update 3.0.11 => 3.0.12 Active .

This solves the problem

scss:

details.card{

	summary.card-header{
		border-bottom: 0;
		border-bottom-right-radius: $card-inner-border-radius;
		border-bottom-left-radius: $card-inner-border-radius;
	}
}

details.card[open]{

	summary.card-header{
		border-bottom: $card-border-width solid $card-border-color;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}
}

Or add css to bootstrap5/css/components/details.css

details.card summary.card-header {
	border-bottom: 0;
	border-bottom-right-radius: 0.375rem;
	border-bottom-left-radius: 0.375rem;
}

details.card[open] summary.card-header {
	border-bottom: 1px solid rgba(0, 0, 0, 0.175);		
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}