@cypress-design/constants-runresults 1.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,3 @@
+
+./src/index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
+created ./dist/index.umd.js, ./dist/index.es.mjs in 7.3s

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @cypress-design/constants-runresults
+
+## 1.0.0
+
+### Major Changes
+
+- [#676](https://github.com/cypress-io/cypress-design/pull/676) [`1531f94`](https://github.com/cypress-io/cypress-design/commit/1531f9439d73493e3eb08c72f41c0e7f0db958de) Thanks [@emilmilanov](https://github.com/emilmilanov)! - Add RunResults component — a pill of test-result counts (passed / failed / skipped / pending) with optional `flaky` and `self-healed` leading stats separated by a vertical divider. Each stat is an icon + count, optionally wrapped in a link (`links` prop or a custom `renderLink` callback) and an optional tooltip. Supports `light` and `dark` themes and an `expanded` mode that shows zero-count regular stats. Available for React and Vue with shared constants. See `components/RunResults/instructions.md` for the full props API.

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+export type StatKey = 'passed' | 'failed' | 'skipped' | 'pending' | 'flaky' | 'selfHealed';
+export declare const RegularStatKeys: readonly ["skipped", "pending", "passed", "failed"];
+export type RegularStatKey = (typeof RegularStatKeys)[number];
+export declare const LeadingStatKeys: readonly ["flaky", "selfHealed"];
+export type LeadingStatKey = (typeof LeadingStatKeys)[number];
+export declare const CssClasses: {
+    readonly container: "inline-flex pointer-events-auto";
+    readonly list: "flex items-center text-[14px] leading-[24px] font-medium list-none border rounded-[4px]";
+    readonly item: "h-full whitespace-nowrap flex items-center";
+    readonly link: "flex items-center h-full w-full px-[6px] no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-500 focus-visible:outline-offset-0";
+    readonly unlinked: "flex items-center h-full w-full px-[6px]";
+    readonly icon: "mx-[4px]";
+    readonly iconFlaky: "mx-[4px] [&_path:first-child]:fill-transparent";
+    readonly iconSelfHealed: "mx-[4px] w-3 h-3";
+    readonly separatorAfter: "after:content-[''] after:border-r after:h-3 after:mx-1 after:self-center";
+};
+export declare const CssTheme: {
+    readonly light: {
+        readonly list: "bg-white text-gray-700 border-gray-100";
+        readonly link: "text-gray-700 hover:bg-gray-50 focus-visible:bg-gray-50";
+        readonly separator: "after:border-gray-100";
+    };
+    readonly dark: {
+        readonly list: "bg-gray-1000 text-gray-400 border-gray-800";
+        readonly link: "text-gray-300 hover:bg-gray-900 focus-visible:bg-gray-900";
+        readonly separator: "after:border-gray-800";
+    };
+};
+export type RunResultsTheme = keyof typeof CssTheme;
+export declare const TooltipColorForTheme: Record<RunResultsTheme, 'light' | 'dark'>;
+export declare const CssTooltipPopperDark = "[&>div]:!text-gray-300 [&>div>div]:!text-[14px] [&>div>div]:!leading-[20px] [&>div>div]:!min-w-0";
+export declare const CssTooltipPopperLight = "[&>div]:!text-gray-700 [&>div>div]:!text-[14px] [&>div>div]:!leading-[20px] [&>div>div]:!min-w-0";
+export declare function getTooltipPlacement(key: StatKey): 'top-start' | 'top-end';
+export declare function statKeyToKebab(key: StatKey): string;
+export declare function getFlakyTooltipText(count: number): string;
+export declare function getTooltipLabel(key: StatKey, count: number, isLinked: boolean): string;
+export interface RunResultsProps {
+    passed: number | null;
+    failed: number | null;
+    skipped: number | null;
+    pending: number | null;
+    flaky?: number | null;
+    selfHealed?: number | null;
+    showSelfHealed?: boolean;
+    theme?: RunResultsTheme;
+    expanded?: boolean;
+    links?: Partial<Record<StatKey, string>>;
+    renderLink?: (href: string, children: unknown) => unknown;
+    showTooltip?: boolean;
+    className?: string;
+}
+export declare function statValue(count: number | null | undefined): number;
+export declare function showRegularStat(count: number | null | undefined, expanded: boolean): boolean;
+export declare function getSeparatorAfterKey(props: Pick<RunResultsProps, 'flaky' | 'selfHealed' | 'showSelfHealed' | 'passed' | 'failed' | 'skipped' | 'pending' | 'expanded'>): LeadingStatKey | null;
+export declare function hasAnyStat(props: Pick<RunResultsProps, 'flaky' | 'selfHealed' | 'showSelfHealed' | 'passed' | 'failed' | 'skipped' | 'pending' | 'expanded'>): boolean;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,OAAO,GACf,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,SAAS,GACT,OAAO,GACP,YAAY,CAAA;AAGhB,eAAO,MAAM,eAAe,qDAKlB,CAAA;AACV,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAG7D,eAAO,MAAM,eAAe,kCAAmC,CAAA;AAC/D,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,eAAO,MAAM,UAAU;;;;;;;;;;CA4Bb,CAAA;AAEV,eAAO,MAAM,QAAQ;;;;;;;;;;;CAWX,CAAA;AAEV,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,QAAQ,CAAA;AAGnD,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,eAAe,EAAE,OAAO,GAAG,MAAM,CAG1E,CAAA;AAYD,eAAO,MAAM,oBAAoB,qGAAmD,CAAA;AACpF,eAAO,MAAM,qBAAqB,qGAAmD,CAAA;AAKrF,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,OAAO,GAAG,WAAW,GAAG,SAAS,CAEzE;AAID,wBAAgB,cAAc,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,CAEnD;AAOD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAIzD;AAID,wBAAgB,eAAe,CAC7B,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,OAAO,GAChB,MAAM,CAMR;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAMrB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAA;IAExB,KAAK,CAAC,EAAE,eAAe,CAAA;IAKvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,KAAK,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;IAGxC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,OAAO,CAAA;IAEzD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAGD,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAElE;AAGD,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAChC,QAAQ,EAAE,OAAO,GAChB,OAAO,CAET;AAWD,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,IAAI,CACT,eAAe,EACb,OAAO,GACP,YAAY,GACZ,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,SAAS,GACT,UAAU,CACb,GACA,cAAc,GAAG,IAAI,CAcvB;AAGD,wBAAgB,UAAU,CACxB,KAAK,EAAE,IAAI,CACT,eAAe,EACb,OAAO,GACP,YAAY,GACZ,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,SAAS,GACT,UAAU,CACb,GACA,OAAO,CAUT"}

package/dist/index.es.mjs

@@ -0,0 +1,138 @@
+// Regular stats (the four primary outcomes). Order is fixed.
+const RegularStatKeys = [
+    'skipped',
+    'pending',
+    'passed',
+    'failed',
+];
+// Leading stats (rendered before the separator). Order is fixed.
+const LeadingStatKeys = ['flaky', 'selfHealed'];
+const CssClasses = {
+    // Outer wrapper. `inline-flex` so the component shrinks to content width.
+    container: 'inline-flex pointer-events-auto',
+    // The <ul> pill itself. Theme overrides border and text colors via CssTheme.
+    list: 'flex items-center text-[14px] leading-[24px] font-medium list-none border rounded-[4px]',
+    // Each <li> stat.
+    item: 'h-full whitespace-nowrap flex items-center',
+    // Inner <a> wrapper for linked stats.
+    link: 'flex items-center h-full w-full px-[6px] no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-500 focus-visible:outline-offset-0',
+    // Inner <span> wrapper for unlinked stats.
+    unlinked: 'flex items-center h-full w-full px-[6px]',
+    // Icon margin matches source `svg { margin: 0 4px }`.
+    icon: 'mx-[4px]',
+    // Flaky icon override — drop the yellow background rect (first path in the
+    // SVG). Matches the source SCSS's `.flakyIcon svg path:first-child { fill:
+    // transparent !important }`. Scoped to this component; the shared
+    // IconStatusFlaky is unchanged.
+    iconFlaky: 'mx-[4px] [&_path:first-child]:fill-transparent',
+    // Self-healed icon override — `IconGeneralSparkleSingleSmall` only ships
+    // a `["16"]` variant in the icon registry, but the rest of the stats
+    // render at 12px. The icon component IS an <svg>, so `w-3 h-3` on the
+    // className overrides the icon's intrinsic `width`/`height` attributes
+    // via CSS and pins the rendered size to 12 × 12 — visual consistency
+    // without depending on a 12px icon variant that doesn't exist.
+    iconSelfHealed: 'mx-[4px] w-3 h-3',
+    // Separator after the last leading <li>. Border color comes from CssTheme.
+    separatorAfter: "after:content-[''] after:border-r after:h-3 after:mx-1 after:self-center",
+};
+const CssTheme = {
+    light: {
+        list: 'bg-white text-gray-700 border-gray-100',
+        link: 'text-gray-700 hover:bg-gray-50 focus-visible:bg-gray-50',
+        separator: 'after:border-gray-100',
+    },
+    dark: {
+        list: 'bg-gray-1000 text-gray-400 border-gray-800',
+        link: 'text-gray-300 hover:bg-gray-900 focus-visible:bg-gray-900',
+        separator: 'after:border-gray-800',
+    },
+};
+// Tooltip color contrasts with the surface the pill sits on.
+const TooltipColorForTheme = {
+    light: 'dark',
+    dark: 'light',
+};
+// RunResults-specific overrides applied via Tooltip's `popperClassName`:
+//   - drop the 160px min-width so the tooltip auto-fits content
+//   - shrink text to 14px / 20px (DS body size; shared Tooltip defaults to 16px / 24px)
+//   - text color: gray-300 for dark tooltips (on light RunResults), gray-700 for light tooltips (on dark RunResults)
+// `[&>div]` targets the colored container inside the popper (where text color
+// is set on the shared Tooltip); `[&>div>div]` targets the inner text container
+// (where font-size / line-height / min-width are set on the shared Tooltip).
+// `!` is required because the shared Tooltip applies these on the same elements.
+const CssTooltipPopperBase = '[&>div>div]:!text-[14px] [&>div>div]:!leading-[20px] [&>div>div]:!min-w-0';
+const CssTooltipPopperDark = `[&>div]:!text-gray-300 ${CssTooltipPopperBase}`;
+const CssTooltipPopperLight = `[&>div]:!text-gray-700 ${CssTooltipPopperBase}`;
+// `top-start` for flaky: left-aligns the tooltip with the stat so the arrow
+// points at the element rather than at the center of a wide tooltip.
+// `top-end` for the rest (right-aligned stats on the right side of the pill).
+function getTooltipPlacement(key) {
+    return key === 'flaky' ? 'top-start' : 'top-end';
+}
+// Convert the API key (camelCase) to the DOM-attribute / display form (kebab-case).
+// Single multi-word case — explicit string match instead of a generic camel→kebab utility.
+function statKeyToKebab(key) {
+    return key === 'selfHealed' ? 'self-healed' : key;
+}
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+// Long-form flaky description used in tooltips (always shown regardless of link).
+function getFlakyTooltipText(count) {
+    return count === 1
+        ? 'This test both passed and failed when retried within a run'
+        : `${count} tests both passed and failed when retried within a run`;
+}
+// Tooltip / aria-label text. `isLinked` flips "View X tests" ↔ "X tests".
+// Flaky linked stat uses "View flaky tests"; tooltip content uses getFlakyTooltipText.
+function getTooltipLabel(key, count, isLinked) {
+    if (key === 'flaky') {
+        return isLinked ? 'View flaky tests' : getFlakyTooltipText(count);
+    }
+    const display = statKeyToKebab(key);
+    return isLinked ? `View ${display} tests` : `${capitalize(display)} tests`;
+}
+// Null-safe count → numeric value for display & visibility logic.
+function statValue(count) {
+    return count ?? 0;
+}
+// Should a regular stat render?
+function showRegularStat(count, expanded) {
+    return expanded || statValue(count) > 0;
+}
+// Which leading key (if any) gets the separator-after modifier?
+// - selfHealed wins if it would render (it's the second leading stat)
+// - else flaky if it would render
+// - else null (no separator at all)
+// Also returns null when there are no regular stats to follow — keep separators
+// from dangling at the end of the pill.
+//
+// Self-healed renders whenever `showSelfHealed` is true (regardless of count);
+// flaky renders only when its count > 0.
+function getSeparatorAfterKey(props) {
+    const showFlaky = statValue(props.flaky) > 0;
+    const showSelfHealed = !!props.showSelfHealed;
+    if (!showFlaky && !showSelfHealed)
+        return null;
+    const expanded = !!props.expanded;
+    const anyRegular = showRegularStat(props.passed, expanded) ||
+        showRegularStat(props.failed, expanded) ||
+        showRegularStat(props.skipped, expanded) ||
+        showRegularStat(props.pending, expanded);
+    if (!anyRegular)
+        return null;
+    return showSelfHealed ? 'selfHealed' : 'flaky';
+}
+// Does anything render at all? Used to short-circuit to `null` on empty state.
+function hasAnyStat(props) {
+    const expanded = !!props.expanded;
+    return (statValue(props.flaky) > 0 ||
+        !!props.showSelfHealed ||
+        showRegularStat(props.passed, expanded) ||
+        showRegularStat(props.failed, expanded) ||
+        showRegularStat(props.skipped, expanded) ||
+        showRegularStat(props.pending, expanded));
+}
+
+export { CssClasses, CssTheme, CssTooltipPopperDark, CssTooltipPopperLight, LeadingStatKeys, RegularStatKeys, TooltipColorForTheme, getFlakyTooltipText, getSeparatorAfterKey, getTooltipLabel, getTooltipPlacement, hasAnyStat, showRegularStat, statKeyToKebab, statValue };
+//# sourceMappingURL=index.es.mjs.map

package/dist/index.es.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.mjs","sources":["../src/index.ts"],"sourcesContent":["// Status keys this component accepts in its API.\n// camelCase to match StatusIcon's multi-word keys (noTests, timedOut, overLimit).\n// `data-cy` attributes use kebab-case (\"self-healed\") — see `statKeyToKebab`.\nexport type StatKey =\n  | 'passed'\n  | 'failed'\n  | 'skipped'\n  | 'pending'\n  | 'flaky'\n  | 'selfHealed'\n\n// Regular stats (the four primary outcomes). Order is fixed.\nexport const RegularStatKeys = [\n  'skipped',\n  'pending',\n  'passed',\n  'failed',\n] as const\nexport type RegularStatKey = (typeof RegularStatKeys)[number]\n\n// Leading stats (rendered before the separator). Order is fixed.\nexport const LeadingStatKeys = ['flaky', 'selfHealed'] as const\nexport type LeadingStatKey = (typeof LeadingStatKeys)[number]\n\nexport const CssClasses = {\n  // Outer wrapper. `inline-flex` so the component shrinks to content width.\n  container: 'inline-flex pointer-events-auto',\n  // The <ul> pill itself. Theme overrides border and text colors via CssTheme.\n  list: 'flex items-center text-[14px] leading-[24px] font-medium list-none border rounded-[4px]',\n  // Each <li> stat.\n  item: 'h-full whitespace-nowrap flex items-center',\n  // Inner <a> wrapper for linked stats.\n  link: 'flex items-center h-full w-full px-[6px] no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-500 focus-visible:outline-offset-0',\n  // Inner <span> wrapper for unlinked stats.\n  unlinked: 'flex items-center h-full w-full px-[6px]',\n  // Icon margin matches source `svg { margin: 0 4px }`.\n  icon: 'mx-[4px]',\n  // Flaky icon override — drop the yellow background rect (first path in the\n  // SVG). Matches the source SCSS's `.flakyIcon svg path:first-child { fill:\n  // transparent !important }`. Scoped to this component; the shared\n  // IconStatusFlaky is unchanged.\n  iconFlaky: 'mx-[4px] [&_path:first-child]:fill-transparent',\n  // Self-healed icon override — `IconGeneralSparkleSingleSmall` only ships\n  // a `[\"16\"]` variant in the icon registry, but the rest of the stats\n  // render at 12px. The icon component IS an <svg>, so `w-3 h-3` on the\n  // className overrides the icon's intrinsic `width`/`height` attributes\n  // via CSS and pins the rendered size to 12 × 12 — visual consistency\n  // without depending on a 12px icon variant that doesn't exist.\n  iconSelfHealed: 'mx-[4px] w-3 h-3',\n  // Separator after the last leading <li>. Border color comes from CssTheme.\n  separatorAfter:\n    \"after:content-[''] after:border-r after:h-3 after:mx-1 after:self-center\",\n} as const\n\nexport const CssTheme = {\n  light: {\n    list: 'bg-white text-gray-700 border-gray-100',\n    link: 'text-gray-700 hover:bg-gray-50 focus-visible:bg-gray-50',\n    separator: 'after:border-gray-100',\n  },\n  dark: {\n    list: 'bg-gray-1000 text-gray-400 border-gray-800',\n    link: 'text-gray-300 hover:bg-gray-900 focus-visible:bg-gray-900',\n    separator: 'after:border-gray-800',\n  },\n} as const\n\nexport type RunResultsTheme = keyof typeof CssTheme\n\n// Tooltip color contrasts with the surface the pill sits on.\nexport const TooltipColorForTheme: Record<RunResultsTheme, 'light' | 'dark'> = {\n  light: 'dark',\n  dark: 'light',\n}\n\n// RunResults-specific overrides applied via Tooltip's `popperClassName`:\n//   - drop the 160px min-width so the tooltip auto-fits content\n//   - shrink text to 14px / 20px (DS body size; shared Tooltip defaults to 16px / 24px)\n//   - text color: gray-300 for dark tooltips (on light RunResults), gray-700 for light tooltips (on dark RunResults)\n// `[&>div]` targets the colored container inside the popper (where text color\n// is set on the shared Tooltip); `[&>div>div]` targets the inner text container\n// (where font-size / line-height / min-width are set on the shared Tooltip).\n// `!` is required because the shared Tooltip applies these on the same elements.\nconst CssTooltipPopperBase =\n  '[&>div>div]:!text-[14px] [&>div>div]:!leading-[20px] [&>div>div]:!min-w-0'\nexport const CssTooltipPopperDark = `[&>div]:!text-gray-300 ${CssTooltipPopperBase}`\nexport const CssTooltipPopperLight = `[&>div]:!text-gray-700 ${CssTooltipPopperBase}`\n\n// `top-start` for flaky: left-aligns the tooltip with the stat so the arrow\n// points at the element rather than at the center of a wide tooltip.\n// `top-end` for the rest (right-aligned stats on the right side of the pill).\nexport function getTooltipPlacement(key: StatKey): 'top-start' | 'top-end' {\n  return key === 'flaky' ? 'top-start' : 'top-end'\n}\n\n// Convert the API key (camelCase) to the DOM-attribute / display form (kebab-case).\n// Single multi-word case — explicit string match instead of a generic camel→kebab utility.\nexport function statKeyToKebab(key: StatKey): string {\n  return key === 'selfHealed' ? 'self-healed' : key\n}\n\nfunction capitalize(str: string): string {\n  return str.charAt(0).toUpperCase() + str.slice(1)\n}\n\n// Long-form flaky description used in tooltips (always shown regardless of link).\nexport function getFlakyTooltipText(count: number): string {\n  return count === 1\n    ? 'This test both passed and failed when retried within a run'\n    : `${count} tests both passed and failed when retried within a run`\n}\n\n// Tooltip / aria-label text. `isLinked` flips \"View X tests\" ↔ \"X tests\".\n// Flaky linked stat uses \"View flaky tests\"; tooltip content uses getFlakyTooltipText.\nexport function getTooltipLabel(\n  key: StatKey,\n  count: number,\n  isLinked: boolean,\n): string {\n  if (key === 'flaky') {\n    return isLinked ? 'View flaky tests' : getFlakyTooltipText(count)\n  }\n  const display = statKeyToKebab(key)\n  return isLinked ? `View ${display} tests` : `${capitalize(display)} tests`\n}\n\nexport interface RunResultsProps {\n  passed: number | null\n  failed: number | null\n  skipped: number | null\n  pending: number | null\n  flaky?: number | null\n\n  // Self-healed (independent of flaky). Rendered whenever `showSelfHealed`\n  // is true — the count (including 0, including `null` coerced to 0) is shown\n  // verbatim. Consumers set the flag based on whether the run could have\n  // self-healed tests at all (e.g. `cy.prompt` was available).\n  selfHealed?: number | null\n  showSelfHealed?: boolean\n\n  theme?: RunResultsTheme\n  // When true, regular stats render even with a zero count.\n  // Does NOT affect leading stats. Flaky still renders only when its count\n  // is > 0; self-healed renders whenever `showSelfHealed` is true (including\n  // count 0). See `getSeparatorAfterKey` and `hasAnyStat` for the exact rules.\n  expanded?: boolean\n\n  links?: Partial<Record<StatKey, string>>\n  // Same signature in React and Vue. `children` is whatever the framework\n  // renders for the inner icon + count.\n  renderLink?: (href: string, children: unknown) => unknown\n\n  showTooltip?: boolean\n  className?: string\n}\n\n// Null-safe count → numeric value for display & visibility logic.\nexport function statValue(count: number | null | undefined): number {\n  return count ?? 0\n}\n\n// Should a regular stat render?\nexport function showRegularStat(\n  count: number | null | undefined,\n  expanded: boolean,\n): boolean {\n  return expanded || statValue(count) > 0\n}\n\n// Which leading key (if any) gets the separator-after modifier?\n// - selfHealed wins if it would render (it's the second leading stat)\n// - else flaky if it would render\n// - else null (no separator at all)\n// Also returns null when there are no regular stats to follow — keep separators\n// from dangling at the end of the pill.\n//\n// Self-healed renders whenever `showSelfHealed` is true (regardless of count);\n// flaky renders only when its count > 0.\nexport function getSeparatorAfterKey(\n  props: Pick<\n    RunResultsProps,\n    | 'flaky'\n    | 'selfHealed'\n    | 'showSelfHealed'\n    | 'passed'\n    | 'failed'\n    | 'skipped'\n    | 'pending'\n    | 'expanded'\n  >,\n): LeadingStatKey | null {\n  const showFlaky = statValue(props.flaky) > 0\n  const showSelfHealed = !!props.showSelfHealed\n  if (!showFlaky && !showSelfHealed) return null\n\n  const expanded = !!props.expanded\n  const anyRegular =\n    showRegularStat(props.passed, expanded) ||\n    showRegularStat(props.failed, expanded) ||\n    showRegularStat(props.skipped, expanded) ||\n    showRegularStat(props.pending, expanded)\n  if (!anyRegular) return null\n\n  return showSelfHealed ? 'selfHealed' : 'flaky'\n}\n\n// Does anything render at all? Used to short-circuit to `null` on empty state.\nexport function hasAnyStat(\n  props: Pick<\n    RunResultsProps,\n    | 'flaky'\n    | 'selfHealed'\n    | 'showSelfHealed'\n    | 'passed'\n    | 'failed'\n    | 'skipped'\n    | 'pending'\n    | 'expanded'\n  >,\n): boolean {\n  const expanded = !!props.expanded\n  return (\n    statValue(props.flaky) > 0 ||\n    !!props.showSelfHealed ||\n    showRegularStat(props.passed, expanded) ||\n    showRegularStat(props.failed, expanded) ||\n    showRegularStat(props.skipped, expanded) ||\n    showRegularStat(props.pending, expanded)\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/index.umd.js

@@ -0,0 +1,154 @@
+'use strict';
+
+// Regular stats (the four primary outcomes). Order is fixed.
+const RegularStatKeys = [
+    'skipped',
+    'pending',
+    'passed',
+    'failed',
+];
+// Leading stats (rendered before the separator). Order is fixed.
+const LeadingStatKeys = ['flaky', 'selfHealed'];
+const CssClasses = {
+    // Outer wrapper. `inline-flex` so the component shrinks to content width.
+    container: 'inline-flex pointer-events-auto',
+    // The <ul> pill itself. Theme overrides border and text colors via CssTheme.
+    list: 'flex items-center text-[14px] leading-[24px] font-medium list-none border rounded-[4px]',
+    // Each <li> stat.
+    item: 'h-full whitespace-nowrap flex items-center',
+    // Inner <a> wrapper for linked stats.
+    link: 'flex items-center h-full w-full px-[6px] no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-500 focus-visible:outline-offset-0',
+    // Inner <span> wrapper for unlinked stats.
+    unlinked: 'flex items-center h-full w-full px-[6px]',
+    // Icon margin matches source `svg { margin: 0 4px }`.
+    icon: 'mx-[4px]',
+    // Flaky icon override — drop the yellow background rect (first path in the
+    // SVG). Matches the source SCSS's `.flakyIcon svg path:first-child { fill:
+    // transparent !important }`. Scoped to this component; the shared
+    // IconStatusFlaky is unchanged.
+    iconFlaky: 'mx-[4px] [&_path:first-child]:fill-transparent',
+    // Self-healed icon override — `IconGeneralSparkleSingleSmall` only ships
+    // a `["16"]` variant in the icon registry, but the rest of the stats
+    // render at 12px. The icon component IS an <svg>, so `w-3 h-3` on the
+    // className overrides the icon's intrinsic `width`/`height` attributes
+    // via CSS and pins the rendered size to 12 × 12 — visual consistency
+    // without depending on a 12px icon variant that doesn't exist.
+    iconSelfHealed: 'mx-[4px] w-3 h-3',
+    // Separator after the last leading <li>. Border color comes from CssTheme.
+    separatorAfter: "after:content-[''] after:border-r after:h-3 after:mx-1 after:self-center",
+};
+const CssTheme = {
+    light: {
+        list: 'bg-white text-gray-700 border-gray-100',
+        link: 'text-gray-700 hover:bg-gray-50 focus-visible:bg-gray-50',
+        separator: 'after:border-gray-100',
+    },
+    dark: {
+        list: 'bg-gray-1000 text-gray-400 border-gray-800',
+        link: 'text-gray-300 hover:bg-gray-900 focus-visible:bg-gray-900',
+        separator: 'after:border-gray-800',
+    },
+};
+// Tooltip color contrasts with the surface the pill sits on.
+const TooltipColorForTheme = {
+    light: 'dark',
+    dark: 'light',
+};
+// RunResults-specific overrides applied via Tooltip's `popperClassName`:
+//   - drop the 160px min-width so the tooltip auto-fits content
+//   - shrink text to 14px / 20px (DS body size; shared Tooltip defaults to 16px / 24px)
+//   - text color: gray-300 for dark tooltips (on light RunResults), gray-700 for light tooltips (on dark RunResults)
+// `[&>div]` targets the colored container inside the popper (where text color
+// is set on the shared Tooltip); `[&>div>div]` targets the inner text container
+// (where font-size / line-height / min-width are set on the shared Tooltip).
+// `!` is required because the shared Tooltip applies these on the same elements.
+const CssTooltipPopperBase = '[&>div>div]:!text-[14px] [&>div>div]:!leading-[20px] [&>div>div]:!min-w-0';
+const CssTooltipPopperDark = `[&>div]:!text-gray-300 ${CssTooltipPopperBase}`;
+const CssTooltipPopperLight = `[&>div]:!text-gray-700 ${CssTooltipPopperBase}`;
+// `top-start` for flaky: left-aligns the tooltip with the stat so the arrow
+// points at the element rather than at the center of a wide tooltip.
+// `top-end` for the rest (right-aligned stats on the right side of the pill).
+function getTooltipPlacement(key) {
+    return key === 'flaky' ? 'top-start' : 'top-end';
+}
+// Convert the API key (camelCase) to the DOM-attribute / display form (kebab-case).
+// Single multi-word case — explicit string match instead of a generic camel→kebab utility.
+function statKeyToKebab(key) {
+    return key === 'selfHealed' ? 'self-healed' : key;
+}
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+// Long-form flaky description used in tooltips (always shown regardless of link).
+function getFlakyTooltipText(count) {
+    return count === 1
+        ? 'This test both passed and failed when retried within a run'
+        : `${count} tests both passed and failed when retried within a run`;
+}
+// Tooltip / aria-label text. `isLinked` flips "View X tests" ↔ "X tests".
+// Flaky linked stat uses "View flaky tests"; tooltip content uses getFlakyTooltipText.
+function getTooltipLabel(key, count, isLinked) {
+    if (key === 'flaky') {
+        return isLinked ? 'View flaky tests' : getFlakyTooltipText(count);
+    }
+    const display = statKeyToKebab(key);
+    return isLinked ? `View ${display} tests` : `${capitalize(display)} tests`;
+}
+// Null-safe count → numeric value for display & visibility logic.
+function statValue(count) {
+    return count ?? 0;
+}
+// Should a regular stat render?
+function showRegularStat(count, expanded) {
+    return expanded || statValue(count) > 0;
+}
+// Which leading key (if any) gets the separator-after modifier?
+// - selfHealed wins if it would render (it's the second leading stat)
+// - else flaky if it would render
+// - else null (no separator at all)
+// Also returns null when there are no regular stats to follow — keep separators
+// from dangling at the end of the pill.
+//
+// Self-healed renders whenever `showSelfHealed` is true (regardless of count);
+// flaky renders only when its count > 0.
+function getSeparatorAfterKey(props) {
+    const showFlaky = statValue(props.flaky) > 0;
+    const showSelfHealed = !!props.showSelfHealed;
+    if (!showFlaky && !showSelfHealed)
+        return null;
+    const expanded = !!props.expanded;
+    const anyRegular = showRegularStat(props.passed, expanded) ||
+        showRegularStat(props.failed, expanded) ||
+        showRegularStat(props.skipped, expanded) ||
+        showRegularStat(props.pending, expanded);
+    if (!anyRegular)
+        return null;
+    return showSelfHealed ? 'selfHealed' : 'flaky';
+}
+// Does anything render at all? Used to short-circuit to `null` on empty state.
+function hasAnyStat(props) {
+    const expanded = !!props.expanded;
+    return (statValue(props.flaky) > 0 ||
+        !!props.showSelfHealed ||
+        showRegularStat(props.passed, expanded) ||
+        showRegularStat(props.failed, expanded) ||
+        showRegularStat(props.skipped, expanded) ||
+        showRegularStat(props.pending, expanded));
+}
+
+exports.CssClasses = CssClasses;
+exports.CssTheme = CssTheme;
+exports.CssTooltipPopperDark = CssTooltipPopperDark;
+exports.CssTooltipPopperLight = CssTooltipPopperLight;
+exports.LeadingStatKeys = LeadingStatKeys;
+exports.RegularStatKeys = RegularStatKeys;
+exports.TooltipColorForTheme = TooltipColorForTheme;
+exports.getFlakyTooltipText = getFlakyTooltipText;
+exports.getSeparatorAfterKey = getSeparatorAfterKey;
+exports.getTooltipLabel = getTooltipLabel;
+exports.getTooltipPlacement = getTooltipPlacement;
+exports.hasAnyStat = hasAnyStat;
+exports.showRegularStat = showRegularStat;
+exports.statKeyToKebab = statKeyToKebab;
+exports.statValue = statValue;
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/index.ts"],"sourcesContent":["// Status keys this component accepts in its API.\n// camelCase to match StatusIcon's multi-word keys (noTests, timedOut, overLimit).\n// `data-cy` attributes use kebab-case (\"self-healed\") — see `statKeyToKebab`.\nexport type StatKey =\n  | 'passed'\n  | 'failed'\n  | 'skipped'\n  | 'pending'\n  | 'flaky'\n  | 'selfHealed'\n\n// Regular stats (the four primary outcomes). Order is fixed.\nexport const RegularStatKeys = [\n  'skipped',\n  'pending',\n  'passed',\n  'failed',\n] as const\nexport type RegularStatKey = (typeof RegularStatKeys)[number]\n\n// Leading stats (rendered before the separator). Order is fixed.\nexport const LeadingStatKeys = ['flaky', 'selfHealed'] as const\nexport type LeadingStatKey = (typeof LeadingStatKeys)[number]\n\nexport const CssClasses = {\n  // Outer wrapper. `inline-flex` so the component shrinks to content width.\n  container: 'inline-flex pointer-events-auto',\n  // The <ul> pill itself. Theme overrides border and text colors via CssTheme.\n  list: 'flex items-center text-[14px] leading-[24px] font-medium list-none border rounded-[4px]',\n  // Each <li> stat.\n  item: 'h-full whitespace-nowrap flex items-center',\n  // Inner <a> wrapper for linked stats.\n  link: 'flex items-center h-full w-full px-[6px] no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-500 focus-visible:outline-offset-0',\n  // Inner <span> wrapper for unlinked stats.\n  unlinked: 'flex items-center h-full w-full px-[6px]',\n  // Icon margin matches source `svg { margin: 0 4px }`.\n  icon: 'mx-[4px]',\n  // Flaky icon override — drop the yellow background rect (first path in the\n  // SVG). Matches the source SCSS's `.flakyIcon svg path:first-child { fill:\n  // transparent !important }`. Scoped to this component; the shared\n  // IconStatusFlaky is unchanged.\n  iconFlaky: 'mx-[4px] [&_path:first-child]:fill-transparent',\n  // Self-healed icon override — `IconGeneralSparkleSingleSmall` only ships\n  // a `[\"16\"]` variant in the icon registry, but the rest of the stats\n  // render at 12px. The icon component IS an <svg>, so `w-3 h-3` on the\n  // className overrides the icon's intrinsic `width`/`height` attributes\n  // via CSS and pins the rendered size to 12 × 12 — visual consistency\n  // without depending on a 12px icon variant that doesn't exist.\n  iconSelfHealed: 'mx-[4px] w-3 h-3',\n  // Separator after the last leading <li>. Border color comes from CssTheme.\n  separatorAfter:\n    \"after:content-[''] after:border-r after:h-3 after:mx-1 after:self-center\",\n} as const\n\nexport const CssTheme = {\n  light: {\n    list: 'bg-white text-gray-700 border-gray-100',\n    link: 'text-gray-700 hover:bg-gray-50 focus-visible:bg-gray-50',\n    separator: 'after:border-gray-100',\n  },\n  dark: {\n    list: 'bg-gray-1000 text-gray-400 border-gray-800',\n    link: 'text-gray-300 hover:bg-gray-900 focus-visible:bg-gray-900',\n    separator: 'after:border-gray-800',\n  },\n} as const\n\nexport type RunResultsTheme = keyof typeof CssTheme\n\n// Tooltip color contrasts with the surface the pill sits on.\nexport const TooltipColorForTheme: Record<RunResultsTheme, 'light' | 'dark'> = {\n  light: 'dark',\n  dark: 'light',\n}\n\n// RunResults-specific overrides applied via Tooltip's `popperClassName`:\n//   - drop the 160px min-width so the tooltip auto-fits content\n//   - shrink text to 14px / 20px (DS body size; shared Tooltip defaults to 16px / 24px)\n//   - text color: gray-300 for dark tooltips (on light RunResults), gray-700 for light tooltips (on dark RunResults)\n// `[&>div]` targets the colored container inside the popper (where text color\n// is set on the shared Tooltip); `[&>div>div]` targets the inner text container\n// (where font-size / line-height / min-width are set on the shared Tooltip).\n// `!` is required because the shared Tooltip applies these on the same elements.\nconst CssTooltipPopperBase =\n  '[&>div>div]:!text-[14px] [&>div>div]:!leading-[20px] [&>div>div]:!min-w-0'\nexport const CssTooltipPopperDark = `[&>div]:!text-gray-300 ${CssTooltipPopperBase}`\nexport const CssTooltipPopperLight = `[&>div]:!text-gray-700 ${CssTooltipPopperBase}`\n\n// `top-start` for flaky: left-aligns the tooltip with the stat so the arrow\n// points at the element rather than at the center of a wide tooltip.\n// `top-end` for the rest (right-aligned stats on the right side of the pill).\nexport function getTooltipPlacement(key: StatKey): 'top-start' | 'top-end' {\n  return key === 'flaky' ? 'top-start' : 'top-end'\n}\n\n// Convert the API key (camelCase) to the DOM-attribute / display form (kebab-case).\n// Single multi-word case — explicit string match instead of a generic camel→kebab utility.\nexport function statKeyToKebab(key: StatKey): string {\n  return key === 'selfHealed' ? 'self-healed' : key\n}\n\nfunction capitalize(str: string): string {\n  return str.charAt(0).toUpperCase() + str.slice(1)\n}\n\n// Long-form flaky description used in tooltips (always shown regardless of link).\nexport function getFlakyTooltipText(count: number): string {\n  return count === 1\n    ? 'This test both passed and failed when retried within a run'\n    : `${count} tests both passed and failed when retried within a run`\n}\n\n// Tooltip / aria-label text. `isLinked` flips \"View X tests\" ↔ \"X tests\".\n// Flaky linked stat uses \"View flaky tests\"; tooltip content uses getFlakyTooltipText.\nexport function getTooltipLabel(\n  key: StatKey,\n  count: number,\n  isLinked: boolean,\n): string {\n  if (key === 'flaky') {\n    return isLinked ? 'View flaky tests' : getFlakyTooltipText(count)\n  }\n  const display = statKeyToKebab(key)\n  return isLinked ? `View ${display} tests` : `${capitalize(display)} tests`\n}\n\nexport interface RunResultsProps {\n  passed: number | null\n  failed: number | null\n  skipped: number | null\n  pending: number | null\n  flaky?: number | null\n\n  // Self-healed (independent of flaky). Rendered whenever `showSelfHealed`\n  // is true — the count (including 0, including `null` coerced to 0) is shown\n  // verbatim. Consumers set the flag based on whether the run could have\n  // self-healed tests at all (e.g. `cy.prompt` was available).\n  selfHealed?: number | null\n  showSelfHealed?: boolean\n\n  theme?: RunResultsTheme\n  // When true, regular stats render even with a zero count.\n  // Does NOT affect leading stats. Flaky still renders only when its count\n  // is > 0; self-healed renders whenever `showSelfHealed` is true (including\n  // count 0). See `getSeparatorAfterKey` and `hasAnyStat` for the exact rules.\n  expanded?: boolean\n\n  links?: Partial<Record<StatKey, string>>\n  // Same signature in React and Vue. `children` is whatever the framework\n  // renders for the inner icon + count.\n  renderLink?: (href: string, children: unknown) => unknown\n\n  showTooltip?: boolean\n  className?: string\n}\n\n// Null-safe count → numeric value for display & visibility logic.\nexport function statValue(count: number | null | undefined): number {\n  return count ?? 0\n}\n\n// Should a regular stat render?\nexport function showRegularStat(\n  count: number | null | undefined,\n  expanded: boolean,\n): boolean {\n  return expanded || statValue(count) > 0\n}\n\n// Which leading key (if any) gets the separator-after modifier?\n// - selfHealed wins if it would render (it's the second leading stat)\n// - else flaky if it would render\n// - else null (no separator at all)\n// Also returns null when there are no regular stats to follow — keep separators\n// from dangling at the end of the pill.\n//\n// Self-healed renders whenever `showSelfHealed` is true (regardless of count);\n// flaky renders only when its count > 0.\nexport function getSeparatorAfterKey(\n  props: Pick<\n    RunResultsProps,\n    | 'flaky'\n    | 'selfHealed'\n    | 'showSelfHealed'\n    | 'passed'\n    | 'failed'\n    | 'skipped'\n    | 'pending'\n    | 'expanded'\n  >,\n): LeadingStatKey | null {\n  const showFlaky = statValue(props.flaky) > 0\n  const showSelfHealed = !!props.showSelfHealed\n  if (!showFlaky && !showSelfHealed) return null\n\n  const expanded = !!props.expanded\n  const anyRegular =\n    showRegularStat(props.passed, expanded) ||\n    showRegularStat(props.failed, expanded) ||\n    showRegularStat(props.skipped, expanded) ||\n    showRegularStat(props.pending, expanded)\n  if (!anyRegular) return null\n\n  return showSelfHealed ? 'selfHealed' : 'flaky'\n}\n\n// Does anything render at all? Used to short-circuit to `null` on empty state.\nexport function hasAnyStat(\n  props: Pick<\n    RunResultsProps,\n    | 'flaky'\n    | 'selfHealed'\n    | 'showSelfHealed'\n    | 'passed'\n    | 'failed'\n    | 'skipped'\n    | 'pending'\n    | 'expanded'\n  >,\n): boolean {\n  const expanded = !!props.expanded\n  return (\n    statValue(props.flaky) > 0 ||\n    !!props.showSelfHealed ||\n    showRegularStat(props.passed, expanded) ||\n    showRegularStat(props.failed, expanded) ||\n    showRegularStat(props.skipped, expanded) ||\n    showRegularStat(props.pending, expanded)\n  )\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@cypress-design/constants-runresults",
+  "version": "1.0.0",
+  "files": [
+    "*"
+  ],
+  "main": "dist/index.umd.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.mjs",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "rollup -c ./rollup.config.mjs"
+  },
+  "license": "MIT"
+}

package/rollup.config.mjs

@@ -0,0 +1,6 @@
+import rootRollupConfig from '../../const.rollup.config.mjs'
+import pkg from './package.json' with { type: 'json' }
+
+export default rootRollupConfig({
+  external: Object.keys(pkg.dependencies ?? {}),
+})

package/src/index.ts

@@ -0,0 +1,230 @@
+// Status keys this component accepts in its API.
+// camelCase to match StatusIcon's multi-word keys (noTests, timedOut, overLimit).
+// `data-cy` attributes use kebab-case ("self-healed") — see `statKeyToKebab`.
+export type StatKey =
+  | 'passed'
+  | 'failed'
+  | 'skipped'
+  | 'pending'
+  | 'flaky'
+  | 'selfHealed'
+
+// Regular stats (the four primary outcomes). Order is fixed.
+export const RegularStatKeys = [
+  'skipped',
+  'pending',
+  'passed',
+  'failed',
+] as const
+export type RegularStatKey = (typeof RegularStatKeys)[number]
+
+// Leading stats (rendered before the separator). Order is fixed.
+export const LeadingStatKeys = ['flaky', 'selfHealed'] as const
+export type LeadingStatKey = (typeof LeadingStatKeys)[number]
+
+export const CssClasses = {
+  // Outer wrapper. `inline-flex` so the component shrinks to content width.
+  container: 'inline-flex pointer-events-auto',
+  // The <ul> pill itself. Theme overrides border and text colors via CssTheme.
+  list: 'flex items-center text-[14px] leading-[24px] font-medium list-none border rounded-[4px]',
+  // Each <li> stat.
+  item: 'h-full whitespace-nowrap flex items-center',
+  // Inner <a> wrapper for linked stats.
+  link: 'flex items-center h-full w-full px-[6px] no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-500 focus-visible:outline-offset-0',
+  // Inner <span> wrapper for unlinked stats.
+  unlinked: 'flex items-center h-full w-full px-[6px]',
+  // Icon margin matches source `svg { margin: 0 4px }`.
+  icon: 'mx-[4px]',
+  // Flaky icon override — drop the yellow background rect (first path in the
+  // SVG). Matches the source SCSS's `.flakyIcon svg path:first-child { fill:
+  // transparent !important }`. Scoped to this component; the shared
+  // IconStatusFlaky is unchanged.
+  iconFlaky: 'mx-[4px] [&_path:first-child]:fill-transparent',
+  // Self-healed icon override — `IconGeneralSparkleSingleSmall` only ships
+  // a `["16"]` variant in the icon registry, but the rest of the stats
+  // render at 12px. The icon component IS an <svg>, so `w-3 h-3` on the
+  // className overrides the icon's intrinsic `width`/`height` attributes
+  // via CSS and pins the rendered size to 12 × 12 — visual consistency
+  // without depending on a 12px icon variant that doesn't exist.
+  iconSelfHealed: 'mx-[4px] w-3 h-3',
+  // Separator after the last leading <li>. Border color comes from CssTheme.
+  separatorAfter:
+    "after:content-[''] after:border-r after:h-3 after:mx-1 after:self-center",
+} as const
+
+export const CssTheme = {
+  light: {
+    list: 'bg-white text-gray-700 border-gray-100',
+    link: 'text-gray-700 hover:bg-gray-50 focus-visible:bg-gray-50',
+    separator: 'after:border-gray-100',
+  },
+  dark: {
+    list: 'bg-gray-1000 text-gray-400 border-gray-800',
+    link: 'text-gray-300 hover:bg-gray-900 focus-visible:bg-gray-900',
+    separator: 'after:border-gray-800',
+  },
+} as const
+
+export type RunResultsTheme = keyof typeof CssTheme
+
+// Tooltip color contrasts with the surface the pill sits on.
+export const TooltipColorForTheme: Record<RunResultsTheme, 'light' | 'dark'> = {
+  light: 'dark',
+  dark: 'light',
+}
+
+// RunResults-specific overrides applied via Tooltip's `popperClassName`:
+//   - drop the 160px min-width so the tooltip auto-fits content
+//   - shrink text to 14px / 20px (DS body size; shared Tooltip defaults to 16px / 24px)
+//   - text color: gray-300 for dark tooltips (on light RunResults), gray-700 for light tooltips (on dark RunResults)
+// `[&>div]` targets the colored container inside the popper (where text color
+// is set on the shared Tooltip); `[&>div>div]` targets the inner text container
+// (where font-size / line-height / min-width are set on the shared Tooltip).
+// `!` is required because the shared Tooltip applies these on the same elements.
+const CssTooltipPopperBase =
+  '[&>div>div]:!text-[14px] [&>div>div]:!leading-[20px] [&>div>div]:!min-w-0'
+export const CssTooltipPopperDark = `[&>div]:!text-gray-300 ${CssTooltipPopperBase}`
+export const CssTooltipPopperLight = `[&>div]:!text-gray-700 ${CssTooltipPopperBase}`
+
+// `top-start` for flaky: left-aligns the tooltip with the stat so the arrow
+// points at the element rather than at the center of a wide tooltip.
+// `top-end` for the rest (right-aligned stats on the right side of the pill).
+export function getTooltipPlacement(key: StatKey): 'top-start' | 'top-end' {
+  return key === 'flaky' ? 'top-start' : 'top-end'
+}
+
+// Convert the API key (camelCase) to the DOM-attribute / display form (kebab-case).
+// Single multi-word case — explicit string match instead of a generic camel→kebab utility.
+export function statKeyToKebab(key: StatKey): string {
+  return key === 'selfHealed' ? 'self-healed' : key
+}
+
+function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+// Long-form flaky description used in tooltips (always shown regardless of link).
+export function getFlakyTooltipText(count: number): string {
+  return count === 1
+    ? 'This test both passed and failed when retried within a run'
+    : `${count} tests both passed and failed when retried within a run`
+}
+
+// Tooltip / aria-label text. `isLinked` flips "View X tests" ↔ "X tests".
+// Flaky linked stat uses "View flaky tests"; tooltip content uses getFlakyTooltipText.
+export function getTooltipLabel(
+  key: StatKey,
+  count: number,
+  isLinked: boolean,
+): string {
+  if (key === 'flaky') {
+    return isLinked ? 'View flaky tests' : getFlakyTooltipText(count)
+  }
+  const display = statKeyToKebab(key)
+  return isLinked ? `View ${display} tests` : `${capitalize(display)} tests`
+}
+
+export interface RunResultsProps {
+  passed: number | null
+  failed: number | null
+  skipped: number | null
+  pending: number | null
+  flaky?: number | null
+
+  // Self-healed (independent of flaky). Rendered whenever `showSelfHealed`
+  // is true — the count (including 0, including `null` coerced to 0) is shown
+  // verbatim. Consumers set the flag based on whether the run could have
+  // self-healed tests at all (e.g. `cy.prompt` was available).
+  selfHealed?: number | null
+  showSelfHealed?: boolean
+
+  theme?: RunResultsTheme
+  // When true, regular stats render even with a zero count.
+  // Does NOT affect leading stats. Flaky still renders only when its count
+  // is > 0; self-healed renders whenever `showSelfHealed` is true (including
+  // count 0). See `getSeparatorAfterKey` and `hasAnyStat` for the exact rules.
+  expanded?: boolean
+
+  links?: Partial<Record<StatKey, string>>
+  // Same signature in React and Vue. `children` is whatever the framework
+  // renders for the inner icon + count.
+  renderLink?: (href: string, children: unknown) => unknown
+
+  showTooltip?: boolean
+  className?: string
+}
+
+// Null-safe count → numeric value for display & visibility logic.
+export function statValue(count: number | null | undefined): number {
+  return count ?? 0
+}
+
+// Should a regular stat render?
+export function showRegularStat(
+  count: number | null | undefined,
+  expanded: boolean,
+): boolean {
+  return expanded || statValue(count) > 0
+}
+
+// Which leading key (if any) gets the separator-after modifier?
+// - selfHealed wins if it would render (it's the second leading stat)
+// - else flaky if it would render
+// - else null (no separator at all)
+// Also returns null when there are no regular stats to follow — keep separators
+// from dangling at the end of the pill.
+//
+// Self-healed renders whenever `showSelfHealed` is true (regardless of count);
+// flaky renders only when its count > 0.
+export function getSeparatorAfterKey(
+  props: Pick<
+    RunResultsProps,
+    | 'flaky'
+    | 'selfHealed'
+    | 'showSelfHealed'
+    | 'passed'
+    | 'failed'
+    | 'skipped'
+    | 'pending'
+    | 'expanded'
+  >,
+): LeadingStatKey | null {
+  const showFlaky = statValue(props.flaky) > 0
+  const showSelfHealed = !!props.showSelfHealed
+  if (!showFlaky && !showSelfHealed) return null
+
+  const expanded = !!props.expanded
+  const anyRegular =
+    showRegularStat(props.passed, expanded) ||
+    showRegularStat(props.failed, expanded) ||
+    showRegularStat(props.skipped, expanded) ||
+    showRegularStat(props.pending, expanded)
+  if (!anyRegular) return null
+
+  return showSelfHealed ? 'selfHealed' : 'flaky'
+}
+
+// Does anything render at all? Used to short-circuit to `null` on empty state.
+export function hasAnyStat(
+  props: Pick<
+    RunResultsProps,
+    | 'flaky'
+    | 'selfHealed'
+    | 'showSelfHealed'
+    | 'passed'
+    | 'failed'
+    | 'skipped'
+    | 'pending'
+    | 'expanded'
+  >,
+): boolean {
+  const expanded = !!props.expanded
+  return (
+    statValue(props.flaky) > 0 ||
+    !!props.showSelfHealed ||
+    showRegularStat(props.passed, expanded) ||
+    showRegularStat(props.failed, expanded) ||
+    showRegularStat(props.skipped, expanded) ||
+    showRegularStat(props.pending, expanded)
+  )
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src/*.ts"],
+  "compilerOptions": {
+    "rootDir": "./src",
+    "noEmit": false,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "dist",
+    "types": []
+  }
+}