@mortenbrudvik/waveui 0.14.0 → 0.15.0

package/dist/components/navigation/Nav.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Nav.cjs","names":["slotRendersContent","renderSlot","cn","focusRingInset","disabledStyles","_Fragment","materialiseSlotContent","useNavContext","React","NavRovingContext","useId","containsValue","navCategoryClassNames","ChevronDownIcon","NavCategoryValueContext","markNavPart","navItemClassNames","navSubItemClassNames","NavRoot","NavSectionHeader","NavDivider","NavAppItem","NavAppItemStatic","require_runtime","require_cn","require_dev","require_slot","require_classNames","require_useId","require_styles","require_icons","require_Nav_context","require_Nav_parts","require_Nav_root","react","react_jsx_runtime","iconClasses","renderIcon","icon","className","itemClasses","subItemClasses","rowClasses","rowHoverClasses","actionsClasses","categoryButtonClasses","opensElsewhere","event","link","target","renderNavEntry","rest","props","isSelected","context","value","isLink","href","rovingProps","roving","hasActions","actions","itemId","generatedId","idProps","handleClick","disabled","onClick","content","withIcon","stable","children","entryClassName","classes","listItemClassName","actionsGroup","buttonRest","NavCategory","currentValue","listId","isOpen","openCategories","holdsCurrentChild","holdsShownCurrent","categoryStore","containsCurrent","currentCategory","listRef","buttonLabel","label","items","parts","isText","part","toggleCategory","NavItem","NavSubItem","Nav"],"sources":["../../../src/components/navigation/Nav.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport {\n  navCategoryClassNames,\n  navItemClassNames,\n  navSubItemClassNames,\n} from '../../lib/classNames';\nimport type { Slot } from '../../lib/types';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport { warnDeprecated } from '../../lib/dev';\nimport { ChevronDownIcon } from '../../lib/icons';\nimport { disabledStyles, focusRingInset } from '../../lib/styles';\nimport { useId } from '../../hooks/useId';\nimport {\n  NavCategoryValueContext,\n  NavRovingContext,\n  containsValue,\n  markNavPart,\n  useNavContext,\n  useNavListChildCheck,\n  useNavValue,\n  useRecordCategory,\n  type NavContextValue,\n  type NavRovingContextValue,\n  type NoAnchorOnlyAttributes,\n} from './Nav.context';\nimport { NavAppItem, NavAppItemStatic, NavDivider, NavSectionHeader } from './Nav.parts';\nimport { NavRoot } from './Nav.root';\n\n/*\n * The Nav compound: the item types, styles and rendering of Nav.Item and Nav.SubItem, Nav.Category,\n * the `Object.assign` with its JSDoc, the flat names and the type re-exports. Nothing imports this\n * module but the barrel: the root (`Nav.root.tsx`) and the contexts (`Nav.context.ts`) recognise\n * the parts by the markers set next to each `displayName` below; the structural parts live in\n * `Nav.parts.tsx`.\n */\n\nexport type { NavProps } from './Nav.root';\nexport type {\n  NavSectionHeaderProps,\n  NavDividerProps,\n  NavAppItemOwnProps,\n  NavAppItemAnchorProps,\n  NavAppItemButtonProps,\n  NavAppItemProps,\n  NavAppItemDynamicProps,\n  NavAppItemStaticProps,\n} from './Nav.parts';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** Properties for the NavCategory sub-component. */\nexport interface NavCategoryProps extends React.HTMLAttributes<HTMLLIElement> {\n  /**\n   * Value identifying this category (used by `openCategories`), unique among the categories of\n   * the Nav (a duplicate warns in development).\n   */\n  value: string;\n  /**\n   * Label of the category's toggle button (any content). Without it, the text children are used\n   * as the label — deprecated: pass the label here and only the sub-items as children.\n   */\n  label?: React.ReactNode;\n  /**\n   * Icon displayed before the category label. Rendered with `aria-hidden=\"true\"`. A falsy icon\n   * (`''`, `0`) or a list of nothing renders no icon box.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * The category's sub-items (`Nav.SubItem`), and `Nav.SectionHeader` and `Nav.Divider`, rendered\n   * in its list while it is open.\n   */\n  children?: React.ReactNode;\n  /** Ref to the category's `<li>` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\n/**\n * The props of Nav.Item that every branch shares ({@link NavItemAnchorProps},\n * {@link NavItemButtonProps}, {@link NavItemDynamicProps}).\n */\nexport interface NavItemOwnProps {\n  /**\n   * Value identifying this nav item, unique among the items and sub-items of the Nav (a duplicate\n   * warns in development).\n   */\n  value: string;\n  /**\n   * Icon displayed before the item label. Rendered with `aria-hidden=\"true\"`. A falsy icon (`''`,\n   * `0`) or a list of nothing renders no icon box.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Whether the item is disabled: a native `disabled` button, or an `aria-disabled` link without\n   * `href`. Activating a disabled item never selects it; a disabled item whose value is the\n   * current `value` still shows as current (`aria-current=\"page\"` and the selected look), because\n   * the current value belongs to the app.\n   */\n  disabled?: boolean;\n  /** Label content. */\n  children?: React.ReactNode;\n  /**\n   * Controls beside the item in its row (Fluent's SplitNavItem): a ToggleButton that pins the\n   * page, a MenuButton with more commands, each with its own name (a Tooltip with\n   * `relationship=\"label\"` names an icon-only one). They render after the item's link or button,\n   * never inside it, in a group named by the item; each is a Tab stop after the item, and a click\n   * or key on one never selects the item. They are drawn while the row is hovered or has focus,\n   * while one of them is pressed or has its popup open, and always in forced colours and on touch\n   * screens; otherwise they are transparent and still focusable. They stay enabled when the item\n   * is `disabled`. With actions, the selected background and indicator are drawn on the row (the\n   * item's list item, `.wave-nav-item__list-item`), so a `className` on the item no longer covers\n   * them. Content that renders nothing renders no group. Fluent's `actionButton`, `toggleButton`\n   * and `menuButton` slots and their tooltips are your own controls here.\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * Nav.Item rendered as a link (`href` given): anchor attributes, and handlers typed on\n * `HTMLAnchorElement`. 0.4 typed every item's handlers on `HTMLButtonElement`, so with a string\n * `href` an unannotated 0.4 handler that reads a button-only member (such as\n * `e.currentTarget.form`) no longer compiles; a handler already typed as\n * `React.MouseEventHandler<HTMLButtonElement>` still does (React handler types are bivariant).\n */\nexport interface NavItemAnchorProps\n  extends\n    NavItemOwnProps,\n    Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof NavItemOwnProps> {\n  /**\n   * URL to navigate to; renders an `<a>`. Required in this branch, so `href` discriminates the\n   * union and handlers without `href` are typed as button handlers.\n   */\n  href: string;\n  /** Ref to the `<a>` element. */\n  ref?: React.Ref<HTMLAnchorElement>;\n}\n\n/** Nav.Item rendered as a button (no `href`): button attributes (a `rel` is not rendered). */\nexport interface NavItemButtonProps\n  extends\n    NavItemOwnProps,\n    NoAnchorOnlyAttributes,\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof NavItemOwnProps> {\n  /** Button items have no `href`. */\n  href?: undefined;\n  /** Ref to the `<button>` element. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Properties for the NavItem sub-component: link props with `href`, button props without.\n *\n * A union type (0.4 had an interface): an interface cannot extend it, so extend one branch\n * (`interface X extends NavItemButtonProps`) or intersect (`type X = NavItemProps & { … }`).\n * `React.ComponentProps<typeof Nav.Item>` resolves to the last overload,\n * {@link NavItemDynamicProps}.\n */\nexport type NavItemProps = NavItemAnchorProps | NavItemButtonProps;\n\n/**\n * Nav.Item with an `href` known only at run time (`string | undefined`): a link when it is a\n * string, a button otherwise. Resolved after the button and link signatures.\n *\n * Only the attributes both elements share are accepted (no `target`, `download`, `type`, `form`,\n * …), and handlers receive events of either element (`HTMLAnchorElement | HTMLButtonElement`).\n * 0.4 typed them as button events (`HTMLAttributes<HTMLButtonElement>`), so an unannotated 0.4\n * handler that reads a button-only member (such as `e.currentTarget.form`) no longer compiles here;\n * narrow `e.currentTarget` first. (A string `href` types handlers on `HTMLAnchorElement`, see\n * {@link NavItemAnchorProps}; no `href` keeps `HTMLButtonElement`.)\n */\nexport interface NavItemDynamicProps\n  extends\n    NavItemOwnProps,\n    Omit<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, keyof NavItemOwnProps> {\n  /** URL to navigate to; renders an `<a>` when defined, a `<button>` otherwise. */\n  href?: string;\n  /** Ref to the rendered `<a>` or `<button>` element. */\n  ref?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;\n}\n\n/**\n * The props of Nav.SubItem that every branch shares: those of {@link NavItemOwnProps} without\n * `icon`.\n */\nexport type NavSubItemOwnProps = Omit<NavItemOwnProps, 'icon'>;\n\n/**\n * Nav.SubItem rendered as a link (`href` given): anchor attributes, and handlers typed on\n * `HTMLAnchorElement` (0.4: `HTMLButtonElement`); see {@link NavItemAnchorProps}.\n */\nexport interface NavSubItemAnchorProps\n  extends\n    NavSubItemOwnProps,\n    Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof NavSubItemOwnProps> {\n  /**\n   * URL to navigate to; renders an `<a>`. Required in this branch, so `href` discriminates the\n   * union and handlers without `href` are typed as button handlers.\n   */\n  href: string;\n  /** Ref to the `<a>` element. */\n  ref?: React.Ref<HTMLAnchorElement>;\n}\n\n/** Nav.SubItem rendered as a button (no `href`): button attributes (a `rel` is not rendered). */\nexport interface NavSubItemButtonProps\n  extends\n    NavSubItemOwnProps,\n    NoAnchorOnlyAttributes,\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof NavSubItemOwnProps> {\n  /** Button sub-items have no `href`. */\n  href?: undefined;\n  /** Ref to the `<button>` element. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Properties for the NavSubItem sub-component: link props with `href`, button props without.\n * A union type like {@link NavItemProps} (extend a branch or intersect; `React.ComponentProps`\n * resolves to {@link NavSubItemDynamicProps}).\n */\nexport type NavSubItemProps = NavSubItemAnchorProps | NavSubItemButtonProps;\n\n/**\n * Nav.SubItem with an `href` known only at run time (`string | undefined`): a link when it is a\n * string, a button otherwise. Only the attributes both elements share are accepted, and handlers\n * receive events of either element (0.4 typed them as button events); see\n * {@link NavItemDynamicProps}.\n */\nexport interface NavSubItemDynamicProps\n  extends\n    NavSubItemOwnProps,\n    Omit<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, keyof NavSubItemOwnProps> {\n  /** URL to navigate to; renders an `<a>` when defined, a `<button>` otherwise. */\n  href?: string;\n  /** Ref to the rendered `<a>` or `<button>` element. */\n  ref?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;\n}\n\n/** The props both entry kinds share at runtime (the union narrowed by `href`). */\ntype NavEntryProps = NavItemOwnProps &\n  Omit<React.AllHTMLAttributes<HTMLElement>, keyof NavItemOwnProps | 'ref'> & {\n    ref?: React.Ref<HTMLElement>;\n  };\n\n// ---------------------------------------------------------------------------\n// Styles\n// ---------------------------------------------------------------------------\n\nconst iconClasses = 'flex h-5 w-5 shrink-0 items-center justify-center';\n\n/**\n * The `icon` slot of Nav.Item and Nav.Category, or `null` when it renders nothing. A falsy icon\n * (`icon={name && <Icon />}` with `name` '' or a count of 0) is no icon, as in 0.4 and as in\n * Avatar, and so is a collection whose items render nothing, so no empty 20px box is rendered\n * before the label. The check does not consume a generator: renderSlot still renders its items.\n */\nfunction renderIcon(\n  icon: Slot<'span'> | undefined,\n  className: string | undefined,\n): React.ReactElement | null {\n  return icon && slotRendersContent(icon)\n    ? renderSlot(icon, 'span', cn(className, iconClasses), { 'aria-hidden': true })\n    : null;\n}\n\nconst itemClasses = {\n  base: cn(\n    'flex w-full items-center gap-2 px-4 py-2 text-body-1 text-start no-underline transition-colors motion-reduce:transition-none',\n    focusRingInset,\n    disabledStyles,\n  ),\n  selected: 'bg-subtle-selected text-primary font-semibold border-s-2 border-s-primary',\n  idle: 'text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover',\n  // With actions, the selected background and indicator move to the row (D121).\n  selectedInRow: 'text-primary font-semibold',\n  rowSelected: 'bg-subtle-selected border-s-2 border-s-primary',\n};\n\nconst subItemClasses = {\n  base: cn(\n    'flex w-full items-center ps-11 pe-4 py-1.5 text-body-1 text-start no-underline transition-colors motion-reduce:transition-none',\n    focusRingInset,\n    disabledStyles,\n  ),\n  selected: 'text-primary font-semibold',\n  idle: 'text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover',\n  // Sub-items have no selected background: a sub-item row gets only the hover.\n  selectedInRow: 'text-primary font-semibold',\n  rowSelected: undefined,\n};\n\n/** The classes an entry's link or button and its row share. */\ninterface NavEntryClasses {\n  base: string;\n  selected: string;\n  idle: string;\n  selectedInRow: string;\n  rowSelected: string | undefined;\n}\n\n/**\n * The row of an entry with actions (D121): the list item lays out the link or button and the\n * actions side by side and carries the selected look, or the hover of an enabled entry. A list\n * item cannot be disabled, so its hover needs no gate.\n */\nconst rowClasses =\n  'group/nav-row flex items-center transition-colors motion-reduce:transition-none';\nconst rowHoverClasses = 'hover:bg-subtle-hover';\n\n/**\n * The actions element (D120). Each direct child is transparent until the row is hovered or has\n * focus inside it, and is always drawn in forced colours and on devices without hover; a child\n * that is or holds a pressed toggle or an expanded trigger stays drawn (the first pair covers an\n * action wrapped in a Tooltip's span, the second a bare one). Opacity keeps every action\n * focusable, so Shift+Tab and a focus return reach it. No motion.\n */\nconst actionsClasses = cn(\n  'flex shrink-0 items-center gap-1 pe-2',\n  '*:opacity-0 group-hover/nav-row:*:opacity-100 group-focus-within/nav-row:*:opacity-100',\n  'forced-colors:*:opacity-100 [@media(hover:none)]:*:opacity-100',\n  '*:has-[[aria-pressed=true]]:opacity-100 *:has-[[aria-expanded=true]]:opacity-100',\n  '[&>[aria-pressed=true]]:opacity-100 [&>[aria-expanded=true]]:opacity-100',\n);\n\nconst categoryButtonClasses = cn(\n  'flex w-full items-center gap-2 px-4 py-2 text-body-1 font-semibold text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover transition-colors motion-reduce:transition-none',\n  // A closed category that contains the current page shows the selected look of an item.\n  'data-[contains-current]:bg-subtle-selected data-[contains-current]:text-primary data-[contains-current]:border-s-2 data-[contains-current]:border-s-primary',\n  focusRingInset,\n);\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\n/**\n * Whether a click on a link opens it somewhere other than the current page, checked as routers\n * do: a modifier key (a new tab or window, a download), a mouse button other than the main one, a\n * `target` other than `_self`, or a `download` link. Only when the default is not prevented does\n * the browser actually open it there.\n */\nfunction opensElsewhere(event: React.MouseEvent<HTMLElement>): boolean {\n  if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {\n    return true;\n  }\n  const link = event.currentTarget;\n  const target = link.getAttribute('target');\n  return (!!target && target.toLowerCase() !== '_self') || link.hasAttribute('download');\n}\n\n/** The stable classes of an entry, written literally by Nav.Item and Nav.SubItem. */\ninterface NavEntryClassNames {\n  root: string;\n  listItem: string;\n  actions: string;\n  icon?: string;\n  content?: string;\n}\n\n/**\n * Shared rendering of Nav.Item and Nav.SubItem (link or button). Inside an arrow-key body\n * (`roving` provided) the link or button also carries `data-roving-value={value}`, after the\n * consumer's attributes; in a plain Nav nothing is added. With `actions` that render content, the\n * list item becomes the row (D121) and holds the link or button, then the actions in a group named\n * by it through `generatedId` (unless the consumer gave an `id`), siblings, never nested (D119).\n */\nfunction renderNavEntry(\n  props: NavEntryProps,\n  context: NavContextValue,\n  roving: NavRovingContextValue | null,\n  classes: NavEntryClasses,\n  stable: NavEntryClassNames,\n  withIcon: boolean,\n  generatedId: string,\n): React.ReactElement {\n  const {\n    value,\n    icon,\n    disabled = false,\n    href,\n    className,\n    children,\n    onClick,\n    actions,\n    ref,\n    ...rest\n  } = props;\n  const isSelected = context.value === value;\n  const isLink = href !== undefined;\n  const rovingProps = roving ? { 'data-roving-value': value } : undefined;\n  // No empty group (`actions={cond && <Button />}` with `cond` false); the id is rendered only\n  // while the group points at it, so an item without actions keeps its 0.10 HTML.\n  const hasActions = slotRendersContent(actions);\n  const itemId = rest.id ?? generatedId;\n  const idProps = hasActions ? { id: itemId } : undefined;\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n    onClick?.(event);\n    // A link is still selected when the consumer prevents its default (client-side routing:\n    // `preventDefault()` + `router.push(href)`, whatever the modifier keys: the browser then opens\n    // nothing elsewhere), but not when the browser opens it elsewhere (the current page does not\n    // change); a button honours `preventDefault()` (C-COMPOSE).\n    if (isLink ? !event.defaultPrevented && opensElsewhere(event) : event.defaultPrevented) return;\n    context.select(value);\n  };\n\n  const content = (\n    <>\n      {withIcon && renderIcon(icon, stable.icon)}\n      {withIcon ? (\n        <span className={cn(stable.content, 'flex-1 text-start')}>{children}</span>\n      ) : (\n        children\n      )}\n    </>\n  );\n\n  const entryClassName = cn(\n    stable.root,\n    classes.base,\n    isSelected ? (hasActions ? classes.selectedInRow : classes.selected) : classes.idle,\n    hasActions && 'min-w-0 flex-1',\n    className,\n  );\n\n  const listItemClassName = hasActions\n    ? cn(\n        stable.listItem,\n        rowClasses,\n        isSelected && classes.rowSelected ? classes.rowSelected : !disabled && rowHoverClasses,\n      )\n    : stable.listItem;\n\n  const actionsGroup = hasActions ? (\n    <span\n      role=\"group\"\n      aria-labelledby={itemId}\n      data-wave-nav-actions=\"\"\n      className={cn(stable.actions, actionsClasses)}\n    >\n      {materialiseSlotContent(actions)}\n    </span>\n  ) : null;\n\n  if (isLink) {\n    return (\n      <li className={listItemClassName}>\n        <a\n          {...(rest as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n          {...idProps}\n          {...rovingProps}\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          href={disabled ? undefined : href}\n          role={disabled ? 'link' : rest.role}\n          aria-disabled={disabled ? true : rest['aria-disabled']}\n          aria-current={isSelected ? 'page' : undefined}\n          onClick={handleClick}\n          className={entryClassName}\n        >\n          {content}\n        </a>\n        {actionsGroup}\n      </li>\n    );\n  }\n\n  // `rel` only belongs on a link: a button item drops it (React types it on every element).\n  const { rel, ...buttonRest } = rest;\n  return (\n    <li className={listItemClassName}>\n      <button\n        type=\"button\"\n        {...(buttonRest as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n        {...idProps}\n        {...rovingProps}\n        ref={ref as React.Ref<HTMLButtonElement>}\n        disabled={disabled}\n        aria-current={isSelected ? 'page' : undefined}\n        onClick={handleClick}\n        className={entryClassName}\n      >\n        {content}\n      </button>\n      {actionsGroup}\n    </li>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Nav.Category\n// ---------------------------------------------------------------------------\n\n/**\n * A collapsible group of sub-items. Its toggle button shows `label` and reports `aria-expanded`\n * (and `aria-controls` while open); the sub-items render in a nested list while it is open.\n * Open state lives on `Nav` (`openCategories`/`defaultOpenCategories`).\n *\n * A closed category that contains the current item marks its toggle button with\n * `aria-current=\"true\"` (the button is not the page's link, so not `\"page\"`),\n * `data-contains-current` and the selected look of `Nav.Item`. It contains the current item when\n * a `Nav.SubItem` with the current value is among its children (through Fragments and wrapper\n * elements, also in the server HTML), when the current sub-item was last shown in it (and has not\n * moved among another category's children since), or when it is the Nav's `currentCategory`. An\n * open category is not marked: its sub-item shows the current page.\n *\n * Also exported as `NavCategory` (import the flat name from React Server Components).\n */\nconst NavCategory = ({\n  value,\n  label,\n  icon,\n  className,\n  children,\n  ref,\n  ...rest\n}: NavCategoryProps) => {\n  const context = useNavContext('Nav.Category');\n  const roving = React.useContext(NavRovingContext);\n  const {\n    value: currentValue,\n    openCategories,\n    toggleCategory,\n    currentCategory,\n    categoryStore,\n  } = context;\n  useNavValue(context, 'category', value);\n  const listId = useId('wave-nav-category');\n  const isOpen = openCategories.includes(value);\n\n  // The current sub-item is among the children of this closed category (also on the server).\n  const holdsCurrentChild = !isOpen && currentValue !== '' && containsValue(children, currentValue);\n  // The current sub-item was last shown in this category (none on the server).\n  const holdsShownCurrent = React.useSyncExternalStore(\n    categoryStore.subscribe,\n    () => currentValue !== '' && categoryStore.get(currentValue) === value,\n    () => false,\n  );\n  // Children that hold the current sub-item make this the category the Nav remembers for it, so a\n  // category it was shown in before it moved here is no longer marked. The entry is forgotten when\n  // they stop holding it (an open category records through its mounted sub-item instead).\n  React.useLayoutEffect(() => {\n    if (!holdsCurrentChild) return;\n    categoryStore.record(currentValue, value);\n    return () => categoryStore.forget(currentValue, value);\n  }, [categoryStore, holdsCurrentChild, currentValue, value]);\n  const containsCurrent =\n    !isOpen && (currentCategory === value || holdsShownCurrent || holdsCurrentChild);\n  // Inside an arrow-key body: whether this is a closed category that holds the current page (the\n  // body's first Tab stop), before paint; nothing is reported in a plain Nav.\n  React.useLayoutEffect(() => {\n    if (!roving) return;\n    roving.reportCurrentCategory(value, containsCurrent);\n    return () => roving.reportCurrentCategory(value, false);\n  }, [roving, value, containsCurrent]);\n  // Development only: every child of the open list is an <li> (`Nav.Category:list-child`).\n  const listRef = React.useRef<HTMLUListElement>(null);\n  useNavListChildCheck(listRef, 'Nav.Category', 'sub-items');\n\n  let buttonLabel: React.ReactNode = label;\n  let items: React.ReactNode = children;\n  if (label === undefined) {\n    // Deprecated 0.4 path: the text children are the label, the other children the sub-items.\n    warnDeprecated(\n      'Nav.Category',\n      'text children as the label',\n      'label',\n      'Pass the category label in `label` and only the sub-items as children.',\n    );\n    const parts = React.Children.toArray(children);\n    const isText = (part: unknown) => typeof part === 'string' || typeof part === 'number';\n    buttonLabel = parts.filter(isText).join('');\n    items = parts.filter((part) => !isText(part));\n  }\n\n  return (\n    <li ref={ref} {...rest} className={cn(navCategoryClassNames.root, className)}>\n      <button\n        type=\"button\"\n        aria-expanded={isOpen}\n        aria-controls={isOpen ? listId : undefined}\n        aria-current={containsCurrent ? true : undefined}\n        data-contains-current={containsCurrent ? '' : undefined}\n        data-roving-value={roving ? `wave-nav-category:${value}` : undefined}\n        onClick={() => toggleCategory(value)}\n        className={cn(navCategoryClassNames.button, categoryButtonClasses)}\n      >\n        {renderIcon(icon, navCategoryClassNames.icon)}\n        <span className={cn(navCategoryClassNames.label, 'flex-1 text-start')}>{buttonLabel}</span>\n        <ChevronDownIcon\n          className={cn(\n            navCategoryClassNames.expandIcon,\n            'shrink-0 transition-transform motion-reduce:transition-none',\n            isOpen && 'rotate-180',\n          )}\n        />\n      </button>\n      {isOpen && (\n        <NavCategoryValueContext.Provider value={value}>\n          <ul\n            ref={listRef}\n            id={listId}\n            className={cn(navCategoryClassNames.list, 'm-0 list-none p-0')}\n          >\n            {items}\n          </ul>\n        </NavCategoryValueContext.Provider>\n      )}\n    </li>\n  );\n};\nNavCategory.displayName = 'NavCategory';\nmarkNavPart(NavCategory, 'category');\n\n// ---------------------------------------------------------------------------\n// Nav.Item / Nav.SubItem\n// ---------------------------------------------------------------------------\n\n/**\n * A top-level navigation entry: a link when `href` is given (anchor props), a button otherwise\n * (button props). Clicking selects it (`aria-current=\"page\"`); activating a disabled entry never\n * selects it (a disabled entry whose value is the current value still shows as current).\n *\n * A click that opens a link somewhere other than the current page selects nothing (the consumer's\n * `onClick` still runs, and the browser opens the link): Ctrl/Cmd/Shift/Alt-click, a mouse button\n * other than the main one, a `target` other than `_self`, or a `download` link. When the consumer's\n * `onClick` calls `preventDefault()` (client-side routing), the browser opens nothing, so the item\n * is selected whatever the keys, button or `target`.\n *\n * `actions` puts your own controls (a pin toggle, a menu button) beside the item in its row, in a\n * group named by the item; they never select it.\n *\n * Typed by overloads, resolved in order: without `href` (button props, button events), with a\n * string `href` (anchor props, anchor events), then an `href` that may be `undefined` at run time\n * ({@link NavItemDynamicProps}: events of either element).\n *\n * Also exported as `NavItem` (import the flat name from React Server Components).\n */\nfunction NavItem(props: NavItemButtonProps): React.ReactElement;\nfunction NavItem(props: NavItemAnchorProps): React.ReactElement;\nfunction NavItem(props: NavItemDynamicProps): React.ReactElement;\nfunction NavItem(props: NavItemProps | NavItemDynamicProps): React.ReactElement {\n  const context = useNavContext('Nav.Item');\n  useNavValue(context, 'item', props.value);\n  useRecordCategory(context, props.value);\n  const roving = React.useContext(NavRovingContext);\n  // Called always, rendered only while the item's actions render (D119).\n  const generatedId = useId('wave-nav-item');\n  return renderNavEntry(\n    props as NavEntryProps,\n    context,\n    roving,\n    itemClasses,\n    {\n      root: navItemClassNames.root,\n      listItem: navItemClassNames.listItem,\n      actions: navItemClassNames.actions,\n      icon: navItemClassNames.icon,\n      content: navItemClassNames.content,\n    },\n    true,\n    generatedId,\n  );\n}\nNavItem.displayName = 'NavItem';\nmarkNavPart(NavItem, 'entry');\n\n/**\n * An indented entry inside a `Nav.Category`: a link when `href` is given, a button otherwise.\n * Selected like `Nav.Item` (a click that the browser opens somewhere else selects nothing; one\n * whose default your `onClick` prevents is selected), and typed by overloads like `Nav.Item`\n * (button, link, then {@link NavSubItemDynamicProps}). Takes `actions` like `Nav.Item`.\n *\n * Also exported as `NavSubItem` (import the flat name from React Server Components).\n */\nfunction NavSubItem(props: NavSubItemButtonProps): React.ReactElement;\nfunction NavSubItem(props: NavSubItemAnchorProps): React.ReactElement;\nfunction NavSubItem(props: NavSubItemDynamicProps): React.ReactElement;\nfunction NavSubItem(props: NavSubItemProps | NavSubItemDynamicProps): React.ReactElement {\n  const context = useNavContext('Nav.SubItem');\n  useNavValue(context, 'item', props.value);\n  useRecordCategory(context, props.value);\n  const roving = React.useContext(NavRovingContext);\n  // Called always, rendered only while the sub-item's actions render (D119).\n  const generatedId = useId('wave-nav-item');\n  return renderNavEntry(\n    props as NavEntryProps,\n    context,\n    roving,\n    subItemClasses,\n    {\n      root: navSubItemClassNames.root,\n      listItem: navSubItemClassNames.listItem,\n      actions: navSubItemClassNames.actions,\n    },\n    false,\n    generatedId,\n  );\n}\nNavSubItem.displayName = 'NavSubItem';\nmarkNavPart(NavSubItem, 'entry');\n\n/**\n * A vertical side navigation (`<nav>` landmark, default name \"Navigation\") with items, links and\n * collapsible categories.\n *\n * - **Selection**: `value`/`defaultValue`/`onValueChange` (`onValueChange` fires only when the\n *   value changes). The deprecated `selectedValue`/`defaultSelectedValue`/`onNavItemSelect` still\n *   work; `onNavItemSelect` keeps firing on every activation, re-selection included. A click that\n *   opens a link in another tab or window (or downloads it) selects nothing, unless the item's\n *   `onClick` prevents the default (client-side routing: then nothing opens elsewhere).\n * - **Categories**: `openCategories`/`defaultOpenCategories`/`onOpenCategoriesChange`. Without\n *   `defaultOpenCategories`, the categories containing the selected item (`value` or\n *   `defaultValue`) start open. A closed category that contains the selected item marks its toggle\n *   (`aria-current=\"true\"`, `data-contains-current`, the selected look); pass `currentCategory`\n *   for sub-items your own component renders inside a closed category.\n * - **Values** are unique: among the items and sub-items, and among the categories (a duplicate\n *   warns in development).\n * - **Structure**: every child of the Nav, and of a category, is a part or your own `<li>`; a\n *   development warning names anything else (a `<div>`, text, the wrapper of a Tooltip around an\n *   item). `Nav.SectionHeader` is a heading between groups of items (`<h3>` unless\n *   `headingLevel`, which stands for the `as` of Fluent's NavSectionHeader), and `Nav.Divider` a\n *   line between groups, hidden from assistive technology (Fluent's NavDivider is a separator).\n * - **App identity**: `Nav.AppItem` shows the app's name and logo at the top, as a link with\n *   `href` or a button; it is never selected. `Nav.AppItemStatic` shows them as plain text.\n * - **Item actions**: `actions` on `Nav.Item` and `Nav.SubItem` (Fluent's SplitNavItem) puts your\n *   own controls beside the item, in a group named by it; each is a Tab stop after the item, and\n *   none selects it. They are drawn while the row is hovered or has focus, while one is pressed or\n *   has its menu open, and always on touch screens and in forced colours. With actions, a selected\n *   item's background and indicator are drawn on its row (`.wave-nav-item__list-item`).\n *\n * Sub-components are also exported under flat names (`NavCategory`, `NavItem`, `NavSubItem`,\n * `NavSectionHeader`, `NavDivider`, `NavAppItem`, `NavAppItemStatic`): React Server Components\n * import those, because dotted access (`Nav.Item`) needs a client file.\n */\nexport const Nav = /* @__PURE__ */ Object.assign(NavRoot, {\n  Category: NavCategory,\n  Item: NavItem,\n  SubItem: NavSubItem,\n  SectionHeader: NavSectionHeader,\n  Divider: NavDivider,\n  AppItem: NavAppItem,\n  AppItemStatic: NavAppItemStatic,\n});\n\nexport {\n  NavCategory,\n  NavItem,\n  NavSubItem,\n  NavSectionHeader,\n  NavDivider,\n  NavAppItem,\n  NavAppItemStatic,\n};\n"],"mappings":"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"}
+{"version":3,"file":"Nav.cjs","names":["slotRendersContent","renderSlot","cn","focusRingInset","disabledStyles","_Fragment","navActionsReveal","materialiseSlotContent","useNavContext","React","NavRovingContext","useId","containsValue","useCollapsePresence","unwrapButtonGlyph","useMotionClasses","expandIconMotion","expandIconRecipe","ChevronDownIcon","navCategoryClassNames","NavCategoryValueContext","markNavPart","useMotionPreference","navItemClassNames","navSubItemClassNames","NavRoot","NavSectionHeader","NavDivider","NavAppItem","NavAppItemStatic","require_runtime","require_cn","require_dev","require_slot","require_classNames","require_useId","require_styles","require_Button_slots","require_icons","require_motion","require_useMotion","require_useCollapsePresence","require_Nav_context","require_Nav_parts","require_Nav_root","react","react_jsx_runtime","iconClasses","renderIcon","icon","className","itemClasses","subItemClasses","rowClasses","rowHoverClasses","actionsClasses","categoryButtonClasses","opensElsewhere","event","link","target","renderNavEntry","rest","props","isSelected","context","value","isLink","href","rovingProps","roving","hasActions","actions","itemId","generatedId","idProps","handleClick","disabled","onClick","content","withIcon","stable","children","entryClassName","classes","listItemClassName","actionsGroup","motionPreference","buttonRest","NavCategory","expandIconMotion$1","currentValue","listId","isOpen","openCategories","holdsCurrentChild","holdsShownCurrent","categoryStore","containsCurrent","currentCategory","listRef","buttonRef","isListMounted","collapseRef","collapsePresenceProps","collapseClassName","expandGlyph","expandIconButton","expandIcon","expandIconMotionClassName","expandIconElement","buttonLabel","label","items","parts","isText","part","toggleCategory","NavItem","NavSubItem","Nav"],"sources":["../../../src/components/navigation/Nav.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport {\n  navCategoryClassNames,\n  navItemClassNames,\n  navSubItemClassNames,\n} from '../../lib/classNames';\nimport type { MotionPreference, MotionSlot, Slot } from '../../lib/types';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { ChevronDownIcon } from '../../lib/icons';\n// Aliased: `expandIconMotion` is also Nav.Category's prop.\nimport {\n  expandIconMotion as expandIconRecipe,\n  navActionsRevealMotion as navActionsReveal,\n} from '../../lib/motion';\nimport { disabledStyles, focusRingInset } from '../../lib/styles';\nimport { useCollapsePresence } from '../../hooks/useCollapsePresence';\nimport { useId } from '../../hooks/useId';\nimport { useMotionClasses, useMotionPreference } from '../../hooks/useMotion';\nimport { unwrapButtonGlyph } from '../button/Button.slots';\nimport {\n  NavCategoryValueContext,\n  NavRovingContext,\n  containsValue,\n  markNavPart,\n  useNavContext,\n  useNavListChildCheck,\n  useNavValue,\n  useRecordCategory,\n  type NavContextValue,\n  type NavRovingContextValue,\n  type NoAnchorOnlyAttributes,\n} from './Nav.context';\nimport { NavAppItem, NavAppItemStatic, NavDivider, NavSectionHeader } from './Nav.parts';\nimport { NavRoot } from './Nav.root';\n\n/*\n * The Nav compound: the item types, styles and rendering of Nav.Item and Nav.SubItem, Nav.Category,\n * the `Object.assign` with its JSDoc, the flat names and the type re-exports. Nothing imports this\n * module but the barrel: the root (`Nav.root.tsx`) and the contexts (`Nav.context.ts`) recognise\n * the parts by the markers set next to each `displayName` below; the structural parts live in\n * `Nav.parts.tsx`.\n */\n\nexport type { NavProps } from './Nav.root';\nexport type {\n  NavSectionHeaderProps,\n  NavDividerProps,\n  NavAppItemOwnProps,\n  NavAppItemAnchorProps,\n  NavAppItemButtonProps,\n  NavAppItemProps,\n  NavAppItemDynamicProps,\n  NavAppItemStaticProps,\n} from './Nav.parts';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** Properties for the NavCategory sub-component. */\nexport interface NavCategoryProps extends React.HTMLAttributes<HTMLLIElement> {\n  /**\n   * Value identifying this category (used by `openCategories`), unique among the categories of\n   * the Nav (a duplicate warns in development).\n   */\n  value: string;\n  /**\n   * Label of the category's toggle button (any content). Without it, the text children are used\n   * as the label — deprecated: pass the label here and only the sub-items as children.\n   */\n  label?: React.ReactNode;\n  /**\n   * Icon displayed before the category label. Rendered with `aria-hidden=\"true\"`. A falsy icon\n   * (`''`, `0`) or a list of nothing renders no icon box.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Replaces the expand chevron at the end of the toggle button (decorative, `aria-hidden`).\n   * `null`/`undefined` keep the chevron, which turns while the category is open; `false`, or\n   * anything that renders nothing, hides it (`aria-expanded` still reports the state). Your glyph\n   * renders as given in a span with the expand icon's class and is not turned, so a glyph that\n   * shows the state itself works (a plus or a minus, picked from your `openCategories`). It is\n   * rendered inside the toggle button: a `<button>` or `Button` passed here (or a slot object\n   * whose `as` is one) is not nested (its children become the glyph and its props are dropped,\n   * with a development warning).\n   */\n  expandIcon?: Slot<'span'>;\n  /**\n   * Replaces the motion of the expand icon (Fluent's `NavCategoryItem expandIconMotion`): by\n   * default the chevron's half turn as the category opens and closes is animated over the fast\n   * duration (150 ms) with the easy-ease curve, both ways, and so is any transform of the span\n   * around your own `expandIcon`. The turn itself is not motion: `null` turns the animation off\n   * and the chevron still turns, at once; a class string or `{ className }` replaces it with\n   * plain transition classes and a reduced-motion counterpart (the icon has no presence phases).\n   * A `WaveProvider` with `motion=\"none\"` turns the default off, and a value here still applies\n   * under it.\n   * @default the animated turn described above\n   */\n  expandIconMotion?: MotionSlot | null;\n  /**\n   * Replaces the collapse of the category's list (Fluent's `NavSubItemGroup collapseMotion`), on\n   * the element around its `<ul>`: by default the space the list takes opens from nothing and\n   * closes back to it, with a fade, over the normal duration (200 ms) with the max easy-ease\n   * curve, both ways. `null` turns it off (the list appears and disappears at once); a class\n   * string or `{ className }` replaces it, written as `MotionSlot` describes. A `WaveProvider`\n   * with `motion=\"none\"` turns the default off, and a value here still applies under it.\n   * @default the collapse described above\n   */\n  motion?: MotionSlot | null;\n  /**\n   * The category's sub-items (`Nav.SubItem`), and `Nav.SectionHeader` and `Nav.Divider`, rendered\n   * in its list while it is open (and while the list collapses after a close).\n   */\n  children?: React.ReactNode;\n  /** Ref to the category's `<li>` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\n/**\n * The props of Nav.Item that every branch shares ({@link NavItemAnchorProps},\n * {@link NavItemButtonProps}, {@link NavItemDynamicProps}).\n */\nexport interface NavItemOwnProps {\n  /**\n   * Value identifying this nav item, unique among the items and sub-items of the Nav (a duplicate\n   * warns in development).\n   */\n  value: string;\n  /**\n   * Icon displayed before the item label. Rendered with `aria-hidden=\"true\"`. A falsy icon (`''`,\n   * `0`) or a list of nothing renders no icon box.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Whether the item is disabled: a native `disabled` button, or an `aria-disabled` link without\n   * `href`. Activating a disabled item never selects it; a disabled item whose value is the\n   * current `value` still shows as current (`aria-current=\"page\"` and the selected look), because\n   * the current value belongs to the app.\n   */\n  disabled?: boolean;\n  /** Label content. */\n  children?: React.ReactNode;\n  /**\n   * Controls beside the item in its row (Fluent's SplitNavItem): a ToggleButton that pins the\n   * page, a MenuButton with more commands, each with its own name (a Tooltip with\n   * `relationship=\"label\"` names an icon-only one). They render after the item's link or button,\n   * never inside it, in a group named by the item; each is a Tab stop after the item, and a click\n   * or key on one never selects the item. They are drawn while the row is hovered or has focus,\n   * while one of them is pressed or has its popup open, and always in forced colours and on touch\n   * screens; otherwise they are transparent and still focusable. They fade in and out over 150 ms\n   * (at once under reduced motion or a `WaveProvider` with `motion=\"none\"`); the fade sets the\n   * transition of each direct child of the group, so a transition of your own on one is replaced.\n   * They stay enabled when the item is `disabled`. With actions, the selected background and\n   * indicator are drawn on the row (the item's list item, `.wave-nav-item__list-item`), so a\n   * `className` on the item no longer covers them. Content that renders nothing renders no group.\n   * Fluent's `actionButton`, `toggleButton` and `menuButton` slots and their tooltips are your own\n   * controls here.\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * Nav.Item rendered as a link (`href` given): anchor attributes, and handlers typed on\n * `HTMLAnchorElement`. 0.4 typed every item's handlers on `HTMLButtonElement`, so with a string\n * `href` an unannotated 0.4 handler that reads a button-only member (such as\n * `e.currentTarget.form`) no longer compiles; a handler already typed as\n * `React.MouseEventHandler<HTMLButtonElement>` still does (React handler types are bivariant).\n */\nexport interface NavItemAnchorProps\n  extends\n    NavItemOwnProps,\n    Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof NavItemOwnProps> {\n  /**\n   * URL to navigate to; renders an `<a>`. Required in this branch, so `href` discriminates the\n   * union and handlers without `href` are typed as button handlers.\n   */\n  href: string;\n  /** Ref to the `<a>` element. */\n  ref?: React.Ref<HTMLAnchorElement>;\n}\n\n/** Nav.Item rendered as a button (no `href`): button attributes (a `rel` is not rendered). */\nexport interface NavItemButtonProps\n  extends\n    NavItemOwnProps,\n    NoAnchorOnlyAttributes,\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof NavItemOwnProps> {\n  /** Button items have no `href`. */\n  href?: undefined;\n  /** Ref to the `<button>` element. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Properties for the NavItem sub-component: link props with `href`, button props without.\n *\n * A union type (0.4 had an interface): an interface cannot extend it, so extend one branch\n * (`interface X extends NavItemButtonProps`) or intersect (`type X = NavItemProps & { … }`).\n * `React.ComponentProps<typeof Nav.Item>` resolves to the last overload,\n * {@link NavItemDynamicProps}.\n */\nexport type NavItemProps = NavItemAnchorProps | NavItemButtonProps;\n\n/**\n * Nav.Item with an `href` known only at run time (`string | undefined`): a link when it is a\n * string, a button otherwise. Resolved after the button and link signatures.\n *\n * Only the attributes both elements share are accepted (no `target`, `download`, `type`, `form`,\n * …), and handlers receive events of either element (`HTMLAnchorElement | HTMLButtonElement`).\n * 0.4 typed them as button events (`HTMLAttributes<HTMLButtonElement>`), so an unannotated 0.4\n * handler that reads a button-only member (such as `e.currentTarget.form`) no longer compiles here;\n * narrow `e.currentTarget` first. (A string `href` types handlers on `HTMLAnchorElement`, see\n * {@link NavItemAnchorProps}; no `href` keeps `HTMLButtonElement`.)\n */\nexport interface NavItemDynamicProps\n  extends\n    NavItemOwnProps,\n    Omit<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, keyof NavItemOwnProps> {\n  /** URL to navigate to; renders an `<a>` when defined, a `<button>` otherwise. */\n  href?: string;\n  /** Ref to the rendered `<a>` or `<button>` element. */\n  ref?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;\n}\n\n/**\n * The props of Nav.SubItem that every branch shares: those of {@link NavItemOwnProps} without\n * `icon`.\n */\nexport type NavSubItemOwnProps = Omit<NavItemOwnProps, 'icon'>;\n\n/**\n * Nav.SubItem rendered as a link (`href` given): anchor attributes, and handlers typed on\n * `HTMLAnchorElement` (0.4: `HTMLButtonElement`); see {@link NavItemAnchorProps}.\n */\nexport interface NavSubItemAnchorProps\n  extends\n    NavSubItemOwnProps,\n    Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof NavSubItemOwnProps> {\n  /**\n   * URL to navigate to; renders an `<a>`. Required in this branch, so `href` discriminates the\n   * union and handlers without `href` are typed as button handlers.\n   */\n  href: string;\n  /** Ref to the `<a>` element. */\n  ref?: React.Ref<HTMLAnchorElement>;\n}\n\n/** Nav.SubItem rendered as a button (no `href`): button attributes (a `rel` is not rendered). */\nexport interface NavSubItemButtonProps\n  extends\n    NavSubItemOwnProps,\n    NoAnchorOnlyAttributes,\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof NavSubItemOwnProps> {\n  /** Button sub-items have no `href`. */\n  href?: undefined;\n  /** Ref to the `<button>` element. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Properties for the NavSubItem sub-component: link props with `href`, button props without.\n * A union type like {@link NavItemProps} (extend a branch or intersect; `React.ComponentProps`\n * resolves to {@link NavSubItemDynamicProps}).\n */\nexport type NavSubItemProps = NavSubItemAnchorProps | NavSubItemButtonProps;\n\n/**\n * Nav.SubItem with an `href` known only at run time (`string | undefined`): a link when it is a\n * string, a button otherwise. Only the attributes both elements share are accepted, and handlers\n * receive events of either element (0.4 typed them as button events); see\n * {@link NavItemDynamicProps}.\n */\nexport interface NavSubItemDynamicProps\n  extends\n    NavSubItemOwnProps,\n    Omit<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, keyof NavSubItemOwnProps> {\n  /** URL to navigate to; renders an `<a>` when defined, a `<button>` otherwise. */\n  href?: string;\n  /** Ref to the rendered `<a>` or `<button>` element. */\n  ref?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;\n}\n\n/** The props both entry kinds share at runtime (the union narrowed by `href`). */\ntype NavEntryProps = NavItemOwnProps &\n  Omit<React.AllHTMLAttributes<HTMLElement>, keyof NavItemOwnProps | 'ref'> & {\n    ref?: React.Ref<HTMLElement>;\n  };\n\n// ---------------------------------------------------------------------------\n// Styles\n// ---------------------------------------------------------------------------\n\nconst iconClasses = 'flex h-5 w-5 shrink-0 items-center justify-center';\n\n/**\n * The `icon` slot of Nav.Item and Nav.Category, or `null` when it renders nothing. A falsy icon\n * (`icon={name && <Icon />}` with `name` '' or a count of 0) is no icon, as in 0.4 and as in\n * Avatar, and so is a collection whose items render nothing, so no empty 20px box is rendered\n * before the label. The check does not consume a generator: renderSlot still renders its items.\n */\nfunction renderIcon(\n  icon: Slot<'span'> | undefined,\n  className: string | undefined,\n): React.ReactElement | null {\n  return icon && slotRendersContent(icon)\n    ? renderSlot(icon, 'span', cn(className, iconClasses), { 'aria-hidden': true })\n    : null;\n}\n\nconst itemClasses = {\n  base: cn(\n    'flex w-full items-center gap-2 px-4 py-2 text-body-1 text-start no-underline transition-colors motion-reduce:transition-none',\n    focusRingInset,\n    disabledStyles,\n  ),\n  selected: 'bg-subtle-selected text-primary font-semibold border-s-2 border-s-primary',\n  idle: 'text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover',\n  // With actions, the selected background and indicator move to the row (D121).\n  selectedInRow: 'text-primary font-semibold',\n  rowSelected: 'bg-subtle-selected border-s-2 border-s-primary',\n};\n\nconst subItemClasses = {\n  base: cn(\n    'flex w-full items-center ps-11 pe-4 py-1.5 text-body-1 text-start no-underline transition-colors motion-reduce:transition-none',\n    focusRingInset,\n    disabledStyles,\n  ),\n  selected: 'text-primary font-semibold',\n  idle: 'text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover',\n  // Sub-items have no selected background: a sub-item row gets only the hover.\n  selectedInRow: 'text-primary font-semibold',\n  rowSelected: undefined,\n};\n\n/** The classes an entry's link or button and its row share. */\ninterface NavEntryClasses {\n  base: string;\n  selected: string;\n  idle: string;\n  selectedInRow: string;\n  rowSelected: string | undefined;\n}\n\n/**\n * The row of an entry with actions (D121): the list item lays out the link or button and the\n * actions side by side and carries the selected look, or the hover of an enabled entry. A list\n * item cannot be disabled, so its hover needs no gate.\n */\nconst rowClasses =\n  'group/nav-row flex items-center transition-colors motion-reduce:transition-none';\nconst rowHoverClasses = 'hover:bg-subtle-hover';\n\n/**\n * The actions element (D120). Each direct child is transparent until the row is hovered or has\n * focus inside it, and is always drawn in forced colours and on devices without hover; a child\n * that is or holds a pressed toggle or an expanded trigger stays drawn (the first pair covers an\n * action wrapped in a Tooltip's span, the second a bare one). Opacity keeps every action\n * focusable, so Shift+Tab and a focus return reach it. The reveal fades: `renderNavEntry` adds\n * the actions' reveal motion of `lib/motion` to these classes unless the provider's motion is\n * `'none'` (it has no slot: it is not a presence motion).\n */\nconst actionsClasses = cn(\n  'flex shrink-0 items-center gap-1 pe-2',\n  '*:opacity-0 group-hover/nav-row:*:opacity-100 group-focus-within/nav-row:*:opacity-100',\n  'forced-colors:*:opacity-100 [@media(hover:none)]:*:opacity-100',\n  '*:has-[[aria-pressed=true]]:opacity-100 *:has-[[aria-expanded=true]]:opacity-100',\n  '[&>[aria-pressed=true]]:opacity-100 [&>[aria-expanded=true]]:opacity-100',\n);\n\nconst categoryButtonClasses = cn(\n  'flex w-full items-center gap-2 px-4 py-2 text-body-1 font-semibold text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover transition-colors motion-reduce:transition-none',\n  // A closed category that contains the current page shows the selected look of an item.\n  'data-[contains-current]:bg-subtle-selected data-[contains-current]:text-primary data-[contains-current]:border-s-2 data-[contains-current]:border-s-primary',\n  focusRingInset,\n);\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\n/**\n * Whether a click on a link opens it somewhere other than the current page, checked as routers\n * do: a modifier key (a new tab or window, a download), a mouse button other than the main one, a\n * `target` other than `_self`, or a `download` link. Only when the default is not prevented does\n * the browser actually open it there.\n */\nfunction opensElsewhere(event: React.MouseEvent<HTMLElement>): boolean {\n  if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {\n    return true;\n  }\n  const link = event.currentTarget;\n  const target = link.getAttribute('target');\n  return (!!target && target.toLowerCase() !== '_self') || link.hasAttribute('download');\n}\n\n/** The stable classes of an entry, written literally by Nav.Item and Nav.SubItem. */\ninterface NavEntryClassNames {\n  root: string;\n  listItem: string;\n  actions: string;\n  icon?: string;\n  content?: string;\n}\n\n/**\n * Shared rendering of Nav.Item and Nav.SubItem (link or button). Inside an arrow-key body\n * (`roving` provided) the link or button also carries `data-roving-value={value}`, after the\n * consumer's attributes; in a plain Nav nothing is added. With `actions` that render content, the\n * list item becomes the row (D121) and holds the link or button, then the actions in a group named\n * by it through `generatedId` (unless the consumer gave an `id`), siblings, never nested (D119);\n * the group's reveal fades unless `motionPreference` is `'none'`.\n */\nfunction renderNavEntry(\n  props: NavEntryProps,\n  context: NavContextValue,\n  roving: NavRovingContextValue | null,\n  classes: NavEntryClasses,\n  stable: NavEntryClassNames,\n  withIcon: boolean,\n  generatedId: string,\n  motionPreference: MotionPreference,\n): React.ReactElement {\n  const {\n    value,\n    icon,\n    disabled = false,\n    href,\n    className,\n    children,\n    onClick,\n    actions,\n    ref,\n    ...rest\n  } = props;\n  const isSelected = context.value === value;\n  const isLink = href !== undefined;\n  const rovingProps = roving ? { 'data-roving-value': value } : undefined;\n  // No empty group (`actions={cond && <Button />}` with `cond` false); the id is rendered only\n  // while the group points at it, so an item without actions keeps its 0.10 HTML.\n  const hasActions = slotRendersContent(actions);\n  const itemId = rest.id ?? generatedId;\n  const idProps = hasActions ? { id: itemId } : undefined;\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n    onClick?.(event);\n    // A link is still selected when the consumer prevents its default (client-side routing:\n    // `preventDefault()` + `router.push(href)`, whatever the modifier keys: the browser then opens\n    // nothing elsewhere), but not when the browser opens it elsewhere (the current page does not\n    // change); a button honours `preventDefault()` (C-COMPOSE).\n    if (isLink ? !event.defaultPrevented && opensElsewhere(event) : event.defaultPrevented) return;\n    context.select(value);\n  };\n\n  const content = (\n    <>\n      {withIcon && renderIcon(icon, stable.icon)}\n      {withIcon ? (\n        <span className={cn(stable.content, 'flex-1 text-start')}>{children}</span>\n      ) : (\n        children\n      )}\n    </>\n  );\n\n  const entryClassName = cn(\n    stable.root,\n    classes.base,\n    isSelected ? (hasActions ? classes.selectedInRow : classes.selected) : classes.idle,\n    hasActions && 'min-w-0 flex-1',\n    className,\n  );\n\n  const listItemClassName = hasActions\n    ? cn(\n        stable.listItem,\n        rowClasses,\n        isSelected && classes.rowSelected ? classes.rowSelected : !disabled && rowHoverClasses,\n      )\n    : stable.listItem;\n\n  const actionsGroup = hasActions ? (\n    <span\n      role=\"group\"\n      aria-labelledby={itemId}\n      data-wave-nav-actions=\"\"\n      className={cn(\n        stable.actions,\n        actionsClasses,\n        motionPreference === 'none' ? undefined : navActionsReveal,\n      )}\n    >\n      {materialiseSlotContent(actions)}\n    </span>\n  ) : null;\n\n  if (isLink) {\n    return (\n      <li className={listItemClassName}>\n        <a\n          {...(rest as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n          {...idProps}\n          {...rovingProps}\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          href={disabled ? undefined : href}\n          role={disabled ? 'link' : rest.role}\n          aria-disabled={disabled ? true : rest['aria-disabled']}\n          aria-current={isSelected ? 'page' : undefined}\n          onClick={handleClick}\n          className={entryClassName}\n        >\n          {content}\n        </a>\n        {actionsGroup}\n      </li>\n    );\n  }\n\n  // `rel` only belongs on a link: a button item drops it (React types it on every element).\n  const { rel, ...buttonRest } = rest;\n  return (\n    <li className={listItemClassName}>\n      <button\n        type=\"button\"\n        {...(buttonRest as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n        {...idProps}\n        {...rovingProps}\n        ref={ref as React.Ref<HTMLButtonElement>}\n        disabled={disabled}\n        aria-current={isSelected ? 'page' : undefined}\n        onClick={handleClick}\n        className={entryClassName}\n      >\n        {content}\n      </button>\n      {actionsGroup}\n    </li>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Nav.Category\n// ---------------------------------------------------------------------------\n\n/**\n * A collapsible group of sub-items. Its toggle button shows `label` and reports `aria-expanded`\n * (and `aria-controls` while open); the sub-items render in a nested list while it is open and\n * while the list collapses after a close. Open state lives on `Nav`\n * (`openCategories`/`defaultOpenCategories`).\n *\n * The list renders as the only child of a collapse element (its stable class\n * `wave-nav-category__collapse`), which opens and closes the list's space (`motion`) and has no\n * box of its own while the category is open, so the list lays out in the category as before. A\n * category open by default appears without motion. After a close the list stays in the document\n * until the collapse ends, `inert` (its items leave the Tab order and an arrow-key body's arrow\n * keys at once), while the toggle button already reports the category closed, without\n * `aria-controls`; opening the category again during the collapse keeps the same list. Focus\n * inside the list when the category closes moves to the toggle button. The expand chevron turns\n * while the category is open (`expandIcon` replaces it, `expandIconMotion` animates its turn).\n *\n * A closed category that contains the current item marks its toggle button with\n * `aria-current=\"true\"` (the button is not the page's link, so not `\"page\"`),\n * `data-contains-current` and the selected look of `Nav.Item`. It contains the current item when\n * a `Nav.SubItem` with the current value is among its children (through Fragments and wrapper\n * elements, also in the server HTML), when the current sub-item was last shown in it (and has not\n * moved among another category's children since), or when it is the Nav's `currentCategory`. An\n * open category is not marked: its sub-item shows the current page.\n *\n * Also exported as `NavCategory` (import the flat name from React Server Components).\n */\nconst NavCategory = ({\n  value,\n  label,\n  icon,\n  expandIcon,\n  expandIconMotion,\n  motion,\n  className,\n  children,\n  ref,\n  ...rest\n}: NavCategoryProps) => {\n  const context = useNavContext('Nav.Category');\n  const roving = React.useContext(NavRovingContext);\n  const {\n    value: currentValue,\n    openCategories,\n    toggleCategory,\n    currentCategory,\n    categoryStore,\n  } = context;\n  useNavValue(context, 'category', value);\n  const listId = useId('wave-nav-category');\n  const isOpen = openCategories.includes(value);\n\n  // The current sub-item is among the children of this closed category (also on the server).\n  const holdsCurrentChild = !isOpen && currentValue !== '' && containsValue(children, currentValue);\n  // The current sub-item was last shown in this category (none on the server).\n  const holdsShownCurrent = React.useSyncExternalStore(\n    categoryStore.subscribe,\n    () => currentValue !== '' && categoryStore.get(currentValue) === value,\n    () => false,\n  );\n  // Children that hold the current sub-item make this the category the Nav remembers for it, so a\n  // category it was shown in before it moved here is no longer marked. The entry is forgotten when\n  // they stop holding it (an open category records through its mounted sub-item instead).\n  React.useLayoutEffect(() => {\n    if (!holdsCurrentChild) return;\n    categoryStore.record(currentValue, value);\n    return () => categoryStore.forget(currentValue, value);\n  }, [categoryStore, holdsCurrentChild, currentValue, value]);\n  const containsCurrent =\n    !isOpen && (currentCategory === value || holdsShownCurrent || holdsCurrentChild);\n  // Inside an arrow-key body: whether this is a closed category that holds the current page (the\n  // body's first Tab stop), before paint; nothing is reported in a plain Nav.\n  React.useLayoutEffect(() => {\n    if (!roving) return;\n    roving.reportCurrentCategory(value, containsCurrent);\n    return () => roving.reportCurrentCategory(value, false);\n  }, [roving, value, containsCurrent]);\n  // Development only: every child of the open list is an <li> (`Nav.Category:list-child`).\n  const listRef = React.useRef<HTMLUListElement>(null);\n  useNavListChildCheck(listRef, 'Nav.Category', 'sub-items');\n\n  // The list renders in a collapse element (the presence element) while the category is open\n  // and, after a close, until that element's motion ends; focus inside the list at the close\n  // moves to the toggle button.\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const {\n    isMounted: isListMounted,\n    wrapperRef: collapseRef,\n    presenceProps: collapsePresenceProps,\n    className: collapseClassName,\n  } = useCollapsePresence(isOpen, {\n    motion,\n    partRef: listRef,\n    getTrigger: () => buttonRef.current,\n  });\n\n  // The optional-indicator slot rule (C-SLOTS): `null`/`undefined` keep the chevron, which turns\n  // while open; `false` or content that renders nothing hides it; a custom glyph is rendered as\n  // given in its span and never turned. `expandIconMotion` animates the transform of either. The\n  // glyph sits inside the toggle button, so a button passed as the glyph is unwrapped (its\n  // children are the glyph, its props are dropped), never nested.\n  const { glyph: expandGlyph, button: expandIconButton } = unwrapButtonGlyph(expandIcon);\n  React.useEffect(() => {\n    if (expandIconButton) {\n      warnOnce(\n        'Nav.Category:expandIcon-button',\n        `Nav.Category: \\`expandIcon\\` received ${expandIconButton}; its children render as the ` +\n          'glyph of the toggle button and its props were dropped (buttons cannot be nested). ' +\n          'Pass icon content instead, e.g. `expandIcon={<MyIcon />}`.',\n      );\n    }\n  }, [expandIconButton]);\n  const expandIconMotionClassName = useMotionClasses(expandIconMotion, expandIconRecipe);\n  let expandIconElement: React.ReactNode = null;\n  if (expandGlyph === undefined || expandGlyph === null) {\n    expandIconElement = (\n      <ChevronDownIcon\n        className={cn(\n          navCategoryClassNames.expandIcon,\n          'shrink-0',\n          expandIconMotionClassName,\n          isOpen && 'rotate-180',\n        )}\n      />\n    );\n  } else if (slotRendersContent(expandGlyph)) {\n    expandIconElement = renderSlot(\n      expandGlyph,\n      'span',\n      cn(navCategoryClassNames.expandIcon, 'inline-flex shrink-0', expandIconMotionClassName),\n      { 'aria-hidden': true },\n    );\n  }\n\n  let buttonLabel: React.ReactNode = label;\n  let items: React.ReactNode = children;\n  if (label === undefined) {\n    // Deprecated 0.4 path: the text children are the label, the other children the sub-items.\n    warnDeprecated(\n      'Nav.Category',\n      'text children as the label',\n      'label',\n      'Pass the category label in `label` and only the sub-items as children.',\n    );\n    const parts = React.Children.toArray(children);\n    const isText = (part: unknown) => typeof part === 'string' || typeof part === 'number';\n    buttonLabel = parts.filter(isText).join('');\n    items = parts.filter((part) => !isText(part));\n  }\n\n  return (\n    <li ref={ref} {...rest} className={cn(navCategoryClassNames.root, className)}>\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        aria-expanded={isOpen}\n        aria-controls={isOpen ? listId : undefined}\n        aria-current={containsCurrent ? true : undefined}\n        data-contains-current={containsCurrent ? '' : undefined}\n        data-roving-value={roving ? `wave-nav-category:${value}` : undefined}\n        onClick={() => toggleCategory(value)}\n        className={cn(navCategoryClassNames.button, categoryButtonClasses)}\n      >\n        {renderIcon(icon, navCategoryClassNames.icon)}\n        <span className={cn(navCategoryClassNames.label, 'flex-1 text-start')}>{buttonLabel}</span>\n        {expandIconElement}\n      </button>\n      {isListMounted && (\n        <NavCategoryValueContext.Provider value={value}>\n          <div\n            ref={collapseRef}\n            {...collapsePresenceProps}\n            className={cn(navCategoryClassNames.collapse, collapseClassName)}\n          >\n            <ul\n              ref={listRef}\n              id={listId}\n              className={cn(navCategoryClassNames.list, 'm-0 list-none p-0')}\n            >\n              {items}\n            </ul>\n          </div>\n        </NavCategoryValueContext.Provider>\n      )}\n    </li>\n  );\n};\nNavCategory.displayName = 'NavCategory';\nmarkNavPart(NavCategory, 'category');\n\n// ---------------------------------------------------------------------------\n// Nav.Item / Nav.SubItem\n// ---------------------------------------------------------------------------\n\n/**\n * A top-level navigation entry: a link when `href` is given (anchor props), a button otherwise\n * (button props). Clicking selects it (`aria-current=\"page\"`); activating a disabled entry never\n * selects it (a disabled entry whose value is the current value still shows as current).\n *\n * A click that opens a link somewhere other than the current page selects nothing (the consumer's\n * `onClick` still runs, and the browser opens the link): Ctrl/Cmd/Shift/Alt-click, a mouse button\n * other than the main one, a `target` other than `_self`, or a `download` link. When the consumer's\n * `onClick` calls `preventDefault()` (client-side routing), the browser opens nothing, so the item\n * is selected whatever the keys, button or `target`.\n *\n * `actions` puts your own controls (a pin toggle, a menu button) beside the item in its row, in a\n * group named by the item; they never select it.\n *\n * Typed by overloads, resolved in order: without `href` (button props, button events), with a\n * string `href` (anchor props, anchor events), then an `href` that may be `undefined` at run time\n * ({@link NavItemDynamicProps}: events of either element).\n *\n * Also exported as `NavItem` (import the flat name from React Server Components).\n */\nfunction NavItem(props: NavItemButtonProps): React.ReactElement;\nfunction NavItem(props: NavItemAnchorProps): React.ReactElement;\nfunction NavItem(props: NavItemDynamicProps): React.ReactElement;\nfunction NavItem(props: NavItemProps | NavItemDynamicProps): React.ReactElement {\n  const context = useNavContext('Nav.Item');\n  useNavValue(context, 'item', props.value);\n  useRecordCategory(context, props.value);\n  const roving = React.useContext(NavRovingContext);\n  // Called always, rendered only while the item's actions render (D119).\n  const generatedId = useId('wave-nav-item');\n  const motionPreference = useMotionPreference();\n  return renderNavEntry(\n    props as NavEntryProps,\n    context,\n    roving,\n    itemClasses,\n    {\n      root: navItemClassNames.root,\n      listItem: navItemClassNames.listItem,\n      actions: navItemClassNames.actions,\n      icon: navItemClassNames.icon,\n      content: navItemClassNames.content,\n    },\n    true,\n    generatedId,\n    motionPreference,\n  );\n}\nNavItem.displayName = 'NavItem';\nmarkNavPart(NavItem, 'entry');\n\n/**\n * An indented entry inside a `Nav.Category`: a link when `href` is given, a button otherwise.\n * Selected like `Nav.Item` (a click that the browser opens somewhere else selects nothing; one\n * whose default your `onClick` prevents is selected), and typed by overloads like `Nav.Item`\n * (button, link, then {@link NavSubItemDynamicProps}). Takes `actions` like `Nav.Item`.\n *\n * Also exported as `NavSubItem` (import the flat name from React Server Components).\n */\nfunction NavSubItem(props: NavSubItemButtonProps): React.ReactElement;\nfunction NavSubItem(props: NavSubItemAnchorProps): React.ReactElement;\nfunction NavSubItem(props: NavSubItemDynamicProps): React.ReactElement;\nfunction NavSubItem(props: NavSubItemProps | NavSubItemDynamicProps): React.ReactElement {\n  const context = useNavContext('Nav.SubItem');\n  useNavValue(context, 'item', props.value);\n  useRecordCategory(context, props.value);\n  const roving = React.useContext(NavRovingContext);\n  // Called always, rendered only while the sub-item's actions render (D119).\n  const generatedId = useId('wave-nav-item');\n  const motionPreference = useMotionPreference();\n  return renderNavEntry(\n    props as NavEntryProps,\n    context,\n    roving,\n    subItemClasses,\n    {\n      root: navSubItemClassNames.root,\n      listItem: navSubItemClassNames.listItem,\n      actions: navSubItemClassNames.actions,\n    },\n    false,\n    generatedId,\n    motionPreference,\n  );\n}\nNavSubItem.displayName = 'NavSubItem';\nmarkNavPart(NavSubItem, 'entry');\n\n/**\n * A vertical side navigation (`<nav>` landmark, default name \"Navigation\") with items, links and\n * collapsible categories.\n *\n * - **Selection**: `value`/`defaultValue`/`onValueChange` (`onValueChange` fires only when the\n *   value changes). The deprecated `selectedValue`/`defaultSelectedValue`/`onNavItemSelect` still\n *   work; `onNavItemSelect` keeps firing on every activation, re-selection included. A click that\n *   opens a link in another tab or window (or downloads it) selects nothing, unless the item's\n *   `onClick` prevents the default (client-side routing: then nothing opens elsewhere).\n * - **Categories**: `openCategories`/`defaultOpenCategories`/`onOpenCategoriesChange`. Without\n *   `defaultOpenCategories`, the categories containing the selected item (`value` or\n *   `defaultValue`) start open. A closed category that contains the selected item marks its toggle\n *   (`aria-current=\"true\"`, `data-contains-current`, the selected look); pass `currentCategory`\n *   for sub-items your own component renders inside a closed category.\n * - **Values** are unique: among the items and sub-items, and among the categories (a duplicate\n *   warns in development).\n * - **Structure**: every child of the Nav, and of a category, is a part or your own `<li>`; a\n *   development warning names anything else (a `<div>`, text, the wrapper of a Tooltip around an\n *   item). `Nav.SectionHeader` is a heading between groups of items (`<h3>` unless\n *   `headingLevel`, which stands for the `as` of Fluent's NavSectionHeader), and `Nav.Divider` a\n *   line between groups, hidden from assistive technology (Fluent's NavDivider is a separator).\n * - **App identity**: `Nav.AppItem` shows the app's name and logo at the top, as a link with\n *   `href` or a button; it is never selected. `Nav.AppItemStatic` shows them as plain text.\n * - **Item actions**: `actions` on `Nav.Item` and `Nav.SubItem` (Fluent's SplitNavItem) puts your\n *   own controls beside the item, in a group named by it; each is a Tab stop after the item, and\n *   none selects it. They fade in while the row is hovered or has focus, while one is pressed or\n *   has its menu open, and are always drawn on touch screens and in forced colours. With actions, a\n *   selected item's background and indicator are drawn on its row (`.wave-nav-item__list-item`).\n * - **Motion**: a category's list opens and closes its space with a short collapse and fade\n *   (`motion` on `Nav.Category`), its chevron's turn is animated (`expandIconMotion`) and item\n *   actions fade in. None of these defaults runs under reduced motion, and a `WaveProvider` with\n *   `motion=\"none\"` turns them off, while a category's own `motion` or `expandIconMotion` value\n *   still applies. Focus inside a list that closes moves to its category's toggle button.\n *\n * Sub-components are also exported under flat names (`NavCategory`, `NavItem`, `NavSubItem`,\n * `NavSectionHeader`, `NavDivider`, `NavAppItem`, `NavAppItemStatic`): React Server Components\n * import those, because dotted access (`Nav.Item`) needs a client file.\n */\nexport const Nav = /* @__PURE__ */ Object.assign(NavRoot, {\n  Category: NavCategory,\n  Item: NavItem,\n  SubItem: NavSubItem,\n  SectionHeader: NavSectionHeader,\n  Divider: NavDivider,\n  AppItem: NavAppItem,\n  AppItemStatic: NavAppItemStatic,\n});\n\nexport {\n  NavCategory,\n  NavItem,\n  NavSubItem,\n  NavSectionHeader,\n  NavDivider,\n  NavAppItem,\n  NavAppItemStatic,\n};\n"],"mappings":"mnBAsSA,IAAM+C,EAAc,oDAQpB,SAASC,EACP,EACA,EAC2B,CAC3B,OAAOC,GAAQjD,EAAAA,mBAAmBiD,CAAI,EAClChD,EAAAA,WAAWgD,EAAM,OAAQ/C,EAAAA,GAAGgD,EAAWH,CAAW,EAAG,CAAE,cAAe,EAAK,CAAC,EAC5E,IACN,CAEA,IAAMI,EAAc,CAClB,KAAMjD,EAAAA,GACJ,+HACAC,EAAAA,eACAC,EAAAA,cACF,EACA,SAAU,4EACV,KAAM,uEAEN,cAAe,6BACf,YAAa,gDACf,EAEMgD,EAAiB,CACrB,KAAMlD,EAAAA,GACJ,iIACAC,EAAAA,eACAC,EAAAA,cACF,EACA,SAAU,6BACV,KAAM,kIAEN,cAAe,6BACf,YAAa,IAAA,EACf,EAgBMiD,EACJ,kFACIC,EAAkB,wBAWlBC,EAAiBrD,EAAAA,GACrB,wCACA,yFACA,iEACA,mFACA,0EACF,EAEMsD,EAAwBtD,EAAAA,GAC5B,0LAEA,8JACAC,EAAAA,cACF,EAYA,SAASsD,EAAe,EAA+C,CACrE,GAAIC,EAAM,SAAW,GAAKA,EAAM,SAAWA,EAAM,SAAWA,EAAM,UAAYA,EAAM,OAClF,MAAO,GAET,IAAMC,EAAOD,EAAM,cACbE,EAASD,EAAK,aAAa,QAAQ,EACzC,MAAQ,CAAC,CAACC,GAAUA,EAAO,YAAY,IAAM,SAAYD,EAAK,aAAa,UAAU,CACvF,CAmBA,SAASE,EACP,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACoB,CACpB,GAAM,CACJ,QACA,OACA,WAAW,GACX,OACA,YACA,WACA,UACA,UACA,MACA,GAAGC,GACDC,EACEC,EAAaC,EAAQ,QAAUC,EAC/BC,EAASC,IAAS,IAAA,GAClBC,EAAcC,EAAS,CAAE,oBAAqBJ,CAAM,EAAI,IAAA,GAGxDK,EAAavE,EAAAA,mBAAmBwE,CAAO,EACvCC,EAASX,EAAK,IAAMY,EACpBC,EAAUJ,EAAa,CAAE,GAAIE,CAAO,EAAI,IAAA,GAExCG,EAAe,GAAyC,CAC5D,GAAIC,EAAU,CACZnB,EAAM,eAAe,EACrB,MACF,CACAoB,IAAUpB,CAAK,EAKX,IAAS,CAACA,EAAM,kBAAoBD,EAAeC,CAAK,EAAIA,EAAM,mBACtEO,EAAQ,OAAOC,CAAK,CACtB,EAEMa,GACJ,EAAAjC,EAAA,KAAA,CAAAzC,EAAAA,SAAA,CAAA,SAAA,CACG2E,GAAYhC,EAAWC,EAAMgC,EAAO,IAAI,EACxCD,GACC,EAAAlC,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW5C,EAAAA,GAAG+E,EAAO,QAAS,mBAAmB,EAAI,UAAe,CAAA,EAE1EC,CAEF,CAAA,CAAA,EAGEC,EAAiBjF,EAAAA,GACrB+E,EAAO,KACPG,EAAQ,KACRpB,EAAcO,EAAaa,EAAQ,cAAgBA,EAAQ,SAAYA,EAAQ,KAC/Eb,GAAc,iBACdrB,CACF,EAEMmC,EAAoBd,EACtBrE,EAAAA,GACE+E,EAAO,SACP5B,EACAW,GAAcoB,EAAQ,YAAcA,EAAQ,YAAc,CAACP,GAAYvB,CACzE,EACA2B,EAAO,SAELK,EAAef,GACnB,EAAAzB,EAAA,IAAA,CAAC,OAAD,CACE,KAAK,QACL,kBAAiB2B,EACjB,wBAAsB,GACtB,UAAWvE,EAAAA,GACT+E,EAAO,QACP1B,EACAgC,IAAqB,OAAS,IAAA,GAAYjF,EAAAA,sBAC5C,EAEC,SAAAC,EAAAA,uBAAuBiE,CAAO,CAC3B,CAAA,EACJ,KAEJ,GAAIL,EACF,OACE,EAAArB,EAAA,KAAA,CAAC,KAAD,CAAI,UAAWuC,EAAf,SAAA,EACE,EAAAvC,EAAA,IAAA,CAAC,IAAD,CACE,GAAKgB,EACL,GAAIa,EACJ,GAAIN,EACC,MACL,KAAMQ,EAAW,IAAA,GAAYT,EAC7B,KAAMS,EAAW,OAASf,EAAK,KAC/B,gBAAee,EAAW,GAAOf,EAAK,iBACtC,eAAcE,EAAa,OAAS,IAAA,GACpC,QAASY,EACT,UAAWO,EAEV,SAAAJ,CACA,CAAA,EACFO,CACC,IAKR,GAAM,CAAE,MAAK,GAAGE,GAAe1B,EAC/B,OACE,EAAAhB,EAAA,KAAA,CAAC,KAAD,CAAI,UAAWuC,EAAf,SAAA,EACE,EAAAvC,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,GAAK0C,EACL,GAAIb,EACJ,GAAIN,EACC,MACK,WACV,eAAcL,EAAa,OAAS,IAAA,GACpC,QAASY,EACT,UAAWO,EAEV,SAAAJ,CACK,CAAA,EACPO,CACC,GAER,CAgCA,IAAMG,GAAe,CACnB,QACA,QACA,OACA,aACA,iBAAAC,EACA,SACA,YACA,WACA,MACA,GAAG5B,KACmB,CACtB,IAAMG,EAAUzD,EAAAA,cAAc,cAAc,EACtC8D,EAAS7D,EAAM,WAAWC,EAAAA,gBAAgB,EAC1C,CACJ,MAAOiF,EACP,iBACA,iBACA,kBACA,iBACE1B,EACJvB,EAAA,YAAYuB,EAAS,WAAYC,CAAK,EACtC,IAAM0B,EAASjF,EAAAA,MAAM,mBAAmB,EAClCkF,EAASC,EAAe,SAAS5B,CAAK,EAGtC6B,EAAoB,CAACF,GAAUF,IAAiB,IAAM/E,EAAAA,cAAcsE,EAAUS,CAAY,EAE1FK,EAAoBvF,EAAM,qBAC9BwF,EAAc,cACRN,IAAiB,IAAMM,EAAc,IAAIN,CAAY,IAAMzB,MAC3D,EACR,EAIArB,EAAM,oBAAsB,CAC1B,GAAKkD,EAEL,OADAE,EAAc,OAAON,EAAczB,CAAK,MAC3B+B,EAAc,OAAON,EAAczB,CAAK,CACvD,EAAG,CAAC+B,EAAeF,EAAmBJ,EAAczB,CAAK,CAAC,EAC1D,IAAMgC,EACJ,CAACL,IAAWM,IAAoBjC,GAAS8B,GAAqBD,GAGhElD,EAAM,oBAAsB,CAC1B,GAAKyB,EAEL,OADAA,EAAO,sBAAsBJ,EAAOgC,CAAe,MACtC5B,EAAO,sBAAsBJ,EAAO,EAAK,CACxD,EAAG,CAACI,EAAQJ,EAAOgC,CAAe,CAAC,EAEnC,IAAME,EAAU3F,EAAM,OAAyB,IAAI,EACnDiC,EAAA,qBAAqB0D,EAAS,eAAgB,WAAW,EAKzD,IAAMC,EAAY5F,EAAM,OAA0B,IAAI,EAChD,CACJ,UAAW6F,EACX,WAAYC,EACZ,cAAeC,EACf,UAAWC,GACT5F,EAAAA,oBAAoBgF,EAAQ,CAC9B,SACA,QAASO,EACT,eAAkBC,EAAU,OAC9B,CAAC,EAOK,CAAE,MAAOK,EAAa,OAAQC,GAAqB7F,EAAAA,kBAAkB8F,CAAU,EACrF/D,EAAM,cAAgB,CAChB8D,GACF3E,EAAA,SACE,iCACA,yCAAyC2E,EAAiB,4KAG5D,CAEJ,EAAG,CAACA,CAAgB,CAAC,EACrB,IAAME,EAA4B9F,EAAAA,iBAAiBC,EAAkBC,EAAAA,gBAAgB,EACjF6F,EAAqC,KACrCJ,GAA6C,KAC/C,GACE,EAAA5D,EAAA,IAAA,CAAC5B,EAAAA,gBAAD,CACE,UAAWhB,EAAAA,GACTiB,EAAAA,sBAAsB,WACtB,WACA0F,EACAhB,GAAU,YACZ,CACD,CAAA,EAEM7F,EAAAA,mBAAmB0G,CAAW,IACvC,EAAoBzG,EAAAA,WAClByG,EACA,OACAxG,EAAAA,GAAGiB,EAAAA,sBAAsB,WAAY,uBAAwB0F,CAAyB,EACtF,CAAE,cAAe,EAAK,CACxB,GAGF,IAAIE,EAA+BC,EAC/BC,EAAyB/B,EAC7B,GAAI8B,IAAU,IAAA,GAAW,CAEvBhF,EAAA,eACE,eACA,6BACA,QACA,wEACF,EACA,IAAMkF,EAAQzG,EAAM,SAAS,QAAQyE,CAAQ,EACvCiC,EAAU,GAAkB,OAAOC,GAAS,UAAY,OAAOA,GAAS,SAC9E,EAAcF,EAAM,OAAOC,CAAM,CAAC,CAAC,KAAK,EAAE,EAC1C,EAAQD,EAAM,OAAQ,GAAS,CAACC,EAAOC,CAAI,CAAC,CAC9C,CAEA,OACE,EAAAtE,EAAA,KAAA,CAAC,KAAD,CAAS,MAAK,GAAIgB,EAAM,UAAW5D,EAAAA,GAAGiB,EAAAA,sBAAsB,KAAM+B,CAAS,EAA3E,SAAA,EACE,EAAAJ,EAAA,KAAA,CAAC,SAAD,CACE,IAAKuD,EACL,KAAK,SACL,gBAAeR,EACf,gBAAeA,EAASD,EAAS,IAAA,GACjC,eAAcM,EAAkB,GAAO,IAAA,GACvC,wBAAuBA,EAAkB,GAAK,IAAA,GAC9C,oBAAmB5B,EAAS,qBAAqBJ,IAAU,IAAA,GAC3D,YAAemD,EAAenD,CAAK,EACnC,UAAWhE,EAAAA,GAAGiB,EAAAA,sBAAsB,OAAQqC,CAAqB,EATnE,SAAA,CAWGR,EAAWC,EAAM9B,EAAAA,sBAAsB,IAAI,GAC5C,EAAA2B,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW5C,EAAAA,GAAGiB,EAAAA,sBAAsB,MAAO,mBAAmB,EAAI,SAAA4F,CAAkB,CAAA,EACzFD,CACK,CACP,CAAA,EAAAR,IACC,EAAAxD,EAAA,IAAA,CAAC1B,EAAAA,wBAAwB,SAAzB,CAAyC,QACvC,UAAA,EAAA0B,EAAA,IAAA,CAAC,MAAD,CACE,IAAKyD,EACL,GAAIC,EACJ,UAAWtG,EAAAA,GAAGiB,EAAAA,sBAAsB,SAAUsF,CAAiB,EAE/D,UAAA,EAAA3D,EAAA,IAAA,CAAC,KAAD,CACE,IAAKsD,EACL,GAAIR,EACJ,UAAW1F,EAAAA,GAAGiB,EAAAA,sBAAsB,KAAM,mBAAmB,EAE5D,SAAA8F,CACC,CAAA,CACD,CAAA,CAC2B,CAAA,CAElC,GAER,EACA,EAAY,YAAc,cAC1B5F,EAAAA,YAAYoE,EAAa,UAAU,EA6BnC,SAAS6B,EAAQ,EAA+D,CAC9E,IAAMrD,EAAUzD,EAAAA,cAAc,UAAU,EACxCkC,EAAA,YAAYuB,EAAS,OAAQF,EAAM,KAAK,EACxCrB,EAAA,kBAAkBuB,EAASF,EAAM,KAAK,EACtC,IAAMO,EAAS7D,EAAM,WAAWC,EAAAA,gBAAgB,EAE1CgE,EAAc/D,EAAAA,MAAM,eAAe,EACnC4E,EAAmBjE,EAAAA,oBAAoB,EAC7C,OAAOuC,EACLE,EACAE,EACAK,EACAnB,EACA,CACE,KAAM5B,EAAAA,kBAAkB,KACxB,SAAUA,EAAAA,kBAAkB,SAC5B,QAASA,EAAAA,kBAAkB,QAC3B,KAAMA,EAAAA,kBAAkB,KACxB,QAASA,EAAAA,kBAAkB,OAC7B,EACA,GACAmD,EACAa,CACF,CACF,CACA,EAAQ,YAAc,UACtBlE,EAAAA,YAAYiG,EAAS,OAAO,EAa5B,SAASC,EAAW,EAAqE,CACvF,IAAMtD,EAAUzD,EAAAA,cAAc,aAAa,EAC3CkC,EAAA,YAAYuB,EAAS,OAAQF,EAAM,KAAK,EACxCrB,EAAA,kBAAkBuB,EAASF,EAAM,KAAK,EACtC,IAAMO,EAAS7D,EAAM,WAAWC,EAAAA,gBAAgB,EAE1CgE,EAAc/D,EAAAA,MAAM,eAAe,EACnC4E,EAAmBjE,EAAAA,oBAAoB,EAC7C,OAAOuC,EACLE,EACAE,EACAK,EACAlB,EACA,CACE,KAAM5B,EAAAA,qBAAqB,KAC3B,SAAUA,EAAAA,qBAAqB,SAC/B,QAASA,EAAAA,qBAAqB,OAChC,EACA,GACAkD,EACAa,CACF,CACF,CACA,EAAW,YAAc,aACzBlE,EAAAA,YAAYkG,EAAY,OAAO,EAwC/B,IAAaC,EAAsB,OAAO,OAAO/F,EAAAA,QAAS,CACxD,SAAUgE,EACV,KAAM6B,EACN,QAASC,EACT,cAAe7F,EAAAA,iBACf,QAASC,EAAAA,WACT,QAASC,EAAAA,WACT,cAAeC,EAAAA,gBACjB,CAAC"}

package/dist/components/navigation/Nav.mjs

@@ -1,184 +1,204 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
-import { warnDeprecated as t } from "../../lib/dev.mjs";
-import { materialiseSlotContent as n, renderSlot as r, slotRendersContent as i } from "../../lib/slot.mjs";
-import { navCategoryClassNames as a, navItemClassNames as o, navSubItemClassNames as s } from "../../lib/classNames.mjs";
-import { useId as c } from "../../hooks/useId.mjs";
-import { disabledStyles as l, focusRingInset as u } from "../../lib/styles.mjs";
-import { ChevronDownIcon as d } from "../../lib/icons.mjs";
-import { NavCategoryValueContext as f, NavRovingContext as p, containsValue as m, markNavPart as h, useNavContext as g, useNavListChildCheck as _, useNavValue as v, useRecordCategory as y } from "./Nav.context.mjs";
-import { NavAppItem as b, NavAppItemStatic as x, NavDivider as S, NavSectionHeader as C } from "./Nav.parts.mjs";
-import { NavRoot as w } from "./Nav.root.mjs";
-import * as T from "react";
-import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { warnDeprecated as t, warnOnce as n } from "../../lib/dev.mjs";
+import { materialiseSlotContent as r, renderSlot as i, slotRendersContent as a } from "../../lib/slot.mjs";
+import { navCategoryClassNames as o, navItemClassNames as s, navSubItemClassNames as c } from "../../lib/classNames.mjs";
+import { useId as l } from "../../hooks/useId.mjs";
+import { disabledStyles as u, focusRingInset as d } from "../../lib/styles.mjs";
+import { unwrapButtonGlyph as f } from "../button/Button.slots.mjs";
+import { ChevronDownIcon as p } from "../../lib/icons.mjs";
+import { expandIconMotion as m, navActionsRevealMotion as h } from "../../lib/motion.mjs";
+import { useMotionClasses as g, useMotionPreference as _ } from "../../hooks/useMotion.mjs";
+import { useCollapsePresence as v } from "../../hooks/useCollapsePresence.mjs";
+import { NavCategoryValueContext as y, NavRovingContext as b, containsValue as x, markNavPart as S, useNavContext as C, useNavListChildCheck as w, useNavValue as T, useRecordCategory as E } from "./Nav.context.mjs";
+import { NavAppItem as D, NavAppItemStatic as O, NavDivider as k, NavSectionHeader as A } from "./Nav.parts.mjs";
+import { NavRoot as j } from "./Nav.root.mjs";
+import * as M from "react";
+import { Fragment as N, jsx as P, jsxs as F } from "react/jsx-runtime";
 //#region src/components/navigation/Nav.tsx
-var k = "flex h-5 w-5 shrink-0 items-center justify-center";
-function A(t, n) {
-	return t && i(t) ? r(t, "span", e(n, k), { "aria-hidden": !0 }) : null;
+var I = "flex h-5 w-5 shrink-0 items-center justify-center";
+function L(t, n) {
+	return t && a(t) ? i(t, "span", e(n, I), { "aria-hidden": !0 }) : null;
 }
-var j = {
-	base: e("flex w-full items-center gap-2 px-4 py-2 text-body-1 text-start no-underline transition-colors motion-reduce:transition-none", u, l),
+var R = {
+	base: e("flex w-full items-center gap-2 px-4 py-2 text-body-1 text-start no-underline transition-colors motion-reduce:transition-none", d, u),
 	selected: "bg-subtle-selected text-primary font-semibold border-s-2 border-s-primary",
 	idle: "text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover",
 	selectedInRow: "text-primary font-semibold",
 	rowSelected: "bg-subtle-selected border-s-2 border-s-primary"
-}, M = {
-	base: e("flex w-full items-center ps-11 pe-4 py-1.5 text-body-1 text-start no-underline transition-colors motion-reduce:transition-none", u, l),
+}, z = {
+	base: e("flex w-full items-center ps-11 pe-4 py-1.5 text-body-1 text-start no-underline transition-colors motion-reduce:transition-none", d, u),
 	selected: "text-primary font-semibold",
 	idle: "text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover",
 	selectedInRow: "text-primary font-semibold",
 	rowSelected: void 0
-}, N = "group/nav-row flex items-center transition-colors motion-reduce:transition-none", P = "hover:bg-subtle-hover", F = e("flex shrink-0 items-center gap-1 pe-2", "*:opacity-0 group-hover/nav-row:*:opacity-100 group-focus-within/nav-row:*:opacity-100", "forced-colors:*:opacity-100 [@media(hover:none)]:*:opacity-100", "*:has-[[aria-pressed=true]]:opacity-100 *:has-[[aria-expanded=true]]:opacity-100", "[&>[aria-pressed=true]]:opacity-100 [&>[aria-expanded=true]]:opacity-100"), I = e("flex w-full items-center gap-2 px-4 py-2 text-body-1 font-semibold text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover transition-colors motion-reduce:transition-none", "data-[contains-current]:bg-subtle-selected data-[contains-current]:text-primary data-[contains-current]:border-s-2 data-[contains-current]:border-s-primary", u);
-function L(e) {
+}, B = "group/nav-row flex items-center transition-colors motion-reduce:transition-none", V = "hover:bg-subtle-hover", H = e("flex shrink-0 items-center gap-1 pe-2", "*:opacity-0 group-hover/nav-row:*:opacity-100 group-focus-within/nav-row:*:opacity-100", "forced-colors:*:opacity-100 [@media(hover:none)]:*:opacity-100", "*:has-[[aria-pressed=true]]:opacity-100 *:has-[[aria-expanded=true]]:opacity-100", "[&>[aria-pressed=true]]:opacity-100 [&>[aria-expanded=true]]:opacity-100"), ee = e("flex w-full items-center gap-2 px-4 py-2 text-body-1 font-semibold text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover transition-colors motion-reduce:transition-none", "data-[contains-current]:bg-subtle-selected data-[contains-current]:text-primary data-[contains-current]:border-s-2 data-[contains-current]:border-s-primary", d);
+function U(e) {
 	if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return !0;
 	let t = e.currentTarget, n = t.getAttribute("target");
 	return !!n && n.toLowerCase() !== "_self" || t.hasAttribute("download");
 }
-function R(t, r, a, o, s, c, l) {
-	let { value: u, icon: d, disabled: f = !1, href: p, className: m, children: h, onClick: g, actions: _, ref: v, ...y } = t, b = r.value === u, x = p !== void 0, S = a ? { "data-roving-value": u } : void 0, C = i(_), w = y.id ?? l, T = C ? { id: w } : void 0, k = (e) => {
-		if (f) {
+function W(t, n, i, o, s, c, l, u) {
+	let { value: d, icon: f, disabled: p = !1, href: m, className: g, children: _, onClick: v, actions: y, ref: b, ...x } = t, S = n.value === d, C = m !== void 0, w = i ? { "data-roving-value": d } : void 0, T = a(y), E = x.id ?? l, D = T ? { id: E } : void 0, O = (e) => {
+		if (p) {
 			e.preventDefault();
 			return;
 		}
-		g?.(e), !(x ? !e.defaultPrevented && L(e) : e.defaultPrevented) && r.select(u);
-	}, j = /* @__PURE__ */ O(E, { children: [c && A(d, s.icon), c ? /* @__PURE__ */ D("span", {
+		v?.(e), !(C ? !e.defaultPrevented && U(e) : e.defaultPrevented) && n.select(d);
+	}, k = /* @__PURE__ */ F(N, { children: [c && L(f, s.icon), c ? /* @__PURE__ */ P("span", {
 		className: e(s.content, "flex-1 text-start"),
-		children: h
-	}) : h] }), M = e(s.root, o.base, b ? C ? o.selectedInRow : o.selected : o.idle, C && "min-w-0 flex-1", m), I = C ? e(s.listItem, N, b && o.rowSelected ? o.rowSelected : !f && P) : s.listItem, R = C ? /* @__PURE__ */ D("span", {
+		children: _
+	}) : _] }), A = e(s.root, o.base, S ? T ? o.selectedInRow : o.selected : o.idle, T && "min-w-0 flex-1", g), j = T ? e(s.listItem, B, S && o.rowSelected ? o.rowSelected : !p && V) : s.listItem, M = T ? /* @__PURE__ */ P("span", {
 		role: "group",
-		"aria-labelledby": w,
+		"aria-labelledby": E,
 		"data-wave-nav-actions": "",
-		className: e(s.actions, F),
-		children: n(_)
+		className: e(s.actions, H, u === "none" ? void 0 : h),
+		children: r(y)
 	}) : null;
-	if (x) return /* @__PURE__ */ O("li", {
-		className: I,
-		children: [/* @__PURE__ */ D("a", {
-			...y,
-			...T,
-			...S,
-			ref: v,
-			href: f ? void 0 : p,
-			role: f ? "link" : y.role,
-			"aria-disabled": f ? !0 : y["aria-disabled"],
-			"aria-current": b ? "page" : void 0,
-			onClick: k,
-			className: M,
-			children: j
-		}), R]
+	if (C) return /* @__PURE__ */ F("li", {
+		className: j,
+		children: [/* @__PURE__ */ P("a", {
+			...x,
+			...D,
+			...w,
+			ref: b,
+			href: p ? void 0 : m,
+			role: p ? "link" : x.role,
+			"aria-disabled": p ? !0 : x["aria-disabled"],
+			"aria-current": S ? "page" : void 0,
+			onClick: O,
+			className: A,
+			children: k
+		}), M]
 	});
-	let { rel: z, ...B } = y;
-	return /* @__PURE__ */ O("li", {
-		className: I,
-		children: [/* @__PURE__ */ D("button", {
+	let { rel: I, ...R } = x;
+	return /* @__PURE__ */ F("li", {
+		className: j,
+		children: [/* @__PURE__ */ P("button", {
 			type: "button",
-			...B,
-			...T,
-			...S,
-			ref: v,
-			disabled: f,
-			"aria-current": b ? "page" : void 0,
-			onClick: k,
-			className: M,
-			children: j
-		}), R]
+			...R,
+			...D,
+			...w,
+			ref: b,
+			disabled: p,
+			"aria-current": S ? "page" : void 0,
+			onClick: O,
+			className: A,
+			children: k
+		}), M]
 	});
 }
-var z = ({ value: n, label: r, icon: i, className: o, children: s, ref: l, ...u }) => {
-	let h = g("Nav.Category"), y = T.useContext(p), { value: b, openCategories: x, toggleCategory: S, currentCategory: C, categoryStore: w } = h;
-	v(h, "category", n);
-	let E = c("wave-nav-category"), k = x.includes(n), j = !k && b !== "" && m(s, b), M = T.useSyncExternalStore(w.subscribe, () => b !== "" && w.get(b) === n, () => !1);
-	T.useLayoutEffect(() => {
-		if (j) return w.record(b, n), () => w.forget(b, n);
+var G = ({ value: r, label: s, icon: c, expandIcon: u, expandIconMotion: d, motion: h, className: _, children: S, ref: E, ...D }) => {
+	let O = C("Nav.Category"), k = M.useContext(b), { value: A, openCategories: j, toggleCategory: N, currentCategory: I, categoryStore: R } = O;
+	T(O, "category", r);
+	let z = l("wave-nav-category"), B = j.includes(r), V = !B && A !== "" && x(S, A), H = M.useSyncExternalStore(R.subscribe, () => A !== "" && R.get(A) === r, () => !1);
+	M.useLayoutEffect(() => {
+		if (V) return R.record(A, r), () => R.forget(A, r);
 	}, [
-		w,
-		j,
-		b,
-		n
+		R,
+		V,
+		A,
+		r
 	]);
-	let N = !k && (C === n || M || j);
-	T.useLayoutEffect(() => {
-		if (y) return y.reportCurrentCategory(n, N), () => y.reportCurrentCategory(n, !1);
+	let U = !B && (I === r || H || V);
+	M.useLayoutEffect(() => {
+		if (k) return k.reportCurrentCategory(r, U), () => k.reportCurrentCategory(r, !1);
 	}, [
-		y,
-		n,
-		N
+		k,
+		r,
+		U
 	]);
-	let P = T.useRef(null);
-	_(P, "Nav.Category", "sub-items");
-	let F = r, L = s;
-	if (r === void 0) {
+	let W = M.useRef(null);
+	w(W, "Nav.Category", "sub-items");
+	let G = M.useRef(null), { isMounted: K, wrapperRef: q, presenceProps: J, className: te } = v(B, {
+		motion: h,
+		partRef: W,
+		getTrigger: () => G.current
+	}), { glyph: Y, button: X } = f(u);
+	M.useEffect(() => {
+		X && n("Nav.Category:expandIcon-button", `Nav.Category: \`expandIcon\` received ${X}; its children render as the glyph of the toggle button and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \`expandIcon={<MyIcon />}\`.`);
+	}, [X]);
+	let Z = g(d, m), Q = null;
+	Y == null ? Q = /* @__PURE__ */ P(p, { className: e(o.expandIcon, "shrink-0", Z, B && "rotate-180") }) : a(Y) && (Q = i(Y, "span", e(o.expandIcon, "inline-flex shrink-0", Z), { "aria-hidden": !0 }));
+	let $ = s, ne = S;
+	if (s === void 0) {
 		t("Nav.Category", "text children as the label", "label", "Pass the category label in `label` and only the sub-items as children.");
-		let e = T.Children.toArray(s), n = (e) => typeof e == "string" || typeof e == "number";
-		F = e.filter(n).join(""), L = e.filter((e) => !n(e));
+		let e = M.Children.toArray(S), n = (e) => typeof e == "string" || typeof e == "number";
+		$ = e.filter(n).join(""), ne = e.filter((e) => !n(e));
 	}
-	return /* @__PURE__ */ O("li", {
-		ref: l,
-		...u,
-		className: e(a.root, o),
-		children: [/* @__PURE__ */ O("button", {
+	return /* @__PURE__ */ F("li", {
+		ref: E,
+		...D,
+		className: e(o.root, _),
+		children: [/* @__PURE__ */ F("button", {
+			ref: G,
 			type: "button",
-			"aria-expanded": k,
-			"aria-controls": k ? E : void 0,
-			"aria-current": N ? !0 : void 0,
-			"data-contains-current": N ? "" : void 0,
-			"data-roving-value": y ? `wave-nav-category:${n}` : void 0,
-			onClick: () => S(n),
-			className: e(a.button, I),
+			"aria-expanded": B,
+			"aria-controls": B ? z : void 0,
+			"aria-current": U ? !0 : void 0,
+			"data-contains-current": U ? "" : void 0,
+			"data-roving-value": k ? `wave-nav-category:${r}` : void 0,
+			onClick: () => N(r),
+			className: e(o.button, ee),
 			children: [
-				A(i, a.icon),
-				/* @__PURE__ */ D("span", {
-					className: e(a.label, "flex-1 text-start"),
-					children: F
+				L(c, o.icon),
+				/* @__PURE__ */ P("span", {
+					className: e(o.label, "flex-1 text-start"),
+					children: $
 				}),
-				/* @__PURE__ */ D(d, { className: e(a.expandIcon, "shrink-0 transition-transform motion-reduce:transition-none", k && "rotate-180") })
+				Q
 			]
-		}), k && /* @__PURE__ */ D(f.Provider, {
-			value: n,
-			children: /* @__PURE__ */ D("ul", {
-				ref: P,
-				id: E,
-				className: e(a.list, "m-0 list-none p-0"),
-				children: L
+		}), K && /* @__PURE__ */ P(y.Provider, {
+			value: r,
+			children: /* @__PURE__ */ P("div", {
+				ref: q,
+				...J,
+				className: e(o.collapse, te),
+				children: /* @__PURE__ */ P("ul", {
+					ref: W,
+					id: z,
+					className: e(o.list, "m-0 list-none p-0"),
+					children: ne
+				})
 			})
 		})]
 	});
 };
-z.displayName = "NavCategory", h(z, "category");
-function B(e) {
-	let t = g("Nav.Item");
-	v(t, "item", e.value), y(t, e.value);
-	let n = T.useContext(p), r = c("wave-nav-item");
-	return R(e, t, n, j, {
-		root: o.root,
-		listItem: o.listItem,
-		actions: o.actions,
-		icon: o.icon,
-		content: o.content
-	}, !0, r);
-}
-B.displayName = "NavItem", h(B, "entry");
-function V(e) {
-	let t = g("Nav.SubItem");
-	v(t, "item", e.value), y(t, e.value);
-	let n = T.useContext(p), r = c("wave-nav-item");
-	return R(e, t, n, M, {
+G.displayName = "NavCategory", S(G, "category");
+function K(e) {
+	let t = C("Nav.Item");
+	T(t, "item", e.value), E(t, e.value);
+	let n = M.useContext(b), r = l("wave-nav-item"), i = _();
+	return W(e, t, n, R, {
 		root: s.root,
 		listItem: s.listItem,
-		actions: s.actions
-	}, !1, r);
+		actions: s.actions,
+		icon: s.icon,
+		content: s.content
+	}, !0, r, i);
+}
+K.displayName = "NavItem", S(K, "entry");
+function q(e) {
+	let t = C("Nav.SubItem");
+	T(t, "item", e.value), E(t, e.value);
+	let n = M.useContext(b), r = l("wave-nav-item"), i = _();
+	return W(e, t, n, z, {
+		root: c.root,
+		listItem: c.listItem,
+		actions: c.actions
+	}, !1, r, i);
 }
-V.displayName = "NavSubItem", h(V, "entry");
-var H = /* @__PURE__ */ Object.assign(w, {
-	Category: z,
-	Item: B,
-	SubItem: V,
-	SectionHeader: C,
-	Divider: S,
-	AppItem: b,
-	AppItemStatic: x
+q.displayName = "NavSubItem", S(q, "entry");
+var J = /* @__PURE__ */ Object.assign(j, {
+	Category: G,
+	Item: K,
+	SubItem: q,
+	SectionHeader: A,
+	Divider: k,
+	AppItem: D,
+	AppItemStatic: O
 });
 //#endregion
-export { H as Nav, b as NavAppItem, x as NavAppItemStatic, z as NavCategory, S as NavDivider, B as NavItem, C as NavSectionHeader, V as NavSubItem };
+export { J as Nav, D as NavAppItem, O as NavAppItemStatic, G as NavCategory, k as NavDivider, K as NavItem, A as NavSectionHeader, q as NavSubItem };
 
 //# sourceMappingURL=Nav.mjs.map