@dalcvil/steam-green-react 0.1.0 → 1.0.0

package/dist/components/Notification/Notification.css

@@ -0,0 +1,176 @@
+/*
+ * Green Steam notification — a raised, beveled toast
+ * (docs/components/Notification.md).
+ *
+ * The component is presentational: the queue, the timers and the stacking are
+ * the consumer's policy. `index` is therefore published as the
+ * `--vgui-notification-index` custom property instead of being turned into a
+ * layout offset here, because the component cannot know a neighbour's height.
+ */
+
+.vgui-notification {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  box-sizing: border-box;
+  min-width: 260px;
+  max-width: 380px;
+  padding: 8px 10px;
+  background-color: var(--vgui-surface);
+  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);
+  color: var(--vgui-text);
+  font-family: var(--vgui-font);
+  font-size: var(--vgui-font-size);
+  line-height: var(--vgui-line-height);
+  /* VGUI has no drop shadows — the bevel plus placement is what makes a
+     notification read as on top. Resist adding one. */
+  box-shadow: none;
+  z-index: calc(var(--vgui-notification-index, 0) + 1);
+}
+
+.vgui-notification__icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+}
+
+.vgui-notification__content {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.vgui-notification__title {
+  display: block;
+  color: var(--vgui-text-strong);
+  font-weight: bold;
+}
+
+.vgui-notification__message {
+  display: block;
+}
+
+/* The error variant's non-colour cue. */
+.vgui-notification__prefix {
+  color: var(--vgui-text-strong);
+}
+
+/* --- Variant accents ---------------------------------------------------- */
+
+.vgui-notification--info .vgui-notification__icon {
+  color: var(--vgui-text-muted);
+}
+
+.vgui-notification--success .vgui-notification__icon {
+  color: var(--vgui-steam-green);
+}
+
+.vgui-notification--warning .vgui-notification__icon {
+  color: var(--vgui-heading);
+}
+
+.vgui-notification--error .vgui-notification__icon {
+  color: var(--vgui-danger);
+}
+
+/* --- Dismiss control ---------------------------------------------------- */
+
+.vgui-notification__dismiss {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  /* WCAG 2.5.8: an 18px glyph is too small a target on its own. */
+  min-width: var(--vgui-min-target-size);
+  min-height: var(--vgui-min-target-size);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--vgui-text);
+  font-family: var(--vgui-font);
+  font-size: var(--vgui-font-size-small);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.vgui-notification__dismiss:hover {
+  color: var(--vgui-text-hover);
+}
+
+.vgui-notification__dismiss:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+/* --- Corner anchoring --------------------------------------------------- */
+
+.vgui-notification--corner-top-left {
+  position: fixed;
+  inset-block-start: 20px;
+  inset-inline-start: 20px;
+}
+
+.vgui-notification--corner-top-right {
+  position: fixed;
+  inset-block-start: 20px;
+  inset-inline-end: 20px;
+}
+
+.vgui-notification--corner-bottom-left {
+  position: fixed;
+  inset-block-end: 20px;
+  inset-inline-start: 20px;
+}
+
+.vgui-notification--corner-bottom-right {
+  position: fixed;
+  inset-block-end: 20px;
+  inset-inline-end: 20px;
+}
+
+/* --- Entering ----------------------------------------------------------- */
+
+/*
+ * The slide is keyed to mount, so the class is present from the first render
+ * and the animation is guarded rather than the class being toggled.
+ */
+@media (prefers-reduced-motion: no-preference) {
+  .vgui-notification--entering {
+    animation: vgui-notification-in 120ms ease-out;
+  }
+
+  .vgui-notification--corner-top-left.vgui-notification--entering,
+  .vgui-notification--corner-top-right.vgui-notification--entering {
+    animation-name: vgui-notification-in-from-top;
+  }
+
+  @keyframes vgui-notification-in {
+    from {
+      transform: translateY(8px);
+      opacity: 0;
+    }
+    to {
+      transform: none;
+      opacity: 1;
+    }
+  }
+
+  @keyframes vgui-notification-in-from-top {
+    from {
+      transform: translateY(-8px);
+      opacity: 0;
+    }
+    to {
+      transform: none;
+      opacity: 1;
+    }
+  }
+}

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

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

package/dist/components/Notification/Notification.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import './Notification.css';
+type NotificationVariant = 'info' | 'success' | 'warning' | 'error';
+export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Bold headline. Optional — a message alone is fine. */
+    title?: ReactNode;
+    /** Body text. */
+    children?: ReactNode;
+    /** Semantic variant; changes the icon colour and the live-region politeness. */
+    variant?: NotificationVariant;
+    /** Optional leading glyph; overrides the variant's default. */
+    icon?: ReactNode;
+    /** Which corner of the viewport to anchor to. */
+    corner?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Show a dismiss button. */
+    dismissable?: boolean;
+    /** Called when the dismiss button is pressed. */
+    onDismiss?: () => void;
+    /** Milliseconds before auto-dismissal; 0 or undefined disables it. */
+    duration?: number;
+    /** Stacking order within the corner; larger is further from the edge. */
+    index?: number;
+}
+export declare const Notification: import("react").ForwardRefExoticComponent<NotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Notification.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,cAAc,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpF,OAAO,oBAAoB,CAAA;AAE3B,KAAK,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAInE,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACtF,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,iBAAiB;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,gFAAgF;IAChF,OAAO,CAAC,EAAE,mBAAmB,CAAA;IAC7B,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,iDAAiD;IACjD,MAAM,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAA;IAClE,6BAA6B;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AA0CD,eAAO,MAAM,YAAY,8GAyGvB,CAAA"}

package/dist/components/Notification/Notification.js

@@ -0,0 +1,181 @@
+import { forwardRef, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Notification.css";
+//#region src/components/Notification/Notification.tsx
+var GLYPHS = {
+	info: /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "8",
+				r: "6.5",
+				fill: "none",
+				stroke: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "7.25",
+				y: "7",
+				width: "1.5",
+				height: "5",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "7.25",
+				y: "4",
+				width: "1.5",
+				height: "1.5",
+				fill: "currentColor"
+			})
+		]
+	}),
+	success: /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M2.5 8.5 6 12l7.5-8",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	}),
+	warning: /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M8 1.5 15 14.5H1Z",
+				fill: "none",
+				stroke: "currentColor",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "7.25",
+				y: "6",
+				width: "1.5",
+				height: "4.5",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "7.25",
+				y: "11.5",
+				width: "1.5",
+				height: "1.5",
+				fill: "currentColor"
+			})
+		]
+	}),
+	error: /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M3 3 13 13M13 3 3 13",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round"
+		})
+	})
+};
+var Notification = forwardRef(function Notification({ className, title, children, variant = "info", icon, corner = "bottom-right", dismissable = false, onDismiss, duration, index = 0, style, onKeyDown, onFocus, onBlur, onPointerEnter, onPointerLeave, ...rest }, ref) {
+	const [paused, setPaused] = useState(false);
+	const timeout = variant === "error" ? 0 : duration ?? 0;
+	useEffect(() => {
+		if (timeout <= 0 || paused || !onDismiss) return;
+		const timer = setTimeout(onDismiss, timeout);
+		return () => clearTimeout(timer);
+	}, [
+		timeout,
+		paused,
+		onDismiss
+	]);
+	const classes = [
+		"vgui-notification",
+		`vgui-notification--${variant}`,
+		`vgui-notification--corner-${corner}`,
+		"vgui-notification--entering"
+	];
+	if (className) classes.push(className);
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.key === "Escape" && onDismiss) onDismiss();
+	};
+	const mergedStyle = {
+		...style,
+		"--vgui-notification-index": index
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: variant === "error" ? "alert" : "status",
+		className: classes.join(" "),
+		style: mergedStyle,
+		onKeyDown: handleKeyDown,
+		onPointerEnter: (event) => {
+			onPointerEnter?.(event);
+			setPaused(true);
+		},
+		onPointerLeave: (event) => {
+			onPointerLeave?.(event);
+			setPaused(false);
+		},
+		onFocus: (event) => {
+			onFocus?.(event);
+			setPaused(true);
+		},
+		onBlur: (event) => {
+			onBlur?.(event);
+			setPaused(false);
+		},
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "vgui-notification__icon",
+				"aria-hidden": "true",
+				children: icon ?? GLYPHS[variant]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "vgui-notification__content",
+				children: [title != null ? /* @__PURE__ */ jsx("span", {
+					className: "vgui-notification__title",
+					children: title
+				}) : null, /* @__PURE__ */ jsxs("span", {
+					className: "vgui-notification__message",
+					children: [variant === "error" && title == null ? /* @__PURE__ */ jsx("strong", {
+						className: "vgui-notification__prefix",
+						children: "Error: "
+					}) : null, children]
+				})]
+			}),
+			dismissable ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "vgui-notification__dismiss",
+				"aria-label": "Dismiss notification",
+				onClick: onDismiss,
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: "×"
+				})
+			}) : null
+		]
+	});
+});
+Notification.displayName = "Notification";
+//#endregion
+export { Notification };
+
+//# sourceMappingURL=Notification.js.map

package/dist/components/Notification/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","names":[],"sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react'\nimport type { CSSProperties, HTMLAttributes, KeyboardEvent, ReactNode } from 'react'\n\nimport './Notification.css'\n\ntype NotificationVariant = 'info' | 'success' | 'warning' | 'error'\n\n// `title` is narrowed to `ReactNode` here, so the inherited `title: string` has\n// to be dropped first — the same trade `Window` makes.\nexport interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Bold headline. Optional — a message alone is fine. */\n  title?: ReactNode\n  /** Body text. */\n  children?: ReactNode\n  /** Semantic variant; changes the icon colour and the live-region politeness. */\n  variant?: NotificationVariant\n  /** Optional leading glyph; overrides the variant's default. */\n  icon?: ReactNode\n  /** Which corner of the viewport to anchor to. */\n  corner?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  /** Show a dismiss button. */\n  dismissable?: boolean\n  /** Called when the dismiss button is pressed. */\n  onDismiss?: () => void\n  /** Milliseconds before auto-dismissal; 0 or undefined disables it. */\n  duration?: number\n  /** Stacking order within the corner; larger is further from the edge. */\n  index?: number\n}\n\nconst GLYPHS: Record<NotificationVariant, ReactNode> = {\n  info: (\n    <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n      <circle cx=\"8\" cy=\"8\" r=\"6.5\" fill=\"none\" stroke=\"currentColor\" />\n      <rect x=\"7.25\" y=\"7\" width=\"1.5\" height=\"5\" fill=\"currentColor\" />\n      <rect x=\"7.25\" y=\"4\" width=\"1.5\" height=\"1.5\" fill=\"currentColor\" />\n    </svg>\n  ),\n  success: (\n    <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n      <path\n        d=\"M2.5 8.5 6 12l7.5-8\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  ),\n  warning: (\n    <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n      <path d=\"M8 1.5 15 14.5H1Z\" fill=\"none\" stroke=\"currentColor\" strokeLinejoin=\"round\" />\n      <rect x=\"7.25\" y=\"6\" width=\"1.5\" height=\"4.5\" fill=\"currentColor\" />\n      <rect x=\"7.25\" y=\"11.5\" width=\"1.5\" height=\"1.5\" fill=\"currentColor\" />\n    </svg>\n  ),\n  error: (\n    <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n      <path\n        d=\"M3 3 13 13M13 3 3 13\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  ),\n}\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(function Notification(\n  {\n    className,\n    title,\n    children,\n    variant = 'info',\n    icon,\n    corner = 'bottom-right',\n    dismissable = false,\n    onDismiss,\n    duration,\n    index = 0,\n    style,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    onPointerEnter,\n    onPointerLeave,\n    ...rest\n  },\n  ref,\n) {\n  const [paused, setPaused] = useState(false)\n\n  // An error that vanishes on a timer fails WCAG 2.2.1 for precisely the\n  // message that most needs to be read, so `error` never auto-dismisses.\n  const timeout = variant === 'error' ? 0 : duration ?? 0\n\n  useEffect(() => {\n    if (timeout <= 0 || paused || !onDismiss) return\n    const timer = setTimeout(onDismiss, timeout)\n    return () => clearTimeout(timer)\n  }, [timeout, paused, onDismiss])\n\n  const classes = [\n    'vgui-notification',\n    `vgui-notification--${variant}`,\n    `vgui-notification--corner-${corner}`,\n    'vgui-notification--entering',\n  ]\n  if (className) classes.push(className)\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event)\n    if (event.key === 'Escape' && onDismiss) onDismiss()\n  }\n\n  // `index` is published rather than applied: the queue and the stacking are the\n  // consumer's policy, and the component cannot guess a neighbour's height.\n  const mergedStyle = { ...style, '--vgui-notification-index': index } as CSSProperties\n\n  return (\n    <div\n      ref={ref}\n      // The politeness is semantic: an error interrupts, everything else waits\n      // its turn.\n      role={variant === 'error' ? 'alert' : 'status'}\n      className={classes.join(' ')}\n      style={mergedStyle}\n      onKeyDown={handleKeyDown}\n      onPointerEnter={(event) => {\n        onPointerEnter?.(event)\n        setPaused(true)\n      }}\n      onPointerLeave={(event) => {\n        onPointerLeave?.(event)\n        setPaused(false)\n      }}\n      onFocus={(event) => {\n        onFocus?.(event)\n        setPaused(true)\n      }}\n      onBlur={(event) => {\n        onBlur?.(event)\n        setPaused(false)\n      }}\n      {...rest}\n    >\n      <span className=\"vgui-notification__icon\" aria-hidden=\"true\">\n        {icon ?? GLYPHS[variant]}\n      </span>\n      <div className=\"vgui-notification__content\">\n        {title != null ? <span className=\"vgui-notification__title\">{title}</span> : null}\n        <span className=\"vgui-notification__message\">\n          {/* Colour alone may never be the error indicator (WCAG 1.4.1), so the\n              message leads with a word. A `title` already carries that word, so\n              the prefix is only added when there is no title to do it. */}\n          {variant === 'error' && title == null ? (\n            <strong className=\"vgui-notification__prefix\">Error: </strong>\n          ) : null}\n          {children}\n        </span>\n      </div>\n      {dismissable ? (\n        <button\n          type=\"button\"\n          className=\"vgui-notification__dismiss\"\n          aria-label=\"Dismiss notification\"\n          onClick={onDismiss}\n        >\n          <span aria-hidden=\"true\">×</span>\n        </button>\n      ) : null}\n    </div>\n  )\n})\n\nNotification.displayName = 'Notification'\n"],"mappings":"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"}

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

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

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

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

package/dist/components/Panel/Panel.css

@@ -0,0 +1,56 @@
+/*
+ * Green Steam panel.
+ *
+ * The beveled surface everything else sits on. `--inset` overrides only the
+ * four `border-*-color` longhands rather than redeclaring the shorthand, which
+ * keeps the border widths in one place and makes the inversion auditable.
+ */
+
+.vgui-panel {
+  /* `max-width` is a layout constraint from the CSS port, not a requirement, so
+   * it is routed through a local property an application shell can override. */
+  --vgui-panel-max-width: var(--vgui-window-max-width);
+
+  box-sizing: border-box;
+  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);
+  padding: 10px;
+  max-width: var(--vgui-panel-max-width);
+  margin: 0 0 20px;
+}
+
+.vgui-panel--inset {
+  background-color: var(--vgui-surface-dark);
+  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);
+}
+
+/*
+ * Dropping the border removes the only non-text boundary cue, so `--rounded`
+ * substitutes an outline to stay above WCAG 1.4.11's 3:1 for UI components.
+ */
+.vgui-panel--rounded {
+  border: none;
+  border-radius: 10px;
+  outline: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  outline-offset: -1px;
+}
+
+/* The caption strip. Uppercase + 2px tracking is the theme's signature. */
+.vgui-panel__titlebar {
+  display: block;
+  width: 100%;
+  height: var(--vgui-titlebar-height);
+  line-height: var(--vgui-titlebar-height);
+  margin: 0 0 1em;
+  text-transform: uppercase;
+  letter-spacing: var(--vgui-chrome-tracking);
+  font-size: var(--vgui-font-size-small);
+  font-weight: bold;
+  color: var(--vgui-text-strong);
+}

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

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

package/dist/components/Panel/Panel.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import './Panel.css';
+export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** Uppercase VGUI title bar text. Omit it to render a panel without one. */
+    heading?: ReactNode;
+    /** Darken the body to the VGUI "inset" look, e.g. for read-only content. */
+    inset?: boolean;
+    /** Round the corners and drop the beveled border. */
+    rounded?: boolean;
+    /** Render the caption inside an h{level} so screen readers can navigate between panels. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+export declare const Panel: import("react").ForwardRefExoticComponent<PanelProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,aAAa,CAAA;AAIpB,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,4EAA4E;IAC5E,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2FAA2F;IAC3F,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;CACrC;AAED,eAAO,MAAM,KAAK,uGA2ChB,CAAA"}

package/dist/components/Panel/Panel.js

@@ -0,0 +1,42 @@
+import { createElement, forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Panel.css";
+//#region src/components/Panel/Panel.tsx
+var HEADING_TAGS = [
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+];
+var Panel = forwardRef(function Panel({ className, heading, inset = false, rounded = false, headingLevel, children, ...rest }, ref) {
+	const titlebarId = useId();
+	const classes = ["vgui-panel"];
+	if (inset) classes.push("vgui-panel--inset");
+	if (rounded) classes.push("vgui-panel--rounded");
+	if (className) classes.push(className);
+	const hasHeading = heading != null;
+	const titlebar = hasHeading ? createElement(headingLevel ? HEADING_TAGS[headingLevel - 1] : "div", {
+		id: titlebarId,
+		className: "vgui-panel__titlebar"
+	}, heading) : null;
+	if (hasHeading) return /* @__PURE__ */ jsxs("section", {
+		ref,
+		className: classes.join(" "),
+		"aria-labelledby": titlebarId,
+		...rest,
+		children: [titlebar, children]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classes.join(" "),
+		...rest,
+		children
+	});
+});
+Panel.displayName = "Panel";
+//#endregion
+export { Panel };
+
+//# sourceMappingURL=Panel.js.map

package/dist/components/Panel/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","names":[],"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import { createElement, forwardRef, useId } from 'react'\nimport type { HTMLAttributes, ReactNode } from 'react'\n\nimport './Panel.css'\n\nconst HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Uppercase VGUI title bar text. Omit it to render a panel without one. */\n  heading?: ReactNode\n  /** Darken the body to the VGUI \"inset\" look, e.g. for read-only content. */\n  inset?: boolean\n  /** Round the corners and drop the beveled border. */\n  rounded?: boolean\n  /** Render the caption inside an h{level} so screen readers can navigate between panels. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6\n}\n\nexport const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  { className, heading, inset = false, rounded = false, headingLevel, children, ...rest },\n  ref,\n) {\n  const titlebarId = useId()\n\n  if (import.meta.env.DEV && inset && rounded) {\n    console.warn(\n      'Panel: `inset` and `rounded` cannot be combined — Valve has no rounded-inset panel and the combination has no defined look.',\n    )\n  }\n\n  const classes = ['vgui-panel']\n  if (inset) classes.push('vgui-panel--inset')\n  if (rounded) classes.push('vgui-panel--rounded')\n  if (className) classes.push(className)\n\n  const hasHeading = heading != null\n\n  const titlebar = hasHeading\n    ? createElement(\n        headingLevel ? HEADING_TAGS[headingLevel - 1] : 'div',\n        { id: titlebarId, className: 'vgui-panel__titlebar' },\n        heading,\n      )\n    : null\n\n  // With a caption the panel is a named region, so it is a real <section> wired\n  // to that caption. Without one it is a generic container.\n  if (hasHeading) {\n    return (\n      <section ref={ref} className={classes.join(' ')} aria-labelledby={titlebarId} {...rest}>\n        {titlebar}\n        {children}\n      </section>\n    )\n  }\n\n  return (\n    <div ref={ref} className={classes.join(' ')} {...rest}>\n      {children}\n    </div>\n  )\n})\n\nPanel.displayName = 'Panel'\n"],"mappings":";;;;AAKA,IAAM,eAAe;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;AAAI;AAaxD,IAAa,QAAQ,WAAuC,SAAS,MACnE,EAAE,WAAW,SAAS,QAAQ,OAAO,UAAU,OAAO,cAAc,UAAU,GAAG,QACjF,KACA;CACA,MAAM,aAAa,MAAM;CAQzB,MAAM,UAAU,CAAC,YAAY;CAC7B,IAAI,OAAO,QAAQ,KAAK,mBAAmB;CAC3C,IAAI,SAAS,QAAQ,KAAK,qBAAqB;CAC/C,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,MAAM,aAAa,WAAW;CAE9B,MAAM,WAAW,aACb,cACE,eAAe,aAAa,eAAe,KAAK,OAChD;EAAE,IAAI;EAAY,WAAW;CAAuB,GACpD,OACF,IACA;CAIJ,IAAI,YACF,OACE,qBAAC,WAAD;EAAc;EAAK,WAAW,QAAQ,KAAK,GAAG;EAAG,mBAAiB;EAAY,GAAI;EAAlF,UAAA,CACG,UACA,QACM;;CAIb,OACE,oBAAC,OAAD;EAAU;EAAK,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;EAC9C;CACE,CAAA;AAET,CAAC;AAED,MAAM,cAAc"}

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

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

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

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

package/dist/components/ProgressBar/ProgressBar.css

@@ -0,0 +1,108 @@
+/*
+ * Green Steam progress bar — VGUI `ProgressBar` / `ContinuousProgressBar`
+ * (docs/components/ProgressBar.md).
+ *
+ * The three details that make this read as Valve's bar rather than a generic
+ * one:
+ *
+ *   1. The trough is `--vgui-surface-dark`, not black — the bar is a recess in
+ *      the panel, not a hollowed-out text field.
+ *   2. The fill is a *stripe*: 8px of maize, then 4px of trough, every 12px.
+ *   3. The fill is inset 4px inside the 26px trough, giving the 16px fill.
+ *
+ * `--vgui-progress-fill` and `--vgui-progress-stripe` are declared here rather
+ * than in `tokens.css` because the token layer's own `--vgui-progress-fill`
+ * means the *height* of the fill; see docs/components/ProgressBar.md.
+ */
+
+.vgui-progress {
+  --vgui-progress-stripe: 12px;
+  --vgui-progress-fill: 8px;
+  --vgui-progress-inset: 4px;
+  --vgui-progress-max-width: 480px;
+
+  display: block;
+  width: 100%;
+  max-width: var(--vgui-progress-max-width);
+}
+
+.vgui-progress__trough {
+  box-sizing: border-box;
+  position: relative;
+  height: 26px;
+  padding: var(--vgui-progress-inset);
+  background-color: var(--vgui-surface-dark);
+  /* Inset: the bar is recessed into the panel rather than raised off it. */
+  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);
+}
+
+.vgui-progress__fill {
+  box-sizing: border-box;
+  height: 100%;
+  width: var(--vgui-progress, 0%);
+  /* The boundary cue: the fill's own 2.77:1 against the trough fails WCAG
+   * 1.4.11, so the extent is carried by a 5.40:1 leading edge. */
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-light-strong);
+  background-image: repeating-linear-gradient(
+    to right,
+    var(--vgui-accent-darker) 0 var(--vgui-progress-fill),
+    var(--vgui-surface-dark) var(--vgui-progress-fill) var(--vgui-progress-stripe)
+  );
+  /* Anchors the stripe phase to the bar's left edge so the pattern does not
+   * slide as the value changes. */
+  background-attachment: local;
+  background-repeat: repeat-x;
+  transition: width 120ms linear;
+}
+
+.vgui-progress__text {
+  display: block;
+  margin-top: 2px;
+  font-size: var(--vgui-font-size-small);
+  color: var(--vgui-text);
+  text-align: center;
+}
+
+.vgui-progress--small .vgui-progress__trough {
+  --vgui-progress-inset: 2px;
+
+  height: 16px;
+}
+
+/* Both variants advance on their own, so both animate — and never `width`. */
+.vgui-progress--indeterminate .vgui-progress__fill,
+.vgui-progress--continuous .vgui-progress__fill {
+  width: 100%;
+  background-size: 240px 100%;
+  animation: vgui-progress-sweep 1.2s linear infinite;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes vgui-progress-sweep {
+    from {
+      background-position-x: 0;
+    }
+
+    to {
+      background-position-x: 240px;
+    }
+  }
+}
+
+/* Without motion an indeterminate bar becomes a full static stripe. */
+@media (prefers-reduced-motion: reduce) {
+  .vgui-progress--indeterminate .vgui-progress__fill,
+  .vgui-progress--continuous .vgui-progress__fill {
+    animation: none;
+    opacity: 0.6;
+  }
+}
+
+/* The frame carries the error, not the fill. */
+.vgui-progress--error .vgui-progress__trough {
+  border-top-color: var(--vgui-danger);
+  border-left-color: var(--vgui-danger);
+}

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

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