@jonmilner/ui 0.4.0 → 0.4.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.toast, components.visually-hidden;
-@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}}}
+@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{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}}}

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", r = "_393eil3";
+var e = "_393eil0", t = "_393eil1", n = "_393eil2", r = "_393eil3", i = "_393eil4";
 //#endregion
-export { n as item, t as popup, e as positioner, r as separator };
+export { n as item, r as linkItem, t as popup, e as positioner, i as separator };

package/dist/Menu/index.d.mts

@@ -14,6 +14,10 @@ export type MenuPopupProps = PartProps<Menu$1.Popup.Props> & Pick<Menu$1.Positio
 export type MenuItemProps = PartProps<Menu$1.Item.Props> & {
   variant?: "neutral" | "danger";
 };
+export type MenuLinkItemProps = PartProps<Menu$1.LinkItem.Props> & {
+  disabled?: boolean;
+  href: string;
+};
 export type MenuSeparatorProps = PartProps<Menu$1.Separator.Props>;
 export type MenuGroupProps = PartProps<Menu$1.Group.Props> & {
   label: ReactNode;
@@ -21,12 +25,14 @@ export type MenuGroupProps = PartProps<Menu$1.Group.Props> & {
 declare function MenuRoot({ children, ...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 MenuGroup({ label, className, style, children, ...props }: MenuGroupProps): import("react").JSX.Element;
 export declare const Menu: typeof MenuRoot & {
   Trigger: typeof MenuTrigger;
   Popup: typeof MenuPopup;
   Item: typeof MenuItem;
+  LinkItem: typeof MenuLinkItem;
   Separator: typeof MenuSeparator;
   Group: typeof MenuGroup;
 };

package/dist/Menu/index.mjs

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

package/dist/docs/Menu.md

@@ -2,31 +2,33 @@
 
 ## Purpose
 
-A list of actions that opens from a button: a row's "Edit, Duplicate, Delete", a toolbar's overflow. Built on Base UI's Menu, which owns the keyboard and focus: arrow keys, Home and End move through the items, typing jumps to a matching item, Esc and an outside click close it, and focus returns to the trigger. The parts add the look: a raised surface with a border and shadow, a highlighted item, a zoom-and-fade that is a plain fade under reduced motion.
+A list of actions that opens from a button: a row's "Edit, Duplicate, Delete", a toolbar's overflow. It may mix in links ("Open invoice", "Download PDF") as `Menu.LinkItem`, real anchors that keep the browser's link behavior. Built on Base UI's Menu, which owns the keyboard and focus: arrow keys, Home and End move through the items, typing jumps to a matching item, Esc and an outside click close it, and focus returns to the trigger. The parts add the look: a raised surface with a border and shadow, a highlighted item, a zoom-and-fade that is a plain fade under reduced motion.
 
 ## When to use
 
 - Several actions on one object that would crowd the layout as buttons.
 - Actions that need no input of their own; each item runs one thing.
+- Actions mixed with a few links on the same object: the links are `Menu.LinkItem`.
 
 ## When not to use
 
 - Picking a value for a form field: use a select (v0.2 forms) or radio buttons; for several values from a long list, use `MultiSelect`.
-- Navigation between pages: use links; a menu of links hides where they go.
+- Navigation between pages: a menu that is only links is still navigation, so show the links on the page or in a nav. Link items are for a menu that mixes actions and links.
 - One or two actions: show them as buttons.
 - Content a user reads, or anything interactive inside the list (fields, toggles): use a popover or a dialog.
 
 ## Rules
 
-- Compose the parts: `Menu` > `Menu.Trigger` + `Menu.Popup` > `Menu.Item`, `Menu.Separator`, `Menu.Group`. `Menu` holds the open state and renders no element, so it takes no `className` or `style`; every other part does, plus style props.
+- Compose the parts: `Menu` > `Menu.Trigger` + `Menu.Popup` > `Menu.Item`, `Menu.LinkItem`, `Menu.Separator`, `Menu.Group`. `Menu` holds the open state and renders no element, so it takes no `className` or `style`; every other part does, plus style props.
 - `Menu.Trigger` is a bare `Clickable`: give it its look with style props (or your own class), and an accessible name. An icon-only trigger needs `aria-label`.
 - For a trigger that reads as a button ("Actions", "New"), pass Button's `variant`, `size`, `iconStart` or `iconEnd` (a `ChevronDownIcon` for "Actions ▾"): it renders a `Button`, with its fill, border and height, and keeps the trigger's behavior and `aria-disabled`. While the menu is open it shows Button's open look, a held tint and an inset ring (ADR 0063); a bare trigger has none, so style it yourself off `aria-expanded`. Style props still override the defaults.
 - `Menu.Item` runs its `onClick` on click, Enter and Space, then the menu closes. Pass `closeOnClick={false}` to keep it open.
+- `Menu.LinkItem` is a real `<a role="menuitem">` for an entry that goes somewhere. `href` is required; `target`, `rel` and `download` pass through. Hover shows the URL, Cmd/Ctrl-click and middle-click open a new tab, and a click, Enter or Space follows it and closes the menu. Never navigate from a `Menu.Item`'s `onClick` (`location.assign`, a router's `navigate`): it loses all of that. Router-aware (client-side) links are not offered. It takes no `variant`.
 - `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. On the trigger it keeps the button focusable and stops it opening.
+- `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`.
 - 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 text is wrapped in `Text` for you; an `Icon` beside it is spaced by the item's `gap`.
+- 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.
 - Never add key handlers or `tabIndex` to the parts; Base UI handles the keyboard.
 - The module has no hooks, so a server component can render the parts; `onClick` and other functions must come from a client component.
@@ -69,6 +71,18 @@ A list of actions that opens from a button: a row's "Edit, Duplicate, Delete", a
 </Menu>
 ```
 
+```tsx
+// Actions and links on one invoice: the links are real anchors.
+<Menu.Popup>
+  <Menu.Item onClick={edit}>Edit</Menu.Item>
+  <Menu.Separator />
+  <Menu.LinkItem href={`/invoices/${id}`}>Open invoice</Menu.LinkItem>
+  <Menu.LinkItem href={`/invoices/${id}.pdf`} target="_blank" rel="noopener">
+    Download PDF
+  </Menu.LinkItem>
+</Menu.Popup>
+```
+
 ## Don't
 
 ```tsx
@@ -84,16 +98,24 @@ A list of actions that opens from a button: a row's "Edit, Duplicate, Delete", a
 ```
 
 ```tsx
-// A link list is navigation, not a menu of actions.
+// Navigates from an action: no URL on hover, no new tab. Use <Menu.LinkItem href="/settings">.
 <Menu.Item onClick={() => navigate("/settings")}>Settings</Menu.Item>
 ```
 
+```tsx
+// Only links: this is navigation. Show the links on the page or in a nav.
+<Menu.Popup>
+  <Menu.LinkItem href="/settings">Settings</Menu.LinkItem>
+  <Menu.LinkItem href="/billing">Billing</Menu.LinkItem>
+</Menu.Popup>
+```
+
 ## Accessibility
 
-- 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.
+- The trigger has `aria-haspopup="menu"` and `aria-expanded`; the popup is `role="menu"` labelled by the trigger, items and link items are `role="menuitem"` (a link item is an `<a>` with an `href`, so the browser treats it as a link), 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 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` on the page's fill even when highlighted (`GrayText` pairs with `Canvas` only), 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.
 
 ## Props
@@ -139,6 +161,20 @@ Also accepts the style props (see `manifest.json` `styleProps`).
 
 Also accepts the style props (see `manifest.json` `styleProps`).
 
+### Menu.LinkItem
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `className` | `string` | no |  |
+| `closeOnClick` | `boolean` | no | Whether to close the menu when the item is clicked. |
+| `disabled` | `boolean` | no |  |
+| `href` | `string` | yes |  |
+| `id` | `string` | no |  |
+| `label` | `string` | no | Overrides the text used for keyboard text navigation and filtering. Falls back to the rendered text when not provided. |
+| `style` | `CSSProperties` | no |  |
+
+Also accepts the style props (see `manifest.json` `styleProps`).
+
 ### Menu.Popup
 
 | Prop | Type | Required | Description |

package/dist/docs/llms.txt

@@ -17,7 +17,7 @@
 - [Icon](Icon.md): The base for every icon: an `<svg>` on a 24-unit grid that draws its children with round 2-unit strokes in `currentColor`. Generated icons from `@jonmilner/ui/icons` (`ArrowRightIcon`, …) wrap it and take the same props, less `children` and `viewBox`. `size` takes a `fontSize` step, so an icon matches the `Text` beside it; `color` takes a color role.
 - [IconButton](IconButton.md): A compact button whose only visible content is an icon, for an action the icon makes plain: close, edit, refresh. A required `label` names it for assistive technology (`aria-label`); the icon is decorative. It is a `<button type="button">` on `Clickable`, so it has the shared focus ring, the 24px minimum target and `aria-disabled` that blocks activation while the button stays focusable. Two variants from Button's fills (`primary`, `secondary`) and three square sizes at Button's heights (`sm`, `med`, `lg`: 32, 40 and 48 px).
 - [Inline](Inline.md): A horizontal row of children that wraps onto new lines, with even space between them on both axes. `Inline` is a `Box` with `display="flex"`, `flexDirection="row"`, `flexWrap="wrap"` and `alignItems="center"` as default style props, spaced by a required `gap`. Children render as they are: no wrapper per child.
-- [Menu](Menu.md): A list of actions that opens from a button: a row's "Edit, Duplicate, Delete", a toolbar's overflow. Built on Base UI's Menu, which owns the keyboard and focus: arrow keys, Home and End move through the items, typing jumps to a matching item, Esc and an outside click close it, and focus returns to the trigger. The parts add the look: a raised surface with a border and shadow, a highlighted item, a zoom-and-fade that is a plain fade under reduced motion.
+- [Menu](Menu.md): A list of actions that opens from a button: a row's "Edit, Duplicate, Delete", a toolbar's overflow. It may mix in links ("Open invoice", "Download PDF") as `Menu.LinkItem`, real anchors that keep the browser's link behavior. Built on Base UI's Menu, which owns the keyboard and focus: arrow keys, Home and End move through the items, typing jumps to a matching item, Esc and an outside click close it, and focus returns to the trigger. The parts add the look: a raised surface with a border and shadow, a highlighted item, a zoom-and-fade that is a plain fade under reduced motion.
 - [MultiSelect](MultiSelect.md): A form field for picking any number of values from a list too long to show at once. A trigger styled as Button's secondary look opens a listbox of options; each selected option shows a check mark, and the trigger summarises the selection as the joined labels, or a count ("3 selected") once the labels would not fit. Built on Base UI's `Select` in multiple mode (ADR 0003), which owns the keyboard and focus: arrow keys, Home and End move through the options, typing jumps to a match, Esc and an outside click close it, and focus returns to the trigger. It composes `Field` for its label, description and error (ADR 0026).
 - [SearchField](SearchField.md): A form field for a search query: an `<input type="search">` (role `searchbox`) with a search icon at its inline start and, while it holds a value, a clear button at its inline end. Escape empties a field that has a value, and the clear button empties it and puts focus back in the input, so a keyboard user never loses their place (ADR 0087). Built on Base UI's `Input` (ADR 0003); it composes `Field` for its label, description and error (ADR 0026). Three sizes at Button's heights (`sm`, `med`, `lg`: 32, 40 and 48 px).
 - [Stack](Stack.md): A vertical column of children with even space between them. `Stack` is a `Box` with `display="flex"` and `flexDirection="column"` as default style props, spaced by a required `gap`. Children render as they are: no wrapper per child.

package/dist/docs/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./manifest.schema.json",
   "package": "@jonmilner/ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "components": [
     {
       "name": "AlertDialog",
@@ -1205,6 +1205,49 @@
             }
           ]
         },
+        {
+          "name": "Menu.LinkItem",
+          "styleProps": true,
+          "props": [
+            {
+              "name": "className",
+              "type": "string",
+              "required": false
+            },
+            {
+              "name": "closeOnClick",
+              "type": "boolean",
+              "required": false,
+              "description": "Whether to close the menu when the item is clicked."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "required": false
+            },
+            {
+              "name": "href",
+              "type": "string",
+              "required": true
+            },
+            {
+              "name": "id",
+              "type": "string",
+              "required": false
+            },
+            {
+              "name": "label",
+              "type": "string",
+              "required": false,
+              "description": "Overrides the text used for keyboard text navigation and filtering.\nFalls back to the rendered text when not provided."
+            },
+            {
+              "name": "style",
+              "type": "CSSProperties",
+              "required": false
+            }
+          ]
+        },
         {
           "name": "Menu.Popup",
           "styleProps": true,

package/dist/index.d.mts

@@ -14,7 +14,7 @@ import { Heading, HeadingLevel, HeadingProps, HeadingSize } from "./Heading/inde
 import { IconButton, IconButtonProps } from "./IconButton/index.mjs";
 import { Inline, InlineProps } from "./Inline/index.mjs";
 import { MenuTriggerProps } from "./Menu/client.mjs";
-import { Menu, MenuGroupProps, MenuItemProps, MenuPopupProps, MenuProps, MenuSeparatorProps } from "./Menu/index.mjs";
+import { Menu, MenuGroupProps, MenuItemProps, MenuLinkItemProps, MenuPopupProps, MenuProps, MenuSeparatorProps } from "./Menu/index.mjs";
 import { MultiSelect, MultiSelectOption, MultiSelectProps } from "./MultiSelect/index.mjs";
 import { SearchFieldInputProps } from "./SearchField/client.mjs";
 import { SearchField, SearchFieldProps } from "./SearchField/index.mjs";
@@ -26,4 +26,4 @@ import { Toast } from "./Toast/index.mjs";
 import { VisuallyHidden, VisuallyHiddenProps } from "./VisuallyHidden/index.mjs";
 import { Theme, defineTheme } from "./theme/define-theme.mjs";
 import { ThemeProvider, ThemeProviderProps } from "./theme/ThemeProvider.mjs";
-export { AlertDialog, type AlertDialogProps, type AlertDialogTriggerProps, Badge, type BadgeProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Clickable, type ClickableProps, Dialog, type DialogActionsProps, type DialogBodyProps, type DialogCloseProps, type DialogPopupProps, type DialogProps, type DialogTriggerProps, Field, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldProps, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, type IconButtonProps, type IconProps, Inline, type InlineProps, Menu, type MenuGroupProps, type MenuItemProps, type MenuPopupProps, type MenuProps, type MenuSeparatorProps, type MenuTriggerProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, SearchField, type SearchFieldInputProps, type SearchFieldProps, Stack, type StackProps, type StyleProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsProps, type TabsTabProps, Tag, type TagProps, Text, type TextProps, type Theme, ThemeProvider, type ThemeProviderProps, Toast, type ToastOptions, type ToastProviderProps, type ToastVariant, VisuallyHidden, type VisuallyHiddenProps, defineTheme, useToast };
+export { AlertDialog, type AlertDialogProps, type AlertDialogTriggerProps, Badge, type BadgeProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Clickable, type ClickableProps, Dialog, type DialogActionsProps, type DialogBodyProps, type DialogCloseProps, type DialogPopupProps, type DialogProps, type DialogTriggerProps, Field, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldProps, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, type IconButtonProps, type IconProps, Inline, type InlineProps, Menu, type MenuGroupProps, type MenuItemProps, type MenuLinkItemProps, type MenuPopupProps, type MenuProps, type MenuSeparatorProps, type MenuTriggerProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, SearchField, type SearchFieldInputProps, type SearchFieldProps, Stack, type StackProps, type StyleProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsProps, type TabsTabProps, Tag, type TagProps, Text, type TextProps, type Theme, ThemeProvider, type ThemeProviderProps, Toast, type ToastOptions, type ToastProviderProps, type ToastVariant, VisuallyHidden, type VisuallyHiddenProps, defineTheme, useToast };

package/dist/lint/index.mjs

@@ -8,6 +8,7 @@ var e = Object.freeze([
 	"Chip",
 	"Tab",
 	"Item",
+	"LinkItem",
 	"Label",
 	"Error",
 	"Description",

package/package.json

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