@entifix/react-controls 0.18.2 → 0.20.0

package/dist/ui/molecules/tab-strip/tab-strip.d.ts

@@ -1,29 +1,68 @@
-import type { ComponentPropsWithoutRef } from 'react';
-export type TabStripProps = ComponentPropsWithoutRef<'div'>;
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export interface TabStripProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** The {@link Tab}s, in order. */
+    children?: ReactNode;
+    /** The tablist's accessible name; the controls catalog's `tabs.list` when omitted. */
+    label?: string;
+    /**
+     * What sits after the tabs — a {@link TabAddButton}. It is outside the
+     * tablist, because a tablist may own nothing but tabs.
+     */
+    actions?: ReactNode;
+}
 /**
- * The workspace tab strip: a horizontally scrolling row of {@link Tab}s sitting
- * on the workspace surface. Presentational only — the open set, order, and
- * active tab come from the caller (the tabs store lives in the shell).
+ * The workspace tab strip, on the WAI-ARIA tabs pattern: one Tab stop for the
+ * whole list, Arrow Left/Right (wrapping), Home and End move between tabs, and
+ * Enter or Space activates the focused one — activation is manual, because a
+ * tab's body is a whole screen and rendering every one an arrow passes over is
+ * work nobody asked for. Delete closes a closable tab (see {@link Tab}).
+ *
+ * Presentational: the open set, the order and the active tab come from the
+ * caller. Each tab controls one {@link TabPanel}, which the caller renders.
+ * Below the width of its tabs the list scrolls on its own, so the strip
+ * reflows at 320px rather than widening the page.
  */
-export declare function TabStrip({ className, children, ...props }: TabStripProps): import("react").JSX.Element;
+export declare function TabStrip({ className, children, label, actions, ...props }: TabStripProps): import("react").JSX.Element;
 /** `dirty` = unsaved draft; `saving` = autosave in flight; `error` = save failed. */
 export type TabState = 'idle' | 'dirty' | 'saving' | 'error';
 export interface TabProps {
+    /** The tab's element id, which its {@link TabPanel} is labelled by. */
+    id: string;
     label: string;
+    /** The id of the {@link TabPanel} this tab shows, when it is the active one. */
+    controls?: string;
     active?: boolean;
     state?: TabState;
     onSelect?: () => void;
+    /** Makes the tab closable: by the × beside it, or Delete while it has focus. */
     onClose?: () => void;
     className?: string;
+    /** Set by {@link TabStrip} on the first tab when none is active. */
+    tabStop?: boolean;
+}
+/**
+ * One tab. `role="tab"` sits on the button itself, so the tab is a single
+ * interactive element; the close × beside it is a pointer convenience only —
+ * hidden from assistive technology and out of the Tab order — and Delete on the
+ * focused tab is its keyboard equivalent, announced through `aria-keyshortcuts`.
+ *
+ * The active tab lifts onto the surface (`bg-surface-elevated` + `-mb-px`, so
+ * its base dissolves into the content plane below), and a non-idle tab shows
+ * the autosave dot and its name says the same thing in words, since a dot alone is
+ * colour carrying meaning (WCAG 1.4.1).
+ */
+export declare function Tab({ id, label, controls, active, state, onSelect, onClose, className, tabStop, }: TabProps): import("react").JSX.Element;
+export interface TabPanelProps extends ComponentPropsWithoutRef<'div'> {
+    id: string;
+    /** The id of the {@link Tab} that shows this panel. */
+    labelledBy?: string;
 }
 /**
- * One tab. The active tab lifts onto the surface (`bg-surface-elevated` +
- * `-mb-px` so its base dissolves into the content plane below — the seam), and
- * a non-idle tab shows the autosave dot: it breathes while `saving`, turns
- * `danger` on `error`. The one place the chrome gets loud, on purpose.
+ * The region a tab shows. Focusable, as the pattern asks, so a keyboard user
+ * can reach a panel whose content has nothing focusable of its own.
  */
-export declare function Tab({ label, active, state, onSelect, onClose, className, }: TabProps): import("react").JSX.Element;
+export declare function TabPanel({ labelledBy, className, ...props }: TabPanelProps): import("react").JSX.Element;
 export type TabAddButtonProps = ComponentPropsWithoutRef<'button'>;
-/** The "+" that opens a new tab. */
+/** The "+" that opens a new tab. Pass it as {@link TabStrip}'s `actions`. */
 export declare function TabAddButton({ className, ...props }: TabAddButtonProps): import("react").JSX.Element;
 //# sourceMappingURL=tab-strip.d.ts.map

package/dist/ui/molecules/tab-strip/tab-strip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-strip.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/tab-strip/tab-strip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAKtD,MAAM,MAAM,aAAa,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAE5D;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAaxE;AAED,qFAAqF;AACrF,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7D,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,MAAc,EACd,KAAc,EACd,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,QAAQ,+BAyDV;AAED,MAAM,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAC;AAEnE,oCAAoC;AACpC,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAkBtE"}
+{"version":3,"file":"tab-strip.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/tab-strip/tab-strip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,wBAAwB,EAI7B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,CACX;IACC,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sFAAsF;IACtF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAuBD;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,EACP,GAAG,KAAK,EACT,EAAE,aAAa,+BAmCf;AAED,qFAAqF;AACrF,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7D,MAAM,WAAW,QAAQ;IACvB,uEAAuE;IACvE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,MAAc,EACd,KAAc,EACd,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAgB,GACjB,EAAE,QAAQ,+BAgFV;AAED,MAAM,WAAW,aAAc,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACpE,EAAE,EAAE,MAAM,CAAC;IACX,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAY1E;AAED,MAAM,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAC;AAEnE,6EAA6E;AAC7E,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAkBtE"}

package/dist/ui/molecules/tab-strip/tab-strip.js

@@ -2,67 +2,158 @@
 import { _ as _extends } from "@swc/helpers/_/_extends";
 import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from 'react';
 import { useT } from '../../../i18n/index.js';
 import { cn } from '../../utils/cn.js';
 /**
- * The workspace tab strip: a horizontally scrolling row of {@link Tab}s sitting
- * on the workspace surface. Presentational only — the open set, order, and
- * active tab come from the caller (the tabs store lives in the shell).
+ * Arrow Left/Right (wrapping), Home and End move focus to a sibling tab in the
+ * same tablist. Each tab handles its own keys, so the tablist stays a plain
+ * container and the keyboard model holds for a Tab rendered anywhere.
+ */ function moveFocus(event) {
+    var _all_to;
+    const list = event.currentTarget.closest('[role="tablist"]');
+    if (!list) return false;
+    const all = [
+        ...list.querySelectorAll('[role="tab"]')
+    ];
+    const from = all.indexOf(event.currentTarget);
+    const to = {
+        ArrowRight: (from + 1) % all.length,
+        ArrowLeft: (from - 1 + all.length) % all.length,
+        Home: 0,
+        End: all.length - 1
+    }[event.key];
+    if (to === undefined) return false;
+    (_all_to = all[to]) == null ? void 0 : _all_to.focus();
+    return true;
+}
+/**
+ * The workspace tab strip, on the WAI-ARIA tabs pattern: one Tab stop for the
+ * whole list, Arrow Left/Right (wrapping), Home and End move between tabs, and
+ * Enter or Space activates the focused one — activation is manual, because a
+ * tab's body is a whole screen and rendering every one an arrow passes over is
+ * work nobody asked for. Delete closes a closable tab (see {@link Tab}).
+ *
+ * Presentational: the open set, the order and the active tab come from the
+ * caller. Each tab controls one {@link TabPanel}, which the caller renders.
+ * Below the width of its tabs the list scrolls on its own, so the strip
+ * reflows at 320px rather than widening the page.
  */ export function TabStrip(_0) {
-    let { className, children } = _0, props = _object_without_properties_loose(_0, [
+    let { className, children, label, actions } = _0, props = _object_without_properties_loose(_0, [
         "className",
-        "children"
+        "children",
+        "label",
+        "actions"
     ]);
-    return /*#__PURE__*/ _jsx("div", _extends({
-        role: "tablist",
-        className: cn('flex items-end gap-3xs overflow-x-auto border-b border-border bg-surface px-2xs', className)
+    const t = useT();
+    const tabs = Children.toArray(children);
+    // Roving tabindex: the active tab is the list's Tab stop, or the first tab
+    // when none is active (a dead link shows no tab as its own).
+    const anyActive = tabs.some((tab)=>/*#__PURE__*/ isValidElement(tab) && tab.props.active === true);
+    const items = anyActive ? tabs : tabs.map((tab, index)=>index === 0 && /*#__PURE__*/ isValidElement(tab) ? /*#__PURE__*/ cloneElement(tab, {
+            tabStop: true
+        }) : tab);
+    return /*#__PURE__*/ _jsxs("div", _extends({
+        className: cn('min-w-0 flex w-full items-end gap-3xs border-b border-border bg-surface px-2xs', className)
     }, props, {
-        children: children
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                role: "tablist",
+                "aria-label": label != null ? label : t('tabs.list'),
+                "aria-orientation": "horizontal",
+                className: "min-w-0 flex flex-1 items-end gap-3xs overflow-x-auto",
+                children: items
+            }),
+            actions
+        ]
     }));
 }
 /**
- * One tab. The active tab lifts onto the surface (`bg-surface-elevated` +
- * `-mb-px` so its base dissolves into the content plane below — the seam), and
- * a non-idle tab shows the autosave dot: it breathes while `saving`, turns
- * `danger` on `error`. The one place the chrome gets loud, on purpose.
- */ export function Tab({ label, active = false, state = 'idle', onSelect, onClose, className }) {
+ * One tab. `role="tab"` sits on the button itself, so the tab is a single
+ * interactive element; the close × beside it is a pointer convenience only —
+ * hidden from assistive technology and out of the Tab order — and Delete on the
+ * focused tab is its keyboard equivalent, announced through `aria-keyshortcuts`.
+ *
+ * The active tab lifts onto the surface (`bg-surface-elevated` + `-mb-px`, so
+ * its base dissolves into the content plane below), and a non-idle tab shows
+ * the autosave dot and its name says the same thing in words, since a dot alone is
+ * colour carrying meaning (WCAG 1.4.1).
+ */ export function Tab({ id, label, controls, active = false, state = 'idle', onSelect, onClose, className, tabStop = active }) {
     const t = useT();
     return /*#__PURE__*/ _jsxs("div", {
-        role: "tab",
-        "aria-selected": active,
-        className: cn('group relative flex items-center gap-2xs rounded-t-md px-s py-2xs text-step-sm', 'transition duration-200 ease-smooth', active ? '-mb-px bg-surface-elevated font-medium text-content shadow-edge' : 'text-content-muted hover:bg-surface-elevated/60', state === 'error' && 'bg-danger-subtle text-danger', className),
+        role: "none",
+        className: cn('group relative flex shrink-0 items-center rounded-t-md text-step-sm', 'transition duration-200 ease-smooth', active ? '-mb-px bg-surface-elevated font-medium text-content shadow-edge' : 'text-content-muted hover:bg-surface-elevated/60', state === 'error' && 'bg-danger-subtle text-danger', className),
         children: [
             active && /*#__PURE__*/ _jsx("span", {
                 "aria-hidden": "true",
-                className: "inset-x-0 top-0 absolute h-[2px] rounded-full bg-accent"
+                className: "inset-x-0 top-0 h-0.5 pointer-events-none absolute rounded-full bg-accent"
             }),
-            /*#__PURE__*/ _jsx("button", {
+            /*#__PURE__*/ _jsxs("button", {
                 type: "button",
+                role: "tab",
+                id: id,
+                "aria-selected": active,
+                "aria-controls": active ? controls : undefined,
+                "aria-keyshortcuts": onClose ? 'Delete' : undefined,
+                tabIndex: tabStop ? 0 : -1,
                 onClick: onSelect,
-                className: "max-w-[12rem] truncate focus-ring",
-                children: label
-            }),
-            state !== 'idle' && /*#__PURE__*/ _jsx("span", {
-                "data-testid": "tab-indicator",
-                "aria-hidden": "true",
-                className: cn('size-[6px] shrink-0 rounded-full', state === 'error' ? 'bg-danger' : 'bg-accent', state === 'saving' && 'animate-pulse motion-reduce:animate-none')
+                "aria-label": state === 'idle' ? undefined : t('tabs.withState', {
+                    label,
+                    state: t(`tabs.${state}`)
+                }),
+                onKeyDown: (event)=>{
+                    if (event.key === 'Delete' && onClose) {
+                        event.preventDefault();
+                        onClose();
+                    } else if (moveFocus(event)) {
+                        event.preventDefault();
+                    }
+                },
+                className: cn('max-w-48 flex min-h-(--target-min) items-center gap-2xs rounded-t-md py-2xs pl-s focus-ring', onClose ? 'pr-3xs' : 'pr-s'),
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "truncate",
+                        children: label
+                    }),
+                    state !== 'idle' && /*#__PURE__*/ _jsx("span", {
+                        "data-testid": "tab-indicator",
+                        "aria-hidden": "true",
+                        className: cn('size-1.5 shrink-0 rounded-full', state === 'error' ? 'bg-danger' : 'bg-accent', state === 'saving' && 'animate-pulse motion-reduce:animate-none')
+                    })
+                ]
             }),
             onClose && /*#__PURE__*/ _jsx("button", {
                 type: "button",
-                "aria-label": t('tabs.close', {
+                "aria-hidden": "true",
+                tabIndex: -1,
+                title: t('tabs.close', {
                     label
                 }),
                 onClick: onClose,
-                className: cn('rounded ml-2xs p-3xs text-content-muted opacity-0 focus-ring transition', 'group-hover:opacity-100 hover:bg-surface hover:text-content focus:opacity-100', active && 'opacity-100'),
-                children: /*#__PURE__*/ _jsx("span", {
-                    "aria-hidden": "true",
-                    children: "×"
-                })
+                className: cn('rounded mr-3xs flex min-h-(--target-min) min-w-(--target-min) items-center justify-center text-content-muted opacity-0 transition', 'group-focus-within:opacity-100 group-hover:opacity-100 hover:bg-surface hover:text-content', active && 'opacity-100'),
+                children: "×"
             })
         ]
     });
 }
-/** The "+" that opens a new tab. */ export function TabAddButton(_0) {
+/**
+ * The region a tab shows. Focusable, as the pattern asks, so a keyboard user
+ * can reach a panel whose content has nothing focusable of its own.
+ */ export function TabPanel(_0) {
+    let { labelledBy, className } = _0, props = _object_without_properties_loose(_0, [
+        "labelledBy",
+        "className"
+    ]);
+    return /*#__PURE__*/ _jsx("div", _extends({
+        role: "tabpanel",
+        // The tabs pattern makes the panel itself a Tab stop.
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex: 0,
+        "aria-labelledby": labelledBy,
+        className: cn('focus-ring', className)
+    }, props));
+}
+/** The "+" that opens a new tab. Pass it as {@link TabStrip}'s `actions`. */ export function TabAddButton(_0) {
     let { className } = _0, props = _object_without_properties_loose(_0, [
         "className"
     ]);
@@ -70,7 +161,7 @@ import { cn } from '../../utils/cn.js';
     return /*#__PURE__*/ _jsx("button", _extends({
         type: "button",
         "aria-label": t('tabs.new'),
-        className: cn('mb-3xs shrink-0 rounded-md px-2xs py-3xs text-step-sm text-content-muted', 'transition hover:bg-surface-elevated hover:text-content', 'focus-ring', className)
+        className: cn('mb-3xs flex min-h-(--target-min) min-w-(--target-min) shrink-0 items-center justify-center rounded-md px-2xs text-step-sm text-content-muted', 'transition hover:bg-surface-elevated hover:text-content', 'focus-ring', className)
     }, props, {
         children: /*#__PURE__*/ _jsx("span", {
             "aria-hidden": "true",

package/dist/ui/molecules/tab-strip/tab-strip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/molecules/tab-strip/tab-strip.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentPropsWithoutRef } from 'react';\n\nimport { useT } from '../../../i18n/index.js';\nimport { cn } from '../../utils/cn.js';\n\nexport type TabStripProps = ComponentPropsWithoutRef<'div'>;\n\n/**\n * The workspace tab strip: a horizontally scrolling row of {@link Tab}s sitting\n * on the workspace surface. Presentational only — the open set, order, and\n * active tab come from the caller (the tabs store lives in the shell).\n */\nexport function TabStrip({ className, children, ...props }: TabStripProps) {\n  return (\n    <div\n      role=\"tablist\"\n      className={cn(\n        'flex items-end gap-3xs overflow-x-auto border-b border-border bg-surface px-2xs',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n/** `dirty` = unsaved draft; `saving` = autosave in flight; `error` = save failed. */\nexport type TabState = 'idle' | 'dirty' | 'saving' | 'error';\n\nexport interface TabProps {\n  label: string;\n  active?: boolean;\n  state?: TabState;\n  onSelect?: () => void;\n  onClose?: () => void;\n  className?: string;\n}\n\n/**\n * One tab. The active tab lifts onto the surface (`bg-surface-elevated` +\n * `-mb-px` so its base dissolves into the content plane below — the seam), and\n * a non-idle tab shows the autosave dot: it breathes while `saving`, turns\n * `danger` on `error`. The one place the chrome gets loud, on purpose.\n */\nexport function Tab({\n  label,\n  active = false,\n  state = 'idle',\n  onSelect,\n  onClose,\n  className,\n}: TabProps) {\n  const t = useT();\n\n  return (\n    <div\n      role=\"tab\"\n      aria-selected={active}\n      className={cn(\n        'group relative flex items-center gap-2xs rounded-t-md px-s py-2xs text-step-sm',\n        'transition duration-200 ease-smooth',\n        active\n          ? '-mb-px bg-surface-elevated font-medium text-content shadow-edge'\n          : 'text-content-muted hover:bg-surface-elevated/60',\n        state === 'error' && 'bg-danger-subtle text-danger',\n        className,\n      )}\n    >\n      {active && (\n        <span\n          aria-hidden=\"true\"\n          className=\"inset-x-0 top-0 absolute h-[2px] rounded-full bg-accent\"\n        />\n      )}\n      <button\n        type=\"button\"\n        onClick={onSelect}\n        className=\"max-w-[12rem] truncate focus-ring\"\n      >\n        {label}\n      </button>\n      {state !== 'idle' && (\n        <span\n          data-testid=\"tab-indicator\"\n          aria-hidden=\"true\"\n          className={cn(\n            'size-[6px] shrink-0 rounded-full',\n            state === 'error' ? 'bg-danger' : 'bg-accent',\n            state === 'saving' && 'animate-pulse motion-reduce:animate-none',\n          )}\n        />\n      )}\n      {onClose && (\n        <button\n          type=\"button\"\n          aria-label={t('tabs.close', { label })}\n          onClick={onClose}\n          className={cn(\n            'rounded ml-2xs p-3xs text-content-muted opacity-0 focus-ring transition',\n            'group-hover:opacity-100 hover:bg-surface hover:text-content focus:opacity-100',\n            active && 'opacity-100',\n          )}\n        >\n          <span aria-hidden=\"true\">×</span>\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport type TabAddButtonProps = ComponentPropsWithoutRef<'button'>;\n\n/** The \"+\" that opens a new tab. */\nexport function TabAddButton({ className, ...props }: TabAddButtonProps) {\n  const t = useT();\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={t('tabs.new')}\n      className={cn(\n        'mb-3xs shrink-0 rounded-md px-2xs py-3xs text-step-sm text-content-muted',\n        'transition hover:bg-surface-elevated hover:text-content',\n        'focus-ring',\n        className,\n      )}\n      {...props}\n    >\n      <span aria-hidden=\"true\">+</span>\n    </button>\n  );\n}\n"],"names":["useT","cn","TabStrip","className","children","props","div","role","Tab","label","active","state","onSelect","onClose","t","aria-selected","span","aria-hidden","button","type","onClick","data-testid","aria-label","TabAddButton"],"mappings":"AAAA;;;;AAIA,SAASA,IAAI,QAAQ,yBAAyB;AAC9C,SAASC,EAAE,QAAQ,oBAAoB;AAIvC;;;;CAIC,GACD,OAAO,SAASC,SAAS,EAAgD;QAAhD,EAAEC,SAAS,EAAEC,QAAQ,EAA2B,OAAtBC;;;;IACjD,qBACE,KAACC;QACCC,MAAK;QACLJ,WAAWF,GACT,mFACAE;OAEEE;kBAEHD;;AAGP;AAcA;;;;;CAKC,GACD,OAAO,SAASI,IAAI,EAClBC,KAAK,EACLC,SAAS,KAAK,EACdC,QAAQ,MAAM,EACdC,QAAQ,EACRC,OAAO,EACPV,SAAS,EACA;IACT,MAAMW,IAAId;IAEV,qBACE,MAACM;QACCC,MAAK;QACLQ,iBAAeL;QACfP,WAAWF,GACT,kFACA,uCACAS,SACI,oEACA,mDACJC,UAAU,WAAW,gCACrBR;;YAGDO,wBACC,KAACM;gBACCC,eAAY;gBACZd,WAAU;;0BAGd,KAACe;gBACCC,MAAK;gBACLC,SAASR;gBACTT,WAAU;0BAETM;;YAEFE,UAAU,wBACT,KAACK;gBACCK,eAAY;gBACZJ,eAAY;gBACZd,WAAWF,GACT,oCACAU,UAAU,UAAU,cAAc,aAClCA,UAAU,YAAY;;YAI3BE,yBACC,KAACK;gBACCC,MAAK;gBACLG,cAAYR,EAAE,cAAc;oBAAEL;gBAAM;gBACpCW,SAASP;gBACTV,WAAWF,GACT,2EACA,iFACAS,UAAU;0BAGZ,cAAA,KAACM;oBAAKC,eAAY;8BAAO;;;;;AAKnC;AAIA,kCAAkC,GAClC,OAAO,SAASM,aAAa,EAA0C;QAA1C,EAAEpB,SAAS,EAA+B,OAA1BE;;;IAC3C,MAAMS,IAAId;IAEV,qBACE,KAACkB;QACCC,MAAK;QACLG,cAAYR,EAAE;QACdX,WAAWF,GACT,4EACA,2DACA,cACAE;OAEEE;kBAEJ,cAAA,KAACW;YAAKC,eAAY;sBAAO;;;AAG/B"}
+{"version":3,"sources":["../../../../src/ui/molecules/tab-strip/tab-strip.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Children,\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  isValidElement,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport { useT } from '../../../i18n/index.js';\nimport { cn } from '../../utils/cn.js';\n\nexport interface TabStripProps extends Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'children'\n> {\n  /** The {@link Tab}s, in order. */\n  children?: ReactNode;\n  /** The tablist's accessible name; the controls catalog's `tabs.list` when omitted. */\n  label?: string;\n  /**\n   * What sits after the tabs — a {@link TabAddButton}. It is outside the\n   * tablist, because a tablist may own nothing but tabs.\n   */\n  actions?: ReactNode;\n}\n\n/**\n * Arrow Left/Right (wrapping), Home and End move focus to a sibling tab in the\n * same tablist. Each tab handles its own keys, so the tablist stays a plain\n * container and the keyboard model holds for a Tab rendered anywhere.\n */\nfunction moveFocus(event: KeyboardEvent<HTMLButtonElement>): boolean {\n  const list = event.currentTarget.closest('[role=\"tablist\"]');\n  if (!list) return false;\n  const all = [...list.querySelectorAll<HTMLElement>('[role=\"tab\"]')];\n  const from = all.indexOf(event.currentTarget);\n  const to = {\n    ArrowRight: (from + 1) % all.length,\n    ArrowLeft: (from - 1 + all.length) % all.length,\n    Home: 0,\n    End: all.length - 1,\n  }[event.key];\n  if (to === undefined) return false;\n  all[to]?.focus();\n  return true;\n}\n\n/**\n * The workspace tab strip, on the WAI-ARIA tabs pattern: one Tab stop for the\n * whole list, Arrow Left/Right (wrapping), Home and End move between tabs, and\n * Enter or Space activates the focused one — activation is manual, because a\n * tab's body is a whole screen and rendering every one an arrow passes over is\n * work nobody asked for. Delete closes a closable tab (see {@link Tab}).\n *\n * Presentational: the open set, the order and the active tab come from the\n * caller. Each tab controls one {@link TabPanel}, which the caller renders.\n * Below the width of its tabs the list scrolls on its own, so the strip\n * reflows at 320px rather than widening the page.\n */\nexport function TabStrip({\n  className,\n  children,\n  label,\n  actions,\n  ...props\n}: TabStripProps) {\n  const t = useT();\n  const tabs = Children.toArray(children);\n  // Roving tabindex: the active tab is the list's Tab stop, or the first tab\n  // when none is active (a dead link shows no tab as its own).\n  const anyActive = tabs.some(\n    tab => isValidElement<TabProps>(tab) && tab.props.active === true,\n  );\n  const items = anyActive\n    ? tabs\n    : tabs.map((tab, index) =>\n        index === 0 && isValidElement<TabProps>(tab)\n          ? cloneElement(tab as ReactElement<TabProps>, { tabStop: true })\n          : tab,\n      );\n\n  return (\n    <div\n      className={cn(\n        'min-w-0 flex w-full items-end gap-3xs border-b border-border bg-surface px-2xs',\n        className,\n      )}\n      {...props}\n    >\n      <div\n        role=\"tablist\"\n        aria-label={label ?? t('tabs.list')}\n        aria-orientation=\"horizontal\"\n        className=\"min-w-0 flex flex-1 items-end gap-3xs overflow-x-auto\"\n      >\n        {items}\n      </div>\n      {actions}\n    </div>\n  );\n}\n\n/** `dirty` = unsaved draft; `saving` = autosave in flight; `error` = save failed. */\nexport type TabState = 'idle' | 'dirty' | 'saving' | 'error';\n\nexport interface TabProps {\n  /** The tab's element id, which its {@link TabPanel} is labelled by. */\n  id: string;\n  label: string;\n  /** The id of the {@link TabPanel} this tab shows, when it is the active one. */\n  controls?: string;\n  active?: boolean;\n  state?: TabState;\n  onSelect?: () => void;\n  /** Makes the tab closable: by the × beside it, or Delete while it has focus. */\n  onClose?: () => void;\n  className?: string;\n  /** Set by {@link TabStrip} on the first tab when none is active. */\n  tabStop?: boolean;\n}\n\n/**\n * One tab. `role=\"tab\"` sits on the button itself, so the tab is a single\n * interactive element; the close × beside it is a pointer convenience only —\n * hidden from assistive technology and out of the Tab order — and Delete on the\n * focused tab is its keyboard equivalent, announced through `aria-keyshortcuts`.\n *\n * The active tab lifts onto the surface (`bg-surface-elevated` + `-mb-px`, so\n * its base dissolves into the content plane below), and a non-idle tab shows\n * the autosave dot and its name says the same thing in words, since a dot alone is\n * colour carrying meaning (WCAG 1.4.1).\n */\nexport function Tab({\n  id,\n  label,\n  controls,\n  active = false,\n  state = 'idle',\n  onSelect,\n  onClose,\n  className,\n  tabStop = active,\n}: TabProps) {\n  const t = useT();\n\n  return (\n    <div\n      role=\"none\"\n      className={cn(\n        'group relative flex shrink-0 items-center rounded-t-md text-step-sm',\n        'transition duration-200 ease-smooth',\n        active\n          ? '-mb-px bg-surface-elevated font-medium text-content shadow-edge'\n          : 'text-content-muted hover:bg-surface-elevated/60',\n        state === 'error' && 'bg-danger-subtle text-danger',\n        className,\n      )}\n    >\n      {active && (\n        <span\n          aria-hidden=\"true\"\n          className=\"inset-x-0 top-0 h-0.5 pointer-events-none absolute rounded-full bg-accent\"\n        />\n      )}\n      <button\n        type=\"button\"\n        role=\"tab\"\n        id={id}\n        aria-selected={active}\n        aria-controls={active ? controls : undefined}\n        aria-keyshortcuts={onClose ? 'Delete' : undefined}\n        tabIndex={tabStop ? 0 : -1}\n        onClick={onSelect}\n        aria-label={\n          state === 'idle'\n            ? undefined\n            : t('tabs.withState', { label, state: t(`tabs.${state}`) })\n        }\n        onKeyDown={event => {\n          if (event.key === 'Delete' && onClose) {\n            event.preventDefault();\n            onClose();\n          } else if (moveFocus(event)) {\n            event.preventDefault();\n          }\n        }}\n        className={cn(\n          'max-w-48 flex min-h-(--target-min) items-center gap-2xs rounded-t-md py-2xs pl-s focus-ring',\n          onClose ? 'pr-3xs' : 'pr-s',\n        )}\n      >\n        <span className=\"truncate\">{label}</span>\n        {state !== 'idle' && (\n          <span\n            data-testid=\"tab-indicator\"\n            aria-hidden=\"true\"\n            className={cn(\n              'size-1.5 shrink-0 rounded-full',\n              state === 'error' ? 'bg-danger' : 'bg-accent',\n              state === 'saving' && 'animate-pulse motion-reduce:animate-none',\n            )}\n          />\n        )}\n      </button>\n      {onClose && (\n        <button\n          type=\"button\"\n          aria-hidden=\"true\"\n          tabIndex={-1}\n          title={t('tabs.close', { label })}\n          onClick={onClose}\n          className={cn(\n            'rounded mr-3xs flex min-h-(--target-min) min-w-(--target-min) items-center justify-center text-content-muted opacity-0 transition',\n            'group-focus-within:opacity-100 group-hover:opacity-100 hover:bg-surface hover:text-content',\n            active && 'opacity-100',\n          )}\n        >\n          ×\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport interface TabPanelProps extends ComponentPropsWithoutRef<'div'> {\n  id: string;\n  /** The id of the {@link Tab} that shows this panel. */\n  labelledBy?: string;\n}\n\n/**\n * The region a tab shows. Focusable, as the pattern asks, so a keyboard user\n * can reach a panel whose content has nothing focusable of its own.\n */\nexport function TabPanel({ labelledBy, className, ...props }: TabPanelProps) {\n  return (\n    <div\n      role=\"tabpanel\"\n      // The tabs pattern makes the panel itself a Tab stop.\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n      tabIndex={0}\n      aria-labelledby={labelledBy}\n      className={cn('focus-ring', className)}\n      {...props}\n    />\n  );\n}\n\nexport type TabAddButtonProps = ComponentPropsWithoutRef<'button'>;\n\n/** The \"+\" that opens a new tab. Pass it as {@link TabStrip}'s `actions`. */\nexport function TabAddButton({ className, ...props }: TabAddButtonProps) {\n  const t = useT();\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={t('tabs.new')}\n      className={cn(\n        'mb-3xs flex min-h-(--target-min) min-w-(--target-min) shrink-0 items-center justify-center rounded-md px-2xs text-step-sm text-content-muted',\n        'transition hover:bg-surface-elevated hover:text-content',\n        'focus-ring',\n        className,\n      )}\n      {...props}\n    >\n      <span aria-hidden=\"true\">+</span>\n    </button>\n  );\n}\n"],"names":["Children","cloneElement","isValidElement","useT","cn","moveFocus","event","all","list","currentTarget","closest","querySelectorAll","from","indexOf","to","ArrowRight","length","ArrowLeft","Home","End","key","undefined","focus","TabStrip","className","children","label","actions","props","t","tabs","toArray","anyActive","some","tab","active","items","map","index","tabStop","div","role","aria-label","aria-orientation","Tab","id","controls","state","onSelect","onClose","span","aria-hidden","button","type","aria-selected","aria-controls","aria-keyshortcuts","tabIndex","onClick","onKeyDown","preventDefault","data-testid","title","TabPanel","labelledBy","aria-labelledby","TabAddButton"],"mappings":"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"}

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"}