feat(library): add auro-library functionality to repo

package.json

@@ -30,7 +30,7 @@
     "@aurodesignsystem/webcorestylesheets": "^5.0.5"
   },
   "devDependencies": {
-    "@aurodesignsystem/auro-library": "^2.5.1",
+    "@aurodesignsystem/auro-library": "^2.6.0",
     "@aurodesignsystem/design-tokens": "^4.3.0",
     "@aurodesignsystem/eslint-config": "^1.3.0",
     "@aurodesignsystem/webcorestylesheets": "^5.1.0",

src/auro-checkbox-group.js

@@ -9,6 +9,7 @@ import { LitElement, html } from "lit";
 import { classMap } from 'lit/directives/class-map.js';
 
 import AuroFormValidation from '@aurodesignsystem/auro-formvalidation/src/validation.js';
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
 // Import the processed CSS file into the scope of the component
 import styleCss from "./auro-checkbox-group-css.js";
@@ -53,6 +54,11 @@ export class AuroCheckboxGroup extends LitElement {
      * @private
      */
     this.validation = new AuroFormValidation();
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
   static get styles() {
@@ -135,6 +141,9 @@ export class AuroCheckboxGroup extends LitElement {
   }
 
   firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-checkbox-group');
+
     // must declare this function as a variable to correctly pass the reference to the removeEventListener
     const checkFocusWithin = function(evt) {
       if (document.auroCheckboxGroupActive && !document.auroCheckboxGroupActive.contains(evt.target)) {

src/auro-checkbox.js

@@ -11,6 +11,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import styleCss from "./auro-checkbox-css.js";
 import checkLg from '@alaskaairux/icons/dist/icons/interface/check-lg.mjs';
 
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
 /**
  * Custom element for the purpose of allowing users to select one or more options of a limited number of choices.
  *
@@ -32,6 +34,11 @@ export class AuroCheckbox extends LitElement {
     this.checked = false;
     this.disabled = false;
     this.error = false;
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
   static get styles() {
@@ -106,6 +113,9 @@ export class AuroCheckbox extends LitElement {
   }
 
   firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-checkbox');
+
     this.addEventListener('click', () => {
       this.handleFocusin();
     });