v1.2.0Latest

Dashboards that look finished with no data

Released September 28, 2026

Clearer surfaces for app pages with a new canvas token, tinted icon tiles, and dashboards, stat cards and tables that stay compact on launch day, when every number is zero.

8 changed
1 fixed

Highlights

Tokens: a new --canvas color (bg-canvas, #F6F7F9 light, #0E0E10 dark) is the page of an app, so white or #1A1A1A bg-surface cards read as cards. The raised elevation's hairline is a step stronger in both themes. Copy the updated tokens from skills/ui-lab/tokens.css (or app/globals.css) when you update.

Changed

admin-dashboard-page: every KPI card keeps one anatomy (a flat baseline where there is no trend, a caption where there is no delta), KPI cards get tinted icon tiles (kpiIcons, kpi.icon, kpi.tone), the revenue line takes chartTone, and with no tasks Needs attention becomes a slim All good strip (attentionEmpty). No revenue, no orders, no products and no activity each shrink to one compact row with copy from labels (new revenueEmpty, revenueEmptyDescription, noComparison). New Launch day example.
app-shell: the inset variant puts the page on the new canvas color, on phones too, so raised cards stand out.
data-table: with no rows to show the empty state stands alone and compact, without column headers spread over nothing; showHeaderWhenEmpty keeps them.
entity-header: new maxActions, for example 1 to keep only the primary button and put the rest in the ⋯ menu.
kpi-dashboard: DashboardWidget takes iconTone for a tinted icon tile, and KPI items take iconTone.
page-header: new maxActions: the most buttons in the row, the rest always in ⋯.
stat-card: the currency symbol reads at the number's size ("$0"; symbolDisplay="muted" keeps the small symbol), a zero change reads No change (flatDelta), iconTone tints the icon tile on its own, and selected gives a pressable card a ring with aria-pressed or aria-current.
toolbar: controls passed as children get their own wrapping row on narrow toolbars and share its width, so they need no fixed widths on phones.

Fixed

table: a sticky header no longer drops over the first row when the table scrolls sideways or inside maxHeight, and a pressable card title can hold its own controls (a copy button) without nesting buttons.

9 items in this release

Changed8

Admin Dashboard Page1.1.0 → 1.2.0Every KPI card keeps one anatomy (a flat baseline where there is no trend, a caption where there is no delta), KPI cards get tinted icon tiles (`kpiIcons`, `kpi.icon`, `kpi.tone`), the revenue line takes `chartTone`, and with no tasks Needs attention becomes a slim All good strip (`attentionEmpty`). No revenue, no orders, no products and no activity each shrink to one compact row with copy from `labels` (new `revenueEmpty`, `revenueEmptyDescription`, `noComparison`). New Launch day example.
App Shell1.0.0 → 1.0.1The inset variant puts the page on the new canvas color, on phones too, so raised cards stand out.
Data Table1.0.1 → 1.1.0With no rows to show the empty state stands alone and compact, without column headers spread over nothing; `showHeaderWhenEmpty` keeps them.
Entity Header1.0.0 → 1.1.0New `maxActions`, for example 1 to keep only the primary button and put the rest in the ⋯ menu.
KPI Dashboard1.0.0 → 1.0.1`DashboardWidget` takes `iconTone` for a tinted icon tile, and KPI items take `iconTone`.
Page Header1.0.0 → 1.1.0New `maxActions`: the most buttons in the row, the rest always in ⋯.
Stat Card1.0.0 → 1.1.0The currency symbol reads at the number's size ("$0"; `symbolDisplay="muted"` keeps the small symbol), a zero change reads No change (`flatDelta`), `iconTone` tints the icon tile on its own, and `selected` gives a pressable card a ring with aria-pressed or aria-current.
Toolbar1.0.0 → 1.0.1Controls passed as children get their own wrapping row on narrow toolbars and share its width, so they need no fixed widths on phones.

Fixed1

Table1.0.0 → 1.0.1A sticky header no longer drops over the first row when the table scrolls sideways or inside maxHeight, and a pressable card title can hold its own controls (a copy button) without nesting buttons.

Highlights

Changed

admin-dashboard-page: every KPI card keeps one anatomy (a flat baseline where there is no trend, a caption where there is no delta), KPI cards get tinted icon tiles (kpiIcons, kpi.icon, kpi.tone), the revenue line takes chartTone, and with no tasks Needs attention becomes a slim All good strip (attentionEmpty). No revenue, no orders, no products and no activity each shrink to one compact row with copy from labels (new revenueEmpty, revenueEmptyDescription, noComparison). New Launch day example.

app-shell: the inset variant puts the page on the new canvas color, on phones too, so raised cards stand out.

data-table: with no rows to show the empty state stands alone and compact, without column headers spread over nothing; showHeaderWhenEmpty keeps them.

entity-header: new maxActions, for example 1 to keep only the primary button and put the rest in the ⋯ menu.

kpi-dashboard: DashboardWidget takes iconTone for a tinted icon tile, and KPI items take iconTone.

page-header: new maxActions: the most buttons in the row, the rest always in ⋯.

stat-card: the currency symbol reads at the number's size ("$0"; symbolDisplay="muted" keeps the small symbol), a zero change reads No change (flatDelta), iconTone tints the icon tile on its own, and selected gives a pressable card a ring with aria-pressed or aria-current.

toolbar: controls passed as children get their own wrapping row on narrow toolbars and share its width, so they need no fixed widths on phones.

9 items in this release

Changed8

Admin Dashboard Page1.1.0 → 1.2.0Every KPI card keeps one anatomy (a flat baseline where there is no trend, a caption where there is no delta), KPI cards get tinted icon tiles (`kpiIcons`, `kpi.icon`, `kpi.tone`), the revenue line takes `chartTone`, and with no tasks Needs attention becomes a slim All good strip (`attentionEmpty`). No revenue, no orders, no products and no activity each shrink to one compact row with copy from `labels` (new `revenueEmpty`, `revenueEmptyDescription`, `noComparison`). New Launch day example.
App Shell1.0.0 → 1.0.1The inset variant puts the page on the new canvas color, on phones too, so raised cards stand out.
Data Table1.0.1 → 1.1.0With no rows to show the empty state stands alone and compact, without column headers spread over nothing; `showHeaderWhenEmpty` keeps them.
Entity Header1.0.0 → 1.1.0New `maxActions`, for example 1 to keep only the primary button and put the rest in the ⋯ menu.
KPI Dashboard1.0.0 → 1.0.1`DashboardWidget` takes `iconTone` for a tinted icon tile, and KPI items take `iconTone`.
Page Header1.0.0 → 1.1.0New `maxActions`: the most buttons in the row, the rest always in ⋯.
Stat Card1.0.0 → 1.1.0The currency symbol reads at the number's size ("$0"; `symbolDisplay="muted"` keeps the small symbol), a zero change reads No change (`flatDelta`), `iconTone` tints the icon tile on its own, and `selected` gives a pressable card a ring with aria-pressed or aria-current.
Toolbar1.0.0 → 1.0.1Controls passed as children get their own wrapping row on narrow toolbars and share its width, so they need no fixed widths on phones.

Fixed1

Table1.0.0 → 1.0.1A sticky header no longer drops over the first row when the table scrolls sideways or inside maxHeight, and a pressable card title can hold its own controls (a copy button) without nesting buttons.