feat: add tag name as attribute when custom reigstered

BREAKING CHANGE: trigger major release for color theme support #115

src/auro-accordion-group.js

@@ -6,6 +6,8 @@
 // If using litElement base class
 import { LitElement, html } from "lit";
 
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * Auro-accordion provides users a way to have collapsible content on a page.
@@ -18,6 +20,15 @@ import { LitElement, html } from "lit";
 
 // build the component class
 export class AuroAccordionGroup extends LitElement {
+  constructor() {
+    super();
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+  }
+
   // This function is to define props used within the scope of this component
   // Be sure to review  https://lit.dev/docs/components/properties/
   // to understand how to use reflected attributes with your property settings.
@@ -36,6 +47,11 @@ export class AuroAccordionGroup extends LitElement {
     };
   }
 
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-accordion-group');
+  }
+
   handleSlotContentChange() {
     this.addEventListener('toggleExpanded', this.handleToggleExpanded);
 

src/auro-accordion.js

@@ -10,6 +10,8 @@ import { LitElement, nothing } from "lit";
 import { html } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
 
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
 import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
 
 import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
@@ -54,6 +56,11 @@ export class AuroAccordion extends LitElement {
      */
     this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
 
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+
     this.expanded = false;
   }
 
@@ -99,6 +106,11 @@ export class AuroAccordion extends LitElement {
     ];
   }
 
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-accordion');
+  }
+
   /**
    * Internal function to generate the HTML for the icon to use.
    * @private
@@ -144,7 +156,6 @@ export class AuroAccordion extends LitElement {
 
   // function that renders the HTML and CSS into  the scope of the component
   render() {
-
     const buttonClasses = {
       "trigger": true,
       "iconRight": this.getAttribute('chevron') === 'right',