@scalewing/react 1.40.0 → 1.42.0

package/dist/css/css-switch.js

@@ -1,6 +1,41 @@
 import { typographyVariants } from '@scalewing/tokens';
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
+/** Where the control sits: before its label, or at the row's end after it. */
+export const switchLayouts = ['leading', 'trailing'];
+/** The track's colour while on. */
+export const switchCheckedTones = ['accent', 'success'];
+/*
+ * A trailing switch is a row as wide as its column: the label and its
+ * description take the room, the control sits at the end, a step apart,
+ * lined up with the label's first line. A success switch fills its track
+ * with the success colour while on (3:1 or more against the surface in
+ * every palette, as the accent is); forced colours keep Highlight.
+ */
+function optionRules() {
+    return `.sw-switch-trailing {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--sw-space-3);
+  justify-content: space-between;
+  width: 100%;
+}
+
+.sw-switch-trailing .sw-switch-copy {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding-block: calc((var(--sw-control-md-min-height) - ${label.lineHeight}px) / 2);
+}
+
+.sw-switch-success .sw-switch-input:checked + .sw-switch-track {
+  background: var(--sw-color-success);
+  border-color: var(--sw-color-success);
+}
+
+@media (forced-colors: active) {
+  .sw-switch-success .sw-switch-input:checked + .sw-switch-track { background: Highlight; border-color: Highlight; }
+}`;
+}
 export function cssSwitchClasses() {
     return `.sw-switch {
   align-items: center;
@@ -90,6 +125,8 @@ export function cssSwitchClasses() {
   line-height: ${caption.lineHeight}px;
 }
 
+${optionRules()}
+
 @media (prefers-reduced-motion: reduce) {
   .sw-switch-thumb { transition: none; }
 }
@@ -111,5 +148,7 @@ export function switchClassCatalog() {
         'sw-switch-copy',
         'sw-switch-label',
         'sw-switch-description',
+        'sw-switch-trailing',
+        'sw-switch-success',
     ];
 }

package/dist/css/css-variables.js

@@ -47,6 +47,7 @@ ${control}
   --sw-dialog-max: 32rem;
   --sw-dialog-max-lg: 56rem;
   --sw-dialog-max-xl: 65rem;
+  --sw-reading-max: 46rem;
   --sw-select-max: 16rem;
   --sw-split-min: ${splitScale.min}rem;
   --sw-split-size: ${splitScale.size}rem;

package/dist/css/stacking.d.ts

@@ -4,6 +4,7 @@ export declare const stackingOrder: {
     readonly bottomChrome: 3;
     readonly popupHost: 4;
     readonly topChrome: 5;
+    readonly sheetGrabber: 6;
     readonly popup: 10;
 };
 export type StackingLayer = keyof typeof stackingOrder;

package/dist/css/stacking.js

@@ -17,7 +17,9 @@
  *    Dialog's title band, inside its dialog), 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).
- * 6. `popup`: a popup outside any lifted surface (Select list, ActionMenu
+ * 6. `sheetGrabber`: a bottom sheet's grabber, inside its dialog, over the
+ *    banded title band that sticks under it.
+ * 7. `popup`: a popup outside any lifted surface (Select list, ActionMenu
  *    list, MultiSelect panel, Combobox list, Tooltip, the DateField and CalendarButton
  *    calendar) over everything in the page.
  *
@@ -29,6 +31,7 @@ export const stackingOrder = {
     bottomChrome: 3,
     popupHost: 4,
     topChrome: 5,
+    sheetGrabber: 6,
     popup: 10,
 };
 /*

package/dist/css/stylesheet.js

@@ -7,7 +7,11 @@ import { switchClassCatalog } from './css-switch.js';
 import { dateFieldClassCatalog } from './css-date-field.js';
 import { calendarButtonClassCatalog } from './css-calendar-button.js';
 import { dateRangeClassCatalog } from './css-date-range.js';
+import { fileFieldClassCatalog } from './css-file-field.js';
+import { articleClassCatalog } from './css-article.js';
+import { documentViewerClassCatalog } from './css-document-viewer.js';
 import { listClassCatalog } from './css-list.js';
+import { markdownClassCatalog } from './css-markdown.js';
 import { countPillClassCatalog } from './css-count-pill.js';
 import { checkboxClassCatalog } from './css-checkbox.js';
 import { radioGroupClassCatalog } from './css-radio-group.js';
@@ -48,6 +52,8 @@ import { sectionNavClassCatalog } from './css-section-nav.js';
 import { dialogClassCatalog } from './css-dialog.js';
 import { dialogBandedClassCatalog } from './css-dialog-banded.js';
 import { dialogFrameClassCatalog } from './css-dialog-frame.js';
+import { dialogCanvasClassCatalog } from './css-dialog-canvas.js';
+import { dialogGrabberClassCatalog } from './css-dialog-grabber.js';
 import { selectClassCatalog } from './css-select.js';
 import { multiSelectClassCatalog } from './css-multi-select.js';
 import { comboboxClassCatalog } from './css-combobox.js';
@@ -89,6 +95,8 @@ export function utilityClassCatalog() {
         ...dialogClassCatalog(),
         ...dialogFrameClassCatalog(),
         ...dialogBandedClassCatalog(),
+        ...dialogCanvasClassCatalog(),
+        ...dialogGrabberClassCatalog(),
         ...accordionClassCatalog(),
         ...selectClassCatalog(),
         ...actionMenuClassCatalog(),
@@ -100,6 +108,10 @@ export function utilityClassCatalog() {
         ...calendarButtonClassCatalog(),
         ...dateRangeClassCatalog(),
         ...listClassCatalog(),
+        ...fileFieldClassCatalog(),
+        ...articleClassCatalog(),
+        ...documentViewerClassCatalog(),
+        ...markdownClassCatalog(),
         ...countPillClassCatalog(),
         ...checkboxClassCatalog(),
         ...radioGroupClassCatalog(),

package/dist/date-field-labels.d.ts

@@ -28,6 +28,11 @@ export type DateFieldLabels = {
      * outside `min` and `max`.
      */
     outOfRange: string;
+    /**
+     * Said after a calendar entry's name while the field is required (a
+     * button has no required state of its own), such as "Required".
+     */
+    required: string;
     /** Placeholder letters, arranged in the locale's field order. */
     dayPlaceholder: string;
     monthPlaceholder: string;

package/dist/date-field-labels.js

@@ -8,6 +8,7 @@ export const defaultDateFieldLabels = {
     clear: 'Clear',
     invalidEntry: 'Enter a valid date.',
     outOfRange: 'Choose a date in the allowed range.',
+    required: 'Required',
     dayPlaceholder: 'DD',
     monthPlaceholder: 'MM',
     yearPlaceholder: 'YYYY',

package/dist/document-viewer-worker.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The PDF.js worker for `DocumentViewer`, at the exact PDF.js version
+ * Scalewing pins and from the same legacy build: a module worker entry
+ * that starts PDF.js's worker on import. A consumer bundles it as a worker
+ * and passes its URL as `workerSrc`, such as Vite's
+ * `import workerSrc from '@scalewing/react/document-viewer-worker?worker&url'`,
+ * so the viewer and its worker are always the same version.
+ */
+import 'pdfjs-dist/legacy/build/pdf.worker.min.mjs';

package/dist/document-viewer-worker.js

@@ -0,0 +1,9 @@
+/**
+ * The PDF.js worker for `DocumentViewer`, at the exact PDF.js version
+ * Scalewing pins and from the same legacy build: a module worker entry
+ * that starts PDF.js's worker on import. A consumer bundles it as a worker
+ * and passes its URL as `workerSrc`, such as Vite's
+ * `import workerSrc from '@scalewing/react/document-viewer-worker?worker&url'`,
+ * so the viewer and its worker are always the same version.
+ */
+import 'pdfjs-dist/legacy/build/pdf.worker.min.mjs';

package/dist/index.d.ts

@@ -2,11 +2,15 @@ export { ActionMenu, type ActionMenuAlign, type ActionMenuItem, type ActionMenuP
 export { ActionBar, type ActionBarProps, type ActionBarSummary, type ActionBarSummaryTone, } from './components/ActionBar.js';
 export { Accordion } from './components/Accordion.js';
 export type { AccordionProps, AccordionSize } from './components/Accordion.js';
-export { Switch, type SwitchProps } from './components/Switch.js';
-export { DateField, type DateFieldLabels, type DateFieldProps, type WeekStart, } from './components/DateField.js';
+export { Switch, switchCheckedTones, switchLayouts, type SwitchCheckedTone, type SwitchLayout, type SwitchProps, } from './components/Switch.js';
+export { DateField, dateFieldEntries, type DateFieldEntry, type DateFieldLabels, type DateFieldProps, type WeekStart, } from './components/DateField.js';
 export { CalendarButton, type CalendarButtonLabels, type CalendarButtonProps, type CalendarButtonRange, } from './components/CalendarButton.js';
 export { DateRangeButton, type DateRangeButtonLabels, type DateRangeButtonProps, type DateRangeButtonValue, type DateRangePreset, } from './components/DateRangeButton.js';
+export { Article, articleTitleElements, type ArticleCover, type ArticleProps, type ArticleTitleElement, } from './components/Article.js';
+export { FileField, type FileFieldProps, type FileFieldValue, } from './components/FileField.js';
+export { DocumentViewer, type DocumentViewerLabels, type DocumentViewerProps, } from './components/DocumentViewer.js';
 export { ListGroup, type ListGroupProps } from './components/ListGroup.js';
+export { inspectMarkdown, markdownOmissionKinds, MarkdownView, type MarkdownHeading, type MarkdownInspection, type MarkdownImage, type MarkdownImageResolver, type MarkdownOmission, type MarkdownOmissionCounts, type MarkdownOmissionKind, type MarkdownOptions, type MarkdownViewProps, } from './components/MarkdownView.js';
 export { ListRow, type ListRowProps } from './components/ListRow.js';
 export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, type ListGroupMaxHeight, type ListGroupVariant, type ListRowTitleAppearance, type ListRowTone, type ListRowValueTone, } from './list-options.js';
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
@@ -19,7 +23,7 @@ export { InfoTip, type InfoTipProps } from './components/InfoTip.js';
 export { RadioGroup, type RadioGroupOption, type RadioGroupProps, } from './components/RadioGroup.js';
 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 { BarChart, barChartAppearances, type BarChartAppearance, type BarChartItem, type BarChartProps, type BarChartTone, barChartTones, } from './components/BarChart.js';
 export { ChartLegend, type ChartFillTone, type ChartLegendItem, type ChartLegendProps, type ChartLegendSwatch, type ChartStrokeTone, type ChartTone, chartFillTones, chartLegendSwatches, chartStrokeTones, } from './components/ChartLegend.js';
 export { ColumnChart, type ColumnChartCallout, type ColumnChartLine, type ColumnChartMode, type ColumnChartProps, type ColumnChartSeries, columnChartModes, } from './components/ColumnChart.js';
 export { LineChart, type LineChartCurve, type LineChartMarker, type LineChartPeriod, type LineChartPoint, type LineChartProps, lineChartCurves, } from './components/LineChart.js';
@@ -37,6 +41,7 @@ export { TabPanel, type TabItem, type TabPanelProps, Tabs, type TabsProps, tabId
 export { Toast, toastPlacements, toastTones, type ToastAction, type ToastPlacement, } from './components/Toast.js';
 export type { ToastProps, ToastTone } from './components/Toast.js';
 export { Field, fieldVariants, type FieldProps, type FieldSize, type FieldVariant, } from './components/Field.js';
+export { fieldWidths, type FieldWidth } from './css/css-field-width.js';
 export { requiredMarks, type RequiredMark, } from './components/FieldLabelText.js';
 export { Step, type StepHeadingLevel, type StepProps, Steps, type StepsLabels, type StepsProps, type StepStatus, } from './components/Steps.js';
 export { Stepper, stepperLimitAppearances, type StepperLimitAppearance, type StepperProps, type StepperWidth, } from './components/Stepper.js';
@@ -44,9 +49,9 @@ export { Inline, type InlineProps } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export type { SplitProps } from './components/Split.js';
 export { Nav, navAppearances, type NavAppearance, type NavProps, } from './components/Nav.js';
-export { NavCount, type NavCountProps } from './components/NavCount.js';
+export { NavCount, navCountTones, type NavCountProps, type NavCountTone, } from './components/NavCount.js';
 export { SectionNav, sectionNavAppearances, type SectionNavAppearance, type SectionNavItem, type SectionNavProps, } from './components/SectionNav.js';
-export { SegmentedControl, type SegmentedControlProps, type SegmentedControlVariant, type SegmentedItem, } from './components/SegmentedControl.js';
+export { SegmentedControl, type SegmentedControlProps, type SegmentedControlVariant, segmentedSizes, type SegmentedSize, type SegmentedItem, } from './components/SegmentedControl.js';
 export { Combobox, comboboxSizes, type ComboboxAction, type ComboboxBadge, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type ComboboxSize, } from './components/Combobox.js';
 export { Select } from './components/Select.js';
 export type { SelectAction, SelectOption, SelectProps, SelectWidth, } from './components/Select.js';
@@ -55,6 +60,7 @@ export { Stack, type Align, type Justify, type StackProps, } from './components/
 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 { themeCanvases, type ThemeCanvas } from './css/css-canvas-grouped.js';
 export { utilityClassCatalog } from './css/stylesheet.js';
 export type { VisibilityProps } from './visibility-classes.js';
 export type { Breakpoint, BreakpointDirection, VisibilityBreakpoint, } from './css/breakpoints.js';
@@ -67,7 +73,7 @@ export { Grid } from './components/Grid.js';
 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, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationTotalEmphases, } from './components/DenominationGrid.js';
-export type { DenominationCellToneAppearance, DenominationGridColumn, DenominationGridEntry, DenominationGridFrame, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationGridValueRow, DenominationLabelAppearance, DenominationLabelWidth, DenominationTotalEmphasis, } from './components/DenominationGrid.js';
-export { FilterChips } from './components/FilterChips.js';
-export type { FilterChipOption, FilterChipsProps, } from './components/FilterChips.js';
+export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationNegativeAppearances, denominationTotalEmphases, denominationTransposeBreakpoints, } from './components/DenominationGrid.js';
+export type { DenominationCellToneAppearance, DenominationGridColumn, DenominationGridEntry, DenominationGridFrame, DenominationGridLayout, DenominationGridNegativeAppearance, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationGridValueRow, DenominationLabelAppearance, DenominationLabelWidth, DenominationTotalEmphasis, DenominationTransposeBreakpoint, } from './components/DenominationGrid.js';
+export { FilterChips, filterChipCountAppearances, filterChipsOverflows, } from './components/FilterChips.js';
+export type { FilterChipCountAppearance, FilterChipOption, FilterChipsOverflow, FilterChipsProps, } from './components/FilterChips.js';

package/dist/index.js

@@ -1,11 +1,15 @@
 export { ActionMenu, actionMenuTriggerAppearances, } from './components/ActionMenu.js';
 export { ActionBar, } from './components/ActionBar.js';
 export { Accordion } from './components/Accordion.js';
-export { Switch } from './components/Switch.js';
-export { DateField, } from './components/DateField.js';
+export { Switch, switchCheckedTones, switchLayouts, } from './components/Switch.js';
+export { DateField, dateFieldEntries, } from './components/DateField.js';
 export { CalendarButton, } from './components/CalendarButton.js';
 export { DateRangeButton, } from './components/DateRangeButton.js';
+export { Article, articleTitleElements, } from './components/Article.js';
+export { FileField, } from './components/FileField.js';
+export { DocumentViewer, } from './components/DocumentViewer.js';
 export { ListGroup } from './components/ListGroup.js';
+export { inspectMarkdown, markdownOmissionKinds, MarkdownView, } from './components/MarkdownView.js';
 export { ListRow } from './components/ListRow.js';
 export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, } from './list-options.js';
 export { Checkbox } from './components/Checkbox.js';
@@ -18,7 +22,7 @@ export { InfoTip } from './components/InfoTip.js';
 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 { BarChart, barChartAppearances, barChartTones, } from './components/BarChart.js';
 export { ChartLegend, chartFillTones, chartLegendSwatches, chartStrokeTones, } from './components/ChartLegend.js';
 export { ColumnChart, columnChartModes, } from './components/ColumnChart.js';
 export { LineChart, lineChartCurves, } from './components/LineChart.js';
@@ -35,15 +39,16 @@ export { StatTile, statTileAppearances, statTileTones, } from './components/Stat
 export { TabPanel, Tabs, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, } from './components/Toast.js';
 export { Field, fieldVariants, } from './components/Field.js';
+export { fieldWidths } from './css/css-field-width.js';
 export { requiredMarks, } from './components/FieldLabelText.js';
 export { Step, Steps, } from './components/Steps.js';
 export { Stepper, stepperLimitAppearances, } from './components/Stepper.js';
 export { Inline } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export { Nav, navAppearances, } from './components/Nav.js';
-export { NavCount } from './components/NavCount.js';
+export { NavCount, navCountTones, } from './components/NavCount.js';
 export { SectionNav, sectionNavAppearances, } from './components/SectionNav.js';
-export { SegmentedControl, } from './components/SegmentedControl.js';
+export { SegmentedControl, segmentedSizes, } from './components/SegmentedControl.js';
 export { Combobox, comboboxSizes, } from './components/Combobox.js';
 export { Select } from './components/Select.js';
 export { MultiSelect, } from './components/MultiSelect.js';
@@ -51,10 +56,11 @@ export { Stack, } from './components/Stack.js';
 export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, tableCellTones, tableRowVariants, } from './components/Table.js';
 export { Text, } from './components/Text.js';
 export { ThemeProvider, useTheme, } from './theme/ThemeProvider.js';
+export { themeCanvases } from './css/css-canvas-grouped.js';
 export { utilityClassCatalog } from './css/stylesheet.js';
 export { breakpointQuery } from './css/breakpoints.js';
 export { Separator } from './components/Separator.js';
 export { DescriptionItem, DescriptionList, } from './components/DescriptionList.js';
 export { Grid } from './components/Grid.js';
-export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationTotalEmphases, } from './components/DenominationGrid.js';
-export { FilterChips } from './components/FilterChips.js';
+export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationNegativeAppearances, denominationTotalEmphases, denominationTransposeBreakpoints, } from './components/DenominationGrid.js';
+export { FilterChips, filterChipCountAppearances, filterChipsOverflows, } from './components/FilterChips.js';

package/dist/list-options.d.ts

@@ -1,5 +1,6 @@
 import { type CSSProperties } from 'react';
-import { type TableCellTone } from './css/css-table-ledger.js';
+import { type BadgeTone } from './css/css-data.js';
+import { listRowValueTones, type ListRowValueTone } from './css/css-list-row.js';
 /**
  * `panel` (the default) is one bordered panel on the surface; `plain`
  * draws no panel and a hairline above the first row too, for rows inside
@@ -21,9 +22,7 @@ export type ListRowTone = (typeof listRowTones)[number];
 /** `strong` (the default) sets the title at the label weight; `plain` at the body's. */
 export declare const listRowTitleAppearances: readonly ["strong", "plain"];
 export type ListRowTitleAppearance = (typeof listRowTitleAppearances)[number];
-/** The colours a row's value can take, as a table cell's. */
-export declare const listRowValueTones: readonly ["success", "danger", "muted", "accent"];
-export type ListRowValueTone = TableCellTone;
+export { listRowValueTones, type ListRowValueTone };
 /** What ends a row: a chevron (it opens something), a check (chosen), or none. */
 export type ListRowAccessory = 'chevron' | 'check' | 'none';
 export type ListGroupInput = {
@@ -48,14 +47,19 @@ export type ListRowInput = {
     accessory: unknown;
     value: string | undefined;
     valueDetail: string | undefined;
+    valueBadge: BadgeTone | undefined;
     selected: boolean | undefined;
     pressable: boolean;
+    unread: boolean;
+    unreadLabel: string | undefined;
 };
 /**
  * Fails closed on a ListRow it cannot draw: an empty title or value, an
- * unknown tone, title appearance, value tone or accessory, a `valueDetail`
- * or `valueTone` with no value, or `selected` on a row that is not a
- * button or link (its check would be a state nothing can read).
+ * unknown tone, title appearance, value tone, badge tone or accessory, a
+ * `valueDetail`, `valueTone` or `valueBadge` with no value, a value both
+ * toned and a badge, `selected` on a row that is not a button or link
+ * (its check would be a state nothing can read), or an unread row with no
+ * words for its dot (a colour alone says nothing).
  */
 export declare function assertListRow(input: ListRowInput): void;
 /**

package/dist/list-options.js

@@ -1,4 +1,5 @@
-import { tableCellTones } from './css/css-table-ledger.js';
+import { badgeTones } from './css/css-data.js';
+import { listRowValueTones, } from './css/css-list-row.js';
 import { isOneOf } from './is-one-of.js';
 /**
  * `panel` (the default) is one bordered panel on the surface; `plain`
@@ -10,8 +11,7 @@ export const listGroupVariants = ['panel', 'plain'];
 export const listRowTones = ['default', 'danger'];
 /** `strong` (the default) sets the title at the label weight; `plain` at the body's. */
 export const listRowTitleAppearances = ['strong', 'plain'];
-/** The colours a row's value can take, as a table cell's. */
-export const listRowValueTones = tableCellTones;
+export { listRowValueTones };
 function isBlank(text) {
     return typeof text !== 'string' || text.trim() === '';
 }
@@ -39,9 +39,11 @@ export function listMaxHeightStyle(maxHeight) {
 }
 /**
  * Fails closed on a ListRow it cannot draw: an empty title or value, an
- * unknown tone, title appearance, value tone or accessory, a `valueDetail`
- * or `valueTone` with no value, or `selected` on a row that is not a
- * button or link (its check would be a state nothing can read).
+ * unknown tone, title appearance, value tone, badge tone or accessory, a
+ * `valueDetail`, `valueTone` or `valueBadge` with no value, a value both
+ * toned and a badge, `selected` on a row that is not a button or link
+ * (its check would be a state nothing can read), or an unread row with no
+ * words for its dot (a colour alone says nothing).
  */
 export function assertListRow(input) {
     if (isBlank(input.title))
@@ -55,13 +57,23 @@ export function assertListRow(input) {
         throw new RangeError(`Unknown ListRow valueTone: ${String(input.valueTone)}`);
     if (!isOneOf(['chevron', 'none'], input.accessory))
         throw new RangeError(`Unknown ListRow accessory: ${String(input.accessory)}`);
+    if (input.valueBadge !== undefined && !isOneOf(badgeTones, input.valueBadge))
+        throw new RangeError(`Unknown ListRow valueBadge: ${String(input.valueBadge)}`);
+    if (input.valueBadge !== undefined && input.valueTone !== undefined)
+        throw new RangeError('A ListRow value is a toned figure or a badge, not both');
     if (input.value !== undefined && isBlank(input.value))
         throw new RangeError('ListRow value must be non-empty text');
+    if (input.unreadLabel !== undefined && isBlank(input.unreadLabel))
+        throw new RangeError('ListRow unreadLabel must be non-empty text');
+    if (input.unread && input.unreadLabel === undefined)
+        throw new RangeError('An unread ListRow needs an unreadLabel to say so');
     if (input.selected !== undefined && !input.pressable)
         throw new RangeError('A ListRow choice (selected) needs onPress or href to say its state');
     if (input.value === undefined &&
-        (input.valueDetail !== undefined || input.valueTone !== undefined))
-        throw new RangeError('ListRow valueDetail and valueTone need a value');
+        (input.valueDetail !== undefined ||
+            input.valueTone !== undefined ||
+            input.valueBadge !== undefined))
+        throw new RangeError('ListRow valueDetail, valueTone and valueBadge need a value');
 }
 /**
  * The row's end: a check while `selected`, nothing for an unchosen choice,