@krelborn/stylesui 0.0.0-stage → 0.9.0

package/dist/components/Menubar/menubarItems.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Reads the items a menubar renders
+ *
+ * @param menubar the menubar element
+ * @returns its own items in document order, leaving out the items of the menus they open
+ */
+export declare function menubarItems(menubar: Element): HTMLElement[];

package/dist/components/Menubar/menubarItems.js

@@ -0,0 +1,5 @@
+// src/components/Menubar/menubarItems.ts
+function e(e) {
+	return Array.from(e.querySelectorAll("[role=\"menuitem\"]")).filter((t) => t.parentElement?.closest("[role=\"menu\"], [role=\"menubar\"]") === e);
+}
+export { e as menubarItems };

package/dist/components/Menubar/useMenubarContext.d.ts

@@ -0,0 +1,9 @@
+import type { MenubarContextValue } from "./MenubarContext";
+/**
+ * Reads the state of the surrounding `Menubar`
+ *
+ * @param part the name of the part reading it, for the error message
+ * @returns the surrounding `Menubar`'s state
+ * @throws MissingContextError when the part is not inside a `Menubar`
+ */
+export declare function useMenubarContext(part: string): MenubarContextValue;

package/dist/components/Menubar/useMenubarContext.js

@@ -0,0 +1,10 @@
+import { MissingContextError as e } from "../../errors/MissingContextError.js";
+import { MenubarContext as t } from "./MenubarContext.js";
+import { useContext as n } from "react";
+// src/components/Menubar/useMenubarContext.ts
+function r(r) {
+	let i = n(t);
+	if (i === null) throw new e(r, "Menubar");
+	return i;
+}
+export { r as useMenubarContext };

package/dist/components/NavBar/NavBar.css

@@ -0,0 +1 @@
+.sui-bar-YKJoe{color:var(--sui-color-text,#111827);font-family:var(--sui-font-body,system-ui, sans-serif);line-height:var(--sui-line-height-tight,1.25);flex:1;container:sui-nav-bar/inline-size}.sui-layout-h4XLw{--_sui-nav-bar-below-collapse-width:0;align-items:center;gap:var(--sui-space-2,.5rem);flex-wrap:wrap;display:flex}.sui-bar-YKJoe[data-collapse=always]>.sui-layout-h4XLw{--_sui-nav-bar-below-collapse-width:1}@container sui-nav-bar (width<30rem){.sui-bar-YKJoe[data-collapse=sm]>.sui-layout-h4XLw{--_sui-nav-bar-below-collapse-width:1}}@container sui-nav-bar (width<48rem){.sui-bar-YKJoe[data-collapse=md]>.sui-layout-h4XLw{--_sui-nav-bar-below-collapse-width:1}}@container sui-nav-bar (width<64rem){.sui-bar-YKJoe[data-collapse=lg]>.sui-layout-h4XLw{--_sui-nav-bar-below-collapse-width:1}}.sui-start-7Cofw,.sui-end-KbxmI{align-items:center;gap:var(--sui-space-2,.5rem);flex:none;display:flex}.sui-navigation-CUxrs{--_sui-nav-bar-collapsed:0;flex:1;min-inline-size:0}.sui-list-pjBUp{align-items:center;gap:var(--sui-space-1,.25rem);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.sui-control-ORmQT{box-sizing:border-box;align-items:center;gap:var(--sui-space-1,.25rem);min-block-size:2rem;padding:var(--sui-space-1,.25rem) var(--sui-space-2,.5rem);border-radius:var(--sui-radius-md,4px);color:var(--sui-color-text,#111827);font:inherit;font-size:var(--sui-font-size-sm,.875rem);font-weight:var(--sui-font-weight-medium,500);text-align:start;cursor:pointer;background-color:#0000;border:0;text-decoration:none;transition:background-color .12s;display:inline-flex;position:relative}.sui-control-ORmQT:hover,.sui-control-ORmQT[aria-expanded=true]{background-color:var(--sui-color-secondary-subtle,#f3f4f6)}.sui-control-ORmQT:focus-visible{outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:2px}.sui-control-ORmQT:after{inset-block-end:0;inset-inline:var(--sui-space-2,.5rem);block-size:calc(var(--sui-border-width,1px) * 2);border-radius:var(--sui-radius-full,9999px);background-color:var(--sui-color-primary,#2563eb);content:"";display:none;position:absolute}.sui-control-ORmQT[aria-current]:not([aria-current=false]):after{display:block}.sui-section-P9Rex:has(.sui-panel-LFMyY [aria-current]:not([aria-current=false]))>.sui-control-ORmQT:after{display:block}.sui-toggle-4poR7{display:none}.sui-chevron-PDy4f{transition:rotate .12s ease-out}.sui-control-ORmQT[aria-expanded=true]>.sui-chevron-PDy4f{rotate:180deg}.sui-panel-LFMyY{z-index:1;position-area:self-block-end span-self-inline-end;position-try-fallbacks:flip-inline, --sui-nav-bar-panel-shrink;box-sizing:border-box;inline-size:max-content;max-inline-size:calc(100vw - var(--sui-space-2,.5rem) * 2);max-block-size:100%;max-block-size:stretch;overscroll-behavior:contain;padding:var(--sui-space-2,.5rem);border:var(--sui-border-width,1px) solid var(--sui-color-border,#d1d5db);border-radius:var(--sui-radius-lg,8px);background-color:var(--sui-color-overlay,#fff);box-shadow:var(--sui-shadow-sm,0 1px 3px #0000001f);transition:opacity .12s ease-out, translate var(--sui-motion-spring,.12s ease-out);margin-block-start:var(--sui-space-1,.25rem);position:fixed;overflow-y:auto}@position-try --sui-nav-bar-panel-shrink{inline-size:auto;margin-inline-end:var(--sui-space-2,.5rem)}@starting-style{.sui-panel-LFMyY{opacity:0;translate:0 calc(var(--sui-popover-offset,4px) * -1)}}.sui-panelList-o--Wi,.sui-groupList-BACy0{margin:0;padding:0;list-style:none}.sui-panelList-o--Wi{--_sui-nav-bar-columns:1;grid-template-columns:repeat(var(--_sui-nav-bar-columns), minmax(0, 18rem));gap:1px var(--sui-space-2,.5rem);display:grid}.sui-panel-LFMyY[data-columns="2"]>.sui-panelList-o--Wi{--_sui-nav-bar-columns:2}.sui-panel-LFMyY[data-columns="3"]>.sui-panelList-o--Wi{--_sui-nav-bar-columns:3}.sui-group-nS46Z,.sui-groupList-BACy0{flex-direction:column;gap:1px;display:flex}.sui-groupTitle-e3Nhq{padding:var(--sui-space-2,.5rem) var(--sui-space-2,.5rem) var(--sui-space-1,.25rem)}.sui-panelLink-PFMpf{box-sizing:border-box;min-block-size:2rem;padding:var(--sui-space-1,.25rem) var(--sui-space-2,.5rem);border-radius:var(--sui-radius-md,4px);color:var(--sui-color-text,#111827);font-size:var(--sui-font-size-sm,.875rem);flex-direction:column;justify-content:center;gap:2px;text-decoration:none;transition:background-color .12s;display:flex;position:relative}.sui-panelLink-PFMpf:hover{background-color:var(--sui-color-secondary-subtle,#f3f4f6)}.sui-panelLink-PFMpf:focus-visible{outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:calc(var(--sui-focus-ring-width,2px) * -1)}.sui-title-db-od{font-weight:var(--sui-font-weight-medium,500);overflow-wrap:anywhere}.sui-panelLink-PFMpf[aria-current]:not([aria-current=false])>.sui-title-db-od{text-decoration-line:underline;-webkit-text-decoration-color:var(--sui-color-primary,#2563eb);text-decoration-color:var(--sui-color-primary,#2563eb);text-decoration-thickness:calc(var(--sui-border-width,1px) * 2);text-underline-offset:4px}.sui-description-FOS-6{color:var(--sui-color-text-muted,#4b5563);font-size:var(--sui-font-size-xs,.75rem);overflow-wrap:anywhere}.sui-control-ORmQT:before,.sui-panelLink-PFMpf:before{inset-block:var(--sui-space-1,.25rem);inline-size:calc(var(--sui-border-width,1px) * 2);border-radius:var(--sui-radius-full,9999px);background-color:var(--sui-color-primary,#2563eb);content:"";display:none;position:absolute;inset-inline-start:0}@media (prefers-reduced-motion:reduce){.sui-panel-LFMyY{transition:opacity .12s ease-out}.sui-chevron-PDy4f{transition:none}}@container style(--_sui-nav-bar-below-collapse-width:1){.sui-navigation-CUxrs{--_sui-nav-bar-collapsed:1}.sui-toggle-4poR7{gap:var(--sui-space-2,.5rem);margin-inline-start:auto;display:inline-flex}.sui-navigation-CUxrs{flex-basis:100%;order:1}.sui-navigation-CUxrs:not([data-open]){display:none}.sui-list-pjBUp{align-items:stretch;gap:var(--sui-space-1,.25rem);flex-direction:column}.sui-control-ORmQT,.sui-panelLink-PFMpf{min-block-size:2.75rem;inline-size:100%;font-size:var(--sui-font-size-md,1rem);display:flex}.sui-chevron-PDy4f{margin-inline-start:auto}.sui-toggle-4poR7.sui-control-ORmQT{inline-size:auto}.sui-panel-LFMyY{max-block-size:none;inline-size:auto;max-inline-size:none;padding:0;box-shadow:none;background-color:#0000;border:0;border-radius:0;margin:0;padding-inline-start:var(--sui-space-4,1rem);transition:none;position:static;overflow:visible}.sui-panelList-o--Wi{gap:var(--sui-space-1,.25rem);grid-template-columns:minmax(0,1fr)}.sui-panelLink-PFMpf:focus-visible{outline-offset:2px}.sui-description-FOS-6{font-size:var(--sui-font-size-sm,.875rem)}.sui-control-ORmQT[aria-current]:not([aria-current=false]),.sui-panelLink-PFMpf[aria-current]:not([aria-current=false]){background-color:var(--sui-color-primary-subtle,#edf5ff);color:var(--sui-color-primary,#2563eb);font-weight:var(--sui-font-weight-bold,700)}.sui-panelLink-PFMpf[aria-current]:not([aria-current=false])>.sui-title-db-od{font-weight:inherit;text-decoration-line:none}.sui-control-ORmQT[aria-current]:not([aria-current=false]):after{display:none}.sui-section-P9Rex:has(.sui-panel-LFMyY [aria-current]:not([aria-current=false]))>.sui-control-ORmQT:after{display:none}.sui-control-ORmQT[aria-current]:not([aria-current=false]):before,.sui-panelLink-PFMpf[aria-current]:not([aria-current=false]):before{display:block}}@media (forced-colors:active){.sui-control-ORmQT:before,.sui-control-ORmQT:after,.sui-panelLink-PFMpf:before{forced-color-adjust:none;background-color:highlight}.sui-panel-LFMyY{border-color:canvastext}}

package/dist/components/NavBar/NavBar.d.ts

@@ -0,0 +1,53 @@
+import type { JSX, ReactNode } from "react";
+import type { RequiredAccessibleName } from "../../accessibility";
+import type { BoxProps } from "../Box";
+/**
+ * Below which width of the bar its navigation collapses behind its "Menu" toggle: `sm` 30rem, `md` 48rem and `lg`
+ * 64rem, or `always` and `never`
+ */
+export type NavBarCollapse = "always" | "lg" | "md" | "never" | "sm";
+interface NavBarOwnProps {
+    /**
+     * The entries: `NavBarItem`s and `NavBarMenu`s
+     */
+    children: ReactNode;
+    /**
+     * Below which width of the bar the navigation collapses behind "Menu": `sm` 30rem, `md` 48rem, `lg` 64rem. Defaults
+     * to `md`.
+     */
+    collapse?: NavBarCollapse;
+    /**
+     * Content after the navigation in the bar, such as a search button. Stays in the first row when collapsed.
+     */
+    end?: ReactNode;
+    /**
+     * The toggle's visible label. Defaults to "Menu".
+     */
+    menuLabel?: string;
+    /**
+     * Content before the navigation in the bar, such as the site's name. Stays in the first row when collapsed.
+     */
+    start?: ReactNode;
+}
+/**
+ * Props for `NavBar`: its own props, a required `aria-label` or `aria-labelledby` for its `nav`, and every other `div`
+ * prop except `dangerouslySetInnerHTML`, which go to the bar
+ */
+export type NavBarProps = NavBarOwnProps & RequiredAccessibleName & Omit<BoxProps<"div">, "aria-label" | "aria-labelledby" | "as" | "children" | "dangerouslySetInnerHTML">;
+/**
+ * A site's header navigation, for blogs, docs and marketing sites: a row of `NavBarItem` links and `NavBarMenu`
+ * sections, each opening a panel of links. Below its `collapse` width, measured on the bar, the navigation hides behind
+ * a "Menu" toggle and opens below the bar's first row, pushing the page down. Choosing a link closes it. Name the
+ * navigation with `aria-label` or `aria-labelledby`. For an app's sidebar, use `NavList`; for commands, `Menu`.
+ *
+ * @example
+ * <NavBar aria-label="Main" start={<Link href="/" underline="hover">The Long Read</Link>}>
+ *   <NavBarItem href="/articles" aria-current="page">Articles</NavBarItem>
+ *   <NavBarMenu label="Topics">
+ *     <NavBarMenuItem href="/topics/design">Design</NavBarMenuItem>
+ *   </NavBarMenu>
+ *   <NavBarItem href="/about">About</NavBarItem>
+ * </NavBar>
+ */
+export declare function NavBar({ "aria-label": label, "aria-labelledby": labelledBy, children, className, collapse, end, menuLabel, start, ...rest }: NavBarProps): JSX.Element;
+export {};

package/dist/components/NavBar/NavBar.js

@@ -0,0 +1,97 @@
+import { hasContent as e } from "../../forms/hasContent.js";
+import { Box as t } from "../Box/Box.js";
+import { CloseIcon as n } from "../Icon/CloseIcon.js";
+import { MenuIcon as r } from "../Icon/MenuIcon.js";
+import { isNavBarCollapsed as i } from "./isNavBarCollapsed.js";
+import { leavesPageInPlace as a } from "./leavesPageInPlace.js";
+import o from "./NavBar.module.js";
+import { NavBarContext as s } from "./NavBarContext.js";
+import { useLayoutSwitch as c } from "./useLayoutSwitch.js";
+import { clsx as l } from "clsx";
+import { useId as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+// src/components/NavBar/NavBar.tsx
+function h({ "aria-label": h, "aria-labelledby": g, children: _, className: v, collapse: y = "md", end: b, menuLabel: x = "Menu", start: S, ...C }) {
+	let w = u(), T = d(null), E = d(null), D = d(null), [O, k] = f(!1), [A, j] = f([]);
+	function M() {
+		k(!1), j([]);
+	}
+	c({
+		collapse: y,
+		layoutRef: T,
+		navigationRef: E,
+		onSwitch: M
+	});
+	function N(e) {
+		j((t) => t.filter((t) => t !== e));
+	}
+	function P(e, t) {
+		let n = i(t);
+		j((t) => t.includes(e) ? t.filter((t) => t !== e) : n ? [...t, e] : [e]);
+	}
+	function F() {
+		O ? M() : k(!0);
+	}
+	function I(e) {
+		let t = e.target.closest("a");
+		t !== null && !a(e, t) && M();
+	}
+	function L(e) {
+		let t = D.current, n = E.current, r = e.target, a = r === t || n?.contains(r) === !0;
+		e.key === "Escape" && !e.defaultPrevented && O && n !== null && a && i(n) && (e.preventDefault(), M(), t?.focus());
+	}
+	return /* @__PURE__ */ p(s.Provider, {
+		value: {
+			closeSection: N,
+			openSections: A,
+			toggleSection: P
+		},
+		children: /* @__PURE__ */ p(t, {
+			...C,
+			className: l(o.bar, v),
+			"data-collapse": y,
+			children: /* @__PURE__ */ m(t, {
+				className: o.layout,
+				onClick: I,
+				onKeyDown: L,
+				ref: T,
+				children: [
+					e(S) && /* @__PURE__ */ p(t, {
+						className: o.start,
+						children: S
+					}),
+					/* @__PURE__ */ m(t, {
+						as: "button",
+						className: l(o.control, o.toggle),
+						onClick: F,
+						ref: D,
+						type: "button",
+						"aria-controls": w,
+						"aria-expanded": O,
+						children: [p(O ? n : r, {}), x]
+					}),
+					/* @__PURE__ */ p(t, {
+						as: "nav",
+						className: o.navigation,
+						id: w,
+						ref: E,
+						"aria-label": h,
+						"aria-labelledby": g,
+						"data-open": O ? !0 : void 0,
+						children: /* @__PURE__ */ p(t, {
+							as: "ul",
+							className: o.list,
+							role: "list",
+							children: _
+						})
+					}),
+					e(b) && /* @__PURE__ */ p(t, {
+						className: o.end,
+						children: b
+					})
+				]
+			})
+		})
+	});
+}
+export { h as NavBar };

package/dist/components/NavBar/NavBar.module.js

@@ -0,0 +1,22 @@
+import './NavBar.css';// src/components/NavBar/NavBar.module.css
+var e = "sui-bar-YKJoe", t = "sui-layout-h4XLw", n = "sui-start-7Cofw", r = "sui-end-KbxmI", i = "sui-navigation-CUxrs", a = "sui-list-pjBUp", o = "sui-control-ORmQT", s = "sui-section-P9Rex", c = "sui-panel-LFMyY", l = "sui-toggle-4poR7", u = "sui-chevron-PDy4f", d = "sui-panelList-o--Wi", f = "sui-groupList-BACy0", p = "sui-group-nS46Z", m = "sui-groupTitle-e3Nhq", h = "sui-panelLink-PFMpf", g = "sui-title-db-od", _ = "sui-description-FOS-6", v = {
+	bar: e,
+	layout: t,
+	start: n,
+	end: r,
+	navigation: i,
+	list: a,
+	control: o,
+	section: s,
+	panel: c,
+	toggle: l,
+	chevron: u,
+	panelList: d,
+	groupList: f,
+	group: p,
+	groupTitle: m,
+	panelLink: h,
+	title: g,
+	description: _
+};
+export { e as bar, u as chevron, o as control, v as default, _ as description, r as end, p as group, f as groupList, m as groupTitle, t as layout, a as list, i as navigation, c as panel, h as panelLink, d as panelList, s as section, n as start, g as title, l as toggle };

package/dist/components/NavBar/NavBarContext.d.ts

@@ -0,0 +1,21 @@
+/**
+ * State a `NavBar` shares with its entries
+ */
+export interface NavBarContextValue {
+    /**
+     * Closes the section with the given id
+     */
+    closeSection: (id: string) => void;
+    /**
+     * Ids of the open sections
+     */
+    openSections: readonly string[];
+    /**
+     * Opens or closes the section with the given id. On a wide bar, opening it closes any other.
+     */
+    toggleSection: (id: string, button: Element) => void;
+}
+/**
+ * Carries a `NavBar`'s state to its entries; null outside a `NavBar`
+ */
+export declare const NavBarContext: import("react").Context<NavBarContextValue | null>;

package/dist/components/NavBar/NavBarContext.js

@@ -0,0 +1,4 @@
+import { createContext as e } from "react";
+// src/components/NavBar/NavBarContext.ts
+var t = e(null);
+export { t as NavBarContext };

package/dist/components/NavBar/NavBarItem.d.ts

@@ -0,0 +1,32 @@
+import type { JSX, ReactNode } from "react";
+import type { LinkOrButtonProps } from "../../links";
+import type { LinkElement } from "../Link";
+interface NavBarItemOwnProps<E extends LinkElement> {
+    /**
+     * What to render: `a`, or a component that renders an anchor, such as a router's link. Defaults to `a`.
+     */
+    as?: E;
+    /**
+     * The label
+     */
+    children?: ReactNode;
+    /**
+     * Class names merged with the link's base class
+     */
+    className?: string;
+}
+/**
+ * Props for `NavBarItem`: its own props plus every other prop of the anchor or component given in `as`, except
+ * `dangerouslySetInnerHTML`
+ */
+export type NavBarItemProps<E extends LinkElement = "a"> = E extends LinkElement ? NavBarItemOwnProps<E> & LinkOrButtonProps<E, "dangerouslySetInnerHTML" | keyof NavBarItemOwnProps<E>> : never;
+/**
+ * A top-level link in a `NavBar`. Every prop but `children` goes to the link, not the list item around it, and a
+ * component given in `as` must pass the `className` it is given on to its anchor. Mark the current page with
+ * `aria-current="page"`.
+ *
+ * @example
+ * <NavBarItem href="/articles" aria-current="page">Articles</NavBarItem>
+ */
+export declare function NavBarItem<E extends LinkElement = "a">({ as, children, className, ...rest }: NavBarItemProps<E>): JSX.Element;
+export {};

package/dist/components/NavBar/NavBarItem.js

@@ -0,0 +1,18 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./NavBar.module.js";
+import { renderNavBarLink as n } from "./renderNavBarLink.js";
+import { useNavBarContext as r } from "./useNavBarContext.js";
+import { clsx as i } from "clsx";
+import { c as a } from "react/compiler-runtime";
+import { jsx as o } from "react/jsx-runtime";
+// src/components/NavBar/NavBarItem.tsx
+function s(s) {
+	let c = a(3), { as: l, children: u, className: d, ...f } = s;
+	r("NavBarItem");
+	let p = e, m = n(l, i(t.control, d), u, f), h;
+	return c[0] !== p || c[1] !== m ? (h = /* @__PURE__ */ o(p, {
+		as: "li",
+		children: m
+	}), c[0] = p, c[1] = m, c[2] = h) : h = c[2], h;
+}
+export { s as NavBarItem };

package/dist/components/NavBar/NavBarMenu.d.ts

@@ -0,0 +1,32 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `NavBarMenu`: its own props plus every `li` prop except `dangerouslySetInnerHTML`
+ */
+export interface NavBarMenuProps extends Omit<BoxProps<"li">, "as" | "children" | "dangerouslySetInnerHTML"> {
+    /**
+     * The panel's links: `NavBarMenuItem`s, or `NavBarMenuGroup`s holding them
+     */
+    children: ReactNode;
+    /**
+     * How many columns the panel lays its links or groups out in on a wide bar. Defaults to 1.
+     */
+    columns?: 1 | 2 | 3;
+    /**
+     * The text of the button that opens the panel
+     */
+    label: ReactNode;
+}
+/**
+ * A section of a `NavBar`: a button that opens a panel of links below it. A click, Enter or Space opens and closes
+ * it. On a wide bar one section is open at a time, and Escape, a click outside or focus leaving closes it. On a
+ * collapsed bar the panel opens in place, pushing what follows down, and Escape closes it. Choosing a link closes it.
+ * Escape returns focus to the button.
+ *
+ * @example
+ * <NavBarMenu columns={2} label="Topics">
+ *   <NavBarMenuItem description="Typography, colour, systems" href="/topics/design">Design</NavBarMenuItem>
+ *   <NavBarMenuItem description="Front-end, performance, tooling" href="/topics/engineering">Engineering</NavBarMenuItem>
+ * </NavBarMenu>
+ */
+export declare function NavBarMenu({ children, className, columns, label, onBlur, onKeyDown, onPointerDown, ...rest }: NavBarMenuProps): JSX.Element;

package/dist/components/NavBar/NavBarMenu.js

@@ -0,0 +1,84 @@
+import { anchorNameFor as e } from "../../overlays/anchorNameFor.js";
+import { Box as t } from "../Box/Box.js";
+import { ChevronDownIcon as n } from "../Icon/ChevronDownIcon.js";
+import { isNavBarCollapsed as r } from "./isNavBarCollapsed.js";
+import i from "./NavBar.module.js";
+import { useNavBarContext as a } from "./useNavBarContext.js";
+import { clsx as o } from "clsx";
+import { useEffect as s, useId as c, useRef as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+// src/components/NavBar/NavBarMenu.tsx
+function f({ children: f, className: m, columns: h = 1, label: g, onBlur: _, onKeyDown: v, onPointerDown: y, ...b }) {
+	let { closeSection: x, openSections: S, toggleSection: C } = a("NavBarMenu"), w = c(), T = e(w), E = l(null), D = l(!1), O = S.includes(w);
+	s(() => {
+		let e = E.current?.parentElement;
+		if (!O || e == null) return;
+		let t = (t) => {
+			let n = t.target;
+			!e.contains(n) && !r(e) && x(w);
+		}, n = (t) => {
+			p(e, t.target, D.current) && !r(e) && x(w);
+		}, i = () => {
+			D.current = !1;
+		}, a = e.ownerDocument;
+		return a.addEventListener("focusin", n, !0), a.addEventListener("keydown", i, !0), a.addEventListener("pointerdown", t, !0), () => {
+			a.removeEventListener("focusin", n, !0), a.removeEventListener("keydown", i, !0), a.removeEventListener("pointerdown", t, !0);
+		};
+	}, [
+		x,
+		O,
+		w
+	]);
+	function k(e) {
+		C(w, e.currentTarget);
+	}
+	function A(e) {
+		_?.(e);
+		let t = e.currentTarget;
+		e.relatedTarget === null && setTimeout(() => {
+			O && p(t, t.ownerDocument.activeElement, D.current) && !r(t) && x(w);
+		}, 0);
+	}
+	function j(e) {
+		y?.(e), D.current = !0;
+	}
+	function M(e) {
+		v?.(e), D.current = !1, e.key === "Escape" && O && !e.defaultPrevented && (e.preventDefault(), x(w), E.current?.focus());
+	}
+	return /* @__PURE__ */ d(t, {
+		...b,
+		as: "li",
+		className: o(i.section, m),
+		onBlur: A,
+		onKeyDown: M,
+		onPointerDown: j,
+		children: [/* @__PURE__ */ d(t, {
+			as: "button",
+			className: i.control,
+			onClick: k,
+			ref: E,
+			style: { anchorName: T },
+			type: "button",
+			"aria-controls": w,
+			"aria-expanded": O,
+			children: [g, /* @__PURE__ */ u(n, { className: i.chevron })]
+		}), /* @__PURE__ */ u(t, {
+			className: i.panel,
+			hidden: !O,
+			id: w,
+			style: { positionAnchor: T },
+			"data-columns": h,
+			children: /* @__PURE__ */ u(t, {
+				as: "ul",
+				className: i.panelList,
+				role: "list",
+				children: f
+			})
+		})]
+	});
+}
+function p(e, t, n) {
+	let r = n && t?.contains(e) === !0;
+	return t !== null && !e.contains(t) && !r;
+}
+export { f as NavBarMenu };

package/dist/components/NavBar/NavBarMenuGroup.d.ts

@@ -0,0 +1,25 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+import type { HeadingLevel } from "../Heading";
+/**
+ * Props for `NavBarMenuGroup`: its own props plus every `li` prop except `dangerouslySetInnerHTML` and `title`
+ */
+export interface NavBarMenuGroupProps extends Omit<BoxProps<"li">, "as" | "dangerouslySetInnerHTML" | "title"> {
+    /**
+     * The group's heading level, which the page outline decides: in a site's header before the page's `h1`, usually 2
+     */
+    headingLevel: HeadingLevel;
+    /**
+     * The group's heading, which also names its list
+     */
+    title: ReactNode;
+}
+/**
+ * A headed column of `NavBarMenuItem`s in a `NavBarMenu`'s panel
+ *
+ * @example
+ * <NavBarMenuGroup headingLevel={2} title="Topics">
+ *   <NavBarMenuItem href="/topics/design">Design</NavBarMenuItem>
+ * </NavBarMenuGroup>
+ */
+export declare function NavBarMenuGroup({ children, className, headingLevel, title, ...rest }: NavBarMenuGroupProps): JSX.Element;

package/dist/components/NavBar/NavBarMenuGroup.js

@@ -0,0 +1,40 @@
+import { Box as e } from "../Box/Box.js";
+import { Heading as t } from "../Heading/Heading.js";
+import n from "./NavBar.module.js";
+import { useNavBarContext as r } from "./useNavBarContext.js";
+import { clsx as i } from "clsx";
+import { useId as a } from "react";
+import { c as o } from "react/compiler-runtime";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+// src/components/NavBar/NavBarMenuGroup.tsx
+function l(l) {
+	let u = o(20), d, f, p, m, h;
+	u[0] === l ? (d = u[1], f = u[2], p = u[3], m = u[4], h = u[5]) : ({children: d, className: f, headingLevel: p, title: h, ...m} = l, u[0] = l, u[1] = d, u[2] = f, u[3] = p, u[4] = m, u[5] = h), r("NavBarMenuGroup");
+	let g = a(), _;
+	u[6] === f ? _ = u[7] : (_ = i(n.group, f), u[6] = f, u[7] = _);
+	let v;
+	u[8] !== g || u[9] !== p || u[10] !== h ? (v = /* @__PURE__ */ s(t, {
+		className: n.groupTitle,
+		id: g,
+		level: p,
+		size: "xs",
+		tone: "muted",
+		children: h
+	}), u[8] = g, u[9] = p, u[10] = h, u[11] = v) : v = u[11];
+	let y;
+	u[12] !== d || u[13] !== g ? (y = /* @__PURE__ */ s(e, {
+		as: "ul",
+		className: n.groupList,
+		role: "list",
+		"aria-labelledby": g,
+		children: d
+	}), u[12] = d, u[13] = g, u[14] = y) : y = u[14];
+	let b;
+	return u[15] !== m || u[16] !== _ || u[17] !== v || u[18] !== y ? (b = /* @__PURE__ */ c(e, {
+		...m,
+		as: "li",
+		className: _,
+		children: [v, y]
+	}), u[15] = m, u[16] = _, u[17] = v, u[18] = y, u[19] = b) : b = u[19], b;
+}
+export { l as NavBarMenuGroup };

package/dist/components/NavBar/NavBarMenuItem.d.ts

@@ -0,0 +1,36 @@
+import type { JSX, ReactNode } from "react";
+import type { LinkOrButtonProps } from "../../links";
+import type { LinkElement } from "../Link";
+interface NavBarMenuItemOwnProps<E extends LinkElement> {
+    /**
+     * What to render: `a`, or a component that renders an anchor, such as a router's link. Defaults to `a`.
+     */
+    as?: E;
+    /**
+     * The title, which names the link
+     */
+    children?: ReactNode;
+    /**
+     * Class names merged with the link's base class
+     */
+    className?: string;
+    /**
+     * A line of muted text below the title, which describes the link
+     */
+    description?: ReactNode;
+}
+/**
+ * Props for `NavBarMenuItem`: its own props plus every other prop of the anchor or component given in `as`, except
+ * `dangerouslySetInnerHTML`
+ */
+export type NavBarMenuItemProps<E extends LinkElement = "a"> = E extends LinkElement ? NavBarMenuItemOwnProps<E> & LinkOrButtonProps<E, "dangerouslySetInnerHTML" | keyof NavBarMenuItemOwnProps<E>> : never;
+/**
+ * A link in a `NavBarMenu`'s panel, with an optional description below its title. Every prop but `children` and
+ * `description` goes to the link, and a component given in `as` must pass the `className` and ARIA attributes it is
+ * given on to its anchor. Mark the current page with `aria-current="page"`.
+ *
+ * @example
+ * <NavBarMenuItem description="Typography, colour, systems" href="/topics/design">Design</NavBarMenuItem>
+ */
+export declare function NavBarMenuItem<E extends LinkElement = "a">({ as, children, className, description, ...rest }: NavBarMenuItemProps<E>): JSX.Element;
+export {};

package/dist/components/NavBar/NavBarMenuItem.js

@@ -0,0 +1,49 @@
+import { hasContent as e } from "../../forms/hasContent.js";
+import { Box as t } from "../Box/Box.js";
+import n from "./NavBar.module.js";
+import { renderNavBarLink as r } from "./renderNavBarLink.js";
+import { useNavBarContext as i } from "./useNavBarContext.js";
+import { clsx as a } from "clsx";
+import { useId as o } from "react";
+import { c as s } from "react/compiler-runtime";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+// src/components/NavBar/NavBarMenuItem.tsx
+function d(d) {
+	let f = s(15), { as: p, children: m, className: h, description: g, ..._ } = d;
+	i("NavBarMenuItem");
+	let v = o(), y = o(), { "aria-describedby": b, "aria-label": x, "aria-labelledby": S, ...C } = _, w;
+	f[0] === g ? w = f[1] : (w = e(g), f[0] = g, f[1] = w);
+	let T = w, E;
+	f[2] !== m || f[3] !== v ? (E = /* @__PURE__ */ l(t, {
+		as: "span",
+		className: n.title,
+		id: v,
+		children: m
+	}), f[2] = m, f[3] = v, f[4] = E) : E = f[4];
+	let D;
+	f[5] !== g || f[6] !== y || f[7] !== T ? (D = T && /* @__PURE__ */ l(t, {
+		as: "span",
+		className: n.description,
+		id: y,
+		children: g
+	}), f[5] = g, f[6] = y, f[7] = T, f[8] = D) : D = f[8];
+	let O;
+	f[9] !== E || f[10] !== D ? (O = /* @__PURE__ */ u(c, { children: [E, D] }), f[9] = E, f[10] = D, f[11] = O) : O = f[11];
+	let k = O, A = T ? {
+		"aria-describedby": b === void 0 ? y : `${y} ${b}`,
+		"aria-label": x,
+		"aria-labelledby": S ?? (x === void 0 ? v : void 0)
+	} : {
+		"aria-describedby": b,
+		"aria-label": x,
+		"aria-labelledby": S
+	}, j = t, M = r(p, a(n.panelLink, h), k, {
+		...C,
+		...A
+	}), N;
+	return f[12] !== j || f[13] !== M ? (N = /* @__PURE__ */ l(j, {
+		as: "li",
+		children: M
+	}), f[12] = j, f[13] = M, f[14] = N) : N = f[14], N;
+}
+export { d as NavBarMenuItem };

package/dist/components/NavBar/index.d.ts

@@ -0,0 +1,10 @@
+export { NavBar } from "./NavBar";
+export type { NavBarCollapse, NavBarProps } from "./NavBar";
+export { NavBarItem } from "./NavBarItem";
+export type { NavBarItemProps } from "./NavBarItem";
+export { NavBarMenu } from "./NavBarMenu";
+export type { NavBarMenuProps } from "./NavBarMenu";
+export { NavBarMenuGroup } from "./NavBarMenuGroup";
+export type { NavBarMenuGroupProps } from "./NavBarMenuGroup";
+export { NavBarMenuItem } from "./NavBarMenuItem";
+export type { NavBarMenuItemProps } from "./NavBarMenuItem";

package/dist/components/NavBar/isNavBarCollapsed.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Tells whether the `NavBar` around an element shows its collapsed layout, behind its "Menu" toggle
+ *
+ * @param element the bar's navigation or an element inside it
+ * @returns true while the bar is narrower than its collapse width, or always collapses, and the browser lays it out
+ *   collapsed
+ */
+export declare function isNavBarCollapsed(element: Element): boolean;

package/dist/components/NavBar/isNavBarCollapsed.js

@@ -0,0 +1,5 @@
+// src/components/NavBar/isNavBarCollapsed.ts
+function e(e) {
+	return e.ownerDocument.defaultView?.getComputedStyle(e).getPropertyValue("--_sui-nav-bar-collapsed").trim() === "1";
+}
+export { e as isNavBarCollapsed };

package/dist/components/NavBar/leavesPageInPlace.d.ts

@@ -0,0 +1,12 @@
+type ModifierKeys = Pick<MouseEvent, "altKey" | "ctrlKey" | "metaKey" | "shiftKey">;
+/**
+ * Tells whether a click on a link leaves this page where it was, opening the link in another tab or window or
+ * downloading it
+ *
+ * @param event the click, for the modifier keys held
+ * @param link the link clicked
+ * @returns true for a click with Alt, Ctrl, Meta or Shift held, on a link that opens in another browsing context, or
+ *   on one that downloads its URL; false whenever that can't be established
+ */
+export declare function leavesPageInPlace(event: ModifierKeys, link: HTMLAnchorElement): boolean;
+export {};

package/dist/components/NavBar/leavesPageInPlace.js

@@ -0,0 +1,29 @@
+// src/components/NavBar/leavesPageInPlace.ts
+function e(e, r) {
+	return e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || t(r) || n(r);
+}
+function t(e) {
+	let t = e.hasAttribute("target") ? e.target : e.ownerDocument.querySelector("base[target]")?.getAttribute("target") ?? "", n = t.toLowerCase(), r = e.ownerDocument.defaultView;
+	if (r === null || [
+		"",
+		"_parent",
+		"_self",
+		"_top"
+	].includes(n)) return !1;
+	let i = r;
+	for (;;) {
+		try {
+			if (i.name === t) return !1;
+		} catch {
+			return !1;
+		}
+		if (i.parent === i) return !0;
+		i = i.parent;
+	}
+}
+function n(e) {
+	if (!e.hasAttribute("download") || !URL.canParse(e.href)) return !1;
+	let t = new URL(e.href);
+	return t.protocol === "blob:" || t.protocol === "data:" || t.origin === e.ownerDocument.location.origin;
+}
+export { e as leavesPageInPlace };