@scalewing/react 1.41.0 → 1.44.0

package/dist/components/document-viewer/use-zoom.js

@@ -0,0 +1,70 @@
+'use client';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { scrollChainBy } from './scroll-chain.js';
+import { anchorShift, clampZoom, minZoom } from './zoom.js';
+/** The middle of the part of `element` inside the window, in client pixels. */
+function visibleMiddle(element) {
+    const rect = element.getBoundingClientRect();
+    const view = element.ownerDocument.documentElement;
+    const top = Math.max(rect.top, 0);
+    const bottom = Math.min(rect.bottom, view.clientHeight || rect.bottom);
+    return {
+        x: rect.left + rect.width / 2,
+        y: bottom > top ? (top + bottom) / 2 : rect.top + rect.height / 2,
+    };
+}
+/** How long a zoom rests before the page is drawn again at its size. */
+export const zoomSettleMs = 150;
+/**
+ * The page's zoom (1 is fit width) and the scrolling box it is shown in.
+ * `zoomTo` changes it about a point on the screen (`at`, in client
+ * pixels; the middle of the box's visible part when left out) so the spot
+ * of the page under it stays put: once the bigger or smaller page is laid
+ * out, the box scrolls across and the boxes around it (the window at
+ * last) scroll down by what keeps that spot in place. `drawnZoom`
+ * follows `zoom` once it rests, so a pinch stretches the drawn page and
+ * only its end draws it again. Another `resetKey` (another page) is fit
+ * width again.
+ */
+export function useZoom(resetKey) {
+    const box = useRef(null);
+    const page = useRef(null);
+    const [keyed, setKeyed] = useState({ key: resetKey, zoom: minZoom });
+    const [drawn, setDrawn] = useState({ key: resetKey, zoom: minZoom });
+    const zoom = keyed.key === resetKey ? keyed.zoom : minZoom;
+    const drawnZoom = drawn.key === resetKey ? drawn.zoom : minZoom;
+    const anchor = useRef(null);
+    const shown = useRef(zoom);
+    useLayoutEffect(() => {
+        const from = shown.current;
+        shown.current = zoom;
+        const element = box.current;
+        const sheet = page.current;
+        const spot = anchor.current;
+        anchor.current = null;
+        if (!element || !sheet || !spot || from === zoom)
+            return;
+        const shift = anchorShift(spot.before, sheet.getBoundingClientRect(), spot.point);
+        scrollChainBy(element, 'x', shift.x);
+        scrollChainBy(element, 'y', shift.y);
+    }, [zoom]);
+    useEffect(() => {
+        const timer = setTimeout(() => setDrawn({ key: resetKey, zoom }), zoomSettleMs);
+        return () => clearTimeout(timer);
+    }, [resetKey, zoom]);
+    function zoomTo(next, at) {
+        const element = box.current;
+        const sheet = page.current;
+        const target = clampZoom(next);
+        if (target === shown.current)
+            return;
+        if (element && sheet) {
+            anchor.current = {
+                point: at ?? visibleMiddle(element),
+                before: sheet.getBoundingClientRect(),
+            };
+        }
+        setKeyed({ key: resetKey, zoom: target });
+    }
+    return { box, page, zoom, drawnZoom, zoomTo };
+}

package/dist/components/document-viewer/zoom.d.ts

@@ -0,0 +1,29 @@
+/** Fit width is 1; a page can be drawn up to four times as wide. */
+export declare const minZoom = 1;
+export declare const maxZoom = 4;
+/** One key press's step: a quarter of the fitted width. */
+export declare const zoomStep = 0.25;
+/** A zoom kept between fit width and the most, to two decimals. */
+export declare function clampZoom(zoom: number): number;
+/** The zoom a key asks for on the page: `+` or `=` in, `-` out, `0` fit. */
+export declare function zoomForKey(key: string, zoom: number): number | null;
+/** A box on the screen, as `getBoundingClientRect` gives it. */
+export type ScreenBox = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/**
+ * How far to scroll, across and down, so the spot of the page that was
+ * under `point` before a zoom (the page at `before`) is under it again
+ * after (the page at `after`). Both boxes are the page's own, so the
+ * stage's padding and where the page sits on the screen count.
+ */
+export declare function anchorShift(before: ScreenBox, after: ScreenBox, point: {
+    x: number;
+    y: number;
+}): {
+    x: number;
+    y: number;
+};

package/dist/components/document-viewer/zoom.js

@@ -0,0 +1,37 @@
+/** Fit width is 1; a page can be drawn up to four times as wide. */
+export const minZoom = 1;
+export const maxZoom = 4;
+/** One key press's step: a quarter of the fitted width. */
+export const zoomStep = 0.25;
+/** A zoom kept between fit width and the most, to two decimals. */
+export function clampZoom(zoom) {
+    if (!Number.isFinite(zoom))
+        return minZoom;
+    return Math.round(Math.min(maxZoom, Math.max(minZoom, zoom)) * 100) / 100;
+}
+/** The zoom a key asks for on the page: `+` or `=` in, `-` out, `0` fit. */
+export function zoomForKey(key, zoom) {
+    if (key === '+' || key === '=')
+        return clampZoom(zoom + zoomStep);
+    if (key === '-' || key === '_')
+        return clampZoom(zoom - zoomStep);
+    if (key === '0')
+        return minZoom;
+    return null;
+}
+/**
+ * How far to scroll, across and down, so the spot of the page that was
+ * under `point` before a zoom (the page at `before`) is under it again
+ * after (the page at `after`). Both boxes are the page's own, so the
+ * stage's padding and where the page sits on the screen count.
+ */
+export function anchorShift(before, after, point) {
+    if (before.width <= 0 || before.height <= 0)
+        return { x: 0, y: 0 };
+    const across = (point.x - before.left) / before.width;
+    const down = (point.y - before.top) / before.height;
+    return {
+        x: after.left + across * after.width - point.x,
+        y: after.top + down * after.height - point.y,
+    };
+}

package/dist/components/file-field/file-field-checks.d.ts

@@ -0,0 +1,13 @@
+import type { FileFieldValue } from '../FileField.js';
+/**
+ * Fails closed on a FileField it cannot name or show: an empty label,
+ * choose or change words, a blank drop hint, or a chosen file with no name,
+ * a blank detail or a blank preview address.
+ */
+export declare function assertFileField(props: {
+    label: string;
+    chooseLabel: string;
+    changeLabel: string;
+    dropLabel: string | undefined;
+    value: FileFieldValue | null;
+}): void;

package/dist/components/file-field/file-field-checks.js

@@ -0,0 +1,23 @@
+function isBlank(text) {
+    return typeof text !== 'string' || text.trim() === '';
+}
+/**
+ * Fails closed on a FileField it cannot name or show: an empty label,
+ * choose or change words, a blank drop hint, or a chosen file with no name,
+ * a blank detail or a blank preview address.
+ */
+export function assertFileField(props) {
+    for (const key of ['label', 'chooseLabel', 'changeLabel'])
+        if (isBlank(props[key]))
+            throw new RangeError(`FileField ${key} must be non-empty text`);
+    if (props.dropLabel !== undefined && isBlank(props.dropLabel))
+        throw new RangeError('FileField dropLabel must be non-empty text');
+    if (props.value === null)
+        return;
+    if (isBlank(props.value.name))
+        throw new RangeError('FileField value name must be non-empty text');
+    if (props.value.detail !== undefined && isBlank(props.value.detail))
+        throw new RangeError('FileField value detail must be non-empty text');
+    if (props.value.preview !== undefined && isBlank(props.value.preview))
+        throw new RangeError('FileField value preview must be an image address');
+}

package/dist/components/file-field/use-file-drop.d.ts

@@ -0,0 +1,34 @@
+import { type DragEvent } from 'react';
+/**
+ * A disabled field still keeps the browser from opening a file dropped on
+ * it, and shows no copy cursor: the drop does nothing.
+ */
+declare function refuse(event: DragEvent): void;
+/**
+ * A drop target for one file: whether files are dragged over it, and the
+ * handlers that keep the browser from opening a dropped file and hand the
+ * first one to `onFile`. A counter follows the drag through the target's
+ * children, whose enter and leave events would otherwise flicker it. While
+ * `disabled`, a dropped file is refused and a drag in progress ends.
+ */
+export declare function useFileDrop({ disabled, onFile, }: {
+    disabled: boolean;
+    onFile: (file: File) => void;
+}): {
+    dragging: boolean;
+    handlers: {
+        onDragOver: typeof refuse;
+        onDragLeave: (event: DragEvent) => void;
+        onDrop: (event: DragEvent) => void;
+        onDragEnter?: undefined;
+    };
+} | {
+    dragging: boolean;
+    handlers: {
+        onDragEnter: (event: DragEvent) => void;
+        onDragOver: (event: DragEvent) => void;
+        onDragLeave: (event: DragEvent) => void;
+        onDrop: (event: DragEvent) => void;
+    };
+};
+export {};

package/dist/components/file-field/use-file-drop.js

@@ -0,0 +1,78 @@
+import { useRef, useState } from 'react';
+/** Whether a drag carries files, not text or a link dragged from the page. */
+function carriesFiles(event) {
+    return Array.from(event.dataTransfer?.types ?? []).includes('Files');
+}
+/**
+ * A disabled field still keeps the browser from opening a file dropped on
+ * it, and shows no copy cursor: the drop does nothing.
+ */
+function refuse(event) {
+    if (!carriesFiles(event))
+        return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'none';
+}
+/**
+ * A drop target for one file: whether files are dragged over it, and the
+ * handlers that keep the browser from opening a dropped file and hand the
+ * first one to `onFile`. A counter follows the drag through the target's
+ * children, whose enter and leave events would otherwise flicker it. While
+ * `disabled`, a dropped file is refused and a drag in progress ends.
+ */
+export function useFileDrop({ disabled, onFile, }) {
+    const depth = useRef(0);
+    const [dragging, setDragging] = useState(false);
+    // A drag that began before the field was disabled ends here too, so its
+    // tint is gone when the field is enabled again.
+    const stop = (event) => {
+        refuse(event);
+        depth.current = 0;
+        setDragging(false);
+    };
+    if (disabled)
+        return {
+            dragging: false,
+            handlers: {
+                onDragOver: refuse,
+                // Leaving or dropping ends a drag that began while enabled.
+                onDragLeave: stop,
+                onDrop: stop,
+            },
+        };
+    return {
+        dragging,
+        handlers: {
+            onDragEnter: (event) => {
+                if (!carriesFiles(event))
+                    return;
+                event.preventDefault();
+                depth.current += 1;
+                setDragging(true);
+            },
+            onDragOver: (event) => {
+                if (!carriesFiles(event))
+                    return;
+                event.preventDefault();
+                event.dataTransfer.dropEffect = 'copy';
+            },
+            onDragLeave: (event) => {
+                if (!carriesFiles(event))
+                    return;
+                depth.current = Math.max(0, depth.current - 1);
+                if (depth.current === 0)
+                    setDragging(false);
+            },
+            onDrop: (event) => {
+                if (!carriesFiles(event))
+                    return;
+                event.preventDefault();
+                depth.current = 0;
+                setDragging(false);
+                const file = event.dataTransfer.files[0];
+                if (file)
+                    onFile(file);
+            },
+        },
+    };
+}

package/dist/components/file-field/use-swap-focus.d.ts

@@ -0,0 +1,15 @@
+import { type FocusEvent, type RefObject } from 'react';
+/**
+ * Keeps focus when the field swaps its zone for the chosen row (or back).
+ * The frame's focus handlers note whether focus is in the field. A blur
+ * that leaves the button in the page, with the window still focused, means
+ * the person moved on; one whose button was removed is the swap; and one
+ * while the window is away is the system picker. After a swap, if focus
+ * was in the field and is now nowhere, it moves to the button now there.
+ * Focus the person moved elsewhere (an answer that comes later) is never
+ * taken back.
+ */
+export declare function useSwapFocus(button: RefObject<HTMLElement | null>, chosen: boolean): {
+    onFocus: () => void;
+    onBlur: (event: FocusEvent<HTMLElement>) => void;
+};

package/dist/components/file-field/use-swap-focus.js

@@ -0,0 +1,40 @@
+'use client';
+import { useLayoutEffect, useRef, } from 'react';
+/**
+ * Keeps focus when the field swaps its zone for the chosen row (or back).
+ * The frame's focus handlers note whether focus is in the field. A blur
+ * that leaves the button in the page, with the window still focused, means
+ * the person moved on; one whose button was removed is the swap; and one
+ * while the window is away is the system picker. After a swap, if focus
+ * was in the field and is now nowhere, it moves to the button now there.
+ * Focus the person moved elsewhere (an answer that comes later) is never
+ * taken back.
+ */
+export function useSwapFocus(button, chosen) {
+    const inside = useRef(false);
+    useLayoutEffect(() => {
+        if (!inside.current)
+            return;
+        const active = document.activeElement;
+        if (active === null || active === document.body)
+            button.current?.focus();
+    }, [button, chosen]);
+    return {
+        onFocus: () => {
+            inside.current = true;
+        },
+        onBlur: (event) => {
+            const next = event.relatedTarget;
+            if (next instanceof Node && event.currentTarget.contains(next))
+                return;
+            const left = event.target;
+            // Removed by the swap, the button is gone by the next microtask; and
+            // while the system picker is open the window itself has lost focus,
+            // which is not the person leaving the field.
+            queueMicrotask(() => {
+                if (left.isConnected && document.hasFocus())
+                    inside.current = false;
+            });
+        },
+    };
+}

package/dist/components/filter-chips/FilterChip.js

@@ -13,7 +13,7 @@ function ChipCount({ count, appearance, }) {
 }
 /** One chip: a native radio or checkbox under its face. */
 export function FilterChip({ option, name, type, checked, required, tabStopHere, countAppearance, onCheckedChange, }) {
-    return (_jsxs("label", { className: cx('sw-filter-chip', option.count === 0 && 'sw-filter-chip-quiet'), children: [_jsx("input", { checked: checked, className: "sw-filter-chip-input", disabled: option.disabled, name: name, onChange: (event) => {
+    return (_jsxs("label", { className: cx('sw-filter-chip', option.count === 0 && 'sw-filter-chip-quiet', option.tone === 'warning' && 'sw-filter-chip-warning'), children: [_jsx("input", { checked: checked, className: "sw-filter-chip-input", disabled: option.disabled, name: name, onChange: (event) => {
                     if (!option.disabled)
                         onCheckedChange(event.currentTarget.checked);
                 }, required: required, tabIndex: tabStopHere ? tabStop : undefined, type: type, value: option.value }), _jsxs("span", { className: "sw-filter-chip-face", children: [option.label, option.count === undefined ? null : (_jsx(ChipCount, { appearance: countAppearance, count: option.count }))] })] }));

package/dist/components/filter-chips/options.d.ts

@@ -1,9 +1,19 @@
 import { type RequiredMark } from '../FieldLabelText.js';
+/**
+ * A chip's colour while it is not chosen: `neutral` (the default), the
+ * glass chip; `warning`, the warning tint with its words in the warning
+ * ink, for a choice that shows what needs a look ("Missing a
+ * translation"). Its words must say so; the tint only draws the eye. A
+ * chosen chip is the accent, whatever its tone.
+ */
+export declare const filterChipTones: readonly ["neutral", "warning"];
+export type FilterChipTone = (typeof filterChipTones)[number];
 export type FilterChipOption = {
     value: string;
     label: string;
     count?: number;
     disabled?: boolean;
+    tone?: FilterChipTone;
 };
 /**
  * How a chip's count is drawn: `figure` (the default), a muted tabular

package/dist/components/filter-chips/options.js

@@ -1,3 +1,11 @@
+/**
+ * A chip's colour while it is not chosen: `neutral` (the default), the
+ * glass chip; `warning`, the warning tint with its words in the warning
+ * ink, for a choice that shows what needs a look ("Missing a
+ * translation"). Its words must say so; the tint only draws the eye. A
+ * chosen chip is the accent, whatever its tone.
+ */
+export const filterChipTones = ['neutral', 'warning'];
 /**
  * How a chip's count is drawn: `figure` (the default), a muted tabular
  * figure after a space; `inline`, the label's own words and type, after a

package/dist/components/filter-chips/validate.d.ts

@@ -2,8 +2,8 @@ import { type FilterChipsProps } from './options.js';
 /**
  * Fails closed on chips it cannot draw: an empty label, no options, blank
  * or repeated values, a chosen value that is no option, a count that is
- * not a whole number from 0, an unknown count appearance or overflow, and
- * a multiple choice asked to be required or given a value that is not a
- * list.
+ * not a whole number from 0, an unknown chip tone, count appearance or
+ * overflow, and a multiple choice asked to be required or given a value
+ * that is not a list.
  */
 export declare function assertFilterChips(props: FilterChipsProps): void;

package/dist/components/filter-chips/validate.js

@@ -1,5 +1,5 @@
 import { assertRequiredMark } from '../FieldLabelText.js';
-import { filterChipCountAppearances, filterChipsOverflows, } from './options.js';
+import { filterChipCountAppearances, filterChipsOverflows, filterChipTones, } from './options.js';
 function isCount(count) {
     return count === undefined || (Number.isInteger(count) && count >= 0);
 }
@@ -11,9 +11,9 @@ function chosenValues(props) {
 /**
  * Fails closed on chips it cannot draw: an empty label, no options, blank
  * or repeated values, a chosen value that is no option, a count that is
- * not a whole number from 0, an unknown count appearance or overflow, and
- * a multiple choice asked to be required or given a value that is not a
- * list.
+ * not a whole number from 0, an unknown chip tone, count appearance or
+ * overflow, and a multiple choice asked to be required or given a value
+ * that is not a list.
  */
 export function assertFilterChips(props) {
     const { label, options } = props;
@@ -39,6 +39,10 @@ export function assertFilterChips(props) {
             : '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 unknownTone = options.find((option) => option.tone !== undefined &&
+        !filterChipTones.includes(option.tone));
+    if (unknownTone)
+        throw new RangeError(`Unknown FilterChips option tone: ${String(unknownTone.tone)}`);
     const countAppearance = props.countAppearance ?? 'figure';
     if (!filterChipCountAppearances.includes(countAppearance))
         throw new RangeError(`Unknown FilterChips countAppearance: ${String(countAppearance)}`);

package/dist/components/list/ListRowContent.d.ts

@@ -14,9 +14,16 @@ export type ListRowContentProps = {
     tone: ListRowTone;
     titleAppearance: ListRowTitleAppearance;
     accessory: ListRowAccessory;
+    /** The unread words; the dot shows while they are given. */
+    unreadLabel?: string;
+    tag?: ReactNode;
+    /** One line each for the title and detail, cut with "…", the words in a tooltip. */
+    truncate: boolean;
 };
 /**
  * A list row's parts in reading order: the hidden leading mark, the title
- * over its detail, the value over its detail, then the chevron or check.
+ * (with the unread dot and its hidden words) over its detail, the value
+ * over its detail, the tag, then the chevron or check. A truncated row
+ * sets its title's words in their own box, so the "…" never hides the dot.
  */
-export declare function ListRowContent({ id, title, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, }: ListRowContentProps): import("react").JSX.Element;
+export declare function ListRowContent({ id, title, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, unreadLabel, tag, truncate, }: ListRowContentProps): import("react").JSX.Element;

package/dist/components/list/ListRowContent.js

@@ -2,10 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { cx } from '../../class-names.js';
 import { Badge } from '../Badge.js';
 import { ListRowAccessoryMark } from './ListRowAccessoryMark.js';
+import { hasSlot } from '../slot.js';
 /**
  * A list row's parts in reading order: the hidden leading mark, the title
- * over its detail, the value over its detail, then the chevron or check.
+ * (with the unread dot and its hidden words) over its detail, the value
+ * over its detail, the tag, then the chevron or check. A truncated row
+ * sets its title's words in their own box, so the "…" never hides the dot.
  */
-export function ListRowContent({ id, title, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, }) {
-    return (_jsxs(_Fragment, { children: [leading === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-list-row-leading", children: leading })), _jsxs("span", { className: "sw-list-row-label", children: [_jsx("span", { className: cx('sw-list-row-title', titleAppearance === 'plain' && 'sw-list-row-title-plain', tone === 'danger' && 'sw-list-row-title-danger'), id: `${id}-title`, children: title }), detail ? (_jsx("span", { className: "sw-list-row-detail", id: `${id}-detail`, children: detail })) : null] }), value === undefined ? null : (_jsxs("span", { className: "sw-list-row-end", children: [_jsx("span", { className: cx('sw-list-row-value', valueTone && `sw-list-row-value-${valueTone}`), id: `${id}-value`, children: valueBadge ? _jsx(Badge, { tone: valueBadge, children: value }) : value }), valueDetail ? (_jsx("span", { className: "sw-list-row-value-detail", id: `${id}-value-detail`, children: valueDetail })) : null] })), _jsx(ListRowAccessoryMark, { kind: accessory })] }));
+export function ListRowContent({ id, title, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, unreadLabel, tag, truncate, }) {
+    return (_jsxs(_Fragment, { children: [!hasSlot(leading) ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-list-row-leading", children: leading })), _jsxs("span", { className: "sw-list-row-label", children: [_jsxs("span", { className: cx('sw-list-row-title', titleAppearance === 'plain' && 'sw-list-row-title-plain', tone === 'danger' && 'sw-list-row-title-danger'), id: `${id}-title`, children: [truncate ? (_jsx("span", { className: "sw-list-row-title-text", title: title, children: title })) : (title), unreadLabel === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-list-row-unread" }))] }), unreadLabel === undefined ? null : (_jsx("span", { className: "sw-sr-only", id: `${id}-unread`, children: unreadLabel })), detail ? (_jsx("span", { className: "sw-list-row-detail", id: `${id}-detail`, title: truncate ? detail : undefined, children: detail })) : null] }), value === undefined ? null : (_jsxs("span", { className: "sw-list-row-end", children: [_jsx("span", { className: cx('sw-list-row-value', valueTone && `sw-list-row-value-${valueTone}`), id: `${id}-value`, children: valueBadge ? _jsx(Badge, { tone: valueBadge, children: value }) : value }), valueDetail ? (_jsx("span", { className: "sw-list-row-value-detail", id: `${id}-value-detail`, children: valueDetail })) : null] })), !hasSlot(tag) ? null : (_jsx("span", { className: "sw-list-row-tag", id: `${id}-tag`, children: tag })), _jsx(ListRowAccessoryMark, { kind: accessory })] }));
 }

package/dist/components/list/ListRowItem.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+/**
+ * A row's list item: an `li` in a ListGroup's list, a `div` elsewhere. A
+ * row with an `action` holds that control after the row, a sibling of the
+ * row's button or link, so it is never inside the row's press area.
+ */
+export declare function ListRowItem({ action, children, }: {
+    action: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/list/ListRowItem.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { cx } from '../../class-names.js';
+import { ListRowContainer } from './list-row-container.js';
+import { hasSlot } from '../slot.js';
+/**
+ * A row's list item: an `li` in a ListGroup's list, a `div` elsewhere. A
+ * row with an `action` holds that control after the row, a sibling of the
+ * row's button or link, so it is never inside the row's press area.
+ */
+export function ListRowItem({ action, children, }) {
+    const container = useContext(ListRowContainer);
+    const hasAction = hasSlot(action);
+    const content = (_jsxs(_Fragment, { children: [children, hasAction ? _jsx("div", { className: "sw-list-row-action", children: action }) : null] }));
+    const className = cx('sw-list-item', hasAction && 'sw-list-item-action');
+    return container === 'li' ? (_jsx("li", { className: className, children: content })) : (_jsx("div", { className: className, children: content }));
+}

package/dist/components/list/row-naming.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+/**
+ * A pressable row's name (its title, the unread words and its value) and
+ * description (its detail lines and its tag), by the ids its parts carry.
+ */
+export declare function rowNaming(id: string, row: {
+    'aria-label'?: string;
+    value?: string;
+    detail?: string;
+    valueDetail?: string;
+    unread: boolean;
+    tag?: ReactNode;
+}): {
+    'aria-label': string | undefined;
+    'aria-labelledby': string | undefined;
+    'aria-describedby': string | undefined;
+};

package/dist/components/list/row-naming.js

@@ -0,0 +1,19 @@
+import { hasSlot } from '../slot.js';
+function ids(...parts) {
+    const joined = parts.filter(Boolean).join(' ');
+    return joined === '' ? undefined : joined;
+}
+/**
+ * A pressable row's name (its title, the unread words and its value) and
+ * description (its detail lines and its tag), by the ids its parts carry.
+ */
+export function rowNaming(id, row) {
+    const hasTag = hasSlot(row.tag);
+    return {
+        'aria-label': row['aria-label'],
+        'aria-labelledby': row['aria-label']
+            ? undefined
+            : ids(`${id}-title`, row.unread && `${id}-unread`, row.value !== undefined && `${id}-value`),
+        'aria-describedby': ids(Boolean(row.detail) && `${id}-detail`, Boolean(row.valueDetail) && `${id}-value-detail`, hasTag && `${id}-tag`),
+    };
+}

package/dist/components/markdown/markdown-limits.d.ts

@@ -0,0 +1,14 @@
+/** How many quotes and lists the view draws inside one another. */
+export declare const maxNesting = 16;
+/**
+ * How deep the parser reads (a quote is one level, a list and its item
+ * two). markdown-it stops reading a block that nests deeper (its words are
+ * lost, and reported as `limit`). Its work on runs of link and image
+ * openers grows with this cap, so it stays low: 128 keeps 60-deep lists
+ * and reads 25,000 `![` in about 0.1 s.
+ */
+export declare const maxParseNesting = 128;
+/** The longest excerpt an omission keeps. */
+export declare const maxExcerpt = 80;
+/** How many omissions the reading lists; the counts keep the rest. */
+export declare const maxOmissionsListed = 100;

package/dist/components/markdown/markdown-limits.js

@@ -0,0 +1,14 @@
+/** How many quotes and lists the view draws inside one another. */
+export const maxNesting = 16;
+/**
+ * How deep the parser reads (a quote is one level, a list and its item
+ * two). markdown-it stops reading a block that nests deeper (its words are
+ * lost, and reported as `limit`). Its work on runs of link and image
+ * openers grows with this cap, so it stays low: 128 keeps 60-deep lists
+ * and reads 25,000 `![` in about 0.1 s.
+ */
+export const maxParseNesting = 128;
+/** The longest excerpt an omission keeps. */
+export const maxExcerpt = 80;
+/** How many omissions the reading lists; the counts keep the rest. */
+export const maxOmissionsListed = 100;