@scalewing/react 1.38.0 → 1.40.0

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

@@ -0,0 +1,68 @@
+import { type CategoricalColor } from '@scalewing/tokens';
+/** Where a mark's colour comes from: a semantic or a categorical colour. */
+export type ChartColorSource = {
+    semantic: 'accent' | 'success' | 'warning' | 'danger' | 'muted' | 'text';
+} | {
+    categorical: CategoricalColor;
+};
+/**
+ * A colour mixed into the surface or toward the text colour by a share of
+ * its own (1 is the colour unmixed).
+ */
+export type ChartColorMix = ChartColorSource & {
+    share: number;
+    into: 'surface' | 'text';
+};
+/**
+ * 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 declare const statementFillTones: readonly ["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 declare const chartFillTones: readonly ("danger" | "muted" | "accent" | "success" | CategoricalColor | "strong")[];
+export type ChartFillTone = CategoricalColor | (typeof statementFillTones)[number];
+/** The tones a line, a marker or the boxed period is drawn in. */
+export declare const chartStrokeTones: readonly ["accent", "success", "warning", "danger", "neutral"];
+export type ChartStrokeTone = (typeof chartStrokeTones)[number];
+/** Every tone a chart or a legend swatch can take. */
+export type ChartTone = ChartFillTone | ChartStrokeTone;
+export declare const chartTones: readonly ChartTone[];
+/**
+ * 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 declare 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 declare const dangerFillShare = 0.4;
+/** Each fill tone's colour, mixed into the surface. */
+export declare const chartFillMixes: Record<ChartFillTone, ChartColorMix>;
+/** Each stroke tone's colour: a semantic colour, or muted for neutral. */
+export declare const chartStrokeColors: Record<ChartStrokeTone, ChartColorSource>;
+/**
+ * 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 declare const chartAreaShare = 0.12;
+/** How much of a hue's colour its words keep, moved toward the text colour. */
+export declare const categoricalInkShare = 0.3;
+/** How much of a semantic colour its words keep, moved toward the text colour. */
+export declare const semanticInkShare = 0.5;
+/** The tones whose words are drawn beside a mark: a series' and a stroke's. */
+export declare const chartInkTones: readonly ["green", "blue", "orange", "purple", "teal", "rose", "accent", "success", "warning", "danger", "neutral"];
+export type ChartInkTone = (typeof chartInkTones)[number];
+/** The words beside a mark: its tone moved toward the text colour. */
+export declare const chartInkMixes: Record<ChartInkTone, ChartColorMix>;
+/** A mix as CSS: the colour alone when unmixed. */
+export declare function chartColorMix(mix: ChartColorMix): string;
+/** A fill tone's colour. */
+export declare function chartFill(tone: ChartFillTone): string;
+export declare function cssChartToneClasses(): string;
+export declare function chartToneClassCatalog(): string[];

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/chevron.d.ts

@@ -6,3 +6,9 @@
 export declare function chevronStrokeIn(color: string): string;
 /** The muted chevron Accordion, Select and the menus share. */
 export declare const chevronStroke: string;
+/**
+ * A check's two strokes in `color`: the bottom and right borders of a box
+ * the caller sizes and turns 45°, so forced colours keep them. Checkbox,
+ * Steps and ListRow share it.
+ */
+export declare function checkStrokeIn(color: string): string;

package/dist/css/chevron.js

@@ -1,3 +1,8 @@
+/*
+ * The strokes of Scalewing's private control chrome, drawn with borders so
+ * forced colours keep them: the chevron (Accordion, Select, the menus,
+ * Pagination, ListRow) and the check (Checkbox, Steps, ListRow).
+ */
 /**
  * A stroked chevron in `color`: two sides of a `space-2` square (its
  * bottom and right borders, so forced colours keep it), turned by each
@@ -12,3 +17,12 @@ export function chevronStrokeIn(color) {
 }
 /** The muted chevron Accordion, Select and the menus share. */
 export const chevronStroke = chevronStrokeIn('var(--sw-color-muted)');
+/**
+ * A check's two strokes in `color`: the bottom and right borders of a box
+ * the caller sizes and turns 45°, so forced colours keep them. Checkbox,
+ * Steps and ListRow share it.
+ */
+export function checkStrokeIn(color) {
+    return `border-bottom: 2px solid ${color};
+  border-right: 2px solid ${color};`;
+}

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-button-group-attached.js

@@ -13,6 +13,10 @@ import { joinedZIndex } from './stacking.js';
  * divider in its own text colour at low strength, so a joined row of them
  * still reads as separate buttons; forced colours draw every border.
  *
+ * The buttons are found by type, not by place, so an open calendar a
+ * button renders beside itself (CalendarButton, DateRangeButton) does not
+ * cost the next button its divider or the last one its rounded corners.
+ *
  * The group is its own stacking context: a pressed button's ring paints
  * over its neighbours and the focused button's standard outer ring over
  * both, so neither is covered by the next button.
@@ -33,21 +37,21 @@ ${group} > .sw-button {
   border-radius: 0;
 }
 
-${group} > .sw-button + .sw-button {
+${group} > .sw-button ~ .sw-button {
   margin-inline-start: -1px;
 }
 
-${group} > .sw-button:first-child {
+${group} > .sw-button:first-of-type {
   border-end-start-radius: var(--sw-radius-sm);
   border-start-start-radius: var(--sw-radius-sm);
 }
 
-${group} > .sw-button:last-child {
+${group} > .sw-button:last-of-type {
   border-end-end-radius: var(--sw-radius-sm);
   border-start-end-radius: var(--sw-radius-sm);
 }
 
-${group} > .sw-button + .sw-button:not(.sw-button-secondary) {
+${group} > .sw-button ~ .sw-button:not(.sw-button-secondary) {
   border-inline-start-color: color-mix(in srgb, currentColor 30%, transparent);
 }
 

package/dist/css/css-button-group-track.js

@@ -30,7 +30,7 @@ ${track} > .sw-button {
   color: var(--sw-color-text);
 }
 
-${track} > .sw-button + .sw-button {
+${track} > .sw-button ~ .sw-button {
   border-inline-start-color: var(--sw-color-border);
 }
 

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-checkbox.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { checkStrokeIn } from './chevron.js';
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
 export function cssCheckboxClasses() {
@@ -49,8 +50,7 @@ export function cssCheckboxClasses() {
 }
 
 .sw-checkbox-mark::after {
-  border-bottom: 2px solid var(--sw-color-surface);
-  border-right: 2px solid var(--sw-color-surface);
+  ${checkStrokeIn('var(--sw-color-surface)')}
   content: '';
   display: none;
   height: var(--sw-space-2);

package/dist/css/css-components.js

@@ -1,9 +1,16 @@
+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 { cssDateRangeClasses } from './css-date-range.js';
+import { cssListClasses } from './css-list.js';
+import { cssCountPillClasses } from './css-count-pill.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 +144,24 @@ ${cssDateFieldClasses()}
 
 ${cssCalendarButtonClasses()}
 
-${cssChartClasses()}
+${cssDateRangeClasses()}
+
+${cssListClasses()}
+
+${cssCountPillClasses()}
+
+${cssBarChartClasses()}
 
 ${cssDataBarClasses()}
 
+${cssChartToneClasses()}
+
+${cssChartLegendClasses()}
+
+${cssChartPlotClasses()}
+
+${cssLineChartClasses()}
+
 ${cssPaginationClasses()}
 
 ${cssChromeClasses()}

package/dist/css/css-count-pill.d.ts

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