@dalcvil/steam-green-react 0.2.0 → 1.0.0

package/dist/components/ScrollArea/ScrollArea.css

@@ -0,0 +1,236 @@
+.vgui-scroll-area {
+  position: relative;
+  display: grid;
+  grid-template:
+    minmax(0, 1fr)
+    / minmax(0, 1fr);
+  grid-template-areas: 'viewport';
+  min-height: 0;
+  min-width: 0;
+  /* Fills a sized flex/grid parent; falls back to auto height otherwise. */
+  height: 100%;
+}
+
+.vgui-scroll-area__viewport {
+  grid-area: viewport;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: 100%;
+  min-height: 0;
+  min-width: 0;
+}
+
+.vgui-scroll-area__viewport:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-scroll-area--horizontal .vgui-scroll-area__viewport {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.vgui-scroll-area--both .vgui-scroll-area__viewport {
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+.vgui-scroll-area--inset .vgui-scroll-area__viewport {
+  background-color: var(--vgui-surface-dark);
+  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);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .vgui-scroll-area__viewport {
+    scroll-behavior: smooth;
+  }
+}
+
+/* Shadows sit on the leading and trailing edge of the scrollable axis. A
+   vertical area is the default, so its placement lives in the base rule. */
+.vgui-scroll-area__shadow {
+  position: absolute;
+  left: 0;
+  right: var(--vgui-scrollbar-size);
+  height: var(--vgui-bevel-width);
+  background-color: var(--vgui-bevel-dark);
+  pointer-events: none;
+  opacity: 0;
+}
+
+.vgui-scroll-area__shadow--top {
+  top: 0;
+  bottom: auto;
+}
+
+.vgui-scroll-area__shadow--bottom {
+  bottom: 0;
+  top: auto;
+}
+
+.vgui-scroll-area__shadow[data-visible='true'] {
+  opacity: 1;
+}
+
+/* The scroll affordances are decorative, so they never announce themselves. */
+.vgui-scroll-area--no-shadows .vgui-scroll-area__shadow {
+  display: none;
+}
+
+/* Leading and trailing edge of the scrollable axis. */
+.vgui-scroll-area--both .vgui-scroll-area__shadow {
+  right: var(--vgui-scrollbar-size);
+  bottom: var(--vgui-scrollbar-size);
+}
+
+.vgui-scroll-area--both .vgui-scroll-area__shadow--top {
+  bottom: auto;
+}
+
+.vgui-scroll-area--horizontal .vgui-scroll-area__shadow {
+  left: auto;
+  right: auto;
+  bottom: var(--vgui-scrollbar-size);
+  height: auto;
+  width: var(--vgui-bevel-width);
+}
+
+.vgui-scroll-area--horizontal .vgui-scroll-area__shadow--top {
+  left: 0;
+}
+
+.vgui-scroll-area--horizontal .vgui-scroll-area__shadow--bottom {
+  right: 0;
+}
+
+/* --- Drawn scrollbar (the themed stand-in for the Scrollbar component) ---
+   The drawn bar is the default. The platform bar is hidden outright so that a
+   `--drawn` region measures and scrolls exactly the same everywhere, and the
+   bar itself is painted by the markup in `ScrollArea.tsx`. `--native` instead
+   hides nothing and puts `.vgui-scroll-surface` on the viewport, which is what
+   `styles/scrollbars.css` skips the markup for; that is the only difference
+   between the two, so neither path pays for the other's selectors. */
+.vgui-scroll-area--drawn .vgui-scroll-area__viewport {
+  scrollbar-width: none;
+}
+
+.vgui-scroll-area--drawn .vgui-scroll-area__viewport::-webkit-scrollbar {
+  display: none;
+}
+
+.vgui-scroll-area--drawn {
+  grid-template:
+    minmax(0, 1fr)
+    / minmax(0, 1fr) auto;
+  grid-template-areas: 'viewport scrollbar-y';
+}
+
+.vgui-scroll-area--drawn.vgui-scroll-area--horizontal {
+  grid-template:
+    minmax(0, 1fr) auto
+    / minmax(0, 1fr);
+  grid-template-areas:
+    'viewport'
+    'scrollbar-x';
+}
+
+.vgui-scroll-area--drawn.vgui-scroll-area--both {
+  grid-template:
+    minmax(0, 1fr) auto
+    / minmax(0, 1fr) auto;
+  grid-template-areas:
+    'viewport scrollbar-y'
+    'scrollbar-x corner';
+}
+
+.vgui-scroll-area--drawn.vgui-scroll-area--both::after {
+  content: '';
+  grid-area: corner;
+  background-color: var(--vgui-scrollbar-gutter, var(--vgui-surface-light));
+}
+
+/* Every box below is sized by its own width/border rather than by `content-box`,
+   so the composited bar measures the full 18px `--vgui-scrollbar-size`. */
+.vgui-scroll-area__scrollbar,
+.vgui-scroll-area__button,
+.vgui-scroll-area__thumb {
+  box-sizing: border-box;
+}
+
+.vgui-scroll-area__scrollbar {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--vgui-scrollbar-gutter, var(--vgui-surface-light));
+}
+
+.vgui-scroll-area__scrollbar--vertical {
+  grid-area: scrollbar-y;
+  width: var(--vgui-scrollbar-size);
+}
+
+.vgui-scroll-area__scrollbar--horizontal {
+  grid-area: scrollbar-x;
+  flex-direction: row;
+  height: var(--vgui-scrollbar-size);
+}
+
+.vgui-scroll-area__button {
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: var(--vgui-scrollbar-button-size, var(--vgui-scrollbar-size));
+  height: var(--vgui-scrollbar-button-size, var(--vgui-scrollbar-size));
+  background-color: var(--vgui-scrollbar-thumb, 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);
+}
+
+.vgui-scroll-area__button::before {
+  content: '';
+  width: var(--vgui-scrollbar-glyph-width, 7px);
+  height: var(--vgui-scrollbar-glyph-height, 4px);
+  background-color: var(--vgui-scrollbar-glyph-color, #a0aa95);
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+.vgui-scroll-area__button--increment::before {
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+
+.vgui-scroll-area__scrollbar--horizontal .vgui-scroll-area__button::before {
+  width: var(--vgui-scrollbar-glyph-height, 4px);
+  height: var(--vgui-scrollbar-glyph-width, 7px);
+  clip-path: polygon(100% 0, 0 50%, 100% 100%);
+}
+
+.vgui-scroll-area__scrollbar--horizontal .vgui-scroll-area__button--increment::before {
+  clip-path: polygon(0 0, 100% 50%, 0 100%);
+}
+
+.vgui-scroll-area__track {
+  position: relative;
+  flex: 1 1 auto;
+  background-color: var(--vgui-scrollbar-gutter, var(--vgui-surface-light));
+}
+
+.vgui-scroll-area__thumb {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--vgui-scrollbar-thumb, 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);
+}
+
+.vgui-scroll-area__scrollbar--horizontal .vgui-scroll-area__thumb {
+  bottom: 0;
+  right: auto;
+}

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

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

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,25 @@
+import { type HTMLAttributes } from 'react';
+import './ScrollArea.css';
+import '../../styles/scrollbars.css';
+export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
+    /** Recess the viewport to the VGUI list-interior look. */
+    inset?: boolean;
+    /** Which axes may scroll. */
+    axis?: 'vertical' | 'horizontal' | 'both';
+    /**
+     * Which scrollbar to paint. `"drawn"` renders the 18px Green Steam bar, which
+     * looks the same in every browser; `"native"` drops the extra markup and skins
+     * the platform's own bar instead. Defaults to `"drawn"`.
+     */
+    variant?: 'drawn' | 'native';
+    /** Maximum height of the viewport; omit to fill the parent. */
+    maxHeight?: number | string;
+    /** Show the fade affordances at the scrollable edges. */
+    shadows?: boolean;
+    /** Make the viewport focusable so keyboard users can scroll it. */
+    focusable?: boolean;
+    /** Called with the scroll offset; throttle at the call site if needed. */
+    onScrollPositionChange?: (top: number, left: number) => void;
+}
+export declare const ScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ScrollArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAA;AACd,OAAO,kBAAkB,CAAA;AACzB,OAAO,6BAA6B,CAAA;AAEpC,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,6BAA6B;IAC7B,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IACzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC5B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0EAA0E;IAC1E,sBAAsB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAC7D;AAgDD,eAAO,MAAM,UAAU,4GAyIrB,CAAA"}

package/dist/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,124 @@
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "../../styles/scrollbars.css";
+import "./ScrollArea.css";
+//#region src/components/ScrollArea/ScrollArea.tsx
+var EMPTY = {
+	scrollable: false,
+	atStart: true,
+	atEnd: true,
+	thumbY: 100,
+	thumbX: 100
+};
+/** Anything that can hold focus without a programmatic `tabIndex`. */
+var FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
+var toPercent = (value) => `${Math.round(value * 100) / 100}%`;
+var readMetrics = (node, horizontal) => {
+	return {
+		scrollable: horizontal ? node.scrollWidth > node.clientWidth : node.scrollHeight > node.clientHeight,
+		atStart: horizontal ? node.scrollLeft <= 0 : node.scrollTop <= 0,
+		atEnd: horizontal ? node.scrollLeft + node.clientWidth >= node.scrollWidth : node.scrollTop + node.clientHeight >= node.scrollHeight,
+		thumbY: node.scrollHeight > 0 ? node.clientHeight / node.scrollHeight * 100 : 100,
+		thumbX: node.scrollWidth > 0 ? node.clientWidth / node.scrollWidth * 100 : 100
+	};
+};
+var toLength = (value) => {
+	if (value === void 0) return void 0;
+	return typeof value === "number" ? `${value}px` : value;
+};
+var ScrollArea = forwardRef(function ScrollArea({ axis = "vertical", children, className, focusable, inset = false, maxHeight, onScrollPositionChange, shadows = true, variant = "drawn", ...rest }, ref) {
+	const viewportRef = useRef(null);
+	const [metrics, setMetrics] = useState(EMPTY);
+	const [autoFocusable, setAutoFocusable] = useState(false);
+	const setRoot = useCallback((node) => {
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const isFocusable = focusable ?? autoFocusable;
+	const horizontal = axis === "horizontal";
+	const drawn = variant === "drawn";
+	const measure = useCallback(() => {
+		const node = viewportRef.current;
+		if (!node) return;
+		setMetrics(readMetrics(node, horizontal));
+	}, [horizontal]);
+	useLayoutEffect(() => {
+		if (focusable !== void 0) return;
+		const node = viewportRef.current;
+		if (!node) return;
+		setAutoFocusable(node.querySelector(FOCUSABLE_SELECTOR) === null);
+	}, [children, focusable]);
+	useLayoutEffect(() => {
+		measure();
+	}, [children, measure]);
+	useEffect(() => {
+		const onResize = () => measure();
+		window.addEventListener("resize", onResize);
+		return () => window.removeEventListener("resize", onResize);
+	}, [measure]);
+	const handleScroll = (event) => {
+		const node = event.currentTarget;
+		setMetrics(readMetrics(node, horizontal));
+		onScrollPositionChange?.(node.scrollTop, node.scrollLeft);
+	};
+	const scrollbar = (scrollAxis, thumb) => /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": "true",
+		className: ["vgui-scroll-area__scrollbar", `vgui-scroll-area__scrollbar--${scrollAxis}`].join(" "),
+		children: [
+			/* @__PURE__ */ jsx("span", { className: "vgui-scroll-area__button vgui-scroll-area__button--decrement" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "vgui-scroll-area__track",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "vgui-scroll-area__thumb",
+					style: scrollAxis === "vertical" ? { height: toPercent(thumb) } : { width: toPercent(thumb) }
+				})
+			}),
+			/* @__PURE__ */ jsx("span", { className: "vgui-scroll-area__button vgui-scroll-area__button--increment" })
+		]
+	});
+	const viewportStyle = {};
+	const maxHeightValue = toLength(maxHeight);
+	if (maxHeightValue !== void 0) viewportStyle.maxHeight = maxHeightValue;
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		ref: setRoot,
+		className: [
+			"vgui-scroll-area",
+			axis === "vertical" ? null : `vgui-scroll-area--${axis}`,
+			inset ? "vgui-scroll-area--inset" : null,
+			drawn ? "vgui-scroll-area--drawn" : "vgui-scroll-area--native",
+			shadows ? null : "vgui-scroll-area--no-shadows",
+			className
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: viewportRef,
+				className: drawn ? "vgui-scroll-area__viewport" : "vgui-scroll-area__viewport vgui-scroll-surface",
+				style: viewportStyle,
+				tabIndex: isFocusable ? 0 : void 0,
+				role: isFocusable ? "region" : void 0,
+				"aria-label": isFocusable ? rest["aria-label"] : void 0,
+				"aria-labelledby": isFocusable ? rest["aria-labelledby"] : void 0,
+				onScroll: handleScroll,
+				children
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "vgui-scroll-area__shadow vgui-scroll-area__shadow--top",
+				"data-visible": metrics.scrollable && !metrics.atStart ? "true" : void 0
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "vgui-scroll-area__shadow vgui-scroll-area__shadow--bottom",
+				"data-visible": metrics.scrollable && !metrics.atEnd ? "true" : void 0
+			}),
+			drawn && axis !== "horizontal" ? scrollbar("vertical", metrics.thumbY) : null,
+			drawn && axis !== "vertical" ? scrollbar("horizontal", metrics.thumbX) : null
+		]
+	});
+});
+ScrollArea.displayName = "ScrollArea";
+//#endregion
+export { ScrollArea };
+
+//# sourceMappingURL=ScrollArea.js.map

package/dist/components/ScrollArea/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","names":[],"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type UIEvent,\n} from 'react'\nimport './ScrollArea.css'\nimport '../../styles/scrollbars.css'\n\nexport interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {\n  /** Recess the viewport to the VGUI list-interior look. */\n  inset?: boolean\n  /** Which axes may scroll. */\n  axis?: 'vertical' | 'horizontal' | 'both'\n  /**\n   * Which scrollbar to paint. `\"drawn\"` renders the 18px Green Steam bar, which\n   * looks the same in every browser; `\"native\"` drops the extra markup and skins\n   * the platform's own bar instead. Defaults to `\"drawn\"`.\n   */\n  variant?: 'drawn' | 'native'\n  /** Maximum height of the viewport; omit to fill the parent. */\n  maxHeight?: number | string\n  /** Show the fade affordances at the scrollable edges. */\n  shadows?: boolean\n  /** Make the viewport focusable so keyboard users can scroll it. */\n  focusable?: boolean\n  /** Called with the scroll offset; throttle at the call site if needed. */\n  onScrollPositionChange?: (top: number, left: number) => void\n}\n\ninterface Metrics {\n  /** Whether the scrollable axis actually overflows, so its bars are present. */\n  scrollable: boolean\n  /** Whether each end of the scrollable axis is reached, so its shadow hides. */\n  atStart: boolean\n  atEnd: boolean\n  /** Visible proportion of each axis, as a percentage for the thumb. */\n  thumbY: number\n  thumbX: number\n}\n\nconst EMPTY: Metrics = {\n  scrollable: false,\n  atStart: true,\n  atEnd: true,\n  thumbY: 100,\n  thumbX: 100,\n}\n\n/** Anything that can hold focus without a programmatic `tabIndex`. */\nconst FOCUSABLE_SELECTOR =\n  'a[href], button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n\nconst toPercent = (value: number) => `${Math.round(value * 100) / 100}%`\n\nconst readMetrics = (node: HTMLElement, horizontal: boolean): Metrics => {\n  const scrollable = horizontal\n    ? node.scrollWidth > node.clientWidth\n    : node.scrollHeight > node.clientHeight\n\n  return {\n    scrollable,\n    atStart: horizontal ? node.scrollLeft <= 0 : node.scrollTop <= 0,\n    atEnd: horizontal\n      ? node.scrollLeft + node.clientWidth >= node.scrollWidth\n      : node.scrollTop + node.clientHeight >= node.scrollHeight,\n    thumbY: node.scrollHeight > 0 ? (node.clientHeight / node.scrollHeight) * 100 : 100,\n    thumbX: node.scrollWidth > 0 ? (node.clientWidth / node.scrollWidth) * 100 : 100,\n  }\n}\n\nconst toLength = (value: number | string | undefined) => {\n  if (value === undefined) return undefined\n  return typeof value === 'number' ? `${value}px` : value\n}\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(function ScrollArea(\n  {\n    axis = 'vertical',\n    children,\n    className,\n    focusable,\n    inset = false,\n    maxHeight,\n    onScrollPositionChange,\n    shadows = true,\n    variant = 'drawn',\n    ...rest\n  },\n  ref,\n) {\n  const viewportRef = useRef<HTMLDivElement | null>(null)\n  const [metrics, setMetrics] = useState<Metrics>(EMPTY)\n  const [autoFocusable, setAutoFocusable] = useState(false)\n\n  const setRoot = useCallback(\n    (node: HTMLDivElement | null) => {\n      if (typeof ref === 'function') ref(node)\n      else if (ref) ref.current = node\n    },\n    [ref],\n  )\n\n  const isFocusable = focusable ?? autoFocusable\n  const horizontal = axis === 'horizontal'\n  const drawn = variant === 'drawn'\n\n  const measure = useCallback(() => {\n    const node = viewportRef.current\n    if (!node) return\n    setMetrics(readMetrics(node, horizontal))\n  }, [horizontal])\n\n  // A viewport with no focusable descendants has to become one itself: a\n  // `overflow: auto` box is otherwise unscrollable without a pointer (WCAG 2.1.1).\n  useLayoutEffect(() => {\n    if (focusable !== undefined) return\n    const node = viewportRef.current\n    if (!node) return\n    setAutoFocusable(node.querySelector(FOCUSABLE_SELECTOR) === null)\n  }, [children, focusable])\n\n  useLayoutEffect(() => {\n    measure()\n  }, [children, measure])\n\n  useEffect(() => {\n    const onResize = () => measure()\n    window.addEventListener('resize', onResize)\n    return () => window.removeEventListener('resize', onResize)\n  }, [measure])\n\n  const handleScroll = (event: UIEvent<HTMLDivElement>) => {\n    const node = event.currentTarget\n    setMetrics(readMetrics(node, horizontal))\n    onScrollPositionChange?.(node.scrollTop, node.scrollLeft)\n  }\n\n  const scrollbar = (\n    scrollAxis: 'vertical' | 'horizontal',\n    thumb: number,\n  ) => (\n    <div\n      aria-hidden=\"true\"\n      className={[\n        'vgui-scroll-area__scrollbar',\n        `vgui-scroll-area__scrollbar--${scrollAxis}`,\n      ].join(' ')}\n    >\n      <span className=\"vgui-scroll-area__button vgui-scroll-area__button--decrement\" />\n      <span className=\"vgui-scroll-area__track\">\n        <span\n          className=\"vgui-scroll-area__thumb\"\n          style={\n            scrollAxis === 'vertical'\n              ? { height: toPercent(thumb) }\n              : { width: toPercent(thumb) }\n          }\n        />\n      </span>\n      <span className=\"vgui-scroll-area__button vgui-scroll-area__button--increment\" />\n    </div>\n  )\n\n  const viewportStyle: CSSProperties = {}\n  const maxHeightValue = toLength(maxHeight)\n  if (maxHeightValue !== undefined) viewportStyle.maxHeight = maxHeightValue\n\n  return (\n    <div\n      {...rest}\n      ref={setRoot}\n      className={[\n        'vgui-scroll-area',\n        axis === 'vertical' ? null : `vgui-scroll-area--${axis}`,\n        inset ? 'vgui-scroll-area--inset' : null,\n        drawn ? 'vgui-scroll-area--drawn' : 'vgui-scroll-area--native',\n        shadows ? null : 'vgui-scroll-area--no-shadows',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div\n        ref={viewportRef}\n        className={\n          drawn\n            ? 'vgui-scroll-area__viewport'\n            : 'vgui-scroll-area__viewport vgui-scroll-surface'\n        }\n        style={viewportStyle}\n        tabIndex={isFocusable ? 0 : undefined}\n        role={isFocusable ? 'region' : undefined}\n        aria-label={isFocusable ? rest['aria-label'] : undefined}\n        aria-labelledby={isFocusable ? rest['aria-labelledby'] : undefined}\n        onScroll={handleScroll}\n      >\n        {children}\n      </div>\n      <div\n        aria-hidden=\"true\"\n        className=\"vgui-scroll-area__shadow vgui-scroll-area__shadow--top\"\n        data-visible={metrics.scrollable && !metrics.atStart ? 'true' : undefined}\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"vgui-scroll-area__shadow vgui-scroll-area__shadow--bottom\"\n        data-visible={metrics.scrollable && !metrics.atEnd ? 'true' : undefined}\n      />\n      {drawn && axis !== 'horizontal' ? scrollbar('vertical', metrics.thumbY) : null}\n      {drawn && axis !== 'vertical' ? scrollbar('horizontal', metrics.thumbX) : null}\n    </div>\n  )\n})\n\nScrollArea.displayName = 'ScrollArea'\n"],"mappings":"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"}

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

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

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

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

package/dist/components/Scrollbar/Scrollbar.css

@@ -0,0 +1,260 @@
+/*
+ * Green Steam scrollbar.
+ *
+ * VGUI draws this control entirely by hand — four arrow buttons, a gutter and a
+ * thumb, every pixel of them a stack of half-open `fill()` rectangles
+ * (docs/components/Scrollbar.md). Almost none of that is reachable from CSS, so
+ * the component splits in two:
+ *
+ *   1. The drawn path (the default) is the button/gutter/thumb tree below. It
+ *      reproduces the pressed bevel, the arrow glyph and the stable gutter, and
+ *      it looks the same in every engine.
+ *   2. The native path skips the markup and skins the user agent's own bar with
+ *      `styles/scrollbars.css`. It costs nothing and keeps wheel, trackpad,
+ *      PageUp/PageDown, Home/End, autoscroll, rubber-banding and the OS's own
+ *      size preference as the platform's job — at the price of a bar that only
+ *      WebKit and Blink paint in full, since `::-webkit-scrollbar-button` is in
+ *      no specification.
+ *
+ * Both paths paint the same 18px bar with the same tokens, which is what makes
+ * `Scrollbar`, `ScrollArea`, the native skin and the rest of the library read as
+ * one control. The drawn bar is flush inside its 18px slot; VGUI's own
+ * `inset = "0 0 3 1"` only shrank the paint area within a wider slot, and
+ * reproducing that gap would misalign this bar against the other two paths.
+ *
+ * Press is nothing but the bevel: the arrow is `White` in both hover and active,
+ * and the two bevel colours are 2.33:1 and 1.87:1 against the face
+ * (foundations.md:444, :445). Valve's inversion is kept because it is the house
+ * style, and the one perceivable difference press gains — the glyph dropping by
+ * a pixel — is added here, exactly as docs/components/Scrollbar.md prescribes.
+ *
+ * The four `--vgui-scrollbar-*` metrics this file used to fall back on are
+ * declared in src/styles/tokens.css, so no `var()` here needs a literal.
+ */
+
+/* --- Native path: no markup, no JS, no lost platform behaviour. --------- */
+
+.vgui-scroll-region {
+  box-sizing: border-box;
+  position: relative;
+  overflow: auto;
+  overscroll-behavior: contain;
+  /* The bar's own colours are not set here: on the native path the region also
+   * carries `.vgui-scroll-surface`, and `styles/scrollbars.css` is the single
+   * place that skin is written down. */
+  scroll-padding-block-end: var(--vgui-scrollbar-scroll-padding, 0);
+  scroll-padding-inline-end: var(--vgui-scrollbar-scroll-padding, 0);
+}
+
+.vgui-scroll-region--vertical {
+  overflow-x: hidden;
+}
+
+.vgui-scroll-region--horizontal {
+  overflow-y: hidden;
+  scroll-padding-block-end: 0;
+  scroll-padding-inline-end: var(--vgui-scrollbar-scroll-padding, 0);
+}
+
+/* The bar's own box is reserved even with nothing to scroll. */
+.vgui-scroll-region--always-visible {
+  scrollbar-gutter: stable;
+}
+
+/*
+ * No scrollbar block in the corpus has a `:focus` style, and the one focus
+ * colour the file declares (`ScrollGlyphFocus`, steam.styles:74) is referenced by
+ * nothing. The region therefore shows focus itself; the active bevel is never
+ * reused as a focus indicator, because a keyboard user never sees it.
+ */
+.vgui-scroll-region:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-crisp .vgui-scroll-region:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+/* --- WebKit-only extras: the pressed bevel of a disabled region. -------- */
+
+/* The rest of the platform arrow painting lives in `styles/scrollbars.css` and
+ * reaches this element through `.vgui-scroll-surface`, which the region carries
+ * on the native path only — the drawn path hides the platform bar outright. */
+
+/* steam.styles:2315-2319 — the disabled gutter paints nothing. Translucent
+ * rather than a new colour, so it works over any parent surface. */
+.vgui-scroll-surface[data-disabled]::-webkit-scrollbar {
+  background-color: transparent;
+}
+
+/* --- Drawn path: the bar is a flex sibling, so it never scrolls away. --- */
+
+.vgui-scroll-region--drawn {
+  display: flex;
+  overflow: hidden;
+}
+
+.vgui-scroll-region--drawn.vgui-scroll-region--vertical {
+  flex-direction: row;
+}
+
+.vgui-scroll-region--drawn.vgui-scroll-region--horizontal {
+  flex-direction: column;
+}
+
+/*
+ * The drawn tree duplicates a native affordance, which is the only reason
+ * `aria-hidden="true"` is honest on it; that in turn means the native bar it
+ * duplicates must go, and the region must stay reachable by keyboard. The outer
+ * region keeps a tabindex and the browser scrolls the focused box on arrow keys,
+ * PageUp/PageDown, Home/End and Space, which is what docs/components/Scrollbar.md
+ * requires of the drawn path.
+ */
+.vgui-scroll-region--drawn .vgui-scroll-region__content {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+}
+
+.vgui-scroll-region--drawn .vgui-scroll-region__content::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+/* scrollbar-color = none, inset = "0 0 3 1" (steam.styles:1999-2003). */
+.vgui-scrollbar {
+  box-sizing: content-box;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  inline-size: var(--vgui-scrollbar-size, 18px);
+  padding: 0 3px 1px 0;
+  cursor: default;
+}
+
+/* Scrollbar.Horizontal, inset = "0 1 1 3" (steam.styles:2005-2009). */
+.vgui-scrollbar[data-orientation='horizontal'] {
+  flex-direction: row;
+  inline-size: auto;
+  block-size: var(--vgui-scrollbar-size, 18px);
+  padding: 1px 1px 3px 0;
+}
+
+.vgui-scrollbar__button {
+  position: relative;
+  flex: 0 0 auto;
+  inline-size: 100%;
+  block-size: var(--vgui-scrollbar-button-size, 18px);
+  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);
+  cursor: pointer;
+}
+
+.vgui-scrollbar[data-orientation='horizontal'] .vgui-scrollbar__button {
+  inline-size: var(--vgui-scrollbar-button-size, 18px);
+  block-size: 100%;
+}
+
+/* 18px is below the 24px minimum target, so the arrows grow their hit area
+ * without changing their painted size (WCAG 2.5.8). */
+.vgui-scrollbar__button::after {
+  content: '';
+  position: absolute;
+  inset: calc((var(--vgui-scrollbar-button-size, 18px) - var(--vgui-min-target-size)) / 2) 0;
+}
+
+.vgui-crisp .vgui-scrollbar__button:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+/* Hover recolours the glyph only (steam.styles:2042-2046). */
+.vgui-scrollbar__button:hover .vgui-scrollbar__glyph {
+  background-color: var(--vgui-text-strong);
+}
+
+/* Press inverts the box (steam.styles:2056-2059) and drops the glyph by 1px —
+ * the only perceivable difference available, since the bevel is below 3:1. */
+.vgui-scrollbar__button:active {
+  border-top-color: var(--vgui-bevel-dark);
+  border-left-color: var(--vgui-bevel-dark);
+  border-bottom-color: var(--vgui-bevel-light);
+  border-right-color: var(--vgui-bevel-light);
+}
+
+.vgui-scrollbar__button:active .vgui-scrollbar__glyph {
+  translate: 0 1px;
+}
+
+.vgui-scrollbar[data-orientation='horizontal'] .vgui-scrollbar__button:active .vgui-scrollbar__glyph {
+  translate: 1px 0;
+}
+
+/* The glyph takes no clicks: they belong to the button underneath it. */
+.vgui-scrollbar__glyph {
+  display: block;
+  pointer-events: none;
+  inline-size: var(--vgui-scrollbar-glyph-width, 7px);
+  block-size: var(--vgui-scrollbar-glyph-height, 4px);
+  margin-inline: auto;
+  background-color: var(--vgui-text-muted);
+  /* The corpus draws four stacked rectangles, which is what this staircase
+   * clips a triangle down to — Valve's glyph is not an isoceles triangle. */
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+.vgui-scrollbar__glyph--down {
+  rotate: 180deg;
+}
+
+.vgui-scrollbar__glyph--left {
+  rotate: -90deg;
+}
+
+.vgui-scrollbar__glyph--right {
+  rotate: 90deg;
+}
+
+.vgui-scrollbar__gutter {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  min-inline-size: 0;
+  background-color: var(--vgui-surface-light);
+}
+
+/* The vertical thumb has no hover or drag style anywhere in the corpus, and the
+ * horizontal thumb's are a no-op (steam.styles:2263-2286), so only the cursor
+ * says "draggable" — reproduced here rather than invented. */
+.vgui-scrollbar__thumb {
+  box-sizing: border-box;
+  block-size: var(--vgui-scrollbar-thumb-length, 100%);
+  margin-block-start: calc((100% - var(--vgui-scrollbar-thumb-length, 100%)) * var(--vgui-scrollbar-thumb-offset, 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);
+  cursor: pointer;
+}
+
+.vgui-scrollbar[data-orientation='horizontal'] .vgui-scrollbar__thumb {
+  block-size: 100%;
+  margin-block-start: 0;
+  inline-size: var(--vgui-scrollbar-thumb-length, 100%);
+  margin-inline-start: calc((100% - var(--vgui-scrollbar-thumb-length, 100%)) * var(--vgui-scrollbar-thumb-offset, 0));
+}
+
+/* A disabled region loses the gutter fill and nothing replaces it
+ * (steam.styles:2315-2319). The content stays scrollable. */
+.vgui-scroll-region[data-disabled] .vgui-scrollbar__gutter {
+  background-color: transparent;
+}

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

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