Web Components

JavaScript-enhanced components with progressive enhancement. Most components work without JavaScript and are enhanced when JS is available.

Web components are VB's enhancement layer. Every component wraps a native HTML fallback — an <accordion-wc> contains <details> elements, a <tab-set> starts as a list of links, a <combo-box> wraps a regular <input> and <datalist>. Before JavaScript loads, the page still works.

VB web components use the light DOM exclusively — no Shadow DOM, no framework dependencies, no bundler required. Styles come from VB's CSS, and the components enhance semantic markup that is already in your HTML. This keeps the DOM inspectable, styleable, and accessible by default.

Components that participate in forms use the Form-Associated Custom Elements API to integrate with native form submission, validation, and reset — no hidden inputs required.

Interactive Components

Components for user interaction and content organization.

<accordion-wc>

Collapsible content sections

<audio-player>

Custom audio player with playlist support

<audio-visualizer>

Audio frequency visualization

<card-list>

Template-based list rendering with safe data binding

<chart-wc>

SVG chart component with progressive table-to-SVG enhancement

<carousel-wc>

Scroll carousel with controls and autoplay

<chat-input>

Chat message input with send button

<chat-window>

Chat conversation window

<color-palette>

Interactive color swatch display with click-to-copy

<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

<command-palette>

Cmd+K command palette with search and actions

<compare-surface>

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

<calendar-wc>

Calendar display with events, selection, and range highlighting

<consent-banner>

Cookie consent banner with accept/decline

<content-swap>

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

<context-menu>

Right-click context menu with keyboard navigation

<date-picker>

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

<data-table>

Enhanced data tables

<drag-surface>

Drag-and-drop reordering surface

<drop-down>

Dropdown menu with keyboard navigation

<emoji-picker>

Emoji picker with search, categories, and insertion

<empathy-map>

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

<foot-notes>

Inline footnotes with popup

<geo-map>

Static map tiles with marker and address caption

<heading-links>

Auto-generate heading anchors

<icon-wc>

Icon component with Lucide icons

<image-gallery>

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

<image-map>

Interactive image map with hotspots

<impact-effort>

2×2 prioritization matrix with drag between quadrants

<kanban-board>

Columnar drag-and-drop board with user-defined columns and WIP limits

<form-field>

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

<include-file>

Load remote HTML fragments with progressive enhancement

<markdown-editor>

Side-by-side markdown editor with live preview, composing textarea with markdown-viewer

<markdown-viewer>

Render markdown with progressive enhancement, pluggable parsers, and theme integration

<page-toc>

Table of contents generator

<page-tour>

Progressive-enhancement guided tour with spotlight overlay and action gating

<print-page>

Print button with raw-mode toggle

<qr-code>

QR code generator with progressive enhancement

<reader-view>

Immersive reading shell with scroll and paged modes

<settings-panel>

Compact settings panel with gear trigger and details accordion

<share-wc>

Social share with native Web Share API and platform fallbacks

<short-cuts>

Keyboard shortcuts help overlay

<site-search>

Search dialog component

<slide-accept>

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

<social-embed>

Privacy-first social content embed with click-to-activate and provider registry

<split-surface>

Resizable panel splitter with drag divider

<star-rating>

Star rating widget with CSS-only selection and form association

<story-map>

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

<tab-set>

Tabbed interface component

<text-reader>

Text-to-speech reader with word-level highlighting

<theme-picker>

Theme picker component

<toast-msg>

Non-blocking notifications

<time-picker>

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

<tool-tip>

Contextual tooltips

<spacing-specimen>

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

<type-specimen>

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

<user-journey>

User journey map with SVG emotion curve and phase breakdown grid

<user-persona>

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

<user-story>

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

<video-player>

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

<youtube-player>

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

<change-set>

Interactive change tracking group with toggle between tracking, final, and original views

<page-meta>

Document metadata display as styled definition list with automatic JSON-LD injection

<page-info>

Document provenance disclosure panel with trust badges, authorship, and AI provenance

<glossary-index>

Interactive glossary with live search filtering and scroll-spy letter tracking

<site-index>

Site keyword index with search filtering and optional JSON data loading

<time-index>

Changelog/timeline with relative dates, version filtering, and sort toggle

<site-map>

Interactive HTML sitemap with current-page highlighting and expand/collapse controls

<component-sampler>

Themed grid of native UI elements showing how buttons, inputs, badges look with the active VB theme

<token-specimen>

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

<page-stats>

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

<page-tools>

Configurable toolbar for page-level utilities with responsive FAB collapse

Related

All Elements

Complete element index

Custom Elements

CSS-only layout primitives

Native Elements

Standard HTML5 elements

Form Association

ElementInternals API guide
↑