@scalewing/react 1.37.0 → 1.38.0

package/dist/css/css-table-total-row.js

@@ -0,0 +1,29 @@
+/*
+ * A total row mid-table (`TableRow variant="total"`), such as a subtotal
+ * the rows above add up to before the table goes on: its cells at weight
+ * 600 under the footer's heavier rule, 2 px in the border colour across
+ * its top, as a `TableFooter` total is drawn. The rule is the cells' own
+ * top border, which the collapsed-border model resolves over the row
+ * above's 1 px one, so forced colours keep it (in `CanvasText`) and no
+ * pseudo-element is taken from a selected row's bar or a sub row's guide.
+ * The row takes no fill: on the subtle fill, accent text (a link or an
+ * accent-toned figure) falls under 4.5:1 in several palettes, as the
+ * selected row's note in `css-table.ts` found. A total row belongs in the
+ * body: a pinned header cell draws its rules on its pseudo-elements
+ * instead, and a `TableFooter` already draws the total at the table's
+ * end. A cell's `tone` keeps its colour; a struck total row mutes and
+ * strikes it as any struck row.
+ */
+export function cssTableTotalRowClasses() {
+    return `.sw-table .sw-table-row-total > :is(th, td) {
+  border-top: 2px solid var(--sw-color-border);
+  font-weight: 600;
+}
+
+@media (forced-colors: active) {
+  .sw-table .sw-table-row-total > :is(th, td) { border-top-color: CanvasText; }
+}`;
+}
+export function tableTotalRowClassCatalog() {
+    return ['sw-table-row-total'];
+}

package/dist/css/css-table.js

@@ -1,13 +1,18 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { scrollRegionRules } from './css-scroll-region.js';
+import { tableCellPadding, tableRuleWidth } from './css-table-metrics.js';
+import { cssTableBoundedClasses, tableBoundedClassCatalog, } from './css-table-bounded.js';
 import { cssTableLayoutClasses, tableLayoutClassCatalog, } from './css-table-layout.js';
 import { cssTableLedgerClasses, tableLedgerClassCatalog, } from './css-table-ledger.js';
 import { cssTableFooterClasses, tableFooterClassCatalog, } from './css-table-footer.js';
 import { cssTablePagePinClasses, tablePagePinClassCatalog, } from './css-table-page-pin.js';
+import { cssTableTotalRowClasses, tableTotalRowClassCatalog, } from './css-table-total-row.js';
 import { cssTablePressClasses, tablePressClassCatalog, } from './css-table-press.js';
 import { cssTableStickyHeaderClasses, tableStickyHeaderClassCatalog, } from './css-table-sticky-header.js';
 import { cssTableSortClasses, tableSortClassCatalog, } from './css-table-sort.js';
 const caption = typographyVariants.caption;
+const comfortable = tableCellPadding.comfortable;
+const compact = tableCellPadding.compact;
 /*
  * A selected row is marked by an accent bar at its inline start and nothing
  * else: no fill, so text, muted text and accent text (ghost buttons, links)
@@ -45,8 +50,8 @@ export function cssTableClasses() {
 
 .sw-table th,
 .sw-table td {
-  border-bottom: 1px solid var(--sw-color-border);
-  padding: var(--sw-space-2) var(--sw-space-3);
+  border-bottom: ${tableRuleWidth} solid var(--sw-color-border);
+  padding: ${comfortable.block} ${comfortable.inline};
   text-align: start;
   vertical-align: middle;
 }
@@ -79,7 +84,7 @@ ${cssTableStickyHeaderClasses()}
 
 .sw-table-compact th,
 .sw-table-compact td {
-  padding: var(--sw-space-1) var(--sw-space-2);
+  padding: ${compact.block} ${compact.inline};
 }
 
 ${cssTableLayoutClasses()}
@@ -88,10 +93,14 @@ ${cssTableSortClasses()}
 
 ${cssTableLedgerClasses()}
 
+${cssTableTotalRowClasses()}
+
 ${cssTableFooterClasses()}
 
 ${cssTablePagePinClasses()}
 
+${cssTableBoundedClasses()}
+
 ${cssTablePressClasses()}
 
 ${selectedRowRules()}`;
@@ -109,8 +118,10 @@ export function tableClassCatalog() {
         ...tableLayoutClassCatalog(),
         ...tableSortClassCatalog(),
         ...tableLedgerClassCatalog(),
+        ...tableTotalRowClassCatalog(),
         ...tableFooterClassCatalog(),
         ...tablePagePinClassCatalog(),
+        ...tableBoundedClassCatalog(),
         ...tablePressClassCatalog(),
     ];
 }

package/dist/css/stylesheet.js

@@ -31,6 +31,8 @@ import { boxLinkClassCatalog } from './css-box-link.js';
 import { cssComponentClasses } from './css-components.js';
 import { buttonClassCatalog } from './css-button.js';
 import { chartClassCatalog } from './css-chart.js';
+import { dataBarClassCatalog } from './css-data-bar.js';
+import { paginationClassCatalog } from './css-pagination.js';
 import { dataClassCatalog } from './css-data.js';
 import { segmentedClassCatalog } from './css-segmented.js';
 import { tableClassCatalog } from './css-table.js';
@@ -69,6 +71,8 @@ export function utilityClassCatalog() {
         ...tableClassCatalog(),
         ...scrollRegionClassCatalog(),
         ...chartClassCatalog(),
+        ...dataBarClassCatalog(),
+        ...paginationClassCatalog(),
         ...chromeClassCatalog(),
         ...sectionNavClassCatalog(),
         ...dialogClassCatalog(),

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

@@ -0,0 +1,24 @@
+/** Where a range bar sits on its track, as shares of the track (0 to 1). */
+export type DataBarGeometry = {
+    /** The bar's inline start, from the track's start. */
+    start: number;
+    /** The bar's length. */
+    size: number;
+    /** Where zero falls, when the domain runs from below zero to above it. */
+    zero: number | null;
+    /**
+     * Which end of the bar meets the zero line on such a domain: `start`
+     * for a bar from zero toward the domain's end (a positive value), `end`
+     * for one from below zero up to it, `null` when neither end is zero.
+     */
+    zeroEnd: 'start' | 'end' | null;
+};
+/**
+ * Places the range from `from` to `to` on a track whose domain runs from
+ * `min` to `max`: the bar starts at the smaller end and runs to the larger,
+ * each clamped to the domain, so a value just past it from rounding stays
+ * on the track. A domain from below zero to above it has a zero line, and
+ * the bar says which of its ends meets it.
+ * Non-finite numbers, or a `min` not under `max`, throw a `RangeError`.
+ */
+export declare function dataBarGeometry(from: number, to: number, min: number, max: number): DataBarGeometry;

package/dist/data-bar-geometry.js

@@ -0,0 +1,41 @@
+function assertFinite(name, value) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        throw new RangeError(`DataBar ${name} must be a finite number: ${String(value)}`);
+}
+function share(value, min, span) {
+    return (Math.min(Math.max(value, min), min + span) - min) / span;
+}
+/**
+ * Places the range from `from` to `to` on a track whose domain runs from
+ * `min` to `max`: the bar starts at the smaller end and runs to the larger,
+ * each clamped to the domain, so a value just past it from rounding stays
+ * on the track. A domain from below zero to above it has a zero line, and
+ * the bar says which of its ends meets it.
+ * Non-finite numbers, or a `min` not under `max`, throw a `RangeError`.
+ */
+export function dataBarGeometry(from, to, min, max) {
+    assertFinite('from', from);
+    assertFinite('to', to);
+    assertFinite('min', min);
+    assertFinite('max', max);
+    if (min >= max)
+        throw new RangeError(`DataBar min must be under max: min ${min}, max ${max}`);
+    const span = max - min;
+    const low = Math.min(from, to);
+    const high = Math.max(from, to);
+    const start = share(low, min, span);
+    const end = share(high, min, span);
+    const diverging = min < 0 && max > 0;
+    return {
+        start,
+        size: end - start,
+        zero: diverging ? share(0, min, span) : null,
+        zeroEnd: !diverging || low === high
+            ? null
+            : low === 0
+                ? 'start'
+                : high === 0
+                    ? 'end'
+                    : null,
+    };
+}

package/dist/index.d.ts

@@ -16,6 +16,8 @@ export { RadioGroup, type RadioGroupOption, type RadioGroupProps, } from './comp
 export { AppHeader, appHeaderAppearances, type AppHeaderAppearance, type AppHeaderProps, } from './components/AppHeader.js';
 export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, badgeSizes, badgeTones, } from './components/Badge.js';
 export { BarChart, type BarChartItem, type BarChartProps, type BarChartTone, barChartTones, } from './components/BarChart.js';
+export { DataBar, type DataBarProps, type DataBarTone, dataBarTones, } from './components/DataBar.js';
+export { Pagination, type PaginationLabels, type PaginationProps, } from './components/Pagination.js';
 export { Button, type ButtonDisabledAppearance, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
 export { buttonDisabledAppearances, webButtonVariants, } from './css/css-button.js';
 export { Box, type BoxBorder, type BoxElement, type BoxLink, type BoxProps, } from './components/Box.js';
@@ -42,7 +44,7 @@ export { Select } from './components/Select.js';
 export type { SelectAction, SelectOption, SelectProps, SelectWidth, } from './components/Select.js';
 export { MultiSelect, type MultiSelectAlign, type MultiSelectOption, type MultiSelectProps, } from './components/MultiSelect.js';
 export { Stack, type Align, type Justify, type StackProps, } from './components/Stack.js';
-export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, tableCellTones, tableRowVariants, type TableBodyProps, type TableCellProps, type TableCellTone, type TableColumnWidth, type TableDensity, type TableFooterProps, type TableHeaderProps, type TableLayout, type TableProps, type TableRowProps, type TableRowVariant, type TableSort, type TableStickyHeader, type TableVerticalAlign, } from './components/Table.js';
+export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, tableCellTones, tableRowVariants, type TableBodyProps, type TableCellProps, type TableCellTone, type TableColumnWidth, type TableDensity, type TableFooterProps, type TableHeaderProps, type TableLayout, type TableMaxHeight, type TableProps, type TableRowProps, type TableRowVariant, type TableSort, type TableStickyHeader, type TableVerticalAlign, } from './components/Table.js';
 export { Text, type TextAlign, type TextElement, type TextProps, } from './components/Text.js';
 export { ThemeProvider, useTheme, type ThemeProviderProps, } from './theme/ThemeProvider.js';
 export { utilityClassCatalog } from './css/stylesheet.js';

package/dist/index.js

@@ -15,6 +15,8 @@ export { RadioGroup, } from './components/RadioGroup.js';
 export { AppHeader, appHeaderAppearances, } from './components/AppHeader.js';
 export { Badge, badgeSizes, badgeTones, } from './components/Badge.js';
 export { BarChart, barChartTones, } from './components/BarChart.js';
+export { DataBar, dataBarTones, } from './components/DataBar.js';
+export { Pagination, } from './components/Pagination.js';
 export { Button, } from './components/Button.js';
 export { buttonDisabledAppearances, webButtonVariants, } from './css/css-button.js';
 export { Box, } from './components/Box.js';

package/dist/pagination-pages.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Checks a pager's place: `pageCount` a whole number from 1 and `page` a
+ * whole number from 1 to `pageCount`. Pages count from 1, as people read
+ * them. Anything else throws a `RangeError`.
+ */
+export declare function assertPaginationPages(page: number, pageCount: number): void;
+/** The page a step goes to, or `null` at the end it cannot pass. */
+export declare function paginationStep(page: number, pageCount: number, direction: 'previous' | 'next'): number | null;
+/** The steps' names, one per step, each a word or two (not blank). */
+export declare function assertPaginationLabels(labels: {
+    previous: string;
+    next: string;
+}): void;

package/dist/pagination-pages.js

@@ -0,0 +1,22 @@
+/**
+ * Checks a pager's place: `pageCount` a whole number from 1 and `page` a
+ * whole number from 1 to `pageCount`. Pages count from 1, as people read
+ * them. Anything else throws a `RangeError`.
+ */
+export function assertPaginationPages(page, pageCount) {
+    if (!Number.isInteger(pageCount) || pageCount < 1)
+        throw new RangeError(`Pagination pageCount must be a whole number from 1: ${String(pageCount)}`);
+    if (!Number.isInteger(page) || page < 1 || page > pageCount)
+        throw new RangeError(`Pagination page must be a whole number from 1 to ${pageCount}: ${String(page)}`);
+}
+/** The page a step goes to, or `null` at the end it cannot pass. */
+export function paginationStep(page, pageCount, direction) {
+    const target = direction === 'previous' ? page - 1 : page + 1;
+    return target < 1 || target > pageCount ? null : target;
+}
+/** The steps' names, one per step, each a word or two (not blank). */
+export function assertPaginationLabels(labels) {
+    for (const key of ['previous', 'next'])
+        if (typeof labels?.[key] !== 'string' || labels[key].trim() === '')
+            throw new RangeError(`Pagination labels.${key} must be a word or two`);
+}

package/dist/scroll-overflow.d.ts

@@ -3,7 +3,13 @@ export type ScrollOverflow = {
     start: boolean;
     end: boolean;
 };
+/** Which block edges of a scroll box have content scrolled out past them. */
+export type BlockScrollOverflow = {
+    top: boolean;
+    bottom: boolean;
+};
 export declare const noScrollOverflow: ScrollOverflow;
+export declare const noBlockScrollOverflow: BlockScrollOverflow;
 /**
  * Reads a box's horizontal overflow from its scroll metrics. `scrollLeft` is
  * 0 at the inline start and grows toward the end in a left-to-right box; in
@@ -11,4 +17,10 @@ export declare const noScrollOverflow: ScrollOverflow;
  * the distance travelled is its magnitude in both.
  */
 export declare function scrollOverflow(scrollLeft: number, scrollWidth: number, clientWidth: number): ScrollOverflow;
+/**
+ * Reads a box's vertical overflow from its scroll metrics: `scrollTop` is 0
+ * at the top and grows toward the bottom.
+ */
+export declare function blockScrollOverflow(scrollTop: number, scrollHeight: number, clientHeight: number): BlockScrollOverflow;
 export declare function sameScrollOverflow(a: ScrollOverflow, b: ScrollOverflow): boolean;
+export declare function sameBlockScrollOverflow(a: BlockScrollOverflow, b: BlockScrollOverflow): boolean;

package/dist/scroll-overflow.js

@@ -1,10 +1,25 @@
 export const noScrollOverflow = { start: false, end: false };
+export const noBlockScrollOverflow = {
+    top: false,
+    bottom: false,
+};
 /**
  * Sub-pixel layout can leave a box a fraction of a pixel wider than its
  * content, or a scroll position a fraction short of its end; within this
  * many pixels an edge counts as reached.
  */
 const edgeTolerance = 1;
+/**
+ * Whether one axis has content past its leading and its trailing edge, or
+ * `null` when the content fits that axis. `travelled` is how far the box
+ * has scrolled from its leading edge.
+ */
+function axisOverflow(travelled, scrollSize, clientSize) {
+    const hidden = scrollSize - clientSize;
+    if (hidden <= edgeTolerance)
+        return null;
+    return [travelled > edgeTolerance, travelled < hidden - edgeTolerance];
+}
 /**
  * Reads a box's horizontal overflow from its scroll metrics. `scrollLeft` is
  * 0 at the inline start and grows toward the end in a left-to-right box; in
@@ -12,15 +27,24 @@ const edgeTolerance = 1;
  * the distance travelled is its magnitude in both.
  */
 export function scrollOverflow(scrollLeft, scrollWidth, clientWidth) {
-    const hidden = scrollWidth - clientWidth;
-    if (hidden <= edgeTolerance)
+    const edges = axisOverflow(Math.abs(scrollLeft), scrollWidth, clientWidth);
+    if (edges === null)
         return noScrollOverflow;
-    const travelled = Math.abs(scrollLeft);
-    return {
-        start: travelled > edgeTolerance,
-        end: travelled < hidden - edgeTolerance,
-    };
+    return { start: edges[0], end: edges[1] };
+}
+/**
+ * Reads a box's vertical overflow from its scroll metrics: `scrollTop` is 0
+ * at the top and grows toward the bottom.
+ */
+export function blockScrollOverflow(scrollTop, scrollHeight, clientHeight) {
+    const edges = axisOverflow(scrollTop, scrollHeight, clientHeight);
+    if (edges === null)
+        return noBlockScrollOverflow;
+    return { top: edges[0], bottom: edges[1] };
 }
 export function sameScrollOverflow(a, b) {
     return a.start === b.start && a.end === b.end;
 }
+export function sameBlockScrollOverflow(a, b) {
+    return a.top === b.top && a.bottom === b.bottom;
+}

package/dist/styles.css

@@ -1833,6 +1833,15 @@ body {
   .sw-table-row-sub > th[scope='row']::after { border-color: CanvasText; }
 }
 
+.sw-table .sw-table-row-total > :is(th, td) {
+  border-top: 2px solid var(--sw-color-border);
+  font-weight: 600;
+}
+
+@media (forced-colors: active) {
+  .sw-table .sw-table-row-total > :is(th, td) { border-top-color: CanvasText; }
+}
+
 .sw-table tfoot :is(th, td) {
   font-weight: 600;
   position: relative;
@@ -1868,6 +1877,121 @@ body {
   overflow: visible;
 }
 
+.sw-table-bounded {
+  --sw-table-cell-pad: var(--sw-space-2);
+  --sw-table-head-block: 0px;
+  --sw-table-foot-rows: 0;
+  max-height: calc((var(--sw-table-max-rows) + var(--sw-table-foot-rows)) * (25px + 2 * var(--sw-table-cell-pad) + 1px) + var(--sw-table-head-block));
+}
+
+.sw-table-bounded:has(> .sw-table-compact) {
+  --sw-table-cell-pad: var(--sw-space-1);
+}
+
+.sw-table-bounded:has(> .sw-table > thead) {
+  --sw-table-head-block: calc(18px + 2 * var(--sw-table-cell-pad));
+}
+
+.sw-table-bounded:has(> .sw-table > thead .sw-table-sort) {
+  --sw-table-head-block: calc(max(18px, var(--sw-control-xs-min-height)) + 2 * var(--sw-table-cell-pad));
+}
+
+@media (pointer: coarse) {
+  .sw-table-bounded:has(> .sw-table > thead .sw-table-sort) {
+    --sw-table-head-block: calc(max(18px, var(--sw-control-md-min-height)) + 2 * var(--sw-table-cell-pad));
+  }
+}
+
+.sw-table-bounded:has(> .sw-table > tfoot) {
+  --sw-table-foot-rows: 1;
+}
+
+@media print {
+  .sw-table-bounded { max-height: none; }
+}
+
+.sw-table-bounded.sw-scroll-more-top > .sw-table-sticky > thead > tr:last-child > :is(th, td)::before {
+  background: linear-gradient(to bottom, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+  border-bottom: 0;
+  border-top: 1px solid var(--sw-color-border);
+  box-sizing: border-box;
+  height: var(--sw-space-5);
+  inset-block-end: auto;
+  inset-block-start: calc(100% - 1px);
+}
+
+.sw-table-bounded.sw-scroll-more-bottom > .sw-table > .sw-table-footer-sticky > tr:first-child > :is(th, td)::before {
+  background: linear-gradient(to top, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+  border-bottom: 2px solid var(--sw-color-border);
+  border-top: 0;
+  box-sizing: border-box;
+  height: var(--sw-space-5);
+  inset-block-end: calc(100% - 1px);
+  inset-block-start: auto;
+}
+
+.sw-table-bounded.sw-scroll-more-top:not(:has(> .sw-table > thead)),
+.sw-table-bounded.sw-scroll-more-bottom:not(:has(> .sw-table > .sw-table-footer-sticky)) {
+  background-repeat: no-repeat;
+  background-size: 100% var(--sw-space-5);
+}
+
+.sw-table-bounded.sw-scroll-more-top:not(:has(> .sw-table > thead)) {
+  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+  background-position: top;
+}
+
+.sw-table-bounded.sw-scroll-more-bottom:not(:has(> .sw-table > .sw-table-footer-sticky)) {
+  background-image: linear-gradient(to top, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+  background-position: bottom;
+}
+
+.sw-table-bounded.sw-scroll-more-top.sw-scroll-more-bottom:not(:has(> .sw-table > thead)):not(:has(> .sw-table > .sw-table-footer-sticky)) {
+  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent), linear-gradient(to top, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+  background-position: top, bottom;
+}
+
+@media (forced-colors: active) {
+  .sw-table-bounded.sw-scroll-more-top > .sw-table-sticky > thead > tr:last-child > :is(th, td)::before,
+  .sw-table-bounded.sw-scroll-more-bottom > .sw-table > .sw-table-footer-sticky > tr:first-child > :is(th, td)::before { background: none; border-color: CanvasText; }
+  .sw-table-bounded.sw-scroll-more-top:not(:has(> .sw-table > thead)),
+  .sw-table-bounded.sw-scroll-more-bottom:not(:has(> .sw-table > .sw-table-footer-sticky)),
+  .sw-table-bounded.sw-scroll-more-top.sw-scroll-more-bottom:not(:has(> .sw-table > thead)):not(:has(> .sw-table > .sw-table-footer-sticky)) { background-image: none; }
+}
+
+.sw-table-bounded:focus-visible > .sw-table-sticky > thead > tr > :is(th, td),
+.sw-table-bounded:focus-visible > .sw-table > .sw-table-footer-sticky > tr > :is(th, td) {
+  box-shadow: var(--sw-table-ring-block, 0 0 transparent), var(--sw-table-ring-start, 0 0 transparent), var(--sw-table-ring-end, 0 0 transparent);
+}
+
+.sw-table-bounded:focus-visible > .sw-table-sticky > thead > tr:first-child > :is(th, td) {
+  --sw-table-ring-block: inset 0 var(--sw-focus-ring-width) 0 0 var(--sw-color-accent);
+}
+
+.sw-table-bounded:focus-visible > .sw-table > .sw-table-footer-sticky > tr:last-child > :is(th, td) {
+  --sw-table-ring-block: inset 0 calc(-1 * var(--sw-focus-ring-width)) 0 0 var(--sw-color-accent);
+}
+
+.sw-table-bounded:focus-visible > .sw-table-sticky > thead > tr > :first-child,
+.sw-table-bounded:focus-visible > .sw-table > .sw-table-footer-sticky > tr > :first-child {
+  --sw-table-ring-start: inset var(--sw-focus-ring-width) 0 0 0 var(--sw-color-accent);
+}
+
+.sw-table-bounded:focus-visible > .sw-table-sticky > thead > tr > :last-child,
+.sw-table-bounded:focus-visible > .sw-table > .sw-table-footer-sticky > tr > :last-child {
+  --sw-table-ring-end: inset calc(-1 * var(--sw-focus-ring-width)) 0 0 0 var(--sw-color-accent);
+}
+
+.sw-table-bounded:focus-visible > .sw-table-sticky > thead > tr > :first-child:dir(rtl),
+.sw-table-bounded:focus-visible > .sw-table > .sw-table-footer-sticky > tr > :first-child:dir(rtl) {
+  --sw-table-ring-start: inset calc(-1 * var(--sw-focus-ring-width)) 0 0 0 var(--sw-color-accent);
+}
+
+.sw-table-bounded:focus-visible > .sw-table-sticky > thead > tr > :last-child:dir(rtl),
+.sw-table-bounded:focus-visible > .sw-table > .sw-table-footer-sticky > tr > :last-child:dir(rtl) {
+  --sw-table-ring-end: inset var(--sw-focus-ring-width) 0 0 0 var(--sw-color-accent);
+}
+
 .sw-table-row-press {
   cursor: pointer;
 }
@@ -2405,6 +2529,105 @@ body {
   .sw-bar-chart-fill { background: CanvasText; }
 }
 
+.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%);
+}
+
+.sw-data-bar-neutral > .sw-data-bar-fill { background: color-mix(in srgb, var(--sw-color-muted) 65%, var(--sw-color-surface)); }
+.sw-data-bar-success > .sw-data-bar-fill { background: color-mix(in srgb, var(--sw-color-success) 55%, var(--sw-color-surface)); }
+.sw-data-bar-muted > .sw-data-bar-fill { background: color-mix(in srgb, var(--sw-color-muted) 35%, var(--sw-color-surface)); }
+.sw-data-bar-strong > .sw-data-bar-fill { background: color-mix(in srgb, var(--sw-color-text) 85%, var(--sw-color-surface)); }
+.sw-data-bar-accent > .sw-data-bar-fill { background: var(--sw-color-accent); }
+
+.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; }
+}
+
+.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: 13px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+}
+
+.sw-pagination-steps {
+  display: flex;
+  gap: var(--sw-space-2);
+  margin-inline-start: auto;
+}
+
+.sw-button.sw-pagination-step {
+  flex: none;
+  padding-inline: 0;
+}
+
+.sw-button-xs.sw-pagination-step { min-width: var(--sw-control-xs-min-height); }
+.sw-button-sm.sw-pagination-step { min-width: var(--sw-control-sm-min-height); }
+.sw-button-md.sw-pagination-step { min-width: var(--sw-control-md-min-height); }
+
+@media (pointer: coarse) {
+  .sw-button.sw-pagination-step {
+    min-height: var(--sw-control-md-min-height);
+    min-width: var(--sw-control-md-min-height);
+  }
+}
+
+.sw-pagination-glyph {
+  border-bottom: 2px solid currentColor;
+  border-right: 2px solid currentColor;
+  box-sizing: border-box;
+  height: var(--sw-space-2);
+  width: var(--sw-space-2);
+  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; }
+
 .sw-app-header {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.37.0",
+  "version": "1.38.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",