@jonmilner/ui 0.4.4 → 0.5.1

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{._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-color:var(--color-border)}._393eil4:before{content:"";border-block-start:var(--space-1) solid;border-block-start-color:inherit;display:block}@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.mjs

@@ -2,65 +2,47 @@
 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, 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";
+import { PopupScope as r, triggerElement as i, useClosingRule as a, usePopupScope as o, useRecordOpenChange as s } from "../popup/client.mjs";
+import { positioner as c } from "./Menu.css.mjs";
+import { jsx as l } from "react/jsx-runtime";
+import { Menu as u } from "@base-ui/react/menu";
 //#region src/Menu/client.tsx
-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, {
+function d({ disabled: e = !1, openOnHover: t, delay: n, closeDelay: r, handle: a, payload: s, ...c }) {
+	let { ref: d } = o();
+	return /* @__PURE__ */ l(u.Trigger, {
 		disabled: e,
 		openOnHover: t,
 		delay: n,
 		closeDelay: r,
-		handle: o,
-		payload: c,
-		ref: u,
-		render: i(l)
+		handle: a,
+		payload: s,
+		ref: d,
+		render: i(c)
 	});
 }
-function h({ children: e }) {
-	let { container: t } = a();
-	return /* @__PURE__ */ s(p.Portal, {
+function f({ children: e }) {
+	let { container: t } = o();
+	return /* @__PURE__ */ l(u.Portal, {
 		container: t,
 		children: e
 	});
 }
-var g = c({ current: {
-	keyboard: !1,
-	opener: null
-} });
-function _({ onOpenChange: e, ...t }) {
-	let n = f({
-		keyboard: !1,
-		opener: null
+function p(e) {
+	return /* @__PURE__ */ l(r, { children: /* @__PURE__ */ l(m, { ...e }) });
+}
+function m({ onOpenChange: e, ...t }) {
+	return /* @__PURE__ */ l(u.Root, {
+		...t,
+		onOpenChange: s(e)
 	});
-	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, {
+function h({ finalFocus: e, ...n }) {
+	return /* @__PURE__ */ l(u.Positioner, {
 		...n,
 		collisionPadding: 8,
 		render: (n, { open: r }) => {
 			let [, i] = t(n);
-			return /* @__PURE__ */ s(b, {
+			return /* @__PURE__ */ l(g, {
 				...i,
 				finalFocus: e,
 				open: r
@@ -69,44 +51,16 @@ function v({ finalFocus: e, ...n }) {
 		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,
+function g({ open: t, finalFocus: r, ref: i, className: o, ...s }) {
+	return /* @__PURE__ */ l(n, {
+		...s,
+		...a(i, {
+			finalFocus: r,
+			open: t
+		}),
+		className: e(c, o),
 		zIndex: "popover"
 	});
 }
 //#endregion
-export { h as MenuPortal, v as MenuPositioner, _ as MenuRootScope, m as MenuTrigger };
+export { f as MenuPortal, h as MenuPositioner, p as MenuRootScope, d as MenuTrigger };

package/dist/Menu/index.d.mts

@@ -26,7 +26,7 @@ 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;
-declare function MenuSeparator({ marginBlock, marginInline, className, style, ...props }: MenuSeparatorProps): import("react").JSX.Element;
+declare function MenuSeparator({ paddingBlock, paddingInline, className, style, ...props }: MenuSeparatorProps): import("react").JSX.Element;
 declare function MenuGroup({ label, className, style, children, ...props }: MenuGroupProps): import("react").JSX.Element;
 export declare const Menu: typeof MenuRoot & {
   Trigger: typeof MenuTrigger;

package/dist/Menu/index.mjs

@@ -82,13 +82,13 @@ function b({ href: r, disabled: o = !1, closeOnClick: s = !0, onClick: c, displa
 		children: v(x)
 	});
 }
-function x({ marginBlock: r = "4", marginInline: i = "8", className: a, style: o, ...c }) {
+function x({ paddingBlock: r = "4", paddingInline: 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,
+			paddingBlock: r,
+			paddingInline: i,
 			...l,
 			className: e(s, a),
 			style: o

package/dist/MultiSelect/client.d.mts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import "@base-ui/react/select";
 //#region src/MultiSelect/client.d.ts
 export type Option = {
   disabled?: boolean;

package/dist/MultiSelect/client.mjs

@@ -1,56 +1,57 @@
 "use client";
-import { Box as e } from "../Box/index.mjs";
-import { Text as t } from "../Text/index.mjs";
-import { PopupScope as n, triggerElement as r, usePopupScope as i } from "../popup/client.mjs";
-import { Field as a } from "../Field/index.mjs";
-import { ChevronDownIcon as o } from "../icons/ChevronDownIcon.mjs";
-import { labels as s, popup as c, summary as l, trigger as u, value as d } from "./MultiSelect.css.mjs";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { createContext as m, use as h, useId as g, useLayoutEffect as _, useMemo as v, useRef as y, useState as b } from "react";
-import { Select as x } from "@base-ui/react/select";
+import { splitStyleProps as e } from "../styles/split-style-props.mjs";
+import { Box as t } from "../Box/index.mjs";
+import { Text as n } from "../Text/index.mjs";
+import { PopupScope as r, triggerElement as i, useClosingRule as a, usePopupScope as o, useRecordOpenChange as s } from "../popup/client.mjs";
+import { Field as c } from "../Field/index.mjs";
+import { ChevronDownIcon as l } from "../icons/ChevronDownIcon.mjs";
+import { labels as u, popup as d, summary as f, trigger as p, value as m } from "./MultiSelect.css.mjs";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { createContext as _, use as v, useId as y, useLayoutEffect as b, useMemo as x, useRef as S, useState as C } from "react";
+import { Select as w } from "@base-ui/react/select";
 //#region src/MultiSelect/client.tsx
-function S({ options: e, placeholder: t, countLabel: n, disabled: a }) {
-	let { ref: s } = i(), c = v(() => new Map(e.map((e) => [e.value, e.label])), [e]);
-	return /* @__PURE__ */ f(x.Trigger, {
-		disabled: a,
-		ref: s,
-		render: r({
+function T({ options: e, placeholder: t, countLabel: n, disabled: r }) {
+	let { ref: a } = o(), s = x(() => new Map(e.map((e) => [e.value, e.label])), [e]);
+	return /* @__PURE__ */ h(w.Trigger, {
+		disabled: r,
+		ref: a,
+		render: i({
 			variant: "secondary",
-			iconEnd: o,
-			className: u,
-			children: /* @__PURE__ */ f(x.Value, {
-				className: d,
+			iconEnd: l,
+			className: p,
+			children: /* @__PURE__ */ h(w.Value, {
+				className: m,
 				placeholder: t,
-				children: (e) => e.length > 0 ? /* @__PURE__ */ f(C, {
+				children: (e) => e.length > 0 ? /* @__PURE__ */ h(E, {
 					count: n.replaceAll("{count}", String(e.length)),
-					labels: e.map((e) => c.get(e) ?? e)
+					labels: e.map((e) => s.get(e) ?? e)
 				}) : t
 			})
 		})
 	});
 }
-function C({ labels: n, count: r }) {
-	let i = y(null), [a, o] = b(!0), c = n.join(", ");
-	_(() => {
+function E({ labels: e, count: r }) {
+	let i = S(null), [a, o] = C(!0), s = e.join(", ");
+	b(() => {
 		let e = i.current;
 		if (!e) return;
 		let t = () => o(e.scrollWidth <= e.clientWidth);
 		t(), document.fonts?.ready.then(t);
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
-	}, [c]);
-	let u = !a && n.length > 1;
-	return /* @__PURE__ */ p(e, {
+	}, [s]);
+	let c = !a && e.length > 1;
+	return /* @__PURE__ */ g(t, {
 		as: "span",
-		className: l,
-		children: [/* @__PURE__ */ f(t, {
-			"aria-hidden": u || void 0,
+		className: f,
+		children: [/* @__PURE__ */ h(n, {
+			"aria-hidden": c || void 0,
 			as: "span",
-			className: s,
+			className: u,
 			ref: i,
 			truncate: "box",
-			children: c
-		}), u && /* @__PURE__ */ f(t, {
+			children: s
+		}), c && /* @__PURE__ */ h(n, {
 			as: "span",
 			className: "_1seauxl4",
 			truncate: "box",
@@ -58,39 +59,73 @@ function C({ labels: n, count: r }) {
 		})]
 	});
 }
-var w = m(void 0);
-function T({ children: e }) {
-	return /* @__PURE__ */ f(n, { children: /* @__PURE__ */ f(w, {
-		value: g(),
+var D = _(void 0);
+function O({ children: e }) {
+	return /* @__PURE__ */ h(r, { children: /* @__PURE__ */ h(D, {
+		value: y(),
 		children: e
 	}) });
 }
-function E({ children: e }) {
-	return /* @__PURE__ */ f(a.Label, {
-		id: h(w),
+function k(e) {
+	return /* @__PURE__ */ h(w.Root, {
+		...e,
+		multiple: !0,
+		onOpenChange: s()
+	});
+}
+function A({ children: e }) {
+	return /* @__PURE__ */ h(c.Label, {
+		id: v(D),
 		nativeLabel: !1,
 		children: e
 	});
 }
-function D({ children: t }) {
-	return /* @__PURE__ */ f(x.Popup, {
-		"aria-labelledby": h(w),
-		render: /* @__PURE__ */ f(e, {
+function j({ children: e }) {
+	return /* @__PURE__ */ h(w.Popup, {
+		"aria-labelledby": v(D),
+		render: /* @__PURE__ */ h(t, {
 			backgroundColor: "bgRaised",
 			borderRadius: "med",
 			boxShadow: "med",
-			className: c,
+			className: d,
 			padding: "4"
 		}),
-		children: t
+		children: e
 	});
 }
-function O({ children: e }) {
-	let { container: t } = i();
-	return /* @__PURE__ */ f(x.Portal, {
+function M({ children: e }) {
+	let { container: t } = o();
+	return /* @__PURE__ */ h(w.Portal, {
 		container: t,
 		children: e
 	});
 }
+function N({ children: t }) {
+	return /* @__PURE__ */ h(w.Positioner, {
+		align: "start",
+		alignItemWithTrigger: !1,
+		collisionPadding: 8,
+		render: (t, { open: n }) => {
+			let [, r] = e(t);
+			return /* @__PURE__ */ h(P, {
+				...r,
+				open: n
+			});
+		},
+		side: "bottom",
+		sideOffset: 4,
+		children: t
+	});
+}
+function P({ open: e, ref: n, ...r }) {
+	return /* @__PURE__ */ h(t, {
+		...r,
+		...a(n, {
+			finalFocus: !1,
+			open: e
+		}),
+		zIndex: "popover"
+	});
+}
 //#endregion
-export { E as MultiSelectLabel, D as MultiSelectPopup, O as MultiSelectPortal, T as MultiSelectScope, S as MultiSelectTrigger };
+export { A as MultiSelectLabel, j as MultiSelectPopup, M as MultiSelectPortal, N as MultiSelectPositioner, k as MultiSelectRoot, O as MultiSelectScope, T as MultiSelectTrigger };

package/dist/MultiSelect/index.mjs

@@ -3,73 +3,64 @@ import { Text as t } from "../Text/index.mjs";
 import { CheckIcon as n } from "../icons/CheckIcon.mjs";
 import { Field as r } from "../Field/index.mjs";
 import { check as i, item as a } from "./MultiSelect.css.mjs";
-import { MultiSelectLabel as o, MultiSelectPopup as s, MultiSelectPortal as c, MultiSelectScope as l, MultiSelectTrigger as u } from "./client.mjs";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { Select as p } from "@base-ui/react/select";
+import { MultiSelectLabel as o, MultiSelectPopup as s, MultiSelectPortal as c, MultiSelectPositioner as l, MultiSelectRoot as u, MultiSelectScope as d, MultiSelectTrigger as f } from "./client.mjs";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Select as h } from "@base-ui/react/select";
 //#region src/MultiSelect/index.tsx
-function m({ options: m, value: h, defaultValue: g, onValueChange: _, label: v, description: y, error: b, placeholder: x = "Select", countLabel: S = "{count} selected", disabled: C = !1, required: w = !1, name: T, className: E, style: D, ...O }) {
-	return /* @__PURE__ */ f(r, {
-		...O,
-		className: E,
-		disabled: C,
-		invalid: b != null && b !== !1 && b !== "",
-		style: D,
+function g({ options: g, value: _, defaultValue: v, onValueChange: y, label: b, description: x, error: S, placeholder: C = "Select", countLabel: w = "{count} selected", disabled: T = !1, required: E = !1, name: D, className: O, style: k, ...A }) {
+	return /* @__PURE__ */ m(r, {
+		...A,
+		className: O,
+		disabled: T,
+		invalid: S != null && S !== !1 && S !== "",
+		style: k,
 		children: [
-			/* @__PURE__ */ d(l, { children: /* @__PURE__ */ f(p.Root, {
-				defaultValue: g,
-				disabled: C,
-				multiple: !0,
-				name: T,
-				onValueChange: _,
-				required: w,
-				value: h,
+			/* @__PURE__ */ p(d, { children: /* @__PURE__ */ m(u, {
+				defaultValue: v,
+				disabled: T,
+				name: D,
+				onValueChange: y,
+				required: E,
+				value: _,
 				children: [
-					/* @__PURE__ */ d(o, { children: v }),
-					/* @__PURE__ */ d(u, {
-						countLabel: S,
-						disabled: C,
-						options: m,
-						placeholder: x
+					/* @__PURE__ */ p(o, { children: b }),
+					/* @__PURE__ */ p(f, {
+						countLabel: w,
+						disabled: T,
+						options: g,
+						placeholder: C
 					}),
-					/* @__PURE__ */ d(c, { children: /* @__PURE__ */ d(p.Positioner, {
-						align: "start",
-						alignItemWithTrigger: !1,
-						collisionPadding: 8,
-						render: /* @__PURE__ */ d(e, { zIndex: "popover" }),
-						side: "bottom",
-						sideOffset: 4,
-						children: /* @__PURE__ */ d(s, { children: m.map((r) => /* @__PURE__ */ f(p.Item, {
-							disabled: r.disabled,
-							label: r.label,
-							render: /* @__PURE__ */ d(e, {
-								alignItems: "center",
-								borderRadius: "sm",
-								className: a,
-								display: "flex",
-								gap: "8",
-								minBlockSize: "sm",
-								paddingInline: "12"
-							}),
-							value: r.value,
-							children: [/* @__PURE__ */ d(n, {
-								className: i,
+					/* @__PURE__ */ p(c, { children: /* @__PURE__ */ p(l, { children: /* @__PURE__ */ p(s, { children: g.map((r) => /* @__PURE__ */ m(h.Item, {
+						disabled: r.disabled,
+						label: r.label,
+						render: /* @__PURE__ */ p(e, {
+							alignItems: "center",
+							borderRadius: "sm",
+							className: a,
+							display: "flex",
+							gap: "8",
+							minBlockSize: "sm",
+							paddingInline: "12"
+						}),
+						value: r.value,
+						children: [/* @__PURE__ */ p(n, {
+							className: i,
+							size: "sm"
+						}), /* @__PURE__ */ p(h.ItemText, {
+							render: /* @__PURE__ */ p(t, {
+								as: "span",
+								font: "label",
 								size: "sm"
-							}), /* @__PURE__ */ d(p.ItemText, {
-								render: /* @__PURE__ */ d(t, {
-									as: "span",
-									font: "label",
-									size: "sm"
-								}),
-								children: r.label
-							})]
-						}, r.value)) })
-					}) })
+							}),
+							children: r.label
+						})]
+					}, r.value)) }) }) })
 				]
 			}) }),
-			y != null && /* @__PURE__ */ d(r.Description, { children: y }),
-			/* @__PURE__ */ d(r.Error, { children: b })
+			x != null && /* @__PURE__ */ p(r.Description, { children: x }),
+			/* @__PURE__ */ p(r.Error, { children: S })
 		]
 	});
 }
 //#endregion
-export { m as MultiSelect };
+export { g as MultiSelect };

package/dist/docs/Menu.md

@@ -27,6 +27,7 @@ A list of actions that opens from a button: a row's "Edit, Duplicate, Delete", a
 - `variant="danger"` marks a destructive item. It still runs on one click, so open a confirm dialog from it (Cancel focused first) before anything irreversible happens.
 - `disabled` on an item renders `aria-disabled`: it stays announced and reachable with the arrow keys, and does nothing. A disabled `Menu.LinkItem` also drops its `href`, so no click or context menu reaches the URL. On the trigger it keeps the button focusable and stops it opening.
 - `Menu.Group` takes a `label` that is shown and names the group. Separate groups with `Menu.Separator`.
+- `Menu.Separator` draws a line inside its own padding (`paddingBlock="4"`, `paddingInline="8"`) and sets no margin. Change its spacing with `paddingBlock` and `paddingInline` (the `padding` shorthand loses to these defaults, decision 0065); a `margin*` prop adds space outside the padding. `style={{ borderBlockStartColor }}` recolours the line.
 - The popup portals into the trigger's nearest `ThemeProvider`, so it keeps the brand and mode. That provider must not clip or stack its content: wrap the app root, and keep a nested provider off elements with `overflow: hidden`, a `transform` or their own `z-index`, or the popup is clipped or drawn under siblings. It sits on `zIndex` `popover`. A menu opened only through `open`, with no `Menu.Trigger`, has no provider to find and portals to `<body>`.
 - Item and link item text is wrapped in `Text` for you; an `Icon` beside it is spaced by the item's `gap`.
 - `side` (`bottom` by default) and `align` (`start`) place the popup against the trigger; it flips when it would overflow the viewport.

package/dist/docs/MultiSelect.md

@@ -89,7 +89,8 @@ A form field for picking any number of values from a list too long to show at on
 ## Accessibility
 
 - The trigger is a button with `aria-haspopup="listbox"` and `aria-expanded`, labelled by the `Field` label and described by the description and error. The popup is `role="listbox"` with `aria-multiselectable="true"`, options are `role="option"` with `aria-selected`.
-- Opening from the keyboard focuses an option; focus stays in the list until it closes, then returns to the trigger. Choosing an option toggles it and leaves the list open, so several can be picked in one visit.
+- Opening from the keyboard focuses an option; focus stays in the list until it closes. Choosing an option toggles it and leaves the list open, so several can be picked in one visit. Closed by Esc or the trigger, focus returns at once to the trigger, so a Tab pressed while the list fades goes on to the next control. A press outside or a Tab out leaves focus to Base UI.
+- A closed list stays on the page while it fades out, but is `inert` and `aria-hidden` from the moment it closes, so a list opened during the fade (the next filter's) 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).
 - Selection is a check mark on the option as well as its highlight, so it is not color alone. The check's space is always in the row, so the text never shifts.
 - The trigger summary is text: the joined labels, or the count. When the count replaces the labels, the labels are hidden from assistive technology so the count is read once.
 - The shared focus ring shows on the trigger and, from the keyboard, on the highlighted option. Under forced colors the highlighted option is `Highlight` with `HighlightText`, and the popup keeps its border.

package/dist/docs/manifest.json

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

package/dist/docs/migrations/0.5.0.md

@@ -0,0 +1,29 @@
+# 0.5.0
+
+`Menu.Separator` drops its default `marginBlock="4"` and `marginInline="8"` for the same spacing as padding inside it, with its line drawn within, because a component never puts margin on its root (decision 0095); a bare separator looks the same, but a `margin*` prop you pass now adds outside the padding instead of replacing the old margin.
+
+## Find
+
+In the app's source (`*.tsx`), every `Menu.Separator` that passes any prop: regex `<Menu\.Separator\s+[^/>\s]` searched multiline (`rg -U`), since a long tag's props sit on their own lines. A bare `<Menu.Separator />` needs nothing. Check each match for `margin*` and `padding*` props and for a `className` or `style` that sets margin, padding or the line's border. A match with props spread from elsewhere (`<Menu.Separator {...props} />`) needs a read of where they come from.
+
+## Replace
+
+Move the spacing to the matching `paddingBlock` or `paddingInline` prop, so it replaces the default instead of adding to it. A margin the default padding already covers can go. The `padding` shorthand loses to those two defaults (decision 0065), so use the longhands. A `padding*` prop you already passed used to sit inside the default margin; it now replaces that spacing, so add the old 4px block or 8px inline to it to keep the gap.
+
+```tsx
+// before: 8px above and below, 8px inset
+<Menu.Separator marginBlock="8" />
+// after
+<Menu.Separator paddingBlock="8" />
+
+// before: a full-width line
+<Menu.Separator marginInline="0" />
+// after
+<Menu.Separator paddingInline="0" />
+```
+
+A `className` that set `margin` on the separator moves to `padding` the same way. The line is now the separator's `::before`, not a border on its root, so a `className` that restyled the line's width or style targets `::before` instead (`.myDivider::before { border-block-start-width: 2px }`). Its colour still comes from the root: `className` or `style` setting `borderBlockStartColor` on the separator recolours the line; one that sets a border style on the root draws a second line, so drop it.
+
+## Verify
+
+Run `rg -U '<Menu\.Separator\s+[^/>\s]' --glob '*.tsx'` again: no match passes a `margin*` prop, a `padding` shorthand, or a `className` or `style` that sets a border style on the root, except margin you meant to add outside the divider. Then open a menu with a separator: the line keeps the spacing it had before the upgrade.

package/dist/popup/client.mjs

@@ -3,23 +3,33 @@ import { Clickable as e } from "../Clickable/index.mjs";
 import { Button as t } from "../Button/index.mjs";
 import { useThemeContainer as n } from "../theme/use-theme-container.mjs";
 import { jsx as r } from "react/jsx-runtime";
-import { createContext as i, use as a } from "react";
+import { createContext as i, use as a, useCallback as o, useLayoutEffect as s, useRef as c } from "react";
 //#region src/popup/client.tsx
-var o = i({
+var l = i({
 	container: { current: null },
 	ref: () => {},
 	trigger: { current: null }
-});
-function s({ children: e }) {
-	return /* @__PURE__ */ r(o, {
+}), u = i({ current: {
+	keyboard: !1,
+	opener: null
+} });
+function d({ children: e }) {
+	let t = c({
+		keyboard: !1,
+		opener: null
+	});
+	return /* @__PURE__ */ r(l, {
 		value: n(),
-		children: e
+		children: /* @__PURE__ */ r(u, {
+			value: t,
+			children: e
+		})
 	});
 }
-function c() {
-	return a(o);
+function f() {
+	return a(l);
 }
-function l({ variant: n, size: i, iconStart: a, iconEnd: o, ...s }) {
+function p({ variant: n, size: i, iconStart: a, iconEnd: o, ...s }) {
 	return n || i || a || o ? /* @__PURE__ */ r(t, {
 		...s,
 		variant: n,
@@ -28,5 +38,63 @@ function l({ variant: n, size: i, iconStart: a, iconEnd: o, ...s }) {
 		iconEnd: o
 	}) : /* @__PURE__ */ r(e, { ...s });
 }
+function m(e) {
+	let t = a(u);
+	return (n, r) => {
+		t.current = n ? {
+			keyboard: !1,
+			opener: r.trigger ?? null
+		} : {
+			...t.current,
+			keyboard: r.event instanceof KeyboardEvent,
+			reason: r.reason
+		}, e?.(n, r);
+	};
+}
+function h(e, t) {
+	if (typeof e == "function") {
+		let n = e(t);
+		return typeof n == "function" ? n : () => e(null);
+	}
+	return e && (e.current = t), () => {
+		e && (e.current = null);
+	};
+}
+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;
+		let n = h(e, t);
+		return () => {
+			l.current = null, n();
+		};
+	}, [e]);
+	return s(() => {
+		let e = l.current;
+		if (!e) return;
+		if (n) {
+			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 e = { preventScroll: !0 };
+			o && (e.focusVisible = !0), c.focus(e);
+		}
+		e.inert = !0;
+	}, [
+		n,
+		t,
+		i,
+		r
+	]), {
+		"aria-hidden": !n || void 0,
+		ref: d
+	};
+}
 //#endregion
-export { s as PopupScope, l as triggerElement, c as usePopupScope };
+export { d as PopupScope, p as triggerElement, _ as useClosingRule, f as usePopupScope, m as useRecordOpenChange };

package/package.json

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