@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/navigation/NavigationRail.js

@@ -0,0 +1,285 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { usePresence } from "../../primitives/use-presence.js";
+import { Overlay as Overlay$1 } from "../../primitives/Overlay.js";
+import { DensityZeroButtons } from "../button/DensityZeroButtons.js";
+import { NavItem } from "./NavItem.js";
+import { navigationRailStyles } from "./navigation-styles.js";
+import { onItemArrowKeys } from "./use-item-arrow-keys.js";
+import { useRailItemMorph } from "./use-rail-item-morph.js";
+import { createContext, useContext, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps, useDialog, useModalOverlay } from "react-aria";
+import { useOverlayTriggerState } from "react-stately";
+import { useControlledState } from "react-stately/useControlledState";
+//#region src/components/navigation/NavigationRail.tsx
+/** Registered in utilities.css (96px); every rail inset is derived from it. */
+const COLLAPSED_WIDTH_VAR = "--m3-rail-collapsed-width";
+const DEFAULT_COLLAPSED_WIDTH = 96;
+const EXPANDED_MIN = 220;
+const EXPANDED_MAX = 360;
+/** Elements that take focus with Tab, for the modal rail's initial focus. */
+const FOCUSABLE = "a[href]:not([aria-disabled=\"true\"]), button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex=\"-1\"])";
+/**
+* The item chrome beside an expanded label: an item inset each side, (collapsed − 56) / 2,
+* plus 16px pill padding each side, the 24px icon and the 8px gap. 104px at 96px.
+*/
+function expandedChrome(el) {
+	return (Number.parseFloat(getComputedStyle(el).getPropertyValue(COLLAPSED_WIDTH_VAR)) || DEFAULT_COLLAPSED_WIDTH) - 56 + 64;
+}
+const RailContext = createContext(null);
+/**
+* Expanded width: the widest label on one line plus the item chrome, 220–360px (Compose).
+* Past 360px labels wrap.
+*/
+function useExpandedWidth(ref, active, content) {
+	const [width, setWidth] = useState(EXPANDED_MIN);
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!active || !el) return;
+		const labels = [...el.querySelectorAll("[data-nav-label]")];
+		const widest = Math.max(0, ...labels.map((label) => {
+			label.style.whiteSpace = "nowrap";
+			const natural = label.scrollWidth;
+			label.style.whiteSpace = "";
+			return natural;
+		}));
+		const header = el.querySelector("[data-rail-header]");
+		const headerWidth = header ? header.scrollWidth : 0;
+		const chrome = expandedChrome(el);
+		setWidth(Math.min(Math.max(widest + chrome, headerWidth, EXPANDED_MIN), EXPANDED_MAX));
+	}, [
+		ref,
+		active,
+		content
+	]);
+	return width;
+}
+/**
+* Whether `ref` is still widening after it became `expanding` (or mounted expanding, as the
+* modal sheet grows from the collapsed width): from that render until its width transition
+* ends, and false at once when none runs (reduced motion, or a consumer width). Meanwhile the
+* rail keeps its labels on one line, so none wraps letter by letter in a rail that is still
+* narrow and no icon jumps; the rail's clipping hides what doesn't fit yet.
+*/
+function useWidening(ref, expanding) {
+	const [widening, setWidening] = useState(expanding);
+	const [wasExpanding, setWasExpanding] = useState(expanding);
+	if (expanding !== wasExpanding) {
+		setWasExpanding(expanding);
+		setWidening(expanding);
+	}
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!widening || !el) return;
+		if (!(typeof el.getAnimations === "function" && el.getAnimations().some((animation) => "transitionProperty" in animation && animation.transitionProperty === "width"))) {
+			setWidening(false);
+			return;
+		}
+		const done = (event) => {
+			if (event.target === el && event.propertyName === "width") setWidening(false);
+		};
+		el.addEventListener("transitionend", done);
+		return () => el.removeEventListener("transitionend", done);
+	}, [ref, widening]);
+	return widening;
+}
+/**
+* M3 Expressive navigation rail: destinations along the start edge. Collapsed (96px) items
+* show the icon above the label; expanded (220–360px) they show it beside the label and
+* the rail's width springs open. With `modal`, the expanded rail opens over the page as a
+* sheet with a scrim, focusing its first interactive element. Put a menu button in
+* `header` to toggle `expanded`. Tab or the Up / Down arrows move between items, and
+* labels wrap rather than truncate.
+*
+* Icons stay on one line through the middle of the collapsed rail in both states. For a
+* different collapsed width, set `--m3-rail-collapsed-width` (e.g. the class
+* `[--m3-rail-collapsed-width:80px]`) rather than a `w-*` class; M3's widths are 96px
+* (Expressive) and 80px (baseline).
+*
+* @example
+* <NavigationRail aria-label="Main" header={({ toggle }) => <IconButton icon={<MenuIcon />} aria-label="Menu" onPress={toggle} />}>
+*   <NavigationRailItem href="/inbox" icon={<InboxIcon />} selected>Inbox</NavigationRailItem>
+* </NavigationRail>
+*/
+function NavigationRail({ expanded, defaultExpanded = false, onExpandedChange, modal = false, hideOnCollapse = false, header, itemAlignment = "top", divider = false, indicatorMotion = "expand", children, classNames, className, style, ...rest }) {
+	const [isExpanded, setExpanded] = useControlledState(expanded, defaultExpanded, onExpandedChange);
+	const toggle = () => setExpanded(!isExpanded);
+	const inlineExpanded = isExpanded && !modal;
+	const rootRef = useRef(null);
+	const lastIndicatorRef = useRef(null);
+	const slide = indicatorMotion === "slide";
+	const width = useExpandedWidth(rootRef, inlineExpanded, children);
+	const widening = useWidening(rootRef, inlineExpanded);
+	const [mode, setMode] = useState(inlineExpanded);
+	const [modeChanged, setModeChanged] = useState(false);
+	const captureItems = useRailItemMorph(rootRef, mode);
+	if (mode !== inlineExpanded) {
+		captureItems();
+		setMode(inlineExpanded);
+		setModeChanged(true);
+	}
+	const styles = navigationRailStyles({
+		expanded: inlineExpanded,
+		itemAlignment,
+		divider,
+		slidingIndicator: slide && inlineExpanded
+	});
+	const headerContent = typeof header === "function" ? header({
+		expanded: isExpanded,
+		toggle
+	}) : header;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [!(modal && hideOnCollapse) && /* @__PURE__ */ jsx("nav", {
+		...rest,
+		ref: rootRef,
+		style: {
+			"--m3-rail-width": inlineExpanded ? `${width}px` : `var(${COLLAPSED_WIDTH_VAR})`,
+			...style
+		},
+		"data-tokens": mergeDataTokens("md-comp-nav-rail", rest),
+		"data-expanded": inlineExpanded || void 0,
+		"data-widening": widening || void 0,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: styles.body({ class: classNames?.body }),
+			children: [headerContent != null && /* @__PURE__ */ jsx("div", {
+				"data-rail-header": "",
+				className: styles.header({ class: classNames?.header }),
+				children: /* @__PURE__ */ jsx(DensityZeroButtons, { children: headerContent })
+			}), /* @__PURE__ */ jsx("div", {
+				"data-item-alignment": itemAlignment,
+				onKeyDown: onItemArrowKeys("vertical"),
+				className: styles.items({ class: classNames?.items }),
+				children: /* @__PURE__ */ jsx(RailContext, {
+					value: {
+						layout: inlineExpanded ? "rail-start" : "rail-top",
+						enterLabel: modeChanged,
+						...slide && inlineExpanded && { lastIndicatorRef }
+					},
+					children
+				})
+			})]
+		})
+	}), modal && /* @__PURE__ */ jsx(ModalRail, {
+		open: isExpanded,
+		onClose: () => setExpanded(false),
+		header: headerContent,
+		naming: rest,
+		slide: hideOnCollapse,
+		itemAlignment,
+		slidingIndicator: slide,
+		railRef: rootRef,
+		classNames,
+		children
+	})] });
+}
+/** The sheet's exit transitions; whichever runs marks the end of its exit. */
+const SHEET_EXIT_PROPERTIES = [
+	"width",
+	"translate",
+	"opacity"
+];
+function ModalRail({ open, onClose, header, naming, slide, itemAlignment, slidingIndicator, railRef, classNames, children }) {
+	const state = useOverlayTriggerState({
+		isOpen: open,
+		onOpenChange: (isOpen) => {
+			if (!isOpen) onClose();
+		}
+	});
+	const { isPresent, isExiting, exitProps } = usePresence(open, SHEET_EXIT_PROPERTIES);
+	if (!isPresent) return null;
+	return /* @__PURE__ */ jsx(Overlay$1, {
+		exiting: isExiting,
+		children: /* @__PURE__ */ jsx(ModalSheet, {
+			state,
+			isExiting,
+			exitProps,
+			header,
+			naming,
+			slide,
+			itemAlignment,
+			slidingIndicator,
+			railRef,
+			classNames,
+			children
+		})
+	});
+}
+function ModalSheet({ state, isExiting, exitProps, header, naming, slide, itemAlignment, slidingIndicator, railRef, classNames, children }) {
+	const ref = useRef(null);
+	const lastIndicatorRef = useRef(null);
+	const { modalProps, underlayProps } = useModalOverlay({ isDismissable: !isExiting }, state, ref);
+	const { dialogProps } = useDialog(naming, ref);
+	useLayoutEffect(() => {
+		const rail = railRef.current;
+		if (!rail || !ref.current) return;
+		ref.current.style.setProperty(COLLAPSED_WIDTH_VAR, getComputedStyle(rail).getPropertyValue(COLLAPSED_WIDTH_VAR));
+	}, [railRef]);
+	useLayoutEffect(() => {
+		(ref.current?.querySelector(FOCUSABLE))?.focus();
+	}, []);
+	const width = useExpandedWidth(ref, true, children);
+	const widening = useWidening(ref, true);
+	const styles = navigationRailStyles({
+		expanded: true,
+		sheetEntry: slide ? "slide" : "grow",
+		itemAlignment,
+		slidingIndicator
+	});
+	const exiting = isExiting || void 0;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		...underlayProps,
+		"aria-hidden": "true",
+		"data-exiting": exiting,
+		className: styles.scrim({ class: classNames?.scrim })
+	}), /* @__PURE__ */ jsxs("div", {
+		...mergeProps(modalProps, dialogProps, exitProps),
+		ref,
+		"data-tokens": "md-comp-nav-rail",
+		"data-modal": "",
+		"data-exiting": exiting,
+		"data-widening": widening || void 0,
+		style: { "--m3-rail-width": `${width}px` },
+		className: styles.sheet({ class: classNames?.sheet }),
+		children: [header != null && /* @__PURE__ */ jsx("div", {
+			"data-rail-header": "",
+			className: styles.header({ class: classNames?.header }),
+			children: /* @__PURE__ */ jsx(DensityZeroButtons, { children: header })
+		}), /* @__PURE__ */ jsx("nav", {
+			"aria-label": "aria-label" in naming ? naming["aria-label"] : void 0,
+			"aria-labelledby": "aria-labelledby" in naming ? naming["aria-labelledby"] : void 0,
+			"data-item-alignment": itemAlignment,
+			onKeyDown: onItemArrowKeys("vertical"),
+			className: styles.items({ class: classNames?.items }),
+			children: /* @__PURE__ */ jsx(RailContext, {
+				value: {
+					layout: "rail-start",
+					enterLabel: false,
+					...slidingIndicator && { lastIndicatorRef },
+					onNavigate: state.close
+				},
+				children
+			})
+		})]
+	})] });
+}
+/** A destination in a {@link NavigationRail}: a link (`href`) or a button. */
+function NavigationRailItem({ onPress, ...props }) {
+	const rail = useContext(RailContext);
+	if (!rail) throw new Error("NavigationRailItem must be rendered inside a NavigationRail");
+	return /* @__PURE__ */ jsx(NavItem, {
+		...props,
+		layout: rail.layout,
+		enterLabel: rail.enterLabel,
+		...rail.lastIndicatorRef && { lastIndicatorRef: rail.lastIndicatorRef },
+		onPress: (event) => {
+			onPress?.(event);
+			rail.onNavigate?.();
+		}
+	});
+}
+//#endregion
+export { NavigationRail, NavigationRailItem };
+
+//# sourceMappingURL=NavigationRail.js.map

package/dist/components/navigation/NavigationRail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationRail.js","names":["Overlay"],"sources":["../../../src/components/navigation/NavigationRail.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n  type RefObject,\n} from 'react';\nimport { mergeProps, useDialog, useModalOverlay } from 'react-aria';\nimport { useOverlayTriggerState, type OverlayTriggerState } from 'react-stately';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport { Overlay } from '../../primitives/Overlay';\nimport { usePresence } from '../../primitives/use-presence';\nimport { cn } from '../../utils/cn';\nimport type { NavItemLayout } from './nav-item-styles';\nimport { DensityZeroButtons } from '../button/DensityZeroButtons';\nimport { NavItem, type NavItemProps } from './NavItem';\nimport { navigationRailStyles } from './navigation-styles';\nimport { onItemArrowKeys } from './use-item-arrow-keys';\nimport { useRailItemMorph } from './use-rail-item-morph';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\n\n/** Registered in utilities.css (96px); every rail inset is derived from it. */\nconst COLLAPSED_WIDTH_VAR = '--m3-rail-collapsed-width';\nconst DEFAULT_COLLAPSED_WIDTH = 96;\nconst EXPANDED_MIN = 220;\nconst EXPANDED_MAX = 360;\n/** Elements that take focus with Tab, for the modal rail's initial focus. */\nconst FOCUSABLE =\n  'a[href]:not([aria-disabled=\"true\"]), button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * The item chrome beside an expanded label: an item inset each side, (collapsed − 56) / 2,\n * plus 16px pill padding each side, the 24px icon and the 8px gap. 104px at 96px.\n */\nfunction expandedChrome(el: HTMLElement) {\n  const collapsed =\n    Number.parseFloat(getComputedStyle(el).getPropertyValue(COLLAPSED_WIDTH_VAR)) ||\n    DEFAULT_COLLAPSED_WIDTH;\n  return collapsed - 56 + 64;\n}\n\ninterface RailContextValue {\n  layout: NavItemLayout;\n  enterLabel: boolean;\n  /** The expanded list's last current pill, which the next current item's pill slides from. */\n  lastIndicatorRef?: RefObject<HTMLElement | null>;\n  /** The modal rail collapses after an item is chosen. */\n  onNavigate?: () => void;\n}\n\nconst RailContext = createContext<RailContextValue | null>(null);\n\ntype Naming =\n  | {\n      /** Accessible name for the navigation rail. Required unless `aria-labelledby` is set. */\n      'aria-label': string;\n    }\n  | {\n      /** The id of the element that names the navigation rail. Required unless `aria-label` is set. */\n      'aria-labelledby': string;\n    };\n\nexport interface NavigationRailClassNames {\n  /** The `<nav>` container, merged with `className`. */\n  root?: string;\n  /** The in-flow rail's scrolling column, which holds the 44px top inset. */\n  body?: string;\n  /** The content above the items (`header`). */\n  header?: string;\n  /** The list of items. */\n  items?: string;\n  /** The expanded modal rail's sheet. */\n  sheet?: string;\n  /** The scrim behind the expanded modal rail. */\n  scrim?: string;\n}\n\ninterface NavigationRailOwnProps {\n  /** Whether the rail is expanded (controlled). */\n  expanded?: boolean;\n  /** Whether the rail starts expanded (uncontrolled). @default false */\n  defaultExpanded?: boolean;\n  /** Called when the rail expands or collapses. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Expand over the page as a modal sheet with a scrim instead of pushing content.\n   * Pressing outside, Escape or choosing an item collapses it.\n   * @default false\n   */\n  modal?: boolean;\n  /** With `modal`, show nothing while collapsed (the expanded rail slides in). @default false */\n  hideOnCollapse?: boolean;\n  /** Content above the items, e.g. a menu button and a FAB; a function receives the state. */\n  header?: ReactNode | ((state: { expanded: boolean; toggle: () => void }) => ReactNode);\n  /**\n   * Align the items as a group to the top, or to the middle of the space below the header\n   * (M3 recommends centre on tablets, within easier reach). The header stays at the top.\n   * @default \"top\"\n   */\n  itemAlignment?: 'top' | 'center';\n  /** Draw a divider on the edge next to the content. @default false */\n  divider?: boolean;\n  /**\n   * How the current item's pill moves to a newly chosen item. `expand` (M3: \"the active\n   * indicator expands from the center of the icon\") grows it in place. `slide` moves it from\n   * the previously chosen item on the fast spatial spring while the rail is expanded (in\n   * place or modal), as in Google's Expressive showcase; an extension beyond the M3 spec.\n   * The collapsed rail always expands, and reduced motion fades the pill in place.\n   * @default \"expand\"\n   */\n  indicatorMotion?: 'expand' | 'slide';\n  /** `NavigationRailItem` elements. */\n  children: ReactNode;\n  /** Classes for each part, by slot. */\n  classNames?: NavigationRailClassNames;\n}\n\nexport type NavigationRailProps = NavigationRailOwnProps &\n  Naming &\n  Omit<\n    ComponentPropsWithRef<'nav'>,\n    keyof NavigationRailOwnProps | 'aria-label' | 'aria-labelledby'\n  >;\n\n/**\n * Expanded width: the widest label on one line plus the item chrome, 220–360px (Compose).\n * Past 360px labels wrap.\n */\nfunction useExpandedWidth(ref: RefObject<HTMLElement | null>, active: boolean, content: ReactNode) {\n  const [width, setWidth] = useState(EXPANDED_MIN);\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!active || !el) return;\n    const labels = [...el.querySelectorAll<HTMLElement>('[data-nav-label]')];\n    // Labels wrap in a narrow rail; measure each on one line.\n    const widest = Math.max(\n      0,\n      ...labels.map((label) => {\n        label.style.whiteSpace = 'nowrap';\n        const natural = label.scrollWidth;\n        label.style.whiteSpace = '';\n        return natural;\n      }),\n    );\n    const header = el.querySelector<HTMLElement>('[data-rail-header]');\n    const headerWidth = header ? header.scrollWidth : 0;\n    const chrome = expandedChrome(el);\n    setWidth(Math.min(Math.max(widest + chrome, headerWidth, EXPANDED_MIN), EXPANDED_MAX));\n  }, [ref, active, content]);\n  return width;\n}\n\n/**\n * Whether `ref` is still widening after it became `expanding` (or mounted expanding, as the\n * modal sheet grows from the collapsed width): from that render until its width transition\n * ends, and false at once when none runs (reduced motion, or a consumer width). Meanwhile the\n * rail keeps its labels on one line, so none wraps letter by letter in a rail that is still\n * narrow and no icon jumps; the rail's clipping hides what doesn't fit yet.\n */\nfunction useWidening(ref: RefObject<HTMLElement | null>, expanding: boolean) {\n  const [widening, setWidening] = useState(expanding);\n  const [wasExpanding, setWasExpanding] = useState(expanding);\n  if (expanding !== wasExpanding) {\n    setWasExpanding(expanding);\n    setWidening(expanding);\n  }\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!widening || !el) return;\n    // Reading the running transitions resolves this render's styles, starting the spring.\n    const running =\n      typeof el.getAnimations === 'function' &&\n      el\n        .getAnimations()\n        .some(\n          (animation) =>\n            'transitionProperty' in animation && animation.transitionProperty === 'width',\n        );\n    if (!running) {\n      setWidening(false);\n      return;\n    }\n    // A later width (the measured one replacing the minimum) retargets the same spring.\n    const done = (event: TransitionEvent) => {\n      if (event.target === el && event.propertyName === 'width') setWidening(false);\n    };\n    el.addEventListener('transitionend', done);\n    return () => el.removeEventListener('transitionend', done);\n  }, [ref, widening]);\n  return widening;\n}\n\n/**\n * M3 Expressive navigation rail: destinations along the start edge. Collapsed (96px) items\n * show the icon above the label; expanded (220–360px) they show it beside the label and\n * the rail's width springs open. With `modal`, the expanded rail opens over the page as a\n * sheet with a scrim, focusing its first interactive element. Put a menu button in\n * `header` to toggle `expanded`. Tab or the Up / Down arrows move between items, and\n * labels wrap rather than truncate.\n *\n * Icons stay on one line through the middle of the collapsed rail in both states. For a\n * different collapsed width, set `--m3-rail-collapsed-width` (e.g. the class\n * `[--m3-rail-collapsed-width:80px]`) rather than a `w-*` class; M3's widths are 96px\n * (Expressive) and 80px (baseline).\n *\n * @example\n * <NavigationRail aria-label=\"Main\" header={({ toggle }) => <IconButton icon={<MenuIcon />} aria-label=\"Menu\" onPress={toggle} />}>\n *   <NavigationRailItem href=\"/inbox\" icon={<InboxIcon />} selected>Inbox</NavigationRailItem>\n * </NavigationRail>\n */\nexport function NavigationRail({\n  expanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  modal = false,\n  hideOnCollapse = false,\n  header,\n  itemAlignment = 'top',\n  divider = false,\n  indicatorMotion = 'expand',\n  children,\n  classNames,\n  className,\n  style,\n  ...rest\n}: NavigationRailProps) {\n  const [isExpanded, setExpanded] = useControlledState(expanded, defaultExpanded, onExpandedChange);\n  const toggle = () => setExpanded(!isExpanded);\n  const inlineExpanded = isExpanded && !modal;\n  const rootRef = useRef<HTMLElement>(null);\n  const lastIndicatorRef = useRef<HTMLElement>(null);\n  const slide = indicatorMotion === 'slide';\n  const width = useExpandedWidth(rootRef, inlineExpanded, children);\n  const widening = useWidening(rootRef, inlineExpanded);\n  // Labels fade in at their new place once the rail has changed mode (not on first render).\n  const [mode, setMode] = useState(inlineExpanded);\n  const [modeChanged, setModeChanged] = useState(false);\n  const captureItems = useRailItemMorph(rootRef, mode);\n  if (mode !== inlineExpanded) {\n    // The DOM still shows the old layout: note where each item's icon is.\n    captureItems();\n    setMode(inlineExpanded);\n    setModeChanged(true);\n  }\n\n  const styles = navigationRailStyles({\n    expanded: inlineExpanded,\n    itemAlignment,\n    divider,\n    slidingIndicator: slide && inlineExpanded,\n  });\n  const headerContent =\n    typeof header === 'function' ? header({ expanded: isExpanded, toggle }) : header;\n  const showInline = !(modal && hideOnCollapse);\n\n  return (\n    <>\n      {showInline && (\n        <nav\n          {...rest}\n          ref={rootRef}\n          style={\n            {\n              '--m3-rail-width': inlineExpanded ? `${width}px` : `var(${COLLAPSED_WIDTH_VAR})`,\n              ...style,\n            } as CSSProperties\n          }\n          data-tokens={mergeDataTokens('md-comp-nav-rail', rest)}\n          data-expanded={inlineExpanded || undefined}\n          data-widening={widening || undefined}\n          className={styles.root({ class: cn(classNames?.root, className) })}\n        >\n          <div className={styles.body({ class: classNames?.body })}>\n            {headerContent != null && (\n              <div data-rail-header=\"\" className={styles.header({ class: classNames?.header })}>\n                <DensityZeroButtons>{headerContent}</DensityZeroButtons>\n              </div>\n            )}\n            <div\n              data-item-alignment={itemAlignment}\n              onKeyDown={onItemArrowKeys('vertical')}\n              className={styles.items({ class: classNames?.items })}\n            >\n              <RailContext\n                value={{\n                  layout: inlineExpanded ? 'rail-start' : 'rail-top',\n                  enterLabel: modeChanged,\n                  ...(slide && inlineExpanded && { lastIndicatorRef }),\n                }}\n              >\n                {children}\n              </RailContext>\n            </div>\n          </div>\n        </nav>\n      )}\n      {modal && (\n        <ModalRail\n          open={isExpanded}\n          onClose={() => setExpanded(false)}\n          header={headerContent}\n          naming={rest as Naming}\n          slide={hideOnCollapse}\n          itemAlignment={itemAlignment}\n          slidingIndicator={slide}\n          railRef={rootRef}\n          classNames={classNames}\n        >\n          {children}\n        </ModalRail>\n      )}\n    </>\n  );\n}\n\n/** The sheet's exit transitions; whichever runs marks the end of its exit. */\nconst SHEET_EXIT_PROPERTIES = ['width', 'translate', 'opacity'] as const;\n\nfunction ModalRail({\n  open,\n  onClose,\n  header,\n  naming,\n  slide,\n  itemAlignment,\n  slidingIndicator,\n  railRef,\n  classNames,\n  children,\n}: {\n  open: boolean;\n  onClose: () => void;\n  header: ReactNode;\n  naming: Naming;\n  slide: boolean;\n  itemAlignment: 'top' | 'center';\n  /** `indicatorMotion=\"slide\"`: the pill slides between items. */\n  slidingIndicator: boolean;\n  railRef: RefObject<HTMLElement | null>;\n  classNames?: NavigationRailClassNames;\n  children: ReactNode;\n}) {\n  const state = useOverlayTriggerState({\n    isOpen: open,\n    onOpenChange: (isOpen) => {\n      if (!isOpen) onClose();\n    },\n  });\n  // Presence ends with the sheet's own motion, not the scrim's shorter fade, which removed\n  // the sheet mid-spring inside the collapsed rail (2026-10-15). Width when it shrinks back,\n  // translate when it slides out, opacity under reduced motion.\n  const { isPresent, isExiting, exitProps } = usePresence(open, SHEET_EXIT_PROPERTIES);\n  if (!isPresent) return null;\n  return (\n    <Overlay exiting={isExiting}>\n      <ModalSheet\n        state={state}\n        isExiting={isExiting}\n        exitProps={exitProps}\n        header={header}\n        naming={naming}\n        slide={slide}\n        itemAlignment={itemAlignment}\n        slidingIndicator={slidingIndicator}\n        railRef={railRef}\n        classNames={classNames}\n      >\n        {children}\n      </ModalSheet>\n    </Overlay>\n  );\n}\n\nfunction ModalSheet({\n  state,\n  isExiting,\n  exitProps,\n  header,\n  naming,\n  slide,\n  itemAlignment,\n  slidingIndicator,\n  railRef,\n  classNames,\n  children,\n}: {\n  state: OverlayTriggerState;\n  isExiting: boolean;\n  exitProps: ReturnType<typeof usePresence>['exitProps'];\n  header: ReactNode;\n  naming: Naming;\n  slide: boolean;\n  itemAlignment: 'top' | 'center';\n  /** `indicatorMotion=\"slide\"`: the pill slides between items. */\n  slidingIndicator: boolean;\n  railRef: RefObject<HTMLElement | null>;\n  classNames?: NavigationRailClassNames;\n  children: ReactNode;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const lastIndicatorRef = useRef<HTMLElement>(null);\n  const { modalProps, underlayProps } = useModalOverlay({ isDismissable: !isExiting }, state, ref);\n  const { dialogProps } = useDialog(naming, ref);\n  // The sheet is portalled out of the rail, so it can't inherit a collapsed width set on the\n  // rail itself. Copy it before the width is measured and the sheet first paints.\n  useLayoutEffect(() => {\n    const rail = railRef.current;\n    if (!rail || !ref.current) return;\n    ref.current.style.setProperty(\n      COLLAPSED_WIDTH_VAR,\n      getComputedStyle(rail).getPropertyValue(COLLAPSED_WIDTH_VAR),\n    );\n  }, [railRef]);\n  // M3: initial focus lands on the first interactive item, whether it's the menu button,\n  // the FAB or the first destination (useDialog would otherwise focus the sheet itself).\n  useLayoutEffect(() => {\n    const first = ref.current?.querySelector<HTMLElement>(FOCUSABLE);\n    first?.focus();\n  }, []);\n  const width = useExpandedWidth(ref, true, children);\n  const widening = useWidening(ref, true);\n  const styles = navigationRailStyles({\n    expanded: true,\n    sheetEntry: slide ? 'slide' : 'grow',\n    itemAlignment,\n    slidingIndicator,\n  });\n  const exiting = isExiting || undefined;\n  return (\n    <>\n      <div\n        {...underlayProps}\n        aria-hidden=\"true\"\n        data-exiting={exiting}\n        className={styles.scrim({ class: classNames?.scrim })}\n      />\n      <div\n        {...mergeProps(modalProps, dialogProps, exitProps)}\n        ref={ref}\n        data-tokens=\"md-comp-nav-rail\"\n        data-modal=\"\"\n        data-exiting={exiting}\n        data-widening={widening || undefined}\n        style={{ '--m3-rail-width': `${width}px` } as CSSProperties}\n        className={styles.sheet({ class: classNames?.sheet })}\n      >\n        {header != null && (\n          <div data-rail-header=\"\" className={styles.header({ class: classNames?.header })}>\n            <DensityZeroButtons>{header}</DensityZeroButtons>\n          </div>\n        )}\n        <nav\n          aria-label={'aria-label' in naming ? naming['aria-label'] : undefined}\n          aria-labelledby={'aria-labelledby' in naming ? naming['aria-labelledby'] : undefined}\n          data-item-alignment={itemAlignment}\n          onKeyDown={onItemArrowKeys('vertical')}\n          className={styles.items({ class: classNames?.items })}\n        >\n          <RailContext\n            value={{\n              layout: 'rail-start',\n              enterLabel: false,\n              ...(slidingIndicator && { lastIndicatorRef }),\n              onNavigate: state.close,\n            }}\n          >\n            {children}\n          </RailContext>\n        </nav>\n      </div>\n    </>\n  );\n}\n\nexport type NavigationRailItemProps = NavItemProps;\n\n/** A destination in a {@link NavigationRail}: a link (`href`) or a button. */\nexport function NavigationRailItem({ onPress, ...props }: NavigationRailItemProps) {\n  const rail = useContext(RailContext);\n  if (!rail) throw new Error('NavigationRailItem must be rendered inside a NavigationRail');\n  return (\n    <NavItem\n      {...(props as NavItemProps)}\n      layout={rail.layout}\n      enterLabel={rail.enterLabel}\n      {...(rail.lastIndicatorRef && { lastIndicatorRef: rail.lastIndicatorRef })}\n      onPress={(event) => {\n        onPress?.(event);\n        rail.onNavigate?.();\n      }}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/components/navigation/nav-item-styles.d.ts

@@ -0,0 +1,190 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/navigation/nav-item-styles.d.ts
+/** Variant definitions for navigation items; extend them to add variants. */
+export declare const navItemStyles: import("tailwind-variants").TVReturnType<{
+  layout: {
+    'rail-top': {
+      root: string;
+      pill: string;
+      indicator: string;
+      icon: string;
+      label: string[];
+    };
+    'rail-start': {
+      root: string;
+      pill: string;
+      indicator: string[];
+      content: string;
+      icon: string;
+      label: string[];
+    };
+    'bar-top': {
+      root: string;
+      pill: string;
+      indicator: string;
+      icon: string;
+      label: string[];
+    };
+    'bar-start': {
+      root: string;
+      pill: string;
+      indicator: string[];
+      content: string;
+      icon: string[];
+      badgedBox: string[];
+      label: string[];
+    };
+  };
+  /** Labels that move when the rail changes width fade in at their new place. */
+  enterLabel: {
+    true: {
+      label: string;
+    };
+    false: {};
+  };
+  /** The pill slides between items (Motion moves it) instead of expanding in place. */
+  slide: {
+    true: {
+      indicator: string;
+      content: string;
+    };
+    false: {};
+  };
+}, {
+  root: string[];
+  pill: string[];
+  indicator: string[];
+  stateLayer: string[];
+  content: string;
+  icon: string[];
+  iconFace: string[];
+  iconStack: string;
+  badge: string;
+  badgedBox: string;
+  label: string[];
+}, undefined, {
+  layout: {
+    'rail-top': {
+      root: string;
+      pill: string;
+      indicator: string;
+      icon: string;
+      label: string[];
+    };
+    'rail-start': {
+      root: string;
+      pill: string;
+      indicator: string[];
+      content: string;
+      icon: string;
+      label: string[];
+    };
+    'bar-top': {
+      root: string;
+      pill: string;
+      indicator: string;
+      icon: string;
+      label: string[];
+    };
+    'bar-start': {
+      root: string;
+      pill: string;
+      indicator: string[];
+      content: string;
+      icon: string[];
+      badgedBox: string[];
+      label: string[];
+    };
+  };
+  /** Labels that move when the rail changes width fade in at their new place. */
+  enterLabel: {
+    true: {
+      label: string;
+    };
+    false: {};
+  };
+  /** The pill slides between items (Motion moves it) instead of expanding in place. */
+  slide: {
+    true: {
+      indicator: string;
+      content: string;
+    };
+    false: {};
+  };
+}, {
+  root: string[];
+  pill: string[];
+  indicator: string[];
+  stateLayer: string[];
+  content: string;
+  icon: string[];
+  iconFace: string[];
+  iconStack: string;
+  badge: string;
+  badgedBox: string;
+  label: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  layout: {
+    'rail-top': {
+      root: string;
+      pill: string;
+      indicator: string;
+      icon: string;
+      label: string[];
+    };
+    'rail-start': {
+      root: string;
+      pill: string;
+      indicator: string[];
+      content: string;
+      icon: string;
+      label: string[];
+    };
+    'bar-top': {
+      root: string;
+      pill: string;
+      indicator: string;
+      icon: string;
+      label: string[];
+    };
+    'bar-start': {
+      root: string;
+      pill: string;
+      indicator: string[];
+      content: string;
+      icon: string[];
+      badgedBox: string[];
+      label: string[];
+    };
+  };
+  /** Labels that move when the rail changes width fade in at their new place. */
+  enterLabel: {
+    true: {
+      label: string;
+    };
+    false: {};
+  };
+  /** The pill slides between items (Motion moves it) instead of expanding in place. */
+  slide: {
+    true: {
+      indicator: string;
+      content: string;
+    };
+    false: {};
+  };
+}, {
+  root: string[];
+  pill: string[];
+  indicator: string[];
+  stateLayer: string[];
+  content: string;
+  icon: string[];
+  iconFace: string[];
+  iconStack: string;
+  badge: string;
+  badgedBox: string;
+  label: string[];
+}>>;
+export type NavItemLayout = NonNullable<VariantProps<typeof navItemStyles>['layout']>;
+//#endregion
+//# sourceMappingURL=nav-item-styles.d.ts.map

package/dist/components/navigation/nav-item-styles.js

@@ -0,0 +1,123 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/navigation/nav-item-styles.ts
+/** Variant definitions for navigation items; extend them to add variants. */
+const navItemStyles = tv({
+	slots: {
+		root: [
+			"group/nav grid min-w-0 cursor-pointer justify-items-center outline-none select-none",
+			"font-plain text-on-surface-variant",
+			"data-disabled:cursor-default"
+		],
+		pill: ["grid rounded-full outline-offset-(--md-sys-focus-indicator-offset) outline-secondary", "group-data-focus-visible/nav:outline-(length:--md-sys-focus-indicator-thickness) group-data-focus-visible/nav:outline-solid"],
+		indicator: [
+			"col-start-1 row-start-1 rounded-full opacity-0",
+			"group-data-current/nav:opacity-100 group-data-current/nav:[clip-path:inset(0_0_round_9999px)]",
+			"forced-colors:bg-[Highlight] forced-colors:forced-color-adjust-none",
+			"[transition-property:clip-path,opacity]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]",
+			"motion-reduce:[transition-property:opacity]",
+			"motion-reduce:[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]",
+			"motion-reduce:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]"
+		],
+		stateLayer: [
+			"col-start-1 row-start-1 rounded-full state-layer",
+			"[--m3-state-layer-color:var(--md-sys-color-on-secondary-container)]",
+			"group-data-hovered/nav:[--m3-state-opacity:var(--md-sys-state-hover-state-layer-opacity)]",
+			"group-data-focus-visible/nav:[--m3-state-opacity:var(--md-sys-state-focus-state-layer-opacity)]"
+		],
+		content: "relative col-start-1 row-start-1 flex min-w-0 items-center justify-center",
+		icon: [
+			"inline-grid size-[24px] shrink-0 place-items-center [&>svg]:size-full",
+			"group-data-disabled/nav:text-on-surface-variant/38",
+			"forced-colors:group-data-current/nav:text-[HighlightText] forced-colors:group-data-current/nav:forced-color-adjust-none",
+			"transition-colors duration-(--md-sys-motion-spring-effects-default-duration) ease-(--md-sys-motion-spring-effects-default-easing)"
+		],
+		iconFace: ["col-start-1 row-start-1 size-full opacity-0 data-shown:opacity-100 [&>svg]:size-full", "[transition-property:opacity] duration-(--md-sys-motion-spring-effects-default-duration) ease-(--md-sys-motion-spring-effects-default-easing)"],
+		iconStack: "inline-grid size-[24px] place-items-center [&>svg]:size-full",
+		badge: "inline-flex shrink-0 -ms-[4px]",
+		badgedBox: "forced-colors:[&>span:last-child]:forced-color-adjust-auto",
+		label: ["min-w-0 overflow-hidden text-ellipsis text-balance hyphens-auto wrap-normal group-data-disabled/nav:text-on-surface-variant/38", "[transition-property:color,opacity] duration-(--md-sys-motion-spring-effects-default-duration) ease-(--md-sys-motion-spring-effects-default-easing)"]
+	},
+	variants: {
+		layout: {
+			"rail-top": {
+				root: "min-h-[64px] w-(--m3-rail-collapsed-width) content-start",
+				pill: "h-[32px] w-[56px]",
+				indicator: "[clip-path:inset(0_50%_round_9999px)] bg-[var(--_md-comp-nav-rail-item-active-indicator-color)]",
+				icon: "text-[color:var(--_md-comp-nav-rail-item-inactive-icon-color)] group-data-current/nav:text-[color:var(--_md-comp-nav-rail-item-active-icon-color)]",
+				label: [
+					"mt-[4px] max-w-full text-center text-label-medium",
+					"text-[color:var(--_md-comp-nav-rail-item-inactive-label-text-color)]",
+					"group-data-current/nav:text-label-medium-emphasized group-data-current/nav:text-[color:var(--_md-comp-nav-rail-item-active-label-text-color)]"
+				]
+			},
+			"rail-start": {
+				root: "min-h-[48px] w-full justify-items-start px-(--m3-rail-item-inset)",
+				pill: "min-h-[56px] max-w-full",
+				indicator: ["[clip-path:inset(0_calc(100%_-_28px)_0_28px_round_9999px)] rtl:[clip-path:inset(0_28px_0_calc(100%_-_28px)_round_9999px)]", "bg-[var(--_md-comp-nav-rail-item-active-indicator-color)]"],
+				content: "justify-start gap-[8px] ps-[16px] pe-[16px] py-[8px]",
+				icon: "text-[color:var(--_md-comp-nav-rail-item-inactive-icon-color)] group-data-current/nav:text-[color:var(--_md-comp-nav-rail-item-active-icon-color)]",
+				label: [
+					"forced-colors:group-data-current/nav:text-[HighlightText] forced-colors:group-data-current/nav:forced-color-adjust-none",
+					"text-label-large text-[color:var(--_md-comp-nav-rail-item-inactive-label-text-color)]",
+					"group-data-current/nav:text-label-large-emphasized group-data-current/nav:text-[color:var(--_md-comp-nav-rail-item-active-label-text-color)]"
+				]
+			},
+			"bar-top": {
+				root: "self-stretch content-start py-[6px]",
+				pill: "h-[32px] w-[56px]",
+				indicator: "[clip-path:inset(0_50%_round_9999px)] bg-[var(--_md-comp-nav-bar-item-active-indicator-color)]",
+				icon: "text-[color:var(--_md-comp-nav-bar-item-inactive-icon-color)] group-data-current/nav:text-[color:var(--_md-comp-nav-bar-item-active-icon-color)]",
+				label: [
+					"mt-[4px] max-w-full px-[4px] text-center text-label-medium",
+					"text-[color:var(--_md-comp-nav-bar-item-inactive-label-text-color)]",
+					"group-data-current/nav:text-label-medium-emphasized group-data-current/nav:text-[color:var(--_md-comp-nav-bar-item-active-label-text-color)]"
+				]
+			},
+			"bar-start": {
+				root: "self-stretch content-center px-[4px]",
+				pill: "min-h-[40px] max-w-full",
+				indicator: ["[clip-path:inset(0_calc(100%_-_28px)_0_28px_round_9999px)] rtl:[clip-path:inset(0_28px_0_calc(100%_-_28px)_round_9999px)]", "bg-[var(--_md-comp-nav-bar-item-active-indicator-color)]"],
+				content: "gap-[4px] ps-[16px] pe-[16px] py-[4px]",
+				icon: ["text-[color:var(--_md-comp-nav-bar-item-inactive-icon-color)] group-data-current/nav:text-[color:var(--_md-comp-nav-bar-item-active-icon-color)]", "has-[[data-size=large]]:w-auto has-[[data-size=large]]:min-w-[24px] has-[[data-size=large]]:justify-items-start"],
+				badgedBox: [
+					"has-[[data-size=large]]:grid-cols-[auto]",
+					"[&:has([data-size=large])>span:first-child]:w-[24px] [&:has([data-size=large])>span:first-child]:justify-self-start",
+					"[&>span:last-child:has([data-size=large])]:w-max [&>span:last-child:has([data-size=large])]:ms-[12px]"
+				],
+				label: [
+					"forced-colors:group-data-current/nav:text-[HighlightText] forced-colors:group-data-current/nav:forced-color-adjust-none",
+					"text-label-medium text-[color:var(--_md-comp-nav-bar-item-inactive-label-text-color)]",
+					"group-data-current/nav:text-label-medium-emphasized group-data-current/nav:text-[color:var(--_md-comp-nav-bar-item-active-label-text-color)]"
+				]
+			}
+		},
+		/** Labels that move when the rail changes width fade in at their new place. */
+		enterLabel: {
+			true: { label: "starting:opacity-0" },
+			false: {}
+		},
+		/** The pill slides between items (Motion moves it) instead of expanding in place. */
+		slide: {
+			true: {
+				indicator: "[transition-property:none] motion-reduce:[transition-property:opacity]",
+				content: "z-[1]"
+			},
+			false: {}
+		}
+	},
+	compoundVariants: [{
+		layout: ["rail-top", "rail-start"],
+		class: { root: "[transition-property:min-height] [transition-duration:var(--md-sys-motion-spring-spatial-default-duration)] [transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]" }
+	}],
+	defaultVariants: {
+		layout: "bar-top",
+		enterLabel: false,
+		slide: false
+	}
+});
+//#endregion
+export { navItemStyles };
+
+//# sourceMappingURL=nav-item-styles.js.map