@dalcvil/steam-green-react 0.2.0 → 1.0.0

package/README.md

@@ -103,7 +103,7 @@ 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` | **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. |
 
@@ -154,10 +154,25 @@ version published by hand, before trusted publishing existed.
    *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.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"}

package/dist/components/Checkbox/Checkbox.css

@@ -0,0 +1,116 @@
+/*
+ * Green Steam checkbox.
+ *
+ * The signature detail is the **inverted** bevel: dark on top/left, light on
+ * bottom/right, so the box reads as a hole in the panel rather than a raised
+ * button (docs/components/Checkbox.md). Getting it the same way round as
+ * `.vgui-button` is the common mistake.
+ *
+ * The sprite set is replaced with CSS geometry — a rotated bordered box for
+ * `chkSelStd`, a filled rect for `chkIndeterminate` — so no assets ship.
+ *
+ * Deviations required by WCAG:
+ *
+ *   - `chk*Focus`'s dotted `#000` inner rectangle is 1.15:1 on the box face, so
+ *     the shipped ring is `--vgui-focus-ring` at the same `-3px` offset (the
+ *     geometry still reads as VGUI); the literal ring is the `.vgui-crisp`
+ *     opt-in.
+ *   - The 15×15 box is below the 24×24 minimum target, so the whole row is the
+ *     hit area: the control is wrapped in a `<label>`, exactly as VGUI's
+ *     `labelTextOffset` made the label part of the clickable region.
+ */
+
+.vgui-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font: inherit;
+  color: var(--vgui-text);
+  cursor: pointer;
+}
+
+/* Hidden but present and focusable — never `display: none`. */
+.vgui-checkbox__input {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.vgui-checkbox__box {
+  position: relative;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  inline-size: var(--vgui-checkbox-size);
+  block-size: var(--vgui-checkbox-size);
+  background-color: var(--vgui-surface);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+}
+
+/* `chkSelStd` as two borders on a rotated box: a shape, not a colour signal. */
+.vgui-checkbox__input:checked ~ .vgui-checkbox__box::after {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  inline-size: 5px;
+  block-size: 8px;
+  border-right: 2px solid var(--vgui-text-strong);
+  border-bottom: 2px solid var(--vgui-text-strong);
+  transform: rotate(45deg);
+}
+
+/*
+ * `chkIndeterminate` is a horizontal bar. It is easy to miss on its own, which
+ * is why the real input carries the state and announces "mixed".
+ */
+.vgui-checkbox__input:indeterminate ~ .vgui-checkbox__box::after {
+  content: '';
+  position: absolute;
+  left: 2px;
+  top: 5px;
+  inline-size: 9px;
+  block-size: 3px;
+  background-color: var(--vgui-text-strong);
+  transform: none;
+  border: 0;
+}
+
+.vgui-checkbox__input:focus-visible ~ .vgui-checkbox__box {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+/* Valve's literal `chk*Focus` ring, reachable only through the opt-in. */
+.vgui-crisp .vgui-checkbox__input:focus-visible ~ .vgui-checkbox__box {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+/* DisabledText1 over DisabledText2 at +1px +1px. Colour is decorative here:
+ * the `disabled` attribute is what carries the meaning. */
+.vgui-checkbox__input:disabled ~ .vgui-checkbox__label {
+  color: var(--vgui-text-disabled);
+  text-shadow: 1px 1px 0 var(--vgui-text-disabled-shadow);
+}
+
+.vgui-checkbox__input:disabled ~ .vgui-checkbox__box {
+  cursor: not-allowed;
+}
+
+.vgui-checkbox--label-end {
+  flex-direction: row-reverse;
+}
+
+.vgui-checkbox__label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}

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

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

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,19 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import './Checkbox.css';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** The label. Rendered as part of the clickable area. */
+    label?: ReactNode;
+    /** Render the indeterminate third state. */
+    indeterminate?: boolean;
+    /** Put the box after the label instead of before. */
+    labelPosition?: 'start' | 'end';
+}
+/**
+ * A 15×15 box with an *inset* bevel — a hole in the panel, not a raised button.
+ *
+ * The real `<input type="checkbox">` stays in the DOM, focusable and hidden by
+ * `clip-path`, so `Space`, form participation and the platform's "mixed"
+ * announcement all keep working (docs/components/Checkbox.md, "Accessibility").
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3D,OAAO,gBAAgB,CAAA;AAEvB,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACxF,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qDAAqD;IACrD,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAChC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,4GAyCnB,CAAA"}

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,51 @@
+import { forwardRef, useCallback, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Checkbox.css";
+//#region src/components/Checkbox/Checkbox.tsx
+/**
+* A 15×15 box with an *inset* bevel — a hole in the panel, not a raised button.
+*
+* The real `<input type="checkbox">` stays in the DOM, focusable and hidden by
+* `clip-path`, so `Space`, form participation and the platform's "mixed"
+* announcement all keep working (docs/components/Checkbox.md, "Accessibility").
+*/
+var Checkbox = forwardRef(function Checkbox({ className, label, indeterminate = false, labelPosition = "start", ...rest }, ref) {
+	const inputRef = useRef(null);
+	const setInputRef = useCallback((node) => {
+		inputRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	useEffect(() => {
+		if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+	}, [indeterminate]);
+	const classes = ["vgui-checkbox"];
+	if (labelPosition === "end") classes.push("vgui-checkbox--label-end");
+	if (className) classes.push(className);
+	const box = /* @__PURE__ */ jsx("span", {
+		className: "vgui-checkbox__box",
+		"aria-hidden": "true"
+	});
+	return /* @__PURE__ */ jsxs("label", {
+		className: classes.join(" "),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: setInputRef,
+				type: "checkbox",
+				className: "vgui-checkbox__input",
+				...rest
+			}),
+			labelPosition === "end" ? null : box,
+			label == null ? null : /* @__PURE__ */ jsx("span", {
+				className: "vgui-checkbox__label",
+				children: label
+			}),
+			labelPosition === "end" ? box : null
+		]
+	});
+});
+Checkbox.displayName = "Checkbox";
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=Checkbox.js.map