fix(menu): move s1/express focus indicator to right side for rtl (#3581)

Because `--spectrum-menu-item-focus-indicator-border-width` is set in `.spectrum-Menu`, but this custom prop relies on the definition of `--spectrum-menu-item-focus-indicator-direction-scalar`, which was scoped to `.spectrum-Menu-item`. This change defines that scalar custom property and thus moves the focus indicator to the right side for rtl.

- Moves definition of `--spectrum-menu-item-focus-indicator-direction-scalar` to `.spectrum-Menu` to ensure it is available when `--spectrum-menu-item-focus-indicator-border-width` is set.
- Use `--spectrum-menu-item-focus-indicator-width` rather than border-width in calculations that do not require scalar
- Minor refactoring to better utilize custom properties

Author: rise-erpelding

.changeset/green-ghosts-collect.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/menu": patch
+---
+
+Adjusts RTL mode menu item focus indicator side for S1/Express.

components/menu/dist/metadata.json

@@ -89,7 +89,6 @@
     ".spectrum-Menu-item:active > .spectrum-Menu-itemLabel",
     ".spectrum-Menu-item:active > .spectrum-Menu-itemValue",
     ".spectrum-Menu-item:active > .spectrum-Menu-sectionHeading",
-    ".spectrum-Menu-item:dir(rtl)",
     ".spectrum-Menu-item:focus",
     ".spectrum-Menu-item:focus > .spectrum-Menu-checkmark",
     ".spectrum-Menu-item:focus > .spectrum-Menu-chevron",
@@ -134,11 +133,12 @@
     ".spectrum-Menu.spectrum-Menu--sizeL",
     ".spectrum-Menu.spectrum-Menu--sizeS",
     ".spectrum-Menu.spectrum-Menu--sizeXL",
+    ".spectrum-Menu:dir(rtl)",
     ".spectrum-Menu:lang(ja)",
     ".spectrum-Menu:lang(ko)",
     ".spectrum-Menu:lang(zh)",
-    "[dir=\"rtl\"] .spectrum-Menu .spectrum-Menu-chevron",
-    "[dir=\"rtl\"] .spectrum-Menu-item"
+    "[dir=\"rtl\"] .spectrum-Menu",
+    "[dir=\"rtl\"] .spectrum-Menu .spectrum-Menu-chevron"
   ],
   "modifiers": [
     "--mod-menu-back-heading-color",

components/menu/index.css

@@ -67,7 +67,7 @@
 		.spectrum-Menu-item--collapsible.is-open {
 			&:hover,
 			&:focus-within {
-				box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)));
+				box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default);
 			}
 
 			&:hover,
@@ -87,7 +87,7 @@
 	--spectrum-menu-item-label-line-height: var(--spectrum-line-height-100);
 	--spectrum-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100);
 	--spectrum-menu-item-label-to-description-spacing: var(--spectrum-menu-item-label-to-description);
-	--spectrum-menu-item-focus-indicator-width: var(--spectrum-border-width-200);
+	--spectrum-menu-item-focus-indicator-width: var(--mod-menu-item-focus-indicator-width, var(--spectrum-border-width-200));
 	--spectrum-menu-item-focus-indicator-color: var(--spectrum-blue-800);
 	--spectrum-menu-item-label-to-value-area-min-spacing: var(--spectrum-spacing-100);
 
@@ -167,7 +167,7 @@
 	--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width)));
 
 	--spectrum-menu-item-focus-indicator-color-default: var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)));
-	--spectrum-menu-item-focus-indicator-border-width: calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1));
+	--spectrum-menu-item-focus-indicator-border-width: calc(var(--spectrum-menu-item-focus-indicator-width) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1));
 
 	&.spectrum-Menu--sizeS {
 		--spectrum-menu-item-min-height: var(--spectrum-component-height-75);
@@ -249,6 +249,10 @@
 
 		--spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large);
 	}
+
+	&:dir(rtl) {
+		--spectrum-menu-item-focus-indicator-direction-scalar: -1;
+	}
 }
 
 .spectrum-Menu {
@@ -396,7 +400,7 @@
 	padding-block-end: var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text));
 	padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
 
-	margin: calc((var(--spectrum-menu-item-focus-indicator-offset) + var(--spectrum-menu-item-focus-indicator-border-width)) * var(--spectrum-menu-item-spacing-multiplier));
+	margin: calc((var(--spectrum-menu-item-focus-indicator-offset) + var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-spacing-multiplier));
 	text-decoration: none;
 
 	display: grid;
@@ -484,10 +488,6 @@
 		}
 	}
 
-	&:dir(rtl) {
-		--spectrum-menu-item-focus-indicator-direction-scalar: -1;
-	}
-
 	&:hover {
 		background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover)));
 
@@ -603,7 +603,7 @@
 .spectrum-Menu-item:focus-visible,
 .spectrum-Menu-back:focus-visible {
 	box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default);
-	outline: var(--spectrum-menu-item-focus-indicator-border-width) var(--spectrum-menu-item-focus-indicator-outline-style) var(--spectrum-menu-item-focus-indicator-color-default);
+	outline: var(--spectrum-menu-item-focus-indicator-width) var(--spectrum-menu-item-focus-indicator-outline-style) var(--spectrum-menu-item-focus-indicator-color-default);
 	outline-offset: var(--spectrum-menu-item-focus-indicator-offset);
 	border-radius: var(--spectrum-menu-item-corner-radius);
 }