Stop hover transfer working between rows of Properties panel dropdown menus

Author: Keavon

frontend/src/components/layout/FloatingMenu.svelte

@@ -372,6 +372,9 @@
 		// Start with the parent of the spawner for this floating menu and keep widening the search for any other valid spawners that are hover-transferrable
 		let currentAncestor = (targetSpawner && ownSpawner?.parentElement) || undefined;
 		while (currentAncestor) {
+			// If the current ancestor blocks hover transfer, stop searching
+			if (currentAncestor.hasAttribute("data-block-hover-transfer")) break;
+
 			const ownSpawnerDepthFromCurrentAncestor = ownSpawner && getDepthFromAncestor(ownSpawner, currentAncestor);
 			const currentAncestor2 = currentAncestor; // This duplicate variable avoids an ESLint warning
 
@@ -382,8 +385,8 @@
 				const notOurself = !ownDescendantMenuSpawners.includes(item);
 				// And filter away unequal depths from the current ancestor
 				const notUnequalDepths = notOurself && getDepthFromAncestor(item, currentAncestor2) === ownSpawnerDepthFromCurrentAncestor;
-				// And filter away elements that explicitly disable hover transfer
-				return notUnequalDepths && !(item as HTMLElement).getAttribute?.("data-floating-menu-spawner")?.includes("no-hover-transfer");
+				// And filter away descendants that explicitly disable hover transfer
+				return notUnequalDepths && !(item instanceof HTMLElement && item.hasAttribute("data-block-hover-transfer"));
 			});
 
 			// If none were found, widen the search by a level and keep trying (or stop looping if the root was reached)

frontend/src/components/widgets/WidgetSection.svelte

@@ -59,7 +59,7 @@
 		/>
 	</button>
 	{#if expanded}
-		<LayoutCol class="body">
+		<LayoutCol class="body" data-block-hover-transfer>
 			{#each widgetData.layout as layoutGroup}
 				{#if isWidgetSpanRow(layoutGroup)}
 					<WidgetSpan widgetData={layoutGroup} {layoutTarget} />

frontend/src/components/widgets/buttons/TextButton.svelte

@@ -72,7 +72,8 @@
 		data-disabled={disabled || undefined}
 		data-text-button
 		tabindex={disabled ? -1 : 0}
-		data-floating-menu-spawner={menuListChildrenExists ? "" : "no-hover-transfer"}
+		data-floating-menu-spawner
+		data-block-hover-transfer={menuListChildrenExists ? undefined : ""}
 		on:click={onClick}
 	>
 		{#if icon}

frontend/src/components/widgets/inputs/WorkingColorsInput.svelte

@@ -37,7 +37,7 @@
 
 <LayoutCol class="working-colors-button">
 	<LayoutRow class="primary swatch">
-		<button on:click={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
+		<button on:click={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner data-block-hover-transfer tabindex="0"></button>
 		<ColorPicker
 			open={primaryOpen}
 			on:open={({ detail }) => (primaryOpen = detail)}
@@ -47,7 +47,7 @@
 		/>
 	</LayoutRow>
 	<LayoutRow class="secondary swatch">
-		<button on:click={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
+		<button on:click={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner data-block-hover-transfer tabindex="0"></button>
 		<ColorPicker
 			open={secondaryOpen}
 			on:open={({ detail }) => (secondaryOpen = detail)}