@dalcvil/steam-green-react 0.1.0 → 1.0.0

package/dist/components/Menu/Menu.css

@@ -0,0 +1,122 @@
+/*
+ * Menu — the dropdown panel and its rows.
+ * Spec: docs/components/Menu.md. Metrics, bevels and the a11y baseline come
+ * from docs/foundations.md.
+ *
+ * The border is a flat 1px `LightGreenBG` outline on all four sides, not a
+ * bevel, and there is deliberately no box-shadow: nothing in steam.styles
+ * draws one, and a modern elevation shadow breaks the period look.
+ * `inset = "1 0 1 1"` becomes `padding: 0 1px 1px` so the hover fill never
+ * paints over the outline.
+ */
+
+.vgui-menu {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-width: var(--vgui-menu-min-width, 150px);
+  margin: 0;
+  padding: 0 1px 1px;
+  background-color: var(--vgui-menu-bg, var(--vgui-surface-dark));
+  border: 1px solid var(--vgui-menu-border, var(--vgui-surface-light));
+  color: var(--vgui-text-strong);
+  font-family: var(--vgui-font);
+  font-size: var(--vgui-font-size);
+  line-height: var(--vgui-line-height);
+  /* No box-shadow. See docs/components/Menu.md, "Four things to extract". */
+  box-shadow: none;
+}
+
+/* Submenu levels are painted adjacent to their parent row and overlap its
+   outline by a pixel rather than having the seam removed with `border-*: 0`,
+   which would shorten the box. See docs/components/Tabs.md. */
+.vgui-menu--submenu {
+  position: absolute;
+  top: -1px;
+  left: calc(100% - 1px);
+  z-index: 1;
+}
+
+.vgui-menu__row {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.vgui-menu__item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  min-height: var(--vgui-menu-item-height, 24px);
+  padding: 2px 8px 2px 4px;
+  border: 0;
+  background: transparent;
+  color: var(--vgui-text-strong);
+  font-family: inherit;
+  font-size: var(--vgui-font-size);
+  text-align: left;
+  /* VGUI menus are not link cursors. */
+  cursor: default;
+}
+
+/* Hover and focus-visible are the same state for a mouse and a keyboard user. */
+.vgui-menu__item:hover,
+.vgui-menu__item:focus-visible {
+  background-color: var(--vgui-accent-dark);
+  /* 4.22:1. White on MaizeBG is 3.70:1 and fails; see foundations.md §10. */
+  color: var(--vgui-selection-text);
+}
+
+.vgui-menu__item:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-menu__item:disabled {
+  color: var(--vgui-text-disabled);
+  text-shadow: 1px 1px 0 var(--vgui-text-disabled-shadow);
+}
+
+/* The gutter keeps checked and unchecked rows' text aligned. */
+.vgui-menu__gutter {
+  flex: 0 0 16px;
+  text-align: center;
+}
+
+.vgui-menu__text {
+  flex: 1 1 auto;
+}
+
+.vgui-menu__arrow {
+  flex: 0 0 auto;
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 5px solid currentColor;
+}
+
+.vgui-menu__separator {
+  height: 1px;
+  /* `padding-right = 3`: the rule stops short of the right edge. */
+  margin: 1px 3px 1px 0;
+  /* `MenuDivider` `#4C4E4B` — a documented token this library does not define
+     yet, so it falls back to the nearest existing surface tone. It is
+     decorative either way: around 1.03:1 against the panel. */
+  background-color: var(--vgui-menu-divider, var(--vgui-surface));
+}
+
+.vgui-menu__label {
+  padding: 4px 8px 2px 4px;
+  color: var(--vgui-text-muted);
+  font-size: var(--vgui-font-size-small);
+  letter-spacing: var(--vgui-chrome-tracking);
+  text-transform: uppercase;
+}
+
+.vgui-crisp .vgui-menu__item:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}

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

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

package/dist/components/Menu/Menu.d.ts

@@ -0,0 +1,46 @@
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import './Menu.css';
+/** One row in a {@link Menu}. Separators and labels are entries in the same array. */
+export interface MenuItemSpec {
+    /** Stable identity and React key. */
+    id: string;
+    /** Visible label. */
+    label: string;
+    /** Invoked on activation. Omit to render a non-interactive row. */
+    onSelect?: () => void;
+    /** Renders as a disabled row. */
+    disabled?: boolean;
+    /** Renders as `menuitemcheckbox` with a tick in the gutter. */
+    checked?: boolean;
+    /** Renders an arrow and opens a nested Menu. */
+    items?: MenuItemSpec[];
+    /** Renders a group label instead of an action row. */
+    type?: 'item' | 'label' | 'separator';
+}
+/** Props of {@link Menu}. */
+export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
+    /** Rows, in order. Separators and labels are entries in the same array. */
+    items: MenuItemSpec[];
+    /** id of the element the menu is anchored to; becomes `aria-labelledby`. */
+    labelledBy?: string;
+    /** Called when the menu should close. */
+    onClose?: () => void;
+    /** Keyboard behaviour. Defaults to `'auto'`: reaches for a MenuBar ancestor. */
+    orientation?: 'auto' | 'vertical';
+}
+/** Props of {@link MenuItem}. */
+export interface MenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect'> {
+    /** Visible row text. */
+    label: ReactNode;
+    /** Renders as `menuitemcheckbox` and puts a tick in the gutter. */
+    checked?: boolean;
+    /** Renders the right-aligned arrow and `aria-haspopup="menu"`. */
+    hasSubmenu?: boolean;
+    /** Invoked on activation, before the menu closes. */
+    onSelect?: () => void;
+}
+/** One row of a menu. Always a real `<button>` so activation, `disabled` and the focus ring come for free. */
+export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** The dropdown panel: a flat-outlined list of {@link MenuItem} rows. */
+export declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,oBAAoB,EACpB,cAAc,EAEd,SAAS,EAEV,MAAM,OAAO,CAAA;AAEd,OAAO,YAAY,CAAA;AAEnB,sFAAsF;AACtF,MAAM,WAAW,YAAY;IAC3B,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gDAAgD;IAChD,KAAK,CAAC,EAAE,YAAY,EAAE,CAAA;IACtB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,CAAA;CACtC;AAED,6BAA6B;AAC7B,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,2EAA2E;IAC3E,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;CAClC;AAED,iCAAiC;AACjC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC9F,wBAAwB;IACxB,KAAK,EAAE,SAAS,CAAA;IAChB,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,8GAA8G;AAC9G,eAAO,MAAM,QAAQ,6GAqCnB,CAAA;AAwQF,yEAAyE;AACzE,eAAO,MAAM,IAAI,sGAcf,CAAA"}

package/dist/components/Menu/Menu.js

@@ -0,0 +1,246 @@
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Menu.css";
+//#region src/components/Menu/Menu.tsx
+/** One row of a menu. Always a real `<button>` so activation, `disabled` and the focus ring come for free. */
+var MenuItem = forwardRef(function MenuItem({ label, checked, hasSubmenu, onSelect, onClick, className, disabled, ...rest }, ref) {
+	const checkable = checked !== void 0;
+	return /* @__PURE__ */ jsxs("button", {
+		...rest,
+		ref,
+		type: "button",
+		role: checkable ? "menuitemcheckbox" : "menuitem",
+		"aria-checked": checkable ? checked : void 0,
+		"aria-haspopup": hasSubmenu ? "menu" : void 0,
+		"aria-expanded": hasSubmenu ? rest["aria-expanded"] : void 0,
+		disabled,
+		tabIndex: rest.tabIndex ?? -1,
+		className: [
+			"vgui-menu__item",
+			hasSubmenu ? "vgui-menu__item--has-submenu" : null,
+			className
+		].filter(Boolean).join(" "),
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented || disabled) return;
+			onSelect?.();
+		},
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "vgui-menu__gutter",
+				"aria-hidden": checkable ? true : void 0,
+				children: checkable && checked ? "✓" : null
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "vgui-menu__text",
+				children: label
+			}),
+			hasSubmenu ? /* @__PURE__ */ jsx("span", {
+				className: "vgui-menu__arrow",
+				"aria-hidden": "true"
+			}) : null
+		]
+	});
+});
+MenuItem.displayName = "MenuItem";
+/** How long the pointer may leave a submenu parent before the submenu closes. */
+var SUBMENU_CLOSE_DELAY = 150;
+/** How long a typeahead buffer survives between keystrokes. */
+var TYPEAHEAD_TIMEOUT = 500;
+var isAction = (spec) => spec !== void 0 && (spec.type ?? "item") === "item";
+var isFocusable = (spec) => isAction(spec) && !spec.disabled;
+function MenuLevel({ items, labelledBy, onClose, orientation = "auto", isSubmenu = false, forwardedRef, ...rest }) {
+	const itemRefs = useRef([]);
+	const closeTimer = useRef(null);
+	const typeahead = useRef({
+		text: "",
+		at: 0
+	});
+	const baseId = useId();
+	const focusable = items.map((spec, index) => ({
+		spec,
+		index
+	})).filter(({ spec }) => isFocusable(spec));
+	const [activeIndex, setActiveIndex] = useState(() => focusable[0]?.index ?? -1);
+	const [openSubmenuId, setOpenSubmenuId] = useState(null);
+	const firstIndex = focusable[0]?.index ?? -1;
+	useEffect(() => {
+		if (firstIndex !== -1) itemRefs.current[firstIndex]?.focus();
+	}, [firstIndex]);
+	useEffect(() => () => {
+		if (closeTimer.current) clearTimeout(closeTimer.current);
+	}, []);
+	const cancelClose = () => {
+		if (closeTimer.current) {
+			clearTimeout(closeTimer.current);
+			closeTimer.current = null;
+		}
+	};
+	const focusItem = (index) => {
+		setActiveIndex(index);
+		itemRefs.current[index]?.focus();
+	};
+	const move = (delta) => {
+		if (focusable.length === 0) return;
+		const position = focusable.findIndex(({ index }) => index === activeIndex);
+		const next = position === -1 ? delta > 0 ? 0 : focusable.length - 1 : (position + delta + focusable.length) % focusable.length;
+		focusItem(focusable[next].index);
+	};
+	const jump = (position) => {
+		const target = focusable[position];
+		if (target) focusItem(target.index);
+	};
+	const typeaheadMove = (key) => {
+		const now = Date.now();
+		const state = typeahead.current;
+		state.text = now - state.at > TYPEAHEAD_TIMEOUT ? key.toLowerCase() : state.text + key.toLowerCase();
+		state.at = now;
+		const position = focusable.findIndex(({ index }) => index === activeIndex);
+		const ordered = [...focusable.slice(position + 1), ...focusable.slice(0, position + 1)];
+		let match = ordered.find(({ spec }) => spec.label.toLowerCase().startsWith(state.text));
+		if (!match && state.text.length > 1) {
+			state.text = key.toLowerCase();
+			match = ordered.find(({ spec }) => spec.label.toLowerCase().startsWith(state.text));
+		}
+		if (match) focusItem(match.index);
+	};
+	const closeSubmenu = (index) => {
+		cancelClose();
+		setOpenSubmenuId(null);
+		itemRefs.current[index]?.focus();
+	};
+	const onKeyDown = (event) => {
+		const { key } = event;
+		if (key === "Tab") {
+			onClose?.();
+			return;
+		}
+		if (key === "Enter" || key === " ") {
+			event.stopPropagation();
+			return;
+		}
+		switch (key) {
+			case "ArrowDown":
+				move(1);
+				break;
+			case "ArrowUp":
+				move(-1);
+				break;
+			case "Home":
+				jump(0);
+				break;
+			case "End":
+				jump(focusable.length - 1);
+				break;
+			case "Escape":
+				onClose?.();
+				break;
+			case "ArrowRight": {
+				const spec = items[activeIndex];
+				if (spec?.items?.length) {
+					setOpenSubmenuId(spec.id);
+					break;
+				}
+				return;
+			}
+			case "ArrowLeft":
+				if (isSubmenu) {
+					onClose?.();
+					break;
+				}
+				return;
+			default:
+				if (key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
+				typeaheadMove(key);
+		}
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref: forwardedRef,
+		role: "menu",
+		"aria-labelledby": labelledBy,
+		"aria-orientation": "vertical",
+		className: [
+			"vgui-menu",
+			isSubmenu ? "vgui-menu--submenu" : null,
+			rest.className
+		].filter(Boolean).join(" "),
+		onKeyDown,
+		"data-orientation": orientation,
+		children: items.map((spec, index) => {
+			const type = spec.type ?? "item";
+			if (type === "separator") return /* @__PURE__ */ jsx("div", {
+				className: "vgui-menu__separator",
+				role: "separator"
+			}, spec.id);
+			if (type === "label") return /* @__PURE__ */ jsx("div", {
+				className: "vgui-menu__label",
+				role: "presentation",
+				children: spec.label
+			}, spec.id);
+			const submenuItems = spec.items ?? [];
+			const hasSubmenu = submenuItems.length > 0;
+			const rowId = `${baseId}-item-${spec.id}`;
+			const row = /* @__PURE__ */ jsx(MenuItem, {
+				id: rowId,
+				ref: (node) => {
+					itemRefs.current[index] = node;
+				},
+				label: spec.label,
+				checked: spec.checked,
+				hasSubmenu,
+				"aria-expanded": hasSubmenu ? openSubmenuId === spec.id : void 0,
+				"aria-controls": hasSubmenu ? `${baseId}-submenu-${spec.id}` : void 0,
+				disabled: spec.disabled || !hasSubmenu && !spec.onSelect,
+				tabIndex: activeIndex === index ? 0 : -1,
+				onClick: hasSubmenu ? () => {
+					cancelClose();
+					setOpenSubmenuId(spec.id);
+				} : void 0,
+				onSelect: () => {
+					if (hasSubmenu) return;
+					spec.onSelect?.();
+					onClose?.();
+				}
+			}, hasSubmenu ? void 0 : spec.id);
+			if (!hasSubmenu) return row;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "vgui-menu__row",
+				onMouseEnter: () => {
+					cancelClose();
+					setOpenSubmenuId(spec.id);
+				},
+				onMouseLeave: () => {
+					cancelClose();
+					closeTimer.current = setTimeout(() => setOpenSubmenuId(null), SUBMENU_CLOSE_DELAY);
+				},
+				children: [row, openSubmenuId === spec.id ? /* @__PURE__ */ jsx(MenuLevel, {
+					id: `${baseId}-submenu-${spec.id}`,
+					items: submenuItems,
+					labelledBy: rowId,
+					isSubmenu: true,
+					orientation,
+					onClose: () => closeSubmenu(index)
+				}) : null]
+			}, spec.id);
+		})
+	});
+}
+/** The dropdown panel: a flat-outlined list of {@link MenuItem} rows. */
+var Menu = forwardRef(function Menu({ items, labelledBy, onClose, orientation = "auto", ...rest }, ref) {
+	return /* @__PURE__ */ jsx(MenuLevel, {
+		...rest,
+		items,
+		labelledBy,
+		onClose,
+		orientation,
+		forwardedRef: ref
+	});
+});
+Menu.displayName = "Menu";
+//#endregion
+export { Menu, MenuItem };
+
+//# sourceMappingURL=Menu.js.map

package/dist/components/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","names":[],"sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import { forwardRef, useEffect, useId, useRef, useState } from 'react'\nimport type {\n  ButtonHTMLAttributes,\n  HTMLAttributes,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  Ref,\n} from 'react'\n\nimport './Menu.css'\n\n/** One row in a {@link Menu}. Separators and labels are entries in the same array. */\nexport interface MenuItemSpec {\n  /** Stable identity and React key. */\n  id: string\n  /** Visible label. */\n  label: string\n  /** Invoked on activation. Omit to render a non-interactive row. */\n  onSelect?: () => void\n  /** Renders as a disabled row. */\n  disabled?: boolean\n  /** Renders as `menuitemcheckbox` with a tick in the gutter. */\n  checked?: boolean\n  /** Renders an arrow and opens a nested Menu. */\n  items?: MenuItemSpec[]\n  /** Renders a group label instead of an action row. */\n  type?: 'item' | 'label' | 'separator'\n}\n\n/** Props of {@link Menu}. */\nexport interface MenuProps extends HTMLAttributes<HTMLDivElement> {\n  /** Rows, in order. Separators and labels are entries in the same array. */\n  items: MenuItemSpec[]\n  /** id of the element the menu is anchored to; becomes `aria-labelledby`. */\n  labelledBy?: string\n  /** Called when the menu should close. */\n  onClose?: () => void\n  /** Keyboard behaviour. Defaults to `'auto'`: reaches for a MenuBar ancestor. */\n  orientation?: 'auto' | 'vertical'\n}\n\n/** Props of {@link MenuItem}. */\nexport interface MenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect'> {\n  /** Visible row text. */\n  label: ReactNode\n  /** Renders as `menuitemcheckbox` and puts a tick in the gutter. */\n  checked?: boolean\n  /** Renders the right-aligned arrow and `aria-haspopup=\"menu\"`. */\n  hasSubmenu?: boolean\n  /** Invoked on activation, before the menu closes. */\n  onSelect?: () => void\n}\n\n/** One row of a menu. Always a real `<button>` so activation, `disabled` and the focus ring come for free. */\nexport const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n  { label, checked, hasSubmenu, onSelect, onClick, className, disabled, ...rest },\n  ref,\n) {\n  const checkable = checked !== undefined\n\n  return (\n    <button\n      {...rest}\n      ref={ref}\n      type=\"button\"\n      role={checkable ? 'menuitemcheckbox' : 'menuitem'}\n      aria-checked={checkable ? checked : undefined}\n      aria-haspopup={hasSubmenu ? 'menu' : undefined}\n      aria-expanded={hasSubmenu ? rest['aria-expanded'] : undefined}\n      disabled={disabled}\n      tabIndex={rest.tabIndex ?? -1}\n      className={[\n        'vgui-menu__item',\n        hasSubmenu ? 'vgui-menu__item--has-submenu' : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={(event) => {\n        onClick?.(event)\n        if (event.defaultPrevented || disabled) return\n        onSelect?.()\n      }}\n    >\n      <span className=\"vgui-menu__gutter\" aria-hidden={checkable ? true : undefined}>\n        {checkable && checked ? '✓' : null}\n      </span>\n      <span className=\"vgui-menu__text\">{label}</span>\n      {hasSubmenu ? <span className=\"vgui-menu__arrow\" aria-hidden=\"true\" /> : null}\n    </button>\n  )\n})\n\nMenuItem.displayName = 'MenuItem'\n\n/** How long the pointer may leave a submenu parent before the submenu closes. */\nconst SUBMENU_CLOSE_DELAY = 150\n\n/** How long a typeahead buffer survives between keystrokes. */\nconst TYPEAHEAD_TIMEOUT = 500\n\nconst isAction = (spec: MenuItemSpec | undefined): spec is MenuItemSpec =>\n  spec !== undefined && (spec.type ?? 'item') === 'item'\n\nconst isFocusable = (spec: MenuItemSpec) => isAction(spec) && !spec.disabled\n\ninterface MenuLevelProps extends HTMLAttributes<HTMLDivElement> {\n  items: MenuItemSpec[]\n  labelledBy?: string\n  onClose?: () => void\n  orientation?: 'auto' | 'vertical'\n  isSubmenu?: boolean\n  forwardedRef?: Ref<HTMLDivElement>\n}\n\nfunction MenuLevel({\n  items,\n  labelledBy,\n  onClose,\n  orientation = 'auto',\n  isSubmenu = false,\n  forwardedRef,\n  ...rest\n}: MenuLevelProps) {\n  const itemRefs = useRef<Array<HTMLButtonElement | null>>([])\n  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const typeahead = useRef({ text: '', at: 0 })\n  const baseId = useId()\n\n  const focusable = items\n    .map((spec, index) => ({ spec, index }))\n    .filter(({ spec }) => isFocusable(spec))\n\n  const [activeIndex, setActiveIndex] = useState(() => focusable[0]?.index ?? -1)\n  const [openSubmenuId, setOpenSubmenuId] = useState<string | null>(null)\n\n  // A menu is a composite widget: opening it moves focus into it.\n  const firstIndex = focusable[0]?.index ?? -1\n  useEffect(() => {\n    if (firstIndex !== -1) itemRefs.current[firstIndex]?.focus()\n  }, [firstIndex])\n\n  useEffect(\n    () => () => {\n      if (closeTimer.current) clearTimeout(closeTimer.current)\n    },\n    [],\n  )\n\n  const cancelClose = () => {\n    if (closeTimer.current) {\n      clearTimeout(closeTimer.current)\n      closeTimer.current = null\n    }\n  }\n\n  const focusItem = (index: number) => {\n    setActiveIndex(index)\n    itemRefs.current[index]?.focus()\n  }\n\n  const move = (delta: number) => {\n    if (focusable.length === 0) return\n    const position = focusable.findIndex(({ index }) => index === activeIndex)\n    const next =\n      position === -1\n        ? delta > 0\n          ? 0\n          : focusable.length - 1\n        : (position + delta + focusable.length) % focusable.length\n    focusItem(focusable[next].index)\n  }\n\n  const jump = (position: number) => {\n    const target = focusable[position]\n    if (target) focusItem(target.index)\n  }\n\n  const typeaheadMove = (key: string) => {\n    const now = Date.now()\n    const state = typeahead.current\n    state.text = now - state.at > TYPEAHEAD_TIMEOUT ? key.toLowerCase() : state.text + key.toLowerCase()\n    state.at = now\n\n    const position = focusable.findIndex(({ index }) => index === activeIndex)\n    const ordered = [...focusable.slice(position + 1), ...focusable.slice(0, position + 1)]\n    let match = ordered.find(({ spec }) => spec.label.toLowerCase().startsWith(state.text))\n\n    if (!match && state.text.length > 1) {\n      state.text = key.toLowerCase()\n      match = ordered.find(({ spec }) => spec.label.toLowerCase().startsWith(state.text))\n    }\n\n    if (match) focusItem(match.index)\n  }\n\n  const closeSubmenu = (index: number) => {\n    cancelClose()\n    setOpenSubmenuId(null)\n    itemRefs.current[index]?.focus()\n  }\n\n  const onKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    const { key } = event\n\n    if (key === 'Tab') {\n      // Tab closes the menu without trapping focus.\n      onClose?.()\n      return\n    }\n\n    if (key === 'Enter' || key === ' ') {\n      // The row is a real <button>, so activation is native. Claim the event\n      // first so an ancestor menu bar does not also act on it.\n      event.stopPropagation()\n      return\n    }\n\n    switch (key) {\n      case 'ArrowDown':\n        move(1)\n        break\n      case 'ArrowUp':\n        move(-1)\n        break\n      case 'Home':\n        jump(0)\n        break\n      case 'End':\n        jump(focusable.length - 1)\n        break\n      case 'Escape':\n        onClose?.()\n        break\n      case 'ArrowRight': {\n        const spec = items[activeIndex]\n        if (spec?.items?.length) {\n          setOpenSubmenuId(spec.id)\n          break\n        }\n        // No submenu here: a MenuBar ancestor claims Right.\n        return\n      }\n      case 'ArrowLeft': {\n        if (isSubmenu) {\n          onClose?.()\n          break\n        }\n        // `orientation=\"auto\"` hands Left/Right to the MenuBar ancestor.\n        return\n      }\n      default:\n        if (key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return\n        typeaheadMove(key)\n    }\n\n    event.preventDefault()\n    event.stopPropagation()\n  }\n\n  return (\n    <div\n      {...rest}\n      ref={forwardedRef}\n      role=\"menu\"\n      aria-labelledby={labelledBy}\n      aria-orientation=\"vertical\"\n      className={['vgui-menu', isSubmenu ? 'vgui-menu--submenu' : null, rest.className]\n        .filter(Boolean)\n        .join(' ')}\n      onKeyDown={onKeyDown}\n      data-orientation={orientation}\n    >\n      {items.map((spec, index) => {\n        const type = spec.type ?? 'item'\n\n        if (type === 'separator') {\n          return <div key={spec.id} className=\"vgui-menu__separator\" role=\"separator\" />\n        }\n\n        if (type === 'label') {\n          return (\n            <div key={spec.id} className=\"vgui-menu__label\" role=\"presentation\">\n              {spec.label}\n            </div>\n          )\n        }\n\n        const submenuItems = spec.items ?? []\n        const hasSubmenu = submenuItems.length > 0\n        const rowId = `${baseId}-item-${spec.id}`\n\n        const row = (\n          <MenuItem\n            key={hasSubmenu ? undefined : spec.id}\n            id={rowId}\n            ref={(node) => {\n              itemRefs.current[index] = node\n            }}\n            label={spec.label}\n            checked={spec.checked}\n            hasSubmenu={hasSubmenu}\n            aria-expanded={hasSubmenu ? openSubmenuId === spec.id : undefined}\n            aria-controls={hasSubmenu ? `${baseId}-submenu-${spec.id}` : undefined}\n            disabled={spec.disabled || (!hasSubmenu && !spec.onSelect)}\n            tabIndex={activeIndex === index ? 0 : -1}\n            onClick={\n              hasSubmenu\n                ? () => {\n                    cancelClose()\n                    setOpenSubmenuId(spec.id)\n                  }\n                : undefined\n            }\n            onSelect={() => {\n              if (hasSubmenu) return\n              spec.onSelect?.()\n              onClose?.()\n            }}\n          />\n        )\n\n        if (!hasSubmenu) return row\n\n        return (\n          <div\n            key={spec.id}\n            className=\"vgui-menu__row\"\n            onMouseEnter={() => {\n              cancelClose()\n              setOpenSubmenuId(spec.id)\n            }}\n            onMouseLeave={() => {\n              cancelClose()\n              closeTimer.current = setTimeout(() => setOpenSubmenuId(null), SUBMENU_CLOSE_DELAY)\n            }}\n          >\n            {row}\n            {openSubmenuId === spec.id ? (\n              <MenuLevel\n                id={`${baseId}-submenu-${spec.id}`}\n                items={submenuItems}\n                labelledBy={rowId}\n                isSubmenu\n                orientation={orientation}\n                onClose={() => closeSubmenu(index)}\n              />\n            ) : null}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\n/** The dropdown panel: a flat-outlined list of {@link MenuItem} rows. */\nexport const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(\n  { items, labelledBy, onClose, orientation = 'auto', ...rest },\n  ref,\n) {\n  return (\n    <MenuLevel\n      {...rest}\n      items={items}\n      labelledBy={labelledBy}\n      onClose={onClose}\n      orientation={orientation}\n      forwardedRef={ref}\n    />\n  )\n})\n\nMenu.displayName = 'Menu'\n"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+export { Menu, MenuItem } from './Menu';
+export type { MenuItemProps, MenuItemSpec, MenuProps } from './Menu';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACvC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA"}

package/dist/components/MenuBar/MenuBar.css

@@ -0,0 +1,94 @@
+/*
+ * MenuBar — the top-level word strip and the dropdowns it opens.
+ * Spec: docs/components/MenuBar.md.
+ *
+ * `MenuBar {}` and `"Page MenuBar" {}` are empty blocks in steam.styles, so the
+ * strip deliberately carries no fill, no border and no height of its own: it
+ * sits directly on the window body.
+ */
+
+.vgui-menubar,
+.vgui-menu-bar {
+  box-sizing: border-box;
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  /* Nothing to reproduce: the strip has no chrome. */
+  background: none;
+  border: 0;
+  color: var(--vgui-text-strong);
+  font-family: var(--vgui-font);
+  font-size: var(--vgui-font-size);
+}
+
+.vgui-menubar--vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.vgui-menubar__group {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+
+.vgui-menubar__item {
+  box-sizing: border-box;
+  /* padding-right = -2 in VGUI has no CSS equivalent, so the words are simply
+     packed tightly. The hit area is not shrunk by a negative margin. */
+  padding: 2px 4px 2px 2px;
+  border: 0;
+  background: transparent;
+  /* Departure: `TitleDimText` (#889180) is 2.31:1 on a GreenBG panel, so the
+     documented "focused window" colour is the resting colour and the ladder is
+     white -> maize. Recorded in the component's Storybook notes. */
+  color: var(--vgui-text-strong);
+  font: inherit;
+  font-size: var(--vgui-font-size);
+  /* Load-bearing: the hit area is the full height of the strip. */
+  line-height: var(--vgui-menubar-height, 24px);
+  cursor: default;
+}
+
+/* "Focused, hover" in the states table is white on transparent — the original
+   never fills — so hover only has to hold the resting colour. */
+.vgui-menubar__item:hover {
+  color: var(--vgui-text-strong);
+}
+
+/* `Over`: maize text. steam.styles gives the open item no fill at all; the
+   library adds the CSS port's `--vgui-surface-light` so the state reads. */
+.vgui-menubar__item[aria-expanded='true'] {
+  color: var(--vgui-heading);
+  background-color: var(--vgui-surface-light);
+}
+
+.vgui-menubar__item:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-menubar__item:disabled {
+  color: var(--vgui-text-disabled);
+  text-shadow: 1px 1px 0 var(--vgui-text-disabled-shadow);
+}
+
+.vgui-menubar--vertical .vgui-menubar__item {
+  padding: 2px 8px 2px 4px;
+  text-align: left;
+}
+
+/* The dropdown hangs off its word. */
+.vgui-menubar__menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1;
+}
+
+.vgui-crisp .vgui-menubar__item:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}

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

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

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

@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from 'react';
+import type { MenuItemSpec } from '../Menu/Menu';
+import './MenuBar.css';
+/** One top-level word in a {@link MenuBar}. */
+export interface MenuBarItemSpec {
+    /** Stable identity and React key. */
+    id: string;
+    /** The visible word, e.g. "File". */
+    label: string;
+    /** Access key, announced and bound to Alt+<key>. */
+    accessKey?: string;
+    /** Menu contents; see Menu's MenuItemSpec[]. */
+    items: MenuItemSpec[];
+    /** Renders a disabled, unopenable word. */
+    disabled?: boolean;
+}
+/** Props of {@link MenuBar}. */
+export interface MenuBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Top-level words, in order. */
+    items: MenuBarItemSpec[];
+    /** Layout direction. Menu bars are horizontal; vertical exists for side panes. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Called with the open item's id, or undefined when everything closed. */
+    onOpenChange?: (openId: string | undefined) => void;
+}
+/** 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.
+ */
+export declare const MenuBar: import("react").ForwardRefExoticComponent<MenuBarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=MenuBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuBar.d.ts","sourceRoot":"","sources":["../../../src/components/MenuBar/MenuBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAuC,MAAM,OAAO,CAAA;AAGhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAEhD,OAAO,eAAe,CAAA;AAEtB,+CAA+C;AAC/C,MAAM,WAAW,eAAe;IAC9B,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gDAAgD;IAChD,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,gCAAgC;AAChC,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAClE,iCAAiC;IACjC,KAAK,EAAE,eAAe,EAAE,CAAA;IACxB,kFAAkF;IAClF,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,2EAA2E;IAC3E,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;CACpD;AAED;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,yGA8JlB,CAAA"}