@scalewing/react 1.38.0 → 1.39.0

package/dist/css/chart-tones.js

@@ -0,0 +1,130 @@
+import { categoricalColorKeys, categoricalHues, } from '@scalewing/tokens';
+import { isOneOf } from '../is-one-of.js';
+/** A source as its custom property. */
+function sourceProperty(source) {
+    return 'semantic' in source
+        ? `var(--sw-color-${source.semantic})`
+        : `var(--sw-categorical-${source.categorical})`;
+}
+/**
+ * The statement tones a range bar's fill takes (see DataBar). `danger` is
+ * for a shortage, never for cash leaving: an outflow is `muted`.
+ */
+export const statementFillTones = [
+    'neutral',
+    'success',
+    'muted',
+    'strong',
+    'accent',
+    'danger',
+];
+/**
+ * Every fill tone: the categorical colours (a chart's series), then the
+ * statement tones a range bar adds. `neutral` is in both and is one grey.
+ */
+export const chartFillTones = [
+    ...categoricalColorKeys,
+    ...statementFillTones.filter((tone) => tone !== 'neutral'),
+];
+/** The tones a line, a marker or the boxed period is drawn in. */
+export const chartStrokeTones = [
+    'accent',
+    'success',
+    'warning',
+    'danger',
+    'neutral',
+];
+export const chartTones = [
+    ...new Set([...chartFillTones, ...chartStrokeTones]),
+];
+/**
+ * How much of a categorical colour a column's fill mixes into the surface:
+ * a lighter fill, so a line drawn over the columns stands apart, that
+ * keeps 1.5:1 on the surface in every palette and scheme.
+ */
+export const categoricalFillShare = 0.72;
+/**
+ * How much of the danger colour its fill mixes into the surface (a
+ * shortage's range bar, never cash leaving): a light red, at 1.5:1 or more
+ * on the surface in every palette and scheme, as every other fill.
+ */
+export const dangerFillShare = 0.4;
+/** Each fill tone's colour, mixed into the surface. */
+export const chartFillMixes = {
+    ...Object.fromEntries(categoricalHues.map((hue) => [
+        hue,
+        { categorical: hue, share: categoricalFillShare, into: 'surface' },
+    ])),
+    neutral: { semantic: 'muted', share: 0.65, into: 'surface' },
+    success: { semantic: 'success', share: 0.55, into: 'surface' },
+    muted: { semantic: 'muted', share: 0.35, into: 'surface' },
+    strong: { semantic: 'text', share: 0.85, into: 'surface' },
+    accent: { semantic: 'accent', share: 1, into: 'surface' },
+    danger: { semantic: 'danger', share: dangerFillShare, into: 'surface' },
+};
+/** Each stroke tone's colour: a semantic colour, or muted for neutral. */
+export const chartStrokeColors = {
+    accent: { semantic: 'accent' },
+    success: { semantic: 'success' },
+    warning: { semantic: 'warning' },
+    danger: { semantic: 'danger' },
+    neutral: { semantic: 'muted' },
+};
+/**
+ * How much of a line's stroke the area under it takes, over transparency:
+ * a quiet tint behind the line, decorative (the line carries the values).
+ */
+export const chartAreaShare = 0.12;
+/** How much of a hue's colour its words keep, moved toward the text colour. */
+export const categoricalInkShare = 0.3;
+/** How much of a semantic colour its words keep, moved toward the text colour. */
+export const semanticInkShare = 0.5;
+/** The tones whose words are drawn beside a mark: a series' and a stroke's. */
+export const chartInkTones = [...categoricalHues, ...chartStrokeTones];
+/** The words beside a mark: its tone moved toward the text colour. */
+export const chartInkMixes = {
+    ...Object.fromEntries(categoricalHues.map((hue) => [
+        hue,
+        { categorical: hue, share: categoricalInkShare, into: 'text' },
+    ])),
+    accent: { semantic: 'accent', share: semanticInkShare, into: 'text' },
+    success: { semantic: 'success', share: semanticInkShare, into: 'text' },
+    warning: { semantic: 'warning', share: semanticInkShare, into: 'text' },
+    danger: { semantic: 'danger', share: semanticInkShare, into: 'text' },
+    neutral: { semantic: 'muted', share: 1, into: 'text' },
+};
+/** A mix as CSS: the colour alone when unmixed. */
+export function chartColorMix(mix) {
+    const color = sourceProperty(mix);
+    if (mix.share === 1)
+        return color;
+    return `color-mix(in srgb, ${color} ${Math.round(mix.share * 100)}%, var(--sw-color-${mix.into}))`;
+}
+/** A fill tone's colour. */
+export function chartFill(tone) {
+    return chartColorMix(chartFillMixes[tone]);
+}
+/*
+ * A tone class hands its roles to the marks inside it as custom
+ * properties, `--sw-chart-fill`, `--sw-chart-stroke` and `--sw-chart-ink`,
+ * so a legend swatch, a column, a line and a label each read the role it
+ * draws. A tone sets only the roles it has.
+ */
+function toneDeclarations(tone) {
+    const declarations = [];
+    if (isOneOf(chartFillTones, tone))
+        declarations.push(`--sw-chart-fill: ${chartFill(tone)};`);
+    if (isOneOf(chartStrokeTones, tone))
+        declarations.push(`--sw-chart-stroke: ${sourceProperty(chartStrokeColors[tone])};`);
+    if (isOneOf(chartInkTones, tone))
+        declarations.push(`--sw-chart-ink: ${chartColorMix(chartInkMixes[tone])};`);
+    return declarations.join(' ');
+}
+export function cssChartToneClasses() {
+    return chartTones
+        .map((tone) => `.sw-chart-tone-${tone} { ${toneDeclarations(tone)} }`)
+        .join('\n');
+}
+export function chartToneClassCatalog() {
+    return chartTones.map((tone) => `sw-chart-tone-${tone}`);
+}

package/dist/css/{css-chart.d.ts → css-bar-chart.d.ts}

@@ -5,5 +5,5 @@
  */
 export declare const barChartTones: readonly ["accent", "success", "warning", "danger"];
 export type BarChartTone = (typeof barChartTones)[number];
-export declare function cssChartClasses(): string;
-export declare function chartClassCatalog(): string[];
+export declare function cssBarChartClasses(): string;
+export declare function barChartClassCatalog(): string[];

package/dist/css/{css-chart.js → css-bar-chart.js}

@@ -66,7 +66,7 @@ function divergingRules() {
   .sw-bar-chart-diverging .sw-bar-chart-track::before { background: CanvasText; }
 }`;
 }
-export function cssChartClasses() {
+export function cssBarChartClasses() {
     return `.sw-bar-chart {
   display: grid;
   gap: var(--sw-space-2);
@@ -155,7 +155,7 @@ ${divergingRules()}
   .sw-bar-chart-fill { background: CanvasText; }
 }`;
 }
-export function chartClassCatalog() {
+export function barChartClassCatalog() {
     return [
         'sw-bar-chart',
         'sw-bar-chart-plot',

package/dist/css/css-chart-legend.d.ts

@@ -0,0 +1,5 @@
+/** The marks a legend item can show: what its words name in the chart. */
+export declare const chartLegendSwatches: readonly ["bar", "line", "marker", "box"];
+export type ChartLegendSwatch = (typeof chartLegendSwatches)[number];
+export declare function cssChartLegendClasses(): string;
+export declare function chartLegendClassCatalog(): string[];

package/dist/css/css-chart-legend.js

@@ -0,0 +1,102 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { chartHairline, chartLineWidth } from './chart-marks.js';
+const caption = typographyVariants.caption;
+/** The marks a legend item can show: what its words name in the chart. */
+export const chartLegendSwatches = ['bar', 'line', 'marker', 'box'];
+/*
+ * Each swatch reads its colour from the item's tone class
+ * (`sw-chart-tone-<tone>`, `chart-tones.ts`): a bar is the tone's fill, a
+ * square a spacing step 3 wide; a line is its stroke, a spacing step 4
+ * long at the charts' line width; a marker is a downward triangle in the
+ * stroke, the shape a chart's marker takes; a box is the dashed outline of
+ * the boxed current period. Forced colours draw every swatch in the system
+ * text colour, as they draw the marks.
+ */
+function swatchRules() {
+    return `.sw-chart-legend-bar {
+  background: var(--sw-chart-fill);
+  border-radius: calc(var(--sw-radius-sm) / 4);
+  height: var(--sw-space-3);
+  width: var(--sw-space-3);
+}
+
+.sw-chart-legend-line {
+  background: var(--sw-chart-stroke);
+  border-radius: var(--sw-radius-pill);
+  height: ${chartLineWidth}px;
+  width: var(--sw-space-4);
+}
+
+.sw-chart-legend-marker {
+  background: var(--sw-chart-stroke);
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+  height: var(--sw-space-3);
+  width: var(--sw-space-3);
+}
+
+.sw-chart-legend-box {
+  border: ${chartHairline}px dashed var(--sw-chart-stroke);
+  border-radius: calc(var(--sw-radius-sm) / 2);
+  box-sizing: border-box;
+  height: var(--sw-space-3);
+  width: var(--sw-space-4);
+}
+
+@media (forced-colors: active) {
+  .sw-chart-legend-bar,
+  .sw-chart-legend-line,
+  .sw-chart-legend-marker { background: CanvasText; }
+  .sw-chart-legend-box { border-color: CanvasText; }
+}`;
+}
+/*
+ * A legend is a list of its items in a wrapping row, in the caption type:
+ * each item its swatch, then its words. The words wrap within the item
+ * rather than push the row past its container, and the swatch stays
+ * centred on their first line.
+ */
+export function cssChartLegendClasses() {
+    return `.sw-chart-legend {
+  color: var(--sw-color-text);
+  column-gap: var(--sw-space-5);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  font-weight: ${caption.fontWeight};
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  row-gap: var(--sw-space-2);
+}
+
+.sw-chart-legend-item {
+  align-items: flex-start;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  min-width: 0;
+}
+
+.sw-chart-legend-swatch {
+  display: block;
+  flex: none;
+  /* Centred on the first line of the words, however many lines they wrap to. */
+  margin-block-start: calc((${caption.lineHeight}px - var(--sw-space-3)) / 2);
+}
+
+.sw-chart-legend-line {
+  margin-block-start: calc((${caption.lineHeight}px - ${chartLineWidth}px) / 2);
+}
+
+${swatchRules()}`;
+}
+export function chartLegendClassCatalog() {
+    return [
+        'sw-chart-legend',
+        'sw-chart-legend-item',
+        'sw-chart-legend-swatch',
+        ...chartLegendSwatches.map((swatch) => `sw-chart-legend-${swatch}`),
+    ];
+}

package/dist/css/css-chart-plot.d.ts

@@ -0,0 +1,2 @@
+export declare function cssChartPlotClasses(): string;
+export declare function chartPlotClassCatalog(): string[];

package/dist/css/css-chart-plot.js

@@ -0,0 +1,170 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { chartBoxDash, chartHairline, chartLeaderDash, chartLineWidth, } from './chart-marks.js';
+const caption = typographyVariants.caption;
+/*
+ * The parts every plotted chart (ColumnChart, LineChart) draws in its SVG:
+ * the words in the caption type, the grid and zero lines, the boxed
+ * period, a line and its last value, and the callouts with their leaders.
+ * Every colour is a theme colour or a tone's role (`chart-tones.ts`), read
+ * from the tone class on the mark or its group; words with no tone are
+ * the text colour.
+ */
+function plotRules() {
+    return `.sw-chart {
+  display: grid;
+  gap: var(--sw-space-2);
+  min-width: 0;
+}
+
+.sw-chart-svg {
+  display: block;
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  height: auto;
+  letter-spacing: ${caption.letterSpacing}px;
+  max-width: 100%;
+  overflow: visible;
+  width: 100%;
+}
+
+.sw-chart-tick,
+.sw-chart-category {
+  fill: var(--sw-color-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.sw-chart-tick-line { fill: var(--sw-chart-ink); }
+
+.sw-chart-grid {
+  stroke: var(--sw-color-border);
+  stroke-width: ${chartHairline};
+}
+
+.sw-chart-zero {
+  stroke: var(--sw-color-muted);
+  stroke-width: ${chartHairline};
+}
+
+.sw-chart-highlight {
+  fill: none;
+  stroke: var(--sw-chart-stroke);
+  stroke-dasharray: ${chartBoxDash};
+  stroke-width: ${chartHairline};
+}
+
+.sw-chart-line {
+  fill: none;
+  stroke: var(--sw-chart-stroke);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: ${chartLineWidth};
+}
+
+.sw-chart-dot { fill: var(--sw-chart-stroke); }
+
+.sw-chart-end-label {
+  fill: var(--sw-chart-ink);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+.sw-chart-leader {
+  stroke: var(--sw-chart-ink, var(--sw-color-text));
+  stroke-dasharray: ${chartLeaderDash};
+  stroke-width: ${chartHairline};
+}
+
+.sw-chart-callout-text {
+  fill: var(--sw-chart-ink, var(--sw-color-text));
+  font-weight: 600;
+}`;
+}
+/*
+ * On a compact chart the callouts are a list under the plot: each its
+ * words in its hue's ink, after a dot in its hue's fill (the colour of its
+ * column) centred on their first line.
+ */
+function calloutListRules() {
+    return `.sw-chart-callouts {
+  display: grid;
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  gap: var(--sw-space-1);
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sw-chart-callout {
+  align-items: flex-start;
+  color: var(--sw-chart-ink, var(--sw-color-text));
+  display: flex;
+  font-weight: 600;
+  gap: var(--sw-space-2);
+}
+
+.sw-chart-callout-dot {
+  background: var(--sw-chart-fill, currentColor);
+  border-radius: var(--sw-radius-pill);
+  flex: none;
+  height: var(--sw-space-2);
+  margin-block-start: calc((${caption.lineHeight}px - var(--sw-space-2)) / 2);
+  width: var(--sw-space-2);
+}`;
+}
+/*
+ * Forced colours keep the drawing legible in the system colours: marks in
+ * the text colour (columns outlined in the canvas colour so a stack's
+ * parts stay apart), the line and its last value in the highlight colour,
+ * grid lines in the grey text colour, and every word in the text colour.
+ * The hidden table carries the figures there as everywhere.
+ */
+function forcedColorRules() {
+    return `@media (forced-colors: active) {
+  .sw-chart-column { fill: CanvasText; stroke: Canvas; }
+  .sw-chart-grid { stroke: GrayText; }
+  .sw-chart-zero,
+  .sw-chart-highlight,
+  .sw-chart-leader { stroke: CanvasText; }
+  .sw-chart-line { stroke: Highlight; }
+  .sw-chart-dot,
+  .sw-chart-end-label { fill: Highlight; }
+  .sw-chart-tick,
+  .sw-chart-category,
+  .sw-chart-callout-text { fill: CanvasText; }
+  .sw-chart-callout { color: CanvasText; }
+  .sw-chart-callout-dot { background: CanvasText; }
+}`;
+}
+export function cssChartPlotClasses() {
+    return `${plotRules()}
+
+.sw-chart-column { fill: var(--sw-chart-fill); }
+
+${calloutListRules()}
+
+${forcedColorRules()}`;
+}
+export function chartPlotClassCatalog() {
+    return [
+        'sw-chart',
+        'sw-chart-svg',
+        'sw-chart-tick',
+        'sw-chart-tick-line',
+        'sw-chart-category',
+        'sw-chart-grid',
+        'sw-chart-zero',
+        'sw-chart-highlight',
+        'sw-chart-line',
+        'sw-chart-dot',
+        'sw-chart-end-label',
+        'sw-chart-leader',
+        'sw-chart-callout-text',
+        'sw-chart-column',
+        'sw-chart-callouts',
+        'sw-chart-callout',
+        'sw-chart-callout-dot',
+    ];
+}

package/dist/css/css-components.js

@@ -1,9 +1,13 @@
+import { cssChartToneClasses } from './chart-tones.js';
 import { cssActionBarClasses } from './css-action-bar.js';
 import { cssActionMenuClasses } from './css-action-menu.js';
 import { cssAccordionClasses } from './css-accordion.js';
 import { cssButtonClasses } from './css-button.js';
 import { cssCalendarButtonClasses } from './css-calendar-button.js';
-import { cssChartClasses } from './css-chart.js';
+import { cssBarChartClasses } from './css-bar-chart.js';
+import { cssChartLegendClasses } from './css-chart-legend.js';
+import { cssChartPlotClasses } from './css-chart-plot.js';
+import { cssLineChartClasses } from './css-line-chart.js';
 import { cssDataBarClasses } from './css-data-bar.js';
 import { cssPaginationClasses } from './css-pagination.js';
 import { cssCheckboxClasses } from './css-checkbox.js';
@@ -137,10 +141,18 @@ ${cssDateFieldClasses()}
 
 ${cssCalendarButtonClasses()}
 
-${cssChartClasses()}
+${cssBarChartClasses()}
 
 ${cssDataBarClasses()}
 
+${cssChartToneClasses()}
+
+${cssChartLegendClasses()}
+
+${cssChartPlotClasses()}
+
+${cssLineChartClasses()}
+
 ${cssPaginationClasses()}
 
 ${cssChromeClasses()}

package/dist/css/css-data-bar.d.ts

@@ -1,16 +1,11 @@
 /**
  * What a range bar's fill means: the start or a carried figure (`neutral`),
  * money in (`success`), money out (`muted`, never danger: an outflow is not
- * an error), a subtotal (`strong`) and what was counted or recorded
- * (`accent`).
+ * an error), a subtotal (`strong`), what was counted or recorded
+ * (`accent`), and a shortage (`danger`, light red: for a shortage, never
+ * for cash leaving).
  */
-export declare const dataBarTones: readonly ["neutral", "success", "muted", "strong", "accent"];
+export declare const dataBarTones: readonly ["neutral", "success", "muted", "strong", "accent", "danger"];
 export type DataBarTone = (typeof dataBarTones)[number];
-export declare const dataBarToneMixes: Record<DataBarTone, {
-    color: 'muted' | 'success' | 'text' | 'accent';
-    share: number;
-}>;
-/** A tone's fill: its colour, mixed into the surface by its share. */
-export declare function dataBarToneFill(tone: DataBarTone): string;
 export declare function cssDataBarClasses(): string;
 export declare function dataBarClassCatalog(): string[];

package/dist/css/css-data-bar.js

@@ -1,42 +1,26 @@
+import { chartFill, statementFillTones } from './chart-tones.js';
 /**
  * What a range bar's fill means: the start or a carried figure (`neutral`),
  * money in (`success`), money out (`muted`, never danger: an outflow is not
- * an error), a subtotal (`strong`) and what was counted or recorded
- * (`accent`).
+ * an error), a subtotal (`strong`), what was counted or recorded
+ * (`accent`), and a shortage (`danger`, light red: for a shortage, never
+ * for cash leaving).
  */
-export const dataBarTones = [
-    'neutral',
-    'success',
-    'muted',
-    'strong',
-    'accent',
-];
+export const dataBarTones = statementFillTones;
 /*
- * Each tone is a semantic colour, mixed into the surface where the board
- * draws a lighter fill: the bar is decorative (the figure is the cell's
- * text), so the mixes keep the tones apart from one another rather than
- * meeting a text contrast: every tone at 1.5:1 or more on the surface, and
- * the three greys (out, start, subtotal) 1.5:1 or more from the next one,
- * in every palette and scheme (`data-bar.test.tsx`). `accent` is the
- * accent itself.
+ * Each tone is a chart fill (`chart-tones.ts`, shared with ChartLegend's
+ * `bar` swatch so a statement's legend matches its bars): a semantic
+ * colour mixed into the surface where the board draws a lighter fill. The
+ * bar is decorative (the figure is the cell's text), so the mixes keep the
+ * tones apart from one another rather than meeting a text contrast: every
+ * tone at 1.5:1 or more on the surface, and the three greys (out, start,
+ * subtotal) 1.5:1 or more from the next one, in every palette and scheme
+ * (`data-bar.test.tsx`). `accent` is the accent itself; `danger` is the
+ * danger colour at 40 %.
  */
-export const dataBarToneMixes = {
-    neutral: { color: 'muted', share: 0.65 },
-    success: { color: 'success', share: 0.55 },
-    muted: { color: 'muted', share: 0.35 },
-    strong: { color: 'text', share: 0.85 },
-    accent: { color: 'accent', share: 1 },
-};
-/** A tone's fill: its colour, mixed into the surface by its share. */
-export function dataBarToneFill(tone) {
-    const { color, share } = dataBarToneMixes[tone];
-    if (share === 1)
-        return `var(--sw-color-${color})`;
-    return `color-mix(in srgb, var(--sw-color-${color}) ${Math.round(share * 100)}%, var(--sw-color-surface))`;
-}
 function toneRules() {
     return dataBarTones
-        .map((tone) => `.sw-data-bar-${tone} > .sw-data-bar-fill { background: ${dataBarToneFill(tone)}; }`)
+        .map((tone) => `.sw-data-bar-${tone} > .sw-data-bar-fill { background: ${chartFill(tone)}; }`)
         .join('\n');
 }
 /*

package/dist/css/css-line-chart.d.ts

@@ -0,0 +1,2 @@
+export declare function cssLineChartClasses(): string;
+export declare function lineChartClassCatalog(): string[];

package/dist/css/css-line-chart.js

@@ -0,0 +1,31 @@
+import { chartAreaShare } from './chart-tones.js';
+/*
+ * The marks only a line chart draws, beside the shared plot classes
+ * (`css-chart-plot.ts`): the area under the line, a quiet tint of its
+ * stroke; a marker's triangle in its tone's stroke; and the marker's
+ * words in its tone's ink. Forced colours drop the area and draw markers
+ * and their words in the text colour, apart from the line's highlight
+ * colour.
+ */
+export function cssLineChartClasses() {
+    return `.sw-chart-area {
+  fill: color-mix(in srgb, var(--sw-chart-stroke) ${chartAreaShare * 100}%, transparent);
+}
+
+.sw-chart-marker { fill: var(--sw-chart-stroke); }
+
+.sw-chart-marker-label {
+  fill: var(--sw-chart-ink);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+@media (forced-colors: active) {
+  .sw-chart-area { fill: none; }
+  .sw-chart-marker,
+  .sw-chart-marker-label { fill: CanvasText; }
+}`;
+}
+export function lineChartClassCatalog() {
+    return ['sw-chart-area', 'sw-chart-marker', 'sw-chart-marker-label'];
+}

package/dist/css/stylesheet.js

@@ -1,4 +1,5 @@
 import { cardVariants, darkTheme, lightTheme, typographyVariants, } from '@scalewing/tokens';
+import { chartToneClassCatalog } from './chart-tones.js';
 import { actionBarClassCatalog } from './css-action-bar.js';
 import { actionMenuClassCatalog } from './css-action-menu.js';
 import { accordionClassCatalog } from './css-accordion.js';
@@ -30,7 +31,10 @@ import { boxBorderClassCatalog } from './css-box-border.js';
 import { boxLinkClassCatalog } from './css-box-link.js';
 import { cssComponentClasses } from './css-components.js';
 import { buttonClassCatalog } from './css-button.js';
-import { chartClassCatalog } from './css-chart.js';
+import { barChartClassCatalog } from './css-bar-chart.js';
+import { chartLegendClassCatalog } from './css-chart-legend.js';
+import { chartPlotClassCatalog } from './css-chart-plot.js';
+import { lineChartClassCatalog } from './css-line-chart.js';
 import { dataBarClassCatalog } from './css-data-bar.js';
 import { paginationClassCatalog } from './css-pagination.js';
 import { dataClassCatalog } from './css-data.js';
@@ -70,8 +74,12 @@ export function utilityClassCatalog() {
         ...segmentedClassCatalog(),
         ...tableClassCatalog(),
         ...scrollRegionClassCatalog(),
-        ...chartClassCatalog(),
+        ...barChartClassCatalog(),
         ...dataBarClassCatalog(),
+        ...chartToneClassCatalog(),
+        ...chartLegendClassCatalog(),
+        ...chartPlotClassCatalog(),
+        ...lineChartClassCatalog(),
         ...paginationClassCatalog(),
         ...chromeClassCatalog(),
         ...sectionNavClassCatalog(),

package/dist/index.d.ts

@@ -16,6 +16,9 @@ export { RadioGroup, type RadioGroupOption, type RadioGroupProps, } from './comp
 export { AppHeader, appHeaderAppearances, type AppHeaderAppearance, type AppHeaderProps, } from './components/AppHeader.js';
 export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, badgeSizes, badgeTones, } from './components/Badge.js';
 export { BarChart, type BarChartItem, type BarChartProps, type BarChartTone, barChartTones, } from './components/BarChart.js';
+export { ChartLegend, type ChartFillTone, type ChartLegendItem, type ChartLegendProps, type ChartLegendSwatch, type ChartStrokeTone, type ChartTone, chartFillTones, chartLegendSwatches, chartStrokeTones, } from './components/ChartLegend.js';
+export { ColumnChart, type ColumnChartCallout, type ColumnChartLine, type ColumnChartMode, type ColumnChartProps, type ColumnChartSeries, columnChartModes, } from './components/ColumnChart.js';
+export { LineChart, type LineChartCurve, type LineChartMarker, type LineChartPeriod, type LineChartPoint, type LineChartProps, lineChartCurves, } from './components/LineChart.js';
 export { DataBar, type DataBarProps, type DataBarTone, dataBarTones, } from './components/DataBar.js';
 export { Pagination, type PaginationLabels, type PaginationProps, } from './components/Pagination.js';
 export { Button, type ButtonDisabledAppearance, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';

package/dist/index.js

@@ -15,6 +15,9 @@ export { RadioGroup, } from './components/RadioGroup.js';
 export { AppHeader, appHeaderAppearances, } from './components/AppHeader.js';
 export { Badge, badgeSizes, badgeTones, } from './components/Badge.js';
 export { BarChart, barChartTones, } from './components/BarChart.js';
+export { ChartLegend, chartFillTones, chartLegendSwatches, chartStrokeTones, } from './components/ChartLegend.js';
+export { ColumnChart, columnChartModes, } from './components/ColumnChart.js';
+export { LineChart, lineChartCurves, } from './components/LineChart.js';
 export { DataBar, dataBarTones, } from './components/DataBar.js';
 export { Pagination, } from './components/Pagination.js';
 export { Button, } from './components/Button.js';

package/dist/is-one-of.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Whether a value is one of a list of names, narrowing it to the list's
+ * type: a component's check of a prop against its allowed values.
+ */
+export declare function isOneOf<Name extends string>(names: readonly Name[], value: unknown): value is Name;

package/dist/is-one-of.js

@@ -0,0 +1,7 @@
+/**
+ * Whether a value is one of a list of names, narrowing it to the list's
+ * type: a component's check of a prop against its allowed values.
+ */
+export function isOneOf(names, value) {
+    return names.includes(value);
+}