@igne-agency/react-web-ui 0.3.0 → 0.4.0

package/dist/components/form/form.d.ts

@@ -12,11 +12,9 @@ export type FormRootProps = Omit<ComponentPropsWithRef<"form">, "onSubmit" | "ch
     children: ReactNode;
 }>;
 /**
- * The `<form>`: submits through the form instance, leaves validation to it,
- * disables and inerts its fields while busy, and focuses the first invalid
- * control after a failed submit. While its `leaveGuard` policy holds, it
- * reports unsaved changes to the page's leave guards. Its parts read the
- * form from it.
+ * The `<form>`: it submits through the form instance, disables its fields while
+ * busy, focuses the first invalid control after a failed submit, and reports
+ * unsaved changes to the page's leave guards while `leaveGuard` holds.
  *
  * @example
  * <Form.Root form={form}>…</Form.Root>
@@ -40,7 +38,7 @@ export type FormSubmitProps = Omit<Extract<ButtonProps, Readonly<{
     busyLabel: string;
 }>;
 /**
- * The form's submit button. A wait that lasts 150 ms shows a spinner and is
+ * The form's submit button. A wait that lasts 150 ms shows a spinner, is
  * announced as `busyLabel`, and stays shown at least 200 ms.
  *
  * @example

package/dist/components/form/form.js

@@ -12,17 +12,15 @@ import { focusFirstInvalid } from "./first-invalid.js";
 import { FormDisabledProvider, FormStatusProvider, useFormDisabled, useFormStatus } from "./form-context.js";
 import form_module_default from "./form.module.js";
 import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useStore } from "@tanstack/react-form";
 import { createPortal } from "react-dom";
 // src/components/form/form.tsx
 /**
-* The `<form>`: submits through the form instance, leaves validation to it,
-* disables and inerts its fields while busy, and focuses the first invalid
-* control after a failed submit. While its `leaveGuard` policy holds, it
-* reports unsaved changes to the page's leave guards. Its parts read the
-* form from it.
+* The `<form>`: it submits through the form instance, disables its fields while
+* busy, focuses the first invalid control after a failed submit, and reports
+* unsaved changes to the page's leave guards while `leaveGuard` holds.
 *
 * @example
 * <Form.Root form={form}>…</Form.Root>
@@ -205,7 +203,7 @@ var FormErrors = (t0) => {
 	return t2;
 };
 /**
-* The form's submit button. A wait that lasts 150 ms shows a spinner and is
+* The form's submit button. A wait that lasts 150 ms shows a spinner, is
 * announced as `busyLabel`, and stays shown at least 200 ms.
 *
 * @example
@@ -279,7 +277,7 @@ var FormSubmit = (t0) => {
 	} else t7 = $[20];
 	let t8;
 	if ($[21] !== t6 || $[22] !== t7) {
-		t8 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t6, t7] });
+		t8 = /* @__PURE__ */ jsxs(Fragment, { children: [t6, t7] });
 		$[21] = t6;
 		$[22] = t7;
 		$[23] = t8;

package/dist/components/icon/icon.d.ts

@@ -1,11 +1,8 @@
 import type { FunctionComponent, ReactNode, SVGProps } from "react";
-/**
- * The component type produced by SVGR's `?react` imports
- * (e.g. `import Close from "@material-design-icons/svg/outlined/close.svg?react"`).
- */
+/** An SVG as a React component, such as an SVGR `?react` import from the app's icon set. */
 export type SvgComponent = FunctionComponent<SVGProps<SVGSVGElement>>;
 export type IconProps = Readonly<{
-    /** The SVG component to render, from a SVGR `?react` import. */
+    /** The app's SVG component to render. */
     svg: SvgComponent;
     /**
      * Size relative to the current font size (in `em`). Defaults to `1`
@@ -20,12 +17,10 @@ export type IconProps = Readonly<{
     className?: string;
 }>;
 /**
- * Renders an SVG icon with a consistent size and accessibility treatment.
- * Decorative icons (`label=""`) are hidden from assistive tech; labelled icons
- * expose `role="img"` with an accessible name.
+ * Sizes, colours and labels the app's SVG, from any icon set. `label=""` hides
+ * it from assistive tech; a label names it as an image.
  *
  * @example
- * import Close from "@material-design-icons/svg/outlined/close.svg?react";
- * <Icon svg={Close} label="Close" />
+ * <Icon svg={CloseIcon} label="Close" />
  */
 export declare const Icon: ({ svg: Svg, size, label, className, }: IconProps) => ReactNode;

package/dist/components/icon/icon.js

@@ -1,16 +1,14 @@
 import icon_module_default from "./icon.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 // src/components/icon/icon.tsx
 /**
-* Renders an SVG icon with a consistent size and accessibility treatment.
-* Decorative icons (`label=""`) are hidden from assistive tech; labelled icons
-* expose `role="img"` with an accessible name.
+* Sizes, colours and labels the app's SVG, from any icon set. `label=""` hides
+* it from assistive tech; a label names it as an image.
 *
 * @example
-* import Close from "@material-design-icons/svg/outlined/close.svg?react";
-* <Icon svg={Close} label="Close" />
+* <Icon svg={CloseIcon} label="Close" />
 */
 var Icon = (t0) => {
 	const $ = c(12);

package/dist/components/link/link.js

@@ -1,7 +1,7 @@
 import link_module_default from "./link.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 // src/components/link/link.tsx
 /**
 * The one text link: brand-coloured and underlined. It spreads every prop onto

package/dist/components/link-button/link-button.d.ts

@@ -1,6 +1,5 @@
 import type { ComponentPropsWithRef, ReactNode } from "react";
 import type { ButtonSize, ButtonTone, ButtonVariant } from "../button/button.tsx";
-import { type SvgComponent } from "../icon/icon.tsx";
 export type LinkButtonProps = ComponentPropsWithRef<"a"> & Readonly<{
     /** Visual tier. @default "secondary" */
     variant?: ButtonVariant;
@@ -9,7 +8,7 @@ export type LinkButtonProps = ComponentPropsWithRef<"a"> & Readonly<{
     /** Colour role. @default "brand" */
     tone?: ButtonTone;
     /** Optional leading icon rendered before the label. */
-    icon?: SvgComponent;
+    icon?: ReactNode;
     children: ReactNode;
 }>;
 /**

package/dist/components/link-button/link-button.js

@@ -1,7 +1,6 @@
 import { buttonAttributes } from "../button/button-attributes.js";
-import { Icon } from "../icon/icon.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs } from "react/jsx-runtime";
 // src/components/link-button/link-button.tsx
 /**
 * A link that looks and sizes exactly like a `Button`. It spreads every other
@@ -12,7 +11,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * <RouterLinkButton to="/" variant="primary">Go to home page</RouterLinkButton>
 */
 var LinkButton = (t0) => {
-	const $ = c(20);
+	const $ = c(18);
 	let anchorProps;
 	let children;
 	let className;
@@ -54,27 +53,18 @@ var LinkButton = (t0) => {
 		$[12] = t1;
 	} else t1 = $[12];
 	let t2;
-	if ($[13] !== icon) {
-		t2 = icon ? /* @__PURE__ */ jsx(Icon, {
-			svg: icon,
-			label: ""
-		}) : null;
-		$[13] = icon;
-		$[14] = t2;
-	} else t2 = $[14];
-	let t3;
-	if ($[15] !== anchorProps || $[16] !== children || $[17] !== t1 || $[18] !== t2) {
-		t3 = /* @__PURE__ */ jsxs("a", {
+	if ($[13] !== anchorProps || $[14] !== children || $[15] !== icon || $[16] !== t1) {
+		t2 = /* @__PURE__ */ jsxs("a", {
 			...t1,
 			...anchorProps,
-			children: [t2, children]
+			children: [icon, children]
 		});
-		$[15] = anchorProps;
-		$[16] = children;
-		$[17] = t1;
-		$[18] = t2;
-		$[19] = t3;
-	} else t3 = $[19];
-	return t3;
+		$[13] = anchorProps;
+		$[14] = children;
+		$[15] = icon;
+		$[16] = t1;
+		$[17] = t2;
+	} else t2 = $[17];
+	return t2;
 };
 export { LinkButton };

package/dist/components/loading-message/loading-message.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 export type LoadingMessageProps = Readonly<{
-    /** What the wait says and is announced as, such as "Loading your declarations". */
+    /** What the wait says and is announced as, such as "Loading your invoices". */
     title: string;
     /** A line under the title, such as what the wait is for. */
     description?: string;
@@ -17,6 +17,6 @@ export type LoadingMessageProps = Readonly<{
  * announced once.
  *
  * @example
- * <LoadingMessage title="Loading your declarations" illustration={<Logo />} />
+ * <LoadingMessage title="Loading your invoices" illustration={<Logo />} />
  */
 export declare const LoadingMessage: ({ title, description, illustration, busyAfter, className, }: LoadingMessageProps) => ReactNode;

package/dist/components/loading-message/loading-message.js

@@ -11,7 +11,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * announced once.
 *
 * @example
-* <LoadingMessage title="Loading your declarations" illustration={<Logo />} />
+* <LoadingMessage title="Loading your invoices" illustration={<Logo />} />
 */
 var LoadingMessage = (t0) => {
 	const $ = c(10);

package/dist/components/locale-provider/locale-provider.js

@@ -1,7 +1,7 @@
 import { useRequiredContext } from "../../lib/use-required-context.js";
 import { c } from "react/compiler-runtime";
-import { createContext } from "react";
 import { jsx } from "react/jsx-runtime";
+import { createContext } from "react";
 import { I18nProvider } from "react-aria-components";
 // src/components/locale-provider/locale-provider.tsx
 var LocaleContext = createContext(void 0);

package/dist/components/menu/menu.d.ts

@@ -1,16 +1,29 @@
 import { Menu as BaseMenu } from "@base-ui/react/menu";
 import type { ComponentProps, ReactNode } from "react";
-import { type SvgComponent } from "../icon/icon.tsx";
+export type MenuRootProps<Payload = unknown> = Omit<BaseMenu.Root.Props<Payload>, "open" | "defaultOpen" | "onOpenChange" | "modal" | "children"> & Readonly<{
+    /** Whether the menu is open. Leave it out for a menu that keeps its own state. */
+    open?: boolean;
+    /** Whether the menu starts open, when it keeps its own state. @default false */
+    defaultOpen?: boolean;
+    /** Called with the new open state when the menu opens or closes. */
+    onOpenChange?: BaseMenu.Root.Props<Payload>["onOpenChange"];
+    /** Whether the page behind the menu is inert while it is open. @default true */
+    modal?: BaseMenu.Root.Props<Payload>["modal"];
+    /** The trigger and the menu's content. */
+    children?: BaseMenu.Root.Props<Payload>["children"];
+}>;
+/** Holds the menu's open state for its parts. It renders no element of its own. */
+declare const Root: <Payload>(props: MenuRootProps<Payload>) => ReactNode;
 type TriggerBaseProps = Omit<ComponentProps<typeof BaseMenu.Trigger>, "children" | "render">;
 type IconTriggerProps = TriggerBaseProps & Readonly<{
-    icon: SvgComponent;
+    icon: ReactNode;
     /** Accessible name, surfaced as the tooltip hint and the `aria-label`. */
     label: string;
     children?: never;
 }>;
 type TextTriggerProps = TriggerBaseProps & Readonly<{
     /** Optional leading icon rendered before the label. */
-    icon?: SvgComponent;
+    icon?: ReactNode;
     children: ReactNode;
     label?: never;
 }>;
@@ -21,13 +34,23 @@ export type MenuTriggerProps = IconTriggerProps | TextTriggerProps;
  */
 declare const Trigger: (props: MenuTriggerProps) => ReactNode;
 export type MenuPositionerProps = Omit<ComponentProps<typeof BaseMenu.Positioner>, "ref">;
+/** Places the popup against its trigger, clear of the viewport's edges. */
 declare const Positioner: ({ className, ...props }: MenuPositionerProps) => ReactNode;
+/** The menu's surface, holding its items. */
 declare const Popup: ({ className, ...props }: ComponentProps<typeof BaseMenu.Popup>) => ReactNode;
+export type MenuContentProps = ComponentProps<typeof BaseMenu.Popup> & Readonly<Pick<MenuPositionerProps, "side" | "sideOffset" | "align" | "alignOffset"> & {
+    /** The element the menu is portalled into. @default document.body */
+    container?: BaseMenu.Portal.Props["container"];
+}>;
+/** `Portal`, `Positioner` and `Popup` in one: the menu's surface, placed against its trigger. */
+declare const Content: ({ container, side, sideOffset, align, alignOffset, ...props }: MenuContentProps) => ReactNode;
+/** The arrow pointing from the popup at its trigger. */
 declare const Arrow: ({ className, ...props }: ComponentProps<typeof BaseMenu.Arrow>) => ReactNode;
 export type MenuItemProps = ComponentProps<typeof BaseMenu.Item> & Readonly<{
     /** Optional leading icon, rendered decoratively before the label. */
-    icon?: SvgComponent;
+    icon?: ReactNode;
 }>;
+/** An action, with an optional leading icon. */
 declare const Item: ({ icon, className, children, ...props }: MenuItemProps) => ReactNode;
 export type MenuLinkItemProps = ComponentProps<typeof BaseMenu.LinkItem>;
 /**
@@ -35,14 +58,17 @@ export type MenuLinkItemProps = ComponentProps<typeof BaseMenu.LinkItem>;
  * forwards its ref, so a router's `createLink` can wrap it.
  */
 declare const LinkItem: ({ className, ...props }: MenuLinkItemProps) => ReactNode;
+/** A line between groups of items. */
 declare const Separator: ({ className, ...props }: ComponentProps<typeof BaseMenu.Separator>) => ReactNode;
+/** The heading that names a `Group`. */
 declare const GroupLabel: ({ className, ...props }: ComponentProps<typeof BaseMenu.GroupLabel>) => ReactNode;
 type MenuParts = Readonly<{
-    Root: typeof BaseMenu.Root;
+    Root: typeof Root;
     Trigger: typeof Trigger;
     Portal: typeof BaseMenu.Portal;
     Positioner: typeof Positioner;
     Popup: typeof Popup;
+    Content: typeof Content;
     Arrow: typeof Arrow;
     Item: typeof Item;
     LinkItem: typeof LinkItem;
@@ -52,26 +78,18 @@ type MenuParts = Readonly<{
     createHandle: typeof BaseMenu.createHandle;
 }>;
 /**
- * Dropdown menu over base-ui's Menu, with an arrow pointing at the trigger.
- * `Menu.Item` accepts an optional leading `icon`. The positioner keeps
- * `--popup-edge-padding` from the viewport's edges.
+ * A dropdown menu over base-ui's `Menu`. `Content` bundles the portal,
+ * positioner and popup; the unbundled parts stay. Icons are the app's own.
  *
  * @example
- * import RowActionsIcon from "@material-design-icons/svg/outlined/more_vert.svg?react";
- * import DownloadIcon from "@material-design-icons/svg/outlined/download.svg?react";
- *
  * <Menu.Root>
- *   <Menu.Trigger icon={RowActionsIcon} label="Row actions" />
- *   <Menu.Portal>
- *     <Menu.Positioner sideOffset={8}>
- *       <Menu.Popup>
- *         <Menu.Arrow />
- *         <Menu.Item icon={DownloadIcon} onClick={download}>
- *           Download
- *         </Menu.Item>
- *       </Menu.Popup>
- *     </Menu.Positioner>
- *   </Menu.Portal>
+ *   <Menu.Trigger icon={<MoreIcon />} label="Row actions" />
+ *   <Menu.Content sideOffset={8}>
+ *     <Menu.Arrow />
+ *     <Menu.Item icon={<DownloadIcon />} onClick={download}>
+ *       Download
+ *     </Menu.Item>
+ *   </Menu.Content>
  * </Menu.Root>
  */
 export declare const Menu: MenuParts;

package/dist/components/menu/menu.js

@@ -1,12 +1,22 @@
 import { usePopupEdgePadding } from "../../lib/popup-edge-padding.js";
 import { Button } from "../button/button.js";
-import { Icon } from "../icon/icon.js";
 import menu_module_default from "./menu.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 // src/components/menu/menu.tsx
+/** Holds the menu's open state for its parts. It renders no element of its own. */
+var Root = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Menu.Root, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
 /**
 * The button that opens a menu: `icon` + `label` for the icon form, `children`
 * for a labelled one. Always a {@link Button}.
@@ -85,6 +95,7 @@ var Trigger = (props) => {
 	} else t1 = $[19];
 	return t1;
 };
+/** Places the popup against its trigger, clear of the viewport's edges. */
 var Positioner = (t0) => {
 	const $ = c(9);
 	let className;
@@ -119,6 +130,7 @@ var Positioner = (t0) => {
 	} else t3 = $[8];
 	return t3;
 };
+/** The menu's surface, holding its items. */
 var Popup = (t0) => {
 	const $ = c(8);
 	let className;
@@ -150,6 +162,67 @@ var Popup = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** `Portal`, `Positioner` and `Popup` in one: the menu's surface, placed against its trigger. */
+var Content = (t0) => {
+	const $ = c(18);
+	let align;
+	let alignOffset;
+	let container;
+	let props;
+	let side;
+	let sideOffset;
+	if ($[0] !== t0) {
+		({container, side, sideOffset, align, alignOffset, ...props} = t0);
+		$[0] = t0;
+		$[1] = align;
+		$[2] = alignOffset;
+		$[3] = container;
+		$[4] = props;
+		$[5] = side;
+		$[6] = sideOffset;
+	} else {
+		align = $[1];
+		alignOffset = $[2];
+		container = $[3];
+		props = $[4];
+		side = $[5];
+		sideOffset = $[6];
+	}
+	let t1;
+	if ($[7] !== props) {
+		t1 = /* @__PURE__ */ jsx(Popup, { ...props });
+		$[7] = props;
+		$[8] = t1;
+	} else t1 = $[8];
+	let t2;
+	if ($[9] !== align || $[10] !== alignOffset || $[11] !== side || $[12] !== sideOffset || $[13] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Positioner, {
+			side,
+			sideOffset,
+			align,
+			alignOffset,
+			children: t1
+		});
+		$[9] = align;
+		$[10] = alignOffset;
+		$[11] = side;
+		$[12] = sideOffset;
+		$[13] = t1;
+		$[14] = t2;
+	} else t2 = $[14];
+	let t3;
+	if ($[15] !== container || $[16] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Menu.Portal, {
+			container,
+			children: t2
+		});
+		$[15] = container;
+		$[16] = t2;
+		$[17] = t3;
+	} else t3 = $[17];
+	return t3;
+};
+/** The arrow pointing from the popup at its trigger. */
 var Arrow = (t0) => {
 	const $ = c(9);
 	let className;
@@ -196,8 +269,9 @@ var Arrow = (t0) => {
 	} else t3 = $[8];
 	return t3;
 };
+/** An action, with an optional leading icon. */
 var Item = (t0) => {
-	const $ = c(14);
+	const $ = c(12);
 	let children;
 	let className;
 	let icon;
@@ -222,28 +296,19 @@ var Item = (t0) => {
 		$[6] = t1;
 	} else t1 = $[6];
 	let t2;
-	if ($[7] !== icon) {
-		t2 = icon && /* @__PURE__ */ jsx(Icon, {
-			svg: icon,
-			label: ""
-		});
-		$[7] = icon;
-		$[8] = t2;
-	} else t2 = $[8];
-	let t3;
-	if ($[9] !== children || $[10] !== props || $[11] !== t1 || $[12] !== t2) {
-		t3 = /* @__PURE__ */ jsxs(Menu.Item, {
+	if ($[7] !== children || $[8] !== icon || $[9] !== props || $[10] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(Menu.Item, {
 			className: t1,
 			...props,
-			children: [t2, children]
+			children: [icon, children]
 		});
-		$[9] = children;
-		$[10] = props;
-		$[11] = t1;
-		$[12] = t2;
-		$[13] = t3;
-	} else t3 = $[13];
-	return t3;
+		$[7] = children;
+		$[8] = icon;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+	} else t2 = $[11];
+	return t2;
 };
 /**
 * An item that leads to a page. It spreads every other prop onto the `<a>` and
@@ -280,6 +345,7 @@ var LinkItem = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** A line between groups of items. */
 var Separator = (t0) => {
 	const $ = c(8);
 	let className;
@@ -311,6 +377,7 @@ var Separator = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** The heading that names a `Group`. */
 var GroupLabel = (t0) => {
 	const $ = c(8);
 	let className;
@@ -343,34 +410,27 @@ var GroupLabel = (t0) => {
 	return t2;
 };
 /**
-* Dropdown menu over base-ui's Menu, with an arrow pointing at the trigger.
-* `Menu.Item` accepts an optional leading `icon`. The positioner keeps
-* `--popup-edge-padding` from the viewport's edges.
+* A dropdown menu over base-ui's `Menu`. `Content` bundles the portal,
+* positioner and popup; the unbundled parts stay. Icons are the app's own.
 *
 * @example
-* import RowActionsIcon from "@material-design-icons/svg/outlined/more_vert.svg?react";
-* import DownloadIcon from "@material-design-icons/svg/outlined/download.svg?react";
-*
 * <Menu.Root>
-*   <Menu.Trigger icon={RowActionsIcon} label="Row actions" />
-*   <Menu.Portal>
-*     <Menu.Positioner sideOffset={8}>
-*       <Menu.Popup>
-*         <Menu.Arrow />
-*         <Menu.Item icon={DownloadIcon} onClick={download}>
-*           Download
-*         </Menu.Item>
-*       </Menu.Popup>
-*     </Menu.Positioner>
-*   </Menu.Portal>
+*   <Menu.Trigger icon={<MoreIcon />} label="Row actions" />
+*   <Menu.Content sideOffset={8}>
+*     <Menu.Arrow />
+*     <Menu.Item icon={<DownloadIcon />} onClick={download}>
+*       Download
+*     </Menu.Item>
+*   </Menu.Content>
 * </Menu.Root>
 */
 var Menu$1 = {
-	Root: Menu.Root,
+	Root,
 	Trigger,
 	Portal: Menu.Portal,
 	Positioner,
 	Popup,
+	Content,
 	Arrow,
 	Item,
 	LinkItem,

package/dist/components/nav/nav-context.d.ts

@@ -14,4 +14,3 @@ export type NavContextValue = Readonly<{
     hint: BaseTooltip.Handle<string>;
 }>;
 export declare const NavContext: Context<NavContextValue | null>;
-export declare const NavItemLayoutContext: Context<NavLayout>;

package/dist/components/nav/nav-context.js

@@ -1,5 +1,4 @@
 import { createContext } from "react";
 // src/components/nav/nav-context.ts
 var NavContext = createContext(null);
-var NavItemLayoutContext = createContext("row");
-export { NavContext, NavItemLayoutContext };
+export { NavContext };

package/dist/components/nav/nav-item-view.d.ts

@@ -1,6 +1,5 @@
 import { useRender } from "@base-ui/react/use-render";
 import { type ComponentPropsWithRef, type ReactElement, type ReactNode } from "react";
-import { type SvgComponent } from "../icon/icon.tsx";
 import { type NavLayout } from "./nav-context.ts";
 /** What every nav entry takes besides its element's own props. */
 export type NavEntryProps = Readonly<{
@@ -18,7 +17,7 @@ type EntryShellProps = NavEntryProps & Readonly<{
  * Hangs an entry's element off the nav's one tooltip, which names it while it
  * is unlabelled. Outside a `Nav.Root` the element stands alone.
  */
-export declare const EntryShell: ({ layout, labelled, label, element, }: EntryShellProps) => ReactNode;
+export declare const EntryShell: ({ labelled, label, element, }: EntryShellProps) => ReactNode;
 /** The attributes an entry's element carries for its layout and label. */
 export declare const entryAttributes: ({ layout, labelled, label, }: NavEntryProps) => Readonly<{
     "data-layout": NavLayout;
@@ -33,14 +32,15 @@ export type NavItemRootProps = useRender.ComponentProps<"button"> & NavEntryProp
  */
 declare const Root: ({ layout, labelled, label, className, ...props }: NavItemRootProps) => ReactNode;
 export type NavItemIconProps = Readonly<{
-    svg: SvgComponent;
     className?: string;
+    /** The app's icon, drawn at `1em` in `currentColor`; the slot sizes it. */
+    children: ReactNode;
 }>;
 /**
- * The entry's glyph. A stacked entry's icon carries the destination on its own,
- * so it takes 24px over the row's text-matched 16px.
+ * The entry's icon slot. A stacked entry's icon carries the destination on its
+ * own, so it takes 1.5em over the row's text-matched 1em.
  */
-declare const NavItemIcon: ({ svg, className, }: NavItemIconProps) => ReactNode;
+declare const NavItemIcon: ({ className, children, }: NavItemIconProps) => ReactNode;
 /** The entry's text. Fades out where the entry is named by its tooltip instead. */
 declare const Label: ({ className, ...props }: ComponentPropsWithRef<"span">) => ReactNode;
 type NavItemViewParts = Readonly<{
@@ -55,7 +55,7 @@ type NavItemViewParts = Readonly<{
  *
  * @example
  * <NavItemView.Root render={<Drawer.Trigger />} label="More" layout="stack">
- * 	<NavItemView.Icon svg={MoreIcon} />
+ * 	<NavItemView.Icon><MoreIcon /></NavItemView.Icon>
  * 	<NavItemView.Label>More</NavItemView.Label>
  * </NavItemView.Root>
  */