@scalewing/react 1.37.0 → 1.39.0

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,15 @@
+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';
 import { cssRadioGroupClasses } from './css-radio-group.js';
 import { cssChromeClasses } from './css-chrome.js';
@@ -135,7 +141,19 @@ ${cssDateFieldClasses()}
 
 ${cssCalendarButtonClasses()}
 
-${cssChartClasses()}
+${cssBarChartClasses()}
+
+${cssDataBarClasses()}
+
+${cssChartToneClasses()}
+
+${cssChartLegendClasses()}
+
+${cssChartPlotClasses()}
+
+${cssLineChartClasses()}
+
+${cssPaginationClasses()}
 
 ${cssChromeClasses()}
 

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

@@ -0,0 +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`), 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", "danger"];
+export type DataBarTone = (typeof dataBarTones)[number];
+export declare function cssDataBarClasses(): string;
+export declare function dataBarClassCatalog(): string[];

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

@@ -0,0 +1,91 @@
+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`), what was counted or recorded
+ * (`accent`), and a shortage (`danger`, light red: for a shortage, never
+ * for cash leaving).
+ */
+export const dataBarTones = statementFillTones;
+/*
+ * 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 %.
+ */
+function toneRules() {
+    return dataBarTones
+        .map((tone) => `.sw-data-bar-${tone} > .sw-data-bar-fill { background: ${chartFill(tone)}; }`)
+        .join('\n');
+}
+/*
+ * A range bar fills its container's width: a track with no fill of its own,
+ * a spacing step 4 tall, and the bar placed on it by two shares the
+ * component sets (`--sw-data-bar-start`, `--sw-data-bar-size`), with
+ * logical insets so a right-to-left table mirrors it. A diverging domain
+ * draws a hairline at zero (`--sw-data-bar-zero`) across the track, under
+ * the bar, and the bar's end at zero is square (`sw-data-bar-zero-start`
+ * or `-end`), so it meets the line as BarChart's diverging bars do.
+ * Forced colours draw the bar and the line in the system text colour;
+ * the figure beside it carries the meaning there, as always.
+ */
+export function cssDataBarClasses() {
+    return `.sw-data-bar {
+  display: block;
+  height: var(--sw-space-4);
+  min-width: var(--sw-space-6);
+  position: relative;
+  width: 100%;
+}
+
+.sw-data-bar-fill {
+  border-radius: calc(var(--sw-radius-sm) / 2);
+  inset-block: 0;
+  inset-inline-start: calc(var(--sw-data-bar-start, 0) * 100%);
+  position: absolute;
+  width: calc(var(--sw-data-bar-size, 0) * 100%);
+}
+
+${toneRules()}
+
+.sw-data-bar-diverging::before {
+  background: var(--sw-color-border);
+  content: '';
+  inset-block: calc(-1 * var(--sw-space-1));
+  inset-inline-start: calc(var(--sw-data-bar-zero, 0) * 100%);
+  /* Centred on zero, mirrored right to left. */
+  margin-inline-start: -0.5px;
+  position: absolute;
+  width: 1px;
+}
+
+.sw-data-bar-zero-start > .sw-data-bar-fill {
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+}
+
+.sw-data-bar-zero-end > .sw-data-bar-fill {
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+}
+
+@media (forced-colors: active) {
+  .sw-data-bar > .sw-data-bar-fill,
+  .sw-data-bar-diverging::before { background: CanvasText; }
+}`;
+}
+export function dataBarClassCatalog() {
+    return [
+        'sw-data-bar',
+        'sw-data-bar-fill',
+        'sw-data-bar-diverging',
+        'sw-data-bar-zero-start',
+        'sw-data-bar-zero-end',
+        ...dataBarTones.map((tone) => `sw-data-bar-${tone}`),
+    ];
+}

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

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

package/dist/css/css-pagination.js

@@ -0,0 +1,63 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { chevronStrokeIn } from './chevron.js';
+import { iconButtonRules } from './css-icon-button.js';
+const caption = typographyVariants.caption;
+/*
+ * A pager: the consumer's range words at the inline start in the muted
+ * caption, the previous and next steps at the end, wrapping under the
+ * words on a narrow column. The steps are icon-only neutral Buttons,
+ * square at their size and the touch target on a coarse pointer
+ * (`iconButtonRules`).
+ *
+ * Their glyph is private control chrome: the shared stroked chevron
+ * (`chevron.ts`) in the button's colour, pointing toward the inline start
+ * for the previous page and the end for the next; right to left one flip
+ * of the turned chevron mirrors both. It is the chevron Accordion, Select
+ * and the menus draw, not DateField's month steps (an SVG at a larger
+ * size inside the calendar).
+ */
+export function cssPaginationClasses() {
+    return `.sw-pagination {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-3);
+}
+
+.sw-pagination-range {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-pagination-steps {
+  display: flex;
+  gap: var(--sw-space-2);
+  margin-inline-start: auto;
+}
+
+${iconButtonRules('sw-pagination-step')}
+
+.sw-pagination-glyph {
+  ${chevronStrokeIn('currentColor')}
+  display: block;
+}
+
+.sw-pagination-glyph-previous { transform: translateX(25%) rotate(135deg); }
+.sw-pagination-glyph-next { transform: translateX(-25%) rotate(-45deg); }
+.sw-pagination-glyph:dir(rtl) { scale: -1 1; }`;
+}
+export function paginationClassCatalog() {
+    return [
+        'sw-pagination',
+        'sw-pagination-range',
+        'sw-pagination-steps',
+        'sw-pagination-step',
+        'sw-pagination-glyph',
+        'sw-pagination-glyph-previous',
+        'sw-pagination-glyph-next',
+    ];
+}

package/dist/css/css-scroll-region.d.ts

@@ -1,3 +1,4 @@
+export declare const scrollShadeColor = "color-mix(in srgb, var(--sw-color-text) 28%, transparent)";
 /**
  * The shade each inline edge of `selector` draws while `useScrollOverflow`
  * marks it (`sw-scroll-more-start`, `sw-scroll-more-end`). The start edge is

package/dist/css/css-scroll-region.js

@@ -7,10 +7,10 @@
  * inherited variables, so a scroll region inside another never takes its
  * ancestor's shade.
  */
-const shadeColor = 'color-mix(in srgb, var(--sw-color-text) 28%, transparent)';
+export const scrollShadeColor = 'color-mix(in srgb, var(--sw-color-text) 28%, transparent)';
 function edgeShade(side) {
     const offset = side === 'left' ? 'var(--sw-space-6)' : 'calc(-1 * var(--sw-space-6))';
-    return `inset ${offset} 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) ${shadeColor}`;
+    return `inset ${offset} 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) ${scrollShadeColor}`;
 }
 /**
  * The shade each inline edge of `selector` draws while `useScrollOverflow`
@@ -61,7 +61,12 @@ ${selector}:focus-visible {
 ${scrollShadeRules(selector)}`;
 }
 export function scrollRegionClassCatalog() {
-    return ['sw-scroll-more-start', 'sw-scroll-more-end'];
+    return [
+        'sw-scroll-more-start',
+        'sw-scroll-more-end',
+        'sw-scroll-more-top',
+        'sw-scroll-more-bottom',
+    ];
 }
 /**
  * A region whose start column is pinned (sticky, on an opaque fill) hides
@@ -76,7 +81,7 @@ export function pinnedStartShadeRules(region, pinned) {
         .map((cell) => `${region}.sw-scroll-more-start${direction} ${cell}::after`)
         .join(',\n');
     return `${after('')} {
-  background: linear-gradient(to right, ${shadeColor}, transparent);
+  background: linear-gradient(to right, ${scrollShadeColor}, transparent);
   content: '';
   inset-block: 0;
   inset-inline-start: 100%;
@@ -86,7 +91,7 @@ export function pinnedStartShadeRules(region, pinned) {
 }
 
 ${after(':dir(rtl)')} {
-  background: linear-gradient(to left, ${shadeColor}, transparent);
+  background: linear-gradient(to left, ${scrollShadeColor}, transparent);
 }
 
 @media (forced-colors: active) {

package/dist/css/css-table-bounded-edges.d.ts

@@ -0,0 +1 @@
+export declare function cssTableBoundedEdgeClasses(): string;