fix(steps): anchor the empty-step-content :has to the step item

packages/components/biome.jsonc

@@ -1,6 +1,10 @@
 {
   "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
   "extends": ["ultracite/biome/core", "ultracite/biome/react"],
+  "plugins": [
+    "./plugins/no-universal-has.grit",
+    "./plugins/no-universal-has-css.grit"
+  ],
   "css": {
     "parser": {
       "tailwindDirectives": true

packages/components/plugins/no-universal-has-css.grit

@@ -0,0 +1,6 @@
+language css
+
+`$sel { $decls }` where {
+  $sel <: r"(?s)(?:.*,)?\s*:has\(.*",
+  register_diagnostic(span=$sel, message="universal-subject :has selector is banned; anchor :has to a specific element")
+}

packages/components/plugins/no-universal-has.grit

@@ -0,0 +1,11 @@
+language js
+
+// group-has-* compiles to a :has() selector with a universal subject, which
+// forces whole-document style recalc on every dom mutation in consumers.
+// anchor the variant to a stable ancestor instead, e.g.
+// [[role=listitem]:has([data-component-part=step-content]:empty)_&]:hidden
+`$s` where {
+  $s <: string(),
+  $s <: includes "group-has-",
+  register_diagnostic(span=$s, message="universal-subject :has variant (group-has-*) is banned; anchor :has to a stable ancestor")
+}

packages/components/src/code.css

@@ -83,17 +83,14 @@ html.dark [data-fade-overlay] {
   );
 }
 
-:has([data-floating-buttons])
+[data-has-floating-buttons]
   > [data-component-part="code-block-root"]
   pre
   > code {
   padding-right: var(--code-padding-right, 0px) !important;
 }
 
-:has([data-component-part="code-block-header"])
-  > [data-component-part="code-block-root"]
-  pre
-  > code {
+[data-has-header] > [data-component-part="code-block-root"] pre > code {
   padding-right: var(--code-padding-right, 48px) !important;
 }
 

packages/components/src/components/code-block/code-block.tsx

@@ -117,6 +117,9 @@ const CodeBlock = function CodeBlock(params: CodeBlockProps) {
         className
       )}
       ref={anchorRef}
+      {...(hasGrayBackgroundContainer
+        ? { "data-has-header": "" }
+        : { "data-has-floating-buttons": "" })}
     >
       {hasGrayBackgroundContainer ? (
         <CodeHeader

packages/components/src/components/steps/steps.tsx

@@ -150,7 +150,7 @@ const StepsItem = ({
         className={cn(
           "absolute top-11 h-[calc(100%-2.75rem)] w-px",
           isLast
-            ? 'bg-linear-to-b from-stone-200 via-80% via-stone-200 to-transparent group-has-[[data-component-part="step-content"]:empty]/step:hidden dark:from-white/10 dark:via-white/10'
+            ? "bg-linear-to-b from-stone-200 via-80% via-stone-200 to-transparent dark:from-white/10 dark:via-white/10 [[role=listitem]:has([data-component-part=step-content]:empty)_&]:hidden"
             : "bg-stone-200/70 dark:bg-white/10"
         )}
         contentEditable={false}