@mitcsutt/kiln-ui 0.6.0 → 0.7.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.js","names":["styles","Collapsible_module_default","CollapsibleContext","createContext","useCollapsible","context","useContext","part","CollapsibleRoot","forwardRef","openProp","rest","uncontrolled","setUncontrolled","useState","defaultOpen","open","contentId","useId","change","useLatest","onOpenChange","toggle","useCallback","next","cx","className","disabled","CollapsibleTrigger","props","onClick","event","asChild","Slot","ChevronDownIcon","CollapsibleContent","Collapse","Collapsible"],"sources":["../../../../src/components/navigation/Collapsible/Collapsible.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useId,\n  useState,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type MouseEvent,\n} from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { ChevronDownIcon } from '#icons'\nimport { Collapse, type CollapseProps } from '#components/layout/Collapse'\nimport { useLatest } from '#components/inputs/internal/useLatest'\nimport styles from './Collapsible.module.css'\n\ninterface CollapsibleContextValue {\n  open: boolean\n  disabled: boolean\n  contentId: string\n  toggle: () => void\n}\n\nconst CollapsibleContext = createContext<CollapsibleContextValue | null>(null)\n\nfunction useCollapsible(part: string): CollapsibleContextValue {\n  const context = useContext(CollapsibleContext)\n  if (!context) throw new Error(`Collapsible.${part} must be inside <Collapsible>.`)\n  return context\n}\n\nexport interface CollapsibleProps extends HTMLAttributes<HTMLDivElement> {\n  /** Controlled open state. */\n  open?: boolean\n  /** Uncontrolled initial state. Default `false`. */\n  defaultOpen?: boolean\n  /** Runs when the trigger asks to open or close. */\n  onOpenChange?: (open: boolean) => void\n  /** The trigger does nothing. */\n  disabled?: boolean\n}\n\nconst CollapsibleRoot = forwardRef<HTMLDivElement, CollapsibleProps>(function Collapsible(\n  {\n    open: openProp,\n    defaultOpen = false,\n    onOpenChange,\n    disabled = false,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen)\n  const open = openProp ?? uncontrolled\n  const contentId = useId()\n  const change = useLatest(onOpenChange)\n  const toggle = useCallback(() => {\n    const next = !open\n    if (openProp === undefined) setUncontrolled(next)\n    change.current?.(next)\n  }, [open, openProp, change])\n\n  return (\n    <CollapsibleContext.Provider value={{ open, disabled, contentId, toggle }}>\n      <div\n        ref={ref}\n        className={cx(styles.root, className)}\n        data-state={open ? 'open' : 'closed'}\n        data-disabled={disabled || undefined}\n        {...rest}\n      >\n        {children}\n      </div>\n    </CollapsibleContext.Provider>\n  )\n})\n\nexport interface CollapsibleTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Render the single child (your own `Button`, a row, a heading's button) as the trigger\n   * instead of Kiln's label-and-chevron button. It gets `aria-expanded`, `aria-controls` and the\n   * click handler.\n   */\n  asChild?: boolean\n}\n\nconst CollapsibleTrigger = forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(\n  function CollapsibleTrigger({ asChild = false, onClick, className, children, ...rest }, ref) {\n    const { open, disabled, contentId, toggle } = useCollapsible('Trigger')\n    const props = {\n      ref,\n      type: 'button' as const,\n      'aria-expanded': open,\n      'aria-controls': contentId,\n      'data-state': open ? 'open' : 'closed',\n      disabled: disabled || undefined,\n      onClick: (event: MouseEvent<HTMLButtonElement>) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) toggle()\n      },\n      ...rest,\n    }\n    if (asChild) {\n      return (\n        <Slot.Root className={className} {...props}>\n          {children}\n        </Slot.Root>\n      )\n    }\n    return (\n      <button className={cx(styles.trigger, className)} {...props}>\n        <span className={styles.label}>{children}</span>\n        <ChevronDownIcon className={styles.chevron} />\n      </button>\n    )\n  },\n)\n\n/** `Collapse`'s props except `open`, which comes from the `Collapsible`. */\nexport type CollapsibleContentProps = Omit<CollapseProps, 'open'>\n\nconst CollapsibleContent = forwardRef<HTMLDivElement, CollapsibleContentProps>(\n  function CollapsibleContent({ className, ...rest }, ref) {\n    const { open, contentId } = useCollapsible('Content')\n    return (\n      <Collapse\n        ref={ref}\n        id={contentId}\n        open={open}\n        className={cx(styles.content, className)}\n        {...rest}\n      />\n    )\n  },\n)\n\n/**\n * A trigger that shows and hides one block of content: \"Advanced options\", \"Show the formula\".\n *\n * @remarks\n * `Collapsible` is a button and the content it opens, wired together: the button gets\n * `aria-expanded` and `aria-controls`, and the content animates with the same height motion as\n * {@link Collapse | Collapse}. Unlike {@link Accordion | Accordion} it brings no heading, no\n * divider and no list of items, so it fits inside a form, a card or a sidebar.\n *\n * The default trigger is a label and a chevron that turns. To use your own control, such as a\n * ghost `Button`, pass it to `Collapsible.Trigger` with `asChild`.\n *\n * @privateRemarks\n * Not Radix Collapsible: its Content owns mounting and `hidden`, so it can't run Collapse's\n * height motion. The context here is the same contract (open, contentId, toggle) with Kiln's\n * Collapse underneath.\n *\n * <Collapsible>\n *   <Collapsible.Trigger>Advanced options</Collapsible.Trigger>\n *   <Collapsible.Content>…</Collapsible.Content>\n * </Collapsible>\n */\nexport const Collapsible = Object.assign(CollapsibleRoot, {\n  Root: CollapsibleRoot,\n  Trigger: CollapsibleTrigger,\n  Content: CollapsibleContent,\n})\n"],"mappings":";;;;;;;;;AAyBA,IAAME,IAAqBC,EAA8C,IAAI;AAE7E,SAASC,EAAe,GAAuC;CAC7D,IAAMC,IAAUC,EAAWJ,CAAkB;CAC7C,IAAI,CAACG,GAAS,MAAU,MAAM,eAAeE,EAAK,+BAA+B;CACjF,OAAOF;AACT;AAaA,IAAMG,IAAkBC,EAA6C,SACnE,EACE,MAAMC,GACN,iBAAc,IACd,iBACA,cAAW,IACX,cACA,aACA,GAAGC,KAEL,GACA;CACA,IAAM,CAACC,GAAcC,KAAmBC,EAASC,CAAW,GACtDC,IAAON,KAAYE,GACnBK,IAAYC,EAAM,GAClBC,IAASC,EAAUC,CAAY,GAC/BC,IAASC,QAAkB;EAC/B,IAAMC,IAAO,CAACR;EAEd,AADIN,MAAa,KAAA,KAAWG,EAAgBW,CAAI,GAChDL,EAAO,UAAUK,CAAI;CACvB,GAAG;EAACR;EAAMN;EAAUS;CAAM,CAAC;CAE3B,OACE,kBAACjB,EAAmB,UAApB;EAA6B,OAAO;GAAE;GAAM;GAAU;GAAW;EAAO;EACtE,UAAA,kBAAC,OAAD;GACO;GACL,WAAWuB,EAAGzB,EAAO,MAAM0B,CAAS;GACpC,cAAYV,IAAO,SAAS;GAC5B,iBAAeW,KAAY,KAAA;GAC3B,GAAIhB;GAEH;EACE,CAAA;CACsB,CAAA;AAEjC,CAAC,GAWKiB,IAAqBnB,EACzB,SAA4B,EAAE,aAAU,IAAO,YAAS,cAAW,aAAU,GAAGE,KAAQ,GAAK;CAC3F,IAAM,EAAE,SAAM,aAAU,cAAW,cAAWP,EAAe,SAAS,GAChEyB,IAAQ;EACZ;EACA,MAAM;EACN,iBAAiBb;EACjB,iBAAiBC;EACjB,cAAcD,IAAO,SAAS;EAC9B,UAAUW,KAAY,KAAA;EACtB,UAAU,MAAyC;GAEjD,AADAG,IAAUC,CAAK,GACVA,EAAM,oBAAkBT,EAAO;EACtC;EACA,GAAGX;CACL;CAQA,OAPIqB,IAEA,kBAACC,EAAK,MAAN;EAAsB;EAAW,GAAIJ;EAClC;CACQ,CAAA,IAIb,kBAAC,UAAD;EAAQ,WAAWJ,EAAGzB,EAAO,SAAS0B,CAAS;EAAG,GAAIG;EAAtD,UAAA,CACE,kBAAC,QAAD;GAAM,WAAW7B,EAAO;GAAQ;EAAe,CAAA,GAC/C,kBAACkC,GAAD,EAAiB,WAAWlC,EAAO,QAAU,CAAA,CACvC;;AAEZ,CACF,GAKMmC,IAAqB1B,EACzB,SAA4B,EAAE,cAAW,GAAGE,KAAQ,GAAK;CACvD,IAAM,EAAE,SAAM,iBAAcP,EAAe,SAAS;CACpD,OACE,kBAACgC,GAAD;EACO;EACL,IAAInB;EACE;EACN,WAAWQ,EAAGzB,EAAO,SAAS0B,CAAS;EACvC,GAAIf;CACL,CAAA;AAEL,CACF,GAwBa0B,IAAc,OAAO,OAAO7B,GAAiB;CACxD,MAAMA;CACN,SAASoB;CACT,SAASO;AACX,CAAC"}

package/dist/components/navigation/Collapsible/Collapsible.module.js

@@ -0,0 +1,11 @@
+//#region src/components/navigation/Collapsible/Collapsible.module.css
+var e = "kiln-Collapsible__root", t = "kiln-Collapsible__trigger", n = "kiln-Collapsible__label", r = "kiln-Collapsible__chevron", i = {
+	root: e,
+	trigger: t,
+	label: n,
+	chevron: r
+};
+//#endregion
+export { r as chevron, i as default, n as label, e as root, t as trigger };
+
+//# sourceMappingURL=Collapsible.module.js.map

package/dist/components/navigation/Collapsible/Collapsible.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.module.js","names":["root","trigger","label","chevron","Collapsible_module_default"],"sources":["../../../../src/components/navigation/Collapsible/Collapsible.module.css"],"sourcesContent":["/*\n * Component tokens: none. The default trigger matches a small Accordion trigger: a label in the\n * label role with a chevron after it, so a Collapsible inside a form reads like the rest of the\n * page's disclosures.\n */\n.root {\n  min-inline-size: 0;\n}\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-block-size: max(2.75rem, var(--control-sm));\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--color-ink);\n  font-family: var(--font-text);\n  font-size: var(--text-sm);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  line-height: var(--leading-snug);\n  text-align: start;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.trigger:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n  border-radius: var(--radius-field);\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n.label {\n  min-inline-size: 0;\n}\n\n.chevron {\n  flex: none;\n  font-size: 1rem;\n  color: var(--color-ink-subtle);\n  transition:\n    rotate var(--dur-2) var(--ease-spring),\n    color var(--dur-1) var(--ease-out);\n}\n@media (hover: hover) {\n  .trigger:hover:not(:disabled) .chevron {\n    color: var(--color-ink);\n  }\n}\n.trigger[data-state='open'] .chevron {\n  rotate: 180deg;\n  color: var(--color-ink);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chevron {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/navigation/Collapsible/index.d.ts

@@ -0,0 +1,2 @@
+export { Collapsible } from './Collapsible.js';
+export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps, } from './Collapsible.js';

package/dist/components/navigation/NavLinks/NavLinks.d.ts

@@ -1,8 +1,8 @@
-import { type AnchorHTMLAttributes, type HTMLAttributes } from 'react';
+import { type AnchorHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
 import { type Space } from '../../../utils/tokens.js';
 import { type VisibilityProps } from '../../../utils/visibility.js';
-export type NavLinksOrientation = 'horizontal' | 'vertical';
-export type NavLinksSize = 'sm' | 'md';
+import { type NavLinksOrientation, type NavLinksSize } from './context.js';
+export type { NavLinksOrientation, NavLinksSize } from './context.js';
 export interface NavLinksProps extends HTMLAttributes<HTMLElement>, VisibilityProps {
     /** Names the landmark. Required when a page has more than one nav. Default "Main". */
     label?: string;
@@ -24,6 +24,10 @@ export interface NavLinksItemProps extends AnchorHTMLAttributes<HTMLAnchorElemen
     active?: boolean;
     /** Render the single child (e.g. a router `<Link>`) instead of an `<a>`. */
     asChild?: boolean;
+    /** A glyph before the label. Decorative: the label names the link. */
+    icon?: ReactNode;
+    /** A count or status after the label, such as a `Badge` or a `StatusDot`. */
+    trailing?: ReactNode;
 }
 /**
  * A labelled navigation landmark with a list of links. Horizontal for headers, vertical for
@@ -34,10 +38,34 @@ export interface NavLinksItemProps extends AnchorHTMLAttributes<HTMLAnchorElemen
  * under the label (horizontal) or an accent dot beside it (vertical), and gets
  * `aria-current="page"`. These docs' header and sidebar are `NavLinks`.
  *
+ * ## Groups
+ *
+ * `NavLinksGroup` nests links under a section, and groups nest inside groups. In a vertical nav a
+ * group is a button that opens its links below it, indented on a guide rule; in a horizontal nav
+ * it opens them in a panel under the button, so a top bar gets one level of nesting. It's a
+ * separate import, so a nav without groups doesn't load the panel and animation code they use.
+ *
+ * A group that holds the current page opens by itself and shows a ring while it's closed, and the
+ * current link keeps `aria-current="page"`. Give a group `href` (or a router `link`) when the
+ * section has a landing page of its own: the label becomes a link, with a separate button to open
+ * and close it. Items and groups take an `icon` and a `trailing` count or status. Labels stay at
+ * body size at every depth.
+ *
+ * With groups in a vertical nav, the arrow keys work as in a tree: Up and Down move between the
+ * visible links, Right opens a group and Left closes it or steps out to its parent, Home and End
+ * jump to either end, and typing a letter jumps to the next link starting with it. Tab still
+ * reaches every link.
+ *
+ * `BottomNav` stays flat: a phone's tab bar has room for four or five destinations and nothing
+ * under them.
+ *
  * @privateRemarks
  * Site / app navigation: a labelled `<nav>` with a list of links. The current page is
  * marked with a short accent bar under the label (horizontal) or an accent dot beside
- * it (vertical) — a mark, not a glowing pill.
+ * it (vertical) — a mark, not a glowing pill. A flat NavLinks (no groups) renders exactly what
+ * it did before groups existed and ignores arrow keys. NavLinksGroup isn't attached as
+ * `NavLinks.Group`: `Object.assign` keeps every part in the bundle, and a group brings Popover and
+ * Collapse, so a flat nav would pay for them (ADR 0044).
  */
 export declare const NavLinks: import("react").ForwardRefExoticComponent<NavLinksProps & import("react").RefAttributes<HTMLElement>> & {
     Item: import("react").ForwardRefExoticComponent<NavLinksItemProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/components/navigation/NavLinks/NavLinks.js

@@ -1,57 +1,87 @@
 import { cx as e } from "../../../utils/cx.js";
 import { space as t } from "../../../utils/tokens.js";
 import { visibilityClass as n } from "../../../utils/visibility.js";
-import r from "./NavLinks.module.js";
-import { createContext as i, forwardRef as a, useContext as o } from "react";
-import { jsx as s } from "react/jsx-runtime";
-import { Slot as c } from "radix-ui";
+import { NavLinksContext as r, NavLinksGroupContext as i } from "./context.js";
+import a from "./NavLinks.module.js";
+import { forwardRef as o, useContext as s, useEffect as c, useId as l, useLayoutEffect as u, useRef as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Slot as m } from "radix-ui";
 //#region src/components/navigation/NavLinks/NavLinks.tsx
-var l = i({
-	orientation: "horizontal",
-	size: "md"
-}), u = a(function({ label: i = "Main", orientation: a = "horizontal", gap: o, size: c = "md", hideBelow: u, hideAbove: d, className: f, children: p, ...m }, h) {
-	return /* @__PURE__ */ s(l.Provider, {
+var h = typeof document > "u" ? c : u, g = o(function({ label: i = "Main", orientation: o = "horizontal", gap: s, size: c = "md", hideBelow: l, hideAbove: u, className: p, onKeyDown: m, children: h, ...g }, _) {
+	let v = d(null);
+	return /* @__PURE__ */ f(r.Provider, {
 		value: {
-			orientation: a,
-			size: c
+			orientation: o,
+			size: c,
+			treeKeysRef: v
 		},
-		children: /* @__PURE__ */ s("nav", {
-			ref: h,
+		children: /* @__PURE__ */ f("nav", {
+			ref: _,
 			"aria-label": i,
-			className: e(r.nav, n({
-				hideBelow: u,
-				hideAbove: d
-			}), f),
-			"data-orientation": a,
+			className: e(a.nav, n({
+				hideBelow: l,
+				hideAbove: u
+			}), p),
+			"data-orientation": o,
 			"data-size": c,
-			...m,
-			children: /* @__PURE__ */ s("ul", {
-				className: r.list,
+			onKeyDown: (e) => {
+				m?.(e), !e.defaultPrevented && o === "vertical" && v.current?.(e);
+			},
+			...g,
+			children: /* @__PURE__ */ f("ul", {
+				className: a.list,
 				role: "list",
-				style: o === void 0 ? void 0 : { "--_gap": t(o) },
-				children: p
+				style: s === void 0 ? void 0 : { "--_gap": t(s) },
+				children: h
 			})
 		})
 	});
-}), d = a(function({ active: t = !1, asChild: i = !1, hideBelow: a, hideAbove: u, className: d, ...f }, p) {
-	let { orientation: m, size: h } = o(l), g = i ? c.Root : "a";
-	return /* @__PURE__ */ s("li", {
-		className: e(r.item, n({
-			hideBelow: a,
-			hideAbove: u
+}), _ = o(function({ active: t = !1, asChild: o = !1, icon: c, trailing: u, hideBelow: d, hideAbove: g, className: _, children: v, ...y }, b) {
+	let { orientation: x, size: S } = s(r), C = s(i), w = l();
+	h(() => {
+		if (C) return C.report(w, t), () => {
+			C.report(w, !1);
+		};
+	}, [
+		C,
+		w,
+		t
+	]);
+	let T = o ? m.Root : "a", E = {
+		ref: b,
+		className: e(a.link, _),
+		"data-orientation": x,
+		"data-size": S,
+		"data-active": t || void 0,
+		"aria-current": t ? "page" : void 0,
+		...y
+	};
+	return /* @__PURE__ */ f("li", {
+		className: e(a.item, n({
+			hideBelow: d,
+			hideAbove: g
 		})),
-		children: /* @__PURE__ */ s(g, {
-			ref: p,
-			className: e(r.link, d),
-			"data-orientation": m,
-			"data-size": h,
-			"data-active": t || void 0,
-			"aria-current": t ? "page" : void 0,
-			...f
+		children: c === void 0 && u === void 0 ? /* @__PURE__ */ f(T, {
+			...E,
+			children: v
+		}) : /* @__PURE__ */ p(T, {
+			...E,
+			children: [
+				c === void 0 ? null : /* @__PURE__ */ f("span", {
+					className: a.icon,
+					"aria-hidden": "true",
+					children: c
+				}),
+				o ? /* @__PURE__ */ f(m.Slottable, { children: v }) : v,
+				u === void 0 ? null : /* @__PURE__ */ f("span", {
+					className: a.trailing,
+					children: u
+				})
+			]
 		})
 	});
-}), f = Object.assign(u, { Item: d });
+}), v = Object.assign(g, { Item: _ });
 //#endregion
-export { f as NavLinks };
+export { v as NavLinks };
 
 //# sourceMappingURL=NavLinks.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NavLinks.js","names":["styles","NavLinks_module_default","NavLinksContext","createContext","NavLinksRoot","forwardRef","rest","label","cx","visibilityClass","className","orientation","size","gap","space","NavLinksItem","useContext","Comp","asChild","Slot","active","NavLinks"],"sources":["../../../../src/components/navigation/NavLinks/NavLinks.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useContext,\n  type AnchorHTMLAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n} from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { space, type Space } from '#utils/tokens'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\nimport styles from './NavLinks.module.css'\n\nexport type NavLinksOrientation = 'horizontal' | 'vertical'\nexport type NavLinksSize = 'sm' | 'md'\n\nexport interface NavLinksProps extends HTMLAttributes<HTMLElement>, VisibilityProps {\n  /** Names the landmark. Required when a page has more than one nav. Default \"Main\". */\n  label?: string\n  /** `horizontal` (default) for headers; `vertical` for sidebars and footers. */\n  orientation?: NavLinksOrientation\n  /**\n   * Space between links, as a step on the space scale. Default `5` horizontal, `0`\n   * vertical (vertical items are already a full control tall).\n   */\n  gap?: Space\n  /**\n   * `md` (default), body-size labels for page headers; `sm`, one step smaller, for sidebars,\n   * dense toolbars, footers and sub-navs. Neither drops to the caption steps.\n   */\n  size?: NavLinksSize\n}\n\ninterface NavLinksContextValue {\n  orientation: NavLinksOrientation\n  size: NavLinksSize\n}\n\nconst NavLinksContext = createContext<NavLinksContextValue>({\n  orientation: 'horizontal',\n  size: 'md',\n})\n\nconst NavLinksRoot = forwardRef<HTMLElement, NavLinksProps>(function NavLinks(\n  {\n    label = 'Main',\n    orientation = 'horizontal',\n    gap,\n    size = 'md',\n    hideBelow,\n    hideAbove,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <NavLinksContext.Provider value={{ orientation, size }}>\n      <nav\n        ref={ref}\n        aria-label={label}\n        className={cx(styles.nav, visibilityClass({ hideBelow, hideAbove }), className)}\n        data-orientation={orientation}\n        data-size={size}\n        {...rest}\n      >\n        <ul\n          className={styles.list}\n          role=\"list\"\n          style={gap === undefined ? undefined : ({ '--_gap': space(gap) } as CSSProperties)}\n        >\n          {children}\n        </ul>\n      </nav>\n    </NavLinksContext.Provider>\n  )\n})\n\nexport interface NavLinksItemProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>, VisibilityProps {\n  /** The current page. Sets `aria-current=\"page\"` and draws the marker. */\n  active?: boolean\n  /** Render the single child (e.g. a router `<Link>`) instead of an `<a>`. */\n  asChild?: boolean\n}\n\n/**\n * One link. For router links: `<NavLinks.Item asChild active={isActive}><Link to=\"/work\">Work</Link></NavLinks.Item>`.\n * `hideBelow`/`hideAbove` hide the whole list item (e.g. a secondary link on phones).\n */\nconst NavLinksItem = forwardRef<HTMLAnchorElement, NavLinksItemProps>(function NavLinksItem(\n  { active = false, asChild = false, hideBelow, hideAbove, className, ...rest },\n  ref,\n) {\n  const { orientation, size } = useContext(NavLinksContext)\n  const Comp = asChild ? Slot.Root : 'a'\n  return (\n    <li className={cx(styles.item, visibilityClass({ hideBelow, hideAbove }))}>\n      <Comp\n        ref={ref}\n        className={cx(styles.link, className)}\n        data-orientation={orientation}\n        data-size={size}\n        data-active={active || undefined}\n        aria-current={active ? 'page' : undefined}\n        {...rest}\n      />\n    </li>\n  )\n})\n\n/**\n * A labelled navigation landmark with a list of links. Horizontal for headers, vertical for\n * sidebars.\n *\n * @remarks\n * `NavLinks` is a `<nav>` with a list of links. The current page is marked with a short accent bar\n * under the label (horizontal) or an accent dot beside it (vertical), and gets\n * `aria-current=\"page\"`. These docs' header and sidebar are `NavLinks`.\n *\n * @privateRemarks\n * Site / app navigation: a labelled `<nav>` with a list of links. The current page is\n * marked with a short accent bar under the label (horizontal) or an accent dot beside\n * it (vertical) — a mark, not a glowing pill.\n */\nexport const NavLinks = Object.assign(NavLinksRoot, { Item: NavLinksItem })\n"],"mappings":";;;;;;;;AAuCA,IAAME,IAAkBC,EAAoC;CAC1D,aAAa;CACb,MAAM;AACR,CAAC,GAEKC,IAAeC,EAAuC,SAC1D,EACE,WAAQ,QACR,iBAAc,cACd,QACA,UAAO,MACP,cACA,cACA,cACA,aACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACJ,EAAgB,UAAjB;EAA0B,OAAO;GAAE;GAAa;EAAK;EACnD,UAAA,kBAAC,OAAD;GACO;GACL,cAAYK;GACZ,WAAWC,EAAGR,EAAO,KAAKS,EAAgB;IAAE;IAAW;GAAU,CAAC,GAAGC,CAAS;GAC9E,oBAAkBC;GAClB,aAAWC;GACX,GAAIN;GAEJ,UAAA,kBAAC,MAAD;IACE,WAAWN,EAAO;IAClB,MAAK;IACL,OAAOa,MAAQ,KAAA,IAAY,KAAA,IAAa,EAAE,UAAUC,EAAMD,CAAG,EAAE;IAE9D;GACC,CAAA;EACD,CAAA;CACmB,CAAA;AAE9B,CAAC,GAcKE,IAAeV,EAAiD,SACpE,EAAE,YAAS,IAAO,aAAU,IAAO,cAAW,cAAW,cAAW,GAAGC,KACvE,GACA;CACA,IAAM,EAAE,gBAAa,YAASU,EAAWd,CAAe,GAClDe,IAAOC,IAAUC,EAAK,OAAO;CACnC,OACE,kBAAC,MAAD;EAAI,WAAWX,EAAGR,EAAO,MAAMS,EAAgB;GAAE;GAAW;EAAU,CAAC,CAAC;EACtE,UAAA,kBAACQ,GAAD;GACO;GACL,WAAWT,EAAGR,EAAO,MAAMU,CAAS;GACpC,oBAAkBC;GAClB,aAAWC;GACX,eAAaQ,KAAU,KAAA;GACvB,gBAAcA,IAAS,SAAS,KAAA;GAChC,GAAId;EACL,CAAA;CACC,CAAA;AAER,CAAC,GAgBYe,IAAW,OAAO,OAAOjB,GAAc,EAAE,MAAMW,EAAa,CAAC"}
+{"version":3,"file":"NavLinks.js","names":["styles","NavLinks_module_default","useIsomorphicLayoutEffect","useEffect","useLayoutEffect","NavLinksRoot","forwardRef","rest","treeKeysRef","useRef","NavLinksContext","label","cx","visibilityClass","className","orientation","size","onKeyDown","event","gap","space","NavLinksItem","useContext","group","NavLinksGroupContext","id","useId","active","Comp","asChild","Slot","link","icon","trailing","children","NavLinks"],"sources":["../../../../src/components/navigation/NavLinks/NavLinks.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useContext,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  type AnchorHTMLAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { space, type Space } from '#utils/tokens'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\nimport {\n  NavLinksContext,\n  NavLinksGroupContext,\n  type NavLinksOrientation,\n  type NavLinksSize,\n  type TreeKeyDown,\n} from './context'\nimport styles from './NavLinks.module.css'\n\nexport type { NavLinksOrientation, NavLinksSize } from './context'\n\nconst useIsomorphicLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect\n\nexport interface NavLinksProps extends HTMLAttributes<HTMLElement>, VisibilityProps {\n  /** Names the landmark. Required when a page has more than one nav. Default \"Main\". */\n  label?: string\n  /** `horizontal` (default) for headers; `vertical` for sidebars and footers. */\n  orientation?: NavLinksOrientation\n  /**\n   * Space between links, as a step on the space scale. Default `5` horizontal, `0`\n   * vertical (vertical items are already a full control tall).\n   */\n  gap?: Space\n  /**\n   * `md` (default), body-size labels for page headers; `sm`, one step smaller, for sidebars,\n   * dense toolbars, footers and sub-navs. Neither drops to the caption steps.\n   */\n  size?: NavLinksSize\n}\n\nconst NavLinksRoot = forwardRef<HTMLElement, NavLinksProps>(function NavLinks(\n  {\n    label = 'Main',\n    orientation = 'horizontal',\n    gap,\n    size = 'md',\n    hideBelow,\n    hideAbove,\n    className,\n    onKeyDown,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  // The arrow keys of a nav with groups. Its groups set the handler, so a flat nav doesn't carry\n  // the code.\n  const treeKeysRef = useRef<TreeKeyDown | null>(null)\n  return (\n    <NavLinksContext.Provider value={{ orientation, size, treeKeysRef }}>\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- arrow keys pressed on the links and group buttons inside bubble here; the nav itself is never focused */}\n      <nav\n        ref={ref}\n        aria-label={label}\n        className={cx(styles.nav, visibilityClass({ hideBelow, hideAbove }), className)}\n        data-orientation={orientation}\n        data-size={size}\n        onKeyDown={(event) => {\n          onKeyDown?.(event)\n          if (!event.defaultPrevented && orientation === 'vertical') treeKeysRef.current?.(event)\n        }}\n        {...rest}\n      >\n        <ul\n          className={styles.list}\n          role=\"list\"\n          style={gap === undefined ? undefined : ({ '--_gap': space(gap) } as CSSProperties)}\n        >\n          {children}\n        </ul>\n      </nav>\n    </NavLinksContext.Provider>\n  )\n})\n\nexport interface NavLinksItemProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>, VisibilityProps {\n  /** The current page. Sets `aria-current=\"page\"` and draws the marker. */\n  active?: boolean\n  /** Render the single child (e.g. a router `<Link>`) instead of an `<a>`. */\n  asChild?: boolean\n  /** A glyph before the label. Decorative: the label names the link. */\n  icon?: ReactNode\n  /** A count or status after the label, such as a `Badge` or a `StatusDot`. */\n  trailing?: ReactNode\n}\n\n/**\n * One link. For router links: `<NavLinks.Item asChild active={isActive}><Link to=\"/work\">Work</Link></NavLinks.Item>`.\n * `hideBelow`/`hideAbove` hide the whole list item (e.g. a secondary link on phones).\n */\nconst NavLinksItem = forwardRef<HTMLAnchorElement, NavLinksItemProps>(function NavLinksItem(\n  {\n    active = false,\n    asChild = false,\n    icon,\n    trailing,\n    hideBelow,\n    hideAbove,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const { orientation, size } = useContext(NavLinksContext)\n  const group = useContext(NavLinksGroupContext)\n  const id = useId()\n  // Inside a group, say whether this is the current page, so the group can show it holds it.\n  useIsomorphicLayoutEffect(() => {\n    if (!group) return\n    group.report(id, active)\n    return () => {\n      group.report(id, false)\n    }\n  }, [group, id, active])\n\n  const Comp = asChild ? Slot.Root : 'a'\n  const link = {\n    ref,\n    className: cx(styles.link, className),\n    'data-orientation': orientation,\n    'data-size': size,\n    'data-active': active || undefined,\n    'aria-current': active ? ('page' as const) : undefined,\n    ...rest,\n  }\n  return (\n    <li className={cx(styles.item, visibilityClass({ hideBelow, hideAbove }))}>\n      {icon === undefined && trailing === undefined ? (\n        <Comp {...link}>{children}</Comp>\n      ) : (\n        // Separate children, not a fragment: with asChild, Slot finds the Slottable among them.\n        <Comp {...link}>\n          {icon !== undefined ? (\n            <span className={styles.icon} aria-hidden=\"true\">\n              {icon}\n            </span>\n          ) : null}\n          {asChild ? <Slot.Slottable>{children}</Slot.Slottable> : children}\n          {trailing !== undefined ? <span className={styles.trailing}>{trailing}</span> : null}\n        </Comp>\n      )}\n    </li>\n  )\n})\n\n/**\n * A labelled navigation landmark with a list of links. Horizontal for headers, vertical for\n * sidebars.\n *\n * @remarks\n * `NavLinks` is a `<nav>` with a list of links. The current page is marked with a short accent bar\n * under the label (horizontal) or an accent dot beside it (vertical), and gets\n * `aria-current=\"page\"`. These docs' header and sidebar are `NavLinks`.\n *\n * ## Groups\n *\n * `NavLinksGroup` nests links under a section, and groups nest inside groups. In a vertical nav a\n * group is a button that opens its links below it, indented on a guide rule; in a horizontal nav\n * it opens them in a panel under the button, so a top bar gets one level of nesting. It's a\n * separate import, so a nav without groups doesn't load the panel and animation code they use.\n *\n * A group that holds the current page opens by itself and shows a ring while it's closed, and the\n * current link keeps `aria-current=\"page\"`. Give a group `href` (or a router `link`) when the\n * section has a landing page of its own: the label becomes a link, with a separate button to open\n * and close it. Items and groups take an `icon` and a `trailing` count or status. Labels stay at\n * body size at every depth.\n *\n * With groups in a vertical nav, the arrow keys work as in a tree: Up and Down move between the\n * visible links, Right opens a group and Left closes it or steps out to its parent, Home and End\n * jump to either end, and typing a letter jumps to the next link starting with it. Tab still\n * reaches every link.\n *\n * `BottomNav` stays flat: a phone's tab bar has room for four or five destinations and nothing\n * under them.\n *\n * @privateRemarks\n * Site / app navigation: a labelled `<nav>` with a list of links. The current page is\n * marked with a short accent bar under the label (horizontal) or an accent dot beside\n * it (vertical) — a mark, not a glowing pill. A flat NavLinks (no groups) renders exactly what\n * it did before groups existed and ignores arrow keys. NavLinksGroup isn't attached as\n * `NavLinks.Group`: `Object.assign` keeps every part in the bundle, and a group brings Popover and\n * Collapse, so a flat nav would pay for them (ADR 0044).\n */\nexport const NavLinks = Object.assign(NavLinksRoot, { Item: NavLinksItem })\n"],"mappings":";;;;;;;;;AA2BA,IAAME,IAA4B,OAAO,WAAa,MAAcC,IAAYC,GAmB1EC,IAAeC,EAAuC,SAC1D,EACE,WAAQ,QACR,iBAAc,cACd,QACA,UAAO,MACP,cACA,cACA,cACA,cACA,aACA,GAAGC,KAEL,GACA;CAGA,IAAMC,IAAcC,EAA2B,IAAI;CACnD,OACE,kBAACC,EAAgB,UAAjB;EAA0B,OAAO;GAAE;GAAa;GAAM;EAAY;EAEhE,UAAA,kBAAC,OAAD;GACO;GACL,cAAYC;GACZ,WAAWC,EAAGZ,EAAO,KAAKa,EAAgB;IAAE;IAAW;GAAU,CAAC,GAAGC,CAAS;GAC9E,oBAAkBC;GAClB,aAAWC;GACX,YAAY,MAAU;IAEpB,AADAC,IAAYC,CAAK,GACb,CAACA,EAAM,oBAAoBH,MAAgB,cAAYP,EAAY,UAAUU,CAAK;GACxF;GACA,GAAIX;GAEJ,UAAA,kBAAC,MAAD;IACE,WAAWP,EAAO;IAClB,MAAK;IACL,OAAOmB,MAAQ,KAAA,IAAY,KAAA,IAAa,EAAE,UAAUC,EAAMD,CAAG,EAAE;IAE9D;GACC,CAAA;EACD,CAAA;CACmB,CAAA;AAE9B,CAAC,GAkBKE,IAAef,EAAiD,SACpE,EACE,YAAS,IACT,aAAU,IACV,SACA,aACA,cACA,cACA,cACA,aACA,GAAGC,KAEL,GACA;CACA,IAAM,EAAE,gBAAa,YAASe,EAAWZ,CAAe,GAClDa,IAAQD,EAAWE,CAAoB,GACvCC,IAAKC,EAAM;CAEjB,QAAgC;EAC9B,IAAKH,GAEL,OADAA,EAAM,OAAOE,GAAIE,CAAM,SACV;GACX,EAAM,OAAOF,GAAI,EAAK;EACxB;CACF,GAAG;EAACF;EAAOE;EAAIE;CAAM,CAAC;CAEtB,IAAMC,IAAOC,IAAUC,EAAK,OAAO,KAC7BC,IAAO;EACX;EACA,WAAWnB,EAAGZ,EAAO,MAAMc,CAAS;EACpC,oBAAoBC;EACpB,aAAaC;EACb,eAAeW,KAAU,KAAA;EACzB,gBAAgBA,IAAU,SAAmB,KAAA;EAC7C,GAAGpB;CACL;CACA,OACE,kBAAC,MAAD;EAAI,WAAWK,EAAGZ,EAAO,MAAMa,EAAgB;GAAE;GAAW;EAAU,CAAC,CAAC;EACrE,UAAAmB,MAAS,KAAA,KAAaC,MAAa,KAAA,IAClC,kBAACL,GAAD;GAAM,GAAIG;GAAO;EAAe,CAAA,IAGhC,kBAACH,GAAD;GAAM,GAAIG;GAAV,UAAA;IACGC,MAAS,KAAA,IAIN,OAHF,kBAAC,QAAD;KAAM,WAAWhC,EAAO;KAAM,eAAY;KACvC,UAAAgC;IACG,CAAA;IAEPH,IAAU,kBAACC,EAAK,WAAN,EAAiB,YAAyB,CAAA,IAAII;IACxDD,MAAa,KAAA,IAAkE,OAAtD,kBAAC,QAAD;KAAM,WAAWjC,EAAO;KAAW,UAAAiC;IAAe,CAAA;GACxE;;CAEN,CAAA;AAER,CAAC,GAwCYE,IAAW,OAAO,OAAO9B,GAAc,EAAE,MAAMgB,EAAa,CAAC"}

package/dist/components/navigation/NavLinks/NavLinks.module.js

@@ -1,11 +1,21 @@
 //#region src/components/navigation/NavLinks/NavLinks.module.css
-var e = "kiln-NavLinks__nav", t = "kiln-NavLinks__list", n = "kiln-NavLinks__item", r = "kiln-NavLinks__link", i = {
+var e = "kiln-NavLinks__nav", t = "kiln-NavLinks__list", n = "kiln-NavLinks__item", r = "kiln-NavLinks__link", i = "kiln-NavLinks__icon", a = "kiln-NavLinks__label", o = "kiln-NavLinks__trailing", s = "kiln-NavLinks__group", c = "kiln-NavLinks__groupButton", l = "kiln-NavLinks__groupRow", u = "kiln-NavLinks__toggle", d = "kiln-NavLinks__chevron", f = "kiln-NavLinks__sublist", p = "kiln-NavLinks__flyout", m = {
 	nav: e,
 	list: t,
 	item: n,
-	link: r
+	link: r,
+	icon: i,
+	label: a,
+	trailing: o,
+	group: s,
+	groupButton: c,
+	groupRow: l,
+	toggle: u,
+	chevron: d,
+	sublist: f,
+	flyout: p
 };
 //#endregion
-export { i as default, n as item, r as link, t as list, e as nav };
+export { d as chevron, m as default, p as flyout, s as group, c as groupButton, l as groupRow, i as icon, n as item, a as label, r as link, t as list, e as nav, f as sublist, u as toggle, o as trailing };
 
 //# sourceMappingURL=NavLinks.module.js.map

package/dist/components/navigation/NavLinks/NavLinks.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavLinks.module.js","names":["nav","list","item","link","NavLinks_module_default"],"sources":["../../../../src/components/navigation/NavLinks/NavLinks.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --navlinks-marker   current-page marker colour, default var(--color-accent)\n *   --navlinks-gap      space between links, default var(--space-5) horizontal / 0 vertical\n *                       (the `gap` prop wins over it)\n */\n.nav {\n  min-inline-size: 0;\n}\n\n.list {\n  /* Defined here so an ancestor's --_gap can never leak in; the `gap` prop overrides inline. */\n  --_gap: var(--navlinks-gap, var(--space-5));\n\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: var(--_gap);\n  row-gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.nav[data-orientation='vertical'] .list {\n  --_gap: var(--navlinks-gap, 0px);\n  flex-direction: column;\n  flex-wrap: nowrap;\n  align-items: stretch;\n  gap: var(--_gap);\n}\n\n.item {\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n\n.link {\n  --_marker: var(--navlinks-marker, var(--color-accent));\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5em;\n  min-block-size: var(--control-md);\n  padding: 0;\n  color: var(--color-ink-muted);\n  font-family: var(--font-text);\n  /* Body size: people read and scan nav labels, so they never drop to the caption steps. */\n  font-size: var(--text-md);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  line-height: 1.2;\n  text-decoration: none;\n  white-space: nowrap;\n  -webkit-tap-highlight-color: transparent;\n  transition: color var(--dur-1) var(--ease-out);\n}\n\n@media (hover: hover) {\n  .link:hover {\n    color: var(--color-ink);\n  }\n}\n\n.link[data-active] {\n  color: var(--color-ink);\n}\n\n.link[data-size='sm'] {\n  min-block-size: var(--control-sm);\n  font-size: var(--text-sm);\n}\n\n.link:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* Horizontal: a bar under the label, the width of the word, sitting a little below it. */\n.link[data-orientation='horizontal']::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: calc(50% - 0.6lh - var(--space-2));\n  block-size: max(2px, var(--border-width-strong));\n  border-radius: 1px;\n  background: var(--_marker);\n  scale: 0 1;\n  transform-origin: left;\n  transition: scale var(--dur-2) var(--ease-spring);\n}\n.link[data-orientation='horizontal'][data-active]::after {\n  scale: 1 1;\n}\n\n/* Vertical: a dot in a reserved gutter, so labels never shift. */\n.link[data-orientation='vertical'] {\n  inline-size: 100%;\n  padding-inline-start: var(--space-4);\n}\n.link[data-orientation='vertical'][data-size='sm'] {\n  padding-inline-start: var(--space-3);\n}\n.link[data-orientation='vertical']::before {\n  content: '';\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 50%;\n  inline-size: 0.375rem;\n  block-size: 0.375rem;\n  margin-block-start: -0.1875rem;\n  border-radius: 50%;\n  background: var(--_marker);\n  scale: 0;\n  transition: scale var(--dur-2) var(--ease-spring);\n}\n.link[data-orientation='vertical'][data-active]::before {\n  scale: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .link::before,\n  .link::after {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"NavLinks.module.js","names":["nav","list","item","link","icon","label","trailing","group","groupButton","groupRow","toggle","chevron","sublist","flyout","NavLinks_module_default"],"sources":["../../../../src/components/navigation/NavLinks/NavLinks.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --navlinks-marker   current-page marker colour, default var(--color-accent)\n *   --navlinks-gap      space between links, default var(--space-5) horizontal / 0 vertical\n *                       (the `gap` prop wins over it)\n *   --navlinks-indent   how far each level of a group is indented, default var(--space-3)\n *   --navlinks-guide    the guide rule down a group's links, default var(--color-line)\n */\n.nav {\n  min-inline-size: 0;\n}\n\n.list {\n  /* Defined here so an ancestor's --_gap can never leak in; the `gap` prop overrides inline. */\n  --_gap: var(--navlinks-gap, var(--space-5));\n\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: var(--_gap);\n  row-gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.nav[data-orientation='vertical'] .list {\n  --_gap: var(--navlinks-gap, 0px);\n  flex-direction: column;\n  flex-wrap: nowrap;\n  align-items: stretch;\n  gap: var(--_gap);\n}\n\n.item {\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n\n.link {\n  --_marker: var(--navlinks-marker, var(--color-accent));\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5em;\n  min-block-size: var(--control-md);\n  padding: 0;\n  color: var(--color-ink-muted);\n  font-family: var(--font-text);\n  /* Body size: people read and scan nav labels, so they never drop to the caption steps. */\n  font-size: var(--text-md);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  line-height: 1.2;\n  text-decoration: none;\n  white-space: nowrap;\n  -webkit-tap-highlight-color: transparent;\n  transition: color var(--dur-1) var(--ease-out);\n}\n\n@media (hover: hover) {\n  .link:hover {\n    color: var(--color-ink);\n  }\n}\n\n.link[data-active] {\n  color: var(--color-ink);\n}\n\n.link[data-size='sm'] {\n  min-block-size: var(--control-sm);\n  font-size: var(--text-sm);\n}\n\n.link:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* Horizontal: a bar under the label, the width of the word, sitting a little below it. */\n.link[data-orientation='horizontal']::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: calc(50% - 0.6lh - var(--space-2));\n  block-size: max(2px, var(--border-width-strong));\n  border-radius: 1px;\n  background: var(--_marker);\n  scale: 0 1;\n  transform-origin: left;\n  transition: scale var(--dur-2) var(--ease-spring);\n}\n.link[data-orientation='horizontal'][data-active]::after {\n  scale: 1 1;\n}\n\n/* Vertical: a dot in a reserved gutter, so labels never shift. */\n.link[data-orientation='vertical'] {\n  inline-size: 100%;\n  padding-inline-start: var(--space-4);\n}\n.link[data-orientation='vertical'][data-size='sm'] {\n  padding-inline-start: var(--space-3);\n}\n.link[data-orientation='vertical']::before {\n  content: '';\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 50%;\n  inline-size: 0.375rem;\n  block-size: 0.375rem;\n  margin-block-start: -0.1875rem;\n  border-radius: 50%;\n  background: var(--_marker);\n  scale: 0;\n  transition: scale var(--dur-2) var(--ease-spring);\n}\n.link[data-orientation='vertical'][data-active]::before {\n  scale: 1;\n}\n\n/* ── Icons and trailing counts on items and groups ───────────────────────── */\n.icon {\n  display: inline-flex;\n  flex: none;\n  color: var(--color-ink-subtle);\n  font-size: 1.25em;\n}\n.link[data-active] .icon,\n.link[data-contains-active] .icon {\n  color: inherit;\n}\n.label {\n  min-inline-size: 0;\n}\n.trailing {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-2);\n  font-variant-numeric: tabular-nums lining-nums;\n}\n.link[data-orientation='vertical'] .trailing {\n  margin-inline-start: auto;\n}\n\n/* ── Groups ────────────────────────────────────────────────────────────── */\n.group {\n  flex-direction: column;\n}\n.nav[data-orientation='horizontal'] .group {\n  flex-direction: row;\n}\n\n/* The group's button is a .link with the button chrome taken off. */\n.groupButton {\n  border: 0;\n  background: transparent;\n  text-align: start;\n  cursor: pointer;\n}\n.link[data-contains-active] {\n  color: var(--color-ink);\n}\n\n/* A linked group: the label is a link, the chevron its own button. */\n.groupRow {\n  display: flex;\n  align-items: center;\n  min-inline-size: 0;\n}\n.groupRow > .link {\n  flex: 1 1 auto;\n  min-inline-size: 0;\n}\n.toggle {\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  inline-size: var(--control-sm);\n  block-size: var(--control-sm);\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-action);\n  background: transparent;\n  color: var(--color-ink-muted);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n@media (hover: hover) {\n  .toggle:hover {\n    color: var(--color-ink);\n  }\n}\n.toggle:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.chevron {\n  flex: none;\n  font-size: 1rem;\n  color: var(--color-ink-subtle);\n  transition: rotate var(--dur-2) var(--ease-spring);\n}\n.groupButton .chevron {\n  margin-inline-start: auto;\n}\n/* With a trailing count, the count takes the free space and the chevron follows it. */\n.groupButton .trailing ~ .chevron {\n  margin-inline-start: 0;\n}\n.nav[data-orientation='horizontal'] .groupButton .chevron {\n  margin-inline-start: 0;\n}\n[data-state='open'] > .chevron {\n  rotate: 180deg;\n}\n\n/* Closed and holding the current page: a ring where the dot would be. */\n.link[data-orientation='vertical'][data-contains-active][data-state='closed']::before {\n  background: transparent;\n  box-shadow: inset 0 0 0 1.5px var(--_marker);\n  scale: 1;\n}\n/* Horizontal: the bar under a group that holds the current page. */\n.link[data-orientation='horizontal'][data-contains-active]::after {\n  scale: 1 1;\n}\n\n/* Nested links: indented, on a guide rule, labels at the same size as the level above. */\n.sublist {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  margin-inline-start: calc(var(--space-4) - var(--border-width));\n  padding: 0;\n  padding-inline-start: var(--navlinks-indent, var(--space-3));\n  border-inline-start: var(--border-width) solid var(--navlinks-guide, var(--color-line));\n  list-style: none;\n}\n.nav[data-size='sm'] .sublist {\n  margin-inline-start: calc(var(--space-3) - var(--border-width));\n}\n\n/* Horizontal groups open in a panel: the links listed down it, with no guide rule. */\n.flyout {\n  min-inline-size: 12rem;\n  padding-block: var(--space-2);\n}\n.sublist[data-flyout] {\n  margin-inline-start: 0;\n  padding-inline: var(--space-3);\n  border-inline-start: 0;\n}\n.sublist[data-flyout] .sublist {\n  margin-inline-start: calc(var(--space-4) - var(--border-width));\n  padding-inline: var(--navlinks-indent, var(--space-3)) 0;\n  border-inline-start: var(--border-width) solid var(--navlinks-guide, var(--color-line));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .link::before,\n  .link::after,\n  .chevron {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/navigation/NavLinks/NavLinksGroup.d.ts

@@ -0,0 +1,49 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import { type VisibilityProps } from '../../../utils/visibility.js';
+export interface NavLinksGroupProps extends Omit<HTMLAttributes<HTMLLIElement>, 'children'>, VisibilityProps {
+    /** The group's name: "Settings", "Reports". */
+    label: ReactNode;
+    /** The group's links, `NavLinks.Item`s, and further groups. */
+    children: ReactNode;
+    /** A glyph before the label. Decorative: the label names the group. */
+    icon?: ReactNode;
+    /** A count or status after the label, such as a `Badge` or a `StatusDot`. */
+    trailing?: ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /**
+     * Uncontrolled initial state. Default: open when the group holds the current page. An
+     * uncontrolled group also opens when the current page moves into it.
+     */
+    defaultOpen?: boolean;
+    /** Runs when the group's toggle asks to open or close. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Makes the label a link to the group's own page (a section's landing page), with a separate
+     * button beside it to open and close the group.
+     */
+    href?: string;
+    /**
+     * Like `href`, for a router: the link element to render the label as, such as
+     * `<Link to="/settings" />`. The label becomes its content.
+     */
+    link?: ReactElement;
+    /** The group's own page (`href` or `link`) is the current page. */
+    active?: boolean;
+    /**
+     * Accessible name of the open-and-close button beside a linked label. Default: the label's own
+     * text.
+     */
+    toggleLabel?: string;
+}
+/**
+ * A group of links in a `NavLinks`: a section with child pages, and further groups.
+ *
+ * @privateRemarks
+ * Vertical: a disclosure button and a nested list in a Collapse (the disclosure-navigation
+ * pattern, not a tree role, so links stay links). Horizontal: the same button opens a Popover with
+ * the links listed vertically inside. While it's closed, the links stay mounted in a `hidden` copy so
+ * items wrapped in your own components still report in and the group can show it holds the current
+ * page. Not DropdownMenu: ARIA menus are for commands and drop link semantics such as aria-current.
+ */
+export declare const NavLinksGroup: import("react").ForwardRefExoticComponent<NavLinksGroupProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/components/navigation/NavLinks/NavLinksGroup.js

@@ -0,0 +1,185 @@
+import { cx as e } from "../../../utils/cx.js";
+import { ChevronDownIcon as t } from "../../../icons/icons.js";
+import { visibilityClass as n } from "../../../utils/visibility.js";
+import { useLatest as ee } from "../../inputs/internal/useLatest.js";
+import { Collapse as r } from "../../layout/Collapse/Collapse.js";
+import { Popover as i } from "../../overlays/Popover/Popover.js";
+import { NavLinksContext as a, NavLinksGroupContext as o, holdsActive as te } from "./context.js";
+import s from "./NavLinks.module.js";
+import { onTreeKeyDown as ne } from "./treeKeys.js";
+import { cloneElement as c, forwardRef as l, useCallback as u, useContext as d, useEffect as f, useId as p, useLayoutEffect as m, useMemo as re, useState as h } from "react";
+import { Fragment as ie, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Slot as v } from "radix-ui";
+//#region src/components/navigation/NavLinks/NavLinksGroup.tsx
+var y = typeof document > "u" ? f : m;
+function b() {
+	return /* @__PURE__ */ g(t, {
+		className: s.chevron,
+		"aria-hidden": !0
+	});
+}
+var x = l(function({ label: t, children: l, icon: m, trailing: x, open: S, defaultOpen: ae, onOpenChange: oe, href: C, link: w, active: T = !1, toggleLabel: E, hideBelow: se, hideAbove: ce, className: D, ...O }, k) {
+	let { orientation: A, size: j, treeKeysRef: M } = d(a);
+	f(() => {
+		M && (M.current = ne);
+	}, [M]);
+	let N = d(o), P = p(), F = `${P}-label`, I = `${P}-panel`, [L, le] = h([]), R = u((e, t) => {
+		le((n) => t ? n.includes(e) ? n : [...n, e] : n.includes(e) ? n.filter((t) => t !== e) : n);
+	}, []), z = re(() => ({ report: R }), [R]), B = L.length > 0 || te(l);
+	y(() => {
+		if (N) return N.report(P, T || B), () => {
+			N.report(P, !1);
+		};
+	}, [
+		N,
+		P,
+		T,
+		B
+	]);
+	let V = A === "vertical", [H, U] = h(ae ?? (V && B)), [ue, de] = h(B);
+	ue !== B && (de(B), B && V && S === void 0 && U(!0));
+	let W = S ?? H, G = ee(oe), K = u((e) => {
+		S === void 0 && U(e), G.current?.(e);
+	}, [S, G]), q = C !== void 0 || w !== void 0, J = {
+		"data-orientation": A,
+		"data-size": j
+	}, Y = /* @__PURE__ */ _(ie, { children: [
+		m ? /* @__PURE__ */ g("span", {
+			className: s.icon,
+			"aria-hidden": "true",
+			children: m
+		}) : null,
+		/* @__PURE__ */ g("span", {
+			className: s.label,
+			children: t
+		}),
+		x === void 0 ? null : /* @__PURE__ */ g("span", {
+			className: s.trailing,
+			children: x
+		})
+	] }), X = q ? /* @__PURE__ */ g(v.Root, {
+		id: F,
+		className: s.link,
+		...J,
+		"data-active": T || void 0,
+		"data-contains-active": B || void 0,
+		"data-state": W ? "open" : "closed",
+		"aria-current": T ? "page" : void 0,
+		children: w ? c(w, void 0, Y) : /* @__PURE__ */ g("a", {
+			href: C,
+			children: Y
+		})
+	}) : null, Z = {
+		"aria-expanded": W,
+		"data-state": W ? "open" : "closed",
+		"data-contains-active": B || void 0
+	}, Q = e(s.item, s.group, n({
+		hideBelow: se,
+		hideAbove: ce
+	}), D);
+	if (!V) {
+		let t = /* @__PURE__ */ g(a.Provider, {
+			value: {
+				orientation: "vertical",
+				size: j
+			},
+			children: /* @__PURE__ */ g(o.Provider, {
+				value: z,
+				children: /* @__PURE__ */ g("ul", {
+					className: s.sublist,
+					role: "list",
+					"data-flyout": "",
+					children: l
+				})
+			})
+		});
+		return /* @__PURE__ */ _("li", {
+			ref: k,
+			className: Q,
+			"data-navlinks-group": "",
+			...O,
+			children: [/* @__PURE__ */ _(i, {
+				open: W,
+				onOpenChange: K,
+				children: [q ? /* @__PURE__ */ _("span", {
+					className: s.groupRow,
+					"data-navlinks-row": "",
+					children: [X, /* @__PURE__ */ g(i.Trigger, {
+						className: s.toggle,
+						...J,
+						...Z,
+						"aria-label": E,
+						"aria-labelledby": E ? void 0 : F,
+						children: /* @__PURE__ */ g(b, {})
+					})]
+				}) : /* @__PURE__ */ _(i.Trigger, {
+					id: F,
+					className: e(s.link, s.groupButton),
+					...J,
+					...Z,
+					children: [Y, /* @__PURE__ */ g(b, {})]
+				}), /* @__PURE__ */ g(i.Content, {
+					align: "start",
+					className: s.flyout,
+					"aria-labelledby": F,
+					onClick: (e) => {
+						e.target.closest("a") && K(!1);
+					},
+					children: t
+				})]
+			}), W ? null : /* @__PURE__ */ g("div", {
+				hidden: !0,
+				children: t
+			})]
+		});
+	}
+	let $ = () => {
+		K(!W);
+	};
+	return /* @__PURE__ */ _("li", {
+		ref: k,
+		className: Q,
+		"data-navlinks-group": "",
+		...O,
+		children: [q ? /* @__PURE__ */ _("span", {
+			className: s.groupRow,
+			"data-navlinks-row": "",
+			children: [X, /* @__PURE__ */ g("button", {
+				type: "button",
+				className: s.toggle,
+				...J,
+				...Z,
+				"aria-controls": I,
+				"aria-label": E,
+				"aria-labelledby": E ? void 0 : F,
+				onClick: $,
+				children: /* @__PURE__ */ g(b, {})
+			})]
+		}) : /* @__PURE__ */ _("button", {
+			type: "button",
+			id: F,
+			className: e(s.link, s.groupButton),
+			...J,
+			...Z,
+			"aria-controls": I,
+			onClick: $,
+			children: [Y, /* @__PURE__ */ g(b, {})]
+		}), /* @__PURE__ */ g(r, {
+			open: W,
+			id: I,
+			"data-navlinks-panel": "",
+			children: /* @__PURE__ */ g(o.Provider, {
+				value: z,
+				children: /* @__PURE__ */ g("ul", {
+					className: s.sublist,
+					role: "list",
+					children: l
+				})
+			})
+		})]
+	});
+});
+//#endregion
+export { x as NavLinksGroup };
+
+//# sourceMappingURL=NavLinksGroup.js.map

package/dist/components/navigation/NavLinks/NavLinksGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavLinksGroup.js","names":["styles","_Fragment","Popover","Popover$1","NavLinks_module_default","Fragment$1","useIsomorphicLayoutEffect","useEffect","useLayoutEffect","Chevron","ChevronDownIcon","NavLinksGroup","forwardRef","openProp","rest","useContext","NavLinksContext","treeKeysRef","onTreeKeyDown","parent","NavLinksGroupContext","id","useId","labelId","panelId","reported","setReported","useState","report","useCallback","isActive","prev","child","entry","groupContext","useMemo","containsActive","holdsActive","children","active","vertical","orientation","uncontrolled","setUncontrolled","defaultOpen","held","setHeld","open","change","useLatest","onOpenChange","setOpen","next","linked","href","link","shared","size","labelContent","icon","label","trailing","linkElement","Slot","cloneElement","toggleState","item","cx","visibilityClass","className","flyout","toggleLabel","event","toggle","Collapse"],"sources":["../../../../src/components/navigation/NavLinks/NavLinksGroup.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useState,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\nimport { ChevronDownIcon } from '#icons'\nimport { Collapse } from '#components/layout/Collapse'\nimport { Popover } from '#components/overlays/Popover'\nimport { useLatest } from '#components/inputs/internal/useLatest'\nimport {\n  NavLinksContext,\n  NavLinksGroupContext,\n  holdsActive,\n  type NavLinksGroupContextValue,\n} from './context'\nimport { onTreeKeyDown } from './treeKeys'\nimport styles from './NavLinks.module.css'\n\nconst useIsomorphicLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect\n\nexport interface NavLinksGroupProps\n  extends Omit<HTMLAttributes<HTMLLIElement>, 'children'>, VisibilityProps {\n  /** The group's name: \"Settings\", \"Reports\". */\n  label: ReactNode\n  /** The group's links, `NavLinks.Item`s, and further groups. */\n  children: ReactNode\n  /** A glyph before the label. Decorative: the label names the group. */\n  icon?: ReactNode\n  /** A count or status after the label, such as a `Badge` or a `StatusDot`. */\n  trailing?: ReactNode\n  /** Controlled open state. */\n  open?: boolean\n  /**\n   * Uncontrolled initial state. Default: open when the group holds the current page. An\n   * uncontrolled group also opens when the current page moves into it.\n   */\n  defaultOpen?: boolean\n  /** Runs when the group's toggle asks to open or close. */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Makes the label a link to the group's own page (a section's landing page), with a separate\n   * button beside it to open and close the group.\n   */\n  href?: string\n  /**\n   * Like `href`, for a router: the link element to render the label as, such as\n   * `<Link to=\"/settings\" />`. The label becomes its content.\n   */\n  link?: ReactElement\n  /** The group's own page (`href` or `link`) is the current page. */\n  active?: boolean\n  /**\n   * Accessible name of the open-and-close button beside a linked label. Default: the label's own\n   * text.\n   */\n  toggleLabel?: string\n}\n\nfunction Chevron() {\n  return <ChevronDownIcon className={styles.chevron} aria-hidden />\n}\n\n/**\n * A group of links in a `NavLinks`: a section with child pages, and further groups.\n *\n * @privateRemarks\n * Vertical: a disclosure button and a nested list in a Collapse (the disclosure-navigation\n * pattern, not a tree role, so links stay links). Horizontal: the same button opens a Popover with\n * the links listed vertically inside. While it's closed, the links stay mounted in a `hidden` copy so\n * items wrapped in your own components still report in and the group can show it holds the current\n * page. Not DropdownMenu: ARIA menus are for commands and drop link semantics such as aria-current.\n */\nexport const NavLinksGroup = forwardRef<HTMLLIElement, NavLinksGroupProps>(function NavLinksGroup(\n  {\n    label,\n    children,\n    icon,\n    trailing,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    href,\n    link,\n    active = false,\n    toggleLabel,\n    hideBelow,\n    hideAbove,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const { orientation, size, treeKeysRef } = useContext(NavLinksContext)\n  // A nav with a group gets the tree-style arrow keys. Every group sets the same handler, and it\n  // does nothing once the nav has no groups, so none of them clears it.\n  useEffect(() => {\n    if (treeKeysRef) treeKeysRef.current = onTreeKeyDown\n  }, [treeKeysRef])\n  const parent = useContext(NavLinksGroupContext)\n  const id = useId()\n  const labelId = `${id}-label`\n  const panelId = `${id}-panel`\n\n  // Which descendants have said they're the current page (see NavLinks.Item).\n  const [reported, setReported] = useState<string[]>([])\n  const report = useCallback((child: string, isActive: boolean) => {\n    setReported((prev) =>\n      isActive\n        ? prev.includes(child)\n          ? prev\n          : [...prev, child]\n        : prev.includes(child)\n          ? prev.filter((entry) => entry !== child)\n          : prev,\n    )\n  }, [])\n  const groupContext = useMemo<NavLinksGroupContextValue>(() => ({ report }), [report])\n  const containsActive = reported.length > 0 || holdsActive(children)\n\n  // Tell the groups around this one, so a closed parent can show it holds the current page.\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    parent.report(id, active || containsActive)\n    return () => {\n      parent.report(id, false)\n    }\n  }, [parent, id, active, containsActive])\n\n  const vertical = orientation === 'vertical'\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen ?? (vertical && containsActive))\n  // An uncontrolled vertical group opens when the current page moves into it.\n  const [held, setHeld] = useState(containsActive)\n  if (held !== containsActive) {\n    setHeld(containsActive)\n    if (containsActive && vertical && openProp === undefined) setUncontrolled(true)\n  }\n  const open = openProp ?? uncontrolled\n  const change = useLatest(onOpenChange)\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (openProp === undefined) setUncontrolled(next)\n      change.current?.(next)\n    },\n    [openProp, change],\n  )\n\n  const linked = href !== undefined || link !== undefined\n  const shared = {\n    'data-orientation': orientation,\n    'data-size': size,\n  }\n  const labelContent = (\n    <>\n      {icon ? (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : null}\n      <span className={styles.label}>{label}</span>\n      {trailing !== undefined ? <span className={styles.trailing}>{trailing}</span> : null}\n    </>\n  )\n  const linkElement = linked ? (\n    <Slot.Root\n      id={labelId}\n      className={styles.link}\n      {...shared}\n      data-active={active || undefined}\n      data-contains-active={containsActive || undefined}\n      data-state={open ? 'open' : 'closed'}\n      aria-current={active ? 'page' : undefined}\n    >\n      {link ? cloneElement(link, undefined, labelContent) : <a href={href}>{labelContent}</a>}\n    </Slot.Root>\n  ) : null\n  const toggleState = {\n    'aria-expanded': open,\n    'data-state': open ? 'open' : 'closed',\n    'data-contains-active': containsActive || undefined,\n  }\n\n  const item = cx(styles.item, styles.group, visibilityClass({ hideBelow, hideAbove }), className)\n\n  if (!vertical) {\n    const flyout = (\n      <NavLinksContext.Provider value={{ orientation: 'vertical', size }}>\n        <NavLinksGroupContext.Provider value={groupContext}>\n          <ul className={styles.sublist} role=\"list\" data-flyout=\"\">\n            {children}\n          </ul>\n        </NavLinksGroupContext.Provider>\n      </NavLinksContext.Provider>\n    )\n    return (\n      <li ref={ref} className={item} data-navlinks-group=\"\" {...rest}>\n        <Popover open={open} onOpenChange={setOpen}>\n          {linked ? (\n            <span className={styles.groupRow} data-navlinks-row=\"\">\n              {linkElement}\n              <Popover.Trigger\n                className={styles.toggle}\n                {...shared}\n                {...toggleState}\n                aria-label={toggleLabel}\n                aria-labelledby={toggleLabel ? undefined : labelId}\n              >\n                <Chevron />\n              </Popover.Trigger>\n            </span>\n          ) : (\n            <Popover.Trigger\n              id={labelId}\n              className={cx(styles.link, styles.groupButton)}\n              {...shared}\n              {...toggleState}\n            >\n              {labelContent}\n              <Chevron />\n            </Popover.Trigger>\n          )}\n          <Popover.Content\n            align=\"start\"\n            className={styles.flyout}\n            aria-labelledby={labelId}\n            onClick={(event) => {\n              // Following a link closes the flyout, even when the router keeps the page.\n              if ((event.target as Element).closest('a')) setOpen(false)\n            }}\n          >\n            {flyout}\n          </Popover.Content>\n        </Popover>\n        {open ? null : <div hidden>{flyout}</div>}\n      </li>\n    )\n  }\n\n  const toggle = () => {\n    setOpen(!open)\n  }\n\n  return (\n    <li ref={ref} className={item} data-navlinks-group=\"\" {...rest}>\n      {linked ? (\n        <span className={styles.groupRow} data-navlinks-row=\"\">\n          {linkElement}\n          <button\n            type=\"button\"\n            className={styles.toggle}\n            {...shared}\n            {...toggleState}\n            aria-controls={panelId}\n            aria-label={toggleLabel}\n            aria-labelledby={toggleLabel ? undefined : labelId}\n            onClick={toggle}\n          >\n            <Chevron />\n          </button>\n        </span>\n      ) : (\n        <button\n          type=\"button\"\n          id={labelId}\n          className={cx(styles.link, styles.groupButton)}\n          {...shared}\n          {...toggleState}\n          aria-controls={panelId}\n          onClick={toggle}\n        >\n          {labelContent}\n          <Chevron />\n        </button>\n      )}\n      <Collapse open={open} id={panelId} data-navlinks-panel=\"\">\n        <NavLinksGroupContext.Provider value={groupContext}>\n          <ul className={styles.sublist} role=\"list\">\n            {children}\n          </ul>\n        </NavLinksGroupContext.Provider>\n      </Collapse>\n    </li>\n  )\n})\n"],"mappings":"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"}

package/dist/components/navigation/NavLinks/context.d.ts

@@ -0,0 +1,28 @@
+import { type KeyboardEvent, type ReactNode } from 'react';
+export type NavLinksOrientation = 'horizontal' | 'vertical';
+export type NavLinksSize = 'sm' | 'md';
+/** The tree-style arrow keys of a vertical nav with groups. */
+export type TreeKeyDown = (event: KeyboardEvent<HTMLElement>) => void;
+export interface NavLinksContextValue {
+    orientation: NavLinksOrientation;
+    size: NavLinksSize;
+    /**
+     * Where a group puts the arrow-key handler for the nav it's in. Groups bring it, so a nav
+     * without them doesn't carry it.
+     */
+    treeKeysRef?: {
+        current: TreeKeyDown | null;
+    };
+}
+export declare const NavLinksContext: import("react").Context<NavLinksContextValue>;
+/** How an item or a nested group tells the groups around it that it's the current page. */
+export interface NavLinksGroupContextValue {
+    report: (id: string, active: boolean) => void;
+}
+export declare const NavLinksGroupContext: import("react").Context<NavLinksGroupContextValue | null>;
+/**
+ * Whether any element under `children` is marked `active`, read from the elements themselves, so
+ * the server render already knows which groups hold the current page. Items wrapped in your own
+ * components are caught on the client, when they report in.
+ */
+export declare function holdsActive(children: ReactNode): boolean;