Polarity Integration Component Library

Section Header Component

A collapsible section header with title, item count, and expand/collapse toggle.

Installation

npm install @polarityio/pi-section-header

Peer Dependencies

• lit ^3.0.0

Usage

import '@polarityio/pi-section-header';

<!-- Basic section header -->
<pi-section-header title="Results">
  <p>Section content goes here</p>
</pi-section-header>

<!-- With item count and total -->
<pi-section-header title="Indicators" count="5" total="20">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</pi-section-header>

<!-- Initially collapsed, no collapse button -->

html`
  <pi-section-header title="Details" is-collapsed ?show-collapse-button=${false}>
    <p>Hidden by default</p>
  </pi-section-header>
`;

API Reference

Properties

| Property | Type | Default | Description | | -------------------- | --------------------- | ----------- | ------------------------------------------------- | | title | string | '' | Section title text | | count | number \| undefined | undefined | Number of items displayed in the header | | total | number \| undefined | undefined | Total number of items | | isCollapsed | boolean | false | Whether the section content is collapsed | | showCollapseButton | boolean | true | Whether to show the collapse/expand toggle button |

The title is formatted based on count and total:

• Both provided: "Title (count of total)"
• Only count: "Title (count)"
• Neither: "Title"

Events

| Event Name | Detail | Description | | ---------------- | ----------------------------------------- | ---------------------------------------------------------------------------------- | | section-toggle | { isCollapsed: boolean, title: string } | Fired when the section is toggled. Only fires when showCollapseButton is true. |

Slots

| Slot Name | Description | | --------- | -------------------------------------------------------------- | | Default | Content displayed inside the collapsible section when expanded |

CSS Custom Properties

| Property | Default | Description | | -------------------------------- | --------------------------- | ------------------------- | | --pi-section-header-icon-size | 12px | Size of the chevron icon | | --pi-section-header-icon-color | var(--pi-color-font-info) | Color of the chevron icon |

Theming

Customize the appearance using CSS custom properties. This component uses design tokens from @polarityio/pi-shared for consistent theming across the component library.

License

MIT