J3W1 / DESIGN SYSTEM

Compact dashboard

Named operational metrics, a complete chart and an actionable native records table.

stable · LIGHT DOM · 1.1.0

Light DOM retains static content, native semantics, label relationships and host composition without duplicating controls.

Standalone example ↗Copy file manifest Canonical JSON Vue gallery ↗Prepare an agent kit →

Live variants

default

Delivery overview

Synthetic local fixture

Active projects: 24
Ready for review: 7
Components used: 148

Completed tasks

Task data
Week	Tasks
Week 1	24
Week 2	36

Projects
Project	Status
	✓ Ready
	◌ In progress

<j3w1-compact-dashboard id="example-compact-dashboard-default"><section class="compact-dashboard" aria-label="Delivery overview"><header><h3>Delivery overview</h3><p>Synthetic local fixture</p></header><dl class="compact-dashboard-metrics"><div><dt>Active projects</dt><dd>24</dd></div><div><dt>Ready for review</dt><dd>7</dd></div><div><dt>Components used</dt><dd>148</dd></div></dl><j3w1-chart><figure class="chart"><figcaption>Completed tasks</figcaption><svg viewBox="0 0 300 120" role="img" aria-label="Week 1: 24; Week 2: 36"><g class="chart-series"><rect x="30" y="50" width="80" height="60"></rect><rect x="180" y="20" width="80" height="90"></rect></g></svg><table><caption>Task data</caption><thead><tr><th scope="col">Week</th><th scope="col">Tasks</th></tr></thead><tbody><tr><th scope="row">Week 1</th><td>24</td></tr><tr><th scope="row">Week 2</th><td>36</td></tr></tbody></table></figure></j3w1-chart><table data-records=""><caption>Projects</caption><thead><tr><th scope="col">Project</th><th scope="col">Status</th></tr></thead><tbody><tr><td><button class="compact-dashboard-control" type="button" data-record="atlas" data-demo-focus-target="">Atlas library</button></td><td>✓ Ready</td></tr><tr><td><button class="compact-dashboard-control" type="button" data-record="orion">Orion workspace</button></td><td>◌ In progress</td></tr></tbody></table><p data-dashboard-empty="" hidden="">No projects available.</p></section></j3w1-compact-dashboard>

Install and register

Use the exact version. If npm publication is pending, install the release tarball from the installation guide.

npm install --save-exact @j3w1/ui@1.1.0

import '@j3w1/ui/tokens.css';
import '@j3w1/ui/styles/compact-dashboard.css';
import '@j3w1/ui/register/compact-dashboard';

Insert the maintained markup above after loading these imports. Its native children provide accessible names and form behavior; the empty custom tag alone does not create a control.

Vue SFC, React, Astro and plain HTML integration →

Copy the complete implementation

npx --package=@j3w1/ui@1.1.0 j3w1-ui copy compact-dashboard --out ./vendor/j3w1/compact-dashboard

The CLI verifies every file before writing and refuses overwrites. Serve the output over HTTP and open index.html. Keep its modules, CSS, tokens and licence notices together.

Public API

attributes

Name	Type / signature	Meaning
`disabled`	`CustomEvent`	Disable the native controls owned by this instance.
`loading`	`CustomEvent`	Mark the primary control busy and prevent duplicate activation.

properties

Name	Type / signature	Meaning
`disabled`	`boolean`	Delegates disabled state to native children.
`name`	`string`	Native control name; application form keys remain explicit.

methods

Name	Type / signature	Meaning
`refresh`	`(): void`	Reconnect behavior after replacing native child structure.
`focus`	`(options?: FocusOptions): void`	Focus the first usable native control.

events

Name	Type / signature	Meaning
`j3w1-open-record`	`CustomEvent`	Request an existing record.

Dependencies and verification

Registered components: chart. Style dependencies: table, chart.

Package presence establishes an available implementation. Actual passes depend on the tested artifact and environment. Read specification execution evidence; read packed-consumer evidence; inspect the complete state matrix.

Full implementation manifest, API and token dependency closure

Canonical specification

Purpose

Compose a small operational overview from named metrics, a complete chart and a records table. All figures are caller data. Synthetic fixtures are labelled; the component does not fetch data or infer business health.

Anatomy

metrics: Terms and values pair each metric name with its number.
activity: Chart retains its full textual data table.
records: Native rows include named actions and explicit status words.

States

State	Presentation	Non-colour channel
default	Square metric panels and readable tables.	Metric names, exact values and status text.
loading	Busy boundary with existing content retained.	aria-busy and host-provided loading status.
empty	Explicit absence of records.	Empty message; metric zero differs from unknown.
focus-visible	Dashed action outline.	Native keyboard focus.

Keyboard

Tab / Shift+Tab: Visit record actions and any scrollable data region.
Enter / Space: Request the chosen record through an event.

Accessibility

Keep metrics as term/value pairs, tables labelled and all chart data visible. Do not use a color-only health score. Busy status does not manufacture a completed refresh. The host decides how unknown metrics are described, rather than silently displaying zero.

Portability

Wrap labels and actions without changing source order. Use logical spacing in RTL. Preserve native target sizes at both densities; only bounded data regions may scroll horizontally. Use equivalent native semantics and approved roles; record any unsupported behavior as a mapping deviation. The host owns application data, persistence, permissions and services.

Non-examples

Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.