@dalcvil/steam-green-react 0.1.0 → 1.0.0

package/dist/components/MenuBar/MenuBar.js

@@ -0,0 +1,129 @@
+import { Menu } from "../Menu/Menu.js";
+import { forwardRef, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./MenuBar.css";
+//#region src/components/MenuBar/MenuBar.tsx
+/** A strip of top-level words, each opening a {@link Menu} — `role="menubar"`.
+*
+*  One documented departure from the VGUI original: the resting word colour is
+*  `--vgui-text-strong` rather than `TitleDimText` (`#889180`), which is only
+*  2.31:1 on a `GreenBG` panel. The state ladder is therefore two steps,
+*  white → maize, instead of dim → white → maize.
+*/
+var MenuBar = forwardRef(function MenuBar({ items, orientation = "horizontal", onOpenChange, className, ...rest }, ref) {
+	const baseId = useId();
+	const itemRefs = useRef([]);
+	const isTabKey = useRef(false);
+	const [openId, setOpenId] = useState(void 0);
+	const [activeIndex, setActiveIndex] = useState(0);
+	const horizontal = orientation !== "vertical";
+	const openKey = horizontal ? "ArrowDown" : "ArrowRight";
+	const moveKeys = horizontal ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+	const firstEnabled = items.findIndex((item) => !item.disabled);
+	const current = items[activeIndex] && !items[activeIndex].disabled ? activeIndex : firstEnabled;
+	const openIndex = items.findIndex((item) => item.id === openId);
+	const openWord = (index) => {
+		const spec = items[index];
+		if (!spec || spec.disabled) return;
+		setActiveIndex(index);
+		if (spec.items.length === 0) {
+			setOpenId(void 0);
+			onOpenChange?.(void 0);
+			return;
+		}
+		setOpenId(spec.id);
+		onOpenChange?.(spec.id);
+	};
+	const closeMenu = (index) => {
+		setOpenId(void 0);
+		onOpenChange?.(void 0);
+		if (!isTabKey.current) itemRefs.current[index]?.focus();
+	};
+	const moveWord = (delta) => {
+		const enabled = items.map((item, index) => ({
+			item,
+			index
+		})).filter(({ item }) => !item.disabled);
+		if (enabled.length === 0) return;
+		const position = enabled.findIndex(({ index }) => index === current);
+		const next = enabled[(position === -1 ? 0 : position + delta + enabled.length) % enabled.length];
+		setActiveIndex(next.index);
+		itemRefs.current[next.index]?.focus();
+		if (openId !== void 0) openWord(next.index);
+	};
+	const onKeyDownCapture = (event) => {
+		isTabKey.current = event.key === "Tab";
+	};
+	const onKeyDown = (event) => {
+		const { key } = event;
+		const index = openIndex === -1 ? current : openIndex;
+		if (key === openKey) {
+			if (openId === void 0) openWord(index);
+			else return;
+		} else if (moveKeys.includes(key)) moveWord(key === moveKeys[0] ? -1 : 1);
+		else if (key === "Escape") {
+			if (openId === void 0) return;
+			closeMenu(index);
+		} else if ((key === "Enter" || key === " ") && openId === void 0) openWord(index);
+		else return;
+		event.preventDefault();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref,
+		role: "menubar",
+		"aria-orientation": orientation,
+		className: [
+			"vgui-menubar",
+			"vgui-menu-bar",
+			horizontal ? null : "vgui-menubar--vertical",
+			className
+		].filter(Boolean).join(" "),
+		onKeyDownCapture,
+		onKeyDown,
+		children: items.map((spec, index) => {
+			const isOpen = openId === spec.id;
+			const wordId = `${baseId}-menubar-item-${spec.id}`;
+			const menuId = `${baseId}-menu-${spec.id}`;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "vgui-menubar__group",
+				children: [/* @__PURE__ */ jsx("button", {
+					id: wordId,
+					ref: (node) => {
+						itemRefs.current[index] = node;
+					},
+					type: "button",
+					role: "menuitem",
+					className: "vgui-menubar__item",
+					"aria-haspopup": "menu",
+					"aria-expanded": isOpen,
+					"aria-controls": menuId,
+					accessKey: spec.accessKey,
+					disabled: spec.disabled,
+					tabIndex: current === index ? 0 : -1,
+					onFocus: () => setActiveIndex(index),
+					onClick: () => {
+						if (isOpen) closeMenu(index);
+						else openWord(index);
+					},
+					onMouseEnter: () => {
+						if (openId !== void 0 && !isOpen) openWord(index);
+					},
+					children: spec.label
+				}), isOpen ? /* @__PURE__ */ jsx(Menu, {
+					id: menuId,
+					className: "vgui-menubar__menu",
+					items: spec.items,
+					labelledBy: wordId,
+					orientation: horizontal ? "auto" : "vertical",
+					onClose: () => closeMenu(index)
+				}) : null]
+			}, spec.id);
+		})
+	});
+});
+MenuBar.displayName = "MenuBar";
+//#endregion
+export { MenuBar };
+
+//# sourceMappingURL=MenuBar.js.map

package/dist/components/MenuBar/MenuBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuBar.js","names":[],"sources":["../../../src/components/MenuBar/MenuBar.tsx"],"sourcesContent":["import { forwardRef, useId, useRef, useState } from 'react'\nimport type { HTMLAttributes, KeyboardEvent as ReactKeyboardEvent } from 'react'\n\nimport { Menu } from '../Menu/Menu'\nimport type { MenuItemSpec } from '../Menu/Menu'\n\nimport './MenuBar.css'\n\n/** One top-level word in a {@link MenuBar}. */\nexport interface MenuBarItemSpec {\n  /** Stable identity and React key. */\n  id: string\n  /** The visible word, e.g. \"File\". */\n  label: string\n  /** Access key, announced and bound to Alt+<key>. */\n  accessKey?: string\n  /** Menu contents; see Menu's MenuItemSpec[]. */\n  items: MenuItemSpec[]\n  /** Renders a disabled, unopenable word. */\n  disabled?: boolean\n}\n\n/** Props of {@link MenuBar}. */\nexport interface MenuBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Top-level words, in order. */\n  items: MenuBarItemSpec[]\n  /** Layout direction. Menu bars are horizontal; vertical exists for side panes. */\n  orientation?: 'horizontal' | 'vertical'\n  /** Called with the open item's id, or undefined when everything closed. */\n  onOpenChange?: (openId: string | undefined) => void\n}\n\n/** A strip of top-level words, each opening a {@link Menu} — `role=\"menubar\"`.\n *\n *  One documented departure from the VGUI original: the resting word colour is\n *  `--vgui-text-strong` rather than `TitleDimText` (`#889180`), which is only\n *  2.31:1 on a `GreenBG` panel. The state ladder is therefore two steps,\n *  white → maize, instead of dim → white → maize.\n */\nexport const MenuBar = forwardRef<HTMLDivElement, MenuBarProps>(function MenuBar(\n  { items, orientation = 'horizontal', onOpenChange, className, ...rest },\n  ref,\n) {\n  const baseId = useId()\n  const itemRefs = useRef<Array<HTMLButtonElement | null>>([])\n  // Set by the capture handler, so the Tab-close path does not pull focus back.\n  const isTabKey = useRef(false)\n\n  const [openId, setOpenId] = useState<string | undefined>(undefined)\n  const [activeIndex, setActiveIndex] = useState(0)\n\n  const horizontal = orientation !== 'vertical'\n  const openKey = horizontal ? 'ArrowDown' : 'ArrowRight'\n  const moveKeys = horizontal ? ['ArrowLeft', 'ArrowRight'] : ['ArrowUp', 'ArrowDown']\n\n  const firstEnabled = items.findIndex((item) => !item.disabled)\n  const current =\n    items[activeIndex] && !items[activeIndex].disabled ? activeIndex : firstEnabled\n  const openIndex = items.findIndex((item) => item.id === openId)\n\n  const openWord = (index: number) => {\n    const spec = items[index]\n\n    if (!spec || spec.disabled) return\n\n    setActiveIndex(index)\n\n    // A word with no rows cannot open; moving onto it closes what was open.\n    if (spec.items.length === 0) {\n      setOpenId(undefined)\n      onOpenChange?.(undefined)\n      return\n    }\n\n    setOpenId(spec.id)\n    onOpenChange?.(spec.id)\n  }\n\n  const closeMenu = (index: number) => {\n    setOpenId(undefined)\n    onOpenChange?.(undefined)\n\n    // Escape and activation hand focus back to the word the menu hung off.\n    // Tab must not: the user asked to leave.\n    if (!isTabKey.current) itemRefs.current[index]?.focus()\n  }\n\n  const moveWord = (delta: number) => {\n    const enabled = items\n      .map((item, index) => ({ item, index }))\n      .filter(({ item }) => !item.disabled)\n\n    if (enabled.length === 0) return\n\n    const position = enabled.findIndex(({ index }) => index === current)\n    const next = enabled[(position === -1 ? 0 : position + delta + enabled.length) % enabled.length]\n\n    setActiveIndex(next.index)\n    itemRefs.current[next.index]?.focus()\n\n    // Menu switching: while a menu is open, arrowing to a sibling opens its menu.\n    if (openId !== undefined) openWord(next.index)\n  }\n\n  const onKeyDownCapture = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    isTabKey.current = event.key === 'Tab'\n  }\n\n  const onKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    const { key } = event\n    const index = openIndex === -1 ? current : openIndex\n\n    if (key === openKey) {\n      // While a menu is open the Menu itself consumes Up/Down, so nothing here.\n      if (openId === undefined) openWord(index)\n      else return\n    } else if (moveKeys.includes(key)) {\n      moveWord(key === moveKeys[0] ? -1 : 1)\n    } else if (key === 'Escape') {\n      if (openId === undefined) return\n      closeMenu(index)\n    } else if ((key === 'Enter' || key === ' ') && openId === undefined) {\n      openWord(index)\n    } else {\n      return\n    }\n\n    event.preventDefault()\n  }\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      role=\"menubar\"\n      aria-orientation={orientation}\n      className={[\n        'vgui-menubar',\n        // The spec names the root `.vgui-menubar`; the library's kebab-case\n        // convention would make it `.vgui-menu-bar`. Both are applied.\n        'vgui-menu-bar',\n        horizontal ? null : 'vgui-menubar--vertical',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onKeyDownCapture={onKeyDownCapture}\n      onKeyDown={onKeyDown}\n    >\n      {items.map((spec, index) => {\n        const isOpen = openId === spec.id\n        const wordId = `${baseId}-menubar-item-${spec.id}`\n        const menuId = `${baseId}-menu-${spec.id}`\n\n        return (\n          <div key={spec.id} className=\"vgui-menubar__group\">\n            <button\n              id={wordId}\n              ref={(node) => {\n                itemRefs.current[index] = node\n              }}\n              type=\"button\"\n              role=\"menuitem\"\n              className=\"vgui-menubar__item\"\n              aria-haspopup=\"menu\"\n              aria-expanded={isOpen}\n              aria-controls={menuId}\n              accessKey={spec.accessKey}\n              disabled={spec.disabled}\n              tabIndex={current === index ? 0 : -1}\n              onFocus={() => setActiveIndex(index)}\n              onClick={() => {\n                if (isOpen) closeMenu(index)\n                else openWord(index)\n              }}\n              onMouseEnter={() => {\n                // \"Menu switching\": a menu already open follows the pointer.\n                if (openId !== undefined && !isOpen) openWord(index)\n              }}\n            >\n              {spec.label}\n            </button>\n            {isOpen ? (\n              <Menu\n                id={menuId}\n                className=\"vgui-menubar__menu\"\n                items={spec.items}\n                labelledBy={wordId}\n                orientation={horizontal ? 'auto' : 'vertical'}\n                onClose={() => closeMenu(index)}\n              />\n            ) : null}\n          </div>\n        )\n      })}\n    </div>\n  )\n})\n\nMenuBar.displayName = 'MenuBar'\n"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+export { MenuBar } from './MenuBar';
+export type { MenuBarItemSpec, MenuBarProps } from './MenuBar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MenuBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MenuBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA"}

package/dist/components/NavBar/NavBar.css

@@ -0,0 +1,179 @@
+/*
+ * NavBar — the client's application-level navigation strip and its dropdowns.
+ * Spec: docs/components/NavBar.md. Metrics, the bevel primitive and the a11y
+ * baseline come from docs/foundations.md.
+ *
+ * Every selector is written twice: the spec names the strip `.vgui-navbar*`,
+ * while the library's convention is `.vgui-<kebab-name>` → `.vgui-nav-bar*`.
+ * Both class names are applied to the elements and both selectors declared
+ * here, so either name is a supported hook.
+ *
+ * Three deliberate departures from the VGUI original, each an accessibility fix
+ * rather than a style choice:
+ *   1. the active item carries `aria-current` *and* a 1px underline, because
+ *      `White` → `Text` is invisible to anyone with a colour deficiency;
+ *   2. `SuperNavMenuItem:selected {}` is empty in the corpus, so the maize
+ *      highlight is promoted from `:hover` to selection and `:focus-visible`;
+ *   3. maize takes `Down` dark text — white is inherited in the corpus and
+ *      lands at 3.70:1, a fail (foundations.md §10).
+ */
+
+.vgui-navbar,
+.vgui-nav-bar {
+  box-sizing: border-box;
+  /* MainNav: font-size 21, font-weight 700, uppercase, bgcolor = none.
+     The strip paints nothing at all — it is not droppable on a white page. */
+  font-family: var(--vgui-font);
+  font-size: var(--vgui-nav-font-size, 21px);
+  font-weight: var(--vgui-nav-font-weight, 700);
+  line-height: var(--vgui-nav-line-height, 21px);
+  /* The original adds no tracking; 21px bold uppercase loses its shape cues
+     if letter-spacing is invented. It must stay normal. */
+  letter-spacing: normal;
+  text-transform: uppercase;
+  background: none;
+  border: 0;
+  color: var(--vgui-nav-text, var(--vgui-text-strong));
+}
+
+.vgui-navbar__list,
+.vgui-nav-bar__list {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.vgui-navbar__item,
+.vgui-nav-bar__item {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+
+.vgui-navbar__button,
+.vgui-nav-bar__button {
+  display: block;
+  box-sizing: border-box;
+  padding: 0 8px;
+  border: 0;
+  background: none;
+  color: var(--vgui-nav-text, var(--vgui-text-strong));
+  font: inherit;
+  line-height: var(--vgui-nav-line-height, 21px);
+  letter-spacing: inherit;
+  text-decoration: none;
+  text-transform: inherit;
+  /* VGUI navigation is not a link cursor. */
+  cursor: default;
+  /* No transition: VGUI has none. */
+}
+
+/* The active item is DIMMER, not brighter — do not invert this to match a
+   modern nav bar. The direction of emphasis is the style, and the underline
+   is what keeps the state visible without colour. */
+.vgui-navbar__item--active > .vgui-navbar__button,
+.vgui-nav-bar__item--active > .vgui-nav-bar__button {
+  color: var(--vgui-nav-text-active, var(--vgui-text-muted));
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+/* MainNav has no hover state; the port's invented `nav a:hover` yellow is
+   used, and it measures 5.52:1 on GreenBG. */
+.vgui-navbar__button:hover:not(:disabled),
+.vgui-nav-bar__button:hover:not([aria-disabled='true']) {
+  color: var(--vgui-text-hover);
+}
+
+/* The strip is transparent, so the ring has to be drawn inside the label box
+   or a frame's parent can clip it — hence the negative offset token. */
+.vgui-navbar__button:focus-visible,
+.vgui-nav-bar__button:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-navbar__button:disabled,
+.vgui-navbar__button[aria-disabled='true'],
+.vgui-nav-bar__button:disabled,
+.vgui-nav-bar__button[aria-disabled='true'] {
+  color: var(--vgui-text-disabled);
+  text-shadow: 1px 1px 0 var(--vgui-text-disabled-shadow);
+  text-decoration: none;
+}
+
+/* The strip divider between items (`dividers`). Decorative: the original's
+   SuperDivider is 1.07:1 against the panel, so it is a hint, not information. */
+.vgui-navbar__divider,
+.vgui-nav-bar__divider {
+  align-self: stretch;
+  width: 1px;
+  margin: 0;
+  background-color: var(--vgui-menu-divider, var(--vgui-surface));
+}
+
+/* ---- Dropdown: SuperNavMenu, reusing Menu's geometry -------------------
+   The descendant prefix is load-bearing: the panel also carries `vgui-menu`,
+   whose container rule is the same specificity as a bare `.vgui-navbar__
+   dropdown`, so import order would otherwise decide who wins. */
+
+.vgui-navbar .vgui-navbar__dropdown,
+.vgui-nav-bar .vgui-nav-bar__dropdown {
+  position: absolute;
+  top: var(--vgui-nav-dropdown-offset, 23px);
+  left: 0;
+  z-index: 1;
+  min-width: var(--vgui-menu-min-width, 150px);
+  padding: 1px 0 1px 1px; /* inset = "1 0 1 1" */
+  background-color: var(--vgui-menu-bg, var(--vgui-surface-dark));
+  border: 1px solid var(--vgui-menu-border, var(--vgui-surface-light));
+  /* No drop shadow anywhere in the corpus: a flat outline on a barely lighter
+     panel is what makes this read 2003 rather than 2015. */
+  box-shadow: none;
+  /* Paint over the seam instead of shortening the box with `border-top: 0`,
+     which would jitter the strip by a pixel when the menu opens. */
+  margin-top: -1px;
+  /* The strip is 21px/700/uppercase; the rows are 14px body text. */
+  font-size: var(--vgui-font-size);
+  font-weight: 400;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.vgui-navbar .vgui-navbar__dropdown .vgui-menu__item,
+.vgui-nav-bar .vgui-nav-bar__dropdown .vgui-menu__item {
+  color: var(--vgui-nav-text, var(--vgui-text-strong));
+  line-height: var(--vgui-nav-line-height, 21px);
+  padding: 0 6px;
+  cursor: default;
+}
+
+/* Hover, roving focus and selection are one highlight. The corpus leaves
+   `:selected` empty, which leaves keyboard users navigating blind. */
+.vgui-navbar .vgui-navbar__dropdown .vgui-menu__item:hover,
+.vgui-navbar .vgui-navbar__dropdown .vgui-menu__item:focus-visible,
+.vgui-navbar .vgui-navbar__dropdown .vgui-menu__item[data-active='true'],
+.vgui-nav-bar .vgui-nav-bar__dropdown .vgui-menu__item:hover,
+.vgui-nav-bar .vgui-nav-bar__dropdown .vgui-menu__item:focus-visible,
+.vgui-nav-bar .vgui-nav-bar__dropdown .vgui-menu__item[data-active='true'] {
+  background-color: var(--vgui-accent-dark);
+  /* Dark on maize is 4.22:1; the corpus's inherited white is 3.70:1. */
+  color: var(--vgui-text-on-accent, var(--vgui-selection-text));
+}
+
+.vgui-navbar .vgui-navbar__dropdown .vgui-menu__separator,
+.vgui-nav-bar .vgui-nav-bar__dropdown .vgui-menu__separator {
+  height: 1px;
+  margin: 1px 0;
+  background-color: var(--vgui-menu-divider, var(--vgui-surface));
+}
+
+.vgui-crisp .vgui-navbar__button:focus-visible,
+.vgui-crisp .vgui-nav-bar__button:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}

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

@@ -0,0 +1 @@
+export {}

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

@@ -0,0 +1,39 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import './NavBar.css';
+/** One top-level item in a {@link NavBar}. */
+export interface NavBarItem {
+    /** Stable identity; also the React key. */
+    id: string;
+    /** Label text, rendered uppercase by CSS. */
+    label: string;
+    /** Renders the dimmed active state. */
+    active?: boolean;
+    /** Dropdown content; omit for a plain link with no menu. */
+    menu?: ReactNode;
+    /** Href when the item navigates rather than opening a menu. */
+    href?: string;
+    /** Renders disabled and unclickable. */
+    disabled?: boolean;
+}
+/** Props of {@link NavBar}. */
+export interface NavBarProps extends HTMLAttributes<HTMLElement> {
+    /** Items in display order. */
+    items: NavBarItem[];
+    /** Called with the item's id when it is activated. */
+    onItemClick?: (id: string) => void;
+    /** Accessible name for the nav landmark. */
+    label?: string;
+    /** Renders a 1px SuperNavMenuDivider between items. */
+    dividers?: boolean;
+}
+/** The client's primary application navigation: a strip of large uppercase
+ *  labels, each optionally opening a flat-outlined dropdown menu.
+ *
+ *  Three documented departures from the VGUI original, all accessibility fixes:
+ *  the active item carries `aria-current` and an underline as well as its
+ *  (dimmer) colour; the dropdown's empty `:selected {}` block is replaced by the
+ *  maize highlight; and maize surfaces take dark text instead of the inherited
+ *  white, which is only 3.70:1.
+ */
+export declare const NavBar: import("react").ForwardRefExoticComponent<NavBarProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=NavBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavBar.d.ts","sourceRoot":"","sources":["../../../src/components/NavBar/NavBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAuC,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3F,OAAO,cAAc,CAAA;AAErB,8CAA8C;AAC9C,MAAM,WAAW,UAAU;IACzB,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAA;IACV,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,uCAAuC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,+BAA+B;AAC/B,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,8BAA8B;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,sDAAsD;IACtD,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAMD;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM,qGAkPjB,CAAA"}

package/dist/components/NavBar/NavBar.js

@@ -0,0 +1,198 @@
+import { Fragment, forwardRef, useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./NavBar.css";
+//#region src/components/NavBar/NavBar.tsx
+/** Everything a dropdown row can be. The dropdown is filled with arbitrary
+*  nodes, so its keyboard model works off this role set rather than props. */
+var ROW_SELECTOR = "[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"]";
+/** The client's primary application navigation: a strip of large uppercase
+*  labels, each optionally opening a flat-outlined dropdown menu.
+*
+*  Three documented departures from the VGUI original, all accessibility fixes:
+*  the active item carries `aria-current` and an underline as well as its
+*  (dimmer) colour; the dropdown's empty `:selected {}` block is replaced by the
+*  maize highlight; and maize surfaces take dark text instead of the inherited
+*  white, which is only 3.70:1.
+*/
+var NavBar = forwardRef(function NavBar({ items, onItemClick, label = "Main", dividers = false, className, ...rest }, ref) {
+	const baseId = useId();
+	const triggers = useRef({});
+	const panels = useRef({});
+	/** Row to focus once a freshly opened dropdown has mounted; -1 means last. */
+	const focusOnOpen = useRef(0);
+	const [openId, setOpenId] = useState(null);
+	const triggerId = (id) => `${baseId}-navbar-trigger-${id}`;
+	const panelId = (id) => `${baseId}-navbar-menu-${id}`;
+	const rows = (id) => {
+		const panel = panels.current[id];
+		if (!panel) return [];
+		return Array.from(panel.querySelectorAll(ROW_SELECTOR)).filter((row) => !row.hasAttribute("disabled") && row.getAttribute("aria-disabled") !== "true");
+	};
+	const focusRow = (id, position) => {
+		const list = rows(id);
+		if (list.length === 0) return;
+		const row = list[position < 0 ? list.length - 1 : position % list.length];
+		if (!row.hasAttribute("tabindex")) row.setAttribute("tabindex", "-1");
+		row.focus();
+	};
+	const openMenu = (id, position = 0) => {
+		focusOnOpen.current = position;
+		setOpenId(id);
+		onItemClick?.(id);
+	};
+	const closeMenu = (id, restoreFocus) => {
+		setOpenId(null);
+		if (restoreFocus) triggers.current[id]?.focus();
+	};
+	useEffect(() => {
+		if (openId === null) return;
+		focusRow(openId, focusOnOpen.current);
+	}, [openId]);
+	const enabled = items.filter((item) => !item.disabled);
+	const moveTopLevel = (fromId, delta) => {
+		if (enabled.length === 0) return;
+		const position = enabled.findIndex((item) => item.id === fromId);
+		const next = enabled[(position + delta + enabled.length) % enabled.length];
+		if (!next) return;
+		if (openId !== null && next.menu !== void 0) {
+			openMenu(next.id);
+			return;
+		}
+		setOpenId(null);
+		triggers.current[next.id]?.focus();
+	};
+	const onListKeyDown = (event) => {
+		const { key } = event;
+		const focused = document.activeElement;
+		const owner = items.find((item) => {
+			const trigger = triggers.current[item.id];
+			const panel = panels.current[item.id];
+			return trigger !== null && trigger !== void 0 && trigger.contains(focused) || panel !== null && panel !== void 0 && panel.contains(focused);
+		});
+		if (!owner) return;
+		if (key === "ArrowLeft" || key === "ArrowRight") moveTopLevel(owner.id, key === "ArrowLeft" ? -1 : 1);
+		else if ((key === "ArrowDown" || key === "ArrowUp") && owner.menu !== void 0) {
+			const position = key === "ArrowDown" ? 0 : -1;
+			if (openId === owner.id) focusRow(owner.id, position);
+			else openMenu(owner.id, position);
+		} else return;
+		event.preventDefault();
+	};
+	const onPanelKeyDown = (event, item) => {
+		const { key } = event;
+		if (key === "Tab") {
+			setOpenId(null);
+			return;
+		}
+		const list = rows(item.id);
+		if (list.length === 0) return;
+		const position = list.indexOf(document.activeElement);
+		switch (key) {
+			case "ArrowDown":
+				focusRow(item.id, position + 1);
+				break;
+			case "ArrowUp":
+				focusRow(item.id, position - 1);
+				break;
+			case "Home":
+				focusRow(item.id, 0);
+				break;
+			case "End":
+				focusRow(item.id, -1);
+				break;
+			case "Escape":
+				closeMenu(item.id, true);
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	return /* @__PURE__ */ jsx("nav", {
+		...rest,
+		ref,
+		"aria-label": label,
+		className: [
+			"vgui-navbar",
+			"vgui-nav-bar",
+			className
+		].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "vgui-navbar__list vgui-nav-bar__list",
+			onKeyDown: onListKeyDown,
+			children: items.map((item, index) => {
+				const isOpen = openId === item.id;
+				const active = item.active === true;
+				return /* @__PURE__ */ jsxs(Fragment, { children: [dividers && index > 0 ? /* @__PURE__ */ jsx("li", {
+					className: "vgui-navbar__divider vgui-nav-bar__divider",
+					"aria-hidden": "true"
+				}) : null, /* @__PURE__ */ jsxs("li", {
+					className: [
+						"vgui-navbar__item",
+						"vgui-nav-bar__item",
+						active ? "vgui-navbar__item--active vgui-nav-bar__item--active" : null
+					].filter(Boolean).join(" "),
+					children: [item.href !== void 0 && item.menu === void 0 ? /* @__PURE__ */ jsx("a", {
+						id: triggerId(item.id),
+						ref: (node) => {
+							triggers.current[item.id] = node;
+						},
+						className: "vgui-navbar__button vgui-nav-bar__button",
+						href: item.disabled ? void 0 : item.href,
+						"aria-current": active ? "page" : void 0,
+						"aria-disabled": item.disabled ? true : void 0,
+						tabIndex: item.disabled ? -1 : void 0,
+						onClick: (event) => {
+							if (item.disabled) {
+								event.preventDefault();
+								return;
+							}
+							onItemClick?.(item.id);
+						},
+						children: item.label
+					}) : /* @__PURE__ */ jsx("button", {
+						id: triggerId(item.id),
+						ref: (node) => {
+							triggers.current[item.id] = node;
+						},
+						type: "button",
+						className: "vgui-navbar__button vgui-nav-bar__button",
+						"aria-current": active ? "page" : void 0,
+						"aria-haspopup": item.menu !== void 0 ? "menu" : void 0,
+						"aria-expanded": item.menu !== void 0 ? isOpen : void 0,
+						"aria-controls": item.menu !== void 0 ? panelId(item.id) : void 0,
+						disabled: item.disabled,
+						onClick: () => {
+							if (item.menu === void 0) {
+								onItemClick?.(item.id);
+								return;
+							}
+							if (isOpen) closeMenu(item.id, false);
+							else openMenu(item.id);
+						},
+						onMouseEnter: () => {
+							if (openId !== null && !isOpen && item.menu !== void 0) openMenu(item.id);
+						},
+						children: item.label
+					}), isOpen && item.menu !== void 0 ? /* @__PURE__ */ jsx("div", {
+						id: panelId(item.id),
+						ref: (node) => {
+							panels.current[item.id] = node;
+						},
+						role: "menu",
+						"aria-labelledby": triggerId(item.id),
+						"aria-orientation": "vertical",
+						className: "vgui-navbar__dropdown vgui-nav-bar__dropdown vgui-menu",
+						onKeyDown: (event) => onPanelKeyDown(event, item),
+						children: item.menu
+					}) : null]
+				})] }, item.id);
+			})
+		})
+	});
+});
+NavBar.displayName = "NavBar";
+//#endregion
+export { NavBar };
+
+//# sourceMappingURL=NavBar.js.map

package/dist/components/NavBar/NavBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBar.js","names":[],"sources":["../../../src/components/NavBar/NavBar.tsx"],"sourcesContent":["import { Fragment, forwardRef, useEffect, useId, useRef, useState } from 'react'\nimport type { HTMLAttributes, KeyboardEvent as ReactKeyboardEvent, ReactNode } from 'react'\n\nimport './NavBar.css'\n\n/** One top-level item in a {@link NavBar}. */\nexport interface NavBarItem {\n  /** Stable identity; also the React key. */\n  id: string\n  /** Label text, rendered uppercase by CSS. */\n  label: string\n  /** Renders the dimmed active state. */\n  active?: boolean\n  /** Dropdown content; omit for a plain link with no menu. */\n  menu?: ReactNode\n  /** Href when the item navigates rather than opening a menu. */\n  href?: string\n  /** Renders disabled and unclickable. */\n  disabled?: boolean\n}\n\n/** Props of {@link NavBar}. */\nexport interface NavBarProps extends HTMLAttributes<HTMLElement> {\n  /** Items in display order. */\n  items: NavBarItem[]\n  /** Called with the item's id when it is activated. */\n  onItemClick?: (id: string) => void\n  /** Accessible name for the nav landmark. */\n  label?: string\n  /** Renders a 1px SuperNavMenuDivider between items. */\n  dividers?: boolean\n}\n\n/** Everything a dropdown row can be. The dropdown is filled with arbitrary\n *  nodes, so its keyboard model works off this role set rather than props. */\nconst ROW_SELECTOR = '[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"]'\n\n/** The client's primary application navigation: a strip of large uppercase\n *  labels, each optionally opening a flat-outlined dropdown menu.\n *\n *  Three documented departures from the VGUI original, all accessibility fixes:\n *  the active item carries `aria-current` and an underline as well as its\n *  (dimmer) colour; the dropdown's empty `:selected {}` block is replaced by the\n *  maize highlight; and maize surfaces take dark text instead of the inherited\n *  white, which is only 3.70:1.\n */\nexport const NavBar = forwardRef<HTMLElement, NavBarProps>(function NavBar(\n  { items, onItemClick, label = 'Main', dividers = false, className, ...rest },\n  ref,\n) {\n  const baseId = useId()\n  const triggers = useRef<Record<string, HTMLElement | null>>({})\n  const panels = useRef<Record<string, HTMLDivElement | null>>({})\n  /** Row to focus once a freshly opened dropdown has mounted; -1 means last. */\n  const focusOnOpen = useRef(0)\n\n  const [openId, setOpenId] = useState<string | null>(null)\n\n  const triggerId = (id: string) => `${baseId}-navbar-trigger-${id}`\n  const panelId = (id: string) => `${baseId}-navbar-menu-${id}`\n\n  const rows = (id: string) => {\n    const panel = panels.current[id]\n    if (!panel) return []\n    return Array.from(panel.querySelectorAll<HTMLElement>(ROW_SELECTOR)).filter(\n      (row) => !row.hasAttribute('disabled') && row.getAttribute('aria-disabled') !== 'true',\n    )\n  }\n\n  const focusRow = (id: string, position: number) => {\n    const list = rows(id)\n    if (list.length === 0) return\n\n    const row = list[position < 0 ? list.length - 1 : position % list.length]\n    // `menu` is arbitrary markup, so a plain element may need the attribute.\n    if (!row.hasAttribute('tabindex')) row.setAttribute('tabindex', '-1')\n    row.focus()\n  }\n\n  const openMenu = (id: string, position = 0) => {\n    focusOnOpen.current = position\n    setOpenId(id)\n    onItemClick?.(id)\n  }\n\n  const closeMenu = (id: string, restoreFocus: boolean) => {\n    setOpenId(null)\n    if (restoreFocus) triggers.current[id]?.focus()\n  }\n\n  useEffect(() => {\n    if (openId === null) return\n    focusRow(openId, focusOnOpen.current)\n  }, [openId])\n\n  const enabled = items.filter((item) => !item.disabled)\n\n  const moveTopLevel = (fromId: string, delta: number) => {\n    if (enabled.length === 0) return\n\n    const position = enabled.findIndex((item) => item.id === fromId)\n    const next = enabled[(position + delta + enabled.length) % enabled.length]\n    if (!next) return\n\n    // Menu switching: with a dropdown open, arrowing to a sibling opens its own.\n    if (openId !== null && next.menu !== undefined) {\n      openMenu(next.id)\n      return\n    }\n\n    setOpenId(null)\n    triggers.current[next.id]?.focus()\n  }\n\n  const onListKeyDown = (event: ReactKeyboardEvent<HTMLUListElement>) => {\n    const { key } = event\n    const focused = document.activeElement as HTMLElement | null\n    const owner = items.find((item) => {\n      const trigger = triggers.current[item.id]\n      const panel = panels.current[item.id]\n      return (\n        (trigger !== null && trigger !== undefined && trigger.contains(focused)) ||\n        (panel !== null && panel !== undefined && panel.contains(focused))\n      )\n    })\n\n    if (!owner) return\n\n    if (key === 'ArrowLeft' || key === 'ArrowRight') {\n      moveTopLevel(owner.id, key === 'ArrowLeft' ? -1 : 1)\n    } else if ((key === 'ArrowDown' || key === 'ArrowUp') && owner.menu !== undefined) {\n      const position = key === 'ArrowDown' ? 0 : -1\n      if (openId === owner.id) focusRow(owner.id, position)\n      else openMenu(owner.id, position)\n    } else {\n      // Enter, Space and Tab belong to the focused control.\n      return\n    }\n\n    event.preventDefault()\n  }\n\n  const onPanelKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>, item: NavBarItem) => {\n    const { key } = event\n\n    if (key === 'Tab') {\n      // Tab closes the dropdown without trapping focus.\n      setOpenId(null)\n      return\n    }\n\n    const list = rows(item.id)\n    if (list.length === 0) return\n\n    const position = list.indexOf(document.activeElement as HTMLElement)\n\n    switch (key) {\n      case 'ArrowDown':\n        focusRow(item.id, position + 1)\n        break\n      case 'ArrowUp':\n        focusRow(item.id, position - 1)\n        break\n      case 'Home':\n        focusRow(item.id, 0)\n        break\n      case 'End':\n        focusRow(item.id, -1)\n        break\n      case 'Escape':\n        // Escape hands focus back to the button that opened the dropdown.\n        closeMenu(item.id, true)\n        break\n      default:\n        // Arrow Left/Right are the strip's, and bubbles up to it.\n        return\n    }\n\n    event.preventDefault()\n    event.stopPropagation()\n  }\n\n  return (\n    <nav\n      {...rest}\n      ref={ref}\n      aria-label={label}\n      className={[\n        'vgui-navbar',\n        // The spec names the root `.vgui-navbar`; the library's kebab-case\n        // convention would make it `.vgui-nav-bar`. Both are applied.\n        'vgui-nav-bar',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <ul className=\"vgui-navbar__list vgui-nav-bar__list\" onKeyDown={onListKeyDown}>\n        {items.map((item, index) => {\n          const isOpen = openId === item.id\n          const active = item.active === true\n\n          return (\n            <Fragment key={item.id}>\n              {dividers && index > 0 ? (\n                <li className=\"vgui-navbar__divider vgui-nav-bar__divider\" aria-hidden=\"true\" />\n              ) : null}\n              <li\n                className={[\n                  'vgui-navbar__item',\n                  'vgui-nav-bar__item',\n                  active ? 'vgui-navbar__item--active vgui-nav-bar__item--active' : null,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n              >\n                {item.href !== undefined && item.menu === undefined ? (\n                  <a\n                    id={triggerId(item.id)}\n                    ref={(node) => {\n                      triggers.current[item.id] = node\n                    }}\n                    className=\"vgui-navbar__button vgui-nav-bar__button\"\n                    href={item.disabled ? undefined : item.href}\n                    aria-current={active ? 'page' : undefined}\n                    aria-disabled={item.disabled ? true : undefined}\n                    tabIndex={item.disabled ? -1 : undefined}\n                    onClick={(event) => {\n                      if (item.disabled) {\n                        event.preventDefault()\n                        return\n                      }\n                      onItemClick?.(item.id)\n                    }}\n                  >\n                    {item.label}\n                  </a>\n                ) : (\n                  <button\n                    id={triggerId(item.id)}\n                    ref={(node) => {\n                      triggers.current[item.id] = node\n                    }}\n                    type=\"button\"\n                    className=\"vgui-navbar__button vgui-nav-bar__button\"\n                    aria-current={active ? 'page' : undefined}\n                    aria-haspopup={item.menu !== undefined ? 'menu' : undefined}\n                    aria-expanded={item.menu !== undefined ? isOpen : undefined}\n                    aria-controls={item.menu !== undefined ? panelId(item.id) : undefined}\n                    disabled={item.disabled}\n                    onClick={() => {\n                      if (item.menu === undefined) {\n                        onItemClick?.(item.id)\n                        return\n                      }\n                      if (isOpen) closeMenu(item.id, false)\n                      else openMenu(item.id)\n                    }}\n                    onMouseEnter={() => {\n                      // Menu switching: a dropdown already open follows the pointer.\n                      if (openId !== null && !isOpen && item.menu !== undefined) openMenu(item.id)\n                    }}\n                  >\n                    {item.label}\n                  </button>\n                )}\n                {isOpen && item.menu !== undefined ? (\n                  <div\n                    id={panelId(item.id)}\n                    ref={(node) => {\n                      panels.current[item.id] = node\n                    }}\n                    role=\"menu\"\n                    aria-labelledby={triggerId(item.id)}\n                    aria-orientation=\"vertical\"\n                    className=\"vgui-navbar__dropdown vgui-nav-bar__dropdown vgui-menu\"\n                    onKeyDown={(event) => onPanelKeyDown(event, item)}\n                  >\n                    {item.menu}\n                  </div>\n                ) : null}\n              </li>\n            </Fragment>\n          )\n        })}\n      </ul>\n    </nav>\n  )\n})\n\nNavBar.displayName = 'NavBar'\n"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+export { NavBar } from './NavBar';
+export type { NavBarItem, NavBarProps } from './NavBar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NavBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA"}