@jonmilner/ui 0.1.2 → 0.2.1

package/dist/Field/index.mjs

@@ -60,8 +60,9 @@ function p({ size: e = "sm", font: n, weight: i, leading: a, truncate: o, color:
 function m({ children: n, match: a, size: u = "sm", font: d, weight: f, leading: p, truncate: m, color: h = "danger", className: g, style: _, ...v }) {
 	let [y, b] = t(v), x = l.toArray(n).some((e) => e !== "");
 	return /* @__PURE__ */ c(r, {
+		"aria-atomic": !0,
+		"aria-live": "assertive",
 		as: "div",
-		role: "alert",
 		size: u,
 		font: d,
 		weight: f,

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,44 @@
 "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 { splitStyleProps as e } from "../styles/split-style-props.mjs";
+import { Box as t } from "../Box/index.mjs";
+import { triggerElement as n, usePopupScope as r } from "../popup/client.mjs";
+import { jsx as i } from "react/jsx-runtime";
+import { Menu as a } 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,
+function o({ disabled: e = !1, openOnHover: t, delay: o, closeDelay: s, handle: c, payload: l, ...u }) {
+	let { ref: d } = r();
+	return /* @__PURE__ */ i(a.Trigger, {
+		disabled: e,
+		openOnHover: t,
 		delay: o,
 		closeDelay: s,
 		handle: c,
 		payload: l,
 		ref: d,
-		render: e(u)
+		render: n(u)
 	});
 }
-function a({ children: e }) {
-	let { container: i } = t();
-	return /* @__PURE__ */ n(r.Portal, {
-		container: i,
+function s({ children: e }) {
+	let { container: t } = r();
+	return /* @__PURE__ */ i(a.Portal, {
+		container: t,
 		children: e
 	});
 }
+function c(n) {
+	return /* @__PURE__ */ i(a.Positioner, {
+		...n,
+		collisionPadding: 8,
+		render: (n, { open: r }) => {
+			let [, a] = e(n);
+			return /* @__PURE__ */ i(t, {
+				...a,
+				"aria-hidden": !r || void 0,
+				zIndex: "popover"
+			});
+		},
+		sideOffset: 4
+	});
+}
 //#endregion
-export { a as MenuPortal, i as MenuTrigger };
+export { s as MenuPortal, c as MenuPositioner, o 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 { MenuPortal as a, MenuPositioner as o, MenuTrigger as s } from "./client.mjs";
+import { item as c, popup as l, separator as u } from "./Menu.css.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: s = "bgRaised", borderRadius: c = "med", boxShadow: u = "med", padding: f = "4", className: p, style: h, ...g }) {
+	let [_, v] = t(g);
+	return /* @__PURE__ */ d(a, { children: /* @__PURE__ */ d(o, {
 		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,
-				borderRadius: s,
-				boxShadow: l,
-				padding: d,
-				...g,
-				className: e(c, f),
-				style: m
+		children: /* @__PURE__ */ d(m.Popup, {
+			...v,
+			render: /* @__PURE__ */ d(n, {
+				backgroundColor: s,
+				borderRadius: c,
+				boxShadow: u,
+				padding: f,
+				..._,
+				className: e(l, 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: a = "flex", alignItems: o = "center", gap: s = "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, {
+		render: /* @__PURE__ */ d(n, {
 			display: a,
 			alignItems: o,
-			gap: c,
+			gap: s,
 			minBlockSize: l,
-			paddingInline: d,
-			borderRadius: m,
+			paddingInline: u,
+			borderRadius: f,
 			color: h,
 			...b,
-			className: e(s, g),
+			className: e(c, 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, ...s }) {
+	let [c, l] = t(s);
+	return /* @__PURE__ */ d(m.Separator, {
+		...l,
+		render: /* @__PURE__ */ d(n, {
 			marginBlock: r,
 			marginInline: i,
 			...c,
-			className: e(l, a),
+			className: e(u, 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: s,
+	Popup: g,
+	Item: _,
+	Separator: v,
+	Group: y
 });
 //#endregion
-export { y as Menu };
+export { b as Menu };

package/dist/docs/Field.md

@@ -81,7 +81,7 @@ import { Field as BaseField } from "@base-ui/react/field";
 
 - The label is the control's accessible name; clicking it focuses the control.
 - The description and the error join the control's `aria-describedby`, so they are read with it. Base UI adds them after hydration; server HTML has the label link and `aria-invalid`.
-- The error slot is a `role="alert"` live region that stays in the page, so a message is announced when it appears, also after a client-side submit. Several fields failing at once each announce.
+- The error slot is an assertive, atomic live region (`aria-live="assertive"`, `aria-atomic="true"`) that stays in the page, so a message is announced when it appears, also after a client-side submit. Several fields failing at once each announce. It has no `role="alert"`, so an empty slot is not an alert: a test finds a field's error by its text or the control's description, not `getByRole("alert")`.
 - The error is never color alone: a decorative alert icon (`aria-hidden`, at the text's size) leads the message, so it reads as an error under forced colors too, and the message says what is wrong and how to fix it.
 
 ## Props

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. 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.1.2",
+  "version": "0.2.1",
   "components": [
     {
       "name": "AlertDialog",

package/dist/docs/migrations/0.2.0.md

@@ -0,0 +1,51 @@
+# 0.2.0
+
+`Field.Error`'s slot, in every `Field`, `MultiSelect` and `SearchField`, is now an `aria-live="assertive"` `aria-atomic="true"` region with no `role="alert"`, so an empty slot is no longer an alert (decision 0097).
+
+## Find
+
+In the app's tests (`*.test.tsx`, `*.stories.tsx`, Playwright specs), queries for a field's error by the alert role:
+
+- `getByRole("alert")`, `findByRole("alert")`, `queryByRole("alert")`, `getAllByRole("alert")`: regex `(get|find|query)(All)?ByRole\(\s*["']alert["']`
+- CSS selectors in tests: the exact string `[role="alert"]` or `role="alert"`
+- In the app's stylesheets (`*.css`, `*.css.ts`), the same `[role="alert"]` string: a rule that styled field errors by the role no longer matches
+
+Skip matches that target a `Toast` or the app's own alerts; only field errors changed.
+
+## Replace
+
+Find the error by its text, or check the control's description:
+
+```tsx
+// before
+expect(screen.getByRole("alert")).toHaveTextContent("Enter an email address.");
+// after
+expect(screen.getByText("Enter an email address.")).toBeInTheDocument();
+expect(screen.getByRole("textbox", { name: "Email" })).toHaveAccessibleDescription(
+  expect.stringContaining("Enter an email address."),
+);
+```
+
+```ts
+// before
+field.querySelector('[role="alert"]');
+// after
+field.querySelector('[aria-live="assertive"]');
+```
+
+```css
+/* before */
+.form [role="alert"] {
+  margin-block-start: 4px;
+}
+/* after */
+.form [aria-live="assertive"] {
+  margin-block-start: 4px;
+}
+```
+
+A test that asserted no alert was present, to work around the empty slot, no longer needs the workaround: `queryByRole("alert")` is now `null` while a field has no error.
+
+## Verify
+
+Run the app's test command (`pnpm test`); it passes with no query left that finds a field's error by `role="alert"`.

package/package.json

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