fix: only animate grid tree toggle within a focused row (#10336)

Author: tomivirkki

packages/grid/src/styles/vaadin-grid-base-styles.js

@@ -138,6 +138,10 @@ export const gridStyles = css`
     position: relative;
   }
 
+  [part~='row']:not(:focus-within) {
+    --_non-focused-row-none: none;
+  }
+
   [part~='row'][loading] [part~='body-cell'] ::slotted(vaadin-grid-cell-content) {
     visibility: hidden;
   }

packages/grid/src/styles/vaadin-grid-tree-toggle-base-styles.js

@@ -54,7 +54,7 @@ export const gridTreeToggleStyles = css`
 
   @media (prefers-reduced-motion: no-preference) {
     [part='toggle']::before {
-      transition: rotate 120ms;
+      transition: var(--_non-focused-row-none, rotate 120ms);
     }
   }
 

packages/grid/src/vaadin-grid-tree-column-mixin.js

@@ -49,7 +49,11 @@ export const GridTreeColumnMixin = (superClass) =>
       toggle.__rendererExpanded = expanded;
       toggle.expanded = expanded;
       toggle.leaf = !hasChildren;
-      toggle.textContent = this.__getToggleContent(this.path, item);
+      const content = this.__getToggleContent(this.path, item);
+      if (toggle.textContent !== content) {
+        // Only update textContent if it has changed to avoid toggle animation issues on Safari
+        toggle.textContent = content;
+      }
       toggle.level = level;
     }