@progressive-development/pd-content

Content layout components for collapsible sections, tabs, panels, and timelines.

Features

• Lit 3 & TypeScript – Modern, type-safe web components
• Accessible – WCAG 2.1 compliant, keyboard navigation, ARIA support
• Themeable – CSS Custom Properties for easy customization
• Localized – Built-in i18n support (EN, DE, BE)
• Lightweight – No heavy dependencies, tree-shakeable
• Framework-agnostic – Works with React, Vue, Angular, or vanilla JS
• Touch Gesture Support – Swipe navigation for panels via HammerJS integration
• Smooth Animations – GPU-accelerated expand/collapse with cubic-bezier easing
• Accordion Pattern – Collapse groups with mutual exclusion (only one open at a time)
• Responsive Content Switching – Auto-switch between inline and popup mode based on viewport

Installation

npm install @progressive-development/pd-content

Quick Start

<script type="module">
  import '@progressive-development/pd-content';
</script>

<pd-collapse title="Section 1">
  <p>Collapsible content here</p>
</pd-collapse>

Components

| Component | Description | |-----------|-------------| | <pd-collapse> | Expandable/collapsible content section | | <pd-collapse-group> | Accordion container for collapse elements | | <pd-tab> | Tabbed content navigation | | <pd-panel> | Content panel | | <pd-panel-viewer> | Swipeable panel carousel | | <pd-box-view> | Card-style content box | | <pd-more-info> | Expandable info section | | <pd-edit-content> | Inline editable content | | <pd-resize-content> | Responsive content with popup fallback | | <pd-timeline> | Vertical timeline display | | <pd-timeline-wizard> | Timeline with step progression |

Documentation

📖 Full documentation: pd-components.web.app

License

MIT © PD Progressive Development UG