@sincpro/web-ui 1.7.0 → 1.7.1

package/dist/components/lines/LineItems.js

@@ -4,7 +4,7 @@ import { commitDraft, filterLines, planRemoval, } from "./lines.js";
 import { useColumnControl, } from "../listing/columns.js";
 import { ColumnsMenu } from "../listing/ColumnsMenu.js";
 import { fillCopy, useUiCopy } from "../../foundations/copy.js";
-import { FieldIdsContext } from "../../foundations/form.js";
+import { FieldBoundary, FieldIdsContext } from "../../foundations/form.js";
 import { useFormMode } from "../../foundations/form.js";
 import { Button, IconButton } from "../../primitives/button/Button.js";
 import { SearchField } from "../../primitives/choice/SearchField.js";
@@ -228,7 +228,14 @@ export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange
         ...(c.stack === undefined ? {} : { stack: c.stack }),
         ...(c.brief === undefined ? {} : { brief: c.brief }),
         render: (line) => {
-            const drawn = c.cell === undefined ? plain(c.value(line)) : c.cell(line);
+            /* `cell` draws it; without one, `text` is how it READS — the raw `value` is what the
+               search and the sort compare («3» is a unit id; «caja ×12» is what it says). The
+               same order `DataTable` follows. */
+            const drawn = c.cell !== undefined
+                ? c.cell(line)
+                : c.text !== undefined
+                    ? c.text(line)
+                    : plain(c.value(line));
             /* An amount never breaks in two: «Bs.» over «12.500,00» reads as two values. */
             return c.numeric === true ? _jsx("span", { className: "whitespace-nowrap", children: drawn }) : drawn;
         },
@@ -273,47 +280,50 @@ export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange
             shown: shown.length.toLocaleString(copy.locale),
             count: lineCount.toLocaleString(copy.locale),
         });
-    return (_jsxs("section", { ref: root, "aria-label": copy.lineItems.table, className: "flex min-w-0 flex-col gap-4", children: [lines.length === 0 && !canAdd ? (
-            /* Said, with its way out: an empty document is a question («what is sold
-               here?»), not a blank box. In read mode there is no way out to offer. */
-            _jsx(Empty, { align: "start", sentence: copy.lines.empty, action: addButton ?? undefined })) : (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 px-1", children: [searchable ? (_jsxs("div", { className: "w-full max-w-(--container-search) min-w-0 flex-1", children: [_jsx("span", { id: searchLabelId, className: "sr-only", children: copy.lines.search }), _jsx(FieldIdsContext.Provider, { value: {
-                                            id: `${searchLabelId}-input`,
-                                            labelId: searchLabelId,
-                                            describedBy: undefined,
-                                            invalid: false,
-                                        }, children: _jsx(SearchField, { value: query, onChange: setQuery, placeholder: copy.lines.search }) })] })) : null, _jsx("span", { className: "text-meta text-muted tabular-nums", "aria-live": "polite", children: count }), columnControl.hasOptional || addButton !== null ? (_jsxs("span", { className: "ml-auto flex items-center gap-2", children: [_jsx(ColumnsMenu, { control: columnControl }), addButton] })) : null] }), _jsx(EditableTable, { rows: shown, columns: tableColumns, getRowId: getLineId, empty: lines.length === 0
-                            ? copy.lines.empty
-                            : fillCopy(copy.lineItems.noMatch, { query: query.trim() }), layout: layout, ...(inline ? { onAdd: () => addInline(), addLabel: copy.lines.add } : {}), ...(bandAdds.length === 0 ? {} : { adds: bandAdds }), ...(bands === undefined ? {} : { bands }), ...(flag === undefined ? {} : { flag }), ...(cellState === undefined ? {} : { cellState }), ...(rowState === undefined ? {} : { rowState }), ...(onReorder === undefined || read ? {} : { onReorder }), ...(inPlace && onRemove !== undefined
-                            ? /* A blank row nobody wrote in is taken back without a notice: nobody
-                                 removed anything, so there is nothing to undo. */
-                                { onDiscard: onRemove }
-                            : {}), ...(canEdit
-                            ? {
-                                onOpen: (id) => {
-                                    const line = lines.find((l) => getLineId(l) === id);
-                                    /* A read-only line opens no form to change it. */
-                                    if (line !== undefined && rowState?.(line)?.readonly !== true) {
-                                        openLine(id, line);
-                                    }
-                                },
-                            }
-                            : {}), ...(canChange && columns.some((c) => c.edit !== undefined)
-                            ? { onChange: (id, next) => onChange?.(id, next) }
-                            : {}) })] })), totals === undefined || ("length" in totals && totals.length === 0) ? null : (
-            /* Inset like the table's cells, so the last figure lines up with the amounts. */
-            _jsx("div", { className: "px-4", children: "length" in totals ? _jsx(Totals, { rows: totals }) : _jsx(Totals, { ...totals }) })), editor === undefined || session === null ? null : (_jsx(Dialog, { open: open, width: "sm", title: session.id === null ? copy.lineItems.newLine : copy.lines.edit, ...(context === undefined ? {} : { context }), ...(session.id === null ? {} : { subtitle: labelOf(session.draft) }), onClose: () => setOpen(false), footer: _jsxs(_Fragment, { children: [session.id === null || !canRemove ? null : (
-                        /* Apart, at the other end from «Listo»: removing is not the way the
-                           form is meant to close. */
-                        _jsx("span", { className: "mr-auto", children: _jsx(IconButton, { icon: Trash2, label: copy.lines.remove, tone: "danger", onClick: () => {
-                                    const line = lines.find((l) => getLineId(l) === session.id);
-                                    setOpen(false);
-                                    if (line !== undefined)
-                                        remove(line);
-                                } }) })), _jsx(Button, { role: "ghost", size: "sm", onClick: () => setOpen(false), children: copy.dialog.cancel }), _jsx(Button, { role: "primary", size: "sm", type: "submit", form: formId, children: copy.lines.done })] }), children: _jsx("form", { id: formId, noValidate: true, onSubmit: (e) => {
-                        e.preventDefault();
-                        save();
-                    }, className: "flex flex-col gap-3", children: editor(session.draft, setDraft, {
-                        tried: session.tried,
-                        isNew: session.id === null,
-                    }) }) }))] }));
+    return (
+    /* A collection is many controls, each named by its column: no enclosing `Field`
+       reaches inside (see `FieldBoundary`). */
+    _jsx(FieldBoundary, { children: _jsxs("section", { ref: root, "aria-label": copy.lineItems.table, className: "flex min-w-0 flex-col gap-4", children: [lines.length === 0 && !canAdd ? (
+                /* Said, with its way out: an empty document is a question («what is sold
+                 here?»), not a blank box. In read mode there is no way out to offer. */
+                _jsx(Empty, { align: "start", sentence: copy.lines.empty, action: addButton ?? undefined })) : (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 px-1", children: [searchable ? (_jsxs("div", { className: "w-full max-w-(--container-search) min-w-0 flex-1", children: [_jsx("span", { id: searchLabelId, className: "sr-only", children: copy.lines.search }), _jsx(FieldIdsContext.Provider, { value: {
+                                                id: `${searchLabelId}-input`,
+                                                labelId: searchLabelId,
+                                                describedBy: undefined,
+                                                invalid: false,
+                                            }, children: _jsx(SearchField, { value: query, onChange: setQuery, placeholder: copy.lines.search }) })] })) : null, _jsx("span", { className: "text-meta text-muted tabular-nums", "aria-live": "polite", children: count }), columnControl.hasOptional || addButton !== null ? (_jsxs("span", { className: "ml-auto flex items-center gap-2", children: [_jsx(ColumnsMenu, { control: columnControl }), addButton] })) : null] }), _jsx(EditableTable, { rows: shown, columns: tableColumns, getRowId: getLineId, empty: lines.length === 0
+                                ? copy.lines.empty
+                                : fillCopy(copy.lineItems.noMatch, { query: query.trim() }), layout: layout, ...(inline ? { onAdd: () => addInline(), addLabel: copy.lines.add } : {}), ...(bandAdds.length === 0 ? {} : { adds: bandAdds }), ...(bands === undefined ? {} : { bands }), ...(flag === undefined ? {} : { flag }), ...(cellState === undefined ? {} : { cellState }), ...(rowState === undefined ? {} : { rowState }), ...(onReorder === undefined || read ? {} : { onReorder }), ...(inPlace && onRemove !== undefined
+                                ? /* A blank row nobody wrote in is taken back without a notice: nobody
+                                   removed anything, so there is nothing to undo. */
+                                    { onDiscard: onRemove }
+                                : {}), ...(canEdit
+                                ? {
+                                    onOpen: (id) => {
+                                        const line = lines.find((l) => getLineId(l) === id);
+                                        /* A read-only line opens no form to change it. */
+                                        if (line !== undefined && rowState?.(line)?.readonly !== true) {
+                                            openLine(id, line);
+                                        }
+                                    },
+                                }
+                                : {}), ...(canChange && columns.some((c) => c.edit !== undefined)
+                                ? { onChange: (id, next) => onChange?.(id, next) }
+                                : {}) })] })), totals === undefined || ("length" in totals && totals.length === 0) ? null : (
+                /* Inset like the table's cells, so the last figure lines up with the amounts. */
+                _jsx("div", { className: "px-4", children: "length" in totals ? _jsx(Totals, { rows: totals }) : _jsx(Totals, { ...totals }) })), editor === undefined || session === null ? null : (_jsx(Dialog, { open: open, width: "sm", title: session.id === null ? copy.lineItems.newLine : copy.lines.edit, ...(context === undefined ? {} : { context }), ...(session.id === null ? {} : { subtitle: labelOf(session.draft) }), onClose: () => setOpen(false), footer: _jsxs(_Fragment, { children: [session.id === null || !canRemove ? null : (
+                            /* Apart, at the other end from «Listo»: removing is not the way the
+                             form is meant to close. */
+                            _jsx("span", { className: "mr-auto", children: _jsx(IconButton, { icon: Trash2, label: copy.lines.remove, tone: "danger", onClick: () => {
+                                        const line = lines.find((l) => getLineId(l) === session.id);
+                                        setOpen(false);
+                                        if (line !== undefined)
+                                            remove(line);
+                                    } }) })), _jsx(Button, { role: "ghost", size: "sm", onClick: () => setOpen(false), children: copy.dialog.cancel }), _jsx(Button, { role: "primary", size: "sm", type: "submit", form: formId, children: copy.lines.done })] }), children: _jsx("form", { id: formId, noValidate: true, onSubmit: (e) => {
+                            e.preventDefault();
+                            save();
+                        }, className: "flex flex-col gap-3", children: editor(session.draft, setDraft, {
+                            tried: session.tried,
+                            isNew: session.id === null,
+                        }) }) }))] }) }));
 }

package/dist/foundations/form.d.ts

@@ -34,6 +34,19 @@ export type ControlState = {
     invalid?: boolean;
 };
 export declare const ControlStateContext: import("react").Context<ControlState | null>;
+/**
+ * Where a `Field` stops reaching: what is inside belongs to no field.
+ *
+ * Context: a `Field` hands its id and its label to the control inside it through context —
+ * and context goes all the way down. An editable table placed inside a field (the lines of a
+ * one2many under its label) gave EVERY cell's control the field's id and `aria-labelledby`:
+ * forty inputs with the same id, all named «Líneas». A collection is many controls, each
+ * named by its column, so the tables put this around themselves; an application's own
+ * composite control does the same.
+ */
+export declare function FieldBoundary({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
 /** The ids of the enclosing `Field` — or, outside one, the state of the place the control
  *  sits in (a cell) — resolved against the control's own props. */
 export declare function useFieldIds(own: {
@@ -46,6 +59,18 @@ export declare function useFieldIds(own: {
     describedBy: string | undefined;
     invalid: boolean;
 };
+/**
+ * The `aria-label` a control puts on itself: none inside a `Field` — the field's label names
+ * it — and outside one the control's own, or as a last resort its placeholder (what a browser
+ * reads for a bare `<input placeholder>` anyway, so a control outside a form is never
+ * nameless).
+ *
+ * Context: a control inside a `Field` used to keep its `aria-label` too. With both, React Aria
+ * names the control by the label AND itself («Cliente Cliente», «Cantidad cantidad»), so the
+ * name was read twice. The field wins: an `aria-label` is for a control that has no label
+ * on screen — a table cell, a search box — and inside a field it is ignored.
+ */
+export declare function controlName(labelledBy: string | undefined, ariaLabel: string | undefined, fallback?: string): string | undefined;
 export type FormMode = "edit" | "read";
 export declare function FormModeProvider({ value, children, }: {
     value: FormMode;

package/dist/foundations/form.js

@@ -3,6 +3,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 export const FieldIdsContext = createContext(null);
 export const ControlStateContext = createContext(null);
+/**
+ * Where a `Field` stops reaching: what is inside belongs to no field.
+ *
+ * Context: a `Field` hands its id and its label to the control inside it through context —
+ * and context goes all the way down. An editable table placed inside a field (the lines of a
+ * one2many under its label) gave EVERY cell's control the field's id and `aria-labelledby`:
+ * forty inputs with the same id, all named «Líneas». A collection is many controls, each
+ * named by its column, so the tables put this around themselves; an application's own
+ * composite control does the same.
+ */
+export function FieldBoundary({ children }) {
+    return _jsx(FieldIdsContext.Provider, { value: null, children: children });
+}
 /** The ids of the enclosing `Field` — or, outside one, the state of the place the control
  *  sits in (a cell) — resolved against the control's own props. */
 export function useFieldIds(own) {
@@ -15,6 +28,20 @@ export function useFieldIds(own) {
         invalid: own.invalid ?? field?.invalid ?? place?.invalid ?? false,
     };
 }
+/**
+ * The `aria-label` a control puts on itself: none inside a `Field` — the field's label names
+ * it — and outside one the control's own, or as a last resort its placeholder (what a browser
+ * reads for a bare `<input placeholder>` anyway, so a control outside a form is never
+ * nameless).
+ *
+ * Context: a control inside a `Field` used to keep its `aria-label` too. With both, React Aria
+ * names the control by the label AND itself («Cliente Cliente», «Cantidad cantidad»), so the
+ * name was read twice. The field wins: an `aria-label` is for a control that has no label
+ * on screen — a table cell, a search box — and inside a field it is ignored.
+ */
+export function controlName(labelledBy, ariaLabel, fallback) {
+    return labelledBy === undefined ? (ariaLabel ?? fallback) : undefined;
+}
 const Ctx = createContext("edit");
 export function FormModeProvider({ value, children, }) {
     return _jsx(Ctx.Provider, { value: value, children: children });

package/dist/foundations/index.d.ts

@@ -1,7 +1,7 @@
 export { type CopyCatalog, type CopyOverride, createCopy, mergeCopyOver, } from "./catalog.js";
 export { currentCopy, currentCopyLocale, ENGLISH_COPY, fillCopy, installCopy, mergeCopy, type UiCopy, type UiCopyOverride, UiCopyProvider, useUiCopy, } from "./copy.js";
 export { byDensity, type Density, DensityProvider, useDensity, } from "./density.js";
-export { type FieldIds, type FormMode, FormModeProvider, useFieldIds, useFormMode, } from "./form.js";
+export { controlName, FieldBoundary, type FieldIds, type FormMode, FormModeProvider, useFieldIds, useFormMode, } from "./form.js";
 export { bySurface, SurfaceProvider, useSurface } from "./surface.js";
 export { applyTheme, isTheme, type ResolvedTheme, resolveTheme, type Theme, THEME_ATTRIBUTE, ThemeProvider, type ThemeProviderProps, THEMES, useTheme, } from "./theme.js";
 export type { OpenTarget, Size, Surface, Tone } from "./types.js";

package/dist/foundations/index.js

@@ -5,7 +5,7 @@ export { currentCopy, currentCopyLocale, ENGLISH_COPY, fillCopy, installCopy, me
 export { byDensity, DensityProvider, useDensity, } from "./density.js";
 /* EL CONTRATO DE UN CONTROL — los ids que le da su `Field` y si se mira o se escribe. Lo
    hablan los controles del paquete y los de la aplicación por igual. */
-export { FormModeProvider, useFieldIds, useFormMode, } from "./form.js";
+export { controlName, FieldBoundary, FormModeProvider, useFieldIds, useFormMode, } from "./form.js";
 /* EL TEMA — claro, oscuro o el del sistema operativo. Las paletas viven en `tokens.css`; esto
    sólo escribe `data-theme`. */
 export { bySurface, SurfaceProvider, useSurface } from "./surface.js";

package/dist/primitives/choice/ComboBox.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { AriaLocale } from "../../foundations/aria.js";
-import { useFieldIds } from "../../foundations/form.js";
+import { controlName, useFieldIds } from "../../foundations/form.js";
 import { useFormMode } from "../../foundations/form.js";
 import { labelOf } from "./options.js";
 import { FieldButton, FieldGroup, listOptionStyles, } from "../field/aria.js";
@@ -48,7 +48,7 @@ function EditableComboBox({ value, onChange, options, placeholder, disabled = fa
         invalid: ownInvalid,
     });
     const { contains } = useFilter({ sensitivity: "base" });
-    return (_jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, 
+    return (_jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, 
         /* `defaultItems` and not `items`: with `items` React Aria hands the filtering to the
            consumer. These are the same options every render — only the filtering is React
            Aria's. */

package/dist/primitives/choice/SearchField.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AriaLocale } from "../../foundations/aria.js";
 import { useUiCopy } from "../../foundations/copy.js";
-import { useFieldIds } from "../../foundations/form.js";
+import { controlName, useFieldIds } from "../../foundations/form.js";
 import { FieldButton, FieldGroup } from "../field/aria.js";
 import { Search, X } from "lucide-react";
 import { Input, SearchField as AriaSearchField } from "react-aria-components";
@@ -38,9 +38,6 @@ export function SearchField({ value, onChange, placeholder, onSubmit, disabled =
         describedBy: ownDescribedBy,
     });
     /* A `Field` names it through its label; anything else falls back so it always has one. */
-    const name = ariaLabel ??
-        (labelledBy === undefined
-            ? (nameFromPlaceholder(placeholder) ?? copy.choice.search)
-            : undefined);
+    const name = controlName(labelledBy, ariaLabel, nameFromPlaceholder(placeholder) ?? copy.choice.search);
     return (_jsx(AriaLocale, { children: _jsx(AriaSearchField, { id: id, "aria-labelledby": labelledBy, "aria-label": name, "aria-describedby": describedBy, value: value, onChange: (next) => onChange?.(next), onSubmit: onSubmit, isDisabled: disabled, className: "group w-full min-w-0", children: _jsxs(FieldGroup, { children: [_jsx(Search, { "aria-hidden": true, className: "ml-2.5 size-(--size-icon-md) shrink-0 text-muted forced-colors:text-[ButtonText]", strokeWidth: 2 }), _jsx(Input, { placeholder: placeholder, className: "h-full min-w-0 flex-1 bg-transparent px-2 text-meta text-ink outline-0 placeholder:text-muted disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:hidden" }), _jsx(FieldButton, { className: "mr-1 group-data-empty:invisible", children: _jsx(X, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }) }) }));
 }

package/dist/primitives/choice/SegmentedControl.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useFieldIds } from "../../foundations/form.js";
+import { controlName, useFieldIds } from "../../foundations/form.js";
 import { useFormMode } from "../../foundations/form.js";
 import { tv } from "../../foundations/variants.js";
 import { labelOf } from "./options.js";
@@ -56,7 +56,7 @@ export function SegmentedControl({ value, onChange, options, size = "md", disabl
     const inForm = mode !== undefined || labelledBy !== undefined;
     if (inForm && formMode === "read")
         return _jsx(ReadValue, { value: labelOf(options, value) });
-    return (_jsx(ToggleButtonGroup, { "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy, selectionMode: "single", 
+    return (_jsx(ToggleButtonGroup, { "aria-label": controlName(labelledBy, ariaLabel), "aria-labelledby": labelledBy, "aria-describedby": describedBy, selectionMode: "single", 
         /* Always one: a period switcher with nothing pressed shows a report of no period. */
         disallowEmptySelection: true, selectedKeys: [value], onSelectionChange: (keys) => {
             const [next] = keys;

package/dist/primitives/choice/Slider.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AriaLocale } from "../../foundations/aria.js";
 import { useUiCopy } from "../../foundations/copy.js";
-import { useFieldIds } from "../../foundations/form.js";
+import { controlName, useFieldIds } from "../../foundations/form.js";
 import { useFormMode } from "../../foundations/form.js";
 import { tv } from "../../foundations/variants.js";
 import { ReadValue } from "../field/Field.js";
@@ -42,5 +42,5 @@ export function Slider({ value, onChange, min, max, step = 1, format, disabled =
     if (useFormMode(mode) === "read") {
         return _jsx(ReadValue, { value: new Intl.NumberFormat(copy.locale, format).format(value) });
     }
-    return (_jsx(AriaLocale, { children: _jsxs(AriaSlider, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, value: value, onChange: (next) => onChange?.(next), minValue: min, maxValue: max, step: step, formatOptions: format, isDisabled: disabled, className: "flex h-(--size-control-md) w-full min-w-0 items-center gap-3 disabled:opacity-45", children: [_jsxs(SliderTrack, { className: "relative flex h-(--size-control-md) min-w-0 flex-1 cursor-pointer items-center disabled:cursor-not-allowed", children: [_jsx("span", { className: "relative h-1 w-full rounded-pill bg-line-strong forced-colors:bg-[ButtonBorder]", children: _jsx(SliderFill, { className: "rounded-pill bg-primary disabled:bg-muted forced-colors:bg-[Highlight]" }) }), _jsx(SliderThumb, { "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, className: thumb })] }), output ? (_jsx(SliderOutput, { className: "w-14 shrink-0 text-right text-meta text-ink tabular-nums" })) : null] }) }));
+    return (_jsx(AriaLocale, { children: _jsxs(AriaSlider, { id: id, "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, value: value, onChange: (next) => onChange?.(next), minValue: min, maxValue: max, step: step, formatOptions: format, isDisabled: disabled, className: "flex h-(--size-control-md) w-full min-w-0 items-center gap-3 disabled:opacity-45", children: [_jsxs(SliderTrack, { className: "relative flex h-(--size-control-md) min-w-0 flex-1 cursor-pointer items-center disabled:cursor-not-allowed", children: [_jsx("span", { className: "relative h-1 w-full rounded-pill bg-line-strong forced-colors:bg-[ButtonBorder]", children: _jsx(SliderFill, { className: "rounded-pill bg-primary disabled:bg-muted forced-colors:bg-[Highlight]" }) }), _jsx(SliderThumb, { "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, className: thumb })] }), output ? (_jsx(SliderOutput, { className: "w-14 shrink-0 text-right text-meta text-ink tabular-nums" })) : null] }) }));
 }

package/dist/primitives/date/DatePicker.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DateFormatter, parseDate } from "@internationalized/date";
 import { AriaLocale } from "../../foundations/aria.js";
 import { useUiCopy } from "../../foundations/copy.js";
-import { useFieldIds } from "../../foundations/form.js";
+import { controlName, useFieldIds } from "../../foundations/form.js";
 import { useFormMode } from "../../foundations/form.js";
 import { tv } from "../../foundations/variants.js";
 import { Calendar, RangeCalendar } from "./Calendar.js";
@@ -71,7 +71,7 @@ export function DateField({ value, onChange, id: ownId, describedBy: ownDescribe
     const read = useReadDate();
     if (useFormMode(mode) === "read")
         return _jsx(ReadValue, { value: read(value) });
-    return (_jsx(AriaLocale, { children: _jsx(AriaDateField, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, value: parse(value), onChange: (next) => onChange?.(next === null ? null : next.toString()), minValue: parse(min) ?? undefined, maxValue: parse(max) ?? undefined, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: _jsx(FieldGroup, { children: _jsx(Segments, {}) }) }) }));
+    return (_jsx(AriaLocale, { children: _jsx(AriaDateField, { id: id, "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, value: parse(value), onChange: (next) => onChange?.(next === null ? null : next.toString()), minValue: parse(min) ?? undefined, maxValue: parse(max) ?? undefined, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: _jsx(FieldGroup, { children: _jsx(Segments, {}) }) }) }));
 }
 /** A date typed by segments, or picked on a calendar from the button. */
 export function DatePicker({ value, onChange, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, min, max, mode, "aria-label": ariaLabel, }) {
@@ -83,7 +83,7 @@ export function DatePicker({ value, onChange, id: ownId, describedBy: ownDescrib
     const read = useReadDate();
     if (useFormMode(mode) === "read")
         return _jsx(ReadValue, { value: read(value) });
-    return (_jsx(AriaLocale, { children: _jsxs(AriaDatePicker, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, value: parse(value), onChange: (next) => onChange?.(next === null ? null : next.toString()), minValue: parse(min) ?? undefined, maxValue: parse(max) ?? undefined, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: [_jsxs(FieldGroup, { children: [_jsx(Segments, {}), _jsx(FieldButton, { className: "mr-1 ml-auto", children: _jsx(CalendarDays, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }), _jsx(Popover, { placement: "bottom end", children: _jsx(Dialog, { className: "p-3 outline-0", children: _jsx(Calendar, {}) }) })] }) }));
+    return (_jsx(AriaLocale, { children: _jsxs(AriaDatePicker, { id: id, "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, value: parse(value), onChange: (next) => onChange?.(next === null ? null : next.toString()), minValue: parse(min) ?? undefined, maxValue: parse(max) ?? undefined, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: [_jsxs(FieldGroup, { children: [_jsx(Segments, {}), _jsx(FieldButton, { className: "mr-1 ml-auto", children: _jsx(CalendarDays, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }), _jsx(Popover, { placement: "bottom end", children: _jsx(Dialog, { className: "p-3 outline-0", children: _jsx(Calendar, {}) }) })] }) }));
 }
 /** A span of days — a period of a report, the validity of a contract — typed or picked on
  *  two months at once. */
@@ -99,5 +99,5 @@ export function DateRangePicker({ value, onChange, id: ownId, describedBy: ownDe
     }
     const start = parse(value?.start);
     const end = parse(value?.end);
-    return (_jsx(AriaLocale, { children: _jsxs(AriaDateRangePicker, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, value: start === null || end === null ? null : { start, end }, onChange: (next) => onChange?.(next === null ? null : { start: next.start.toString(), end: next.end.toString() }), minValue: parse(min) ?? undefined, maxValue: parse(max) ?? undefined, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: [_jsxs(FieldGroup, { children: [_jsx(Segments, { slot: "start" }), _jsx("span", { "aria-hidden": true, className: "text-muted", children: "\u2013" }), _jsx(Segments, { slot: "end" }), _jsx(FieldButton, { className: "mr-1 ml-auto", children: _jsx(CalendarDays, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }), _jsx(Popover, { placement: "bottom end", children: _jsx(Dialog, { className: "p-3 outline-0", children: _jsx(RangeCalendar, { months: 2 }) }) })] }) }));
+    return (_jsx(AriaLocale, { children: _jsxs(AriaDateRangePicker, { id: id, "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, value: start === null || end === null ? null : { start, end }, onChange: (next) => onChange?.(next === null ? null : { start: next.start.toString(), end: next.end.toString() }), minValue: parse(min) ?? undefined, maxValue: parse(max) ?? undefined, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: [_jsxs(FieldGroup, { children: [_jsx(Segments, { slot: "start" }), _jsx("span", { "aria-hidden": true, className: "text-muted", children: "\u2013" }), _jsx(Segments, { slot: "end" }), _jsx(FieldButton, { className: "mr-1 ml-auto", children: _jsx(CalendarDays, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }), _jsx(Popover, { placement: "bottom end", children: _jsx(Dialog, { className: "p-3 outline-0", children: _jsx(RangeCalendar, { months: 2 }) }) })] }) }));
 }

package/dist/primitives/date/DateTime.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DateFormatter, parseDateTime, parseTime, toCalendarDate, } from "@internationalized/date";
 import { AriaLocale } from "../../foundations/aria.js";
 import { useUiCopy } from "../../foundations/copy.js";
-import { useFieldIds } from "../../foundations/form.js";
+import { controlName, useFieldIds } from "../../foundations/form.js";
 import { useFormMode } from "../../foundations/form.js";
 import { Calendar } from "./Calendar.js";
 import { Segments } from "./DatePicker.js";
@@ -81,7 +81,7 @@ export function TimeField({ value, onChange, id: ownId, describedBy: ownDescribe
                 ? ""
                 : format.format(new Date(Date.UTC(1970, 0, 1, time.hour, time.minute))) }));
     }
-    return (_jsx(AriaLocale, { children: _jsx(AriaTimeField, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, value: parseClock(value), onChange: (next) => onChange?.(next === null ? null : hhmm(next)), minValue: parseClock(min) ?? undefined, maxValue: parseClock(max) ?? undefined, hourCycle: hourCycle, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: _jsx(FieldGroup, { children: _jsx(Segments, {}) }) }) }));
+    return (_jsx(AriaLocale, { children: _jsx(AriaTimeField, { id: id, "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, value: parseClock(value), onChange: (next) => onChange?.(next === null ? null : hhmm(next)), minValue: parseClock(min) ?? undefined, maxValue: parseClock(max) ?? undefined, hourCycle: hourCycle, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: _jsx(FieldGroup, { children: _jsx(Segments, {}) }) }) }));
 }
 /** A day and its time — a delivery slot, an appointment: the day typed or picked on the
  *  calendar, the time typed after it. The value is a local `"YYYY-MM-DDTHH:MM"`, or `null`. */
@@ -96,5 +96,5 @@ export function DateTimePicker({ value, onChange, id: ownId, describedBy: ownDes
         const stamp = parseStamp(value);
         return _jsx(ReadValue, { value: stamp === null ? "" : format.format(stamp.toDate("UTC")) });
     }
-    return (_jsx(AriaLocale, { children: _jsxs(AriaDatePicker, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, value: parseStamp(value), onChange: (next) => onChange?.(next === null ? null : stampOf(next)), minValue: parseStamp(min) ?? undefined, maxValue: parseStamp(max) ?? undefined, granularity: "minute", hourCycle: hourCycle, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: [_jsxs(FieldGroup, { children: [_jsx(Segments, {}), _jsx(FieldButton, { className: "mr-1 ml-auto", children: _jsx(CalendarDays, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }), _jsx(Popover, { placement: "bottom end", children: _jsx(Dialog, { className: "p-3 outline-0", children: _jsx(Calendar, {}) }) })] }) }));
+    return (_jsx(AriaLocale, { children: _jsxs(AriaDatePicker, { id: id, "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, value: parseStamp(value), onChange: (next) => onChange?.(next === null ? null : stampOf(next)), minValue: parseStamp(min) ?? undefined, maxValue: parseStamp(max) ?? undefined, granularity: "minute", hourCycle: hourCycle, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: [_jsxs(FieldGroup, { children: [_jsx(Segments, {}), _jsx(FieldButton, { className: "mr-1 ml-auto", children: _jsx(CalendarDays, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }), _jsx(Popover, { placement: "bottom end", children: _jsx(Dialog, { className: "p-3 outline-0", children: _jsx(Calendar, {}) }) })] }) }));
 }

package/dist/primitives/field/Field.d.ts

@@ -94,7 +94,8 @@ export type ControlProps = {
     /** Forces the mode. By default it inherits the form's: in read mode it draws the value. */
     mode?: FormMode;
     /** The name of the control when it is NOT inside a `Field` — a cell of an editable table,
-     *  the box of a message. Inside a field, the field's label names it. */
+     *  the box of a message. Inside a field the field's label names it and this is IGNORED
+     *  (`controlName`): with both, the control was read twice. */
     "aria-label"?: string;
 };
 /** The accessible name of a control. Inside a `Field` the field's label names it; outside,

package/dist/primitives/field/Field.js

@@ -4,7 +4,7 @@ import { AriaLocale } from "../../foundations/aria.js";
 import { useUiCopy } from "../../foundations/copy.js";
 import { byDensity, useDensity } from "../../foundations/density.js";
 import { FieldIdsContext, useFieldIds, } from "../../foundations/form.js";
-import { FormModeProvider, useFormMode, } from "../../foundations/form.js";
+import { controlName, FormModeProvider, useFormMode, } from "../../foundations/form.js";
 import { focusRing, tv } from "../../foundations/variants.js";
 import { FieldGroup, listOptionStyles } from "./aria.js";
 import { FieldCopy, useFieldCopy } from "./clipboard.js";
@@ -139,7 +139,7 @@ export function controlClasses(invalid = false) {
  *  browser reads for a bare `<input placeholder>` anyway, so a control outside a form is
  *  never nameless. */
 export function nameOf(labelledBy, ariaLabel, placeholder) {
-    return labelledBy === undefined ? (ariaLabel ?? placeholder) : ariaLabel;
+    return controlName(labelledBy, ariaLabel, placeholder);
 }
 /**
  * One line of text: a business name, a reference, a NIT.

package/dist/primitives/field/Suggest.js

@@ -4,7 +4,7 @@ import { AriaLocale } from "../../foundations/aria.js";
 import { useFieldIds } from "../../foundations/form.js";
 import { useFormMode } from "../../foundations/form.js";
 import { FieldGroup, listOptionStyles } from "./aria.js";
-import { ReadValue } from "./Field.js";
+import { nameOf, ReadValue } from "./Field.js";
 import { Popover } from "../overlay/Popover.js";
 import { ComboBox as AriaComboBox, Input, ListBox, ListBoxItem, useFilter, } from "react-aria-components";
 const MAX = 8;
@@ -34,7 +34,7 @@ function EditableSuggest({ id: ownId, value, onChange, suggestions, placeholder,
         .filter((one) => needle === "" || contains(one, needle))
         .slice(0, max)
         .map((one) => ({ id: one }));
-    return (_jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-label": labelledBy === undefined ? (ariaLabel ?? placeholder) : ariaLabel, 
+    return (_jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-label": nameOf(labelledBy, ariaLabel, placeholder), 
         /* An open field: what is typed is the value, a suggestion only fills it faster. */
         allowsCustomValue: true, inputValue: value, onInputChange: (next) => onChange?.(next), items: shown, 
         /* It proposes as soon as the field is entered, like the hand-written one did: the

package/dist/primitives/picker/Picker.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { AriaLocale } from "../../foundations/aria.js";
 import { fillCopy, useUiCopy } from "../../foundations/copy.js";
-import { useFieldIds } from "../../foundations/form.js";
+import { controlName, useFieldIds } from "../../foundations/form.js";
 import { useFormMode } from "../../foundations/form.js";
 import { matchedWord, matches } from "../../foundations/match.js";
 import { cn, tv } from "../../foundations/variants.js";
@@ -198,7 +198,7 @@ function EditablePicker({ id: ownId, items, value, onChange, onSearch, valueLabe
         if (next !== value)
             onChange?.(next);
     };
-    return (_jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, items: listed, value: value ?? null, onChange: take, inputValue: text, onInputChange: (next) => {
+    return (_jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, items: listed, value: value ?? null, onChange: take, inputValue: text, onInputChange: (next) => {
             setText(next);
             setQuery(next);
         }, onOpenChange: (isOpen, trigger) => {

package/dist/primitives/picker/TagsField.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { AriaLocale } from "../../foundations/aria.js";
 import { fillCopy, useUiCopy } from "../../foundations/copy.js";
-import { useFieldIds } from "../../foundations/form.js";
+import { controlName, useFieldIds } from "../../foundations/form.js";
 import { useFormMode } from "../../foundations/form.js";
 import { cn } from "../../foundations/variants.js";
 import { fieldGroupStyles, listOptionStyles } from "../field/aria.js";
@@ -171,7 +171,7 @@ function EditableTagsField({ value, onChange, options, onCreate, onSearch, onBro
                     ? ariaLabel === undefined
                         ? {}
                         : { label: ariaLabel }
-                    : { labelledBy }) })), _jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, items: listed, selectedKey: null, onSelectionChange: commit, inputValue: text, onInputChange: setText, 
+                    : { labelledBy }) })), _jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, items: listed, selectedKey: null, onSelectionChange: commit, inputValue: text, onInputChange: setText, 
                 /* Arriving at the field shows what can still be added, the way a many2one opens its
                    list on focus. With every tag chosen and no text there is nothing to show, and the
                    list stays closed. */

package/dist/primitives/table/DataTable.d.ts

@@ -29,7 +29,7 @@ export interface DataColumn<T> {
     field?: string;
     /** The raw value: this is what sorting and grouping run on. */
     value: (row: T) => string | number | boolean | null;
-    /** How it is drawn. Without this the raw value is drawn. */
+    /** How it is drawn. Without this, `text`; without either, the raw value. */
     cell?: (row: T) => ReactNode;
     /** A column of CODES — a SKU, a hash, a key — set in the monospaced face. Numbers do not
      *  need it: they align with tabular figures in the same face as the rest of the row. */

package/dist/primitives/table/DataTable.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { FieldBoundary } from "../../foundations/form.js";
 import { pathKey, pileFoot, pileItems, } from "../../foundations/grouping.js";
 import { CellCopy } from "./CellCopy.js";
 import { CellEditor } from "./CellEditor.js";
@@ -65,9 +66,14 @@ function raw(copy, v) {
         return v ? copy.table.yes : copy.table.no;
     return v;
 }
-/** What a cell draws: its `cell`, or the raw value. */
+/** What a cell draws: its `cell`; without one, how it READS (`text`); only then the raw
+ *  value — which is the sort key, «posted» and not «publicada». */
 function drawCell(copy, column, row) {
-    return column.cell === undefined ? raw(copy, column.value(row)) : column.cell(row);
+    if (column.cell !== undefined)
+        return column.cell(row);
+    if (column.text !== undefined)
+        return column.text(row);
+    return raw(copy, column.value(row));
 }
 /* The features are declared once. In v9 they are opt-in: asking only for what
    is used is what keeps the bundle down to what is actually needed. */
@@ -419,8 +425,8 @@ export function DataTable({ data, columns, getRowId, sort, onSortChange, levels,
                             return (_jsx("td", { className: `px-3 py-1.5 text-meta font-semibold text-ink ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: i === 0 && value === null ? (_jsxs("span", { className: "text-muted", children: [data.length.toLocaleString(copy.locale), " ", data.length === 1 ? copy.table.row : copy.table.rows] })) : value === null ? null : (aggregateLabel(copy, c, value)) }, c.id));
                         }), rowActions === undefined ? null : _jsx("td", {})] }) }))] }));
     if (create === undefined)
-        return grid;
-    return (_jsxs("div", { className: "flex min-w-0 flex-col", children: [grid, writing ? null : (_jsx("div", { className: "px-1 py-0.5", children: _jsxs("button", { ref: addButton, type: "button", onClick: start, className: "flex w-full items-center gap-1.5 rounded-control px-3 py-1 text-left text-meta text-primary transition-colors duration-(--duration-instant) hover:bg-primary/5 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary", children: [_jsx(Plus, { className: "size-(--size-icon-sm)", strokeWidth: 2.5, "aria-hidden": true }), create.label ?? copy.table.add] }) }))] }));
+        return _jsx(FieldBoundary, { children: grid });
+    return (_jsx(FieldBoundary, { children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [grid, writing ? null : (_jsx("div", { className: "px-1 py-0.5", children: _jsxs("button", { ref: addButton, type: "button", onClick: start, className: "flex w-full items-center gap-1.5 rounded-control px-3 py-1 text-left text-meta text-primary transition-colors duration-(--duration-instant) hover:bg-primary/5 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary", children: [_jsx(Plus, { className: "size-(--size-icon-sm)", strokeWidth: 2.5, "aria-hidden": true }), create.label ?? copy.table.add] }) }))] }) }));
 }
 /* A cell of the row being written: the table's cell, washed like an edited row. */
 const DRAFT_CELL = "border-b border-line bg-primary/5 px-3 py-1 align-middle text-meta text-ink first:rounded-l-control last:rounded-r-control";

package/dist/primitives/table/EditableTable.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useUiCopy } from "../../foundations/copy.js";
 import { byDensity, useDensity } from "../../foundations/density.js";
-import { ControlStateContext } from "../../foundations/form.js";
+import { ControlStateContext, FieldBoundary } from "../../foundations/form.js";
 import { pathKey, pileIsOpen, pileItems, pilesOf, } from "../../foundations/grouping.js";
 import { HANDHELD_WIDTH } from "../../foundations/layout.js";
 import { stickyTop, useScrollBox } from "../../foundations/sticky.js";
@@ -816,106 +816,109 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReo
                         return null;
                     return (_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-meta", children: [_jsx("dt", { className: "text-muted", children: c.header }), _jsx("dd", { className: "font-semibold text-ink tabular-nums", children: total })] }, c.id));
                 }) }))] }));
-    return (_jsxs("div", { ref: frame, className: "min-w-0", children: [_jsx("div", { ref: box.ref, tabIndex: box.tabIndex, className: `min-w-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary ${box.className}`, style: box.style, children: stacked ? (list) : (_jsxs("table", { className: "w-full border-separate border-spacing-0 px-1 text-left", ...(view.on
-                        ? { "aria-rowcount": 1 + drawn.length + (totals === undefined ? 0 : 1) }
-                        : {}), children: [_jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsxs("tr", { ...(view.on ? { "aria-rowindex": 1 } : {}), children: [reorderable ? _jsx("td", { className: "w-0 border-b border-line-strong" }) : null, columns.map((c) => c.header === "" ? (_jsx("td", { className: "w-0 border-b border-line-strong" }, c.id)) : (_jsx("th", { scope: "col", style: c.width === undefined ? undefined : { width: c.width }, 
-                                        /* A column of figures takes its figures' width (`w-0` in an auto
-                                           table is «as narrow as its content») and the text takes the rest:
-                                           the product name was cut while «Cantidad» had room for ten digits. */
-                                        className: `border-b border-line-strong ${HEADER_TEXT} ${cell} ${c.numeric === true ? "text-right" : "text-left"} ${c.numeric === true && c.width === undefined ? "w-0" : ""}`, children: c.header }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: "w-0 border-b border-line-strong" }))] }) }), _jsxs("tbody", { ref: view.body.ref, ...(reorderable
-                                ? {
-                                    onDragOver: overRow,
-                                    onDrop: (event) => {
-                                        event.preventDefault();
-                                        if (dragged.current !== null && landing !== undefined)
-                                            land(dragged.current, landing);
-                                        dragged.current = null;
-                                        setLanding(undefined);
-                                    },
-                                }
-                                : {}), children: [rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columns.length +
-                                            (onRemove === undefined ? 0 : 1) +
-                                            (reorderable ? 1 : 0), className: `text-meta text-muted italic ${cell}`, children: emptyText }) })) : (view.rows.flatMap((slot, at) => {
-                                    const entry = drawn[slot.index];
-                                    if (entry === undefined)
-                                        return [];
-                                    const windowed = view.windowed(slot.index);
-                                    /* What is not drawn is a spacer of its height: the rows above the window
-                                       before the first, and the gap before a row kept only because it holds
-                                       the focus. */
-                                    const gap = view.pad(at === 0 ? 0 : view.rows[at - 1].end, slot.start, width, `gap:${slot.index}`);
-                                    if (entry.pile !== undefined) {
-                                        const pile = entry.pile;
-                                        const inside = pile.piles.length === 0 ? pile.items : pileItems(pile.piles);
-                                        return [
-                                            gap,
-                                            /* La banda respeta la cuadrícula: el rótulo en la primera
-                                             columna y cada total bajo la suya. Un total en un rincón
-                                             obliga a buscar de qué columna es; alineado no hay nada que
-                                             buscar. */
-                                            _jsxs("tr", { ...windowed, children: [reorderable ? _jsx("td", { className: "w-0 bg-ground" }) : null, columns.map((c, ci) => (_jsx("td", { className: `bg-ground text-meta ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, style: ci === 0 && pile.depth > 0
-                                                            ? {
-                                                                paddingLeft: `calc(var(--spacing-indent) * ${pile.depth} + 0.625rem)`,
-                                                            }
-                                                            : undefined, children: ci === 0
-                                                            ? pileTag(pile, copy.locale)
-                                                            : (groupTotal?.(c, inside) ?? null) }, c.id))), onRemove === undefined ? null : _jsx("td", { className: "w-0 bg-ground" })] }, `pile:${pathKey(pile.path)}`),
-                                        ];
+    return (
+    /* A collection is many controls, each named by its column: no enclosing `Field`
+       reaches inside (see `FieldBoundary`). */
+    _jsx(FieldBoundary, { children: _jsxs("div", { ref: frame, className: "min-w-0", children: [_jsx("div", { ref: box.ref, tabIndex: box.tabIndex, className: `min-w-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary ${box.className}`, style: box.style, children: stacked ? (list) : (_jsxs("table", { className: "w-full border-separate border-spacing-0 px-1 text-left", ...(view.on
+                            ? { "aria-rowcount": 1 + drawn.length + (totals === undefined ? 0 : 1) }
+                            : {}), children: [_jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsxs("tr", { ...(view.on ? { "aria-rowindex": 1 } : {}), children: [reorderable ? _jsx("td", { className: "w-0 border-b border-line-strong" }) : null, columns.map((c) => c.header === "" ? (_jsx("td", { className: "w-0 border-b border-line-strong" }, c.id)) : (_jsx("th", { scope: "col", style: c.width === undefined ? undefined : { width: c.width }, 
+                                            /* A column of figures takes its figures' width (`w-0` in an auto
+                                             table is «as narrow as its content») and the text takes the rest:
+                                             the product name was cut while «Cantidad» had room for ten digits. */
+                                            className: `border-b border-line-strong ${HEADER_TEXT} ${cell} ${c.numeric === true ? "text-right" : "text-left"} ${c.numeric === true && c.width === undefined ? "w-0" : ""}`, children: c.header }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: "w-0 border-b border-line-strong" }))] }) }), _jsxs("tbody", { ref: view.body.ref, ...(reorderable
+                                    ? {
+                                        onDragOver: overRow,
+                                        onDrop: (event) => {
+                                            event.preventDefault();
+                                            if (dragged.current !== null && landing !== undefined)
+                                                land(dragged.current, landing);
+                                            dragged.current = null;
+                                            setLanding(undefined);
+                                        },
                                     }
-                                    const row = entry.row;
-                                    const id = getRowId(row);
-                                    const isEditing = editing === id;
-                                    const band = bandOf(row);
-                                    if (band !== null) {
-                                        const { span, figures } = bandFigures(row);
-                                        const bandWash = isEditing
-                                            ? "bg-primary/5"
-                                            : band === "section"
-                                                ? "bg-ground group-hover/row:bg-ink/6"
-                                                : "group-hover/row:bg-ink/4";
-                                        const bandMark = `border-b border-line first:rounded-l-control last:rounded-r-control ${bandWash}`;
-                                        const control = isEditing && editable && bands?.edit !== undefined;
+                                    : {}), children: [rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columns.length +
+                                                (onRemove === undefined ? 0 : 1) +
+                                                (reorderable ? 1 : 0), className: `text-meta text-muted italic ${cell}`, children: emptyText }) })) : (view.rows.flatMap((slot, at) => {
+                                        const entry = drawn[slot.index];
+                                        if (entry === undefined)
+                                            return [];
+                                        const windowed = view.windowed(slot.index);
+                                        /* What is not drawn is a spacer of its height: the rows above the window
+                                         before the first, and the gap before a row kept only because it holds
+                                         the focus. */
+                                        const gap = view.pad(at === 0 ? 0 : view.rows[at - 1].end, slot.start, width, `gap:${slot.index}`);
+                                        if (entry.pile !== undefined) {
+                                            const pile = entry.pile;
+                                            const inside = pile.piles.length === 0 ? pile.items : pileItems(pile.piles);
+                                            return [
+                                                gap,
+                                                /* La banda respeta la cuadrícula: el rótulo en la primera
+                                               columna y cada total bajo la suya. Un total en un rincón
+                                               obliga a buscar de qué columna es; alineado no hay nada que
+                                               buscar. */
+                                                _jsxs("tr", { ...windowed, children: [reorderable ? _jsx("td", { className: "w-0 bg-ground" }) : null, columns.map((c, ci) => (_jsx("td", { className: `bg-ground text-meta ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, style: ci === 0 && pile.depth > 0
+                                                                ? {
+                                                                    paddingLeft: `calc(var(--spacing-indent) * ${pile.depth} + 0.625rem)`,
+                                                                }
+                                                                : undefined, children: ci === 0
+                                                                ? pileTag(pile, copy.locale)
+                                                                : (groupTotal?.(c, inside) ?? null) }, c.id))), onRemove === undefined ? null : _jsx("td", { className: "w-0 bg-ground" })] }, `pile:${pathKey(pile.path)}`),
+                                            ];
+                                        }
+                                        const row = entry.row;
+                                        const id = getRowId(row);
+                                        const isEditing = editing === id;
+                                        const band = bandOf(row);
+                                        if (band !== null) {
+                                            const { span, figures } = bandFigures(row);
+                                            const bandWash = isEditing
+                                                ? "bg-primary/5"
+                                                : band === "section"
+                                                    ? "bg-ground group-hover/row:bg-ink/6"
+                                                    : "group-hover/row:bg-ink/4";
+                                            const bandMark = `border-b border-line first:rounded-l-control last:rounded-r-control ${bandWash}`;
+                                            const control = isEditing && editable && bands?.edit !== undefined;
+                                            return [
+                                                gap,
+                                                _jsxs(EditRow, { as: "tr", ...rowWiring(id, row), windowed: windowed, className: `group/row ${editable ? RING : ""} ${editable && !isEditing ? "cursor-text" : ""}`, children: [reorderable ? grip(id, bandMark) : null, _jsx("td", { colSpan: span, ...(control ? { "data-edit": "" } : {}), className: `text-meta ${bandMark} ${lineOver(id)} ${cell} ${band === "section"
+                                                                ? "font-semibold text-ink"
+                                                                : "text-muted italic"}`, children: control ? bands?.edit?.(row, setter(id)) : bands?.render(row) }), columns.slice(span).map((c, i) => (_jsx("td", { className: `text-meta text-ink ${bandMark} ${cell} ${c.numeric === true
+                                                                ? "text-right font-semibold tabular-nums"
+                                                                : ""}`, children: figures[span + i] ?? null }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: `w-0 py-1 pr-2 pl-1 align-middle ${bandMark}`, children: _jsx("span", { className: "flex opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 group-focus-visible/row:opacity-100 focus-within:opacity-100", onClick: (e) => e.stopPropagation(), children: _jsx(IconButton, { icon: Trash2, label: copy.editable.remove, size: "sm", tone: "danger", ...(editable && stop !== id ? { tabIndex: -1 } : {}), onClick: () => onRemove(id) }) }) }))] }, id),
+                                            ];
+                                        }
+                                        /* The wash lives on the cells. A background on the row paints
+                                       edge to edge, and `border-collapse` would ignore a radius. */
+                                        const wash = isEditing ? "bg-primary/5" : "group-hover/row:bg-ink/4";
+                                        const mark = `border-b border-line first:rounded-l-control last:rounded-r-control ${wash}`;
+                                        const set = setter(id);
                                         return [
                                             gap,
-                                            _jsxs(EditRow, { as: "tr", ...rowWiring(id, row), windowed: windowed, className: `group/row ${editable ? RING : ""} ${editable && !isEditing ? "cursor-text" : ""}`, children: [reorderable ? grip(id, bandMark) : null, _jsx("td", { colSpan: span, ...(control ? { "data-edit": "" } : {}), className: `text-meta ${bandMark} ${lineOver(id)} ${cell} ${band === "section"
-                                                            ? "font-semibold text-ink"
-                                                            : "text-muted italic"}`, children: control ? bands?.edit?.(row, setter(id)) : bands?.render(row) }), columns.slice(span).map((c, i) => (_jsx("td", { className: `text-meta text-ink ${bandMark} ${cell} ${c.numeric === true
-                                                            ? "text-right font-semibold tabular-nums"
-                                                            : ""}`, children: figures[span + i] ?? null }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: `w-0 py-1 pr-2 pl-1 align-middle ${bandMark}`, children: _jsx("span", { className: "flex opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 group-focus-visible/row:opacity-100 focus-within:opacity-100", onClick: (e) => e.stopPropagation(), children: _jsx(IconButton, { icon: Trash2, label: copy.editable.remove, size: "sm", tone: "danger", ...(editable && stop !== id ? { tabIndex: -1 } : {}), onClick: () => onRemove(id) }) }) }))] }, id),
+                                            _jsxs(EditRow, { as: "tr", ...rowWiring(id, row), windowed: windowed, 
+                                                /* The focus ring is drawn on the row, inset, so it is not cut by
+                                               the box and does not move the cells. */
+                                                className: `group/row ${editable ? RING : ""} ${editable && !isEditing && !locked(row) ? "cursor-text" : ""}`, children: [reorderable ? grip(id, mark) : null, columns.map((c, ci) => {
+                                                        const state = stateOf(row, c);
+                                                        const control = isEditing && writes(row, c, state);
+                                                        /* Not `mark`: that name is the row's border and wash, above. Shadowed,
+                                                         the cells were drawn with the class «null» — no hairline, no hover. */
+                                                        const flagged = ci === 0 ? flagOf(row, true) : null;
+                                                        const cellFlag = cellFlagOf(row, c, state, true);
+                                                        const value = state?.hidden === true
+                                                            ? null
+                                                            : control
+                                                                ? controlOf(row, c, state, set)
+                                                                : c.render(row);
+                                                        return (_jsxs("td", { ...(control ? { "data-edit": "" } : {}), className: `text-meta text-ink ${mark} ${lineOver(id)} ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: [flagged === null && cellFlag === null ? (value) : (_jsxs("span", { className: "flex min-w-0 items-start gap-1.5", children: [flagged, cellFlag, _jsx("span", { className: "min-w-0 flex-1", children: value })] })), errorOf(row, c, state)] }, c.id));
+                                                    }), onRemove === undefined ? null : (_jsx("td", { className: `w-0 py-1 pr-2 pl-1 align-middle ${mark}`, children: _jsx("span", { className: "flex opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 group-focus-visible/row:opacity-100 focus-within:opacity-100", onClick: (e) => e.stopPropagation(), children: _jsx(IconButton, { icon: Trash2, label: copy.editable.remove, size: "sm", tone: "danger", ...(editable && stop !== id ? { tabIndex: -1 } : {}), onClick: () => onRemove(id) }) }) }))] }, id),
                                         ];
-                                    }
-                                    /* The wash lives on the cells. A background on the row paints
-                                     edge to edge, and `border-collapse` would ignore a radius. */
-                                    const wash = isEditing ? "bg-primary/5" : "group-hover/row:bg-ink/4";
-                                    const mark = `border-b border-line first:rounded-l-control last:rounded-r-control ${wash}`;
-                                    const set = setter(id);
-                                    return [
-                                        gap,
-                                        _jsxs(EditRow, { as: "tr", ...rowWiring(id, row), windowed: windowed, 
-                                            /* The focus ring is drawn on the row, inset, so it is not cut by
-                                             the box and does not move the cells. */
-                                            className: `group/row ${editable ? RING : ""} ${editable && !isEditing && !locked(row) ? "cursor-text" : ""}`, children: [reorderable ? grip(id, mark) : null, columns.map((c, ci) => {
-                                                    const state = stateOf(row, c);
-                                                    const control = isEditing && writes(row, c, state);
-                                                    /* Not `mark`: that name is the row's border and wash, above. Shadowed,
-                                                       the cells were drawn with the class «null» — no hairline, no hover. */
-                                                    const flagged = ci === 0 ? flagOf(row, true) : null;
-                                                    const cellFlag = cellFlagOf(row, c, state, true);
-                                                    const value = state?.hidden === true
-                                                        ? null
-                                                        : control
-                                                            ? controlOf(row, c, state, set)
-                                                            : c.render(row);
-                                                    return (_jsxs("td", { ...(control ? { "data-edit": "" } : {}), className: `text-meta text-ink ${mark} ${lineOver(id)} ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: [flagged === null && cellFlag === null ? (value) : (_jsxs("span", { className: "flex min-w-0 items-start gap-1.5", children: [flagged, cellFlag, _jsx("span", { className: "min-w-0 flex-1", children: value })] })), errorOf(row, c, state)] }, c.id));
-                                                }), onRemove === undefined ? null : (_jsx("td", { className: `w-0 py-1 pr-2 pl-1 align-middle ${mark}`, children: _jsx("span", { className: "flex opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 group-focus-visible/row:opacity-100 focus-within:opacity-100", onClick: (e) => e.stopPropagation(), children: _jsx(IconButton, { icon: Trash2, label: copy.editable.remove, size: "sm", tone: "danger", ...(editable && stop !== id ? { tabIndex: -1 } : {}), onClick: () => onRemove(id) }) }) }))] }, id),
-                                    ];
-                                })), rows.length === 0 ? null : view.tail(width)] }), totals === undefined ? null : (_jsx("tfoot", { children: _jsxs("tr", { children: [reorderable ? _jsx("td", { className: "border-t border-line-strong" }) : null, columns.map((c, i) => (_jsx("td", { className: `border-t border-line-strong text-meta font-semibold text-ink ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: totals[i] ?? null }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: "border-t border-line-strong" }))] }) }))] })) }), onAdd === undefined && (adds === undefined || adds.length === 0) ? null : (
-            /* The «add» goes under the grid, as text, not as a button away from it:
-               what is about to happen is that one more row shows up right here.
-               The hover is the same inset mark as a row: the shell lines the label
-               up with the cells, and the button itself is the rounded wash. It sits
-               outside the scroll box, so a table with its own height keeps it in view.
-               A section and a note sit beside it, quieter: the line is what is added
-               most, so it keeps the lead and the whole free width. */
-            _jsxs("div", { className: "flex flex-wrap items-center gap-x-1 px-1 py-0.5", children: [onAdd === undefined ? null : (_jsxs("button", { ref: addButton, type: "button", onClick: () => add(), className: `flex items-center gap-1.5 rounded-control text-left text-meta text-primary transition-colors duration-(--duration-instant) hover:bg-primary/5 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary ${adds === undefined || adds.length === 0 ? "w-full" : ""} ${byDensity(d, "px-3 py-1", "px-2 py-0.5")}`, children: [_jsx(Plus, { className: "size-(--size-icon-sm)", strokeWidth: 2.5, "aria-hidden": true }), addText] })), (adds ?? []).map((extra) => (_jsx("button", { type: "button", onClick: () => add(extra.onAdd), className: `rounded-control text-left text-meta text-muted transition-colors duration-(--duration-instant) hover:bg-primary/5 hover:text-primary focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary ${byDensity(d, "px-3 py-1", "px-2 py-0.5")}`, children: extra.label }, extra.label)))] }))] }));
+                                    })), rows.length === 0 ? null : view.tail(width)] }), totals === undefined ? null : (_jsx("tfoot", { children: _jsxs("tr", { children: [reorderable ? _jsx("td", { className: "border-t border-line-strong" }) : null, columns.map((c, i) => (_jsx("td", { className: `border-t border-line-strong text-meta font-semibold text-ink ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: totals[i] ?? null }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: "border-t border-line-strong" }))] }) }))] })) }), onAdd === undefined && (adds === undefined || adds.length === 0) ? null : (
+                /* The «add» goes under the grid, as text, not as a button away from it:
+                 what is about to happen is that one more row shows up right here.
+                 The hover is the same inset mark as a row: the shell lines the label
+                 up with the cells, and the button itself is the rounded wash. It sits
+                 outside the scroll box, so a table with its own height keeps it in view.
+                 A section and a note sit beside it, quieter: the line is what is added
+                 most, so it keeps the lead and the whole free width. */
+                _jsxs("div", { className: "flex flex-wrap items-center gap-x-1 px-1 py-0.5", children: [onAdd === undefined ? null : (_jsxs("button", { ref: addButton, type: "button", onClick: () => add(), className: `flex items-center gap-1.5 rounded-control text-left text-meta text-primary transition-colors duration-(--duration-instant) hover:bg-primary/5 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary ${adds === undefined || adds.length === 0 ? "w-full" : ""} ${byDensity(d, "px-3 py-1", "px-2 py-0.5")}`, children: [_jsx(Plus, { className: "size-(--size-icon-sm)", strokeWidth: 2.5, "aria-hidden": true }), addText] })), (adds ?? []).map((extra) => (_jsx("button", { type: "button", onClick: () => add(extra.onAdd), className: `rounded-control text-left text-meta text-muted transition-colors duration-(--duration-instant) hover:bg-primary/5 hover:text-primary focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary ${byDensity(d, "px-3 py-1", "px-2 py-0.5")}`, children: extra.label }, extra.label)))] }))] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/web-ui",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "An enterprise web design system for business software — ERPs, back offices, management tools — in React and Tailwind: tokens, primitives, components and the two views every management screen is made of.",
   "type": "module",
   "main": "./dist/index.js",