@jonmilner/ui 0.2.0 → 0.2.2

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.toast;
-@layer components.menu{._393eil0{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)}._393eil0:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil0[data-starting-style],._393eil0[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._393eil1{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._393eil1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil1[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._393eil1[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._393eil2{border-block-start:var(--space-1) solid var(--color-border)}@media (forced-colors:active){._393eil1[data-highlighted]{forced-color-adjust:none;color:highlighttext;background-color:highlight}._393eil1[aria-disabled=true]{color:graytext}}}
+@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{border-block-start:var(--space-1) solid var(--color-border)}@media (forced-colors:active){._393eil2[data-highlighted]{forced-color-adjust:none;color:highlighttext;background-color:highlight}._393eil2[aria-disabled=true]{color:graytext}}}

package/dist/Menu/Menu.css.mjs

@@ -3,6 +3,6 @@ import "./Menu.css";
 /* empty css                               */
 /* empty css                     */
 //#region src/Menu/Menu.css.ts
-var e = "_393eil0", t = "_393eil1", n = "_393eil2";
+var e = "_393eil0", t = "_393eil1", n = "_393eil2", r = "_393eil3";
 //#endregion
-export { t as item, e as popup, n as separator };
+export { n as item, t as popup, e as positioner, r as separator };

package/dist/Menu/client.d.mts

@@ -1,5 +1,4 @@
 import { TriggerElementProps, TriggerLookProps } from "../popup/client.mjs";
-import { ReactNode } from "react";
 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

@@ -1,27 +1,47 @@
 "use client";
-import { triggerElement as e, usePopupScope as t } from "../popup/client.mjs";
-import { jsx as n } from "react/jsx-runtime";
-import { Menu as r } from "@base-ui/react/menu";
+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";
 //#region src/Menu/client.tsx
-function i({ disabled: i = !1, openOnHover: a, delay: o, closeDelay: s, handle: c, payload: l, ...u }) {
-	let { ref: d } = t();
-	return /* @__PURE__ */ n(r.Trigger, {
-		disabled: i,
-		openOnHover: a,
-		delay: o,
-		closeDelay: s,
+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, {
+		disabled: e,
+		openOnHover: t,
+		delay: n,
+		closeDelay: a,
 		handle: c,
 		payload: l,
 		ref: d,
-		render: e(u)
+		render: r(u)
 	});
 }
-function a({ children: e }) {
-	let { container: i } = t();
-	return /* @__PURE__ */ n(r.Portal, {
-		container: i,
+function l({ children: e }) {
+	let { container: t } = i();
+	return /* @__PURE__ */ o(s.Portal, {
+		container: t,
 		children: e
 	});
 }
+function u(r) {
+	return /* @__PURE__ */ o(s.Positioner, {
+		...r,
+		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"
+			});
+		},
+		sideOffset: 4
+	});
+}
 //#endregion
-export { a as MenuPortal, i as MenuTrigger };
+export { l as MenuPortal, u as MenuPositioner, c as MenuTrigger };

package/dist/Menu/index.mjs

@@ -3,57 +3,54 @@ 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 { MenuPortal as a, MenuTrigger as o } from "./client.mjs";
-import { item as s, popup as c, separator as l } from "./Menu.css.mjs";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Children as f } from "react";
-import { Menu as p } from "@base-ui/react/menu";
+import { item as a, popup as o, separator as s } from "./Menu.css.mjs";
+import { MenuPortal as c, MenuPositioner as l, MenuTrigger as u } from "./client.mjs";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Children as p } from "react";
+import { Menu as m } from "@base-ui/react/menu";
 //#region src/Menu/index.tsx
-function m({ children: e, ...t }) {
-	return /* @__PURE__ */ u(i, { children: /* @__PURE__ */ u(p.Root, {
+function h({ children: e, ...t }) {
+	return /* @__PURE__ */ d(i, { children: /* @__PURE__ */ d(m.Root, {
 		...t,
 		children: e
 	}) });
 }
-function h({ side: r = "bottom", align: i = "start", backgroundColor: o = "bgRaised", borderRadius: s = "med", boxShadow: l = "med", padding: d = "4", className: f, style: m, ...h }) {
-	let [g, _] = t(h);
-	return /* @__PURE__ */ u(a, { children: /* @__PURE__ */ u(p.Positioner, {
+function g({ side: r = "bottom", align: i = "start", backgroundColor: a = "bgRaised", borderRadius: s = "med", boxShadow: u = "med", padding: f = "4", className: p, style: h, ...g }) {
+	let [_, v] = t(g);
+	return /* @__PURE__ */ d(c, { children: /* @__PURE__ */ d(l, {
 		align: i,
-		collisionPadding: 8,
-		render: /* @__PURE__ */ u(n, { zIndex: "popover" }),
 		side: r,
-		sideOffset: 4,
-		children: /* @__PURE__ */ u(p.Popup, {
-			..._,
-			render: /* @__PURE__ */ u(n, {
-				backgroundColor: o,
+		children: /* @__PURE__ */ d(m.Popup, {
+			...v,
+			render: /* @__PURE__ */ d(n, {
+				backgroundColor: a,
 				borderRadius: s,
-				boxShadow: l,
-				padding: d,
-				...g,
-				className: e(c, f),
-				style: m
+				boxShadow: u,
+				padding: f,
+				..._,
+				className: e(o, p),
+				style: h
 			})
 		})
 	}) });
 }
-function g({ variant: i = "neutral", display: a = "flex", alignItems: o = "center", gap: c = "8", minBlockSize: l = "sm", paddingInline: d = "12", borderRadius: m = "sm", color: h = i === "danger" ? "danger" : "fg", className: g, style: _, children: v, ...y }) {
+function _({ variant: i = "neutral", display: o = "flex", alignItems: s = "center", gap: c = "8", minBlockSize: l = "sm", paddingInline: u = "12", borderRadius: f = "sm", color: h = i === "danger" ? "danger" : "fg", className: g, style: _, children: v, ...y }) {
 	let [b, x] = t(y);
-	return /* @__PURE__ */ u(p.Item, {
+	return /* @__PURE__ */ d(m.Item, {
 		...x,
-		render: /* @__PURE__ */ u(n, {
-			display: a,
-			alignItems: o,
+		render: /* @__PURE__ */ d(n, {
+			display: o,
+			alignItems: s,
 			gap: c,
 			minBlockSize: l,
-			paddingInline: d,
-			borderRadius: m,
+			paddingInline: u,
+			borderRadius: f,
 			color: h,
 			...b,
-			className: e(s, g),
+			className: e(a, g),
 			style: _
 		}),
-		children: f.map(v, (e) => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ u(r, {
+		children: p.map(v, (e) => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ d(r, {
 			as: "span",
 			font: "label",
 			size: "sm",
@@ -61,30 +58,30 @@ function g({ variant: i = "neutral", display: a = "flex", alignItems: o = "cente
 		}) : e)
 	});
 }
-function _({ marginBlock: r = "4", marginInline: i = "8", className: a, style: o, ...s }) {
-	let [c, d] = t(s);
-	return /* @__PURE__ */ u(p.Separator, {
-		...d,
-		render: /* @__PURE__ */ u(n, {
+function v({ marginBlock: r = "4", marginInline: i = "8", className: a, style: o, ...c }) {
+	let [l, u] = t(c);
+	return /* @__PURE__ */ d(m.Separator, {
+		...u,
+		render: /* @__PURE__ */ d(n, {
 			marginBlock: r,
 			marginInline: i,
-			...c,
-			className: e(l, a),
+			...l,
+			className: e(s, a),
 			style: o
 		})
 	});
 }
-function v({ label: e, className: i, style: a, children: o, ...s }) {
+function y({ label: e, className: i, style: a, children: o, ...s }) {
 	let [c, l] = t(s);
-	return /* @__PURE__ */ d(p.Group, {
+	return /* @__PURE__ */ f(m.Group, {
 		...l,
-		render: /* @__PURE__ */ u(n, {
+		render: /* @__PURE__ */ d(n, {
 			...c,
 			className: i,
 			style: a
 		}),
-		children: [/* @__PURE__ */ u(p.GroupLabel, {
-			render: /* @__PURE__ */ u(r, {
+		children: [/* @__PURE__ */ d(m.GroupLabel, {
+			render: /* @__PURE__ */ d(r, {
 				as: "div",
 				color: "fgMuted",
 				font: "label",
@@ -96,12 +93,12 @@ function v({ label: e, className: i, style: a, children: o, ...s }) {
 		}), o]
 	});
 }
-var y = Object.assign(m, {
-	Trigger: o,
-	Popup: h,
-	Item: g,
-	Separator: _,
-	Group: v
+var b = Object.assign(h, {
+	Trigger: u,
+	Popup: g,
+	Item: _,
+	Separator: v,
+	Group: y
 });
 //#endregion
-export { y as Menu };
+export { b as Menu };

package/dist/docs/Menu.md

@@ -92,6 +92,7 @@ A list of actions that opens from a button: a row's "Edit, Duplicate, Delete", a
 
 - The trigger has `aria-haspopup="menu"` and `aria-expanded`; the popup is `role="menu"` labelled by the trigger, items are `role="menuitem"`, 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.
 - 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`, 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.2.0",
+  "version": "0.2.2",
   "components": [
     {
       "name": "AlertDialog",

package/package.json

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