@broberg/app-shell 0.8.0 → 0.9.0

package/README.md

@@ -53,6 +53,38 @@ the user menu reads and writes theme, palette, surfaces and backdrop through it.
 | `TenantSwitcher` | The user's own organisations, the active one marked, switching through the app's route (0.7.1). |
 | `AnalyticsPage` | The app's own visitors, page views, page views per day and most visited pages, from Upmetrics (0.6.0). |
 
+## 0.9.0 — ConfirmDialog: the confirm window instead of `window.confirm()` (F092.13)
+
+Asked for by appkit for «Slet» in a `@broberg/data-table` row. No native `confirm()` or `<dialog>` (D-4cd764).
+
+```tsx
+import { ConfirmDialog } from "@broberg/app-shell/preact";
+
+<ConfirmDialog
+  open={!!pending}
+  title="Slet dokument?"
+  body={`«${pending?.title}» slettes permanent.`}
+  confirmLabel="Slet"
+  destructive
+  busy={deleting}
+  error={deleteError}
+  onConfirm={() => remove(pending!.id)}
+  onCancel={() => setPending(null)}
+  testId="doc-delete"
+/>
+```
+
+- `role="alertdialog"`, `aria-modal`, title and body wired with aria-labelledby/describedby. Closed renders nothing.
+- **Focus starts on Cancel**, the safe button, so a stray Enter deletes nothing. Tab stays inside the window, and focus returns to whatever had it before (the ⋮ button).
+- **Escape or a click on the backdrop cancels**; a click inside the window does not.
+- **While `busy`**, both buttons are disabled and neither Escape nor the backdrop closes it: the request has already gone, and a window that vanished would let the user think they had cancelled a deletion that is happening. The confirm button shows a spinner.
+- `error` appears inside the window as `role="alert"`; the window stays open so the user can retry or cancel. You decide when to close it (set `open` false on success).
+- `destructive` makes the confirm button red. Labels default to Danish («Bekræft» / «Annuller»).
+- testids: `<testId>`, `-backdrop`, `-title`, `-body`, `-error`, `-cancel`, `-confirm` (default prefix `confirm-dialog`).
+- Styled in `css/app-shell.css` (`bas-confirm*`) on theme tokens only.
+
+Purely additive: nothing that rendered in 0.8.0 renders differently.
+
 ## 0.8.0 — TenantSwitcher on a phone (F029.10, found by appkit's pilot)
 
 - **The menu stays on screen.** It is anchored to the switcher, which sits among

package/css/app-shell.css

@@ -391,3 +391,38 @@
 .bas-tenant__role { flex: none; font-size: 11.5px; color: var(--fg-muted); }
 .bas-tenant__note { margin: 0; padding: 10px 14px; font-size: 12.5px; color: var(--fg-muted); }
 .bas-tenant__note.is-error { color: var(--danger); }
+
+/* ── F092.13 confirm dialog ── */
+.bas-confirm-backdrop {
+  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
+  background: rgba(0, 0, 0, .45);
+}
+.bas-confirm {
+  width: min(440px, 100%); padding: 20px; display: flex; flex-direction: column; gap: 12px;
+  background: var(--bg-card, var(--bg)); color: var(--fg);
+  border: 1px solid var(--border); border-radius: var(--radius, 8px);
+  box-shadow: 0 16px 48px rgba(0, 0, 0, .24);
+}
+.bas-confirm__title { margin: 0; font-size: 17px; font-weight: 600; }
+.bas-confirm__body { color: var(--fg-muted); font-size: 14px; line-height: 1.5; }
+.bas-confirm__error { color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius, 8px); padding: 8px 10px; font-size: 13px; }
+.bas-confirm__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
+.bas-confirm__btn {
+  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; cursor: pointer;
+  font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius, 8px);
+  transition: background-color 120ms ease, border-color 120ms ease;
+}
+.bas-confirm__btn:hover:not(:disabled) { background: var(--hover); }
+.bas-confirm__btn:active:not(:disabled) { background: var(--active); }
+.bas-confirm__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.bas-confirm__btn:disabled { opacity: .6; cursor: not-allowed; }
+.bas-confirm__btn.is-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
+.bas-confirm__btn.is-primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); }
+.bas-confirm__btn.is-danger { background: var(--danger-btn, var(--danger)); color: var(--accent-fg); border-color: var(--danger-btn, var(--danger)); }
+.bas-confirm__btn.is-danger:hover:not(:disabled) { background: var(--danger-btn, var(--danger)); filter: brightness(1.08); }
+.bas-confirm__spinner {
+  width: 14px; height: 14px; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent;
+  animation: bas-confirm-spin 700ms linear infinite;
+}
+@keyframes bas-confirm-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .bas-confirm__spinner { animation: none; } }

package/dist/preact.cjs

@@ -1454,6 +1454,97 @@ function TenantSwitcher({ lang, activeSlug, adapter, onSwitch, roleLabel }) {
     ] }) : null
   ] });
 }
+var confirmDialogSeq = 0;
+function ConfirmDialog(p) {
+  const t = p.testId ?? "confirm-dialog";
+  const panel = hooks.useRef(null);
+  const cancelBtn = hooks.useRef(null);
+  const ids = hooks.useMemo(() => {
+    const n = ++confirmDialogSeq;
+    return { title: `bas-confirm-title-${n}`, body: `bas-confirm-body-${n}` };
+  }, []);
+  const live = hooks.useRef(p);
+  live.current = p;
+  hooks.useEffect(() => {
+    if (!p.open) return;
+    const before = document.activeElement;
+    cancelBtn.current?.focus();
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        if (!live.current.busy) live.current.onCancel();
+        return;
+      }
+      if (e.key !== "Tab" || !panel.current) return;
+      const focusable = [...panel.current.querySelectorAll("button:not([disabled])")];
+      if (focusable.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !panel.current.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || !panel.current.contains(active))) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      if (before && typeof before.focus === "function" && document.contains(before)) before.focus();
+    };
+  }, [p.open]);
+  if (!p.open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      class: "bas-confirm-backdrop",
+      "data-testid": `${t}-backdrop`,
+      onMouseDown: (e) => {
+        if (e.target === e.currentTarget && !p.busy) p.onCancel();
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: panel,
+          class: "bas-confirm",
+          role: "alertdialog",
+          "aria-modal": "true",
+          "aria-labelledby": ids.title,
+          "aria-describedby": p.body ? ids.body : void 0,
+          "aria-busy": p.busy ? "true" : void 0,
+          "data-testid": t,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { class: "bas-confirm__title", id: ids.title, "data-testid": `${t}-title`, children: p.title }),
+            p.body ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-confirm__body", id: ids.body, "data-testid": `${t}-body`, children: p.body }) : null,
+            p.error ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-confirm__error", role: "alert", "data-testid": `${t}-error`, children: p.error }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-confirm__actions", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("button", { ref: cancelBtn, type: "button", class: "bas-confirm__btn", disabled: p.busy, "data-testid": `${t}-cancel`, onClick: () => p.onCancel(), children: p.cancelLabel ?? "Annuller" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  class: `bas-confirm__btn is-primary${p.destructive ? " is-danger" : ""}${p.busy ? " is-busy" : ""}`,
+                  disabled: p.busy,
+                  "data-testid": `${t}-confirm`,
+                  onClick: () => p.onConfirm(),
+                  children: [
+                    p.busy ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-confirm__spinner", "aria-hidden": "true" }) : null,
+                    p.confirmLabel ?? "Bekr\xE6ft"
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
 
 exports.AVATAR_MAX_BYTES = AVATAR_MAX_BYTES;
 exports.AVATAR_TYPES = AVATAR_TYPES;
@@ -1463,6 +1554,7 @@ exports.AnalyticsError = AnalyticsError;
 exports.AnalyticsPage = AnalyticsPage;
 exports.AppShell = AppShell;
 exports.Avatar = Avatar;
+exports.ConfirmDialog = ConfirmDialog;
 exports.NotificationBell = NotificationBell;
 exports.PageHeader = PageHeader;
 exports.PageTabs = PageTabs;