diff --git a/README.md b/README.md
index 3e50542..4be21a1 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ The README.md file is a compiled document. No edits should be made directly to t
 README.md is created by running `npm run build:docs`.
 
 This file is generated based on a template fetched from
-`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README.md`
+`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_updated_paths.md`
 and copied to `./componentDocs/README.md` each time the the docs are compiled.
 
 The following sections are editable by making changes to the following files:
@@ -19,12 +19,12 @@ The following sections are editable by making changes to the following files:
 
 # Hyperlink
 
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
-<!-- The below content is automatically added from ./../docs/partials/description.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
+<!-- The below content is automatically added from ./docs/partials/description.md -->
 `<auro-hyperlink>` is a wrapper components for an HTML `<a>` element containing styling and behavior.
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/readmeAddlInfo.md) -->
-<!-- The below content is automatically added from ./../docs/partials/readmeAddlInfo.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
+<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
 <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
@@ -72,8 +72,8 @@ import "@aurodesignsystem/auro-hyperlink";
 
 <!-- AURO-GENERATED-CONTENT:END -->
 **Reference component in HTML**
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 
 ```html
 <auro-hyperlink>No href supplied</auro-hyperlink><br>
@@ -104,8 +104,8 @@ In cases where the project is not able to process JS assets, there are pre-proce
 
 ## auro-hyperlink use cases
 
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
-<!-- The below content is automatically added from ./../docs/partials/useCases.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./docs/partials/useCases.md -->
 The `<auro-hyperlink>` elements should be used in situations where users may:
 
 * stand-alone link element for navigation
@@ -117,8 +117,8 @@ The `<auro-hyperlink>` elements should be used in situations where users may:
 
 ### Default auro-hyperlink
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 
 ```html
 <auro-hyperlink>No href supplied</auro-hyperlink><br>
diff --git a/demo/api.md b/demo/api.md
index 4ab6ac2..658adb0 100644
--- a/demo/api.md
+++ b/demo/api.md
@@ -1,5 +1,5 @@
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../api.md) -->
-<!-- The below content is automatically added from ./../api.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
+<!-- The below content is automatically added from ./../docs/api.md -->
 
 # auro-hyperlink
 
@@ -37,31 +37,31 @@
 ### Basic
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/basic.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-hyperlink>No href supplied</auro-hyperlink><br>
   Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic-ondark.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/basic-ondark.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-ondark.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic-ondark.html -->
   <auro-hyperlink ondark>No href supplied</auro-hyperlink><br>
   Welcome to <auro-hyperlink ondark href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
 <auro-hyperlink>No href supplied</auro-hyperlink><br>
 Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic-ondark.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/basic-ondark.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-ondark.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic-ondark.html -->
 
 ```html
 <auro-hyperlink ondark>No href supplied</auro-hyperlink><br>
@@ -77,8 +77,8 @@ Hyperlinks when used with the `target="_blank"` attribute are domain aware and r
 For link security purposes, when using the `target="_blank"` attribute, this implicitly provides the same `rel` behavior as setting `rel="noopener"`. For additional security, Auro applies `noreferrer` to the `rel` attribute by default.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/external.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/external.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/external.html -->
   Example link with
   <auro-hyperlink
     target="_blank"
@@ -98,8 +98,8 @@ For link security purposes, when using the `target="_blank"` attribute, this imp
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/external-ondark.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/external-ondark.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-ondark.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/external-ondark.html -->
   Example link with
   <auro-hyperlink
     ondark
@@ -122,8 +122,8 @@ For link security purposes, when using the `target="_blank"` attribute, this imp
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/external.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/external.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/external.html -->
 
 ```html
 Example link with
@@ -144,8 +144,8 @@ Example link with
  with external domain
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/external-ondark.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/external-ondark.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-ondark.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/external-ondark.html -->
 
 ```html
 Example link with
@@ -179,8 +179,8 @@ Using this attribute will use the `strict-origin-when-cross-origin` policy type.
 This will also set the `rel` attribute to `external`.
 
 <div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/external-referrer.html) -->
-<!-- The below content is automatically added from ./../../apiExamples/external-referrer.html -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-referrer.html) -->
+<!-- The below content is automatically added from ./../apiExamples/external-referrer.html -->
 Example link with
 <auro-hyperlink
   target="_blank"
@@ -192,8 +192,8 @@ Example link with
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/external-referrer-ondark.html) -->
-<!-- The below content is automatically added from ./../../apiExamples/external-referrer-ondark.html -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-referrer-ondark.html) -->
+<!-- The below content is automatically added from ./../apiExamples/external-referrer-ondark.html -->
 Example link with
 <auro-hyperlink
   ondark
@@ -207,8 +207,8 @@ Example link with
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/external-referrer.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/external-referrer.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-referrer.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/external-referrer.html -->
 
 ```html
 Example link with
@@ -221,8 +221,8 @@ Example link with
  , external domain with referrerpolicy attribute
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/external-referrer-ondark.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/external-referrer-ondark.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-referrer-ondark.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/external-referrer-ondark.html -->
 
 ```html
 Example link with
@@ -243,8 +243,8 @@ Example link with
 When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alternate UI. With this type, links will appear without an underline, but present the underline feedback on hover.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/navStyle.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/navStyle.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navStyle.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/navStyle.html -->
   <auro-hyperlink
     type="nav"
     href="https://www.alaskaair.com">
@@ -253,8 +253,8 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/navStyle-ondark.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/navStyle-ondark.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navStyle-ondark.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/navStyle-ondark.html -->
   <auro-hyperlink
     ondark
     type="nav"
@@ -265,8 +265,8 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/navStyle.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/navStyle.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navStyle.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/navStyle.html -->
 
 ```html
 <auro-hyperlink
@@ -276,8 +276,8 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
 </auro-hyperlink>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/navStyle-ondark.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/navStyle-ondark.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navStyle-ondark.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/navStyle-ondark.html -->
 
 ```html
 <auro-hyperlink
@@ -295,15 +295,15 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
 By default the `auro-hyperlink` will assume that the url passed is an absolute URL to `www.alaskaair.com` with the `https` protocol.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/relativevsabsolute.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/relativevsabsolute.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/relativevsabsolute.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/relativevsabsolute.html -->
   Relative href converted to absolute URL to <auro-hyperlink href="/route-map">route map</auro-hyperlink>.
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/relativevsabsolute_code.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/relativevsabsolute_code.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/relativevsabsolute_code.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/relativevsabsolute_code.html -->
 
 ```html
 <!-- Web component example -->
@@ -320,16 +320,16 @@ Relative href converted to absolute URL to <a class="hyperlink" href="https://ww
 Regardless of protocol used with `http` property, `auro-hyperlink` will rewrite the final reference with the correct `https` protocol.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/httpsEnforcement.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/httpsEnforcement.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/httpsEnforcement.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/httpsEnforcement.html -->
   http absolute URL <auro-hyperlink href="http://www.alaskaair.com/route-map">to route map</auro-hyperlink> or
   no hypertext transfer protocol absolute URL to <auro-hyperlink href="//www.alaskaair.com/route-map">route map</auro-hyperlink>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/httpsEnforcement_code.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/httpsEnforcement_code.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/httpsEnforcement_code.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/httpsEnforcement_code.html -->
 
 ```html
 <!-- Web component example -->
@@ -347,15 +347,15 @@ no hypertext transfer protocol absolute URL to <a class="hyperlink" href="https:
 Absolute URLs are not always preferred. When using relative URLs, use the `relative` attribute and `auro-hyperlink` will ignore the domain and the protocol.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/relativeUrl.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/relativeUrl.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/relativeUrl.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/relativeUrl.html -->
   Example of a <auro-hyperlink relative href="#">relative URL</auro-hyperlink>.
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/relativeUrl_code.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/relativeUrl_code.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/relativeUrl_code.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/relativeUrl_code.html -->
 
 ```html
 <!-- Web component example -->
@@ -369,8 +369,8 @@ Example of a <a class="hyperlink" href="#"><slot>relative URL</slot></a>
 #### Using telephone/text/mailto URLs protocols
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/URLscheme.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/URLscheme.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/URLscheme.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/URLscheme.html -->
   Example <auro-hyperlink href="sms:+18002527522">sms link</auro-hyperlink>.
   Example <auro-hyperlink href="tel:+18002527522">telephone link</auro-hyperlink>.
   Example <auro-hyperlink href="mailto:someone@alaskaair.com?cc=someone-else@alaskaair.com&bcc=someone-else-else@alaskaiar.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">email link</auro-hyperlink>.
@@ -378,8 +378,8 @@ Example of a <a class="hyperlink" href="#"><slot>relative URL</slot></a>
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/URLscheme.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/URLscheme.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/URLscheme.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/URLscheme.html -->
 
 ```html
 Example <auro-hyperlink href="sms:+18002527522">sms link</auro-hyperlink>.
@@ -396,8 +396,8 @@ Call to action buttons, or "CTA" buttons are a special use case hybrid hyperlink
 CTA buttons share the same icon support as the standard hyperlink for targets that open new browser tabs.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/cta.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/cta.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/cta.html -->
   <auro-hyperlink type="cta" href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
   <auro-hyperlink type="cta" href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
   <auro-hyperlink type="cta" href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
@@ -410,8 +410,8 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/cta-ondark.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/cta-ondark.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-ondark.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/cta-ondark.html -->
   <auro-hyperlink type="cta" ondark href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
   <auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
   <auro-hyperlink type="cta" ondark href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
@@ -425,8 +425,8 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/cta.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/cta.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/cta.html -->
 
 ```html
 <auro-hyperlink type="cta" href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
@@ -440,8 +440,8 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
 <auro-hyperlink type="cta" tertiary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/cta-ondark.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/cta-ondark.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-ondark.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/cta-ondark.html -->
 
 ```html
 <auro-hyperlink type="cta" ondark href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
@@ -462,8 +462,8 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
 In the following example, see how the `fluid` attribute alters the shape of the button to take up the full width of its parent container.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/cta-fluid.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/cta-fluid.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-fluid.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/cta-fluid.html -->
   <auro-hyperlink type="cta" fluid href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
   <auro-hyperlink type="cta" fluid secondary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
   <auro-hyperlink type="cta" fluid tertiary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
@@ -471,8 +471,8 @@ In the following example, see how the `fluid` attribute alters the shape of the
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/cta-fluid.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/cta-fluid.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-fluid.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/cta-fluid.html -->
 
 ```html
 <auro-hyperlink type="cta" fluid href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
@@ -487,8 +487,8 @@ In the following example, see how the `fluid` attribute alters the shape of the
 In the following example, see how the `small` attribute alters the size of the button to be smaller than the normal `cta` button.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/cta-small.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/cta-small.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-small.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/cta-small.html -->
   <auro-hyperlink type="cta" small href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
   <auro-hyperlink type="cta" small href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
   <auro-hyperlink type="cta" small href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
@@ -502,8 +502,8 @@ In the following example, see how the `small` attribute alters the size of the b
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/cta-small.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/cta-small.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-small.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/cta-small.html -->
 
 ```html
 <auro-hyperlink type="cta" small href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
@@ -523,8 +523,8 @@ In the following example, see how the `small` attribute alters the size of the b
 
 The component may be restyled using the following code sample and changing the values of the following token(s).
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.css) -->
-<!-- The below code snippet is automatically added from ./../../src/tokens.css -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/tokens.css) -->
+<!-- The below code snippet is automatically added from ./../src/tokens.css -->
 
 ```css
 /* stylelint-disable custom-property-empty-line-before */
diff --git a/demo/api.min.js b/demo/api.min.js
index abca84d..e29d453 100644
--- a/demo/api.min.js
+++ b/demo/api.min.js
@@ -57,7 +57,7 @@ const t=globalThis,e$1=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShad
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -118,7 +118,7 @@ class AuroLibraryRuntimeUtils {
 
     return elemTag === tag || elem.hasAttribute(tag);
   }
-}
+};
 
 var externalLink = {"role":"img","color":"currentColor","title":"Link to external site.","desc":"This indicates a link to an external site that may not follow the same accessibility or privacy policies as Alaska Airlines. By selecting a partner link you agree to share your data with these sites.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"external-link-stroke","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"external-link-stroke__title external-link-stroke__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title id=\"external-link-stroke__title\">Link to external site.</title><desc id=\"external-link-stroke__desc\">This indicates a link to an external site that may not follow the same accessibility or privacy policies as Alaska Airlines. By selecting a partner link you agree to share your data with these sites.</desc><path d=\"M7 6.25h5a.75.75 0 0 1 .102 1.494L12 7.75H7a1.25 1.25 0 0 0-1.244 1.123L5.75 9v8c0 .648.492 1.18 1.122 1.244L7 18.25h8a1.25 1.25 0 0 0 1.244-1.122L16.25 17v-5a.75.75 0 0 1 1.493-.101l.007.101v5a2.75 2.75 0 0 1-2.582 2.745L15 19.75H7a2.75 2.75 0 0 1-2.745-2.582L4.25 17V9a2.75 2.75 0 0 1 2.582-2.745zh5zm12.025-2 .125.015.11.032.128.061c.18.108.317.29.353.522l.009.12v5a.75.75 0 0 1-1.493.102L18.25 10V6.811l-6.72 6.72a.75.75 0 0 1-1.133-.977l.073-.084 6.718-6.72H14a.75.75 0 0 1-.743-.648L13.25 5a.75.75 0 0 1 .648-.743L14 4.25z\"/></svg>"};
 
@@ -158,7 +158,7 @@ class ComponentBase extends h {
      /**
      * @private
      */
-     this.runtimeUtils = new AuroLibraryRuntimeUtils();
+     this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
 
     /*
       If the component requires a touch detection,
@@ -667,6 +667,76 @@ var tokensCss$1 = i$1`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-de
 
 var colorCss$1 = i$1`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
 
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
+
+class AuroLibraryRuntimeUtils {
+
+  /* eslint-disable jsdoc/require-param */
+
+  /**
+   * This will register a new custom element with the browser.
+   * @param {String} name - The name of the custom element.
+   * @param {Object} componentClass - The class to register as a custom element.
+   * @returns {void}
+   */
+  registerComponent(name, componentClass) {
+    if (!customElements.get(name)) {
+      customElements.define(name, class extends componentClass {});
+    }
+  }
+
+  /**
+   * Finds and returns the closest HTML Element based on a selector.
+   * @returns {void}
+   */
+  closestElement(
+    selector, // selector like in .closest()
+    base = this, // extra functionality to skip a parent
+    __Closest = (el, found = el && el.closest(selector)) =>
+      !el || el === document || el === window
+        ? null // standard .closest() returns null for non-found selectors also
+        : found
+          ? found // found a selector INside this element
+          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
+  ) {
+    return __Closest(base);
+  }
+  /* eslint-enable jsdoc/require-param */
+
+  /**
+   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
+   * @param {Object} elem - The element to check.
+   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
+   * @returns {void}
+   */
+  handleComponentTagRename(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    if (elemTag !== tag) {
+      elem.setAttribute(tag, true);
+    }
+  }
+
+  /**
+   * Validates if an element is a specific Auro component.
+   * @param {Object} elem - The element to validate.
+   * @param {String} tagName - The name of the Auro component to check against.
+   * @returns {Boolean} - Returns true if the element is the specified Auro component.
+   */
+  elementMatch(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    return elemTag === tag || elem.hasAttribute(tag);
+  }
+}
+
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -937,7 +1007,7 @@ class AuroHyperlink extends ComponentBase {
    *
    */
   static register(name = "auro-hyperlink") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHyperlink);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroHyperlink);
   }
 
   /**
diff --git a/demo/index.md b/demo/index.md
index 48ebfd7..56e868d 100644
--- a/demo/index.md
+++ b/demo/index.md
@@ -12,31 +12,31 @@ Hyperlinks form the backbone of how users navigate through a site or app. The fo
 If the `href` attribute is not added, the hyperlink element will render back simple text.
 
 <div class="exampleWrapper" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/basic.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-hyperlink>No href supplied</auro-hyperlink><br>
   Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic-ondark.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/basic-ondark.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-ondark.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic-ondark.html -->
   <auro-hyperlink ondark>No href supplied</auro-hyperlink><br>
   Welcome to <auro-hyperlink ondark href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
 <auro-hyperlink>No href supplied</auro-hyperlink><br>
 Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic-ondark.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/basic-ondark.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-ondark.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic-ondark.html -->
 
 ```html
 <auro-hyperlink ondark>No href supplied</auro-hyperlink><br>
@@ -52,8 +52,8 @@ Auro's hyperlink element can be used in many creative ways in combination with o
 The `auro-icon` element comes with some pre-defined opinions, but these are easily overwritten by binding CSS directly to the custom element itself. Remember to also use the `customColor` attribute with `auro-icon` so that the SVG will inherit the link and hover colors of the hyperlink.
 
 <div class="exampleWrapper" style="display: flex; justify-content: space-between;">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/navPattern.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/navPattern.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navPattern.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/navPattern.html -->
   <auro-hyperlink href="/last" type="nav">
     <auro-icon category="interface" name="chevron-left" customColor style="line-height: 1"></auro-icon>
     Click here to go back
@@ -65,8 +65,8 @@ The `auro-icon` element comes with some pre-defined opinions, but these are easi
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" style="display: flex; justify-content: space-between;">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/navPattern-ondark.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/navPattern-ondark.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navPattern-ondark.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/navPattern-ondark.html -->
   <auro-hyperlink ondark href="/last" type="nav">
     <auro-icon ondark category="interface" name="chevron-left" customColor style="line-height: 1"></auro-icon>
     Click here to go back
@@ -79,8 +79,8 @@ The `auro-icon` element comes with some pre-defined opinions, but these are easi
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/navPattern.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/navPattern.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navPattern.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/navPattern.html -->
 
 ```html
 <auro-hyperlink href="/last" type="nav">
@@ -93,8 +93,8 @@ The `auro-icon` element comes with some pre-defined opinions, but these are easi
 </auro-hyperlink>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/navPattern-ondark.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/navPattern-ondark.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navPattern-ondark.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/navPattern-ondark.html -->
 
 ```html
 <auro-hyperlink ondark href="/last" type="nav">
@@ -118,35 +118,35 @@ Aside from the standard hyperlink use-case, the `auro-hyperlink` element is inte
 **Accessibility:** Review the code examples, the user of this element are responsible for keyboard support when using `role="button"`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/roleButton.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/roleButton.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/roleButton.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/roleButton.html -->
   <auro-hyperlink href="http://www.alaskaair.com" role="button" id="roleButton">Cancel button</auro-hyperlink>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/roleButton-ondark.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/roleButton-ondark.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/roleButton-ondark.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/roleButton-ondark.html -->
   <auro-hyperlink ondark href="http://www.alaskaair.com" role="button" id="roleButton-ondark">Cancel button</auro-hyperlink>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/roleButton.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/roleButton.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/roleButton.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/roleButton.html -->
 
 ```html
 <auro-hyperlink href="http://www.alaskaair.com" role="button" id="roleButton">Cancel button</auro-hyperlink>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/roleButton-ondark.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/roleButton-ondark.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/roleButton-ondark.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/roleButton-ondark.html -->
 
 ```html
 <auro-hyperlink ondark href="http://www.alaskaair.com" role="button" id="roleButton-ondark">Cancel button</auro-hyperlink>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/roleButton.js) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/roleButton.js -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/roleButton.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/roleButton.js -->
 
 ```js
 export function roleButtonExample() {
@@ -187,8 +187,8 @@ Not all URL types are supported for security reasons. Two common types that are
 The following examples illustrate the use of `<auro-hyperlink>` with either no `href`, `javaScript:` or `data:` protocols being used. Note that `javascript` returns a shadowDOM as simple text. Using an unsupported protocol like `data:`, the protocol is removed from the provided `href` value.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/nonSupported.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/nonSupported.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/nonSupported.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/nonSupported.html -->
   <p>
     <auro-hyperlink>No href supplied</auro-hyperlink>
   </p>
@@ -208,8 +208,8 @@ The following examples illustrate the use of `<auro-hyperlink>` with either no `
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/nonSupported.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/nonSupported.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/nonSupported.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/nonSupported.html -->
 
 ```html
 <p>
@@ -246,16 +246,16 @@ AuroHyperlink.register('custom-hyperlink');
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-hyperlink>` element.
 
 <div class="exampleWrapper exampleWrapper--flex">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/custom.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/custom.html -->
   <custom-hyperlink>No href supplied</custom-hyperlink><br>
   Welcome to <custom-hyperlink href="https://www.alaskaair.com">Alaska Airlines</custom-hyperlink>.
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/custom.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
 
 ```html
 <custom-hyperlink>No href supplied</custom-hyperlink><br>
diff --git a/demo/index.min.js b/demo/index.min.js
index cf4f278..38f21ed 100644
--- a/demo/index.min.js
+++ b/demo/index.min.js
@@ -85,7 +85,7 @@ const t=globalThis,e$1=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShad
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -146,7 +146,7 @@ class AuroLibraryRuntimeUtils {
 
     return elemTag === tag || elem.hasAttribute(tag);
   }
-}
+};
 
 var externalLink = {"role":"img","color":"currentColor","title":"Link to external site.","desc":"This indicates a link to an external site that may not follow the same accessibility or privacy policies as Alaska Airlines. By selecting a partner link you agree to share your data with these sites.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"external-link-stroke","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"external-link-stroke__title external-link-stroke__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title id=\"external-link-stroke__title\">Link to external site.</title><desc id=\"external-link-stroke__desc\">This indicates a link to an external site that may not follow the same accessibility or privacy policies as Alaska Airlines. By selecting a partner link you agree to share your data with these sites.</desc><path d=\"M7 6.25h5a.75.75 0 0 1 .102 1.494L12 7.75H7a1.25 1.25 0 0 0-1.244 1.123L5.75 9v8c0 .648.492 1.18 1.122 1.244L7 18.25h8a1.25 1.25 0 0 0 1.244-1.122L16.25 17v-5a.75.75 0 0 1 1.493-.101l.007.101v5a2.75 2.75 0 0 1-2.582 2.745L15 19.75H7a2.75 2.75 0 0 1-2.745-2.582L4.25 17V9a2.75 2.75 0 0 1 2.582-2.745zh5zm12.025-2 .125.015.11.032.128.061c.18.108.317.29.353.522l.009.12v5a.75.75 0 0 1-1.493.102L18.25 10V6.811l-6.72 6.72a.75.75 0 0 1-1.133-.977l.073-.084 6.718-6.72H14a.75.75 0 0 1-.743-.648L13.25 5a.75.75 0 0 1 .648-.743L14 4.25z\"/></svg>"};
 
@@ -186,7 +186,7 @@ class ComponentBase extends h {
      /**
      * @private
      */
-     this.runtimeUtils = new AuroLibraryRuntimeUtils();
+     this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
 
     /*
       If the component requires a touch detection,
@@ -695,6 +695,76 @@ var tokensCss$1 = i$1`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-de
 
 var colorCss$1 = i$1`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
 
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
+
+class AuroLibraryRuntimeUtils {
+
+  /* eslint-disable jsdoc/require-param */
+
+  /**
+   * This will register a new custom element with the browser.
+   * @param {String} name - The name of the custom element.
+   * @param {Object} componentClass - The class to register as a custom element.
+   * @returns {void}
+   */
+  registerComponent(name, componentClass) {
+    if (!customElements.get(name)) {
+      customElements.define(name, class extends componentClass {});
+    }
+  }
+
+  /**
+   * Finds and returns the closest HTML Element based on a selector.
+   * @returns {void}
+   */
+  closestElement(
+    selector, // selector like in .closest()
+    base = this, // extra functionality to skip a parent
+    __Closest = (el, found = el && el.closest(selector)) =>
+      !el || el === document || el === window
+        ? null // standard .closest() returns null for non-found selectors also
+        : found
+          ? found // found a selector INside this element
+          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
+  ) {
+    return __Closest(base);
+  }
+  /* eslint-enable jsdoc/require-param */
+
+  /**
+   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
+   * @param {Object} elem - The element to check.
+   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
+   * @returns {void}
+   */
+  handleComponentTagRename(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    if (elemTag !== tag) {
+      elem.setAttribute(tag, true);
+    }
+  }
+
+  /**
+   * Validates if an element is a specific Auro component.
+   * @param {Object} elem - The element to validate.
+   * @param {String} tagName - The name of the Auro component to check against.
+   * @returns {Boolean} - Returns true if the element is the specified Auro component.
+   */
+  elementMatch(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    return elemTag === tag || elem.hasAttribute(tag);
+  }
+}
+
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -965,7 +1035,7 @@ class AuroHyperlink extends ComponentBase {
    *
    */
   static register(name = "auro-hyperlink") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHyperlink);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroHyperlink);
   }
 
   /**
diff --git a/docs/partials/api.md b/docs/partials/api.md
index 6c86e76..c37ae1c 100644
--- a/docs/partials/api.md
+++ b/docs/partials/api.md
@@ -1,4 +1,4 @@
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../api.md) -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Examples
@@ -6,21 +6,21 @@
 ### Basic
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic-ondark.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-ondark.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic-ondark.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-ondark.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
@@ -32,21 +32,21 @@ Hyperlinks when used with the `target="_blank"` attribute are domain aware and r
 For link security purposes, when using the `target="_blank"` attribute, this implicitly provides the same `rel` behavior as setting `rel="noopener"`. For additional security, Auro applies `noreferrer` to the `rel` attribute by default.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/external.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/external-ondark.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-ondark.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/external.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/external-ondark.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-ondark.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
@@ -60,21 +60,21 @@ Using this attribute will use the `strict-origin-when-cross-origin` policy type.
 This will also set the `rel` attribute to `external`.
 
 <div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/external-referrer.html) -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-referrer.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <div class="exampleWrapper--ondark">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/external-referrer-ondark.html) -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-referrer-ondark.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/external-referrer.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-referrer.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/external-referrer-ondark.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-referrer-ondark.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
@@ -84,21 +84,21 @@ This will also set the `rel` attribute to `external`.
 When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alternate UI. With this type, links will appear without an underline, but present the underline feedback on hover.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/navStyle.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navStyle.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/navStyle-ondark.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navStyle-ondark.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/navStyle.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navStyle.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/navStyle-ondark.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navStyle-ondark.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
@@ -108,14 +108,14 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
 By default the `auro-hyperlink` will assume that the url passed is an absolute URL to `www.alaskaair.com` with the `https` protocol.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/relativevsabsolute.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/relativevsabsolute.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/relativevsabsolute_code.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/relativevsabsolute_code.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
@@ -125,14 +125,14 @@ By default the `auro-hyperlink` will assume that the url passed is an absolute U
 Regardless of protocol used with `http` property, `auro-hyperlink` will rewrite the final reference with the correct `https` protocol.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/httpsEnforcement.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/httpsEnforcement.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/httpsEnforcement_code.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/httpsEnforcement_code.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
@@ -142,14 +142,14 @@ Regardless of protocol used with `http` property, `auro-hyperlink` will rewrite
 Absolute URLs are not always preferred. When using relative URLs, use the `relative` attribute and `auro-hyperlink` will ignore the domain and the protocol.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/relativeUrl.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/relativeUrl.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/relativeUrl_code.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/relativeUrl_code.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
@@ -157,14 +157,14 @@ Absolute URLs are not always preferred. When using relative URLs, use the `relat
 #### Using telephone/text/mailto URLs protocols
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/URLscheme.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/URLscheme.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/URLscheme.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/URLscheme.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
@@ -176,21 +176,21 @@ Call to action buttons, or "CTA" buttons are a special use case hybrid hyperlink
 CTA buttons share the same icon support as the standard hyperlink for targets that open new browser tabs.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/cta.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/cta-ondark.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-ondark.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/cta.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/cta-ondark.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-ondark.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
@@ -200,14 +200,14 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
 In the following example, see how the `fluid` attribute alters the shape of the button to take up the full width of its parent container.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/cta-fluid.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-fluid.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/cta-fluid.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-fluid.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
@@ -217,14 +217,14 @@ In the following example, see how the `fluid` attribute alters the shape of the
 In the following example, see how the `small` attribute alters the size of the button to be smaller than the normal `cta` button.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/cta-small.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-small.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/cta-small.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-small.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
@@ -233,5 +233,5 @@ In the following example, see how the `small` attribute alters the size of the b
 
 The component may be restyled using the following code sample and changing the values of the following token(s).
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.css) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/tokens.css) -->
 <!-- AURO-GENERATED-CONTENT:END -->
diff --git a/docs/partials/index.md b/docs/partials/index.md
index 651ed0c..ced20c5 100644
--- a/docs/partials/index.md
+++ b/docs/partials/index.md
@@ -12,21 +12,21 @@ Hyperlinks form the backbone of how users navigate through a site or app. The fo
 If the `href` attribute is not added, the hyperlink element will render back simple text.
 
 <div class="exampleWrapper" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic-ondark.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-ondark.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic-ondark.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-ondark.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
@@ -38,21 +38,21 @@ Auro's hyperlink element can be used in many creative ways in combination with o
 The `auro-icon` element comes with some pre-defined opinions, but these are easily overwritten by binding CSS directly to the custom element itself. Remember to also use the `customColor` attribute with `auro-icon` so that the SVG will inherit the link and hover colors of the hyperlink.
 
 <div class="exampleWrapper" style="display: flex; justify-content: space-between;">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/navPattern.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navPattern.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <div class="exampleWrapper--ondark" style="display: flex; justify-content: space-between;">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/navPattern-ondark.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navPattern-ondark.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/navPattern.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navPattern.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/navPattern-ondark.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navPattern-ondark.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
@@ -66,24 +66,24 @@ Aside from the standard hyperlink use-case, the `auro-hyperlink` element is inte
 **Accessibility:** Review the code examples, the user of this element are responsible for keyboard support when using `role="button"`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/roleButton.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/roleButton.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/roleButton-ondark.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/roleButton-ondark.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/roleButton.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/roleButton.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/roleButton-ondark.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/roleButton-ondark.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/roleButton.js) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/roleButton.js) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
@@ -95,14 +95,14 @@ Not all URL types are supported for security reasons. Two common types that are
 The following examples illustrate the use of `<auro-hyperlink>` with either no `href`, `javaScript:` or `data:` protocols being used. Note that `javascript` returns a shadowDOM as simple text. Using an unsupported protocol like `data:`, the protocol is removed from the provided `href` value.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/nonSupported.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/nonSupported.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/nonSupported.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/nonSupported.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
@@ -122,11 +122,11 @@ AuroHyperlink.register('custom-hyperlink');
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-hyperlink>` element.
 
 <div class="exampleWrapper exampleWrapper--flex">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
diff --git a/package-lock.json b/package-lock.json
index 347a4d1..851aec9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,17 +1,17 @@
 {
   "name": "@aurodesignsystem/auro-hyperlink",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@aurodesignsystem/auro-hyperlink",
-      "version": "4.1.0",
+      "version": "4.1.1",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@aurodesignsystem/auro-icon": "^6.0.2",
-        "@aurodesignsystem/auro-library": "^2.7.0",
+        "@aurodesignsystem/auro-library": "^3.0.2",
         "chalk": "^5.3.0",
         "lit": "^3.2.1"
       },
@@ -195,11 +195,29 @@
         "@aurodesignsystem/webcorestylesheets": "^5.1.2"
       }
     },
-    "node_modules/@aurodesignsystem/auro-library": {
+    "node_modules/@aurodesignsystem/auro-icon/node_modules/@aurodesignsystem/auro-library": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-library/-/auro-library-2.8.0.tgz",
       "integrity": "sha512-oTRTd05JE3BVVQC3P11jTDGmTKXCi/Yi6XtKTp8dZVC+euJLDsySjVctAplqmOD3JqqwbJgtbNdlK7DpGRuCXg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "markdown-magic": "^2.6.1",
+        "npm-run-all": "^4.1.5"
+      },
+      "bin": {
+        "generateDocs": "bin/generateDocs.mjs"
+      },
+      "engines": {
+        "node": "^18 || ^20"
+      }
+    },
+    "node_modules/@aurodesignsystem/auro-library": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-library/-/auro-library-3.0.2.tgz",
+      "integrity": "sha512-U3DQf0ah6FcJCb4w/XIoKiemg1XPuQCAstQI0juFSAjUQ8Ix3SaJTPwdKomg6legGR+YTFmrNk+ZeJRYJ5aE0g==",
+      "license": "Apache-2.0",
       "dependencies": {
+        "handlebars": "^4.7.8",
         "markdown-magic": "^2.6.1",
         "npm-run-all": "^4.1.5"
       },
@@ -7312,7 +7330,6 @@
       "version": "4.7.8",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
       "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
-      "dev": true,
       "dependencies": {
         "minimist": "^1.2.5",
         "neo-async": "^2.6.2",
@@ -7333,7 +7350,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9510,7 +9526,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -9710,8 +9725,7 @@
     "node_modules/neo-async": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
     "node_modules/nerf-dart": {
       "version": "1.0.0",
@@ -16368,7 +16382,6 @@
       "version": "3.18.0",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.18.0.tgz",
       "integrity": "sha512-SyVVbcNBCk0dzr9XL/R/ySrmYf0s372K6/hFklzgcp2lBFyXtw4I7BOdDjlLhE1aVqaI/SHWXWmYdlZxuyF38A==",
-      "dev": true,
       "optional": true,
       "bin": {
         "uglifyjs": "bin/uglifyjs"
@@ -16930,8 +16943,7 @@
     "node_modules/wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
-      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
-      "dev": true
+      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
     },
     "node_modules/wordwrapjs": {
       "version": "5.1.0",
diff --git a/package.json b/package.json
index cb1c551..1d82a1a 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@aurodesignsystem/auro-icon": "^6.0.2",
-    "@aurodesignsystem/auro-library": "^2.7.0",
+    "@aurodesignsystem/auro-library": "^3.0.2",
     "chalk": "^5.3.0",
     "lit": "^3.2.1"
   },