@scalewing/react 1.39.0 → 1.40.0

package/dist/css/css-table-bounded-edges.js

@@ -1,4 +1,4 @@
-import { scrollShadeColor } from './css-scroll-region.js';
+import { blockEdgeShadeRules, blockShade } from './css-scroll-region.js';
 const region = '.sw-table-bounded';
 /*
  * While rows are scrolled out past the top or bottom of a bounded region
@@ -17,7 +17,6 @@ const region = '.sw-table-bounded';
  * is. Forced colours draw no shade; the system scrollbar is the cue.
  */
 function shadeRules() {
-    const shade = (direction) => `linear-gradient(to ${direction}, ${scrollShadeColor}, transparent)`;
     const headCells = `${region}.sw-scroll-more-top > .sw-table-sticky > thead > tr:last-child > :is(th, td)::before`;
     const footCells = `${region}.sw-scroll-more-bottom > .sw-table > .sw-table-footer-sticky > tr:first-child > :is(th, td)::before`;
     const noHead = ':not(:has(> .sw-table > thead))';
@@ -26,7 +25,7 @@ function shadeRules() {
     const ownBottom = `${region}.sw-scroll-more-bottom${noPinnedFoot}`;
     const ownBoth = `${region}.sw-scroll-more-top.sw-scroll-more-bottom${noHead}${noPinnedFoot}`;
     return `${headCells} {
-  background: ${shade('bottom')};
+  background: ${blockShade('bottom')};
   border-bottom: 0;
   border-top: 1px solid var(--sw-color-border);
   box-sizing: border-box;
@@ -36,7 +35,7 @@ function shadeRules() {
 }
 
 ${footCells} {
-  background: ${shade('top')};
+  background: ${blockShade('top')};
   border-bottom: 2px solid var(--sw-color-border);
   border-top: 0;
   box-sizing: border-box;
@@ -45,33 +44,11 @@ ${footCells} {
   inset-block-start: auto;
 }
 
-${ownTop},
-${ownBottom} {
-  background-repeat: no-repeat;
-  background-size: 100% var(--sw-space-5);
-}
-
-${ownTop} {
-  background-image: ${shade('bottom')};
-  background-position: top;
-}
-
-${ownBottom} {
-  background-image: ${shade('top')};
-  background-position: bottom;
-}
-
-${ownBoth} {
-  background-image: ${shade('bottom')}, ${shade('top')};
-  background-position: top, bottom;
-}
+${blockEdgeShadeRules({ top: ownTop, bottom: ownBottom, both: ownBoth })}
 
 @media (forced-colors: active) {
   ${headCells},
   ${footCells} { background: none; border-color: CanvasText; }
-  ${ownTop},
-  ${ownBottom},
-  ${ownBoth} { background-image: none; }
 }`;
 }
 /*

package/dist/css/range-band.d.ts

@@ -0,0 +1,2 @@
+export declare const rangeBand = "color-mix(in srgb, var(--sw-color-accent) 16%, transparent)";
+export declare const rangeBandHover = "color-mix(in srgb, var(--sw-color-accent) 24%, transparent)";

package/dist/css/range-band.js

@@ -0,0 +1,7 @@
+/*
+ * A range's band in a calendar: the accent at 16 % over the calendar's
+ * glass, 24 % under the pointer. CalendarButton's tint and DateRangeButton's
+ * days between a range's ends share it, so the two read as one band.
+ */
+export const rangeBand = 'color-mix(in srgb, var(--sw-color-accent) 16%, transparent)';
+export const rangeBandHover = 'color-mix(in srgb, var(--sw-color-accent) 24%, transparent)';

package/dist/css/stacking.js

@@ -58,8 +58,8 @@ const openPopups = [
     // popover API exists.
     '.sw-combobox-popup',
     '.sw-tooltip:not([hidden])',
-    // DateField and CalendarButton share it. Rendered only while open; on the
-    // top layer where the popover API exists.
+    // DateField, CalendarButton and DateRangeButton share it. Rendered only
+    // while open; on the top layer where the popover API exists.
     '.sw-date-field-calendar',
 ].join(', ');
 const popupHosts = ['.sw-card-glass', '.sw-accordion'];

package/dist/css/stylesheet.js

@@ -6,6 +6,9 @@ import { accordionClassCatalog } from './css-accordion.js';
 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 { listClassCatalog } from './css-list.js';
+import { countPillClassCatalog } from './css-count-pill.js';
 import { checkboxClassCatalog } from './css-checkbox.js';
 import { radioGroupClassCatalog } from './css-radio-group.js';
 import { spinnerClassCatalog } from './css-spinner.js';
@@ -95,6 +98,9 @@ export function utilityClassCatalog() {
         ...switchClassCatalog(),
         ...dateFieldClassCatalog(),
         ...calendarButtonClassCatalog(),
+        ...dateRangeClassCatalog(),
+        ...listClassCatalog(),
+        ...countPillClassCatalog(),
         ...checkboxClassCatalog(),
         ...radioGroupClassCatalog(),
         ...spinnerClassCatalog(),

package/dist/date-range-draft.d.ts

@@ -0,0 +1,26 @@
+import { type DateOnlyRange } from './date-only.js';
+/**
+ * A range being picked in DateRangeButton's calendar: the days so far, and
+ * whether the next press sets its end. A first press makes a one-day range
+ * that waits for its end, so Apply always has a whole range to give.
+ */
+export type RangeDraft = {
+    range: DateOnlyRange;
+    awaitingEnd: boolean;
+};
+/** A whole range, such as the value the calendar opens on. */
+export declare function settledDraft(range: DateOnlyRange): RangeDraft;
+/**
+ * The draft after a press on `day`: the first press sets the start, the
+ * second the end. A second press before the start starts over from that
+ * day, and a press on a whole range starts a new one.
+ */
+export declare function pressDay(draft: RangeDraft, day: string): RangeDraft;
+/** The days in a range, both ends counted: 1 for a one-day range. */
+export declare function rangeDayCount(range: DateOnlyRange): number;
+/**
+ * The last day a press may pick: `max`, or while the draft waits for its
+ * end, the day `maxDays` long from its start when that is earlier.
+ */
+export declare function latestPick(draft: RangeDraft, max: string | undefined, maxDays: number | undefined): string | undefined;
+export declare function sameRange(a: DateOnlyRange, b: DateOnlyRange): boolean;

package/dist/date-range-draft.js

@@ -0,0 +1,36 @@
+import { addDays, daysBetween } from './calendar-month.js';
+import { clampDateOnly } from './date-only.js';
+/** A whole range, such as the value the calendar opens on. */
+export function settledDraft(range) {
+    return { range, awaitingEnd: false };
+}
+/**
+ * The draft after a press on `day`: the first press sets the start, the
+ * second the end. A second press before the start starts over from that
+ * day, and a press on a whole range starts a new one.
+ */
+export function pressDay(draft, day) {
+    if (draft.awaitingEnd && day >= draft.range.start)
+        return {
+            range: { start: draft.range.start, end: day },
+            awaitingEnd: false,
+        };
+    return { range: { start: day, end: day }, awaitingEnd: true };
+}
+/** The days in a range, both ends counted: 1 for a one-day range. */
+export function rangeDayCount(range) {
+    return daysBetween(range.start, range.end) + 1;
+}
+/**
+ * The last day a press may pick: `max`, or while the draft waits for its
+ * end, the day `maxDays` long from its start when that is earlier.
+ */
+export function latestPick(draft, max, maxDays) {
+    if (!draft.awaitingEnd || maxDays === undefined)
+        return max;
+    const longest = clampDateOnly(addDays(draft.range.start, maxDays - 1));
+    return max === undefined || longest < max ? longest : max;
+}
+export function sameRange(a, b) {
+    return a.start === b.start && a.end === b.end;
+}

package/dist/date-range-input.d.ts

@@ -0,0 +1,26 @@
+import { type DateOnlyRange } from './date-only.js';
+/** A named range a person can choose in one press, such as "Last 7 days". */
+export type DateRangePreset = {
+    /** Unique among the presets; never shown. */
+    id: string;
+    label: string;
+    range: DateOnlyRange;
+};
+export type DateRangeInput = {
+    label: string;
+    value: DateOnlyRange;
+    presets: readonly DateRangePreset[];
+    min?: string;
+    max?: string;
+    maxDays?: number;
+    today?: string;
+    weekStartsOn: number;
+};
+/**
+ * Fails closed on DateRangeButton props it cannot draw: empty words, a
+ * malformed or reversed value, bounds or today, a `maxDays` that is not a
+ * whole number from 1, and presets that repeat an id or that a press could
+ * not pick (outside the bounds or longer than `maxDays`). A value outside
+ * the bounds stays the value, as on CalendarButton.
+ */
+export declare function assertDateRangeInput(input: DateRangeInput): void;

package/dist/date-range-input.js

@@ -0,0 +1,58 @@
+import { assertWeekStart } from './calendar-month.js';
+import { rangeDayCount } from './date-range-draft.js';
+import { assertDateOnly, assertDateRange, isOutsideDateRange, } from './date-only.js';
+function isBlank(text) {
+    return typeof text !== 'string' || text.trim() === '';
+}
+function assertValue(value) {
+    if (typeof value !== 'object' || value === null)
+        throw new RangeError('value must be a { start, end } range');
+    assertDateOnly('value.start', value.start);
+    assertDateOnly('value.end', value.end);
+    if (value.start > value.end)
+        throw new RangeError('value.start must not be after value.end');
+}
+function assertBounds(min, max) {
+    if (min !== undefined)
+        assertDateOnly('min', min);
+    if (max !== undefined)
+        assertDateOnly('max', max);
+    if (min !== undefined && max !== undefined && min > max)
+        throw new RangeError('min must not be after max');
+}
+function assertPreset(preset, { min, max, maxDays }) {
+    if (isBlank(preset.id) || isBlank(preset.label))
+        throw new RangeError('presets must have non-empty ids and labels');
+    assertDateRange(preset.range);
+    const { start, end } = preset.range;
+    if (isOutsideDateRange(start, min, max) || isOutsideDateRange(end, min, max))
+        throw new RangeError(`preset ${preset.id} must lie inside min and max`);
+    if (maxDays !== undefined && rangeDayCount(preset.range) > maxDays)
+        throw new RangeError(`preset ${preset.id} must not exceed maxDays`);
+}
+/**
+ * Fails closed on DateRangeButton props it cannot draw: empty words, a
+ * malformed or reversed value, bounds or today, a `maxDays` that is not a
+ * whole number from 1, and presets that repeat an id or that a press could
+ * not pick (outside the bounds or longer than `maxDays`). A value outside
+ * the bounds stays the value, as on CalendarButton.
+ */
+export function assertDateRangeInput(input) {
+    if (isBlank(input.label))
+        throw new RangeError('label must be non-empty text');
+    assertValue(input.value);
+    assertBounds(input.min, input.max);
+    if (input.today !== undefined)
+        assertDateOnly('today', input.today);
+    assertWeekStart(input.weekStartsOn);
+    const { maxDays } = input;
+    if (maxDays !== undefined && (!Number.isInteger(maxDays) || maxDays < 1))
+        throw new RangeError('maxDays must be a whole number from 1');
+    const ids = new Set();
+    for (const preset of input.presets) {
+        assertPreset(preset, input);
+        if (ids.has(preset.id))
+            throw new RangeError(`presets must have unique ids: ${preset.id}`);
+        ids.add(preset.id);
+    }
+}

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

@@ -0,0 +1,22 @@
+import { type CalendarButtonLabels } from './calendar-button-labels.js';
+/**
+ * DateRangeButton's own words. Products pass their translations; month and
+ * weekday names, and the dates themselves, come from `Intl` instead.
+ */
+export type DateRangeButtonLabels = Pick<CalendarButtonLabels, 'previousMonth' | 'nextMonth' | 'nameSeparator'> & {
+    /** Names the list of presets, such as "Quick ranges". */
+    presets: string;
+    /** Applies the chosen range and closes the calendar, such as "Apply". */
+    apply: string;
+    /** Closes the calendar and keeps the range it opened with. */
+    cancel: string;
+    /** The bottom sheet's close button. */
+    close: string;
+    /** How to pick, shown under the calendar, such as "Choose a first and a last day." */
+    hint: string;
+    /** The length of the chosen range, such as "7 days". */
+    dayCount: (days: number) => string;
+};
+export declare const defaultDateRangeButtonLabels: DateRangeButtonLabels;
+/** Consumer words over the English defaults; empty words fail closed. */
+export declare function resolveDateRangeButtonLabels(labels?: Partial<DateRangeButtonLabels>): DateRangeButtonLabels;

package/dist/date-range-labels.js

@@ -0,0 +1,26 @@
+import { defaultNameSeparator, } from './calendar-button-labels.js';
+export const defaultDateRangeButtonLabels = {
+    previousMonth: 'Previous month',
+    nextMonth: 'Next month',
+    nameSeparator: defaultNameSeparator,
+    presets: 'Presets',
+    apply: 'Apply',
+    cancel: 'Cancel',
+    close: 'Close',
+    hint: 'Choose a first and a last day.',
+    dayCount: (days) => (days === 1 ? '1 day' : `${days} days`),
+};
+/** Consumer words over the English defaults; empty words fail closed. */
+export function resolveDateRangeButtonLabels(labels = {}) {
+    const resolved = { ...defaultDateRangeButtonLabels, ...labels };
+    const { dayCount, nameSeparator, ...words } = resolved;
+    for (const [key, text] of Object.entries(words))
+        if (typeof text !== 'string' || text.trim() === '')
+            throw new RangeError(`labels.${key} must be non-empty text`);
+    // Only an empty string is refused: a lone space is a valid separator.
+    if (typeof nameSeparator !== 'string' || nameSeparator === '')
+        throw new RangeError('labels.nameSeparator must be non-empty text');
+    if (typeof dayCount !== 'function')
+        throw new RangeError('labels.dayCount must be a function');
+    return resolved;
+}

package/dist/date-range-view.d.ts

@@ -0,0 +1,12 @@
+import { type CalendarMonth } from './calendar-month.js';
+/** How many months a range calendar shows: two side by side, or one. */
+export type RangeMonthCount = 1 | 2;
+/**
+ * The first month a range calendar shows so that `focusDate` is in view.
+ * A view that already holds it stays; a focus date before it becomes the
+ * first month, and one after it the last. With no view yet, the focus
+ * date's month is the last one shown, but never a month before `min`'s.
+ */
+export declare function firstShownMonth(focusDate: string, count: RangeMonthCount, shown: CalendarMonth | undefined, min: string | undefined): CalendarMonth;
+/** The months shown from `first`, in order. */
+export declare function shownMonths(first: CalendarMonth, count: RangeMonthCount): CalendarMonth[];

package/dist/date-range-view.js

@@ -0,0 +1,29 @@
+import { monthOf, monthsBetween, shiftMonth, } from './calendar-month.js';
+/**
+ * The first month a range calendar shows so that `focusDate` is in view.
+ * A view that already holds it stays; a focus date before it becomes the
+ * first month, and one after it the last. With no view yet, the focus
+ * date's month is the last one shown, but never a month before `min`'s.
+ */
+export function firstShownMonth(focusDate, count, shown, min) {
+    const focus = monthOf(focusDate);
+    if (shown !== undefined) {
+        const offset = monthsBetween(shown, focus);
+        if (offset >= 0 && offset < count)
+            return shown;
+        if (offset < 0)
+            return focus;
+        return shiftMonth(focus, 1 - count);
+    }
+    const first = shiftMonth(focus, 1 - count);
+    // No month before 0001 exists: the first year's January leads.
+    if (first.year < 1)
+        return focus;
+    if (min !== undefined && monthsBetween(first, monthOf(min)) > 0)
+        return monthOf(min);
+    return first;
+}
+/** The months shown from `first`, in order. */
+export function shownMonths(first, count) {
+    return Array.from({ length: count }, (_, index) => shiftMonth(first, index));
+}

package/dist/date-range-words.d.ts

@@ -0,0 +1,11 @@
+import { type DateOnlyRange } from './date-only.js';
+/**
+ * A range as the button shows it, the locale sharing what both ends have,
+ * such as "Oct 6 – 12, 2026", or "Oct 6, 2026" for one day.
+ */
+export declare function formatRangeShort(range: DateOnlyRange, locale: string): string;
+/**
+ * A range with its weekdays, as the calendar states the one being picked,
+ * such as "Tue, Oct 6 – Mon, Oct 12, 2026".
+ */
+export declare function formatRangeLong(range: DateOnlyRange, locale: string): string;

package/dist/date-range-words.js

@@ -0,0 +1,40 @@
+import { dateFormatter, formatterDate } from './date-formatters.js';
+import { parseDateOnly } from './date-only.js';
+const shortRange = {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+};
+const longRange = {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+};
+function formatRange(range, locale, options) {
+    const start = parseDateOnly(range.start);
+    const end = parseDateOnly(range.end);
+    if (!start || !end)
+        return '';
+    const format = dateFormatter(locale, options);
+    // Browsers before formatRange (Safari 14.0) write both ends in full.
+    if (typeof format.formatRange !== 'function')
+        return range.start === range.end
+            ? format.format(formatterDate(start))
+            : `${format.format(formatterDate(start))} – ${format.format(formatterDate(end))}`;
+    return format.formatRange(formatterDate(start), formatterDate(end));
+}
+/**
+ * A range as the button shows it, the locale sharing what both ends have,
+ * such as "Oct 6 – 12, 2026", or "Oct 6, 2026" for one day.
+ */
+export function formatRangeShort(range, locale) {
+    return formatRange(range, locale, shortRange);
+}
+/**
+ * A range with its weekdays, as the calendar states the one being picked,
+ * such as "Tue, Oct 6 – Mon, Oct 12, 2026".
+ */
+export function formatRangeLong(range, locale) {
+    return formatRange(range, locale, longRange);
+}

package/dist/index.d.ts

@@ -5,6 +5,10 @@ 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 { 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';
+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';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
 export { GlyphTile, glyphTileSizes, type GlyphTileHue, type GlyphTileProps, type GlyphTileSize, } from './components/GlyphTile.js';
@@ -28,7 +32,7 @@ export { boxLinkAppearances } from './css/css-box-link.js';
 export { ButtonGroup, buttonGroupAppearances, type ButtonGroupAppearance, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.js';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
 export { Dialog, dialogAppearances, dialogSizes, type DialogAppearance, type DialogProps, type DialogRole, type DialogSize, type DialogTitleLevel, } from './components/Dialog.js';
-export { StatTile, type StatTileEmphasis, type StatTileProps, type StatTileTone, statTileTones, } from './components/StatTile.js';
+export { StatTile, type StatTileAppearance, statTileAppearances, type StatTileEmphasis, type StatTileProps, type StatTileTone, statTileTones, } from './components/StatTile.js';
 export { TabPanel, type TabItem, type TabPanelProps, Tabs, type TabsProps, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, type ToastAction, type ToastPlacement, } from './components/Toast.js';
 export type { ToastProps, ToastTone } from './components/Toast.js';
@@ -40,6 +44,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 { 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 { Combobox, comboboxSizes, type ComboboxAction, type ComboboxBadge, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type ComboboxSize, } from './components/Combobox.js';

package/dist/index.js

@@ -4,6 +4,10 @@ export { Accordion } from './components/Accordion.js';
 export { Switch } from './components/Switch.js';
 export { DateField, } from './components/DateField.js';
 export { CalendarButton, } from './components/CalendarButton.js';
+export { DateRangeButton, } from './components/DateRangeButton.js';
+export { ListGroup } from './components/ListGroup.js';
+export { ListRow } from './components/ListRow.js';
+export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, } from './list-options.js';
 export { Checkbox } from './components/Checkbox.js';
 export { Spinner, } from './components/Spinner.js';
 export { GlyphTile, glyphTileSizes, } from './components/GlyphTile.js';
@@ -27,7 +31,7 @@ export { boxLinkAppearances } from './css/css-box-link.js';
 export { ButtonGroup, buttonGroupAppearances, } from './components/ButtonGroup.js';
 export { Card } from './components/Card.js';
 export { Dialog, dialogAppearances, dialogSizes, } from './components/Dialog.js';
-export { StatTile, statTileTones, } from './components/StatTile.js';
+export { StatTile, statTileAppearances, statTileTones, } from './components/StatTile.js';
 export { TabPanel, Tabs, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, } from './components/Toast.js';
 export { Field, fieldVariants, } from './components/Field.js';
@@ -37,6 +41,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 { SectionNav, sectionNavAppearances, } from './components/SectionNav.js';
 export { SegmentedControl, } from './components/SegmentedControl.js';
 export { Combobox, comboboxSizes, } from './components/Combobox.js';

package/dist/list-options.d.ts

@@ -0,0 +1,70 @@
+import { type CSSProperties } from 'react';
+import { type TableCellTone } from './css/css-table-ledger.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
+ * a surface that already has one, such as a Card.
+ */
+export declare const listGroupVariants: readonly ["panel", "plain"];
+export type ListGroupVariant = (typeof listGroupVariants)[number];
+/**
+ * A list's bounded height, counted in rows: as tall as `rows` rows of a
+ * title and one detail line, the rest scrolling inside it. Taller rows
+ * show fewer at a time, shorter ones more.
+ */
+export type ListGroupMaxHeight = {
+    rows: number;
+};
+/** `danger` draws the title in the danger colour, for a row that ends something. */
+export declare const listRowTones: readonly ["default", "danger"];
+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;
+/** What ends a row: a chevron (it opens something), a check (chosen), or none. */
+export type ListRowAccessory = 'chevron' | 'check' | 'none';
+export type ListGroupInput = {
+    label: string | undefined;
+    labelledBy: string | undefined;
+    variant: unknown;
+    maxHeight: ListGroupMaxHeight | undefined;
+};
+/**
+ * Fails closed on a ListGroup it cannot draw: an unknown variant, a
+ * `maxHeight` that is not a whole row count from 1, or a bounded list with
+ * no name (its scroll region is a keyboard stop and must say what it holds).
+ */
+export declare function assertListGroup({ label, labelledBy, variant, maxHeight, }: ListGroupInput): void;
+/** The row count the generated `sw-list-group-scroll` height reads. */
+export declare function listMaxHeightStyle(maxHeight: ListGroupMaxHeight): CSSProperties;
+export type ListRowInput = {
+    title: string;
+    tone: unknown;
+    titleAppearance: unknown;
+    valueTone: unknown;
+    accessory: unknown;
+    value: string | undefined;
+    valueDetail: string | 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).
+ */
+export declare function assertListRow(input: ListRowInput): void;
+/**
+ * The row's end: a check while `selected`, nothing for an unchosen choice,
+ * a chevron on a row that opens something (unless `accessory` is `none`),
+ * and nothing on a read-only row.
+ */
+export declare function listRowAccessory(options: {
+    pressable: boolean;
+    selected: boolean | undefined;
+    accessory: 'chevron' | 'none';
+}): ListRowAccessory;

package/dist/list-options.js

@@ -0,0 +1,77 @@
+import { tableCellTones } from './css/css-table-ledger.js';
+import { isOneOf } from './is-one-of.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
+ * a surface that already has one, such as a Card.
+ */
+export const listGroupVariants = ['panel', 'plain'];
+/** `danger` draws the title in the danger colour, for a row that ends something. */
+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;
+function isBlank(text) {
+    return typeof text !== 'string' || text.trim() === '';
+}
+/**
+ * Fails closed on a ListGroup it cannot draw: an unknown variant, a
+ * `maxHeight` that is not a whole row count from 1, or a bounded list with
+ * no name (its scroll region is a keyboard stop and must say what it holds).
+ */
+export function assertListGroup({ label, labelledBy, variant, maxHeight, }) {
+    if (!isOneOf(listGroupVariants, variant))
+        throw new RangeError(`Unknown ListGroup variant: ${String(variant)}`);
+    if (maxHeight === undefined)
+        return;
+    const rows = typeof maxHeight === 'object' && maxHeight !== null
+        ? maxHeight.rows
+        : undefined;
+    if (typeof rows !== 'number' || !Number.isInteger(rows) || rows < 1)
+        throw new RangeError('ListGroup maxHeight must be { rows } with a whole number from 1');
+    if (isBlank(label) && isBlank(labelledBy))
+        throw new RangeError('A ListGroup with maxHeight needs aria-label or aria-labelledby');
+}
+/** The row count the generated `sw-list-group-scroll` height reads. */
+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 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).
+ */
+export function assertListRow(input) {
+    if (isBlank(input.title))
+        throw new RangeError('ListRow title must be non-empty text');
+    if (!isOneOf(listRowTones, input.tone))
+        throw new RangeError(`Unknown ListRow tone: ${String(input.tone)}`);
+    if (!isOneOf(listRowTitleAppearances, input.titleAppearance))
+        throw new RangeError(`Unknown ListRow titleAppearance: ${String(input.titleAppearance)}`);
+    if (input.valueTone !== undefined &&
+        !isOneOf(listRowValueTones, input.valueTone))
+        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.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');
+}
+/**
+ * The row's end: a check while `selected`, nothing for an unchosen choice,
+ * a chevron on a row that opens something (unless `accessory` is `none`),
+ * and nothing on a read-only row.
+ */
+export function listRowAccessory(options) {
+    if (options.selected !== undefined)
+        return options.selected ? 'check' : 'none';
+    if (!options.pressable)
+        return 'none';
+    return options.accessory;
+}