@jonmilner/ui 0.4.4 → 0.5.0

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/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/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./manifest.schema.json",
   "package": "@jonmilner/ui",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "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.0",
   "files": [
     "dist",
     "THIRD_PARTY_NOTICES.md"