@jonmilner/ui 0.2.1 → 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.mjs

@@ -1,39 +1,42 @@
 "use client";
-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";
+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 o({ disabled: e = !1, openOnHover: t, delay: o, closeDelay: s, handle: c, payload: l, ...u }) {
-	let { ref: d } = r();
-	return /* @__PURE__ */ i(a.Trigger, {
+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: o,
-		closeDelay: s,
+		delay: n,
+		closeDelay: a,
 		handle: c,
 		payload: l,
 		ref: d,
-		render: n(u)
+		render: r(u)
 	});
 }
-function s({ children: e }) {
-	let { container: t } = r();
-	return /* @__PURE__ */ i(a.Portal, {
+function l({ children: e }) {
+	let { container: t } = i();
+	return /* @__PURE__ */ o(s.Portal, {
 		container: t,
 		children: e
 	});
 }
-function c(n) {
-	return /* @__PURE__ */ i(a.Positioner, {
-		...n,
+function u(r) {
+	return /* @__PURE__ */ o(s.Positioner, {
+		...r,
 		collisionPadding: 8,
-		render: (n, { open: r }) => {
-			let [, a] = e(n);
-			return /* @__PURE__ */ i(t, {
-				...a,
-				"aria-hidden": !r || void 0,
+		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"
 			});
 		},
@@ -41,4 +44,4 @@ function c(n) {
 	});
 }
 //#endregion
-export { s as MenuPortal, c as MenuPositioner, o as MenuTrigger };
+export { l as MenuPortal, u as MenuPositioner, c as MenuTrigger };

package/dist/Menu/index.mjs

@@ -3,8 +3,8 @@ 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, MenuPositioner as o, MenuTrigger as s } from "./client.mjs";
-import { item as c, popup as l, separator as u } from "./Menu.css.mjs";
+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";
@@ -15,39 +15,39 @@ function h({ children: e, ...t }) {
 		children: e
 	}) });
 }
-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 }) {
+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(a, { children: /* @__PURE__ */ d(o, {
+	return /* @__PURE__ */ d(c, { children: /* @__PURE__ */ d(l, {
 		align: i,
 		side: r,
 		children: /* @__PURE__ */ d(m.Popup, {
 			...v,
 			render: /* @__PURE__ */ d(n, {
-				backgroundColor: s,
-				borderRadius: c,
+				backgroundColor: a,
+				borderRadius: s,
 				boxShadow: u,
 				padding: f,
 				..._,
-				className: e(l, p),
+				className: e(o, p),
 				style: h
 			})
 		})
 	}) });
 }
-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 }) {
+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__ */ d(m.Item, {
 		...x,
 		render: /* @__PURE__ */ d(n, {
-			display: a,
-			alignItems: o,
-			gap: s,
+			display: o,
+			alignItems: s,
+			gap: c,
 			minBlockSize: l,
 			paddingInline: u,
 			borderRadius: f,
 			color: h,
 			...b,
-			className: e(c, g),
+			className: e(a, g),
 			style: _
 		}),
 		children: p.map(v, (e) => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ d(r, {
@@ -58,15 +58,15 @@ function _({ variant: i = "neutral", display: a = "flex", alignItems: o = "cente
 		}) : e)
 	});
 }
-function v({ marginBlock: r = "4", marginInline: i = "8", className: a, style: o, ...s }) {
-	let [c, l] = t(s);
+function v({ marginBlock: r = "4", marginInline: i = "8", className: a, style: o, ...c }) {
+	let [l, u] = t(c);
 	return /* @__PURE__ */ d(m.Separator, {
-		...l,
+		...u,
 		render: /* @__PURE__ */ d(n, {
 			marginBlock: r,
 			marginInline: i,
-			...c,
-			className: e(u, a),
+			...l,
+			className: e(s, a),
 			style: o
 		})
 	});
@@ -94,7 +94,7 @@ function y({ label: e, className: i, style: a, children: o, ...s }) {
 	});
 }
 var b = Object.assign(h, {
-	Trigger: s,
+	Trigger: u,
 	Popup: g,
 	Item: _,
 	Separator: v,

package/dist/docs/Menu.md

@@ -92,7 +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.
+- 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.1",
+  "version": "0.2.2",
   "components": [
     {
       "name": "AlertDialog",

package/package.json

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