progressive-web-components

Server-first web components.

A collection of Custom Elements designed to work with server-rendered HTML and progressive enhancement.

Principles

• Server-rendered HTML is the baseline
• Custom Elements without Shadow DOM by default
• Small, composable components
• Minimal JavaScript
• No framework lock-in
• Optional framework-specific variants (e.g. Bootstrap 5)

Components

| Component | Description | |-----------------------------------------------------------------------------------------|-------------| | <pwc-dialog-opener> | Enhances links to open their targets in a modal dialog | | <pwc-filter> | Adds a search input to filter arbitrary markup based on free-text input | | <pwc-modal-dialog> | Low-level building block for modal dialogs from JavaScript | | <pwc-multiselect-dual-list> | Dual-list multiselect UI that enhances a native <select> element | | <pwc-zone-transfer> | Zone-based drag & drop and keyboard sorting for moving elements between containers |

Distribution

dist/ contains one JavaScript file per component (and variant). No build step is required for consumers.

• dialog-opener.js / dialog-opener-bs5.js
• filter.js / filter-bs5.js
• modal-dialog.js / modal-dialog-bs5.js
• multiselect-dual-list.js / multiselect-dual-list-bs5.js
• zone-transfer.js (no Bootstrap variant needed)
• all.js / all-bs5.js (all components bundled)