JSPM

custom-elements-collection

0.3.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 371
  • Score
    100M100P100Q74970F
  • License MIT

A collection of 72 framework-agnostic Web Components (ce-* UI building blocks + lesson-* educational widgets) built on Lit, including chat-surface and feedback-UI primitives for LLM applications. Each component is self-describing via a validated *.meta.json. Ship as a single bundle, auto-register everything, or tree-shake down to the tags you use.

Package Exports

  • custom-elements-collection
  • custom-elements-collection/abbr
  • custom-elements-collection/auto
  • custom-elements-collection/badge
  • custom-elements-collection/bar-chart
  • custom-elements-collection/bauhaus.css
  • custom-elements-collection/bookmark
  • custom-elements-collection/button
  • custom-elements-collection/callout
  • custom-elements-collection/card
  • custom-elements-collection/chart
  • custom-elements-collection/chat-bubble
  • custom-elements-collection/checkbox
  • custom-elements-collection/checklist
  • custom-elements-collection/chip
  • custom-elements-collection/citation
  • custom-elements-collection/clock
  • custom-elements-collection/code
  • custom-elements-collection/comment
  • custom-elements-collection/compare
  • custom-elements-collection/confirm
  • custom-elements-collection/copy-button
  • custom-elements-collection/counter
  • custom-elements-collection/cursor
  • custom-elements-collection/dark.css
  • custom-elements-collection/decision-tree
  • custom-elements-collection/details
  • custom-elements-collection/diff
  • custom-elements-collection/dismiss
  • custom-elements-collection/docs-layout
  • custom-elements-collection/donut
  • custom-elements-collection/example
  • custom-elements-collection/feature-card
  • custom-elements-collection/feedback-bar
  • custom-elements-collection/feedback-export
  • custom-elements-collection/feedback-heatmap
  • custom-elements-collection/feedback-sink
  • custom-elements-collection/feedback-summary
  • custom-elements-collection/file-card
  • custom-elements-collection/filter-bar
  • custom-elements-collection/flow
  • custom-elements-collection/gauge
  • custom-elements-collection/grid
  • custom-elements-collection/gruvbox.css
  • custom-elements-collection/heatmap
  • custom-elements-collection/hero
  • custom-elements-collection/image
  • custom-elements-collection/input
  • custom-elements-collection/json
  • custom-elements-collection/key-value
  • custom-elements-collection/kpi
  • custom-elements-collection/lesson-audio
  • custom-elements-collection/lesson-frame
  • custom-elements-collection/lesson-gap
  • custom-elements-collection/lesson-quickfire
  • custom-elements-collection/lesson-quiz
  • custom-elements-collection/lesson-rule
  • custom-elements-collection/light.css
  • custom-elements-collection/manifest
  • custom-elements-collection/memphis.css
  • custom-elements-collection/meta
  • custom-elements-collection/meta/ce-abbr.json
  • custom-elements-collection/meta/ce-badge.json
  • custom-elements-collection/meta/ce-bar-chart.json
  • custom-elements-collection/meta/ce-bookmark.json
  • custom-elements-collection/meta/ce-button.json
  • custom-elements-collection/meta/ce-callout.json
  • custom-elements-collection/meta/ce-card.json
  • custom-elements-collection/meta/ce-chart.json
  • custom-elements-collection/meta/ce-chat-bubble.json
  • custom-elements-collection/meta/ce-checkbox.json
  • custom-elements-collection/meta/ce-checklist.json
  • custom-elements-collection/meta/ce-chip.json
  • custom-elements-collection/meta/ce-citation.json
  • custom-elements-collection/meta/ce-clock.json
  • custom-elements-collection/meta/ce-code.json
  • custom-elements-collection/meta/ce-comment.json
  • custom-elements-collection/meta/ce-compare.json
  • custom-elements-collection/meta/ce-confirm.json
  • custom-elements-collection/meta/ce-copy-button.json
  • custom-elements-collection/meta/ce-counter.json
  • custom-elements-collection/meta/ce-cursor.json
  • custom-elements-collection/meta/ce-decision-tree.json
  • custom-elements-collection/meta/ce-details.json
  • custom-elements-collection/meta/ce-diff.json
  • custom-elements-collection/meta/ce-dismiss.json
  • custom-elements-collection/meta/ce-docs-layout.json
  • custom-elements-collection/meta/ce-donut.json
  • custom-elements-collection/meta/ce-example.json
  • custom-elements-collection/meta/ce-feature-card.json
  • custom-elements-collection/meta/ce-feedback-bar.json
  • custom-elements-collection/meta/ce-feedback-export.json
  • custom-elements-collection/meta/ce-feedback-heatmap.json
  • custom-elements-collection/meta/ce-feedback-sink.json
  • custom-elements-collection/meta/ce-feedback-summary.json
  • custom-elements-collection/meta/ce-file-card.json
  • custom-elements-collection/meta/ce-filter-bar.json
  • custom-elements-collection/meta/ce-flow.json
  • custom-elements-collection/meta/ce-gauge.json
  • custom-elements-collection/meta/ce-grid.json
  • custom-elements-collection/meta/ce-heatmap.json
  • custom-elements-collection/meta/ce-hero.json
  • custom-elements-collection/meta/ce-image.json
  • custom-elements-collection/meta/ce-input.json
  • custom-elements-collection/meta/ce-json.json
  • custom-elements-collection/meta/ce-key-value.json
  • custom-elements-collection/meta/ce-kpi.json
  • custom-elements-collection/meta/ce-nav-list.json
  • custom-elements-collection/meta/ce-persona.json
  • custom-elements-collection/meta/ce-progress.json
  • custom-elements-collection/meta/ce-rating.json
  • custom-elements-collection/meta/ce-retry-button.json
  • custom-elements-collection/meta/ce-section.json
  • custom-elements-collection/meta/ce-shell.json
  • custom-elements-collection/meta/ce-skeleton.json
  • custom-elements-collection/meta/ce-sparkline.json
  • custom-elements-collection/meta/ce-stat-group.json
  • custom-elements-collection/meta/ce-status-light.json
  • custom-elements-collection/meta/ce-table.json
  • custom-elements-collection/meta/ce-textarea.json
  • custom-elements-collection/meta/ce-theme-switcher.json
  • custom-elements-collection/meta/ce-thinking.json
  • custom-elements-collection/meta/ce-timeline.json
  • custom-elements-collection/meta/ce-toc.json
  • custom-elements-collection/meta/ce-toggle.json
  • custom-elements-collection/meta/ce-tool-call.json
  • custom-elements-collection/meta/ce-verdict.json
  • custom-elements-collection/meta/index.json
  • custom-elements-collection/meta/lesson-audio.json
  • custom-elements-collection/meta/lesson-frame.json
  • custom-elements-collection/meta/lesson-gap.json
  • custom-elements-collection/meta/lesson-quickfire.json
  • custom-elements-collection/meta/lesson-quiz.json
  • custom-elements-collection/meta/lesson-rule.json
  • custom-elements-collection/muji.css
  • custom-elements-collection/nav-list
  • custom-elements-collection/neo-brutal.css
  • custom-elements-collection/nordic.css
  • custom-elements-collection/persona
  • custom-elements-collection/progress
  • custom-elements-collection/rating
  • custom-elements-collection/registry
  • custom-elements-collection/registry/by-category/internal.json
  • custom-elements-collection/registry/by-category/lesson.json
  • custom-elements-collection/registry/by-category/ui.json
  • custom-elements-collection/registry/by-group/chat-surfaces.json
  • custom-elements-collection/registry/by-group/comparison-and-narrative.json
  • custom-elements-collection/registry/by-group/content.json
  • custom-elements-collection/registry/by-group/dashboard.json
  • custom-elements-collection/registry/by-group/docs.json
  • custom-elements-collection/registry/by-group/education.json
  • custom-elements-collection/registry/by-group/feedback.json
  • custom-elements-collection/registry/by-group/forms.json
  • custom-elements-collection/registry/by-group/layout-and-primitives.json
  • custom-elements-collection/registry/by-group/metrics-and-charts.json
  • custom-elements-collection/registry/by-tier/brick.json
  • custom-elements-collection/registry/by-tier/layout.json
  • custom-elements-collection/registry/by-tier/widget.json
  • custom-elements-collection/registry/ce-abbr.json
  • custom-elements-collection/registry/ce-badge.json
  • custom-elements-collection/registry/ce-bar-chart.json
  • custom-elements-collection/registry/ce-bookmark.json
  • custom-elements-collection/registry/ce-button.json
  • custom-elements-collection/registry/ce-callout.json
  • custom-elements-collection/registry/ce-card.json
  • custom-elements-collection/registry/ce-chart.json
  • custom-elements-collection/registry/ce-chat-bubble.json
  • custom-elements-collection/registry/ce-checkbox.json
  • custom-elements-collection/registry/ce-checklist.json
  • custom-elements-collection/registry/ce-chip.json
  • custom-elements-collection/registry/ce-citation.json
  • custom-elements-collection/registry/ce-clock.json
  • custom-elements-collection/registry/ce-code.json
  • custom-elements-collection/registry/ce-comment.json
  • custom-elements-collection/registry/ce-compare.json
  • custom-elements-collection/registry/ce-confirm.json
  • custom-elements-collection/registry/ce-copy-button.json
  • custom-elements-collection/registry/ce-counter.json
  • custom-elements-collection/registry/ce-cursor.json
  • custom-elements-collection/registry/ce-decision-tree.json
  • custom-elements-collection/registry/ce-details.json
  • custom-elements-collection/registry/ce-diff.json
  • custom-elements-collection/registry/ce-dismiss.json
  • custom-elements-collection/registry/ce-docs-layout.json
  • custom-elements-collection/registry/ce-donut.json
  • custom-elements-collection/registry/ce-example.json
  • custom-elements-collection/registry/ce-feature-card.json
  • custom-elements-collection/registry/ce-feedback-bar.json
  • custom-elements-collection/registry/ce-feedback-export.json
  • custom-elements-collection/registry/ce-feedback-heatmap.json
  • custom-elements-collection/registry/ce-feedback-sink.json
  • custom-elements-collection/registry/ce-feedback-summary.json
  • custom-elements-collection/registry/ce-file-card.json
  • custom-elements-collection/registry/ce-filter-bar.json
  • custom-elements-collection/registry/ce-flow.json
  • custom-elements-collection/registry/ce-gauge.json
  • custom-elements-collection/registry/ce-grid.json
  • custom-elements-collection/registry/ce-heatmap.json
  • custom-elements-collection/registry/ce-hero.json
  • custom-elements-collection/registry/ce-image.json
  • custom-elements-collection/registry/ce-input.json
  • custom-elements-collection/registry/ce-json.json
  • custom-elements-collection/registry/ce-key-value.json
  • custom-elements-collection/registry/ce-kpi.json
  • custom-elements-collection/registry/ce-nav-list.json
  • custom-elements-collection/registry/ce-persona.json
  • custom-elements-collection/registry/ce-progress.json
  • custom-elements-collection/registry/ce-rating.json
  • custom-elements-collection/registry/ce-retry-button.json
  • custom-elements-collection/registry/ce-section.json
  • custom-elements-collection/registry/ce-shell.json
  • custom-elements-collection/registry/ce-skeleton.json
  • custom-elements-collection/registry/ce-sparkline.json
  • custom-elements-collection/registry/ce-stat-group.json
  • custom-elements-collection/registry/ce-status-light.json
  • custom-elements-collection/registry/ce-table.json
  • custom-elements-collection/registry/ce-textarea.json
  • custom-elements-collection/registry/ce-theme-switcher.json
  • custom-elements-collection/registry/ce-thinking.json
  • custom-elements-collection/registry/ce-timeline.json
  • custom-elements-collection/registry/ce-toc.json
  • custom-elements-collection/registry/ce-toggle.json
  • custom-elements-collection/registry/ce-tool-call.json
  • custom-elements-collection/registry/ce-verdict.json
  • custom-elements-collection/registry/lesson-audio.json
  • custom-elements-collection/registry/lesson-frame.json
  • custom-elements-collection/registry/lesson-gap.json
  • custom-elements-collection/registry/lesson-quickfire.json
  • custom-elements-collection/registry/lesson-quiz.json
  • custom-elements-collection/registry/lesson-rule.json
  • custom-elements-collection/retry-button
  • custom-elements-collection/section
  • custom-elements-collection/shell
  • custom-elements-collection/skeleton
  • custom-elements-collection/solarized.css
  • custom-elements-collection/sparkline
  • custom-elements-collection/stat-group
  • custom-elements-collection/status-light
  • custom-elements-collection/swiss.css
  • custom-elements-collection/table
  • custom-elements-collection/textarea
  • custom-elements-collection/theme-switcher
  • custom-elements-collection/thinking
  • custom-elements-collection/timeline
  • custom-elements-collection/toc
  • custom-elements-collection/toggle
  • custom-elements-collection/tokens.css
  • custom-elements-collection/tool-call
  • custom-elements-collection/verdict

Readme

custom-elements-collection

npm license: MIT

A collection of 72 framework-agnostic Web Components built on Lit 3 — 66 general-purpose UI building blocks (ce-*) covering layout, metrics, narrative, chat surfaces, human-in-the-loop feedback, form controls, dashboard primitives, and rich-content viewers, plus 6 educational widgets (lesson-*). Drop them into any HTML page, any framework, any static site generator. No build step required on the consumer side.

Every component is self-describing via a per-component *.meta.json file (see ADR-005) — props, events, slots, CSS variables, dependency graph, side effects, and accessibility notes are machine-readable.

30-second tour

<!doctype html>
<html data-ce-theme="dark">
<head>
  <link rel="stylesheet"
        href="https://unpkg.com/custom-elements-collection/dist/tokens/tokens.css">
  <script type="module"
          src="https://unpkg.com/custom-elements-collection/dist/auto.js"></script>
</head>
<body>
  <ce-shell>
    <ce-hero kicker="Status" title="Release readiness">
      <ce-kpi slot="stats" value="96%" label="Pass" color="green"></ce-kpi>
      <ce-kpi slot="stats" value="0"   label="Bugs" color="red"></ce-kpi>
    </ce-hero>
    <ce-callout type="success" title="Ready to ship">
      All quality gates green.
    </ce-callout>
  </ce-shell>
</body>
</html>

Install

pnpm add custom-elements-collection

Lit is bundled — no peer dependencies required.

Three ways to register tags

// A) Register every tag at once
import "custom-elements-collection/auto";

// B) Tree-shake to specific tags
import "custom-elements-collection/hero";
import "custom-elements-collection/kpi";
import "custom-elements-collection/lesson-quiz";

// C) Load dynamically at runtime
import { loadOnDemand } from "custom-elements-collection";
await loadOnDemand(["ce-hero", "ce-kpi", "lesson-rule"]);

Theming

All colors, spacing, and radii come from CSS custom properties named --ce-*. Ship the defaults and override anywhere:

<link rel="stylesheet"
      href="https://unpkg.com/custom-elements-collection/dist/tokens/tokens.css" />
:root {
  --ce-color-primary: oklch(72% 0.17 250);
  --ce-radius: 12px;
  --ce-font-sans: "Inter", system-ui, sans-serif;
}

Dark / light overrides are shipped as separate stylesheets:

<link rel="stylesheet"
      href="https://unpkg.com/custom-elements-collection/dist/tokens/dark.css" />
<link rel="stylesheet"
      href="https://unpkg.com/custom-elements-collection/dist/tokens/light.css" />

Component catalog

UI — layout & primitives (10)

ce-shell · ce-hero · ce-section · ce-grid · ce-card · ce-chip · ce-table · ce-callout · ce-details · ce-toc

UI — metrics & charts (5)

ce-kpi · ce-progress · ce-bar-chart · ce-chart · ce-heatmap

UI — comparison & narrative (10)

ce-verdict · ce-timeline · ce-compare · ce-flow · ce-decision-tree · ce-example · ce-feature-card · ce-persona · ce-code · ce-filter-bar

UI — chat surfaces (8) — v0.3

ce-chat-bubble · ce-cursor · ce-thinking · ce-copy-button · ce-tool-call · ce-citation · ce-rating · ce-retry-button

LLM chat / copilot / agent UI primitives. ce-rating supports both thumbs-up/down and 0-N star modes and is form-associated. ce-tool-call collapses an LLM tool invocation with args / result / error slots. Compatible with @mdflow/plugin-companion.

UI — feedback (8) — v0.3 / v0.4

ce-feedback-sink · ce-feedback-bar · ce-bookmark · ce-dismiss · ce-comment · ce-feedback-summary · ce-feedback-export · ce-feedback-heatmap

Human-in-the-loop feedback for any HTML dashboard. Wrap content in <ce-feedback-sink subject="…">, drop one <ce-feedback-bar item="…"> per item with toggles + ratings + comments inside, and the sink streams to localStorage / HTTP / file / console / custom transport. ce-feedback-heatmap (v0.4) renders a verdict-distribution sparkbar from the same state. Live demo at demo/feedback.html.

UI — form controls (6) — v0.4

ce-button · ce-toggle · ce-checkbox · ce-input · ce-textarea · ce-confirm

Themable form controls with full ARIA semantics: ce-button (primary/secondary/ghost/destructive + loading), ce-toggle (role=switch), ce-checkbox (with aria-checked=mixed), ce-input and ce-textarea (label + help/error + aria-describedby), ce-confirm (inline role=alertdialog yes/no with danger variant).

UI — dashboard primitives (10) — v0.4

ce-status-light · ce-badge · ce-skeleton · ce-stat-group · ce-counter · ce-clock · ce-sparkline · ce-gauge · ce-donut · ce-checklist

Compact dashboard cells: traffic-light status dot, count badge, loading shimmer, KPI grid wrapper, animated ce-counter with rAF easing, live ce-clock (Intl/IANA), inline ce-sparkline (line/area/bar), semicircle ce-gauge (role=meter), categorical ce-donut chart, interactive ce-checklist with localStorage persistence.

UI — rich content (6) — v0.4

ce-abbr · ce-image · ce-file-card · ce-key-value · ce-json · ce-diff

Inline rich content for chat surfaces and reports: focusable ce-abbr with tooltip expansion, lazy ce-image with caption + fallback, ce-file-card attachment chip with type icons, ce-key-value definition-list grid, ce-json pretty-print viewer with collapse + parse-error event, LCS-based ce-diff (unified/split layouts).

Lesson (6)

lesson-frame · lesson-rule · lesson-gap · lesson-quiz · lesson-quickfire · lesson-audio

A machine-readable manifest of every component is exported as COMPONENTS. Internal layout primitives (ce-docs-layout, ce-nav-list, ce-theme-switcher) ship with the package but are filtered out of the published manifest at publish time (see ADR-005).

Design principles

  • Light DOM by default. Components render into the page's DOM, so markdown, Mermaid diagrams, and Chart.js canvases work inside slots. Shadow DOM is opt-in per component where style isolation matters. See ADR-002.
  • Theming via CSS custom properties. No per-component prop explosion. See ADR-003.
  • Zero config on the consumer side. One <script type="module"> from a CDN gets you all tags.
  • Self-describing. Each component ships with a validated *.meta.json describing every prop, event, slot, CSS variable, side effect, and dependency. See ADR-005.
  • Type-safe. Full .d.ts for every component and the manifest.

Documentation

  • Usage guide — plain HTML, bundlers, Vue / React / Svelte, theming, composition patterns, troubleshooting.
  • Architecture — repo layout, component anatomy, build pipeline, theming model.
  • ADRs — framework choice, Light DOM, theming, distribution modes, component meta files.
  • Component meta plan — schema, scripts, migration phases, generator design.

Browser support

Any evergreen browser with native support for customElements, ES modules, and CSS.registerProperty (Chrome / Edge / Firefox / Safari 16.4+).

License

MIT