@primer/react-brand 0.70.0-rc.138127ad → 0.70.0-rc.88de47fc

package/docs/components/NavList/index.md

@@ -0,0 +1,210 @@
+---
+title: NavList
+description: Use NavList to render vertical navigation with optional expandable groups.
+keywords: ['navigation', 'vertical navigation', 'sidebar', 'nested navigation']
+ready: true
+source: https://github.com/primer/brand/tree/main/packages/react/src/NavList/NavList.tsx
+storybook: '/brand/storybook/?path=/story/components-navlist--playground'
+---
+
+```js
+import {NavList} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<NavList aria-label="Docs navigation">
+  <NavList.Item href="#" aria-current="page">
+    Overview
+  </NavList.Item>
+  <NavList.Item href="#">Quickstart</NavList.Item>
+  <NavList.Item href="#">Install GitHub Copilot</NavList.Item>
+  <NavList.Item href="#">Configure your editor</NavList.Item>
+  <NavList.Item href="#">Manage policies</NavList.Item>
+  <NavList.Item href="#">Troubleshooting</NavList.Item>
+</NavList>
+```
+
+### Groups
+
+Use `NavList.Group` to organize related navigation items into labelled groups.
+
+```jsx
+<NavList aria-label="Section navigation">
+  <NavList.Group title="Products">
+    <NavList.Item href="#" aria-current="page">
+      Copilot
+    </NavList.Item>
+    <NavList.Item href="#">Codespaces</NavList.Item>
+    <NavList.Item href="#">Actions</NavList.Item>
+    <NavList.Item href="#">Packages</NavList.Item>
+  </NavList.Group>
+  <NavList.Group title="Collaboration">
+    <NavList.Item href="#">Pull requests</NavList.Item>
+    <NavList.Item href="#">Issues</NavList.Item>
+    <NavList.Item href="#">Discussions</NavList.Item>
+  </NavList.Group>
+  <NavList.Group title="Security">
+    <NavList.Item href="#">Overview</NavList.Item>
+    <NavList.Item href="#">Secret scanning</NavList.Item>
+    <NavList.Item href="#">Code scanning</NavList.Item>
+  </NavList.Group>
+</NavList>
+```
+
+### Nested disclosure
+
+Add `NavList.SubNav` to a `NavList.Item` when an item needs to expand and collapse nested navigation links.
+
+```jsx
+<NavList aria-label="Nested navigation">
+  <NavList.Group title="Collaboration">
+    <NavList.Item defaultExpanded>
+      Pull requests
+      <NavList.SubNav>
+        <NavList.Item href="#" aria-current="page">
+          Review pull requests
+        </NavList.Item>
+        <NavList.Item href="#">Use suggested changes</NavList.Item>
+        <NavList.Item href="#">Configure rulesets</NavList.Item>
+      </NavList.SubNav>
+    </NavList.Item>
+    <NavList.Item>
+      Branches
+      <NavList.SubNav>
+        <NavList.Item href="#">Overview</NavList.Item>
+        <NavList.Item href="#">Protection rules</NavList.Item>
+      </NavList.SubNav>
+    </NavList.Item>
+  </NavList.Group>
+</NavList>
+```
+
+### Up to five navigation levels
+
+`NavList` can include up to five levels when a page hierarchy requires it. Use the fewest levels needed; levels one through four can optionally expand or collapse, and level five is reserved for leaf article links.
+
+```jsx
+<NavList aria-label="Five-level navigation">
+  <NavList.Item defaultExpanded>
+    GitHub Copilot
+    <NavList.SubNav>
+      <NavList.Item defaultExpanded>
+        Guides
+        <NavList.SubNav>
+          <NavList.Item defaultExpanded>
+            Agents
+            <NavList.SubNav>
+              <NavList.Item defaultExpanded>
+                Build an agent
+                <NavList.SubNav>
+                  <NavList.Item href="#" aria-current="page">
+                    Create a tool
+                  </NavList.Item>
+                  <NavList.Item href="#">Add memory</NavList.Item>
+                  <NavList.Item href="#">Debug prompts</NavList.Item>
+                  <NavList.Item href="#">Deploy safely</NavList.Item>
+                </NavList.SubNav>
+              </NavList.Item>
+              <NavList.Item href="#">Customize an agent</NavList.Item>
+              <NavList.Item href="#">Debug an agent</NavList.Item>
+            </NavList.SubNav>
+          </NavList.Item>
+          <NavList.Item>
+            Extensions
+            <NavList.SubNav>
+              <NavList.Item href="#">Install an extension</NavList.Item>
+              <NavList.Item href="#">Publish an extension</NavList.Item>
+              <NavList.Item href="#">Manage permissions</NavList.Item>
+            </NavList.SubNav>
+          </NavList.Item>
+        </NavList.SubNav>
+      </NavList.Item>
+      <NavList.Item>
+        Administration
+        <NavList.SubNav>
+          <NavList.Item href="#">Overview</NavList.Item>
+          <NavList.Item href="#">Policies</NavList.Item>
+          <NavList.Item href="#">Audit log</NavList.Item>
+        </NavList.SubNav>
+      </NavList.Item>
+    </NavList.SubNav>
+  </NavList.Item>
+  <NavList.Item>
+    Code review
+    <NavList.SubNav>
+      <NavList.Item href="#">Overview</NavList.Item>
+      <NavList.Item href="#">Review pull requests</NavList.Item>
+      <NavList.Item href="#">Use suggested changes</NavList.Item>
+    </NavList.SubNav>
+  </NavList.Item>
+</NavList>
+```
+
+### With visuals
+
+Use `leadingVisual` and `trailingVisual` to add icons to the label area. Visuals are additive: they do not replace disclosure triangles, change item sizing, or move the active and inactive row alignment.
+
+```jsx
+<NavList aria-label="Visual navigation">
+  <NavList.Item href="#" aria-current="page" leadingVisual={BookIcon} trailingVisual={<KebabHorizontalIcon />}>
+    GitHub Copilot
+  </NavList.Item>
+</NavList>
+```
+
+## Accessibility
+
+Give each `NavList` a clear `aria-label`, especially when the page includes more than one navigation landmark.
+
+Use `aria-current="page"` on the link for the current page. Only apply `aria-current` to leaf items that navigate somewhere, not to disclosure rows with nested items.
+
+Keep group titles and disclosure labels short and descriptive. Items with `NavList.SubNav` must include visible label text so people can understand what will expand.
+
+## Component props
+
+### NavList `Required`
+
+| name              | type        | default | required | description                                           |
+| ----------------- | ----------- | ------- | -------- | ----------------------------------------------------- |
+| `children`        | `ReactNode` |         | `true`   | `NavList.Item` and `NavList.Group` nodes              |
+| `aria-label`      | `string`    |         | `true`   | Accessible label for the navigation landmark          |
+| `aria-labelledby` | `string`    |         | `false`  | ID of the element that labels the navigation landmark |
+| `className`       | `string`    |         | `false`  | Sets a custom class on the `nav` element              |
+
+Forwards all standard HTML attributes for `<nav>` elements.
+
+### NavList.Item `Required`
+
+| name               | type                                                                      | default | required | description                                                                                |
+| ------------------ | ------------------------------------------------------------------------- | ------- | -------- | ------------------------------------------------------------------------------------------ |
+| `as`               | `'a' \| 'button'`                                                         | `'a'`   | `false`  | Element used for leaf items                                                                |
+| `children`         | `ReactNode`                                                               |         | `true`   | Item label and optional `NavList.SubNav` for nested disclosure                             |
+| `href`             | `string`                                                                  |         | `false`  | URL for leaf items when rendering as an anchor                                             |
+| `aria-current`     | `'page' \| 'step' \| 'location' \| 'date' \| 'time' \| 'true' \| 'false'` |         | `false`  | Marks a leaf item as current                                                               |
+| `defaultExpanded`  | `boolean`                                                                 | `false` | `false`  | Opens nested `NavList.SubNav` by default                                                   |
+| `expanded`         | `boolean`                                                                 |         | `false`  | Controls the nested `NavList.SubNav` expanded state                                        |
+| `onExpandedChange` | `(expanded) => void`                                                      |         | `false`  | Called when the nested `NavList.SubNav` expanded state changes                             |
+| `leadingVisual`    | `ReactElement \| Icon`                                                    |         | `false`  | Visual rendered before the label                                                           |
+| `trailingVisual`   | `ReactElement \| Icon`                                                    |         | `false`  | Visual rendered after the label                                                            |
+| `disabled`         | `boolean`                                                                 | `false` | `false`  | Disables the item. Leaf links receive `aria-disabled`; disclosure buttons receive disabled |
+
+Forwards props to the rendered leaf link or disclosure button.
+
+### NavList.Group
+
+| name        | type        | default | required | description                                |
+| ----------- | ----------- | ------- | -------- | ------------------------------------------ |
+| `title`     | `ReactNode` |         | `false`  | Heading text for the group                 |
+| `children`  | `ReactNode` |         | `true`   | `NavList.Item` nodes                       |
+| `className` | `string`    |         | `false`  | Sets a custom class on the group list item |
+
+### NavList.SubNav
+
+| name        | type        | default | required | description                            |
+| ----------- | ----------- | ------- | -------- | -------------------------------------- |
+| `children`  | `ReactNode` |         | `true`   | Nested `NavList.Item` nodes            |
+| `className` | `string`    |         | `false`  | Sets a custom class on the nested `ul` |

package/docs/components/index.md

@@ -28,6 +28,7 @@ description: Primer Brand UI components
 - [Logo suite](LogoSuite/react.md): Use a logo suite to present a list logos, such as sponsors or vendors.
 - [Media playlist](MediaPlaylist/index.md): Use MediaPlaylist to pair thumbnail-backed media items with a shared playback or media area.
 - [Minimal footer](MinimalFooter/index.md): Use the minimal footer component to provide a global footer featuring legal links, GitHub logomarks and footnotes.
+- [NavList](NavList/index.md): Use NavList to render vertical navigation with optional expandable groups.
 - [Ordered list](OrderedList/react.md): Use the ordered list component to display a list of numbered items.
 - [Pagination](Pagination/index.md): Use Pagination to display a sequence of links that allow navigation to discrete, related pages.
 - [Pillar](Pillar/react.md): Use the pillar component to group related content together.

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.70.0-rc.138127ad)
+# Primer Brand docs (v0.70.0-rc.88de47fc)
 
-These docs are bundled with `@primer/react-brand@0.70.0-rc.138127ad` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.70.0-rc.88de47fc` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.
@@ -61,6 +61,7 @@ stylesheet and font setup. Component directories are named after their import (e
 - [Logo suite](components/LogoSuite/react.md): Use a logo suite to present a list logos, such as sponsors or vendors.
 - [Media playlist](components/MediaPlaylist/index.md): Use MediaPlaylist to pair thumbnail-backed media items with a shared playback or media area.
 - [Minimal footer](components/MinimalFooter/index.md): Use the minimal footer component to provide a global footer featuring legal links, GitHub logomarks and footnotes.
+- [NavList](components/NavList/index.md): Use NavList to render vertical navigation with optional expandable groups.
 - [Ordered list](components/OrderedList/react.md): Use the ordered list component to display a list of numbered items.
 - [Pagination](components/Pagination/index.md): Use Pagination to display a sequence of links that allow navigation to discrete, related pages.
 - [Pillar](components/Pillar/react.md): Use the pillar component to group related content together.

package/esm/NavList/NavList.d.ts

@@ -0,0 +1,86 @@
+import React, { type PropsWithChildren, type ReactElement, type ReactNode, type Ref } from 'react';
+import { type Icon } from '@primer/octicons-react';
+import type { BaseProps } from '../component-helpers';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/nav-list/colors-with-modes.css';
+export type NavListRootProps = {
+    /**
+     * Accessible label for the navigation landmark.
+     */
+    'aria-label': string;
+    /**
+     * ID of an element that labels the navigation landmark.
+     */
+    'aria-labelledby'?: string;
+    children: ReactNode;
+    'data-testid'?: string;
+} & BaseProps<HTMLElement> & Omit<React.HTMLAttributes<HTMLElement>, 'aria-label' | 'aria-labelledby'>;
+type Visual = ReactElement | React.ElementType | Icon;
+type NavListItemAs = 'a' | 'button';
+type NavListItemBaseProps = {
+    /**
+     * Leading visual rendered before the item label.
+     */
+    leadingVisual?: Visual;
+    /**
+     * Trailing visual rendered after the item label.
+     */
+    trailingVisual?: Visual;
+    /**
+     * Whether nested items should be expanded by default.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Controls the nested item expanded state.
+     */
+    expanded?: boolean;
+    /**
+     * Called when a nested item is expanded or collapsed.
+     */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * Marks the item as disabled. Disabled link items receive `aria-disabled`.
+     */
+    disabled?: boolean;
+    'data-testid'?: string;
+};
+export type NavListItemProps<C extends NavListItemAs = 'a'> = {
+    as?: C;
+} & NavListItemBaseProps & PropsWithChildren<BaseProps<HTMLElement>> & Omit<React.ComponentPropsWithoutRef<C>, keyof NavListItemBaseProps | keyof BaseProps<HTMLElement> | 'as' | 'children'>;
+export type NavListSubNavProps = {
+    children: ReactNode;
+    'data-testid'?: string;
+} & BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>;
+export type NavListGroupProps = {
+    /**
+     * Heading text for the group.
+     */
+    title?: ReactNode;
+    children: ReactNode;
+    'data-testid'?: string;
+} & BaseProps<HTMLLIElement> & Omit<React.LiHTMLAttributes<HTMLLIElement>, 'title'>;
+/**
+ * Use NavList to render vertical navigation links with groups and expandable nested lists.
+ * @see https://primer.style/brand/components/NavList
+ */
+export declare const NavList: React.ForwardRefExoticComponent<Omit<NavListRootProps, "ref"> & React.RefAttributes<HTMLElement>> & {
+    Item: <C extends NavListItemAs = "a">(props: NavListItemProps<C> & {
+        ref?: Ref<HTMLElement>;
+    }) => ReactElement | null;
+    SubNav: React.ForwardRefExoticComponent<Omit<NavListSubNavProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+    Group: React.ForwardRefExoticComponent<Omit<NavListGroupProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    testIds: {
+        root: string;
+        readonly list: string;
+        readonly item: string;
+        readonly link: string;
+        readonly leadingVisual: string;
+        readonly trailingVisual: string;
+        readonly subNav: string;
+        readonly group: string;
+        readonly groupTitle: string;
+        readonly groupList: string;
+        readonly toggle: string;
+    };
+};
+export {};
+//# sourceMappingURL=NavList.d.ts.map

package/esm/NavList/NavList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavList.d.ts","sourceRoot":"","sources":["../../src/NavList/NavList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAaZ,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,OAAO,CAAA;AAGd,OAAO,EAAmB,KAAK,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAClE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,OAAO,4GAA4G,CAAA;AAuCnH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,EAAE,SAAS,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,SAAS,CAAC,WAAW,CAAC,GACxB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,YAAY,GAAG,iBAAiB,CAAC,CAAA;AAgD3E,KAAK,MAAM,GAAG,YAAY,GAAG,KAAK,CAAC,WAAW,GAAG,IAAI,CAAA;AACrD,KAAK,aAAa,GAAG,GAAG,GAAG,QAAQ,CAAA;AAEnC,KAAK,oBAAoB,GAAG;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,aAAa,GAAG,GAAG,IAAI;IAC5D,EAAE,CAAC,EAAE,CAAC,CAAA;CACP,GAAG,oBAAoB,GACtB,iBAAiB,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,GACzC,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,oBAAoB,GAAG,MAAM,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,UAAU,CAAC,CAAA;AA6MxH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,SAAS,CAAC,gBAAgB,CAAC,GAC7B,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAA;AAkExC,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,EAAE,SAAS,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,SAAS,CAAC,aAAa,CAAC,GAC1B,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,CAAA;AA+DtD;;;GAGG;AACH,eAAO,MAAM,OAAO;WAnJd,CAAC,SAAS,aAAa,eAAe,gBAAgB,CAAC,CAAC,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,KAAK,YAAY,GAAG,IAAI;;;;;;;;;;;;;;;;CAwJhH,CAAA"}

package/esm/NavList/NavList.js

@@ -0,0 +1,277 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { useId as t } from "../hooks/useId.js";
+import { TriangleDownIcon as n } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/nav-list/colors-with-modes-CGyt2t8f.css';/* empty css                                                                                                      */
+import r from "./NavList.module.js";
+import i, { Children as a, createContext as o, forwardRef as s, isValidElement as c, useCallback as l, useContext as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/NavList/NavList.tsx
+var _ = {
+	root: "NavList",
+	get list() {
+		return `${this.root}-list`;
+	},
+	get item() {
+		return `${this.root}-item`;
+	},
+	get link() {
+		return `${this.root}-link`;
+	},
+	get leadingVisual() {
+		return `${this.root}-leading-visual`;
+	},
+	get trailingVisual() {
+		return `${this.root}-trailing-visual`;
+	},
+	get subNav() {
+		return `${this.root}-sub-nav`;
+	},
+	get group() {
+		return `${this.root}-group`;
+	},
+	get groupTitle() {
+		return `${this.root}-group-title`;
+	},
+	get groupList() {
+		return `${this.root}-group-list`;
+	},
+	get toggle() {
+		return `${this.root}-toggle`;
+	}
+}, v = 5, y = o(1), b = o({
+	expanded: !0,
+	level: 2
+}), x = s(({ children: t, className: n, "aria-label": i, "aria-labelledby": o, "data-testid": s, ...c }, l) => {
+	let u = f(() => a.toArray(t), [t]), d = f(() => u.some(j), [u]), p = f(() => u.some(M), [u]), m = d ? 1 : 2, g = !d && !p;
+	return /* @__PURE__ */ h("nav", {
+		ref: l,
+		className: e(r.NavList, n),
+		"aria-label": i,
+		"aria-labelledby": o,
+		"data-testid": s || _.root,
+		...c,
+		children: /* @__PURE__ */ h(y.Provider, {
+			value: m,
+			children: /* @__PURE__ */ h("ul", {
+				className: e(r.NavList__list, g && r["NavList__list--flat"]),
+				"data-testid": _.list,
+				children: t
+			})
+		})
+	});
+}), S = s(({ as: o, children: s, className: c, defaultExpanded: p = !1, disabled: x = !1, expanded: S, leadingVisual: C, onClick: w, onExpandedChange: T, trailingVisual: D, "aria-current": O, "data-testid": k, ...j }, M) => {
+	let te = o || "a", I = u(y), ne = t(), re = t(), L = f(() => a.toArray(s), [s]), R = f(() => L.filter(E), [L]), z = f(() => L.find(E), [L]), B = f(() => L.filter(N), [L]), V = f(() => z ? L.filter((e) => e !== z) : L, [L, z]), H = V.length > 0, U = !!z, W = I < v, ie = !U, G = z?.props.id ?? ne, K = f(() => ee(z?.props.children), [z?.props.children]), q = S !== void 0, [ae, J] = m(p || K), Y = !!(q ? S : ae), { href: X, id: oe, ...se } = j, Z = oe ?? re, Q = w, ce = f(() => {
+		if (B.length > 0) return "NavList.Item: NavList.Group is not supported as a child. Use NavList.SubNav for nested disclosure. NavList.Item will not be rendered.";
+		if (U && !W) return "NavList.Item: NavList supports up to 5 levels. Level 5 items cannot contain NavList.SubNav. NavList.Item will not be rendered.";
+		if (R.length > 1) return "NavList.Item: Only one NavList.SubNav child is supported. NavList.Item will not be rendered.";
+		if (U && !H) return "NavList.Item: A label is required when using NavList.SubNav. NavList.Item will not be rendered.";
+		if (U && (X !== void 0 || o !== void 0)) return "NavList.Item: `href` and `as` are not supported when using NavList.SubNav because expandable items render as buttons. NavList.Item will not be rendered.";
+	}, [
+		o,
+		W,
+		H,
+		U,
+		X,
+		B.length,
+		R.length
+	]);
+	d(() => {
+		K && !q && J(!0);
+	}, [K, q]);
+	let le = l((e) => {
+		q || J(e), T?.(e);
+	}, [q, T]), $ = l(() => {
+		le(!Y);
+	}, [Y, le]), ue = l((e) => {
+		if (x) {
+			e.preventDefault();
+			return;
+		}
+		Q?.(e);
+	}, [x, Q]), de = l((e) => {
+		A(M, e);
+	}, [M]), fe = l((e) => {
+		if (x) {
+			e.preventDefault();
+			return;
+		}
+		Q?.(e), e.defaultPrevented || $();
+	}, [
+		x,
+		Q,
+		$
+	]);
+	if (ce) return F(ce), null;
+	let pe = /* @__PURE__ */ g("span", {
+		className: r.NavList__labelArea,
+		children: [
+			P(C, r.NavList__leadingVisual, _.leadingVisual),
+			/* @__PURE__ */ h("span", {
+				className: r.NavList__label,
+				children: V
+			}),
+			P(D, r.NavList__trailingVisual, _.trailingVisual)
+		]
+	});
+	return /* @__PURE__ */ g("li", {
+		className: e(r.NavList__item, r[`NavList__item--level-${I}`], ie && r["NavList__item--leaf"], U && Y && r["NavList__item--expanded"], K && r["NavList__item--has-current-descendant"]),
+		"data-testid": k || _.item,
+		children: [/* @__PURE__ */ h("div", {
+			className: r.NavList__itemContent,
+			children: U && W ? /* @__PURE__ */ g("button", {
+				ref: de,
+				id: Z,
+				type: "button",
+				className: e(r.NavList__link, r.NavList__accordionButton, x && r["NavList__link--disabled"], c),
+				"aria-expanded": Y ? "true" : "false",
+				"aria-controls": G,
+				"data-testid": _.toggle,
+				...se,
+				disabled: x,
+				onClick: fe,
+				children: [/* @__PURE__ */ h(n, {
+					className: r.NavList__toggleIcon,
+					"aria-hidden": "true"
+				}), pe]
+			}) : /* @__PURE__ */ h(te, {
+				ref: M,
+				className: e(r.NavList__link, x && r["NavList__link--disabled"], c),
+				"aria-current": O,
+				"aria-disabled": x || void 0,
+				"data-testid": _.link,
+				onClick: ue,
+				...j,
+				children: pe
+			})
+		}), z ? /* @__PURE__ */ h(b.Provider, {
+			value: {
+				expanded: Y,
+				labelledBy: Z,
+				level: I + 1
+			},
+			children: i.cloneElement(z, { id: G })
+		}) : null]
+	});
+}), C = s(({ children: t, className: n, "aria-labelledby": i, "data-testid": a, ...o }, s) => {
+	let { expanded: c, labelledBy: f, level: m } = u(b), g = p(null), v = l((e) => {
+		e.style.setProperty("--brand-NavList-subNav-height", `${e.scrollHeight}px`);
+	}, []), x = l(() => {
+		let e = g.current;
+		for (; e;) v(e), e = e.parentElement?.closest(`.${r.NavList__subNav}`) ?? null;
+	}, [v]), S = l((e) => {
+		g.current = e, A(s, e);
+	}, [s]);
+	return d(() => {
+		x();
+	}, [
+		t,
+		c,
+		x
+	]), d(() => {
+		g.current?.toggleAttribute("inert", !c);
+	}, [c]), d(() => {
+		let e = g.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(x);
+		return t.observe(e), () => {
+			t.disconnect();
+		};
+	}, [x]), /* @__PURE__ */ h("ul", {
+		ref: S,
+		className: e(r.NavList__subNav, c && r["NavList__subNav--expanded"], n),
+		"aria-labelledby": i ?? f,
+		...o,
+		"aria-hidden": c ? void 0 : "true",
+		"data-testid": a || _.subNav,
+		children: /* @__PURE__ */ h(y.Provider, {
+			value: m,
+			children: t
+		})
+	});
+}), w = s(({ title: n, children: o, className: s, "data-testid": l, ...u }, d) => {
+	let p = t(), m = f(() => {
+		let e = (t) => a.toArray(t).flatMap((t) => D(t) ? [t] : c(t) && t.type === i.Fragment ? e(t.props.children) : []);
+		return e(o);
+	}, [o]);
+	return f(() => {
+		let e = (t) => a.toArray(t).some((t) => D(t) ? !1 : c(t) && t.type === i.Fragment ? e(t.props.children) : !0);
+		return e(o);
+	}, [o]) && F("NavList.Group: Only NavList.Item children are supported. Invalid children will not be rendered. Use NavList.SubNav as a child of NavList.Item for nested disclosure."), /* @__PURE__ */ g("li", {
+		ref: d,
+		className: e(r.NavList__group, s),
+		"data-testid": l || _.group,
+		...u,
+		children: [n ? /* @__PURE__ */ h("h3", {
+			id: p,
+			className: r.NavList__groupTitle,
+			"data-testid": _.groupTitle,
+			children: n
+		}) : null, /* @__PURE__ */ h("ul", {
+			className: r.NavList__groupList,
+			"aria-labelledby": n ? p : void 0,
+			"data-testid": _.groupList,
+			children: /* @__PURE__ */ h(y.Provider, {
+				value: 2,
+				children: m
+			})
+		})]
+	});
+}), T = Object.assign(x, {
+	Item: S,
+	SubNav: C,
+	Group: w,
+	testIds: _
+});
+function E(e) {
+	return c(e) && e.type === C;
+}
+function D(e) {
+	return c(e) && e.type === S;
+}
+function O(e) {
+	return c(e) && e.type === w;
+}
+function k(e) {
+	return !!e && e !== "false";
+}
+function ee(e) {
+	return a.toArray(e).some((e) => c(e) ? k(e.props["aria-current"]) ? !0 : ee(e.props.children) : !1);
+}
+function A(e, t) {
+	if (e) {
+		if (typeof e == "function") {
+			e(t);
+			return;
+		}
+		e.current = t;
+	}
+}
+function j(e) {
+	return c(e) ? e.type === i.Fragment ? a.toArray(e.props.children).some(j) : a.toArray(e.props.children).some(E) : !1;
+}
+function M(e) {
+	return c(e) ? e.type === i.Fragment ? a.toArray(e.props.children).some(M) : O(e) : !1;
+}
+function N(e) {
+	return c(e) ? e.type === i.Fragment ? a.toArray(e.props.children).some(N) : O(e) : !1;
+}
+function P(e, t, n) {
+	if (!e) return null;
+	let r = c(e) ? e : i.createElement(e);
+	return c(r) ? /* @__PURE__ */ h("span", {
+		className: t,
+		"data-testid": n,
+		children: i.cloneElement(r, {
+			className: r.props.className,
+			"aria-hidden": "true",
+			focusable: "false"
+		})
+	}) : null;
+}
+function F(e) {
+	(process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn(e);
+}
+//#endregion
+export { T as NavList };
+
+//# sourceMappingURL=NavList.js.map