fix: 🤔 added part selector to accordion content slot. (#454)

packages/components/src/components/accordion/accordion.stories.ts

@@ -130,18 +130,19 @@ export const Slots = {
 
 export const Parts = {
   parameters: {
-    controls: { exclude: ['base', 'header', 'summary', 'summary-icon', 'content'] }
+    controls: { exclude: ['base', 'header', 'summary', 'summary-icon', 'content', 'content__slot'] }
   },
   render: (args: any) => {
     return generateTemplate({
       axis: {
         y: {
           type: 'template',
           name: 'sd-accordion::part(...){outline: solid 2px red}',
-          values: ['base', 'header', 'summary', 'summary-icon', 'content'].map(part => {
+          values: ['base', 'header', 'summary', 'summary-icon', 'content', 'content__slot'].map(part => {
             return {
               title: part,
-              value: `<style>#part-${part} sd-accordion::part(${part}){outline: solid 2px red}</style><div id="part-${part}">%TEMPLATE%</div>`
+              // Added an outline-offset to make the outline visible for content__slot
+              value: `<style>#part-${part} sd-accordion::part(${part}){outline: solid 2px red; outline-offset: -2px;}</style><div id="part-${part}">%TEMPLATE%</div>`
             };
           })
         }

packages/components/src/components/accordion/accordion.ts

@@ -32,7 +32,8 @@ import SolidElement from '../../internal/solid-element';
  * @csspart header - The header that wraps both the summary and the expand/collapse icon.
  * @csspart summary - The container that wraps the summary.
  * @csspart summary-icon - The container that wraps the expand/collapse icons.
- * @csspart content - The accordion content.
+ * @csspart content - The container that wraps the accordion content slot.
+ * @csspart content__slot - The accordion content slot.
  *
  * @animation accordion.show - The animation to use when showing accordion. You can use `height: auto` with this animation.
  * @animation accordion.hide - The animation to use when hiding accordion. You can use `height: auto` with this animation.
@@ -182,7 +183,7 @@ export default class SdAccordion extends SolidElement {
           </span>
         </header>
         <div part="content" id="content" class="overflow-hidden">
-          <slot class="block px-4 py-6" role="region" aria-labelledby="header"></slot>
+          <slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot>
         </div>
       </div>
     `;