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 {
- +
`;