@dalcvil/steam-green-react 0.1.0 → 1.0.0

package/dist/components/FieldLabel/FieldLabel.css

@@ -0,0 +1,98 @@
+/*
+ * Green Steam field label.
+ *
+ * `Label` in `steam.styles:1147` is four declarations: a font family, a size, a
+ * `textcolor` and a `selectedtextcolor`. No bevel, no face, no sprite, **no
+ * hover** and no disabled state — the sunken disabled treatment comes from the
+ * scheme's `DisabledText1` over `DisabledText2` pair instead
+ * (docs/components/FieldLabel.md).
+ *
+ * The whole visual identity is therefore colour, size and the two-colour shadow
+ * trick. Two things are deliberate:
+ *
+ *   1. **No hover state.** A caption that brightens on hover makes a VGUI layout
+ *      look like a modern web page: everything starts to look clickable.
+ *   2. **No uppercase and no tracking.** Uppercase chrome text is `StatusLabel`'s
+ *      signature, not this component's; a caption loses readability and gains
+ *      nothing.
+ *
+ * `overflow-wrap: anywhere` is not cosmetic — form captions are the most
+ * translated strings in an application, and the corpus never had to care because
+ * it was English-only and bitmap-fonted.
+ */
+
+.vgui-field-label {
+  display: inline-block;
+  font: inherit;
+  font-size: var(--vgui-font-size);
+  line-height: var(--vgui-line-height);
+  max-inline-size: 100%;
+  overflow-wrap: anywhere;
+  color: var(--vgui-text);
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+/*
+ * The sunken look, exactly as `steamscheme.res:50-51` intends it: the dark copy
+ * drawn at +1px +1px and the light copy on top. A `text-shadow` is equivalent to
+ * two stacked elements and cannot drift out of alignment. It is decorative — the
+ * disabled control carries the meaning.
+ */
+.vgui-field-label[data-disabled='true'] {
+  color: var(--vgui-text-disabled);
+  text-shadow: 1px 1px 0 var(--vgui-text-disabled-shadow);
+}
+
+.vgui-field-label--strong {
+  color: var(--vgui-text-strong);
+}
+
+/*
+ * The default caption is `--vgui-text` `#D8DED3` (**5.49:1** on `--vgui-surface`),
+ * not the classic `Label` grey `#A0AA95` (**3.11:1**), because a form caption is
+ * body text and 3.11:1 fails WCAG 1.4.3. The `Label` grey survives as the
+ * `--muted` variant, where it belongs — it reaches 4.06:1 on the
+ * `--vgui-surface-dark` `#3E4637` interiors that motivated it in the first
+ * place. The header comment above describes the corpus, not this decision; see
+ * docs/components/FieldLabel.md §Accessibility.
+ */
+
+.vgui-field-label--muted {
+  color: var(--vgui-text-muted);
+}
+
+.vgui-field-label--heading {
+  color: var(--vgui-heading);
+}
+
+.vgui-field-label--error {
+  color: var(--vgui-danger);
+}
+
+/*
+ * The asterisk is a *shape*, but it is invisible to assistive tech, which is why
+ * `required` also sets `aria-required` on the label and should be paired with
+ * `required` on the control.
+ */
+.vgui-field-label--required::after {
+  content: '*';
+  margin-inline-start: 0.25em;
+  color: var(--vgui-danger);
+}
+
+/*
+ * Only the `<label>` variant is ever focusable, and only in a form context. The
+ * literal Valve ring is a dotted `BorderDark` (1.87:1), so the shipped ring is
+ * the accessible accent ring — the same ring every other control in the library
+ * uses (docs/foundations.md §4, "Focus rings").
+ */
+label.vgui-field-label:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: 2px;
+}
+
+.vgui-crisp label.vgui-field-label:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}

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

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

package/dist/components/FieldLabel/FieldLabel.d.ts

@@ -0,0 +1,29 @@
+import type { LabelHTMLAttributes, ReactNode } from 'react';
+import './FieldLabel.css';
+export interface FieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /** Text or inline content of the label. */
+    children?: ReactNode;
+    /** Render a <span> instead of a <label>, for standalone explanatory text. */
+    asText?: boolean;
+    /** Emphasis: strong white text rather than the default caption colour. */
+    strong?: boolean;
+    /** The classic Label grey `#A0AA95`, for captions on a darker surface. */
+    muted?: boolean;
+    /** Use the maize heading colour, for a label acting as a section title. */
+    heading?: boolean;
+    /** Actionable/validation failure state. Pair with a message; never colour alone. */
+    error?: boolean;
+    /** Append a danger-coloured asterisk. Adds `aria-required` semantics. */
+    required?: boolean;
+    /** Apply the sunken DisabledText1/DisabledText2 treatment. */
+    disabled?: boolean;
+}
+/**
+ * The ordinary caption: one element, one text node, no bevel and no interaction.
+ *
+ * It renders a real `<label>` whenever it captions a control, so `htmlFor` gives
+ * the click-to-focus behaviour for free; `asText` swaps in a `<span>` for
+ * standalone explanatory text (docs/components/FieldLabel.md, "Anatomy").
+ */
+export declare const FieldLabel: import("react").ForwardRefExoticComponent<FieldLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+//# sourceMappingURL=FieldLabel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../../src/components/FieldLabel/FieldLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3D,OAAO,kBAAkB,CAAA;AAEzB,MAAM,WAAW,eAAgB,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAC5E,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oFAAoF;IACpF,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,8GAuDrB,CAAA"}

package/dist/components/FieldLabel/FieldLabel.js

@@ -0,0 +1,42 @@
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import "./FieldLabel.css";
+//#region src/components/FieldLabel/FieldLabel.tsx
+/**
+* The ordinary caption: one element, one text node, no bevel and no interaction.
+*
+* It renders a real `<label>` whenever it captions a control, so `htmlFor` gives
+* the click-to-focus behaviour for free; `asText` swaps in a `<span>` for
+* standalone explanatory text (docs/components/FieldLabel.md, "Anatomy").
+*/
+var FieldLabel = forwardRef(function FieldLabel({ className, children, asText = false, strong = false, muted = false, heading = false, error = false, required = false, disabled = false, htmlFor, ...rest }, ref) {
+	const classes = ["vgui-field-label"];
+	if (strong) classes.push("vgui-field-label--strong");
+	if (muted) classes.push("vgui-field-label--muted");
+	if (heading) classes.push("vgui-field-label--heading");
+	if (error) classes.push("vgui-field-label--error");
+	if (required) classes.push("vgui-field-label--required");
+	if (className) classes.push(className);
+	const isDisabled = disabled || void 0;
+	if (asText) return /* @__PURE__ */ jsx("span", {
+		className: classes.join(" "),
+		"data-disabled": disabled ? "true" : void 0,
+		"aria-disabled": isDisabled,
+		...rest,
+		children
+	});
+	return /* @__PURE__ */ jsx("label", {
+		ref,
+		htmlFor,
+		className: classes.join(" "),
+		"data-disabled": disabled ? "true" : void 0,
+		"aria-disabled": isDisabled,
+		...rest,
+		children
+	});
+});
+FieldLabel.displayName = "FieldLabel";
+//#endregion
+export { FieldLabel };
+
+//# sourceMappingURL=FieldLabel.js.map

package/dist/components/FieldLabel/FieldLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabel.js","names":[],"sources":["../../../src/components/FieldLabel/FieldLabel.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { LabelHTMLAttributes, ReactNode } from 'react'\n\nimport './FieldLabel.css'\n\nexport interface FieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  /** Text or inline content of the label. */\n  children?: ReactNode\n  /** Render a <span> instead of a <label>, for standalone explanatory text. */\n  asText?: boolean\n  /** Emphasis: strong white text rather than the default caption colour. */\n  strong?: boolean\n  /** The classic Label grey `#A0AA95`, for captions on a darker surface. */\n  muted?: boolean\n  /** Use the maize heading colour, for a label acting as a section title. */\n  heading?: boolean\n  /** Actionable/validation failure state. Pair with a message; never colour alone. */\n  error?: boolean\n  /** Append a danger-coloured asterisk. Adds `aria-required` semantics. */\n  required?: boolean\n  /** Apply the sunken DisabledText1/DisabledText2 treatment. */\n  disabled?: boolean\n}\n\n/**\n * The ordinary caption: one element, one text node, no bevel and no interaction.\n *\n * It renders a real `<label>` whenever it captions a control, so `htmlFor` gives\n * the click-to-focus behaviour for free; `asText` swaps in a `<span>` for\n * standalone explanatory text (docs/components/FieldLabel.md, \"Anatomy\").\n */\nexport const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(function FieldLabel(\n  {\n    className,\n    children,\n    asText = false,\n    strong = false,\n    muted = false,\n    heading = false,\n    error = false,\n    required = false,\n    disabled = false,\n    htmlFor,\n    ...rest\n  },\n  ref,\n) {\n  const classes = ['vgui-field-label']\n  if (strong) classes.push('vgui-field-label--strong')\n  if (muted) classes.push('vgui-field-label--muted')\n  if (heading) classes.push('vgui-field-label--heading')\n  if (error) classes.push('vgui-field-label--error')\n  if (required) classes.push('vgui-field-label--required')\n  if (className) classes.push(className)\n\n  // A `<label>` cannot be natively disabled, so the sunken look is opt-in and\n  // keyed on `data-disabled`, with the semantics exposed alongside it. The\n  // requirement itself stays on the control: `aria-required` on a `<label>` is\n  // not permitted for the generic role.\n  const isDisabled = disabled || undefined\n\n  if (asText) {\n    return (\n      <span\n        className={classes.join(' ')}\n        data-disabled={disabled ? 'true' : undefined}\n        aria-disabled={isDisabled}\n        {...rest}\n      >\n        {children}\n      </span>\n    )\n  }\n\n  return (\n    <label\n      ref={ref}\n      htmlFor={htmlFor}\n      className={classes.join(' ')}\n      data-disabled={disabled ? 'true' : undefined}\n      aria-disabled={isDisabled}\n      {...rest}\n    >\n      {children}\n    </label>\n  )\n})\n\nFieldLabel.displayName = 'FieldLabel'\n"],"mappings":";;;;;;;;;;;AA+BA,IAAa,aAAa,WAA8C,SAAS,WAC/E,EACE,WACA,UACA,SAAS,OACT,SAAS,OACT,QAAQ,OACR,UAAU,OACV,QAAQ,OACR,WAAW,OACX,WAAW,OACX,SACA,GAAG,QAEL,KACA;CACA,MAAM,UAAU,CAAC,kBAAkB;CACnC,IAAI,QAAQ,QAAQ,KAAK,0BAA0B;CACnD,IAAI,OAAO,QAAQ,KAAK,yBAAyB;CACjD,IAAI,SAAS,QAAQ,KAAK,2BAA2B;CACrD,IAAI,OAAO,QAAQ,KAAK,yBAAyB;CACjD,IAAI,UAAU,QAAQ,KAAK,4BAA4B;CACvD,IAAI,WAAW,QAAQ,KAAK,SAAS;CAMrC,MAAM,aAAa,YAAY,KAAA;CAE/B,IAAI,QACF,OACE,oBAAC,QAAD;EACE,WAAW,QAAQ,KAAK,GAAG;EAC3B,iBAAe,WAAW,SAAS,KAAA;EACnC,iBAAe;EACf,GAAI;EAEH;CACG,CAAA;CAIV,OACE,oBAAC,SAAD;EACO;EACI;EACT,WAAW,QAAQ,KAAK,GAAG;EAC3B,iBAAe,WAAW,SAAS,KAAA;EACnC,iBAAe;EACf,GAAI;EAEH;CACI,CAAA;AAEX,CAAC;AAED,WAAW,cAAc"}

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

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

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

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

package/dist/components/GroupBox/GroupBox.css

@@ -0,0 +1,101 @@
+/*
+ * Green Steam group box — a real <fieldset> styled with the 1px bevel
+ * (docs/components/GroupBox.md).
+ *
+ * `theme.css` already gives every `fieldset` a bevel and every `legend` the
+ * uppercase 12px chrome treatment, but those are element-level rules this
+ * component has to be able to override, so the box and the legend are both
+ * declared here through their own classes.
+ */
+
+.vgui-groupbox {
+  box-sizing: border-box;
+  margin: 0 0 16px;
+  padding: 12px;
+  /* Non-obvious but essential: a fieldset defaults to min-inline-size:
+     min-content and then refuses to shrink inside a flex or grid parent,
+     which silently breaks every responsive layout it is dropped into. */
+  min-inline-size: 0;
+  border-top: 1px solid var(--vgui-bevel-light);
+  border-left: 1px solid var(--vgui-bevel-light);
+  border-bottom: 1px solid var(--vgui-bevel-dark);
+  border-right: 1px solid var(--vgui-bevel-dark);
+}
+
+.vgui-groupbox--inset {
+  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);
+}
+
+/* Legend: the theme's uppercase chrome treatment, straddling the top border. */
+.vgui-groupbox__legend {
+  padding: 0 6px;
+  text-transform: uppercase;
+  letter-spacing: var(--vgui-chrome-tracking);
+  font-family: var(--vgui-font);
+  font-size: var(--vgui-font-size-small);
+  font-weight: bold;
+  color: var(--vgui-text-strong);
+}
+
+/*
+ * `--legend-top`: the caption takes the whole first row as a section rule
+ * instead of notching the border. The React API has no prop for it — the doc
+ * lists it as a variant, so it is reachable through `className`.
+ */
+.vgui-groupbox--legend-top {
+  border-top: 0;
+}
+
+.vgui-groupbox--legend-top > .vgui-groupbox__legend {
+  display: block;
+  width: 100%;
+  padding: 0 0 6px;
+}
+
+/*
+ * `hideLegend` hides the caption from sight only. `display: none` would strip
+ * the group's accessible name entirely, so the legend is clipped instead.
+ */
+.vgui-groupbox--legend-hidden > .vgui-groupbox__legend {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* `<fieldset disabled>` already disables the whole subtree; only the caption
+   needs a treatment of its own. */
+.vgui-groupbox:disabled .vgui-groupbox__legend {
+  color: var(--vgui-text-disabled);
+  text-shadow: 1px 1px 0 var(--vgui-text-disabled-shadow);
+}
+
+/* Ruled variant: no box, just the engraved divider under the caption. */
+.vgui-groupbox--ruled {
+  border: 0;
+  padding: 0;
+}
+
+.vgui-groupbox--ruled > .vgui-groupbox__legend {
+  display: block;
+  width: 100%;
+  padding: 0 0 6px;
+  border-bottom: 1px solid var(--vgui-bevel-dark);
+  box-shadow: 0 1px 0 var(--vgui-bevel-light);
+}
+
+/*
+ * Invalid border. Colour alone may never be the only indicator (WCAG 1.4.1),
+ * so this only draws the border — callers still owe a message or an icon.
+ */
+.vgui-groupbox--invalid {
+  border-color: var(--vgui-danger);
+}

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

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

package/dist/components/GroupBox/GroupBox.d.ts

@@ -0,0 +1,14 @@
+import type { FieldsetHTMLAttributes, ReactNode } from 'react';
+import './GroupBox.css';
+export interface GroupBoxProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    /** Uppercase caption drawn on the border. */
+    legend: ReactNode;
+    /** Invert the bevel, for a group sitting on a lighter surface. */
+    inset?: boolean;
+    /** Drop the box; render only the engraved rule under the caption. */
+    ruled?: boolean;
+    /** Hide the legend visually while keeping it for assistive technology. */
+    hideLegend?: boolean;
+}
+export declare const GroupBox: import("react").ForwardRefExoticComponent<GroupBoxProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+//# sourceMappingURL=GroupBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupBox.d.ts","sourceRoot":"","sources":["../../../src/components/GroupBox/GroupBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE9D,OAAO,gBAAgB,CAAA;AAEvB,MAAM,WAAW,aAAc,SAAQ,sBAAsB,CAAC,mBAAmB,CAAC;IAChF,6CAA6C;IAC7C,MAAM,EAAE,SAAS,CAAA;IACjB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,qEAAqE;IACrE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,QAAQ,+GAkBnB,CAAA"}

package/dist/components/GroupBox/GroupBox.js

@@ -0,0 +1,25 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./GroupBox.css";
+//#region src/components/GroupBox/GroupBox.tsx
+var GroupBox = forwardRef(function GroupBox({ className, legend, inset = false, ruled = false, hideLegend = false, children, ...rest }, ref) {
+	const classes = ["vgui-groupbox"];
+	if (inset) classes.push("vgui-groupbox--inset");
+	if (ruled) classes.push("vgui-groupbox--ruled");
+	if (hideLegend) classes.push("vgui-groupbox--legend-hidden");
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsxs("fieldset", {
+		ref,
+		className: classes.join(" "),
+		...rest,
+		children: [/* @__PURE__ */ jsx("legend", {
+			className: "vgui-groupbox__legend",
+			children: legend
+		}), children]
+	});
+});
+GroupBox.displayName = "GroupBox";
+//#endregion
+export { GroupBox };
+
+//# sourceMappingURL=GroupBox.js.map

package/dist/components/GroupBox/GroupBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupBox.js","names":[],"sources":["../../../src/components/GroupBox/GroupBox.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { FieldsetHTMLAttributes, ReactNode } from 'react'\n\nimport './GroupBox.css'\n\nexport interface GroupBoxProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n  /** Uppercase caption drawn on the border. */\n  legend: ReactNode\n  /** Invert the bevel, for a group sitting on a lighter surface. */\n  inset?: boolean\n  /** Drop the box; render only the engraved rule under the caption. */\n  ruled?: boolean\n  /** Hide the legend visually while keeping it for assistive technology. */\n  hideLegend?: boolean\n}\n\nexport const GroupBox = forwardRef<HTMLFieldSetElement, GroupBoxProps>(function GroupBox(\n  { className, legend, inset = false, ruled = false, hideLegend = false, children, ...rest },\n  ref,\n) {\n  const classes = ['vgui-groupbox']\n  if (inset) classes.push('vgui-groupbox--inset')\n  if (ruled) classes.push('vgui-groupbox--ruled')\n  if (hideLegend) classes.push('vgui-groupbox--legend-hidden')\n  if (className) classes.push(className)\n\n  // No `role=\"group\"`: the element already maps to the group role, and an\n  // explicit role interferes with the legend-derived accessible name.\n  return (\n    <fieldset ref={ref} className={classes.join(' ')} {...rest}>\n      <legend className=\"vgui-groupbox__legend\">{legend}</legend>\n      {children}\n    </fieldset>\n  )\n})\n\nGroupBox.displayName = 'GroupBox'\n"],"mappings":";;;;AAgBA,IAAa,WAAW,WAA+C,SAAS,SAC9E,EAAE,WAAW,QAAQ,QAAQ,OAAO,QAAQ,OAAO,aAAa,OAAO,UAAU,GAAG,QACpF,KACA;CACA,MAAM,UAAU,CAAC,eAAe;CAChC,IAAI,OAAO,QAAQ,KAAK,sBAAsB;CAC9C,IAAI,OAAO,QAAQ,KAAK,sBAAsB;CAC9C,IAAI,YAAY,QAAQ,KAAK,8BAA8B;CAC3D,IAAI,WAAW,QAAQ,KAAK,SAAS;CAIrC,OACE,qBAAC,YAAD;EAAe;EAAK,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;EAAtD,UAAA,CACE,oBAAC,UAAD;GAAQ,WAAU;GAAyB,UAAA;EAAe,CAAA,GACzD,QACO;;AAEd,CAAC;AAED,SAAS,cAAc"}

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

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

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

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

package/dist/components/IconButton/IconButton.css

@@ -0,0 +1,184 @@
+/*
+ * Green Steam icon button.
+ *
+ * A square face whose entire content is a glyph. Three things differ from
+ * `.vgui-button` (docs/components/IconButton.md):
+ *
+ *   1. The face is square and driven by the sprite's pixel size, not a label.
+ *   2. The glyph recolours per state through `currentColor` over a
+ *      `mask-image`, so one URI covers normal/hover/active/disabled and every
+ *      theme variant. There are no per-state assets.
+ *   3. `:active` inverts the bevel *and* drops the glyph 1px — the only place
+ *      in the theme where content moves on press.
+ *
+ * Two deviations required by WCAG: the accessible focus ring replaces Valve's
+ * dashed `BorderDark` ring (1.87:1), and every face keeps an invisible 24×24
+ * hit area because a 15–20px square is below 2.5.8's minimum.
+ */
+
+.vgui-icon-button {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--vgui-frame-control-size);
+  block-size: var(--vgui-frame-control-size);
+  padding: 0;
+  font: inherit;
+  color: var(--vgui-text);
+  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;
+}
+
+/*
+ * The painted face is 15–20px; the target is not. A centred 24×24 overlay
+ * travels with the button, so the glyph stays sprite-sized while the pointer
+ * target meets WCAG 2.5.8.
+ */
+.vgui-icon-button::before {
+  content: '';
+  position: absolute;
+  inset: 50% auto auto 50%;
+  inline-size: var(--vgui-min-target-size);
+  block-size: var(--vgui-min-target-size);
+  transform: translate(-50%, -50%);
+}
+
+/* The `_over` sprites are brighter glyphs, not a different face: the bevel
+ * stays raised and only the colour changes. */
+.vgui-icon-button:hover,
+.vgui-icon-button--toggled,
+.vgui-icon-button[aria-pressed='true'] {
+  color: var(--vgui-text-strong);
+}
+
+/* Pressed and latched both invert the bevel — and `:active` does so even when
+ * already latched, so the press is never invisible. */
+.vgui-icon-button:active,
+.vgui-icon-button--toggled,
+.vgui-icon-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);
+}
+
+/* `icon_button_*_down` draws the glyph 1px lower. The movement is decorative
+ * and mirrors the bevel inversion, so it is a state change, not motion. */
+.vgui-icon-button:active .vgui-icon-button__glyph {
+  transform: translateY(1px);
+}
+
+.vgui-icon-button:disabled {
+  color: var(--vgui-text-disabled);
+  cursor: default;
+}
+
+/* A disabled control is not a target, so it drops the expanded hit area rather
+ * than overlapping its still-enabled neighbours. */
+.vgui-icon-button:disabled::before {
+  content: none;
+}
+
+.vgui-icon-button:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+/* Valve's literal ring, reachable only through the pixel-perfect opt-in. */
+.vgui-crisp .vgui-icon-button:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+.vgui-icon-button--small {
+  inline-size: var(--vgui-checkbox-size);
+  block-size: var(--vgui-checkbox-size);
+}
+
+.vgui-icon-button--gutter {
+  inline-size: var(--vgui-scrollbar-size);
+  block-size: var(--vgui-scrollbar-size);
+}
+
+.vgui-icon-button--large {
+  inline-size: var(--vgui-control-height);
+  block-size: var(--vgui-control-height);
+}
+
+.vgui-icon-button--clay {
+  background-color: var(--vgui-clay-button);
+}
+
+/*
+ * Frameless: no chrome until hovered, for tree expanders and the `?` hint.
+ * Declared last so it also wins over `--clay` and the `:active` inversion sets
+ * above keep their bevel once shown.
+ */
+.vgui-icon-button--frameless {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.vgui-icon-button--frameless:hover {
+  border-top-color: var(--vgui-bevel-light);
+  border-left-color: var(--vgui-bevel-light);
+  border-bottom-color: var(--vgui-bevel-dark);
+  border-right-color: var(--vgui-bevel-dark);
+}
+
+.vgui-icon-button--frameless:active,
+.vgui-icon-button--frameless.vgui-icon-button--toggled,
+.vgui-icon-button--frameless[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);
+}
+
+/* `icon_button_*_disabled` has no bevel at all on this variant. */
+.vgui-icon-button--frameless:disabled {
+  border-color: transparent;
+}
+
+/*
+ * The glyph box is 60% of the face — 12×12 inside the default 20×20, which is
+ * the sprite-derived metric in the doc. The mask is one image scaled to the
+ * box, tinted by `currentColor`.
+ */
+.vgui-icon-button__glyph {
+  display: block;
+  flex: 0 0 auto;
+  inline-size: 60%;
+  block-size: 60%;
+  background-color: currentColor;
+  -webkit-mask-image: var(--vgui-icon-button-glyph, none);
+  mask-image: var(--vgui-icon-button-glyph, 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, so it must not also get the solid
+ * `currentColor` box the mask needs. `currentColor` is still inherited from the
+ * button, so `fill="currentColor"` in the node tracks every state.
+ */
+.vgui-icon-button__glyph--node {
+  background-color: transparent;
+}
+
+.vgui-icon-button__glyph--node > svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  fill: currentColor;
+}

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

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

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,56 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import './IconButton.css';
+/**
+ * The built-in glyphs, keyed by the name accepted by `IconButton`'s `icon`
+ * prop. Geometry is drawn on a 12×12 grid and centred, rather than transcribed
+ * from Valve's sprites — `icon_down_*` is 9×6 while `icon_left_*`/`icon_right_*`
+ * are 13×13, so one primitive per direction is the only consistent option
+ * (docs/components/IconButton.md, "Assets").
+ */
+export declare const glyphs: {
+    readonly back: string;
+    readonly forward: string;
+    readonly home: string;
+    readonly reload: string;
+    readonly stop: string;
+    readonly detail: string;
+    readonly close: string;
+    readonly minimize: string;
+    readonly maximize: string;
+    readonly restore: string;
+    readonly 'chevron-down': string;
+    readonly 'chevron-up': string;
+    readonly 'arrow-down': string;
+    readonly 'arrow-up': string;
+    readonly 'arrow-left': string;
+    readonly 'arrow-right': string;
+    readonly grid: string;
+    readonly list: string;
+    readonly pin: string;
+    readonly question: string;
+};
+/** The names accepted by `IconButton`'s `icon` prop. */
+export type GlyphName = keyof typeof glyphs;
+/** Resolves the built-in glyph data URI for a name, or `null` for a node. */
+export declare function glyphMask(icon: ReactNode | GlyphName): string | null;
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Accessible name. Required — a glyph alone is not a name. */
+    label: string;
+    /** The glyph: an inline SVG node, or the name of one of the built-in glyphs. */
+    icon: ReactNode | GlyphName;
+    /** Edge length in pixels. Defaults to 20. */
+    size?: 15 | 18 | 20 | 25;
+    /** Render without a bevel until hovered. */
+    frameless?: boolean;
+    /** Latched on: an inverted bevel that persists. */
+    toggled?: boolean;
+    /** Render the grey property-sheet face. */
+    clay?: boolean;
+}
+/**
+ * A square, glyph-only button. The tick target of a 20×20 face is under WCAG
+ * 2.5.8's 24×24, so every variant grows an invisible centred hit area rather
+ * than relying on the painted box (docs/foundations.md §10, rule 6).
+ */
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=IconButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3E,OAAO,kBAAkB,CAAA;AAiBzB;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;aACjB,IAAI;aACJ,OAAO;aACP,IAAI;aACJ,MAAM;aAGN,IAAI;aACJ,MAAM;aACN,KAAK;aACL,QAAQ;aACR,QAAQ;aAGR,OAAO;aAGP,cAAc;aAGd,YAAY;aAIZ,YAAY;aACZ,UAAU;aACV,YAAY;aACZ,aAAa;aACb,IAAI;aAGJ,IAAI;aAGJ,GAAG;aAGH,QAAQ;CAGA,CAAA;AAEV,wDAAwD;AACxD,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,MAAM,CAAA;AAE3C,6EAA6E;AAC7E,wBAAgB,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAEpE;AAED,MAAM,WAAW,eAAgB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,IAAI,EAAE,SAAS,GAAG,SAAS,CAAA;IAC3B,6CAA6C;IAC7C,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;IACxB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU,+GAkDrB,CAAA"}