perf(loader): use beta version of loader as direct dependency

package.json

@@ -21,7 +21,7 @@
     "node": "^18 || ^20"
   },
   "dependencies": {
-    "@aurodesignsystem/auro-loader": "^2.0.6",
+    "@aurodesignsystem/auro-loader": "^2.1.0-beta.2",
     "chalk": "^5.3.0",
     "lit": "^3.1.4"
   },
@@ -88,14 +88,15 @@
     ]
   },
   "scripts": {
-    "build": "npm-run-all build:sass sass:render types",
+    "build": "npm-run-all build:version build:sass sass:render build:api build:docs bundler",
     "build:test": "npm-run-all test linters",
-    "build:release": "npm-run-all build build:test build:api build:docs bundler postinstall",
+    "build:release": "npm-run-all build:test build types postinstall",
     "build:ci": "npm-run-all sweep build:release",
     "build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render",
     "build:api": "wca analyze 'src/auro-button.js' --outFiles docs/api.md",
     "build:docs": "node scripts/generateDocs.mjs",
     "build:watch": "nodemon -e scss,js --watch src --exec npm run build:dev:assets",
+    "build:version": "node scripts/version.mjs",
     "bundler": "rollup -c",
     "bundle:test": "rollup -c -w",
     "scssLint": "stylelint \"./src/**/*.scss\"",

scripts/version.mjs

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

src/auro-button.js

@@ -3,13 +3,17 @@
 
 // ---------------------------------------------------------------------
 
-import { LitElement, html } from "lit";
+import { LitElement } from "lit";
+import { html } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
 import styleCss from "./style-css.js";
 import colorsCss from "./colors-css.js";
 import tokensCss from "./tokens-css.js";
-import '@aurodesignsystem/auro-loader';
+
+import { AuroLoader } from '@aurodesignsystem/auro-loader/src/auro-loader.js';
+import loaderVersion from './loaderVersion';
 
 /**
  * @attr {Boolean} autofocus - This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user
@@ -37,7 +41,8 @@ import '@aurodesignsystem/auro-loader';
  * @csspart icon - Apply CSS to icon slot.
  */
 
-/* eslint-disable max-statements, one-var, no-magic-numbers */
+/* eslint-disable max-statements, one-var, no-magic-numbers, lit/no-invalid-html, lit/binding-positions */
+
 export class AuroButton extends LitElement {
 
   constructor() {
@@ -53,6 +58,12 @@ export class AuroButton extends LitElement {
     this.rounded = false;
     this.slim = false;
     this.fluid = false;
+
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning();
+    this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
   }
 
   static get styles() {
@@ -190,7 +201,7 @@ export class AuroButton extends LitElement {
         .value="${ifDefined(this.value ? this.value : undefined)}"
         @click="${() => {}}"
       >
-        ${ifDefined(this.loading ? html`<auro-loader pulse part="loader"></auro-loader>` : undefined)}
+        ${ifDefined(this.loading ? html`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
 
         <span class="contentWrapper">
           <span class="textSlot" part="text">

src/loaderVersion.js

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

src/style.scss

@@ -134,7 +134,7 @@ slot {
   &.loading {
     cursor: not-allowed;
 
-    *:not(auro-loader) {
+    *:not([auro-loader]) {
       visibility: hidden;
     }
   }
@@ -286,7 +286,7 @@ slot {
   }
 }
 
-auro-loader {
+[auro-loader] {
   position: absolute;
   top: 50%;
   left: 50%;