@dalcvil/steam-green-react 0.1.0 → 1.0.0

package/LICENSE

@@ -1,25 +1,25 @@
-MIT License
-
-Copyright (c) 2026 Dalcvi
-
-This project contains styles derived from VGUI.css
-(https://github.com/AlpyneDreams/vgui.css), Copyright (c) 2021 Jeffrey Ellison,
-licensed under the MIT License.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Dalcvi
+
+This project contains styles derived from VGUI.css
+(https://github.com/AlpyneDreams/vgui.css), Copyright (c) 2021 Jeffrey Ellison,
+licensed under the MIT License.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -43,6 +43,7 @@ import.
 | Component | Description |
 | --- | --- |
 | `GreenButton` | Classic VGUI push button. Supports `fullWidth` on top of all `<button>` props. |
+| `GreenPanel` | VGUI container with the beveled border and an optional uppercase title bar. Supports `inset` and `rounded`. |
 
 More components are on the way; each one will get its own CSS file plus a
 Storybook story.
@@ -91,6 +92,8 @@ src/
       GreenButton.css         # colocated styles, imported by the component
       GreenButton.stories.tsx
       index.ts
+    GreenPanel/
+      ...
 ```
 
 To add a component: create a folder under `src/components/`, export it from its
@@ -100,9 +103,9 @@ own `index.ts` **and** from `src/index.ts`, and add a story next to it.
 
 | Workflow | Trigger | What it does |
 | --- | --- | --- |
-| `.github/workflows/ci.yml` | push to `main`, PRs | Typechecks, builds the library and Storybook, uploads `dist` as an artifact. |
+| `.github/workflows/ci.yml` | push to `main`, PRs | Typechecks, builds the library and Storybook. |
 | `.github/workflows/pages.yml` | push to `main` | Builds Storybook and deploys it to GitHub Pages. |
-| `.github/workflows/release.yml` | push to `main` | Opens/updates the *“chore: version packages”* PR, then publishes to npm **with provenance** and creates the GitHub release once that PR is merged. |
+| `.github/workflows/release.yml` | **CI** finishing successfully on `main` | Opens/updates the *“chore: version packages”* PR, then publishes to npm **with provenance** and creates the GitHub release once that PR is merged. Never runs on a plain push, so a red CI run cannot release. |
 
 ### Releasing
 
@@ -124,8 +127,8 @@ Releases are managed by [Changesets](https://changesets.dev) — the version in
    creates a GitHub release.
 
 Nothing is published while no changeset exists, so `main` can sit unreleased
-indefinitely — with one exception: `@dalcvil/steam-green-react` is not on the
-registry yet, so the first release run publishes the current `0.1.0` directly.
+indefinitely. Releases are driven entirely by changesets — `0.1.0` was the one
+version published by hand, before trusted publishing existed.
 
 ### First-time setup
 
@@ -135,18 +138,41 @@ registry yet, so the first release run publishes the current `0.1.0` directly.
    default runs a Jekyll build that serves the README instead. Once the source
    is set, the Pages workflow publishes Storybook to
    `https://<owner>.github.io/<repo>/`.
-2. **npm publishing** — create an npm **Automation** token for the `@dalcvil`
-   scope and store it as the repository secret `NPM_TOKEN`
-   (**Settings → Secrets and variables → Actions**). The release workflow
-   exports it as `NODE_AUTH_TOKEN`, which `actions/setup-node` picks up.
+2. **npm publishing** — add a **trusted publisher** on npmjs.com
+   (**Packages → `@dalcvil/steam-green-react` → Settings → Trusted publishing →
+   GitHub Actions**) with repository `Dalcvi/steam-style-react`, workflow
+   `release.yml`, and *Environment* left blank. Let the connection perform a
+   direct publish, not a stage-only one — the release workflow publishes
+   unattended, so stage-only would leave every version waiting on manual 2FA
+   approval.
+
+   No token and no repository secret are involved: the workflow authenticates
+   over OIDC, and npm attaches provenance automatically. Once a release has
+   succeeded, tighten **Settings → Publishing access** to *Require two-factor
+   authentication and disallow tokens*.
 3. **Allow the version PR** — enable **Settings → Actions → General →
    *Allow GitHub Actions to create and approve pull requests***, otherwise the
    workflow cannot open the “chore: version packages” pull request.
 
-> **Note:** commits and pull requests created with the default `GITHUB_TOKEN`
-> do not trigger other workflows, so the “chore: version packages” PR shows no
-> CI checks. If CI is a required status check on `main`, pass a personal access
-> token to the action's `github-token` input so that PR triggers CI.
+> **Note:** the “chore: version packages” PR is opened with the default
+> `GITHUB_TOKEN`, which normally suppresses downstream workflows — but once
+> **Allow GitHub Actions to create and approve pull requests** is enabled, that
+> PR *does* trigger CI. It is therefore safe to require CI as a status check on
+> `main`.
+
+### Release safeguards
+
+* `release.yml` cannot release code CI has not validated, and it cannot be
+  triggered by a non-admin: the first step re-reads the triggering actor's role
+  from the collaborators API and fails unless it is `admin`. Both the automatic
+  `workflow_run` and a manual `workflow_dispatch` go through the same check, so a
+  contributor with write access can merge code but never cause a publish.
+* `.github/CODEOWNERS` names `@Dalcvi` as the owner of everything, with explicit
+  entries for `release.yml` and `.changeset/`. Code ownership only becomes a gate
+  once a branch ruleset turns on **Require review from Code Owners**.
+* PR titles must follow
+  [Conventional Commits](https://www.conventionalcommits.org) — see
+  `.github/copilot-instructions.md`.
 
 ## Credits
 

package/dist/components/Avatar/Avatar.css

@@ -0,0 +1,136 @@
+/*
+ * Green Steam avatar — the client-only `AvatarImage` of the friends panel and
+ * the account button (docs/components/Avatar.md).
+ *
+ * The avatar itself has no `steam.styles` block: it paints a bitmap, so there is
+ * nothing to transcribe except the placeholder colour `Friends.NoAvatarOver`
+ * (`steam.styles:361`) and the neighbouring friends-list tokens. The frame is a
+ * library construction consistent with `Panel`; the status ring is a library
+ * construction with no corpus artwork behind it.
+ *
+ * No artwork is shipped: the placeholder is drawn as `::after` content.
+ *
+ * Component-local metrics are declared here per foundations.md §4; shared
+ * palette tokens are referenced bare.
+ */
+
+.vgui-avatar {
+  --vgui-avatar-size: 42px;
+  --vgui-avatar-status-size: 2px;
+  --vgui-avatar-frame-width: 1px;
+
+  position: relative;
+  box-sizing: border-box;
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  /* The frame owns the size, so the space is reserved before the image exists
+     and a late avatar cannot shift the layout. */
+  inline-size: var(--vgui-avatar-size);
+  block-size: var(--vgui-avatar-size);
+  padding: var(--vgui-avatar-frame-width);
+  /* Square: the theme has no round mask anywhere, and VGUI-era avatars are not
+     round. `--round` is offered for completeness only. */
+  border-radius: 0;
+  border-block-start: var(--vgui-avatar-frame-width) solid var(--vgui-bevel-light);
+  border-inline-start: var(--vgui-avatar-frame-width) solid var(--vgui-bevel-light);
+  border-block-end: var(--vgui-avatar-frame-width) solid var(--vgui-bevel-dark);
+  border-inline-end: var(--vgui-avatar-frame-width) solid var(--vgui-bevel-dark);
+  background-color: var(--vgui-surface-dark);
+  overflow: hidden;
+}
+
+.vgui-avatar__image {
+  inline-size: 100%;
+  block-size: 100%;
+  /* Centre-crop: a non-square upload must never letterbox in a square frame. */
+  object-fit: cover;
+  object-position: center;
+  display: block;
+  /* `theme.css` ships a global `img { object-fit: contain; margin: 2px; border:
+     solid 2px var(--vgui-bevel-light) }`. The frame above owns the bevel and the
+     size, so the inherited margin and border are cancelled — the grey inherited
+     border is 1.66:1 on `--vgui-surface` and 2.30:1 on `--vgui-surface-dark`,
+     under the 3:1 WCAG 1.4.11 asks of a boundary.
+     `image-rendering: pixelated` is deliberately *not* set here: it is part of
+     the `.vgui-crisp` opt-in (theme.css) and inherits from it, because forcing
+     it overrides the user's own rendering preference. */
+  border: 0;
+  margin: 0;
+}
+
+/* The no-avatar state: a white glyph over the box, `Friends.NoAvatarOver`. */
+.vgui-avatar--placeholder .vgui-avatar__image,
+.vgui-avatar__image[data-failed='true'] {
+  visibility: hidden;
+}
+
+.vgui-avatar--placeholder::after {
+  content: attr(data-initials);
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  font: inherit;
+  font-size: calc(var(--vgui-avatar-size) * 0.4);
+  line-height: 1;
+  color: var(--vgui-text-strong);
+  background-color: var(--vgui-surface-dark);
+  text-transform: uppercase;
+}
+
+/* `accountbutton.layout:179` and `FriendOnlineNotification.res:26`. */
+.vgui-avatar--sm {
+  --vgui-avatar-size: 24px;
+}
+
+.vgui-avatar--md {
+  --vgui-avatar-size: 42px;
+}
+
+/* A library extension: no large avatar exists in this resource set. */
+.vgui-avatar--lg {
+  --vgui-avatar-size: 64px;
+}
+
+/* Picture alone, no chrome. */
+.vgui-avatar--bare {
+  border: 0;
+  padding: 0;
+}
+
+.vgui-avatar--round,
+.vgui-avatar--round .vgui-avatar__status {
+  border-radius: 50%;
+}
+
+/* The status ring: a 2px frame edge, not a corner pip and not a filled badge.
+   Decorative by construction — presence is carried by the row's text. */
+.vgui-avatar__status {
+  position: absolute;
+  inset: 0;
+  border: var(--vgui-avatar-status-size) solid var(--vgui-text-dim);
+  pointer-events: none;
+}
+
+.vgui-avatar__status--online {
+  border-color: var(--vgui-steam-green); /* FullGreen */
+}
+
+.vgui-avatar__status--away {
+  border-color: var(--vgui-heading);
+}
+
+.vgui-avatar__status--busy {
+  border-color: var(--vgui-danger);
+}
+
+.vgui-avatar__status--offline {
+  border-color: var(--vgui-text-dim);
+}
+
+/* The friends list is its own visual world: `IgnoredColor` is not a list token.
+   A tinted frame, never a desaturated face. */
+.vgui-avatar--ignored {
+  border-color: var(--vgui-friends-ignored);
+}

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react';
+import './Avatar.css';
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Image URL. Omit to render the placeholder. */
+    src?: string;
+    /** Alt text — the person's name. Pass "" when a name is already adjacent. */
+    alt?: string;
+    /** Size presets. `sm` is 24px (account chrome), `md` 42px (notifications). */
+    size?: 'sm' | 'md' | 'lg';
+    /** Derive initials from a name and show them when there is no image. */
+    name?: string;
+    /** Presence indicator drawn as a 2px frame edge. */
+    status?: 'online' | 'away' | 'busy' | 'offline';
+    /** Tint the frame for an ignored friend. */
+    ignored?: boolean;
+    /** Drop the beveled frame; draw the picture alone. */
+    bare?: boolean;
+    /** Round the corners. Not period-accurate; offered for completeness only. */
+    round?: boolean;
+}
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAqC,MAAM,OAAO,CAAA;AAE9E,OAAO,cAAc,CAAA;AAErB,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,eAAe,CAAC;IAClE,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,6EAA6E;IAC7E,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,8EAA8E;IAC9E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,oDAAoD;IACpD,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/C,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sDAAsD;IACtD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,6EAA6E;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAkBD,eAAO,MAAM,MAAM,yGA0DjB,CAAA"}

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,49 @@
+import { forwardRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Avatar.css";
+//#region src/components/Avatar/Avatar.tsx
+/**
+* At most two initials, one per name part: "dave coder" → `dc`, "dalcvi" → `d`.
+* The `::after` rule uppercases them, so the case of the name is preserved here.
+*/
+function initialsOf(name) {
+	if (name === void 0) return "";
+	const words = name.trim().split(/\s+/).filter((word) => word !== "");
+	return `${words[0]?.charAt(0) ?? ""}${(words.length > 1 ? words.at(-1) : void 0)?.charAt(0) ?? ""}`;
+}
+var Avatar = forwardRef(function Avatar({ className, src, alt = "", size = "md", name, status, ignored = false, bare = false, round = false, onError, ...rest }, ref) {
+	const [failed, setFailed] = useState(false);
+	const placeholder = !src || failed;
+	const classes = ["vgui-avatar", `vgui-avatar--${size}`];
+	if (placeholder) classes.push("vgui-avatar--placeholder");
+	if (status) classes.push("vgui-avatar--status");
+	if (ignored) classes.push("vgui-avatar--ignored");
+	if (bare) classes.push("vgui-avatar--bare");
+	if (round) classes.push("vgui-avatar--round");
+	if (className) classes.push(className);
+	const handleError = (event) => {
+		setFailed(true);
+		onError?.(event);
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		className: classes.join(" "),
+		"data-initials": initialsOf(name),
+		...rest,
+		children: [src ? /* @__PURE__ */ jsx("img", {
+			className: "vgui-avatar__image",
+			src,
+			alt,
+			"data-failed": failed || void 0,
+			onError: handleError
+		}) : null, status ? /* @__PURE__ */ jsx("span", {
+			className: `vgui-avatar__status vgui-avatar__status--${status}`,
+			"aria-hidden": "true"
+		}) : null]
+	});
+});
+Avatar.displayName = "Avatar";
+//#endregion
+export { Avatar };
+
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport type { HTMLAttributes, ReactEventHandler, SyntheticEvent } from 'react'\n\nimport './Avatar.css'\n\nexport interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Image URL. Omit to render the placeholder. */\n  src?: string\n  /** Alt text — the person's name. Pass \"\" when a name is already adjacent. */\n  alt?: string\n  /** Size presets. `sm` is 24px (account chrome), `md` 42px (notifications). */\n  size?: 'sm' | 'md' | 'lg'\n  /** Derive initials from a name and show them when there is no image. */\n  name?: string\n  /** Presence indicator drawn as a 2px frame edge. */\n  status?: 'online' | 'away' | 'busy' | 'offline'\n  /** Tint the frame for an ignored friend. */\n  ignored?: boolean\n  /** Drop the beveled frame; draw the picture alone. */\n  bare?: boolean\n  /** Round the corners. Not period-accurate; offered for completeness only. */\n  round?: boolean\n}\n\n/**\n * At most two initials, one per name part: \"dave coder\" → `dc`, \"dalcvi\" → `d`.\n * The `::after` rule uppercases them, so the case of the name is preserved here.\n */\nfunction initialsOf(name: string | undefined): string {\n  if (name === undefined) return ''\n\n  const words = name.trim().split(/\\s+/).filter((word) => word !== '')\n\n  const first = words[0]?.charAt(0) ?? ''\n  const lastWord = words.length > 1 ? words.at(-1) : undefined\n  const last = lastWord?.charAt(0) ?? ''\n\n  return `${first}${last}`\n}\n\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n  {\n    className,\n    src,\n    alt = '',\n    size = 'md',\n    name,\n    status,\n    ignored = false,\n    bare = false,\n    round = false,\n    onError,\n    ...rest\n  },\n  ref,\n) {\n  const [failed, setFailed] = useState(false)\n  // A missing source and a failed load are the same state: the durable\n  // placeholder, never a broken-image icon.\n  const placeholder = !src || failed\n\n  const classes = ['vgui-avatar', `vgui-avatar--${size}`]\n  if (placeholder) classes.push('vgui-avatar--placeholder')\n  if (status) classes.push('vgui-avatar--status')\n  if (ignored) classes.push('vgui-avatar--ignored')\n  if (bare) classes.push('vgui-avatar--bare')\n  if (round) classes.push('vgui-avatar--round')\n  if (className) classes.push(className)\n\n  const handleError: ReactEventHandler<HTMLImageElement> = (event) => {\n    setFailed(true)\n    onError?.(event as unknown as SyntheticEvent<HTMLSpanElement>)\n  }\n\n  return (\n    <span\n      ref={ref}\n      className={classes.join(' ')}\n      data-initials={initialsOf(name)}\n      {...rest}\n    >\n      {src ? (\n        <img\n          className=\"vgui-avatar__image\"\n          src={src}\n          alt={alt}\n          data-failed={failed || undefined}\n          onError={handleError}\n        />\n      ) : null}\n      {status ? (\n        <span\n          className={`vgui-avatar__status vgui-avatar__status--${status}`}\n          aria-hidden=\"true\"\n        />\n      ) : null}\n    </span>\n  )\n})\n\nAvatar.displayName = 'Avatar'\n"],"mappings":";;;;;;;;AA4BA,SAAS,WAAW,MAAkC;CACpD,IAAI,SAAS,KAAA,GAAW,OAAO;CAE/B,MAAM,QAAQ,KAAK,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,QAAQ,SAAS,SAAS,EAAE;CAMnE,OAAO,GAJO,MAAM,EAAE,EAAE,OAAO,CAAC,KAAK,MACpB,MAAM,SAAS,IAAI,MAAM,GAAG,EAAE,IAAI,KAAA,EAAA,EAC5B,OAAO,CAAC,KAAK;AAGtC;AAEA,IAAa,SAAS,WAAyC,SAAS,OACtE,EACE,WACA,KACA,MAAM,IACN,OAAO,MACP,MACA,QACA,UAAU,OACV,OAAO,OACP,QAAQ,OACR,SACA,GAAG,QAEL,KACA;CACA,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAG1C,MAAM,cAAc,CAAC,OAAO;CAE5B,MAAM,UAAU,CAAC,eAAe,gBAAgB,MAAM;CACtD,IAAI,aAAa,QAAQ,KAAK,0BAA0B;CACxD,IAAI,QAAQ,QAAQ,KAAK,qBAAqB;CAC9C,IAAI,SAAS,QAAQ,KAAK,sBAAsB;CAChD,IAAI,MAAM,QAAQ,KAAK,mBAAmB;CAC1C,IAAI,OAAO,QAAQ,KAAK,oBAAoB;CAC5C,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,MAAM,eAAoD,UAAU;EAClE,UAAU,IAAI;EACd,UAAU,KAAmD;CAC/D;CAEA,OACE,qBAAC,QAAD;EACO;EACL,WAAW,QAAQ,KAAK,GAAG;EAC3B,iBAAe,WAAW,IAAI;EAC9B,GAAI;EAJN,UAAA,CAMG,MACC,oBAAC,OAAD;GACE,WAAU;GACL;GACA;GACL,eAAa,UAAU,KAAA;GACvB,SAAS;EACV,CAAA,IACC,MACH,SACC,oBAAC,QAAD;GACE,WAAW,4CAA4C;GACvD,eAAY;EACb,CAAA,IACC,IACA;;AAEV,CAAC;AAED,OAAO,cAAc"}

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

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

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

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

package/dist/components/Button/Button.css

@@ -0,0 +1,117 @@
+/*
+ * Green Steam button.
+ *
+ * A 25px rectangle with a two-tone 1px bevel that inverts when pressed. Two
+ * details do the heavy lifting and are easy to get wrong (docs/components/Button.md):
+ *
+ *   1. The label is LEFT-aligned with a 4px inset (`inset "4 0 0 0"`), never centred.
+ *   2. There is no `:hover` treatment. `steam.styles` defines no `Button:MouseOver`
+ *      border, so the only affordance is `cursor: pointer`.
+ *
+ * Two explicit deviations from the CSS port, both required by WCAG: `min-height`
+ * rather than `height` so text survives 200% zoom (1.4.4), and a real 24px hit
+ * area on `--small` (2.5.8).
+ */
+
+.vgui-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  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;
+  text-align: left;
+  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;
+}
+
+/* Active INVERTS the bevel. It does not translate the button. */
+.vgui-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);
+}
+
+/*
+ * Valve's literal ring (`1px dashed BorderDark`) measures 1.87:1 against the
+ * button face, so the visible accent ring is the default and the faithful one
+ * is reachable through the `.vgui-crisp` opt-in — the same switch that turns on
+ * bitmap text rendering (docs/foundations.md §5).
+ */
+.vgui-button:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-crisp .vgui-button:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+/*
+ * DisabledText1 is drawn at +1px +1px underneath DisabledText2, so the label
+ * looks pressed into the surface. Reproduced with `text-shadow`, not two
+ * elements. The colour alone is 1.82:1, so the cursor carries the rest.
+ */
+.vgui-button:disabled {
+  cursor: not-allowed;
+  color: var(--vgui-text-disabled);
+  text-shadow: 1px 1px 0 var(--vgui-text-disabled-shadow);
+}
+
+.vgui-button--full-width {
+  display: flex;
+  width: 100%;
+}
+
+.vgui-button--small {
+  position: relative;
+  min-height: 18px;
+  min-width: 60px;
+  font-size: var(--vgui-font-size-small);
+}
+
+/* An 18px control is below the 24px minimum target, so --small grows its hit
+ * area without changing its painted size. */
+.vgui-button--small::after {
+  content: '';
+  position: absolute;
+  inset: 50% 0 auto;
+  height: var(--vgui-min-target-size);
+  transform: translateY(-50%);
+}
+
+.vgui-button--large {
+  min-height: 30px;
+  font-size: var(--vgui-font-size-large);
+}
+
+/* VGUI has no primary/secondary hierarchy; this is an emphasis hook only. */
+.vgui-button--primary {
+  font-weight: bold;
+}
+
+.vgui-button--danger {
+  outline: var(--vgui-bevel-width) solid var(--vgui-danger);
+  outline-offset: -2px;
+}
+
+.vgui-button--clay {
+  background-color: var(--vgui-clay-button);
+}
+
+.vgui-button__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

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

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,18 @@
+import type { ButtonHTMLAttributes } from 'react';
+import './Button.css';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Stretch the button across the full width of its container. */
+    fullWidth?: boolean;
+    /** Compact variant for dense chrome: 18px tall, 12px text. */
+    small?: boolean;
+    /** Taller variant for dialog footers: 30px tall, 16px text. */
+    large?: boolean;
+    /** Emphasis hook for a dialog's default action. Never a background fill. */
+    primary?: boolean;
+    /** Draw a danger outline around the button. */
+    danger?: boolean;
+    /** Render the grey property-sheet face instead of the green one. */
+    clay?: boolean;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,cAAc,CAAA;AAErB,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oEAAoE;IACpE,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,eAAO,MAAM,MAAM,2GA6BjB,CAAA"}

package/dist/components/Button/Button.js

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import "./Button.css";
+//#region src/components/Button/Button.tsx
+var Button = forwardRef(function Button({ className, type = "button", fullWidth = false, small = false, large = false, primary = false, danger = false, clay = false, children, ...rest }, ref) {
+	const classes = ["vgui-button"];
+	if (fullWidth) classes.push("vgui-button--full-width");
+	if (small) classes.push("vgui-button--small");
+	if (large) classes.push("vgui-button--large");
+	if (primary) classes.push("vgui-button--primary");
+	if (danger) classes.push("vgui-button--danger");
+	if (clay) classes.push("vgui-button--clay");
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type,
+		className: classes.join(" "),
+		...rest,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "vgui-button__label",
+			children
+		})
+	});
+});
+Button.displayName = "Button";
+//#endregion
+export { Button };
+
+//# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { ButtonHTMLAttributes } from 'react'\n\nimport './Button.css'\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Stretch the button across the full width of its container. */\n  fullWidth?: boolean\n  /** Compact variant for dense chrome: 18px tall, 12px text. */\n  small?: boolean\n  /** Taller variant for dialog footers: 30px tall, 16px text. */\n  large?: boolean\n  /** Emphasis hook for a dialog's default action. Never a background fill. */\n  primary?: boolean\n  /** Draw a danger outline around the button. */\n  danger?: boolean\n  /** Render the grey property-sheet face instead of the green one. */\n  clay?: boolean\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    type = 'button',\n    fullWidth = false,\n    small = false,\n    large = false,\n    primary = false,\n    danger = false,\n    clay = false,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const classes = ['vgui-button']\n  if (fullWidth) classes.push('vgui-button--full-width')\n  if (small) classes.push('vgui-button--small')\n  if (large) classes.push('vgui-button--large')\n  if (primary) classes.push('vgui-button--primary')\n  if (danger) classes.push('vgui-button--danger')\n  if (clay) classes.push('vgui-button--clay')\n  if (className) classes.push(className)\n\n  return (\n    <button ref={ref} type={type} className={classes.join(' ')} {...rest}>\n      <span className=\"vgui-button__label\">{children}</span>\n    </button>\n  )\n})\n\nButton.displayName = 'Button'\n"],"mappings":";;;;AAoBA,IAAa,SAAS,WAA2C,SAAS,OACxE,EACE,WACA,OAAO,UACP,YAAY,OACZ,QAAQ,OACR,QAAQ,OACR,UAAU,OACV,SAAS,OACT,OAAO,OACP,UACA,GAAG,QAEL,KACA;CACA,MAAM,UAAU,CAAC,aAAa;CAC9B,IAAI,WAAW,QAAQ,KAAK,yBAAyB;CACrD,IAAI,OAAO,QAAQ,KAAK,oBAAoB;CAC5C,IAAI,OAAO,QAAQ,KAAK,oBAAoB;CAC5C,IAAI,SAAS,QAAQ,KAAK,sBAAsB;CAChD,IAAI,QAAQ,QAAQ,KAAK,qBAAqB;CAC9C,IAAI,MAAM,QAAQ,KAAK,mBAAmB;CAC1C,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OACE,oBAAC,UAAD;EAAa;EAAW;EAAM,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;EAC9D,UAAA,oBAAC,QAAD;GAAM,WAAU;GAAsB;EAAe,CAAA;CAC/C,CAAA;AAEZ,CAAC;AAED,OAAO,cAAc"}

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

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

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

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