@jonmilner/ui 0.5.2 → 0.5.3

package/dist/AlertDialog/client.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { PopupScope as e, useRecordOpenChange as t } from "../popup/client.mjs";
+import { AlertDialog as n } from "@base-ui/react/alert-dialog";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/AlertDialog/client.tsx
+function i(t) {
+	return /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(a, { ...t }) });
+}
+function a({ onOpenChange: e, ...i }) {
+	return /* @__PURE__ */ r(n.Root, {
+		...i,
+		onOpenChange: t(e)
+	});
+}
+//#endregion
+export { i as AlertDialogRootScope };

package/dist/AlertDialog/index.d.mts

@@ -1,5 +1,5 @@
-import { DialogTrigger, DialogTriggerProps } from "../Dialog/client.mjs";
 import "../Dialog/index.mjs";
+import { DialogTrigger, DialogTriggerProps } from "../Dialog/client.mjs";
 import { ReactNode } from "react";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 //#region src/AlertDialog/index.d.ts

package/dist/AlertDialog/index.mjs

@@ -1,17 +1,17 @@
 import { Button as e } from "../Button/index.mjs";
-import { PopupScope as t } from "../popup/client.mjs";
-import { Dialog as n } from "../Dialog/index.mjs";
+import { Dialog as t } from "../Dialog/index.mjs";
+import { AlertDialogRootScope as n } from "./client.mjs";
 import { AlertDialog as r } from "@base-ui/react/alert-dialog";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/AlertDialog/index.tsx
 function o({ title: o, description: s, confirmLabel: c, cancelLabel: l = "Cancel", tone: u = "default", onConfirm: d, children: f, ...p }) {
-	return /* @__PURE__ */ i(t, { children: /* @__PURE__ */ a(r.Root, {
+	return /* @__PURE__ */ a(n, {
 		...p,
-		children: [f, /* @__PURE__ */ i(n.Popup, {
+		children: [f, /* @__PURE__ */ i(t.Popup, {
 			description: s,
 			size: "sm",
 			title: o,
-			children: /* @__PURE__ */ a(n.Actions, { children: [/* @__PURE__ */ i(n.Close, {
+			children: /* @__PURE__ */ a(t.Actions, { children: [/* @__PURE__ */ i(t.Close, {
 				variant: "secondary",
 				children: l
 			}), /* @__PURE__ */ i(r.Close, {
@@ -22,8 +22,8 @@ function o({ title: o, description: s, confirmLabel: c, cancelLabel: l = "Cancel
 				children: c
 			})] })
 		})]
-	}) });
+	});
 }
-var s = Object.assign(o, { Trigger: n.Trigger });
+var s = Object.assign(o, { Trigger: t.Trigger });
 //#endregion
 export { s as AlertDialog };

package/dist/Dialog/client.d.mts

@@ -1,4 +1,6 @@
+import "../Box/index.mjs";
 import { TriggerElementProps, TriggerLookProps } from "../popup/client.mjs";
+import "./index.mjs";
 import { Dialog } from "@base-ui/react/dialog";
 import { ReactNode } from "react";
 //#region src/Dialog/client.d.ts

package/dist/Dialog/client.mjs

@@ -1,31 +1,74 @@
 "use client";
-import { triggerElement as e, usePopupScope as t } from "../popup/client.mjs";
-import { jsx as n } from "react/jsx-runtime";
-import { Dialog as r } from "@base-ui/react/dialog";
+import { join as e } from "../styles/join.mjs";
+import { splitStyleProps as t } from "../styles/split-style-props.mjs";
+import { Box as n } from "../Box/index.mjs";
+import { PopupScope as r, triggerElement as i, useClosingRule as a, usePopupScope as o, useRecordOpenChange as s } from "../popup/client.mjs";
+import { jsx as c } from "react/jsx-runtime";
+import { Dialog as l } from "@base-ui/react/dialog";
 //#region src/Dialog/client.tsx
-function i({ disabled: i = !1, handle: a, payload: o, id: s, ...c }) {
-	let { ref: l } = t();
-	return /* @__PURE__ */ n(r.Trigger, {
-		disabled: i,
-		handle: a,
-		payload: o,
-		id: s,
-		ref: l,
-		render: e(c)
+function u({ disabled: e = !1, handle: t, payload: n, id: r, ...a }) {
+	let { ref: s } = o();
+	return /* @__PURE__ */ c(l.Trigger, {
+		disabled: e,
+		handle: t,
+		payload: n,
+		id: r,
+		ref: s,
+		render: i(a)
 	});
 }
-function a({ disabled: t = !1, ...i }) {
-	return /* @__PURE__ */ n(r.Close, {
-		disabled: t,
-		render: e(i)
+function d({ disabled: e = !1, ...t }) {
+	return /* @__PURE__ */ c(l.Close, {
+		disabled: e,
+		render: i(t)
 	});
 }
-function o({ children: e }) {
-	let { container: i } = t();
-	return /* @__PURE__ */ n(r.Portal, {
-		container: i,
+function f({ children: e }) {
+	let { container: t } = o();
+	return /* @__PURE__ */ c(l.Portal, {
+		container: t,
 		children: e
 	});
 }
+function p(e) {
+	return /* @__PURE__ */ c(r, { children: /* @__PURE__ */ c(m, { ...e }) });
+}
+function m({ onOpenChange: e, ...t }) {
+	return /* @__PURE__ */ c(l.Root, {
+		...t,
+		onOpenChange: s(e)
+	});
+}
+function h({ frame: e, ...n }) {
+	let r = n.finalFocus !== void 0 && n.finalFocus !== !0;
+	return /* @__PURE__ */ c(l.Popup, {
+		...n,
+		render: (n, { open: i }) => {
+			let [, a] = t(n);
+			return /* @__PURE__ */ c(g, {
+				...a,
+				finalFocus: r,
+				frame: e,
+				open: i
+			});
+		}
+	});
+}
+function g({ open: t, finalFocus: r, frame: i, ref: o, className: s, style: l, ...u }) {
+	return /* @__PURE__ */ c(n, {
+		...u,
+		...i,
+		...a(o, {
+			finalFocus: r,
+			modal: !0,
+			open: t
+		}),
+		className: e(s, i.className),
+		style: {
+			...l,
+			...i.style
+		}
+	});
+}
 //#endregion
-export { a as DialogClose, o as DialogPortal, i as DialogTrigger };
+export { d as DialogClose, h as DialogPopupFrame, f as DialogPortal, p as DialogRootScope, u as DialogTrigger };

package/dist/Dialog/index.d.mts

@@ -1,7 +1,7 @@
 import { BoxProps } from "../Box/index.mjs";
-import { DialogClose, DialogCloseProps, DialogTrigger, DialogTriggerProps } from "./client.mjs";
 import { PartProps } from "../styles/part-props.mjs";
 import { size as size$1 } from "./Dialog.css.mjs";
+import { DialogClose, DialogCloseProps, DialogTrigger, DialogTriggerProps } from "./client.mjs";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { ReactNode } from "react";
 //#region src/Dialog/index.d.ts
@@ -15,7 +15,7 @@ export type DialogPopupProps = PartProps<Omit<Dialog$1.Popup.Props, "title">> &
 };
 export type DialogBodyProps = Omit<BoxProps<"div">, "as">;
 export type DialogActionsProps = Omit<BoxProps<"div">, "as">;
-declare function DialogRoot({ children, ...props }: DialogProps): import("react").JSX.Element;
+declare function DialogRoot(props: DialogProps): import("react").JSX.Element;
 declare function DialogPopup({ title, description, size, position, margin, blockSize, display, flexDirection, gap, padding, backgroundColor, borderRadius, boxShadow, overflow, className, style, children, ...props }: DialogPopupProps): import("react").JSX.Element;
 declare function DialogBody({ display, flexDirection, gap, ...props }: DialogBodyProps): import("react").JSX.Element;
 declare function DialogActions({ display, flexWrap, justifyContent, gap, ...props }: DialogActionsProps): import("react").JSX.Element;

package/dist/Dialog/index.mjs

@@ -3,71 +3,67 @@ import { splitStyleProps as t } from "../styles/split-style-props.mjs";
 import { Box as n } from "../Box/index.mjs";
 import { Text as r } from "../Text/index.mjs";
 import { Heading as i } from "../Heading/index.mjs";
-import { PopupScope as a } from "../popup/client.mjs";
-import { DialogClose as o, DialogPortal as s, DialogTrigger as c } from "./client.mjs";
-import { backdrop as l, popup as u, size as d } from "./Dialog.css.mjs";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { Dialog as m } from "@base-ui/react/dialog";
+import { DialogClose as a, DialogPopupFrame as o, DialogPortal as s, DialogRootScope as c, DialogTrigger as l } from "./client.mjs";
+import { backdrop as u, popup as d, size as f } from "./Dialog.css.mjs";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Dialog as h } from "@base-ui/react/dialog";
 //#region src/Dialog/index.tsx
-function h({ children: e, ...t }) {
-	return /* @__PURE__ */ f(a, { children: /* @__PURE__ */ f(m.Root, {
-		...t,
-		children: e
-	}) });
+function g(e) {
+	return /* @__PURE__ */ p(c, { ...e });
 }
-function g({ title: a, description: o, size: c = "med", position: h = "fixed", margin: g = "auto", blockSize: _ = "fit", display: v = "flex", flexDirection: y = "column", gap: b = "16", padding: x = "24", backgroundColor: S = "bgRaised", borderRadius: C = "lg", boxShadow: w = "lg", overflow: T = "auto", className: E, style: D, children: O, ...k }) {
-	let [A, j] = t(k);
-	return /* @__PURE__ */ p(s, { children: [/* @__PURE__ */ f(m.Backdrop, { render: /* @__PURE__ */ f(n, {
-		className: l,
+function _({ title: a, description: c, size: l = "med", position: g = "fixed", margin: _ = "auto", blockSize: v = "fit", display: y = "flex", flexDirection: b = "column", gap: x = "16", padding: S = "24", backgroundColor: C = "bgRaised", borderRadius: w = "lg", boxShadow: T = "lg", overflow: E = "auto", className: D, style: O, children: k, ...A }) {
+	let [j, M] = t(A);
+	return /* @__PURE__ */ m(s, { children: [/* @__PURE__ */ p(h.Backdrop, { render: /* @__PURE__ */ p(n, {
+		className: u,
 		position: "fixed",
 		zIndex: "modal"
-	}) }), /* @__PURE__ */ p(m.Popup, {
+	}) }), /* @__PURE__ */ m(o, {
 		"aria-modal": !0,
-		...j,
-		render: /* @__PURE__ */ f(n, {
+		...M,
+		frame: {
 			zIndex: "modal",
-			position: h,
-			margin: g,
-			blockSize: _,
-			display: v,
-			flexDirection: y,
-			gap: b,
-			padding: x,
-			backgroundColor: S,
-			borderRadius: C,
-			boxShadow: w,
-			overflow: T,
-			...A,
-			className: e(u, d[c], E),
-			style: D
-		}),
-		children: [/* @__PURE__ */ p(n, {
+			position: g,
+			margin: _,
+			blockSize: v,
+			display: y,
+			flexDirection: b,
+			gap: x,
+			padding: S,
+			backgroundColor: C,
+			borderRadius: w,
+			boxShadow: T,
+			overflow: E,
+			...j,
+			className: e(d, f[l], D),
+			style: O
+		},
+		children: [/* @__PURE__ */ m(n, {
 			display: "flex",
 			flexDirection: "column",
 			gap: "8",
-			children: [/* @__PURE__ */ f(m.Title, {
-				render: /* @__PURE__ */ f(i, {
+			children: [/* @__PURE__ */ p(h.Title, {
+				render: /* @__PURE__ */ p(i, {
 					as: "h2",
 					size: "lg"
 				}),
 				children: a
-			}), o == null ? null : /* @__PURE__ */ f(m.Description, {
-				render: /* @__PURE__ */ f(r, { color: "fgMuted" }),
-				children: o
+			}), c == null ? null : /* @__PURE__ */ p(h.Description, {
+				render: /* @__PURE__ */ p(r, { color: "fgMuted" }),
+				children: c
 			})]
-		}), O]
+		}), k]
 	})] });
 }
-function _({ display: e = "flex", flexDirection: t = "column", gap: r = "12", ...i }) {
-	return /* @__PURE__ */ f(n, {
+function v({ display: e = "flex", flexDirection: t = "column", gap: r = "12", ...i }) {
+	return /* @__PURE__ */ p(n, {
 		display: e,
 		flexDirection: t,
 		gap: r,
 		...i
 	});
 }
-function v({ display: e = "flex", flexWrap: t = "wrap", justifyContent: r = "end", gap: i = "8", ...a }) {
-	return /* @__PURE__ */ f(n, {
+function y({ display: e = "flex", flexWrap: t = "wrap", justifyContent: r = "end", gap: i = "8", ...a }) {
+	return /* @__PURE__ */ p(n, {
 		display: e,
 		flexWrap: t,
 		justifyContent: r,
@@ -75,12 +71,12 @@ function v({ display: e = "flex", flexWrap: t = "wrap", justifyContent: r = "end
 		...a
 	});
 }
-var y = Object.assign(h, {
-	Trigger: c,
-	Popup: g,
-	Body: _,
-	Actions: v,
-	Close: o
+var b = Object.assign(g, {
+	Trigger: l,
+	Popup: _,
+	Body: v,
+	Actions: y,
+	Close: a
 });
 //#endregion
-export { y as Dialog };
+export { b as Dialog };

package/dist/docs/AlertDialog.md

@@ -75,6 +75,7 @@ const [open, setOpen] = useState(false);
 
 - The trigger has `aria-haspopup="dialog"` and `aria-expanded`. The popup is `role="alertdialog"` with `aria-modal`, labelled by the title and described by the description.
 - Opening moves focus to Cancel; Tab and Shift+Tab cycle between the two buttons, and the page behind is inert. Esc or Cancel closes it, and focus returns to the trigger. A click outside does nothing.
+- A closed alert dialog stays on the page while it fades out, but is `inert` and `aria-hidden` from the moment it closes, and focus is back on the trigger at once, so a dialog opened during the fade is the only one a screen reader or a role query finds, and nothing in the fading one takes focus or a click (ADR 0113).
 - The danger confirm button is told apart by its label as well as its color.
 - Under reduced motion the panel only fades.
 

package/dist/docs/Dialog.md

@@ -99,6 +99,7 @@ const [open, setOpen] = useState(false);
 
 - The trigger has `aria-haspopup="dialog"` and `aria-expanded`. The popup is `role="dialog"` with `aria-modal`, labelled by the title and described by the description.
 - Opening moves focus into the popup; Tab and Shift+Tab cycle inside it, and the page behind is inert. Esc or a backdrop click closes it, and focus returns to the trigger.
+- A closed dialog stays on the page while it fades out, but is `inert` and `aria-hidden` from the moment it closes, and focus is back on the trigger at once, so a dialog opened during the fade is the only one a screen reader or a role query finds, and nothing in the fading one takes focus or a click (ADR 0113).
 - The panel takes the shared focus ring when focused from the keyboard. Under forced colors it keeps its border, so it stays apart from the page.
 - The backdrop is 40% of the shadow color over the page; it only dims, and carries no text.
 

package/dist/docs/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./manifest.schema.json",
   "package": "@jonmilner/ui",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "components": [
     {
       "name": "AlertDialog",

package/dist/index.d.mts

@@ -2,8 +2,8 @@ import { Box, BoxProps, StyleProps } from "./Box/index.mjs";
 import { Clickable, ClickableProps } from "./Clickable/index.mjs";
 import { Icon, IconProps } from "./Icon/index.mjs";
 import { Button, ButtonProps } from "./Button/index.mjs";
-import { DialogCloseProps, DialogTriggerProps } from "./Dialog/client.mjs";
 import { Dialog, DialogActionsProps, DialogBodyProps, DialogPopupProps, DialogProps } from "./Dialog/index.mjs";
+import { DialogCloseProps, DialogTriggerProps } from "./Dialog/client.mjs";
 import { AlertDialog, AlertDialogProps, AlertDialogTriggerProps } from "./AlertDialog/index.mjs";
 import { Badge, BadgeProps } from "./Badge/index.mjs";
 import { Checkbox, CheckboxProps } from "./Checkbox/index.mjs";

package/dist/popup/client.mjs

@@ -43,11 +43,13 @@ function m(e) {
 	return (n, r) => {
 		t.current = n ? {
 			keyboard: !1,
-			opener: r.trigger ?? null
+			opener: r.trigger ?? null,
+			recorded: !0
 		} : {
 			...t.current,
 			keyboard: r.event instanceof KeyboardEvent,
-			reason: r.reason
+			reason: r.reason,
+			recorded: !1
 		}, e?.(n, r);
 	};
 }
@@ -64,37 +66,53 @@ var g = /* @__PURE__ */ new Set([
 	"trigger-hover",
 	"focus-out",
 	"outside-press"
-]);
-function _(e, { finalFocus: t, open: n }) {
-	let { trigger: r } = f(), i = a(u), l = c(null), d = o((t) => {
-		l.current = t;
+]), _;
+function v(e) {
+	return _ === void 0 && (_ = !1, e.createElement("div").focus({ get preventScroll() {
+		return _ = !0, !1;
+	} })), _;
+}
+function y(e, { finalFocus: t, modal: n = !1, open: r }) {
+	let { trigger: i } = f(), l = a(u), d = c(null), p = o((t) => {
+		d.current = t;
 		let n = h(e, t);
 		return () => {
-			l.current = null, n();
+			d.current = null, n();
 		};
 	}, [e]);
 	return s(() => {
-		let e = l.current;
+		let e = d.current;
+		if (!r || !e || l.current.recorded) return;
+		let { activeElement: t, body: n } = e.ownerDocument, i = t === n || e.contains(t) ? null : t;
+		l.current = {
+			keyboard: !1,
+			opener: i
+		};
+	}, [r, l]), s(() => {
+		let e = d.current;
 		if (!e) return;
-		if (n) {
+		if (r) {
 			e.inert = !1;
 			return;
 		}
-		let { reason: a, keyboard: o, opener: s } = i.current, c = s?.isConnected ? s : r.current;
-		if (e.contains(e.ownerDocument.activeElement) && !t && !g.has(a ?? "") && c instanceof HTMLElement) {
+		let { reason: a, keyboard: o, opener: s } = l.current;
+		l.current.recorded = !1;
+		let c = s?.isConnected ? s : i.current, { activeElement: u } = e.ownerDocument, f = n && a === "outside-press" && v(e.ownerDocument);
+		if (!t && c instanceof HTMLElement && (f || e.contains(u) && !g.has(a ?? ""))) {
 			let e = { preventScroll: !0 };
 			o && (e.focusVisible = !0), c.focus(e);
 		}
 		e.inert = !0;
 	}, [
-		n,
+		r,
 		t,
-		i,
-		r
+		n,
+		l,
+		i
 	]), {
-		"aria-hidden": !n || void 0,
-		ref: d
+		"aria-hidden": !r || void 0,
+		ref: p
 	};
 }
 //#endregion
-export { d as PopupScope, p as triggerElement, _ as useClosingRule, f as usePopupScope, m as useRecordOpenChange };
+export { d as PopupScope, p as triggerElement, y as useClosingRule, f as usePopupScope, m as useRecordOpenChange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jonmilner/ui",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "files": [
     "dist",
     "THIRD_PARTY_NOTICES.md"