@dalcvil/steam-green-react 0.2.0 → 1.0.0

package/dist/components/Window/Window.js

@@ -0,0 +1,156 @@
+import { forwardRef, useId, useRef, useState } from "react";
+import "./Window.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Window/Window.tsx
+/** Arrow-key nudge, in pixels. `Shift` drops to a single pixel. */
+var NUDGE = 8;
+var FINE_NUDGE = 1;
+var Window = forwardRef(function Window({ title, icon, minimizable = true, maximizable = true, closable = true, resizable = true, focused = false, maximized = false, onAction, onDrag, controlsLabel, tooltip, className, children, onKeyDown, ...rest }, ref) {
+	const titleId = useId();
+	const dragOrigin = useRef({
+		x: 0,
+		y: 0
+	});
+	const activeZone = useRef(null);
+	const [dragging, setDragging] = useState(null);
+	const isModal = rest.role === "dialog" || rest.role === "alertdialog";
+	const handleKeyDown = (event) => {
+		if (event.key === "Escape" && closable && isModal) onAction?.("close");
+		onKeyDown?.(event);
+	};
+	const startDrag = (zone) => (event) => {
+		if (!onDrag || event.button !== 0) return;
+		activeZone.current = zone;
+		dragOrigin.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		setDragging(zone);
+		if (typeof event.currentTarget.setPointerCapture === "function") event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const handlePointerMove = (event) => {
+		if (!activeZone.current || !onDrag) return;
+		onDrag(event.clientX - dragOrigin.current.x, event.clientY - dragOrigin.current.y);
+	};
+	const endDrag = (event) => {
+		if (!activeZone.current) return;
+		activeZone.current = null;
+		setDragging(null);
+		const target = event.currentTarget;
+		if (typeof target.hasPointerCapture === "function" && target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
+	};
+	const handleNudge = (event) => {
+		if (!onDrag) return;
+		const step = event.shiftKey ? FINE_NUDGE : NUDGE;
+		let deltaX = 0;
+		let deltaY = 0;
+		switch (event.key) {
+			case "ArrowLeft":
+				deltaX = -step;
+				break;
+			case "ArrowRight":
+				deltaX = step;
+				break;
+			case "ArrowUp":
+				deltaY = -step;
+				break;
+			case "ArrowDown":
+				deltaY = step;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		onDrag(deltaX, deltaY);
+	};
+	const controls = [];
+	if (minimizable) controls.push({
+		action: "minimize",
+		label: "Minimize"
+	});
+	if (maximizable) controls.push(maximized ? {
+		action: "restore",
+		label: "Restore"
+	} : {
+		action: "maximize",
+		label: "Maximize"
+	});
+	if (closable) controls.push({
+		action: "close",
+		label: "Close"
+	});
+	const gripIsControl = resizable && !maximized && Boolean(onDrag);
+	const classes = ["vgui-window"];
+	if (focused) classes.push("vgui-window--focused");
+	if (maximized) classes.push("vgui-window--maximized");
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsxs("section", {
+		ref,
+		"aria-labelledby": titleId,
+		title: tooltip,
+		className: classes.join(" "),
+		onKeyDown: handleKeyDown,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "vgui-window__titlebar",
+				tabIndex: 0,
+				"data-dragging": dragging === "titlebar" ? "true" : void 0,
+				onPointerDown: startDrag("titlebar"),
+				onPointerMove: handlePointerMove,
+				onPointerUp: endDrag,
+				onPointerCancel: endDrag,
+				onKeyDown: handleNudge,
+				children: [
+					icon ? /* @__PURE__ */ jsx("span", {
+						className: "vgui-window__icon",
+						children: icon
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: "vgui-window__title",
+						id: titleId,
+						children: title
+					}),
+					controls.length > 0 ? /* @__PURE__ */ jsx("div", {
+						className: "vgui-window__controls",
+						role: "group",
+						"aria-label": controlsLabel ?? "Window controls",
+						children: controls.map((control) => /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: `vgui-window__control vgui-window__control--${control.action === "restore" ? "maximize" : control.action}`,
+							onClick: () => onAction?.(control.action),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "vgui-window__glyph",
+								"aria-hidden": "true",
+								"data-glyph": control.action
+							}), /* @__PURE__ */ jsx("span", {
+								className: "vgui-visually-hidden",
+								children: control.label
+							})]
+						}, control.action))
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "vgui-window__body",
+				children
+			}),
+			resizable && !maximized ? /* @__PURE__ */ jsx("div", {
+				className: "vgui-window__grip",
+				"data-dragging": dragging === "grip" ? "true" : void 0,
+				tabIndex: gripIsControl ? 0 : void 0,
+				"aria-label": gripIsControl ? "Resize window" : void 0,
+				"aria-hidden": gripIsControl ? void 0 : true,
+				onPointerDown: gripIsControl ? startDrag("grip") : void 0,
+				onPointerMove: gripIsControl ? handlePointerMove : void 0,
+				onPointerUp: gripIsControl ? endDrag : void 0,
+				onPointerCancel: gripIsControl ? endDrag : void 0,
+				onKeyDown: gripIsControl ? handleNudge : void 0
+			}) : null
+		]
+	});
+});
+Window.displayName = "Window";
+//#endregion
+export { Window };
+
+//# sourceMappingURL=Window.js.map

package/dist/components/Window/Window.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Window.js","names":[],"sources":["../../../src/components/Window/Window.tsx"],"sourcesContent":["import { forwardRef, useId, useRef, useState } from 'react'\nimport type {\n  HTMLAttributes,\n  KeyboardEvent as ReactKeyboardEvent,\n  PointerEvent as ReactPointerEvent,\n  ReactNode,\n} from 'react'\n\nimport './Window.css'\n\ntype WindowAction = 'minimize' | 'maximize' | 'restore' | 'close'\n\ntype DragZone = 'titlebar' | 'grip'\n\n/** Arrow-key nudge, in pixels. `Shift` drops to a single pixel. */\nconst NUDGE = 8\nconst FINE_NUDGE = 1\n\n// `title` is the caption, not the tooltip, and `onDrag` reports a pointer delta\n// rather than the DOM drag event, so both DOM props are replaced rather than\n// extended.\nexport interface WindowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onDrag'> {\n  /** Uppercase text in the title bar. */\n  title: ReactNode\n  /** Optional 16px application glyph shown before the title. */\n  icon?: ReactNode\n  /** Show the minimize control. */\n  minimizable?: boolean\n  /** Show the maximize control. */\n  maximizable?: boolean\n  /** Show the close control. */\n  closable?: boolean\n  /** Show the bottom-right resize grip. */\n  resizable?: boolean\n  /** Render the focused border and glyph colours. */\n  focused?: boolean\n  /** Show the maximize glyph in its toggled state. */\n  maximized?: boolean\n  /** Fires when a control is activated; `close` also fires on Escape. */\n  onAction?: (action: 'minimize' | 'maximize' | 'restore' | 'close') => void\n  /** Called continuously while dragging the title bar, with the pointer delta. */\n  onDrag?: (deltaX: number, deltaY: number) => void\n  /** Accessible label for the control group. */\n  controlsLabel?: string\n  /** Native tooltip attribute — `title` is taken by the caption. */\n  tooltip?: string\n}\n\nexport const Window = forwardRef<HTMLDivElement, WindowProps>(function Window(\n  {\n    title,\n    icon,\n    minimizable = true,\n    maximizable = true,\n    closable = true,\n    resizable = true,\n    focused = false,\n    maximized = false,\n    onAction,\n    onDrag,\n    controlsLabel,\n    tooltip,\n    className,\n    children,\n    onKeyDown,\n    ...rest\n  },\n  ref,\n) {\n  const titleId = useId()\n  const dragOrigin = useRef({ x: 0, y: 0 })\n  const activeZone = useRef<DragZone | null>(null)\n  const [dragging, setDragging] = useState<DragZone | null>(null)\n\n  /*\n   * A floating window is a plain named `section`; only a modal one — the dialog\n   * the consumer opts into by passing `role` — may claim the dialog role, and\n   * only a modal one may swallow Escape.\n   */\n  const isModal = rest.role === 'dialog' || rest.role === 'alertdialog'\n\n  const handleKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Escape' && closable && isModal) onAction?.('close')\n    onKeyDown?.(event)\n  }\n\n  const startDrag = (zone: DragZone) => (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (!onDrag || event.button !== 0) return\n\n    activeZone.current = zone\n    dragOrigin.current = { x: event.clientX, y: event.clientY }\n    setDragging(zone)\n\n    // jsdom has no pointer capture at all, so it is feature-detected rather\n    // than assumed.\n    if (typeof event.currentTarget.setPointerCapture === 'function') {\n      event.currentTarget.setPointerCapture(event.pointerId)\n    }\n  }\n\n  const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (!activeZone.current || !onDrag) return\n    onDrag(event.clientX - dragOrigin.current.x, event.clientY - dragOrigin.current.y)\n  }\n\n  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (!activeZone.current) return\n\n    activeZone.current = null\n    setDragging(null)\n\n    const target = event.currentTarget\n    if (typeof target.hasPointerCapture === 'function' && target.hasPointerCapture(event.pointerId)) {\n      target.releasePointerCapture(event.pointerId)\n    }\n  }\n\n  /* Pointer-only dragging fails WCAG 2.1.1, so both zones nudge from the keyboard. */\n  const handleNudge = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    if (!onDrag) return\n\n    const step = event.shiftKey ? FINE_NUDGE : NUDGE\n    let deltaX = 0\n    let deltaY = 0\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        deltaX = -step\n        break\n      case 'ArrowRight':\n        deltaX = step\n        break\n      case 'ArrowUp':\n        deltaY = -step\n        break\n      case 'ArrowDown':\n        deltaY = step\n        break\n      default:\n        return\n    }\n\n    event.preventDefault()\n    onDrag(deltaX, deltaY)\n  }\n\n  const controls: Array<{ action: WindowAction; label: string }> = []\n  if (minimizable) controls.push({ action: 'minimize', label: 'Minimize' })\n  if (maximizable) {\n    controls.push(\n      maximized\n        ? { action: 'restore', label: 'Restore' }\n        : { action: 'maximize', label: 'Maximize' },\n    )\n  }\n  if (closable) controls.push({ action: 'close', label: 'Close' })\n\n  // A grip with no `onDrag` to report to would be a lie, so it becomes\n  // decorative rather than announcing itself as a control.\n  const gripIsControl = resizable && !maximized && Boolean(onDrag)\n\n  const classes = ['vgui-window']\n  if (focused) classes.push('vgui-window--focused')\n  if (maximized) classes.push('vgui-window--maximized')\n  if (className) classes.push(className)\n\n  return (\n    <section\n      ref={ref}\n      aria-labelledby={titleId}\n      title={tooltip}\n      className={classes.join(' ')}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      <div\n        className=\"vgui-window__titlebar\"\n        tabIndex={0}\n        data-dragging={dragging === 'titlebar' ? 'true' : undefined}\n        onPointerDown={startDrag('titlebar')}\n        onPointerMove={handlePointerMove}\n        onPointerUp={endDrag}\n        onPointerCancel={endDrag}\n        onKeyDown={handleNudge}\n      >\n        {icon ? <span className=\"vgui-window__icon\">{icon}</span> : null}\n        <span className=\"vgui-window__title\" id={titleId}>\n          {title}\n        </span>\n        {controls.length > 0 ? (\n          <div\n            className=\"vgui-window__controls\"\n            role=\"group\"\n            aria-label={controlsLabel ?? 'Window controls'}\n          >\n            {controls.map((control) => (\n              <button\n                key={control.action}\n                type=\"button\"\n                className={`vgui-window__control vgui-window__control--${\n                  control.action === 'restore' ? 'maximize' : control.action\n                }`}\n                onClick={() => onAction?.(control.action)}\n              >\n                <span\n                  className=\"vgui-window__glyph\"\n                  aria-hidden=\"true\"\n                  data-glyph={control.action}\n                />\n                <span className=\"vgui-visually-hidden\">{control.label}</span>\n              </button>\n            ))}\n          </div>\n        ) : null}\n      </div>\n      <div className=\"vgui-window__body\">{children}</div>\n      {resizable && !maximized ? (\n        <div\n          className=\"vgui-window__grip\"\n          data-dragging={dragging === 'grip' ? 'true' : undefined}\n          tabIndex={gripIsControl ? 0 : undefined}\n          aria-label={gripIsControl ? 'Resize window' : undefined}\n          aria-hidden={gripIsControl ? undefined : true}\n          onPointerDown={gripIsControl ? startDrag('grip') : undefined}\n          onPointerMove={gripIsControl ? handlePointerMove : undefined}\n          onPointerUp={gripIsControl ? endDrag : undefined}\n          onPointerCancel={gripIsControl ? endDrag : undefined}\n          onKeyDown={gripIsControl ? handleNudge : undefined}\n        />\n      ) : null}\n    </section>\n  )\n})\n\nWindow.displayName = 'Window'\n"],"mappings":"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"}

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

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

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

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

package/dist/index.d.ts

@@ -1,19 +1,100 @@
 /**
  * @dalcvil/steam-green-react
  *
- * Public entry point. Every component is re-exported from here, but the build
- * preserves the module graph so importing one component never pulls in the
- * rest:
+ * Public entry point. Every component, and the props type for every component,
+ * is re-exported from here:
  *
  * ```tsx
- * import { GreenButton } from '@dalcvil/steam-green-react'
+ * import { Button, type ButtonProps } from '@dalcvil/steam-green-react'
  * ```
  *
- * The global theme (`@dalcvil/steam-green-react/styles/theme.css`) is opt-in;
- * per-component styles ship with their component.
+ * The build keeps the module graph intact, so importing one component never
+ * pulls in the rest. Styles for a component ship beside it and are imported by
+ * the component itself; the global theme
+ * (`@dalcvil/steam-green-react/styles/theme.css`) is opt-in and only sets
+ * document-level defaults.
+ *
+ * Components are named for what they are, not for the theme: `Button`, not
+ * `GreenButton`. See `docs/README.md` for the full component inventory.
  */
-export { GreenButton } from './components/GreenButton';
-export type { GreenButtonProps } from './components/GreenButton';
-export { GreenPanel } from './components/GreenPanel';
-export type { GreenPanelProps } from './components/GreenPanel';
+export { Dialog } from './components/Dialog';
+export type { DialogProps } from './components/Dialog';
+export { Divider } from './components/Divider';
+export type { DividerProps } from './components/Divider';
+export { GroupBox } from './components/GroupBox';
+export type { GroupBoxProps } from './components/GroupBox';
+export { Notification } from './components/Notification';
+export type { NotificationProps } from './components/Notification';
+export { Panel } from './components/Panel';
+export type { PanelProps } from './components/Panel';
+export { ScrollArea } from './components/ScrollArea';
+export type { ScrollAreaProps } from './components/ScrollArea';
+export { Splitter } from './components/Splitter';
+export type { SplitterProps } from './components/Splitter';
+export { TitleBar } from './components/TitleBar';
+export type { TitleBarProps } from './components/TitleBar';
+export { Tooltip } from './components/Tooltip';
+export type { TooltipProps } from './components/Tooltip';
+export { Window } from './components/Window';
+export type { WindowProps } from './components/Window';
+export { Button } from './components/Button';
+export type { ButtonProps } from './components/Button';
+export { Checkbox } from './components/Checkbox';
+export type { CheckboxProps } from './components/Checkbox';
+export { ColorPicker } from './components/ColorPicker';
+export type { ColorPickerProps } from './components/ColorPicker';
+export { FieldLabel } from './components/FieldLabel';
+export type { FieldLabelProps } from './components/FieldLabel';
+export { IconButton, glyphs } from './components/IconButton';
+export type { GlyphName, IconButtonProps } from './components/IconButton';
+export { ProgressBar } from './components/ProgressBar';
+export type { ProgressBarProps } from './components/ProgressBar';
+export { Radio, RadioGroup } from './components/Radio';
+export type { RadioProps, RadioGroupProps } from './components/Radio';
+export { Select } from './components/Select';
+export type { SelectOption, SelectProps } from './components/Select';
+export { Slider } from './components/Slider';
+export type { SliderProps } from './components/Slider';
+export { SpinBox } from './components/SpinBox';
+export type { SpinBoxProps } from './components/SpinBox';
+export { Textarea } from './components/Textarea';
+export type { TextareaProps } from './components/Textarea';
+export { TextInput } from './components/TextInput';
+export type { TextInputProps } from './components/TextInput';
+export { ToggleButton } from './components/ToggleButton';
+export type { ToggleButtonProps } from './components/ToggleButton';
+export { Link } from './components/Link';
+export type { LinkProps } from './components/Link';
+export { Menu, MenuItem } from './components/Menu';
+export type { MenuItemProps, MenuItemSpec, MenuProps } from './components/Menu';
+export { MenuBar } from './components/MenuBar';
+export type { MenuBarItemSpec, MenuBarProps } from './components/MenuBar';
+export { NavBar } from './components/NavBar';
+export type { NavBarItem, NavBarProps } from './components/NavBar';
+export { Tabs } from './components/Tabs';
+export type { TabSpec, TabsProps } from './components/Tabs';
+export { Toolbar } from './components/Toolbar';
+export type { ToolbarItem, ToolbarProps } from './components/Toolbar';
+export { Avatar } from './components/Avatar';
+export type { AvatarProps } from './components/Avatar';
+export { Console } from './components/Console';
+export type { ConsoleLine, ConsoleLineKind, ConsoleProps } from './components/Console';
+export { LevelMeter } from './components/LevelMeter';
+export type { LevelMeterProps } from './components/LevelMeter';
+export { List } from './components/List';
+export type { ListProps, ListRow, ListSection } from './components/List';
+export { RichText, RichTextBold, RichTextEmphasis, RichTextLink } from './components/RichText';
+export type { RichTextBoldProps, RichTextEmphasisProps, RichTextLinkProps, RichTextProps, } from './components/RichText';
+export { Scrollbar } from './components/Scrollbar';
+export type { ScrollbarProps } from './components/Scrollbar';
+export { Spinner } from './components/Spinner';
+export type { SpinnerProps } from './components/Spinner';
+export { StatusBar } from './components/StatusBar';
+export type { StatusBarProps } from './components/StatusBar';
+export { StatusLabel } from './components/StatusLabel';
+export type { StatusLabelProps } from './components/StatusLabel';
+export { Table } from './components/Table';
+export type { TableColumn, TableProps, TableSort } from './components/Table';
+export { TreeView } from './components/TreeView';
+export type { TreeNode, TreeViewProps, TreeViewVariant } from './components/TreeView';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,3 +1,41 @@
-import { GreenButton } from "./components/GreenButton/GreenButton.js";
-import { GreenPanel } from "./components/GreenPanel/GreenPanel.js";
-export { GreenButton, GreenPanel };
+import { Window } from "./components/Window/Window.js";
+import { Dialog } from "./components/Dialog/Dialog.js";
+import { Divider } from "./components/Divider/Divider.js";
+import { GroupBox } from "./components/GroupBox/GroupBox.js";
+import { Notification } from "./components/Notification/Notification.js";
+import { Panel } from "./components/Panel/Panel.js";
+import { ScrollArea } from "./components/ScrollArea/ScrollArea.js";
+import { Splitter } from "./components/Splitter/Splitter.js";
+import { TitleBar } from "./components/TitleBar/TitleBar.js";
+import { Tooltip } from "./components/Tooltip/Tooltip.js";
+import { Button } from "./components/Button/Button.js";
+import { Checkbox } from "./components/Checkbox/Checkbox.js";
+import { ColorPicker } from "./components/ColorPicker/ColorPicker.js";
+import { FieldLabel } from "./components/FieldLabel/FieldLabel.js";
+import { IconButton, glyphs } from "./components/IconButton/IconButton.js";
+import { ProgressBar } from "./components/ProgressBar/ProgressBar.js";
+import { Radio, RadioGroup } from "./components/Radio/Radio.js";
+import { Select } from "./components/Select/Select.js";
+import { Slider } from "./components/Slider/Slider.js";
+import { SpinBox } from "./components/SpinBox/SpinBox.js";
+import { Textarea } from "./components/Textarea/Textarea.js";
+import { TextInput } from "./components/TextInput/TextInput.js";
+import { ToggleButton } from "./components/ToggleButton/ToggleButton.js";
+import { Link } from "./components/Link/Link.js";
+import { Menu, MenuItem } from "./components/Menu/Menu.js";
+import { MenuBar } from "./components/MenuBar/MenuBar.js";
+import { NavBar } from "./components/NavBar/NavBar.js";
+import { Tabs } from "./components/Tabs/Tabs.js";
+import { Toolbar } from "./components/Toolbar/Toolbar.js";
+import { Avatar } from "./components/Avatar/Avatar.js";
+import { Console } from "./components/Console/Console.js";
+import { LevelMeter } from "./components/LevelMeter/LevelMeter.js";
+import { List } from "./components/List/List.js";
+import { RichText, RichTextBold, RichTextEmphasis, RichTextLink } from "./components/RichText/RichText.js";
+import { Scrollbar } from "./components/Scrollbar/Scrollbar.js";
+import { Spinner } from "./components/Spinner/Spinner.js";
+import { StatusLabel } from "./components/StatusLabel/StatusLabel.js";
+import { StatusBar } from "./components/StatusBar/StatusBar.js";
+import { Table } from "./components/Table/Table.js";
+import { TreeView } from "./components/TreeView/TreeView.js";
+export { Avatar, Button, Checkbox, ColorPicker, Console, Dialog, Divider, FieldLabel, GroupBox, IconButton, LevelMeter, Link, List, Menu, MenuBar, MenuItem, NavBar, Notification, Panel, ProgressBar, Radio, RadioGroup, RichText, RichTextBold, RichTextEmphasis, RichTextLink, ScrollArea, Scrollbar, Select, Slider, SpinBox, Spinner, Splitter, StatusBar, StatusLabel, Table, Tabs, TextInput, Textarea, TitleBar, ToggleButton, Toolbar, Tooltip, TreeView, Window, glyphs };

package/dist/styles/scrollbars.css

@@ -0,0 +1,123 @@
+/*
+ * Green Steam scrollbar skin for the platform's own scrollbar.
+ *
+ * The library's scrollbar is the 18px VGUI bar: a light-green gutter, a
+ * surface-green thumb with a raised bevel, and an 18x18 arrow button at each
+ * end (docs/components/Scrollbar.md). There are three ways to paint it and they
+ * are meant to be indistinguishable:
+ *
+ *   1. `Scrollbar` draws it as a button/gutter/thumb tree, which is the only
+ *      way to get dragging, clicking and a stable gutter in every browser.
+ *   2. `ScrollArea` draws the same bar, without the interaction, for regions
+ *      that only need the look.
+ *   3. This file paints it onto the *platform* bar, so a component that
+ *      scrolls its own content — a table body, a console, a textarea, a combo
+ *      box list — reads as the same control.
+ *
+ * Opt in by putting `.vgui-scroll-surface` on any scrolling element:
+ *
+ *   <div class="vgui-scroll-surface" style="overflow-y: auto">…</div>
+ *
+ * Every self-scrolling component in the library already does this. Fidelity is
+ * browser-dependent and cannot be raised:
+ *
+ *   - WebKit and Blink paint the whole thing, arrow buttons included. That is
+ *     every engine but Firefox, and Firefox has no scrollbar pseudo-elements at
+ *     all — `scrollbar-color` recolours the gutter and the thumb and stops
+ *     there, so the bevel and the arrows are lost there and only there.
+ *   - Forced-colors mode drops the colours and keeps the geometry, which is the
+ *     correct behaviour rather than a gap to close.
+ *   - Scrollbar colours do not animate and the arrows cannot host a `::before`,
+ *     which is why the glyph below is a stack of gradient layers rather than a
+ *     `clip-path` triangle like the drawn bar's.
+ *
+ * Like every other stylesheet in the package this reads the shared tokens with
+ * literal fallbacks, so it resolves on a page that never imported the theme.
+ */
+
+.vgui-scroll-surface {
+  /* Thumb first, then track — `steam.styles:2240`, `:2291`. */
+  scrollbar-color: var(--vgui-scrollbar-thumb, #4c5844) var(--vgui-scrollbar-gutter, #5a6a50);
+  /* `thin` and `none` would take the arrows with them, so the bar keeps its own
+   * 18px size and the `scrollbar-width` shorthand is pinned back to `auto`. */
+  scrollbar-width: auto;
+}
+
+.vgui-scroll-surface::-webkit-scrollbar {
+  inline-size: var(--vgui-scrollbar-size, 18px);
+  block-size: var(--vgui-scrollbar-size, 18px);
+  background-color: var(--vgui-scrollbar-gutter, #5a6a50);
+}
+
+/* The square where the two bars meet. `ListView.Corner` makes it darker. */
+.vgui-scroll-surface::-webkit-scrollbar-corner {
+  background-color: var(--vgui-scrollbar-corner, #5a6a50);
+}
+
+/* A box-shadow ring cannot be split into a light and a dark side, so the bevel
+ * is the border (docs/foundations.md §4). */
+.vgui-scroll-surface::-webkit-scrollbar-thumb {
+  background-color: var(--vgui-scrollbar-thumb, #4c5844);
+  border: var(--vgui-bevel-width, 1px) solid;
+  border-color: var(--vgui-bevel-light, #899281) var(--vgui-bevel-dark, #292d23)
+    var(--vgui-bevel-dark, #292d23) var(--vgui-bevel-light, #899281);
+}
+
+/* The arrow: four half-open fills, 7px wide by 4px tall, laid out as the
+ * staircase VGUI's glyph actually is (docs/components/Scrollbar.md). Four 1px
+ * gradient layers reproduce it, because a scrollbar button has no `::before`. */
+.vgui-scroll-surface::-webkit-scrollbar-button {
+  --vgui-scrollbar-glyph: var(--vgui-scrollbar-glyph-color, #a0aa95);
+  inline-size: var(--vgui-scrollbar-button-size, 18px);
+  block-size: var(--vgui-scrollbar-button-size, 18px);
+  background-color: var(--vgui-scrollbar-thumb, #4c5844);
+  background-image: linear-gradient(var(--vgui-scrollbar-glyph), var(--vgui-scrollbar-glyph)),
+    linear-gradient(var(--vgui-scrollbar-glyph), var(--vgui-scrollbar-glyph)),
+    linear-gradient(var(--vgui-scrollbar-glyph), var(--vgui-scrollbar-glyph)),
+    linear-gradient(var(--vgui-scrollbar-glyph), var(--vgui-scrollbar-glyph));
+  background-repeat: no-repeat;
+  border: var(--vgui-bevel-width, 1px) solid;
+  border-color: var(--vgui-bevel-light, #899281) var(--vgui-bevel-dark, #292d23)
+    var(--vgui-bevel-dark, #292d23) var(--vgui-bevel-light, #899281);
+}
+
+/* Up: the staircase is narrowest at its tip. Positions are measured from the
+ * padding box, so 6px..9px is the glyph centered in an 18px button. */
+.vgui-scroll-surface::-webkit-scrollbar-button:vertical {
+  background-size: 1px 1px, 3px 1px, 5px 1px, 7px 1px;
+  background-position: center 6px, center 7px, center 8px, center 9px;
+}
+
+.vgui-scroll-surface::-webkit-scrollbar-button:vertical:increment {
+  background-size: 7px 1px, 5px 1px, 3px 1px, 1px 1px;
+}
+
+.vgui-scroll-surface::-webkit-scrollbar-button:horizontal {
+  background-size: 1px 1px, 1px 3px, 1px 5px, 1px 7px;
+  background-position: 6px center, 7px center, 8px center, 9px center;
+}
+
+.vgui-scroll-surface::-webkit-scrollbar-button:horizontal:increment {
+  background-size: 1px 7px, 1px 5px, 1px 3px, 1px 1px;
+}
+
+/* Hover recolours the glyph and press inverts the box — the same two rules the
+ * drawn bar follows (`steam.styles:2030-2067`). */
+.vgui-scroll-surface::-webkit-scrollbar-button:hover {
+  --vgui-scrollbar-glyph: var(--vgui-text-strong, #ffffff);
+}
+
+.vgui-scroll-surface::-webkit-scrollbar-button:active {
+  border-color: var(--vgui-bevel-dark, #292d23) var(--vgui-bevel-light, #899281)
+    var(--vgui-bevel-light, #899281) var(--vgui-bevel-dark, #292d23);
+}
+
+@media (forced-colors: active) {
+  .vgui-scroll-surface {
+    scrollbar-color: auto;
+  }
+
+  .vgui-scroll-surface::-webkit-scrollbar-button {
+    background-image: none;
+  }
+}

package/dist/styles/scrollbars.css.d.ts

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