@scalewing/react 1.42.0 → 1.45.0

package/dist/css/css-description-list.js

@@ -1,4 +1,24 @@
 import { breakpointQuery } from './breakpoints.js';
+/*
+ * A spread list sets each row on its own two columns, at every width: the
+ * term fits its words up to half the row at the start, and the detail
+ * takes the rest, its lines end-aligned at the row's end, a space-4 apart
+ * (the list's column gap, which a row's own grid does not inherit). The
+ * rows still share the hairlines, the padding and the top alignment.
+ */
+function spreadRules() {
+    return `.sw-description-list-spread { grid-template-columns: minmax(0, 1fr); }
+
+.sw-description-list-spread > .sw-description-item {
+  column-gap: var(--sw-space-4);
+  grid-template-columns: fit-content(50%) minmax(0, 1fr);
+}
+
+.sw-description-list-spread .sw-description-detail {
+  align-items: flex-end;
+  text-align: end;
+}`;
+}
 /**
  * The description list: a two-column grid whose items share its columns
  * (`subgrid`), so every term starts the same column and every detail the
@@ -8,6 +28,7 @@ import { breakpointQuery } from './breakpoints.js';
  * a term sits over its detail. A term and a detail are columns of lines:
  * each child is its own line with its own line height, so a caption term
  * starts level with a caption detail instead of on the list's taller line.
+ * `spread` puts each detail at its row's end, beside its term at every width.
  */
 export function cssDescriptionListClasses() {
     return `.sw-description-list {
@@ -49,6 +70,8 @@ export function cssDescriptionListClasses() {
   .sw-description-list { grid-template-columns: minmax(0, 1fr); }
 }
 
+${spreadRules()}
+
 @media (forced-colors: active) {
   .sw-description-item + .sw-description-item { border-top-color: CanvasText; }
 }`;
@@ -56,6 +79,7 @@ export function cssDescriptionListClasses() {
 export function descriptionListClassCatalog() {
     return [
         'sw-description-list',
+        'sw-description-list-spread',
         'sw-description-item',
         'sw-description-term',
         'sw-description-detail',

package/dist/css/css-file-field.js

@@ -106,7 +106,10 @@ function zoneRules() {
 }
 /*
  * The chosen file: the mark, then the name over its detail (at least four
- * space-8 wide before the button wraps under it), then the button.
+ * space-8 wide before the button wraps under it), then the button. A
+ * photo's preview takes the mark's place: a 3:2 thumbnail a space-8 wide
+ * and a space-6 tall, cropped to fill, at the small radius, on the subtle
+ * fill while it loads.
  */
 function fileRules() {
     return `.sw-file-field-icon {
@@ -116,6 +119,16 @@ function fileRules() {
   flex: none;
 }
 
+.sw-file-field-preview {
+  background: var(--sw-color-subtle);
+  border-radius: var(--sw-radius-sm);
+  display: block;
+  flex: none;
+  height: var(--sw-space-6);
+  object-fit: cover;
+  width: var(--sw-space-8);
+}
+
 .sw-file-field-file {
   display: flex;
   flex: 1 1 calc(4 * var(--sw-space-8));
@@ -173,6 +186,7 @@ export function fileFieldClassCatalog() {
         'sw-file-field-choose',
         'sw-file-field-drop',
         'sw-file-field-icon',
+        'sw-file-field-preview',
         'sw-file-field-file',
         'sw-file-field-name',
         'sw-file-field-detail',

package/dist/css/css-filter-chip-tones.d.ts

@@ -0,0 +1,3 @@
+export declare const warningChipUnchosen = ".sw-filter-chip-warning:not(.sw-filter-chip-quiet) .sw-filter-chip-input:not(:checked) + .sw-filter-chip-face";
+export declare function cssFilterChipToneClasses(): string;
+export declare function filterChipToneClassCatalog(): string[];

package/dist/css/css-filter-chip-tones.js

@@ -0,0 +1,28 @@
+import { toneTintFill, toneTintInk } from './tone-tint.js';
+/*
+ * A warning chip, while it is not chosen, is the warning tint with its
+ * words and count in the warning ink, as a warning Notice's (4.5:1 on the
+ * tint in every palette). It keeps the chips' hairline, so an error's
+ * danger edge still shows on it. Chosen, it is the accent like every chip;
+ * with nothing to count it is quiet like every chip. Forced colours draw
+ * it as every chip, so its words say why it matters. The focus ring sits
+ * outside the face (the chips' ring offset), on the page, not on the tint.
+ */
+export const warningChipUnchosen = '.sw-filter-chip-warning:not(.sw-filter-chip-quiet) .sw-filter-chip-input:not(:checked) + .sw-filter-chip-face';
+export function cssFilterChipToneClasses() {
+    return `${warningChipUnchosen} {
+  background: ${toneTintFill('warning')};
+  color: ${toneTintInk('warning')};
+}
+
+${warningChipUnchosen} .sw-filter-chip-count {
+  color: inherit;
+}
+
+@media (forced-colors: active) {
+  ${warningChipUnchosen} { background: Canvas; color: CanvasText; }
+}`;
+}
+export function filterChipToneClassCatalog() {
+    return ['sw-filter-chip-warning'];
+}

package/dist/css/css-filter-chips-layout.d.ts

@@ -1,2 +1,3 @@
+export declare const ringReach = "calc(var(--sw-focus-ring-width) + var(--sw-focus-ring-offset))";
 export declare function cssFilterChipsLayoutClasses(): string;
 export declare function filterChipsLayoutClassCatalog(): string[];

package/dist/css/css-filter-chips-layout.js

@@ -13,7 +13,7 @@
  * scrolled into view by the browser. The scrollbar stays, thin, so a
  * pointer without a sideways wheel can still reach the last chip.
  */
-const ringReach = 'calc(var(--sw-focus-ring-width) + var(--sw-focus-ring-offset))';
+export const ringReach = 'calc(var(--sw-focus-ring-width) + var(--sw-focus-ring-offset))';
 export function cssFilterChipsLayoutClasses() {
     return `.sw-filter-chip-count-inline {
   font-variant-numeric: tabular-nums;

package/dist/css/css-filter-chips-row.d.ts

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

package/dist/css/css-filter-chips-row.js

@@ -0,0 +1,79 @@
+import { ringReach } from './css-filter-chips-layout.js';
+/*
+ * A chips row lays several FilterChips groups on one line, a space-2 apart
+ * as chips are, their chips level along the bottom (a group may draw its
+ * label above; an error under one lifts its chips above the others'). The
+ * `end` group sits at the row's end, or at its own line's end when the row
+ * wraps.
+ *
+ * Wrapping, a group is as wide as its chips and wraps them itself when it
+ * is wider than the row. Scrolling, every group's chips stay on one line
+ * and the row is the one box that scrolls sideways (never the page),
+ * padded by the focus ring's reach and pulled back as a scrolling group
+ * is; a group's own scroll gives way, so its chips scroll with the rest.
+ * A scrolling group is as wide as its chips (min-content: the chips do not
+ * wrap), so a drawn label or an error wraps under them instead of widening
+ * the group. The scrolling row is positioned, so a group's visually hidden
+ * legend (absolutely placed where it would sit, past the edge) stays inside
+ * the box it scrolls in rather than widening the page. These rules follow
+ * the groups' own layout rules, which they override.
+ */
+export function cssFilterChipsRowClasses() {
+    const scroll = '.sw-filter-chips-row-scroll';
+    return `.sw-filter-chips-row {
+  align-items: flex-end;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  max-width: 100%;
+  min-width: 0;
+}
+
+.sw-filter-chips-row-end {
+  display: flex;
+  margin-inline-start: auto;
+  max-width: 100%;
+  min-width: 0;
+}
+
+${scroll} {
+  flex-wrap: nowrap;
+  margin: calc(-1 * ${ringReach});
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding: ${ringReach};
+  position: relative;
+  scrollbar-width: thin;
+}
+
+${scroll} .sw-filter-chips,
+${scroll} > .sw-filter-chips-row-end {
+  flex: none;
+  max-width: none;
+}
+
+${scroll} .sw-filter-chips { width: min-content; }
+
+${scroll} .sw-filter-chips-options {
+  flex-wrap: nowrap;
+  margin: 0;
+  overflow: visible;
+  padding: 0;
+}
+
+${scroll} .sw-filter-chip {
+  flex: none;
+  max-width: none;
+}
+
+${scroll} .sw-filter-chip-face {
+  white-space: nowrap;
+}`;
+}
+export function filterChipsRowClassCatalog() {
+    return [
+        'sw-filter-chips-row',
+        'sw-filter-chips-row-end',
+        'sw-filter-chips-row-scroll',
+    ];
+}

package/dist/css/css-filter-chips.js

@@ -1,5 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { cssFilterChipToneClasses, filterChipToneClassCatalog, } from './css-filter-chip-tones.js';
 import { cssFilterChipsLayoutClasses, filterChipsLayoutClassCatalog, } from './css-filter-chips-layout.js';
+import { cssFilterChipsRowClasses, filterChipsRowClassCatalog, } from './css-filter-chips-row.js';
 const label = typographyVariants.label;
 const data = typographyVariants.data;
 const caption = typographyVariants.caption;
@@ -126,6 +128,10 @@ export function cssFilterChipsClasses() {
 
 ${cssFilterChipsLayoutClasses()}
 
+${cssFilterChipToneClasses()}
+
+${cssFilterChipsRowClasses()}
+
 @media (forced-colors: active) {
   .sw-filter-chip-face { background: Canvas; border-color: CanvasText; color: CanvasText; }
   .sw-filter-chips-error { color: Mark; }
@@ -148,5 +154,7 @@ export function filterChipsClassCatalog() {
         'sw-filter-chip-quiet',
         'sw-filter-chips-error',
         ...filterChipsLayoutClassCatalog(),
+        ...filterChipToneClassCatalog(),
+        ...filterChipsRowClassCatalog(),
     ];
 }

package/dist/css/css-font-mono.d.ts

@@ -0,0 +1,3 @@
+export declare const monospaceFamilies = "ui-monospace, monospace";
+export declare function cssFontMonoClasses(): string;
+export declare function fontMonoClassCatalog(): string[];

package/dist/css/css-font-mono.js

@@ -0,0 +1,23 @@
+import { typedInputs } from './css-document.js';
+/*
+ * The platform's monospace face by its generic CSS names only, as the
+ * forced-colour rules name system colours: no face is chosen here, so
+ * there is no type value for the tokens to own. Each platform draws its
+ * own (SF Mono, Cascadia, Menlo …).
+ */
+export const monospaceFamilies = 'ui-monospace, monospace';
+/*
+ * Monospace text, for words read as typed code or marks (a Markdown source
+ * being written), at the size the text already has. It outranks the
+ * canvas's text controls, which take the page's family, so a `textarea` or
+ * a text input can take it too.
+ */
+export function cssFontMonoClasses() {
+    return `[data-theme] .sw-font-mono,
+[data-theme] :is(${typedInputs}).sw-font-mono {
+  font-family: ${monospaceFamilies};
+}`;
+}
+export function fontMonoClassCatalog() {
+    return ['sw-font-mono'];
+}

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,6 +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;
@@ -72,7 +73,9 @@ ${boundedRules()}
 
 ${cssListRowClasses()}
 
-${cssListRowTrailingClasses()}`;
+${cssListRowTrailingClasses()}
+
+${cssListRowTruncateClasses()}`;
 }
 export function listClassCatalog() {
     return [
@@ -85,5 +88,6 @@ export function listClassCatalog() {
         'sw-list-group-footer',
         ...listRowClassCatalog(),
         ...listRowTrailingClassCatalog(),
+        ...listRowTruncateClassCatalog(),
     ];
 }

package/dist/css/css-steps-title-detail.d.ts

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

package/dist/css/css-steps-title-detail.js

@@ -0,0 +1,36 @@
+import { typographyVariants } from '@scalewing/tokens';
+const body = typographyVariants.body;
+const label = typographyVariants.label;
+/*
+ * An open step's muted words after its title ("Optional", "Wetlands done ·
+ * Woodlands empty"): the title and the words share one line that wraps, the
+ * words on the title's baseline a space-2 after it, or on a line of their
+ * own under the title when they do not fit beside it. The line gives way
+ * to a done step's summary and Edit in an open list, as the title does.
+ * The words are the label size at the body's weight in the muted colour,
+ * a skipped step's reason's colour beside its title; a long word breaks
+ * rather than pass the panel.
+ */
+export function cssStepsTitleDetailClasses() {
+    return `.sw-steps-title-line {
+  align-items: baseline;
+  column-gap: var(--sw-space-2);
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.sw-steps-title-detail {
+  color: var(--sw-color-muted);
+  font-size: ${label.fontSize}px;
+  font-weight: ${body.fontWeight};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}`;
+}
+export function stepsTitleDetailClassCatalog() {
+    return ['sw-steps-title-line', 'sw-steps-title-detail'];
+}

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

@@ -1,7 +1,7 @@
 /**
  * The one-page vertical stepper: an ordered list of glass panels a small
- * gap apart. Each has a header line (marker, title, and on a done step its
- * summary and Edit) and, while open (current or error), a body indented to
+ * gap apart. Each has a header line (marker, title, an open step's muted
+ * words beside it, and on a done step its summary and Edit) and, while open (current or error), a body indented to
  * the title. An open step's title is the title variant; a folded one's is
  * body size at label weight, muted ahead of the form or skipped. In an
  * open list (`sw-steps-open`) every step is open: each panel takes the open

package/dist/css/css-steps.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { checkStrokeIn } from './chevron.js';
+import { cssStepsTitleDetailClasses, stepsTitleDetailClassCatalog, } from './css-steps-title-detail.js';
 const body = typographyVariants.body;
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
@@ -69,8 +70,8 @@ function forcedColorRules() {
 }
 /**
  * The one-page vertical stepper: an ordered list of glass panels a small
- * gap apart. Each has a header line (marker, title, and on a done step its
- * summary and Edit) and, while open (current or error), a body indented to
+ * gap apart. Each has a header line (marker, title, an open step's muted
+ * words beside it, and on a done step its summary and Edit) and, while open (current or error), a body indented to
  * the title. An open step's title is the title variant; a folded one's is
  * body size at label weight, muted ahead of the form or skipped. In an
  * open list (`sw-steps-open`) every step is open: each panel takes the open
@@ -190,6 +191,8 @@ export function cssStepsClasses() {
   min-width: 0;
 }
 
+${cssStepsTitleDetailClasses()}
+
 ${markerRules()}
 
 ${connectorRules()}
@@ -214,5 +217,6 @@ export function stepsClassCatalog() {
         'sw-steps-edit',
         'sw-steps-body',
         'sw-steps-region',
+        ...stepsTitleDetailClassCatalog(),
     ];
 }

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

@@ -27,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';
@@ -126,6 +127,7 @@ export function utilityClassCatalog() {
         ...descriptionListClassCatalog(),
         ...tabsClassCatalog(),
         ...filterChipsClassCatalog(),
+        ...fontMonoClassCatalog(),
         ...gridClassCatalog(),
         ...gridSpanClassCatalog(),
         ...denominationGridClassCatalog(),

package/dist/index.d.ts

@@ -67,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

@@ -60,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

@@ -41,6 +41,7 @@ export declare function assertListGroup({ label, labelledBy, variant, maxHeight,
 export declare function listMaxHeightStyle(maxHeight: ListGroupMaxHeight): CSSProperties;
 export type ListRowInput = {
     title: string;
+    titleLang: string | undefined;
     tone: unknown;
     titleAppearance: unknown;
     valueTone: unknown;
@@ -54,12 +55,12 @@ export type ListRowInput = {
     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, `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).
+ * Fails closed on a ListRow it cannot draw: an empty title, titleLang 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, `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

@@ -38,16 +38,18 @@ export function listMaxHeightStyle(maxHeight) {
     return { '--sw-list-max-rows': maxHeight.rows };
 }
 /**
- * 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, `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).
+ * Fails closed on a ListRow it cannot draw: an empty title, titleLang 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, `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))
         throw new RangeError('ListRow title must be non-empty text');
+    if (input.titleLang !== undefined && isBlank(input.titleLang))
+        throw new RangeError('ListRow titleLang must be a non-empty language tag');
     if (!isOneOf(listRowTones, input.tone))
         throw new RangeError(`Unknown ListRow tone: ${String(input.tone)}`);
     if (!isOneOf(listRowTitleAppearances, input.titleAppearance))