@scalewing/react 1.16.0 → 1.18.0

package/dist/css/css-denomination-cell-tones.d.ts

@@ -0,0 +1,9 @@
+import { type BadgeTone } from './css-data.js';
+/**
+ * The classes that tone one count: a marker that applies the shared rules and
+ * the tone that sets their color. A strip cell (`td`) and a tile (`li`) take
+ * the same pair; null or `neutral` leaves the cell untoned.
+ */
+export declare function denominationCellToneClassNames(tone: BadgeTone | null | undefined): string[];
+export declare function cssDenominationCellToneClasses(): string;
+export declare function denominationCellToneClassCatalog(): string[];

package/dist/css/css-denomination-cell-tones.js

@@ -0,0 +1,52 @@
+import { badgeTones } from './css-data.js';
+/**
+ * The tones a single count can take. `neutral` is the cell's own look, so it
+ * adds no class: a cell is toned only by a tone that says something.
+ */
+const cellTones = badgeTones.filter((tone) => tone !== 'neutral');
+/**
+ * The classes that tone one count: a marker that applies the shared rules and
+ * the tone that sets their color. A strip cell (`td`) and a tile (`li`) take
+ * the same pair; null or `neutral` leaves the cell untoned.
+ */
+export function denominationCellToneClassNames(tone) {
+    if (!tone || tone === 'neutral')
+        return [];
+    return ['sw-denomination-cell-toned', `sw-denomination-cell-tone-${tone}`];
+}
+/*
+ * A toned count is set in its tone, over a row's signed coloring and a
+ * zero's quiet opacity, and a toned tile draws its border in the tone, one
+ * hairline thicker with an inset shadow so no tile moves. The tone never
+ * carries meaning alone: the consumer's words say why a count is toned.
+ * Forced colors replace the tone with the system text color, and a toned
+ * zero keeps the zero's GrayText there, so it does not read as a count.
+ */
+export function cssDenominationCellToneClasses() {
+    const toneRules = cellTones
+        .map((tone) => `.sw-denomination-cell-tone-${tone} { --sw-denomination-cell-tone: var(--sw-color-${tone}); }`)
+        .join('\n');
+    return `${toneRules}
+
+.sw-denomination-grid .sw-denomination-cell.sw-denomination-cell-toned,
+.sw-denomination-grid .sw-denomination-cell-toned .sw-denomination-cell {
+  color: var(--sw-denomination-cell-tone);
+  opacity: 1;
+}
+
+.sw-denomination-tile.sw-denomination-cell-toned {
+  border-color: var(--sw-denomination-cell-tone);
+  box-shadow: inset 0 0 0 1px var(--sw-denomination-cell-tone);
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-grid .sw-denomination-cell-zero.sw-denomination-cell-toned,
+  .sw-denomination-grid .sw-denomination-cell-toned .sw-denomination-cell-zero { color: GrayText; }
+}`;
+}
+export function denominationCellToneClassCatalog() {
+    return [
+        'sw-denomination-cell-toned',
+        ...cellTones.map((tone) => `sw-denomination-cell-tone-${tone}`),
+    ];
+}

package/dist/css/css-denomination-grid.js

@@ -1,7 +1,8 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
 import { badgeTones } from './css-data.js';
-import { scrollRegionRules } from './css-scroll-region.js';
+import { cssDenominationCellToneClasses, denominationCellToneClassCatalog, } from './css-denomination-cell-tones.js';
+import { pinnedStartShadeRules, scrollRegionRules, } from './css-scroll-region.js';
 import { visuallyHiddenDeclarations } from './css-utilities.js';
 import { zIndex } from './stacking.js';
 const caption = typographyVariants.caption;
@@ -25,6 +26,11 @@ ${toneRules()}
 
 ${scrollRegionRules('.sw-denomination-scroll')}
 
+${pinnedStartShadeRules('.sw-denomination-scroll', [
+        '.sw-denomination-strip .sw-denomination-label',
+        '.sw-denomination-strip thead .sw-denomination-corner:first-child',
+    ])}
+
 .sw-denomination-strip {
   border-collapse: collapse;
   width: 100%;
@@ -239,6 +245,8 @@ ${scrollRegionRules('.sw-denomination-scroll')}
   .sw-denomination-tile-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 }
 
+${cssDenominationCellToneClasses()}
+
 @media (forced-colors: active) {
   .sw-denomination-label { border-inline-start-color: CanvasText; color: CanvasText; }
   .sw-denomination-strip .sw-denomination-label::before { background: CanvasText; forced-color-adjust: none; }
@@ -276,5 +284,6 @@ export function denominationGridClassCatalog() {
         'sw-denomination-tile-list',
         'sw-denomination-tile',
         'sw-denomination-subtotal',
+        ...denominationCellToneClassCatalog(),
     ];
 }

package/dist/css/css-dialog.d.ts

@@ -1,2 +1,4 @@
+import { type Breakpoint } from './breakpoints.js';
+export declare function dialogSheetClass(sheetBelow: Breakpoint): string;
 export declare function cssDialogClasses(): string;
 export declare function dialogClassCatalog(): string[];

package/dist/css/css-dialog.js

@@ -1,3 +1,112 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery, breakpoints, } from './breakpoints.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const title = typographyVariants.title;
+/* The modal's height cap: a space-8 strip of backdrop stays in view. */
+const maxHeight = 'min(100vh - var(--sw-space-8), 100dvh - var(--sw-space-8))';
+export function dialogSheetClass(sheetBelow) {
+    return `sw-dialog-sheet-below-${sheetBelow}`;
+}
+/*
+ * Below the breakpoint the dialog is a bottom sheet: docked to the bottom
+ * edge at the full viewport width, the top corners rounded and the bottom
+ * ones square, the same height cap (so the whole space-8 strip of backdrop
+ * shows above it), and padding that clears the safe areas. Emitted after
+ * `sw-dialog-lg` so it wins at equal specificity. No grabber: there is no
+ * drag gesture.
+ */
+function sheetRules() {
+    return breakpoints
+        .map((breakpoint) => `@media ${breakpointQuery('below', breakpoint)} {
+  .${dialogSheetClass(breakpoint)} {
+    border-radius: var(--sw-radius-lg) var(--sw-radius-lg) 0 0;
+    border-width: 1px 0 0;
+    margin: auto 0 0;
+    max-height: ${maxHeight};
+    max-width: none;
+    padding-bottom: calc(var(--sw-space-5) + env(safe-area-inset-bottom, 0px));
+    padding-left: max(var(--sw-space-5), env(safe-area-inset-left, 0px));
+    padding-right: max(var(--sw-space-5), env(safe-area-inset-right, 0px));
+    width: 100%;
+  }
+
+  .${dialogSheetClass(breakpoint)}[open] {
+    animation: sw-dialog-sheet-in var(--sw-motion-default) var(--sw-motion-easing);
+  }
+}`)
+        .join('\n\n');
+}
+function sheetMotionRules() {
+    const still = breakpoints
+        .map((breakpoint) => `  .${dialogSheetClass(breakpoint)}[open] { animation: none; }`)
+        .join('\n');
+    return `@keyframes sw-dialog-sheet-in {
+  from { translate: 0 100%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+${still}
+}`;
+}
+/*
+ * The title row when the dialog has a close button: the title takes the
+ * row and the button ends it. The button's negative margins keep the row
+ * as tall as one title line and put the glyph's end on the padding edge,
+ * at the sm control size and at the 44 px touch target alike.
+ */
+function closeButtonRules() {
+    const square = (size) => `min-width: ${size};
+    margin-block: calc((${title.lineHeight}px - ${size}) / 2);
+    margin-inline-end: calc((var(--sw-space-4) - ${size}) / 2);`;
+    return `.sw-dialog-header {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--sw-space-2);
+}
+
+.sw-dialog-header > :first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.sw-button.sw-dialog-close {
+  flex: none;
+  padding-inline: 0;
+  ${square('var(--sw-control-sm-min-height)')}
+}
+
+@media ${coarsePointerQuery} {
+  .sw-button.sw-dialog-close {
+    min-height: ${touchTarget};
+    ${square(touchTarget)}
+  }
+}
+
+/* Private control chrome: two strokes crossed in a space-4 square, in the
+   button's color; borders, so forced colors keep them. */
+.sw-dialog-close-glyph {
+  flex: none;
+  height: var(--sw-space-4);
+  position: relative;
+  width: var(--sw-space-4);
+}
+
+.sw-dialog-close-glyph::before,
+.sw-dialog-close-glyph::after {
+  border-top: 2px solid currentColor;
+  border-radius: 1px;
+  box-sizing: border-box;
+  content: '';
+  left: 0;
+  margin-top: -1px;
+  position: absolute;
+  top: 50%;
+  width: 100%;
+}
+
+.sw-dialog-close-glyph::before { transform: rotate(45deg); }
+.sw-dialog-close-glyph::after { transform: rotate(-45deg); }`;
+}
 export function cssDialogClasses() {
     return `.sw-dialog {
   background: var(--sw-glass-fill);
@@ -9,7 +118,7 @@ export function cssDialogClasses() {
   box-sizing: border-box;
   color: var(--sw-color-text);
   margin: auto;
-  max-height: min(100vh - var(--sw-space-8), 100dvh - var(--sw-space-8));
+  max-height: ${maxHeight};
   max-width: min(var(--sw-dialog-max), calc(100vw - var(--sw-space-8)));
   overflow: auto;
   width: calc(100% - var(--sw-space-8));
@@ -19,6 +128,10 @@ export function cssDialogClasses() {
   max-width: min(var(--sw-dialog-max-lg), calc(100vw - var(--sw-space-8)));
 }
 
+${sheetRules()}
+
+${sheetMotionRules()}
+
 .sw-dialog::backdrop {
   background: color-mix(in srgb, var(--sw-color-text) 28%, transparent);
 }
@@ -26,8 +139,17 @@ export function cssDialogClasses() {
 .sw-dialog:focus-visible {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);
-}`;
+}
+
+${closeButtonRules()}`;
 }
 export function dialogClassCatalog() {
-    return ['sw-dialog', 'sw-dialog-lg'];
+    return [
+        'sw-dialog',
+        'sw-dialog-lg',
+        ...breakpoints.map((breakpoint) => dialogSheetClass(breakpoint)),
+        'sw-dialog-header',
+        'sw-dialog-close',
+        'sw-dialog-close-glyph',
+    ];
 }

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

@@ -2,7 +2,21 @@
  * A scroll region is a full-width box that scrolls its own content when the
  * content is wider (or taller) than the box, so a wide table never widens the
  * page. It is a keyboard stop, so its focus ring is drawn inside its edge
- * where an ancestor's clipping cannot hide it. Table and the DenominationGrid
- * strip share it.
+ * where an ancestor's clipping cannot hide it. While its content is scrolled
+ * out past an inline edge, `ScrollRegion` adds `sw-scroll-more-start` or
+ * `sw-scroll-more-end`, and that edge draws a shade: the cue that the content
+ * goes on, which overlay scrollbars (phones, macOS) do not give. In forced
+ * colors the shade is not drawn and the system's scrollbar is the cue. Table
+ * and the DenominationGrid strip share it.
  */
 export declare function scrollRegionRules(selector: string): string;
+export declare function scrollRegionClassCatalog(): string[];
+/**
+ * A region whose start column is pinned (sticky, on an opaque fill) hides
+ * its own start shade under that column, so the column casts the shade
+ * instead: a gradient a spacing step wide just past its inline end, drawn by
+ * its `::after` (the pinned cell is positioned, so it holds the gradient).
+ * `pinned` lists the pinned cells' selectors inside the region. Forced colors
+ * draw no shade here either.
+ */
+export declare function pinnedStartShadeRules(region: string, pinned: readonly string[]): string;

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

@@ -1,9 +1,40 @@
+/*
+ * The shade an edge draws while content is scrolled out past it: an inset
+ * shadow a spacing step wide in the text color at low strength, so it reads
+ * on every palette and in dark mode. It is the box's own shadow, painted
+ * under the content, so no cell moves. A box scrolled to its middle shades
+ * both edges. The rules name the shadows outright rather than through
+ * 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)';
+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}`;
+}
+/** The start edge is the left in a left-to-right box and the right in RTL. */
+function edgeShadeRules(selector) {
+    const more = (edge) => `${selector}.sw-scroll-more-${edge}`;
+    const both = `${more('start')}.sw-scroll-more-end`;
+    return [
+        `${more('start')} { box-shadow: ${edgeShade('left')}; }`,
+        `${more('end')} { box-shadow: ${edgeShade('right')}; }`,
+        `${more('start')}:dir(rtl) { box-shadow: ${edgeShade('right')}; }`,
+        `${more('end')}:dir(rtl) { box-shadow: ${edgeShade('left')}; }`,
+        // Last: it ties the :dir(rtl) rules on specificity and must win them.
+        `${both} { box-shadow: ${edgeShade('left')}, ${edgeShade('right')}; }`,
+    ].join('\n');
+}
 /**
  * A scroll region is a full-width box that scrolls its own content when the
  * content is wider (or taller) than the box, so a wide table never widens the
  * page. It is a keyboard stop, so its focus ring is drawn inside its edge
- * where an ancestor's clipping cannot hide it. Table and the DenominationGrid
- * strip share it.
+ * where an ancestor's clipping cannot hide it. While its content is scrolled
+ * out past an inline edge, `ScrollRegion` adds `sw-scroll-more-start` or
+ * `sw-scroll-more-end`, and that edge draws a shade: the cue that the content
+ * goes on, which overlay scrollbars (phones, macOS) do not give. In forced
+ * colors the shade is not drawn and the system's scrollbar is the cue. Table
+ * and the DenominationGrid strip share it.
  */
 export function scrollRegionRules(selector) {
     return `${selector} {
@@ -14,5 +45,40 @@ export function scrollRegionRules(selector) {
 ${selector}:focus-visible {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+${edgeShadeRules(selector)}`;
+}
+export function scrollRegionClassCatalog() {
+    return ['sw-scroll-more-start', 'sw-scroll-more-end'];
+}
+/**
+ * A region whose start column is pinned (sticky, on an opaque fill) hides
+ * its own start shade under that column, so the column casts the shade
+ * instead: a gradient a spacing step wide just past its inline end, drawn by
+ * its `::after` (the pinned cell is positioned, so it holds the gradient).
+ * `pinned` lists the pinned cells' selectors inside the region. Forced colors
+ * draw no shade here either.
+ */
+export function pinnedStartShadeRules(region, pinned) {
+    const after = (direction) => pinned
+        .map((cell) => `${region}.sw-scroll-more-start${direction} ${cell}::after`)
+        .join(',\n');
+    return `${after('')} {
+  background: linear-gradient(to right, ${shadeColor}, transparent);
+  content: '';
+  inset-block: 0;
+  inset-inline-start: 100%;
+  pointer-events: none;
+  position: absolute;
+  width: var(--sw-space-5);
+}
+
+${after(':dir(rtl)')} {
+  background: linear-gradient(to left, ${shadeColor}, transparent);
+}
+
+@media (forced-colors: active) {
+  ${after('').replaceAll('\n', '\n  ')} { display: none; }
 }`;
 }

package/dist/css/css-tabs.d.ts

@@ -1,3 +1,4 @@
+export declare const stuckCanvasShare = 0.9;
 /** The tab strip: a scrollable row of tabs with an accent underline under the current one. */
 export declare function cssTabsClasses(): string;
 export declare function tabsClassCatalog(): string[];

package/dist/css/css-tabs.js

@@ -1,5 +1,37 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { zIndex } from './stacking.js';
 const label = typographyVariants.label;
+/*
+ * The stuck strip is a full-bleed band of the page canvas, not a glass card:
+ * nine parts canvas color to one part see-through, with the glass blur
+ * behind it, so a panel scrolling under it shows as a faint smear, never as
+ * words beside the labels. At nine parts the muted labels keep at least
+ * 4.1:1, and the accent label 3.6:1, in every palette even over a solid
+ * block of the text, accent or danger color; over the canvas and ordinary
+ * type, which the blur spreads, they keep their canvas contrast. The first
+ * tab's own inline padding (the md control's, spacing step 4) lines its
+ * label up with a space-4 page gutter, so the strip adds no padding of its
+ * own. It rides the AppHeader's layer.
+ */
+export const stuckCanvasShare = 0.9;
+function stickyRules() {
+    return `.sw-tabs-sticky {
+  background: color-mix(in srgb, var(--sw-color-background) ${stuckCanvasShare * 100}%, transparent);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  position: sticky;
+  top: env(safe-area-inset-top, 0px);
+  ${zIndex('topChrome')}
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .sw-tabs-sticky {
+    background: var(--sw-color-background);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}`;
+}
 /** The tab strip: a scrollable row of tabs with an accent underline under the current one. */
 export function cssTabsClasses() {
     return `.sw-tabs {
@@ -55,10 +87,19 @@ export function cssTabsClasses() {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
+${stickyRules()}
+
 @media (forced-colors: active) {
   .sw-tab-selected { border-bottom-color: Highlight; color: Highlight; }
+  .sw-tabs-sticky { background: Canvas; backdrop-filter: none; -webkit-backdrop-filter: none; }
 }`;
 }
 export function tabsClassCatalog() {
-    return ['sw-tabs', 'sw-tab', 'sw-tab-selected', 'sw-tab-panel'];
+    return [
+        'sw-tabs',
+        'sw-tabs-sticky',
+        'sw-tab',
+        'sw-tab-selected',
+        'sw-tab-panel',
+    ];
 }

package/dist/css/stacking.js

@@ -10,8 +10,9 @@
  *    its popup can only paint as high as the surface does; lifting the surface
  *    over the ActionBar keeps an open list tappable where the bar would cover
  *    it, and over the next surface in the flow.
- * 4. `topChrome`: the sticky AppHeader, over a lifted surface that scrolls up
- *    under it (the header is the page's way back, and a popup opens downward).
+ * 4. `topChrome`: the sticky AppHeader or sticky Tabs strip, over a lifted
+ *    surface that scrolls up under it (the header is the page's way back, the
+ *    strip its way between sections, and a popup opens downward).
  * 5. `popup`: a popup outside any lifted surface (Select list, ActionMenu
  *    list, Tooltip, the DateField and CalendarButton calendar) over
  *    everything in the page.

package/dist/css/stylesheet.js

@@ -18,6 +18,7 @@ import { filterChipsClassCatalog } from './css-filter-chips.js';
 import { gridClassCatalog } from './css-grid.js';
 import { gridSpanClassCatalog } from './css-grid-span.js';
 import { denominationGridClassCatalog } from './css-denomination-grid.js';
+import { scrollRegionClassCatalog } from './css-scroll-region.js';
 import { fieldClassCatalog } from './css-field.js';
 import { boxBorderClassCatalog } from './css-box-border.js';
 import { cssComponentClasses } from './css-components.js';
@@ -53,6 +54,7 @@ export function utilityClassCatalog() {
         ...dataClassCatalog(),
         ...segmentedClassCatalog(),
         ...tableClassCatalog(),
+        ...scrollRegionClassCatalog(),
         ...chartClassCatalog(),
         ...chromeClassCatalog(),
         ...dialogClassCatalog(),

package/dist/denomination-cells.d.ts

@@ -6,7 +6,9 @@ export type DenominationCellView = {
 /**
  * Classifies one count for display. A null or zero count renders the zero
  * label; a signed row prefixes positive counts with "+" so movement reads as
- * a delta. Formatting stays plain digits: the consumer owns locale grouping.
+ * a delta, and every negative count takes the typographic minus "−", the
+ * sign a consumer's formatted money uses, never a hyphen. Formatting stays
+ * plain digits: the consumer owns locale grouping.
  */
 export declare function denominationCellView(count: number | null, signed: boolean, zeroLabel: string): DenominationCellView;
 export declare function isDenominationCount(count: number | null): boolean;

package/dist/denomination-cells.js

@@ -1,13 +1,17 @@
+/** The typographic minus (U+2212), not the hyphen-minus a number prints. */
+const minusSign = '\u2212';
 /**
  * Classifies one count for display. A null or zero count renders the zero
  * label; a signed row prefixes positive counts with "+" so movement reads as
- * a delta. Formatting stays plain digits: the consumer owns locale grouping.
+ * a delta, and every negative count takes the typographic minus "−", the
+ * sign a consumer's formatted money uses, never a hyphen. Formatting stays
+ * plain digits: the consumer owns locale grouping.
  */
 export function denominationCellView(count, signed, zeroLabel) {
     if (count === null || count === 0)
         return { state: 'zero', text: zeroLabel };
     if (count < 0)
-        return { state: 'negative', text: String(count) };
+        return { state: 'negative', text: `${minusSign}${Math.abs(count)}` };
     return { state: 'positive', text: signed ? `+${count}` : String(count) };
 }
 export function isDenominationCount(count) {

package/dist/index.d.ts

@@ -17,7 +17,7 @@ export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from '
 export { Box, type BoxBorder, type BoxElement, type BoxProps, } from './components/Box.js';
 export { ButtonGroup, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.js';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
-export { Dialog, type DialogProps, type DialogSize, } from './components/Dialog.js';
+export { Dialog, type DialogProps, type DialogSize, type DialogTitleLevel, } from './components/Dialog.js';
 export { StatTile, type StatTileEmphasis, type StatTileProps, type StatTileTone, statTileTones, } from './components/StatTile.js';
 export { TabPanel, type TabItem, type TabPanelProps, Tabs, type TabsProps, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastTones } from './components/Toast.js';
@@ -44,6 +44,6 @@ export type { GridColumns, GridProps } from './components/Grid.js';
 export type { GridColumnSpan } from './css/css-grid-span.js';
 export type { ColumnSpanProps } from './column-span-classes.js';
 export { DenominationGrid } from './components/DenominationGrid.js';
-export type { DenominationGridColumn, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridTone, } from './components/DenominationGrid.js';
+export type { DenominationGridColumn, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowRole, DenominationGridTone, } from './components/DenominationGrid.js';
 export { FilterChips } from './components/FilterChips.js';
 export type { FilterChipOption, FilterChipsProps, } from './components/FilterChips.js';

package/dist/scroll-overflow.d.ts

@@ -0,0 +1,14 @@
+/** Which inline edges of a scroll box have content scrolled out past them. */
+export type ScrollOverflow = {
+    start: boolean;
+    end: boolean;
+};
+export declare const noScrollOverflow: ScrollOverflow;
+/**
+ * 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
+ * a right-to-left box it is 0 at the start and negative toward the end, so
+ * the distance travelled is its magnitude in both.
+ */
+export declare function scrollOverflow(scrollLeft: number, scrollWidth: number, clientWidth: number): ScrollOverflow;
+export declare function sameScrollOverflow(a: ScrollOverflow, b: ScrollOverflow): boolean;

package/dist/scroll-overflow.js

@@ -0,0 +1,26 @@
+export const noScrollOverflow = { start: false, end: 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;
+/**
+ * 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
+ * a right-to-left box it is 0 at the start and negative toward the end, so
+ * the distance travelled is its magnitude in both.
+ */
+export function scrollOverflow(scrollLeft, scrollWidth, clientWidth) {
+    const hidden = scrollWidth - clientWidth;
+    if (hidden <= edgeTolerance)
+        return noScrollOverflow;
+    const travelled = Math.abs(scrollLeft);
+    return {
+        start: travelled > edgeTolerance,
+        end: travelled < hidden - edgeTolerance,
+    };
+}
+export function sameScrollOverflow(a, b) {
+    return a.start === b.start && a.end === b.end;
+}