Apply B5 accordion styles to HTML element details

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.
3. Also, please pay attention to my previous comments, I described exactly the problem with the summary tag, as well as the incorrect choice of component classes that were applied to the details tag.

@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

Thank you for MR! 🍰
Looks great!

Looks good! 🧁

Thank you! Committed! 🍻

Reverting. More work needed.
See #3449719: Tabbed fieldgroups broken after update 3.0.11 => 3.0.12.

details.card>summary.card-header {
    border-radius: $border-radius;
    border-bottom: 0;
}

details.card[open]>summary.card-header {
    border-bottom: $card-border-width solid $border-color;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

This changes breaks Drupal core's "vertical tabs" element: https://www.drupal.org/docs/develop/user-interface-standards/vertical-tabs

For example: Edit a node in Bootstrap5 theme, and see the difference between Bootstrap 4.0.7 and 4.0.8.

The "vertical tabs" element is relying somehow on a direct details descendent in its js:

$this.find('> details')

At this moment I see no easy fix for this, despite reverting this change.

I am also not exactly sure, whether this change really aligns with Bootstrap.

The details element is a special HTML element: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/det...
From my understanding this is providing a collapsible element directly via the Browser, no need for a framework or something like that.

Bootstrap itself has no reference to the details element as far as I can see. Accordion is an own component, that goes beyond what a simple details element would provide.

In that sense I would not see the necessity to wrap a details element inside a Bootstrap accordion like it is done with this change. Imho the details element could stay like it is and if someone needs/wants an accordion, they should just render a bootstrap accordion.

If one really want to style details like accordion, maybe one could choose just to apply styling like accordion to details, but not adding the Bootstrap accordion functionality on top of a details element.