@jonmilner/ui 0.4.2 → 0.4.3

package/dist/Menu/Menu.css

@@ -1,2 +1,2 @@
 @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
-@layer components.menu{:where(._393eil0[data-closed])>[data-base-ui-focus-guard]{visibility:hidden}._393eil1{border:var(--space-1) solid var(--color-border);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter)}._393eil1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil1[data-starting-style],._393eil1[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._393eil2{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._393eil2:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil2[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._393eil2[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._393eil3{text-decoration:none}._393eil4{border-block-start:var(--space-1) solid var(--color-border)}@media (forced-colors:active){._393eil2[data-highlighted]:not([aria-disabled=true]){forced-color-adjust:none;color:highlighttext;background-color:highlight}._393eil2[aria-disabled=true]{color:graytext}}}
+@layer components.menu{._393eil1{border:var(--space-1) solid var(--color-border);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter)}._393eil1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil1[data-starting-style],._393eil1[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._393eil2{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._393eil2:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil2[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._393eil2[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._393eil3{text-decoration:none}._393eil4{border-block-start:var(--space-1) solid var(--color-border)}@media (forced-colors:active){._393eil2[data-highlighted]:not([aria-disabled=true]){forced-color-adjust:none;color:highlighttext;background-color:highlight}._393eil2[aria-disabled=true]{color:graytext}}}

package/dist/Menu/client.d.mts

@@ -1,4 +1,5 @@
 import { TriggerElementProps, TriggerLookProps } from "../popup/client.mjs";
+import "./index.mjs";
 import { Menu } from "@base-ui/react/menu";
 //#region src/Menu/client.d.ts
 type TriggerOwnProps = Omit<Menu.Trigger.Props, "render" | "className" | "style" | "nativeButton">;

package/dist/Menu/client.mjs

@@ -2,46 +2,111 @@
 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 { triggerElement as r, usePopupScope as i } from "../popup/client.mjs";
-import { positioner as a } from "./Menu.css.mjs";
-import { jsx as o } from "react/jsx-runtime";
-import { Menu as s } from "@base-ui/react/menu";
+import { PopupScope as r, triggerElement as i, usePopupScope as a } from "../popup/client.mjs";
+import { positioner as o } from "./Menu.css.mjs";
+import { jsx as s } from "react/jsx-runtime";
+import { createContext as c, use as l, useCallback as u, useLayoutEffect as d, useRef as f } from "react";
+import { Menu as p } from "@base-ui/react/menu";
 //#region src/Menu/client.tsx
-function c({ disabled: e = !1, openOnHover: t, delay: n, closeDelay: a, handle: c, payload: l, ...u }) {
-	let { ref: d } = i();
-	return /* @__PURE__ */ o(s.Trigger, {
+function m({ disabled: e = !1, openOnHover: t, delay: n, closeDelay: r, handle: o, payload: c, ...l }) {
+	let { ref: u } = a();
+	return /* @__PURE__ */ s(p.Trigger, {
 		disabled: e,
 		openOnHover: t,
 		delay: n,
-		closeDelay: a,
-		handle: c,
-		payload: l,
-		ref: d,
-		render: r(u)
+		closeDelay: r,
+		handle: o,
+		payload: c,
+		ref: u,
+		render: i(l)
 	});
 }
-function l({ children: e }) {
-	let { container: t } = i();
-	return /* @__PURE__ */ o(s.Portal, {
+function h({ children: e }) {
+	let { container: t } = a();
+	return /* @__PURE__ */ s(p.Portal, {
 		container: t,
 		children: e
 	});
 }
-function u(r) {
-	return /* @__PURE__ */ o(s.Positioner, {
-		...r,
+var g = c({ current: {
+	keyboard: !1,
+	opener: null
+} });
+function _({ onOpenChange: e, ...t }) {
+	let n = f({
+		keyboard: !1,
+		opener: null
+	});
+	return /* @__PURE__ */ s(r, { children: /* @__PURE__ */ s(g, {
+		value: n,
+		children: /* @__PURE__ */ s(p.Root, {
+			...t,
+			onOpenChange: (t, r) => {
+				n.current = t ? {
+					keyboard: !1,
+					opener: r.trigger ?? null
+				} : {
+					...n.current,
+					keyboard: r.event instanceof KeyboardEvent,
+					reason: r.reason
+				}, e?.(t, r);
+			}
+		})
+	}) });
+}
+function v({ finalFocus: e, ...n }) {
+	return /* @__PURE__ */ s(p.Positioner, {
+		...n,
 		collisionPadding: 8,
-		render: (r, { open: i }) => {
-			let [, s] = t(r);
-			return /* @__PURE__ */ o(n, {
-				...s,
-				"aria-hidden": !i || void 0,
-				className: e(a, s.className),
-				zIndex: "popover"
+		render: (n, { open: r }) => {
+			let [, i] = t(n);
+			return /* @__PURE__ */ s(b, {
+				...i,
+				finalFocus: e,
+				open: r
 			});
 		},
 		sideOffset: 4
 	});
 }
+var y = /* @__PURE__ */ new Set([
+	"trigger-hover",
+	"focus-out",
+	"outside-press"
+]);
+function b({ open: t, finalFocus: r, ref: i, className: c, ...p }) {
+	let { trigger: m } = a(), h = l(g), _ = f(null), v = u((e) => {
+		_.current = e;
+		let t = typeof i == "function" ? i(e) : void 0;
+		return i && typeof i != "function" && (i.current = e), () => {
+			_.current = null, typeof t == "function" ? t() : typeof i == "function" ? i(null) : i && (i.current = null);
+		};
+	}, [i]);
+	return d(() => {
+		let e = _.current;
+		if (!e) return;
+		if (t) {
+			e.inert = !1;
+			return;
+		}
+		let { reason: n, keyboard: i, opener: a } = h.current, o = a?.isConnected ? a : m.current;
+		if (e.contains(e.ownerDocument.activeElement) && !r && !y.has(n ?? "") && o instanceof HTMLElement) {
+			let e = { preventScroll: !0 };
+			i && (e.focusVisible = !0), o.focus(e);
+		}
+		e.inert = !0;
+	}, [
+		t,
+		r,
+		h,
+		m
+	]), /* @__PURE__ */ s(n, {
+		...p,
+		"aria-hidden": !t || void 0,
+		className: e(o, c),
+		ref: v,
+		zIndex: "popover"
+	});
+}
 //#endregion
-export { l as MenuPortal, u as MenuPositioner, c as MenuTrigger };
+export { h as MenuPortal, v as MenuPositioner, _ as MenuRootScope, m as MenuTrigger };

package/dist/Menu/index.d.mts

@@ -22,7 +22,7 @@ export type MenuSeparatorProps = PartProps<Menu$1.Separator.Props>;
 export type MenuGroupProps = PartProps<Menu$1.Group.Props> & {
   label: ReactNode;
 };
-declare function MenuRoot({ children, ...props }: MenuProps): import("react").JSX.Element;
+declare function MenuRoot(props: MenuProps): import("react").JSX.Element;
 declare function MenuPopup({ side, align, backgroundColor, borderRadius, boxShadow, padding, className, style, ...props }: MenuPopupProps): import("react").JSX.Element;
 declare function MenuItem({ variant, display, alignItems, gap, minBlockSize, paddingInline, borderRadius, color, className, style, children, ...props }: MenuItemProps): import("react").JSX.Element;
 declare function MenuLinkItem({ href, disabled, closeOnClick, onClick, display, alignItems, gap, minBlockSize, paddingInline, borderRadius, color, className, style, children, ...props }: MenuLinkItemProps): import("react").JSX.Element;

package/dist/Menu/index.mjs

@@ -2,33 +2,30 @@ 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 { Text as r } from "../Text/index.mjs";
-import { PopupScope as i } from "../popup/client.mjs";
-import { item as a, linkItem as o, popup as s, separator as c } from "./Menu.css.mjs";
-import { MenuPortal as l, MenuPositioner as u, MenuTrigger as d } from "./client.mjs";
+import { item as i, linkItem as a, popup as o, separator as s } from "./Menu.css.mjs";
+import { MenuPortal as c, MenuPositioner as l, MenuRootScope as u, MenuTrigger as d } from "./client.mjs";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 import { Children as m } from "react";
 import { Menu as h } from "@base-ui/react/menu";
 //#region src/Menu/index.tsx
-function g({ children: e, ...t }) {
-	return /* @__PURE__ */ f(i, { children: /* @__PURE__ */ f(h.Root, {
-		...t,
-		children: e
-	}) });
+function g(e) {
+	return /* @__PURE__ */ f(u, { ...e });
 }
-function _({ side: r = "bottom", align: i = "start", backgroundColor: a = "bgRaised", borderRadius: o = "med", boxShadow: c = "med", padding: d = "4", className: p, style: m, ...g }) {
+function _({ side: r = "bottom", align: i = "start", backgroundColor: a = "bgRaised", borderRadius: s = "med", boxShadow: u = "med", padding: d = "4", className: p, style: m, ...g }) {
 	let [_, v] = t(g);
-	return /* @__PURE__ */ f(l, { children: /* @__PURE__ */ f(u, {
+	return /* @__PURE__ */ f(c, { children: /* @__PURE__ */ f(l, {
 		align: i,
+		finalFocus: v.finalFocus !== void 0 && v.finalFocus !== !0,
 		side: r,
 		children: /* @__PURE__ */ f(h.Popup, {
 			...v,
 			render: /* @__PURE__ */ f(n, {
 				backgroundColor: a,
-				borderRadius: o,
-				boxShadow: c,
+				borderRadius: s,
+				boxShadow: u,
 				padding: d,
 				..._,
-				className: e(s, p),
+				className: e(o, p),
 				style: m
 			})
 		})
@@ -42,12 +39,12 @@ function v(e) {
 		children: e
 	}) : e);
 }
-function y({ variant: r = "neutral", display: i = "flex", alignItems: o = "center", gap: s = "8", minBlockSize: c = "sm", paddingInline: l = "12", borderRadius: u = "sm", color: d = r === "danger" ? "danger" : "fg", className: p, style: m, children: g, ..._ }) {
+function y({ variant: r = "neutral", display: a = "flex", alignItems: o = "center", gap: s = "8", minBlockSize: c = "sm", paddingInline: l = "12", borderRadius: u = "sm", color: d = r === "danger" ? "danger" : "fg", className: p, style: m, children: g, ..._ }) {
 	let [y, b] = t(_);
 	return /* @__PURE__ */ f(h.Item, {
 		...b,
 		render: /* @__PURE__ */ f(n, {
-			display: i,
+			display: a,
 			alignItems: o,
 			gap: s,
 			minBlockSize: c,
@@ -55,20 +52,20 @@ function y({ variant: r = "neutral", display: i = "flex", alignItems: o = "cente
 			borderRadius: u,
 			color: d,
 			...y,
-			className: e(a, p),
+			className: e(i, p),
 			style: m
 		}),
 		children: v(g)
 	});
 }
-function b({ href: r, disabled: i = !1, closeOnClick: s = !0, onClick: c, display: l = "flex", alignItems: u = "center", gap: d = "8", minBlockSize: p = "sm", paddingInline: m = "12", borderRadius: g = "sm", color: _ = "fg", className: y, style: b, children: x, ...S }) {
+function b({ href: r, disabled: o = !1, closeOnClick: s = !0, onClick: c, display: l = "flex", alignItems: u = "center", gap: d = "8", minBlockSize: p = "sm", paddingInline: m = "12", borderRadius: g = "sm", color: _ = "fg", className: y, style: b, children: x, ...S }) {
 	let [C, w] = t(S);
 	return /* @__PURE__ */ f(h.LinkItem, {
 		...w,
-		"aria-disabled": i || void 0,
-		closeOnClick: !i && s,
-		href: i ? void 0 : r,
-		onClick: i ? void 0 : c,
+		"aria-disabled": o || void 0,
+		closeOnClick: !o && s,
+		href: o ? void 0 : r,
+		onClick: o ? void 0 : c,
 		render: /* @__PURE__ */ f(n, {
 			as: "a",
 			display: l,
@@ -79,21 +76,21 @@ function b({ href: r, disabled: i = !1, closeOnClick: s = !0, onClick: c, displa
 			borderRadius: g,
 			color: _,
 			...C,
-			className: e(a, o, y),
+			className: e(i, a, y),
 			style: b
 		}),
 		children: v(x)
 	});
 }
-function x({ marginBlock: r = "4", marginInline: i = "8", className: a, style: o, ...s }) {
-	let [l, u] = t(s);
+function x({ marginBlock: r = "4", marginInline: i = "8", className: a, style: o, ...c }) {
+	let [l, u] = t(c);
 	return /* @__PURE__ */ f(h.Separator, {
 		...u,
 		render: /* @__PURE__ */ f(n, {
 			marginBlock: r,
 			marginInline: i,
 			...l,
-			className: e(c, a),
+			className: e(s, a),
 			style: o
 		})
 	});

package/dist/docs/Menu.md

@@ -113,8 +113,8 @@ A list of actions that opens from a button: a row's "Edit, Duplicate, Delete", a
 ## Accessibility
 
 - The trigger has `aria-haspopup="menu"` and `aria-expanded`; the popup is `role="menu"` labelled by the trigger, items and link items are `role="menuitem"` (a link item is an `<a>` with an `href`, so the browser treats it as a link), groups are `role="group"` named by their label.
-- Opening from the keyboard focuses the first item; from the pointer, the popup. Focus stays in the menu until it closes, then returns to the trigger.
-- A closed menu stays on the page while it fades out, but is `aria-hidden` from the moment it closes, so a menu opened during the fade (the next row's) is the only one a screen reader or a role query finds. Nothing in it is in the tab order. Focus stays in it until the fade ends, then returns to the trigger.
+- Opening from the keyboard focuses the first item; from the pointer, the popup. Focus stays in the menu until it closes. Closed by Esc, an item or `open={false}`, focus returns at once to the trigger that opened it, so a Tab pressed while it fades goes on to the control after the trigger. A press outside, a Tab out, a hover menu the pointer left, or a popup with `finalFocus` leaves focus to Base UI, which places it when the fade ends.
+- A closed menu stays on the page while it fades out, but is `inert` and `aria-hidden` from the moment it closes, so a menu opened during the fade (the next row's) is the only one a screen reader or a role query finds, and nothing in the fading one takes focus or a click.
 - The highlighted item gets a fill (`bgMuted` in light mode; in dark mode `bgRaised` with 10% `fg` mixed in, since `bgMuted` sits too close to the popup there), and the shared focus ring when reached from the keyboard. Under forced colors it is `Highlight` with `HighlightText`, disabled items are `GrayText` on the page's fill even when highlighted (`GrayText` pairs with `Canvas` only), and the popup keeps its border.
 - The danger item's `danger` color passes 4.5:1 on the popup and on the highlight fill in every preset (`Menu.test.tsx` checks it, with `fg` and `fgMuted`); the word ("Delete") carries the meaning, not the color.
 

package/dist/docs/manifest.json

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

package/dist/popup/client.mjs

@@ -7,7 +7,8 @@ import { createContext as i, use as a } from "react";
 //#region src/popup/client.tsx
 var o = i({
 	container: { current: null },
-	ref: () => {}
+	ref: () => {},
+	trigger: { current: null }
 });
 function s({ children: e }) {
 	return /* @__PURE__ */ r(o, {

package/dist/theme/use-theme-container.mjs

@@ -8,7 +8,8 @@ function r() {
 		container: { get current() {
 			return r.current?.closest("[data-brand]") ?? null;
 		} },
-		ref: i
+		ref: i,
+		trigger: r
 	}), [i]);
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jonmilner/ui",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "files": [
     "dist",
     "THIRD_PARTY_NOTICES.md"
@@ -166,6 +166,7 @@
     "typecheck": "tsc -p tsconfig.json",
     "test": "playwright install --only-shell chromium && vp test run",
     "metrics": "node scripts/import-styles.ts",
+    "metrics:atoms": "node scripts/atoms-usage.ts",
     "size": "size-limit",
     "size:history": "node scripts/size-history.ts",
     "check:publint": "publint --strict",