@jcsoftdev/ui 0.1.4 → 0.1.6

package/README.md

@@ -22,7 +22,7 @@ Set these on `<html>` (or any element to restyle only its subtree); no rebuild i
 | `data-theme="light\|dark"` | Color scheme (omit to follow the OS). |
 | `data-accent="<palette-id>"` | Brand palette. |
 | `data-style="<preset>"` | Style preset (radii, borders, shadows, glass, ...). See https://ui.jcsoftdev.com/docs/theming/. |
-| `data-density="<level>"` | Control and spacing density. |
+| `data-density="<level>"` | Control and spacing density: `compact`, `normal`, `comfortable`, `touch`. |
 | `data-radius="<level>"` | Global corner radius scale. |
 
 ### Subpath exports
@@ -30,6 +30,7 @@ Set these on `<html>` (or any element to restyle only its subtree); no rebuild i
 - Component groups: `@jcsoftdev/ui/atoms`, `forms`, `overlays`, `navigation`, `containers`, `states`, `shell`, `palette`, `calendar`, `charts`, `dashboards`, `utils`, each also per component (`@jcsoftdev/ui/atoms/button`).
 - `@jcsoftdev/ui/ai`: chat, prompt input, markdown and code block building blocks for AI interfaces.
 - `@jcsoftdev/ui/rich-text`: rich text editor with a sanitizer.
+- `@jcsoftdev/ui/i18n`: `UiStringsProvider`, `useUiStrings` and the `en`/`es` string presets.
 - `@jcsoftdev/ui/xlsx`: dependency-free `.xlsx` writer.
 - `@jcsoftdev/ui/brand`: logo mark and logo forge utilities.
 - `@jcsoftdev/ui/styles/*` and `@jcsoftdev/ui/tokens/*`: CSS and token JSON.
@@ -97,6 +98,88 @@ A custom tokens file must define the same names as `tokens/default.json`; copy i
 
 Switching at runtime: set `data-theme="light|dark"` (remove it for "system") and `data-accent="<palette-id>"` on `<html>`.
 
+## Touch density
+
+`data-density="touch"` is the preset for phones operated with a thumb: controls and small buttons are
+44px tall, large buttons 52px, text inputs 48px, and padding follows `comfortable`. Components with
+fixed hit areas (Checkbox, Switch, RadioGroup rows, an interactive Chip, the Dialog and Drawer close
+buttons) grow to at least 44px under it and are unchanged under every other level.
+
+```html
+<html data-density="touch"> <!-- or any subtree: <main data-density="touch"> -->
+```
+
+Portaled content (Dialog, Drawer) leaves the subtree, so set the attribute on `<html>` or pass the
+`container` prop to keep it inside. Custom token files can declare absolute sizes per level:
+`{ "id": "touch", "density": 1.125, "values": { "control-height": "44px" } }`; the keys must be
+tokens listed in `styles.density.scaled`.
+
+## Localized default strings
+
+Default texts (Retry, Close, Loading, the optional marker, Cancel, Confirm, Processing…) come from
+`UiStringsProvider`. `en` is the default and needs no provider; `es` is neutral Spanish (tú).
+Explicit props such as `retryLabel` or `closeLabel` always win.
+
+```tsx
+import { UiStringsProvider } from "@jcsoftdev/ui/i18n";
+
+<UiStringsProvider locale="es" strings={{ retry: "Probar otra vez" }}>
+  <App />
+</UiStringsProvider>;
+```
+
+`uiStrings.en` and `uiStrings.es` export the presets; `useUiStrings()` reads the active set. A nested
+provider inherits its parent and overrides only the keys it passes. Hard-coded Spanish labels that
+older components already ship (NumberStepper, Carousel, AI set) are not routed through it yet.
+
+## Status, forms and states (additive props)
+
+| Component | Added |
+| --- | --- |
+| `Button` | `loadingLabel` (shown instead of the children while `loading`, announced through a status region), `block` (full width), `size="lg"` (52px at normal density, scaled like the other controls). |
+| `Field` | `optional` appends the localized "(optional)" marker to the label; `error` also accepts `null`. |
+| `Banner` | `title`; a default glyph per tone when `icon` is not passed (`icon={null}` hides it, so status never relies on color alone); only `danger` is `role="alert"`, the rest are `role="status"`; the `info` tone uses the `info` tokens. |
+| `Chip` | `icon`, `statusIcon` (prefixes `info`, `success`, `warning`, `danger` chips with their glyph), and an `info` tone. |
+| `ErrorState` | `title` and `description` (`message` keeps working as the headline); an `Error` or any non-renderable value is never printed, a generic localized sentence is shown instead. |
+
+## ConfirmAction and ResponsiveList
+
+```tsx
+import { ConfirmAction } from "@jcsoftdev/ui/containers/confirm-action";
+
+<ConfirmAction
+  label="Cancel order"
+  consequence="The order of Marco Salazar is cancelled and S/ 45 is refunded."
+  onConfirm={async () => {
+    const res = await cancelOrder(id);
+    return res.ok ? undefined : { ok: false, error: "The payment is already settled." };
+  }}
+/>;
+```
+
+`ConfirmAction` swaps its trigger for the consequence, a danger button and a Cancel button that takes
+focus. While `onConfirm` runs the button shows the localized "Processing…"; a returned
+`{ ok: false, error }` or a thrown error keeps the step open with an inline message.
+
+```tsx
+import { ResponsiveList } from "@jcsoftdev/ui/containers/responsive-list";
+
+<ResponsiveList
+  caption="Today's orders"
+  items={orders}
+  rowKey={(o) => o.id}
+  columns={[
+    { key: "customer", header: "Customer", cell: (o) => o.customer, primary: true },
+    { key: "total", header: "Total", cell: (o) => o.total, align: "end" },
+  ]}
+  renderActions={(o) => <Button size="sm">Open</Button>}
+/>;
+```
+
+A table from `md` up (library `Table` styling) and a stack of cards below it; the `primary` column
+(default: the first) titles each card and the other columns become label/value rows. Every row
+carries `data-row-key`; `rowClassName` applies to both layouts.
+
 ## Install a single component (tree shaking)
 
 The package is unbundled ESM, `"sideEffects": ["**/*.css"]`, and every component has its own entry point:
@@ -128,6 +211,6 @@ The `source` export condition points at `src/*/index.ts` for consumers that want
 
 ## Conventions
 
-- English identifiers; every visible string and aria label is a prop (aria defaults in English).
+- English identifiers; every visible string and aria label is a prop. Defaults are English and can be localized in one place with `UiStringsProvider`.
 - Relative imports use the `.js` extension; components import specific component entries, never group barrels.
 - No literal colors in components, no `dark:` variants; dark mode is a token concern.

package/dist/atoms/button/button.d.ts

@@ -1,11 +1,15 @@
-import { type ComponentPropsWithoutRef } from "react";
+import { type ComponentPropsWithRef } from "react";
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
-export type ButtonSize = "sm" | "md";
-export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+export type ButtonSize = "sm" | "md" | "lg";
+export interface ButtonProps extends ComponentPropsWithRef<"button"> {
     variant?: ButtonVariant;
     size?: ButtonSize;
     loading?: boolean;
+    /** Replaces the children while `loading` and is announced to screen readers. */
+    loadingLabel?: string;
+    /** Stretch to the full width of the container. */
+    block?: boolean;
     /** Render the child element (via Radix Slot) instead of a `<button>`, e.g. a link. */
     asChild?: boolean;
 }
-export declare function Button({ variant, size, loading, disabled, asChild, className, children, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ variant, size, loading, loadingLabel, block, disabled, asChild, className, children, ...props }: ButtonProps): import("react").JSX.Element;

package/dist/atoms/button/button.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import {
   Children,
-  Fragment,
+  Fragment as Fragment2,
   isValidElement
 } from "react";
 import { cn } from "../../utils/cn.js";
@@ -15,12 +15,15 @@ const variantClasses = {
 };
 const sizeClasses = {
   sm: "h-control-sm px-3 text-[12.5px] [&_svg]:size-3.5",
-  md: "h-control px-control-x text-[13px]"
+  md: "h-control px-control-x text-[13px]",
+  lg: "h-control-lg px-control-x text-[14px]"
 };
 function Button({
   variant = "secondary",
   size = "md",
   loading,
+  loadingLabel,
+  block,
   disabled,
   asChild,
   className,
@@ -28,8 +31,9 @@ function Button({
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
-  const content = asChild ? children : Children.map(children, labelRun);
-  return /* @__PURE__ */ jsx(
+  const showLoadingLabel = loading && loadingLabel !== void 0 && !asChild;
+  const content = showLoadingLabel ? labelRun(loadingLabel) : asChild ? children : Children.map(children, labelRun);
+  const button = /* @__PURE__ */ jsx(
     Comp,
     {
       ...asChild ? {} : { type: "button" },
@@ -39,18 +43,24 @@ function Button({
         "inline-flex min-w-0 max-w-full cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-button pressable focus-visible:focus-ring font-[650] no-underline disabled:cursor-not-allowed disabled:opacity-45 [&_svg]:shrink-0",
         variantClasses[variant],
         sizeClasses[size],
+        block && "flex w-full",
         className
       ),
       ...props,
       children: content
     }
   );
+  if (loadingLabel === void 0) return button;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    button,
+    /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: loading ? loadingLabel : null })
+  ] });
 }
 function labelRun(child) {
   if (typeof child === "string" || typeof child === "number") {
     return /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: child });
   }
-  if (isValidElement(child) && child.type === Fragment) {
+  if (isValidElement(child) && child.type === Fragment2) {
     return Children.map(child.props.children, labelRun);
   }
   return child;

package/dist/atoms/checkbox/checkbox.js

@@ -7,7 +7,10 @@ function Checkbox({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     CheckboxPrimitive.Root,
     {
-      className: cn("inline-flex size-10 shrink-0 items-center justify-center", className),
+      className: cn(
+        "inline-flex size-10 shrink-0 items-center justify-center in-data-[density=touch]:size-11",
+        className
+      ),
       ...props,
       children: /* @__PURE__ */ jsx("span", { className: "grid size-[18px] place-items-center rounded-pill border-[1.5px] border-line-strong data-[state=checked]:border-success data-[state=checked]:bg-success", children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { children: /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-[11px] stroke-[3] text-on-accent" }) }) })
     }

package/dist/atoms/chip/chip.d.ts

@@ -1,8 +1,12 @@
-import type { ComponentPropsWithoutRef } from "react";
-export type ChipTone = "neutral" | "danger" | "warning" | "success" | "accent" | "solid" | "outline";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+export type ChipTone = "neutral" | "danger" | "warning" | "success" | "accent" | "info" | "solid" | "outline";
 export interface ChipProps extends ComponentPropsWithoutRef<"span"> {
     tone?: ChipTone;
     /** Use the smaller chip radius instead of a full pill. */
     square?: boolean;
+    /** Leading decorative icon; wins over `statusIcon`. */
+    icon?: ReactNode;
+    /** Prefix `info`, `success`, `warning` and `danger` chips with their status glyph. */
+    statusIcon?: boolean;
 }
-export declare function Chip({ tone, square, className, ...props }: ChipProps): import("react").JSX.Element;
+export declare function Chip({ tone, square, icon, statusIcon: withStatusIcon, className, children, ...props }: ChipProps): import("react").JSX.Element;

package/dist/atoms/chip/chip.js

@@ -1,25 +1,43 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
+import { statusIcon } from "../internal/status-icons.js";
 const toneClasses = {
   neutral: "bg-surface-2 text-ink-2",
   danger: "bg-danger-soft text-danger",
   warning: "bg-warning-soft text-warning",
   success: "bg-success-soft text-success",
   accent: "bg-accent-soft text-accent-ink",
+  info: "bg-info-soft text-info",
   solid: "bg-accent text-on-accent",
   outline: "bg-transparent text-ink-2 shadow-[inset_0_0_0_1px_var(--line-strong)]"
 };
-function Chip({ tone = "neutral", square, className, ...props }) {
-  return /* @__PURE__ */ jsx(
+const statusTones = /* @__PURE__ */ new Set(["info", "success", "warning", "danger"]);
+function Chip({
+  tone = "neutral",
+  square,
+  icon,
+  statusIcon: withStatusIcon,
+  className,
+  children,
+  ...props
+}) {
+  const leading = icon ?? (withStatusIcon && statusTones.has(tone) ? statusIcon(tone, "size-3") : null);
+  const interactive = props.onClick !== void 0 || props.role === "button";
+  return /* @__PURE__ */ jsxs(
     "span",
     {
       className: cn(
         "inline-flex h-6 max-w-full items-center gap-1.5 overflow-hidden whitespace-nowrap px-2.5 font-[650] text-[12px] leading-none [&_svg]:size-3",
         square ? "rounded-chip" : "rounded-badge",
         toneClasses[tone],
+        interactive && "in-data-[density=touch]:min-h-11",
         className
       ),
-      ...props
+      ...props,
+      children: [
+        leading,
+        children
+      ]
     }
   );
 }

package/dist/atoms/internal/status-icons.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+export type StatusTone = "info" | "success" | "warning" | "danger";
+/** Decorative glyph that pairs a status tone with a shape, so status never relies on color alone. */
+export declare function statusIcon(tone: StatusTone, className?: string): ReactNode;

package/dist/atoms/internal/status-icons.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
+const icons = {
+  info: Info,
+  success: CircleCheck,
+  warning: TriangleAlert,
+  danger: CircleAlert
+};
+function statusIcon(tone, className = "size-4") {
+  const Icon = icons[tone];
+  return /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className });
+}
+export {
+  statusIcon
+};

package/dist/atoms/radio-group/radio-group.js

@@ -19,7 +19,7 @@ function RadioGroup({ options, className, ...props }) {
           "label",
           {
             htmlFor: id,
-            className: "flex cursor-pointer items-start gap-2 rounded-control border-divider p-2.5 text-body has-[[data-state=checked]]:border-accent has-[[data-state=checked]]:shadow-[inset_0_0_0_1px_var(--accent)]",
+            className: "flex cursor-pointer items-start gap-2 rounded-control border-divider p-2.5 text-body in-data-[density=touch]:min-h-11 has-[[data-state=checked]]:border-accent has-[[data-state=checked]]:shadow-[inset_0_0_0_1px_var(--accent)]",
             children: [
               /* @__PURE__ */ jsx(
                 RadioGroupPrimitive.Item,

package/dist/atoms/switch/switch.js

@@ -6,7 +6,10 @@ function Switch({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     SwitchPrimitive.Root,
     {
-      className: cn("inline-flex size-10 shrink-0 items-center justify-center", className),
+      className: cn(
+        "inline-flex size-10 shrink-0 items-center justify-center in-data-[density=touch]:size-11",
+        className
+      ),
       ...props,
       children: /* @__PURE__ */ jsx("span", { className: "relative block h-5 w-[34px] rounded-pill bg-line-strong transition-colors data-[state=checked]:bg-accent", children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: "absolute top-[3px] left-[3px] block size-3.5 rounded-pill bg-surface transition-transform data-[state=checked]:translate-x-3.5" }) })
     }

package/dist/charts/gauge-chart/gauge-chart.d.ts

@@ -22,7 +22,7 @@ export interface GaugeChartProps {
     variant?: "semi" | "three-quarter";
     /** Filled arc (`progress`) or a pointer over the bands (`needle`). */
     mode?: "progress" | "needle";
-    /** Colored bands. With `progress` they sit behind the arc and the arc takes the color of the band it is in. */
+    /** Colored bands. With `progress` the track stays neutral, the arc takes the color of the band it is in, and a band shows only while hovered or focused. */
     ranges?: readonly GaugeRange[];
     height?: number | "fill";
     /** Width / height ratio; sizes the drawing from the container width when `height` is not "fill". */

package/dist/charts/gauge-chart/gauge-chart.js

@@ -282,7 +282,7 @@ function GaugePlot({
               )
             }
           ) }) : null,
-          bands.length === 0 ? /* @__PURE__ */ jsx(
+          bands.length === 0 || !needle ? /* @__PURE__ */ jsx(
             "path",
             {
               d: arcLine(cx, cy, mid, a0 + capAngle, a1 - capAngle),
@@ -291,7 +291,8 @@ function GaugePlot({
               strokeLinecap: roundedCaps ? "round" : "butt",
               style: { stroke: "var(--chart-grid)" }
             }
-          ) : /* @__PURE__ */ jsx("g", { mask: roundedCaps ? `url(#${uid}-track)` : void 0, children: bandPaths.map((path, index) => {
+          ) : null,
+          bands.length > 0 ? /* @__PURE__ */ jsx("g", { mask: roundedCaps ? `url(#${uid}-track)` : void 0, children: bandPaths.map((path, index) => {
             const item = bands[index];
             if (!item || !path) return null;
             return /* @__PURE__ */ jsx(
@@ -300,14 +301,14 @@ function GaugePlot({
                 d: path,
                 width: band,
                 color: rangeColor(item),
-                opacity: needle ? 0.92 : 0.26,
-                dimmed: focused != null && focused !== index,
+                opacity: needle ? 0.92 : focused === index ? 0.32 : 0,
+                dimmed: needle && focused != null && focused !== index,
                 onEnter: (event) => nav.hover(index, event),
                 onLeave: nav.leave
               },
               index
             );
-          }) }),
+          }) }) : null,
           !needle && fraction > 0 ? /* @__PURE__ */ jsx(
             "path",
             {

package/dist/containers/banner/banner.d.ts

@@ -1,10 +1,12 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 export type BannerTone = "info" | "success" | "warning" | "danger";
-export interface BannerProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
+export interface BannerProps extends Omit<ComponentPropsWithoutRef<"div">, "role" | "title"> {
     tone?: BannerTone;
-    /** Decorative icon on the left; marked `aria-hidden`. */
+    /** Bold first line above the content. */
+    title?: ReactNode;
+    /** Decorative icon on the left; marked `aria-hidden`. Defaults to a glyph for the tone; `null` hides it. */
     icon?: ReactNode;
     /** Actions on the right, e.g. a retry button. */
     action?: ReactNode;
 }
-export declare function Banner({ tone, icon, action, className, children, ...props }: BannerProps): import("react").JSX.Element;
+export declare function Banner({ tone, title, icon, action, className, children, ...props }: BannerProps): import("react").JSX.Element;

package/dist/containers/banner/banner.js

@@ -1,13 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { statusIcon } from "../../atoms/internal/status-icons.js";
 import { cn } from "../../utils/cn.js";
 const toneClasses = {
-  info: "bg-accent-soft",
+  info: "bg-info-soft",
   success: "bg-success-soft",
   warning: "bg-warning-soft",
   danger: "bg-danger-soft"
 };
 const toneIconClasses = {
-  info: "text-accent-ink",
+  info: "text-info",
   success: "text-success",
   warning: "text-warning",
   danger: "text-danger"
@@ -15,17 +16,19 @@ const toneIconClasses = {
 const toneRole = {
   info: "status",
   success: "status",
-  warning: "alert",
+  warning: "status",
   danger: "alert"
 };
 function Banner({
   tone = "info",
+  title,
   icon,
   action,
   className,
   children,
   ...props
 }) {
+  const resolvedIcon = icon === void 0 ? statusIcon(tone) : icon;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -37,8 +40,11 @@ function Banner({
       ),
       ...props,
       children: [
-        icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("mt-0.5 shrink-0", toneIconClasses[tone]), children: icon }) : null,
-        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-[1_1_14rem] break-words", children }),
+        resolvedIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("mt-0.5 shrink-0", toneIconClasses[tone]), children: resolvedIcon }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-[1_1_14rem] break-words", children: [
+          title ? /* @__PURE__ */ jsx("p", { className: "font-semibold", children: title }) : null,
+          children
+        ] }),
         action ? /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 flex-wrap items-center gap-1.5", children: action }) : null
       ]
     }

package/dist/containers/confirm-action/confirm-action.d.ts

@@ -0,0 +1,17 @@
+import { type ButtonVariant } from "../../atoms/button/button.js";
+import { type ConfirmResult } from "./model.js";
+export interface ConfirmActionProps {
+    /** Trigger label, a verb in the user's words ("Cancel order"). */
+    label: string;
+    /** What will happen, said plainly, shown before the user commits. */
+    consequence: string;
+    /** Label of the destructive button. Defaults to the localized "Confirm". */
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Runs on confirm. Return `{ ok: false, error }` or throw to keep the step open with a message. */
+    onConfirm: () => Promise<ConfirmResult> | Promise<void>;
+    triggerVariant?: ButtonVariant;
+    className?: string;
+}
+/** Inline two-step confirmation for a destructive action; no modal, no lost context. */
+export declare function ConfirmAction({ label, consequence, confirmLabel, cancelLabel, onConfirm, triggerVariant, className, }: ConfirmActionProps): import("react").JSX.Element;

package/dist/containers/confirm-action/confirm-action.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { Button } from "../../atoms/button/button.js";
+import { useUiStrings } from "../../i18n/index.js";
+import { cn } from "../../utils/cn.js";
+import { Banner } from "../banner/banner.js";
+import { runConfirm } from "./model.js";
+function ConfirmAction({
+  label,
+  consequence,
+  confirmLabel,
+  cancelLabel,
+  onConfirm,
+  triggerVariant = "secondary",
+  className
+}) {
+  const strings = useUiStrings();
+  const consequenceId = useId();
+  const triggerRef = useRef(null);
+  const wasConfirming = useRef(false);
+  const [confirming, setConfirming] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [failure, setFailure] = useState(null);
+  useEffect(() => {
+    if (wasConfirming.current && !confirming) triggerRef.current?.focus();
+    wasConfirming.current = confirming;
+  }, [confirming]);
+  async function confirm() {
+    setBusy(true);
+    setFailure(null);
+    const outcome = await runConfirm(onConfirm, strings.actionFailed);
+    setBusy(false);
+    if (outcome.status === "failed") setFailure(outcome.message);
+    else setConfirming(false);
+  }
+  if (!confirming) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+      failure === null ? null : /* @__PURE__ */ jsx(Banner, { tone: "danger", children: failure }),
+      /* @__PURE__ */ jsx(Button, { ref: triggerRef, variant: triggerVariant, onClick: () => setConfirming(true), children: label })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      "aria-describedby": consequenceId,
+      className: cn("m-0 flex min-w-0 flex-col gap-3 border-0 p-0", className),
+      children: [
+        /* @__PURE__ */ jsx("legend", { className: "sr-only", children: label }),
+        /* @__PURE__ */ jsx("p", { id: consequenceId, className: "text-body text-ink", children: consequence }),
+        failure === null ? null : /* @__PURE__ */ jsx(Banner, { tone: "danger", children: failure }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "danger",
+              loading: busy,
+              loadingLabel: strings.processing,
+              onClick: () => void confirm(),
+              children: confirmLabel ?? strings.confirm
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", disabled: busy, autoFocus: true, onClick: () => setConfirming(false), children: cancelLabel ?? strings.cancel })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ConfirmAction
+};

package/dist/containers/confirm-action/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./confirm-action.js";
+export type { ConfirmResult } from "./model.js";

package/dist/containers/confirm-action/index.js

@@ -0,0 +1 @@
+export * from "./confirm-action.js";

package/dist/containers/confirm-action/model.d.ts

@@ -0,0 +1,14 @@
+export type ConfirmResult = {
+    ok: true;
+} | {
+    ok: false;
+    error: string;
+};
+export type ConfirmOutcome = {
+    status: "done";
+} | {
+    status: "failed";
+    message: string;
+};
+/** Runs the confirmed action and folds a returned failure or a thrown error into one outcome. */
+export declare function runConfirm(onConfirm: () => Promise<ConfirmResult> | Promise<void>, fallbackMessage: string): Promise<ConfirmOutcome>;

package/dist/containers/confirm-action/model.js

@@ -0,0 +1,12 @@
+async function runConfirm(onConfirm, fallbackMessage) {
+  try {
+    const result = await onConfirm();
+    if (result !== void 0 && !result.ok) return { status: "failed", message: result.error };
+    return { status: "done" };
+  } catch {
+    return { status: "failed", message: fallbackMessage };
+  }
+}
+export {
+  runConfirm
+};

package/dist/containers/index.d.ts

@@ -5,6 +5,7 @@ export * from "./carousel/index.js";
 export * from "./cell/index.js";
 export * from "./cols/index.js";
 export * from "./comment/index.js";
+export * from "./confirm-action/index.js";
 export * from "./data-grid/index.js";
 export * from "./description-list/index.js";
 export * from "./facts/index.js";
@@ -18,6 +19,7 @@ export * from "./kpi/index.js";
 export * from "./kpi-group/index.js";
 export * from "./page-header/index.js";
 export * from "./resizable/index.js";
+export * from "./responsive-list/index.js";
 export * from "./scrolly/index.js";
 export * from "./settings-layout/index.js";
 export * from "./settings-row/index.js";

package/dist/containers/index.js

@@ -5,6 +5,7 @@ export * from "./carousel/index.js";
 export * from "./cell/index.js";
 export * from "./cols/index.js";
 export * from "./comment/index.js";
+export * from "./confirm-action/index.js";
 export * from "./data-grid/index.js";
 export * from "./description-list/index.js";
 export * from "./facts/index.js";
@@ -18,6 +19,7 @@ export * from "./kpi/index.js";
 export * from "./kpi-group/index.js";
 export * from "./page-header/index.js";
 export * from "./resizable/index.js";
+export * from "./responsive-list/index.js";
 export * from "./scrolly/index.js";
 export * from "./settings-layout/index.js";
 export * from "./settings-row/index.js";

package/dist/containers/responsive-list/index.d.ts

@@ -0,0 +1 @@
+export * from "./responsive-list.js";

package/dist/containers/responsive-list/index.js

@@ -0,0 +1 @@
+export * from "./responsive-list.js";

package/dist/containers/responsive-list/responsive-list.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+export interface ResponsiveListColumn<T> {
+    key: string;
+    header: string;
+    cell: (item: T) => ReactNode;
+    /** Title of the stacked card. Defaults to the first column. */
+    primary?: boolean;
+    align?: "start" | "end";
+}
+export interface ResponsiveListProps<T> {
+    /** Accessible name of the table and of the card list. */
+    caption: string;
+    items: readonly T[];
+    columns: readonly ResponsiveListColumn<T>[];
+    rowKey: (item: T) => string;
+    /** Per-row actions: a last table column, and a footer row on each card. */
+    renderActions?: (item: T) => ReactNode;
+    /** Header of the actions column. Defaults to the localized "Actions". */
+    actionsHeader?: string;
+    rowClassName?: (item: T) => string | undefined;
+    className?: string;
+}
+/** A table from `md` up and a stack of cards below it, from one column definition. */
+export declare function ResponsiveList<T>({ caption, items, columns, rowKey, renderActions, actionsHeader, rowClassName, className, }: ResponsiveListProps<T>): import("react").JSX.Element;