@entifix/react-controls 0.19.0 → 0.20.0

package/dist/ui/molecules/region-state/region-state.js

@@ -0,0 +1,83 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useErrorMessage, useT } from '../../../i18n/index.js';
+import { useErrorAction } from '../../actions/error-actions.js';
+import { Alert } from '../../atoms/alert/index.js';
+import { Button } from '../../atoms/button/index.js';
+import { EmptyState } from '../empty-state/index.js';
+/**
+ * What a region says when it is not simply showing its content
+ * ([ADR 0028](../../../../../../../docs/adr/0028-states-an-organism-must-render.md)):
+ *
+ * - a **load error** is an `Alert` with Retry — `forbidden` says so in its own
+ *   words — and data kept from before it is marked possibly out of date;
+ * - an **empty result under a filter** says so and offers Clear filters;
+ * - an **empty region** says what appears here, and offers its first record.
+ *
+ * It renders nothing while loading, and nothing when there is content: the
+ * organism's own skeleton and rows speak then. An empty result and a dead
+ * backend never look alike.
+ */ export function RegionState({ plural, isLoading = false, error, onRetry, isEmpty = false, isFiltered = false, onClearFilters, emptyAction, hasStaleData = false }) {
+    const t = useT();
+    const errorMessage = useErrorMessage();
+    const errorAction = useErrorAction();
+    // Read inside a sentence, so as a common noun: "sus facturas".
+    const noun = plural.toLocaleLowerCase();
+    if (error !== undefined) {
+        // The host's next step for this code — "Choose organization" — when it
+        // registered one and its catalog names it.
+        const next = errorAction(error);
+        return /*#__PURE__*/ _jsxs(Alert, {
+            tone: "danger",
+            "data-testid": "region-state-error",
+            action: next === undefined && onRetry === undefined ? undefined : /*#__PURE__*/ _jsxs("span", {
+                className: "flex flex-wrap gap-3xs",
+                children: [
+                    next !== undefined && /*#__PURE__*/ _jsx(Button, {
+                        type: "button",
+                        variant: "primary",
+                        size: "sm",
+                        onClick: next.onAction,
+                        children: next.label
+                    }),
+                    onRetry !== undefined && /*#__PURE__*/ _jsx(Button, {
+                        type: "button",
+                        variant: "secondary",
+                        size: "sm",
+                        onClick: onRetry,
+                        children: t('state.retry')
+                    })
+                ]
+            }),
+            children: [
+                error.code === 'forbidden' ? t('state.forbidden', {
+                    plural: noun
+                }) : errorMessage(error),
+                hasStaleData && ` ${t('state.stale')}`
+            ]
+        });
+    }
+    if (isLoading || !isEmpty) return null;
+    if (isFiltered) {
+        return /*#__PURE__*/ _jsx(EmptyState, {
+            action: onClearFilters === undefined ? undefined : /*#__PURE__*/ _jsx(Button, {
+                type: "button",
+                variant: "secondary",
+                size: "sm",
+                onClick: onClearFilters,
+                children: t('state.clearFilters')
+            }),
+            children: t('state.noResults', {
+                plural: noun
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx(EmptyState, {
+        action: emptyAction,
+        children: t('state.empty', {
+            plural: noun
+        })
+    });
+}
+
+//# sourceMappingURL=region-state.js.map

package/dist/ui/molecules/region-state/region-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/molecules/region-state/region-state.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\n\nimport { useErrorMessage, useT } from '../../../i18n/index.js';\nimport { useErrorAction } from '../../actions/error-actions.js';\nimport { Alert } from '../../atoms/alert/index.js';\nimport { Button } from '../../atoms/button/index.js';\nimport { EmptyState } from '../empty-state/index.js';\n\n/** A failure as the organisms hold it: a typed failure, or anything thrown. */\nexport interface RegionStateError {\n  message: string;\n  code?: unknown;\n  details?: Record<string, unknown>;\n}\n\nexport interface RegionStateProps {\n  /** What the region holds, plural — \"invoices\" — for the state's sentence. */\n  plural: string;\n  /** The first load: the organism's skeleton speaks for it, so nothing here. */\n  isLoading?: boolean;\n  /** A load that failed. */\n  error?: RegionStateError;\n  /** Loads the region again. Without it, an error offers no Retry. */\n  onRetry?: () => void;\n  /** The load answered, with nothing in it. */\n  isEmpty?: boolean;\n  /** A filter is in effect, so an empty answer is the filter's, not the data's. */\n  isFiltered?: boolean;\n  /** Clears every filter — what an empty filtered region offers. */\n  onClearFilters?: () => void;\n  /** What an empty, unfiltered region offers: creating the first record. */\n  emptyAction?: ReactNode;\n  /** Data from before the failure is still on screen. */\n  hasStaleData?: boolean;\n}\n\n/**\n * What a region says when it is not simply showing its content\n * ([ADR 0028](../../../../../../../docs/adr/0028-states-an-organism-must-render.md)):\n *\n * - a **load error** is an `Alert` with Retry — `forbidden` says so in its own\n *   words — and data kept from before it is marked possibly out of date;\n * - an **empty result under a filter** says so and offers Clear filters;\n * - an **empty region** says what appears here, and offers its first record.\n *\n * It renders nothing while loading, and nothing when there is content: the\n * organism's own skeleton and rows speak then. An empty result and a dead\n * backend never look alike.\n */\nexport function RegionState({\n  plural,\n  isLoading = false,\n  error,\n  onRetry,\n  isEmpty = false,\n  isFiltered = false,\n  onClearFilters,\n  emptyAction,\n  hasStaleData = false,\n}: RegionStateProps) {\n  const t = useT();\n  const errorMessage = useErrorMessage();\n  const errorAction = useErrorAction();\n  // Read inside a sentence, so as a common noun: \"sus facturas\".\n  const noun = plural.toLocaleLowerCase();\n\n  if (error !== undefined) {\n    // The host's next step for this code — \"Choose organization\" — when it\n    // registered one and its catalog names it.\n    const next = errorAction(error);\n    return (\n      <Alert\n        tone=\"danger\"\n        data-testid=\"region-state-error\"\n        action={\n          next === undefined && onRetry === undefined ? undefined : (\n            <span className=\"flex flex-wrap gap-3xs\">\n              {next !== undefined && (\n                <Button\n                  type=\"button\"\n                  variant=\"primary\"\n                  size=\"sm\"\n                  onClick={next.onAction}\n                >\n                  {next.label}\n                </Button>\n              )}\n              {onRetry !== undefined && (\n                <Button\n                  type=\"button\"\n                  variant=\"secondary\"\n                  size=\"sm\"\n                  onClick={onRetry}\n                >\n                  {t('state.retry')}\n                </Button>\n              )}\n            </span>\n          )\n        }\n      >\n        {error.code === 'forbidden'\n          ? t('state.forbidden', { plural: noun })\n          : errorMessage(error)}\n        {hasStaleData && ` ${t('state.stale')}`}\n      </Alert>\n    );\n  }\n\n  if (isLoading || !isEmpty) return null;\n\n  if (isFiltered) {\n    return (\n      <EmptyState\n        action={\n          onClearFilters === undefined ? undefined : (\n            <Button\n              type=\"button\"\n              variant=\"secondary\"\n              size=\"sm\"\n              onClick={onClearFilters}\n            >\n              {t('state.clearFilters')}\n            </Button>\n          )\n        }\n      >\n        {t('state.noResults', { plural: noun })}\n      </EmptyState>\n    );\n  }\n\n  return (\n    <EmptyState action={emptyAction}>\n      {t('state.empty', { plural: noun })}\n    </EmptyState>\n  );\n}\n"],"names":["useErrorMessage","useT","useErrorAction","Alert","Button","EmptyState","RegionState","plural","isLoading","error","onRetry","isEmpty","isFiltered","onClearFilters","emptyAction","hasStaleData","t","errorMessage","errorAction","noun","toLocaleLowerCase","undefined","next","tone","data-testid","action","span","className","type","variant","size","onClick","onAction","label","code"],"mappings":"AAAA;;AAIA,SAASA,eAAe,EAAEC,IAAI,QAAQ,yBAAyB;AAC/D,SAASC,cAAc,QAAQ,iCAAiC;AAChE,SAASC,KAAK,QAAQ,6BAA6B;AACnD,SAASC,MAAM,QAAQ,8BAA8B;AACrD,SAASC,UAAU,QAAQ,0BAA0B;AA8BrD;;;;;;;;;;;;CAYC,GACD,OAAO,SAASC,YAAY,EAC1BC,MAAM,EACNC,YAAY,KAAK,EACjBC,KAAK,EACLC,OAAO,EACPC,UAAU,KAAK,EACfC,aAAa,KAAK,EAClBC,cAAc,EACdC,WAAW,EACXC,eAAe,KAAK,EACH;IACjB,MAAMC,IAAIf;IACV,MAAMgB,eAAejB;IACrB,MAAMkB,cAAchB;IACpB,+DAA+D;IAC/D,MAAMiB,OAAOZ,OAAOa,iBAAiB;IAErC,IAAIX,UAAUY,WAAW;QACvB,uEAAuE;QACvE,2CAA2C;QAC3C,MAAMC,OAAOJ,YAAYT;QACzB,qBACE,MAACN;YACCoB,MAAK;YACLC,eAAY;YACZC,QACEH,SAASD,aAAaX,YAAYW,YAAYA,0BAC5C,MAACK;gBAAKC,WAAU;;oBACbL,SAASD,2BACR,KAACjB;wBACCwB,MAAK;wBACLC,SAAQ;wBACRC,MAAK;wBACLC,SAAST,KAAKU,QAAQ;kCAErBV,KAAKW,KAAK;;oBAGdvB,YAAYW,2BACX,KAACjB;wBACCwB,MAAK;wBACLC,SAAQ;wBACRC,MAAK;wBACLC,SAASrB;kCAERM,EAAE;;;;;gBAOZP,MAAMyB,IAAI,KAAK,cACZlB,EAAE,mBAAmB;oBAAET,QAAQY;gBAAK,KACpCF,aAAaR;gBAChBM,gBAAgB,CAAC,CAAC,EAAEC,EAAE,gBAAgB;;;IAG7C;IAEA,IAAIR,aAAa,CAACG,SAAS,OAAO;IAElC,IAAIC,YAAY;QACd,qBACE,KAACP;YACCoB,QACEZ,mBAAmBQ,YAAYA,0BAC7B,KAACjB;gBACCwB,MAAK;gBACLC,SAAQ;gBACRC,MAAK;gBACLC,SAASlB;0BAERG,EAAE;;sBAKRA,EAAE,mBAAmB;gBAAET,QAAQY;YAAK;;IAG3C;IAEA,qBACE,KAACd;QAAWoB,QAAQX;kBACjBE,EAAE,eAAe;YAAET,QAAQY;QAAK;;AAGvC"}

package/dist/ui/molecules/table-toolbar/table-toolbar.d.ts

@@ -6,8 +6,10 @@ export interface TableToolbarProps {
     end?: ReactNode;
     /** Expanded panel rendered below the bar (filters, sorting). */
     panel?: ReactNode;
+    /** The panel's id, for the toggle that opens it to name in `aria-controls`. */
+    panelId?: string;
     className?: string;
 }
 /** Bar above a table: actions on one line, an optional expanded panel below. */
-export declare function TableToolbar({ start, end, panel, className, }: TableToolbarProps): import("react").JSX.Element;
+export declare function TableToolbar({ start, end, panel, panelId, className, }: TableToolbarProps): import("react").JSX.Element;
 //# sourceMappingURL=table-toolbar.d.ts.map

package/dist/ui/molecules/table-toolbar/table-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-toolbar.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/table-toolbar/table-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,iBAAiB;IAChC,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mEAAmE;IACnE,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,gEAAgE;IAChE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,gFAAgF;AAChF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,GAAG,EACH,KAAK,EACL,SAAS,GACV,EAAE,iBAAiB,+BAcnB"}
+{"version":3,"file":"table-toolbar.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/table-toolbar/table-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,iBAAiB;IAChC,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mEAAmE;IACnE,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,gEAAgE;IAChE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,gFAAgF;AAChF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,GAAG,EACH,KAAK,EACL,OAAO,EACP,SAAS,GACV,EAAE,iBAAiB,+BAmBnB"}

package/dist/ui/molecules/table-toolbar/table-toolbar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../utils/cn.js';
-/** Bar above a table: actions on one line, an optional expanded panel below. */ export function TableToolbar({ start, end, panel, className }) {
+/** Bar above a table: actions on one line, an optional expanded panel below. */ export function TableToolbar({ start, end, panel, panelId, className }) {
     return /*#__PURE__*/ _jsxs("div", {
         className: cn('flex flex-col gap-2xs', className),
         children: [
@@ -8,7 +8,7 @@ import { cn } from '../../utils/cn.js';
                 className: "flex flex-wrap items-center justify-between gap-2xs",
                 children: [
                     /*#__PURE__*/ _jsx("div", {
-                        className: "flex flex-wrap items-center gap-2xs",
+                        className: "min-w-0 flex flex-1 flex-wrap items-center gap-2xs",
                         children: start
                     }),
                     /*#__PURE__*/ _jsx("div", {
@@ -18,6 +18,7 @@ import { cn } from '../../utils/cn.js';
                 ]
             }),
             panel && /*#__PURE__*/ _jsx("div", {
+                id: panelId,
                 className: "rounded-xl border border-border bg-surface p-s",
                 children: panel
             })

package/dist/ui/molecules/table-toolbar/table-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/molecules/table-toolbar/table-toolbar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils/cn.js';\n\nexport interface TableToolbarProps {\n  /** Actions aligned to the start — titles, primary actions. */\n  start?: ReactNode;\n  /** Actions aligned to the end — column settings, panel toggles. */\n  end?: ReactNode;\n  /** Expanded panel rendered below the bar (filters, sorting). */\n  panel?: ReactNode;\n  className?: string;\n}\n\n/** Bar above a table: actions on one line, an optional expanded panel below. */\nexport function TableToolbar({\n  start,\n  end,\n  panel,\n  className,\n}: TableToolbarProps) {\n  return (\n    <div className={cn('flex flex-col gap-2xs', className)}>\n      <div className=\"flex flex-wrap items-center justify-between gap-2xs\">\n        <div className=\"flex flex-wrap items-center gap-2xs\">{start}</div>\n        <div className=\"flex flex-wrap items-center gap-2xs\">{end}</div>\n      </div>\n      {panel && (\n        <div className=\"rounded-xl border border-border bg-surface p-s\">\n          {panel}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["cn","TableToolbar","start","end","panel","className","div"],"mappings":";AAEA,SAASA,EAAE,QAAQ,oBAAoB;AAYvC,8EAA8E,GAC9E,OAAO,SAASC,aAAa,EAC3BC,KAAK,EACLC,GAAG,EACHC,KAAK,EACLC,SAAS,EACS;IAClB,qBACE,MAACC;QAAID,WAAWL,GAAG,yBAAyBK;;0BAC1C,MAACC;gBAAID,WAAU;;kCACb,KAACC;wBAAID,WAAU;kCAAuCH;;kCACtD,KAACI;wBAAID,WAAU;kCAAuCF;;;;YAEvDC,uBACC,KAACE;gBAAID,WAAU;0BACZD;;;;AAKX"}
+{"version":3,"sources":["../../../../src/ui/molecules/table-toolbar/table-toolbar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils/cn.js';\n\nexport interface TableToolbarProps {\n  /** Actions aligned to the start — titles, primary actions. */\n  start?: ReactNode;\n  /** Actions aligned to the end — column settings, panel toggles. */\n  end?: ReactNode;\n  /** Expanded panel rendered below the bar (filters, sorting). */\n  panel?: ReactNode;\n  /** The panel's id, for the toggle that opens it to name in `aria-controls`. */\n  panelId?: string;\n  className?: string;\n}\n\n/** Bar above a table: actions on one line, an optional expanded panel below. */\nexport function TableToolbar({\n  start,\n  end,\n  panel,\n  panelId,\n  className,\n}: TableToolbarProps) {\n  return (\n    <div className={cn('flex flex-col gap-2xs', className)}>\n      <div className=\"flex flex-wrap items-center justify-between gap-2xs\">\n        <div className=\"min-w-0 flex flex-1 flex-wrap items-center gap-2xs\">\n          {start}\n        </div>\n        <div className=\"flex flex-wrap items-center gap-2xs\">{end}</div>\n      </div>\n      {panel && (\n        <div\n          id={panelId}\n          className=\"rounded-xl border border-border bg-surface p-s\"\n        >\n          {panel}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["cn","TableToolbar","start","end","panel","panelId","className","div","id"],"mappings":";AAEA,SAASA,EAAE,QAAQ,oBAAoB;AAcvC,8EAA8E,GAC9E,OAAO,SAASC,aAAa,EAC3BC,KAAK,EACLC,GAAG,EACHC,KAAK,EACLC,OAAO,EACPC,SAAS,EACS;IAClB,qBACE,MAACC;QAAID,WAAWN,GAAG,yBAAyBM;;0BAC1C,MAACC;gBAAID,WAAU;;kCACb,KAACC;wBAAID,WAAU;kCACZJ;;kCAEH,KAACK;wBAAID,WAAU;kCAAuCH;;;;YAEvDC,uBACC,KAACG;gBACCC,IAAIH;gBACJC,WAAU;0BAETF;;;;AAKX"}

package/dist/ui/molecules/toast-region/toast-region.d.ts

@@ -5,39 +5,83 @@ import { useErrorMessage } from '../../../i18n/index.js';
  * `code`, and anything else that reached the user keeps its `message`.
  */
 export type ToastFailure = Parameters<ReturnType<typeof useErrorMessage>>[0];
-/** One failure waiting in the region, under the id it was shown with. */
-export interface FailureToast {
-    readonly id: number;
-    readonly failure: ToastFailure;
+/**
+ * What a toast reports
+ * ([ADR 0028](../../../../../../../docs/adr/0028-states-an-organism-must-render.md)):
+ * a write that worked, one that can still be taken back, something worth
+ * knowing, or a failure. Only a failure interrupts.
+ */
+export type ToastTone = 'success' | 'undo' | 'info' | 'failure';
+/** The one thing a toast offers to do about what it reports. */
+export interface ToastAction {
+    /** The button's text, already in the reader's language. */
+    readonly label: string;
+    readonly onAction: () => void;
 }
+/**
+ * A toast to show. A failure carries the failure itself, rendered through the
+ * same {@link useErrorMessage} a form's error slot uses; every other tone
+ * carries a sentence already in the reader's language. An `undo` toast without
+ * its Undo would be a success toast, so the type asks for the action.
+ */
+export type ToastInput = {
+    readonly tone: 'success' | 'info';
+    readonly message: string;
+    readonly action?: ToastAction;
+} | {
+    readonly tone: 'undo';
+    readonly message: string;
+    readonly action: ToastAction;
+} | {
+    readonly tone: 'failure';
+    readonly failure: ToastFailure;
+    readonly action?: ToastAction;
+};
+/** One toast waiting in the region, under the id it was shown with. */
+export type Toast = ToastInput & {
+    readonly id: number;
+};
 export interface Toasts {
-    /** The failures shown, oldest first. */
-    readonly failures: readonly FailureToast[];
-    /** Shows a failure until it is dismissed, and answers its id. */
-    readonly showFailure: (failure: ToastFailure) => number;
+    /** The toasts shown, oldest first. */
+    readonly toasts: readonly Toast[];
+    /** Shows a toast, and answers its id. */
+    readonly show: (toast: ToastInput) => number;
     readonly dismiss: (id: number) => void;
 }
+/**
+ * How long a toast that is neither a failure nor offers an action stays, in
+ * milliseconds. A failure stays until it is dismissed: it reports something
+ * that already happened, often after the screen that started it was left, and
+ * a message that times out is one a slow reader never gets. A toast with an
+ * action stays too, for the same reader.
+ */
+export declare const TOAST_TIMEOUT_MS = 8000;
+export interface ToastProviderProps {
+    readonly children: ReactNode;
+    /** How long a success, undo or info toast stays. */
+    readonly timeoutMs?: number;
+}
 /**
  * Holds the toasts one host shows. Mounted once, above everything that can
  * fail asynchronously, with a {@link ToastRegion} somewhere inside it.
  */
-export declare function ToastProvider({ children }: {
-    readonly children: ReactNode;
-}): import("react").JSX.Element;
+export declare function ToastProvider({ children, timeoutMs, }: ToastProviderProps): import("react").JSX.Element;
 /**
  * The {@link ToastProvider} above, or `undefined` outside one: a caller with
- * no region to show a failure in keeps it where it can, rather than having it
- * vanish.
+ * no region to show a toast in keeps what it has to say where it can, rather
+ * than having it vanish.
  */
 export declare const useToasts: () => Toasts | undefined;
 /**
- * Where a host's toasts render: each failure in the reader's language,
- * through the same {@link useErrorMessage} a form's error slot uses, so an
- * asynchronous failure reads exactly as a synchronous one would.
+ * Where a host's toasts render, each through {@link Alert}: a failure is
+ * `role="alert"` and every other tone `role="status"`.
  *
- * A failure stays until it is dismissed. It reports something that already
- * happened, often after the screen that started it was left, and a message
- * that times out is one a slow reader never gets.
+ * ⚠️ **An empty region takes no room and no clicks.** It stays mounted, so a
+ * toast lands in a region that already exists, but at zero size and with
+ * `pointer-events: none` — a fixed box that kept its padding once covered two
+ * focused links and swallowed clicks (WCAG 2.4.11). While toasts show, the
+ * document's bottom scroll padding is the region's height, so a control
+ * focused by keyboard scrolls clear of it. F6 moves focus into the region.
  */
 export declare function ToastRegion(): import("react").JSX.Element | null;
 //# sourceMappingURL=toast-region.d.ts.map

package/dist/ui/molecules/toast-region/toast-region.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast-region.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/toast-region/toast-region.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,eAAe,EAAQ,MAAM,wBAAwB,CAAC;AAG/D;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAE7E,yEAAyE;AACzE,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,MAAM;IACrB,wCAAwC;IACxC,QAAQ,CAAC,QAAQ,EAAE,SAAS,YAAY,EAAE,CAAC;IAC3C,iEAAiE;IACjE,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,MAAM,CAAC;IACxD,QAAQ,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAID;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAqB3E;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,QAAO,MAAM,GAAG,SAAqC,CAAC;AAE5E;;;;;;;;GAQG;AACH,wBAAgB,WAAW,uCA6B1B"}
+{"version":3,"file":"toast-region.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/toast-region/toast-region.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,eAAe,EAAQ,MAAM,wBAAwB,CAAC;AAM/D;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAE7E;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhE,gEAAgE;AAChE,MAAM,WAAW,WAAW;IAC1B,2DAA2D;IAC3D,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAClB;IACE,QAAQ,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;IAClC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,MAAM,CAAC,EAAE,WAAW,CAAC;CAC/B,GACD;IACE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;CAC9B,GACD;IACE,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC;IAC/B,QAAQ,CAAC,MAAM,CAAC,EAAE,WAAW,CAAC;CAC/B,CAAC;AAEN,uEAAuE;AACvE,MAAM,MAAM,KAAK,GAAG,UAAU,GAAG;IAAE,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzD,MAAM,WAAW,MAAM;IACrB,sCAAsC;IACtC,QAAQ,CAAC,MAAM,EAAE,SAAS,KAAK,EAAE,CAAC;IAClC,yCAAyC;IACzC,QAAQ,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,MAAM,CAAC;IAC7C,QAAQ,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAIrC,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,oDAAoD;IACpD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAA4B,GAC7B,EAAE,kBAAkB,+BA4CpB;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,QAAO,MAAM,GAAG,SAAqC,CAAC;AA0D5E;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,uCA8C1B"}

package/dist/ui/molecules/toast-region/toast-region.js

@@ -1,37 +1,64 @@
 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useErrorMessage, useT } from '../../../i18n/index.js';
+import { useErrorAction } from '../../actions/error-actions.js';
+import { Alert } from '../../atoms/alert/index.js';
 import { Button } from '../../atoms/button/index.js';
+import { cn } from '../../utils/cn.js';
+/**
+ * How long a toast that is neither a failure nor offers an action stays, in
+ * milliseconds. A failure stays until it is dismissed: it reports something
+ * that already happened, often after the screen that started it was left, and
+ * a message that times out is one a slow reader never gets. A toast with an
+ * action stays too, for the same reader.
+ */ export const TOAST_TIMEOUT_MS = 8000;
 const ToastContext = /*#__PURE__*/ createContext(undefined);
 /**
  * Holds the toasts one host shows. Mounted once, above everything that can
  * fail asynchronously, with a {@link ToastRegion} somewhere inside it.
- */ export function ToastProvider({ children }) {
-    const [failures, setFailures] = useState([]);
+ */ export function ToastProvider({ children, timeoutMs = TOAST_TIMEOUT_MS }) {
+    const [toasts, setToasts] = useState([]);
     const next = useRef(0);
-    const showFailure = useCallback((failure)=>{
+    const timers = useRef(new Map());
+    const dismiss = useCallback((id)=>{
+        clearTimeout(timers.current.get(id));
+        timers.current.delete(id);
+        setToasts((shown)=>shown.filter((toast)=>toast.id !== id));
+    }, []);
+    const show = useCallback((toast)=>{
         next.current += 1;
         const id = next.current;
-        setFailures((shown)=>[
+        setToasts((shown)=>[
                 ...shown,
-                {
-                    id,
-                    failure
-                }
+                _extends({}, toast, {
+                    id
+                })
             ]);
+        // A failure stays until it is dismissed, and so does a toast that
+        // offers an action: Undo on a timer is a time limit on the reader's
+        // only way back (WCAG 2.2.1). The rest say their piece and go.
+        if (toast.tone !== 'failure' && toast.action === undefined) timers.current.set(id, setTimeout(()=>dismiss(id), timeoutMs));
         return id;
-    }, []);
-    const dismiss = useCallback((id)=>{
-        setFailures((shown)=>shown.filter((toast)=>toast.id !== id));
+    }, [
+        dismiss,
+        timeoutMs
+    ]);
+    useEffect(()=>{
+        const pending = timers.current;
+        return ()=>{
+            for (const timer of pending.values())clearTimeout(timer);
+            pending.clear();
+        };
     }, []);
     const value = useMemo(()=>({
-            failures,
-            showFailure,
+            toasts,
+            show,
             dismiss
         }), [
-        failures,
-        showFailure,
+        toasts,
+        show,
         dismiss
     ]);
     return /*#__PURE__*/ _jsx(ToastContext.Provider, {
@@ -41,41 +68,101 @@ const ToastContext = /*#__PURE__*/ createContext(undefined);
 }
 /**
  * The {@link ToastProvider} above, or `undefined` outside one: a caller with
- * no region to show a failure in keeps it where it can, rather than having it
- * vanish.
+ * no region to show a toast in keeps what it has to say where it can, rather
+ * than having it vanish.
  */ export const useToasts = ()=>useContext(ToastContext);
+const ALERT_TONE = {
+    success: 'success',
+    undo: 'info',
+    info: 'info',
+    failure: 'danger'
+};
+function ToastItem({ toast, onDismiss }) {
+    var _toast_action;
+    const t = useT();
+    const message = useErrorMessage();
+    const errorAction = useErrorAction();
+    // A failure with no action of its own offers the host's next step for its
+    // code, when there is one.
+    const next = toast.tone === 'failure' ? errorAction(toast.failure) : undefined;
+    const action = (_toast_action = toast.action) != null ? _toast_action : next === undefined ? undefined : {
+        label: next.label,
+        onAction: next.onAction
+    };
+    return /*#__PURE__*/ _jsx(Alert, {
+        tone: ALERT_TONE[toast.tone],
+        "data-toast-tone": toast.tone,
+        className: "pointer-events-auto bg-surface shadow-overlay",
+        action: /*#__PURE__*/ _jsxs("div", {
+            className: "flex gap-3xs",
+            children: [
+                action !== undefined && /*#__PURE__*/ _jsx(Button, {
+                    type: "button",
+                    variant: "secondary",
+                    onClick: ()=>{
+                        action.onAction();
+                        onDismiss();
+                    },
+                    children: action.label
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    type: "button",
+                    variant: "ghost",
+                    onClick: onDismiss,
+                    children: t('toast.dismiss')
+                })
+            ]
+        }),
+        children: toast.tone === 'failure' ? message(toast.failure) : toast.message
+    });
+}
 /**
- * Where a host's toasts render: each failure in the reader's language,
- * through the same {@link useErrorMessage} a form's error slot uses, so an
- * asynchronous failure reads exactly as a synchronous one would.
+ * Where a host's toasts render, each through {@link Alert}: a failure is
+ * `role="alert"` and every other tone `role="status"`.
  *
- * A failure stays until it is dismissed. It reports something that already
- * happened, often after the screen that started it was left, and a message
- * that times out is one a slow reader never gets.
+ * ⚠️ **An empty region takes no room and no clicks.** It stays mounted, so a
+ * toast lands in a region that already exists, but at zero size and with
+ * `pointer-events: none` — a fixed box that kept its padding once covered two
+ * focused links and swallowed clicks (WCAG 2.4.11). While toasts show, the
+ * document's bottom scroll padding is the region's height, so a control
+ * focused by keyboard scrolls clear of it. F6 moves focus into the region.
  */ export function ToastRegion() {
+    var _ref;
     const toasts = useToasts();
     const t = useT();
-    const message = useErrorMessage();
+    const region = useRef(null);
+    const shown = (_ref = toasts == null ? void 0 : toasts.toasts) != null ? _ref : [];
+    const count = shown.length;
+    useEffect(()=>{
+        const root = document.documentElement;
+        if (count === 0) {
+            root.style.removeProperty('scroll-padding-bottom');
+            return;
+        }
+        // The region renders whenever a toast can: the ref is set by now.
+        const node = region.current;
+        root.style.setProperty('scroll-padding-bottom', `${node.offsetHeight}px`);
+        const onKeyDown = (event)=>{
+            if (event.key !== 'F6') return;
+            event.preventDefault();
+            node.focus();
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return ()=>document.removeEventListener('keydown', onKeyDown);
+    }, [
+        count
+    ]);
     if (toasts === undefined) return null;
     return /*#__PURE__*/ _jsx("section", {
+        ref: region,
         "aria-label": t('toast.region'),
-        className: "bottom-0 right-0 max-w-md fixed z-(--z-toast) flex w-full flex-col gap-xs p-s",
-        children: toasts.failures.map(({ id, failure })=>/*#__PURE__*/ _jsxs("div", {
-                role: "alert",
-                className: "flex items-start gap-xs rounded-lg border border-danger bg-surface p-xs shadow-overlay",
-                children: [
-                    /*#__PURE__*/ _jsx("p", {
-                        className: "flex-1 text-step-sm text-danger",
-                        children: message(failure)
-                    }),
-                    /*#__PURE__*/ _jsx(Button, {
-                        type: "button",
-                        variant: "ghost",
-                        onClick: ()=>toasts.dismiss(id),
-                        children: t('toast.dismiss')
-                    })
-                ]
-            }, id))
+        tabIndex: -1,
+        "data-testid": "toast-region",
+        className: cn('bottom-0 right-0 pointer-events-none fixed z-(--z-toast) flex flex-col gap-xs focus-ring', count === 0 ? 'size-0 overflow-hidden' : 'max-w-md w-full p-s'),
+        children: shown.map((toast)=>/*#__PURE__*/ _jsx(ToastItem, {
+                toast: toast,
+                onDismiss: ()=>toasts.dismiss(toast.id)
+            }, toast.id))
     });
 }
 

package/dist/ui/molecules/toast-region/toast-region.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/molecules/toast-region/toast-region.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useErrorMessage, useT } from '../../../i18n/index.js';\nimport { Button } from '../../atoms/button/index.js';\n\n/**\n * A failure as {@link useErrorMessage} renders it: a typed failure carries its\n * `code`, and anything else that reached the user keeps its `message`.\n */\nexport type ToastFailure = Parameters<ReturnType<typeof useErrorMessage>>[0];\n\n/** One failure waiting in the region, under the id it was shown with. */\nexport interface FailureToast {\n  readonly id: number;\n  readonly failure: ToastFailure;\n}\n\nexport interface Toasts {\n  /** The failures shown, oldest first. */\n  readonly failures: readonly FailureToast[];\n  /** Shows a failure until it is dismissed, and answers its id. */\n  readonly showFailure: (failure: ToastFailure) => number;\n  readonly dismiss: (id: number) => void;\n}\n\nconst ToastContext = createContext<Toasts | undefined>(undefined);\n\n/**\n * Holds the toasts one host shows. Mounted once, above everything that can\n * fail asynchronously, with a {@link ToastRegion} somewhere inside it.\n */\nexport function ToastProvider({ children }: { readonly children: ReactNode }) {\n  const [failures, setFailures] = useState<readonly FailureToast[]>([]);\n  const next = useRef(0);\n\n  const showFailure = useCallback((failure: ToastFailure) => {\n    next.current += 1;\n    const id = next.current;\n    setFailures(shown => [...shown, { id, failure }]);\n    return id;\n  }, []);\n  const dismiss = useCallback((id: number) => {\n    setFailures(shown => shown.filter(toast => toast.id !== id));\n  }, []);\n\n  const value = useMemo(\n    () => ({ failures, showFailure, dismiss }),\n    [failures, showFailure, dismiss],\n  );\n  return (\n    <ToastContext.Provider value={value}>{children}</ToastContext.Provider>\n  );\n}\n\n/**\n * The {@link ToastProvider} above, or `undefined` outside one: a caller with\n * no region to show a failure in keeps it where it can, rather than having it\n * vanish.\n */\nexport const useToasts = (): Toasts | undefined => useContext(ToastContext);\n\n/**\n * Where a host's toasts render: each failure in the reader's language,\n * through the same {@link useErrorMessage} a form's error slot uses, so an\n * asynchronous failure reads exactly as a synchronous one would.\n *\n * A failure stays until it is dismissed. It reports something that already\n * happened, often after the screen that started it was left, and a message\n * that times out is one a slow reader never gets.\n */\nexport function ToastRegion() {\n  const toasts = useToasts();\n  const t = useT();\n  const message = useErrorMessage();\n\n  if (toasts === undefined) return null;\n  return (\n    <section\n      aria-label={t('toast.region')}\n      className=\"bottom-0 right-0 max-w-md fixed z-(--z-toast) flex w-full flex-col gap-xs p-s\"\n    >\n      {toasts.failures.map(({ id, failure }) => (\n        <div\n          key={id}\n          role=\"alert\"\n          className=\"flex items-start gap-xs rounded-lg border border-danger bg-surface p-xs shadow-overlay\"\n        >\n          <p className=\"flex-1 text-step-sm text-danger\">{message(failure)}</p>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            onClick={() => toasts.dismiss(id)}\n          >\n            {t('toast.dismiss')}\n          </Button>\n        </div>\n      ))}\n    </section>\n  );\n}\n"],"names":["createContext","useCallback","useContext","useMemo","useRef","useState","useErrorMessage","useT","Button","ToastContext","undefined","ToastProvider","children","failures","setFailures","next","showFailure","failure","current","id","shown","dismiss","filter","toast","value","Provider","useToasts","ToastRegion","toasts","t","message","section","aria-label","className","map","div","role","p","type","variant","onClick"],"mappings":"AAAA;;AAEA,SACEA,aAAa,EAEbC,WAAW,EACXC,UAAU,EACVC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,eAAe,EAAEC,IAAI,QAAQ,yBAAyB;AAC/D,SAASC,MAAM,QAAQ,8BAA8B;AAsBrD,MAAMC,6BAAeT,cAAkCU;AAEvD;;;CAGC,GACD,OAAO,SAASC,cAAc,EAAEC,QAAQ,EAAoC;IAC1E,MAAM,CAACC,UAAUC,YAAY,GAAGT,SAAkC,EAAE;IACpE,MAAMU,OAAOX,OAAO;IAEpB,MAAMY,cAAcf,YAAY,CAACgB;QAC/BF,KAAKG,OAAO,IAAI;QAChB,MAAMC,KAAKJ,KAAKG,OAAO;QACvBJ,YAAYM,CAAAA,QAAS;mBAAIA;gBAAO;oBAAED;oBAAIF;gBAAQ;aAAE;QAChD,OAAOE;IACT,GAAG,EAAE;IACL,MAAME,UAAUpB,YAAY,CAACkB;QAC3BL,YAAYM,CAAAA,QAASA,MAAME,MAAM,CAACC,CAAAA,QAASA,MAAMJ,EAAE,KAAKA;IAC1D,GAAG,EAAE;IAEL,MAAMK,QAAQrB,QACZ,IAAO,CAAA;YAAEU;YAAUG;YAAaK;QAAQ,CAAA,GACxC;QAACR;QAAUG;QAAaK;KAAQ;IAElC,qBACE,KAACZ,aAAagB,QAAQ;QAACD,OAAOA;kBAAQZ;;AAE1C;AAEA;;;;CAIC,GACD,OAAO,MAAMc,YAAY,IAA0BxB,WAAWO,cAAc;AAE5E;;;;;;;;CAQC,GACD,OAAO,SAASkB;IACd,MAAMC,SAASF;IACf,MAAMG,IAAItB;IACV,MAAMuB,UAAUxB;IAEhB,IAAIsB,WAAWlB,WAAW,OAAO;IACjC,qBACE,KAACqB;QACCC,cAAYH,EAAE;QACdI,WAAU;kBAETL,OAAOf,QAAQ,CAACqB,GAAG,CAAC,CAAC,EAAEf,EAAE,EAAEF,OAAO,EAAE,iBACnC,MAACkB;gBAECC,MAAK;gBACLH,WAAU;;kCAEV,KAACI;wBAAEJ,WAAU;kCAAmCH,QAAQb;;kCACxD,KAACT;wBACC8B,MAAK;wBACLC,SAAQ;wBACRC,SAAS,IAAMZ,OAAOP,OAAO,CAACF;kCAE7BU,EAAE;;;eAVAV;;AAgBf"}
+{"version":3,"sources":["../../../../src/ui/molecules/toast-region/toast-region.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useErrorMessage, useT } from '../../../i18n/index.js';\nimport { useErrorAction } from '../../actions/error-actions.js';\nimport { Alert, type AlertTone } from '../../atoms/alert/index.js';\nimport { Button } from '../../atoms/button/index.js';\nimport { cn } from '../../utils/cn.js';\n\n/**\n * A failure as {@link useErrorMessage} renders it: a typed failure carries its\n * `code`, and anything else that reached the user keeps its `message`.\n */\nexport type ToastFailure = Parameters<ReturnType<typeof useErrorMessage>>[0];\n\n/**\n * What a toast reports\n * ([ADR 0028](../../../../../../../docs/adr/0028-states-an-organism-must-render.md)):\n * a write that worked, one that can still be taken back, something worth\n * knowing, or a failure. Only a failure interrupts.\n */\nexport type ToastTone = 'success' | 'undo' | 'info' | 'failure';\n\n/** The one thing a toast offers to do about what it reports. */\nexport interface ToastAction {\n  /** The button's text, already in the reader's language. */\n  readonly label: string;\n  readonly onAction: () => void;\n}\n\n/**\n * A toast to show. A failure carries the failure itself, rendered through the\n * same {@link useErrorMessage} a form's error slot uses; every other tone\n * carries a sentence already in the reader's language. An `undo` toast without\n * its Undo would be a success toast, so the type asks for the action.\n */\nexport type ToastInput =\n  | {\n      readonly tone: 'success' | 'info';\n      readonly message: string;\n      readonly action?: ToastAction;\n    }\n  | {\n      readonly tone: 'undo';\n      readonly message: string;\n      readonly action: ToastAction;\n    }\n  | {\n      readonly tone: 'failure';\n      readonly failure: ToastFailure;\n      readonly action?: ToastAction;\n    };\n\n/** One toast waiting in the region, under the id it was shown with. */\nexport type Toast = ToastInput & { readonly id: number };\n\nexport interface Toasts {\n  /** The toasts shown, oldest first. */\n  readonly toasts: readonly Toast[];\n  /** Shows a toast, and answers its id. */\n  readonly show: (toast: ToastInput) => number;\n  readonly dismiss: (id: number) => void;\n}\n\n/**\n * How long a toast that is neither a failure nor offers an action stays, in\n * milliseconds. A failure stays until it is dismissed: it reports something\n * that already happened, often after the screen that started it was left, and\n * a message that times out is one a slow reader never gets. A toast with an\n * action stays too, for the same reader.\n */\nexport const TOAST_TIMEOUT_MS = 8000;\n\nconst ToastContext = createContext<Toasts | undefined>(undefined);\n\nexport interface ToastProviderProps {\n  readonly children: ReactNode;\n  /** How long a success, undo or info toast stays. */\n  readonly timeoutMs?: number;\n}\n\n/**\n * Holds the toasts one host shows. Mounted once, above everything that can\n * fail asynchronously, with a {@link ToastRegion} somewhere inside it.\n */\nexport function ToastProvider({\n  children,\n  timeoutMs = TOAST_TIMEOUT_MS,\n}: ToastProviderProps) {\n  const [toasts, setToasts] = useState<readonly Toast[]>([]);\n  const next = useRef(0);\n  const timers = useRef(new Map<number, ReturnType<typeof setTimeout>>());\n\n  const dismiss = useCallback((id: number) => {\n    clearTimeout(timers.current.get(id));\n    timers.current.delete(id);\n    setToasts(shown => shown.filter(toast => toast.id !== id));\n  }, []);\n\n  const show = useCallback(\n    (toast: ToastInput) => {\n      next.current += 1;\n      const id = next.current;\n      setToasts(shown => [...shown, { ...toast, id }]);\n      // A failure stays until it is dismissed, and so does a toast that\n      // offers an action: Undo on a timer is a time limit on the reader's\n      // only way back (WCAG 2.2.1). The rest say their piece and go.\n      if (toast.tone !== 'failure' && toast.action === undefined)\n        timers.current.set(\n          id,\n          setTimeout(() => dismiss(id), timeoutMs),\n        );\n      return id;\n    },\n    [dismiss, timeoutMs],\n  );\n\n  useEffect(() => {\n    const pending = timers.current;\n    return () => {\n      for (const timer of pending.values()) clearTimeout(timer);\n      pending.clear();\n    };\n  }, []);\n\n  const value = useMemo(\n    () => ({ toasts, show, dismiss }),\n    [toasts, show, dismiss],\n  );\n  return (\n    <ToastContext.Provider value={value}>{children}</ToastContext.Provider>\n  );\n}\n\n/**\n * The {@link ToastProvider} above, or `undefined` outside one: a caller with\n * no region to show a toast in keeps what it has to say where it can, rather\n * than having it vanish.\n */\nexport const useToasts = (): Toasts | undefined => useContext(ToastContext);\n\nconst ALERT_TONE: Readonly<Record<ToastTone, AlertTone>> = {\n  success: 'success',\n  undo: 'info',\n  info: 'info',\n  failure: 'danger',\n};\n\nfunction ToastItem({\n  toast,\n  onDismiss,\n}: {\n  readonly toast: Toast;\n  readonly onDismiss: () => void;\n}) {\n  const t = useT();\n  const message = useErrorMessage();\n  const errorAction = useErrorAction();\n  // A failure with no action of its own offers the host's next step for its\n  // code, when there is one.\n  const next =\n    toast.tone === 'failure' ? errorAction(toast.failure) : undefined;\n  const action =\n    toast.action ??\n    (next === undefined\n      ? undefined\n      : { label: next.label, onAction: next.onAction });\n  return (\n    <Alert\n      tone={ALERT_TONE[toast.tone]}\n      data-toast-tone={toast.tone}\n      className=\"pointer-events-auto bg-surface shadow-overlay\"\n      action={\n        <div className=\"flex gap-3xs\">\n          {action !== undefined && (\n            <Button\n              type=\"button\"\n              variant=\"secondary\"\n              onClick={() => {\n                action.onAction();\n                onDismiss();\n              }}\n            >\n              {action.label}\n            </Button>\n          )}\n          <Button type=\"button\" variant=\"ghost\" onClick={onDismiss}>\n            {t('toast.dismiss')}\n          </Button>\n        </div>\n      }\n    >\n      {toast.tone === 'failure' ? message(toast.failure) : toast.message}\n    </Alert>\n  );\n}\n\n/**\n * Where a host's toasts render, each through {@link Alert}: a failure is\n * `role=\"alert\"` and every other tone `role=\"status\"`.\n *\n * ⚠️ **An empty region takes no room and no clicks.** It stays mounted, so a\n * toast lands in a region that already exists, but at zero size and with\n * `pointer-events: none` — a fixed box that kept its padding once covered two\n * focused links and swallowed clicks (WCAG 2.4.11). While toasts show, the\n * document's bottom scroll padding is the region's height, so a control\n * focused by keyboard scrolls clear of it. F6 moves focus into the region.\n */\nexport function ToastRegion() {\n  const toasts = useToasts();\n  const t = useT();\n  const region = useRef<HTMLElement>(null);\n  const shown = toasts?.toasts ?? [];\n  const count = shown.length;\n\n  useEffect(() => {\n    const root = document.documentElement;\n    if (count === 0) {\n      root.style.removeProperty('scroll-padding-bottom');\n      return;\n    }\n    // The region renders whenever a toast can: the ref is set by now.\n    const node = region.current as HTMLElement;\n    root.style.setProperty('scroll-padding-bottom', `${node.offsetHeight}px`);\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'F6') return;\n      event.preventDefault();\n      node.focus();\n    };\n    document.addEventListener('keydown', onKeyDown);\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, [count]);\n\n  if (toasts === undefined) return null;\n  return (\n    <section\n      ref={region}\n      aria-label={t('toast.region')}\n      tabIndex={-1}\n      data-testid=\"toast-region\"\n      className={cn(\n        'bottom-0 right-0 pointer-events-none fixed z-(--z-toast) flex flex-col gap-xs focus-ring',\n        count === 0 ? 'size-0 overflow-hidden' : 'max-w-md w-full p-s',\n      )}\n    >\n      {shown.map(toast => (\n        <ToastItem\n          key={toast.id}\n          toast={toast}\n          onDismiss={() => toasts.dismiss(toast.id)}\n        />\n      ))}\n    </section>\n  );\n}\n"],"names":["createContext","useCallback","useContext","useEffect","useMemo","useRef","useState","useErrorMessage","useT","useErrorAction","Alert","Button","cn","TOAST_TIMEOUT_MS","ToastContext","undefined","ToastProvider","children","timeoutMs","toasts","setToasts","next","timers","Map","dismiss","id","clearTimeout","current","get","delete","shown","filter","toast","show","tone","action","set","setTimeout","pending","timer","values","clear","value","Provider","useToasts","ALERT_TONE","success","undo","info","failure","ToastItem","onDismiss","t","message","errorAction","label","onAction","data-toast-tone","className","div","type","variant","onClick","ToastRegion","region","count","length","root","document","documentElement","style","removeProperty","node","setProperty","offsetHeight","onKeyDown","event","key","preventDefault","focus","addEventListener","removeEventListener","section","ref","aria-label","tabIndex","data-testid","map"],"mappings":"AAAA;;;AAEA,SACEA,aAAa,EAEbC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,eAAe,EAAEC,IAAI,QAAQ,yBAAyB;AAC/D,SAASC,cAAc,QAAQ,iCAAiC;AAChE,SAASC,KAAK,QAAwB,6BAA6B;AACnE,SAASC,MAAM,QAAQ,8BAA8B;AACrD,SAASC,EAAE,QAAQ,oBAAoB;AAyDvC;;;;;;CAMC,GACD,OAAO,MAAMC,mBAAmB,KAAK;AAErC,MAAMC,6BAAed,cAAkCe;AAQvD;;;CAGC,GACD,OAAO,SAASC,cAAc,EAC5BC,QAAQ,EACRC,YAAYL,gBAAgB,EACT;IACnB,MAAM,CAACM,QAAQC,UAAU,GAAGd,SAA2B,EAAE;IACzD,MAAMe,OAAOhB,OAAO;IACpB,MAAMiB,SAASjB,OAAO,IAAIkB;IAE1B,MAAMC,UAAUvB,YAAY,CAACwB;QAC3BC,aAAaJ,OAAOK,OAAO,CAACC,GAAG,CAACH;QAChCH,OAAOK,OAAO,CAACE,MAAM,CAACJ;QACtBL,UAAUU,CAAAA,QAASA,MAAMC,MAAM,CAACC,CAAAA,QAASA,MAAMP,EAAE,KAAKA;IACxD,GAAG,EAAE;IAEL,MAAMQ,OAAOhC,YACX,CAAC+B;QACCX,KAAKM,OAAO,IAAI;QAChB,MAAMF,KAAKJ,KAAKM,OAAO;QACvBP,UAAUU,CAAAA,QAAS;mBAAIA;gBAAO,aAAKE;oBAAOP;;aAAK;QAC/C,kEAAkE;QAClE,oEAAoE;QACpE,+DAA+D;QAC/D,IAAIO,MAAME,IAAI,KAAK,aAAaF,MAAMG,MAAM,KAAKpB,WAC/CO,OAAOK,OAAO,CAACS,GAAG,CAChBX,IACAY,WAAW,IAAMb,QAAQC,KAAKP;QAElC,OAAOO;IACT,GACA;QAACD;QAASN;KAAU;IAGtBf,UAAU;QACR,MAAMmC,UAAUhB,OAAOK,OAAO;QAC9B,OAAO;YACL,KAAK,MAAMY,SAASD,QAAQE,MAAM,GAAId,aAAaa;YACnDD,QAAQG,KAAK;QACf;IACF,GAAG,EAAE;IAEL,MAAMC,QAAQtC,QACZ,IAAO,CAAA;YAAEe;YAAQc;YAAMT;QAAQ,CAAA,GAC/B;QAACL;QAAQc;QAAMT;KAAQ;IAEzB,qBACE,KAACV,aAAa6B,QAAQ;QAACD,OAAOA;kBAAQzB;;AAE1C;AAEA;;;;CAIC,GACD,OAAO,MAAM2B,YAAY,IAA0B1C,WAAWY,cAAc;AAE5E,MAAM+B,aAAqD;IACzDC,SAAS;IACTC,MAAM;IACNC,MAAM;IACNC,SAAS;AACX;AAEA,SAASC,UAAU,EACjBlB,KAAK,EACLmB,SAAS,EAIV;QASGnB;IARF,MAAMoB,IAAI5C;IACV,MAAM6C,UAAU9C;IAChB,MAAM+C,cAAc7C;IACpB,0EAA0E;IAC1E,2BAA2B;IAC3B,MAAMY,OACJW,MAAME,IAAI,KAAK,YAAYoB,YAAYtB,MAAMiB,OAAO,IAAIlC;IAC1D,MAAMoB,UACJH,gBAAAA,MAAMG,MAAM,YAAZH,gBACCX,SAASN,YACNA,YACA;QAAEwC,OAAOlC,KAAKkC,KAAK;QAAEC,UAAUnC,KAAKmC,QAAQ;IAAC;IACnD,qBACE,KAAC9C;QACCwB,MAAMW,UAAU,CAACb,MAAME,IAAI,CAAC;QAC5BuB,mBAAiBzB,MAAME,IAAI;QAC3BwB,WAAU;QACVvB,sBACE,MAACwB;YAAID,WAAU;;gBACZvB,WAAWpB,2BACV,KAACJ;oBACCiD,MAAK;oBACLC,SAAQ;oBACRC,SAAS;wBACP3B,OAAOqB,QAAQ;wBACfL;oBACF;8BAEChB,OAAOoB,KAAK;;8BAGjB,KAAC5C;oBAAOiD,MAAK;oBAASC,SAAQ;oBAAQC,SAASX;8BAC5CC,EAAE;;;;kBAKRpB,MAAME,IAAI,KAAK,YAAYmB,QAAQrB,MAAMiB,OAAO,IAAIjB,MAAMqB,OAAO;;AAGxE;AAEA;;;;;;;;;;CAUC,GACD,OAAO,SAASU;;IACd,MAAM5C,SAASyB;IACf,MAAMQ,IAAI5C;IACV,MAAMwD,SAAS3D,OAAoB;IACnC,MAAMyB,gBAAQX,0BAAAA,OAAQA,MAAM,mBAAI,EAAE;IAClC,MAAM8C,QAAQnC,MAAMoC,MAAM;IAE1B/D,UAAU;QACR,MAAMgE,OAAOC,SAASC,eAAe;QACrC,IAAIJ,UAAU,GAAG;YACfE,KAAKG,KAAK,CAACC,cAAc,CAAC;YAC1B;QACF;QACA,kEAAkE;QAClE,MAAMC,OAAOR,OAAOrC,OAAO;QAC3BwC,KAAKG,KAAK,CAACG,WAAW,CAAC,yBAAyB,GAAGD,KAAKE,YAAY,CAAC,EAAE,CAAC;QACxE,MAAMC,YAAY,CAACC;YACjB,IAAIA,MAAMC,GAAG,KAAK,MAAM;YACxBD,MAAME,cAAc;YACpBN,KAAKO,KAAK;QACZ;QACAX,SAASY,gBAAgB,CAAC,WAAWL;QACrC,OAAO,IAAMP,SAASa,mBAAmB,CAAC,WAAWN;IACvD,GAAG;QAACV;KAAM;IAEV,IAAI9C,WAAWJ,WAAW,OAAO;IACjC,qBACE,KAACmE;QACCC,KAAKnB;QACLoB,cAAYhC,EAAE;QACdiC,UAAU,CAAC;QACXC,eAAY;QACZ5B,WAAW9C,GACT,4FACAqD,UAAU,IAAI,2BAA2B;kBAG1CnC,MAAMyD,GAAG,CAACvD,CAAAA,sBACT,KAACkB;gBAEClB,OAAOA;gBACPmB,WAAW,IAAMhC,OAAOK,OAAO,CAACQ,MAAMP,EAAE;eAFnCO,MAAMP,EAAE;;AAOvB"}

package/dist/ui/organisms/command-palette/command-palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../../src/ui/organisms/command-palette/command-palette.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,WAAW,EACjB,MAAM,eAAe,CAAC;AAevB,oFAAoF;AACpF,MAAM,WAAW,oBAAoB;IACnC,mFAAmF;IACnF,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,iDAAiD;IACjD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,qEAAqE;IACrE,QAAQ,CAAC,IAAI,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,6DAA6D;IAC7D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,KAAK,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9B;;;;;;;OAOG;IACH,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAC;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;;OAGG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,oBAAoB,CAAC;CAC9B;AA4GD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,EACL,aAAa,EACb,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,MAAM,GACP,EAAE,mBAAmB,+BAyIrB"}
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../../src/ui/organisms/command-palette/command-palette.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,WAAW,EACjB,MAAM,eAAe,CAAC;AAevB,oFAAoF;AACpF,MAAM,WAAW,oBAAoB;IACnC,mFAAmF;IACnF,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,iDAAiD;IACjD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,qEAAqE;IACrE,QAAQ,CAAC,IAAI,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,6DAA6D;IAC7D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,KAAK,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9B;;;;;;;OAOG;IACH,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAC;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;;OAGG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,oBAAoB,CAAC;CAC9B;AA2GD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,EACL,aAAa,EACb,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,MAAM,GACP,EAAE,mBAAmB,+BAqJrB"}

package/dist/ui/organisms/command-palette/command-palette.js

@@ -43,18 +43,14 @@ function Group({ group, labels }) {
             /*#__PURE__*/ _jsx(GroupHeading, {
                 label: group.label
             }),
-            group.isLoading && /*#__PURE__*/ _jsxs("div", {
+            group.isLoading && // The wait is said once, by the palette's status region: a listbox
+            // holds options, and text inside it is read as none of them.
+            /*#__PURE__*/ _jsx("div", {
                 role: "presentation",
                 className: "px-2xs py-3xs",
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        className: "sr-only",
-                        children: labels.loading
-                    }),
-                    /*#__PURE__*/ _jsx(SkeletonText, {
-                        lines: 2
-                    })
-                ]
+                children: /*#__PURE__*/ _jsx(SkeletonText, {
+                    lines: 2
+                })
             }),
             group.options.map((option)=>/*#__PURE__*/ _jsx(CommandRow, {
                     option: option
@@ -110,6 +106,7 @@ function Group({ group, labels }) {
     // that fires after the bug is reported.
     groups.forEach((group)=>group.options.forEach(commandEffectOf));
     const isEmpty = groups.every(groupIsEmpty);
+    const isAnswering = groups.some((group)=>group.isLoading);
     const pop = ()=>{
         if (stack.length === 0) {
             onClose();
@@ -185,9 +182,11 @@ function Group({ group, labels }) {
                                 children: [
                                     page.title !== undefined && /*#__PURE__*/ _jsx("button", {
                                         type: "button",
-                                        "aria-label": labels.back,
+                                        // Its name holds the text it shows (WCAG 2.5.3): "Volver" is
+                                        // said, and "Nuevo" is both seen and said.
+                                        "aria-label": `${labels.back} ${page.title}`,
                                         onClick: pop,
-                                        className: "shrink-0 rounded-md bg-surface px-2xs py-3xs text-step-xs text-content-muted focus-ring",
+                                        className: "inline-flex min-h-(--target-min) shrink-0 items-center rounded-md bg-surface px-2xs py-3xs text-step-xs text-content-muted focus-ring",
                                         children: page.title
                                     }),
                                     /*#__PURE__*/ _jsx(ComboboxInput, {
@@ -201,13 +200,21 @@ function Group({ group, labels }) {
                                     })
                                 ]
                             }),
+                            /*#__PURE__*/ _jsx("span", {
+                                role: "status",
+                                className: "sr-only",
+                                children: isEmpty ? labels.empty : isAnswering ? labels.loading : ''
+                            }),
                             /*#__PURE__*/ _jsx(ComboboxOptions, {
                                 static: true,
+                                // Still filling: a listbox with no options yet is not a broken one.
+                                "aria-busy": isAnswering || undefined,
                                 className: cn('max-h-(--overlay-max-block) overflow-y-auto p-3xs', // The panel is a focus-managed CONTAINER, not a target: the ring
                                 // belongs on the row inside it.
                                 'focus:outline-none'),
                                 children: isEmpty ? /*#__PURE__*/ _jsx("div", {
                                     role: "presentation",
+                                    "aria-hidden": "true",
                                     className: "px-2xs py-s text-step-sm text-content-muted",
                                     children: labels.empty
                                 }) : groups.filter((group)=>!groupIsEmpty(group)).map((group)=>/*#__PURE__*/ _jsx(Group, {