@scalewing/react 1.40.0 → 1.42.0

package/dist/components/DocumentViewer.js

@@ -0,0 +1,72 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState, } from 'react';
+import { Button } from './Button.js';
+import { Spinner } from './Spinner.js';
+import { Text } from './Text.js';
+import { assertDocumentViewer, shownPage, } from './document-viewer/document-viewer-labels.js';
+import { pageBoxStyle } from './document-viewer/page-box.js';
+import { useErrorReport } from './document-viewer/use-error-report.js';
+import { usePageRender } from './document-viewer/use-page-render.js';
+import { usePdfDocument } from './document-viewer/use-pdf-document.js';
+import { usePinchZoom } from './document-viewer/use-pinch-zoom.js';
+import { useZoom } from './document-viewer/use-zoom.js';
+import { zoomForKey } from './document-viewer/zoom.js';
+import { useElementWidth } from './use-element-width.js';
+/**
+ * A PDF drawn one page at a time from its bytes with PDF.js, fitted to the
+ * width it is given, with previous and next steps and "Page n of m" in a
+ * polite live region. Two fingers, or `+`, `-` and `0` on the focused
+ * page, zoom it. The page's text sits over the drawing, transparent, so it
+ * can be read by assistive technology and selected. It opens nothing from
+ * the network beyond the worker, and has no download or print of its own.
+ */
+export function DocumentViewer({ data, workerSrc, label, labels, page: pageProp, onPageChange, failedAction, onLoad, onError, }) {
+    assertDocumentViewer({ label, labels, workerSrc });
+    const statusId = useId();
+    // The viewer's own page belongs to its bytes: new bytes start at page 1.
+    const [own, setOwn] = useState({ data, page: 1 });
+    const ownPage = own.data === data ? own.page : 1;
+    const canvas = useRef(null);
+    const text = useRef(null);
+    const opened = usePdfDocument(data, workerSrc, { onLoad, onError });
+    const reportError = useErrorReport(onError);
+    const document = opened.status === 'ready' ? opened.document : null;
+    const pageCount = document?.pageCount ?? 0;
+    const page = shownPage(pageProp ?? ownPage, pageCount);
+    const { box: stage, page: sheet, zoom, drawnZoom, zoomTo, } = useZoom(`${page}`);
+    const fitWidth = useElementWidth(stage, 0, { content: true });
+    usePinchZoom(stage, zoom, zoomTo);
+    const drawn = usePageRender({
+        document,
+        page,
+        width: Math.round(fitWidth * drawnZoom),
+        canvas,
+        text,
+        onError: reportError,
+    });
+    // A page that cannot be drawn keeps the steps, so another can be read.
+    const failed = opened.status === 'failed' || drawn.state === 'failed';
+    const open = document !== null;
+    function go(target) {
+        if (target < 1 || target > pageCount || target === page)
+            return;
+        setOwn({ data, page: target });
+        onPageChange?.(target);
+    }
+    function onKeyDown(event) {
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const next = zoomForKey(event.key, zoom);
+        if (next === null)
+            return;
+        event.preventDefault();
+        zoomTo(next);
+    }
+    const step = (direction) => {
+        const target = direction === 'previous' ? page - 1 : page + 1;
+        const off = target < 1 || target > pageCount;
+        return (_jsx(Button, { "aria-disabled": off || undefined, "aria-label": labels[direction], className: "sw-document-viewer-step", disabledAppearance: "neutral", onPress: () => go(target), variant: "neutral", children: _jsx("span", { "aria-hidden": "true", className: `sw-pagination-glyph sw-pagination-glyph-${direction}` }) }));
+    };
+    return (_jsxs("section", { "aria-label": label, className: "sw-document-viewer", children: [_jsxs("div", { "aria-labelledby": open && !failed ? statusId : undefined, className: "sw-document-viewer-stage", onKeyDown: open && !failed ? onKeyDown : undefined, ref: stage, role: open && !failed ? 'group' : undefined, tabIndex: open && !failed ? 0 : undefined, children: [failed ? (_jsxs("div", { className: "sw-document-viewer-message", role: "alert", children: [_jsx(Text, { as: "p", variant: "title", children: labels.failed }), labels.failedDetail ? (_jsx(Text, { as: "p", children: labels.failedDetail })) : null, failedAction ? (_jsx("div", { className: "sw-document-viewer-actions", children: failedAction })) : null] })) : null, opened.status === 'loading' ? (_jsxs("div", { className: "sw-document-viewer-message", children: [_jsx(Spinner, { label: labels.loading }), _jsx(Text, { "aria-hidden": true, as: "p", children: labels.loading })] })) : null, open ? (_jsxs("div", { className: "sw-document-viewer-page", "data-zoomed": zoom > 1 || undefined, hidden: failed, ref: sheet, style: pageBoxStyle(fitWidth * zoom, drawn.aspect), children: [_jsx("canvas", { "aria-hidden": "true", ref: canvas }), _jsx("div", { className: "sw-document-viewer-text", ref: text })] })) : null] }), open ? (_jsxs("div", { className: "sw-document-viewer-bar", children: [pageCount > 1 ? step('previous') : null, _jsx("span", { "aria-atomic": "true", "aria-live": "polite", className: "sw-document-viewer-status", id: statusId, children: labels.page(page, pageCount) }), pageCount > 1 ? step('next') : null] })) : null] }));
+}

package/dist/components/Field.d.ts

@@ -1,9 +1,10 @@
 import { type SpacingStep } from '@scalewing/tokens';
 import { type ReactNode } from 'react';
 import { type RequiredMark } from './FieldLabelText.js';
+import { type FieldWidth } from '../css/css-field-width.js';
+import { fieldVariants, type FieldVariant } from './field/field-checks.js';
 export type FieldSize = 'xs' | 'md';
-export declare const fieldVariants: readonly ["outlined", "search"];
-export type FieldVariant = (typeof fieldVariants)[number];
+export { fieldVariants, type FieldVariant };
 export type FieldProps = {
     children: ReactNode;
     gap?: SpacingStep;
@@ -60,5 +61,15 @@ export type FieldProps = {
     clearLabel?: string;
     /** Called by a search field's clear button; the consumer empties the value. */
     onClear?: () => void;
+    /**
+     * Caps the control's width at a Table column size (`xs` 4rem, `sm` 6rem,
+     * `md` 8rem, `lg` 12rem, `xl` 16rem), at the start of the column and
+     * never wider than it, so a short value such as a rate or a count does
+     * not stretch across a form. The label and messages keep the column's
+     * width. Left out, the control fills the column. It needs one native
+     * text input, select or textarea child (a `TypeError` otherwise); an
+     * unknown width throws a `RangeError`.
+     */
+    width?: FieldWidth;
 };
 export declare function Field(props: FieldProps): import("react").JSX.Element;

package/dist/components/Field.js

@@ -4,45 +4,14 @@ import { cloneElement, isValidElement, useId, } from 'react';
 import { adornedControlAria, FieldAdornment, } from './FieldAdornment.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { assertRequiredMark, FieldLabelText, } from './FieldLabelText.js';
+import { fieldWidthClass } from '../css/css-field-width.js';
 import { SearchFrame } from './field/SearchFrame.js';
+import { assertFieldProps, fieldVariants, passesInvalid, } from './field/field-checks.js';
 import { Stack } from './Stack.js';
-export const fieldVariants = ['outlined', 'search'];
-function assertSearch(props, child) {
-    const { variant = 'outlined' } = props;
-    if (!fieldVariants.includes(variant))
-        throw new RangeError(`Unknown Field variant: ${String(variant)}`);
-    if (variant !== 'search') {
-        if (props.leading !== undefined ||
-            props.clearLabel !== undefined ||
-            props.onClear !== undefined)
-            throw new TypeError('Field leading, clearLabel and onClear are for variant="search"');
-        return;
-    }
-    if (!props.clearLabel?.trim())
-        throw new RangeError('A search Field needs a nonempty clearLabel');
-    if (typeof props.onClear !== 'function')
-        throw new TypeError('A search Field needs onClear');
-    if (props.prefix || props.suffix)
-        throw new TypeError('A search Field takes leading, not prefix or suffix');
-    if (!isValidElement(child) || child.type !== 'input')
-        throw new TypeError('A search Field needs one native input child');
-    if (child.props.value === undefined)
-        throw new TypeError('A search Field needs a controlled input: pass value (and onChange)');
-}
-/**
- * `invalid` was passed, even as `false`, but not as `undefined` (a wrapper
- * forwarding an optional prop passes nothing): such a field needs one native
- * control from its first render, so a form learns it on the happy path
- * instead of on its first failed submit. `error` keeps its older rule (it
- * requires the control only while it holds a message), so a composed
- * child beside `error={undefined}` still renders.
- */
-function passesInvalid(props) {
-    return props.invalid !== undefined || props.changed !== undefined;
-}
+export { fieldVariants };
 export function Field(props) {
-    const { children, gap = 1, label, labelVisuallyHidden = false, size = 'md', description, error, invalid = false, changed = false, required = false, requiredMark = 'visible', prefix, suffix, variant = 'outlined', leading, clearLabel = '', onClear, } = props;
-    assertSearch(props, children);
+    const { children, gap = 1, label, labelVisuallyHidden = false, size = 'md', description, error, invalid = false, changed = false, required = false, requiredMark = 'visible', prefix, suffix, variant = 'outlined', leading, clearLabel = '', onClear, width, } = props;
+    assertFieldProps(props, children);
     const search = variant === 'search';
     const controlId = useId();
     const descriptionId = useId();
@@ -54,13 +23,20 @@ export function Field(props) {
     const message = error || description;
     const marksInvalid = Boolean(error) || invalid;
     const adorned = Boolean(prefix || suffix);
-    const needsControl = Boolean(message || marksInvalid || passesInvalid(props) || required || adorned);
+    const needsControl = Boolean(message ||
+        marksInvalid ||
+        passesInvalid(props) ||
+        required ||
+        adorned ||
+        Boolean(width));
     const className = [
         'sw-field',
         size === 'xs' && 'sw-field-xs',
         marksInvalid && 'sw-field-invalid',
         search && 'sw-field-search-field',
         changed && !marksInvalid && 'sw-field-changed',
+        width && 'sw-field-sized',
+        width && fieldWidthClass(width),
     ]
         .filter(Boolean)
         .join(' ');
@@ -71,7 +47,7 @@ export function Field(props) {
         typeof children.type !== 'string' ||
         !['input', 'select', 'textarea'].includes(children.type)) {
         if (needsControl)
-            throw new TypeError('Field validation and adornments require one native input, select, or textarea child');
+            throw new TypeError('Field validation, adornments and width require one native input, select, or textarea child');
         return (_jsxs(Stack, { as: "label", className: className, gap: labelHidden ? 0 : gap, children: [labelText, children] }));
     }
     if (adorned && children.type !== 'input')

package/dist/components/FileField.d.ts

@@ -0,0 +1,44 @@
+import { type ReactNode } from 'react';
+/** The chosen file as the field shows it: its name and a line about it. */
+export type FileFieldValue = {
+    name: string;
+    /** A muted line under the name, such as "4 pages · 1.6 MB". */
+    detail?: string;
+};
+export type FileFieldProps = {
+    /** The field's label, drawn above it as Field's, and part of its button's name. */
+    label: string;
+    labelVisuallyHidden?: boolean;
+    /** A muted hint under the field, such as "Up to 25 MB". */
+    description?: string;
+    /** Replaces the hint with an error, in a polite live region. */
+    error?: string;
+    /**
+     * The file types the picker offers, as the native `accept` attribute
+     * (".pdf,application/pdf"). A dropped file is not filtered by it: check
+     * what `onChange` receives and say why in `error`.
+     */
+    accept?: string;
+    /** The chosen file to show, or nothing chosen (`null` or left out). */
+    value?: FileFieldValue | null;
+    /** Called with the file the person chose or dropped. Nothing is uploaded. */
+    onChange: (file: File) => void;
+    /** The empty field's words, such as "Choose a PDF". */
+    chooseLabel: string;
+    /** The button beside a chosen file, such as "Choose another". */
+    changeLabel: string;
+    /** Muted words after `chooseLabel` for a fine pointer, such as "or drop it here". */
+    dropLabel?: string;
+    /** A consumer mark before the chosen file's name (Lucide), hidden from assistive technology. */
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** Prefixes the ids the field gives its parts (its button is `${id}-button`). */
+    id?: string;
+};
+/**
+ * One file chosen by a press or dropped on the field: empty, a wide zone
+ * that opens the system picker; chosen, the file's name and detail with a
+ * button to choose another. It hands the `File` to the consumer and shows
+ * what the consumer passes back as `value`; it never reads or uploads it.
+ */
+export declare function FileField({ label, labelVisuallyHidden, description, error, accept, value, onChange, chooseLabel, changeLabel, dropLabel, icon, disabled, id, }: FileFieldProps): import("react").JSX.Element;

package/dist/components/FileField.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useRef } from 'react';
+import { cx } from '../class-names.js';
+import { tabStop } from '../tab-stop.js';
+import { Button } from './Button.js';
+import { FieldErrorRegion } from './FieldErrorRegion.js';
+import { FieldLabelText } from './FieldLabelText.js';
+import { assertFileField } from './file-field/file-field-checks.js';
+import { useFileDrop } from './file-field/use-file-drop.js';
+import { useSwapFocus } from './file-field/use-swap-focus.js';
+import { Stack } from './Stack.js';
+/** Whether the consumer passed a mark to draw (not empty JSX). */
+function hasMark(icon) {
+    return (icon !== undefined &&
+        icon !== null &&
+        icon !== '' &&
+        typeof icon !== 'boolean');
+}
+/**
+ * One file chosen by a press or dropped on the field: empty, a wide zone
+ * that opens the system picker; chosen, the file's name and detail with a
+ * button to choose another. It hands the `File` to the consumer and shows
+ * what the consumer passes back as `value`; it never reads or uploads it.
+ */
+export function FileField({ label, labelVisuallyHidden = false, description, error, accept, value = null, onChange, chooseLabel, changeLabel, dropLabel, icon, disabled = false, id, }) {
+    assertFileField({ label, chooseLabel, changeLabel, dropLabel, value });
+    const ownId = useId();
+    const baseId = id ?? ownId;
+    const inputRef = useRef(null);
+    const buttonRef = useRef(null);
+    const chosen = value !== null;
+    const drop = useFileDrop({ disabled, onFile: onChange });
+    const focusHandlers = useSwapFocus(buttonRef, chosen);
+    function onInput(event) {
+        const file = event.currentTarget.files?.[0];
+        // Cleared, so choosing the same file again is a change too.
+        event.currentTarget.value = '';
+        if (file)
+            onChange(file);
+    }
+    const ids = {
+        label: `${baseId}-label`,
+        button: `${baseId}-button`,
+        name: `${baseId}-name`,
+        detail: `${baseId}-detail`,
+        hint: `${baseId}-hint`,
+        error: `${baseId}-error`,
+    };
+    // The error is in the button's description and the polite region; the
+    // button role takes no aria-invalid.
+    const naming = {
+        'aria-labelledby': `${ids.label} ${ids.button}`,
+        'aria-describedby': [
+            chosen && ids.name,
+            chosen && value.detail && ids.detail,
+            description && !error && ids.hint,
+            error && ids.error,
+        ]
+            .filter(Boolean)
+            .join(' ') || undefined,
+        id: ids.button,
+    };
+    const open = () => inputRef.current?.click();
+    return (_jsxs(Stack, { className: cx('sw-field', 'sw-file-field', error && 'sw-field-invalid'), gap: labelVisuallyHidden ? 0 : 1, children: [_jsx("span", { id: ids.label, children: _jsx(FieldLabelText, { label: label, visuallyHidden: labelVisuallyHidden }) }), _jsxs("div", { className: cx('sw-file-field-frame', chosen ? 'sw-file-field-chosen' : 'sw-file-field-empty', drop.dragging && 'sw-file-field-dragging', disabled && 'sw-file-field-disabled'), ...drop.handlers, ...focusHandlers, children: [_jsx("input", { accept: accept, "aria-label": label, disabled: disabled, hidden: true, onChange: onInput, ref: inputRef, tabIndex: -1, type: "file" }), chosen ? (_jsxs(_Fragment, { children: [!hasMark(icon) ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-file-field-icon", children: icon })), _jsxs("span", { className: "sw-file-field-file", children: [_jsx("span", { className: "sw-file-field-name", id: ids.name, children: value.name }), value.detail ? (_jsx("span", { className: "sw-file-field-detail", id: ids.detail, children: value.detail })) : null] }), _jsx(Button, { ...naming, disabled: disabled, disabledAppearance: "neutral", onPress: open, ref: buttonRef, variant: "neutral", children: changeLabel })] })) : (_jsxs("button", { ...naming, className: "sw-file-field-zone", disabled: disabled, onClick: open, ref: buttonRef, tabIndex: tabStop, type: "button", children: [_jsx("span", { className: "sw-file-field-choose", children: chooseLabel }), dropLabel ? ' ' : null, dropLabel ? (_jsx("span", { className: "sw-file-field-drop", children: dropLabel })) : null] }))] }), description && !error ? (_jsx("span", { className: "sw-field-description", id: ids.hint, children: description })) : null, _jsx(FieldErrorRegion, { className: "sw-field-error", id: ids.error, message: error })] }));
+}

package/dist/components/FilterChips.d.ts

@@ -1,37 +1,7 @@
-import { type RequiredMark } from './FieldLabelText.js';
-export type FilterChipOption = {
-    value: string;
-    label: string;
-    count?: number;
-    disabled?: boolean;
-};
-export type FilterChipsProps = {
-    label: string;
-    /** The chosen option's value, or `''` while nothing is chosen yet. */
-    value: string;
-    onChange: (value: string) => void;
-    options: readonly FilterChipOption[];
-    /**
-     * A choice must be made, such as a reason: each radio is `required` and
-     * the label shows the required mark (hidden from assistive technology,
-     * which reads the radios' own state).
-     */
-    required?: boolean;
-    /**
-     * `hidden` leaves out the label's " *" while the control stays required
-     * (and announced so); `visible` (default) draws it.
-     * When hidden, say in visible text which fields must be filled; a
-     * placeholder alone is not enough.
-     */
-    requiredMark?: RequiredMark;
-    /**
-     * A message under the chips, such as "Pick a reason": a polite live
-     * region linked to the group by `aria-describedby`; the group is marked
-     * invalid and every chip takes the danger edge. An empty string is no
-     * error.
-     */
-    error?: string;
-    /** More ids that describe the group, such as a hint beside it. */
-    'aria-describedby'?: string;
-};
-export declare function FilterChips({ label, value, onChange, options, required, requiredMark, error, 'aria-describedby': describedByProp, }: FilterChipsProps): import("react").JSX.Element;
+import { type FilterChipsProps } from './filter-chips/options.js';
+export { filterChipCountAppearances, filterChipsOverflows, type FilterChipCountAppearance, type FilterChipOption, type FilterChipsOverflow, type FilterChipsProps, } from './filter-chips/options.js';
+/**
+ * A labelled row of chips: one choice (radios), or several at once
+ * (`multiple`, checkboxes), each chip optionally counted.
+ */
+export declare function FilterChips(props: FilterChipsProps): import("react").JSX.Element;

package/dist/components/FilterChips.js

@@ -1,35 +1,43 @@
 'use client';
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useId } from 'react';
 import { cx } from '../class-names.js';
+import { radioTabStopValue } from '../tab-stop.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
-import { assertRequiredMark, showsRequiredMark, } from './FieldLabelText.js';
-import { radioTabStopValue, tabStop } from '../tab-stop.js';
-function isCount(count) {
-    return count === undefined || (Number.isInteger(count) && count >= 0);
+import { showsRequiredMark } from './FieldLabelText.js';
+import { FilterChip } from './filter-chips/FilterChip.js';
+import { assertFilterChips } from './filter-chips/validate.js';
+export { filterChipCountAppearances, filterChipsOverflows, } from './filter-chips/options.js';
+/** The values a change leaves on, in the options' order. */
+function toggled(options, chosen, value, checked) {
+    return options
+        .map((option) => option.value)
+        .filter((each) => (each === value ? checked : chosen.includes(each)));
 }
-export function FilterChips({ label, value, onChange, options, required = false, requiredMark = 'visible', error, 'aria-describedby': describedByProp, }) {
+/**
+ * A labelled row of chips: one choice (radios), or several at once
+ * (`multiple`, checkboxes), each chip optionally counted.
+ */
+export function FilterChips(props) {
+    const { label, options, labelVisuallyHidden = false, requiredMark = 'visible', countAppearance = 'figure', overflow = 'wrap', error, 'aria-describedby': describedByProp, } = props;
     const name = useId();
     const errorId = useId();
+    assertFilterChips(props);
+    const required = props.multiple ? false : (props.required ?? false);
     const describedBy = [describedByProp?.trim() || null, error ? errorId : null]
         .filter((id) => id !== null)
         .join(' ');
-    const values = options.map((option) => option.value);
-    if (!label.trim())
-        throw new RangeError('label must not be empty');
-    assertRequiredMark(requiredMark);
-    if (options.length === 0 ||
-        options.some((option) => !option.value.trim() || !option.label.trim()))
-        throw new RangeError('options must have nonempty values and labels');
-    if (new Set(values).size !== values.length)
-        throw new RangeError('options must have unique values');
-    if (value !== '' && !values.includes(value))
-        throw new RangeError('value must match an option or be empty');
-    if (options.some((option) => !isCount(option.count)))
-        throw new RangeError('count must be a non-negative integer');
-    const entry = radioTabStopValue(options, value);
-    return (_jsxs("fieldset", { "aria-describedby": describedBy || undefined, "aria-invalid": error ? true : undefined, className: "sw-filter-chips", children: [_jsxs("legend", { className: "sw-filter-chips-legend", children: [label, showsRequiredMark(required, requiredMark) ? (_jsxs("span", { "aria-hidden": "true", className: "sw-field-required", children: [' ', "*"] })) : null] }), _jsx("span", { className: "sw-filter-chips-options", children: options.map((option) => (_jsxs("label", { className: cx('sw-filter-chip', option.count === 0 && 'sw-filter-chip-quiet'), children: [_jsx("input", { checked: option.value === value, className: "sw-filter-chip-input", disabled: option.disabled, name: name, onChange: (event) => {
-                                if (event.currentTarget.checked && !option.disabled)
-                                    onChange(option.value);
-                            }, required: required, tabIndex: option.value === entry ? tabStop : undefined, type: "radio", value: option.value }), _jsxs("span", { className: "sw-filter-chip-face", children: [option.label, option.count === undefined ? null : (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-filter-chip-count", children: option.count })] }))] })] }, option.value))) }), _jsx(FieldErrorRegion, { className: "sw-filter-chips-error", id: errorId, message: error })] }));
+    const entry = props.multiple
+        ? undefined
+        : radioTabStopValue(options, props.value);
+    function isChecked(value) {
+        return props.multiple ? props.value.includes(value) : props.value === value;
+    }
+    function change(value, checked) {
+        if (props.multiple)
+            props.onChange(toggled(options, props.value, value, checked));
+        else if (checked)
+            props.onChange(value);
+    }
+    return (_jsxs("fieldset", { "aria-describedby": describedBy || undefined, "aria-invalid": error ? true : undefined, className: cx('sw-filter-chips', overflow === 'scroll' && 'sw-filter-chips-scroll'), children: [_jsxs("legend", { className: cx('sw-filter-chips-legend', labelVisuallyHidden && 'sw-sr-only'), children: [label, showsRequiredMark(required, requiredMark) ? (_jsxs("span", { "aria-hidden": "true", className: "sw-field-required", children: [' ', "*"] })) : null] }), _jsx("span", { className: "sw-filter-chips-options", children: options.map((option) => (_jsx(FilterChip, { checked: isChecked(option.value), countAppearance: countAppearance, name: name, onCheckedChange: (checked) => change(option.value, checked), option: option, required: required, tabStopHere: props.multiple ? true : option.value === entry, type: props.multiple ? 'checkbox' : 'radio' }, option.value))) }), _jsx(FieldErrorRegion, { className: "sw-filter-chips-error", id: errorId, message: error })] }));
 }

package/dist/components/ListRow.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type BadgeTone } from '../css/css-data.js';
 import { type ListRowTitleAppearance, type ListRowTone, type ListRowValueTone } from '../list-options.js';
 export type ListRowProps = {
     title: string;
@@ -8,8 +9,16 @@ export type ListRowProps = {
     value?: string;
     /** A muted line under the value, such as "checks $3,427". */
     valueDetail?: string;
-    /** Colours the value only, as a table cell's tone; the words say why. */
+    /**
+     * Colours the value only, as a table cell's tone, or `warning` for a
+     * figure that needs a look; the words say why.
+     */
     valueTone?: ListRowValueTone;
+    /**
+     * Draws the value as a `Badge` in this tone, such as a status ("Open",
+     * "Blocked") at the row's end. Not with `valueTone`.
+     */
+    valueBadge?: BadgeTone;
     /**
      * A consumer mark at the row's start, such as a status dot or a Lucide
      * glyph (ADR 0008). It is hidden from assistive technology, so the words
@@ -35,6 +44,26 @@ export type ListRowProps = {
     tone?: ListRowTone;
     /** `plain` sets the title at the body weight, for a list of plain statements. */
     titleAppearance?: ListRowTitleAppearance;
+    /**
+     * Marks the row as new for the person, such as a document they have not
+     * opened: an accent dot after the title, read as `unreadLabel`.
+     */
+    unread?: boolean;
+    /**
+     * What the dot means in the consumer's words ("New"), read after the
+     * title (in a pressable row's name). Required while `unread`.
+     */
+    unreadLabel?: string;
+    /**
+     * A short status before the accessory, such as a `Badge` ("Only in
+     * English"); a pressable row is described by it.
+     */
+    tag?: ReactNode;
+    /**
+     * A control after the row and outside its press area, such as an
+     * `ActionMenu` of the row's own actions. It needs its own name.
+     */
+    action?: ReactNode;
     /** `none` hides the chevron of a pressable row that acts in place. */
     accessory?: 'chevron' | 'none';
     /**
@@ -46,6 +75,7 @@ export type ListRowProps = {
 /**
  * One row of a `ListGroup`: it opens something (`onPress` or `href`, with
  * a chevron, the whole row pressing), picks one option in place
- * (`selected`), or only states something (neither).
+ * (`selected`), or only states something (neither). `unread` marks it new,
+ * `tag` adds a status before its end, and `action` a control beside it.
  */
-export declare function ListRow({ title, detail, value, valueDetail, valueTone, leading, onPress, href, selected, disabled, tone, titleAppearance, accessory, 'aria-label': ariaLabel, }: ListRowProps): import("react").JSX.Element;
+export declare function ListRow({ title, detail, value, valueDetail, valueTone, valueBadge, leading, onPress, href, selected, disabled, tone, titleAppearance, accessory, unread, unreadLabel, tag, action, 'aria-label': ariaLabel, }: ListRowProps): import("react").JSX.Element;

package/dist/components/ListRow.js

@@ -1,22 +1,20 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useId } from 'react';
+import { useId } from 'react';
 import { cx } from '../class-names.js';
 import { assertListRow, listRowAccessory, } from '../list-options.js';
 import { tabStop } from '../tab-stop.js';
 import { plainPress } from './link-press.js';
 import { ListRowContent } from './list/ListRowContent.js';
-import { ListRowContainer } from './list/list-row-container.js';
-function ids(...parts) {
-    const joined = parts.filter(Boolean).join(' ');
-    return joined === '' ? undefined : joined;
-}
+import { ListRowItem } from './list/ListRowItem.js';
+import { rowNaming } from './list/row-naming.js';
 /**
  * One row of a `ListGroup`: it opens something (`onPress` or `href`, with
  * a chevron, the whole row pressing), picks one option in place
- * (`selected`), or only states something (neither).
+ * (`selected`), or only states something (neither). `unread` marks it new,
+ * `tag` adds a status before its end, and `action` a control beside it.
  */
-export function ListRow({ title, detail, value, valueDetail, valueTone, leading, onPress, href, selected, disabled = false, tone = 'default', titleAppearance = 'strong', accessory = 'chevron', 'aria-label': ariaLabel, }) {
+export function ListRow({ title, detail, value, valueDetail, valueTone, valueBadge, leading, onPress, href, selected, disabled = false, tone = 'default', titleAppearance = 'strong', accessory = 'chevron', unread = false, unreadLabel, tag, action, 'aria-label': ariaLabel, }) {
     const pressable = onPress !== undefined || href !== undefined;
     assertListRow({
         title,
@@ -26,21 +24,24 @@ export function ListRow({ title, detail, value, valueDetail, valueTone, leading,
         accessory,
         value,
         valueDetail,
+        valueBadge,
         selected,
         pressable,
+        unread,
+        unreadLabel,
     });
-    const container = useContext(ListRowContainer);
     const id = useId();
     const kind = listRowAccessory({ pressable, selected, accessory });
-    const content = (_jsx(ListRowContent, { accessory: kind, detail: detail, id: id, leading: leading, title: title, titleAppearance: titleAppearance, tone: tone, value: value, valueDetail: valueDetail, valueTone: valueTone }));
+    const content = (_jsx(ListRowContent, { accessory: kind, detail: detail, id: id, leading: leading, tag: tag, title: title, titleAppearance: titleAppearance, tone: tone, unreadLabel: unread ? unreadLabel : undefined, value: value, valueBadge: valueBadge, valueDetail: valueDetail, valueTone: valueTone }));
     const className = cx('sw-list-row', pressable && 'sw-list-row-pressable', disabled && 'sw-list-row-disabled');
-    const naming = {
+    const naming = rowNaming(id, {
         'aria-label': ariaLabel,
-        'aria-labelledby': ariaLabel
-            ? undefined
-            : ids(`${id}-title`, value !== undefined && `${id}-value`),
-        'aria-describedby': ids(Boolean(detail) && `${id}-detail`, Boolean(valueDetail) && `${id}-value-detail`),
-    };
+        value,
+        detail,
+        valueDetail,
+        unread,
+        tag,
+    });
     let row;
     if (href !== undefined)
         row = (_jsx("a", { ...naming, "aria-current": selected ? 'true' : undefined, "aria-disabled": disabled || undefined, className: className, href: disabled ? undefined : href, onClick: onPress && !disabled
@@ -55,5 +56,5 @@ export function ListRow({ title, detail, value, valueDetail, valueTone, leading,
         row = (_jsx("button", { ...naming, "aria-pressed": selected, className: className, disabled: disabled, onClick: onPress, tabIndex: tabStop, type: "button", children: content }));
     else
         row = (_jsx("div", { "aria-label": ariaLabel, className: className, role: ariaLabel ? 'group' : undefined, children: content }));
-    return container === 'li' ? (_jsx("li", { className: "sw-list-item", children: row })) : (_jsx("div", { className: "sw-list-item", children: row }));
+    return _jsx(ListRowItem, { action: action, children: row });
 }

package/dist/components/MarkdownView.d.ts

@@ -0,0 +1,39 @@
+import { type MarkdownHeading, type MarkdownOmission, type MarkdownOmissionCounts } from './markdown/markdown-model.js';
+import { type MarkdownOptions } from './markdown/markdown-options.js';
+export type { MarkdownHeading, MarkdownImage, MarkdownImageResolver, MarkdownOmission, MarkdownOmissionCounts, MarkdownOmissionKind, } from './markdown/markdown-model.js';
+export { markdownOmissionKinds } from './markdown/markdown-model.js';
+export type { MarkdownOptions } from './markdown/markdown-options.js';
+export type MarkdownViewProps = MarkdownOptions & {
+    /** The Markdown, as written or pasted. */
+    source: string;
+    /**
+     * Hidden words after every link, which opens in a new tab, such as
+     * "(opens in a new tab)".
+     */
+    newTabLabel: string;
+};
+/** What `inspectMarkdown` finds. */
+export type MarkdownInspection = {
+    /** The headings, with the ids the view gives them. */
+    headings: MarkdownHeading[];
+    /** The first 100 things left out, in order. */
+    omissions: MarkdownOmission[];
+    /** How many of each kind were left out, past the first 100 too. */
+    omissionCounts: MarkdownOmissionCounts;
+};
+/**
+ * What a source's view shows in its headings (for an "On this page" list,
+ * with the ids the view gives them) and what it leaves out (for an editor
+ * to say so before saving). Pure; pass the same options as the view, which
+ * it refuses the same way.
+ */
+export declare function inspectMarkdown(source: string, options?: MarkdownOptions): MarkdownInspection;
+/**
+ * Markdown drawn in Scalewing's type as React elements, never as HTML:
+ * paragraphs, headings (`#` drawn at the page's second level, an `h2`),
+ * lists, bold, italic, links (http, https and mailto only, in a new tab),
+ * block quotes as a highlighted box, line breaks and `photo:` images with
+ * their captions. Raw HTML, tables, other images and other link schemes
+ * are left out (a link's words stay); `inspectMarkdown` lists them.
+ */
+export declare function MarkdownView(props: MarkdownViewProps): import("react").JSX.Element;

package/dist/components/MarkdownView.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { readMarkdown } from './markdown/read-markdown.js';
+import { renderBlocks } from './markdown/render-markdown.js';
+export { markdownOmissionKinds } from './markdown/markdown-model.js';
+/**
+ * What a source's view shows in its headings (for an "On this page" list,
+ * with the ids the view gives them) and what it leaves out (for an editor
+ * to say so before saving). Pure; pass the same options as the view, which
+ * it refuses the same way.
+ */
+export function inspectMarkdown(source, options = {}) {
+    const { headings, omissions, omissionCounts } = readMarkdown(source, options, 'inspectMarkdown');
+    return { headings, omissions, omissionCounts };
+}
+/**
+ * Markdown drawn in Scalewing's type as React elements, never as HTML:
+ * paragraphs, headings (`#` drawn at the page's second level, an `h2`),
+ * lists, bold, italic, links (http, https and mailto only, in a new tab),
+ * block quotes as a highlighted box, line breaks and `photo:` images with
+ * their captions. Raw HTML, tables, other images and other link schemes
+ * are left out (a link's words stay); `inspectMarkdown` lists them.
+ */
+export function MarkdownView(props) {
+    const { source, resolveImage, idPrefix, newTabLabel } = props;
+    if (typeof newTabLabel !== 'string' || newTabLabel.trim() === '')
+        throw new RangeError('MarkdownView newTabLabel must be non-empty text');
+    const reading = useMemo(() => readMarkdown(source, { resolveImage, idPrefix }, 'MarkdownView'), [source, resolveImage, idPrefix]);
+    return (_jsx("div", { className: "sw-markdown", children: renderBlocks(reading.blocks, { newTabLabel }) }));
+}