Compact dashboard
Named operational metrics, a complete chart and an actionable native records table.
stable · light DOM · 4.0.0. Light DOM retains static content, native semantics, label relationships and host composition without duplicating controls.
Live variants
default
Delivery overview
Synthetic local fixture
- Active projects
- 24
- Ready for review
- 7
- Components used
- 148
| Week | Tasks |
|---|---|
| Week 1 | 24 |
| Week 2 | 36 |
| Project | Status |
|---|---|
| ✓ Ready | |
| ◌ In progress |
No projects available.
<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@4.0.0import '@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.
Copy the complete implementation
npx --package=@j3w1/ui@4.0.0 j3w1-ui copy compact-dashboard --out ./vendor/j3w1/compact-dashboardThe 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
Compact dashboard compact-dashboard
Named operational metrics, a complete chart and an actionable native records table.
Report an issue with this component
Tokens
Focus a role to inspect its values; follow its link for persistent usage and source details.
| Part | Role | Value | Use |
|---|---|---|---|
root.bg | color.surface.defaultapproveduse | #0d0707 | D-041 surface.default: color.primitive.modern.panel. |
root.text | color.text.defaultapproveduse | #e99499 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
root.border | color.border.controlapproveduse | #c81a1a | D-041 owner correction: red control and floating-frame borders, distinct from rose text. |
heading.text | color.text.brightapproveduse | #ffa2a7 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
secondary.text | color.text.mutedapproveduse | #d4868b | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
control.bg | color.action.secondary.bgobserveduse | rgb(0 0 0 / 0%) | Secondary button has no fill. |
control.text | color.action.secondary.textapproveduse | #ffa2a7 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
control.border | color.action.secondary.borderapproveduse | #986f72 | D-041 action.secondary.border: color.primitive.modern.control. |
control.bg-hover | color.action.secondary.hover-bgobserveduse | #630f0d | Secondary button hover. |
control.bg-active | color.action.secondary.pressed-bgobserveduse | #420f0c | Secondary button pressed. |
control.border-active | color.border.activeobserveduse | #e53935 | Active or focused control border. |
control.focus | color.interaction.focus.ringobserveduse | #e53935 | 1px dashed focus ring on controls and rows. |
dependency.role-border-width-default | border.width.defaultobserveduse | 1px | Every border is 1px. |
dependency.role-color-border-divider | color.border.dividerapproveduse | #482b2b | D-041 border.divider: color.primitive.modern.divider. |
dependency.role-color-surface-chrome | color.surface.chromeapproveduse | #000000 | D-041 surface.chrome: color.primitive.ink.0. |
dependency.role-density-comfortable-control-height | density.comfortable.control-heightobserveduse | 32px | |
dependency.role-density-compact-control-height | density.compact.control-heightobserveduse | 24px | |
dependency.role-focus-offset | focus.offsetobserveduse | -2px | outline-offset for controls. |
dependency.role-font-size-h2 | font.size.h2observeduse | 16px | |
dependency.role-radius-none | radius.noneobserveduse | 0px | The only radius. Nothing is rounded. |
dependency.role-space-12 | space.12observeduse | 12px | |
dependency.role-space-8 | space.8observeduse | 8px |
State matrix
Every declared state and combination, statically rendered; the default cell is live. Sizes: compact, comfortable (switch with the density control above).
| State | Default | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
default | Delivery overviewSynthetic local fixture
No projects available. | ||||||||||||
loading | |||||||||||||
empty | |||||||||||||
focus-visible |
Purpose
A small operational overview of caller data; it fetches nothing and infers no business health.
Anatomy
Parts as listed in the anatomy.
States
| State | Visual | Non-colour channel |
|---|---|---|
| default | Square metric panels, readable tables. Its buttons are the secondary button (button.md). | Metric names, exact values, status text. |
| loading | Busy boundary; existing content kept. | aria-busy and host-provided loading status. |
| empty | Explicit absence of records. | Empty message; a zero metric differs from an unknown one. |
| focus-visible | Dashed action outline. | Native keyboard focus. |
Keyboard
As in the key table; nothing else is bound.
Accessibility
Metrics stay term/value pairs, tables are labelled and all chart data stays visible. No colour-only health score. Busy status never implies a completed refresh. The host words unknown metrics; never show them silently as zero.
Portability
Follows the shared component defaults in spec/portability.md (section
“Shared component defaults”).
Non-examples
Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.
Contrast report
7 declared pairs measured on resolved sRGB values with the WCAG 2.x formula; 0 waived (decorative only), 0 failing. A pass is a design target for the named role, not an application-wide conformance claim.
| Pair | State | Kind | Foreground | Background | Ratio | Min | Result |
|---|---|---|---|---|---|---|---|
| compact-dashboard default text | default | text | color.text.default #e99499 | color.surface.default #0d0707 | 8.72 | 4.5 | pass |
| compact-dashboard default border | default | ui | color.border.control #c81a1a | color.surface.default #0d0707 | 3.44 | 3 | pass |
| Primary content | — | text | color.text.default #e99499 | color.surface.default #0d0707 | 8.72 | 4.5 | pass |
| Supporting content | — | text | color.text.muted #d4868b | color.surface.default #0d0707 | 7.22 | 4.5 | pass |
| Control boundary | — | ui | color.border.control #c81a1a | color.surface.default #0d0707 | 3.44 | 3 | pass |
| Button label | — | text | color.action.secondary.text #ffa2a7 | color.surface.default #0d0707 | 10.45 | 4.5 | pass |
| Button label on hover | — | text | color.action.secondary.text #ffa2a7 | color.action.secondary.hover-bg #630f0d | 6.84 | 4.5 | pass |
Keys
| Key | Action |
|---|---|
| Tab / Shift+Tab | Visit record actions and any scrollable data region. |
| Enter / Space | Request the chosen record through an event. |
For agents
Component JSON ·Implementation brief ·Build a task kit ·
Related: chart description-list table
Stress fixtures: FX-320 FX-360 FX-ZOOM-200 FX-I18N FX-RTL FX-RM FX-HC FX-TOUCH FX-DENSITY FX-STATE-MATRIX