@bernouy/webcomponents

Lightweight Web Components toolkit built with Bun and TypeScript. Each component extends a minimal Component base that attaches an open Shadow Root and inlines its CSS + HTML template.

Install

bun install

Build

bun run build

Produces:

• dist/ui.js — IIFE bundle with all components, minified. Drop into a page with a <script> tag; custom elements register themselves on load.
• dist/blocs/<name>.js — one minified IIFE per component, for consumers who only need a single bloc (e.g. dist/blocs/button.js, dist/blocs/segmented-switch.js). Each file self-registers its custom element.
• dist/style.css — default stylesheet (src/assets/default.css).
• dist/**/*.d.ts — TypeScript declarations (entry: dist/index.d.ts).

Usage

Everything

<link rel="stylesheet" href="node_modules/@bernouy/webcomponents/dist/style.css">
<script src="node_modules/@bernouy/webcomponents/dist/ui.js"></script>

<p9r-button variant="filled">Click me</p9r-button>

Single bloc

Only load what you use. The stylesheet stays shared.

<link rel="stylesheet" href="node_modules/@bernouy/webcomponents/dist/style.css">
<script src="node_modules/@bernouy/webcomponents/dist/blocs/button.js"></script>

<p9r-button variant="filled">Click me</p9r-button>

Or via the package subpath (bundlers):

import "@bernouy/webcomponents/blocs/button";

Components

Two tag prefixes are currently in use across the library: p9r- (majority) and w13c- (subset). New components default to p9r- unless otherwise specified.

Base

| Class | Description | | --- | --- | | Component | Abstract base class. Attaches an open Shadow Root and injects CSS + template. |

Dialog

| Class | Tag | Description | | --- | --- | --- | | FormDialog | <p9r-form-dialog> | Modal dialog wrapping a form. | | LateralDialog | <w13c-lateral-dialog> | Slide-in lateral dialog panel. |

Form

| Class | Tag | Description | | --- | --- | --- | | Button | <p9r-button> | Form-associated button with variant / color / disabled. | | Checkbox | <w13c-checkbox> | Checkbox input. | | FormSection | <p9r-section> | Groups form fields under a section header. | | InputFile | <w13c-input-file> | File picker input. | | P9rInput | <p9r-input> | Text input with validation. | | P9rRange | <p9r-range> | Numeric range slider. | | P9rSelect | <p9r-select> | Select dropdown. | | P9rSizesSelect | <p9r-sizes-select> | Multi-size selector. | | SegmentedSwitch | <p9r-segmented-switch> | Segmented toggle. | | TagSuggest | <p9r-tag-suggest> | Autocomplete tag input. |

Layout

| Class | Tag | Description | | --- | --- | --- | | HorizontalActionGroup | <p9r-horizontal-action-group> | Horizontal group of action buttons. | | LeftMenuLayout | <w13c-left-menu-layout> | Page layout with a left menu. |

Menu

| Class | Tag | Description | | --- | --- | --- | | LateralMenu | <w13c-lateral-menu> | Lateral navigation menu. | | LateralMenuItem | <w13c-lateral-menu-item> | Item inside a LateralMenu. |

Table

| Class | Tag | Description | | --- | --- | --- | | Table | <p9r-table> | Table container. | | TableRow | <p9r-row> | Table row. | | TableHeaderCell | <p9r-header-cell> | Table header cell. | | TableCell | <p9r-cell> | Table body cell. |

Other

| Class | Tag | Description | | --- | --- | --- | | Tag | <p9r-tag> | Display tag / chip. | | Toast | <p9r-toast> | Single toast notification. | | ToastStack | <p9r-toast-stack> | Stack container for toasts. |

Development

bun install
bun --hot ./index.ts

To rebuild distribution artifacts after changes:

bun run build

Adding a component

A new component lives under src/ui/<Group>/<Name>/ with three files:

• <Name>.ts — extends Component, registers customElements.define(...)
• style.css — styles scoped to the Shadow Root
• template.html — HTML template

After creating the files, add the export to src/index.ts and a row to the catalog above.

This workflow is automated by a multi-agent setup in .claude/agents/:

• component-generator — the only agent that writes files. Creates the component folder, updates src/index.ts, and adds the README row.
• reviewer-accessibility, reviewer-api-dx, reviewer-consistency, reviewer-shadow-dom — read-only reviewers invoked in parallel to give multiple perspectives on the generated component. The main conversation arbitrates their feedback.