Vitops

Web components

Tier 2 — the wc-* elements: what each adds over its no-JS fallback, and which bundle it ships in.

Tier 2 exists only where a pattern genuinely benefits from progressive enhancement. The slotted markup is the fallback — semantic, accessible and usable with no JavaScript — and the element parses it and augments it in place. None of these render from empty, which is why the "what JS adds" column is the reason each one exists at all.

They use light DOM, so the framework CSS applies to both the fallback and the enhanced result, and ship as feature-detected, deferred ES-module bundles. Polyfills load only when a native feature is missing.

Which bundle

Most register in elements.js. Two ship separately and deliberately:<wc-consent> in its own Lit-free bundle, so a site that needs a consent gate isn't made to download a rendering framework and the gate can load ahead of the deferred Lit bundle it gates; and <wc-theme-editor>, which is tooling rather than a page pattern and is opt-in per consumer, so a production page that doesn't ask for it pays nothing.

wc-color-wheel, wc-icon-picker, wc-oklch-color-picker, wc-typography-config are registered but in no bundle (the editor-v2 track). The tags are inert in a consumer project — they are listed so that "the tag does nothing" is documented rather than discovered.

<wc-cards>

Pattern
card
Ships in
elements.js
What JS adds
whole-card click that keeps the card text selectable
Recommended call
<Cards> — it emits <wc-cards> itself, so do NOT add your own wrapper. <Subgrid> is the same grid without the click enhancement.
Also in
CSS, Astro
Pattern
carousel
Ships in
elements.js
What JS adds
opt-in cloned loop, autoplay, and real prev/next + dot controls where ::scroll-button()/::scroll-marker are missing
Recommended call
<Carousel slides={…} label="…" /> — it emits <wc-carousel> itself, so do NOT add your own wrapper. .carousel is the shell and .carousel__track the scroller; add loop for the cloned infinite strip (autoplay implies it).
Also in
CSS, Astro, Bricks

<wc-color-scheme-toggle>

Pattern
color-scheme-toggle
Ships in
elements.js
What JS adds
segmented light/dark/system control; persists the choice (consent-gated)
Recommended call
<wc-color-scheme-toggle></wc-color-scheme-toggle>. Renamed from <color-scheme-toggle> in 4.0. Shadow DOM, so it is absent rather than broken without JS.
Also in
CSS, Bricks

<wc-color-wheel>

Pattern
color-wheel
Ships in
no bundle — inert
What JS adds
hue/chroma wheel input
Recommended call
Not shipped. Registered but absent from every bundle, so the tag is inert in a consumer project.
Also in
this tier only
Pattern
consent
Ships in
@getvitops/core/consent
What JS adds
the permission gate itself — activates type="text/plain" tags on grant
Recommended call
<CookieConsent />. Its own Lit-free bundle so a site needing consent does not download a rendering framework.
Also in
CSS, Astro

<wc-copy>

Pattern
copy
Ships in
elements.js
What JS adds
clipboard write plus success feedback
Recommended call
<wc-copy> around the content and a [data-copy] button.
Also in
CSS, Bricks

<wc-counter>

Pattern
counter
Ships in
elements.js
What JS adds
animates from a start value to the value already in the fallback text, on intersection
Recommended call
<Counter value="94%" /> — it emits <wc-counter> itself, so do NOT add your own wrapper. The final value is parsed from the fallback text, never passed separately.
Also in
CSS, Astro

<wc-dismissable>

Pattern
dismissable
Ships in
elements.js
What JS adds
fade-out + removal, optional auto-dismiss
Recommended call
<wc-dismissable> around any banner/notification containing a [data-dismiss] control.
Also in
CSS, Bricks

<wc-entries>

Pattern
entries
Ships in
elements.js
What JS adds
parses heading + <dl> pairs into a table above a breakpoint
Recommended call
<wc-entries> around <h3> + <dl> pairs. The tier-2 exemplar: semantic pairs with no JS, a table with it.
Also in
CSS, Bricks
Pattern
gallery
Ships in
elements.js
What JS adds
prev/next, arrow keys, swipe, an image counter, neighbour preload and the view-transition morph
Recommended call
<Gallery images={…} label="…" /> — it emits <wc-gallery> itself, so do NOT add your own wrapper. Each thumbnail is a command="show-modal" invoker for its own <dialog class="lightbox-dialog"> (see lightbox), so it is a working modal lightbox with no JS.
Also in
CSS, Astro

<wc-icon-picker>

Pattern
icon-picker
Ships in
no bundle — inert
What JS adds
browses the semantic icon map for the configured set
Recommended call
Not shipped. See color-wheel.
Also in
CSS

<wc-image-compare>

Pattern
image-compare
Ships in
elements.js
What JS adds
drag handle revealing the before/after image
Recommended call
<wc-image-compare> with two images. Both are visible without JS.
Also in
CSS, Bricks

<wc-marquee>

Pattern
marquee
Ships in
elements.js
What JS adds
fills the track with enough copies to scroll seamlessly
Recommended call
<wc-marquee> around one .marquee__content. Scrolls via CSS alone; JS only removes the seam.
Also in
CSS

<wc-multi-field>

Pattern
multi-field
Ships in
elements.js
What JS adds
add/remove repeating field rows
Recommended call
<wc-multi-field> around a field template. One row submits fine with no JS.
Also in
CSS, Bricks

<wc-oklch-color-picker>

Pattern
oklch-color-picker
Ships in
no bundle — inert
What JS adds
OKLCH L/C/H picker
Recommended call
Not shipped. See color-wheel.
Also in
this tier only

<wc-split-panel>

Pattern
split-panel
Ships in
elements.js
What JS adds
draggable divider between two panels
Recommended call
<wc-split-panel> with two children. Unenhanced they simply stack.
Also in
CSS, Bricks

<wc-theme-editor>

Pattern
theme-editor
Ships in
@getvitops/core/editor
What JS adds
live :root token overrides, export as CSS or a config patch
Recommended call
<wc-theme-editor manifest="…">. TOOLING, not a page pattern — the one deliberate tier-2 exception, quarantined in its own opt-in bundle.
Also in
CSS

<wc-tree>

Pattern
tree
Ships in
elements.js
What JS adds
WAI-ARIA tree semantics, roving-tabindex keyboard navigation, filter, expand/collapse all, hash deep-linking
Recommended call
<Tree items={…} /> — it emits <wc-tree> itself, so do NOT add your own wrapper.
Also in
CSS, Astro

<wc-typography-config>

Pattern
typography-config
Ships in
no bundle — inert
What JS adds
type role editor
Recommended call
Not shipped. See color-wheel.
Also in
this tier only

Live, interactive demos of each are on thePatterns page.