@scalewing/react 1.40.0 → 1.41.0

package/dist/css/css-segmented-sizing.js

@@ -0,0 +1,66 @@
+import { breakpointQuery } from './breakpoints.js';
+/** The class that stretches a SegmentedControl's field below a breakpoint. */
+export function segmentedFullWidthClass(breakpoint) {
+    return `sw-segmented-field-full-below-${breakpoint}`;
+}
+/**
+ * `md` (the default) is each track's own segment padding; `sm` pads every
+ * segment a step less and keeps its label on one line, ending in an
+ * ellipsis past its share, so a few segments fit a phone's card.
+ */
+export const segmentedSizes = ['md', 'sm'];
+export const segmentedSmClass = 'sw-segmented-sm';
+/*
+ * Below the breakpoint a full-width field fills its column and its track
+ * shares that width equally among its segments (the filled track's grid),
+ * whatever its variant, a raised one included (three classes, after the
+ * raised and Inline rules that size it to its segments).
+ *
+ * A small track pads each segment without a mark a space-2 step on both
+ * sides (a segment with a mark keeps its variant's padding), never wraps a
+ * label and ends a label that does not fit its segment in an ellipsis on
+ * the label's own block box (`sw-segmented-item-label`; an inline box
+ * cannot clip), so a plain segment and a flex item (a
+ * filled or marked segment) truncate too; the radio's name still reads
+ * the whole label. After every variant's padding.
+ */
+export function cssSegmentedSizingClasses() {
+    const full = segmentedFullWidthClass('md');
+    return `@media ${breakpointQuery('below', 'md')} {
+  .sw-segmented-field.${full} {
+    align-self: stretch;
+    display: flex;
+    width: 100%;
+  }
+  .sw-segmented-field.${full} > .sw-segmented {
+    align-self: stretch;
+    display: grid;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+  }
+}
+
+.sw-segmented.${segmentedSmClass} .sw-segmented-item {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.sw-segmented.${segmentedSmClass}:not(.sw-segmented-with-icons) .sw-segmented-item {
+  padding-inline: var(--sw-space-2);
+}
+
+.${segmentedSmClass} .sw-segmented-item-label {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}`;
+}
+export function segmentedSizingClassCatalog() {
+    return [
+        segmentedFullWidthClass('md'),
+        segmentedSmClass,
+        'sw-segmented-item-label',
+    ];
+}

package/dist/css/css-segmented.js

@@ -1,5 +1,6 @@
 import { trackInset, typographyVariants } from '@scalewing/tokens';
 import { cssSegmentedRaisedClasses, segmentedRaisedClassCatalog, } from './css-segmented-raised.js';
+import { cssSegmentedSizingClasses, segmentedSizingClassCatalog, } from './css-segmented-sizing.js';
 const body = typographyVariants.body;
 const data = typographyVariants.data;
 const label = typographyVariants.label;
@@ -167,6 +168,8 @@ ${iconRules()}
 
 ${cssSegmentedRaisedClasses()}
 
+${cssSegmentedSizingClasses()}
+
 .sw-segmented-disabled {
   opacity: var(--sw-disabled-opacity);
 }
@@ -187,5 +190,6 @@ export function segmentedClassCatalog() {
         'sw-segmented-item-icon',
         'sw-segmented-disabled',
         ...segmentedRaisedClassCatalog(),
+        ...segmentedSizingClassCatalog(),
     ];
 }

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

@@ -1,2 +1,8 @@
+/** Where the control sits: before its label, or at the row's end after it. */
+export declare const switchLayouts: readonly ["leading", "trailing"];
+export type SwitchLayout = (typeof switchLayouts)[number];
+/** The track's colour while on. */
+export declare const switchCheckedTones: readonly ["accent", "success"];
+export type SwitchCheckedTone = (typeof switchCheckedTones)[number];
 export declare function cssSwitchClasses(): string;
 export declare function switchClassCatalog(): string[];

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/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

@@ -48,6 +48,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 +91,8 @@ export function utilityClassCatalog() {
         ...dialogClassCatalog(),
         ...dialogFrameClassCatalog(),
         ...dialogBandedClassCatalog(),
+        ...dialogCanvasClassCatalog(),
+        ...dialogGrabberClassCatalog(),
         ...accordionClassCatalog(),
         ...selectClassCatalog(),
         ...actionMenuClassCatalog(),

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

@@ -2,8 +2,8 @@ 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 { ListGroup, type ListGroupProps } from './components/ListGroup.js';
@@ -19,7 +19,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 +37,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';
@@ -46,7 +47,7 @@ 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 { 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 +56,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 +69,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,8 +1,8 @@
 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 { ListGroup } from './components/ListGroup.js';
@@ -18,7 +18,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,6 +35,7 @@ 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';
@@ -43,7 +44,7 @@ export { Split } from './components/Split.js';
 export { Nav, navAppearances, } from './components/Nav.js';
 export { NavCount } 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 +52,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,16 @@ export type ListRowInput = {
     accessory: unknown;
     value: string | undefined;
     valueDetail: string | undefined;
+    valueBadge: BadgeTone | undefined;
     selected: boolean | undefined;
     pressable: boolean;
 };
 /**
  * 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, or `selected` on a row that is not a button or link
+ * (its check would be a state nothing can read).
  */
 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,10 @@ 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, or `selected` on a row that is not a button or link
+ * (its check would be a state nothing can read).
  */
 export function assertListRow(input) {
     if (isBlank(input.title))
@@ -55,13 +56,19 @@ 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.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,