Accordion Table of Contents

• Props
• Events
• Slots
• CSS Variables

Propertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultcompact compactDisplays the Accordion as compact version with thinner border and smaller paddings.booleanundefinedheading headingDefines the heading used in accordion.stringundefinedheadingTag heading-tagSets a heading tag, so it fits correctly within the outline of the page.type AccordionHeadingTag =
'h1'
'h2'
'h3'
'h4'
'h5'
'h6''h2'open openDefines if accordion is open.booleanundefinedsize 🛠sizeThe text size.type AccordionSize =
'small'
'medium'
BreakpointCustomizable<AccordionSize>'small'sticky 🧪stickyexperimental Sticks the Accordion heading at the top, fixed while scrollingbooleanundefinedtag 🚫tagdeprecated, will be removed with next major release, use heading-tag instead. Sets a heading tag, so it fits correctly within the outline of the page.type AccordionTag =
undefined
'h1'
'h2'
'h3'
'h4'
'h5'
'h6'undefinedtheme themeAdapts the color when used on dark background.type Theme =
'light'
'dark'
'auto''light'EventsEventDescriptionTypeaccordionChange 🚫deprecated since v3.0.0, will be removed with next major release, use update event instead. Emitted when accordion state is changed.type AccordionUpdateEventDetail = {
  open: boolean;
}
CustomEvent<AccordionUpdateEventDetail>update Emitted when accordion state is changed.type AccordionUpdateEventDetail = {
  open: boolean;
}
CustomEvent<AccordionUpdateEventDetail>SlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot name="heading"> Defines the heading used in the accordion. Can be used alternatively to the heading prop. Please **refrain** from using any other than text content as slotted markup.<slot> Default slot for the main contentCSS VariablesCSS VariableDescriptiondefaultValue--p-hyphens Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.auto