perf: use custom version of dropdown

package.json

@@ -20,10 +20,10 @@
     "node": "^18.x || ^20.x"
   },
   "dependencies": {
-    "@aurodesignsystem/auro-dropdown": "^2.10.6",
+    "@aurodesignsystem/auro-dropdown": "^3.0.0-beta.2",
     "@aurodesignsystem/auro-formvalidation": "^1.0.3",
     "@aurodesignsystem/auro-library": "^2.6.3",
-    "@aurodesignsystem/auro-menu": "^3.11.9",
+    "@aurodesignsystem/auro-menu": "^3.12.0-beta.1",
     "chalk": "^5.3.0",
     "lit-element": "^4.1.0",
     "lit-html": "^3.2.0"
@@ -53,7 +53,7 @@
     "concurrently": "^8.2.2",
     "copyfiles": "^2.4.1",
     "core-js": "^3.38.0",
-    "eslint": "^9.5.0",
+    "eslint": "^9.9.0",
     "eslint-plugin-jsdoc": "^50.0.1",
     "husky": "^9.1.4",
     "lodash": "^4.17.21",
@@ -139,7 +139,7 @@
     "web components"
   ],
   "scripts": {
-    "build": "npm-run-all build:sass sass:render types",
+    "build": "npm-run-all build:sass build:version sass:render types",
     "build:test": "npm-run-all test linters",
     "build:release": "npm-run-all build build:test build:api build:docs bundler postinstall",
     "build:ci": "npm-run-all sweep build:release",
@@ -148,13 +148,14 @@
     "build:docs": "node scripts/generateDocs.mjs",
     "build:sass": "npm-run-all build:sass:component postCss:component sass:render",
     "build:sass:component": "sass --no-source-map src:src",
+    "build:version": "node scripts/version.mjs",
     "build:watch": "nodemon -e scss,js,html --watch src --watch apiExamples/**/* --exec npm run build:dev:assets",
     "bundler": "rollup -c",
     "bundler:test": "rollup -c -w",
     "scssLint": "stylelint \"./src/**/*.scss\"",
     "dev": "concurrently --kill-others \"npm run build:watch\" \"npm run serve\"",
     "dist:js": "copyfiles -u 1 -V './src/**/*.js' ./dist",
-    "esLint": "./node_modules/.bin/eslint src/**/*.js",
+    "esLint": "./node_modules/.bin/eslint src/**/*.js --ignore-pattern 'src/**/*Version.js'",
     "linters": "npm-run-all scssLint esLint",
     "preCommit": "node scripts/pre-commit.mjs",
     "postCss:component": "node scripts/postCss.mjs",

scripts/version.mjs

@@ -0,0 +1,3 @@
+import versionWriter from '@aurodesignsystem/auro-library/scripts/build/versionWriter.js';
+
+versionWriter.writeDepVersionFile('@aurodesignsystem/auro-dropdown');

src/auro-select.js

@@ -3,16 +3,22 @@
 
 // ---------------------------------------------------------------------
 
-/* eslint-disable prefer-named-capture-group, max-lines */
+/* eslint-disable prefer-named-capture-group, max-lines, no-underscore-dangle, lit/binding-positions, lit/no-invalid-html */
 
 // If using litElement base class
-import { LitElement, html } from "lit";
-
-import '@aurodesignsystem/auro-menu';
+import { LitElement } from "lit";
+import { html } from 'lit/static-html.js';
 
 import AuroFormValidation from '@aurodesignsystem/auro-formvalidation/src/validation.js';
 import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
+import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
+
+import { AuroDropdown } from '@aurodesignsystem/auro-dropdown/src/auro-dropdown.js';
+import dropdownVersion from './dropdownVersion';
+
+import '@aurodesignsystem/auro-menu';
+
 // Import touch detection lib
 import styleCss from "./style-css.js";
 
@@ -69,6 +75,13 @@ export class AuroSelect extends LitElement {
      * @private
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
+
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning();
+
+    this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
   }
 
   /**
@@ -150,7 +163,7 @@ export class AuroSelect extends LitElement {
    * @returns {void}
    */
   configureDropdown() {
-    this.dropdown = this.shadowRoot.querySelector('auro-dropdown');
+    this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
 
     this.dropdown.addEventListener('auroDropdown-ready', () => {
       this.auroDropdownReady = true;
@@ -164,8 +177,7 @@ export class AuroSelect extends LitElement {
    * @returns {void}
    */
   updateDisplayedValue(option) {
-    const dropdown = this.shadowRoot.querySelector('auro-dropdown');
-    const triggerContentEl = dropdown.querySelector('#triggerFocus');
+    const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
     // remove all existing rendered value(s)
     triggerContentEl.querySelectorAll('auro-menuoption, [valuestr]').forEach((elm) => {
@@ -399,15 +411,15 @@ export class AuroSelect extends LitElement {
     super.performUpdate();
 
     if (this.validity && this.validity !== 'valid') {
-      this.shadowRoot.querySelector('auro-dropdown').setAttribute('error', '');
+      this.dropdown.setAttribute('error', '');
     } else {
-      this.shadowRoot.querySelector('auro-dropdown').removeAttribute('error');
+      this.dropdown.removeAttribute('error');
     }
 
     if (this.disabled) {
-      this.shadowRoot.querySelector('auro-dropdown').setAttribute('disabled', '');
+      this.dropdown.setAttribute('disabled', '');
     } else if (!this.disabled) {
-      this.shadowRoot.querySelector('auro-dropdown').removeAttribute('disabled');
+      this.dropdown.removeAttribute('disabled');
     }
 
     if (this.noCheckmark) {
@@ -517,7 +529,7 @@ export class AuroSelect extends LitElement {
             : undefined
           };
         </div>
-        <auro-dropdown
+        <${this.dropdownTag}
           for="selectmenu"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           common
@@ -530,7 +542,7 @@ export class AuroSelect extends LitElement {
             <slot></slot>
           </div>
           <slot name="label" slot="label"></slot>
-        </auro-dropdown>
+        </${this.dropdownTag}>
         <!-- Help text and error message template -->
         ${!this.validity || this.validity === undefined || this.validity === 'valid'
           ? html`

src/dropdownVersion.js

@@ -0,0 +1 @@
+export default '3.0.0-beta.2'

src/style.scss

@@ -27,7 +27,9 @@
 }
 
 :host {
-  auro-dropdown {
+  [auro-dropdown] {
+    position: relative;
+
     &::part(trigger) {
       min-height: var(--ds-size-500, $ds-size-500);
       max-height: var(--ds-size-500, $ds-size-500);