@aurodesignsystem-dev/auro-background 0.0.0-pr60.2 → 0.0.0-pr67.0

package/README.md

@@ -25,20 +25,27 @@ The `auro-background` element is an easy-to-use mobile-first alternative to writ
 <!-- 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 This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
+The `auro-background` component accepts 4 properties - `bg`, `height`, `width`, and `inset` that serve as the default at all breakpoints. `height`, `width`, and `inset` are not required and sizing will scale to the content when omitted. Additionally, there is a separate property for each supported breakpoint (`bgSm`, `bgMd`, `bgLg`, `heightSm`, `heightMd`, `heightLg`, `widthSm`, `widthMd`, `widthLg`).  If you don't set a specific size property, the smaller property will be used.
+
+These properties map to the compound CSS `background` property and CSS properties of `height`, `width`, and `padding`. Anything you can do within the scope of those CSS rules you can do here.
+
+See <auro-hyperlink target="_blank" href="https://webcode.tools/generators/css/background-image">CSS Background Image Generator</auro-hyperlink> for a helpful code generation tool.
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## UI development browser support
+## Use Cases
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/browserSupport.md) -->
-For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./docs/partials/useCases.md -->
+The `<auro-background>` element should be used in situations where users may:
 
+* Need to apply a background image or color to a specific section of content
+* Require responsive background images that change at different breakpoints
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Install
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
-[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-background/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-background/actions/workflows/testPublish.yml)
+[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-background/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-background/actions/workflows/release.yml)
 [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-background?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-background)
 [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-background?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
 ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
@@ -49,17 +56,10 @@ $ npm i @aurodesignsystem/auro-background
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
-### Design Token CSS Custom Property dependency
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/designTokens.md) -->
-The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Define dependency in project component
+### Define Dependency in Project
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
-Defining the component dependency within each component that is using the `<auro-background>` component.
+Defining the dependency within each project that is using the `<auro-background>` component.
 
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
@@ -68,22 +68,9 @@ Defining the component dependency within each component that is using the `<auro
 import "@aurodesignsystem/auro-background";
 ```
 
-<!-- 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 -->
-
-```html
-<auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
-  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
-    <auro-header level="2" display="600">View all destinations</auro-header>
-    <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
-  </div>
-</auro-background>
-```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Use CDN
+### Use CDN
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
@@ -94,20 +81,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## auro-background 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-background` component accepts 4 properties - `bg`, `height`, `width`, and `inset` that serve as the default at all breakpoints. `height`, `width`, and `inset` are not required and sizing will scale to the content when omitted. Additionally, there is a separate property for each supported breakpoint (`bgsm`, `bgmd`, `bglg`, `heightsm`, `heightmd`, `heightlg`, `widthsm`, `widthmd`, `widthlg`).  If you don't set specific size property the smaller property will be used.
-
-These properties map to the compound CSS `background` property and CSS properties of `height`, `width`, and `padding`. Anything you can do within the scope of those CSS rules you can do here.
-
-See <auro-hyperlink target="_blank" href="https://webcode.tools/generators/css/background-image">CSS Background Image Generator</auro-hyperlink> for a helpful code generation tool.
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## API Code Examples
-
-### Default auro-background
+## Basic Example
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
@@ -115,38 +89,60 @@ See <auro-hyperlink target="_blank" href="https://webcode.tools/generators/css/b
 ```html
 <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
   <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
-    <auro-header level="2" display="600">View all destinations</auro-header>
-    <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
+    <auro-header level="2" visualLevel="3">View all destinations</auro-header>
+    <auro-hyperlink type="cta" variant="secondary" href="#" size="xs" style="padding-bottom: 4px;">See where we fly</auro-hyperlink>
   </div>
 </auro-background>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Development
+## Custom Component Registration for Version Management
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/developmentDescription.md) -->
-In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
+There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition.
+The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
 
-Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
+When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
 
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Start development environment
+However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/localhost.md) -->
-Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
+You can do this by importing only the component class and using the `register(name)` method with a unique name:
 
-```shell
-$ npm run dev
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
+<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+
+```js
+// Import the class only
+import { AuroBackground } from '@aurodesignsystem/auro-background/class';
+
+// Register with a custom name if desired
+AuroBackground.register('custom-background');
 ```
 
-Open [localhost:8000](http://localhost:8000/)
-
+This will create a new custom element `<custom-background>` that behaves exactly like `<auro-background>`, allowing both to coexist on the same page without interfering with each other.
 <!-- AURO-GENERATED-CONTENT:END -->
+<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-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
+    <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
+      <auro-header level="2" visualLevel="3">View all destinations</auro-header>
+      <auro-hyperlink type="cta" variant="secondary" href="#" size="xs">See where we fly</auro-hyperlink>
+    </div>
+  </custom-background>
+  <!-- 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 -->
 
-### Testing
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/testing.md) -->
-Automated tests are required for every Auro component. See `.\test\auro-background.test.js` for the tests for this component. Run `npm run test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
-
-<!-- AURO-GENERATED-CONTENT:END -->
+```html
+<custom-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
+  <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
+    <auro-header level="2" visualLevel="3">View all destinations</auro-header>
+    <auro-hyperlink type="cta" variant="secondary" href="#" size="xs">See where we fly</auro-hyperlink>
+  </div>
+</custom-background>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>

package/custom-elements.json

@@ -0,0 +1,398 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/auro-background.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `auro-background` element provides users a way to add a background image or color block including a gradient.",
+          "name": "AuroBackground",
+          "slots": [
+            {
+              "description": "Default slot for content within the background container.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "bg",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the background image at all breakpoints",
+              "attribute": "bg"
+            },
+            {
+              "kind": "field",
+              "name": "bgLg",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the background image at `ds-grid-breakpoint-lg` and above",
+              "attribute": "bgLg"
+            },
+            {
+              "kind": "field",
+              "name": "bgMd",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the background image at `ds-grid-breakpoint-md` and above",
+              "attribute": "bgMd"
+            },
+            {
+              "kind": "field",
+              "name": "bgSm",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the background image at `ds-grid-breakpoint-sm` and above",
+              "attribute": "bgSm"
+            },
+            {
+              "kind": "method",
+              "name": "getInsetValues",
+              "parameters": [
+                {
+                  "name": "inset",
+                  "description": "Value from host attribute.",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "height",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Applies custom height at all breakpoints",
+              "attribute": "height"
+            },
+            {
+              "kind": "field",
+              "name": "heightLg",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Applies custom height at `ds-grid-breakpoint-lg` and above",
+              "attribute": "heightLg"
+            },
+            {
+              "kind": "field",
+              "name": "heightMd",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Applies custom height at `ds-grid-breakpoint-md` and above",
+              "attribute": "heightMd"
+            },
+            {
+              "kind": "field",
+              "name": "heightSm",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Applies custom height at `ds-grid-breakpoint-sm` and above",
+              "attribute": "heightSm"
+            },
+            {
+              "kind": "field",
+              "name": "inset",
+              "privacy": "public",
+              "type": {
+                "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
+              },
+              "description": "Applies internal padding at all breakpoints",
+              "attribute": "inset"
+            },
+            {
+              "kind": "field",
+              "name": "insetLg",
+              "privacy": "public",
+              "type": {
+                "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
+              },
+              "description": "Applies internal padding at `ds-grid-breakpoint-lg` and above",
+              "attribute": "insetLg"
+            },
+            {
+              "kind": "field",
+              "name": "insetMd",
+              "privacy": "public",
+              "type": {
+                "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
+              },
+              "description": "Applies internal padding at `ds-grid-breakpoint-md` and above",
+              "attribute": "insetMd"
+            },
+            {
+              "kind": "field",
+              "name": "insetSm",
+              "privacy": "public",
+              "type": {
+                "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
+              },
+              "description": "Applies internal padding at `ds-grid-breakpoint-sm` and above",
+              "attribute": "insetSm"
+            },
+            {
+              "kind": "method",
+              "name": "register",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "name",
+                  "default": "\"auro-background\"",
+                  "description": "The name of the element that you want to register.",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "This will register this element with the browser.",
+              "type": {
+                "text": "register(name?: string = \"auro-background\") => void"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "runtimeUtils",
+              "privacy": "private",
+              "default": "new AuroLibraryRuntimeUtils()"
+            },
+            {
+              "kind": "field",
+              "name": "width",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Applies custom width at all breakpoints",
+              "attribute": "width"
+            },
+            {
+              "kind": "field",
+              "name": "widthLg",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Applies custom width at `ds-grid-breakpoint-lg` and above",
+              "attribute": "widthLg"
+            },
+            {
+              "kind": "field",
+              "name": "widthMd",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Applies custom width at `ds-grid-breakpoint-md` and above",
+              "attribute": "widthMd"
+            },
+            {
+              "kind": "field",
+              "name": "widthSm",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Applies custom width at `ds-grid-breakpoint-sm` and above",
+              "attribute": "widthSm"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "bg",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the background image at all breakpoints",
+              "fieldName": "bg"
+            },
+            {
+              "name": "bgLg",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the background image at `ds-grid-breakpoint-lg` and above",
+              "fieldName": "bgLg"
+            },
+            {
+              "name": "bgMd",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the background image at `ds-grid-breakpoint-md` and above",
+              "fieldName": "bgMd"
+            },
+            {
+              "name": "bgSm",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the background image at `ds-grid-breakpoint-sm` and above",
+              "fieldName": "bgSm"
+            },
+            {
+              "name": "height",
+              "type": {
+                "text": "string"
+              },
+              "description": "Applies custom height at all breakpoints",
+              "fieldName": "height"
+            },
+            {
+              "name": "heightLg",
+              "type": {
+                "text": "string"
+              },
+              "description": "Applies custom height at `ds-grid-breakpoint-lg` and above",
+              "fieldName": "heightLg"
+            },
+            {
+              "name": "heightMd",
+              "type": {
+                "text": "string"
+              },
+              "description": "Applies custom height at `ds-grid-breakpoint-md` and above",
+              "fieldName": "heightMd"
+            },
+            {
+              "name": "heightSm",
+              "type": {
+                "text": "string"
+              },
+              "description": "Applies custom height at `ds-grid-breakpoint-sm` and above",
+              "fieldName": "heightSm"
+            },
+            {
+              "name": "inset",
+              "type": {
+                "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
+              },
+              "description": "Applies internal padding at all breakpoints",
+              "fieldName": "inset"
+            },
+            {
+              "name": "insetLg",
+              "type": {
+                "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
+              },
+              "description": "Applies internal padding at `ds-grid-breakpoint-lg` and above",
+              "fieldName": "insetLg"
+            },
+            {
+              "name": "insetMd",
+              "type": {
+                "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
+              },
+              "description": "Applies internal padding at `ds-grid-breakpoint-md` and above",
+              "fieldName": "insetMd"
+            },
+            {
+              "name": "insetSm",
+              "type": {
+                "text": "'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string"
+              },
+              "description": "Applies internal padding at `ds-grid-breakpoint-sm` and above",
+              "fieldName": "insetSm"
+            },
+            {
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "description": "Applies custom width at all breakpoints",
+              "fieldName": "width"
+            },
+            {
+              "name": "widthLg",
+              "type": {
+                "text": "string"
+              },
+              "description": "Applies custom width at `ds-grid-breakpoint-lg` and above",
+              "fieldName": "widthLg"
+            },
+            {
+              "name": "widthMd",
+              "type": {
+                "text": "string"
+              },
+              "description": "Applies custom width at `ds-grid-breakpoint-md` and above",
+              "fieldName": "widthMd"
+            },
+            {
+              "name": "widthSm",
+              "type": {
+                "text": "string"
+              },
+              "description": "Applies custom width at `ds-grid-breakpoint-sm` and above",
+              "fieldName": "widthSm"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "auro-background",
+          "customElement": true,
+          "modulePath": "src/auro-background.js"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AuroBackground",
+          "declaration": {
+            "name": "AuroBackground",
+            "module": "src/auro-background.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AuroBackground",
+          "declaration": {
+            "name": "AuroBackground",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/registered.js",
+      "declarations": [],
+      "exports": []
+    }
+  ]
+}

package/demo/api.html

@@ -51,8 +51,8 @@
     <script type="module" data-demo-script="true" src="./api.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-header@latest/dist/auro-header__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__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-header@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
   </body>
 </html>