@dalcvil/steam-green-react 0.2.0 → 1.0.0

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

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

package/dist/components/TitleBar/TitleBar.css

@@ -0,0 +1,76 @@
+/*
+ * Green Steam title bar — the uppercase caption strip
+ * (docs/components/TitleBar.md).
+ *
+ * Three details that are easy to get wrong and are deliberate here:
+ *
+ *   1. `letter-spacing` inherits into anything placed in `__actions`, so the
+ *      trailing controls reset both the tracking and the casing.
+ *   2. `min-width: 0` on `__text` is mandatory, or the flex item refuses to
+ *      shrink below its content and the ellipsis never appears.
+ *   3. `min-height`, never a fixed `height`, so the caption survives 200% zoom
+ *      (WCAG 1.4.4).
+ */
+
+.vgui-titlebar {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: var(--vgui-titlebar-height);
+  margin-bottom: 1em;
+  font-family: var(--vgui-font);
+  font-size: var(--vgui-font-size-small);
+  font-weight: bold;
+  line-height: var(--vgui-titlebar-height);
+  letter-spacing: var(--vgui-chrome-tracking);
+  text-transform: uppercase;
+  color: var(--vgui-text-strong);
+}
+
+.vgui-titlebar__icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+}
+
+.vgui-titlebar__text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vgui-titlebar__actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  /* Never track or uppercase the controls parked in the title bar. */
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.vgui-titlebar--subdued {
+  color: var(--vgui-text-muted);
+}
+
+.vgui-titlebar--clay {
+  color: var(--vgui-clay-glyph);
+}
+
+/*
+ * `2px` tracking is the theme's signature and also a legibility tax at 12px, so
+ * readers who ask for more contrast get it back.
+ */
+@media (prefers-contrast: more) {
+  .vgui-titlebar {
+    letter-spacing: 0.5px;
+  }
+}

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

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

package/dist/components/TitleBar/TitleBar.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import './TitleBar.css';
+export interface TitleBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Caption text. Rendered uppercase regardless of the casing you pass. */
+    children?: ReactNode;
+    /** Optional 16px leading glyph. */
+    icon?: ReactNode;
+    /** Trailing controls, e.g. Window's minimize/maximize/close cluster. */
+    actions?: ReactNode;
+    /** Render the grey property-sheet chrome instead of the green. */
+    clay?: boolean;
+    /** Dim the caption; for a window that does not have focus. */
+    subdued?: boolean;
+    /** Heading level for the caption, so it appears in the document outline. */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Accessible name for the trailing control group. */
+    actionsLabel?: string;
+}
+export declare const TitleBar: import("react").ForwardRefExoticComponent<TitleBarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=TitleBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TitleBar.d.ts","sourceRoot":"","sources":["../../../src/components/TitleBar/TitleBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,gBAAgB,CAAA;AAIvB,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,wEAAwE;IACxE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,kEAAkE;IAClE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IAC7B,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,eAAO,MAAM,QAAQ,0GA2CnB,CAAA"}

package/dist/components/TitleBar/TitleBar.js

@@ -0,0 +1,43 @@
+import { createElement, forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./TitleBar.css";
+//#region src/components/TitleBar/TitleBar.tsx
+var HEADING_TAGS = [
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+];
+var TitleBar = forwardRef(function TitleBar({ className, children, icon, actions, clay = false, subdued = false, level, actionsLabel, ...rest }, ref) {
+	const classes = ["vgui-titlebar"];
+	if (clay) classes.push("vgui-titlebar--clay");
+	if (subdued) classes.push("vgui-titlebar--subdued");
+	if (className) classes.push(className);
+	const text = createElement(level ? HEADING_TAGS[level - 1] : "span", { className: "vgui-titlebar__text" }, children);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: classes.join(" "),
+		...rest,
+		children: [
+			icon != null ? /* @__PURE__ */ jsx("span", {
+				className: "vgui-titlebar__icon",
+				"aria-hidden": "true",
+				children: icon
+			}) : null,
+			text,
+			actions != null ? /* @__PURE__ */ jsx("div", {
+				className: "vgui-titlebar__actions",
+				role: "group",
+				"aria-label": actionsLabel,
+				children: actions
+			}) : null
+		]
+	});
+});
+TitleBar.displayName = "TitleBar";
+//#endregion
+export { TitleBar };
+
+//# sourceMappingURL=TitleBar.js.map

package/dist/components/TitleBar/TitleBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleBar.js","names":[],"sources":["../../../src/components/TitleBar/TitleBar.tsx"],"sourcesContent":["import { createElement, forwardRef } from 'react'\nimport type { HTMLAttributes, ReactNode } from 'react'\n\nimport './TitleBar.css'\n\nconst HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const\n\nexport interface TitleBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Caption text. Rendered uppercase regardless of the casing you pass. */\n  children?: ReactNode\n  /** Optional 16px leading glyph. */\n  icon?: ReactNode\n  /** Trailing controls, e.g. Window's minimize/maximize/close cluster. */\n  actions?: ReactNode\n  /** Render the grey property-sheet chrome instead of the green. */\n  clay?: boolean\n  /** Dim the caption; for a window that does not have focus. */\n  subdued?: boolean\n  /** Heading level for the caption, so it appears in the document outline. */\n  level?: 1 | 2 | 3 | 4 | 5 | 6\n  /** Accessible name for the trailing control group. */\n  actionsLabel?: string\n}\n\nexport const TitleBar = forwardRef<HTMLDivElement, TitleBarProps>(function TitleBar(\n  {\n    className,\n    children,\n    icon,\n    actions,\n    clay = false,\n    subdued = false,\n    level,\n    actionsLabel,\n    ...rest\n  },\n  ref,\n) {\n  const classes = ['vgui-titlebar']\n  if (clay) classes.push('vgui-titlebar--clay')\n  if (subdued) classes.push('vgui-titlebar--subdued')\n  if (className) classes.push(className)\n\n  // `level` is the only thing that makes the caption part of the outline. The\n  // casing and the tracking are presentation, so the string itself is never\n  // transformed — screen readers and copy/paste both keep the original.\n  const text = createElement(\n    level ? HEADING_TAGS[level - 1] : 'span',\n    { className: 'vgui-titlebar__text' },\n    children,\n  )\n\n  return (\n    <div ref={ref} className={classes.join(' ')} {...rest}>\n      {icon != null ? (\n        <span className=\"vgui-titlebar__icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : null}\n      {text}\n      {actions != null ? (\n        <div className=\"vgui-titlebar__actions\" role=\"group\" aria-label={actionsLabel}>\n          {actions}\n        </div>\n      ) : null}\n    </div>\n  )\n})\n\nTitleBar.displayName = 'TitleBar'\n"],"mappings":";;;;AAKA,IAAM,eAAe;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;AAAI;AAmBxD,IAAa,WAAW,WAA0C,SAAS,SACzE,EACE,WACA,UACA,MACA,SACA,OAAO,OACP,UAAU,OACV,OACA,cACA,GAAG,QAEL,KACA;CACA,MAAM,UAAU,CAAC,eAAe;CAChC,IAAI,MAAM,QAAQ,KAAK,qBAAqB;CAC5C,IAAI,SAAS,QAAQ,KAAK,wBAAwB;CAClD,IAAI,WAAW,QAAQ,KAAK,SAAS;CAKrC,MAAM,OAAO,cACX,QAAQ,aAAa,QAAQ,KAAK,QAClC,EAAE,WAAW,sBAAsB,GACnC,QACF;CAEA,OACE,qBAAC,OAAD;EAAU;EAAK,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;EAAjD,UAAA;GACG,QAAQ,OACP,oBAAC,QAAD;IAAM,WAAU;IAAsB,eAAY;IAC/C,UAAA;GACG,CAAA,IACJ;GACH;GACA,WAAW,OACV,oBAAC,OAAD;IAAK,WAAU;IAAyB,MAAK;IAAQ,cAAY;IAC9D,UAAA;GACE,CAAA,IACH;EACD;;AAET,CAAC;AAED,SAAS,cAAc"}

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

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

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

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

package/dist/components/ToggleButton/ToggleButton.css

@@ -0,0 +1,162 @@
+/*
+ * Green Steam toggle button.
+ *
+ * A `Button` that remembers its state. Three recorded differences from
+ * `.vgui-button` (docs/components/ToggleButton.md):
+ *
+ *   1. `:Selected` inverts the bevel *and* darkens the face to `DarkGreenBG`
+ *      (`--vgui-surface-dark`), because a pressed toggle is a state and not a
+ *      transient `:active`.
+ *   2. It *does* have a `MouseOver` border in `steam.styles`, so unlike a plain
+ *      button it reacts to hover.
+ *   3. `font "UiBold"`, so it is dimensionally identical to `Button` and the
+ *      two mix freely in a toolbar.
+ *
+ * The pressed state is styled from `[aria-pressed="true"]` — the attribute is
+ * what assistive tech reads, and a class would be a second, divergable copy of
+ * the same bit.
+ *
+ * `:active` always inverts, even when already pressed: Valve's `Button:Active`
+ * border wins over `:Selected`, and letting `:active` un-invert a pressed toggle
+ * would make the press invisible.
+ *
+ * Two WCAG-mandated deviations: the accessible focus ring replaces the dashed
+ * `BorderDark` ring (1.87:1), and a pressed face that differs from the base by
+ * only 1.30:1 never carries the state on its own — `aria-pressed` does.
+ */
+
+.vgui-toggle-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--vgui-field-inset);
+  min-height: var(--vgui-control-height);
+  min-width: var(--vgui-button-min-width);
+  padding: 0 8px 0 var(--vgui-field-inset);
+  font: inherit;
+  font-weight: lighter;
+  color: var(--vgui-text-strong);
+  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;
+}
+
+/* 1.30:1 against the base surface: decorative, never the only affordance. */
+.vgui-toggle-button:hover {
+  background-color: var(--vgui-surface-light);
+}
+
+/* Pressing and being pressed both invert; `:active` is not a no-op when on. */
+.vgui-toggle-button:active,
+.vgui-toggle-button[aria-pressed='true'] {
+  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-toggle-button[aria-pressed='true'] {
+  background-color: var(--vgui-surface-dark);
+}
+
+.vgui-toggle-button:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-crisp .vgui-toggle-button:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+.vgui-toggle-button:disabled {
+  cursor: not-allowed;
+  color: var(--vgui-text-disabled);
+  text-shadow: 1px 1px 0 var(--vgui-text-disabled-shadow);
+}
+
+/* Square glyph-only variant: an `IconButton` that latches. */
+.vgui-toggle-button--icon-only {
+  justify-content: center;
+  padding: 0;
+  min-width: var(--vgui-control-height);
+  inline-size: var(--vgui-control-height);
+}
+
+.vgui-toggle-button--small {
+  min-height: 18px;
+  min-width: 60px;
+  padding: 0 var(--vgui-field-inset);
+  font-size: var(--vgui-font-size-small);
+}
+
+/* Declared after `[aria-pressed]` so the grey face wins in both states; the
+ * bevel still inverts, which is what carries "on" on this variant. */
+.vgui-toggle-button--clay {
+  background-color: var(--vgui-clay-button);
+}
+
+.vgui-toggle-button__icon {
+  display: block;
+  flex: 0 0 auto;
+  inline-size: var(--vgui-checkbox-size);
+  block-size: var(--vgui-checkbox-size);
+  background-color: currentColor;
+  -webkit-mask-image: var(--vgui-toggle-button-icon, none);
+  mask-image: var(--vgui-toggle-button-icon, none);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+/* A caller-supplied node paints itself; `currentColor` still reaches it. */
+.vgui-toggle-button__icon--node {
+  background-color: transparent;
+}
+
+.vgui-toggle-button__icon--node > svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  fill: currentColor;
+}
+
+.vgui-toggle-button__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * Segmented group (docs/components/ToggleButton.md, "Variants"): siblings share
+ * their inner edges. The React API exposes no `segmented` prop, so the group is
+ * opt-in markup — a wrapper with `role="group"` and an `aria-label` — and the
+ * group collapses its children's duplicated edges. `min-width: 0` drops VGUI's
+ * 75px floor, so the padding is raised to keep every segment wider than the
+ * 24px minimum target.
+ */
+.vgui-toggle-group {
+  display: inline-flex;
+}
+
+.vgui-toggle-group .vgui-toggle-button {
+  min-width: 0;
+  padding-block: 0;
+  padding-inline: calc(var(--vgui-field-inset) * 2);
+}
+
+.vgui-toggle-group .vgui-toggle-button--icon-only {
+  padding-inline: 0;
+}
+
+.vgui-toggle-group .vgui-toggle-button + .vgui-toggle-button {
+  margin-left: calc(-1 * var(--vgui-bevel-width));
+}

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

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

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,27 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import './ToggleButton.css';
+export interface ToggleButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-pressed'> {
+    /** Controlled pressed state. Omit for uncontrolled. */
+    pressed?: boolean;
+    /** Initial pressed state when uncontrolled. */
+    defaultPressed?: boolean;
+    /** Called with the next pressed state. */
+    onPressedChange?: (pressed: boolean) => void;
+    /** Optional leading glyph: a built-in glyph name or an inline SVG node. */
+    icon?: ReactNode | string;
+    /** Square variant, glyph only. Requires `label`. */
+    iconOnly?: boolean;
+    /** Accessible name. Required when `iconOnly` — a glyph is not a name. */
+    label?: string;
+    /** Compact variant for toolbars. */
+    small?: boolean;
+    /** Grey property-sheet face. */
+    clay?: boolean;
+}
+/**
+ * The VGUI class that stays down. `aria-pressed` is the single source of truth
+ * for both the stylesheet and assistive tech, so the state cannot diverge
+ * (docs/components/ToggleButton.md, "CSS recipe").
+ */
+export declare const ToggleButton: import("react").ForwardRefExoticComponent<ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ToggleButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAG3E,OAAO,oBAAoB,CAAA;AAE3B,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,cAAc,CAAC;IACrE,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACzB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,iHA2EvB,CAAA"}

package/dist/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,52 @@
+import { glyphMask } from "../IconButton/IconButton.js";
+import { forwardRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./ToggleButton.css";
+//#region src/components/ToggleButton/ToggleButton.tsx
+/**
+* The VGUI class that stays down. `aria-pressed` is the single source of truth
+* for both the stylesheet and assistive tech, so the state cannot diverge
+* (docs/components/ToggleButton.md, "CSS recipe").
+*/
+var ToggleButton = forwardRef(function ToggleButton({ className, type = "button", pressed, defaultPressed = false, onPressedChange, icon, iconOnly = false, label, small = false, clay = false, onClick, children, ...rest }, ref) {
+	const isControlled = pressed !== void 0;
+	const [uncontrolled, setUncontrolled] = useState(defaultPressed);
+	const isPressed = isControlled ? pressed : uncontrolled;
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		const next = !isPressed;
+		if (!isControlled) setUncontrolled(next);
+		onPressedChange?.(next);
+	};
+	const classes = ["vgui-toggle-button"];
+	if (iconOnly) classes.push("vgui-toggle-button--icon-only");
+	if (small) classes.push("vgui-toggle-button--small");
+	if (clay) classes.push("vgui-toggle-button--clay");
+	if (className) classes.push(className);
+	const mask = typeof icon === "string" ? glyphMask(icon) : null;
+	const iconStyle = mask ? { "--vgui-toggle-button-icon": `url("${mask}")` } : void 0;
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type,
+		className: classes.join(" "),
+		"aria-pressed": isPressed,
+		"aria-label": label,
+		onClick: handleClick,
+		...rest,
+		children: [icon ? /* @__PURE__ */ jsx("span", {
+			className: mask ? "vgui-toggle-button__icon" : "vgui-toggle-button__icon vgui-toggle-button__icon--node",
+			style: iconStyle,
+			"aria-hidden": "true",
+			children: mask ? null : icon
+		}) : null, iconOnly ? null : /* @__PURE__ */ jsx("span", {
+			className: "vgui-toggle-button__label",
+			children
+		})]
+	});
+});
+ToggleButton.displayName = "ToggleButton";
+//#endregion
+export { ToggleButton };
+
+//# sourceMappingURL=ToggleButton.js.map

package/dist/components/ToggleButton/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.js","names":[],"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react'\n\nimport { glyphMask } from '../IconButton/IconButton'\nimport './ToggleButton.css'\n\nexport interface ToggleButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-pressed'> {\n  /** Controlled pressed state. Omit for uncontrolled. */\n  pressed?: boolean\n  /** Initial pressed state when uncontrolled. */\n  defaultPressed?: boolean\n  /** Called with the next pressed state. */\n  onPressedChange?: (pressed: boolean) => void\n  /** Optional leading glyph: a built-in glyph name or an inline SVG node. */\n  icon?: ReactNode | string\n  /** Square variant, glyph only. Requires `label`. */\n  iconOnly?: boolean\n  /** Accessible name. Required when `iconOnly` — a glyph is not a name. */\n  label?: string\n  /** Compact variant for toolbars. */\n  small?: boolean\n  /** Grey property-sheet face. */\n  clay?: boolean\n}\n\n/**\n * The VGUI class that stays down. `aria-pressed` is the single source of truth\n * for both the stylesheet and assistive tech, so the state cannot diverge\n * (docs/components/ToggleButton.md, \"CSS recipe\").\n */\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(function ToggleButton(\n  {\n    className,\n    type = 'button',\n    pressed,\n    defaultPressed = false,\n    onPressedChange,\n    icon,\n    iconOnly = false,\n    label,\n    small = false,\n    clay = false,\n    onClick,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const isControlled = pressed !== undefined\n  const [uncontrolled, setUncontrolled] = useState(defaultPressed)\n  const isPressed = isControlled ? pressed : uncontrolled\n\n  if (import.meta.env.DEV) {\n    if (iconOnly && !label && !rest['aria-label']) {\n      console.warn(\n        'ToggleButton: `iconOnly` needs a `label` (or `aria-label`) — a glyph alone is not an accessible name.',\n      )\n    }\n    if (isControlled && defaultPressed) {\n      console.warn(\n        'ToggleButton: `defaultPressed` is ignored because `pressed` makes the button controlled.',\n      )\n    }\n  }\n\n  const handleClick: NonNullable<ToggleButtonProps['onClick']> = (event) => {\n    onClick?.(event)\n    if (event.defaultPrevented) return\n\n    const next = !isPressed\n    if (!isControlled) setUncontrolled(next)\n    onPressedChange?.(next)\n  }\n\n  const classes = ['vgui-toggle-button']\n  if (iconOnly) classes.push('vgui-toggle-button--icon-only')\n  if (small) classes.push('vgui-toggle-button--small')\n  if (clay) classes.push('vgui-toggle-button--clay')\n  if (className) classes.push(className)\n\n  const mask = typeof icon === 'string' ? glyphMask(icon) : null\n  const iconStyle = mask ? ({ '--vgui-toggle-button-icon': `url(\"${mask}\")` } as CSSProperties) : undefined\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={classes.join(' ')}\n      aria-pressed={isPressed}\n      aria-label={label}\n      onClick={handleClick}\n      {...rest}\n    >\n      {icon ? (\n        <span\n          className={mask ? 'vgui-toggle-button__icon' : 'vgui-toggle-button__icon vgui-toggle-button__icon--node'}\n          style={iconStyle}\n          aria-hidden=\"true\"\n        >\n          {mask ? null : icon}\n        </span>\n      ) : null}\n      {iconOnly ? null : <span className=\"vgui-toggle-button__label\">{children}</span>}\n    </button>\n  )\n})\n\nToggleButton.displayName = 'ToggleButton'\n"],"mappings":";;;;;;;;;;AA+BA,IAAa,eAAe,WAAiD,SAAS,aACpF,EACE,WACA,OAAO,UACP,SACA,iBAAiB,OACjB,iBACA,MACA,WAAW,OACX,OACA,QAAQ,OACR,OAAO,OACP,SACA,UACA,GAAG,QAEL,KACA;CACA,MAAM,eAAe,YAAY,KAAA;CACjC,MAAM,CAAC,cAAc,mBAAmB,SAAS,cAAc;CAC/D,MAAM,YAAY,eAAe,UAAU;CAe3C,MAAM,eAA0D,UAAU;EACxE,UAAU,KAAK;EACf,IAAI,MAAM,kBAAkB;EAE5B,MAAM,OAAO,CAAC;EACd,IAAI,CAAC,cAAc,gBAAgB,IAAI;EACvC,kBAAkB,IAAI;CACxB;CAEA,MAAM,UAAU,CAAC,oBAAoB;CACrC,IAAI,UAAU,QAAQ,KAAK,+BAA+B;CAC1D,IAAI,OAAO,QAAQ,KAAK,2BAA2B;CACnD,IAAI,MAAM,QAAQ,KAAK,0BAA0B;CACjD,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,MAAM,OAAO,OAAO,SAAS,WAAW,UAAU,IAAI,IAAI;CAC1D,MAAM,YAAY,OAAQ,EAAE,6BAA6B,QAAQ,KAAK,IAAI,IAAsB,KAAA;CAEhG,OACE,qBAAC,UAAD;EACO;EACC;EACN,WAAW,QAAQ,KAAK,GAAG;EAC3B,gBAAc;EACd,cAAY;EACZ,SAAS;EACT,GAAI;EAPN,UAAA,CASG,OACC,oBAAC,QAAD;GACE,WAAW,OAAO,6BAA6B;GAC/C,OAAO;GACP,eAAY;GAEX,UAAA,OAAO,OAAO;EACX,CAAA,IACJ,MACH,WAAW,OAAO,oBAAC,QAAD;GAAM,WAAU;GAA6B;EAAe,CAAA,CACzE;;AAEZ,CAAC;AAED,aAAa,cAAc"}

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

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

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

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

package/dist/components/Toolbar/Toolbar.css

@@ -0,0 +1,202 @@
+/*
+ * Green Steam toolbar.
+ * See docs/components/Toolbar.md.
+ *
+ * There is no `ToolBar` block in `steam.styles`, and that absence is the
+ * spec: a VGUI toolbar paints nothing, and its buttons are `bgcolor = none`
+ * with an empty `render_bg {}`. So the container is bare — no strip, no
+ * border, no divider — and a button's state is carried by the **sprite**, never
+ * by a hover face, a border colour or a transform.
+ *
+ * Four deliberate departures from the corpus, each one documented in the
+ * component doc's accessibility section:
+ *
+ *   1. The hit area is `--vgui-min-target-size` (24px) with the sprite still
+ *      16x16 and centred, because a 16x16 target fails WCAG 2.2 SC 2.5.8.
+ *   2. A focus ring exists at all — no toolbar button block defines one, and a
+ *      chromeless glyph with no ring cannot be used from the keyboard.
+ *   3. The glyph insets (the `-5px` home pull and the 1px forward/reload/stop
+ *      pulls) are kept verbatim from `steam.styles`: they are optical
+ *      corrections for 16x16 art that does not fill its canvas.
+ *   4. The sprite set is not shipped. Valve's twenty `icon_button_*` sprites are
+ *      copyrighted artwork and this package is redistributable, so each glyph is
+ *      a procedural SVG stand-in drawn through `mask-image` (see
+ *      `docs/assets.md`). A consumer who owns the art points `--vgui-toolbar-back`
+ *      and friends at it and gets the original sprites back.
+ *
+ * The glyphs are painted as masks over `background-color`, so they follow the
+ * theme's tokens instead of being baked into an image, and they are invisible to
+ * assistive technology by construction: the accessible name is the button's
+ * `aria-label`.
+ */
+
+.vgui-toolbar {
+  /*
+   * Component-local, per foundations.md §4. The glyph tints mirror `Window`'s
+   * frame controls so a toolbar and a titlebar read as the same material.
+   */
+  --vgui-toolbar-glyph: var(--vgui-clay-glyph-dim, #a6aca2);
+  --vgui-toolbar-glyph-active: var(--vgui-clay-glyph, #adb5a8);
+  --vgui-toolbar-glyph-disabled: var(--vgui-text-disabled, #75806f);
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--vgui-toolbar-gap, 8px);
+  height: var(--vgui-toolbar-height, 34px);
+  padding: 0 var(--vgui-toolbar-edge-margin, 10px);
+  /* No block in the corpus defines a toolbar background; the token exists so a
+     theme can add a strip without touching every button. */
+  background: var(--vgui-toolbar-bg, transparent);
+  border: 0;
+}
+
+.vgui-toolbar__button {
+  box-sizing: border-box;
+  /* 24px hit area, 16px sprite: padding plus `background-position: center`. */
+  flex: 0 0 var(--vgui-min-target-size, 24px);
+  width: var(--vgui-min-target-size, 24px);
+  height: var(--vgui-min-target-size, 24px);
+  padding: calc((var(--vgui-min-target-size, 24px) - var(--vgui-icon-size, 16px)) / 2);
+  /*
+   * `render_bg {}` — nothing is ever drawn *behind* a glyph. The glyph itself is
+   * painted as a MASK over `background-color`, so it follows the theme's tokens
+   * instead of being baked into an image; a `data:` URI cannot read a CSS
+   * variable. Every `icon_button_*` state sprite is the same shape and the same
+   * 16x16 size, so the four states are reproduced by the mask's colour rather
+   * than by swapping the image — and a consumer who points `--vgui-toolbar-back`
+   * at Valve's real `icon_button_back.png` gets the original four tints for free,
+   * because the sprites are grey-with-alpha and mask cleanly.
+   */
+  background-color: var(--vgui-toolbar-glyph);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: var(--vgui-icon-size, 16px);
+  border: 0;
+  border-radius: 0;
+  font: inherit;
+  color: inherit;
+  cursor: default;
+  /* No transition: the sprite swaps instantly. */
+}
+
+/* --- Browser chrome glyphs: five glyphs, four tinted states each --- */
+
+.vgui-toolbar__button--back {
+  mask-image: var(--vgui-toolbar-back, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 2.5 L4.5 8 L10.5 13.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E"));
+}
+
+.vgui-toolbar__button--forward {
+  mask-image: var(--vgui-toolbar-forward, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 2.5 L11.5 8 L5.5 13.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E"));
+}
+
+.vgui-toolbar__button--home {
+  mask-image: var(--vgui-toolbar-home, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 7.5 L8 2.5 L14 7.5' fill='none' stroke='white' stroke-width='2'/%3E%3Cpath d='M4 7.5 v6 h8 v-6' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E"));
+}
+
+.vgui-toolbar__button--reload {
+  mask-image: var(--vgui-toolbar-reload, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8 a5 5 0 1 1 -1.6 -3.7' fill='none' stroke='white' stroke-width='2'/%3E%3Cpath d='M13 2.5 L13 5.5 L10 5.5 Z' fill='white'/%3E%3C/svg%3E"));
+}
+
+.vgui-toolbar__button--stop {
+  mask-image: var(--vgui-toolbar-stop, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5 L12.5 12.5 M12.5 3.5 L3.5 12.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E"));
+}
+
+/* The one bevelled glyph the corpus names (`FullscreenButton`). */
+.vgui-toolbar__button--controller-bpm {
+  mask-image: var(--vgui-toolbar-controller-bpm, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.5' y='5.5' width='11' height='5' rx='2.5' fill='none' stroke='white' stroke-width='1.5'/%3E%3Crect x='4.5' y='7.5' width='2' height='1.5' fill='white'/%3E%3Ccircle cx='10.5' cy='8' r='1.2' fill='white'/%3E%3C/svg%3E"));
+}
+
+/*
+ * The four states. The corpus swaps a differently-shaded sprite; because every
+ * `icon_button_*` sprite is the same shape, the readable equivalent is a tint
+ * change, which survives the consumer supplying their own art and keeps the
+ * glyph legible in every theme (see the component doc's accessibility section).
+ */
+.vgui-toolbar__button:hover,
+.vgui-toolbar__button:focus-visible,
+.vgui-toolbar__button:active,
+.vgui-toolbar__button[aria-pressed='true'] {
+  background-color: var(--vgui-toolbar-glyph-active);
+}
+
+.vgui-toolbar__button:disabled {
+  background-color: var(--vgui-toolbar-glyph-disabled);
+}
+
+/*
+ * Per-glyph optical corrections, straight from the corpus's hand-tuned insets
+ * ("0 0 0 0", "1 0 -1 0", "-5 0 0 0"). Do not tidy these into one shared
+ * value: four of the five glyphs are 1-5px off-centre without them.
+ */
+.vgui-toolbar__button--forward,
+.vgui-toolbar__button--reload,
+.vgui-toolbar__button--stop {
+  margin-left: 1px;
+  margin-right: -1px;
+}
+
+.vgui-toolbar__button--home {
+  margin-left: -5px;
+}
+
+/* --- Focus: invented here, because no toolbar block defines one --- */
+
+.vgui-toolbar__button:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-crisp .vgui-toolbar__button:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+/* --- Text buttons: the server browser's 104-128px labelled controls --- */
+
+.vgui-toolbar__button--text {
+  flex: 0 0 auto;
+  width: auto;
+  height: var(--vgui-toolbar-button-size, 24px);
+  padding: 0 8px;
+  /* No glyph: with `mask-image: none` the mask is opaque everywhere, so the
+     glyph paint has to be cleared or the button becomes a solid rectangle. */
+  mask-image: none;
+  background-color: transparent;
+  white-space: nowrap;
+}
+
+/* --- `--raised`: the `FullscreenButton` bevel --- */
+
+.vgui-toolbar--raised .vgui-toolbar__button {
+  /* The bevel is a border, not a fill: `bgcolor` stays the glyph mask's paint,
+     so this rule must not reset `background-color`. */
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+}
+
+/* Pressed = the same bevel rotated, never a colour change. */
+.vgui-toolbar--raised .vgui-toolbar__button:active,
+.vgui-toolbar--raised .vgui-toolbar__button[aria-pressed='true'] {
+  border-top-color: var(--vgui-bevel-dark);
+  border-left-color: var(--vgui-bevel-dark);
+  border-right-color: var(--vgui-bevel-light);
+  border-bottom-color: var(--vgui-bevel-light);
+}
+
+/* --- `--footer`: `DialogServerBrowser.res`'s 34px bottom region --- */
+
+.vgui-toolbar--footer {
+  justify-content: flex-end;
+  padding-right: var(--vgui-toolbar-edge-margin, 10px);
+}
+
+.vgui-toolbar--footer .vgui-toolbar__button {
+  flex: 0 0 auto;
+  width: auto;
+  height: var(--vgui-toolbar-button-size, 24px);
+  padding: 0 8px;
+  font-size: var(--vgui-font-size-small);
+}

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

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