@happyvertical/smrt-ui 0.55.24 → 0.56.0

package/AGENTS.md

@@ -50,6 +50,7 @@ components are exempt — they *are* the primitives.
 | `./data` | `CollectionToolbar`, `CollectionList`/`ContentList`, `DataTable` (footer rows and column `summaries`: [agents/data-table.md](agents/data-table.md)) and their types — a **component barrel**: it re-exports `.svelte` files, so a plain Node `import()` of it throws `ERR_UNKNOWN_FILE_EXTENSION` |
 | `./data-surface` | **Svelte-free**: registry contracts and shared protocol limits (`DATA_SURFACE_MAX_REQUEST_BYTES`, `DATA_SURFACE_IDENTIFIER_MAX_LENGTH`, …). Server adapters must import these from here, not from `./data` — a server entry that reaches the barrel breaks the `smrt` CLI's plain-Node `.smrt/register.js` load (issue #2924) |
 | `./layout` | `Container`, `Grid`, `Header`, `Footer`, `PageHeader`, `EmptyState`, … |
+| `./charts` | Pure `Chart` renderer (`bar`, `line`, `table`, `pie`, `stat`), structural `ChartData`, and minor-unit number formatting; `./charts/format` is Svelte-free |
 | `./calendar` | `CalendarView` (time-zone-aware month/week grids + phone agenda) and its Svelte-free date model (`toEntries`, `layoutMonth`, `layoutWeek`, `dateKeyInZone`, …); deprecated `Calendar`, `DayView` |
 | `./chat` | `MessageBubble`, `ReactionPicker`, `TypingIndicator` |
 | `./forms` | Provider-free fields, choice controls, sliders/ranges, combobox/listbox/multiselect/tags, date/time/file controls, `CameraCapture`/`SignaturePad` capture, plus the transport-neutral control interaction registry |

package/dist/charts/Chart.svelte

@@ -0,0 +1,285 @@
+<script lang="ts">
+/**
+ * Chart widget (#3727, #3888): bars, a line, a plain table, a donut or a single
+ * headline value over labelled values, drawn from the loaded data. Every chart
+ * carries its numbers as text (bar values inline, a visible table for `table`,
+ * a visually hidden table for the line and the donut, the value itself for
+ * `stat`) so it is readable without sight.
+ */
+import { useI18n } from '../i18n/index.js';
+import { formatWidgetValue } from './format.js';
+import { M } from './strings.js';
+import type { ChartData } from './types.js';
+
+export interface Props {
+  /** Validated chart data to render, or null for the empty state. */
+  data: ChartData | null;
+  /** Requested chart presentation; unsupported values fall back to bars. */
+  style?: string;
+  /** Accessible heading shown above the chart. */
+  title?: string;
+  /** Locale used to format displayed numeric values. */
+  locale?: string;
+}
+let {
+  data,
+  style: requestedStyle = 'bar',
+  title = '',
+  locale = 'en',
+}: Props = $props();
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+const { t } = useI18n();
+const MAX_POINTS = 60;
+
+const chart = $derived(isRecord(data) ? data : null);
+const points = $derived.by(() => {
+  if (!chart || !Array.isArray(chart.points)) return [];
+  const out: { label: string; value: number }[] = [];
+  for (const point of chart.points.slice(0, MAX_POINTS)) {
+    if (
+      isRecord(point) &&
+      typeof point.label === 'string' &&
+      typeof point.value === 'number' &&
+      Number.isFinite(point.value)
+    ) {
+      out.push({ label: point.label, value: point.value });
+    }
+  }
+  return out;
+});
+const STYLES = ['bar', 'line', 'table', 'pie', 'stat'] as const;
+const style = $derived(
+  STYLES.find((candidate) => candidate === requestedStyle) ?? 'bar',
+);
+const fmt = (value: number): string =>
+  formatWidgetValue(value, {
+    format: chart?.format ?? 'integer',
+    currency: chart?.currency,
+    locale,
+  });
+const max = $derived(Math.max(0, ...points.map((point) => point.value)));
+const min = $derived(Math.min(0, ...points.map((point) => point.value)));
+const span = $derived(max - min || 1);
+const polyline = $derived(
+  points
+    .map((point, index) => {
+      const x = points.length === 1 ? 50 : (index / (points.length - 1)) * 100;
+      const y = 36 - ((point.value - min) / span) * 32;
+      return `${x.toFixed(2)},${y.toFixed(2)}`;
+    })
+    .join(' '),
+);
+
+// Donut: slices are percentages of the positive total on a circle whose
+// path length is 100, so a segment's dash length is its share.
+const total = $derived(
+  points.reduce((sum, point) => sum + Math.max(0, point.value), 0),
+);
+const slices = $derived.by(() => {
+  let offset = 0;
+  return points.map((point, index) => {
+    const share = total > 0 ? (Math.max(0, point.value) / total) * 100 : 0;
+    const slice = { ...point, index, share, offset };
+    offset += share;
+    return slice;
+  });
+});
+const percent = (share: number): string =>
+  formatWidgetValue(share / 100, { format: 'percent', locale });
+
+// Stat: the latest value, and its change against the one before.
+const latest = $derived(points.at(-1));
+const delta = $derived.by((): number | null => {
+  if (
+    chart &&
+    typeof chart.delta === 'number' &&
+    Number.isFinite(chart.delta)
+  ) {
+    return chart.delta;
+  }
+  const previous = points.at(-2);
+  if (!latest || !previous || previous.value === 0) return null;
+  return ((latest.value - previous.value) / Math.abs(previous.value)) * 100;
+});
+const deltaText = $derived(
+  delta === null || delta === 0
+    ? ''
+    : t(
+        M[
+          delta > 0
+            ? 'ui.overview.metric.change_up'
+            : 'ui.overview.metric.change_down'
+        ],
+        {
+          value: formatWidgetValue(Math.abs(delta) / 100, {
+            format: 'percent',
+            locale,
+          }),
+        },
+      ),
+);
+const summary = $derived(
+  `${title}. ${t(M['ui.overview.chart.summary'], { count: points.length })}`,
+);
+</script>
+
+{#snippet dataTable(hidden: boolean)}
+  <table class={hidden ? 'smrt-chart__table' : 'smrt-chart__data'}>
+    <caption>{t(M['ui.overview.chart.table'])}</caption>
+    <thead>
+      <tr>
+        <th scope="col">{t(M['ui.overview.chart.label_column'])}</th>
+        <th scope="col">{t(M['ui.overview.chart.value_column'])}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each points as point, index (index)}
+        <tr><th scope="row">{point.label}</th><td>{fmt(point.value)}</td></tr>
+      {/each}
+    </tbody>
+  </table>
+{/snippet}
+
+{#if points.length === 0}
+  <p class="smrt-chart__empty" data-smrt-component="Chart">{t(M['ui.overview.no_data'])}</p>
+{:else if style === 'table'}
+  <div class="smrt-chart smrt-chart--table" data-smrt-component="Chart">
+    {@render dataTable(false)}
+  </div>
+{:else if style === 'stat'}
+  {#if latest}
+    <div class="smrt-chart smrt-chart--stat" data-smrt-component="Chart">
+      <p class="smrt-chart__headline">{fmt(latest.value)}</p>
+      <p class="smrt-chart__caption">{latest.label}</p>
+      {#if deltaText}
+        <p class="smrt-chart__delta" data-direction={(delta ?? 0) > 0 ? 'up' : 'down'}>
+          <span aria-hidden="true">{(delta ?? 0) > 0 ? '▲' : '▼'}</span>
+          {deltaText}
+        </p>
+      {/if}
+    </div>
+  {/if}
+{:else if style === 'pie'}
+  {#if total > 0}
+    <div class="smrt-chart smrt-chart--pie" data-smrt-component="Chart">
+      <svg class="smrt-chart__donut" viewBox="0 0 42 42" role="img" aria-label={summary}>
+        {#each slices as slice (slice.index)}
+          {#if slice.share > 0}
+            <circle
+              class="smrt-chart__slice"
+              data-slot={slice.index % 8}
+              cx="21"
+              cy="21"
+              r="15.9155"
+              fill="none"
+              stroke-width="6"
+              pathLength="100"
+              stroke-dasharray="{slice.share} {100 - slice.share}"
+              stroke-dashoffset={-slice.offset}
+              transform="rotate(-90 21 21)"
+            />
+          {/if}
+        {/each}
+      </svg>
+      <ul class="smrt-chart__legend" aria-hidden="true">
+        {#each slices as slice (slice.index)}
+          <li class="smrt-chart__legend-item">
+            <span class="smrt-chart__swatch" data-slot={slice.index % 8}></span>
+            <span class="smrt-chart__label">{slice.label}</span>
+            <span class="smrt-chart__value">{fmt(slice.value)} · {percent(slice.share)}</span>
+          </li>
+        {/each}
+      </ul>
+      {@render dataTable(true)}
+    </div>
+  {:else}
+    <p class="smrt-chart__empty" data-smrt-component="Chart">{t(M['ui.overview.no_data'])}</p>
+  {/if}
+{:else if style === 'line'}
+  <div class="smrt-chart" data-smrt-component="Chart">
+    <svg class="smrt-chart__line" viewBox="0 0 100 40" preserveAspectRatio="none" role="img" aria-label={summary}>
+      <polyline points={polyline} fill="none" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke" />
+    </svg>
+    <p class="smrt-chart__axis" aria-hidden="true">
+      <span>{points[0].label}</span>
+      <span>{points[points.length - 1].label}</span>
+    </p>
+    {@render dataTable(true)}
+  </div>
+{:else}
+  <ul class="smrt-chart__bars" aria-label={summary} data-smrt-component="Chart">
+    {#each points as point, index (index)}
+      <li class="smrt-chart__row">
+        <span class="smrt-chart__label">{point.label}</span>
+        <span class="smrt-chart__track" aria-hidden="true">
+          <span class="smrt-chart__bar" style:inline-size="{max > 0 ? (Math.max(0, point.value) / max) * 100 : 0}%"></span>
+        </span>
+        <span class="smrt-chart__value">{fmt(point.value)}</span>
+      </li>
+    {/each}
+  </ul>
+{/if}
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .smrt-chart { display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-primary); }
+  .smrt-chart__line { inline-size: 100%; block-size: 7rem; overflow: visible; }
+  .smrt-chart__axis { display: flex; justify-content: space-between; margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-large-size, 0.75rem); }
+  .smrt-chart__bars { display: grid; gap: var(--smrt-spacing-2); margin: 0; padding: 0; list-style: none; }
+  .smrt-chart__row { display: grid; grid-template-columns: minmax(4rem, 30%) minmax(0, 1fr) auto; align-items: center; gap: var(--smrt-spacing-2); font-size: var(--smrt-typography-body-medium-size, 0.875rem); color: var(--smrt-color-on-surface); }
+  .smrt-chart__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .smrt-chart__track { display: block; block-size: 0.625rem; border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface-container-high); overflow: hidden; }
+  .smrt-chart__bar { display: block; block-size: 100%; border-radius: inherit; background: var(--smrt-color-primary); }
+  .smrt-chart__value { font-variant-numeric: tabular-nums; color: var(--smrt-color-on-surface-variant); }
+  .smrt-chart__empty { margin: 0; color: var(--smrt-color-on-surface-variant); }
+  .smrt-chart--table { color: var(--smrt-color-on-surface); }
+  .smrt-chart__data { inline-size: 100%; border-collapse: collapse; font-size: var(--smrt-typography-body-medium-size, 0.875rem); }
+  .smrt-chart__data caption { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+  .smrt-chart__data th, .smrt-chart__data td { padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border-block-end: var(--smrt-hairline); text-align: start; }
+  .smrt-chart__data thead th { background: var(--smrt-surface-sunken); color: var(--smrt-color-on-surface-variant); font-weight: var(--smrt-typography-weight-medium, 500); }
+  .smrt-chart__data tbody th { font-weight: inherit; overflow-wrap: anywhere; }
+  .smrt-chart__data td, .smrt-chart__data thead th:last-child { text-align: end; font-variant-numeric: tabular-nums; }
+  .smrt-chart--stat { gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); }
+  .smrt-chart__headline { margin: 0; font-size: var(--smrt-typography-display-small-size, 2rem); font-weight: var(--smrt-typography-weight-medium, 500); line-height: 1.1; font-variant-numeric: tabular-nums; }
+  .smrt-chart__caption { margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-medium-size, 0.875rem); }
+  .smrt-chart__delta { margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-large-size, 0.875rem); }
+  .smrt-chart--pie { grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr); align-items: center; gap: var(--smrt-spacing-4); }
+  .smrt-chart__donut { inline-size: 100%; block-size: auto; }
+  .smrt-chart__slice[data-slot='0'], .smrt-chart__swatch[data-slot='0'] { stroke: var(--smrt-color-primary); background: var(--smrt-color-primary); }
+  .smrt-chart__slice[data-slot='1'], .smrt-chart__swatch[data-slot='1'] { stroke: var(--smrt-color-secondary); background: var(--smrt-color-secondary); }
+  .smrt-chart__slice[data-slot='2'], .smrt-chart__swatch[data-slot='2'] { stroke: var(--smrt-color-tertiary); background: var(--smrt-color-tertiary); }
+  .smrt-chart__slice[data-slot='3'], .smrt-chart__swatch[data-slot='3'] { stroke: var(--smrt-color-info); background: var(--smrt-color-info); }
+  .smrt-chart__slice[data-slot='4'], .smrt-chart__swatch[data-slot='4'] { stroke: var(--smrt-color-primary-container); background: var(--smrt-color-primary-container); }
+  .smrt-chart__slice[data-slot='5'], .smrt-chart__swatch[data-slot='5'] { stroke: var(--smrt-color-secondary-container); background: var(--smrt-color-secondary-container); }
+  .smrt-chart__slice[data-slot='6'], .smrt-chart__swatch[data-slot='6'] { stroke: var(--smrt-color-tertiary-container); background: var(--smrt-color-tertiary-container); }
+  .smrt-chart__slice[data-slot='7'], .smrt-chart__swatch[data-slot='7'] { stroke: var(--smrt-color-info-container); background: var(--smrt-color-info-container); }
+  .smrt-chart__legend { display: grid; gap: var(--smrt-spacing-1); margin: 0; padding: 0; list-style: none; color: var(--smrt-color-on-surface); font-size: var(--smrt-typography-body-medium-size, 0.875rem); }
+  .smrt-chart__legend-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--smrt-spacing-2); }
+  .smrt-chart__swatch { inline-size: 0.75rem; block-size: 0.75rem; border-radius: var(--smrt-radius-small); }
+  .smrt-chart__legend .smrt-chart__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  @media (prefers-reduced-motion: no-preference) {
+    .smrt-chart__slice { transition: stroke-dasharray var(--smrt-duration-normal) var(--smrt-easing-standard), stroke-dashoffset var(--smrt-duration-normal) var(--smrt-easing-standard); }
+    .smrt-chart__bar { transition: inline-size var(--smrt-duration-normal) var(--smrt-easing-standard); }
+  }
+  .smrt-chart__table { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+  @media (forced-colors: active) {
+    .smrt-chart__slice[data-slot='0'], .smrt-chart__swatch[data-slot='0'] { stroke: CanvasText; background: CanvasText; }
+    .smrt-chart__slice[data-slot='1'], .smrt-chart__swatch[data-slot='1'] { stroke: Highlight; background: Highlight; }
+    .smrt-chart__slice[data-slot='2'], .smrt-chart__swatch[data-slot='2'] { stroke: LinkText; background: LinkText; }
+    .smrt-chart__slice[data-slot='3'], .smrt-chart__swatch[data-slot='3'] { stroke: VisitedText; background: VisitedText; }
+    .smrt-chart__slice[data-slot='4'], .smrt-chart__swatch[data-slot='4'] { stroke: ActiveText; background: ActiveText; }
+    .smrt-chart__slice[data-slot='5'], .smrt-chart__swatch[data-slot='5'] { stroke: GrayText; background: GrayText; }
+    .smrt-chart__slice[data-slot='6'], .smrt-chart__swatch[data-slot='6'] { stroke: ButtonText; background: ButtonText; }
+    .smrt-chart__slice[data-slot='7'], .smrt-chart__swatch[data-slot='7'] { stroke: MarkText; background: MarkText; }
+    .smrt-chart__swatch { border: var(--smrt-hairline-strong); }
+    .smrt-chart__slice { stroke-linecap: butt; }
+    .smrt-chart__track { background: Canvas; border: var(--smrt-hairline-strong); }
+    .smrt-chart__bar { background: Highlight; }
+  }
+}
+</style>

package/dist/charts/Chart.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ChartData } from './types.js';
+export interface Props {
+    /** Validated chart data to render, or null for the empty state. */
+    data: ChartData | null;
+    /** Requested chart presentation; unsupported values fall back to bars. */
+    style?: string;
+    /** Accessible heading shown above the chart. */
+    title?: string;
+    /** Locale used to format displayed numeric values. */
+    locale?: string;
+}
+declare const Chart: import("svelte").Component<Props, {}, "">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;
+//# sourceMappingURL=Chart.svelte.d.ts.map

package/dist/charts/Chart.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.svelte.d.ts","sourceRoot":"","sources":["../../src/charts/Chart.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG5C,MAAM,WAAW,KAAK;IACpB,mEAAmE;IACnE,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IACvB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA2MD,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/charts/format.d.ts

@@ -0,0 +1,13 @@
+export type WidgetValueFormat = 'integer' | 'decimal' | 'percent' | 'money';
+export interface FormatWidgetValueOptions {
+    format?: WidgetValueFormat;
+    /** ISO 4217 code for `money` (default USD). */
+    currency?: string;
+    locale: string;
+}
+/**
+ * Format a metric value. `money` takes integer minor units, `percent` takes a
+ * fraction (0.25 is 25%). Non-finite input renders as an en dash.
+ */
+export declare function formatWidgetValue(value: unknown, { format, currency, locale }: FormatWidgetValueOptions): string;
+//# sourceMappingURL=format.d.ts.map

package/dist/charts/format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/charts/format.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE5E,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAYD;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,OAAO,EACd,EAAE,MAAkB,EAAE,QAAgB,EAAE,MAAM,EAAE,EAAE,wBAAwB,GACzE,MAAM,CA4BR"}

package/dist/charts/format.js

@@ -0,0 +1,48 @@
+/**
+ * Number formatting for overview widgets (#3727). Deterministic for a given
+ * locale so a server render and the client hydrate to the same text. Money is
+ * integer minor units end to end (never a decimal in data).
+ */
+import { ISO_4217_MINOR_UNITS } from '../currency.js';
+function currencyMinorDigits(currency) {
+    return ISO_4217_MINOR_UNITS.get(currency.trim().toUpperCase()) ?? 2;
+}
+const EN_DASH = '–';
+function safeLocale(locale) {
+    try {
+        return Intl.getCanonicalLocales(locale)[0] ?? 'en';
+    }
+    catch {
+        return 'en';
+    }
+}
+/**
+ * Format a metric value. `money` takes integer minor units, `percent` takes a
+ * fraction (0.25 is 25%). Non-finite input renders as an en dash.
+ */
+export function formatWidgetValue(value, { format = 'integer', currency = 'USD', locale }) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        return EN_DASH;
+    const tag = safeLocale(locale);
+    switch (format) {
+        case 'money': {
+            const code = /^[A-Za-z]{3}$/.test(currency)
+                ? currency.toUpperCase()
+                : 'USD';
+            const digits = currencyMinorDigits(code);
+            return new Intl.NumberFormat(tag, {
+                style: 'currency',
+                currency: code,
+            }).format(value / 10 ** digits);
+        }
+        case 'percent':
+            return new Intl.NumberFormat(tag, {
+                style: 'percent',
+                maximumFractionDigits: 1,
+            }).format(value);
+        case 'decimal':
+            return new Intl.NumberFormat(tag, { maximumFractionDigits: 2 }).format(value);
+        default:
+            return new Intl.NumberFormat(tag, { maximumFractionDigits: 0 }).format(value);
+    }
+}

package/dist/charts/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Chart } from './Chart.svelte';
+export type { FormatWidgetValueOptions, WidgetValueFormat } from './format.js';
+export { formatWidgetValue } from './format.js';
+export type { ChartData } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/charts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC"}

package/dist/charts/index.js

@@ -0,0 +1,2 @@
+export { default as Chart } from './Chart.svelte';
+export { formatWidgetValue } from './format.js';

package/dist/charts/strings.d.ts

@@ -0,0 +1,10 @@
+export declare const M: {
+    readonly 'ui.overview.no_data': "ui.overview.no_data";
+    readonly 'ui.overview.metric.change_up': "ui.overview.metric.change_up";
+    readonly 'ui.overview.metric.change_down': "ui.overview.metric.change_down";
+    readonly 'ui.overview.chart.summary': "ui.overview.chart.summary";
+    readonly 'ui.overview.chart.table': "ui.overview.chart.table";
+    readonly 'ui.overview.chart.label_column': "ui.overview.chart.label_column";
+    readonly 'ui.overview.chart.value_column': "ui.overview.chart.value_column";
+};
+//# sourceMappingURL=strings.d.ts.map

package/dist/charts/strings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"strings.d.ts","sourceRoot":"","sources":["../../src/charts/strings.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC;;;;;;;;CAQZ,CAAC"}

package/dist/charts/strings.js

@@ -0,0 +1,10 @@
+import { defineMessages } from '../i18n/registry.js';
+export const M = defineMessages({
+    'ui.overview.no_data': 'Nothing to show yet.',
+    'ui.overview.metric.change_up': 'Up {value} from the previous period',
+    'ui.overview.metric.change_down': 'Down {value} from the previous period',
+    'ui.overview.chart.summary': 'Chart with {count} values',
+    'ui.overview.chart.table': 'Chart data',
+    'ui.overview.chart.label_column': 'Label',
+    'ui.overview.chart.value_column': 'Value',
+});

package/dist/charts/types.d.ts

@@ -0,0 +1,13 @@
+import type { WidgetValueFormat } from './format.js';
+/** Transport-neutral chart data. Money values use integer minor units. */
+export interface ChartData {
+    points: {
+        label: string;
+        value: number;
+    }[];
+    format?: WidgetValueFormat;
+    currency?: string;
+    /** Explicit percentage change for a stat; otherwise derived from its last two points. */
+    delta?: number | null;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/charts/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/charts/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAErD,0EAA0E;AAC1E,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC3C,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yFAAyF;IACzF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB"}

package/dist/charts/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/data/DataTable.svelte

@@ -2379,7 +2379,7 @@ $effect(() => {
   }
   .data-table-container[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .data-table-container[data-density='comfortable'] { --smrt-control-target-min: 0px; }
-  .data-table__sort-button { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
+  .data-table__sort-button { min-height: var(--smrt-control-target-min); min-width: var(--smrt-control-target-min); }
   .data-table-container--narrow .data-table { table-layout: fixed; }
   .data-table-container--narrow .data-table__cell { white-space: normal; overflow-wrap: anywhere; }
   .data-table-container--narrow .data-table__sort-button { max-width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; }

package/dist/components/feedback/ConfirmDialog.svelte

@@ -202,7 +202,7 @@ function handleKeydown(e: KeyboardEvent) {
 
   .dialog-content {
     background-color: var(--smrt-color-surface-container-high);
-    border-radius: var(--smrt-radius-3xl, 32px);
+    border-radius: var(--smrt-radius-3xl);
     padding: var(--smrt-spacing-6);
     max-width: 400px;
     width: 100%;

package/dist/components/forms/Radio.svelte

@@ -44,7 +44,7 @@ function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
   input:checked + .radio__mark { border-color: var(--smrt-color-primary); }
   input:checked + .radio__mark::after { transform: scale(1); }
   input:focus-visible + .radio__mark { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
-  .radio { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
+  .radio { min-height: var(--smrt-control-target-min); min-width: var(--smrt-control-target-min); }
 
   /* Table cells: grow vertically only, never into a neighbouring cell. */
   :global(:is(td, th)) .radio::before { inline-size: var(--smrt-radio-box); margin-inline-start: calc(var(--smrt-radio-box) / -2); }

package/dist/components/forms/SegmentedControl.svelte

@@ -261,7 +261,7 @@ useControlRegistration(() => {
 
   .segmented[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .segmented[data-density='comfortable'] { --smrt-control-target-min: 0px; }
-  label { min-height: max(2.5rem, var(--smrt-control-target-min, 0px)); min-width: var(--smrt-control-target-min, 0px); }
+  label { min-height: max(2.5rem, var(--smrt-control-target-min)); min-width: var(--smrt-control-target-min); }
   input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
   /* Forced colors (#3908): system colours where colour alone carries meaning. */
   @media (forced-colors: active) {

package/dist/components/forms/Textarea.svelte

@@ -206,6 +206,6 @@ export function getElement(): HTMLTextAreaElement | null {
 
   .textarea[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .textarea[data-density='comfortable'] { --smrt-control-target-min: 0px; }
-  .textarea { min-height: max(80px, var(--smrt-control-target-min, 0px)); }
+  .textarea { min-height: max(80px, var(--smrt-control-target-min)); }
 }
 </style>

package/dist/components/layout/EmptyState.svelte

@@ -118,7 +118,7 @@ const icons = {
     margin-bottom: 2rem;
     background-color: var(--smrt-color-secondary-container);
     color: var(--smrt-color-on-secondary-container);
-    border-radius: var(--smrt-radius-3xl, 32px); /* M3 extra large shape */
+    border-radius: var(--smrt-radius-3xl); /* M3 extra large shape */
     padding: var(--smrt-spacing-6);
   }
 
@@ -134,7 +134,7 @@ const icons = {
     width: 120px;
     height: 120px;
     margin-bottom: 2.5rem;
-    border-radius: var(--smrt-radius-3xl, 32px);
+    border-radius: var(--smrt-radius-3xl);
     padding: var(--smrt-spacing-8);
   }
 

package/dist/components/nav/FilterChips.svelte

@@ -157,7 +157,7 @@ function handleClick(value: string) {
 
   .filter-chips[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .filter-chips[data-density='comfortable'] { --smrt-control-target-min: 0px; }
-  .filter-chip { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
+  .filter-chip { min-height: var(--smrt-control-target-min); min-width: var(--smrt-control-target-min); }
   /* Forced colors (#3908): system colours where colour alone carries meaning. */
   @media (forced-colors: active) {
     .filter-chip.active { background-color: Highlight; color: HighlightText; border-color: Highlight; }

package/dist/themes/CUSTOM_THEME_GUIDE.md

@@ -331,8 +331,8 @@ Every theme (presets and `createTheme()` output) must define these names. Genera
 `--smrt-<component>-*` knobs are excluded.
 
 - **color** (42): `--smrt-color-background`, `--smrt-color-error`, `--smrt-color-error-container`, `--smrt-color-info`, `--smrt-color-info-container`, `--smrt-color-inverse-on-surface`, `--smrt-color-inverse-surface`, `--smrt-color-on-background`, `--smrt-color-on-error`, `--smrt-color-on-error-container`, `--smrt-color-on-primary`, `--smrt-color-on-primary-container`, `--smrt-color-on-secondary`, `--smrt-color-on-secondary-container`, `--smrt-color-on-success-container`, `--smrt-color-on-surface`, `--smrt-color-on-surface-variant`, `--smrt-color-on-tertiary`, `--smrt-color-on-tertiary-container`, `--smrt-color-on-warning-container`, `--smrt-color-outline`, `--smrt-color-outline-variant`, `--smrt-color-primary`, `--smrt-color-primary-container`, `--smrt-color-scrim`, `--smrt-color-secondary`, `--smrt-color-secondary-container`, `--smrt-color-shadow`, `--smrt-color-success`, `--smrt-color-success-container`, `--smrt-color-surface`, `--smrt-color-surface-container`, `--smrt-color-surface-container-high`, `--smrt-color-surface-container-highest`, `--smrt-color-surface-container-low`, `--smrt-color-surface-container-lowest`, `--smrt-color-surface-dim`, `--smrt-color-surface-variant`, `--smrt-color-tertiary`, `--smrt-color-tertiary-container`, `--smrt-color-warning`, `--smrt-color-warning-container`
-- **control** (4): `--smrt-control-height`, `--smrt-control-height-small`, `--smrt-control-radius`, `--smrt-control-radius-small`
-- **duration** (6): `--smrt-duration-fast`, `--smrt-duration-medium1`, `--smrt-duration-normal`, `--smrt-duration-short2`, `--smrt-duration-short3`, `--smrt-duration-short4`
+- **control** (6): `--smrt-control-height`, `--smrt-control-height-small`, `--smrt-control-radius`, `--smrt-control-radius-small`, `--smrt-control-target-min`, `--smrt-control-weight`
+- **duration** (7): `--smrt-duration-fast`, `--smrt-duration-medium1`, `--smrt-duration-medium2`, `--smrt-duration-normal`, `--smrt-duration-short2`, `--smrt-duration-short3`, `--smrt-duration-short4`
 - **easing** (3): `--smrt-easing-emphasized`, `--smrt-easing-emphasized-decelerate`, `--smrt-easing-standard`
 - **elevation** (5): `--smrt-elevation-1`, `--smrt-elevation-2`, `--smrt-elevation-3`, `--smrt-elevation-4`, `--smrt-elevation-5`
 - **focus** (3): `--smrt-focus-ring-color`, `--smrt-focus-ring-offset`, `--smrt-focus-ring-width`
@@ -340,14 +340,14 @@ Every theme (presets and `createTheme()` output) must define these names. Genera
 - **glass** (4): `--smrt-glass-blur`, `--smrt-glass-saturation`, `--smrt-glass-surface`, `--smrt-glass-surface-strong`
 - **hairline** (4): `--smrt-hairline`, `--smrt-hairline-color`, `--smrt-hairline-strong`, `--smrt-hairline-strong-color`
 - **inset** (1): `--smrt-inset-highlight`
-- **radius** (11): `--smrt-radius-2xl`, `--smrt-radius-extra-large`, `--smrt-radius-extra-small`, `--smrt-radius-full`, `--smrt-radius-large`, `--smrt-radius-lg`, `--smrt-radius-md`, `--smrt-radius-medium`, `--smrt-radius-sm`, `--smrt-radius-small`, `--smrt-radius-xl`
+- **radius** (13): `--smrt-radius-2xl`, `--smrt-radius-3xl`, `--smrt-radius-extra-large`, `--smrt-radius-extra-small`, `--smrt-radius-full`, `--smrt-radius-large`, `--smrt-radius-lg`, `--smrt-radius-md`, `--smrt-radius-medium`, `--smrt-radius-none`, `--smrt-radius-sm`, `--smrt-radius-small`, `--smrt-radius-xl`
 - **scrollbar** (2): `--smrt-scrollbar-thumb`, `--smrt-scrollbar-track`
-- **spacing** (19): `--smrt-spacing-0_5`, `--smrt-spacing-1`, `--smrt-spacing-10`, `--smrt-spacing-11`, `--smrt-spacing-12`, `--smrt-spacing-1_5`, `--smrt-spacing-2`, `--smrt-spacing-2xl`, `--smrt-spacing-3`, `--smrt-spacing-3xl`, `--smrt-spacing-4`, `--smrt-spacing-5`, `--smrt-spacing-6`, `--smrt-spacing-8`, `--smrt-spacing-lg`, `--smrt-spacing-md`, `--smrt-spacing-sm`, `--smrt-spacing-xl`, `--smrt-spacing-xs`
+- **spacing** (20): `--smrt-spacing-0`, `--smrt-spacing-0_5`, `--smrt-spacing-1`, `--smrt-spacing-10`, `--smrt-spacing-11`, `--smrt-spacing-12`, `--smrt-spacing-1_5`, `--smrt-spacing-2`, `--smrt-spacing-2xl`, `--smrt-spacing-3`, `--smrt-spacing-3xl`, `--smrt-spacing-4`, `--smrt-spacing-5`, `--smrt-spacing-6`, `--smrt-spacing-8`, `--smrt-spacing-lg`, `--smrt-spacing-md`, `--smrt-spacing-sm`, `--smrt-spacing-xl`, `--smrt-spacing-xs`
 - **state** (5): `--smrt-state-disabled`, `--smrt-state-dragged`, `--smrt-state-hover`, `--smrt-state-pressed`, `--smrt-state-selected`
 - **surface** (6): `--smrt-surface-control`, `--smrt-surface-ground`, `--smrt-surface-overlay`, `--smrt-surface-panel`, `--smrt-surface-raised`, `--smrt-surface-sunken`
 - **touch** (1): `--smrt-touch-target-min`
-- **typography** (56): `--smrt-typography-body-large-font`, `--smrt-typography-body-large-line-height`, `--smrt-typography-body-large-size`, `--smrt-typography-body-large-tracking`, `--smrt-typography-body-medium-font`, `--smrt-typography-body-medium-line-height`, `--smrt-typography-body-medium-size`, `--smrt-typography-body-medium-tracking`, `--smrt-typography-body-medium-weight`, `--smrt-typography-body-small-font`, `--smrt-typography-body-small-line-height`, `--smrt-typography-body-small-size`, `--smrt-typography-body-small-weight`, `--smrt-typography-display-medium-line-height`, `--smrt-typography-display-medium-size`, `--smrt-typography-display-small-size`, `--smrt-typography-headline-large-line-height`, `--smrt-typography-headline-large-size`, `--smrt-typography-headline-large-weight`, `--smrt-typography-headline-medium-line-height`, `--smrt-typography-headline-medium-size`, `--smrt-typography-headline-medium-weight`, `--smrt-typography-headline-small-font`, `--smrt-typography-headline-small-line-height`, `--smrt-typography-headline-small-size`, `--smrt-typography-headline-small-weight`, `--smrt-typography-label-large-font`, `--smrt-typography-label-large-size`, `--smrt-typography-label-large-tracking`, `--smrt-typography-label-large-weight`, `--smrt-typography-label-medium-font`, `--smrt-typography-label-medium-size`, `--smrt-typography-label-medium-tracking`, `--smrt-typography-label-medium-weight`, `--smrt-typography-label-small-font`, `--smrt-typography-label-small-line-height`, `--smrt-typography-label-small-size`, `--smrt-typography-label-small-tracking`, `--smrt-typography-label-small-weight`, `--smrt-typography-title-large-font`, `--smrt-typography-title-large-line-height`, `--smrt-typography-title-large-size`, `--smrt-typography-title-medium-font`, `--smrt-typography-title-medium-font-family`, `--smrt-typography-title-medium-line-height`, `--smrt-typography-title-medium-size`, `--smrt-typography-title-medium-tracking`, `--smrt-typography-title-medium-weight`, `--smrt-typography-title-small-font`, `--smrt-typography-title-small-size`, `--smrt-typography-title-small-tracking`, `--smrt-typography-title-small-weight`, `--smrt-typography-weight-bold`, `--smrt-typography-weight-medium`, `--smrt-typography-weight-normal`, `--smrt-typography-weight-semibold`
-- **z** (7): `--smrt-z-index-dialog`, `--smrt-z-index-dropdown`, `--smrt-z-index-modal`, `--smrt-z-index-overlay`, `--smrt-z-index-sticky`, `--smrt-z-index-toast`, `--smrt-z-index-tooltip`
+- **typography** (60): `--smrt-typography-body-large-font`, `--smrt-typography-body-large-line-height`, `--smrt-typography-body-large-size`, `--smrt-typography-body-large-tracking`, `--smrt-typography-body-medium-font`, `--smrt-typography-body-medium-line-height`, `--smrt-typography-body-medium-size`, `--smrt-typography-body-medium-tracking`, `--smrt-typography-body-medium-weight`, `--smrt-typography-body-small-font`, `--smrt-typography-body-small-line-height`, `--smrt-typography-body-small-size`, `--smrt-typography-body-small-weight`, `--smrt-typography-display-medium-line-height`, `--smrt-typography-display-medium-size`, `--smrt-typography-display-small-size`, `--smrt-typography-display-small-weight`, `--smrt-typography-headline-large-line-height`, `--smrt-typography-headline-large-size`, `--smrt-typography-headline-large-weight`, `--smrt-typography-headline-medium-font`, `--smrt-typography-headline-medium-line-height`, `--smrt-typography-headline-medium-size`, `--smrt-typography-headline-medium-weight`, `--smrt-typography-headline-small-font`, `--smrt-typography-headline-small-line-height`, `--smrt-typography-headline-small-size`, `--smrt-typography-headline-small-weight`, `--smrt-typography-label-large-font`, `--smrt-typography-label-large-line-height`, `--smrt-typography-label-large-size`, `--smrt-typography-label-large-tracking`, `--smrt-typography-label-large-weight`, `--smrt-typography-label-medium-font`, `--smrt-typography-label-medium-size`, `--smrt-typography-label-medium-tracking`, `--smrt-typography-label-medium-weight`, `--smrt-typography-label-small-font`, `--smrt-typography-label-small-line-height`, `--smrt-typography-label-small-size`, `--smrt-typography-label-small-tracking`, `--smrt-typography-label-small-weight`, `--smrt-typography-title-large-font`, `--smrt-typography-title-large-line-height`, `--smrt-typography-title-large-size`, `--smrt-typography-title-large-weight`, `--smrt-typography-title-medium-font`, `--smrt-typography-title-medium-font-family`, `--smrt-typography-title-medium-line-height`, `--smrt-typography-title-medium-size`, `--smrt-typography-title-medium-tracking`, `--smrt-typography-title-medium-weight`, `--smrt-typography-title-small-font`, `--smrt-typography-title-small-size`, `--smrt-typography-title-small-tracking`, `--smrt-typography-title-small-weight`, `--smrt-typography-weight-bold`, `--smrt-typography-weight-medium`, `--smrt-typography-weight-normal`, `--smrt-typography-weight-semibold`
+- **z** (9): `--smrt-z-index-dialog`, `--smrt-z-index-dropdown`, `--smrt-z-index-loading`, `--smrt-z-index-modal`, `--smrt-z-index-overlay`, `--smrt-z-index-popover`, `--smrt-z-index-sticky`, `--smrt-z-index-toast`, `--smrt-z-index-tooltip`
 
 <!-- smrt-required-tokens:end -->
 

package/dist/themes/required-tokens.generated.json

@@ -47,8 +47,11 @@
     "--smrt-control-height-small",
     "--smrt-control-radius",
     "--smrt-control-radius-small",
+    "--smrt-control-target-min",
+    "--smrt-control-weight",
     "--smrt-duration-fast",
     "--smrt-duration-medium1",
+    "--smrt-duration-medium2",
     "--smrt-duration-normal",
     "--smrt-duration-short2",
     "--smrt-duration-short3",
@@ -76,6 +79,7 @@
     "--smrt-hairline-strong-color",
     "--smrt-inset-highlight",
     "--smrt-radius-2xl",
+    "--smrt-radius-3xl",
     "--smrt-radius-extra-large",
     "--smrt-radius-extra-small",
     "--smrt-radius-full",
@@ -83,11 +87,13 @@
     "--smrt-radius-lg",
     "--smrt-radius-md",
     "--smrt-radius-medium",
+    "--smrt-radius-none",
     "--smrt-radius-sm",
     "--smrt-radius-small",
     "--smrt-radius-xl",
     "--smrt-scrollbar-thumb",
     "--smrt-scrollbar-track",
+    "--smrt-spacing-0",
     "--smrt-spacing-0_5",
     "--smrt-spacing-1",
     "--smrt-spacing-10",
@@ -135,9 +141,11 @@
     "--smrt-typography-display-medium-line-height",
     "--smrt-typography-display-medium-size",
     "--smrt-typography-display-small-size",
+    "--smrt-typography-display-small-weight",
     "--smrt-typography-headline-large-line-height",
     "--smrt-typography-headline-large-size",
     "--smrt-typography-headline-large-weight",
+    "--smrt-typography-headline-medium-font",
     "--smrt-typography-headline-medium-line-height",
     "--smrt-typography-headline-medium-size",
     "--smrt-typography-headline-medium-weight",
@@ -146,6 +154,7 @@
     "--smrt-typography-headline-small-size",
     "--smrt-typography-headline-small-weight",
     "--smrt-typography-label-large-font",
+    "--smrt-typography-label-large-line-height",
     "--smrt-typography-label-large-size",
     "--smrt-typography-label-large-tracking",
     "--smrt-typography-label-large-weight",
@@ -161,6 +170,7 @@
     "--smrt-typography-title-large-font",
     "--smrt-typography-title-large-line-height",
     "--smrt-typography-title-large-size",
+    "--smrt-typography-title-large-weight",
     "--smrt-typography-title-medium-font",
     "--smrt-typography-title-medium-font-family",
     "--smrt-typography-title-medium-line-height",
@@ -177,8 +187,10 @@
     "--smrt-typography-weight-semibold",
     "--smrt-z-index-dialog",
     "--smrt-z-index-dropdown",
+    "--smrt-z-index-loading",
     "--smrt-z-index-modal",
     "--smrt-z-index-overlay",
+    "--smrt-z-index-popover",
     "--smrt-z-index-sticky",
     "--smrt-z-index-toast",
     "--smrt-z-index-tooltip"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.55.24",
+  "version": "0.56.0",
   "smrtJsdoc": "strict",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
@@ -127,6 +127,15 @@
     "./test-support/*": {
       "types": "./dist/test-support/*.d.ts",
       "default": "./dist/test-support/*.js"
+    },
+    "./charts": {
+      "types": "./dist/charts/index.d.ts",
+      "svelte": "./dist/charts/index.js",
+      "import": "./dist/charts/index.js"
+    },
+    "./charts/format": {
+      "types": "./dist/charts/format.d.ts",
+      "import": "./dist/charts/format.js"
     }
   },
   "files": [
@@ -155,7 +164,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@happyvertical/smrt-types": "0.55.24",
+    "@happyvertical/smrt-types": "0.56.0",
     "esm-env": "^1.2.2"
   },
   "peerDependencies": {