@momoi-labs/kiso 0.9.0 → 0.10.0

package/kiso/docs/components/README.md

@@ -29,6 +29,11 @@ behavioral reference where one exists.
 
 ## Data
 
+- [Chart](chart.md): Framed lines and stacked areas with synchronized inspection and exact values.
+- [ChartLegend](chart-legend.md): Tabular series summaries.
+- [Meter / Progress](meter.md): Measurements against limits and task completion.
+- [BarGauge](bar-gauge.md): Labelled bars on a shared scale.
+
 - [CommandPalette](command-palette.md): Searches and runs global actions or navigation from a keyboard-first overlay.
 - [Dot](dot.md): Adds a decorative status mark beside readable text.
 - [DropdownMenu](dropdown-menu.md): Presents contextual actions anchored to a specific object or trigger.
@@ -42,6 +47,10 @@ behavioral reference where one exists.
 
 ## Navigation and structure
 
+- [Disclosure](disclosure.md): Native collapsible sections.
+- [TimeRangeControl](time-range-control.md): Presets and exact UTC collection windows.
+- [DashboardGrid](dashboard-grid.md): Responsive twelve-column panel layout.
+
 - [AppShell / ApplicationShell](app-shell.md): Provides low-level columns or the complete shared application frame (sidebar console or top-bar surface).
 - [BrandMark](brand-mark.md): Decorative letter or icon beside a product name.
 - [Breadcrumb](breadcrumb.md): Shows the current location within a hierarchy.

package/kiso/docs/components/bar-gauge.md

@@ -0,0 +1,29 @@
+# BarGauge
+
+## Purpose and anatomy
+
+Compare labelled measurements on horizontal bars with a value column.
+Each row composes [Meter](meter.md). All rows share a positive finite `max`
+and start at zero. Give the group a descriptive `label`, including its unit.
+Use [Chart](chart.md) when the task requires history.
+
+## Data, states, and behavior
+
+Rows have a stable key, label, and numeric or null value. `formatValue` applies
+the same unit and precision to every known value. Preserve row order across
+refreshes so a reader can compare changes. Bars clip at their bounds while
+text retains the actual number. A missing row value reads "Not collected";
+zero draws an empty track. An empty group reads "No measurements."
+
+## Accessibility
+
+The group has an accessible name; each measured row has Meter semantics and
+its own name and value text. Labels and numbers remain visible. There is no
+hover requirement, animation, or keyboard interaction. Wrap long labels and
+keep values aligned. Color does not encode the identity of a row.
+
+## Tokens and implementation
+
+Use Meter's track and fill tokens, `--spacing-md` between rows, and
+`--spacing-sm` within each row. No separate charting or Radix primitive is
+required. The old `.bars` vertical mini-bars are unrelated and stay compatible.

package/kiso/docs/components/chart-legend.md

@@ -0,0 +1,42 @@
+# ChartLegend
+
+## Purpose and anatomy
+
+A native summary table for a [Chart](chart.md), available without hovering.
+Each row has the series' numbered label and stroke sample, then min, max,
+arithmetic average, and current. The visible caption names the metric and unit.
+
+## Data and states
+
+Accept the same `data` and `series` as the chart. Keep ordering and slots
+identical. Min, max, and average use finite measurements only. Current is the
+measurement at the final timestamp. Missing statistics read "Not collected";
+zero remains zero. An empty window retains the named series and headers.
+
+`formatValue` controls all summary cells. Use one unit and precision across
+the table. The chart's exact-values table preserves unrounded source data.
+The legend alone is a summary, not a replacement for the full sample table.
+
+## Accessibility and behavior
+
+Use native table, caption, column headers, and row headers. Numeric cells align
+to the end with tabular figures. By default rows are informational. With `onHighlightSeriesChange`, series
+labels become buttons with pressed state from `highlightSeries`. Selection
+emphasizes a series without hiding values. The table scrolls horizontally inside its frame at narrow
+widths. Numbered labels, highlighting, and the exact sample table supplement color.
+
+## Tokens and implementation
+
+Text uses `--color-foreground` and `--color-muted-foreground`. Borders use
+`--color-border`; spacing uses `--spacing-xs` and `--spacing-sm`. Series
+swatches consume the same five semantic chart roles as Chart. There is no
+Radix primitive; use a native table.
+
+## Display forms
+
+`variant="table"` is the default. `inline` wraps series labels and current
+values into a short row. `sidebar` places them in a column beside the plot,
+falling below it on narrow screens. Both use native description lists.
+`activeTimestamp` selects the sidebar sample, otherwise it shows the last
+sample. `formatTime` formats its timestamp. A missing measurement stays
+"Not collected". Sidebar changes use a polite live region.

package/kiso/docs/components/chart.md

@@ -0,0 +1,120 @@
+# Chart
+
+## Purpose
+
+Read several metric series across a collection window. pg-probe needs to
+correlate CPU, memory, disk, and database activity at the same instant.
+[Issue #93](https://github.com/momoi-labs/blueprint/issues/93) records that need.
+Use [Sparkline](sparkline.md) for a small, single-series trend.
+
+## Anatomy and forms
+
+A named figure contains axes, horizontal grid lines, a plot, an inspection
+readout, [ChartLegend](chart-legend.md), and a disclosure of exact samples.
+`line` is the default. `stacked-area` shows nonnegative contributions to a
+total. No gradients, curves that overshoot observations, or animation.
+
+One to five series share a unit and timestamp axis. Put the unit in the figure
+label, such as "CPU by state (%)". Give each series a unique key and label.
+An optional slot from 1 to 5 fixes its color and numbered label across
+panels. Slots must be unique within a chart. Keep ascending slot order in stacks. Never encode health with a slot.
+
+In standard layout, `height` defaults to 200 pixels. Width follows the parent. Axes and their labels
+remain visible. `min` and `max` establish comparable scales across panels;
+otherwise lines use their extent and stacks start at zero. Stacks reject
+negative values. Use lines for signed data.
+
+## Data and gaps
+
+`data` contains `{ timestamp, values }`, where timestamps are epoch
+milliseconds in strictly increasing order. Supply every expected collection
+timestamp, including slots the collector missed. Values are keyed by series.
+A null, absent, or nonfinite measurement is unavailable, never zero. The
+component does not infer a sampling interval or interpolate missing samples.
+
+Lines break at gaps. A stack breaks across all series when any contribution
+is missing, because its total is unknown. The readout and tables retain known
+contributions at that timestamp. An isolated sample draws a point.
+
+The summary ignores missing samples for min, max, and arithmetic mean. Current
+means the final timestamp, including an unavailable value. It never silently
+substitutes an older sample. Statistics describe the supplied window only.
+
+## Interaction and accessibility
+
+The figure has a visible caption and an accessible name. Tab focuses the plot;
+Left and Right inspect adjacent samples through Recharts' accessibility layer.
+Pointer hover and touch inspect the same readout. The floating readout or sidebar names the
+selected timestamp and every series, including "Not collected" values.
+
+Pass the same `syncId` to related charts to synchronize by timestamp. Products
+must supply the same expected timestamp grid and window to that group. Array
+positions alone do not establish correspondence. Panels retain their own
+series and scales.
+
+Series use continuous strokes. Numbered labels, per-series highlighting,
+and the exact table provide identification beyond color. Select a legend
+label with pointer, touch, Enter, or Space to highlight that series; select
+it again to clear. The active label is underlined and exposes `aria-pressed`.
+Other series stay in the plot and in every readout. The
+"View exact values" disclosure exposes every sample as a native table, with
+full UTC timestamps and unrounded source numbers. Include units in the chart
+label; formatters change display text, never the exact table. Scrolling stays
+inside the table at narrow widths.
+
+Tab reaches the exact-values summary. Enter or Space opens it. No essential
+information requires hover, color discrimination, animation, or a live
+announcement on every background refresh. Keep series labels descriptive.
+
+## States
+
+- Empty or wholly unavailable data: retain the caption, summary, exact table,
+  and plot height; show "No collected samples in this window."
+- Partial collection: draw gaps and preserve the available numbers.
+- One sample: show a point and the tables.
+- Loading: compose a [Skeleton](skeleton.md) at the expected plot height.
+- Error: compose an [Alert](alert.md) with the cause and retry action. Label
+  retained data as stale. An empty chart is not an error message.
+
+## Tokens and implementation
+
+Series use `--color-chart-1`, `--color-chart-2`, `--color-chart-3`,
+`--color-chart-4`, and `--color-chart-5`. Axes use
+`--color-muted-foreground`; grid lines use `--color-border`; the crosshair
+uses `--color-border-strong`. Focus uses `--color-focus`. The readout uses
+`--color-elevated-surface`, `--color-foreground`, and `--shadow-md`.
+
+## Presentation options
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `variant` | `line`, `stacked-area` | `line` |
+| `layout` | `standard`, `compact`, `split` | `standard` |
+| `legend` | `table`, `inline`, `sidebar` | `table` |
+| `highlightSeries` | A series key or null | Local selection |
+
+Standard uses a 200-pixel plot; compact uses 165 pixels and tighter spacing.
+Split gives each series a labelled 90-pixel lane on one shared numeric scale,
+with synchronized timestamps. Explicit `height` overrides the plot or lane
+height. Split accepts only line charts; combining it with stacked-area throws
+an error because a stack must retain one common plot.
+
+Table keeps min, max, average, and current visible. Inline shows current values
+in a wrapping legend. Sidebar shows current values at rest and the inspected
+instant on hover, keyboard navigation, or touch, without a floating readout.
+At narrow widths it moves below the plot. All forms keep the exact table.
+
+`highlightSeries` makes highlighting controlled; pass null to clear it. Pair
+it with `onHighlightSeriesChange` to update selection from the legend. Omitting
+it enables local selection. Unknown keys produce no highlight, including when
+a series disappears after a data change. Highlighting changes emphasis only;
+it never removes contributions or changes the stack's total or scale.
+
+Keyboard instructions remain available through the plot's accessible
+description instead of taking permanent space above every plot.
+
+The React component composes Recharts `ComposedChart`, `Line`, `Area`, axes,
+and Tooltip, with animation disabled and `connectNulls={false}`. Synchronization
+uses `syncMethod="value"`. See the [Recharts API](https://recharts.github.io/en-US/api/AreaChart/).
+The existing `.chart` SVG helpers remain compatible; the component frame uses
+`.framed-chart` to avoid changing older SVG consumers.

package/kiso/docs/components/dashboard-grid.md

@@ -0,0 +1,28 @@
+# DashboardGrid
+
+## Purpose and anatomy
+
+Arrange metric panels in a responsive twelve-column grid. DashboardGrid owns
+layout; DashboardPanel owns a column span and wraps a Card or other widget.
+The grid adds no visual panel treatment or ARIA roles of its own.
+
+## Sizes and responsive behavior
+
+Panel `span` accepts 3, 4, 6 (default), 8, or 12. Above 1024 pixels it uses that
+many columns. At 1024 pixels and below, panels use six columns, except full
+width panels which keep twelve. At 640 pixels and below, every panel uses one
+full-width column. Internal tables may scroll; the page must not overflow.
+
+## States and accessibility
+
+Each widget owns its loading, empty, stale, and error states. Reserve its
+space with Skeleton while loading. The layout never reorders DOM content or
+adds tab stops. Reading order, focus order, and visual order stay aligned.
+Give sections meaningful headings and each chart its own name.
+
+## Tokens and composition
+
+Use `--spacing-lg` for gaps. Span is layout metadata, not a new spacing token.
+Compose [Card](card.md), [Chart](chart.md), [Disclosure](disclosure.md), and
+[TimeRangeControl](time-range-control.md) under the
+[Dashboard pattern](../patterns/dashboard.md). CSS Grid needs no dependency.

package/kiso/docs/components/disclosure.md

@@ -0,0 +1,29 @@
+# Disclosure
+
+## Purpose and anatomy
+
+Collapse a related section without leaving the page. A native `details`
+contains a `summary` and content region. `summary` provides the visible name;
+children provide the section content. Do not put links or buttons inside the
+summary. Multiple sections may remain open independently.
+
+## States and behavior
+
+Closed is the default. Pass native `open` to start open. The browser maintains
+open and closed states and dispatches `onToggle`. Closed content remains in
+the document but is hidden and removed from keyboard navigation. Preserve
+application state inside the content; opening does not fetch data by itself.
+
+## Accessibility
+
+Use native semantics and the browser's disclosure marker. Tab reaches the
+summary; Enter or Space toggles it and focus stays there. Content follows the
+summary in DOM order. Keep heading levels appropriate to the surrounding page.
+On a coarse pointer, the summary is at least the minimum touch target height.
+Do not animate the content or add redundant expanded-state ARIA.
+
+## Tokens and implementation
+
+Spacing uses `--spacing-sm`; the summary uses `--type-weight-medium`.
+Focus uses `--color-focus`. Touch targets use `--size-touch-min` only inside
+`@media (pointer: coarse)`. Native details needs no Radix dependency.

package/kiso/docs/components/meter.md

@@ -0,0 +1,37 @@
+# Meter and Progress
+
+## Purpose
+
+Meter shows a measurement against a known limit, such as 64 connections out
+of 100. Progress shows completion of work. A task's completion is not a meter.
+
+## Anatomy and states
+
+Both have a visible label, a value above a thin horizontal track. Meter takes
+`value`, `min` (default 0), and `max` (default 100). Progress takes an optional
+`value` and positive `max` (default 100). `valueText` supplies units or context.
+
+Bounds must be finite and ordered. Clip the filled width and ARIA value to the
+bounds, while retaining the original measurement in the visible value and
+accessible value text. Do not hide an over-limit measurement by changing it
+to the maximum. Compose a labelled Badge if that measurement is a warning.
+
+A null or nonfinite Meter value reads "Not collected" with an unfilled hatch
+track. It has no fabricated numeric ARIA state. An omitted, null, or nonfinite
+Progress value means indeterminate work, reads "In progress", and has a static
+hatch track. Zero is a known empty track; the maximum is a full track.
+
+## Accessibility
+
+Known measurements use `role="meter"` with name, minimum, maximum, current
+value, and value text. Progress uses `role="progressbar"`; omit its current
+value while indeterminate. Neither adds a tab stop or announces every update.
+Keep the label and value visible for touch and assistive technology.
+No information depends on animation or color.
+
+## Tokens and implementation
+
+The 6px track combines `--spacing-xs` and `--spacing-2xs`, with `--radius-xs`, and `--color-secondary`.
+Meter fill uses `--color-secondary-foreground`; Progress uses `--color-chart-1`. Labels use `--type-size-label` and
+`--color-foreground`. Unknown tracks use the existing hatch tokens. This
+contract adds `.meter-track`; legacy `.progress` rules remain compatible.

package/kiso/docs/components/sparkline.md

@@ -44,12 +44,14 @@ line.
 
 | State | Behavior |
 | --- | --- |
-| fewer than two samples | Renders nothing. A flat rule across a cell reads as a border, not as a measurement. Keep the cell's number; reserve height with the surrounding layout. |
+| fewer than two finite measurements | Renders nothing. A flat rule across a cell reads as a border, not as a measurement. Keep the cell's number; reserve height with the surrounding layout. |
 | loading | [Skeleton](skeleton.md) at the same height the Sparkline will occupy. |
 | error | Show the last known number as text; the shape is optional, the value is not. |
 
-The component takes plain values and does not model gaps. A series with holes
-is the caller's data problem; interpolate or truncate before passing it in.
+The component accepts numbers and null gaps on an evenly spaced window.
+Null and nonfinite values break the line and fill; they never become zero.
+Keep every expected sample position. Domains use finite measurements only.
+Do not interpolate or remove missing positions before passing them in.
 
 ## Accessibility
 
@@ -78,7 +80,7 @@ No keymap and no tab stop. A Sparkline is never an action.
 ## When NOT to use
 
 - Analysis that needs an axis, a legend, or crosshair reading. A framed,
-  interactive chart is a separate, still-deferred contract.
+  interactive [Chart](chart.md) has its own contract.
 - Multi-series overlays. Stack several Sparklines only as separate rows with
   their own labels, never as one drawing with a homemade legend.
 - A single value with no history. Use [Stat](stat.md) alone.
@@ -89,5 +91,4 @@ No Radix primitive exists for this. The component composes Recharts
 `ResponsiveContainer`, `AreaChart`, and `Area` with animation, dots, and
 axes off. Color reaches the path through `currentColor` from the
 `.sparkline` rules in `ui.css`; never pass a hex value or invent a
-categorical palette. The framed `.chart` rules in `ui.css` stay reserved for
-the later interactive chart contract.
+categorical palette. Use [Chart](chart.md) for categorical multi-series data.

package/kiso/docs/components/time-range-control.md

@@ -0,0 +1,42 @@
+# TimeRangeControl
+
+## Purpose and anatomy
+
+Select the visible interval within a collected run. A labelled Button opens a
+compact Popover with a vertical preset list. Custom range reveals exact
+start/end fields. This control scopes an
+artifact's timestamps, not a live polling schedule or date-only calendar.
+
+## Data and behavior
+
+`bounds` and controlled `value` are `{ from, to }` epoch-millisecond pairs.
+Both must be finite, valid dates with start before end; value must fit inside
+bounds. `onValueChange` receives an applied range. The consumer filters panels
+and recalculates their summaries from that interval.
+
+Presets default to the last 5, 15, and 30 minutes relative to the end of the
+run. Durations are positive milliseconds; clip their start to the run start.
+"Entire run" restores bounds. Selecting a preset applies it and closes the
+popover. Custom fields are explicitly UTC, including milliseconds; local
+machine timezone and daylight-saving changes cannot shift the selection.
+
+Editing a field does not apply it. Apply validates that the start precedes
+the end and both fit inside the collection window. Invalid input keeps the
+popover open with field-associated feedback. Escape or outside dismissal
+cancels edits. Reopening starts with the applied value. `disabled` disables
+the trigger while a run is unavailable.
+
+## Accessibility
+
+Compose [Button](button.md), [Popover](popover.md), and labelled
+[Input](input.md) controls. Tab follows the visible preset buttons or custom form fields and Apply. Native
+date/time inputs retain platform keyboard behavior. Escape dismisses; Radix
+restores focus to the trigger. Errors use an alert and field descriptions.
+The trigger shows a short interval and UTC. Its accessible name includes
+both full timestamps; visible dates appear when the interval crosses a day. Touch can use every action.
+
+## Tokens and implementation
+
+Use existing Button, Input, and Popover tokens. Use `--spacing-xs` between
+presets and `--spacing-md` between regions. The trigger wraps long ranges;
+the popover fits the viewport. No new calendar, timezone, or date dependency.

package/kiso/docs/evolution.md

@@ -10,7 +10,6 @@ the system needs them. This is the honest roadmap for those choices.
 | --- | --- | --- |
 | **Component implementation code** | V1 ships Markdown contracts and tokens, not React components. Keeping the specification separate lets product needs shape an implementation instead of freezing an assumed API. This boundary was set in [epic #3](https://github.com/momoi-labs/blueprint/issues/3). | When repeated product implementations make a stable reference API evident. Build it as Kiso v2 or in a separate `kiso-ui` repository, using shadcn/Radix behavior adapted to Kiso rather than copied unchanged. |
 | **Radio / RadioGroup** | Select and Switch cover the v1 choice cases, so [epic #3](https://github.com/momoi-labs/blueprint/issues/3) did not add another selection primitive without a product need. | When a product genuinely needs mutually exclusive selection from a small, fixed set whose options should remain visible. |
-| **Interactive framed charts** | [#84](https://github.com/momoi-labs/blueprint/issues/84) shipped [Sparkline](components/sparkline.md) for the single-series metric shapes products actually had. No product has yet needed an axis, a legend, or crosshair reading. | When a product needs exploratory reading of a series: axes, multi-series overlays, or hover inspection. Settle the framed `.chart` contract then. |
 | **Figma Tokens Studio integration** | [Epic #2](https://github.com/momoi-labs/blueprint/issues/2) kept the token pipeline focused on its committed outputs. Tokens Studio is a Figma plugin workflow built through Style Dictionary and `@tokens-studio/sd-transforms`, not a standalone emitter. | When design-to-code synchronization through Figma becomes a real team workflow rather than a hypothetical integration. |
 | **DTCG 2025.10 Resolver module** | The multiple-context and theme Resolver considered in [epic #2](https://github.com/momoi-labs/blueprint/issues/2) is a preview draft marked “do not implement.” V1 uses an explicit, stable theme model instead. | When the Resolver module reaches stable status and Kiso has a concrete context or theme problem it would solve. |
 | **`--shadow-lg`** | The elevation scale intentionally stops at `--shadow-sm` and `--shadow-md`; [#25](https://github.com/momoi-labs/blueprint/issues/25) fixed component references without inventing a larger elevation. | When a real overlay or hierarchy cannot be expressed clearly with `--shadow-md`. Propose the token in the source, then regenerate its outputs. |
@@ -21,6 +20,12 @@ the system needs them. This is the honest roadmap for those choices.
 
 ## Accepted additions
 
+[Issue #93](https://github.com/momoi-labs/blueprint/issues/93) opens the framed
+chart deferral with pg-probe collection data. Chart, ChartLegend, Meter,
+Progress, BarGauge, Disclosure, TimeRangeControl, DashboardGrid, and Sparkline
+gaps now cover that workflow. Five categorical slots cover the demonstrated
+maximum. More slots require a product case and palette review.
+
 The growth model below is not theory. What it has produced so far:
 
 | What | Evidence | Where |

package/kiso/docs/patterns/dashboard.md

@@ -16,7 +16,7 @@ tables, or dedicated tool routes.
 
 | Region | Compose with | Role |
 | --- | --- | --- |
-| Page framing | [PageHeader](../components/page-header.md) | Dashboard title; optional time-range or environment [Select](../components/select.md); optional refresh [IconButton](../components/icon-button.md) / [Button](../components/button.md) |
+| Page framing | [PageHeader](../components/page-header.md) | Dashboard title; optional [TimeRangeControl](../components/time-range-control.md) or environment [Select](../components/select.md); optional refresh [IconButton](../components/icon-button.md) / [Button](../components/button.md) |
 | Widget unit | [Card](../components/card.md) | One concern per Card (metric cluster, short table, status list) |
 | Status | [Badge](../components/badge.md) | Compact health/severity labels inside Cards |
 | Dense lists | [Table / DataTable](../components/table.md) | Short "needs attention" tables — still compose Search/EmptyState/Pagination only when those behaviors are truly present |
@@ -36,8 +36,11 @@ semantic colors, focus `--color-focus`. Prefer quiet surfaces and strong
 hierarchy ([principles](../principles.md)).
 
 [Sparkline](../components/sparkline.md) carries metric shape inside Cards and
-table cells; it composes like any other widget payload. An interactive framed
-chart remains deferred.
+table cells; it composes like any other widget payload. Use
+[Chart](../components/chart.md) with its legend and exact-values table for
+exploratory metrics. Share a timestamp grid, time range, and syncId across
+related panels. Compose [DashboardGrid](../components/dashboard-grid.md) and
+[Disclosure](../components/disclosure.md) for responsive panel groups.
 
 ## Flow
 

package/kiso/docs/tokens.md

@@ -311,3 +311,29 @@ Published releases expose the artifacts as `@momoi-labs/kiso/tokens.css`,
 `@momoi-labs/kiso/tokens.d.ts`. Kiso's Markdown contracts are available below
 `@momoi-labs/kiso/contracts/` so consumers can pin the contracts and generated
 tokens to the same version.
+
+## Categorical chart colors
+
+Issue #93 adds `--color-chart-1` through `--color-chart-5` for series identity.
+The roles derive from accent.base, status.success, status.warning, status.info,
+and status.danger, in that order. Their meaning inside a chart is categorical,
+never health or severity. Existing status roles keep their meaning elsewhere.
+
+Each slot meets 3:1 on background, surface, and elevated-surface in both
+themes, enforced by the contrast gate. Lines use full-opacity strokes; area
+fills are secondary at 0.2 opacity. Every series also has a numbered label,
+an interactive highlight, a legend value, and exact sample values. Do not
+use filled bands or hue alone to identify data. Five slots cover pg-probe;
+the epic's proposed eight-slot headroom is deferred until needed.
+
+The palette gate also checks Oklab lightness bands (0.40 to 0.65 in light mode,
+0.70 to 0.90 in dark mode), chroma of at least 0.08, all-pair normal-vision
+distance of at least 0.10, and adjacent-pair distance of at least 0.05 under
+full protanopia and deuteranopia simulation. These are product regression
+floors, not accessibility standards or a guarantee of hue discrimination.
+Keep the canonical slot order in stacks; changing adjacency needs review.
+
+The calculation uses [Oklab](https://bottosson.github.io/posts/oklab/) and
+[Machado's simulation model](https://pubmed.ncbi.nlm.nih.gov/19834201/).
+Run `node scripts/check-chart-palette.mjs` for both themes. Numbered labels,
+highlighting, and tables remain required even when these checks pass.

package/kiso/ui.css

@@ -1010,7 +1010,7 @@ pre code { display: block; overflow-x: auto; padding: 0; background: none; borde
 .logview .log-error{ color: var(--color-danger-on-dark); }
 .logview .log-info { color: var(--color-info-on-dark); }
 
-/* Sparkline / bar chart placeholders, neutral-only per the brand rules. */
+/* Legacy compact bars remain neutral. Framed charts use categorical roles. */
 .bars { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
 .bars i { flex: 1; background: var(--color-border-strong); border-radius: var(--radius-xs); }
 .bars i.on { background: var(--color-primary); }
@@ -1131,10 +1131,8 @@ pre::after {
 .splitter::after { content: ""; position: absolute; inset-block: 0; inset-inline: -3px; }
 .splitter:hover, .splitter.dragging { background: var(--color-ring); }
 
-/* Chart frame: deliberate presentation, one featured series in primary,
-   gridlines at border strength. The area is the line color at low opacity, a
-   flat token fill: no document-level gradient id for a component to forget
-   to define. Supporting, incidental series belong in `.sparkline` instead. */
+/* Legacy single-series SVG helpers. Interactive metrics use .framed-chart
+   below; these selectors remain compatible with existing consumers. */
 .chart { width: 100%; height: 200px; display: block; overflow: visible; color: var(--color-primary); }
 .chart .grid { stroke: var(--color-border); stroke-width: 1; }
 .chart .line { fill: none; stroke: currentColor; stroke-width: 1.5; }
@@ -1152,3 +1150,76 @@ pre::after {
 .sparkline { display: block; width: 100%; color: var(--color-border-strong); }
 .sparkline.primary { color: var(--color-primary); }
 .sparkline svg { display: block; overflow: visible; }
+
+/* Metrics dashboard, issue #93. Series colors encode identity, not status. */
+.framed-chart { margin: 0; display: grid; gap: var(--spacing-sm); min-width: 0; }
+.chart-help { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.chart-plot { width: 100%; min-width: 0; font-size: var(--type-size-metadata); }
+.chart-plot :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
+.chart-empty { display: grid; place-items: center; padding: var(--spacing-md); color: var(--color-muted-foreground); }
+.chart-table-scroll { max-width: 100%; overflow-x: auto; }
+.chart-table { width: 100%; border-collapse: collapse; font-size: var(--type-size-label); font-variant-numeric: tabular-nums; }
+.chart-table caption { text-align: start; color: var(--color-muted-foreground); padding-block: var(--spacing-xs); }
+.chart-table th, .chart-table td { padding: var(--spacing-xs) var(--spacing-sm); border-bottom: 1px solid var(--color-border); white-space: nowrap; text-align: end; }
+.chart-table th:first-child { text-align: start; }
+.chart-table th { font-weight: var(--type-weight-medium); }
+.chart-series-label { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
+.chart-series-label svg { flex: none; }
+.chart-inspection { padding: var(--spacing-sm); border: 1px solid var(--color-border); background: var(--color-elevated-surface); color: var(--color-foreground); box-shadow: var(--shadow-md); font-size: var(--type-size-label); }
+.chart-inspection dl { display: grid; grid-template-columns: auto auto; gap: var(--spacing-xs) var(--spacing-md); margin-block: var(--spacing-xs) 0; }
+.chart-inspection dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
+.meter, .bar-gauge { display: grid; gap: var(--spacing-sm); min-width: 0; }
+.bar-gauge { gap: var(--spacing-md); }
+.meter-label { display: flex; justify-content: space-between; gap: var(--spacing-md); font-size: var(--type-size-label); }
+.meter-label > :last-child { text-align: end; font-variant-numeric: tabular-nums; }
+.meter-track { height: calc(var(--spacing-xs) + var(--spacing-2xs)); border-radius: var(--radius-xs); background-color: var(--color-secondary); overflow: hidden; }
+.meter-track > span { display: block; height: 100%; background: var(--color-secondary-foreground); }
+.disclosure { min-width: 0; }
+.disclosure > summary { padding: var(--spacing-sm) 0; cursor: pointer; font-weight: var(--type-weight-medium); }
+.disclosure > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
+.disclosure-content { padding: var(--spacing-sm) 0; }
+.time-range-trigger { justify-self: start; width: fit-content; max-width: 100%; white-space: normal; height: auto; min-height: var(--size-control-md); text-align: start; }
+.time-range-content { width: min(26rem, calc(100vw - 2 * var(--spacing-md))); }
+.time-range-presets { display: grid; gap: var(--spacing-xs); }
+.time-range-presets > button { height: auto; min-height: var(--size-touch-min); display: flex; align-items: flex-start; flex-direction: column; text-align: start; }
+.time-range-presets small { color: var(--color-muted-foreground); font-weight: var(--type-weight-regular); }
+.meter[data-slot="progress"] .meter-track > span { background: var(--color-chart-1); }
+.dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spacing-lg); }
+.dashboard-panel { grid-column: span var(--dashboard-span, 6); min-width: 0; }
+@media (max-width: 1024px) {
+  .dashboard-panel { grid-column: span 6; }
+  .dashboard-panel[data-span="12"] { grid-column: span 12; }
+}
+@media (max-width: 640px) {
+  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
+  .dashboard-panel, .dashboard-panel[data-span="12"] { grid-column: 1; }
+}
+@media (pointer: coarse) {
+  .disclosure > summary { min-height: var(--size-touch-min); display: list-item; align-content: center; }
+}
+
+/* Chart presentation options. Exact values remain available in every layout. */
+.chart-body, .chart-plots { min-width: 0; }
+.framed-chart[data-legend="sidebar"] .chart-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 180px); gap: var(--spacing-lg); }
+.framed-chart[data-layout="compact"] { gap: var(--spacing-xs); }
+.chart-lane + .chart-lane { margin-top: var(--spacing-sm); }
+.chart-lane-heading { display: flex; justify-content: space-between; gap: var(--spacing-sm); font-size: var(--type-size-label); font-variant-numeric: tabular-nums; }
+.chart-legend { font-size: var(--type-size-label); }
+.chart-legend-caption { color: var(--color-muted-foreground); overflow-wrap: anywhere; }
+.chart-legend dl { margin: 0; }
+.chart-legend dl > div { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); }
+.chart-legend dd { margin: 0; font-variant-numeric: tabular-nums; }
+.chart-legend-inline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-md); }
+.chart-legend-inline dl { display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-lg); }
+.chart-legend-sidebar { border-left: 1px solid var(--color-border); padding-left: var(--spacing-md); }
+.chart-legend-sidebar dl { display: grid; gap: var(--spacing-sm); margin-top: var(--spacing-sm); }
+.chart-series-button { display: inline-flex; align-items: center; padding: var(--spacing-2xs) 0; border: 0; background: transparent; color: var(--color-foreground); font: inherit; text-align: start; cursor: pointer; }
+.chart-series-button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: var(--spacing-2xs); }
+.chart-series-button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
+@media (max-width: 640px) {
+  .framed-chart[data-legend="sidebar"] .chart-body { grid-template-columns: minmax(0, 1fr); }
+  .chart-legend-sidebar { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-border); padding-top: var(--spacing-sm); }
+}
+@media (pointer: coarse) {
+  .chart-series-button { min-height: var(--size-touch-min); min-width: var(--size-touch-min); }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momoi-labs/kiso",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Kiso design-system contracts and generated design tokens",
   "license": "MIT",
   "repository": {

package/tokens/build/tokens.css

@@ -96,6 +96,11 @@
   --color-warning-on-dark: #efc05b;
   --color-danger-on-dark: #f5807f;
   --color-info-on-dark: #75c4fa;
+  --color-chart-1: var(--color-accent-base);
+  --color-chart-2: var(--color-status-success);
+  --color-chart-3: var(--color-status-warning);
+  --color-chart-4: var(--color-status-info);
+  --color-chart-5: var(--color-status-danger);
   --font-heading: Inter, system-ui, sans-serif;
   --font-body: Inter, system-ui, sans-serif;
   --font-mono: JetBrains Mono, ui-monospace, monospace;

package/tokens/build/tokens.d.ts

@@ -172,6 +172,16 @@ export const semanticWarningOnDark: string;
 export const semanticDangerOnDark: string;
 /** Info on a permanently dark surface (log view, terminal). Theme-invariant on purpose: the surface does not follow color-scheme, so neither can the text. */
 export const semanticInfoOnDark: string;
+/** Categorical chart series 1. Identity only, never status. Pair with its numbered label, interactive highlighting, and exact values. */
+export const semanticChart1: string;
+/** Categorical chart series 2. Identity only, never status. Pair with its numbered label, interactive highlighting, and exact values. */
+export const semanticChart2: string;
+/** Categorical chart series 3. Identity only, never status. Pair with its numbered label, interactive highlighting, and exact values. */
+export const semanticChart3: string;
+/** Categorical chart series 4. Identity only, never status. Pair with its numbered label, interactive highlighting, and exact values. */
+export const semanticChart4: string;
+/** Categorical chart series 5. Identity only, never status. Pair with its numbered label, interactive highlighting, and exact values. */
+export const semanticChart5: string;
 /** Heading family. Inter, same as body; headings differentiate by size and weight. */
 export const fontHeading: string;
 /** Body family. Inter for interface text. */

package/tokens/build/tokens.json

@@ -93,6 +93,11 @@
   "semantic-warning-on-dark": {"colorSpace":"srgb","components":[0.9373,0.7529,0.3569],"hex":"#efc05b"},
   "semantic-danger-on-dark": {"colorSpace":"srgb","components":[0.9608,0.502,0.498],"hex":"#f5807f"},
   "semantic-info-on-dark": {"colorSpace":"srgb","components":[0.4588,0.7686,0.9804],"hex":"#75c4fa"},
+  "semantic-chart-1": {"colorSpace":"srgb","components":[0.3569,0.2471,0.7686],"hex":"#5b3fc4"},
+  "semantic-chart-2": {"colorSpace":"srgb","components":[0.3569,0.8235,0.5843],"hex":"#5bd295"},
+  "semantic-chart-3": {"colorSpace":"srgb","components":[0.9373,0.7529,0.3569],"hex":"#efc05b"},
+  "semantic-chart-4": {"colorSpace":"srgb","components":[0.4588,0.7686,0.9804],"hex":"#75c4fa"},
+  "semantic-chart-5": {"colorSpace":"srgb","components":[0.9608,0.502,0.498],"hex":"#f5807f"},
   "font-heading": ["Inter","system-ui","sans-serif"],
   "font-body": ["Inter","system-ui","sans-serif"],
   "font-mono": ["JetBrains Mono","ui-monospace","monospace"],

package/tokens/build/tokens.scss

@@ -95,6 +95,11 @@ $semantic-danger-foreground: #151411; // Text and icons on a danger fill. Invert
 $semantic-warning-on-dark: #efc05b; // Warning on a permanently dark surface (log view, terminal). Theme-invariant on purpose: the surface does not follow color-scheme, so neither can the text.
 $semantic-danger-on-dark: #f5807f; // Danger on a permanently dark surface (log view, terminal). Theme-invariant on purpose: the surface does not follow color-scheme, so neither can the text.
 $semantic-info-on-dark: #75c4fa; // Info on a permanently dark surface (log view, terminal). Theme-invariant on purpose: the surface does not follow color-scheme, so neither can the text.
+$semantic-chart-1: #5b3fc4; // Categorical chart series 1. Identity only, never status. Pair with its numbered label, interactive highlighting, and exact values.
+$semantic-chart-2: #5bd295; // Categorical chart series 2. Identity only, never status. Pair with its numbered label, interactive highlighting, and exact values.
+$semantic-chart-3: #efc05b; // Categorical chart series 3. Identity only, never status. Pair with its numbered label, interactive highlighting, and exact values.
+$semantic-chart-4: #75c4fa; // Categorical chart series 4. Identity only, never status. Pair with its numbered label, interactive highlighting, and exact values.
+$semantic-chart-5: #f5807f; // Categorical chart series 5. Identity only, never status. Pair with its numbered label, interactive highlighting, and exact values.
 $font-heading: Inter, system-ui, sans-serif; // Heading family. Inter, same as body; headings differentiate by size and weight.
 $font-body: Inter, system-ui, sans-serif; // Body family. Inter for interface text.
 $font-mono: 'JetBrains Mono', ui-monospace, monospace; // Monospace family. Code and machine-readable values (hashes, identifiers). Numeric tables use body with tabular figures, not mono.