diff --git a/packages/components/src/components/accordion/accordion.stories.ts b/packages/components/src/components/accordion/accordion.stories.ts
index 342a5c895..abf1bbc61 100644
--- a/packages/components/src/components/accordion/accordion.stories.ts
+++ b/packages/components/src/components/accordion/accordion.stories.ts
@@ -130,7 +130,7 @@ 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({
@@ -138,10 +138,11 @@ export const Parts = {
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: `
%TEMPLATE%
`
+ // Added an outline-offset to make the outline visible for content__slot
+ value: `%TEMPLATE%
`
};
})
}
diff --git a/packages/components/src/components/accordion/accordion.ts b/packages/components/src/components/accordion/accordion.ts
index 12dac5743..26937f9d9 100644
--- a/packages/components/src/components/accordion/accordion.ts
+++ b/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 {
-
+
`;