AccordionItem

<ts-accordion-item> vv0.4.0

The ts-accordion-item component.

Open in Storybook for interactive demos.

Preview

<ts-accordion-item>Content</ts-accordion-item>

Properties

Property	Attribute	Type	Default	Description
disabled	disabled	boolean	false	Disables toggling.
heading	heading	string | undefined	—	Header text for the item.
open	open	boolean	false	Whether the item is expanded.

Events

Event	Detail	Bubbles	Composed	Description
tsToggle	{ open: boolean; }	Yes	Yes	Emitted when the item is toggled.

Slots

Name	Description
*(default)*	Default slot for panel content.
header	Custom header content (replaces heading text).

CSS Parts

Use ::part() to style internal elements:

Part	Description
header	The header button.
panel	The content panel.

ts-accordion-item::part(header) {
  /* your custom styles */
}

Usage

HTML

<ts-accordion-item>Content</ts-accordion-item>

React

import { TsAccordionItem } from '@tessera-ui/react';

<TsAccordionItem>Content</TsAccordionItem>