@aurodesignsystem-dev/auro-hyperlink 0.0.0-pr322.1 → 0.0.0-pr328.0

package/demo/api.min.js

@@ -1,5 +1,18 @@
 import { A as AuroHyperlink } from './auro-hyperlink.min.js';
 
+function roleButtonExample() {
+  const roleButton = document.getElementById("roleButton");
+  const roleButtonOndark = document.getElementById("roleButton-ondark");
+
+  roleButton.addEventListener("click", () => {
+    alert("You clicked the role button!");
+  });
+
+  roleButtonOndark.addEventListener("click", () => {
+    alert("You clicked the role button!");
+  });
+}
+
 AuroHyperlink.register();
 
 function initHyperlinkApiExamples(initCount) {
@@ -7,7 +20,7 @@ function initHyperlinkApiExamples(initCount) {
   initCount = initCount || 0;
 
   try {
-    initHyperlinkApiExamples();
+    roleButtonExample();
   } catch {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/demo/auro-hyperlink.min.js

@@ -602,11 +602,26 @@ class AuroElement extends i$2 {
 // See LICENSE in the project root for license information.
 
 
-// build the component class
 class ComponentBase extends AuroElement {
   constructor() {
     super();
 
+    this._initializeDefaults();
+
+    /*
+      If the component requires a touch detection,
+      please use this function to determine if a user is
+      actively touching a device, versus detecting if
+      the device is touch enables or a handheld device.
+
+      Also uncomment the touch detection lib above
+    */
+    this.addEventListener("touchstart", function () {
+      this.classList.add("is-touching");
+    });
+  }
+
+  _initializeDefaults() {
     this.appearance = "default";
     this.download = false;
     this.ondark = false;
@@ -646,18 +661,6 @@ class ComponentBase extends AuroElement {
      * @private
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
-
-    /*
-      If the component requires a touch detection,
-      please use this function to determine if a user is
-      actively touching a device, versus detecting if
-      the device is touch enables or a handheld device.
-
-      Also uncomment the touch detection lib above
-    */
-    this.addEventListener("touchstart", function () {
-      this.classList.add("is-touching");
-    });
   }
 
   // function to define props used within the scope of this component
@@ -667,79 +670,81 @@ class ComponentBase extends AuroElement {
 
       /**
        * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'}
+       * @property {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
         type: String,
-        reflect: true,
+        reflect: true
       },
 
       /**
-       * Defines the URL of the linked page.
+       * If true, the linked resource will be downloaded when the hyperlink is clicked.
        */
-      href: {
-        type: String,
-        reflect: true,
+      download: {
+        type: Boolean,
+        reflect: true
       },
 
       /**
-       * Defines the relationship between the current document and the linked document.
+       * If true and `type="cta"`, the hyperlink will have a fluid-width UI.
        */
-      rel: {
-        type: String,
-        reflect: true,
-      },
+      fluid: { type: Boolean },
 
       /**
-       * Defines where to open the linked document.
+       * Defines the URL of the linked page.
        */
-      target: {
+      href: {
         type: String,
-        reflect: true,
+        reflect: true
       },
 
       /**
-       * If true, the linked resource will be downloaded when the hyperlink is clicked.
+       * DEPRECATED - use `appearance="inverse"` instead.
        */
-      download: {
-        type: Boolean,
-        reflect: true,
-      },
+      ondark: { type: Boolean },
 
       /**
-       * DEPRECATED - use `appearance` instead.
+       * If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests.
        */
-      ondark: { type: Boolean },
+      referrerpolicy: {
+        type: Boolean,
+        reflect: true
+      },
 
       /**
-       * Defines the type of hyperlink; accepts `nav` or `cta`.
+       * Defines the relationship between the current document and the linked document. Visit [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel) for more information.
        */
-      type: {
+      rel: {
         type: String,
-        reflect: true,
+        reflect: true
       },
 
       /**
-       * If true and `type="cta"`, the hyperlink will have a fluid-width UI.
+       * Defines where to open the linked document.
        */
-      fluid: { type: Boolean },
+      target: {
+        type: String,
+        reflect: true
+      },
 
       /**
-       * If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests.
+       * Defines the type of hyperlink.
+       * @type {'nav' | 'cta'}
        */
-      referrerpolicy: {
-        type: Boolean,
-        reflect: true,
+      type: {
+        type: String,
+        reflect: true
       },
 
       /**
-       * Sets button variant option.
-       * @default primary
+       * Sets button variant option when using `type="cta"`.
+       * @type {'primary' | 'secondary' | 'tertiary' | 'ghost' | 'flat'}
+       * @default 'primary'
        */
       variant: {
         type: String,
-        reflect: true,
+        reflect: true
       },
     };
   }
@@ -1106,15 +1111,17 @@ class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),
 var styles = i$5`a.auro-button{text-decoration:none}
 `;
 
-// Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
-// build the component class
+/**
+ * @internal
+ */
 class AuroHyperlinkButton extends T {
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-hyperlink-button"] - The name of element that you want to register to.
+   * @param {string} [name="auro-hyperlink-button"] - The name of the element that you want to register.
    *
    * @example
    * AuroHyperlinkButton.register("custom-hyperlink-button") // this will register this element to <custom-hyperlink-button/>
@@ -1150,9 +1157,14 @@ var tokensCss = i$5`:host(:not([type=cta])){--ds-auro-hyperlink-default-color-de
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
- * `<auro-hyperlink>` is a component that wraps an HTML `<a>` element, providing additional styling and behavior.
+ * The `auro-hyperlink` element wraps an HTML `<a>` element, providing additional styling and behavior.
+ * @customElement auro-hyperlink
  *
- * @prop {String} role - Defines ARIA roles; currently supports `button` for extended experiences.
+ * @forcePrivate {'layout'}
+ * 
+ * "Role" property needs to stay in this jsdocs block to avoid conflicts with testing framework.
+ * @property {string} role - Defines ARIA roles; currently supports `button` for extended experiences.
+ * 
  * @csspart link - Allows styling to be applied to the `a` element.
  * @csspart targetIcon - Allows styling to be applied to the icon that appears next to the hyperlink.
  */
@@ -1222,7 +1234,7 @@ class AuroHyperlink extends ComponentBase {
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-hyperlink"] - The name of element that you want to register to.
+   * @param {string} [name="auro-hyperlink"] - The name of the element that you want to register.
    *
    * @example
    * AuroHyperlink.register("custom-hyperlink") // this will register this element to <custom-hyperlink/>

package/demo/index.html

@@ -51,7 +51,7 @@
     <script defer type="module" src="./index.min.js"></script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
   </body>
 </html>

package/demo/index.js

@@ -1,4 +1,3 @@
-import { roleButtonExample } from "../apiExamples/roleButton";
 import { AuroHyperlink } from "../src/index";
 
 AuroHyperlink.register();
@@ -9,7 +8,6 @@ function initHyperlinkIndexExamples(initCount) {
   initCount = initCount || 0;
 
   try {
-    roleButtonExample();
   } catch {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/demo/index.md

@@ -1,35 +1,38 @@
-<style>
-  .exampleWrapper--ondark {
-    color: var(--ds-color-text-primary-inverse);
-  }
-</style>
 <!--
-The index.md file is a compiled document. No edits should be made directly to this file.
-This file is generated based on a template fetched from `./apiExamples/index.md`
+ THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
+ ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
 -->
 
-# Hyperlink
-
-Hyperlinks form the backbone of how users navigate through a site or app. The following example illustrates how the `auro-hyperlink` component can be used. Common api attributes include `href`, `nav`, `target` and more. For a full list of attributes, see the [api documentation](http://auro.alaskaair.com/components/auro/hyperlink/api).
+# Hyperlink
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
+<!-- The below content is automatically added from ./../docs/partials/description.md -->
+The `<auro-hyperlink>` element is a wrapper element for an HTML `<a>` element containing styling and behavior.
+<!-- AURO-GENERATED-CONTENT:END -->
 
-## Default
+## Use Cases
+
+<!-- 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:
 
-If the `href` attribute is not added, the hyperlink element will render back simple text.
+* stand-alone link element for navigation
+* inline link element for navigation
+* optional role as button when hyperlink UI is needed for submit action
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Example(s)
 
-<div class="exampleWrapper" aria-hidden>
+### Basic
+
+<div class="exampleWrapper">
   <!-- 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-inverseAppearance.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic-inverseAppearance.html -->
-  <auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
-  Welcome to <auro-hyperlink appearance="inverse" 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) -->
@@ -39,244 +42,5 @@ If the `href` attribute is not added, the hyperlink element will render back sim
 <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-inverseAppearance.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basic-inverseAppearance.html -->
-
-```html
-<auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
-Welcome to <auro-hyperlink appearance="inverse" href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
-```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Navigation pattern example
-
-Auro's hyperlink element can be used in many creative ways in combination with other elements for easy-to-manage UI solutions. This example uses the `auro-hyperlink` with the `auro-icon` elements with a little CSS to create a pretty popular nav style UI.
-
-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-hyperlink href="/last" type="nav">
-    <auro-icon category="interface" name="chevron-left" customColor style="line-height: 1"></auro-icon>
-    Click here to go back
-  </auro-hyperlink>
-  <auro-hyperlink href="/next" type="nav">
-    Click here to go forward
-    <auro-icon category="interface" name="chevron-right" customColor style="line-height: 1"></auro-icon>
-  </auro-hyperlink>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<div class="exampleWrapper--ondark" style="display: flex; justify-content: space-between;">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navPattern-inverseAppearance.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/navPattern-inverseAppearance.html -->
-  <auro-hyperlink appearance="inverse" href="/last" type="nav">
-    <auro-icon appearance="inverse" category="interface" name="chevron-left" customColor style="line-height: 1"></auro-icon>
-    Click here to go back
-  </auro-hyperlink>
-  <auro-hyperlink appearance="inverse" href="/next" type="nav">
-    Click here to go forward
-    <auro-icon appearance="inverse" category="interface" name="chevron-right" customColor style="line-height: 1"></auro-icon>
-  </auro-hyperlink>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</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 -->
-
-```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
-</auro-hyperlink>
-<auro-hyperlink href="/next" type="nav">
-  Click here to go forward
-  <auro-icon category="interface" name="chevron-right" customColor style="line-height: 1"></auro-icon>
-</auro-hyperlink>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navPattern-inverseAppearance.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/navPattern-inverseAppearance.html -->
-
-```html
-<auro-hyperlink appearance="inverse" href="/last" type="nav">
-  <auro-icon appearance="inverse" category="interface" name="chevron-left" customColor style="line-height: 1"></auro-icon>
-  Click here to go back
-</auro-hyperlink>
-<auro-hyperlink appearance="inverse" href="/next" type="nav">
-  Click here to go forward
-  <auro-icon appearance="inverse" category="interface" name="chevron-right" customColor style="line-height: 1"></auro-icon>
-</auro-hyperlink>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Using role="button"
-
-Aside from the standard hyperlink use-case, the `auro-hyperlink` element is intended to be used for button situations as illustrated below. Assuming the role of button, `auro-hyperlink` also will track the `aria-pressed` state.
-
-**Note:** Any `href` will be ignored when using `role="button"`. A click-event must be passed to the element as illustrated in the example below.
-
-**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-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-inverseAppearance.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/roleButton-inverseAppearance.html -->
-  <auro-hyperlink appearance="inverse" 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 -->
-
-```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-inverseAppearance.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/roleButton-inverseAppearance.html -->
-
-```html
-<auro-hyperlink appearance="inverse" 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 -->
-
-```js
-export function roleButtonExample() {
-  const roleButton = document.getElementById("roleButton");
-  const roleButtonOndark = document.getElementById("roleButton-ondark");
-
-  roleButton.addEventListener("click", () => {
-    alert("You clicked the role button!");
-  });
-
-  roleButtonOndark.addEventListener("click", () => {
-    alert("You clicked the role button!");
-  });
-}
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Unsupported types
-
-Not all URL types are supported for security reasons. Two common types that are worth mentioning are `javaScript:` and `data:`.
-
-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 -->
-  <p>
-    <auro-hyperlink>No href supplied</auro-hyperlink>
-  </p>
-  <p>
-    <auro-hyperlink href="javascript:;">JavaScript not supported</auro-hyperlink>
-  </p>
-  <p>
-    <auro-hyperlink href="data:text/plain;charset=utf-8,Hello%20World!">Data type not supported</auro-hyperlink>
-  </p>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</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 -->
-
-```html
-<p>
-  <auro-hyperlink>No href supplied</auro-hyperlink>
-</p>
-<p>
-  <auro-hyperlink href="javascript:;">JavaScript not supported</auro-hyperlink>
-</p>
-<p>
-  <auro-hyperlink href="data:text/plain;charset=utf-8,Hello%20World!">Data type not supported</auro-hyperlink>
-</p>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Typography
-
-The `auro-hyperlink` component is designed to work with the typography classes provided by the Auro Design System. 
-
-The component will automatically inherit the typography styles from the parent element, allowing for consistent text styling across your application. Classes can also be applied directly onto the `auro-hyperlink` component.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/typography.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/typography.html -->
-  <div class="body-xs">
-    Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
-  </div>
-  <div class="body-default">
-    Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
-  </div>
-  <div class="body-lg">
-    Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
-  </div>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/typography.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/typography.html -->
-
-```html
-<div class="body-xs">
-  Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
-</div>
-<div class="body-default">
-  Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
-</div>
-<div class="body-lg">
-  Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
-</div>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Recommended Use and Version Control
-
-There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-hyperlink` custom element is defined automatically.
-
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroHyperlink.register(name)` method and pass in a unique name.
-
-```js
-import { AuroHyperlink } from '@aurodesignsystem/auro-hyperlink/class';
-
-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 -->
-  <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 -->
-
-```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 -->
 </auro-accordion>

package/demo/index.min.js

@@ -1,35 +1,4 @@
 import { A as AuroHyperlink } from './auro-hyperlink.min.js';
 
-function roleButtonExample() {
-  const roleButton = document.getElementById("roleButton");
-  const roleButtonOndark = document.getElementById("roleButton-ondark");
-
-  roleButton.addEventListener("click", () => {
-    alert("You clicked the role button!");
-  });
-
-  roleButtonOndark.addEventListener("click", () => {
-    alert("You clicked the role button!");
-  });
-}
-
 AuroHyperlink.register();
 AuroHyperlink.register("custom-hyperlink");
-
-function initHyperlinkIndexExamples(initCount) {
-  // biome-ignore lint: no-unused-vars
-  initCount = initCount || 0;
-
-  try {
-    roleButtonExample();
-  } catch {
-    if (initCount <= 20) {
-      // setTimeout handles issue where content is sometimes loaded after the functions get called
-      setTimeout(() => {
-        initHyperlinkIndexExamples(initCount + 1);
-      }, 100);
-    }
-  }
-}
-
-initHyperlinkIndexExamples();