@vipengele/react-ui 0.0.0 → 0.1.0

package/dist/index.js

@@ -0,0 +1,2947 @@
+import { User, X, ChevronDown, Check, Search } from '@vipengele/react-icons';
+import { createContext, useState, isValidElement, Fragment as Fragment$1, cloneElement, useId, useMemo, useRef, useEffect, useLayoutEffect, useContext, Children, useCallback } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, useClick, FloatingFocusManager, size, useListNavigation, useTypeahead } from '@floating-ui/react';
+import { createPortal, flushSync } from 'react-dom';
+
+// src/Avatar/Avatar.tsx
+
+// src/Avatar/Avatar.stylesheet.ts
+var avatarStylesheet = `
+.vpg-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: var(--vpg-surface-raised);
+  color: var(--vpg-ink-muted);
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1;
+  /* The fallback content is centred text or a glyph; without this, a long initials string
+     would be selectable and could wrap out of the frame. */
+  user-select: none;
+}
+
+.vpg-avatar-circle {
+  border-radius: 50%;
+}
+
+.vpg-avatar-square {
+  border-radius: var(--vpg-radius);
+}
+
+.vpg-avatar-sm {
+  width: var(--vpg-size-xs);
+  height: var(--vpg-size-xs);
+  font-size: var(--vpg-font-size-xs);
+}
+
+.vpg-avatar-md {
+  width: var(--vpg-size-md);
+  height: var(--vpg-size-md);
+  font-size: var(--vpg-font-size-xs);
+}
+
+.vpg-avatar-lg {
+  width: var(--vpg-size-xl);
+  height: var(--vpg-size-xl);
+  font-size: var(--vpg-font-size-sm);
+}
+
+.vpg-avatar-xl {
+  width: var(--vpg-size-2xl);
+  height: var(--vpg-size-2xl);
+  font-size: var(--vpg-font-size-lg);
+}
+
+.vpg-avatar-image {
+  width: 100%;
+  height: 100%;
+  /* \`cover\` rather than \`contain\`: a non-square photo is cropped to the frame instead of
+     letterboxed against the surface colour. */
+  object-fit: cover;
+  display: block;
+}
+
+.vpg-avatar-icon {
+  /* Proportional to the frame, so one rule sizes the glyph across the whole size scale. */
+  width: 60%;
+  height: 60%;
+}
+`;
+function initialsFrom(name) {
+  const words = name.split(/\s+/).filter((word) => word.length > 0);
+  const picked = words.length > 1 ? [...words.slice(0, 1), ...words.slice(-1)] : words.slice(0, 1);
+  return picked.map((word) => word.slice(0, 1)).join("").toUpperCase();
+}
+function Avatar({ src, name, alt, size: size2 = "md", shape = "circle", className, ...rest }) {
+  const [failedSrc, setFailedSrc] = useState(void 0);
+  const classes = ["vpg-avatar", `vpg-avatar-${size2}`, `vpg-avatar-${shape}`, className].filter(Boolean).join(" ");
+  const label = alt ?? name;
+  const showImage = src !== void 0 && src !== failedSrc;
+  const initials = name === void 0 ? "" : initialsFrom(name);
+  const labelling = showImage || label === void 0 ? void 0 : { role: "img", "aria-label": label };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-avatar", precedence: "vpg-avatar", children: avatarStylesheet }),
+    /* @__PURE__ */ jsx("span", { ...rest, ...labelling, className: classes, children: showImage ? /* @__PURE__ */ jsx("img", { src, alt: label ?? "", className: "vpg-avatar-image", onError: () => setFailedSrc(src) }) : initials ? (
+      // The root already announces `label`; repeating the initials would read them out as a
+      // second, meaningless word.
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: initials })
+    ) : /* @__PURE__ */ jsx(User, { className: "vpg-avatar-icon", "aria-hidden": "true" }) })
+  ] });
+}
+
+// src/Spinner/Spinner.stylesheet.ts
+var spinnerStylesheet = `
+@keyframes vpg-spinner-rotate {
+  to { transform: rotate(360deg); }
+}
+
+.vpg-spinner {
+  display: inline-block;
+  flex: none;
+  vertical-align: middle;
+  /* The track's stroke is \`currentColor\`, so this one declaration colours the whole spinner
+     and a caller's \`color\` prop overrides it inline without touching any theme property. */
+  color: var(--vpg-accent);
+  animation: vpg-spinner-rotate 0.7s linear infinite;
+}
+
+.vpg-spinner circle {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 3;
+  stroke-linecap: round;
+  /* Circumference of r=10 is ~62.8; a 44/62.8 dash leaves the gap that makes the rotation
+     readable. Without the gap the ring is closed and spinning it looks static. */
+  stroke-dasharray: 44 62.8;
+}
+
+.vpg-spinner-sm {
+  width: var(--vpg-icon-md);
+  height: var(--vpg-icon-md);
+}
+
+.vpg-spinner-md {
+  width: var(--vpg-icon-lg);
+  height: var(--vpg-icon-lg);
+}
+
+.vpg-spinner-lg {
+  width: var(--vpg-icon-xl);
+  height: var(--vpg-icon-xl);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Slowed, not stopped: a spinner that doesn't move reports nothing about the wait it exists
+     to report. */
+  .vpg-spinner {
+    animation-duration: 2.4s;
+  }
+}
+`;
+var SIZE_CLASS = {
+  sm: "vpg-spinner-sm",
+  md: "vpg-spinner-md",
+  lg: "vpg-spinner-lg"
+};
+function Spinner({ size: size2 = "md", color, label = "Loading", className }) {
+  const classes = ["vpg-spinner", SIZE_CLASS[size2], className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-spinner", precedence: "vpg-spinner", children: spinnerStylesheet }),
+    /* @__PURE__ */ jsx("svg", { className: classes, viewBox: "0 0 24 24", role: "status", "aria-label": label, style: color === void 0 ? void 0 : { color }, children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }) })
+  ] });
+}
+
+// src/Button/Button.stylesheet.ts
+var buttonStylesheet = `
+.vpg-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--vpg-space-2);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--vpg-radius);
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  /* Colour and background come from the variant rules below; every variant animates the same
+     two properties, so the transition belongs here rather than four times over. */
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+
+.vpg-button:focus-visible {
+  /* Offset rather than inset so the ring stays legible against a same-coloured surface. */
+  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);
+  outline-offset: var(--vpg-focus-ring-offset);
+}
+
+.vpg-button:disabled {
+  /* Pointer events stay on: a disabled button that swallows them gives no cursor feedback and
+     no tooltip target. \`cursor\` is what communicates the state. */
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.vpg-button-primary {
+  background-color: var(--vpg-accent);
+  color: var(--vpg-accent-contrast);
+}
+
+.vpg-button-primary:hover:not(:disabled) {
+  background-color: var(--vpg-accent-hover);
+}
+
+.vpg-button-primary:active:not(:disabled) {
+  background-color: var(--vpg-accent-press);
+}
+
+.vpg-button-secondary {
+  background-color: var(--vpg-surface-raised);
+  border-color: var(--vpg-border);
+  color: var(--vpg-ink);
+}
+
+.vpg-button-secondary:hover:not(:disabled) {
+  background-color: var(--vpg-surface-hover);
+  border-color: var(--vpg-border-strong);
+}
+
+.vpg-button-secondary:active:not(:disabled) {
+  background-color: var(--vpg-surface-press);
+}
+
+.vpg-button-ghost {
+  background-color: transparent;
+  color: var(--vpg-ink);
+}
+
+.vpg-button-ghost:hover:not(:disabled) {
+  background-color: var(--vpg-accent-wash);
+}
+
+.vpg-button-ghost:active:not(:disabled) {
+  background-color: var(--vpg-surface-press);
+}
+
+.vpg-button-danger {
+  background-color: var(--vpg-danger);
+  color: var(--vpg-danger-contrast);
+}
+
+.vpg-button-danger:hover:not(:disabled) {
+  background-color: var(--vpg-danger-hover);
+}
+
+.vpg-button-danger:active:not(:disabled) {
+  background-color: var(--vpg-danger-press);
+}
+
+.vpg-button-sm {
+  min-height: var(--vpg-size-sm);
+  padding: 0 var(--vpg-space-3);
+  font-size: var(--vpg-font-size-xs);
+}
+
+.vpg-button-md {
+  min-height: var(--vpg-size-md);
+  padding: 0 var(--vpg-space-4);
+  font-size: var(--vpg-font-size-sm);
+}
+
+.vpg-button-lg {
+  min-height: var(--vpg-size-xl);
+  padding: 0 var(--vpg-space-5);
+  font-size: var(--vpg-font-size-md);
+}
+
+/* Square: the horizontal padding is dropped and the min-height doubles as a width floor, so the
+   button stays square at every size without a second per-size scale. */
+.vpg-button-icon-only {
+  padding: 0;
+  aspect-ratio: 1;
+}
+
+.vpg-button-icon-only.vpg-button-sm {
+  min-width: var(--vpg-size-sm);
+}
+
+.vpg-button-icon-only.vpg-button-md {
+  min-width: var(--vpg-size-md);
+}
+
+.vpg-button-icon-only.vpg-button-lg {
+  min-width: var(--vpg-size-xl);
+}
+
+.vpg-button-icon {
+  flex: none;
+  width: 1em;
+  height: 1em;
+}
+
+/* Keeps the button's accessible name intact while \`loading\` swaps its visible content for a
+   spinner: the label stays in the accessibility tree, but takes up no visual space. */
+.vpg-button-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+`;
+function Button({
+  variant = "primary",
+  size: size2 = "md",
+  loading = false,
+  iconOnly = false,
+  leadingIcon: LeadingIcon,
+  trailingIcon: TrailingIcon,
+  className,
+  disabled = false,
+  children,
+  ...rest
+}) {
+  const classes = ["vpg-button", `vpg-button-${variant}`, `vpg-button-${size2}`, iconOnly ? "vpg-button-icon-only" : void 0, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-button", precedence: "vpg-button", children: buttonStylesheet }),
+    /* @__PURE__ */ jsx("button", { type: "button", ...rest, className: classes, disabled: disabled || loading, "aria-busy": loading || void 0, children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(Spinner, { size: size2, color: "currentColor" }) }),
+      children ? /* @__PURE__ */ jsx("span", { className: "vpg-button-visually-hidden", children }) : null
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      LeadingIcon ? /* @__PURE__ */ jsx(LeadingIcon, { className: "vpg-button-icon" }) : null,
+      children,
+      TrailingIcon ? /* @__PURE__ */ jsx(TrailingIcon, { className: "vpg-button-icon" }) : null
+    ] }) })
+  ] });
+}
+
+// src/ButtonGroup/ButtonGroup.stylesheet.ts
+var buttonGroupStylesheet = `
+.vpg-button-group {
+  display: inline-flex;
+}
+
+.vpg-button-group-horizontal {
+  flex-direction: row;
+}
+
+.vpg-button-group-vertical {
+  flex-direction: column;
+}
+
+/* Adjacent buttons overlap their shared border by one pixel rather than doubling it, and only
+   the outer corners of the group stay rounded. */
+.vpg-button-group-horizontal > .vpg-button {
+  border-radius: 0;
+}
+
+.vpg-button-group-horizontal > .vpg-button:first-child {
+  border-top-left-radius: var(--vpg-radius);
+  border-bottom-left-radius: var(--vpg-radius);
+}
+
+.vpg-button-group-horizontal > .vpg-button:last-child {
+  border-top-right-radius: var(--vpg-radius);
+  border-bottom-right-radius: var(--vpg-radius);
+}
+
+.vpg-button-group-horizontal > .vpg-button + .vpg-button {
+  margin-left: -1px;
+}
+
+.vpg-button-group-vertical > .vpg-button {
+  border-radius: 0;
+}
+
+.vpg-button-group-vertical > .vpg-button:first-child {
+  border-top-left-radius: var(--vpg-radius);
+  border-top-right-radius: var(--vpg-radius);
+}
+
+.vpg-button-group-vertical > .vpg-button:last-child {
+  border-bottom-left-radius: var(--vpg-radius);
+  border-bottom-right-radius: var(--vpg-radius);
+}
+
+.vpg-button-group-vertical > .vpg-button + .vpg-button {
+  margin-top: -1px;
+}
+
+/* A focused or hovered button's border should read as whole rather than being clipped under
+   its neighbour's overlap. */
+.vpg-button-group > .vpg-button:focus-visible,
+.vpg-button-group > .vpg-button:hover {
+  position: relative;
+  z-index: 1;
+}
+`;
+function ButtonGroup({ orientation = "horizontal", className, children, ...rest }) {
+  const classes = ["vpg-button-group", `vpg-button-group-${orientation}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-button-group", precedence: "vpg-button-group", children: buttonGroupStylesheet }),
+    /* @__PURE__ */ jsx("div", { ...rest, role: "group", className: classes, children })
+  ] });
+}
+
+// src/Card/Card.stylesheet.ts
+var cardStylesheet = `
+.vpg-card {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: var(--vpg-surface-raised);
+  border: 1px solid var(--vpg-border);
+  border-radius: var(--vpg-radius);
+  color: var(--vpg-ink);
+}
+
+.vpg-card-interactive {
+  cursor: pointer;
+  text-align: left;
+}
+
+.vpg-card-interactive:hover {
+  background-color: var(--vpg-surface-hover);
+}
+
+.vpg-card-interactive:active {
+  background-color: var(--vpg-surface-press);
+}
+
+.vpg-card-interactive:focus-visible {
+  /* Offset rather than inset so the ring stays legible against a same-coloured surface. */
+  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);
+  outline-offset: var(--vpg-focus-ring-offset);
+}
+
+.vpg-card-header {
+  order: 1;
+  padding: 1rem 1rem 0;
+}
+
+.vpg-card-content {
+  order: 2;
+  padding: 1rem;
+}
+
+.vpg-card-footer {
+  order: 3;
+  padding: 0 1rem 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+`;
+function CardHeader({ className, children, ...rest }) {
+  const classes = ["vpg-card-header", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...rest, className: classes, children });
+}
+function CardContent({ className, children, ...rest }) {
+  const classes = ["vpg-card-content", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...rest, className: classes, children });
+}
+function CardFooter({ className, children, ...rest }) {
+  const classes = ["vpg-card-footer", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...rest, className: classes, children });
+}
+function validateChildren(children) {
+  let headerCount = 0;
+  let contentCount = 0;
+  let footerCount = 0;
+  Children.forEach(children, (child) => {
+    if (child === null || child === void 0 || typeof child === "boolean") {
+      return;
+    }
+    if (!isValidElement(child)) {
+      throw new Error("Card only accepts Card.Header, Card.Content, and Card.Footer as children.");
+    }
+    if (child.type === CardHeader) {
+      headerCount += 1;
+      if (headerCount > 1) {
+        throw new Error("Card accepts at most one Card.Header child.");
+      }
+    } else if (child.type === CardContent) {
+      contentCount += 1;
+      if (contentCount > 1) {
+        throw new Error("Card accepts at most one Card.Content child.");
+      }
+    } else if (child.type === CardFooter) {
+      footerCount += 1;
+      if (footerCount > 1) {
+        throw new Error("Card accepts at most one Card.Footer child.");
+      }
+    } else {
+      throw new Error("Card only accepts Card.Header, Card.Content, and Card.Footer as children.");
+    }
+  });
+  if (contentCount === 0) {
+    throw new Error("Card requires a Card.Content child.");
+  }
+}
+var INTERACTIVE_DESCENDANT_SELECTOR = "button, a[href], input, select, textarea, [role='button']";
+function isInteractiveDescendant(target, root) {
+  const closest = target.closest(INTERACTIVE_DESCENDANT_SELECTOR);
+  return closest !== null && closest !== root;
+}
+function CardImpl({ className, children, onClick, onKeyDown, ...rest }) {
+  validateChildren(children);
+  const interactive = onClick !== void 0;
+  const classes = ["vpg-card", interactive ? "vpg-card-interactive" : "", className].filter(Boolean).join(" ");
+  function handleClick(event) {
+    if (isInteractiveDescendant(event.target, event.currentTarget)) {
+      return;
+    }
+    onClick?.(event);
+  }
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (event.key !== "Enter" && event.key !== " ") {
+      return;
+    }
+    if (isInteractiveDescendant(event.target, event.currentTarget)) {
+      return;
+    }
+    event.preventDefault();
+    event.currentTarget.click();
+  }
+  const interactiveProps = interactive ? { role: "button", tabIndex: 0, onClick: handleClick, onKeyDown: handleKeyDown } : { onKeyDown };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-card", precedence: "vpg-card", children: cardStylesheet }),
+    /* @__PURE__ */ jsx("div", { ...rest, ...interactiveProps, className: classes, children })
+  ] });
+}
+var Card = /* @__PURE__ */ Object.assign(CardImpl, {
+  Header: CardHeader,
+  Content: CardContent,
+  Footer: CardFooter
+});
+
+// src/FieldShell/FieldShell.stylesheet.ts
+var fieldShellStylesheet = `
+.vpg-field-shell {
+  display: flex;
+  align-items: center;
+  gap: var(--vpg-space-2);
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--vpg-size-md);
+  padding: 0 var(--vpg-space-3);
+  background-color: var(--vpg-surface);
+  border: 1px solid var(--vpg-border-strong);
+  border-radius: var(--vpg-radius-sm);
+  color: var(--vpg-ink);
+  transition: border-color var(--vpg-duration-fast) var(--vpg-ease-standard),
+    box-shadow var(--vpg-duration-fast) var(--vpg-ease-standard),
+    opacity var(--vpg-duration-fast) var(--vpg-ease-standard),
+    background-color var(--vpg-duration-fast) var(--vpg-ease-standard);
+}
+
+/* The centre is whatever the caller passes as children \u2014 one control, or a pair of siblings such
+   as a chip row beside a trigger. \`min-width: 0\` is what stops a flex item propagating its
+   content's intrinsic width, so a wide centre shrinks inside the field rather than growing the
+   field past what contains it. */
+.vpg-field-shell > *:not(.vpg-field-shell-leading, .vpg-field-shell-trailing) {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+/* The centre's free space goes to its last element, and only to that one. A centre of one control
+   is that element, so a lone \`<input>\` fills the field. A centre of several \u2014 a chip row, then a
+   trigger \u2014 sizes every earlier element to its content and leaves the remainder to the trigger,
+   where the caret goes; splitting the space evenly instead would stretch the chip row to half the
+   field whatever it holds.
+
+   \`of\` counts among the centre elements only, so the rule finds the last one whether or not a
+   trailing slot follows it. */
+.vpg-field-shell > *:nth-last-child(1 of :not(.vpg-field-shell-leading, .vpg-field-shell-trailing)) {
+  flex: 1;
+}
+
+.vpg-field-shell-leading,
+.vpg-field-shell-trailing {
+  display: flex;
+  align-items: center;
+  flex: none;
+  color: var(--vpg-ink-muted);
+}
+
+.vpg-field-shell:has(> :focus-visible) {
+  border-color: var(--vpg-accent);
+  box-shadow: 0 0 0 var(--vpg-focus-ring-width) var(--vpg-accent-ring);
+}
+
+/* The field whose control has its listbox open takes the accent border, so a pointer-opened
+   combobox \u2014 which \`:focus-visible\` does not match \u2014 still reads as the field the listbox belongs
+   to. Border only: the ring is keyboard focus's, and an open listbox does not claim it. The
+   \`:not()\` hands an invalid field to the danger border outright, so which of the two wins never
+   depends on the order these rules sit in or on the order stylesheets are injected. */
+.vpg-field-shell:has(> [aria-expanded="true"]):not(:has(> [aria-invalid="true"])) {
+  border-color: var(--vpg-accent);
+}
+
+.vpg-field-shell:has(> [aria-invalid="true"]) {
+  border-color: var(--vpg-danger);
+}
+
+.vpg-field-shell:has(> [aria-invalid="true"]):has(> :focus-visible) {
+  box-shadow: 0 0 0 var(--vpg-focus-ring-width) var(--vpg-danger-ring);
+}
+
+.vpg-field-shell:has(> :disabled) {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.vpg-field-shell:hover:not(:has(> :disabled)) {
+  background-color: var(--vpg-surface-hover);
+}
+`;
+function FieldShell({ leading, trailing, className, children, ref, ...rest }) {
+  const classes = ["vpg-field-shell", className].filter(Boolean).join(" ");
+  const hasLeading = leading !== void 0 && leading !== null && leading !== "" && leading !== false;
+  const hasTrailing = trailing !== void 0 && trailing !== null && trailing !== "" && trailing !== false;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-field-shell", precedence: "vpg-field-shell", children: fieldShellStylesheet }),
+    /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      hasLeading ? /* @__PURE__ */ jsx("span", { className: "vpg-field-shell-leading", children: leading }) : null,
+      children,
+      hasTrailing ? /* @__PURE__ */ jsx("span", { className: "vpg-field-shell-trailing", children: trailing }) : null
+    ] })
+  ] });
+}
+
+// src/internal/listbox.stylesheet.ts
+var listboxStylesheet = `
+.vpg-listbox {
+  position: absolute;
+  z-index: var(--vpg-layer-listbox);
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--vpg-space-1);
+  /* The size of a container, not steps of anything: no scale carries a measurement this large,
+     and a \`--vpg-*\` name the theme never assigns advertises a theming hook that doesn't
+     exist. Width is floating-ui's inline style, matching the field exactly \u2014 this rule must
+     never impose a floor wider than a narrow field, or the panel outgrows what it's anchored to. */
+  max-height: 16rem;
+  overflow-y: auto;
+  background-color: var(--vpg-surface-raised);
+  border: 1px solid var(--vpg-border);
+  border-radius: var(--vpg-radius);
+  box-shadow: var(--vpg-shadow-med);
+  color: var(--vpg-ink);
+  font-family: var(--vpg-font-sans);
+  font-size: var(--vpg-font-size-sm);
+  line-height: 1.5;
+}
+
+.vpg-listbox:focus-visible {
+  /* The listbox takes DOM focus from nothing \u2014 the highlight is virtual \u2014 but it is still a
+     focus target for a stray programmatic focus() call, and an invisible one reads as broken. */
+  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);
+  outline-offset: var(--vpg-focus-ring-offset);
+}
+
+/* A search row turns the listbox into a panel holding two parts, and the floating element is then
+   the panel rather than the listbox: it draws the surface \`.vpg-listbox\` draws for a listbox
+   that is the floating element itself, and holds the search row still while the options scroll
+   under it. \`overflow: hidden\` keeps the scrolling options inside the panel's rounded corners. */
+.vpg-listbox-panel {
+  position: absolute;
+  z-index: var(--vpg-layer-listbox);
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: var(--vpg-surface-raised);
+  border: 1px solid var(--vpg-border);
+  border-radius: var(--vpg-radius);
+  box-shadow: var(--vpg-shadow-med);
+  color: var(--vpg-ink);
+  font-family: var(--vpg-font-sans);
+  font-size: var(--vpg-font-size-sm);
+  line-height: 1.5;
+}
+
+/* The scrolling half of the panel, at the same height \`.vpg-listbox\` stands at \u2014 the size of
+   a container, not a step of anything, so no \`--vpg-*\` name stands for it. The search row
+   above it is outside this box and so never scrolls out of reach. */
+.vpg-listbox-options {
+  padding: var(--vpg-space-1);
+  max-height: 16rem;
+  overflow-y: auto;
+}
+
+/* The panel's first row: the magnifier, then the input. Its lower border is the divider between
+   the search and the options under it. The row stands at the same height as an option, so the
+   panel's first two rows read as one rhythm. */
+.vpg-listbox-search {
+  display: flex;
+  align-items: center;
+  gap: var(--vpg-space-2);
+  box-sizing: border-box;
+  min-height: var(--vpg-size-md);
+  padding-inline: var(--vpg-space-3);
+  border-bottom: 1px solid var(--vpg-border);
+}
+
+.vpg-listbox-search-icon {
+  flex: none;
+  width: var(--vpg-icon-md);
+  height: var(--vpg-icon-md);
+  color: var(--vpg-ink-muted);
+}
+
+/* The input carries none of a field's chrome: the panel's own border is the box around it, and a
+   border or focus ring here would draw a second box inside that one. The panel opens with the
+   caret already in this input, which is what marks it as the focused element. */
+.vpg-listbox-search-input {
+  flex: 1;
+  min-width: 0;
+  appearance: none;
+  padding: 0;
+  background: none;
+  border: none;
+  outline: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.vpg-listbox-search-input::placeholder {
+  color: var(--vpg-ink-subtle);
+}
+
+/* Not an option: it carries no role, is never highlighted and cannot be selected \u2014 it exists so
+   a query matching nothing says so instead of leaving the panel blank. Its padding is an option's
+   block padding, so the message stands as tall as the option it stands in for. */
+.vpg-listbox-empty {
+  padding: var(--vpg-space-2);
+  color: var(--vpg-ink-subtle);
+}
+
+/* A heading, never a row the keyboard can reach: it is the group's name, and the options under it
+   keep the indices they hold with no group around them. Its inline padding is an option's, so the
+   heading and the labels beneath it share one left edge, and it takes the type scale's smallest
+   step to read as a label over the rows rather than as one of them. */
+.vpg-listbox-group-label {
+  padding-block: var(--vpg-space-1);
+  padding-inline: var(--vpg-space-3);
+  color: var(--vpg-ink-subtle);
+  font-size: var(--vpg-font-size-xs);
+  font-weight: var(--vpg-font-weight-medium);
+}
+
+/* The line between one group and the next, drawn by the group that follows another. A rule rather
+   than a border on the group itself: the line spans the padding the options sit inside, so it
+   reaches the full width of the list rather than stopping at an option's edge. */
+.vpg-listbox-separator {
+  height: 1px;
+  margin-block: var(--vpg-space-1);
+  margin-inline: calc(var(--vpg-space-1) * -1);
+  background-color: var(--vpg-border);
+}
+
+.vpg-listbox-option {
+  display: flex;
+  align-items: center;
+  gap: var(--vpg-space-2);
+  box-sizing: border-box;
+  /* A row's height is a token read, not the sum of a padding and a line-height: min-height
+     plus centred content holds it at the control scale's md step regardless of what the label's
+     font metrics or an icon's box happen to add up to. */
+  min-height: var(--vpg-size-md);
+  padding-inline: var(--vpg-space-3);
+  border-radius: var(--vpg-radius-sm);
+  cursor: pointer;
+  transition: background-color var(--vpg-duration-fast) var(--vpg-ease-standard);
+  /* The highlight moves with the keyboard, not with the pointer, so an option must never look
+     selectable-by-drag. */
+  user-select: none;
+}
+
+/* The highlight is virtual \u2014 the option never takes DOM focus, so :focus/:hover cannot express
+   it and the component sets this attribute from its own highlighted index instead. Highlight
+   (background) and selection (a checkbox fill or a trailing check, never colour) read on
+   different visual channels, so a row can carry both at once without either one washing out the
+   other. */
+.vpg-listbox-option[data-highlighted] {
+  background-color: var(--vpg-surface-hover);
+}
+
+.vpg-listbox-option[aria-disabled="true"] {
+  color: var(--vpg-ink-subtle);
+  cursor: default;
+}
+
+.vpg-listbox-option-icon {
+  flex: none;
+  width: var(--vpg-icon-md);
+  height: var(--vpg-icon-md);
+  color: var(--vpg-ink-muted);
+}
+
+/* A single-select row's only selection signal: colour alone would fail WCAG 1.4.1, and
+   \`aria-selected\` reaches assistive technology but not a sighted reader. Trailing edge matches
+   the shadcn/Radix select convention. A multi-select row already carries the checkbox as its
+   one encoding, so this mark never renders alongside it \u2014 \`Dropdown\` renders it only for a
+   selected option outside \`multiple\`. */
+.vpg-listbox-option-check {
+  flex: none;
+  width: var(--vpg-icon-md);
+  height: var(--vpg-icon-md);
+  color: var(--vpg-accent);
+}
+
+.vpg-listbox-option-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A drawn box rather than an <input type="checkbox">: the option already carries
+   role="option" + aria-selected, and a real checkbox inside it would be an interactive
+   element nested in one. */
+.vpg-listbox-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  box-sizing: border-box;
+  width: 1.125rem;
+  height: 1.125rem;
+  border: 1px solid var(--vpg-border-strong);
+  border-radius: var(--vpg-radius-sm);
+  color: var(--vpg-accent-contrast);
+  transition: background-color var(--vpg-duration-fast) var(--vpg-ease-standard),
+    border-color var(--vpg-duration-fast) var(--vpg-ease-standard);
+}
+
+.vpg-listbox-checkbox[data-checked] {
+  background-color: var(--vpg-accent);
+  border-color: var(--vpg-accent);
+}
+
+/* The row of chips a multi-select field shows beside its control. It is a direct child of the
+   field's shell, sitting before the control, within the width the shell leaves it. Wrapping is
+   the shape it takes when the field asks for more than one row: each further line grows the field
+   downwards rather than overflowing it, because the shell's height is a floor.
+
+   One row of chips stands the field at the control step, the same height it has with no chips,
+   so selecting the first option never makes the field jump. The field's content box is the
+   control step less its border \u2014 30px at the default scale \u2014 and a chip is 24px, leaving 3px on
+   each side. The spacing scale's smallest step is 4px, which would grow the field to 34px, so the
+   row pads each edge by half of it: 2px, which a single row fits inside and the shell centres, and
+   which keeps the top and bottom rows of a wrapped field clear of its border. The rows themselves
+   are a whole step apart. */
+.vpg-listbox-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--vpg-space-1);
+  padding-block: calc(var(--vpg-space-1) / 2);
+}
+
+/* One row, with the chips that do not fit measured out of it and an indicator standing for them.
+   Which chips those are is the component's read, not a rule here: the attribute says the row
+   collapses, and each chip the read excluded carries \`data-hidden\`.
+
+   \`nowrap\` is what holds the field at the control step in the one case the read cannot resolve:
+   a chip too wide to share the row with the indicator still shows, and wrapping would put the two
+   on separate rows rather than shrinking the chip to the room the indicator leaves. */
+.vpg-listbox-chips[data-collapsing] {
+  flex-wrap: nowrap;
+}
+
+.vpg-listbox-chips[data-collapsing] > [data-hidden] {
+  display: none;
+}
+
+/* The read that decides which chips fit needs every one of them on the row at its own width: a
+   hidden chip has no width to weigh, a shrunk one reports the row's constraint rather than its
+   label, and the row itself shrinks to whatever is left in it once some are hidden. This
+   attribute is set and removed inside one synchronous measurement, so the state it describes
+   never paints. */
+.vpg-listbox-chips[data-collapsing][data-measuring] > * {
+  display: inline-flex;
+  flex: none;
+}
+
+/* A chip's height is a token read, not the sum of a padding and a line-height: a fixed height
+   plus centred content holds it at the control scale's xs step regardless of the label's font
+   metrics. Its end carries no padding, so the remove button's round hover fill sits concentric
+   with the chip's own rounded end. */
+.vpg-listbox-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--vpg-space-1);
+  box-sizing: border-box;
+  height: var(--vpg-size-xs);
+  padding-inline: var(--vpg-space-2) 0;
+  background-color: var(--vpg-accent-wash);
+  border: 1px solid transparent;
+  border-radius: var(--vpg-radius-full);
+  color: var(--vpg-ink);
+  font-family: var(--vpg-font-sans);
+  font-size: var(--vpg-font-size-sm);
+  line-height: 1.5;
+}
+
+/* A chip never outgrows the row that holds it: a label too long for the field is cut short
+   rather than pushing the chip, and the field with it, past the field's border.
+
+   \`min-width\` is what lets it be cut short at all. A flex item's automatic minimum size is its
+   content's, which for a chip is its label's longest word \u2014 so a chip holding one long word takes
+   the whole row and pushes the overflow indicator out past the field's border. The label carries
+   the ellipsis that keeps the shorter box readable. */
+.vpg-listbox-chips > .vpg-listbox-chip {
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* The indicator standing for the chips the row has no width for. A chip's box without a chip's
+   remove button: the selection it covers is unpicked in the listbox, since the chip carrying it
+   is not on screen to remove it from \u2014 so it pads both ends alike and keeps its own width, which
+   is the width the read reserves before any chip is counted onto the row. */
+.vpg-listbox-overflow-chip {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  box-sizing: border-box;
+  height: var(--vpg-size-xs);
+  padding-inline: var(--vpg-space-2);
+  background-color: var(--vpg-accent-wash);
+  border: 1px solid transparent;
+  border-radius: var(--vpg-radius-full);
+  color: var(--vpg-ink-muted);
+  font-family: var(--vpg-font-sans);
+  font-size: var(--vpg-font-size-sm);
+  line-height: 1.5;
+  white-space: nowrap;
+}
+
+.vpg-listbox-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A square as tall as the chip's inside: the glyph plus a spacing step on every side, which at the
+   default scale is 22px \u2014 the whole of the chip's height inside its border, so the target is as
+   large as a 24px chip allows. */
+.vpg-listbox-chip-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  appearance: none;
+  padding: var(--vpg-space-1);
+  background: none;
+  border: none;
+  border-radius: var(--vpg-radius-full);
+  color: var(--vpg-ink-muted);
+  cursor: pointer;
+  transition: background-color var(--vpg-duration-fast) var(--vpg-ease-standard),
+    color var(--vpg-duration-fast) var(--vpg-ease-standard);
+}
+
+.vpg-listbox-chip-remove-icon {
+  flex: none;
+  width: var(--vpg-icon-sm);
+  height: var(--vpg-icon-sm);
+}
+
+.vpg-listbox-chip-remove:hover {
+  background-color: var(--vpg-accent-wash);
+  color: var(--vpg-ink);
+}
+
+.vpg-listbox-chip-remove:focus-visible {
+  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);
+  outline-offset: var(--vpg-focus-ring-offset);
+}
+`;
+var LISTBOX_OFFSET = 4;
+var VIEWPORT_PADDING = 12;
+function withoutActiveDescendant(props) {
+  const rest = { ...props };
+  delete rest["aria-activedescendant"];
+  return rest;
+}
+function useListboxKeyboard({
+  listRef,
+  activeIndex,
+  onNavigate,
+  disabledIndices,
+  typeahead,
+  role,
+  search = false,
+  open,
+  onOpenChange
+}) {
+  const { refs, floatingStyles, context, elements } = useFloating({
+    open,
+    onOpenChange: (next) => {
+      onOpenChange(next);
+    },
+    placement: "bottom-start",
+    // The listbox's left edge and width are the field's wherever the field is, flush against the
+    // viewport's edge or partly scrolled past it. At `bottom-start` with equal widths the listbox
+    // overflows horizontally exactly where the field does, so nothing slides it sideways: a
+    // `shift` would only pull it off the field's edge. `flip` alone moves it, from below the field
+    // to above it. `size` runs last so it reads the placement `flip` settled on. Its width is the
+    // field's border box, written straight onto the element because floating-ui computes it
+    // outside render; `autoUpdate` observes the field's size, so a field that grows as its chips
+    // wrap re-runs the whole chain.
+    middleware: [
+      offset(LISTBOX_OFFSET),
+      flip({ padding: VIEWPORT_PADDING }),
+      size({
+        apply({ rects, elements: { floating } }) {
+          floating.style.width = `${rects.reference.width}px`;
+        }
+      })
+    ],
+    whileElementsMounted: autoUpdate
+  });
+  const fieldElementRef = useRef(null);
+  const fieldRef = useCallback(
+    (node) => {
+      fieldElementRef.current = node;
+      refs.setPositionReference(node);
+    },
+    [refs]
+  );
+  function onFieldMouseDown(event) {
+    const reference = refs.domReference.current;
+    const target = event.target;
+    if (reference.contains(target)) {
+      return;
+    }
+    event.preventDefault();
+    if (event.button !== 0 || target.closest("button") !== null) {
+      return;
+    }
+    reference.focus();
+    onOpenChange(true);
+  }
+  const disabledIndicesRef = useRef(disabledIndices);
+  disabledIndicesRef.current = disabledIndices;
+  const labelsRef = useMemo(
+    () => ({
+      get current() {
+        return listRef.current.map(
+          (item, index) => item !== null && !disabledIndicesRef.current.includes(index) ? item.textContent : null
+        );
+      }
+    }),
+    [listRef]
+  );
+  const click = useClick(context, { keyboardHandlers: false });
+  const dismiss = useDismiss(context, {
+    outsidePress: (event) => {
+      const field = fieldElementRef.current;
+      return field === null || !field.contains(event.target);
+    },
+    // In `search` mode the press that closes the listbox is the `click`, not the `pointerdown`
+    // that starts it. Real focus is inside the floating element, and `FloatingFocusManager`
+    // returns it to the reference element as the floating element unmounts; closing on
+    // `pointerdown` puts that return before `mousedown`'s own default action, which then blanks
+    // focus to `<body>` when the press landed on something unfocusable. Closing on `click`
+    // leaves the browser's focus move first and the return last. Where the press landed on
+    // something focusable, the manager sees focus already outside and leaves it there.
+    outsidePressEvent: search ? "click" : "pointerdown"
+  });
+  const listboxRole = useRole(context, { role });
+  const listNavigation = useListNavigation(context, {
+    listRef,
+    activeIndex,
+    onNavigate,
+    disabledIndices,
+    virtual: true,
+    loop: true
+  });
+  const typeaheadInteraction = useTypeahead(context, {
+    listRef: labelsRef,
+    activeIndex,
+    onMatch: onNavigate,
+    enabled: typeahead,
+    ignoreKeys: [" "]
+  });
+  const {
+    getReferenceProps: getMergedReferenceProps,
+    getFloatingProps: getMergedFloatingProps,
+    getItemProps
+  } = useInteractions([click, dismiss, listboxRole, listNavigation, typeaheadInteraction]);
+  const searchInteractions = useInteractions([listboxRole, listNavigation]);
+  const getSearchProps = useCallback(
+    (userProps) => searchInteractions.getReferenceProps({ "aria-autocomplete": "list", ...userProps }),
+    [searchInteractions]
+  );
+  const getReferenceProps = useCallback(
+    (userProps) => search ? withoutActiveDescendant(getMergedReferenceProps(userProps)) : getMergedReferenceProps(userProps),
+    [getMergedReferenceProps, search]
+  );
+  const getFloatingProps = useCallback(
+    (userProps) => search ? withoutActiveDescendant(getMergedFloatingProps(userProps)) : getMergedFloatingProps(userProps),
+    [getMergedFloatingProps, search]
+  );
+  const themeRoot = elements.domReference?.closest(".vpg-root") ?? null;
+  return {
+    refs,
+    floatingStyles,
+    context,
+    elements,
+    themeRoot,
+    fieldRef,
+    onFieldMouseDown,
+    getReferenceProps,
+    getFloatingProps,
+    getItemProps,
+    getSearchProps
+  };
+}
+
+// src/Tooltip/Tooltip.stylesheet.ts
+var tooltipStylesheet = `
+.vpg-tooltip-trigger {
+  /* Inline-flex rather than inline: the wrapper exists only to carry the ref and the hover/focus
+     handlers, and must not add a baseline gap under the element it wraps. */
+  display: inline-flex;
+}
+
+.vpg-tooltip {
+  position: absolute;
+  z-index: var(--vpg-layer-tooltip);
+  box-sizing: border-box;
+  /* The size of a container, not a step of anything: no scale carries a measurement this large,
+     and a \`--vpg-*\` name the theme never assigns advertises a theming hook that doesn't
+     exist. */
+  max-width: 16rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--vpg-radius-sm);
+  background-color: var(--vpg-ink);
+  color: var(--vpg-surface);
+  font-family: var(--vpg-font-sans);
+  font-size: var(--vpg-font-size-xs);
+  line-height: 1.4;
+  /* A tooltip that could be hovered would sit between the pointer and the trigger and flicker
+     the trigger's own hover state off. */
+  pointer-events: none;
+  /* Long content wraps against max-width instead of stretching off-screen; an explicit newline
+     in the content is still honoured. */
+  white-space: pre-line;
+  overflow-wrap: break-word;
+}
+`;
+var TOOLTIP_OFFSET = 8;
+var VIEWPORT_PADDING2 = 8;
+function Tooltip({ content, children, placement = "top", disabled = false, className }) {
+  const [requestedOpen, setRequestedOpen] = useState(false);
+  const enabled = !disabled;
+  const open = requestedOpen && enabled;
+  const { refs, floatingStyles, context, elements } = useFloating({
+    open,
+    onOpenChange: setRequestedOpen,
+    placement,
+    middleware: [offset(TOOLTIP_OFFSET), flip(), shift({ padding: VIEWPORT_PADDING2 })],
+    whileElementsMounted: autoUpdate
+  });
+  const hover = useHover(context, { enabled });
+  const focus = useFocus(context, { enabled });
+  const dismiss = useDismiss(context, { enabled, referencePress: false });
+  const tooltipRole = useRole(context, { enabled, role: "tooltip" });
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, tooltipRole]);
+  const { "aria-describedby": describedBy, ...referenceProps } = getReferenceProps();
+  const hasSingleElementChild = isValidElement(children) && children.type !== Fragment$1;
+  const trigger = hasSingleElementChild ? cloneElement(children, { "aria-describedby": describedBy }) : children;
+  const bubble = open ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: refs.setFloating,
+      className: ["vpg-tooltip", className].filter(Boolean).join(" "),
+      style: floatingStyles,
+      ...getFloatingProps(),
+      children: content
+    }
+  ) : null;
+  const themeRoot = elements.domReference?.closest(".vpg-root") ?? null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-tooltip", precedence: "vpg-tooltip", children: tooltipStylesheet }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: refs.setReference,
+        className: "vpg-tooltip-trigger",
+        "aria-describedby": hasSingleElementChild ? void 0 : describedBy,
+        ...referenceProps,
+        children: trigger
+      }
+    ),
+    bubble !== null && themeRoot !== null ? createPortal(bubble, themeRoot) : bubble
+  ] });
+}
+
+// src/Dropdown/Dropdown.stylesheet.ts
+var dropdownStylesheet = `
+/* A block box the width of its container, like \`TextField\`: the field never widens as options
+   are selected and never narrows below its container either. \`box-sizing: border-box\` keeps
+   that width inclusive of the field's own border and padding.
+
+   \`min-width: 0\` is what makes that hold in a flex or grid container. The initial \`auto\`
+   resolves there to the automatic minimum size \u2014 the root's min-content, which a row of chips
+   and a long trigger label make wide \u2014 and that floor outranks \`width: 100%\`, so the field
+   pushes its track open and overflows whatever width the container was given. */
+.vpg-dropdown {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  color: var(--vpg-ink);
+  font-family: var(--vpg-font-sans);
+}
+
+/* \`align-self: stretch\` gives the trigger the field's full height, so a click anywhere across it
+   opens the listbox; a percentage height would collapse, because the shell's height is a floor
+   rather than a definite length. */
+.vpg-dropdown-trigger {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  gap: var(--vpg-space-2);
+  outline: none;
+  color: inherit;
+  font-size: var(--vpg-font-size-sm);
+  line-height: 1.5;
+  cursor: pointer;
+  user-select: none;
+}
+
+/* The shell lets every centre element shrink to nothing, which beside a row of chips would leave
+   the trigger \u2014 the only thing that opens the listbox \u2014 with no width at all. A square of the
+   field's own height keeps it a target and keeps room for the chevron. Qualified by both classes
+   the shell element carries, so it outranks the shell's own \`min-width: 0\` whichever stylesheet
+   the page injects first. */
+.vpg-field-shell.vpg-dropdown-control > .vpg-dropdown-trigger {
+  min-width: var(--vpg-size-md);
+}
+
+.vpg-dropdown-trigger-icon,
+.vpg-dropdown-chevron {
+  flex: none;
+}
+
+/* Matches \`.vpg-listbox-option-icon\`: the same icon at the same size in the trigger as in
+   the list it came from, rather than lucide's own 24px default. */
+.vpg-dropdown-trigger-icon {
+  width: var(--vpg-icon-md);
+  height: var(--vpg-icon-md);
+}
+
+/* \`margin-left: auto\` is what sets the chevron against the field's trailing edge. A \`multiple\`
+   trigger holding a selection contains the chevron and nothing else, so no sibling claims the
+   trigger's free space and the chevron would otherwise sit at its leading edge, floating
+   mid-field. The margin is inert wherever a \`flex: 1\` sibling has already absorbed that space \u2014
+   single-select's value and either mode's placeholder \u2014 since there is none left for it to take. */
+.vpg-dropdown-chevron {
+  margin-left: auto;
+  color: var(--vpg-ink-muted);
+}
+
+/* Takes the trigger's free space, so the chevron's auto margin resolves to nothing and the label
+   keeps the field's leading edge. */
+.vpg-dropdown-value {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vpg-dropdown-placeholder {
+  flex: 1;
+  color: var(--vpg-ink-subtle);
+}
+
+/* The clear button stands in the shell's trailing slot, a subtree the shell's \`> \` state rules do
+   not reach into \u2014 so its focus ring is its own, and the field takes none from it. It carries no
+   \`opacity\` either: the shell already dims for a disabled control, and a second fade here reads
+   as more faded than the field around it. */
+.vpg-dropdown-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  appearance: none;
+  padding: var(--vpg-space-1);
+  background: none;
+  border: none;
+  border-radius: var(--vpg-radius-full);
+  color: var(--vpg-ink-muted);
+  cursor: pointer;
+  transition: background-color var(--vpg-duration-fast) var(--vpg-ease-standard),
+    color var(--vpg-duration-fast) var(--vpg-ease-standard);
+}
+
+.vpg-dropdown-clear-icon {
+  flex: none;
+  width: var(--vpg-icon-sm);
+  height: var(--vpg-icon-sm);
+}
+
+.vpg-dropdown-clear:hover {
+  background-color: var(--vpg-accent-wash);
+  color: var(--vpg-ink);
+}
+
+.vpg-dropdown-clear:focus-visible {
+  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);
+  outline-offset: var(--vpg-focus-ring-offset);
+}
+
+/* Names every selection to a screen reader while taking no space in the field, which is the only
+   route to the chips the row has no width for: those are out of the flow altogether. */
+.vpg-dropdown-selection-description {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+`;
+var DropdownContext = createContext(null);
+function useDropdownContext(component) {
+  const context = useContext(DropdownContext);
+  if (context === null) {
+    throw new Error(`${component} must be rendered inside <Dropdown>.`);
+  }
+  return context;
+}
+function DropdownOption({ value, label, icon: OptionIcon, disabled = false }) {
+  const { multiple, optionIndices, selectedValues, highlightedValue, select, registerOption, getItemProps } = useDropdownContext("Dropdown.Option");
+  const index = optionIndices.get(value);
+  if (index === void 0) {
+    return null;
+  }
+  const selected = selectedValues.includes(value);
+  const highlighted = highlightedValue === value;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...getItemProps({
+        active: highlighted,
+        selected,
+        onClick: () => {
+          if (!disabled) {
+            select(toValue({ value, label, icon: OptionIcon}));
+          }
+        }
+      }),
+      ref: (node) => {
+        registerOption(index, node);
+      },
+      className: "vpg-listbox-option",
+      "aria-disabled": disabled ? true : void 0,
+      "data-highlighted": highlighted ? "" : void 0,
+      children: [
+        multiple ? /* @__PURE__ */ jsx("span", { className: "vpg-listbox-checkbox", "data-checked": selected ? "" : void 0, children: selected ? /* @__PURE__ */ jsx(Check, { size: 12, "aria-hidden": "true" }) : null }) : null,
+        OptionIcon ? /* @__PURE__ */ jsx(OptionIcon, { className: "vpg-listbox-option-icon", "aria-hidden": "true" }) : null,
+        /* @__PURE__ */ jsx("span", { className: "vpg-listbox-option-label", children: label }),
+        !multiple && selected ? /* @__PURE__ */ jsx(Check, { className: "vpg-listbox-option-check", "aria-hidden": "true" }) : null
+      ]
+    }
+  );
+}
+function DropdownGroup({ label, children }) {
+  const { visibleGroups } = useDropdownContext("Dropdown.Group");
+  const headingId = useId();
+  const position = visibleGroups.indexOf(label);
+  if (position === -1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    position > 0 ? /* @__PURE__ */ jsx("div", { className: "vpg-listbox-separator", "aria-hidden": "true" }) : null,
+    /* @__PURE__ */ jsxs("div", { role: "group", className: "vpg-listbox-group", "aria-labelledby": headingId, children: [
+      /* @__PURE__ */ jsx("div", { id: headingId, className: "vpg-listbox-group-label", children: label }),
+      children
+    ] })
+  ] });
+}
+function isFalsyChild(child) {
+  return child === null || child === void 0 || typeof child === "boolean";
+}
+function toDescriptor(props, group) {
+  const { value, label, icon, disabled = false } = props;
+  return { value, label, icon, disabled, group };
+}
+function readGroupOptions(children, group) {
+  const options = [];
+  Children.forEach(children, (child) => {
+    if (isFalsyChild(child)) {
+      return;
+    }
+    if (!isValidElement(child) || child.type !== DropdownOption) {
+      throw new Error("Dropdown.Group only accepts Dropdown.Option as children.");
+    }
+    options.push(toDescriptor(child.props, group));
+  });
+  return options;
+}
+function readOptions(children) {
+  const options = [];
+  Children.forEach(children, (child) => {
+    if (isFalsyChild(child)) {
+      return;
+    }
+    if (isValidElement(child) && child.type === DropdownGroup) {
+      const { label, children: groupChildren } = child.props;
+      options.push(...readGroupOptions(groupChildren, label));
+      return;
+    }
+    if (!isValidElement(child) || child.type !== DropdownOption) {
+      throw new Error("Dropdown only accepts Dropdown.Option and Dropdown.Group as children.");
+    }
+    options.push(toDescriptor(child.props));
+  });
+  return options;
+}
+function groupsOf(options) {
+  const groups = [];
+  for (const option of options) {
+    if (option.group !== void 0 && !groups.includes(option.group)) {
+      groups.push(option.group);
+    }
+  }
+  return groups;
+}
+function inGroupOrder(options) {
+  return [
+    ...options.filter((option) => option.group === void 0),
+    ...groupsOf(options).flatMap((group) => options.filter((option) => option.group === group))
+  ];
+}
+function toSelection(value) {
+  if (value === null || value === void 0) {
+    return [];
+  }
+  return Array.isArray(value) ? value : [value];
+}
+function matchesQuery(label, query) {
+  return label.toLowerCase().includes(query.toLowerCase());
+}
+function firstEnabledIndex(options) {
+  const index = options.findIndex((option) => !option.disabled);
+  return index === -1 ? null : index;
+}
+function isPrintable(event) {
+  return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+}
+function toValue({ value, label, icon }) {
+  return icon === void 0 ? { value, label } : { value, label, icon };
+}
+function resolveSelection(selection, options) {
+  return selection.map((selected) => {
+    const option = options.find((candidate) => candidate.value === selected.value);
+    return option === void 0 ? selected : toValue(option);
+  });
+}
+function widthsOf(row, selector) {
+  return Array.from(row.querySelectorAll(selector), (box) => box.getBoundingClientRect().width);
+}
+function countFitting(widths, gap, available) {
+  let used = 0;
+  let fitting = 0;
+  for (const width of widths) {
+    used += fitting === 0 ? width : gap + width;
+    if (used > available) {
+      break;
+    }
+    fitting += 1;
+  }
+  return fitting;
+}
+function measureHiddenChips(row) {
+  row.setAttribute("data-measuring", "");
+  const chips = widthsOf(row, ".vpg-listbox-chip");
+  const indicator = widthsOf(row, ".vpg-listbox-overflow-chip");
+  const available = row.clientWidth;
+  row.removeAttribute("data-measuring");
+  if (available === 0) {
+    return 0;
+  }
+  const gap = Number.parseFloat(getComputedStyle(row).columnGap);
+  if (countFitting(chips, gap, available) === chips.length) {
+    return 0;
+  }
+  const showing = Math.max(countFitting([...indicator, ...chips], gap, available) - 1, 1);
+  return chips.length - showing;
+}
+function DropdownImpl(props) {
+  const {
+    children,
+    loadOptions,
+    debounceMs = 300,
+    loadingMessage = "Loading\u2026",
+    errorMessage = "Something went wrong.",
+    placeholder = "Select\u2026",
+    searchable = true,
+    searchPlaceholder = "Search",
+    wrapChips = false,
+    clearable = false,
+    className,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid
+  } = props;
+  const isAsync = loadOptions !== void 0;
+  const multiple = props.multiple === true;
+  const controlled = props.value !== void 0;
+  const emitChange = props.onChange;
+  const [uncontrolledSelection, setUncontrolledSelection] = useState(() => toSelection(props.defaultValue));
+  const selection = controlled ? toSelection(props.value) : uncontrolledSelection;
+  const selectedValues = selection.map((selected) => selected.value);
+  const selectionDescriptionId = useId();
+  const [open, setOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(null);
+  const [query, setQuery] = useState("");
+  const listRef = useRef([]);
+  const searchRef = useRef(null);
+  const chipsRef = useRef(null);
+  const [hiddenChipCount, setHiddenChipCount] = useState(0);
+  const [asyncOptions, setAsyncOptions] = useState([]);
+  const [asyncStatus, setAsyncStatus] = useState("idle");
+  const searchTokenRef = useRef(0);
+  const loadOptionsRef = useRef(loadOptions);
+  useEffect(() => {
+    loadOptionsRef.current = loadOptions;
+  });
+  useEffect(() => {
+    if (!isAsync) {
+      return;
+    }
+    const token = ++searchTokenRef.current;
+    const timer = setTimeout(() => {
+      setAsyncStatus("loading");
+      const load = loadOptionsRef.current;
+      load(query).then(
+        (results) => {
+          if (searchTokenRef.current !== token) {
+            return;
+          }
+          const loaded = inGroupOrder(
+            results.map((result) => ({
+              value: result.value,
+              label: result.label,
+              icon: result.icon,
+              disabled: result.disabled ?? false,
+              group: result.group
+            }))
+          );
+          setAsyncOptions(loaded);
+          setAsyncStatus("idle");
+          setHighlightedIndex(firstEnabledIndex(loaded));
+        },
+        () => {
+          if (searchTokenRef.current !== token) {
+            return;
+          }
+          setAsyncOptions([]);
+          setAsyncStatus("error");
+          setHighlightedIndex(null);
+        }
+      );
+    }, debounceMs);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [isAsync, query, debounceMs]);
+  const options = isAsync ? [] : readOptions(children);
+  const matches = isAsync ? asyncOptions : searchable ? options.filter((option) => matchesQuery(option.label, query)) : options;
+  const optionIndices = new Map(matches.map((option, index) => [option.value, index]));
+  const visibleGroups = groupsOf(matches);
+  const selectedEntries = resolveSelection(selection, options);
+  const disabledIndices = matches.flatMap((option, index) => option.disabled ? [index] : []);
+  const highlighted = highlightedIndex === null ? void 0 : matches[highlightedIndex];
+  listRef.current.length = matches.length;
+  const collapseChips = multiple && !wrapChips;
+  const visibleChipCount = selectedEntries.length - hiddenChipCount;
+  const chipLabels = JSON.stringify(selectedEntries.map((selected) => selected.label));
+  const hiddenLabels = selectedEntries.slice(visibleChipCount).map((selected) => selected.label);
+  const showClear = clearable && selectedEntries.length > 0;
+  const describesSelection = multiple && selectedEntries.length > 0;
+  const describedBy = [ariaDescribedBy, describesSelection ? selectionDescriptionId : null].filter(Boolean).join(" ");
+  useLayoutEffect(() => {
+    if (!collapseChips) {
+      setHiddenChipCount(0);
+      return;
+    }
+    const row = chipsRef.current;
+    if (row === null) {
+      return;
+    }
+    function measure() {
+      setHiddenChipCount(measureHiddenChips(row));
+    }
+    measure();
+    const observer = new ResizeObserver(() => {
+      flushSync(measure);
+    });
+    observer.observe(row.parentElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [collapseChips, chipLabels]);
+  function handleOpenChange(next) {
+    setOpen(next);
+    if (!next) {
+      setHighlightedIndex(null);
+      setQuery("");
+    }
+  }
+  function applyQuery(next) {
+    setQuery(next);
+    if (isAsync) {
+      setHighlightedIndex(null);
+      return;
+    }
+    setHighlightedIndex(firstEnabledIndex(options.filter((option) => matchesQuery(option.label, next))));
+  }
+  function commit(next, reported) {
+    if (!controlled) {
+      setUncontrolledSelection(next);
+    }
+    emitChange?.(reported);
+  }
+  function select(option) {
+    if (multiple) {
+      const next = selectedValues.includes(option.value) ? selection.filter((selected) => selected.value !== option.value) : [...selection, option];
+      commit(next, next);
+      if (searchable) {
+        setQuery("");
+        setHighlightedIndex((isAsync ? asyncOptions : options).findIndex((candidate) => candidate.value === option.value));
+      }
+      return;
+    }
+    commit([option], option);
+    handleOpenChange(false);
+  }
+  function remove(value) {
+    const next = selection.filter((selected) => selected.value !== value);
+    commit(next, next);
+  }
+  const {
+    refs,
+    floatingStyles,
+    context: floatingContext,
+    themeRoot,
+    fieldRef,
+    onFieldMouseDown,
+    getReferenceProps,
+    getFloatingProps,
+    getItemProps,
+    getSearchProps
+  } = useListboxKeyboard({
+    listRef,
+    activeIndex: highlightedIndex,
+    onNavigate: setHighlightedIndex,
+    disabledIndices,
+    // A search input owns every keystroke once one exists: type-ahead is the trigger's own way of
+    // reaching an option by its label, for the mode with no input to type into.
+    typeahead: !searchable,
+    role: "select",
+    search: searchable,
+    open,
+    onOpenChange: handleOpenChange
+  });
+  function clear() {
+    commit([], multiple ? [] : null);
+    refs.domReference.current.focus();
+  }
+  function handleTriggerKeyDown(event) {
+    if (event.key !== "Enter" && event.key !== " ") {
+      if (searchable && !open && isPrintable(event)) {
+        event.preventDefault();
+        handleOpenChange(true);
+        applyQuery(event.key);
+      }
+      return;
+    }
+    event.preventDefault();
+    if (!open) {
+      handleOpenChange(true);
+      return;
+    }
+    if (highlighted === void 0 || highlighted.disabled) {
+      return;
+    }
+    select(toValue(highlighted));
+  }
+  function handleSearchChange(event) {
+    applyQuery(event.target.value);
+  }
+  function handleSearchKeyDown(event) {
+    const last = selection.at(-1);
+    if (multiple && event.key === "Backspace" && query === "" && last !== void 0) {
+      remove(last.value);
+      return;
+    }
+    if (event.key !== "Enter") {
+      return;
+    }
+    event.preventDefault();
+    if (highlighted === void 0 || highlighted.disabled) {
+      return;
+    }
+    select(toValue(highlighted));
+  }
+  const context = {
+    multiple,
+    optionIndices,
+    visibleGroups,
+    selectedValues,
+    highlightedValue: highlighted === void 0 ? null : highlighted.value,
+    select,
+    registerOption(index, node) {
+      if (node !== null) {
+        listRef.current[index] = node;
+      }
+    },
+    getItemProps
+  };
+  function renderTriggerContent() {
+    const placeholderContent = /* @__PURE__ */ jsx("span", { className: "vpg-dropdown-placeholder", children: placeholder });
+    if (multiple) {
+      return selectedEntries.length === 0 ? placeholderContent : null;
+    }
+    const selected = selectedEntries[0];
+    if (selected === void 0) {
+      return placeholderContent;
+    }
+    const SelectedIcon = selected.icon;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      SelectedIcon ? /* @__PURE__ */ jsx(SelectedIcon, { className: "vpg-dropdown-trigger-icon", "aria-hidden": "true" }) : null,
+      /* @__PURE__ */ jsx("span", { className: "vpg-dropdown-value", children: selected.label })
+    ] });
+  }
+  function renderOverflowIndicator() {
+    const indicator = /* @__PURE__ */ jsxs("span", { className: "vpg-listbox-overflow-chip", "data-hidden": hiddenChipCount === 0 ? "" : void 0, children: [
+      "and ",
+      hiddenChipCount,
+      " more"
+    ] });
+    if (hiddenChipCount === 0) {
+      return indicator;
+    }
+    return /* @__PURE__ */ jsx(Tooltip, { content: hiddenLabels.join(", "), children: indicator });
+  }
+  function renderClearButton() {
+    return /* @__PURE__ */ jsx("button", { type: "button", className: "vpg-dropdown-clear", "aria-label": "Clear selection", onClick: clear, children: /* @__PURE__ */ jsx(X, { className: "vpg-dropdown-clear-icon", "aria-hidden": "true" }) });
+  }
+  function renderAsyncOption(option) {
+    return /* @__PURE__ */ jsx(DropdownOption, { value: option.value, label: option.label, icon: option.icon, disabled: option.disabled }, option.value);
+  }
+  function renderAsyncRows() {
+    if (asyncStatus === "loading") {
+      return /* @__PURE__ */ jsx("div", { className: "vpg-listbox-empty", children: loadingMessage });
+    }
+    if (asyncStatus === "error") {
+      return /* @__PURE__ */ jsx("div", { className: "vpg-listbox-empty", children: errorMessage });
+    }
+    if (matches.length === 0) {
+      return /* @__PURE__ */ jsx("div", { className: "vpg-listbox-empty", children: "No results" });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      matches.filter((option) => option.group === void 0).map(renderAsyncOption),
+      visibleGroups.map((group) => /* @__PURE__ */ jsx(DropdownGroup, { label: group, children: matches.filter((option) => option.group === group).map(renderAsyncOption) }, group))
+    ] });
+  }
+  const optionRows = isAsync ? renderAsyncRows() : searchable && matches.length === 0 ? /* @__PURE__ */ jsx("div", { className: "vpg-listbox-empty", children: "No results" }) : children;
+  function renderSearchPanel() {
+    return /* @__PURE__ */ jsx("div", { ref: refs.setFloating, className: "vpg-listbox-panel", style: floatingStyles, children: /* @__PURE__ */ jsx(FloatingFocusManager, { context: floatingContext, modal: false, initialFocus: searchRef, children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "vpg-listbox-search", children: [
+        /* @__PURE__ */ jsx(Search, { className: "vpg-listbox-search-icon", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: searchRef,
+            type: "text",
+            role: "combobox",
+            "aria-expanded": true,
+            className: "vpg-listbox-search-input",
+            autoComplete: "off",
+            placeholder: searchPlaceholder,
+            "aria-label": searchPlaceholder,
+            value: query,
+            ...getSearchProps({ onChange: handleSearchChange, onKeyDown: handleSearchKeyDown })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "listbox",
+          className: "vpg-listbox-options",
+          "aria-multiselectable": multiple ? true : void 0,
+          ...getFloatingProps(),
+          children: optionRows
+        }
+      )
+    ] }) }) });
+  }
+  function renderFloating() {
+    if (searchable) {
+      return renderSearchPanel();
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: refs.setFloating,
+        role: "listbox",
+        className: "vpg-listbox",
+        style: floatingStyles,
+        "aria-multiselectable": multiple ? true : void 0,
+        ...getFloatingProps(),
+        children: optionRows
+      }
+    );
+  }
+  const listbox = open ? renderFloating() : null;
+  return /* @__PURE__ */ jsxs(DropdownContext.Provider, { value: context, children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-dropdown", precedence: "vpg-dropdown", children: dropdownStylesheet }),
+    /* @__PURE__ */ jsx("style", { href: "vpg-listbox", precedence: "vpg-listbox", children: listboxStylesheet }),
+    /* @__PURE__ */ jsxs("div", { className: ["vpg-dropdown", className].filter(Boolean).join(" "), children: [
+      /* @__PURE__ */ jsxs(
+        FieldShell,
+        {
+          ref: fieldRef,
+          className: "vpg-dropdown-control",
+          onMouseDown: onFieldMouseDown,
+          trailing: showClear ? renderClearButton() : void 0,
+          children: [
+            multiple && selectedEntries.length > 0 ? /* @__PURE__ */ jsxs("span", { ref: chipsRef, className: "vpg-listbox-chips", "data-collapsing": collapseChips ? "" : void 0, children: [
+              selectedEntries.map((selected, index) => /* @__PURE__ */ jsxs("span", { className: "vpg-listbox-chip", "data-hidden": index >= visibleChipCount ? "" : void 0, children: [
+                /* @__PURE__ */ jsx("span", { className: "vpg-listbox-chip-label", children: selected.label }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "vpg-listbox-chip-remove",
+                    "aria-label": `Remove ${selected.label}`,
+                    onClick: () => {
+                      remove(selected.value);
+                    },
+                    children: /* @__PURE__ */ jsx(X, { className: "vpg-listbox-chip-remove-icon", "aria-hidden": "true" })
+                  }
+                )
+              ] }, selected.value)),
+              collapseChips ? renderOverflowIndicator() : null
+            ] }) : null,
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: refs.setReference,
+                role: "combobox",
+                "aria-expanded": open,
+                className: "vpg-dropdown-trigger",
+                tabIndex: 0,
+                id,
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                "aria-describedby": describedBy === "" ? void 0 : describedBy,
+                "aria-invalid": ariaInvalid,
+                ...getReferenceProps({ onKeyDown: handleTriggerKeyDown }),
+                children: [
+                  renderTriggerContent(),
+                  /* @__PURE__ */ jsx(ChevronDown, { size: 16, className: "vpg-dropdown-chevron", "aria-hidden": "true" })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      describesSelection ? /* @__PURE__ */ jsxs("span", { id: selectionDescriptionId, className: "vpg-dropdown-selection-description", children: [
+        "Selected: ",
+        selectedEntries.map((selected) => selected.label).join(", ")
+      ] }) : null
+    ] }),
+    listbox !== null && themeRoot !== null ? createPortal(listbox, themeRoot) : listbox
+  ] });
+}
+var Dropdown = /* @__PURE__ */ Object.assign(DropdownImpl, {
+  Option: DropdownOption,
+  Group: DropdownGroup
+});
+
+// src/FieldSet/FieldSet.stylesheet.ts
+var fieldSetStylesheet = `
+.vpg-fieldset {
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--vpg-space-5);
+  background-color: var(--vpg-surface-raised);
+  border: 1px solid var(--vpg-border);
+  border-radius: var(--vpg-radius-lg);
+}
+
+.vpg-fieldset:disabled {
+  opacity: 0.55;
+}
+
+.vpg-fieldset > *:not(.vpg-fieldset-legend) ~ *:not(.vpg-fieldset-legend) {
+  margin-top: var(--vpg-space-5);
+}
+
+.vpg-fieldset-legend {
+  padding: 0;
+  margin: 0;
+  font-size: var(--vpg-font-size-sm);
+  font-weight: 600;
+  color: var(--vpg-ink);
+}
+`;
+function FieldSet({ legend, children, className, ...rest }) {
+  const classes = ["vpg-fieldset", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("fieldset", { ...rest, className: classes, children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-fieldset", precedence: "vpg-fieldset", children: fieldSetStylesheet }),
+    /* @__PURE__ */ jsx("legend", { className: "vpg-fieldset-legend", children: legend }),
+    children
+  ] });
+}
+
+// src/FormField/FormField.stylesheet.ts
+var formFieldStylesheet = `
+.vpg-form-field {
+  display: flex;
+  flex-direction: column;
+}
+
+.vpg-form-field-label {
+  margin: 0 0 var(--vpg-space-2);
+  font-size: var(--vpg-font-size-sm);
+  font-weight: 500;
+  color: var(--vpg-ink);
+}
+
+.vpg-form-field-hint {
+  margin-top: var(--vpg-space-1);
+  font-size: var(--vpg-font-size-xs);
+  color: var(--vpg-ink-muted);
+}
+
+.vpg-form-field-error {
+  margin-top: var(--vpg-space-1);
+  font-size: var(--vpg-font-size-xs);
+  color: var(--vpg-danger);
+}
+`;
+function FormField({ label, hint, error, children }) {
+  const generatedId = useId();
+  const labelId = `${generatedId}-label`;
+  const hintId = `${generatedId}-hint`;
+  const errorId = `${generatedId}-error`;
+  if (!isValidElement(children) || children.type === Fragment$1) {
+    throw new Error("FormField requires exactly one focusable element as its child.");
+  }
+  const hasHint = hint !== void 0 && hint !== null && hint !== "";
+  const hasError = error !== void 0 && error !== null && error !== "";
+  const describedByIds = [hasHint ? hintId : null, hasError ? errorId : null].filter((id) => id !== null);
+  const mergedDescribedBy = [children.props["aria-describedby"], ...describedByIds].filter(Boolean).join(" ");
+  const childId = children.props.id ?? generatedId;
+  const cloneProps = {
+    id: childId,
+    "aria-labelledby": labelId
+  };
+  if (mergedDescribedBy) {
+    cloneProps["aria-describedby"] = mergedDescribedBy;
+  }
+  if (hasError) {
+    cloneProps["aria-invalid"] = true;
+  }
+  const control = cloneElement(children, cloneProps);
+  return /* @__PURE__ */ jsxs("div", { className: "vpg-form-field", children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-form-field", precedence: "vpg-form-field", children: formFieldStylesheet }),
+    /* @__PURE__ */ jsx("label", { htmlFor: childId, id: labelId, className: "vpg-form-field-label", children: label }),
+    control,
+    hasHint ? /* @__PURE__ */ jsx("span", { id: hintId, className: "vpg-form-field-hint", children: hint }) : null,
+    hasError ? /* @__PURE__ */ jsx("span", { id: errorId, className: "vpg-form-field-error", children: error }) : null
+  ] });
+}
+
+// src/TextField/TextField.stylesheet.ts
+var textFieldStylesheet = `
+.vpg-text-field {
+  box-sizing: border-box;
+  align-self: stretch;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: none;
+  color: inherit;
+  font-family: var(--vpg-font-sans);
+  font-size: var(--vpg-font-size-sm);
+  line-height: 1.5;
+}
+
+.vpg-text-field::placeholder {
+  color: var(--vpg-ink-subtle);
+}
+`;
+function TextField({ className, type = "text", leading, trailing, ...rest }) {
+  const classes = ["vpg-text-field", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-text-field", precedence: "vpg-text-field", children: textFieldStylesheet }),
+    /* @__PURE__ */ jsx(FieldShell, { leading, trailing, children: /* @__PURE__ */ jsx("input", { type, ...rest, className: classes }) })
+  ] });
+}
+
+// src/PasswordInput/PasswordInput.stylesheet.ts
+var passwordInputStylesheet = `
+.vpg-password-input-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: none;
+  border-radius: var(--vpg-radius-sm);
+  padding: 0 var(--vpg-space-1);
+  margin: 0;
+  background: none;
+  color: var(--vpg-ink-muted);
+  font-family: inherit;
+  font-size: var(--vpg-font-size-xs);
+  line-height: 1;
+  cursor: pointer;
+  transition: color var(--vpg-duration-fast) var(--vpg-ease-standard);
+}
+
+.vpg-password-input-toggle:hover:not(:disabled) {
+  color: var(--vpg-ink);
+}
+
+.vpg-password-input-toggle:focus-visible {
+  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);
+  outline-offset: var(--vpg-focus-ring-offset);
+}
+
+.vpg-password-input-toggle:disabled {
+  cursor: not-allowed;
+}
+`;
+function PasswordInput({ className, disabled, ...rest }) {
+  const [revealed, setRevealed] = useState(false);
+  const label = revealed ? "Hide password" : "Show password";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-password-input", precedence: "vpg-password-input", children: passwordInputStylesheet }),
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        ...rest,
+        className,
+        disabled,
+        type: revealed ? "text" : "password",
+        trailing: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "vpg-password-input-toggle",
+            "aria-pressed": revealed,
+            "aria-label": label,
+            disabled,
+            onClick: () => setRevealed((current) => !current),
+            children: revealed ? "Hide" : "Show"
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/Popover/Popover.stylesheet.ts
+var popoverStylesheet = `
+.vpg-popover-trigger {
+  /* Inline-flex rather than inline: the wrapper exists only to carry the ref and the click
+     handler, and must not add a baseline gap under the element it wraps. */
+  display: inline-flex;
+}
+
+.vpg-popover {
+  position: absolute;
+  z-index: var(--vpg-layer-popover);
+  box-sizing: border-box;
+  /* The size of a container, not a step of anything: no scale carries a measurement this large,
+     and a \`--vpg-*\` name the theme never assigns advertises a theming hook that doesn't
+     exist. */
+  max-width: 20rem;
+  padding: 1rem;
+  background-color: var(--vpg-surface-raised);
+  border: 1px solid var(--vpg-border);
+  border-radius: var(--vpg-radius);
+  box-shadow: var(--vpg-shadow-high);
+  color: var(--vpg-ink);
+  font-family: var(--vpg-font-sans);
+  font-size: var(--vpg-font-size-sm);
+  line-height: 1.5;
+  /* The panel holds interactive content, so unlike a tooltip it must stay hit-testable. */
+  overflow-wrap: break-word;
+}
+
+.vpg-popover:focus-visible {
+  /* The panel itself takes focus when it holds nothing tabbable; the ring is what makes that
+     visible. Offset rather than inset so it stays legible against the panel's own surface. */
+  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);
+  outline-offset: var(--vpg-focus-ring-offset);
+}
+`;
+var POPOVER_OFFSET = 10;
+var VIEWPORT_PADDING3 = 12;
+function Popover({ content, children, open, defaultOpen = false, onOpenChange, placement = "bottom", className }) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isOpen = open ?? uncontrolledOpen;
+  const handleOpenChange = (next) => {
+    if (open === void 0) {
+      setUncontrolledOpen(next);
+    }
+    onOpenChange?.(next);
+  };
+  const { refs, floatingStyles, context, elements } = useFloating({
+    open: isOpen,
+    onOpenChange: handleOpenChange,
+    placement,
+    middleware: [offset(POPOVER_OFFSET), flip(), shift({ padding: VIEWPORT_PADDING3 })],
+    whileElementsMounted: autoUpdate
+  });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const dialogRole = useRole(context, { role: "dialog" });
+  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, dialogRole]);
+  const {
+    "aria-haspopup": ariaHaspopup,
+    "aria-expanded": ariaExpanded,
+    "aria-controls": ariaControls,
+    ...referenceProps
+  } = getReferenceProps();
+  const hasSingleElementChild = isValidElement(children) && children.type !== Fragment$1;
+  const trigger = hasSingleElementChild ? cloneElement(children, {
+    "aria-haspopup": ariaHaspopup,
+    "aria-expanded": ariaExpanded,
+    "aria-controls": ariaControls
+  }) : children;
+  const panel = isOpen ? /* @__PURE__ */ jsx(FloatingFocusManager, { context, modal: true, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: refs.setFloating,
+      className: ["vpg-popover", className].filter(Boolean).join(" "),
+      style: floatingStyles,
+      ...getFloatingProps(),
+      children: content
+    }
+  ) }) : null;
+  const themeRoot = elements.domReference?.closest(".vpg-root") ?? null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-popover", precedence: "vpg-popover", children: popoverStylesheet }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: refs.setReference,
+        className: "vpg-popover-trigger",
+        "aria-haspopup": hasSingleElementChild ? void 0 : ariaHaspopup,
+        "aria-expanded": hasSingleElementChild ? void 0 : ariaExpanded,
+        "aria-controls": hasSingleElementChild ? void 0 : ariaControls,
+        ...referenceProps,
+        children: trigger
+      }
+    ),
+    panel !== null && themeRoot !== null ? createPortal(panel, themeRoot) : panel
+  ] });
+}
+
+// src/Progress/Progress.stylesheet.ts
+var progressStylesheet = `
+@keyframes vpg-progress-sweep {
+  0% { left: -40%; width: 40%; }
+  50% { width: 60%; }
+  100% { left: 100%; width: 40%; }
+}
+
+.vpg-progress {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  box-sizing: border-box;
+  border-radius: var(--vpg-radius-sm);
+  background-color: var(--vpg-surface-raised);
+}
+
+.vpg-progress-sm {
+  height: 0.25rem;
+}
+
+.vpg-progress-md {
+  height: 0.5rem;
+}
+
+.vpg-progress-lg {
+  height: 0.75rem;
+}
+
+.vpg-progress-fill {
+  height: 100%;
+  border-radius: inherit;
+  background-color: var(--vpg-accent);
+}
+
+.vpg-progress-determinate .vpg-progress-fill {
+  transition: width 0.2s ease-out;
+}
+
+.vpg-progress-indeterminate .vpg-progress-fill {
+  position: absolute;
+  top: 0;
+  animation: vpg-progress-sweep 1.5s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Slowed, not stopped: a bar that never moves at all reports nothing about the wait it exists
+     to report. */
+  .vpg-progress-indeterminate .vpg-progress-fill {
+    animation-duration: 3s;
+  }
+}
+`;
+function clamp(value, max) {
+  if (value < 0) return 0;
+  if (value > max) return max;
+  return value;
+}
+function Progress({ value, max = 100, size: size2 = "md", className, style, ...rest }) {
+  const determinate = value !== void 0;
+  const percentage = determinate ? max <= 0 ? 100 : clamp(value, max) / max * 100 : void 0;
+  const classes = [
+    "vpg-progress",
+    `vpg-progress-${size2}`,
+    determinate ? "vpg-progress-determinate" : "vpg-progress-indeterminate",
+    className
+  ].filter(Boolean).join(" ");
+  const labelling = determinate ? { "aria-valuenow": clamp(value, max), "aria-valuemin": 0, "aria-valuemax": max } : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-progress", precedence: "vpg-progress", children: progressStylesheet }),
+    /* @__PURE__ */ jsx("div", { ...rest, role: "progressbar", ...labelling, className: classes, style, children: /* @__PURE__ */ jsx("div", { className: "vpg-progress-fill", style: determinate ? { width: `${percentage}%` } : void 0 }) })
+  ] });
+}
+
+// src/RadioGroup/RadioGroup.stylesheet.ts
+var radioGroupStylesheet = `
+.vpg-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+`;
+var RadioGroupContext = createContext(null);
+function useRadioGroupContext() {
+  return useContext(RadioGroupContext);
+}
+function RadioGroup({ value, defaultValue, onChange, name, className, children, ...rest }) {
+  const generatedName = useId();
+  const resolvedName = name ?? generatedName;
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const controlled = value !== void 0;
+  const selectedValue = controlled ? value : uncontrolledValue;
+  const classes = ["vpg-radio-group", className].filter(Boolean).join(" ");
+  const context = useMemo(
+    () => ({
+      name: resolvedName,
+      value: selectedValue,
+      onChange(next) {
+        if (!controlled) {
+          setUncontrolledValue(next);
+        }
+        onChange?.(next);
+      }
+    }),
+    [resolvedName, selectedValue, controlled, onChange]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-radio-group", precedence: "vpg-radio-group", children: radioGroupStylesheet }),
+    /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { ...rest, role: "radiogroup", className: classes, children }) })
+  ] });
+}
+
+// src/RadioButton/RadioButton.stylesheet.ts
+var radioButtonStylesheet = `
+.vpg-radio-button {
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  flex: none;
+  width: var(--vpg-icon-md);
+  height: var(--vpg-icon-md);
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--vpg-border);
+  border-radius: var(--vpg-radius-full);
+  background-color: var(--vpg-surface);
+  cursor: pointer;
+  transition: border-color 120ms ease;
+}
+
+.vpg-radio-button::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: calc(var(--vpg-icon-md) * 0.5);
+  height: calc(var(--vpg-icon-md) * 0.5);
+  border-radius: var(--vpg-radius-full);
+  background-color: var(--vpg-accent);
+  transform: scale(0);
+  transition: transform 120ms ease;
+}
+
+.vpg-radio-button:checked {
+  border-color: var(--vpg-accent);
+}
+
+.vpg-radio-button:checked::before {
+  transform: scale(1);
+}
+
+.vpg-radio-button:focus-visible {
+  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);
+  outline-offset: var(--vpg-focus-ring-offset);
+}
+
+.vpg-radio-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+`;
+function RadioButton({ className, name, checked, onChange, value, ...rest }) {
+  const context = useRadioGroupContext();
+  const manualChecked = checked !== void 0;
+  const resolvedName = name ?? context?.name;
+  const resolvedChecked = manualChecked ? checked : context ? value !== void 0 && context.value === value : void 0;
+  function handleChange(event) {
+    onChange?.(event);
+    if (!manualChecked && context && value !== void 0) {
+      context.onChange(value);
+    }
+  }
+  const classes = ["vpg-radio-button", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-radio-button", precedence: "vpg-radio-button", children: radioButtonStylesheet }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...rest,
+        type: "radio",
+        name: resolvedName,
+        value,
+        checked: resolvedChecked,
+        onChange: handleChange,
+        className: classes
+      }
+    )
+  ] });
+}
+
+// src/Skeleton/Skeleton.stylesheet.ts
+var skeletonStylesheet = `
+@keyframes vpg-skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.vpg-skeleton {
+  display: block;
+  flex: none;
+  box-sizing: border-box;
+  background-image: linear-gradient(
+    90deg,
+    oklch(from var(--vpg-surface) calc(l + var(--vpg-lift) * 2.5) c h) 25%,
+    oklch(from var(--vpg-surface) calc(l - var(--vpg-sink) * 1.5) c h) 50%,
+    oklch(from var(--vpg-surface) calc(l + var(--vpg-lift) * 2.5) c h) 75%
+  );
+  background-size: 200% 100%;
+  animation: vpg-skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+.vpg-skeleton-text {
+  width: 100%;
+  height: 1em;
+  border-radius: var(--vpg-radius-sm);
+}
+
+.vpg-skeleton-rect {
+  width: 100%;
+  height: 1.25rem;
+  border-radius: var(--vpg-radius);
+}
+
+.vpg-skeleton-circle {
+  width: 2.5rem;
+  /* Falls back to a square only when the caller sets a width but no height, so a single
+     \`width\` prop is enough to draw a circle without a matching \`height\`. Explicit \`height\`
+     (set inline, per-instance) still wins over this and sizes the other axis. */
+  aspect-ratio: 1;
+  border-radius: 50%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Slowed, not stopped: a placeholder that never moves at all reports nothing about the wait
+     it exists to report. */
+  .vpg-skeleton {
+    animation-duration: 3s;
+  }
+}
+`;
+function toDimension(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+function Skeleton({ variant = "text", width, height, className, style, ...rest }) {
+  const classes = ["vpg-skeleton", `vpg-skeleton-${variant}`, className].filter(Boolean).join(" ");
+  const dimensions = {
+    width: toDimension(width),
+    height: toDimension(height)
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-skeleton", precedence: "vpg-skeleton", children: skeletonStylesheet }),
+    /* @__PURE__ */ jsx("div", { ...rest, "aria-hidden": "true", className: classes, style: { ...dimensions, ...style } })
+  ] });
+}
+
+// src/Slider/Slider.stylesheet.ts
+var sliderStylesheet = `
+.vpg-slider {
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.vpg-slider::-webkit-slider-runnable-track {
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--vpg-space-1);
+  border-radius: var(--vpg-radius-full);
+  background-color: var(--vpg-surface-sunken);
+  border: 1px solid var(--vpg-border);
+}
+
+.vpg-slider::-moz-range-track {
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--vpg-space-1);
+  border-radius: var(--vpg-radius-full);
+  background-color: var(--vpg-surface-sunken);
+  border: 1px solid var(--vpg-border);
+}
+
+.vpg-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  width: var(--vpg-icon-md);
+  height: var(--vpg-icon-md);
+  margin-top: calc((var(--vpg-space-1) - var(--vpg-icon-md)) / 2);
+  border-radius: var(--vpg-radius-full);
+  border: 1px solid var(--vpg-accent);
+  background-color: var(--vpg-accent);
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease;
+}
+
+.vpg-slider::-moz-range-thumb {
+  box-sizing: border-box;
+  width: var(--vpg-icon-md);
+  height: var(--vpg-icon-md);
+  border-radius: var(--vpg-radius-full);
+  border: 1px solid var(--vpg-accent);
+  background-color: var(--vpg-accent);
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease;
+}
+
+.vpg-slider:focus-visible::-webkit-slider-thumb {
+  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);
+  outline-offset: var(--vpg-focus-ring-offset);
+}
+
+.vpg-slider:focus-visible::-moz-range-thumb {
+  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);
+  outline-offset: var(--vpg-focus-ring-offset);
+}
+
+.vpg-slider:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.vpg-slider:disabled::-webkit-slider-thumb {
+  cursor: not-allowed;
+}
+
+.vpg-slider:disabled::-moz-range-thumb {
+  cursor: not-allowed;
+}
+`;
+function Slider({ className, ...rest }) {
+  const classes = ["vpg-slider", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-slider", precedence: "vpg-slider", children: sliderStylesheet }),
+    /* @__PURE__ */ jsx("input", { type: "range", ...rest, className: classes })
+  ] });
+}
+
+// src/Tabs/Tabs.stylesheet.ts
+var tabsStylesheet = `
+.vpg-tabs {
+  display: flex;
+  flex-direction: column;
+  color: var(--vpg-ink);
+  font-family: var(--vpg-font-sans);
+}
+
+/* A vertical tablist sits beside its panel, not above it. */
+.vpg-tabs-vertical {
+  flex-direction: row;
+}
+
+.vpg-tabs-list {
+  display: flex;
+}
+
+.vpg-tabs-list-horizontal {
+  flex-direction: row;
+  border-bottom: 1px solid var(--vpg-border);
+}
+
+.vpg-tabs-list-vertical {
+  flex-direction: column;
+  border-right: 1px solid var(--vpg-border);
+}
+
+.vpg-tabs-tab {
+  appearance: none;
+  background: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  padding: 0.5rem 0.75rem;
+  border: none;
+  color: var(--vpg-ink-muted);
+  font: inherit;
+  font-size: var(--vpg-font-size-sm);
+  line-height: 1.5;
+}
+
+.vpg-tabs-list-horizontal .vpg-tabs-tab {
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+
+.vpg-tabs-list-vertical .vpg-tabs-tab {
+  text-align: left;
+  border-right: 2px solid transparent;
+  margin-right: -1px;
+}
+
+.vpg-tabs-tab:hover:not(:disabled) {
+  color: var(--vpg-ink);
+  background-color: var(--vpg-surface-hover);
+}
+
+.vpg-tabs-tab:focus-visible {
+  /* Inset so the ring stays inside the list's own border rather than straddling it. */
+  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);
+  outline-offset: calc(var(--vpg-focus-ring-offset) * -1);
+}
+
+.vpg-tabs-tab:disabled {
+  cursor: not-allowed;
+  color: var(--vpg-ink-subtle);
+}
+
+.vpg-tabs-tab-selected {
+  color: var(--vpg-accent);
+}
+
+/* Scoped by orientation to outweigh the transparent placeholder border above, which is itself
+   orientation-scoped and would otherwise win on specificity. */
+.vpg-tabs-list-horizontal .vpg-tabs-tab-selected {
+  border-bottom-color: var(--vpg-accent);
+}
+
+.vpg-tabs-list-vertical .vpg-tabs-tab-selected {
+  border-right-color: var(--vpg-accent);
+}
+
+.vpg-tabs-panel {
+  padding: 1rem 0;
+}
+
+.vpg-tabs-vertical .vpg-tabs-panel {
+  padding: 0 1rem;
+}
+`;
+var TabsContext = createContext(null);
+var ENABLED_TAB_SELECTOR = '[role="tab"]:not([disabled])';
+function useTabsContext(component) {
+  const context = useContext(TabsContext);
+  if (context === null) {
+    throw new Error(`${component} must be rendered inside <Tabs>.`);
+  }
+  return context;
+}
+function tabId(baseId, value) {
+  return `${baseId}-tab-${value}`;
+}
+function panelId(baseId, value) {
+  return `${baseId}-panel-${value}`;
+}
+function TabsList({ className, children, onKeyDown, ...rest }) {
+  const { orientation, activate } = useTabsContext("Tabs.List");
+  const classes = ["vpg-tabs-list", `vpg-tabs-list-${orientation}`, className].filter(Boolean).join(" ");
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    const [previousKey, nextKey] = orientation === "vertical" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
+    const tabs = Array.from(event.currentTarget.querySelectorAll(ENABLED_TAB_SELECTOR));
+    const current = tabs.indexOf(event.target);
+    let next;
+    if (event.key === nextKey) {
+      next = (current + 1) % tabs.length;
+    } else if (event.key === previousKey) {
+      next = (current - 1 + tabs.length) % tabs.length;
+    } else if (event.key === "Home") {
+      next = 0;
+    } else if (event.key === "End") {
+      next = tabs.length - 1;
+    } else {
+      return;
+    }
+    event.preventDefault();
+    const target = tabs[next];
+    target.focus();
+    activate(target.dataset.value);
+  }
+  return /* @__PURE__ */ jsx("div", { ...rest, role: "tablist", "aria-orientation": orientation, className: classes, onKeyDown: handleKeyDown, children });
+}
+function TabsTab({ value, disabled = false, className, children, onClick, ...rest }) {
+  const { activeValue, tabStopValue, activate, baseId } = useTabsContext("Tabs.Tab");
+  const selected = activeValue === value;
+  const classes = ["vpg-tabs-tab", selected ? "vpg-tabs-tab-selected" : "", className].filter(Boolean).join(" ");
+  function handleClick(event) {
+    onClick?.(event);
+    activate(value);
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...rest,
+      type: "button",
+      role: "tab",
+      id: tabId(baseId, value),
+      "aria-controls": selected ? panelId(baseId, value) : void 0,
+      "aria-selected": selected,
+      tabIndex: tabStopValue === value ? 0 : -1,
+      disabled,
+      "data-value": value,
+      className: classes,
+      onClick: handleClick,
+      children
+    }
+  );
+}
+function TabsPanel({ value, className, children, ...rest }) {
+  const { activeValue, baseId } = useTabsContext("Tabs.Panel");
+  if (activeValue !== value) {
+    return null;
+  }
+  const classes = ["vpg-tabs-panel", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      role: "tabpanel",
+      id: panelId(baseId, value),
+      "aria-labelledby": tabId(baseId, value),
+      tabIndex: 0,
+      className: classes,
+      children
+    }
+  );
+}
+function firstTabValue(children, skipDisabled = false) {
+  let found;
+  Children.forEach(children, (child) => {
+    if (found !== void 0 || !isValidElement(child)) {
+      return;
+    }
+    if (child.type === TabsTab) {
+      const props = child.props;
+      if (skipDisabled && props.disabled) {
+        return;
+      }
+      found = props.value;
+      return;
+    }
+    found = firstTabValue(child.props.children, skipDisabled);
+  });
+  return found;
+}
+function isTabDisabled(children, value) {
+  if (value === void 0) {
+    return false;
+  }
+  let disabled = false;
+  Children.forEach(children, (child) => {
+    if (disabled || !isValidElement(child)) {
+      return;
+    }
+    if (child.type === TabsTab) {
+      const props = child.props;
+      if (props.value === value) {
+        disabled = props.disabled ?? false;
+      }
+      return;
+    }
+    disabled = isTabDisabled(child.props.children, value);
+  });
+  return disabled;
+}
+function TabsImpl({ value, defaultValue, onChange, orientation = "horizontal", className, children, ...rest }) {
+  const baseId = useId();
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const controlled = value !== void 0;
+  const activeValue = controlled ? value : uncontrolledValue ?? firstTabValue(children, true) ?? firstTabValue(children);
+  const tabStopValue = isTabDisabled(children, activeValue) ? firstTabValue(children, true) ?? activeValue : activeValue;
+  const classes = ["vpg-tabs", `vpg-tabs-${orientation}`, className].filter(Boolean).join(" ");
+  const context = useMemo(
+    () => ({
+      activeValue,
+      tabStopValue,
+      activate(next) {
+        if (!controlled) {
+          setUncontrolledValue(next);
+        }
+        onChange?.(next);
+      },
+      orientation,
+      baseId
+    }),
+    [activeValue, tabStopValue, controlled, onChange, orientation, baseId]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-tabs", precedence: "vpg-tabs", children: tabsStylesheet }),
+    /* @__PURE__ */ jsx(TabsContext.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { ...rest, className: classes, children }) })
+  ] });
+}
+var Tabs = /* @__PURE__ */ Object.assign(TabsImpl, {
+  List: TabsList,
+  Tab: TabsTab,
+  Panel: TabsPanel
+});
+
+// src/Toggle/Toggle.stylesheet.ts
+var toggleStylesheet = `
+.vpg-toggle {
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  display: inline-block;
+  flex: none;
+  /* A ratio of the track's own height: the width is a function of thumb travel, so binding it to
+     a control-height step would restretch every switch when that step moves. */
+  width: calc(var(--vpg-icon-lg) * 1.8);
+  height: var(--vpg-icon-lg);
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--vpg-border);
+  border-radius: var(--vpg-radius-full);
+  background-color: var(--vpg-surface-sunken);
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease;
+}
+
+.vpg-toggle::before {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+  width: var(--vpg-icon-sm);
+  height: var(--vpg-icon-sm);
+  margin: 1px;
+  border-radius: var(--vpg-radius-full);
+  background-color: var(--vpg-surface-raised);
+  transform: translateX(0);
+  transition: transform 120ms ease, background-color 120ms ease;
+}
+
+.vpg-toggle:checked {
+  background-color: var(--vpg-accent);
+  border-color: var(--vpg-accent);
+}
+
+.vpg-toggle:checked::before {
+  background-color: var(--vpg-accent-contrast);
+  transform: translateX(calc(var(--vpg-icon-lg) * 1.8 - var(--vpg-icon-sm) - 4px));
+}
+
+.vpg-toggle:focus-visible {
+  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);
+  outline-offset: var(--vpg-focus-ring-offset);
+}
+
+.vpg-toggle:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+`;
+function Toggle({ className, ...rest }) {
+  const classes = ["vpg-toggle", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-toggle", precedence: "vpg-toggle", children: toggleStylesheet }),
+    /* @__PURE__ */ jsx("input", { type: "checkbox", role: "switch", ...rest, className: classes })
+  ] });
+}
+
+// src/Typography/Typography.stylesheet.ts
+var typographyStylesheet = `
+.vpg-typography {
+  margin: 0;
+  font-family: inherit;
+}
+
+.vpg-typography-display {
+  font-size: var(--vpg-font-size-5xl);
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+.vpg-typography-h1 {
+  font-size: var(--vpg-font-size-4xl);
+  line-height: 1.15;
+  letter-spacing: -0.01em;
+}
+
+.vpg-typography-h2 {
+  font-size: var(--vpg-font-size-3xl);
+  line-height: 1.2;
+}
+
+.vpg-typography-h3 {
+  font-size: var(--vpg-font-size-2xl);
+  line-height: 1.25;
+}
+
+.vpg-typography-h4 {
+  font-size: var(--vpg-font-size-xl);
+  line-height: 1.3;
+}
+
+.vpg-typography-body-lg {
+  font-size: var(--vpg-font-size-lg);
+  line-height: 1.5;
+}
+
+.vpg-typography-body-md {
+  font-size: var(--vpg-font-size-md);
+  line-height: 1.5;
+}
+
+.vpg-typography-body-sm {
+  font-size: var(--vpg-font-size-sm);
+  line-height: 1.5;
+}
+
+.vpg-typography-caption {
+  font-size: var(--vpg-font-size-xs);
+  line-height: 1.4;
+}
+
+.vpg-typography-weight-regular {
+  font-weight: 400;
+}
+
+.vpg-typography-weight-medium {
+  font-weight: 500;
+}
+
+.vpg-typography-weight-bold {
+  font-weight: 700;
+}
+
+.vpg-typography-color-primary {
+  color: var(--vpg-ink);
+}
+
+.vpg-typography-color-secondary {
+  color: var(--vpg-ink-muted);
+}
+
+.vpg-typography-color-subtle {
+  color: var(--vpg-ink-subtle);
+}
+
+.vpg-typography-color-accent {
+  color: var(--vpg-accent);
+}
+`;
+var VARIANT_ELEMENT = {
+  display: "h1",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  "body-lg": "p",
+  "body-md": "p",
+  "body-sm": "p",
+  caption: "span"
+};
+function Typography({
+  variant = "body-md",
+  weight = "regular",
+  color = "primary",
+  as,
+  className,
+  children,
+  ...rest
+}) {
+  const Component = as ?? VARIANT_ELEMENT[variant];
+  const classes = [
+    "vpg-typography",
+    `vpg-typography-${variant}`,
+    `vpg-typography-weight-${weight}`,
+    `vpg-typography-color-${color}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { href: "vpg-typography", precedence: "vpg-typography", children: typographyStylesheet }),
+    /* @__PURE__ */ jsx(Component, { ...rest, className: classes, children })
+  ] });
+}
+
+export { Avatar, Button, ButtonGroup, Card, Dropdown, FieldSet, FieldShell, FormField, PasswordInput, Popover, Progress, RadioButton, RadioGroup, Skeleton, Slider, Spinner, Tabs, TextField, Toggle, Tooltip, Typography };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map