@scalewing/react 1.41.0 → 1.44.0

package/dist/css/css-list-row-trailing.js

@@ -0,0 +1,91 @@
+import { quietFill } from './quiet-fill.js';
+/*
+ * The unread dot: an accent circle a space-2 across after the title's last
+ * word, on its line. It is drawn as a border, so forced colours keep it
+ * (in the text colour); the hidden words beside the title say what it is.
+ * Centred on the words' middle, as an inline mark.
+ */
+function unreadRules() {
+    return `.sw-list-row-unread {
+  border: calc(var(--sw-space-2) / 2) solid var(--sw-color-accent);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: inline-block;
+  height: var(--sw-space-2);
+  margin-inline-start: var(--sw-space-2);
+  vertical-align: middle;
+  width: var(--sw-space-2);
+}
+
+@media (forced-colors: active) {
+  .sw-list-row-unread { border-color: CanvasText; }
+}`;
+}
+/*
+ * The tag (a Badge, "Only in English") sits before the accessory, centred
+ * on the row's height and never shrunk or wrapped.
+ */
+function tagRules() {
+    return `.sw-list-row-tag {
+  align-self: center;
+  display: inline-flex;
+  flex: none;
+  white-space: nowrap;
+}`;
+}
+/*
+ * A row with an action is the row's button or link followed by the
+ * action's control in one list item, the control centred on the row's
+ * height after it and outside its press area. The row ends a space-2
+ * before the control, and the control keeps the row's inline end padding
+ * after it (a space-4 in a panel, none in a plain list). Where :has() is
+ * supported, the hover fill spans the whole item, so the row and its
+ * control read as one line; elsewhere the row keeps its own fill.
+ */
+function actionRules() {
+    return `.sw-list-item-action {
+  align-items: center;
+  display: flex;
+}
+
+.sw-list-item-action > .sw-list-row {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding-inline-end: var(--sw-space-2);
+}
+
+.sw-list-row-action {
+  display: inline-flex;
+  flex: none;
+  padding-inline-end: var(--sw-space-4);
+}
+
+.sw-list-group-plain .sw-list-row-action { padding-inline-end: 0; }
+
+@supports selector(:has(*)) {
+  @media (hover: hover) {
+    .sw-list-item-action:has(> .sw-list-row-pressable:hover:not(.sw-list-row-disabled)) {
+      background: ${quietFill};
+    }
+
+    .sw-list-item-action > .sw-list-row-pressable:hover:not(.sw-list-row-disabled) {
+      background: transparent;
+    }
+  }
+}`;
+}
+export function cssListRowTrailingClasses() {
+    return `${unreadRules()}
+
+${tagRules()}
+
+${actionRules()}`;
+}
+export function listRowTrailingClassCatalog() {
+    return [
+        'sw-list-row-unread',
+        'sw-list-row-tag',
+        'sw-list-item-action',
+        'sw-list-row-action',
+    ];
+}

package/dist/css/css-list-row-truncate.d.ts

@@ -0,0 +1,2 @@
+export declare function cssListRowTruncateClasses(): string;
+export declare function listRowTruncateClassCatalog(): string[];

package/dist/css/css-list-row-truncate.js

@@ -0,0 +1,29 @@
+/*
+ * A truncated row keeps its title and its detail to one line each, cut
+ * with "…" where they do not fit. The title's words sit in their own box
+ * (`sw-list-row-title-text`) beside the unread dot, so the cut never hides
+ * the dot; the title is a one-line flex row centring them. The label
+ * column already shrinks (`min-width: 0`), so the value, the tag and the
+ * action keep their place and their words whole.
+ */
+export function cssListRowTruncateClasses() {
+    return `.sw-list-row-truncate .sw-list-row-title {
+  align-items: center;
+  display: flex;
+  min-width: 0;
+}
+
+.sw-list-row-truncate .sw-list-row-unread { flex: none; }
+
+.sw-list-row-truncate .sw-list-row-title-text,
+.sw-list-row-truncate .sw-list-row-detail {
+  min-width: 0;
+  overflow: hidden;
+  overflow-wrap: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}`;
+}
+export function listRowTruncateClassCatalog() {
+    return ['sw-list-row-truncate', 'sw-list-row-title-text'];
+}

package/dist/css/css-list.js

@@ -1,5 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { cssListRowClasses, listRowClassCatalog } from './css-list-row.js';
+import { cssListRowTrailingClasses, listRowTrailingClassCatalog, } from './css-list-row-trailing.js';
+import { cssListRowTruncateClasses, listRowTruncateClassCatalog, } from './css-list-row-truncate.js';
 import { blockEdgeShadeRules, scrollRegionRules } from './css-scroll-region.js';
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
@@ -69,7 +71,11 @@ export function cssListClasses() {
 
 ${boundedRules()}
 
-${cssListRowClasses()}`;
+${cssListRowClasses()}
+
+${cssListRowTrailingClasses()}
+
+${cssListRowTruncateClasses()}`;
 }
 export function listClassCatalog() {
     return [
@@ -81,5 +87,7 @@ export function listClassCatalog() {
         'sw-list-group-scroll',
         'sw-list-group-footer',
         ...listRowClassCatalog(),
+        ...listRowTrailingClassCatalog(),
+        ...listRowTruncateClassCatalog(),
     ];
 }

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

@@ -0,0 +1,2 @@
+export declare function cssMarkdownClasses(): string;
+export declare function markdownClassCatalog(): string[];

package/dist/css/css-markdown.js

@@ -0,0 +1,144 @@
+import { typographyVariants } from '@scalewing/tokens';
+const { body, title, label, caption } = typographyVariants;
+/*
+ * A page of Markdown in body type: blocks a space-4 apart, a heading a
+ * space-6 below what comes before it and a space-2 above what follows.
+ * `#` is the title size, `##` body size and `###` label size, all at the
+ * title's weight. At zero specificity (`:where`), so a consumer's layout
+ * can still space the view itself.
+ */
+function flowRules() {
+    return `.sw-markdown {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: ${body.fontSize}px;
+  letter-spacing: ${body.letterSpacing}px;
+  line-height: ${body.lineHeight}px;
+  overflow-wrap: anywhere;
+}
+
+:where(.sw-markdown) > *,
+:where(.sw-markdown-quote) > *,
+:where(.sw-markdown-list li) > * { margin-block: 0; }
+
+:where(.sw-markdown, .sw-markdown-quote, .sw-markdown-list li) > * + * {
+  margin-block-start: var(--sw-space-4);
+}
+
+:where(.sw-markdown) > * + .sw-markdown-heading { margin-block-start: var(--sw-space-6); }
+:where(.sw-markdown) > .sw-markdown-heading + * { margin-block-start: var(--sw-space-2); }
+
+.sw-markdown-heading {
+  color: var(--sw-color-text);
+  font-weight: ${title.fontWeight};
+  scroll-margin-block-start: var(--sw-space-6);
+}
+
+.sw-markdown-heading-1 {
+  font-size: ${title.fontSize}px;
+  letter-spacing: ${title.letterSpacing}px;
+  line-height: ${title.lineHeight}px;
+}
+
+.sw-markdown-heading-2 {
+  font-size: ${body.fontSize}px;
+  line-height: ${body.lineHeight}px;
+}
+
+.sw-markdown-heading-3 {
+  font-size: ${label.fontSize}px;
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+}`;
+}
+/*
+ * Lists hang their markers in the page's margin a space-5 in; a tight
+ * list's items are a space-2 apart. A link is the accent, underlined, so
+ * it never depends on colour alone, and thickens to the focus ring's
+ * width while hovered. In the highlighted box, whose tint neither the
+ * accent nor the muted colour clears at 4.5:1 in every palette, links
+ * (still underlined) and photo captions are the text colour.
+ */
+function inlineRules() {
+    return `.sw-markdown-list {
+  padding-inline-start: var(--sw-space-5);
+}
+
+.sw-markdown-list > li + li { margin-block-start: var(--sw-space-2); }
+
+[data-theme] .sw-markdown-link {
+  color: var(--sw-color-accent);
+  text-decoration-line: underline;
+}
+
+[data-theme] .sw-markdown-link:hover {
+  text-decoration-thickness: var(--sw-focus-ring-width);
+}
+
+[data-theme] .sw-markdown-quote :is(.sw-markdown-link, .sw-markdown-caption) {
+  color: var(--sw-color-text);
+}`;
+}
+/*
+ * A block quote is the highlighted box: the accent's subtle tint with an
+ * accent bar at its start, at the small radius. A photo fills the page's
+ * width at the medium radius, its caption muted under it.
+ */
+function boxRules() {
+    return `.sw-markdown-quote {
+  background: var(--sw-color-accentSubtle);
+  border-inline-start: var(--sw-space-1) solid var(--sw-color-accent);
+  border-radius: var(--sw-radius-sm);
+  margin-inline: 0;
+  padding: var(--sw-space-3) var(--sw-space-4);
+}
+
+.sw-markdown-figure {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+  margin-inline: 0;
+}
+
+.sw-markdown-image {
+  border-radius: var(--sw-radius-md);
+  display: block;
+  height: auto;
+  width: 100%;
+}
+
+.sw-markdown-caption {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+@media (forced-colors: active) {
+  .sw-markdown-quote { border: 1px solid CanvasText; border-inline-start-width: var(--sw-space-1); }
+}`;
+}
+export function cssMarkdownClasses() {
+    return `${flowRules()}
+
+${inlineRules()}
+
+${boxRules()}`;
+}
+export function markdownClassCatalog() {
+    return [
+        'sw-markdown',
+        'sw-markdown-paragraph',
+        'sw-markdown-heading',
+        'sw-markdown-heading-1',
+        'sw-markdown-heading-2',
+        'sw-markdown-heading-3',
+        'sw-markdown-list',
+        'sw-markdown-item-text',
+        'sw-markdown-link',
+        'sw-markdown-quote',
+        'sw-markdown-figure',
+        'sw-markdown-image',
+        'sw-markdown-caption',
+    ];
+}

package/dist/css/css-utilities.js

@@ -41,6 +41,9 @@ const layoutRules = {
     'sw-grow': '.sw-grow { flex-grow: 1; }',
     'sw-full-width': '.sw-full-width { width: 100%; }',
     'sw-container': '.sw-container { width: 100%; max-width: var(--sw-container-max); margin-inline: auto; }',
+    // A narrower centred column at the reading width (Article's), for a
+    // form or text that reads better than it would across the container.
+    'sw-container-reading': '.sw-container-reading { width: 100%; max-width: var(--sw-reading-max); margin-inline: auto; }',
     'sw-sr-only': `.sw-sr-only { ${visuallyHiddenDeclarations} }`,
     'sw-align-start': '.sw-align-start { align-items: flex-start; }',
     'sw-align-center': '.sw-align-center { align-items: center; }',

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

@@ -7,4 +7,4 @@ export type SpacingKind = 'padding' | 'gap';
 export declare function spacingClass(kind: SpacingKind, axis: PaddingAxis | GapAxis, step: SpacingStep): string;
 export declare function paddingClassNames(): string[];
 export declare function gapClassNames(): string[];
-export declare const layoutClassNames: readonly ["sw-stack", "sw-inline", "sw-wrap", "sw-grow", "sw-full-width", "sw-container", "sw-sr-only", "sw-align-start", "sw-align-center", "sw-align-end", "sw-align-stretch", "sw-justify-start", "sw-justify-center", "sw-justify-end", "sw-justify-between"];
+export declare const layoutClassNames: readonly ["sw-stack", "sw-inline", "sw-wrap", "sw-grow", "sw-full-width", "sw-container", "sw-container-reading", "sw-sr-only", "sw-align-start", "sw-align-center", "sw-align-end", "sw-align-stretch", "sw-justify-start", "sw-justify-center", "sw-justify-end", "sw-justify-between"];

package/dist/css/spacing-classes.js

@@ -28,6 +28,7 @@ export const layoutClassNames = [
     'sw-grow',
     'sw-full-width',
     'sw-container',
+    'sw-container-reading',
     'sw-sr-only',
     'sw-align-start',
     'sw-align-center',

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';
@@ -23,6 +27,7 @@ import { descriptionListClassCatalog } from './css-description-list.js';
 import { tabsClassCatalog } from './css-tabs.js';
 import { responsiveClassCatalog } from './css-responsive.js';
 import { filterChipsClassCatalog } from './css-filter-chips.js';
+import { fontMonoClassCatalog } from './css-font-mono.js';
 import { gridClassCatalog } from './css-grid.js';
 import { gridSpanClassCatalog } from './css-grid-span.js';
 import { denominationGridClassCatalog } from './css-denomination-grid.js';
@@ -104,6 +109,10 @@ export function utilityClassCatalog() {
         ...calendarButtonClassCatalog(),
         ...dateRangeClassCatalog(),
         ...listClassCatalog(),
+        ...fileFieldClassCatalog(),
+        ...articleClassCatalog(),
+        ...documentViewerClassCatalog(),
+        ...markdownClassCatalog(),
         ...countPillClassCatalog(),
         ...checkboxClassCatalog(),
         ...radioGroupClassCatalog(),
@@ -118,6 +127,7 @@ export function utilityClassCatalog() {
         ...descriptionListClassCatalog(),
         ...tabsClassCatalog(),
         ...filterChipsClassCatalog(),
+        ...fontMonoClassCatalog(),
         ...gridClassCatalog(),
         ...gridSpanClassCatalog(),
         ...denominationGridClassCatalog(),

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

@@ -6,7 +6,11 @@ export { Switch, switchCheckedTones, switchLayouts, type SwitchCheckedTone, type
 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';
@@ -45,7 +49,7 @@ 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, 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';
@@ -63,13 +67,15 @@ export type { Breakpoint, BreakpointDirection, VisibilityBreakpoint, } from './c
 export { breakpointQuery } from './css/breakpoints.js';
 export { Separator } from './components/Separator.js';
 export type { SeparatorOrientation, SeparatorProps, } from './components/Separator.js';
-export { DescriptionItem, DescriptionList, } from './components/DescriptionList.js';
-export type { DescriptionItemProps, DescriptionListProps, } from './components/DescriptionList.js';
+export { DescriptionItem, DescriptionList, descriptionListLayouts, } from './components/DescriptionList.js';
+export type { DescriptionItemProps, DescriptionListLayout, DescriptionListProps, } from './components/DescriptionList.js';
 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, 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';
+export { FilterChips, filterChipCountAppearances, filterChipsOverflows, filterChipTones, } from './components/FilterChips.js';
+export { FilterChipsRow } from './components/FilterChipsRow.js';
+export type { FilterChipsRowProps } from './components/FilterChipsRow.js';
+export type { FilterChipCountAppearance, FilterChipOption, FilterChipsOverflow, FilterChipsProps, FilterChipTone, } from './components/FilterChips.js';

package/dist/index.js

@@ -5,7 +5,11 @@ export { Switch, switchCheckedTones, switchLayouts, } from './components/Switch.
 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';
@@ -42,7 +46,7 @@ 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, segmentedSizes, } from './components/SegmentedControl.js';
 export { Combobox, comboboxSizes, } from './components/Combobox.js';
@@ -56,7 +60,8 @@ 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 { DescriptionItem, DescriptionList, descriptionListLayouts, } from './components/DescriptionList.js';
 export { Grid } from './components/Grid.js';
 export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationNegativeAppearances, denominationTotalEmphases, denominationTransposeBreakpoints, } from './components/DenominationGrid.js';
-export { FilterChips, filterChipCountAppearances, filterChipsOverflows, } from './components/FilterChips.js';
+export { FilterChips, filterChipCountAppearances, filterChipsOverflows, filterChipTones, } from './components/FilterChips.js';
+export { FilterChipsRow } from './components/FilterChipsRow.js';

package/dist/list-options.d.ts

@@ -50,13 +50,16 @@ export type ListRowInput = {
     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, 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).
+ * 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

@@ -41,8 +41,9 @@ export function listMaxHeightStyle(maxHeight) {
  * Fails closed on a ListRow it cannot draw: an empty title or value, an
  * 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).
+ * 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))
@@ -62,6 +63,10 @@ export function assertListRow(input) {
         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 &&