fix(menu): distinguish menu headers from testing preview headers

Author: rise-erpelding

components/menu/stories/menu.stories.js

@@ -92,6 +92,7 @@ export default {
 			return html`
 				<style>
 					.spectrum-Detail { display: inline-block; }
+					.spectrum-Typography { --mod-detail-font-color: var(--spectrum-seafoam-900); }
 					.spectrum-Typography > div {
 						border: 1px solid var(--spectrum-gray-200);
 						border-radius: 4px;
@@ -161,7 +162,7 @@ MenuWithVariants.args = {
 	items: [
 		{
 			idx: 1,
-			heading: "With Icons",
+			heading: "Menu header - Menu with icons",
 			id: "menu-heading-with-icons",
 			items: [
 				{
@@ -190,7 +191,7 @@ MenuWithVariants.args = {
 		{ type: "divider" },
 		{
 			idx: 2,
-			heading: "With descriptions and icons",
+			heading: "Menu header - With descriptions and icons",
 			id: "menu-heading-short-desc",
 			items: [
 				{
@@ -213,7 +214,7 @@ MenuWithVariants.args = {
 		{ type: "divider" },
 		{
 			idx: 3,
-			heading: "With actions, icons, short descriptions, and values and longer header text that wraps",
+			heading: "Menu header - With actions, icons, short descriptions, and values and longer header text that wraps",
 			id: "menu-heading-desc-icon-value",
 			hasActions: true,
 			items: [
@@ -244,7 +245,7 @@ MenuWithVariants.args = {
 		},
 		{
 			idx: 4,
-			heading: "These menu items have drill-ins for a submenu",
+			heading: "Menu header - These menu items have drill-ins for a submenu",
 			id: "menu-heading-drillin",
 			items: [
 				{