chore: apply code review feedback awesomeness

Author: castastrophe

components/actionmenu/stories/actionmenu.stories.js

@@ -75,11 +75,6 @@ export default {
 	tags: ["migrated"],
 };
 
-/**
- * Action menu allows users to access and execute various commands or tasks related to their current workflow. It's typically triggered from an action button by user interaction.
- *
- * Note that the accessibility roles are different for an action menu compared to a normal menu. The action menu is a combination of a menu, popover, and action button.
- */
 export const Default = ActionMenuGroup.bind({});
 Default.args = {
 	triggerArgs: {
@@ -130,6 +125,8 @@ Default.args = {
  * By default, the menu is opened by pressing the trigger element or activating it via the <kbd>Space</kbd> or <kbd>Enter</kbd> keys. However, there may be cases where the trigger should perform a separate action on press such as selection, and should only display the menu when long pressed. For this use-case, the menu will only be opened when pressing and holding the trigger or by using the <kbd>Option</kbd> (Alt on Windows) + <kbd>Down arrow</kbd>/<kbd>Up arrow</kbd> keys while focusing the trigger.
  *
  * This example illustrates the expected visuals and states of the action menu for a trigger with both long press and short press behaviors.
+ *
+ * Please note that the long press functionality is not implemented in this documentation and the example serves only as a visual reference.
  */
 export const LongPress = Template.bind({});
 LongPress.args = {
@@ -165,7 +162,7 @@ LongPress.parameters = {
 };
 
 /**
- * Action menus can be positioned in four locals relative to the trigger but <u>only one menu can be triggered at a single time</u>.
+ * Action menus can be positioned in four locals relative to the trigger but <em>only one menu can be triggered at a single time</em>.
  */
 export const PlacementOptions = (args, context) => ArgGrid({
 	Template,

components/actionmenu/stories/template.js

@@ -3,6 +3,8 @@ import { Template as Menu } from "@spectrum-css/menu/stories/template.js";
 import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
 import { getRandomId } from "@spectrum-css/preview/decorators";
 
+import "../index.css";
+
 export const Template = (
 	{
 		rootClass = "spectrum-ActionMenu",

components/coachmark/stories/template.js

@@ -52,7 +52,7 @@ export const CoachContainer = (
 		<div class="spectrum-CoachMark-header" style=${styleMap({
 			"--mod-popover-width": "0px",
 			"--mod-popover-height": "0px",
-			"--mod-popover-wrapper-spacing": "0px",
+			"--spectrum-popover-animation-distance": "0px",
 		})}>
 			<div class="spectrum-CoachMark-title">${title}</div>
 			${when(

components/popover/stories/template.js

@@ -21,7 +21,7 @@ export const Template = ({
 	if (isOpen) {
 		if (["top", "bottom"].some((e) => position.startsWith(e))) {
 			customWrapperStyles["min-inline-size"] = "var(--spectrum-popover-width)";
-			customWrapperStyles["min-block-size"] = "calc(var(--spectrum-popover-height) + var(--spectrum-popover-trigger-height, 0px) + var(--mod-popover-wrapper-spacing, var(--spectrum-spacing-100) * 2))";
+			customWrapperStyles["min-block-size"] = "calc(var(--spectrum-popover-height) + var(--spectrum-popover-trigger-height, 0px) + var(--spectrum-popover-animation-distance, var(--spectrum-spacing-100) * 2))";
 		}
 		else {
 			customWrapperStyles["min-inline-size"] = "calc(var(--spectrum-popover-width) + var(--spectrum-popover-trigger-width, 0px))";
@@ -95,10 +95,10 @@ export const Popover = ({
 	if (trigger) {
 		// Translate the popover to the correct position, keeping the default spacing between the trigger and the popover in mind.
 		if (position.startsWith("top")) {
-			popoverAlignment["transform"] = "translateY(calc(var(--spectrum-popover-trigger-height, 0px) * -1 - var(--spectrum-spacing-100)))";
+			popoverAlignment["transform"] = "translateY(calc(var(--spectrum-popover-trigger-height, 0px) * -1 - var(--spectrum-popover-animation-distance, var(--spectrum-spacing-100))))";
 		}
 		else if (position.startsWith("bottom")) {
-			popoverAlignment["transform"] = "translateY(calc(var(--spectrum-popover-trigger-height, 0px) + var(--spectrum-spacing-100)))";
+			popoverAlignment["transform"] = "translateY(calc(var(--spectrum-popover-trigger-height, 0px) + var(--spectrum-popover-animation-distance, var(--spectrum-spacing-100))))";
 		}
 
 		// Position the popover to the correct position at the correct side of the trigger.