@scalewing/react 1.38.0 → 1.40.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @scalewing/react
 
+## 1.40.0
+
+### Minor Changes
+
+- 935ff2a: `DateRangeButton`: a button showing a range of days (`value` `{ start, end }`, `YYYY-MM-DD`) that opens a calendar to pick a first and a last day. From `md` up it is a popover with the `presets` (`DateRangePreset`: `id`, `label`, `range`; a press applies it at once) beside two months (above them below `lg`), the range being picked in a polite status, and Cancel and Apply; below `md` it is a Dialog bottom sheet with the presets in a row and one month. The first press sets the start and the second the end; days after `max` are disabled, and once a start is pressed so are the days past `maxDays`. Apply calls `onChange` with a changed range; Cancel, Escape, a press outside and the sheet's close keep the value. Its name is `label`, `labels.nameSeparator` and the range it shows. `labels` (`DateRangeButtonLabels`) holds every word, `dayCount` included; `min`, `today`, `weekStartsOn`, `locale`, `disabled`, `id`, `size` and `variant` (default `neutral`) as on CalendarButton. Input it cannot draw throws a `RangeError`. New exports `DateRangeButton`, `DateRangeButtonProps`, `DateRangeButtonValue`, `DateRangePreset`, `DateRangeButtonLabels`; new `sw-date-range-*` classes. It shares CalendarButton's private calendar grid, popover and month steps, whose public behaviour is unchanged. `ButtonGroup attached` now finds its buttons by type, so an open calendar beside one keeps the group's dividers and corners. No new tokens, no new dependency. Request: `docs/requests/teisoro-date-range-button.md`.
+- 3192e17: Web `ListGroup` and `ListRow`, the counterpart of react-native's. `ListGroup` is a list (`ul`, role kept) of rows with hairlines between them, a bordered `panel` or `plain` rows inside a surface, named by `aria-label` or `aria-labelledby`; `maxHeight` (`{ rows }`) bounds it to rows of a title and one detail line that scroll inside a named, focusable region shaded at an edge with more past it, and `footer` stays pinned under the rows, such as a total. `ListRow` has a `title` (`titleAppearance` `strong` or `plain`, `tone` `danger`), a muted `detail`, a `value` with `valueDetail` and `valueTone` (a table cell's tones) and a hidden `leading` mark; `onPress` or `href` makes the whole row a button or link with a chevron, named by its title and value and described by its details (`href` with `onPress` takes a plain press for a client router); `selected` makes it a choice with a check (`aria-pressed` or `aria-current`); `accessory="none"` hides the chevron; `disabled` blocks presses. Input it cannot draw throws a `RangeError`. New exports `ListGroup`, `ListGroupProps`, `ListRow`, `ListRowProps`, `listGroupVariants`, `listRowTones`, `listRowTitleAppearances`, `listRowValueTones`, `ListGroupMaxHeight`, `ListGroupVariant`, `ListRowTone`, `ListRowTitleAppearance`, `ListRowValueTone`; new `sw-list*` classes; no new tokens, no new dependency. Request: `docs/requests/teisoro-list-group.md`.
+- 1d3fafd: `NavCount`: a count after a Nav destination's words, placed inside its link or Button (`<a href="/tasks">Tasks<NavCount count={8} /></a>`), such as the tasks waiting in an area. It is SectionNav's count pill, now one shared rule, and it is read in the destination's name ("Tasks 8"); `countLabel` is read in place of the bare number ("Tasks 8 tasks to do") with the pill hidden from assistive technology; a `count` of 0 shows nothing. A count that is not a whole number from 0 or a blank `countLabel` throws a `RangeError`. New exports `NavCount`, `NavCountProps`; new class `sw-nav-count`; no new tokens, no new dependency. Request: `docs/requests/teisoro-nav-count.md`.
+- 62c33b1: `StatTile` `appearance="plain"` (`StatTileAppearance`, `statTileAppearances`; default `card`): the figure without the tile's surface, edge, radius or padding, top-aligned, for figures inside a card, such as four answers in a row divided by a composed `Separator`. A plain tile cannot be `emphasis="primary"`; that or an unknown appearance throws a `RangeError`. New class `sw-stat-tile-plain`; no new tokens, no new dependency. Request: `docs/requests/teisoro-stat-tile-plain.md`.
+
+## 1.39.0
+
+### Minor Changes
+
+- 9a3234b: `ChartLegend`: a chart's key, a list (`role="list"` kept) of items, each an `aria-hidden` swatch and its words, in a wrapping row in the caption type. `items` (`ChartLegendItem[]`) take a `label`, a `swatch` (`ChartLegendSwatch`: `bar`, `line`, `marker` as a downward triangle, `box` as the boxed current period's dashed outline) and a `tone`: a `bar` a fill tone (`ChartFillTone`: the categorical colours, and `DataBar`'s statement tones), the others a stroke tone (`ChartStrokeTone`: `accent`, `success`, `warning`, `danger`, `neutral`); anything else, or an empty label, throws a `RangeError`. Every chart mark reads one tone table (`sw-chart-tone-<tone>` classes handing `--sw-chart-fill`, `--sw-chart-stroke` and `--sw-chart-ink` to the marks inside), so a swatch is the colour of the mark it names; fills keep 1.5:1, strokes 3:1 and inks 4.5:1 on the surface in every palette and scheme. `DataBar`'s fills now come from that table, unchanged. Forced colours draw every swatch in the system text colour. New exports `ChartLegend`, `ChartLegendProps`, `ChartLegendItem`, `ChartLegendSwatch`, `chartLegendSwatches`, `ChartTone`, `ChartFillTone`, `chartFillTones`, `ChartStrokeTone`, `chartStrokeTones`; new classes `sw-chart-legend`, `sw-chart-legend-item`, `sw-chart-legend-swatch`, `sw-chart-legend-<swatch>` and `sw-chart-tone-<tone>`; no new tokens, no new dependency. Request: `docs/requests/teisoro-chart-legend.md`.
+- 2eb7b03: `ColumnChart`: columns for each of its `categories`, one per series (`ColumnChartSeries`: `id`, `label`, a value per category, a categorical `tone`), `mode` `'stacked'` (positives up from zero, negatives down) or `'grouped'` (side by side), with an optional accent `line` (`ColumnChartLine`, such as a running total) on its own right-hand scale whose zero and grid lines are level with the columns' and whose last value is written beside that axis (`endLabel`), a boxed `highlight` (the current period) and `callouts` (`ColumnChartCallout`) pinned above a column with a dashed leader. `formatValue` writes the figures and `formatTick` the axes. It is an SVG laid out for the width it measures: under 480 px it is shorter, labels fewer categories and lists its callouts under the plot, never scrolling sideways. The drawing is `aria-hidden`; a visually hidden table captioned by `label` carries every figure, the boxed row `aria-current`, and the callouts stay a list. Colours come from the chart tones (ChartLegend's), and forced colours use system colours. Input it cannot draw throws a `RangeError`. New exports `ColumnChart`, `ColumnChartProps`, `ColumnChartSeries`, `ColumnChartLine`, `ColumnChartCallout`, `ColumnChartMode`, `columnChartModes`; new `sw-chart-*` plot classes (`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`); no new tokens, no new dependency. Request: `docs/requests/teisoro-column-chart.md`.
+- 8dcd928: `DataBar` `tone="danger"`: a light red range bar for a shortage, never for cash leaving (money out stays `muted`). `DataBarTone` and `dataBarTones` gain `'danger'`, last; its fill is the danger colour at 40 % mixed into the surface, at 1.5:1 or more on it in every palette and scheme like every tone, and red beside the grey of money out. The shared chart fill tones gain it too, so a `ChartLegend` `bar` swatch can name it. New class `sw-data-bar-danger`; no other tone changes; no new tokens, no new dependency. Request: `docs/requests/teisoro-data-bar-short.md`.
+- 88d1b95: `LineChart`: a value over time, `points` (`LineChartPoint`: a `YYYY-MM-DD` `x` and a value `y`, in date order) placed by the days between them, `curve` `'linear'` or `'step'` (each value held until the next date), an optional `area` tinted from the line's stroke `tone` (default `accent`), `markers` (`LineChartMarker`: a downward triangle and words at one of the points' dates, in a stroke tone; words that would meet are left out of the drawing) with `markersLabel` heading their table column, `ticks` (the dates the time axis labels, thinned from the last), a boxed `highlight` period (`LineChartPeriod`), the last value beside the plot (`endLabel`), and `formatValue`, `formatTick` and `formatDate`. It is laid out for its measured width like ColumnChart, never scrolling sideways; the drawing is `aria-hidden` and a visually hidden table captioned by `label` (its value column `valueLabel`) carries every date, value and marker, the boxed rows `aria-current`. Input it cannot draw throws a `RangeError`. New exports `LineChart`, `LineChartProps`, `LineChartPoint`, `LineChartMarker`, `LineChartPeriod`, `LineChartCurve`, `lineChartCurves`; new classes `sw-chart-area`, `sw-chart-marker`, `sw-chart-marker-label`; no new tokens, no new dependency. Request: `docs/requests/teisoro-line-chart.md`.
+
 ## 1.38.0
 
 ### Minor Changes

package/README.md

@@ -10,10 +10,14 @@ import {
   ActionBar,
   ActionMenu,
   BarChart,
+  ChartLegend,
+  ColumnChart,
+  LineChart,
   DataBar,
   Box,
   Button,
   CalendarButton,
+  DateRangeButton,
   Card,
   Checkbox,
   RadioGroup,
@@ -26,6 +30,8 @@ import {
   Separator,
   DescriptionList,
   DescriptionItem,
+  ListGroup,
+  ListRow,
   DenominationGrid,
   FilterChips,
   Grid,
@@ -372,6 +378,20 @@ An option's optional `description` (a `ReactNode`) is secondary text for that op
 
 `appearance="words"` (opt-in; default `"default"`, `navAppearances`) draws every destination, a link or a `Button` of any variant, as plain words: no fill, border or underline, label type, the others in the muted color at medium weight and the current one (`aria-current`, not `"false"`) in the text color at label weight. A Button keeps its size, padding, touch target and focus ring; hover lifts a destination to the text color where the pointer can hover, never a disabled one. The current mark is color and weight, so each destination's words must be visible: a glyph-only destination has no weight to change (keep `default` for a glyph rail). Forced colors draw the current one's border in Highlight and underline its words. An unknown value throws a `RangeError`.
 
+`NavCount` puts a count after a destination's words, such as the tasks waiting in an area: place it inside the link or `Button`, after its words (`<a href="/tasks">Tasks<NavCount count={8} /></a>`). It is the pill `SectionNav`'s item `count` draws (the danger color with its on-color figures, an edge in forced colors), a space-2 after the words in a link or a Button, the link keeping its siblings' height, and it is read as part of the destination's name ("Tasks 8"). `count` is a whole number; 0 shows nothing. `countLabel` says what it means in your words ("8 tasks to do"): it is read in place of the bare number ("Tasks 8 tasks to do") and the pill is hidden from assistive technology. A count that is not a whole number from 0, or a blank `countLabel`, throws a `RangeError`.
+
+```tsx
+<Nav appearance="words" aria-label="Areas">
+  <Box as="a" href="/sightings">
+    Sightings
+  </Box>
+  <Box as="a" href="/tasks" aria-current="page">
+    Tasks
+    <NavCount count={8} countLabel="8 tasks to do" />
+  </Box>
+</Nav>
+```
+
 `SectionNav` is the navigation between the sections of one area, such as a portal's pages: a labelled `nav` (`aria-label` or `aria-labelledby`) of links from `items` (`{ id, label, href, current?, icon?, count? }`), quieter than a workspace's `Nav`. `current` is `'page'`, `'location'` (a page inside that section, such as a detail page under its list) or a boolean, written as `aria-current`; the current item is in the text color over an accent underline, or, from `verticalFrom` (a breakpoint) up, where the items stack as a side list, a bar at its start. `icon` is a decorative glyph before the label. `onNavigate` takes a plain press after preventing the browser's navigation, for a client router; a press with a modifier key or the middle button keeps the browser's behavior, and without `onNavigate` the links carry no handler, so a server component can render the nav. `count` (a whole number) is how many things wait in a section, such as tasks: a filled pill after the label, in the danger color with its on-color figures, read as part of the link's name ("Tasks 3"); 0 shows none, and there is no cap. `countLabel` says what the count means in your words ("3 tasks to do"): it is read in place of the bare number and the pill is hidden from assistive technology. `appearance="filled"` (default `"underline"`) is a quiet row of page buttons for an area's sub-navigation beside its name: no hairline and no underline or start bar, every link the `sm` control with the small radius at weight 500, the current one on a soft muted fill in the text color at 600 (a 2 px `Highlight` edge in forced colors), in the row or the side list. A coarse pointer gets 44 px targets. Empty or duplicate ids, empty labels, a `count` that is not a whole number from 0, a blank `countLabel` or one without a `count`, and an unknown `verticalFrom` or `appearance` throw a `RangeError`. Use `Tabs` for panels on one page.
 
 ```tsx
@@ -444,7 +464,7 @@ A ledger read across as well as down takes `Table` `columnRules` (a hairline at
 
 `BarChart` `formatValue` writes the axis's values and each value without its own `valueLabel`, such as a currency. `diverging` puts zero in the middle of each track behind a hairline: a positive bar grows toward the inline end and a negative one toward the start, on one scale, and the axis reads minus the maximum, zero and the maximum. Without it every bar grows from the start. An item's `tone` (`BarChartTone`: `'accent'`, `'success'`, `'warning'` or `'danger'`, listed in the exported `barChartTones`) colors its bar by what it means in place of its sign's default (the accent, or danger for a negative value), such as a diverging chart's overage in `'warning'` and shortage in `'danger'`; a toned bar keeps its sign's place, every tone keeps 3:1 against the track, and an unknown tone throws a `RangeError`. Forced colors draw every bar in the system text color, so the value and its side of zero carry the meaning there.
 
-`DataBar` is a horizontal range bar for a table cell or a list row: a bar from `from` to `to` (whichever is larger is its far end) on a track whose domain runs from `min` to `max`, such as where a statement's line leaves the running total. It fills its container's width, a spacing step 4 tall with no track fill, and its ends follow the writing direction. It is decorative (`aria-hidden`): the figure is the cell's own text, so keep the value beside it, and a cell holding both is named by the figure alone. `tone` (`DataBarTone`, listed in `dataBarTones`; default `'neutral'`) says what the bar is: `'neutral'` for where it started, `'success'` for what came in, `'muted'` for what went out (there is no danger tone: an outflow is not an error), `'strong'` for a subtotal and `'accent'` for what was counted or recorded. Each is a semantic colour mixed into the surface, 1.5:1 or more on it, the three greys 1.5:1 or more apart, in every palette and scheme. A domain from below zero to above it (`min < 0 < max`) draws a hairline at zero, so a column of differences diverges around it (`from={0} to={value}`), and the bar's end at zero is square. Values past the domain are clamped to it; non-finite numbers, a `min` not under `max`, or an unknown tone throw a `RangeError`. Forced colors draw the bar and the zero line in the system text color.
+`DataBar` is a horizontal range bar for a table cell or a list row: a bar from `from` to `to` (whichever is larger is its far end) on a track whose domain runs from `min` to `max`, such as where a statement's line leaves the running total. It fills its container's width, a spacing step 4 tall with no track fill, and its ends follow the writing direction. It is decorative (`aria-hidden`): the figure is the cell's own text, so keep the value beside it, and a cell holding both is named by the figure alone. `tone` (`DataBarTone`, listed in `dataBarTones`; default `'neutral'`) says what the bar is: `'neutral'` for where it started, `'success'` for what came in, `'muted'` for what went out (never danger: an outflow is not an error), `'strong'` for a subtotal, `'accent'` for what was counted or recorded, and `'danger'` for a shortage, never for cash leaving (a light red, the danger colour at 40 %). Each is a semantic colour mixed into the surface, 1.5:1 or more on it, the three greys 1.5:1 or more apart, the shortage's red apart from the grey of what went out, in every palette and scheme. A domain from below zero to above it (`min < 0 < max`) draws a hairline at zero, so a column of differences diverges around it (`from={0} to={value}`), and the bar's end at zero is square; a short bar in `'danger'` and an over bar in `'success'` differ by hue alone, so the bar's side of zero and the signed figure carry the meaning. Values past the domain are clamped to it; non-finite numbers, a `min` not under `max`, or an unknown tone throw a `RangeError`. Forced colors draw the bar and the zero line in the system text color.
 
 A bar in its own column reads as empty cells to assistive technology, which is fine while the figure's cell carries the value; a bar and its figure can also share one cell, side by side in a `Grid`.
 
@@ -457,6 +477,55 @@ A bar in its own column reads as empty cells to assistive technology, which is f
 </TableCell>
 ```
 
+`ChartLegend` is a chart's key: a list of its marks, each a swatch and its words, in a wrapping row in the caption type, placed above the chart or the statement bars it names. `items` (`ChartLegendItem[]`) gives each one's `label`, `swatch` (`ChartLegendSwatch`, listed in `chartLegendSwatches`: `'bar'`, `'line'`, `'marker'` or `'box'`) and `tone`. A `'bar'` is a filled mark and takes a fill tone (`ChartFillTone`, listed in `chartFillTones`): a categorical colour (`'green'`, `'blue'`, `'orange'`, `'purple'`, `'teal'`, `'rose'`, `'neutral'`) for a chart's series, or one of `DataBar`'s statement tones (`'success'`, `'muted'`, `'strong'`, `'accent'`, `'danger'`, and `'neutral'`; a `'bar'` in `'danger'` is DataBar's light shortage fill, for a shortage only, never for cash leaving, and not BarChart's full-colour danger bar, which is the `'line'` swatch's colour). A `'line'`, a `'marker'` (a downward triangle) and a `'box'` (the dashed outline of a boxed current period) are strokes and take a stroke tone (`ChartStrokeTone`, listed in `chartStrokeTones`: `'accent'`, `'success'`, `'warning'`, `'danger'`, `'neutral'`). `ChartTone` is either. Each swatch is the colour of the mark it names in the same tone, because the legend, `DataBar` and the charts read one tone table: a fill keeps 1.5:1 on the surface, a stroke 3:1, in every palette and scheme. The swatches are decorative (`aria-hidden`), so each item reads as its words; the list keeps its role (`role="list"`, which Safari drops from an unmarked list) and takes a name with `aria-label`. An empty or blank `label`, or a swatch or tone the item cannot draw, throws a `RangeError`. Forced colors draw every swatch in the system text color. The contrasts hold on the surface, so put a chart and its legend on it (a `Card`). A `BarChart`'s default bar is a `'bar'` swatch in `'accent'`; its toned bars are drawn in the full semantic colour, the `'line'` swatch's colour.
+
+```tsx
+<ChartLegend
+  aria-label="Key"
+  items={[
+    { label: 'Herons', swatch: 'bar', tone: 'blue' },
+    { label: 'Running total', swatch: 'line', tone: 'accent' },
+    { label: 'Flood', swatch: 'marker', tone: 'danger' },
+    { label: 'This week', swatch: 'box', tone: 'accent' },
+  ]}
+/>
+```
+
+`ColumnChart` draws columns for each of its `categories` (weeks, months: each a row header in its table), one per series (`ColumnChartSeries`: a unique `id`, a `label`, a value per category and a categorical `tone`). `mode` (`ColumnChartMode`, listed in `columnChartModes`) is `'stacked'` by default, a category's positive values stacked up from zero and its negative values down from it, or `'grouped'`, side by side, each from zero; negative values always run below the zero line. `line` (`ColumnChartLine`: `label`, a value per category, `endLabel`) draws an accent line over the columns, such as a running total, on its own right-hand scale whose zero and grid lines are level with the columns' (each scale keeps its own round step); its last value is written beside that axis, in the accent's ink, unless `endLabel` is `false`. `highlight` boxes one category (a dashed accent outline, the current period), and its table row is `aria-current`. `callouts` (`ColumnChartCallout[]`: a category `index`, its `text` and an optional categorical `tone` for its words) are pinned in rows above the plot, each beside a dashed leader down to its column. `formatValue` writes the figures (the table and the line's last value; a plain number with at most one decimal by default) and `formatTick` the axes (defaulting to `formatValue`). The chart fills its container's width and is laid out for it in its own pixels, so its words stay the caption size; under 480 px it is compact: a shorter plot, fewer category labels (always the last) and its callouts listed under the plot, so it never scrolls sideways. The drawing is hidden from assistive technology: a visually hidden table captioned by `label` carries every figure, and the callouts stay a list. Fills, strokes and words come from the chart tones, so a `ChartLegend` above it names each series (`bar` in its tone), the line (`line`, `'accent'`) and the box (`box`, `'accent'`); put both on the surface (a `Card`). Forced colors draw the columns in the text color (outlined in the canvas color), the line in the highlight color and every word in the text color. Empty words, a series or line without one finite value per category, a repeated series id, a tone off the categorical scale, or a highlight or callout that is not a category's index throw a `RangeError`.
+
+```tsx
+<ColumnChart
+  label="Change in birds, last 13 weeks"
+  categories={weeks}
+  series={[
+    { id: 'herons', label: 'Herons', tone: 'blue', values: herons },
+    { id: 'egrets', label: 'Egrets', tone: 'purple', values: egrets },
+  ]}
+  line={{ label: 'Running total', values: runningTotal }}
+  highlight={weeks.length - 1}
+  callouts={[{ index: 3, text: 'Aug 4 · Roost found +50', tone: 'purple' }]}
+  formatValue={signed}
+/>
+```
+
+`LineChart` draws a value over time: `points` (`LineChartPoint[]`: `x` a `YYYY-MM-DD` date, `y` a value), in date order (a date may repeat, as a balance that changes twice in a day), placed by the days between them. `curve` (`LineChartCurve`, listed in `lineChartCurves`) is `'linear'` by default or `'step'`, each value held until the next date. `area` tints the area between the line and zero with its tone, and `tone` (a `ChartStrokeTone`, `'accent'` by default) colors the line, its dot and its last value, written beside the plot's end unless `endLabel` is `false`. `markers` (`LineChartMarker[]`: `x`, one of the points' dates; `label`; a stroke `tone`) put a downward triangle on the line at that date's last value with its words below it (above it where they would pass the plot's bottom), moved in to stay over the plot; words that would meet an earlier marker's are left out of the drawing, never the table. `markersLabel` heads the table's column of marker words and is required with markers. `ticks` are the dates the time axis labels (the first and last point by default), thinned from the last so none meet; `highlight` (`LineChartPeriod`: `from`, `to`) boxes a period, its rows `aria-current`. `formatValue`, `formatTick` (the value axis) and `formatDate` (the time axis and the table's row headers; the date itself by default) write its words. It is laid out for its measured width like `ColumnChart`, never scrolling sideways, and its drawing is hidden: a visually hidden table captioned by `label`, its value column headed by `valueLabel` (default `label`), carries every date, value and marker. A `ChartLegend` above it names the line (`line` in its tone), the markers (`marker` in theirs) and the box (`box`, `'accent'`). Forced colors draw the line in the highlight color, the markers and every word in the text color, and drop the area. Empty words, a date that is not `YYYY-MM-DD`, points out of date order, a value that is not finite, an unknown curve or tone, a marker off the points' dates or without `markersLabel`, a tick outside the points' dates, or a period that ends before it starts throw a `RangeError`.
+
+```tsx
+<LineChart
+  label="Birds roosting each night"
+  valueLabel="Roosting"
+  points={nights}
+  area
+  markers={[{ x: '2026-08-12', label: '2600', tone: 'warning' }]}
+  markersLabel="A flock left"
+  ticks={['2026-07-27', '2026-08-17', '2026-10-12']}
+  highlight={{ from: '2026-10-06', to: '2026-10-12' }}
+  formatDate={shortDate}
+/>
+
+<LineChart label="Nest boxes lent" curve="step" tone="warning" points={loans} />
+```
+
 `Pagination` steps through a list shown a page at a time, for a list with no total to keep in view (a list that adds up scrolls inside itself instead, with `Table` `maxHeight`). It is a `nav` landmark named by `aria-label` or `aria-labelledby` (one is required), holding the consumer's words for what the page shows (`rangeLabel`, such as "1–25 of 130 changes", in the muted caption at the inline start and announced politely when it changes) and the previous and next steps at the end: icon-only neutral `sm` Buttons, square, the 44 px touch target on a coarse pointer, named by `labels` (`PaginationLabels`: `previous`, `next`) with a private chevron glyph mirrored right to left. `page` (from 1) and `pageCount` place it; a step calls `onPageChange` with the page it goes to. At either end its step looks disabled (`aria-disabled`, the neutral grey) but stays a Tab stop, so focus is never dropped when the last page is reached, and a press there does nothing. Pages that are not whole numbers in range, or an empty step label (`labels.previous` or `labels.next`), throw a `RangeError`. The row wraps on a narrow column, the steps staying at the end.
 
 ```tsx
@@ -568,6 +637,65 @@ A bar in its own column reads as empty cells to assistive technology, which is f
 </DescriptionList>
 ```
 
+`StatTile` is one prominent figure with its label: a `label`, a consumer-formatted `value` (tabular figures; `tone` `accent`, `success`, `danger` or `warning` colours it), an optional `caption` under it and an optional `glyph` in a tinted circle. `emphasis="primary"` fills the one figure a page leads with in the accent. `appearance="plain"` (default `"card"`, `statTileAppearances`) drops the tile's surface, edge, radius and padding, top-aligned, for figures inside a card that already has them, such as four answers in a row divided by hairlines: compose a `Grid` and a vertical `Separator` before every tile but the first, hiding the one that would start a row below `md` (`Inline hideBelow="md"` around it). A plain tile cannot be `primary` (there is no surface to fill), and an unknown appearance throws a `RangeError`.
+
+```tsx
+<Card padding={5}>
+  <Grid columns={4} columnsBelow={{ md: 2 }} gap={4}>
+    {answers.map((answer, index) => (
+      <Inline align="stretch" gap={4} key={answer.label}>
+        {index > 0 ? (
+          // 2 is columnsBelow md: an answer that starts a row there has no hairline.
+          <Inline
+            align="stretch"
+            hideBelow={index % 2 === 0 ? 'md' : undefined}
+          >
+            <Separator orientation="vertical" decorative />
+          </Inline>
+        ) : null}
+        <StatTile appearance="plain" {...answer} />
+      </Inline>
+    ))}
+  </Grid>
+</Card>
+```
+
+`ListGroup` is rows in one list with a hairline between each pair, the web twin of react-native's: a `ul` (its list role kept) named by `aria-label` or `aria-labelledby`. `variant="panel"` (the default) is one bordered panel; `plain` draws no panel and a hairline above the first row too, for rows inside a `Card`. Each `ListRow` has a `title` (weight 600, or the body weight with `titleAppearance="plain"`; `tone="danger"` for a row that ends something), an optional muted `detail` line, an optional `value` at its end (weight 600, tabular figures; `valueTone` `success`, `danger`, `muted` or `accent`; `valueDetail` a muted line under it) and an optional `leading` mark such as a status dot, hidden from assistive technology, so the words say what it means. With `onPress` the whole row is a button, and with `href` a link (`onPress` then takes a plain press for a client router); either adds a chevron, a quiet fill under the pointer and 44 px on a coarse pointer, and the row is named by its title and value and described by its detail lines (`aria-label` replaces the name). `selected` makes a pressable row a choice: a check while true, `aria-pressed` on a button or `aria-current` on a link (on a row with neither `onPress` nor `href` it throws, since nothing could read the state). `accessory="none"` hides the chevron of a row that acts in place; `disabled` blocks presses. A row with neither `onPress` nor `href` only states something. `maxHeight={{ rows }}` bounds the list to that many rows of a title and one detail line, the rest scrolling inside its own named region, which shades an edge with more rows past it; a bounded list must be named. `footer` stays pinned under the rows, outside the scroll, such as a `ListRow` with the count and the total (a row there is not a list item). An empty title or value, an unknown variant or tone, a `valueDetail` without a value, or a bad row count throws a `RangeError`.
+
+```tsx
+<Card padding={4}>
+  <Text as="h3" id="look" variant="label">
+    Worth a look
+  </Text>
+  <ListGroup aria-labelledby="look" variant="plain">
+    <ListRow
+      leading={<Circle size={8} fill="currentColor" />}
+      title="Wed, Oct 7 · North marsh counted 6 fewer herons"
+      detail="Recounted Sat, Oct 10 by Field team A"
+      href="/nights/2026-10-07"
+      onPress={() => router.push('/nights/2026-10-07')}
+    />
+  </ListGroup>
+</Card>
+
+<ListGroup
+  aria-label="Night counts"
+  maxHeight={{ rows: 5 }}
+  footer={<ListRow title="8 nights" value="+0" />}
+>
+  {nights.map((night) => (
+    <ListRow
+      key={night.id}
+      title={night.name}
+      detail={night.detail}
+      value={night.change}
+      valueTone={night.tone}
+      onPress={() => openNight(night)}
+    />
+  ))}
+</ListGroup>
+```
+
 `Card` defaults to `glass`; `outlined` and `elevated` are solid surfaces, and `filled` is a quiet `--sw-color-subtle` fill with no border for plain information apart from pressable rows.
 
 `--sw-color-accentSubtle` is the accent tint from `@scalewing/tokens`: a quiet fill behind accent text or glyphs that keeps 4.5:1. The stylesheet and every palette file set it, and a palette that moves the accent or surface retints it.
@@ -684,6 +812,32 @@ People type the date into a text entry in the locale's numeric order (`MM/DD/YYY
 </Inline>
 ```
 
+`DateRangeButton` shows a range of days and opens a calendar to pick a first and a last day, such as a report's period between its own ‹ and › steps. Supply `label` (what pressing it does, such as "Choose survey period"), `value` (`{ start, end }`, both `YYYY-MM-DD` and included) and `onChange`; optional `min`, `max`, `today`, `disabled`, `locale`, `weekStartsOn`, `id` and a `ref` behave as on `CalendarButton`. The button shows a calendar glyph and the range in the locale, sharing what both ends have ("Oct 6 – 12, 2026"; one day as one date); its name is `label`, `labels.nameSeparator`, then that range. The first press on a day sets the start and the second the end; a press before the start starts over from it, and Apply with only a start applies that one day. Days after `max` are disabled, and once a start is pressed so are the days past `maxDays` (a whole number of days, both ends counted, such as 366). The range being picked and its length (`labels.dayCount`) are a polite status. **Apply** calls `onChange` when the range changed, closes and returns focus to the button; **Cancel**, Escape and a press outside close without a change. `presets` (`{ id, label, range }[]`) are ranges chosen in one press: a press applies its range at once and closes, and the one matching the range shown is pressed; a preset outside `min`/`max` or longer than `maxDays` throws, so compute presets from the same bounds and leave out one that does not fit (such as Last year for a station opened this spring). From `md` up the calendar is a popover with the presets beside two months (above them below `lg`, where both do not fit side by side), the range and the hint, and Cancel and Apply; below `md` it is a `Dialog` bottom sheet titled by `label` with the range under the title, the presets in a row that scrolls sideways, one month and the hint over Cancel and Apply. The keyboard is the calendar's: arrows, Home, End, PageUp and PageDown (with Shift by year) move one focus day across both months, and Enter or Space presses it. `labels` takes `previousMonth`, `nextMonth`, `nameSeparator`, `presets` (the presets group's name), `apply`, `cancel`, `close`, `hint` and `dayCount(days)`, in English by default. `size` (default `md`, at least 44 px tall on a coarse pointer) and `variant` (default `neutral`) follow `Button`. A value outside `min`/`max` or longer than `maxDays` is kept; an empty or malformed date, a start after its end, a `maxDays` under 1 or fractional, repeated preset ids, or an empty word throws a `RangeError`.
+
+```tsx
+<ButtonGroup aria-label="Survey period" attached>
+  <Button aria-label="The period before" variant="neutral" onPress={previous}>
+    ‹
+  </Button>
+  <DateRangeButton
+    label="Choose survey period"
+    value={period}
+    onChange={setPeriod}
+    presets={[
+      { id: 'week', label: 'Last 7 days', range: lastSevenDays },
+      { id: 'month', label: 'This month', range: thisMonth },
+    ]}
+    max={stationDay}
+    maxDays={366}
+    today={stationDay}
+    labels={{ apply: 'Show' }}
+  />
+  <Button aria-label="The period after" variant="neutral" onPress={next}>
+    ›
+  </Button>
+</ButtonGroup>
+```
+
 ```tsx
 <Switch
   label="Active habitats only"

package/dist/calendar-month.d.ts

@@ -17,8 +17,14 @@ export declare function weekdayOf(value: string): number;
 export declare function addDays(value: string, delta: number): string;
 /** Same day of the month `delta` months away, capped at that month's length. */
 export declare function addMonths(value: string, delta: number): string;
+/** Days from `start` to `end`: 0 for the same day, negative when `end` is earlier. */
+export declare function daysBetween(start: string, end: string): number;
 export declare function monthOf(value: string): CalendarMonth;
 export declare function shiftMonth(month: CalendarMonth, delta: number): CalendarMonth;
+/** Months from `from` to `to`: 0 for the same month, negative when `to` is earlier. */
+export declare function monthsBetween(from: CalendarMonth, to: CalendarMonth): number;
+/** `value`'s day of the month in `month`, capped at that month's length. */
+export declare function sameDayIn(month: CalendarMonth, value: string): string;
 export declare function firstOfMonth(month: CalendarMonth): string;
 export declare function lastOfMonth(month: CalendarMonth): string;
 /** Whether any day of the month falls inside `[min, max]`. */

package/dist/calendar-month.js

@@ -61,6 +61,10 @@ export function addMonths(value, delta) {
         day: Math.min(parts.day, daysInMonth(month.year, month.month)),
     });
 }
+/** Days from `start` to `end`: 0 for the same day, negative when `end` is earlier. */
+export function daysBetween(start, end) {
+    return toDayNumber(requireDate(end)) - toDayNumber(requireDate(start));
+}
 export function monthOf(value) {
     const parts = requireDate(value);
     return { year: parts.year, month: parts.month };
@@ -69,6 +73,17 @@ export function shiftMonth(month, delta) {
     const index = month.year * 12 + (month.month - 1) + delta;
     return { year: Math.floor(index / 12), month: (index % 12) + 1 };
 }
+/** Months from `from` to `to`: 0 for the same month, negative when `to` is earlier. */
+export function monthsBetween(from, to) {
+    return to.year * 12 + to.month - (from.year * 12 + from.month);
+}
+/** `value`'s day of the month in `month`, capped at that month's length. */
+export function sameDayIn(month, value) {
+    return formatDateOnly({
+        ...month,
+        day: Math.min(requireDate(value).day, daysInMonth(month.year, month.month)),
+    });
+}
 export function firstOfMonth(month) {
     return formatDateOnly({ ...month, day: 1 });
 }

package/dist/chart-axis.d.ts

@@ -0,0 +1,61 @@
+import { type ChartScale } from './chart-scale.js';
+/** A value axis's grid line and its words, at a height in the plot. */
+export type ChartTick = {
+    value: number;
+    y: number;
+    label: string;
+};
+/** A plot's edges, in the chart's pixels. */
+export type ChartPlot = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+/** The height a value falls at in a plot, on a scale. */
+export declare function valueY(value: number, scale: ChartScale, plot: ChartPlot): number;
+/** A scale's ticks, placed in a plot and written by `format`. */
+export declare function valueTicks(scale: ChartScale, plot: ChartPlot, format: (value: number) => string): ChartTick[];
+/** The room a column of labels takes beside the plot, with its gap. */
+export declare function labelGutter(labels: readonly string[]): number;
+/**
+ * Which of `count` evenly spaced places, `slot` pixels apart, get their
+ * label: every one when the widest label and a gap either side fit a
+ * slot, otherwise every second, third and so on, counted back from the
+ * last, so the latest place is always labelled.
+ */
+export declare function labelledPlaces(labels: readonly string[], slot: number): number[];
+/**
+ * Drops the ticks whose words would meet a label drawn at `y` in the same
+ * column (such as a line's last value beside its axis).
+ */
+export declare function ticksClearOf(ticks: readonly ChartTick[], y: number): ChartTick[];
+/**
+ * The room past a plot's end: a line's own axis words and its last value
+ * beside them, with a gap either side, or a gap alone with neither. The
+ * axis words give way when they would leave the plot under
+ * `chartMinPlotWidth`; the last value and the hidden table still say it.
+ */
+export declare function endGutter({ width, left, axisWords, endLabel, }: {
+    width: number;
+    left: number;
+    axisWords: readonly string[];
+    endLabel: string | null;
+}): {
+    gutter: number;
+    axisWordsShown: boolean;
+};
+/**
+ * The boxed period around a span of the plot, `inset` inside it (a
+ * category's band takes `chartInset`; a period of days takes none) and
+ * past the plot's top and bottom; never narrower than a hairline, even on
+ * a chart so dense the span is thinner than its inset.
+ */
+export declare function periodBox(start: number, band: number, plot: ChartPlot, inset?: number): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/** A label's centre, moved in so its words stay inside the chart's width. */
+export declare function labelInside(x: number, text: string, width: number): number;

package/dist/chart-axis.js

@@ -0,0 +1,83 @@
+import { chartHairline } from './css/chart-marks.js';
+import { chartGap, chartInset, chartMinPlotWidth, chartTextWidth, chartType, } from './chart-metrics.js';
+import { scaleShare } from './chart-scale.js';
+/** The height a value falls at in a plot, on a scale. */
+export function valueY(value, scale, plot) {
+    return plot.bottom - scaleShare(value, scale) * (plot.bottom - plot.top);
+}
+/** A scale's ticks, placed in a plot and written by `format`. */
+export function valueTicks(scale, plot, format) {
+    return scale.ticks.map((value) => ({
+        value,
+        y: valueY(value, scale, plot),
+        label: format(value),
+    }));
+}
+/** The room a column of labels takes beside the plot, with its gap. */
+export function labelGutter(labels) {
+    let widest = 0;
+    for (const label of labels)
+        widest = Math.max(widest, chartTextWidth(label));
+    return Math.ceil(widest) + chartGap;
+}
+/**
+ * Which of `count` evenly spaced places, `slot` pixels apart, get their
+ * label: every one when the widest label and a gap either side fit a
+ * slot, otherwise every second, third and so on, counted back from the
+ * last, so the latest place is always labelled.
+ */
+export function labelledPlaces(labels, slot) {
+    if (labels.length === 0)
+        return [];
+    let widest = 0;
+    for (const label of labels)
+        widest = Math.max(widest, chartTextWidth(label));
+    const every = Math.max(1, Math.ceil((widest + chartGap * 2) / slot));
+    const places = [];
+    for (let index = labels.length - 1; index >= 0; index -= every)
+        places.unshift(index);
+    return places;
+}
+/**
+ * Drops the ticks whose words would meet a label drawn at `y` in the same
+ * column (such as a line's last value beside its axis).
+ */
+export function ticksClearOf(ticks, y) {
+    return ticks.filter((tick) => Math.abs(tick.y - y) >= chartType.lineHeight);
+}
+/**
+ * The room past a plot's end: a line's own axis words and its last value
+ * beside them, with a gap either side, or a gap alone with neither. The
+ * axis words give way when they would leave the plot under
+ * `chartMinPlotWidth`; the last value and the hidden table still say it.
+ */
+export function endGutter({ width, left, axisWords, endLabel, }) {
+    const endRoom = endLabel ? Math.ceil(chartTextWidth(endLabel)) + chartGap : 0;
+    const axisRoom = axisWords.length > 0 ? labelGutter(axisWords) : 0;
+    const axisWordsShown = axisRoom > 0 &&
+        width - left - chartGap - Math.max(axisRoom, endRoom) >= chartMinPlotWidth;
+    return {
+        gutter: chartGap + Math.max(axisWordsShown ? axisRoom : 0, endRoom),
+        axisWordsShown,
+    };
+}
+/**
+ * The boxed period around a span of the plot, `inset` inside it (a
+ * category's band takes `chartInset`; a period of days takes none) and
+ * past the plot's top and bottom; never narrower than a hairline, even on
+ * a chart so dense the span is thinner than its inset.
+ */
+export function periodBox(start, band, plot, inset = chartInset) {
+    const width = Math.max(band - inset, chartHairline);
+    return {
+        x: start + (band - width) / 2,
+        y: plot.top - chartGap,
+        width,
+        height: plot.bottom - plot.top + chartGap + chartInset,
+    };
+}
+/** A label's centre, moved in so its words stay inside the chart's width. */
+export function labelInside(x, text, width) {
+    const half = chartTextWidth(text) / 2;
+    return Math.min(Math.max(x, half), width - half);
+}

package/dist/chart-dates.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A `YYYY-MM-DD` date as a whole day count (days since 1970-01-01), so a
+ * time axis places dates by the days between them; `null` for anything
+ * that is not a real date.
+ */
+export declare function dayNumber(value: string): number | null;

package/dist/chart-dates.js

@@ -0,0 +1,15 @@
+import { parseDateOnly } from './date-only.js';
+const dayMs = 24 * 60 * 60 * 1000;
+/**
+ * A `YYYY-MM-DD` date as a whole day count (days since 1970-01-01), so a
+ * time axis places dates by the days between them; `null` for anything
+ * that is not a real date.
+ */
+export function dayNumber(value) {
+    const parts = parseDateOnly(value);
+    if (!parts)
+        return null;
+    const date = new Date(0);
+    date.setUTCFullYear(parts.year, parts.month - 1, parts.day);
+    return Math.round(date.getTime() / dayMs);
+}

package/dist/chart-metrics.d.ts

@@ -0,0 +1,40 @@
+/** The type a chart's words are drawn in: the caption variant. */
+export declare const chartType: {
+    readonly fontSize: 13;
+    readonly lineHeight: 18;
+    readonly fontWeight: 400;
+    readonly letterSpacing: -0.08;
+};
+/** The gap between a mark and its words, and around the plot. */
+export declare const chartGap: 8;
+/** A small inset: a leader's distance from its column, a box's overhang. */
+export declare const chartInset: 4;
+/**
+ * Below this width a chart is compact: its callouts move under the plot as
+ * a list, its plot is shorter, and its axes label fewer places. A phone
+ * column (a 390 px screen less its margins) is under it; a tablet's is not.
+ */
+export declare const chartCompactWidth: number;
+/**
+ * The narrowest plot a chart keeps: under it, a line's own axis gives up
+ * its words (the line's last value and the hidden table still say it).
+ */
+export declare const chartMinPlotWidth: number;
+/** The width a chart is drawn at before it has been measured. */
+export declare const chartFallbackWidth: number;
+/** The plot's height: the area the values are drawn in. */
+export declare function chartPlotHeight(compact: boolean): number;
+/** A column's corners, and the boxed period's. */
+export declare const chartColumnRadius: number;
+export declare const chartBoxRadius: number;
+/** A marker's downward triangle: as wide and tall as a legend's marker swatch. */
+export declare const chartMarkerSize: 12;
+/** The dot at a line's last value. */
+export declare const chartDotRadius: number;
+/**
+ * About how wide a run of the chart's words is: its characters at 0.6 of
+ * the font size, the width of a tabular digit in the system sans. Used to
+ * leave room for axis labels and to keep labels from running into one
+ * another; the words are short figures and dates.
+ */
+export declare function chartTextWidth(text: string): number;

package/dist/chart-metrics.js

@@ -0,0 +1,48 @@
+import { radiusScale, spacingScale, typographyVariants, } from '@scalewing/tokens';
+import { chartLineWidth } from './css/chart-marks.js';
+/*
+ * The measures a chart's drawing is laid out with, all from tokens: the
+ * caption type its words are set in, spacing steps for its gaps, and the
+ * radius scale for its corners. The drawing is SVG in the chart's own
+ * pixels, so it is laid out for the width it is given (D-39: component
+ * geometry, not theme math).
+ */
+/** The type a chart's words are drawn in: the caption variant. */
+export const chartType = typographyVariants.caption;
+/** The gap between a mark and its words, and around the plot. */
+export const chartGap = spacingScale[2];
+/** A small inset: a leader's distance from its column, a box's overhang. */
+export const chartInset = spacingScale[1];
+/**
+ * Below this width a chart is compact: its callouts move under the plot as
+ * a list, its plot is shorter, and its axes label fewer places. A phone
+ * column (a 390 px screen less its margins) is under it; a tablet's is not.
+ */
+export const chartCompactWidth = spacingScale[8] * 10;
+/**
+ * The narrowest plot a chart keeps: under it, a line's own axis gives up
+ * its words (the line's last value and the hidden table still say it).
+ */
+export const chartMinPlotWidth = spacingScale[8] * 2;
+/** The width a chart is drawn at before it has been measured. */
+export const chartFallbackWidth = spacingScale[8] * 13;
+/** The plot's height: the area the values are drawn in. */
+export function chartPlotHeight(compact) {
+    return compact ? spacingScale[6] * 5 : spacingScale[8] * 4;
+}
+/** A column's corners, and the boxed period's. */
+export const chartColumnRadius = radiusScale.sm / 4;
+export const chartBoxRadius = radiusScale.sm / 2;
+/** A marker's downward triangle: as wide and tall as a legend's marker swatch. */
+export const chartMarkerSize = spacingScale[3];
+/** The dot at a line's last value. */
+export const chartDotRadius = chartLineWidth * 1.75;
+/**
+ * About how wide a run of the chart's words is: its characters at 0.6 of
+ * the font size, the width of a tabular digit in the system sans. Used to
+ * leave room for axis labels and to keep labels from running into one
+ * another; the words are short figures and dates.
+ */
+export function chartTextWidth(text) {
+    return text.length * chartType.fontSize * 0.6;
+}

package/dist/chart-scale.d.ts

@@ -0,0 +1,48 @@
+/**
+ * A value axis: its ends and the values its grid lines and labels mark,
+ * from `min` to `max` a whole `step` apart, always through zero.
+ */
+export type ChartScale = {
+    min: number;
+    max: number;
+    step: number;
+    ticks: readonly number[];
+};
+/** How many steps a value axis aims for between its ends. */
+export declare const chartScaleSteps = 4;
+/**
+ * The smallest round step (1, 2, 2.5 or 5 times a power of ten) that
+ * covers `span` in at most `steps` steps.
+ */
+export declare function niceStep(span: number, steps: number): number;
+/** The least and greatest of some values, both stretched to reach zero. */
+export declare function extentThroughZero(values: Iterable<number>): {
+    min: number;
+    max: number;
+};
+/**
+ * A value axis for an extent through zero: a round step, and as many whole
+ * steps either side of zero as the extent needs. An extent of only zero
+ * reads 0 to 1.
+ */
+export declare function chartScale(extent: {
+    min: number;
+    max: number;
+}): ChartScale;
+/**
+ * Two value axes drawn on one plot, such as columns on the left and a
+ * running total on the right: each keeps its own round step, and both have
+ * the same number of steps below and above zero, so zero and every grid
+ * line fall at the same height on both. When the two lean different ways
+ * (one mostly above zero, the other below), both take fewer, longer steps
+ * so the plot keeps about as many grid lines as one scale would.
+ */
+export declare function alignedChartScales(first: {
+    min: number;
+    max: number;
+}, second: {
+    min: number;
+    max: number;
+}): [ChartScale, ChartScale];
+/** Where a value falls on a scale, as a share from its bottom (0) to top (1). */
+export declare function scaleShare(value: number, scale: ChartScale): number;