@dalcvil/steam-green-react 0.1.0 → 1.0.0

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,77 @@
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import "./IconButton.css";
+//#region src/components/IconButton/IconButton.tsx
+var svg = (body) => `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E${body}%3C/svg%3E`;
+/**
+* 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").
+*/
+var glyphs = {
+	back: svg(`%3Cpath d='M8 2 4 6l4 4' fill='none' stroke='%23000' stroke-width='2'/%3E`),
+	forward: svg(`%3Cpath d='M4 2l4 4-4 4' fill='none' stroke='%23000' stroke-width='2'/%3E`),
+	home: svg(`%3Cpath d='M6 1 11 5.5V11H7.5V7.5h-3V11H1V5.5z' fill='%23000'/%3E`),
+	reload: svg(`%3Cpath d='M9.6 6A3.6 3.6 0 1 1 7.9 3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8.1 1.1 8.6 4.1 5.6 3.4z' fill='%23000'/%3E`),
+	stop: svg(`%3Crect x='2' y='2' width='8' height='8' fill='%23000'/%3E`),
+	detail: svg(`%3Cpath d='M4 2.5 9.5 6 4 9.5z' fill='%23000'/%3E`),
+	close: svg(`%3Cpath d='M2.5 2.5 9.5 9.5M9.5 2.5 2.5 9.5' stroke='%23000' stroke-width='1.8'/%3E`),
+	minimize: svg(`%3Crect x='2' y='9' width='8' height='2' fill='%23000'/%3E`),
+	maximize: svg(`%3Crect x='2.5' y='2.5' width='7' height='7' fill='none' stroke='%23000' stroke-width='1.6'/%3E`),
+	restore: svg(`%3Crect x='2' y='4.5' width='5.5' height='5.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M4.5 4.5V2h5.5v5.5H7.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E`),
+	"chevron-down": svg(`%3Cpath d='M2.5 4.5 6 8.5l3.5-4' fill='none' stroke='%23000' stroke-width='2'/%3E`),
+	"chevron-up": svg(`%3Cpath d='M2.5 7.5 6 3.5l3.5 4' fill='none' stroke='%23000' stroke-width='2'/%3E`),
+	"arrow-down": svg(`%3Cpath d='M6 9.5 1.5 4h9z' fill='%23000'/%3E`),
+	"arrow-up": svg(`%3Cpath d='M6 2.5 1.5 8h9z' fill='%23000'/%3E`),
+	"arrow-left": svg(`%3Cpath d='M2.5 6 8 1.5v9z' fill='%23000'/%3E`),
+	"arrow-right": svg(`%3Cpath d='M9.5 6 4 1.5v9z' fill='%23000'/%3E`),
+	grid: svg(`%3Cpath d='M2 2h3.5v3.5H2zM6.5 2H10v3.5H6.5zM2 6.5h3.5V10H2zM6.5 6.5H10V10H6.5z' fill='%23000'/%3E`),
+	list: svg(`%3Cpath d='M2 3h8v1.5H2zM2 5.25h8v1.5H2zM2 7.5h8V9H2z' fill='%23000'/%3E`),
+	pin: svg(`%3Cpath d='M7.2 1.2 10.8 4.8 8.6 6.4 6.7 9.8 4.2 7.3 1.6 8.4l4.6-4.6z' fill='%23000'/%3E`),
+	question: svg(`%3Ccircle cx='6' cy='6' r='5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M4.4 4.7a1.6 1.6 0 1 1 2.3 1.5c-.5.3-.8.7-.8 1.2' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Ccircle cx='6' cy='9.2' r='.9' fill='%23000'/%3E`)
+};
+/** Resolves the built-in glyph data URI for a name, or `null` for a node. */
+function glyphMask(icon) {
+	return typeof icon === "string" && icon in glyphs ? glyphs[icon] : null;
+}
+/**
+* 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).
+*/
+var IconButton = forwardRef(function IconButton({ className, type = "button", label, icon, size = 20, frameless = false, toggled = false, clay = false, style, ...rest }, ref) {
+	const classes = ["vgui-icon-button"];
+	if (size === 15) classes.push("vgui-icon-button--small");
+	if (size === 18) classes.push("vgui-icon-button--gutter");
+	if (size === 25) classes.push("vgui-icon-button--large");
+	if (frameless) classes.push("vgui-icon-button--frameless");
+	if (toggled) classes.push("vgui-icon-button--toggled");
+	if (clay) classes.push("vgui-icon-button--clay");
+	if (className) classes.push(className);
+	const mask = glyphMask(icon);
+	const mergedStyle = mask ? {
+		...style,
+		"--vgui-icon-button-glyph": `url("${mask}")`
+	} : style;
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type,
+		className: classes.join(" "),
+		"aria-label": label,
+		"aria-pressed": toggled || void 0,
+		style: mergedStyle,
+		...rest,
+		children: /* @__PURE__ */ jsx("span", {
+			className: mask ? "vgui-icon-button__glyph" : "vgui-icon-button__glyph vgui-icon-button__glyph--node",
+			"aria-hidden": "true",
+			children: mask ? null : icon
+		})
+	});
+});
+IconButton.displayName = "IconButton";
+//#endregion
+export { IconButton, glyphMask, glyphs };
+
+//# sourceMappingURL=IconButton.js.map

package/dist/components/IconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","names":[],"sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react'\n\nimport './IconButton.css'\n\n/*\n * Glyphs are inline SVG data URIs used as `mask-image`, never as\n * `background-image` (docs/components/IconButton.md, \"CSS recipe\"). A `data:`\n * URI cannot read a CSS custom property, so a painted image would need one URI\n * per colour — six variants × four states per glyph. A *mask* keeps one URI and\n * takes its colour from `background-color: currentColor`, which means the glyph\n * recolours for hover/active/disabled and for every theme variant for free.\n *\n * The mask payload is opaque black (`%23000`, percent-encoded so no literal hex\n * value appears in the source): `mask-mode: match-source` reads the image's\n * alpha, so the fill colour is irrelevant — only the silhouette matters.\n */\nconst svg = (body: string) =>\n  `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E${body}%3C/svg%3E`\n\n/**\n * The built-in glyphs, keyed by the name accepted by `IconButton`'s `icon`\n * prop. Geometry is drawn on a 12×12 grid and centred, rather than transcribed\n * from Valve's sprites — `icon_down_*` is 9×6 while `icon_left_*`/`icon_right_*`\n * are 13×13, so one primitive per direction is the only consistent option\n * (docs/components/IconButton.md, \"Assets\").\n */\nexport const glyphs = {\n  back: svg(`%3Cpath d='M8 2 4 6l4 4' fill='none' stroke='%23000' stroke-width='2'/%3E`),\n  forward: svg(`%3Cpath d='M4 2l4 4-4 4' fill='none' stroke='%23000' stroke-width='2'/%3E`),\n  home: svg(`%3Cpath d='M6 1 11 5.5V11H7.5V7.5h-3V11H1V5.5z' fill='%23000'/%3E`),\n  reload: svg(\n    `%3Cpath d='M9.6 6A3.6 3.6 0 1 1 7.9 3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8.1 1.1 8.6 4.1 5.6 3.4z' fill='%23000'/%3E`,\n  ),\n  stop: svg(`%3Crect x='2' y='2' width='8' height='8' fill='%23000'/%3E`),\n  detail: svg(`%3Cpath d='M4 2.5 9.5 6 4 9.5z' fill='%23000'/%3E`),\n  close: svg(`%3Cpath d='M2.5 2.5 9.5 9.5M9.5 2.5 2.5 9.5' stroke='%23000' stroke-width='1.8'/%3E`),\n  minimize: svg(`%3Crect x='2' y='9' width='8' height='2' fill='%23000'/%3E`),\n  maximize: svg(\n    `%3Crect x='2.5' y='2.5' width='7' height='7' fill='none' stroke='%23000' stroke-width='1.6'/%3E`,\n  ),\n  restore: svg(\n    `%3Crect x='2' y='4.5' width='5.5' height='5.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M4.5 4.5V2h5.5v5.5H7.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E`,\n  ),\n  'chevron-down': svg(\n    `%3Cpath d='M2.5 4.5 6 8.5l3.5-4' fill='none' stroke='%23000' stroke-width='2'/%3E`,\n  ),\n  'chevron-up': svg(\n    `%3Cpath d='M2.5 7.5 6 3.5l3.5 4' fill='none' stroke='%23000' stroke-width='2'/%3E`,\n  ),\n  // One centred triangle serves all four directions — see the note above.\n  'arrow-down': svg(`%3Cpath d='M6 9.5 1.5 4h9z' fill='%23000'/%3E`),\n  'arrow-up': svg(`%3Cpath d='M6 2.5 1.5 8h9z' fill='%23000'/%3E`),\n  'arrow-left': svg(`%3Cpath d='M2.5 6 8 1.5v9z' fill='%23000'/%3E`),\n  'arrow-right': svg(`%3Cpath d='M9.5 6 4 1.5v9z' fill='%23000'/%3E`),\n  grid: svg(\n    `%3Cpath d='M2 2h3.5v3.5H2zM6.5 2H10v3.5H6.5zM2 6.5h3.5V10H2zM6.5 6.5H10V10H6.5z' fill='%23000'/%3E`,\n  ),\n  list: svg(\n    `%3Cpath d='M2 3h8v1.5H2zM2 5.25h8v1.5H2zM2 7.5h8V9H2z' fill='%23000'/%3E`,\n  ),\n  pin: svg(\n    `%3Cpath d='M7.2 1.2 10.8 4.8 8.6 6.4 6.7 9.8 4.2 7.3 1.6 8.4l4.6-4.6z' fill='%23000'/%3E`,\n  ),\n  question: svg(\n    `%3Ccircle cx='6' cy='6' r='5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M4.4 4.7a1.6 1.6 0 1 1 2.3 1.5c-.5.3-.8.7-.8 1.2' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Ccircle cx='6' cy='9.2' r='.9' fill='%23000'/%3E`,\n  ),\n} as const\n\n/** The names accepted by `IconButton`'s `icon` prop. */\nexport type GlyphName = keyof typeof glyphs\n\n/** Resolves the built-in glyph data URI for a name, or `null` for a node. */\nexport function glyphMask(icon: ReactNode | GlyphName): string | null {\n  return typeof icon === 'string' && icon in glyphs ? glyphs[icon as GlyphName] : null\n}\n\nexport interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Accessible name. Required — a glyph alone is not a name. */\n  label: string\n  /** The glyph: an inline SVG node, or the name of one of the built-in glyphs. */\n  icon: ReactNode | GlyphName\n  /** Edge length in pixels. Defaults to 20. */\n  size?: 15 | 18 | 20 | 25\n  /** Render without a bevel until hovered. */\n  frameless?: boolean\n  /** Latched on: an inverted bevel that persists. */\n  toggled?: boolean\n  /** Render the grey property-sheet face. */\n  clay?: boolean\n}\n\n/**\n * A square, glyph-only button. The tick target of a 20×20 face is under WCAG\n * 2.5.8's 24×24, so every variant grows an invisible centred hit area rather\n * than relying on the painted box (docs/foundations.md §10, rule 6).\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    className,\n    type = 'button',\n    label,\n    icon,\n    size = 20,\n    frameless = false,\n    toggled = false,\n    clay = false,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const classes = ['vgui-icon-button']\n  if (size === 15) classes.push('vgui-icon-button--small')\n  if (size === 18) classes.push('vgui-icon-button--gutter')\n  if (size === 25) classes.push('vgui-icon-button--large')\n  if (frameless) classes.push('vgui-icon-button--frameless')\n  if (toggled) classes.push('vgui-icon-button--toggled')\n  if (clay) classes.push('vgui-icon-button--clay')\n  if (className) classes.push(className)\n\n  const mask = glyphMask(icon)\n\n  // The URI travels as a custom property so the stylesheet stays free of\n  // inline images and a caller's own `style` still merges.\n  const mergedStyle = mask\n    ? ({ ...style, '--vgui-icon-button-glyph': `url(\"${mask}\")` } as CSSProperties)\n    : style\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={classes.join(' ')}\n      aria-label={label}\n      aria-pressed={toggled || undefined}\n      style={mergedStyle}\n      {...rest}\n    >\n      <span\n        className={mask ? 'vgui-icon-button__glyph' : 'vgui-icon-button__glyph vgui-icon-button__glyph--node'}\n        aria-hidden=\"true\"\n      >\n        {mask ? null : icon}\n      </span>\n    </button>\n  )\n})\n\nIconButton.displayName = 'IconButton'\n"],"mappings":";;;;AAiBA,IAAM,OAAO,SACX,sFAAsF,KAAK;;;;;;;;AAS7F,IAAa,SAAS;CACpB,MAAM,IAAI,2EAA2E;CACrF,SAAS,IAAI,2EAA2E;CACxF,MAAM,IAAI,mEAAmE;CAC7E,QAAQ,IACN,kJACF;CACA,MAAM,IAAI,4DAA4D;CACtE,QAAQ,IAAI,mDAAmD;CAC/D,OAAO,IAAI,qFAAqF;CAChG,UAAU,IAAI,4DAA4D;CAC1E,UAAU,IACR,iGACF;CACA,SAAS,IACP,wLACF;CACA,gBAAgB,IACd,mFACF;CACA,cAAc,IACZ,mFACF;CAEA,cAAc,IAAI,+CAA+C;CACjE,YAAY,IAAI,+CAA+C;CAC/D,cAAc,IAAI,+CAA+C;CACjE,eAAe,IAAI,+CAA+C;CAClE,MAAM,IACJ,oGACF;CACA,MAAM,IACJ,0EACF;CACA,KAAK,IACH,0FACF;CACA,UAAU,IACR,mPACF;AACF;;AAMA,SAAgB,UAAU,MAA4C;CACpE,OAAO,OAAO,SAAS,YAAY,QAAQ,SAAS,OAAO,QAAqB;AAClF;;;;;;AAsBA,IAAa,aAAa,WAA+C,SAAS,WAChF,EACE,WACA,OAAO,UACP,OACA,MACA,OAAO,IACP,YAAY,OACZ,UAAU,OACV,OAAO,OACP,OACA,GAAG,QAEL,KACA;CACA,MAAM,UAAU,CAAC,kBAAkB;CACnC,IAAI,SAAS,IAAI,QAAQ,KAAK,yBAAyB;CACvD,IAAI,SAAS,IAAI,QAAQ,KAAK,0BAA0B;CACxD,IAAI,SAAS,IAAI,QAAQ,KAAK,yBAAyB;CACvD,IAAI,WAAW,QAAQ,KAAK,6BAA6B;CACzD,IAAI,SAAS,QAAQ,KAAK,2BAA2B;CACrD,IAAI,MAAM,QAAQ,KAAK,wBAAwB;CAC/C,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,MAAM,OAAO,UAAU,IAAI;CAI3B,MAAM,cAAc,OACf;EAAE,GAAG;EAAO,4BAA4B,QAAQ,KAAK;CAAI,IAC1D;CAEJ,OACE,oBAAC,UAAD;EACO;EACC;EACN,WAAW,QAAQ,KAAK,GAAG;EAC3B,cAAY;EACZ,gBAAc,WAAW,KAAA;EACzB,OAAO;EACP,GAAI;EAEJ,UAAA,oBAAC,QAAD;GACE,WAAW,OAAO,4BAA4B;GAC9C,eAAY;GAEX,UAAA,OAAO,OAAO;EACX,CAAA;CACA,CAAA;AAEZ,CAAC;AAED,WAAW,cAAc"}

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

@@ -0,0 +1,3 @@
+export { IconButton, glyphs } from './IconButton';
+export type { GlyphName, IconButtonProps } from './IconButton';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/LevelMeter/LevelMeter.css

@@ -0,0 +1,117 @@
+/*
+ * Green Steam level meter — the `rampUp_1..4` / `rampDown_1..4` sprite family
+ * drawn procedurally (docs/components/LevelMeter.md).
+ *
+ * There is no `LevelMeter` block in `steam.styles`, so the meter has no corpus
+ * colours at all: shape carries the reading and the palette comes from the ping
+ * tokens that `foundations.md` already defines for a table's signal bars.
+ *
+ * `--vgui-ping-high` (#4C5844) is byte-identical to `--vgui-surface`
+ * foundations.md:92/:68) — the "good" reading would be literally invisible on a
+ * panel, so levels 3 and 4 use `--vgui-heading` instead, as the component doc
+ * instructs. Levels 1 and 2 keep the ping tokens so a table column and a
+ * standalone meter never disagree.
+ */
+
+.vgui-level-meter {
+  --vgui-level-meter-segment: 20px;
+  --vgui-level-meter-gap: 1px;
+  /* The artwork defines four frames; any other count is a deliberate departure. */
+  --vgui-level-meter-level: 4;
+  --vgui-level-meter-count: var(--vgui-level-meter-level);
+
+  display: inline-flex;
+  align-items: flex-end;
+  gap: var(--vgui-level-meter-gap);
+  block-size: var(--vgui-level-meter-segment);
+  /* A readout, not a target: not focusable, not interactive, no hover state. */
+  cursor: default;
+  user-select: none;
+}
+
+.vgui-level-meter__segment {
+  inline-size: var(--vgui-level-meter-segment);
+  block-size: var(--vgui-level-meter-segment);
+  background-color: var(--vgui-text-dim);
+  /* The theme has no rounded corners anywhere, and the sprites are visibly
+     discrete: hard-edged segments with a 1px unlit gap, no gradient. The outline
+     keeps the segment *shape* readable even when the fill fails contrast. */
+  outline: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  outline-offset: calc(-1 * var(--vgui-bevel-width));
+}
+
+/*
+ * Lit segments carry a stepped height profile — 25/50/75/100% for the four-frame
+ * family (up) and its mirror (down) — so the level survives without colour. The
+ * step is derived from the segment's ordinal rather than written out per count,
+ * which keeps the corpus geometry exact while letting `segments` degrade sanely.
+ */
+.vgui-level-meter--up .vgui-level-meter__segment.is-lit {
+  block-size: calc(var(--vgui-level-meter-index) / var(--vgui-level-meter-count) * 100%);
+}
+
+.vgui-level-meter--down .vgui-level-meter__segment.is-lit {
+  block-size: calc(
+    (var(--vgui-level-meter-count) - var(--vgui-level-meter-index) + 1) /
+      var(--vgui-level-meter-count) * 100%
+  );
+}
+
+/* Severity by level, using the same tokens as a table's ping column. */
+.vgui-level-meter__segment.is-lit {
+  background-color: var(--vgui-ping-medium);
+}
+
+.vgui-level-meter[data-level='1'] .vgui-level-meter__segment.is-lit {
+  background-color: var(--vgui-ping-low);
+}
+
+.vgui-level-meter[data-level='2'] .vgui-level-meter__segment.is-lit {
+  background-color: var(--vgui-ping-medium);
+}
+
+/* `--vgui-ping-high` is the surface colour: use the heading tone for a good
+   reading, because a meter that vanishes at 4/4 reads as broken. */
+.vgui-level-meter[data-level='3'] .vgui-level-meter__segment.is-lit,
+.vgui-level-meter[data-level='4'] .vgui-level-meter__segment.is-lit {
+  background-color: var(--vgui-heading);
+}
+
+/* Compact, for a server-list cell. */
+.vgui-level-meter--inline {
+  --vgui-level-meter-segment: 12px;
+}
+
+.vgui-level-meter[aria-disabled='true'] .vgui-level-meter__segment {
+  opacity: 0.5;
+}
+
+/* Dim the reading itself, not just the whole control, so a disabled meter cannot
+   be mistaken for a live one. */
+.vgui-level-meter[aria-disabled='true'] .vgui-level-meter__segment.is-lit {
+  background-color: var(--vgui-text-dim);
+}
+
+/*
+ * Meaningful motion only, and CSS-only: no frame timer means nothing to clean up
+ * on unmount and no test can hang on it.
+ */
+.vgui-level-meter--animating .vgui-level-meter__segment.is-lit {
+  animation: vgui-level-pulse 900ms steps(4, end) infinite;
+}
+
+@keyframes vgui-level-pulse {
+  0% {
+    opacity: 0.35;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vgui-level-meter--animating .vgui-level-meter__segment.is-lit {
+    animation: none;
+  }
+}

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

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

package/dist/components/LevelMeter/LevelMeter.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from 'react';
+import './LevelMeter.css';
+export interface LevelMeterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Current level, 0…segments. Values are clamped. */
+    level?: number;
+    /** Number of segments. 4 matches the sprite family; other values are an extension. */
+    segments?: number;
+    /** Descending rather than ascending segment heights. */
+    direction?: 'up' | 'down';
+    /** Compact 12px segments, for table cells. */
+    inline?: boolean;
+    /** Pulse the lit segments while the level is being measured. */
+    animating?: boolean;
+    /** Render and apply a disabled treatment. */
+    disabled?: boolean;
+    /** Text announced to assistive tech, e.g. "Good". Strongly recommended. */
+    valueText?: string;
+}
+export declare const LevelMeter: import("react").ForwardRefExoticComponent<LevelMeterProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=LevelMeter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LevelMeter.d.ts","sourceRoot":"","sources":["../../../src/components/LevelMeter/LevelMeter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAA;AAE1D,OAAO,kBAAkB,CAAA;AAEzB,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sFAAsF;IACtF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wDAAwD;IACxD,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACzB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAKD,eAAO,MAAM,UAAU,4GAqDrB,CAAA"}

package/dist/components/LevelMeter/LevelMeter.js

@@ -0,0 +1,44 @@
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import "./LevelMeter.css";
+//#region src/components/LevelMeter/LevelMeter.tsx
+/** Fallback accessible name; `role="meter"` is nameless without one. */
+var DEFAULT_LABEL = "Level";
+var LevelMeter = forwardRef(function LevelMeter({ className, level = 0, segments = 4, direction = "up", inline = false, animating = false, disabled = false, valueText, ...rest }, ref) {
+	const segmentCount = Math.max(1, Math.floor(segments));
+	const litLevel = Math.min(segmentCount, Math.max(0, Math.round(level)));
+	const classes = ["vgui-level-meter", `vgui-level-meter--${direction}`];
+	if (inline) classes.push("vgui-level-meter--inline");
+	if (animating) classes.push("vgui-level-meter--animating");
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "meter",
+		"aria-label": valueText ?? DEFAULT_LABEL,
+		"aria-valuemin": 0,
+		"aria-valuemax": segmentCount,
+		"aria-valuenow": litLevel,
+		"aria-valuetext": valueText,
+		"aria-disabled": disabled || void 0,
+		"data-level": litLevel,
+		className: classes.join(" "),
+		...rest,
+		children: Array.from({ length: segmentCount }, (_, index) => {
+			const segmentClasses = ["vgui-level-meter__segment"];
+			if (index < litLevel) segmentClasses.push("is-lit");
+			const geometry = {
+				"--vgui-level-meter-index": String(index + 1),
+				"--vgui-level-meter-count": String(segmentCount)
+			};
+			return /* @__PURE__ */ jsx("span", {
+				className: segmentClasses.join(" "),
+				style: geometry
+			}, index);
+		})
+	});
+});
+LevelMeter.displayName = "LevelMeter";
+//#endregion
+export { LevelMeter };
+
+//# sourceMappingURL=LevelMeter.js.map

package/dist/components/LevelMeter/LevelMeter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LevelMeter.js","names":[],"sources":["../../../src/components/LevelMeter/LevelMeter.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { CSSProperties, HTMLAttributes } from 'react'\n\nimport './LevelMeter.css'\n\nexport interface LevelMeterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Current level, 0…segments. Values are clamped. */\n  level?: number\n  /** Number of segments. 4 matches the sprite family; other values are an extension. */\n  segments?: number\n  /** Descending rather than ascending segment heights. */\n  direction?: 'up' | 'down'\n  /** Compact 12px segments, for table cells. */\n  inline?: boolean\n  /** Pulse the lit segments while the level is being measured. */\n  animating?: boolean\n  /** Render and apply a disabled treatment. */\n  disabled?: boolean\n  /** Text announced to assistive tech, e.g. \"Good\". Strongly recommended. */\n  valueText?: string\n}\n\n/** Fallback accessible name; `role=\"meter\"` is nameless without one. */\nconst DEFAULT_LABEL = 'Level'\n\nexport const LevelMeter = forwardRef<HTMLDivElement, LevelMeterProps>(function LevelMeter(\n  {\n    className,\n    level = 0,\n    segments = 4,\n    direction = 'up',\n    inline = false,\n    animating = false,\n    disabled = false,\n    valueText,\n    ...rest\n  },\n  ref,\n) {\n  const segmentCount = Math.max(1, Math.floor(segments))\n  // A four-frame sprite family has no sub-segment resolution, so the reading is\n  // snapped to a step and clamped into range.\n  const litLevel = Math.min(segmentCount, Math.max(0, Math.round(level)))\n\n  const classes = ['vgui-level-meter', `vgui-level-meter--${direction}`]\n  if (inline) classes.push('vgui-level-meter--inline')\n  if (animating) classes.push('vgui-level-meter--animating')\n  if (className) classes.push(className)\n\n  return (\n    <div\n      ref={ref}\n      role=\"meter\"\n      aria-label={valueText ?? DEFAULT_LABEL}\n      aria-valuemin={0}\n      aria-valuemax={segmentCount}\n      aria-valuenow={litLevel}\n      aria-valuetext={valueText}\n      aria-disabled={disabled || undefined}\n      data-level={litLevel}\n      className={classes.join(' ')}\n      {...rest}\n    >\n      {Array.from({ length: segmentCount }, (_, index) => {\n        const segmentClasses = ['vgui-level-meter__segment']\n        if (index < litLevel) segmentClasses.push('is-lit')\n\n        // The step a segment stands at is its ordinal, so the CSS needs no\n        // per-count rule set.\n        const geometry = {\n          '--vgui-level-meter-index': String(index + 1),\n          '--vgui-level-meter-count': String(segmentCount),\n        } as CSSProperties\n\n        return <span key={index} className={segmentClasses.join(' ')} style={geometry} />\n      })}\n    </div>\n  )\n})\n\nLevelMeter.displayName = 'LevelMeter'\n"],"mappings":";;;;;AAuBA,IAAM,gBAAgB;AAEtB,IAAa,aAAa,WAA4C,SAAS,WAC7E,EACE,WACA,QAAQ,GACR,WAAW,GACX,YAAY,MACZ,SAAS,OACT,YAAY,OACZ,WAAW,OACX,WACA,GAAG,QAEL,KACA;CACA,MAAM,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,CAAC;CAGrD,MAAM,WAAW,KAAK,IAAI,cAAc,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC,CAAC;CAEtE,MAAM,UAAU,CAAC,oBAAoB,qBAAqB,WAAW;CACrE,IAAI,QAAQ,QAAQ,KAAK,0BAA0B;CACnD,IAAI,WAAW,QAAQ,KAAK,6BAA6B;CACzD,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OACE,oBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY,aAAa;EACzB,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB;EAChB,iBAAe,YAAY,KAAA;EAC3B,cAAY;EACZ,WAAW,QAAQ,KAAK,GAAG;EAC3B,GAAI;EAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU;GAClD,MAAM,iBAAiB,CAAC,2BAA2B;GACnD,IAAI,QAAQ,UAAU,eAAe,KAAK,QAAQ;GAIlD,MAAM,WAAW;IACf,4BAA4B,OAAO,QAAQ,CAAC;IAC5C,4BAA4B,OAAO,YAAY;GACjD;GAEA,OAAO,oBAAC,QAAD;IAAkB,WAAW,eAAe,KAAK,GAAG;IAAG,OAAO;GAAW,GAA9D,KAA8D;EAClF,CAAC;CACE,CAAA;AAET,CAAC;AAED,WAAW,cAAc"}

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

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

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

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

package/dist/components/Link/Link.css

@@ -0,0 +1,127 @@
+/*
+ * Green Steam link / text button (`URLLabel`, `TextButton`).
+ * See docs/components/Link.md.
+ *
+ * Three things are load-bearing:
+ *
+ *   1. The underline is permanent. It is the whole affordance, and it is what
+ *      satisfies WCAG 1.4.1 — colour alone never distinguishes a link here.
+ *      `text-decoration` and not `border-bottom`, so it follows the baseline,
+ *      survives wrapping and is what forced-colors mode understands.
+ *   2. There is no `:visited` state in VGUI, and a browser's default purple
+ *      would break the period look (and fail contrast), so it is neutralised.
+ *   3. `--button` is deliberately NOT underlined, at rest or on hover. The
+ *      decoration is what encodes "this is an action, not a destination".
+ */
+
+.vgui-link {
+  box-sizing: border-box;
+  font: inherit;
+  color: var(--vgui-text);
+  text-decoration: underline;
+  text-underline-offset: 1px;
+  cursor: pointer;
+}
+
+/* Declared before `:hover`/`:active` so a visited link still brightens. */
+.vgui-link:visited {
+  color: var(--vgui-text);
+}
+
+.vgui-link:hover {
+  color: var(--vgui-text-strong);
+}
+
+/* The pressed colour is the theme's single bright yellow. */
+.vgui-link:active {
+  color: var(--vgui-text-hover);
+}
+
+/*
+ * Valve's dotted ring is the documented fallback; the accessible ring is the
+ * default (docs/foundations.md §4). `.vgui-crisp` opts back into the literal
+ * one along with bitmap text rendering.
+ */
+.vgui-link:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-crisp .vgui-link:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+/*
+ * `--quiet` is the literal `Label`/`LinkText` value (4.06:1 on the green
+ * surface), so it is only ever legitimate on a link that is redundant — never
+ * on the only route to content.
+ */
+.vgui-link--quiet,
+.vgui-link--quiet:visited {
+  color: var(--vgui-link-quiet, var(--vgui-text-muted));
+}
+
+.vgui-link--quiet:hover {
+  color: var(--vgui-text-strong);
+}
+
+/* TextButton: performs an action, so no underline in any state. */
+.vgui-link--button {
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  text-decoration: none;
+}
+
+.vgui-link--button:hover,
+.vgui-link--button:active {
+  text-decoration: none;
+}
+
+.vgui-link--button:hover {
+  color: var(--vgui-text-strong);
+}
+
+.vgui-link--button:active {
+  color: var(--vgui-text-hover);
+}
+
+.vgui-link--external .vgui-link__external {
+  margin-left: 2px;
+}
+
+/* DisabledText1 over DisabledText2 — Valve's sunken disabled treatment. */
+.vgui-link--disabled,
+.vgui-link--disabled:visited,
+.vgui-link[aria-disabled='true'],
+.vgui-link[aria-disabled='true']:visited,
+.vgui-link:disabled {
+  color: var(--vgui-text-disabled);
+  text-shadow: 1px 1px 0 var(--vgui-text-disabled-shadow);
+  cursor: not-allowed;
+}
+
+/* The anchor form is paired with `tabindex="-1"` in the component. */
+.vgui-link[aria-disabled='true'] {
+  pointer-events: none;
+}
+
+/*
+ * Component-scoped copy of the house screen-reader-only helper, so the
+ * "(opens in a new tab)" announcement travels with the component rather than
+ * depending on a global stylesheet.
+ */
+.vgui-link .vgui-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}

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

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

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import './Link.css';
+export interface LinkProps extends HTMLAttributes<HTMLElement> {
+    /** Destination. Omit to render a button-styled action instead. */
+    href?: string;
+    /** Low-emphasis `URLLabel` colour instead of the default. */
+    quiet?: boolean;
+    /** Renders as an action button with no underline (`TextButton`). */
+    asButton?: boolean;
+    /** Adds target="_blank" and the external glyph. */
+    external?: boolean;
+    /** Not reachable or clickable. */
+    disabled?: boolean;
+    /** Rendered content. */
+    children: ReactNode;
+    /** Called when the link or text button is activated. */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+}
+/**
+ * Inline text that navigates (`URLLabel`), or the same look as a low-emphasis
+ * action (`TextButton`). A link is always underlined and a text button never
+ * is — that decoration, not the colour, is what separates "navigates" from
+ * "acts". See `docs/components/Link.md`.
+ */
+export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAO,MAAM,OAAO,CAAA;AAEvE,OAAO,YAAY,CAAA;AAEnB,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC5D,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6DAA6D;IAC7D,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAA;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;CACnD;AAED;;;;;GAKG;AACH,eAAO,MAAM,IAAI,mGA0Ef,CAAA"}

package/dist/components/Link/Link.js

@@ -0,0 +1,60 @@
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import "./Link.css";
+//#region src/components/Link/Link.tsx
+/**
+* Inline text that navigates (`URLLabel`), or the same look as a low-emphasis
+* action (`TextButton`). A link is always underlined and a text button never
+* is — that decoration, not the colour, is what separates "navigates" from
+* "acts". See `docs/components/Link.md`.
+*/
+var Link = forwardRef(function Link({ className, href, quiet = false, asButton = false, external = false, disabled = false, children, onClick, ...rest }, ref) {
+	const isButton = asButton || href === void 0;
+	const showExternal = external && !isButton;
+	const classes = ["vgui-link"];
+	if (quiet) classes.push("vgui-link--quiet");
+	if (isButton) classes.push("vgui-link--button");
+	if (showExternal) classes.push("vgui-link--external");
+	if (disabled) classes.push("vgui-link--disabled");
+	if (className) classes.push(className);
+	const handleClick = (event) => {
+		if (disabled) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+	};
+	if (isButton) return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		className: classes.join(" "),
+		disabled,
+		onClick: handleClick,
+		...rest,
+		children
+	});
+	return /* @__PURE__ */ jsxs("a", {
+		ref,
+		className: classes.join(" "),
+		href,
+		"aria-disabled": disabled || void 0,
+		tabIndex: disabled ? -1 : rest.tabIndex,
+		target: showExternal ? "_blank" : void 0,
+		rel: showExternal ? "noreferrer noopener" : void 0,
+		onClick: handleClick,
+		...rest,
+		children: [children, showExternal ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "vgui-link__external",
+			"aria-hidden": "true",
+			children: "↗"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "vgui-visually-hidden",
+			children: "(opens in a new tab)"
+		})] }) : null]
+	});
+});
+Link.displayName = "Link";
+//#endregion
+export { Link };
+
+//# sourceMappingURL=Link.js.map

package/dist/components/Link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { HTMLAttributes, MouseEvent, ReactNode, Ref } from 'react'\n\nimport './Link.css'\n\nexport interface LinkProps extends HTMLAttributes<HTMLElement> {\n  /** Destination. Omit to render a button-styled action instead. */\n  href?: string\n  /** Low-emphasis `URLLabel` colour instead of the default. */\n  quiet?: boolean\n  /** Renders as an action button with no underline (`TextButton`). */\n  asButton?: boolean\n  /** Adds target=\"_blank\" and the external glyph. */\n  external?: boolean\n  /** Not reachable or clickable. */\n  disabled?: boolean\n  /** Rendered content. */\n  children: ReactNode\n  /** Called when the link or text button is activated. */\n  onClick?: (event: MouseEvent<HTMLElement>) => void\n}\n\n/**\n * Inline text that navigates (`URLLabel`), or the same look as a low-emphasis\n * action (`TextButton`). A link is always underlined and a text button never\n * is — that decoration, not the colour, is what separates \"navigates\" from\n * \"acts\". See `docs/components/Link.md`.\n */\nexport const Link = forwardRef<HTMLElement, LinkProps>(function Link(\n  {\n    className,\n    href,\n    quiet = false,\n    asButton = false,\n    external = false,\n    disabled = false,\n    children,\n    onClick,\n    ...rest\n  },\n  ref,\n) {\n  // `TextButton` has no destination by definition, so omitting `href` renders\n  // the action form even when `asButton` is not passed explicitly.\n  const isButton = asButton || href === undefined\n  const showExternal = external && !isButton\n\n  const classes = ['vgui-link']\n  if (quiet) classes.push('vgui-link--quiet')\n  if (isButton) classes.push('vgui-link--button')\n  if (showExternal) classes.push('vgui-link--external')\n  if (disabled) classes.push('vgui-link--disabled')\n  if (className) classes.push(className)\n\n  const handleClick = (event: MouseEvent<HTMLElement>) => {\n    if (disabled) {\n      event.preventDefault()\n      return\n    }\n    onClick?.(event)\n  }\n\n  if (isButton) {\n    return (\n      <button\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        className={classes.join(' ')}\n        disabled={disabled}\n        onClick={handleClick}\n        {...rest}\n      >\n        {children}\n      </button>\n    )\n  }\n\n  return (\n    <a\n      ref={ref as Ref<HTMLAnchorElement>}\n      className={classes.join(' ')}\n      href={href}\n      // A disabled anchor stays visible but leaves the tab order and the click\n      // path; `pointer-events` alone would keep it reachable by keyboard.\n      aria-disabled={disabled || undefined}\n      tabIndex={disabled ? -1 : rest.tabIndex}\n      target={showExternal ? '_blank' : undefined}\n      rel={showExternal ? 'noreferrer noopener' : undefined}\n      onClick={handleClick}\n      {...rest}\n    >\n      {children}\n      {showExternal ? (\n        <>\n          <span className=\"vgui-link__external\" aria-hidden=\"true\">\n            ↗\n          </span>\n          <span className=\"vgui-visually-hidden\">(opens in a new tab)</span>\n        </>\n      ) : null}\n    </a>\n  )\n})\n\nLink.displayName = 'Link'\n"],"mappings":";;;;;;;;;;AA4BA,IAAa,OAAO,WAAmC,SAAS,KAC9D,EACE,WACA,MACA,QAAQ,OACR,WAAW,OACX,WAAW,OACX,WAAW,OACX,UACA,SACA,GAAG,QAEL,KACA;CAGA,MAAM,WAAW,YAAY,SAAS,KAAA;CACtC,MAAM,eAAe,YAAY,CAAC;CAElC,MAAM,UAAU,CAAC,WAAW;CAC5B,IAAI,OAAO,QAAQ,KAAK,kBAAkB;CAC1C,IAAI,UAAU,QAAQ,KAAK,mBAAmB;CAC9C,IAAI,cAAc,QAAQ,KAAK,qBAAqB;CACpD,IAAI,UAAU,QAAQ,KAAK,qBAAqB;CAChD,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,MAAM,eAAe,UAAmC;EACtD,IAAI,UAAU;GACZ,MAAM,eAAe;GACrB;EACF;EACA,UAAU,KAAK;CACjB;CAEA,IAAI,UACF,OACE,oBAAC,UAAD;EACO;EACL,MAAK;EACL,WAAW,QAAQ,KAAK,GAAG;EACjB;EACV,SAAS;EACT,GAAI;EAEH;CACK,CAAA;CAIZ,OACE,qBAAC,KAAD;EACO;EACL,WAAW,QAAQ,KAAK,GAAG;EACrB;EAGN,iBAAe,YAAY,KAAA;EAC3B,UAAU,WAAW,KAAK,KAAK;EAC/B,QAAQ,eAAe,WAAW,KAAA;EAClC,KAAK,eAAe,wBAAwB,KAAA;EAC5C,SAAS;EACT,GAAI;EAXN,UAAA,CAaG,UACA,eACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;GAAsB,eAAY;GAAO,UAAA;EAEnD,CAAA,GACN,oBAAC,QAAD;GAAM,WAAU;GAAuB,UAAA;EAA0B,CAAA,CACjE,EAAA,CAAA,IACA,IACH;;AAEP,CAAC;AAED,KAAK,cAAc"}

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

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

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

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