Web Components

<color-picker>

Full color space picker with HSL area, hue slider, text inputs, swatches, and EyeDropper

<combo-box>

Autocomplete combobox with single-select and multi-select tag modes

<date-picker>

Calendar date picker with month navigation, keyboard support, and form association

<drop-down>

Dropdown menu with keyboard navigation

<emoji-picker>

Emoji picker with search, categories, and insertion

<form-field>

Accessible form field wrapper with validation, custom messages, and error summaries

<slide-accept>

Slide-to-confirm interaction with drag handle and spring-back

<star-rating>

Star rating widget with CSS-only selection and form association

<time-picker>

Spinbutton time input with 12h/24h format and form association

<accordion-wc>

Collapsible content sections

<card-list>

Template-based list rendering with safe data binding

<carousel-wc>

Scroll carousel with controls and autoplay

<compare-surface>

Before/after image comparison slider with drag handle and keyboard support

<content-swap>

Two-face content toggle with flip, fade, slide, and scale transitions

<drag-surface>

Drag-and-drop reordering surface

<image-gallery>

Thumbnail grid with lightbox viewer, swipe, keyboard nav, and View Transitions

<split-surface>

Resizable panel splitter with drag divider

<tab-set>

Tabbed interface component

<command-palette>

Cmd+K command palette with search and actions

<context-menu>

Right-click context menu with keyboard navigation

<page-toc>

Table of contents generator

<page-tour>

Progressive-enhancement guided tour with spotlight overlay and action gating

<short-cuts>

Keyboard shortcuts help overlay

<site-search>

Search dialog component

<chart-wc>

SVG chart component with progressive table-to-SVG enhancement

<data-table>

Enhanced data tables with sorting and filtering

<flow-diagram>

SVG flow diagram renderer for process and workflow visualization

<gantt-chart>

Timeline-based Gantt chart with task bars, dependencies, and milestones

<geo-map>

Static map tiles with marker and address caption

<image-map>

Interactive image map with hotspots

<qr-code>

QR code generator with progressive enhancement

<calendar-wc>

Calendar display with events, selection, and range highlighting

<day-view>

Daily schedule view with time slots and event rendering

<week-view>

Weekly calendar view with time grid and event positioning

<comment-wc>

Collaborative commenting component for text annotations

<foot-notes>

Inline footnotes with popup

<heading-links>

Auto-generate heading anchors

<highlight-wc>

Text highlighting tool with color palette for selection-menu integration

<markdown-editor>

Side-by-side markdown editor with live preview

<markdown-viewer>

Render markdown with progressive enhancement and theme integration

<note-wc>

Annotation note component for selection-menu and page-level contexts

<reader-view>

Immersive reading shell with scroll and paged modes

<review-surface>

Document review surface with inline commenting and track-changes

<selection-menu>

Floating toolbar on text selection for highlighting, sharing, and annotating

<text-reader>

Text-to-speech reader with word-level highlighting

<audio-player>

Custom audio player with playlist support

<audio-visualizer>

Audio frequency visualization

<social-embed>

Privacy-first social content embed with click-to-activate

<video-player>

Video player with overlay controls, captions, fullscreen, and playlist

<youtube-player>

Privacy-first YouTube embed with facade pattern — zero iframe bytes until click

<chat-input>

Chat message input with send button

<chat-window>

Chat conversation window

<consent-banner>

Cookie consent banner with accept/decline

<toast-msg>

Non-blocking notifications

<tool-tip>

Contextual tooltips

<adr-wc>

Architecture Decision Record for documenting technical decisions

<empathy-map>

Four-quadrant empathy map (Says, Thinks, Does, Feels) with flip-to-edit

<impact-effort>

2×2 prioritization matrix with drag between quadrants

<kanban-board>

Columnar drag-and-drop board with WIP limits

<story-map>

Horizontal user story map with activity columns and drag-and-drop

<user-journey>

User journey map with SVG emotion curve and phase breakdown

<user-persona>

User persona card with avatar, demographics, goals, and frustrations

<user-story>

Agile user story card with priority, status, and acceptance criteria

<work-item>

Agile work item card with status, priority, and assignee fields

<color-palette>

Interactive color swatch display with click-to-copy

<component-sampler>

Themed grid of native UI elements

<font-pairer>

Interactive font pairing tool with Google Fonts, live preview, and CSS export

<gradient-builder>

Interactive CSS gradient builder with color stops and oklab interpolation

<palette-generator>

Algorithmic color palette generation from a seed using OKLCH harmony modes

<spacing-specimen>

Spacing scale specimen that reads VB tokens and renders a visual bar chart

<token-specimen>

Unified design token scale display for shadows, radii, borders, colors, or sizes

<type-specimen>

Typography specimen with character grid, weight scale, and type scale

<brand-mark>

Logo display with dark mode, compact variant, and stacked layout

<change-set>

Change tracking group with toggle between tracking, final, and original views

<glossary-index>

Interactive glossary with live search and scroll-spy letter tracking

<glossary-wc>

Alphabetical glossary with search filtering and jump navigation

<icon-wc>

Icon component with Lucide, Phosphor, Tabler, Bold, and Mage icon sets

<include-file>

Load remote HTML fragments with progressive enhancement

<page-info>

Document provenance disclosure with trust badges and authorship

<page-meta>

Document metadata display with automatic JSON-LD injection

<page-stats>

Reading statistics with word count, reading time, and last-modified date

<page-tools>

Configurable toolbar for page-level utilities with responsive FAB collapse

<print-page>

Print button with raw-mode toggle

<settings-panel>

Theme/settings panel with gear trigger and details accordion

<share-wc>

Social share with native Web Share API and platform fallbacks

<site-index>

Site keyword index with search filtering

<site-map>

Interactive HTML sitemap with expand/collapse controls

<site-map-wc>

Structured HTML sitemap with hierarchical navigation

<theme-picker>

Theme picker for colors, typography, and accessibility settings

<time-index>

Changelog/timeline with relative dates and version filtering

Custom Elements

CSS-only layout primitives

Native Elements

Standard HTML5 elements

Form Association

ElementInternals API guide