@epilot/zenith-react 0.2.0-next.4 → 0.2.0-next.5

package/dist/components/toggle/toggle.js

@@ -1,17 +1,17 @@
 import { jsx as m } from "react/jsx-runtime";
 import * as i from "react";
 import { Toggle as u } from "../../_virtual/_zenith-runtime-family_toggle.js";
-import { mergeClasses as h, SLOT_ATTR as f, shorthands as r } from "@epilot/zenith-runtime/v1";
+import { mergeClasses as f, SLOT_ATTR as h, shorthands as o } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as p } from "../../styles/make-styles.js";
 import { nativeControl as b } from "../../styles/host-reset.js";
-import { errorA4 as S, errorOnSoft as v, errorA3 as y, errorSoft as C, errorLight as T, accentA4 as k, accentOnSoft as x, accentA3 as R, accentSoft as W, accentLight as A, focusRing as E, fontWeightSemibold as I, radius2xl as w, spacingElement2 as L, radiusXl as O, radiusLg as P, spacingElement1 as D } from "../../tokens/index.js";
+import { errorA4 as y, errorOnSoft as S, errorA3 as v, errorSoft as C, errorLight as T, accentA4 as k, accentOnSoft as x, accentA3 as R, accentSoft as W, accentLight as A, focusRing as E, fontWeightSemibold as I, radius2xl as w, spacingElement2 as L, radiusXl as O, radiusLg as P, spacingElement1 as D } from "../../tokens/index.js";
 const j = p({
   root: {
     ...b,
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    ...r.gap(D),
+    ...o.gap(D),
     flexShrink: 0,
     cursor: "pointer",
     fontWeight: I,
@@ -21,8 +21,8 @@ const j = p({
     "@media (prefers-reduced-motion: reduce)": {
       transitionDuration: "0.01ms"
     },
-    ...r.borderStyle("none"),
-    ...r.borderWidth(0),
+    ...o.borderStyle("none"),
+    ...o.borderWidth(0),
     ":focus-visible": {
       outlineWidth: "2px",
       outlineOffset: "2px",
@@ -61,19 +61,19 @@ const j = p({
       backgroundColor: C
     },
     "&[data-pressed]": {
-      backgroundColor: y,
-      color: v
+      backgroundColor: v,
+      color: S
     },
     "&[data-pressed]:hover": {
-      backgroundColor: S
+      backgroundColor: y
     }
   },
   // Sizes
   sm: {
     height: "1.5rem",
     minWidth: "1.5rem",
-    ...r.borderRadius(P),
-    ...r.paddingInline("0.375rem"),
+    ...o.borderRadius(P),
+    ...o.paddingInline("0.375rem"),
     "& svg": {
       width: "0.875rem",
       height: "0.875rem"
@@ -82,8 +82,8 @@ const j = p({
   base: {
     height: "2rem",
     minWidth: "2rem",
-    ...r.borderRadius(O),
-    ...r.paddingInline(L),
+    ...o.borderRadius(O),
+    ...o.paddingInline(L),
     "& svg": {
       width: "1rem",
       height: "1rem"
@@ -92,32 +92,35 @@ const j = p({
   lg: {
     height: "2.5rem",
     minWidth: "2.5rem",
-    ...r.borderRadius(w),
-    ...r.paddingInline("0.625rem"),
+    ...o.borderRadius(w),
+    ...o.paddingInline("0.625rem"),
     "& svg": {
       width: "1.25rem",
       height: "1.25rem"
     }
   }
 });
-function B(o) {
-  const e = i.Children.toArray(o).filter(i.isValidElement);
+function B(t) {
+  const e = i.Children.toArray(t).filter(i.isValidElement);
   return e.length === 1 ? e[0] : void 0;
 }
-function z(o, e) {
-  const t = o ? B(e) : void 0;
-  return t ? { render: t, nativeButton: t.type === "button" } : { children: e };
+function z(t, e) {
+  const r = t ? B(e) : void 0;
+  return r ? {
+    render: r,
+    nativeButton: typeof r.type != "string" || r.type === "button"
+  } : { children: e };
 }
-function F(o) {
+function F(t) {
   return (e) => {
-    var t;
-    o == null || o(e), e.defaultPrevented && ((t = e.preventBaseUIHandler) == null || t.call(e));
+    var r;
+    t == null || t(e), e.defaultPrevented && ((r = e.preventBaseUIHandler) == null || r.call(e));
   };
 }
 const _ = i.forwardRef(
   function({
     className: e,
-    variant: t = "default",
+    variant: r = "default",
     size: a = "base",
     asChild: s = !1,
     children: d,
@@ -130,10 +133,10 @@ const _ = i.forwardRef(
       {
         ref: c,
         "data-slot": "toggle",
-        [f]: "toggle",
-        className: h(
+        [h]: "toggle",
+        className: f(
           n.root,
-          n[t],
+          n[r],
           n[a],
           e
         ),

package/dist/components/toggle/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../../src/components/toggle/toggle.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nexport type ToggleVariant = \"default\" | \"destructive\"\nexport type ToggleSize = \"sm\" | \"base\" | \"lg\"\n\nexport const useToggleStyles = makeZenithStyles({\n  root: {\n    ...nativeControl,\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    flexShrink: 0,\n    cursor: \"pointer\",\n    fontWeight: tokens.fontWeightSemibold,\n    transitionProperty: \"all\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.focusRing,\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"& svg\": {\n      flexShrink: 0,\n      pointerEvents: \"none\",\n      color: \"currentColor\",\n    },\n  },\n  // Variants\n  default: {\n    backgroundColor: \"transparent\",\n    color: tokens.accentLight,\n    \":hover\": {\n      backgroundColor: tokens.accentSoft,\n    },\n    \"&[data-pressed]\": {\n      backgroundColor: tokens.accentA3,\n      color: tokens.accentOnSoft,\n    },\n    \"&[data-pressed]:hover\": {\n      backgroundColor: tokens.accentA4,\n    },\n  },\n  destructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.errorLight,\n    \":hover\": {\n      backgroundColor: tokens.errorSoft,\n    },\n    \"&[data-pressed]\": {\n      backgroundColor: tokens.errorA3,\n      color: tokens.errorOnSoft,\n    },\n    \"&[data-pressed]:hover\": {\n      backgroundColor: tokens.errorA4,\n    },\n  },\n  // Sizes\n  sm: {\n    height: \"1.5rem\",\n    minWidth: \"1.5rem\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.paddingInline(\"0.375rem\"),\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  base: {\n    height: \"2rem\",\n    minWidth: \"2rem\",\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.paddingInline(tokens.spacingElement2),\n    \"& svg\": {\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n  },\n  lg: {\n    height: \"2.5rem\",\n    minWidth: \"2.5rem\",\n    ...shorthands.borderRadius(tokens.radius2xl),\n    ...shorthands.paddingInline(\"0.625rem\"),\n    \"& svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n  },\n})\n\n/**\n * What `onPressedChange` receives as its second argument: Base UI's change details, declared in\n * Zenith so that none of Base UI's internals reach the published declarations, where TypeScript 4\n * cannot parse them.\n */\nexport type ToggleChangeDetails = {\n  /** A toggle only changes through a person's click or key press, which Base UI calls `none`. */\n  reason: \"none\"\n  /** The native event behind the change. */\n  event: Event\n  /** Keeps the current state. */\n  cancel: () => void\n  /** Lets the event propagate where the toggle would otherwise stop it. */\n  allowPropagation: () => void\n  isCanceled: boolean\n  isPropagationAllowed: boolean\n  /** The element that caused the change, if any. */\n  trigger: Element | undefined\n}\n\n/**\n * A single child can arrive wrapped in a one-element array depending on the JSX runtime (MDX call\n * sites do this). Radix's Slot normalised that, so the `asChild` shim has to as well.\n */\nexport function onlySlotChild(children: React.ReactNode) {\n  const elements = React.Children.toArray(children).filter(React.isValidElement)\n  return elements.length === 1 ? elements[0] : undefined\n}\n\n/**\n * Base UI's `render` in place of Radix's `asChild` on a button part: the single child element\n * becomes the part and keeps its own children. Anything but a `<button>` is told so, since Base UI\n * otherwise warns that a native button was expected.\n */\nexport function buttonSlotProps(asChild: boolean, children: React.ReactNode) {\n  const child = asChild ? onlySlotChild(children) : undefined\n  return child\n    ? { render: child, nativeButton: child.type === \"button\" }\n    : { children }\n}\n\n/**\n * Radix skipped its own handling when the caller's `onClick` prevented default; Base UI runs the\n * caller's handler first and then its own unless told not to.\n */\nexport function respectDefaultPrevented<E extends React.MouseEvent>(\n  onClick: ((event: E) => void) | undefined\n) {\n  return (event: E) => {\n    onClick?.(event)\n    if (event.defaultPrevented)\n      (\n        event as E & { preventBaseUIHandler?: () => void }\n      ).preventBaseUIHandler?.()\n  }\n}\n\n/** The toggle's own props, declared in Zenith rather than taken from Base UI. */\ntype ToggleOwnProps = {\n  /** Whether the toggle is pressed, when it is controlled. */\n  pressed?: boolean\n  /** Whether the toggle is pressed at first, when it is uncontrolled. */\n  defaultPressed?: boolean\n  /**\n   * Called with the new pressed state and Base UI's change details.\n   * `eventDetails.cancel()` keeps the current state.\n   */\n  onPressedChange?: (\n    pressed: boolean,\n    eventDetails: ToggleChangeDetails\n  ) => void\n  /** Renders the single child element as the toggle, merging its props and behaviour onto it. */\n  asChild?: boolean\n}\n\nexport type ToggleProps = Omit<\n  React.ComponentPropsWithRef<\"button\">,\n  keyof ToggleOwnProps\n> &\n  ToggleOwnProps & {\n    variant?: ToggleVariant\n    size?: ToggleSize\n  }\n\nexport const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(\n  function Toggle(\n    {\n      className,\n      variant = \"default\",\n      size = \"base\",\n      asChild = false,\n      children,\n      onClick,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useToggleStyles()\n\n    return (\n      <TogglePrimitive\n        ref={ref}\n        data-slot=\"toggle\"\n        {...{ [SLOT_ATTR]: \"toggle\" }}\n        className={mergeClasses(\n          styles.root,\n          styles[variant],\n          styles[size],\n          className\n        )}\n        // Base UI types the handlers with its own event wrapper; the element is the same <button>,\n        // so the caller's button-typed handlers receive exactly the events they declare.\n        {...(props as TogglePrimitive.Props)}\n        onClick={respectDefaultPrevented(onClick)}\n        {...buttonSlotProps(asChild, children)}\n      />\n    )\n  }\n)\n"],"names":["useToggleStyles","makeZenithStyles","nativeControl","shorthands","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.focusRing","tokens.accentLight","tokens.accentSoft","tokens.accentA3","tokens.accentOnSoft","tokens.accentA4","tokens.errorLight","tokens.errorSoft","tokens.errorA3","tokens.errorOnSoft","tokens.errorA4","tokens.radiusLg","tokens.radiusXl","tokens.spacingElement2","tokens.radius2xl","onlySlotChild","children","elements","React","buttonSlotProps","asChild","child","respectDefaultPrevented","onClick","event","_a","Toggle","className","variant","size","props","ref","styles","jsx","TogglePrimitive","SLOT_ATTR","mergeClasses"],"mappings":"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"}
+{"version":3,"file":"toggle.js","sources":["../../../src/components/toggle/toggle.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nexport type ToggleVariant = \"default\" | \"destructive\"\nexport type ToggleSize = \"sm\" | \"base\" | \"lg\"\n\nexport const useToggleStyles = makeZenithStyles({\n  root: {\n    ...nativeControl,\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    flexShrink: 0,\n    cursor: \"pointer\",\n    fontWeight: tokens.fontWeightSemibold,\n    transitionProperty: \"all\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.focusRing,\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"& svg\": {\n      flexShrink: 0,\n      pointerEvents: \"none\",\n      color: \"currentColor\",\n    },\n  },\n  // Variants\n  default: {\n    backgroundColor: \"transparent\",\n    color: tokens.accentLight,\n    \":hover\": {\n      backgroundColor: tokens.accentSoft,\n    },\n    \"&[data-pressed]\": {\n      backgroundColor: tokens.accentA3,\n      color: tokens.accentOnSoft,\n    },\n    \"&[data-pressed]:hover\": {\n      backgroundColor: tokens.accentA4,\n    },\n  },\n  destructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.errorLight,\n    \":hover\": {\n      backgroundColor: tokens.errorSoft,\n    },\n    \"&[data-pressed]\": {\n      backgroundColor: tokens.errorA3,\n      color: tokens.errorOnSoft,\n    },\n    \"&[data-pressed]:hover\": {\n      backgroundColor: tokens.errorA4,\n    },\n  },\n  // Sizes\n  sm: {\n    height: \"1.5rem\",\n    minWidth: \"1.5rem\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.paddingInline(\"0.375rem\"),\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  base: {\n    height: \"2rem\",\n    minWidth: \"2rem\",\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.paddingInline(tokens.spacingElement2),\n    \"& svg\": {\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n  },\n  lg: {\n    height: \"2.5rem\",\n    minWidth: \"2.5rem\",\n    ...shorthands.borderRadius(tokens.radius2xl),\n    ...shorthands.paddingInline(\"0.625rem\"),\n    \"& svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n  },\n})\n\n/**\n * What `onPressedChange` receives as its second argument: Base UI's change details, declared in\n * Zenith so that none of Base UI's internals reach the published declarations, where TypeScript 4\n * cannot parse them.\n */\nexport type ToggleChangeDetails = {\n  /** A toggle only changes through a person's click or key press, which Base UI calls `none`. */\n  reason: \"none\"\n  /** The native event behind the change. */\n  event: Event\n  /** Keeps the current state. */\n  cancel: () => void\n  /** Lets the event propagate where the toggle would otherwise stop it. */\n  allowPropagation: () => void\n  isCanceled: boolean\n  isPropagationAllowed: boolean\n  /** The element that caused the change, if any. */\n  trigger: Element | undefined\n}\n\n/**\n * A single child can arrive wrapped in a one-element array depending on the JSX runtime (MDX call\n * sites do this). Radix's Slot normalised that, so the `asChild` shim has to as well.\n */\nexport function onlySlotChild(children: React.ReactNode) {\n  const elements = React.Children.toArray(children).filter(React.isValidElement)\n  return elements.length === 1 ? elements[0] : undefined\n}\n\n/**\n * Base UI's `render` in place of Radix's `asChild` on a button part: the single child element\n * becomes the part and keeps its own children. A component child counts as a native button, like\n * TabsTrigger, so Base UI stamps `type=\"button\"` and `disabled`; only a child that is another\n * intrinsic element is told otherwise, since Base UI would warn that a native button was expected.\n */\nexport function buttonSlotProps(asChild: boolean, children: React.ReactNode) {\n  const child = asChild ? onlySlotChild(children) : undefined\n  return child\n    ? {\n        render: child,\n        nativeButton: typeof child.type !== \"string\" || child.type === \"button\",\n      }\n    : { children }\n}\n\n/**\n * Radix skipped its own handling when the caller's `onClick` prevented default; Base UI runs the\n * caller's handler first and then its own unless told not to.\n */\nexport function respectDefaultPrevented<E extends React.MouseEvent>(\n  onClick: ((event: E) => void) | undefined\n) {\n  return (event: E) => {\n    onClick?.(event)\n    if (event.defaultPrevented)\n      (\n        event as E & { preventBaseUIHandler?: () => void }\n      ).preventBaseUIHandler?.()\n  }\n}\n\n/** The toggle's own props, declared in Zenith rather than taken from Base UI. */\ntype ToggleOwnProps = {\n  /** Whether the toggle is pressed, when it is controlled. */\n  pressed?: boolean\n  /** Whether the toggle is pressed at first, when it is uncontrolled. */\n  defaultPressed?: boolean\n  /**\n   * Called with the new pressed state and Base UI's change details.\n   * `eventDetails.cancel()` keeps the current state.\n   */\n  onPressedChange?: (\n    pressed: boolean,\n    eventDetails: ToggleChangeDetails\n  ) => void\n  /** Renders the single child element as the toggle, merging its props and behaviour onto it. */\n  asChild?: boolean\n}\n\nexport type ToggleProps = Omit<\n  React.ComponentPropsWithRef<\"button\">,\n  keyof ToggleOwnProps\n> &\n  ToggleOwnProps & {\n    variant?: ToggleVariant\n    size?: ToggleSize\n  }\n\nexport const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(\n  function Toggle(\n    {\n      className,\n      variant = \"default\",\n      size = \"base\",\n      asChild = false,\n      children,\n      onClick,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useToggleStyles()\n\n    return (\n      <TogglePrimitive\n        ref={ref}\n        data-slot=\"toggle\"\n        {...{ [SLOT_ATTR]: \"toggle\" }}\n        className={mergeClasses(\n          styles.root,\n          styles[variant],\n          styles[size],\n          className\n        )}\n        // Base UI types the handlers with its own event wrapper; the element is the same <button>,\n        // so the caller's button-typed handlers receive exactly the events they declare.\n        {...(props as TogglePrimitive.Props)}\n        onClick={respectDefaultPrevented(onClick)}\n        {...buttonSlotProps(asChild, children)}\n      />\n    )\n  }\n)\n"],"names":["useToggleStyles","makeZenithStyles","nativeControl","shorthands","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.focusRing","tokens.accentLight","tokens.accentSoft","tokens.accentA3","tokens.accentOnSoft","tokens.accentA4","tokens.errorLight","tokens.errorSoft","tokens.errorA3","tokens.errorOnSoft","tokens.errorA4","tokens.radiusLg","tokens.radiusXl","tokens.spacingElement2","tokens.radius2xl","onlySlotChild","children","elements","React","buttonSlotProps","asChild","child","respectDefaultPrevented","onClick","event","_a","Toggle","className","variant","size","props","ref","styles","jsx","TogglePrimitive","SLOT_ATTR","mergeClasses"],"mappings":"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"}

package/dist/index.d.ts

@@ -5152,7 +5152,7 @@ type ScrollOverflowProps = Omit<React.ComponentProps<"div">, "dir"> & UseScrollO
     gradients?: boolean;
     /** Gradient width in pixels. Default: 40 */
     gradientWidth?: number;
-    /** Gradient base color (CSS value). Should match the parent background. Default: "var(--volt-body)" */
+    /** Gradient base color (CSS value). Should match the parent background. Default: the Zenith body token. */
     gradientColor?: string;
     /** Show inset shadow on overflow edges. Default: true */
     shadow?: boolean;

package/dist/renderer/served.js

@@ -1,34 +1,39 @@
-import { BASE_UI_FAMILIES as o, getTokenSheet as r, assertCompatibility as n, BASE_UI_VERSION as s } from "@epilot/zenith-runtime/v1";
-import { EXPECTED_TOKEN_SHEETS as a, EXPECTED_PRIMITIVES as h, EXPECTED_CLASS_SALT as p, EXPECTED_ABI_VERSION as E } from "./runtime-contract.generated.js";
+import * as o from "react";
+import { BASE_UI_FAMILIES as n, getTokenSheet as r, assertCompatibility as s, BASE_UI_VERSION as a } from "@epilot/zenith-runtime/v1";
+import { EXPECTED_TOKEN_SHEETS as h, EXPECTED_PRIMITIVES as m, EXPECTED_CLASS_SALT as p, EXPECTED_ABI_VERSION as E } from "./runtime-contract.generated.js";
 let i = !1;
-function m() {
+function u() {
   if (!i) {
-    if (i = !0, o === void 0 || typeof r != "function")
+    if (i = !0, n === void 0 || typeof r != "function")
       throw new Error(
         "Incompatible Zenith runtime: @epilot/zenith-react takes its Base UI primitives and core token sheet from @epilot/zenith-runtime/v1, but the runtime on this page serves neither (it predates the shared-primitives runtime). Deploy a runtime release that serves them (root-config) before this application, or bundle the runtime."
       );
-    n({
+    s({
       abiVersion: E,
       classSalt: p,
-      primitives: h,
-      tokenSheets: a
+      primitives: m,
+      tokenSheets: h,
+      // The served primitives render inside this package's components, so they must run on this
+      // package's React: the page's single copy. A runtime bundled with a React of its own, or with
+      // a `react/jsx-runtime` of another React version, is named here with the host rule (#116).
+      react: o
     });
   }
 }
-m();
-function c(e, t) {
+u();
+function f(e, t) {
   if (t === void 0)
     throw new Error(
-      `Incompatible Zenith runtime primitives: this build of @epilot/zenith-react needs Base UI "${e}", which the runtime on this page (Base UI ${s}) does not serve. Deploy a runtime release that serves it (root-config) before this application.`
+      `Incompatible Zenith runtime primitives: this build of @epilot/zenith-react needs Base UI "${e}", which the runtime on this page (Base UI ${a}) does not serve. Deploy a runtime release that serves it (root-config) before this application.`
     );
   return t;
 }
-function f(e) {
+function S(e) {
   return r(e);
 }
 export {
-  m as ensureServedContract,
-  c as servedFamily,
-  f as servedTokenSheet
+  u as ensureServedContract,
+  f as servedFamily,
+  S as servedTokenSheet
 };
 //# sourceMappingURL=served.js.map

package/dist/renderer/served.js.map

@@ -1 +1 @@
-{"version":3,"file":"served.js","sources":["../../src/renderer/served.ts"],"sourcesContent":["import {\n  assertCompatibility,\n  BASE_UI_FAMILIES,\n  BASE_UI_VERSION,\n  getTokenSheet,\n  type ServedFamily,\n} from \"@epilot/zenith-runtime/v1\"\nimport {\n  EXPECTED_ABI_VERSION,\n  EXPECTED_CLASS_SALT,\n  EXPECTED_PRIMITIVES,\n  EXPECTED_TOKEN_SHEETS,\n} from \"./runtime-contract.generated\"\n\n/**\n * The seam where this package meets the runtime that serves its Base UI primitives and its core\n * token sheet (D13). It runs once, at module initialisation, before any served family or sheet is\n * read (`vite.shared-primitives.ts` makes every rewritten module import it first): a runtime that\n * predates the shared primitives, or that serves another family set or another sheet, fails here\n * with a named cause — never as a TypeError inside a component, never as a blank page (D3).\n *\n * Named imports, not a namespace: a namespace object held in a variable makes a bundler keep every\n * export of `/v1`, and with it every served family, in an application that bundles the runtime.\n * Under SystemJS (the import-map host) an export the runtime lacks arrives as `undefined`, which is\n * what the first check reads; under native ESM the engine names the missing export itself.\n */\nlet asserted = false\n\n/**\n * Validates the contract once. Called here at module initialisation, and from `contract.ts` as a\n * statement: a bare side-effect import of this file would be dropped by a consumer's bundler, since\n * the package declares `sideEffects: false`, while a call is kept.\n */\nexport function ensureServedContract(): void {\n  if (asserted) return\n  asserted = true\n  if (\n    (BASE_UI_FAMILIES as unknown) === undefined ||\n    typeof (getTokenSheet as unknown) !== \"function\"\n  ) {\n    throw new Error(\n      \"Incompatible Zenith runtime: @epilot/zenith-react takes its Base UI primitives and core token \" +\n        \"sheet from @epilot/zenith-runtime/v1, but the runtime on this page serves neither (it predates \" +\n        \"the shared-primitives runtime). Deploy a runtime release that serves them (root-config) before \" +\n        \"this application, or bundle the runtime.\"\n    )\n  }\n  assertCompatibility({\n    abiVersion: EXPECTED_ABI_VERSION,\n    classSalt: EXPECTED_CLASS_SALT,\n    primitives: EXPECTED_PRIMITIVES,\n    tokenSheets: EXPECTED_TOKEN_SHEETS,\n  })\n}\n\nensureServedContract()\n\n/** A served family, or the named cause when the runtime on the page does not serve it. */\nexport function servedFamily(\n  key: string,\n  family: ServedFamily | undefined\n): ServedFamily {\n  if (family === undefined) {\n    throw new Error(\n      `Incompatible Zenith runtime primitives: this build of @epilot/zenith-react needs Base UI \"${key}\", ` +\n        `which the runtime on this page (Base UI ${BASE_UI_VERSION}) does not serve. Deploy a ` +\n        `runtime release that serves it (root-config) before this application.`\n    )\n  }\n  return family\n}\n\n/** The served sheet for a hash this package was compiled against; the runtime names a missing one. */\nexport function servedTokenSheet(hash: string): string {\n  return getTokenSheet(hash)\n}\n"],"names":["asserted","ensureServedContract","BASE_UI_FAMILIES","getTokenSheet","assertCompatibility","EXPECTED_ABI_VERSION","EXPECTED_CLASS_SALT","EXPECTED_PRIMITIVES","EXPECTED_TOKEN_SHEETS","servedFamily","key","family","BASE_UI_VERSION","servedTokenSheet","hash"],"mappings":";;AA0BA,IAAIA,IAAW;AAOR,SAASC,IAA6B;AAC3C,MAAI,CAAAD,GAEJ;AAAA,QADAA,IAAW,IAERE,MAAiC,UAClC,OAAQC,KAA8B;AAEtC,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAMJ,IAAAC,EAAoB;AAAA,MAClB,YAAYC;AAAA,MACZ,WAAWC;AAAA,MACX,YAAYC;AAAA,MACZ,aAAaC;AAAA,IAAA,CACd;AAAA;AACH;AAEAP,EAAA;AAGO,SAASQ,EACdC,GACAC,GACc;AACd,MAAIA,MAAW;AACb,UAAM,IAAI;AAAA,MACR,6FAA6FD,CAAG,8CACnDE,CAAe;AAAA,IAAA;AAIhE,SAAOD;AACT;AAGO,SAASE,EAAiBC,GAAsB;AACrD,SAAOX,EAAcW,CAAI;AAC3B;"}
+{"version":3,"file":"served.js","sources":["../../src/renderer/served.ts"],"sourcesContent":["import * as React from \"react\"\nimport {\n  assertCompatibility,\n  BASE_UI_FAMILIES,\n  BASE_UI_VERSION,\n  getTokenSheet,\n  type ServedFamily,\n} from \"@epilot/zenith-runtime/v1\"\nimport {\n  EXPECTED_ABI_VERSION,\n  EXPECTED_CLASS_SALT,\n  EXPECTED_PRIMITIVES,\n  EXPECTED_TOKEN_SHEETS,\n} from \"./runtime-contract.generated\"\n\n/**\n * The seam where this package meets the runtime that serves its Base UI primitives and its core\n * token sheet (D13). It runs once, at module initialisation, before any served family or sheet is\n * read (`vite.shared-primitives.ts` makes every rewritten module import it first): a runtime that\n * predates the shared primitives, that serves another family set or another sheet, or that runs on\n * a React of its own rather than this package's (#116), fails here with a named cause — never as a\n * TypeError inside a component, never as a blank page (D3).\n *\n * Named imports, not a namespace: a namespace object held in a variable makes a bundler keep every\n * export of `/v1`, and with it every served family, in an application that bundles the runtime.\n * Under SystemJS (the import-map host) an export the runtime lacks arrives as `undefined`, which is\n * what the first check reads; under native ESM the engine names the missing export itself.\n */\nlet asserted = false\n\n/**\n * Validates the contract once. Called here at module initialisation, and from `contract.ts` as a\n * statement: a bare side-effect import of this file would be dropped by a consumer's bundler, since\n * the package declares `sideEffects: false`, while a call is kept.\n */\nexport function ensureServedContract(): void {\n  if (asserted) return\n  asserted = true\n  if (\n    (BASE_UI_FAMILIES as unknown) === undefined ||\n    typeof (getTokenSheet as unknown) !== \"function\"\n  ) {\n    throw new Error(\n      \"Incompatible Zenith runtime: @epilot/zenith-react takes its Base UI primitives and core token \" +\n        \"sheet from @epilot/zenith-runtime/v1, but the runtime on this page serves neither (it predates \" +\n        \"the shared-primitives runtime). Deploy a runtime release that serves them (root-config) before \" +\n        \"this application, or bundle the runtime.\"\n    )\n  }\n  assertCompatibility({\n    abiVersion: EXPECTED_ABI_VERSION,\n    classSalt: EXPECTED_CLASS_SALT,\n    primitives: EXPECTED_PRIMITIVES,\n    tokenSheets: EXPECTED_TOKEN_SHEETS,\n    // The served primitives render inside this package's components, so they must run on this\n    // package's React: the page's single copy. A runtime bundled with a React of its own, or with\n    // a `react/jsx-runtime` of another React version, is named here with the host rule (#116).\n    react: React,\n  })\n}\n\nensureServedContract()\n\n/** A served family, or the named cause when the runtime on the page does not serve it. */\nexport function servedFamily(\n  key: string,\n  family: ServedFamily | undefined\n): ServedFamily {\n  if (family === undefined) {\n    throw new Error(\n      `Incompatible Zenith runtime primitives: this build of @epilot/zenith-react needs Base UI \"${key}\", ` +\n        `which the runtime on this page (Base UI ${BASE_UI_VERSION}) does not serve. Deploy a ` +\n        `runtime release that serves it (root-config) before this application.`\n    )\n  }\n  return family\n}\n\n/** The served sheet for a hash this package was compiled against; the runtime names a missing one. */\nexport function servedTokenSheet(hash: string): string {\n  return getTokenSheet(hash)\n}\n"],"names":["asserted","ensureServedContract","BASE_UI_FAMILIES","getTokenSheet","assertCompatibility","EXPECTED_ABI_VERSION","EXPECTED_CLASS_SALT","EXPECTED_PRIMITIVES","EXPECTED_TOKEN_SHEETS","React","servedFamily","key","family","BASE_UI_VERSION","servedTokenSheet","hash"],"mappings":";;;AA4BA,IAAIA,IAAW;AAOR,SAASC,IAA6B;AAC3C,MAAI,CAAAD,GAEJ;AAAA,QADAA,IAAW,IAERE,MAAiC,UAClC,OAAQC,KAA8B;AAEtC,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAMJ,IAAAC,EAAoB;AAAA,MAClB,YAAYC;AAAA,MACZ,WAAWC;AAAA,MACX,YAAYC;AAAA,MACZ,aAAaC;AAAA;AAAA;AAAA;AAAA,MAIb,OAAOC;AAAA,IAAA,CACR;AAAA;AACH;AAEAR,EAAA;AAGO,SAASS,EACdC,GACAC,GACc;AACd,MAAIA,MAAW;AACb,UAAM,IAAI;AAAA,MACR,6FAA6FD,CAAG,8CACnDE,CAAe;AAAA,IAAA;AAIhE,SAAOD;AACT;AAGO,SAASE,EAAiBC,GAAsB;AACrD,SAAOZ,EAAcY,CAAI;AAC3B;"}

package/dist/tokens.json

@@ -1,7 +1,7 @@
 {
   "$comment": "GENERATED. Design token values for consumers that do not render this package's React components. Compile these into your own CSS under your own names at your own build time; do not reference this package's runtime custom properties, whose names are content-hashed and change with their values. `themes.light`/`themes.dark` are mode-resolved; `densities.compact`/`densities.normal`/`densities.comfortable` resolve the component layer's geometry tokens (WP9A-ACCEPTANCE-WP9B1) and carry no mode of their own — do not read a value out of `themes` for a key that only exists under `densities`, or the reverse. This file is copied verbatim to this package's public `tokens.json` export (`package.json`'s `build` script, `cp src/generated/values.generated.json dist/tokens.json`).",
   "package": "@epilot/zenith-react",
-  "version": "0.2.0-next.4",
+  "version": "0.2.0-next.5",
   "themes": {
     "light": {
       "accent-1": "#fcfdfe",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epilot/zenith-react",
-  "version": "0.2.0-next.4",
+  "version": "0.2.0-next.5",
   "description": "Zenith React components, styled with Griffel and designed for isolated micro-frontend delivery",
   "type": "module",
   "repository": {
@@ -30,6 +30,7 @@
     },
     "./tokens.json": "./dist/tokens.json",
     "./testing/jest-preset.cjs": "./testing/jest-preset.cjs",
+    "./testing/setup.cjs": "./testing/setup.cjs",
     "./package.json": "./package.json"
   },
   "files": [
@@ -92,7 +93,7 @@
     "verify:consumer": "bun ../../scripts/verify-packed-consumer.ts"
   },
   "dependencies": {
-    "@epilot/zenith-runtime": "0.2.0-next.2"
+    "@epilot/zenith-runtime": "0.2.0-next.3"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -103,7 +104,7 @@
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@epilot/zenith-tokens": "0.2.0-next.4",
+    "@epilot/zenith-tokens": "0.2.0-next.5",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.11.2",
     "@testing-library/react": "^16.3.2",

package/scripts/migration-diagnostics-core.mjs

@@ -29,6 +29,22 @@ export const RULES = [
     description:
       'A decorative (non-core) token family is used, with varying confidence that a correctly-scoped install call covers it (high confidence for no local evidence at all, down to low for an unresolved dynamic path). This rule NEVER reports severity "error": local absence of an install call does not prove a bootstrap/provider install does not exist elsewhere — this is single-source analysis with no cross-file tracing, so it cannot assert a definite defect, only flag what needs verification. Core families (accent/gray/error/warning/success/info) are excluded — they load by default. Requires an injected TypeScript module (see requiresTypeScript).',
   },
+  {
+    code: "radix-data-state-selector",
+    title: "Radix-era data-state selector or query",
+    defaultSeverity: "warning",
+    requiresTypeScript: false,
+    description:
+      "A `data-state` attribute selector, Tailwind `data-[state=…]` variant, JSX attribute or test query reads a state Radix set (`open`, `closed`, `checked`, `active`, `on`, …). The Base UI parts carry one attribute per state instead (`data-open`, `data-checked`, `data-active`, `data-pressed`, …), so the selector stops matching after the upgrade; the suggestion names the replacement per family (RADIX_RENAMES, the upgrade guide's table). A warning, not an error: Zenith's own List, Table and DataTable keep their `data-state` values, and a selector alone does not say which element it targets.",
+  },
+  {
+    code: "radix-css-variable",
+    title: "Radix-era --radix-* CSS variable",
+    defaultSeverity: "error",
+    requiresTypeScript: false,
+    description:
+      "A `--radix-*` custom property (`--radix-popover-content-transform-origin`, `--radix-select-trigger-width`, `--radix-accordion-content-height`, …) is read. Base UI publishes none of them; the positioner and panel variables have new names (`--transform-origin`, `--available-width`, `--anchor-width`, `--accordion-panel-height`, …), which the suggestion gives.",
+  },
 ]
 
 /** ts/tsx/js/jsx — the extensions `unestablished-palette-install` can parse. Exported so the
@@ -165,9 +181,277 @@ function textualFindings(identity, fileLabel, raw) {
     )
   }
 
+  findings.push(...radixFindings(identity, fileLabel, stripped, lineOf, colOf))
+  return findings
+}
+
+// ---------------------------------------------------------------------------
+// Rule 4 + 5: Radix-era state attributes and CSS variables (textual, comment-stripped)
+// ---------------------------------------------------------------------------
+
+/** The Zenith parts an overlay-style `data-state="open|closed"` became `data-open`/`data-closed` on. */
+const OPEN_CLOSED_PARTS = [
+  "Dialog",
+  "AlertDialog",
+  "Drawer",
+  "Popover",
+  "FieldCombobox",
+  "Tooltip",
+  "DropdownMenu content and sub content",
+  "Select content",
+  "Accordion item and panel",
+]
+const POPUP_TRIGGERS = [
+  "Dialog trigger",
+  "AlertDialog trigger",
+  "Drawer trigger",
+  "Popover trigger",
+  "Tooltip trigger",
+  "DropdownMenu trigger and sub trigger",
+  "Select trigger",
+]
+const CHECKED_PARTS = [
+  "Checkbox",
+  "Switch (root and thumb)",
+  "Radio",
+  "SegmentedControl",
+  "DropdownMenu checkbox and radio items",
+]
+
+/** The Radix primitive names Zenith's positioned families used in their `--radix-*` variables. */
+export const RADIX_VARIABLE_FAMILIES = [
+  { radix: "popover", zenith: "Popover, FieldCombobox" },
+  { radix: "dropdown-menu", zenith: "DropdownMenu" },
+  { radix: "select", zenith: "Select" },
+  { radix: "tooltip", zenith: "Tooltip" },
+]
+
+/**
+ * The attribute and CSS-variable renames of the Base UI port (DECISIONS.md D12), one row per
+ * Radix name and Base UI replacement. The rules below match on these, and
+ * `renderRadixRenamesMarkdown()` prints the upgrade guide's table from them, so the two cannot
+ * drift. Family names are Zenith's; `<family>` in a variable name stands for one of
+ * RADIX_VARIABLE_FAMILIES. A `baseUi` of null means the state has no attribute any more: it is
+ * the part without the other one (`:not([data-active])`).
+ */
+export const RADIX_RENAMES = {
+  attributes: [
+    { value: "open", baseUi: "data-open", parts: OPEN_CLOSED_PARTS },
+    { value: "open", baseUi: "data-popup-open", parts: POPUP_TRIGGERS },
+    { value: "open", baseUi: "data-panel-open", parts: ["Accordion trigger"] },
+    { value: "closed", baseUi: "data-closed", parts: OPEN_CLOSED_PARTS },
+    { value: "delayed-open", baseUi: "data-open", parts: ["Tooltip"] },
+    { value: "instant-open", baseUi: "data-open", parts: ["Tooltip"] },
+    { value: "checked", baseUi: "data-checked", parts: CHECKED_PARTS },
+    { value: "checked", baseUi: "data-selected", parts: ["Select item"] },
+    { value: "unchecked", baseUi: "data-unchecked", parts: CHECKED_PARTS },
+    {
+      value: "indeterminate",
+      baseUi: "data-indeterminate",
+      parts: ["Checkbox"],
+    },
+    { value: "active", baseUi: "data-active", parts: ["Tabs trigger"] },
+    {
+      value: "inactive",
+      baseUi: null,
+      parts: ["Tabs trigger"],
+      note: "the trigger without `data-active`",
+    },
+    { value: "on", baseUi: "data-pressed", parts: ["Toggle", "OptionCard"] },
+    {
+      value: "off",
+      baseUi: null,
+      parts: ["Toggle", "OptionCard"],
+      note: "the part without `data-pressed`",
+    },
+  ],
+  variables: [
+    {
+      radix: "--radix-<family>-content-transform-origin",
+      baseUi: "--transform-origin",
+    },
+    {
+      radix: "--radix-<family>-content-available-width",
+      baseUi: "--available-width",
+    },
+    {
+      radix: "--radix-<family>-content-available-height",
+      baseUi: "--available-height",
+    },
+    { radix: "--radix-<family>-trigger-width", baseUi: "--anchor-width" },
+    { radix: "--radix-<family>-trigger-height", baseUi: "--anchor-height" },
+    {
+      radix: "--radix-accordion-content-height",
+      baseUi: "--accordion-panel-height",
+      parts: ["Accordion panel"],
+    },
+    {
+      radix: "--radix-accordion-content-width",
+      baseUi: "--accordion-panel-width",
+      parts: ["Accordion panel"],
+    },
+  ],
+  /** Attributes the port left alone, for the table's footnote. */
+  unchanged: [
+    "data-highlighted",
+    "data-side",
+    "data-orientation",
+    "data-disabled",
+    "data-slot",
+  ],
+  /** New under Base UI: a part entering or leaving carries one of these while it transitions. */
+  added: ["data-starting-style", "data-ending-style"],
+  /** Zenith's own parts that still set `data-state`, with the values they use. */
+  keptDataState: [
+    { part: "List group", values: ["open", "closed"] },
+    { part: "Table row and DataTable row", values: ["selected"] },
+    { part: "DataTable body", values: ["loading", "error", "empty"] },
+  ],
+}
+
+const RADIX_STATE_VALUES = new Set(RADIX_RENAMES.attributes.map((a) => a.value))
+/** `open` and `closed` are also Zenith's List values, so a hit on them is only probably Radix. */
+const SHARED_STATE_VALUES = new Set(
+  RADIX_RENAMES.keptDataState
+    .flatMap((k) => k.values)
+    .filter((v) => RADIX_STATE_VALUES.has(v))
+)
+
+/**
+ * `data-state` wherever consumer code spells it: an attribute selector (`[data-state="open"]`,
+ * `[data-state=open]`, inside a CSS-in-JS string too), a JSX attribute, a Tailwind variant
+ * (`data-[state=open]:…`) and a test query (`toHaveAttribute("data-state", "open")`,
+ * `getAttribute("data-state")`). Group 1: the Tailwind value; 3: the selector or attribute
+ * value; 4: the query's value argument.
+ */
+const DATA_STATE_RE =
+  /data-\[state=([a-z-]+)\]|\bdata-state\b(?![a-z0-9-])(?:\s*[~|^$*]?=\s*(["']?)([a-z-]+)\2|["']\s*,\s*["']([a-z-]+)["'])?/g
+const RADIX_VAR_RE = /--radix-[a-z0-9-]+/g
+
+const familyPattern = `(?<family>${RADIX_VARIABLE_FAMILIES.map((f) => f.radix).join("|")})`
+const VARIABLE_MATCHERS = RADIX_RENAMES.variables.map((v) => ({
+  ...v,
+  re: new RegExp(`^${v.radix.replace("<family>", familyPattern)}$`),
+}))
+
+const describeParts = (parts) => parts.join(", ")
+
+/** What replaces `data-state="<value>"`, per family, or null for a value Radix never set. */
+export function dataStateReplacement(value) {
+  if (!value) {
+    return "one attribute per state on the Base UI part: data-open/data-closed (overlays, Accordion), data-popup-open (triggers), data-checked/data-unchecked (Checkbox, Switch, Radio, SegmentedControl, menu items), data-selected (Select item), data-active (Tabs), data-pressed (Toggle, OptionCard); see the upgrade guide's rename table."
+  }
+  const rows = RADIX_RENAMES.attributes.filter((a) => a.value === value)
+  if (!rows.length) return null
+  return rows
+    .map((r) =>
+      r.baseUi
+        ? `${r.baseUi} on ${describeParts(r.parts)}`
+        : `no attribute on ${describeParts(r.parts)} (${r.note})`
+    )
+    .join("; ")
+}
+
+/** The Base UI variable for a `--radix-*` name, or null when no Zenith family used it. */
+export function radixVariableReplacement(name) {
+  for (const m of VARIABLE_MATCHERS) {
+    const hit = m.re.exec(name)
+    if (!hit) continue
+    const family = hit.groups?.family
+    const parts = family
+      ? RADIX_VARIABLE_FAMILIES.find((f) => f.radix === family).zenith
+      : describeParts(m.parts)
+    return { baseUi: m.baseUi, parts }
+  }
+  return null
+}
+
+function radixFindings(identity, fileLabel, stripped, lineOf, colOf) {
+  const findings = []
+  for (const m of stripped.matchAll(DATA_STATE_RE)) {
+    const value = m[1] ?? m[3] ?? m[4]
+    if (value && !RADIX_STATE_VALUES.has(value)) continue // Zenith's own values (selected, loading, …)
+    const replacement = dataStateReplacement(value)
+    findings.push(
+      makeFinding(identity, {
+        code: "radix-data-state-selector",
+        severity: "warning",
+        confidence:
+          !value || SHARED_STATE_VALUES.has(value) ? "medium" : "high",
+        file: fileLabel,
+        line: lineOf(m.index),
+        column: colOf(m.index),
+        evidence: m[0],
+        explanation: value
+          ? `Radix set data-state="${value}"; the Base UI part carries a dedicated attribute instead, so this selector or query matches nothing after the upgrade.${SHARED_STATE_VALUES.has(value) ? " Zenith's List still uses this value on its groups; leave the selector if it targets one." : ""}`
+          : "Radix set data-state on every stateful part; the Base UI parts carry one attribute per state instead. Zenith's List, Table and DataTable keep their own data-state values, so check what this reads.",
+        suggestion: `Use ${replacement}.`,
+      })
+    )
+  }
+  for (const m of stripped.matchAll(RADIX_VAR_RE)) {
+    const replacement = radixVariableReplacement(m[0])
+    findings.push(
+      makeFinding(identity, {
+        code: "radix-css-variable",
+        severity: "error",
+        confidence: "high",
+        file: fileLabel,
+        line: lineOf(m.index),
+        column: colOf(m.index),
+        evidence: m[0],
+        explanation:
+          "Base UI publishes no --radix-* custom property, so this resolves to nothing after the upgrade.",
+        suggestion: replacement
+          ? `Read ${replacement.baseUi} instead (${replacement.parts}).`
+          : "No Zenith family sets a Base UI counterpart for this variable; the declaration that reads it needs another source.",
+      })
+    )
+  }
   return findings
 }
 
+/** The upgrade guide's rename table, from RADIX_RENAMES: one Markdown document with two tables. */
+export function renderRadixRenamesMarkdown() {
+  const code = (s) => `\`${s}\``
+  const attributeRows = RADIX_RENAMES.attributes.map(
+    (a) =>
+      `| ${code(`data-state="${a.value}"`)} | ${a.baseUi ? code(a.baseUi) : `none (${a.note})`} | ${describeParts(a.parts)} |`
+  )
+  const variableRows = RADIX_RENAMES.variables.map((v) => {
+    const parts = v.parts
+      ? describeParts(v.parts)
+      : RADIX_VARIABLE_FAMILIES.map((f) => f.zenith).join(", ")
+    return `| ${code(v.radix)} | ${code(v.baseUi)} | ${parts} |`
+  })
+  const families = RADIX_VARIABLE_FAMILIES.map(
+    (f) => `${code(f.radix)} (${f.zenith})`
+  ).join(", ")
+  const kept = RADIX_RENAMES.keptDataState
+    .map((k) => `${k.part} (${k.values.map((v) => code(`"${v}"`)).join(", ")})`)
+    .join("; ")
+  return [
+    "<!-- Generated by packages/react/scripts/migration-renames.mjs from RADIX_RENAMES in migration-diagnostics-core.mjs. Do not edit; run `bun scripts/migration-renames.mjs --write`. -->",
+    "",
+    "### State attributes",
+    "",
+    "| Radix | Base UI | Zenith parts |",
+    "| --- | --- | --- |",
+    ...attributeRows,
+    "",
+    `${RADIX_RENAMES.added.map(code).join(" and ")} are new: a part carries one while it enters or leaves. ${RADIX_RENAMES.unchanged.map(code).join(", ")} and the ${code("aria-*")} attributes are unchanged. Zenith's own parts keep ${code("data-state")}: ${kept}.`,
+    "",
+    "### CSS variables",
+    "",
+    "| Radix | Base UI | Zenith parts |",
+    "| --- | --- | --- |",
+    ...variableRows,
+    "",
+    `${code("<family>")} is ${families}.`,
+    "",
+  ].join("\n")
+}
+
 // ---------------------------------------------------------------------------
 // Rule 3: syntax-aware (TypeScript AST) palette-install analysis
 // ---------------------------------------------------------------------------

package/scripts/migration-sweep.mjs

@@ -16,6 +16,14 @@ import {
 const DEFAULT_PACKAGE_DIR = resolve(import.meta.dirname, "..")
 const KNOWN_FLAGS = new Set(["--json", "--package", "--exclude"])
 
+/** One finding: where and what, then the fix on its own line so the text report carries it too. */
+function printFinding(f) {
+  console.log(
+    `      [${f.severity}] ${f.code.padEnd(28)} ${f.file}:${f.line}:${f.column}  ${f.evidence}`
+  )
+  if (f.suggestion) console.log(`          → ${f.suggestion}`)
+}
+
 function usage() {
   return (
     "usage: node migration-sweep.mjs [--json] [--package <dir>] [--exclude <path>]... <path> [...]\n" +
@@ -157,11 +165,7 @@ export async function runCli(argv) {
               ? ` (${r.findings.length} finding(s) from the rules that did run, below)`
               : "")
         )
-        for (const f of r.findings) {
-          console.log(
-            `      [${f.severity}] ${f.code.padEnd(28)} ${f.file}:${f.line}:${f.column}  ${f.evidence}`
-          )
-        }
+        for (const f of r.findings) printFinding(f)
         continue
       }
       if (!r.findings.length) {
@@ -171,11 +175,7 @@ export async function runCli(argv) {
         continue
       }
       console.log(`  ✗ ${name} — ${r.findings.length} finding(s)`)
-      for (const f of r.findings) {
-        console.log(
-          `      [${f.severity}] ${f.code.padEnd(28)} ${f.file}:${f.line}:${f.column}  ${f.evidence}`
-        )
-      }
+      for (const f of r.findings) printFinding(f)
     }
     console.log("")
   }