switch to css variables.

Author: Templarian

src/pg/overlayMenu/README.md

@@ -1,6 +1,12 @@
 # Overlay Menu
 
-The `PgOverlayMenu` creates a menu creates an overlay menu above a source element. For standard menu lists use the `PgMenuItem` for the check.
+The `PgOverlayMenu` creates an overlay menu above a source element. For standard menu lists use the `PgMenuItem` for the check.
+
+Components that use `PgOverlayMenu` include:
+
+- `pg-input-select`
+
+## Usage
 
 ```typescript
 import PgMenuItem from '@pictogrammers/components/pg/menuItem';
@@ -24,4 +30,4 @@ handleSourceClick() {
   this.#isOpen = false;
   console.log(result);
 }
-```
+```

src/pg/overlayMenu/overlayMenu.css

@@ -12,4 +12,5 @@
   top: anchor(top);
   left: anchor(left);
   min-width: calc(anchor-size(width) + calc(2 * var(--pg-menu-padding, 0.25rem)));
+  translate: var(--pg-overlay-menu-_x, 0) var(--pg-overlay-menu-_y, 0);
 }

src/pg/overlayMenu/overlayMenu.ts

@@ -1,4 +1,5 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
+
 import PgMenu from '../menu/menu';
 import PgOverlay from '../overlay/overlay';
 
@@ -70,7 +71,8 @@ export default class PgOverlayMenu extends PgOverlay {
       }
     }
     // ToDo: update to CSS Variables
-    this.$overlay.style.translate = `${x}px ${y}px`;
+    this.$overlay.style.setProperty('--pg-overlay-menu-_x', `${x}px`);
+    this.$overlay.style.setProperty('--pg-overlay-menu-_y', `${y}px`);
     // Focus
     this.$menu.focus(index);
   }