@dalcvil/steam-green-react 0.2.0 → 1.0.0

package/dist/components/Scrollbar/Scrollbar.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from 'react';
+import './Scrollbar.css';
+import '../../styles/scrollbars.css';
+export interface ScrollbarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Scrolling axis. Defaults to `"vertical"`. */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Painting strategy. `"drawn"` renders the button/gutter/thumb tree, which
+     * looks the same in every engine; `"native"` sets `scrollbar-color` and emits
+     * no extra markup, leaving the bar to the platform. Defaults to `"drawn"`.
+     */
+    variant?: 'drawn' | 'native';
+    /**
+     * Bar thickness. Defaults to `--vgui-scrollbar-size` (18px). Honoured by both
+     * variants, but the platform only paints a custom thickness in WebKit/Blink.
+     */
+    thickness?: number | string;
+    /** Reserve space for the bar even when the content does not overflow. */
+    alwaysVisible?: boolean;
+    /**
+     * Paint the gutter with nothing, matching `ScrollBarSlider:disabled`
+     * (`steam.styles:2315`). The content stays scrollable.
+     */
+    disabled?: boolean;
+    /** Pixels of the region that must remain visible above the bar. */
+    scrollPadding?: number;
+    /** Called with the scroll offset after every scroll frame. */
+    onScrollOffsetChange?: (offset: number, max: number) => void;
+}
+export declare const Scrollbar: import("react").ForwardRefExoticComponent<ScrollbarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Scrollbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../../../src/components/Scrollbar/Scrollbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,cAAc,EAIf,MAAM,OAAO,CAAA;AAEd,OAAO,iBAAiB,CAAA;AACxB,OAAO,6BAA6B,CAAA;AAEpC,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,gDAAgD;IAChD,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACvC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,yEAAyE;IACzE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,8DAA8D;IAC9D,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAC7D;AAgBD,eAAO,MAAM,SAAS,2GA2TpB,CAAA"}

package/dist/components/Scrollbar/Scrollbar.js

@@ -0,0 +1,277 @@
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import "../../styles/scrollbars.css";
+import "./Scrollbar.css";
+//#region src/components/Scrollbar/Scrollbar.tsx
+var EMPTY_METRICS = {
+	offset: 0,
+	max: 0,
+	viewport: 0,
+	content: 0
+};
+/** jsdom has no layout engine, so every measured number is 0/NaN there. */
+function toExtent(value) {
+	return Number.isFinite(value) && value > 0 ? value : 0;
+}
+var Scrollbar = forwardRef(function Scrollbar({ className, orientation = "vertical", variant = "drawn", thickness, alwaysVisible = false, disabled = false, scrollPadding, onScrollOffsetChange, children, style, tabIndex, onScroll, onKeyDown, ...rest }, forwardedRef) {
+	const regionRef = useRef(null);
+	const contentRef = useRef(null);
+	const dragCleanupRef = useRef(null);
+	const [metrics, setMetrics] = useState(EMPTY_METRICS);
+	const drawn = variant === "drawn";
+	const vertical = orientation === "vertical";
+	const scroller = drawn ? contentRef : regionRef;
+	const measure = useCallback(() => {
+		const node = scroller.current;
+		if (!node) return;
+		const viewport = toExtent(vertical ? node.clientHeight : node.clientWidth);
+		const content = toExtent(vertical ? node.scrollHeight : node.scrollWidth);
+		const offset = Math.max(vertical ? node.scrollTop : node.scrollLeft, 0);
+		const max = content > viewport ? content - viewport : 0;
+		setMetrics({
+			offset: max > 0 ? Math.min(offset, max) : offset,
+			max,
+			viewport,
+			content
+		});
+		onScrollOffsetChange?.(max > 0 ? Math.min(offset, max) : offset, max);
+	}, [
+		onScrollOffsetChange,
+		scroller,
+		vertical
+	]);
+	useEffect(() => {
+		measure();
+		const node = scroller.current;
+		if (!node || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [
+		measure,
+		scroller,
+		children
+	]);
+	useEffect(() => () => dragCleanupRef.current?.(), []);
+	const setRegionRef = useCallback((node) => {
+		regionRef.current = node;
+		if (typeof forwardedRef === "function") forwardedRef(node);
+		else if (forwardedRef) forwardedRef.current = node;
+	}, [forwardedRef]);
+	const handleScroll = useCallback((event) => {
+		onScroll?.(event);
+		measure();
+	}, [measure, onScroll]);
+	const scrollByExtent = useCallback((delta) => {
+		const node = scroller.current;
+		if (!node) return;
+		if (vertical) node.scrollTop = Math.max(node.scrollTop + delta, 0);
+		else node.scrollLeft = Math.max(node.scrollLeft + delta, 0);
+		measure();
+	}, [
+		measure,
+		scroller,
+		vertical
+	]);
+	const scrollToEdge = useCallback((edge) => {
+		const node = scroller.current;
+		if (!node) return;
+		if (vertical) node.scrollTop = edge === "start" ? 0 : node.scrollHeight;
+		else node.scrollLeft = edge === "start" ? 0 : node.scrollWidth;
+		measure();
+	}, [
+		measure,
+		scroller,
+		vertical
+	]);
+	const step = useCallback((direction, factor = .2) => {
+		const node = scroller.current;
+		if (!node) return;
+		const viewport = toExtent(vertical ? node.clientHeight : node.clientWidth);
+		const content = toExtent(vertical ? node.scrollHeight : node.scrollWidth);
+		const distance = viewport > 0 ? Math.max(1, Math.round(viewport * factor)) : Math.max(1, Math.round(content / 10) || 20);
+		scrollByExtent(distance * direction);
+	}, [
+		scrollByExtent,
+		scroller,
+		vertical
+	]);
+	const scrollToRatio = useCallback((ratio) => {
+		const node = scroller.current;
+		if (!node) return;
+		const viewport = toExtent(vertical ? node.clientHeight : node.clientWidth);
+		const content = toExtent(vertical ? node.scrollHeight : node.scrollWidth);
+		const max = content > viewport ? content - viewport : 0;
+		if (max <= 0) return;
+		const next = Math.round(Math.min(Math.max(ratio, 0), 1) * max);
+		if (vertical) node.scrollTop = next;
+		else node.scrollLeft = next;
+		measure();
+	}, [
+		measure,
+		scroller,
+		vertical
+	]);
+	const handleKeyDown = useCallback((event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || !drawn) return;
+		const back = vertical ? "ArrowUp" : "ArrowLeft";
+		const forward = vertical ? "ArrowDown" : "ArrowRight";
+		switch (event.key) {
+			case back:
+				event.preventDefault();
+				step(-1);
+				return;
+			case forward:
+				event.preventDefault();
+				step(1);
+				return;
+			case "PageUp":
+				event.preventDefault();
+				step(-1, 1);
+				return;
+			case "PageDown":
+				event.preventDefault();
+				step(1, 1);
+				return;
+			case " ":
+				event.preventDefault();
+				step(event.shiftKey ? -1 : 1, 1);
+				return;
+			case "Home":
+				event.preventDefault();
+				scrollToEdge("start");
+				return;
+			case "End":
+				event.preventDefault();
+				scrollToEdge("end");
+				return;
+			default: return;
+		}
+	}, [
+		drawn,
+		onKeyDown,
+		scrollToEdge,
+		step,
+		vertical
+	]);
+	const handleGutterPointerDown = useCallback((event) => {
+		if (disabled) return;
+		const gutter = event.currentTarget;
+		const extent = toExtent(vertical ? gutter.clientHeight : gutter.clientWidth);
+		if (extent <= 0) return;
+		const start = vertical ? gutter.getBoundingClientRect().top : gutter.getBoundingClientRect().left;
+		scrollToRatio(((vertical ? event.clientY : event.clientX) - start) / extent);
+	}, [
+		disabled,
+		scrollToRatio,
+		vertical
+	]);
+	const handleThumbPointerDown = useCallback((event) => {
+		if (disabled) return;
+		const node = scroller.current;
+		const gutter = event.currentTarget.parentElement;
+		if (!node || !gutter) return;
+		const extent = toExtent(vertical ? gutter.clientHeight : gutter.clientWidth);
+		const viewport = toExtent(vertical ? node.clientHeight : node.clientWidth);
+		const content = toExtent(vertical ? node.scrollHeight : node.scrollWidth);
+		const max = content > viewport ? content - viewport : 0;
+		if (extent <= 0 || max <= 0) return;
+		const travel = extent - Math.max(1, Math.min(extent, viewport / content * extent));
+		if (travel <= 0) return;
+		const axis = vertical ? "clientY" : "clientX";
+		const startPosition = event[axis];
+		const startOffset = vertical ? node.scrollTop : node.scrollLeft;
+		const onMove = (moveEvent) => {
+			const delta = (moveEvent[axis] - startPosition) / travel;
+			const next = Math.round(Math.min(Math.max(startOffset + delta * max, 0), max));
+			if (vertical) node.scrollTop = next;
+			else node.scrollLeft = next;
+			measure();
+		};
+		const cleanup = () => {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", cleanup);
+			dragCleanupRef.current = null;
+		};
+		dragCleanupRef.current?.();
+		dragCleanupRef.current = cleanup;
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", cleanup);
+	}, [
+		disabled,
+		measure,
+		scroller,
+		vertical
+	]);
+	const classes = ["vgui-scroll-region", `vgui-scroll-region--${orientation}`];
+	if (drawn) classes.push("vgui-scroll-region--drawn");
+	else classes.push("vgui-scroll-surface");
+	if (alwaysVisible) classes.push("vgui-scroll-region--always-visible");
+	if (className) classes.push(className);
+	const regionStyle = {
+		...style,
+		...thickness === void 0 ? null : { "--vgui-scrollbar-size": cssLength(thickness) },
+		...scrollPadding === void 0 ? null : { "--vgui-scrollbar-scroll-padding": `${scrollPadding}px` }
+	};
+	const ratio = metrics.max > 0 && metrics.viewport > 0 ? metrics.viewport / (metrics.max + metrics.viewport) : 1;
+	const lengthPercent = Math.round(Math.min(Math.max(ratio, .1), 1) * 100);
+	const offsetFraction = metrics.max > 0 ? metrics.offset / metrics.max : 0;
+	const thumbStyle = {
+		"--vgui-scrollbar-thumb-length": `${lengthPercent}%`,
+		"--vgui-scrollbar-thumb-offset": offsetFraction
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: setRegionRef,
+		className: classes.join(" "),
+		style: regionStyle,
+		tabIndex: tabIndex ?? 0,
+		"data-disabled": disabled ? "" : void 0,
+		onKeyDown: handleKeyDown,
+		...drawn ? null : { onScroll: handleScroll },
+		...rest,
+		children: drawn ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+			ref: contentRef,
+			className: "vgui-scroll-region__content",
+			onScroll: handleScroll,
+			children
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "vgui-scrollbar",
+			"data-orientation": orientation,
+			"aria-hidden": "true",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					tabIndex: -1,
+					className: "vgui-scrollbar__button vgui-scrollbar__button--decrement",
+					onClick: () => step(-1),
+					children: /* @__PURE__ */ jsx("span", { className: `vgui-scrollbar__glyph vgui-scrollbar__glyph--${vertical ? "up" : "left"}` })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "vgui-scrollbar__gutter",
+					onPointerDown: handleGutterPointerDown,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "vgui-scrollbar__thumb",
+						style: thumbStyle,
+						onPointerDown: handleThumbPointerDown
+					})
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					tabIndex: -1,
+					className: "vgui-scrollbar__button vgui-scrollbar__button--increment",
+					onClick: () => step(1),
+					children: /* @__PURE__ */ jsx("span", { className: `vgui-scrollbar__glyph vgui-scrollbar__glyph--${vertical ? "down" : "right"}` })
+				})
+			]
+		})] }) : children
+	});
+});
+function cssLength(value) {
+	return typeof value === "number" ? `${value}px` : value;
+}
+Scrollbar.displayName = "Scrollbar";
+//#endregion
+export { Scrollbar };
+
+//# sourceMappingURL=Scrollbar.js.map

package/dist/components/Scrollbar/Scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.js","names":[],"sources":["../../../src/components/Scrollbar/Scrollbar.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'\nimport type {\n  CSSProperties,\n  HTMLAttributes,\n  KeyboardEvent as ReactKeyboardEvent,\n  PointerEvent as ReactPointerEvent,\n  UIEvent as ReactUIEvent,\n} from 'react'\n\nimport './Scrollbar.css'\nimport '../../styles/scrollbars.css'\n\nexport interface ScrollbarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Scrolling axis. Defaults to `\"vertical\"`. */\n  orientation?: 'vertical' | 'horizontal'\n  /**\n   * Painting strategy. `\"drawn\"` renders the button/gutter/thumb tree, which\n   * looks the same in every engine; `\"native\"` sets `scrollbar-color` and emits\n   * no extra markup, leaving the bar to the platform. Defaults to `\"drawn\"`.\n   */\n  variant?: 'drawn' | 'native'\n  /**\n   * Bar thickness. Defaults to `--vgui-scrollbar-size` (18px). Honoured by both\n   * variants, but the platform only paints a custom thickness in WebKit/Blink.\n   */\n  thickness?: number | string\n  /** Reserve space for the bar even when the content does not overflow. */\n  alwaysVisible?: boolean\n  /**\n   * Paint the gutter with nothing, matching `ScrollBarSlider:disabled`\n   * (`steam.styles:2315`). The content stays scrollable.\n   */\n  disabled?: boolean\n  /** Pixels of the region that must remain visible above the bar. */\n  scrollPadding?: number\n  /** Called with the scroll offset after every scroll frame. */\n  onScrollOffsetChange?: (offset: number, max: number) => void\n}\n\ninterface ScrollMetrics {\n  offset: number\n  max: number\n  viewport: number\n  content: number\n}\n\nconst EMPTY_METRICS: ScrollMetrics = { offset: 0, max: 0, viewport: 0, content: 0 }\n\n/** jsdom has no layout engine, so every measured number is 0/NaN there. */\nfunction toExtent(value: number): number {\n  return Number.isFinite(value) && value > 0 ? value : 0\n}\n\nexport const Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>(function Scrollbar(\n  {\n    className,\n    orientation = 'vertical',\n    variant = 'drawn',\n    thickness,\n    alwaysVisible = false,\n    disabled = false,\n    scrollPadding,\n    onScrollOffsetChange,\n    children,\n    style,\n    tabIndex,\n    onScroll,\n    onKeyDown,\n    ...rest\n  },\n  forwardedRef,\n) {\n  const regionRef = useRef<HTMLDivElement | null>(null)\n  const contentRef = useRef<HTMLDivElement | null>(null)\n  const dragCleanupRef = useRef<(() => void) | null>(null)\n  const [metrics, setMetrics] = useState<ScrollMetrics>(EMPTY_METRICS)\n\n  const drawn = variant === 'drawn'\n  const vertical = orientation === 'vertical'\n\n  // In the native path the region scrolls itself; in the drawn path the inner\n  // content does, and the bar is a flex sibling that never scrolls away.\n  const scroller = drawn ? contentRef : regionRef\n\n  const measure = useCallback(() => {\n    const node = scroller.current\n    if (!node) return\n\n    const viewport = toExtent(vertical ? node.clientHeight : node.clientWidth)\n    const content = toExtent(vertical ? node.scrollHeight : node.scrollWidth)\n    const offset = Math.max(vertical ? node.scrollTop : node.scrollLeft, 0)\n    const max = content > viewport ? content - viewport : 0\n\n    setMetrics({\n      offset: max > 0 ? Math.min(offset, max) : offset,\n      max,\n      viewport,\n      content,\n    })\n    onScrollOffsetChange?.(max > 0 ? Math.min(offset, max) : offset, max)\n  }, [onScrollOffsetChange, scroller, vertical])\n\n  useEffect(() => {\n    measure()\n\n    const node = scroller.current\n    if (!node || typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(measure)\n    observer.observe(node)\n    return () => observer.disconnect()\n  }, [measure, scroller, children])\n\n  useEffect(() => () => dragCleanupRef.current?.(), [])\n\n  const setRegionRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      regionRef.current = node\n      if (typeof forwardedRef === 'function') forwardedRef(node)\n      else if (forwardedRef) forwardedRef.current = node\n    },\n    [forwardedRef],\n  )\n\n  const handleScroll = useCallback(\n    (event: ReactUIEvent<HTMLDivElement>) => {\n      onScroll?.(event)\n      measure()\n    },\n    [measure, onScroll],\n  )\n\n  const scrollByExtent = useCallback(\n    (delta: number) => {\n      const node = scroller.current\n      if (!node) return\n\n      // The engine clamps the far end to the content extent; the near end is\n      // clamped here so a negative nudge cannot park the scroller above zero.\n      if (vertical) node.scrollTop = Math.max(node.scrollTop + delta, 0)\n      else node.scrollLeft = Math.max(node.scrollLeft + delta, 0)\n      measure()\n    },\n    [measure, scroller, vertical],\n  )\n\n  const scrollToEdge = useCallback(\n    (edge: 'start' | 'end') => {\n      const node = scroller.current\n      if (!node) return\n\n      if (vertical) node.scrollTop = edge === 'start' ? 0 : node.scrollHeight\n      else node.scrollLeft = edge === 'start' ? 0 : node.scrollWidth\n      measure()\n    },\n    [measure, scroller, vertical],\n  )\n\n  const step = useCallback(\n    (direction: -1 | 1, factor = 0.2) => {\n      const node = scroller.current\n      if (!node) return\n\n      const viewport = toExtent(vertical ? node.clientHeight : node.clientWidth)\n      const content = toExtent(vertical ? node.scrollHeight : node.scrollWidth)\n      // A fifth of a viewport is a line-page; without a viewport it degrades to\n      // the content or to a fixed 20px nudge, so the arrows still do something.\n      const distance =\n        viewport > 0\n          ? Math.max(1, Math.round(viewport * factor))\n          : Math.max(1, Math.round(content / 10) || 20)\n\n      scrollByExtent(distance * direction)\n    },\n    [scrollByExtent, scroller, vertical],\n  )\n\n  const scrollToRatio = useCallback(\n    (ratio: number) => {\n      const node = scroller.current\n      if (!node) return\n\n      const viewport = toExtent(vertical ? node.clientHeight : node.clientWidth)\n      const content = toExtent(vertical ? node.scrollHeight : node.scrollWidth)\n      const max = content > viewport ? content - viewport : 0\n      if (max <= 0) return\n\n      const next = Math.round(Math.min(Math.max(ratio, 0), 1) * max)\n      if (vertical) node.scrollTop = next\n      else node.scrollLeft = next\n      measure()\n    },\n    [measure, scroller, vertical],\n  )\n\n  const handleKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event)\n\n      // Only the drawn path needs this. Its region hides its overflow and lets\n      // the inner box scroll, so the browser has no scroll container to move\n      // when the region itself holds focus; the keys it would have handled\n      // natively are mapped onto the scroller here instead.\n      if (event.defaultPrevented || !drawn) return\n\n      const back = vertical ? 'ArrowUp' : 'ArrowLeft'\n      const forward = vertical ? 'ArrowDown' : 'ArrowRight'\n\n      switch (event.key) {\n        case back:\n          event.preventDefault()\n          step(-1)\n          return\n        case forward:\n          event.preventDefault()\n          step(1)\n          return\n        case 'PageUp':\n          event.preventDefault()\n          step(-1, 1)\n          return\n        case 'PageDown':\n          event.preventDefault()\n          step(1, 1)\n          return\n        case ' ':\n          event.preventDefault()\n          step(event.shiftKey ? -1 : 1, 1)\n          return\n        case 'Home':\n          event.preventDefault()\n          scrollToEdge('start')\n          return\n        case 'End':\n          event.preventDefault()\n          scrollToEdge('end')\n          return\n        default:\n          return\n      }\n    },\n    [drawn, onKeyDown, scrollToEdge, step, vertical],\n  )\n\n  const handleGutterPointerDown = useCallback(\n    (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (disabled) return\n\n      const gutter = event.currentTarget\n      const extent = toExtent(vertical ? gutter.clientHeight : gutter.clientWidth)\n      if (extent <= 0) return\n\n      const start = vertical ? gutter.getBoundingClientRect().top : gutter.getBoundingClientRect().left\n      scrollToRatio(((vertical ? event.clientY : event.clientX) - start) / extent)\n    },\n    [disabled, scrollToRatio, vertical],\n  )\n\n  const handleThumbPointerDown = useCallback(\n    (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (disabled) return\n\n      const node = scroller.current\n      const gutter = event.currentTarget.parentElement\n      if (!node || !gutter) return\n\n      const extent = toExtent(vertical ? gutter.clientHeight : gutter.clientWidth)\n      const viewport = toExtent(vertical ? node.clientHeight : node.clientWidth)\n      const content = toExtent(vertical ? node.scrollHeight : node.scrollWidth)\n      const max = content > viewport ? content - viewport : 0\n      // Without a measurable gutter there is nothing to drag; leaving the event\n      // alone keeps the thumb inert rather than jumping the scroll position.\n      if (extent <= 0 || max <= 0) return\n\n      const thumbExtent = Math.max(1, Math.min(extent, (viewport / content) * extent))\n      const travel = extent - thumbExtent\n      if (travel <= 0) return\n\n      const axis = vertical ? 'clientY' : 'clientX'\n      const startPosition = event[axis]\n      const startOffset = vertical ? node.scrollTop : node.scrollLeft\n\n      const onMove = (moveEvent: PointerEvent) => {\n        const delta = (moveEvent[axis] - startPosition) / travel\n        const next = Math.round(Math.min(Math.max(startOffset + delta * max, 0), max))\n        if (vertical) node.scrollTop = next\n        else node.scrollLeft = next\n        measure()\n      }\n      const cleanup = () => {\n        window.removeEventListener('pointermove', onMove)\n        window.removeEventListener('pointerup', cleanup)\n        dragCleanupRef.current = null\n      }\n\n      dragCleanupRef.current?.()\n      dragCleanupRef.current = cleanup\n      window.addEventListener('pointermove', onMove)\n      window.addEventListener('pointerup', cleanup)\n    },\n    [disabled, measure, scroller, vertical],\n  )\n\n  const classes = ['vgui-scroll-region', `vgui-scroll-region--${orientation}`]\n  if (drawn) classes.push('vgui-scroll-region--drawn')\n  else classes.push('vgui-scroll-surface')\n  if (alwaysVisible) classes.push('vgui-scroll-region--always-visible')\n  if (className) classes.push(className)\n\n  const regionStyle: CSSProperties = {\n    ...style,\n    ...(thickness === undefined ? null : { '--vgui-scrollbar-size': cssLength(thickness) }),\n    ...(scrollPadding === undefined ? null : { '--vgui-scrollbar-scroll-padding': `${scrollPadding}px` }),\n  } as CSSProperties\n\n  // The thumb is sized from measurements that jsdom cannot provide, so an\n  // unmeasurable region falls back to a full-length thumb rather than a\n  // zero-length one.\n  const ratio = metrics.max > 0 && metrics.viewport > 0 ? metrics.viewport / (metrics.max + metrics.viewport) : 1\n  const lengthPercent = Math.round(Math.min(Math.max(ratio, 0.1), 1) * 100)\n  const offsetFraction = metrics.max > 0 ? metrics.offset / metrics.max : 0\n  const thumbStyle = {\n    '--vgui-scrollbar-thumb-length': `${lengthPercent}%`,\n    '--vgui-scrollbar-thumb-offset': offsetFraction,\n  } as CSSProperties\n\n  return (\n    <div\n      ref={setRegionRef}\n      className={classes.join(' ')}\n      style={regionStyle}\n      tabIndex={tabIndex ?? 0}\n      data-disabled={disabled ? '' : undefined}\n      onKeyDown={handleKeyDown}\n      {...(drawn ? null : { onScroll: handleScroll })}\n      {...rest}\n    >\n      {drawn ? (\n        <>\n          <div ref={contentRef} className=\"vgui-scroll-region__content\" onScroll={handleScroll}>\n            {children}\n          </div>\n          <div className=\"vgui-scrollbar\" data-orientation={orientation} aria-hidden=\"true\">\n            <button\n              type=\"button\"\n              tabIndex={-1}\n              className=\"vgui-scrollbar__button vgui-scrollbar__button--decrement\"\n              onClick={() => step(-1)}\n            >\n              <span className={`vgui-scrollbar__glyph vgui-scrollbar__glyph--${vertical ? 'up' : 'left'}`} />\n            </button>\n            <div className=\"vgui-scrollbar__gutter\" onPointerDown={handleGutterPointerDown}>\n              <div className=\"vgui-scrollbar__thumb\" style={thumbStyle} onPointerDown={handleThumbPointerDown} />\n            </div>\n            <button\n              type=\"button\"\n              tabIndex={-1}\n              className=\"vgui-scrollbar__button vgui-scrollbar__button--increment\"\n              onClick={() => step(1)}\n            >\n              <span className={`vgui-scrollbar__glyph vgui-scrollbar__glyph--${vertical ? 'down' : 'right'}`} />\n            </button>\n          </div>\n        </>\n      ) : (\n        children\n      )}\n    </div>\n  )\n})\n\nfunction cssLength(value: number | string): string {\n  return typeof value === 'number' ? `${value}px` : value\n}\n\nScrollbar.displayName = 'Scrollbar'\n"],"mappings":"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"}

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

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

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

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

package/dist/components/Select/Select.css

@@ -0,0 +1,299 @@
+/*
+ * Green Steam select — the VGUI `ComboBox` (docs/components/Select.md).
+ *
+ * Three details separate a real VGUI combobox from a styled `<select>` and all
+ * three are kept here:
+ *
+ *   1. The field half is a field: black `TextEntryBG` interior with the inset
+ *      bevel a `TextEntry` has, so `--vgui-field-bg` paints the trigger.
+ *   2. The button half is 18px of its own raised control with its own bevel,
+ *      not a background-image caret, which is what makes the separation read.
+ *   3. The popup is a `Menu`: `--vgui-surface-dark` face, one bevel-dark
+ *      border, 18px rows and an `--vgui-accent-dark` selection bar.
+ *
+ * The caret is drawn with `clip-path` instead of the recipe's
+ * `mask-image: var(--vgui-glyph-caret-down)`: no glyph module or caret token
+ * exists in `src`, so the 7x4 triangle is traced inline. `--vgui-field-bg`
+ * (#000, field and popup interiors) is named by this doc but is absent from
+ * `src/styles/tokens.css`; no literal fallback is declared for it.
+ */
+
+.vgui-select {
+  /* Component-local metrics: the 19px field, 18px button half and 18px rows
+   * come from the CSS port, not from the theme (the theme's scale has no 19px
+   * and its 18px values are the scrollbar and the title bar). */
+  --vgui-select-height: 19px;
+  --vgui-select-button-width: 18px;
+  --vgui-select-option-height: 18px;
+  --vgui-select-list-max-height: 200px;
+  /* The caret gutter, reserved on every row so labels never shift when the
+   * selection moves. Sized to the 7px glyph plus the 4px inset. */
+  --vgui-select-check-width: 15px;
+
+  position: relative;
+  display: inline-block;
+  min-inline-size: 0;
+  font: inherit;
+  color: var(--vgui-text);
+}
+
+.vgui-select--small {
+  --vgui-select-height: 18px;
+}
+
+.vgui-select--large {
+  --vgui-select-height: var(--vgui-control-height);
+}
+
+/* --- The field half ------------------------------------------------------ */
+
+.vgui-select__trigger,
+.vgui-select__field {
+  box-sizing: border-box;
+  display: flex;
+  align-items: stretch;
+  inline-size: 100%;
+  min-block-size: var(--vgui-select-height);
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  background-color: var(--vgui-field-bg);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-radius: 0;
+  text-align: left;
+  cursor: pointer;
+}
+
+/* Open: `TextEntryBorderFocused` on the field. VGUI recolours the whole frame;
+ * the theme has no split light/dark focused bevel, so all four sides take the
+ * accent. */
+.vgui-select--open .vgui-select__trigger,
+.vgui-select--open .vgui-select__field {
+  border-color: var(--vgui-accent);
+}
+
+/* Invalid: the danger border sits on the light half, matching `TextInput`. */
+.vgui-select--invalid .vgui-select__trigger,
+.vgui-select--invalid .vgui-select__field {
+  border-top-color: var(--vgui-danger);
+  border-left-color: var(--vgui-danger);
+}
+
+.vgui-select__trigger:focus-visible,
+.vgui-select__input:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+/* Pixel-perfect rendering is opt-in, as in the theme layer. */
+.vgui-crisp .vgui-select__trigger:focus-visible,
+.vgui-crisp .vgui-select__input:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+.vgui-select__value {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  min-inline-size: 0;
+  padding: 0 var(--vgui-field-inset);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.vgui-select__value[data-placeholder='true'] {
+  color: var(--vgui-text-dim);
+}
+
+/* Editable: the field half is a text entry, so the caret is a text caret. */
+.vgui-select__editable .vgui-select__field {
+  cursor: text;
+}
+
+.vgui-select__input {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  padding: 0 var(--vgui-field-inset);
+  font: inherit;
+  color: var(--vgui-text);
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  caret-color: var(--vgui-text);
+}
+
+.vgui-select__input::placeholder {
+  color: var(--vgui-text-dim);
+  opacity: 1;
+}
+
+.vgui-select__input::selection {
+  background-color: var(--vgui-selection-bg);
+  color: var(--vgui-selection-text);
+}
+
+/* --- The button half ----------------------------------------------------- */
+
+.vgui-select__button {
+  box-sizing: border-box;
+  flex: 0 0 var(--vgui-select-button-width);
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  background-color: var(--vgui-surface);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-radius: 0;
+  cursor: pointer;
+}
+
+/* The 7x4 caret, traced rather than masked: `--vgui-glyph-caret-down` and the
+ * shared glyph module the doc points at do not exist in `src`. */
+.vgui-select__button::before {
+  content: '';
+  flex: none;
+  inline-size: 7px;
+  block-size: 4px;
+  background-color: var(--vgui-text);
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+/* Closed with the field untouched: identical to closed in every value, so
+ * there is deliberately no hover rule on the trigger. The button half is its
+ * own control and takes the usual raised-control hover. */
+.vgui-select__button:hover {
+  background-color: var(--vgui-surface-light);
+}
+
+/* --- Disabled ------------------------------------------------------------ */
+
+.vgui-select--disabled .vgui-select__trigger,
+.vgui-select--disabled .vgui-select__field {
+  cursor: not-allowed;
+}
+
+.vgui-select--disabled .vgui-select__value,
+.vgui-select--disabled .vgui-select__input {
+  color: var(--vgui-text-disabled);
+  text-shadow: 1px 1px 0 var(--vgui-text-disabled-shadow);
+}
+
+.vgui-select--disabled .vgui-select__button,
+.vgui-select--disabled .vgui-select__button:hover {
+  background-color: var(--vgui-surface);
+}
+
+.vgui-select--disabled .vgui-select__button::before {
+  background-color: var(--vgui-text-disabled);
+}
+
+/* --- The popup (a Menu) -------------------------------------------------- */
+
+.vgui-select__list {
+  position: absolute;
+  z-index: 100;
+  inset-inline: 0;
+  inset-block-start: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  max-block-size: var(--vgui-select-list-max-height);
+  overflow-y: auto;
+  background-color: var(--vgui-surface-dark);
+  border: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  /* VGUI let the popup paint straight over its siblings; a drop shadow is the
+   * only way to lift it off the page in the DOM. Bevel dark instead of the
+   * recipe's `rgb(0 0 0 / 0.35)`, which is a colour literal. */
+  box-shadow: 2px 2px 0 var(--vgui-bevel-dark);
+}
+
+.vgui-select__option {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-block-size: var(--vgui-select-option-height);
+  padding: 0 var(--vgui-field-inset);
+  padding-inline-start: var(--vgui-select-check-width);
+  color: var(--vgui-text);
+  cursor: default;
+}
+
+/* The selected row's non-colour cue: a checkmark, as later Steam builds drew.
+ * `content: ''` contributes nothing to the accessible name. */
+.vgui-select__option::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: var(--vgui-field-inset);
+  inset-block-start: 50%;
+  inline-size: 7px;
+  block-size: 7px;
+  translate: 0 -50%;
+  background-color: currentColor;
+  clip-path: polygon(
+    0 45%,
+    35% 100%,
+    100% 10%,
+    80% 0,
+    35% 68%,
+    18% 45%
+  );
+  opacity: 0;
+}
+
+/* #232421 on #91863C is 4.22:1; the port's white is 3.70:1 and fails.
+ * `--vgui-selection-text` is exactly #232421. */
+.vgui-select__option[aria-selected='true'] {
+  background-color: var(--vgui-accent-dark);
+  color: var(--vgui-selection-text);
+}
+
+.vgui-select__option[aria-selected='true']::before {
+  opacity: 1;
+}
+
+/* The row the keyboard is on, painted exactly like `Menu`'s hovered row. */
+.vgui-select__option[data-active='true'] {
+  background-color: var(--vgui-accent-dark);
+  color: var(--vgui-selection-text);
+}
+
+.vgui-select__option[aria-disabled='true'] {
+  color: var(--vgui-text-disabled);
+  text-shadow: 1px 1px 0 var(--vgui-text-disabled-shadow);
+}
+
+.vgui-select__option[aria-disabled='true']::before {
+  color: var(--vgui-text-disabled);
+}
+
+/* --- Clay ---------------------------------------------------------------- */
+
+/* `--clay` is a hook rather than a repaint, matching `TextInput`: the field
+ * stays black inside a property sheet and only the chrome turns grey. */
+.vgui-select--clay .vgui-select__button {
+  background-color: var(--vgui-clay-button);
+}
+
+.vgui-select--clay .vgui-select__button:hover {
+  background-color: var(--vgui-clay-light);
+}
+
+.vgui-select--clay .vgui-select__button::before {
+  background-color: var(--vgui-clay-glyph);
+}
+
+.vgui-select--clay .vgui-select__trigger:disabled .vgui-select__value {
+  color: var(--vgui-clay-glyph-dim);
+  text-shadow: none;
+}

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

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