From 401f4ca0b91a9809ee3105045c42158f5ed7ec2e Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Sun, 13 Oct 2024 09:02:11 +0300
Subject: [PATCH] docs: importmap for uxdot-elements

---
 docs/_includes/layouts/pages/basic.njk        |  6 ++--
 docs/_includes/layouts/pages/element.11ty.ts  | 12 ++++---
 docs/_includes/layouts/pages/has-toc.njk      |  2 +-
 docs/_includes/layouts/pages/pattern.njk      |  2 +-
 docs/_includes/layouts/pages/tokens.njk       |  2 +-
 .../partials/component/feedback.11ty.cjs      |  2 +-
 docs/_includes/partials/component/header.njk  | 17 +++++----
 .../partials/component/token-search.html      |  2 +-
 .../_includes/partials/javascript/global.html |  6 ++--
 docs/about/index.md                           |  2 +-
 docs/assets/javascript/tokens-pages.js        |  2 +-
 docs/assets/javascript/tokens.js              |  2 +-
 docs/foundations/color/usage.md               |  2 +-
 docs/get-started/designers.md                 |  2 +-
 docs/get-started/developers/installation.md   |  2 +-
 docs/get-started/developers/tokens.md         |  2 +-
 docs/get-started/developers/usage.md          |  2 +-
 docs/patterns/logo-wall/guidelines.md         | 35 ++++++++++++------
 docs/patterns/tile/index.md                   |  2 +-
 docs/theming/color-palettes.md                |  2 +-
 docs/theming/customizing.md                   |  2 +-
 docs/theming/developers.md                    |  2 +-
 elements/rh-site-status/docs/20-guidelines.md |  2 --
 eleventy.config.ts                            | 36 +++++++++----------
 24 files changed, 86 insertions(+), 62 deletions(-)

diff --git a/docs/_includes/layouts/pages/basic.njk b/docs/_includes/layouts/pages/basic.njk
index 7374ec3f0e..5f92b2141c 100755
--- a/docs/_includes/layouts/pages/basic.njk
+++ b/docs/_includes/layouts/pages/basic.njk
@@ -6,7 +6,7 @@ layout: layouts/base.njk
       data-helmet>
 
 <script type="module" data-helmet>
-  import "/assets/javascript/elements/uxdot-feedback.js"
+  import "@uxdot/elements/uxdot-feedback.js"
   import '@rhds/elements/rh-cta/rh-cta.js';
   import '@rhds/elements/rh-footer/rh-footer.js';
   import '@rhds/elements/rh-alert/rh-alert.js';
@@ -16,7 +16,9 @@ layout: layouts/base.njk
 </script>
 
 {%- if tokenSearch %}
-<script type="module" src="/assets/javascript/elements/uxdot-search.js" data-helmet></script>
+<script type="module" data-helmet>
+  import "@uxdot/elements/uxdot-search.js";
+</script>
 <script type="module" src="/assets/javascript/tokens.js" data-helmet></script>
 {%- endif %}
 {% include 'partials/component/masthead.njk' %}
diff --git a/docs/_includes/layouts/pages/element.11ty.ts b/docs/_includes/layouts/pages/element.11ty.ts
index 7c0cee4fcb..09882571aa 100644
--- a/docs/_includes/layouts/pages/element.11ty.ts
+++ b/docs/_includes/layouts/pages/element.11ty.ts
@@ -85,7 +85,9 @@ export default class ElementsPage {
       </noscript>
 
       <script type="module" data-helmet>
-        import '/assets/javascript/elements/uxdot-copy-button.js';
+        import '@uxdot/elements/uxdot-copy-button.js';
+        import '@uxdot/elements/uxdot-copy-permalink.js';
+        import '@uxdot/elements/uxdot-best-practice.js';
         import '@rhds/elements/rh-alert/rh-alert.js';
         import '@rhds/elements/rh-cta/rh-cta.js';
         import '@rhds/elements/rh-surface/rh-surface.js';
@@ -232,7 +234,9 @@ export default class ElementsPage {
         });
 
     return html`
-      <script data-helmet type="module" src="/assets/javascript/elements/uxdot-installation-tabs.js"></script>
+      <script data-helmet type="module">
+        import "@uxdot/elements/uxdot-installation-tabs.js";
+      </script>
       <style data-helmet>${''/* NOTE: adapted from theming/developers.css - better to wrap the localhost behaviour? */}
       uxdot-installation-tabs {
         border: var(--rh-border-width-sm) solid var(--rh-color-border-subtle);
@@ -804,8 +808,8 @@ export default class ElementsPage {
       </style>
 
       <script type="module" data-helmet>
-        import '/assets/javascript/elements/uxdot-copy-button.js';
-        import '/assets/javascript/elements/uxdot-header.js';
+        import '@uxdot/elements/uxdot-copy-button.js';
+        import '@uxdot/elements/uxdot-header.js';
         import 'playground-elements';
         import '@rhds/elements/rh-button/rh-button.js';
         import '@rhds/elements/rh-card/rh-card.js';
diff --git a/docs/_includes/layouts/pages/has-toc.njk b/docs/_includes/layouts/pages/has-toc.njk
index 9e01e9b0b4..ba37b580d7 100755
--- a/docs/_includes/layouts/pages/has-toc.njk
+++ b/docs/_includes/layouts/pages/has-toc.njk
@@ -12,7 +12,7 @@ layout: layouts/base.njk
       data-helmet>
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-toc.js';
+  import '@uxdot/elements/uxdot-toc.js';
 </script>
 
 {% include 'partials/component/masthead.njk' %}
diff --git a/docs/_includes/layouts/pages/pattern.njk b/docs/_includes/layouts/pages/pattern.njk
index 0a674c97b6..1e9b9ea786 100755
--- a/docs/_includes/layouts/pages/pattern.njk
+++ b/docs/_includes/layouts/pages/pattern.njk
@@ -8,7 +8,7 @@ layout: layouts/pages/has-toc.njk
   import '@rhds/elements/rh-subnav/rh-subnav.js';
   import '@rhds/elements/rh-surface/rh-surface.js';
   import '@rhds/elements/rh-code-block/rh-code-block.js';
-  import "/assets/javascript/elements/uxdot-pattern.js";
+  import "@uxdot/elements/uxdot-pattern.js";
 </script>
 
 {{ content | safe }}
diff --git a/docs/_includes/layouts/pages/tokens.njk b/docs/_includes/layouts/pages/tokens.njk
index fb636a5223..557ae5ddca 100644
--- a/docs/_includes/layouts/pages/tokens.njk
+++ b/docs/_includes/layouts/pages/tokens.njk
@@ -4,7 +4,7 @@ layout: layouts/base.njk
 
 <script type="module" data-helmet>
   import '@rhds/elements/rh-tag/rh-tag.js';
-  import '/assets/javascript/elements/uxdot-header.js';
+  import '@uxdot/elements/uxdot-header.js';
 </script>
 
 <style data-helmet>
diff --git a/docs/_includes/partials/component/feedback.11ty.cjs b/docs/_includes/partials/component/feedback.11ty.cjs
index ee4f7fae18..037db7614f 100644
--- a/docs/_includes/partials/component/feedback.11ty.cjs
+++ b/docs/_includes/partials/component/feedback.11ty.cjs
@@ -29,7 +29,7 @@ module.exports = class Feedback {
     }).sort((a, b) => a.text < b.text ? -1 : a.text > b.text ? 1 : 0);
     return dedent(html`
       <script type="module" data-helmet>
-        import '/assets/javascript/elements/uxdot-feedback.js';
+        import '@uxdot/elements/uxdot-feedback.js';
       </script>
       <uxdot-feedback>${!related.length ? html`
         <h2>Other libraries</h2>
diff --git a/docs/_includes/partials/component/header.njk b/docs/_includes/partials/component/header.njk
index ad5aec151e..dbce0b4b3d 100644
--- a/docs/_includes/partials/component/header.njk
+++ b/docs/_includes/partials/component/header.njk
@@ -1,13 +1,18 @@
 {%- set tagName = tagName or doc.tagName or element.tagName or doc.docsPage.tagName -%}
 {%- set headingId = (heading if heading else title) | lower | slug -%}
-{%- set manifest = (doc and doc.docsPage and doc.docsPage.manifest) -%}
-{%- if manifest == (doc and doc.docsPage) -%}{% set manifest = null %}{% endif %}
-{% set prettyName -%}{{ (doc.alias or doc.slug or element.slug or '') | deslugify | capitalize }}{% endset %}
-{% set tabs = doc.tabs or (collections[subnav.collection or ''] | sort(attribute="data.subnav.order")) %}
-{% set demos = manifest and manifest.getDemos(doc.docsPage.tagName) %}
+{%- set manifest = doc and doc.docsPage and doc.docsPage.manifest -%}
+{%- if manifest == doc and doc.docsPage -%}
+  {% set manifest = null %}
+{% endif -%}
+{%- set prettyName -%}{{ (doc.alias or doc.slug or element.slug or '') | deslugify | capitalize }}{% endset %}
+{%- set tabs = doc.tabs -%}
+{%- if not tabs and subnav.collection -%}
+  {% set tabs = collections[subnav.collection] | sort(attribute = "data.subnav.order") %}
+{%- endif -%}
+{%- set demos = manifest and manifest.getDemos(doc.docsPage.tagName) -%}
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-header.js';
+  import '@uxdot/elements/uxdot-header.js';
 </script>
 
 {% if tabs %}
diff --git a/docs/_includes/partials/component/token-search.html b/docs/_includes/partials/component/token-search.html
index bbf9871e78..9063bd434d 100644
--- a/docs/_includes/partials/component/token-search.html
+++ b/docs/_includes/partials/component/token-search.html
@@ -1,5 +1,5 @@
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-search.js';
+  import '@uxdot/elements/uxdot-search.js';
 </script>
 
 <form slot="search" id="search-tokens" action="/tokens/search">
diff --git a/docs/_includes/partials/javascript/global.html b/docs/_includes/partials/javascript/global.html
index daaed9acba..28f7044e6c 100644
--- a/docs/_includes/partials/javascript/global.html
+++ b/docs/_includes/partials/javascript/global.html
@@ -17,9 +17,9 @@
 
   {# only load components that need hydrated (aka interactivity) #}
   <script type="module">
-    import '/assets/javascript/elements/uxdot-copy-permalink.js';
-    import '/assets/javascript/elements/uxdot-sidenav.js';
-    import '/assets/javascript/elements/uxdot-example.js';
+    import '@uxdot/elements/uxdot-copy-permalink.js';
+    import '@uxdot/elements/uxdot-sidenav.js';
+    import '@uxdot/elements/uxdot-example.js';
   </script>
 
   <script async src="https://ga.jspm.io/npm:es-module-shims@1.8.0/dist/es-module-shims.js"></script>
diff --git a/docs/about/index.md b/docs/about/index.md
index f80eda10b4..6cc0760aa7 100644
--- a/docs/about/index.md
+++ b/docs/about/index.md
@@ -25,7 +25,7 @@ tags:
 </style>
 
 <script data-helmet type="module">
-  import '/assets/javascript/elements/uxdot-hero.js'
+  import '@uxdot/elements/uxdot-hero.js'
   import '@rhds/elements/rh-icon/rh-icon.js';
   import '@rhds/elements/rh-card/rh-card.js';
 </script>
diff --git a/docs/assets/javascript/tokens-pages.js b/docs/assets/javascript/tokens-pages.js
index 29bf73a1f0..4ad6c3d9d3 100644
--- a/docs/assets/javascript/tokens-pages.js
+++ b/docs/assets/javascript/tokens-pages.js
@@ -1,4 +1,4 @@
-import '/assets/javascript/elements/uxdot-copy-button.js';
+import '@uxdot/elements/uxdot-copy-button.js';
 import '@rhds/elements/rh-card/rh-card.js';
 import { ContextChangeEvent } from '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
 
diff --git a/docs/assets/javascript/tokens.js b/docs/assets/javascript/tokens.js
index cdd3fc0f83..44f2d8cb8c 100644
--- a/docs/assets/javascript/tokens.js
+++ b/docs/assets/javascript/tokens.js
@@ -5,7 +5,7 @@ import '@rhds/elements/rh-tooltip/rh-tooltip.js';
 import '@rhds/elements/rh-footer/rh-footer-universal.js';
 
 // search bar
-import '/assets/javascript/elements/uxdot-search.js';
+import '@uxdot/elements/uxdot-search.js';
 
 document
     .getElementById('search-input')
diff --git a/docs/foundations/color/usage.md b/docs/foundations/color/usage.md
index d7bbe7e3df..24804a2f28 100644
--- a/docs/foundations/color/usage.md
+++ b/docs/foundations/color/usage.md
@@ -12,7 +12,7 @@ subnav:
 ---
 
 <script data-helmet type="module">
-  import '/assets/javascript/elements/uxdot-best-practice.js';
+  import '@uxdot/elements/uxdot-best-practice.js';
   import '@rhds/elements/rh-alert/rh-alert.js';
   import '@rhds/elements/rh-tag/rh-tag.js';
   import '@rhds/elements/rh-table/rh-table.js';
diff --git a/docs/get-started/designers.md b/docs/get-started/designers.md
index 20a26b972d..c1cd2f061b 100644
--- a/docs/get-started/designers.md
+++ b/docs/get-started/designers.md
@@ -11,7 +11,7 @@ tags:
       data-helmet>
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-example.js';
+  import '@uxdot/elements/uxdot-example.js';
   import '@rhds/elements/rh-alert/rh-alert.js';
   import '@rhds/elements/rh-accordion/rh-accordion.js';
   import '@rhds/elements/rh-table/rh-table.js';
diff --git a/docs/get-started/developers/installation.md b/docs/get-started/developers/installation.md
index c233803dd8..16a895d9b1 100644
--- a/docs/get-started/developers/installation.md
+++ b/docs/get-started/developers/installation.md
@@ -11,7 +11,7 @@ subnav:
 ---
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-example.js';
+  import '@uxdot/elements/uxdot-example.js';
   import '@rhds/elements/rh-code-block/rh-code-block.js';
   import '@rhds/elements/rh-alert/rh-alert.js';
 </script>
diff --git a/docs/get-started/developers/tokens.md b/docs/get-started/developers/tokens.md
index 68e3dfa270..4a734ca76a 100644
--- a/docs/get-started/developers/tokens.md
+++ b/docs/get-started/developers/tokens.md
@@ -11,7 +11,7 @@ subnav:
 ---
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-example.js';
+  import '@uxdot/elements/uxdot-example.js';
   import '@rhds/elements/rh-code-block/rh-code-block.js';
 </script>
 
diff --git a/docs/get-started/developers/usage.md b/docs/get-started/developers/usage.md
index 08c4863026..7bd062d98d 100644
--- a/docs/get-started/developers/usage.md
+++ b/docs/get-started/developers/usage.md
@@ -11,7 +11,7 @@ subnav:
 ---
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-example.js';
+  import '@uxdot/elements/uxdot-example.js';
   import '@rhds/elements/rh-code-block/rh-code-block.js';
 </script>
 
diff --git a/docs/patterns/logo-wall/guidelines.md b/docs/patterns/logo-wall/guidelines.md
index 92e38360ec..3555a1fcd6 100644
--- a/docs/patterns/logo-wall/guidelines.md
+++ b/docs/patterns/logo-wall/guidelines.md
@@ -11,15 +11,21 @@ subnav:
   order: 3
 ---
 
-<script data-helmet type="module" src="/assets/javascript/elements/uxdot-best-practice.js"></script>
+<script type="module" data-helmet>
+  import "@uxdot/elements/uxdot-best-practice.js";
+</script>
 
 ## Usage
 
-Use a logo wall when you need to display multiple Red Hat and/or partner logos in a group.
+Use a logo wall when you need to display multiple Red Hat and/or partner logos 
+in a group.
 
 ## Variants
 
-A logo wall is available in two styles: bordered and borderless. Both variants can be either interactive or static. However, it is recommended to use the bordered variant for interactive logos and the borderless variant for static logos.
+A logo wall is available in two styles: bordered and borderless. Both variants 
+can be either interactive or static. However, it is recommended to use the 
+bordered variant for interactive logos and the borderless variant for static 
+logos.
 
 ### Bordered
 
@@ -41,7 +47,9 @@ A logo wall is available in two styles: bordered and borderless. Both variants c
 
 ## Layout
 
-Ensure that all logos are at a size in which they are clearly legible. Use your best judgment to ensure that logos are neither too large nor too small and are proportionate to other elements on the page.
+Ensure that all logos are at a size in which they are clearly legible. Use your 
+best judgment to ensure that logos are neither too large nor too small and are 
+proportionate to other elements on the page.
 
 Here are some guidelines to follow if you’re unsure:
  - On desktop, there should be a maximum of 6 logos in a row.
@@ -49,19 +57,25 @@ Here are some guidelines to follow if you’re unsure:
 
 ### Responsive sizing
 
-Each logo is in a container. The size of each container and logo is determined by the designer but should abide by best practices. Designers should ensure that all logos are of a similar size and proportionate to each other. Logos are centered vertically and horizontally within the container.
+Each logo is in a container. The size of each container and logo is determined 
+by the designer but should abide by best practices. Designers should ensure that 
+all logos are of a similar size and proportionate to each other. Logos are 
+centered vertically and horizontally within the container.
 
 ### Bordered
-Logo sizes may decrease on smaller screens, however the container will retain 16px padding on all sides. Logos are horizontally and vertically aligned.
+Logo sizes may decrease on smaller screens, however the container will retain 
+16px padding on all sides. Logos are horizontally and vertically aligned.
 
 ### Borderless
-Logo sizes may decrease on smaller screens. Logo containers can adjust margins and padding for smaller screens. Logos are horizontally and vertically aligned.
+Logo sizes may decrease on smaller screens. Logo containers can adjust margins 
+and padding for smaller screens. Logos are horizontally and vertically aligned.
 
 ## Best practices
 
 ### Color contrast
 
-When displaying our partners' logos, it is essential to respect their brand identity by ensuring that their logos meet accessibility standards.
+When displaying our partners' logos, it is essential to respect their brand 
+identity by ensuring that their logos meet accessibility standards.
 
 <div class="grid sm-two-columns">
   <uxdot-best-practice variant="do">
@@ -87,8 +101,9 @@ When displaying our partners' logos, it is essential to respect their brand iden
 
 ### Art Direction
 
-When alternating graphics depending on the color palette, You should be careful select
-only the themable container which is the direct ancestor of the logo wall.
+When alternating graphics depending on the color palette, You should be careful 
+select only the themable container which is the direct ancestor of the logo 
+wall.
 
 <div class="grid sm-two-columns">
   <uxdot-best-practice variant="do">
diff --git a/docs/patterns/tile/index.md b/docs/patterns/tile/index.md
index c6a4162209..97ebe4a80e 100644
--- a/docs/patterns/tile/index.md
+++ b/docs/patterns/tile/index.md
@@ -17,7 +17,7 @@ subnav:
 <link rel="stylesheet" data-helmet href="/styles/samp.css">
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-pattern.js';
+  import '@uxdot/elements/uxdot-pattern.js';
   import '@rhds/elements/rh-alert/rh-alert.js';
 </script>
 
diff --git a/docs/theming/color-palettes.md b/docs/theming/color-palettes.md
index c603610a46..eb1265da09 100644
--- a/docs/theming/color-palettes.md
+++ b/docs/theming/color-palettes.md
@@ -15,7 +15,7 @@ order: 2
       href="../color-palettes.css">
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-pattern.js';
+  import '@uxdot/elements/uxdot-pattern.js';
   import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
   import '@rhds/elements/rh-accordion/rh-accordion.js';
   import '@rhds/elements/rh-audio-player/rh-audio-player.js';
diff --git a/docs/theming/customizing.md b/docs/theming/customizing.md
index 722f3ce7d6..7cf6c48e8f 100644
--- a/docs/theming/customizing.md
+++ b/docs/theming/customizing.md
@@ -9,7 +9,7 @@ order: 3
       href="../color-palettes.css">
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-pattern.js';
+  import '@uxdot/elements/uxdot-pattern.js';
   import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
   import '@rhds/elements/rh-accordion/rh-accordion.js';
   import '@rhds/elements/rh-audio-player/rh-audio-player.js';
diff --git a/docs/theming/developers.md b/docs/theming/developers.md
index c19ecf13f2..2db83b7417 100644
--- a/docs/theming/developers.md
+++ b/docs/theming/developers.md
@@ -18,7 +18,7 @@ order: 4
       href="../developers.css">
 
 <script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-pattern.js';
+  import '@uxdot/elements/uxdot-pattern.js';
   import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
   import '@rhds/elements/rh-accordion/rh-accordion.js';
   import '@rhds/elements/rh-audio-player/rh-audio-player.js';
diff --git a/elements/rh-site-status/docs/20-guidelines.md b/elements/rh-site-status/docs/20-guidelines.md
index 87f10c6997..c354bcac16 100644
--- a/elements/rh-site-status/docs/20-guidelines.md
+++ b/elements/rh-site-status/docs/20-guidelines.md
@@ -1,5 +1,3 @@
-<script data-helmet type="module" src="/assets/javascript/elements/uxdot-best-practice.js"></script>
-
 <style data-helmet>
   .example {
     width: 100%;
diff --git a/eleventy.config.ts b/eleventy.config.ts
index 3bffafc3ce..4d0a891723 100644
--- a/eleventy.config.ts
+++ b/eleventy.config.ts
@@ -105,8 +105,7 @@ export default function(eleventyConfig: UserConfig) {
         'lit-html': '/assets/packages/lit-html/lit-html.js',
         'lit-html/': '/assets/packages/lit-html/',
         'prism-esm/': '/assets/packages/prism-esm/',
-        '@lit-labs/ssr-client/lit-element-hydrate-support.js':
-          '/assets/packages/@lit-labs/ssr-client/lit-element-hydrate-support.js',
+        '@lit-labs/ssr-client/lit-element-hydrate-support.js': '/assets/packages/@lit-labs/ssr-client/lit-element-hydrate-support.js',
         '@rhds/tokens': '/assets/packages/@rhds/tokens/js/tokens.js',
         '@rhds/tokens/css/': '/assets/packages/@rhds/tokens/css/',
         '@rhds/tokens/': '/assets/packages/@rhds/tokens/js/',
@@ -117,6 +116,7 @@ export default function(eleventyConfig: UserConfig) {
         '@patternfly/elements/': '/assets/packages/@patternfly/elements/',
         '@patternfly/icons/': '/assets/packages/@patternfly/icons/',
         '@patternfly/pfe-core/': '/assets/packages/@patternfly/pfe-core/',
+        '@uxdot/elements/': '/assets/javascript/elements/',
         'playground-elements': 'https://cdn.jsdelivr.net/npm/playground-elements@0.18.1/+esm',
       },
     },
@@ -194,28 +194,28 @@ export default function(eleventyConfig: UserConfig) {
 
   eleventyConfig.addPlugin(LitPlugin, {
     componentModules: [
-      'elements/rh-button/rh-button.js',
-      'elements/rh-tag/rh-tag.js',
-      'elements/rh-code-block/rh-code-block.js',
-      'elements/rh-icon/rh-icon.js',
-      'elements/rh-surface/rh-surface.js',
-      'elements/rh-skip-link/rh-skip-link.js',
-      'elements/rh-footer/rh-footer-universal.js',
-      'docs/assets/javascript/elements/uxdot-masthead.js',
+      'docs/assets/javascript/elements/uxdot-best-practice.js',
+      'docs/assets/javascript/elements/uxdot-copy-button.js',
+      'docs/assets/javascript/elements/uxdot-copy-permalink.js',
+      'docs/assets/javascript/elements/uxdot-example.js',
+      'docs/assets/javascript/elements/uxdot-feedback.js',
       'docs/assets/javascript/elements/uxdot-header.js',
-      'docs/assets/javascript/elements/uxdot-sidenav.js',
       'docs/assets/javascript/elements/uxdot-hero.js',
-      'docs/assets/javascript/elements/uxdot-feedback.js',
-      'docs/assets/javascript/elements/uxdot-copy-permalink.js',
-      'docs/assets/javascript/elements/uxdot-copy-button.js',
+      'docs/assets/javascript/elements/uxdot-installation-tabs.js',
+      'docs/assets/javascript/elements/uxdot-masthead.js',
+      'docs/assets/javascript/elements/uxdot-pattern.js',
       'docs/assets/javascript/elements/uxdot-repo-status-list.js',
-      'docs/assets/javascript/elements/uxdot-best-practice.js',
       'docs/assets/javascript/elements/uxdot-search.js',
+      'docs/assets/javascript/elements/uxdot-sidenav.js',
       'docs/assets/javascript/elements/uxdot-toc.js',
-      'docs/assets/javascript/elements/uxdot-pattern.js',
-      'docs/assets/javascript/elements/uxdot-example.js',
-      'docs/assets/javascript/elements/uxdot-installation-tabs.js',
+      'elements/rh-button/rh-button.js',
+      'elements/rh-code-block/rh-code-block.js',
+      'elements/rh-footer/rh-footer-universal.js',
+      'elements/rh-icon/rh-icon.js',
+      'elements/rh-skip-link/rh-skip-link.js',
       'elements/rh-subnav/rh-subnav.js',
+      'elements/rh-surface/rh-surface.js',
+      'elements/rh-tag/rh-tag.js',
     ],
   });