@sincpro/web-ui 1.3.0 → 1.4.0

package/dist/components/form/Sheet.js

@@ -29,7 +29,10 @@ function Facts({ fields, columns, layout, }) {
             /* The note's card goes INSIDE the value: a `<dl>` holds only its terms and values.
                With a note the value is a flex box, so the absolute card keeps the value's top
                as its static position while being read after it. */
-            const value = (_jsxs("dd", { ...(noteId === undefined ? {} : { "aria-describedby": noteId }), className: `min-w-0 text-meta ${card === null ? "" : "flex"} ${empty ? "text-muted italic" : "text-ink"} ${field.mono === true ? "font-mono tabular-nums" : ""}`, children: [empty ? "—" : field.value, card] }));
+            const value = (_jsxs("dd", { ...(noteId === undefined ? {} : { "aria-describedby": noteId }), 
+                /* `wrap-anywhere`: an email or a code has no space to break at, and in two
+                   columns it ran over the fact beside it. */
+                className: `min-w-0 text-meta wrap-anywhere ${card === null ? "" : "flex"} ${empty ? "text-muted italic" : "text-ink"} ${field.mono === true ? "font-mono tabular-nums" : ""}`, children: [empty ? "—" : field.value, card] }));
             const name = (_jsxs("dt", { className: `flex items-center gap-1 text-micro text-muted ${horizontal ? "shrink-0" : "min-w-0"}`, children: [_jsx("span", { children: field.label }), field.hint === undefined ? null : _jsx(Hint, { children: field.hint }), field.note === undefined ? null : _jsx(NoteFlag, { note: field.note })] }));
             if (horizontal) {
                 /* A header fact is a pair: the number sits next to its name. The

package/dist/components/listing/RecordCard.d.ts

@@ -19,10 +19,14 @@ export declare function RecordCard({ title, subtitle, tags, meta, figure, media,
     tags?: ReactNode;
     meta?: ReactNode;
     figure?: ReactNode;
+    /** The picture of the record. A product's is a square (`Thumb`); a PERSON's is round, with
+     *  the initials when there is no photo — `person`, like `RelationCard`'s. `alt` names the
+     *  person when the title is not plain text. */
     media?: {
         src?: string;
         alt?: string;
         icon?: LucideIcon;
+        person?: true;
     };
     /** The card's last line, its controls: priority, kanban state, next activity, the owner's
      *  avatar — each its own button, pressable without opening the card. */

package/dist/components/listing/RecordCard.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Thumb } from "../../primitives/cell/CellStack.js";
+import { Avatar } from "../../primitives/value/Avatar.js";
 /**
  * One record as a card — the board presentation of a list.
  *
@@ -21,7 +22,9 @@ export function RecordCard({ title, subtitle, tags, meta, figure, media, footer,
     const titleText = _jsx("span", { className: "min-w-0 truncate", children: title });
     return (_jsxs("div", { className: `relative flex w-full min-w-0 flex-col gap-2 rounded-box border border-line bg-surface p-4 text-left ${onOpen === undefined
             ? ""
-            : "transition-colors duration-(--duration-instant) focus-within:border-line-strong hover:border-line-strong"}`, children: [media === undefined ? null : (_jsx(Thumb, { size: "lg", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), tags === undefined ? null : _jsx("div", { className: "flex flex-wrap gap-1.5", children: tags }), _jsxs("div", { className: "flex min-w-0 items-baseline justify-between gap-3", children: [onOpen === undefined ? (_jsx("p", { className: "flex min-w-0 text-lead font-medium text-ink", children: titleText })) : (_jsx("button", { type: "button", onClick: onOpen, className: "flex min-w-0 text-left text-lead font-medium text-ink outline-none after:absolute after:inset-0 after:rounded-box focus-visible:after:outline-2 focus-visible:after:outline-primary", children: titleText })), figure === undefined ? null : (_jsx("p", { className: "shrink-0 text-lead font-semibold tabular-nums text-ink", children: figure }))] }), subtitle === undefined ? null : (
+            : "transition-colors duration-(--duration-instant) focus-within:border-line-strong hover:border-line-strong"}`, children: [media === undefined ? null : media.person === true ? (
+            /* The name is written right below it: the photo's `alt` would say it twice. */
+            _jsx("span", { "aria-hidden": true, className: "flex shrink-0", children: _jsx(Avatar, { name: media.alt ?? (typeof title === "string" ? title : ""), size: "xl", ...(media.src === undefined ? {} : { src: media.src }) }) })) : (_jsx(Thumb, { size: "lg", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), tags === undefined ? null : _jsx("div", { className: "flex flex-wrap gap-1.5", children: tags }), _jsxs("div", { className: "flex min-w-0 items-baseline justify-between gap-3", children: [onOpen === undefined ? (_jsx("p", { className: "flex min-w-0 text-lead font-medium text-ink", children: titleText })) : (_jsx("button", { type: "button", onClick: onOpen, className: "flex min-w-0 text-left text-lead font-medium text-ink outline-none after:absolute after:inset-0 after:rounded-box focus-visible:after:outline-2 focus-visible:after:outline-primary", children: titleText })), figure === undefined ? null : (_jsx("p", { className: "shrink-0 text-lead font-semibold tabular-nums text-ink", children: figure }))] }), subtitle === undefined ? null : (
             /* Above the stretched title, at its own width: the subtitle may be a link to ANOTHER
                record (the customer), which must open that one and not the card. */
             _jsx("p", { className: "relative z-10 -mt-1.5 w-fit max-w-full min-w-0 truncate text-meta text-muted", children: subtitle })), meta === undefined ? null : (_jsx("p", { className: "text-micro tabular-nums text-muted", children: meta })), footer === undefined ? null : (_jsx("div", { className: "relative z-10 flex min-w-0 items-center gap-1.5", children: footer }))] }));

package/dist/components/record/DirtyActions.d.ts

@@ -7,9 +7,13 @@ export interface DirtyState {
     /** What gets saved, when it is not obvious: «guardar la factura», «guardar la
      *  regla». */
     label?: string;
-    /** Why it CANNOT be saved yet. Present = the button is off and the reason is
-     *  in its `title` — a button that is off with no reason is a wall. */
+    /** Why it CANNOT be saved yet. Present = the button is off and the reason is written
+     *  where the «unsaved» mark was — a button that is off with no reason is a wall, and a
+     *  reason in a `title` reaches neither the keyboard nor a finger. */
     blocked?: string;
+    /** How many fields changed: «2 cambios sin guardar» instead of a bare «sin guardar». The
+     *  fields themselves are marked by their `Field changed`. */
+    changes?: number;
 }
 /** Save and discard, in the rail and in place of the action buttons.
  *
@@ -20,7 +24,17 @@ export interface DirtyState {
  *  The «sin guardar» warning is text and not just a color: whoever is leaving
  *  the screen has to be able to read what is going on, not deduce it from a
  *  dot. */
-export declare function DirtyActions({ onSave, onDiscard, saving, label, blocked, }: DirtyState): import("react").JSX.Element;
-/** The one action a view leads with: the element written with `role="primary"` — the
- *  same prop that paints it gold and that `make smoke` counts, so there is no second way to
- *  say «this is the main one» that could disagree with the first. */
+export declare function DirtyActions({ onSave, onDiscard, saving, label, blocked, changes, }: DirtyState): import("react").JSX.Element;
+/**
+ * Whether the record has JUST been saved: `dirty` went from saving straight to gone.
+ *
+ * Context: saving ended with the rail silently swapping Save for the usual actions — the
+ * screen changed and said nothing, so each application wrote its own toast, or none. A
+ * failed save does not count: `saving` turns off and `dirty` stays.
+ */
+export declare function useJustSaved(dirty: DirtyState | undefined): boolean;
+/** «✓ Guardado», where Save was, for a moment. The live region is always there — a region
+ *  inserted together with its words is not reliably announced. */
+export declare function SavedMark({ saved }: {
+    saved: boolean;
+}): import("react").JSX.Element;

package/dist/components/record/DirtyActions.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useUiCopy } from "../../foundations/copy.js";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
 import { bySurface, useSurface } from "../../foundations/surface.js";
 import { Button } from "../../primitives/button/Button.js";
-import { Save, Undo2 } from "lucide-react";
+import { Check, Save, Undo2 } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
 /** Save and discard, in the rail and in place of the action buttons.
  *
  *  Context: discard goes to the LEFT of save and with the quieter look. It is
@@ -13,10 +14,60 @@ import { Save, Undo2 } from "lucide-react";
  *  The «sin guardar» warning is text and not just a color: whoever is leaving
  *  the screen has to be able to read what is going on, not deduce it from a
  *  dot. */
-export function DirtyActions({ onSave, onDiscard, saving = false, label, blocked, }) {
+export function DirtyActions({ onSave, onDiscard, saving = false, label, blocked, changes, }) {
     const copy = useUiCopy();
+    const blockedId = useId();
     /* It follows the rail it sits on instead of assuming the dark one: on a light rail the
        chrome palette was white text on white. */
     const surface = useSurface();
-    return (_jsxs(_Fragment, { children: [_jsx("span", { className: `inline-flex h-(--size-control-md) shrink-0 items-center gap-1.5 rounded-control px-2.5 text-meta font-medium ${bySurface(surface, "bg-warn/12 text-warn", "bg-chrome-warn/15 text-chrome-warn")}`, children: copy.record.unsaved }), _jsx(Button, { surface: surface, onClick: onDiscard, disabled: saving, icon: Undo2, children: copy.record.discard }), _jsx("span", { ...(blocked === undefined ? {} : { title: blocked }), children: _jsx(Button, { role: "primary", surface: surface, onClick: onSave, disabled: saving || blocked !== undefined, icon: Save, children: saving ? copy.record.saving : (label ?? copy.record.save) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ...(blocked === undefined ? {} : { id: blockedId }), className: `inline-flex h-(--size-control-md) min-w-0 shrink items-center gap-1.5 truncate rounded-control px-2.5 text-meta font-medium ${bySurface(surface, "bg-warn/12 text-warn", "bg-chrome-warn/15 text-chrome-warn")}`, children: blocked ??
+                    (changes === undefined || changes === 0
+                        ? copy.record.unsaved
+                        : fillCopy(changes === 1 ? copy.record.unsavedOne : copy.record.unsavedMany, {
+                            count: changes.toLocaleString(copy.locale),
+                        })) }), _jsx(Button, { surface: surface, onClick: onDiscard, disabled: saving, icon: Undo2, children: copy.record.discard }), _jsx(Button, { role: "primary", surface: surface, onClick: onSave, busy: saving, disabled: blocked !== undefined, icon: Save, ...(blocked === undefined ? {} : { "aria-describedby": blockedId }), children: saving ? copy.record.saving : (label ?? copy.record.save) })] }));
+}
+/** The one action a view leads with: the element written with `role="primary"` — the
+ *  same prop that paints it gold and that `make smoke` counts, so there is no second way to
+ *  say «this is the main one» that could disagree with the first. */
+/** How long «Guardado» stays: long enough to be seen without looking for it, short enough
+ *  not to stay as one more thing on the rail. */
+const SAVED_FOR = 2400;
+/**
+ * Whether the record has JUST been saved: `dirty` went from saving straight to gone.
+ *
+ * Context: saving ended with the rail silently swapping Save for the usual actions — the
+ * screen changed and said nothing, so each application wrote its own toast, or none. A
+ * failed save does not count: `saving` turns off and `dirty` stays.
+ */
+export function useJustSaved(dirty) {
+    const wasSaving = useRef(false);
+    const [saved, setSaved] = useState(false);
+    const saving = dirty?.saving === true;
+    const present = dirty !== undefined;
+    useEffect(() => {
+        if (saving) {
+            wasSaving.current = true;
+            return;
+        }
+        if (present) {
+            wasSaving.current = false;
+            setSaved(false);
+            return;
+        }
+        if (!wasSaving.current)
+            return;
+        wasSaving.current = false;
+        setSaved(true);
+        const timer = setTimeout(() => setSaved(false), SAVED_FOR);
+        return () => clearTimeout(timer);
+    }, [saving, present]);
+    return saved;
+}
+/** «✓ Guardado», where Save was, for a moment. The live region is always there — a region
+ *  inserted together with its words is not reliably announced. */
+export function SavedMark({ saved }) {
+    const copy = useUiCopy();
+    const surface = useSurface();
+    return (_jsxs(_Fragment, { children: [_jsx("span", { role: "status", className: "sr-only", children: saved ? copy.record.saved : "" }), saved ? (_jsxs("span", { "aria-hidden": true, className: `inline-flex h-(--size-control-md) shrink-0 items-center gap-1.5 rounded-control px-2.5 text-meta font-medium transition-[opacity,translate] duration-(--duration-quick) ease-(--ease-out) starting:-translate-y-0.5 starting:opacity-0 ${bySurface(surface, "bg-good/12 text-good", "bg-chrome-good/15 text-chrome-good")}`, children: [_jsx(Check, { className: "size-(--size-icon-sm)", strokeWidth: 2.5 }), copy.record.saved] })) : null] }));
 }

package/dist/components/record/RecordHeader.d.ts

@@ -2,7 +2,7 @@ import { type Crumb } from "./Breadcrumb.js";
 import { type DirtyState } from "./DirtyActions.js";
 import type { Surface, Tone } from "../../foundations/types.js";
 import type { LucideIcon } from "lucide-react";
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 export type { Surface };
 export declare function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Icon, title, subtitle, tag, figure, railSurface, smart, aspects, dirty, activity, activityLayout, width, ribbon, blocking, indicator, children, }: {
     crumbs?: readonly Crumb[];

package/dist/components/record/RecordHeader.js

@@ -1,15 +1,31 @@
 "use client";
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Breadcrumb } from "./Breadcrumb.js";
-import { DirtyActions, } from "./DirtyActions.js";
+import { DirtyActions, SavedMark, useJustSaved, } from "./DirtyActions.js";
 import { isPrimary, ThumbBar, thumbPlan } from "./ThumbBar.js";
 import { byDensity, useDensity } from "../../foundations/density.js";
 import { SurfaceProvider } from "../../foundations/surface.js";
 import { Line } from "../../primitives/block/Line.js";
 import { Tag } from "../../primitives/tag/Tag.js";
+import { useEffect, useRef } from "react";
 export function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Icon, title, subtitle, tag, figure, railSurface = "canvas", smart, aspects, dirty, activity, activityLayout = "auto", width = "reading", ribbon, blocking, indicator, children, }) {
     const d = useDensity();
-    const hasRail = crumbs !== undefined ||
+    /* «Guardado» is said where Save was; a record whose rail exists only while it has changes
+       keeps it for that moment, or the answer would leave with the question. */
+    const saved = useJustSaved(dirty);
+    /* Save is gone the moment it has saved, and the focus that was on it fell to the page —
+       a keyboard was left at the top of the document. It comes back to the record's name:
+       where reading the record starts, and announced together with «Guardado». */
+    const nameRef = useRef(null);
+    useEffect(() => {
+        if (!saved)
+            return;
+        const lost = document.activeElement === null || document.activeElement === document.body;
+        if (lost)
+            nameRef.current?.focus({ preventScroll: true });
+    }, [saved]);
+    const hasRail = saved ||
+        crumbs !== undefined ||
         pager !== undefined ||
         actions !== undefined ||
         status !== undefined ||
@@ -40,12 +56,14 @@ export function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Ico
        shadow. It exists on the PAGE, where the chrome rail is a real band
        (crumbs, pager, actions). A drawer is compact so `withRail` is already
        false. A dialog is comfortable but has no crumbs or actions — and it IS
-       already a card. Status alone is not a page. */
-    const paper = withRail &&
-        (crumbs !== undefined ||
-            pager !== undefined ||
-            actions !== undefined ||
-            dirty !== undefined);
+       already a card. Status alone is not a page.
+  
+       And `dirty` does not decide it. Whether the record sits on paper is a fact of WHERE it
+       is mounted, and that does not change while someone types; `dirty` does, with the first
+       letter. Deciding by it swapped the whole tree under the paper at that letter — the field
+       being written was unmounted and lost the focus. Save and Discard still appear: in the
+       rail, which is a sibling and moves nothing. */
+    const paper = withRail && (crumbs !== undefined || pager !== undefined || actions !== undefined);
     /* ONE column for the rail and the page: the rail used to span the screen while the sheet
        stopped at 72rem, so on a wide desk the buttons sat 250 px left of the paper they act on
        and the record read as two things. */
@@ -58,7 +76,7 @@ export function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Ico
                                             /* `display`, not `title`: the record's name is the entry point of the
                                                screen. At the title size (19 px over a 13 px body, 1.46:1) nothing on
                                                the sheet stood out and the eye had nowhere to start. */
-                                            _jsx("h1", { className: "min-w-0 truncate text-display font-semibold text-ink", children: title })), tag === undefined ? null : _jsx(Tag, { tone: tag.tone, children: tag.label })] }), subtitle === undefined || !withIdentity ? null : (_jsx("p", { className: "mt-0.5 truncate text-lead text-ink", children: subtitle }))] })] }), figure === undefined || !withIdentity ? null : (_jsxs("div", { className: "ml-auto flex shrink-0 flex-col items-end", children: [_jsx("span", { className: "text-micro font-medium text-muted", children: figure.label }), _jsx("span", { className: "text-display font-semibold tabular-nums text-ink", children: figure.value })] }))] }), withRail || status === undefined ? null : (_jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: status })), aspects === undefined ? null : (
+                                            _jsx("h1", { ref: nameRef, tabIndex: -1, className: "min-w-0 truncate text-display font-semibold text-ink outline-0", children: title })), tag === undefined ? null : _jsx(Tag, { tone: tag.tone, children: tag.label })] }), subtitle === undefined || !withIdentity ? null : (_jsx("p", { className: "mt-0.5 truncate text-lead text-ink", children: subtitle }))] })] }), figure === undefined || !withIdentity ? null : (_jsxs("div", { className: "ml-auto flex shrink-0 flex-col items-end", children: [_jsx("span", { className: "text-micro font-medium text-muted", children: figure.label }), _jsx("span", { className: "text-display font-semibold tabular-nums text-ink", children: figure.value })] }))] }), withRail || status === undefined ? null : (_jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: status })), aspects === undefined ? null : (
             /* The line is the sheet's mouth. In comfortable it walks to the
                  edges; the current tab sits on it and opens into the page below. */
             _jsx("div", { className: `border-b border-line-strong ${byDensity(d, "-mx-4 px-4", "")}`, children: aspects }))] }));
@@ -68,14 +86,15 @@ export function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Ico
                                      it. The line wraps on a phone, so it is never pushed out of reach. */
                                     smart === undefined && indicator === undefined ? undefined : (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center justify-center gap-2", children: [smart, indicator] })), end: pager }), actions === undefined &&
                                     status === undefined &&
-                                    dirty === undefined ? null : (
+                                    dirty === undefined &&
+                                    !saved ? null : (
                                 /* Row 2 — WHAT I CAN DO and WHERE IT IS AT: actions stuck to the
                              left edge, the history and the state stuck to the right one. No
                              `flex-wrap`: wrapping split the row in two and the state ended up
                              below the actions, which is another hierarchy. */
-                                _jsxs("div", { className: "flex min-w-0 items-start gap-x-4", children: [dirty !== undefined ? (_jsx("div", { className: "flex shrink-0 items-center gap-1.5 @max-handheld/record:hidden", children: _jsx(DirtyActions, { ...dirty }) })) : actions === undefined ? null : (_jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: primaries.length === 0
-                                                ? actions
-                                                : railActions.map((node) => isPrimary(node) ? (_jsx("span", { "data-thumb-moves": "", className: "contents @max-handheld/record:hidden", children: node }, node.key)) : (node)) })), status === undefined ? null : (_jsx("div", { className: "ml-auto flex min-w-0 flex-col items-end gap-1.5", children: status }))] }))] }) }) }) })) : null, paper ? (
+                                _jsxs("div", { className: "flex min-w-0 items-start gap-x-4", children: [dirty !== undefined ? (_jsx("div", { className: "flex shrink-0 items-center gap-1.5 @max-handheld/record:hidden", children: _jsx(DirtyActions, { ...dirty }) })) : actions === undefined ? (_jsx(SavedMark, { saved: saved })) : (_jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [primaries.length === 0
+                                                    ? actions
+                                                    : railActions.map((node) => isPrimary(node) ? (_jsx("span", { "data-thumb-moves": "", className: "contents @max-handheld/record:hidden", children: node }, node.key)) : (node)), _jsx(SavedMark, { saved: saved })] })), status === undefined ? null : (_jsx("div", { className: "ml-auto flex min-w-0 flex-col items-end gap-1.5", children: status }))] }))] }) }) }) })) : null, paper ? (
             /* ==================================================================== *
              *  THE PAGE — [sheet | Actividad], on the ground.
              *

package/dist/components/record/RecordSkeleton.js

@@ -17,5 +17,5 @@ const SOLAPAS = ["w-14", "w-16", "w-20"];
 export function RecordSkeleton({ label }) {
     const d = useDensity();
     const page = d === "comfortable";
-    return (_jsxs("article", { "aria-busy": "true", className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "sr-only", children: label }), page ? (_jsxs("div", { "aria-hidden": true, className: "flex items-center gap-3 bg-chrome px-3.5 py-2.5", children: [_jsx("span", { className: "h-3 w-24 rounded-control bg-chrome-ink/15" }), _jsx("span", { className: "h-3 w-40 rounded-control bg-chrome-ink/10" }), _jsx("span", { className: "ml-auto h-(--size-control-sm) w-28 rounded-control bg-chrome-ink/15" })] })) : null, _jsx("div", { "aria-hidden": true, className: page ? "border border-line bg-surface" : "bg-surface", children: _jsxs("div", { className: `flex flex-col ${byDensity(d, "gap-3 px-4 pt-3.5 pb-4", "gap-2 py-2")}`, children: [_jsx("span", { className: "h-5 w-72 max-w-full rounded-control bg-ink/8" }), _jsx("div", { className: "flex flex-wrap gap-x-6 gap-y-2", children: HECHOS.map((width) => (_jsxs("span", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "h-2.5 w-10 rounded-control bg-ink/5" }), _jsx("span", { className: `h-3.5 rounded-control bg-ink/8 ${width}` })] }, width))) }), _jsx("div", { className: "flex gap-4 border-b border-line pb-2", children: SOLAPAS.map((width, i) => (_jsx("span", { className: `h-3 rounded-control ${i === 0 ? "bg-ink/10" : "bg-ink/5"} ${width}` }, width))) }), _jsx("span", { className: "h-24 rounded-box bg-ink/5" })] }) })] }));
+    return (_jsxs("article", { "aria-busy": "true", className: "flex min-w-0 animate-reveal-late flex-col", children: [_jsx("span", { className: "sr-only", children: label }), page ? (_jsxs("div", { "aria-hidden": true, className: "flex items-center gap-3 bg-chrome px-3.5 py-2.5", children: [_jsx("span", { className: "h-3 w-24 rounded-control bg-chrome-ink/15" }), _jsx("span", { className: "h-3 w-40 rounded-control bg-chrome-ink/10" }), _jsx("span", { className: "ml-auto h-(--size-control-sm) w-28 rounded-control bg-chrome-ink/15" })] })) : null, _jsx("div", { "aria-hidden": true, className: page ? "border border-line bg-surface" : "bg-surface", children: _jsxs("div", { className: `flex flex-col ${byDensity(d, "gap-3 px-4 pt-3.5 pb-4", "gap-2 py-2")}`, children: [_jsx("span", { className: "h-5 w-72 max-w-full rounded-control bg-ink/8" }), _jsx("div", { className: "flex flex-wrap gap-x-6 gap-y-2", children: HECHOS.map((width) => (_jsxs("span", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "h-2.5 w-10 rounded-control bg-ink/5" }), _jsx("span", { className: `h-3.5 rounded-control bg-ink/8 ${width}` })] }, width))) }), _jsx("div", { className: "flex gap-4 border-b border-line pb-2", children: SOLAPAS.map((width, i) => (_jsx("span", { className: `h-3 rounded-control ${i === 0 ? "bg-ink/10" : "bg-ink/5"} ${width}` }, width))) }), _jsx("span", { className: "h-24 rounded-box bg-ink/5" })] }) })] }));
 }

package/dist/components/search/SearchBar.js

@@ -74,6 +74,11 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
     const input = useRef(null);
     const box = useRef(null);
     const id = useId();
+    /* The suggestions are the input's popup (the ARIA combobox pattern): the input keeps the
+       focus and says which list it controls and which option is the active one, so a screen
+       reader announces «Nombre del cliente · contiene Globex» as the option it is. */
+    const listId = useId();
+    const optionId = (at) => `${listId}-${at}`;
     /**
      * Los campos por los que se puede preguntar.
      *
@@ -290,7 +295,9 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
                                                 removeLabel: copy.search.dropOp,
                                             },
                                         ]),
-                                ] }), _jsx("input", { ref: input, "aria-label": copy.choice.search, value: text, onChange: (e) => setText(e.target.value), onKeyDown: (e) => {
+                                ] }), _jsx("input", { ref: input, "aria-label": copy.choice.search, role: "combobox", "aria-autocomplete": "list", "aria-expanded": open, ...(open ? { "aria-controls": listId } : {}), ...(open && !asTags && suggestions[active] !== undefined
+                                    ? { "aria-activedescendant": optionId(active) }
+                                    : {}), value: text, onChange: (e) => setText(e.target.value), onKeyDown: (e) => {
                                     /* Retroceso con el campo vacío saca la ÚLTIMA instancia: el gesto
                                        que ya existe en cualquier campo de fichas y el único que se
                                        descubre sin que nadie lo explique. La última y no la última de
@@ -392,7 +399,7 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
                     /* UNA LISTA, no una tira. Se está ELIGIENDO: el ojo baja por una
                        columna y el teclado también. Doce atributos doblados en tres
                        renglones son doce cosas que barrer en zigzag para encontrar una. */
-                    _jsx("div", { className: "max-h-72 overflow-y-auto p-1", children: _jsx(Tags, { stack: true, surface: "canvas", label: step.field !== undefined ? copy.search.askOp : copy.search.askAttribute, items: suggestions.map((one, at) => ({
+                    _jsx("div", { id: listId, className: "max-h-72 overflow-y-auto p-1", children: _jsx(Tags, { stack: true, surface: "canvas", label: step.field !== undefined ? copy.search.askOp : copy.search.askAttribute, items: suggestions.map((one, at) => ({
                                 id: one.id,
                                 label: one.label,
                                 ...(one.kind === "op"
@@ -402,7 +409,9 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
                                         : {}),
                                 active: at === active,
                                 onSelect: () => pick(one),
-                            })) }) })) : (_jsx("div", { className: "p-1", children: suggestions.map((one, at) => (_jsxs("button", { type: "button", onClick: () => pick(one), onMouseEnter: () => setActive(at), className: `flex w-full items-baseline gap-1.5 rounded-control px-2 py-1.5 text-left text-meta transition-colors duration-(--duration-instant) ${at === active ? "bg-primary/8" : "hover:bg-ink/4"}`, children: [_jsx("span", { className: "shrink-0 font-medium text-ink", children: one.label }), one.kind === "condition" || one.kind === "literal" ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "shrink-0 text-muted", children: ":" }), _jsx("span", { className: "min-w-0 truncate font-mono text-micro text-ink", children: one.hint })] })) : one.kind === "field" && one.hint !== undefined ? (_jsx("span", { className: "inline-flex shrink-0 items-center rounded-pill border border-line-strong bg-ink/5 px-2 py-0.5 text-micro text-muted", children: one.hint })) : null] }, one.id))) }))] })) : null, panel && (columns.length > 0 || onOpenBuilder !== undefined) ? (_jsxs("div", { id: id, className: "absolute top-full right-0 z-30 mt-1 flex w-max max-w-full flex-wrap overflow-hidden rounded-panel border border-line-strong bg-surface shadow-float", children: [columns.map((c, i) => (_jsxs("div", { className: `flex min-w-48 flex-1 flex-col ${i === 0 ? "" : "border-t border-line sm:border-t-0 sm:border-l"}`, children: [_jsx("div", { className: "border-b border-line px-2.5 py-1.5 text-micro font-medium text-muted", children: c.title }), _jsx("div", { className: "flex flex-col gap-0.5 p-1", children: c.content ??
+                            })) }) })) : (_jsx("div", { id: listId, role: "listbox", "aria-label": copy.search.suggestions, className: "p-1", children: suggestions.map((one, at) => (_jsxs("div", { id: optionId(at), role: "option", "aria-selected": at === active, 
+                            /* The input keeps the focus: pressing an option must not take it. */
+                            onMouseDown: (event) => event.preventDefault(), onClick: () => pick(one), onMouseEnter: () => setActive(at), className: `flex w-full cursor-pointer items-baseline gap-1.5 rounded-control px-2 py-1.5 text-left text-meta transition-colors duration-(--duration-instant) ${at === active ? "bg-primary/8" : "hover:bg-ink/4"}`, children: [_jsx("span", { className: "shrink-0 font-medium text-ink", children: one.label }), one.kind === "condition" || one.kind === "literal" ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "shrink-0 text-muted", children: ":" }), _jsx("span", { className: "min-w-0 truncate font-mono text-micro text-ink", children: one.hint })] })) : one.kind === "field" && one.hint !== undefined ? (_jsx("span", { className: "inline-flex shrink-0 items-center rounded-pill border border-line-strong bg-ink/5 px-2 py-0.5 text-micro text-muted", children: one.hint })) : null] }, one.id))) }))] })) : null, panel && (columns.length > 0 || onOpenBuilder !== undefined) ? (_jsxs("div", { id: id, className: "absolute top-full right-0 z-30 mt-1 flex w-max max-w-full flex-wrap overflow-hidden rounded-panel border border-line-strong bg-surface shadow-float", children: [columns.map((c, i) => (_jsxs("div", { className: `flex min-w-48 flex-1 flex-col ${i === 0 ? "" : "border-t border-line sm:border-t-0 sm:border-l"}`, children: [_jsx("div", { className: "border-b border-line px-2.5 py-1.5 text-micro font-medium text-muted", children: c.title }), _jsx("div", { className: "flex flex-col gap-0.5 p-1", children: c.content ??
                                     c.groups?.map((g, gi) => (_jsx(Group, { group: g, first: gi === 0, onSelect: c.onSelect }, g.label ?? gi))) })] }, c.title))), onOpenBuilder === undefined ? null : (_jsx("div", { className: "w-full border-t border-line p-1", children: _jsxs("button", { type: "button", onClick: () => {
                                 onOpenBuilder();
                                 setPanel(false);

package/dist/foundations/copy.d.ts

@@ -70,8 +70,13 @@ export type UiCopy = {
         faces: string;
         /** The mark of a record with changes that are not saved yet. */
         unsaved: string;
+        /** The same mark when the record says how many fields changed. */
+        unsavedOne: string;
+        unsavedMany: string;
         save: string;
         saving: string;
+        /** Said, briefly, once what was saved is saved. */
+        saved: string;
         discard: string;
         /** Read aloud next to a stage that failed: the red fill alone says nothing to a
          *  screen reader. */
@@ -115,6 +120,8 @@ export type UiCopy = {
         unset: string;
         /** A list of checks read with nothing chosen. */
         none: string;
+        /** Next to the label of a field whose value changed and is not saved yet. */
+        changed: string;
     };
     /** The choice controls: combo boxes, selects, suggestion lists. */
     choice: {
@@ -127,6 +134,8 @@ export type UiCopy = {
     };
     search: {
         tools: string;
+        /** The name of the list of what the bar offers for what was typed. */
+        suggestions: string;
         /** The name of the panel button once something is set: it shows the count, and what
          *  the button SHOWS has to be inside its name (WCAG 2.5.3) — `{label}` is `tools`. */
         toolsSetOne: string;
@@ -259,6 +268,8 @@ export type UiCopy = {
          *  record itself. */
         peek: string;
         open: string;
+        /** Asked again while the rows stay: the name of the discreet bar over them. */
+        refreshing: string;
     };
     /** La historia de un registro: eventos y mensajes. */
     /** The panel of everything around a record: its notices, its conversation and its

package/dist/foundations/copy.es.js

@@ -72,8 +72,11 @@ export const SPANISH_COPY = {
         status: "Estado",
         faces: "Caras",
         unsaved: "sin guardar",
+        unsavedOne: "1 cambio sin guardar",
+        unsavedMany: "{count} cambios sin guardar",
         save: "Guardar",
         saving: "Guardando…",
+        saved: "Guardado",
         discard: "Descartar",
         failed: "falló",
         notices: "Avisos sobre este registro",
@@ -106,6 +109,7 @@ export const SPANISH_COPY = {
         help: "Ayuda",
         unset: "sin definir",
         none: "Ninguna",
+        changed: "modificado",
     },
     choice: {
         noResults: "Sin resultados",
@@ -127,6 +131,7 @@ export const SPANISH_COPY = {
     },
     search: {
         tools: "Filtrar, agrupar y favoritos",
+        suggestions: "Sugerencias",
         toolsSetOne: "{label}, {count} puesto",
         toolsSetMany: "{label}, {count} puestos",
         editChip: "Clic para editar",
@@ -209,6 +214,7 @@ export const SPANISH_COPY = {
         count: "{count} registros",
         peek: "Vista previa",
         open: "Abrir",
+        refreshing: "Actualizando la lista…",
     },
     activity: {
         bySystem: "el sistema",

package/dist/foundations/copy.js

@@ -48,8 +48,11 @@ export const ENGLISH_COPY = {
         status: "Status",
         faces: "Record faces",
         unsaved: "unsaved",
+        unsavedOne: "1 change unsaved",
+        unsavedMany: "{count} changes unsaved",
         save: "Save",
         saving: "Saving…",
+        saved: "Saved",
         discard: "Discard",
         failed: "failed",
         notices: "Notices about this record",
@@ -82,6 +85,7 @@ export const ENGLISH_COPY = {
         help: "Help",
         unset: "not set",
         none: "None",
+        changed: "changed",
     },
     choice: {
         noResults: "No results",
@@ -89,6 +93,7 @@ export const ENGLISH_COPY = {
     },
     search: {
         tools: "Filter, group and favorites",
+        suggestions: "Suggestions",
         toolsSetOne: "{label}, {count} applied",
         toolsSetMany: "{label}, {count} applied",
         editChip: "Click to edit",
@@ -157,6 +162,7 @@ export const ENGLISH_COPY = {
         count: "{count} records",
         peek: "Quick look",
         open: "Open",
+        refreshing: "Updating the list…",
     },
     activity: {
         bySystem: "the system",

package/dist/primitives/button/Button.d.ts

@@ -1,5 +1,5 @@
 import type { Surface } from "../../foundations/types.js";
-import type { LucideIcon } from "lucide-react";
+import { type LucideIcon } from "lucide-react";
 import type { ComponentPropsWithRef, ReactNode } from "react";
 export type ButtonRole = "primary" | "secondary" | "ghost" | "danger";
 export type ButtonSize = "sm" | "md" | "lg";
@@ -53,8 +53,18 @@ export type ButtonProps = NativeProps<"button", "type" | "disabled" | "title" |
     expanded?: boolean;
     /** What it opens, written to `aria-haspopup`. `menu` when absent. */
     haspopup?: ButtonPopup;
+    /**
+     * What it started is running — saving, publishing, registering a payment.
+     *
+     * Context: the buttons said it by turning `disabled`, and a disabled button drops the focus
+     * to the page: whoever pressed Save with the keyboard was left nowhere, and a press while
+     * it ran was silently lost or — worse — sent twice. Busy, the button KEEPS the focus and
+     * its width (the label stays), says so (`aria-busy`, a turning mark where its icon was) and
+     * ignores presses until it is done.
+     */
+    busy?: boolean;
 };
-export declare function Button({ children, role, size, surface: surfaceProp, icon: Icon, disabled, title, type, expanded, haspopup, ref, ...native }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ children, role, size, surface: surfaceProp, icon: Icon, disabled, title, type, expanded, haspopup, busy, ref, onClick, ...native }: ButtonProps): import("react").JSX.Element;
 export type ButtonLinkProps = NativeProps<"a", "href" | "download" | "title"> & {
     children: ReactNode;
     href: string;

package/dist/primitives/button/Button.js

@@ -60,6 +60,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * ==================================================================== */
 import { useSurface } from "../../foundations/surface.js";
 import { Tooltip, TooltipTrigger, useInTooltipTrigger, } from "../overlay/Tooltip.js";
+import { LoaderCircle } from "lucide-react";
 /** The height comes from `--size-control-*`; the padding and the type follow.
  *
  *      sm  a row, the header of a block
@@ -146,10 +147,19 @@ function popupAttrs(expanded, haspopup) {
         ...(expanded === undefined ? {} : { "aria-expanded": expanded }),
     };
 }
-export function Button({ children, role = "secondary", size = "md", surface: surfaceProp, icon: Icon, disabled = false, title, type = "button", expanded, haspopup, ref, ...native }) {
+export function Button({ children, role = "secondary", size = "md", surface: surfaceProp, icon: Icon, disabled = false, title, type = "button", expanded, haspopup, busy = false, ref, onClick, ...native }) {
     const surface = useSurface(surfaceProp);
     const ic = ICON[size];
-    return (_jsxs("button", { ...native, ref: ref, type: type, title: title, disabled: disabled, ...popupAttrs(expanded, haspopup), "data-emphasis": role, className: buttonClasses(role, size, surface), children: [Icon === undefined ? null : (_jsx(Icon, { className: `${ic.size} shrink-0`, strokeWidth: ic.stroke, "aria-hidden": true })), children] }));
+    const Mark = busy ? LoaderCircle : Icon;
+    return (_jsxs("button", { ...native, ref: ref, type: type, title: title, disabled: disabled, ...(busy ? { "aria-busy": true, "aria-disabled": true } : {}), onClick: (event) => {
+            if (busy) {
+                event.preventDefault();
+                return;
+            }
+            onClick?.(event);
+        }, ...popupAttrs(expanded, haspopup), "data-emphasis": role, className: busy
+            ? `${buttonClasses(role, size, surface)} cursor-progress`
+            : buttonClasses(role, size, surface), children: [Mark === undefined ? null : (_jsx(Mark, { className: `${ic.size} shrink-0 ${busy ? "motion-safe:animate-spin" : ""}`, strokeWidth: ic.stroke, "aria-hidden": true })), children] }));
 }
 /**
  * The same button, but it is a real link.

package/dist/primitives/cell/CellStack.js

@@ -32,5 +32,5 @@ export function Thumb({ src, alt, icon: Icon, size = "md", }) {
 export function CellStack({ primary, secondary, media, avatar, wrap = false, }) {
     return (_jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [avatar !== undefined ? (
             /* The name is written beside it: the photo's `alt` would say it twice. */
-            _jsx("span", { "aria-hidden": true, className: "flex shrink-0", children: _jsx(Avatar, { name: avatar.name, size: "lg", ...(avatar.src === undefined ? {} : { src: avatar.src }) }) })) : media === undefined ? null : (_jsx(Thumb, { size: "md", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-meta font-medium text-ink", ...(typeof primary === "string" ? { title: primary } : {}), children: primary }), secondary === undefined ? null : (_jsx("span", { className: `text-micro text-muted ${wrap ? "line-clamp-2" : "truncate"}`, ...(typeof secondary === "string" ? { title: secondary } : {}), children: secondary }))] })] }));
+            _jsx("span", { "aria-hidden": true, className: "flex shrink-0", children: _jsx(Avatar, { name: avatar.name, size: "lg", ...(avatar.src === undefined ? {} : { src: avatar.src }) }) })) : media === undefined ? null : (_jsx(Thumb, { size: "md", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "line-clamp-1 text-meta font-medium break-all text-ink", ...(typeof primary === "string" ? { title: primary } : {}), children: primary }), secondary === undefined ? null : (_jsx("span", { className: `text-micro text-muted ${wrap ? "line-clamp-2" : "line-clamp-1 break-all"}`, ...(typeof secondary === "string" ? { title: secondary } : {}), children: secondary }))] })] }));
 }

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

@@ -2,7 +2,7 @@ import { type FieldIds } from "../../foundations/form.js";
 import { type FormMode } from "../../foundations/form.js";
 import { type FieldNote } from "./note.js";
 import { type ReactNode } from "react";
-export declare function Field({ label, hint, error, required, children, htmlFor, layout, action, mode, note, copy: copyAs, }: {
+export declare function Field({ label, hint, error, required, children, htmlFor, layout, action, mode, note, changed, copy: copyAs, }: {
     label: string;
     /** What is expected. A `?` on the label that opens it on press. */
     hint?: string;
@@ -32,8 +32,13 @@ export declare function Field({ label, hint, error, required, children, htmlFor,
      *  Aplicar». A card in the record's margin when there is one, a `Flag` by the label when
      *  there is not; its sentence describes the control (`aria-describedby`). See `note.tsx`. */
     note?: FieldNote;
-    /** The copy button by the label (see `copy.tsx`): on by default, copying what the control
-     *  shows. A string copies that instead; `false` removes the button from this field. */
+    /** Its value changed and is not saved yet. A dot by the label says WHICH fields a
+     *  «2 cambios sin guardar» is about — in a form of twenty, the reason to look before
+     *  saving — and it is read as part of the field's description. */
+    changed?: boolean;
+    /** The copy button by the label (see `clipboard.tsx`): on by default, copying what the
+     *  control shows. A string copies that instead; `false` removes the button from this
+     *  field. */
     copy?: string | false;
 }): import("react").JSX.Element;
 /**

package/dist/primitives/field/Field.js

@@ -40,7 +40,7 @@ import { Button as AriaButton, Input, ListBox, ListBoxItem, NumberField as AriaN
  *  control ate a line on every field. The error still goes below, close to
  *  the cursor, and it says what to put.
  * ==================================================================== */
-export function Field({ label, hint, error, required = false, children, htmlFor, layout, action, mode, note, copy: copyAs, }) {
+export function Field({ label, hint, error, required = false, children, htmlFor, layout, action, mode, note, changed = false, copy: copyAs, }) {
     const d = useDensity();
     const copy = useUiCopy();
     const copies = useFieldCopy() && copyAs !== false;
@@ -52,9 +52,13 @@ export function Field({ label, hint, error, required = false, children, htmlFor,
     const hintId = `${id}-hint`;
     const errorId = `${id}-error`;
     const noteId = `${id}-note`;
+    const changedId = `${id}-changed`;
     /* The error first: what has to be corrected is heard before what is worth knowing. */
-    const describedBy = describedByOf(hint === undefined ? null : hintId, error === undefined ? null : errorId, note === undefined ? null : noteId);
-    const labelNode = (_jsxs("span", { className: `flex min-w-0 items-center gap-1 text-micro font-medium text-muted ${inline ? "pt-2" : ""}`, children: [_jsxs("label", { id: `${id}-label`, htmlFor: id, className: inline ? "min-w-0 truncate" : "", children: [label, required ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "text-ink", "aria-hidden": true, children: [" ", "*"] }), _jsxs("span", { className: "sr-only", children: [", ", copy.field.required] })] })) : null] }), hint === undefined ? null : _jsx(Hint, { id: hintId, children: hint }), note === undefined ? null : _jsx(NoteFlag, { note: note }), copies ? (_jsx(FieldCopy, { label: label, scope: shown, ...(typeof copyAs === "string" ? { value: copyAs } : {}) })) : null] }));
+    const describedBy = describedByOf(hint === undefined ? null : hintId, error === undefined ? null : errorId, note === undefined ? null : noteId, changed ? changedId : null);
+    const labelNode = (
+    /* The label follows its control's focus: in a form of twenty fields, the eye finds the
+       row being written by its name as much as by the ring. */
+    _jsxs("span", { className: `flex min-w-0 items-center gap-1 text-micro font-medium text-muted transition-colors duration-(--duration-quick) group-focus-within/field:text-primary ${inline ? "pt-2" : ""}`, children: [_jsxs("label", { id: `${id}-label`, htmlFor: id, className: inline ? "min-w-0 truncate" : "", children: [label, required ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "text-ink", "aria-hidden": true, children: [" ", "*"] }), _jsxs("span", { className: "sr-only", children: [", ", copy.field.required] })] })) : null] }), hint === undefined ? null : _jsx(Hint, { id: hintId, children: hint }), note === undefined ? null : _jsx(NoteFlag, { note: note }), changed ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, title: copy.field.changed, className: "size-1.5 shrink-0 rounded-pill bg-accent transition-transform duration-(--duration-quick) ease-(--ease-out) starting:scale-0" }), _jsx("span", { id: changedId, className: "sr-only", children: copy.field.changed })] })) : null, copies ? (_jsx(FieldCopy, { label: label, scope: shown, ...(typeof copyAs === "string" ? { value: copyAs } : {}) })) : null] }));
     /* Last in the field so it is read last; absolutely placed, it still sits at the field's
        top — the static position of an absolute child of a flex or grid box is its start. */
     const noteCard = note === undefined ? null : _jsx(NoteCard, { note: note, id: noteId, owner: label });

package/dist/primitives/notice/Notice.js

@@ -27,7 +27,9 @@ import { AlertTriangle, PackageX } from "lucide-react";
 const SKELETON_NAME = ["w-48", "w-36", "w-56", "w-40", "w-44", "w-32"];
 export function Skeleton({ rows = 6, label, }) {
     const d = useDensity();
-    return (_jsxs("div", { "aria-busy": "true", className: "flex flex-col", children: [_jsx("span", { className: "sr-only", children: label }), Array.from({ length: rows }, (_, i) => (_jsxs("div", { "aria-hidden": true, className: `flex items-center ${byDensity(d, "gap-3 px-2 py-2", "gap-2 px-1.5 py-1")}`, children: [_jsx("span", { className: `h-3.5 rounded-control bg-ink/8 ${SKELETON_NAME[i % SKELETON_NAME.length]}` }), _jsx("span", { className: "ml-auto h-3 w-14 rounded-control bg-ink/5" })] }, i)))] }));
+    return (
+    /* It appears late (`animate-reveal-late`): a read faster than 200ms never shows it. */
+    _jsxs("div", { "aria-busy": "true", className: "flex animate-reveal-late flex-col", children: [_jsx("span", { className: "sr-only", children: label }), Array.from({ length: rows }, (_, i) => (_jsxs("div", { "aria-hidden": true, className: `flex items-center ${byDensity(d, "gap-3 px-2 py-2", "gap-2 px-1.5 py-1")}`, children: [_jsx("span", { className: `h-3.5 rounded-control bg-ink/8 ${SKELETON_NAME[i % SKELETON_NAME.length]}` }), _jsx("span", { className: "ml-auto h-3 w-14 rounded-control bg-ink/5" })] }, i)))] }));
 }
 /** What is shown when there is nothing to show: a sentence, and the gesture
  *  that resolves it if there is one. Never a drawing. */

package/dist/primitives/table/EditableTable.js

@@ -602,7 +602,11 @@ 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", children: [_jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsxs("tr", { 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 }, className: `border-b border-line-strong ${HEADER_TEXT} ${cell} ${c.numeric === true ? "text-right" : "text-left"}`, children: c.header }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: "w-0 border-b border-line-strong" }))] }) }), _jsx("tbody", { ...(reorderable
+    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", children: [_jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsxs("tr", { 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" }))] }) }), _jsx("tbody", { ...(reorderable
                                 ? {
                                     onDragOver: overRow,
                                     onDrop: (event) => {

package/dist/tokens.css

@@ -630,6 +630,28 @@
      the corner of the eye. The bar uses it behind `motion-safe:`: with reduced
      motion it stands still. */
   --animate-progress-sweep: progress-sweep 1.6s var(--ease-in-out) infinite;
+
+  /* What appears only if waiting takes long enough to be seen: a skeleton. A read that
+     answers in 150ms showed a skeleton for one frame — a flash that says «something broke»
+     more than «loading». It waits 200ms invisible, then fades in. */
+  --animate-reveal-late: reveal var(--duration-quick) var(--ease-out) 200ms both;
+}
+
+@keyframes reveal {
+  from {
+    opacity: 0;
+  }
+}
+
+/* The focus ring ARRIVES: it closes in from a little farther out while it takes its colour,
+   in 160ms. A ring that pops is found; one that moves is found before the eye looks for it.
+   Only on the controls a person moves through — a dialog or a popover that takes the focus to
+   be announced keeps its own entrance — and only with motion allowed. */
+@keyframes focus-in {
+  from {
+    outline-offset: 5px;
+    outline-color: transparent;
+  }
 }
 
 /* The segment is two fifths of its track: from just off the left edge (-100 % of
@@ -924,6 +946,26 @@
     font-variant-numeric: tabular-nums;
   }
 
+  @media (prefers-reduced-motion: no-preference) {
+    :where(
+      button,
+      a[href],
+      input,
+      textarea,
+      select,
+      summary,
+      [role="tab"],
+      [role="option"],
+      [role="gridcell"],
+      [role="row"],
+      [role="checkbox"],
+      [role="radio"],
+      [role="switch"]
+    ):focus-visible {
+      animation: focus-in var(--duration-quick) var(--ease-out);
+    }
+  }
+
   /* Thin and warm scrollbars. With six panels open, six grey system bars are
      six stripes that say nothing. */
   * {

package/dist/views/list/List.d.ts

@@ -120,9 +120,16 @@ export type ListProps<T extends object> = {
      *  actions — a list to read, like the lines of a record in view mode. One switch, so whoever
      *  passes the handlers generically does not have to strip them one by one. */
     readOnly?: boolean;
-    /** Los tres estados, en un solo lugar. */
+    /** Los estados del conjunto, en un solo lugar.
+     *
+     *  `loading` es la PRIMERA lectura: no hay filas todavía, y se dibuja el esqueleto.
+     *  `refreshing` es volver a preguntar con filas en la mano —se tipeó en la búsqueda, se
+     *  cambió de página—: las filas se quedan y una barra discreta dice que se está
+     *  preguntando. Cambiarlas por un esqueleto en cada pregunta hacía parpadear la tabla, y un
+     *  clic podía caer sobre una fila que ya no estaba. */
     state?: {
         loading?: boolean;
+        refreshing?: boolean;
         error?: string | null;
     };
     /** Vacía POR UN FILTRO es otra situación: no falta contenido, sobra un

package/dist/views/list/ListView.js

@@ -22,6 +22,7 @@ import { Button } from "../../primitives/button/Button.js";
 import { Empty, Failed, Skeleton } from "../../primitives/notice/Notice.js";
 import { PivotTable } from "../../primitives/table/PivotTable.js";
 import { ReportTable } from "../../primitives/table/ReportTable.js";
+import { ProgressBar } from "../../primitives/value/ProgressBar.js";
 import { groupedColumnIds, WIDE_PRESENTS } from "./columns.js";
 import { groupLevelsOf, reportColumnsOf, reportRowsOf, sheetFromColumns, sheetRowsOf, } from "./derive.js";
 import { SheetPresentation, TablePresentation, } from "./presentations.js";
@@ -79,6 +80,7 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
     const density = useDensity();
     const copy = useUiCopy();
     const loading = state?.loading === true;
+    const refreshing = state?.refreshing === true && !loading;
     const error = state?.error ?? null;
     const columnSpecs = useMemo(() => specsFromColumns(columns ?? [], false), [columns]);
     const columnControl = useColumnControl(columnSpecs, {
@@ -331,7 +333,7 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
     /* The list is its own container (`@container`: the presentations adapt to the width
        the LIST has, not the window) and fills the space it is given. Before, every page
        wrapped it in a `div` to get both. */
-    _jsxs("div", { ref: frame, className: "@container flex min-w-0 flex-1 flex-col bg-surface", children: [_jsxs(Listing, { bar: bar, 
+    _jsxs("div", { ref: frame, "aria-busy": refreshing || loading, className: "@container flex min-w-0 flex-1 flex-col bg-surface", children: [_jsxs(Listing, { bar: bar, 
                 /* La barra se queda arriba: con 187 filas, scrollear para ver la última
                    dejaba sin buscador, sin paginador y sin el conmutador.
                    Embedded it does NOT: the record has its own sticky parts (its rail, its tabs),
@@ -344,7 +346,9 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
                         metrics: _jsx("div", { className: "px-3.5", children: metrics }),
                     }), children: [loading ? _jsx(Skeleton, { label: copy.failed.loading }) : null, isEmpty ? (filtered ? (_jsx(Empty, { sentence: empty?.whenFiltered?.sentence ?? copy.list.emptyFiltered, ...(empty?.whenFiltered?.action === undefined
                             ? {}
-                            : { action: empty.whenFiltered.action }) })) : (_jsx(Empty, { sentence: empty?.sentence ?? copy.list.empty, ...(empty?.action === undefined ? {} : { action: empty.action }) }))) : null, loading || isEmpty ? null : body] }), error === null ? null : (_jsx("div", { className: "px-3 pt-(--spacing-block)", children: _jsx(Failed, { heading: copy.failed.list, sentence: error }) })), children] }));
+                            : { action: empty.whenFiltered.action }) })) : (_jsx(Empty, { sentence: empty?.sentence ?? copy.list.empty, ...(empty?.action === undefined ? {} : { action: empty.action }) }))) : null, _jsxs("div", { className: "relative min-w-0", children: [refreshing ? (
+                            /* Over the top edge of the rows, not above them: the rows do not move. */
+                            _jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-20", children: _jsx(ProgressBar, { label: copy.list.refreshing, width: "w-full" }) })) : null, loading || isEmpty ? null : body] })] }), error === null ? null : (_jsx("div", { className: "px-3 pt-(--spacing-block)", children: _jsx(Failed, { heading: copy.failed.list, sentence: error }) })), children] }));
 }
 /** What a list offers when it fails and can be retried. */
 export function RetryAction({ onRetry }) {

package/dist/views/list/types.d.ts

@@ -359,8 +359,16 @@ export type ListViewProps<T extends object> = {
     /** The three states, in a single place. Every view used to re-assemble them
      *  with three nested ternaries, and that is why «empty because of a filter»
      *  and «really empty» got mixed up in half the screens. */
+    /** Los estados del conjunto, en un solo lugar.
+     *
+     *  `loading` es la PRIMERA lectura: no hay filas todavía, y se dibuja el esqueleto.
+     *  `refreshing` es volver a preguntar con filas en la mano —se tipeó en la búsqueda, se
+     *  cambió de página—: las filas se quedan y una barra discreta dice que se está
+     *  preguntando. Cambiarlas por un esqueleto en cada pregunta hacía parpadear la tabla, y un
+     *  clic podía caer sobre una fila que ya no estaba. */
     state?: {
         loading?: boolean;
+        refreshing?: boolean;
         error?: string | null;
     };
     filtered?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/web-ui",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "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",