@happyvertical/smrt-ui 0.55.23 → 0.56.0

package/AGENTS.md

@@ -47,9 +47,10 @@ components are exempt — they *are* the primitives.
 | `./playground` | shared-host previews for the complete foundation catalog; rendered inside the active preset and color scheme |
 | `./ui` | `Button`, `Card`, `Badge`, `Avatar`, `Chip`, `Skeleton`, `Tooltip`, `Dropdown`/`Menu`, `Popover`, `Disclosure`, `Accordion`, `Tree`, `Pagination`, … |
 | `./feedback` | `Alert`, `ToastViewport`, `Modal`, `Drawer`/`Sheet`, `ConfirmDialog`, `LoadingOverlay`, `Progress`, `Meter`, `Spinner`, phone surfaces `PhoneSheet` / `WorkingStrip` and the `swipeDismiss` action |
-| `./data` | `CollectionToolbar`, `CollectionList`/`ContentList`, `DataTable` and their types — a **component barrel**: it re-exports `.svelte` files, so a plain Node `import()` of it throws `ERR_UNKNOWN_FILE_EXTENSION` |
+| `./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/README.md

@@ -1192,8 +1192,10 @@ pnpm verify:pack
 
 Set `<ThemeProvider density="touch">` for floor tablets and phones, or set
 `density="touch"` on Input, Select, Textarea, Checkbox, Switch, RadioGroup,
-Button (including links), FilterChips, SegmentedControl, or DataTable. DataTable
-applies density to its sort buttons. Density is independent of existing `size`
+Button (including links), FilterChips, SegmentedControl, Pagination, or
+DataTable. DataTable applies density to its sort buttons and passes it to its
+pager; Pagination raises every page and First/Previous/Next/Last control (links
+or buttons) to the target size. Density is independent of existing `size`
 props, including native Input/Select sizes. Omitted density inherits; explicitly
 setting `density="comfortable"` opts that control out and keeps its usual size.
 RadioGroup expands each option's clickable label, and Checkbox/Switch expand

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

@@ -36,6 +36,10 @@ import {
   resolveDataTableLayout,
 } from './DataTableLayout.js';
 import { responsiveColumns } from './DataTableResponsive.js';
+import {
+  buildDataTableSummaryRow,
+  isNumericSummary,
+} from './DataTableSummaries.js';
 import {
   maximumDataTableVirtualScrollTop,
   resolveDataTableVirtualWindow,
@@ -56,7 +60,8 @@ import type {
 } from './types.js';
 import { defaultSort, getNestedValue } from './types.js';
 
-const { t } = useI18n();
+const i18n = useI18n();
+const { t } = i18n;
 
 interface ExtendedProps<T> extends DataTableProps<T> {
   /** Global cell renderer - takes precedence over column.cell */
@@ -67,7 +72,7 @@ interface ExtendedProps<T> extends DataTableProps<T> {
 
 let {
   data = [],
-  columns = [],
+  columns: declaredColumns = [],
   rowKey,
   agentAddressable = false,
   selectable = false,
@@ -94,6 +99,8 @@ let {
   toolbar,
   footer,
   structuralRows = [],
+  summaries,
+  summaryLabel,
   visibleColumnIds,
   loading = false,
   refreshing = false,
@@ -125,6 +132,18 @@ let {
 
 const dataTableId = $props.id();
 
+// A `sum` / `avg` summary marks a numeric column: right-aligned unless the
+// column says otherwise, so figures and their total line up.
+const columns = $derived(
+  summaries
+    ? declaredColumns.map((column) =>
+        column.align === undefined && isNumericSummary(summaries[column.id])
+          ? { ...column, align: 'right' as const }
+          : column,
+      )
+    : declaredColumns,
+);
+
 function legacyModes(): DataTableModes {
   return {
     filtering: modes?.filtering ?? 'local',
@@ -870,9 +889,22 @@ const visibleColumns = $derived(dataTableLayout.columns);
 const dataBodyStructuralRows = $derived(
   structuralRows.filter((row) => row.kind !== 'footer'),
 );
-const footerStructuralRows = $derived(
-  structuralRows.filter((row) => row.kind === 'footer'),
+const summaryRow = $derived.by(() =>
+  buildDataTableSummaryRow(
+    filteredRows.map(({ row }) => row),
+    visibleColumns.map((entry) => entry.column),
+    summaries,
+    {
+      id: `${dataTableId}-summary`,
+      label: summaryLabel ?? t(M['ui.data_table.total']),
+      locale: i18n.locale,
+    },
+  ),
 );
+const footerStructuralRows = $derived([
+  ...structuralRows.filter((row) => row.kind === 'footer'),
+  ...(summaryRow ? [summaryRow] : []),
+]);
 const structuralRowCount = $derived(
   dataBodyStructuralRows.length +
     footerStructuralRows.length +
@@ -1918,7 +1950,7 @@ $effect(() => {
     {#if canScrollRight}<span>{t(M['ui.data_table.more_columns'])} →</span>{/if}
   </div>
 {/if}
-{#if tableState.pageSize && totalPages && totalPages > 1}<Pagination currentPage={tableState.page} {totalPages} onPageChange={handlePageChange} aria-label={t(M['ui.data_table.pagination'])} />{/if}
+{#if tableState.pageSize && totalPages && totalPages > 1}<Pagination currentPage={tableState.page} {totalPages} {density} onPageChange={handlePageChange} aria-label={t(M['ui.data_table.pagination'])} />{/if}
 
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
@@ -2347,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/data/DataTable.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/data/DataTable.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AACH,OAAO,EAAa,KAAK,OAAO,EAAiB,MAAM,QAAQ,CAAC;AAoChE,OAAO,KAAK,EACV,eAAe,EAEf,cAAc,EAGf,MAAM,YAAY,CAAC;AAIpB,UAAU,aAAa,CAAC,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IAClD,+DAA+D;IAC/D,IAAI,CAAC,EAAE,OAAO,CACZ;QAAC;YAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;YAAC,GAAG,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,OAAO,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE;KAAC,CACxE,CAAC;CACH;AAYC,iBAAS,QAAQ,CAAC,CAAC;WA6oDQ,aAAa,CAAC,CAAC,CAAC;;;;;EAAgH;AAC7J,cAAM,iBAAiB,CAAC,CAAC;IACrB,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5X,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3H,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,SAAS,EAAE,qBAAmC,CAAC;AACnC,KAAK,SAAS,CAAC,CAAC,IAAI,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AACxD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/data/DataTable.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AACH,OAAO,EAAa,KAAK,OAAO,EAAiB,MAAM,QAAQ,CAAC;AAwChE,OAAO,KAAK,EACV,eAAe,EAEf,cAAc,EAGf,MAAM,YAAY,CAAC;AAIpB,UAAU,aAAa,CAAC,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IAClD,+DAA+D;IAC/D,IAAI,CAAC,EAAE,OAAO,CACZ;QAAC;YAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;YAAC,GAAG,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,OAAO,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE;KAAC,CACxE,CAAC;CACH;AAYC,iBAAS,QAAQ,CAAC,CAAC;WA0qDQ,aAAa,CAAC,CAAC,CAAC;;;;;EAAgH;AAC7J,cAAM,iBAAiB,CAAC,CAAC;IACrB,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5X,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3H,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,SAAS,EAAE,qBAAmC,CAAC;AACnC,KAAK,SAAS,CAAC,CAAC,IAAI,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AACxD,eAAe,SAAS,CAAC"}

package/dist/components/data/DataTableSummaries.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Column summaries for `DataTable` (`summaries` prop): a footer row with a
+ * count, sum or average per column, or a caller-computed string.
+ *
+ * Pure and Svelte-free so the arithmetic is Node-tested. Sums never leave
+ * integers while every summed value is a safe integer: money in integer minor
+ * units stays in minor units until the column's `summaryFormat` turns it into
+ * text, so a footer never adds floating-point cents. A sum that would leave
+ * the safe-integer range is refused (`null`, an empty cell) rather than
+ * rounded.
+ */
+import type { DataTableColumn, DataTableStructuralRow } from './types.js';
+/** A built-in aggregate. */
+export type DataTableSummaryKind = 'sum' | 'count' | 'avg';
+/** A built-in aggregate, or a function that renders the cell from the rows. */
+export type DataTableSummary<T> = DataTableSummaryKind | ((rows: readonly T[]) => string);
+/** Summary per column id. Columns without an entry get an empty footer cell. */
+export type DataTableSummaries<T> = Readonly<Record<string, DataTableSummary<T>>>;
+/** What a column's `summaryFormat` is told about the value it formats. */
+export interface DataTableSummaryFormatContext {
+    kind: DataTableSummaryKind;
+    columnId: string;
+    /** The table's active locale. */
+    locale?: string;
+}
+/** True for the aggregates whose cells are numbers (right-aligned by default). */
+export declare function isNumericSummary(summary: unknown): boolean;
+/**
+ * Sum of the finite numeric values of `column` (numeric strings count too).
+ * Integer-only input stays exact and returns `null` past
+ * `Number.MAX_SAFE_INTEGER`; `null` too when no row has a number.
+ */
+export declare function sumDataTableColumn<T>(rows: readonly T[], column: DataTableColumn<T>): number | null;
+/** Mean of the finite numeric values of `column`; `null` when there are none. */
+export declare function averageDataTableColumn<T>(rows: readonly T[], column: DataTableColumn<T>): number | null;
+/** The raw value of one summary: a number for the aggregates, text for a function. */
+export declare function summarizeDataTableColumn<T>(rows: readonly T[], column: DataTableColumn<T>, summary: DataTableSummary<T>): number | string | null;
+/** Default text of an aggregate: `Intl.NumberFormat` in the table's locale. */
+export declare function formatDataTableSummary(value: number, context: DataTableSummaryFormatContext): string;
+export interface DataTableSummaryRowOptions {
+    /** Structural row id (default `summary`). */
+    id?: string;
+    /** Row label, announced and shown in the first column when it has no summary. */
+    label: string;
+    locale?: string;
+}
+/**
+ * The footer row for `summaries` over `rows`, as a `footer` structural row
+ * (`DataTable` renders it in `<tfoot>`). `null` when no visible column has a
+ * summary. Each aggregate goes through the column's `summaryFormat`, else
+ * {@link formatDataTableSummary}; a function summary's text is used as is.
+ */
+export declare function buildDataTableSummaryRow<T>(rows: readonly T[], columns: readonly DataTableColumn<T>[], summaries: DataTableSummaries<T> | undefined, options: DataTableSummaryRowOptions): DataTableStructuralRow<T> | null;
+//# sourceMappingURL=DataTableSummaries.d.ts.map

package/dist/components/data/DataTableSummaries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableSummaries.d.ts","sourceRoot":"","sources":["../../../src/components/data/DataTableSummaries.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAG1E,4BAA4B;AAC5B,MAAM,MAAM,oBAAoB,GAAG,KAAK,GAAG,OAAO,GAAG,KAAK,CAAC;AAE3D,+EAA+E;AAC/E,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAC1B,oBAAoB,GACpB,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;AAErC,gFAAgF;AAChF,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,QAAQ,CAC1C,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CACpC,CAAC;AAEF,0EAA0E;AAC1E,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,oBAAoB,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,kFAAkF;AAClF,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAE1D;AAMD;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,IAAI,EAAE,SAAS,CAAC,EAAE,EAClB,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,GACzB,MAAM,GAAG,IAAI,CAef;AAED,iFAAiF;AACjF,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,IAAI,EAAE,SAAS,CAAC,EAAE,EAClB,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,GACzB,MAAM,GAAG,IAAI,CAUf;AAeD,sFAAsF;AACtF,wBAAgB,wBAAwB,CAAC,CAAC,EACxC,IAAI,EAAE,SAAS,CAAC,EAAE,EAClB,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,EAC1B,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAC3B,MAAM,GAAG,MAAM,GAAG,IAAI,CAMxB;AAED,+EAA+E;AAC/E,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,6BAA6B,GACrC,MAAM,CAQR;AAED,MAAM,WAAW,0BAA0B;IACzC,6CAA6C;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,EACxC,IAAI,EAAE,SAAS,CAAC,EAAE,EAClB,OAAO,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,EACtC,SAAS,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,SAAS,EAC5C,OAAO,EAAE,0BAA0B,GAClC,sBAAsB,CAAC,CAAC,CAAC,GAAG,IAAI,CAgClC"}

package/dist/components/data/DataTableSummaries.js

@@ -0,0 +1,124 @@
+import { getNestedValue } from './types.js';
+/** True for the aggregates whose cells are numbers (right-aligned by default). */
+export function isNumericSummary(summary) {
+    return summary === 'sum' || summary === 'avg';
+}
+function cellValue(row, column) {
+    return getNestedValue(row, String(column.accessor ?? column.id));
+}
+/**
+ * Sum of the finite numeric values of `column` (numeric strings count too).
+ * Integer-only input stays exact and returns `null` past
+ * `Number.MAX_SAFE_INTEGER`; `null` too when no row has a number.
+ */
+export function sumDataTableColumn(rows, column) {
+    let total = 0;
+    let seen = false;
+    let integers = true;
+    for (const row of rows) {
+        const value = toNumber(cellValue(row, column));
+        if (value === null)
+            continue;
+        seen = true;
+        integers &&= Number.isInteger(value);
+        total += value;
+        if (integers ? !Number.isSafeInteger(total) : !Number.isFinite(total)) {
+            return null;
+        }
+    }
+    return seen ? total : null;
+}
+/** Mean of the finite numeric values of `column`; `null` when there are none. */
+export function averageDataTableColumn(rows, column) {
+    let total = 0;
+    let count = 0;
+    for (const row of rows) {
+        const value = toNumber(cellValue(row, column));
+        if (value === null)
+            continue;
+        total += value;
+        count += 1;
+    }
+    return count === 0 ? null : total / count;
+}
+function toNumber(value) {
+    if (typeof value === 'number')
+        return Number.isFinite(value) ? value : null;
+    if (typeof value === 'bigint') {
+        const n = Number(value);
+        return Number.isSafeInteger(n) ? n : null;
+    }
+    if (typeof value === 'string' && value.trim() !== '') {
+        const n = Number(value);
+        return Number.isFinite(n) ? n : null;
+    }
+    return null;
+}
+/** The raw value of one summary: a number for the aggregates, text for a function. */
+export function summarizeDataTableColumn(rows, column, summary) {
+    if (typeof summary === 'function')
+        return summary(rows);
+    if (summary === 'count')
+        return rows.length;
+    if (summary === 'sum')
+        return sumDataTableColumn(rows, column);
+    if (summary === 'avg')
+        return averageDataTableColumn(rows, column);
+    return null;
+}
+/** Default text of an aggregate: `Intl.NumberFormat` in the table's locale. */
+export function formatDataTableSummary(value, context) {
+    try {
+        return new Intl.NumberFormat(context.locale, {
+            maximumFractionDigits: context.kind === 'avg' ? 2 : 6,
+        }).format(value);
+    }
+    catch {
+        return String(value);
+    }
+}
+/**
+ * The footer row for `summaries` over `rows`, as a `footer` structural row
+ * (`DataTable` renders it in `<tfoot>`). `null` when no visible column has a
+ * summary. Each aggregate goes through the column's `summaryFormat`, else
+ * {@link formatDataTableSummary}; a function summary's text is used as is.
+ */
+export function buildDataTableSummaryRow(rows, columns, summaries, options) {
+    if (!summaries)
+        return null;
+    const values = {};
+    let any = false;
+    for (const column of columns) {
+        if (column.hidden)
+            continue;
+        const summary = summaries[column.id];
+        if (summary === undefined)
+            continue;
+        any = true;
+        const raw = summarizeDataTableColumn(rows, column, summary);
+        if (raw === null) {
+            values[column.id] = '';
+        }
+        else if (typeof raw === 'string') {
+            values[column.id] = raw;
+        }
+        else {
+            const context = {
+                kind: summary,
+                columnId: column.id,
+                locale: options.locale,
+            };
+            values[column.id] = column.summaryFormat
+                ? column.summaryFormat(raw, context)
+                : formatDataTableSummary(raw, context);
+        }
+    }
+    if (!any)
+        return null;
+    return {
+        id: options.id ?? 'summary',
+        kind: 'footer',
+        label: options.label,
+        values,
+    };
+}

package/dist/components/data/index.d.ts

@@ -7,6 +7,7 @@ export { default as DataTable } from './DataTable.svelte';
 export * from './DataTableController.js';
 export * from './DataTableIdentity.js';
 export * from './DataTablePerformance.js';
+export * from './DataTableSummaries.js';
 export * from './DataTableVirtualization.js';
 export * from './data-surface.js';
 export * from './data-table-surface.js';

package/dist/components/data/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/data/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,OAAO,IAAI,WAAW,GACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/data/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,OAAO,IAAI,WAAW,GACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC"}

package/dist/components/data/index.js

@@ -7,6 +7,7 @@ export { default as DataTable } from './DataTable.svelte';
 export * from './DataTableController.js';
 export * from './DataTableIdentity.js';
 export * from './DataTablePerformance.js';
+export * from './DataTableSummaries.js';
 export * from './DataTableVirtualization.js';
 export * from './data-surface.js';
 export * from './data-table-surface.js';

package/dist/components/data/types.d.ts

@@ -4,6 +4,7 @@
 import type { Snippet } from 'svelte';
 import type { DataTableCommand, DataTableController, DataTableFilter, DataTableModes, DataTableViewState, DataTableViewStateInput } from './DataTableController.js';
 import type { DataTableRowKey } from './DataTableIdentity.js';
+import type { DataTableSummaries, DataTableSummaryFormatContext } from './DataTableSummaries.js';
 import type { DataTableVirtualizationOptions } from './DataTableVirtualization.js';
 import type { DataSurfaceDescriptor, DataSurfaceRegistry } from './data-surface.js';
 /** Opt-in mounted-surface wiring for a DataTable instance. */
@@ -127,6 +128,12 @@ export interface DataTableColumn<T> {
     filterFn?: (row: T, value: unknown, filter: DataTableFilter) => boolean;
     /** Column class name */
     className?: string;
+    /**
+     * Text of this column's `sum` / `count` / `avg` footer cell (the table's
+     * `summaries`). A money column keeps integer minor units in `value` and
+     * formats them here; without it the number is `Intl.NumberFormat`ted.
+     */
+    summaryFormat?: (value: number, context: DataTableSummaryFormatContext) => string;
 }
 /**
  * Sort direction
@@ -145,7 +152,7 @@ export interface SortState {
  * DataTable props
  */
 export interface DataTableProps<T> {
-    /** Sort-control target density; omit to inherit ThemeProvider. */
+    /** Sort-control and pager target density; omit to inherit ThemeProvider. */
     density?: 'comfortable' | 'touch';
     /** Opt-in container-width column collapse; default keeps horizontal scrolling. */
     responsiveMode?: 'scroll' | 'hide-columns';
@@ -227,6 +234,16 @@ export interface DataTableProps<T> {
     }]>;
     /** Generic report-like rows rendered independently from data row interactions. */
     structuralRows?: readonly DataTableStructuralRow<T>[];
+    /**
+     * Column summaries: a `<tfoot>` row with a `count`, `sum` or `avg` per
+     * column id, or a function of the rows returning the cell text. Computed
+     * over every filtered row (all pages; only the given rows under manual
+     * pagination). A `sum` / `avg` column without an explicit `align` is
+     * right-aligned. Rendered after any `footer` structural rows.
+     */
+    summaries?: DataTableSummaries<T>;
+    /** Label of the summaries row (default "Total", localized). */
+    summaryLabel?: string;
     /** Controlled visible column ids. Column.hidden is still respected. */
     visibleColumnIds?: Set<string>;
     /**

package/dist/components/data/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/data/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/data/types.ts"],"names":[],"mappings":"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"}

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/components/nav/Tabs.svelte

@@ -280,6 +280,9 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
   .smrt-tabs__nav {
     display: flex;
     width: 100%;
+    /* Tabs keep their minimum width; a row wider than a phone scrolls. */
+    overflow-x: auto;
+    scrollbar-width: thin;
   }
   .smrt-tabs__tab-button {
     flex: 1;

package/dist/components/ui/Pagination.svelte

@@ -32,6 +32,12 @@ export interface Props {
   showFirstLast?: boolean;
   /** Maximum number of visible page numbers */
   maxVisible?: number;
+  /**
+   * Control target density. `touch` raises every page and nav control to
+   * `--smrt-touch-target-min`; omit to inherit the ThemeProvider setting
+   * (`--smrt-control-target-min`).
+   */
+  density?: 'comfortable' | 'touch';
 }
 
 const {
@@ -42,6 +48,7 @@ const {
   'aria-label': ariaLabel = 'Pagination',
   showFirstLast = true,
   maxVisible = 5,
+  density,
 }: Props = $props();
 
 function getPageUrl(page: number): string {
@@ -106,7 +113,7 @@ const isLastPage = $derived(currentPage === totalPages);
 </script>
 
 {#if totalPages > 1}
-  <nav class="pagination" aria-label={ariaLabel} data-smrt-component="Pagination">
+  <nav class="pagination" data-density={density} aria-label={ariaLabel} data-smrt-component="Pagination">
     <!-- First page -->
     {#if showFirstLast}
       {#if onPageChange}
@@ -202,11 +209,16 @@ const isLastPage = $derived(currentPage === totalPages);
     flex-wrap: wrap;
   }
 
+  .pagination[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
+  .pagination[data-density='comfortable'] { --smrt-control-target-min: 0px; }
+
   .page-numbers {
     list-style: none;
     display: flex;
     align-items: center;
     gap: var(--smrt-spacing-1, 0.25rem);
+    flex-wrap: wrap;
+    justify-content: center;
     margin: 0;
     padding: 0;
   }
@@ -220,8 +232,9 @@ const isLastPage = $derived(currentPage === totalPages);
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 2.25rem;
+    min-width: max(2.25rem, var(--smrt-control-target-min));
     height: 2.25rem;
+    min-height: var(--smrt-control-target-min);
     padding: 0 var(--smrt-spacing-2, 0.5rem);
     border-radius: var(--smrt-radius-small, 0.25rem);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
@@ -286,7 +299,7 @@ const isLastPage = $derived(currentPage === totalPages);
 
   @media (max-width: 480px) {
     .page-link {
-      min-width: 2rem;
+      min-width: max(2rem, var(--smrt-control-target-min));
       height: 2rem;
       font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
     }

package/dist/components/ui/Pagination.svelte.d.ts

@@ -14,6 +14,12 @@ export interface Props {
     showFirstLast?: boolean;
     /** Maximum number of visible page numbers */
     maxVisible?: number;
+    /**
+     * Control target density. `touch` raises every page and nav control to
+     * `--smrt-touch-target-min`; omit to inherit the ThemeProvider setting
+     * (`--smrt-control-target-min`).
+     */
+    density?: 'comfortable' | 'touch';
 }
 declare const Pagination: import("svelte").Component<Props, {}, "">;
 type Pagination = ReturnType<typeof Pagination>;

package/dist/components/ui/Pagination.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Pagination.svelte.ts"],"names":[],"mappings":"AAkBA,qCAAqC;AACrC,MAAM,WAAW,KAAK;IACpB,oCAAoC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oFAAoF;IACpF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAwKD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Pagination.svelte.ts"],"names":[],"mappings":"AAkBA,qCAAqC;AACrC,MAAM,WAAW,KAAK;IACpB,oCAAoC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oFAAoF;IACpF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;CACnC;AAyKD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/i18n/strings.d.ts

@@ -32,5 +32,6 @@ export declare const M: {
     readonly 'ui.data_table.subtotal': "ui.data_table.subtotal";
     readonly 'ui.data_table.aggregate': "ui.data_table.aggregate";
     readonly 'ui.data_table.footer_row': "ui.data_table.footer_row";
+    readonly 'ui.data_table.total': "ui.data_table.total";
 };
 //# sourceMappingURL=strings.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"strings.d.ts","sourceRoot":"","sources":["../../src/i18n/strings.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCZ,CAAC"}
+{"version":3,"file":"strings.d.ts","sourceRoot":"","sources":["../../src/i18n/strings.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCZ,CAAC"}

package/dist/i18n/strings.js

@@ -45,4 +45,5 @@ export const M = defineMessages({
     'ui.data_table.subtotal': 'Subtotal',
     'ui.data_table.aggregate': 'Aggregate',
     'ui.data_table.footer_row': 'Footer',
+    'ui.data_table.total': 'Total',
 });

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.23",
+  "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.23",
+    "@happyvertical/smrt-types": "0.56.0",
     "esm-env": "^1.2.2"
   },
   "peerDependencies": {
@@ -171,7 +180,7 @@
     }
   },
   "devDependencies": {
-    "@happyvertical/speech": "^0.103.5",
+    "@happyvertical/speech": "^0.103.6",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@testing-library/jest-dom": "^7.0.1",