From e41af1795b8c67f277e96775d9a95e834af43c6d Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Mon, 14 Oct 2024 13:13:38 +0300
Subject: [PATCH] chore: typescript configs

---
 .gitignore                                    | 13 +--
 .stylelintrc.yml                              |  2 +-
 docs/11ty-types.d.ts                          | 62 ++++++++++++--
 docs/_includes/layouts/pages/element.11ty.ts  | 26 +++---
 docs/_includes/layouts/pages/has-toc.njk      |  2 +-
 docs/_includes/layouts/pages/tokens.11ty.ts   |  6 +-
 .../partials/component/feedback.11ty.ts       | 23 ++---
 docs/_includes/partials/component/header.njk  |  2 +-
 docs/_plugins/alphabetize-tags.ts             |  4 +-
 docs/_plugins/element-demos.ts                |  3 +-
 docs/_plugins/element-docs.ts                 | 53 +++++++-----
 docs/_plugins/importMap.ts                    | 14 ++--
 docs/_plugins/lit-ssr/lit.ts                  |  6 +-
 docs/_plugins/markdown-it.ts                  | 11 ++-
 docs/_plugins/rhds.ts                         | 14 ++--
 docs/_plugins/table-of-contents.ts            | 20 ++---
 docs/styles/lightdom.css                      |  8 +-
 docs/tsconfig.json                            | 14 ++++
 elements/tsconfig.json                        | 17 ++++
 eleventy.config.ts                            | 84 ++++++++++---------
 lib/tsconfig.json                             | 12 +++
 package-lock.json                             | 37 ++++++--
 package.json                                  | 35 ++++----
 scripts/environment.d.ts                      |  9 ++
 tsconfig.docs.json                            | 25 ------
 tsconfig.json                                 | 38 ++++-----
 tsconfig.settings.json                        | 46 +++++-----
 uxdot/repoStatus.ts                           | 10 +++
 uxdot/tsconfig.json                           | 14 ++++
 .../uxdot-best-practice.css                   |  0
 .../elements => uxdot}/uxdot-best-practice.ts |  0
 .../elements => uxdot}/uxdot-copy-button.css  |  0
 .../elements => uxdot}/uxdot-copy-button.ts   |  0
 .../uxdot-copy-permalink-lightdom.css         |  0
 .../uxdot-copy-permalink.css                  |  0
 .../uxdot-copy-permalink.ts                   |  0
 .../elements => uxdot}/uxdot-example.css      |  0
 .../elements => uxdot}/uxdot-example.ts       |  0
 .../elements => uxdot}/uxdot-feedback.css     |  0
 .../elements => uxdot}/uxdot-feedback.ts      |  0
 .../elements => uxdot}/uxdot-header.css       |  0
 .../elements => uxdot}/uxdot-header.ts        |  0
 .../elements => uxdot}/uxdot-hero.css         |  0
 .../elements => uxdot}/uxdot-hero.ts          |  0
 .../uxdot-installation-tabs.ts                |  0
 .../uxdot-masthead-lightdom.css               |  0
 .../elements => uxdot}/uxdot-masthead.css     |  0
 .../elements => uxdot}/uxdot-masthead.ts      |  0
 .../uxdot-pattern-ssr-controller-client.ts    |  0
 .../uxdot-pattern-ssr-controller-server.ts    |  5 +-
 .../uxdot-pattern-ssr-controller.ts           |  0
 .../elements => uxdot}/uxdot-pattern.css      |  0
 .../elements => uxdot}/uxdot-pattern.ts       |  0
 .../uxdot-repo-status-checklist.ts            |  0
 .../uxdot-repo-status-list.css                |  0
 .../uxdot-repo-status-list.ts                 |  0
 .../uxdot-repo-status-table.css               |  0
 .../uxdot-repo-status-table.ts                |  0
 .../elements => uxdot}/uxdot-repo.ts          | 10 +--
 .../elements => uxdot}/uxdot-search.css       |  0
 .../elements => uxdot}/uxdot-search.ts        |  0
 .../uxdot-sidenav-dropdown-menu-item.css      |  0
 .../uxdot-sidenav-dropdown-menu.css           |  0
 .../uxdot-sidenav-dropdown.css                |  0
 .../elements => uxdot}/uxdot-sidenav-item.css |  0
 .../uxdot-sidenav-lightdom.css                |  0
 .../elements => uxdot}/uxdot-sidenav.css      |  0
 .../elements => uxdot}/uxdot-sidenav.ts       |  0
 .../uxdot-spacer-tokens-table.css             |  0
 .../uxdot-spacer-tokens-table.ts              |  0
 .../elements => uxdot}/uxdot-toc-lightdom.css |  0
 .../elements => uxdot}/uxdot-toc.css          |  0
 .../elements => uxdot}/uxdot-toc.ts           |  0
 73 files changed, 380 insertions(+), 245 deletions(-)
 create mode 100644 docs/tsconfig.json
 create mode 100644 elements/tsconfig.json
 create mode 100644 lib/tsconfig.json
 create mode 100644 scripts/environment.d.ts
 delete mode 100644 tsconfig.docs.json
 create mode 100644 uxdot/repoStatus.ts
 create mode 100644 uxdot/tsconfig.json
 rename {docs/assets/javascript/elements => uxdot}/uxdot-best-practice.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-best-practice.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-copy-button.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-copy-button.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-copy-permalink-lightdom.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-copy-permalink.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-copy-permalink.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-example.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-example.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-feedback.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-feedback.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-header.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-header.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-hero.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-hero.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-installation-tabs.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-masthead-lightdom.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-masthead.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-masthead.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-pattern-ssr-controller-client.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-pattern-ssr-controller-server.ts (96%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-pattern-ssr-controller.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-pattern.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-pattern.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-repo-status-checklist.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-repo-status-list.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-repo-status-list.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-repo-status-table.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-repo-status-table.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-repo.ts (93%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-search.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-search.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-sidenav-dropdown-menu-item.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-sidenav-dropdown-menu.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-sidenav-dropdown.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-sidenav-item.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-sidenav-lightdom.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-sidenav.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-sidenav.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-spacer-tokens-table.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-spacer-tokens-table.ts (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-toc-lightdom.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-toc.css (100%)
 rename {docs/assets/javascript/elements => uxdot}/uxdot-toc.ts (100%)

diff --git a/.gitignore b/.gitignore
index 8ad4e8e662..fed260cc38 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,16 +8,15 @@ node_modules
 _site
 docs/pfe.min*
 docs/assets/playgrounds/
-docs/assets/javascript/elements/*.js.map
-docs/assets/javascript/elements/*.d.ts
-docs/assets/javascript/elements/*.js
+docs/assets/javascript/elements/**/*.js.map
+docs/assets/javascript/elements/**/*.d.ts
+docs/assets/javascript/elements/**/*.js
 docs/_plugins/**/*.js
 docs/_includes/**/*.js
 docs/_data/playgrounds.json
 docs/assets/javascript/elements/playground-elements.js
 docs/assets/javascript/elements/assets/playground-typescript-worker-*.js
 docs/assets/javascript/environment.js
-!docs/11ty-types.d.ts
 
 # Build artifacts
 elements.js
@@ -26,10 +25,13 @@ elements/*/test/*.js
 react
 lib/**/*.js
 !elements/**/demo/*.css
+*.tsbuildinfo
 *.map
 *.d.ts
 !declaration.d.ts
-*.tsbuildinfo
+!docs/11ty-types.d.ts
+!./docs/11ty-types.d.ts
+!*/11ty-types.d.ts
 custom-elements.json
 test-results.xml
 rhds.min.js
@@ -109,4 +111,3 @@ $RECYCLE.BIN/
 # Windows shortcuts
 *.lnk
 
-!declaration.d.ts
diff --git a/.stylelintrc.yml b/.stylelintrc.yml
index d7c764e0b1..3927d8c48e 100644
--- a/.stylelintrc.yml
+++ b/.stylelintrc.yml
@@ -40,8 +40,8 @@ rules:
       ignoreTypes:
         - heading
         - actions
-        - rendered
         - pending
+        - --rendered
 
   selector-pseudo-element-no-unknown:
     - true
diff --git a/docs/11ty-types.d.ts b/docs/11ty-types.d.ts
index bcb2d670dd..e15f30385d 100644
--- a/docs/11ty-types.d.ts
+++ b/docs/11ty-types.d.ts
@@ -1,7 +1,3 @@
-declare module '@11ty/eleventy-plugin-syntaxhighlight/src/HighlightPairedShortcode.js' {
-  export default function HighlightPairedShortcode(content: string, language: string, highlightLines: string, options: object): any
-}
-
 declare module '@11ty/eleventy-plugin-syntaxhighlight/src/getAttributes.js' {
   export default function getAttributes(...args: any[]): string
 }
@@ -80,12 +76,15 @@ declare module '@11ty/eleventy/src/UserConfig.js' {
     compile(inputContent: string): (this: CompileContext, data: unknown) => string | Promise<string>;
   }
 
-  interface EleventyEventHandlerOptions {
+  interface EleventyBeforeEventHandlerOptions {
     directories: EleventyData['directories'],
     /** @deprecated */
     dir: {input: string; output: string; includes: string, data: string; layouts: string;};
     outputMode: 'js'|'json'|'ndjson';
     runMode: 'build'|'serve'|'watch';
+  }
+
+  interface EleventyAfterEventHandlerOptions extends EleventyBeforeEventHandlerOptions {
     results?: {inputPath:string;outputPath:string; url:string;content:string}[];
   }
 
@@ -93,19 +92,30 @@ declare module '@11ty/eleventy/src/UserConfig.js' {
 
   type AddCollectionCallback = (api: CollectionApi) => CollectionItem[] | Promise<CollectionItem[]>;
 
-  type OnCallback = (opts: EleventyEventHandlerOptions) => void | Promise<void>;
+  type OnCallback<O = EleventyBeforeEventHandlerOptions> = (opts: O) => void | Promise<void>;
 
   export type PluginFunction<Opts = unknown> = (config: UserConfig, opts?: Opts) => void | Promise<void>
 
-  type FilterFunction<T = string, R = string> = (this: FilterContext, data: T, ...args: unknown[]) => R | Promise<R>;
+  type FilterFunction<T = string, R = string> = (this: FilterContext, data: T) => R | Promise<R>;
+  type FilterFunctionWithArgs<T = string, R = string> = (this: FilterContext, data: T, ...args: any[]) => R | Promise<R>;
+
+  type DataEntry =
+    | string
+    | number
+    | object
+    | Promise<string|number|object>
+    | (() => unknown)
+    | (() => Promise<unknown>);
 
   export default class UserConfig {
     addCollection(name: string, callback: AddCollectionCallback): void;
     addDataExtension(names: string, processor: (content: string) => unknown | Promise<unknown>): void;
     addExtension(extension: string, options: AddExtensionOptions): void;
     addFilter(name: string, filter: FilterFunction): void;
+    addFilter(name: string, filter: FilterFunctionWithArgs): void;
     addGlobalData(name: string, data: unknown | (() => unknown)): void;
     addJavaScriptFunction(name: string, filter: FilterFunction): void;
+    addJavaScriptFunction(name: string, filter: FilterFunctionWithArgs): void;
     addPassthroughCopy(items: string | Record<string, string>, copyOptions?: PassthroughCopyOptions): void;
     addPlugin<Opts>(Plugin:  PluginFunction<Opts> | {
       initֵArguments?: Opts;
@@ -115,9 +125,15 @@ declare module '@11ty/eleventy/src/UserConfig.js' {
     addWatchTarget(name: string, opts?: { resetConfig: boolean }): void;
     amendLibrary(md: 'md', callback: ((md: MarkdownIt) => MarkdownIt)): void;
     getFilter(name: string): FilterFunction;
-    globalData: Record<string, unknown | (() => unknown) | ((() => Promise<unknown>))>;
-    on(event: 'eleventy.before'| 'eleventy.beforeWatch' | 'eleventy.after', callback: OnCallback): void;
+    getFilter(name: string): FilterFunctionWithArgs;
+    globalData: { [key: string]: DataEntry };
+    on(event: 'eleventy.before', callback: OnCallback): void;
+    on(event: 'eleventy.after', callback: OnCallback<EleventyAfterEventHandlerOptions>): void;
+    on(event: 'eleventy.beforeWatch', callback: (changedFiles: string[]) => void | Promise<void>): void;
+    on(event: 'eleventy.contentMap', callback: (opts: ({ inputPathToUrl: Record<string, string>, urlToInputPath: Record<string, string> })) => void | Promise<void>): void;
+    on(event: 'eleventy.beforeConfig', callback: (config: UserConfig) => void | Promise<void>): void;
     setQuietMode(quiet: boolean): void;
+    javascriptFunctions: Record<string, (...args: unknown[]) => any>;
     watchIgnores: Set<string>;
   }
 }
@@ -162,7 +178,9 @@ declare module '@11ty/eleventy-plugin-syntaxhighlight' {
     errorOnInvalidLanguage: boolean;
   }>;
   export default Plugin;
+  export function pairedShortcode(content: string, language: string, highlightLines: string, options: object): string;
 }
+
 declare module '@11ty/eleventy-plugin-directory-output' {
   import { PluginFunction } from "@11ty/eleventy/src/UserConfig.js";
   const Plugin: PluginFunction<{
@@ -173,6 +191,30 @@ declare module '@11ty/eleventy-plugin-directory-output' {
   }>;
   export default Plugin;
 }
+
+declare module '@11ty/eleventy-fetch' {
+  import { PluginFunction } from "@11ty/eleventy/src/UserConfig.js";
+  type Duration = `${number}${'d'|'m'|'h'}`;
+  type CacheType = 'json' | 'buffer' | 'text';
+  function EleventyFetch<T = unknown>(url: string, options: {
+    directory: string;
+    removeUrlQueryParams: boolean;
+    type: CacheType;
+    duration: Duration;
+    fetchOptions: { headers: Record<string, string> };
+  }): Promise<T>;
+  export default EleventyFetch;
+  export class AssetCache<T=unknown> {
+    constructor(tag: string);
+    isCacheValid(time: Duration): boolean;
+    save(data:T, type: CacheType): Promise<void>;
+    getCachedValue(): Promise<T>
+    cache: {
+      destroy(): void;
+    }
+  }
+}
+
 declare module '@patternfly/pfe-tools/11ty/plugins/anchors.cjs' {
   import type { Cheerio } from 'cheerio';
   import type { AnyNode } from 'domhandler';
@@ -183,12 +225,14 @@ declare module '@patternfly/pfe-tools/11ty/plugins/anchors.cjs' {
   }>;
   export default AnchorsPlugin;
 }
+
 declare module '@patternfly/pfe-tools/11ty/plugins/custom-elements-manifest.cjs' {
   import type { PluginOptions } from '@patternfly/pfe-tools/11ty/plugins/types';
   import { PluginFunction } from "@11ty/eleventy/src/UserConfig.js";
   const Plugin: PluginFunction<PluginOptions>;
   export default Plugin;
 }
+
 declare module 'eleventy-plugin-helmet' {
   import { PluginFunction } from "@11ty/eleventy/src/UserConfig.js";
   const Plugin: PluginFunction;
diff --git a/docs/_includes/layouts/pages/element.11ty.ts b/docs/_includes/layouts/pages/element.11ty.ts
index 6af2e9b4b7..60bc2a46ec 100644
--- a/docs/_includes/layouts/pages/element.11ty.ts
+++ b/docs/_includes/layouts/pages/element.11ty.ts
@@ -1,4 +1,4 @@
-import type { ElementDocsPageData } from '../../../_plugins/element-docs.js';
+import type { ElementDocsPageData } from '#11ty-plugins/element-docs.js';
 import type { ClassMethod } from 'custom-elements-manifest';
 import type { FileOptions, ProjectManifest } from 'playground-elements/shared/worker-api.js';
 
@@ -6,10 +6,11 @@ import { tokens } from '@rhds/tokens/meta.js';
 import { join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { readFile } from 'node:fs/promises';
-import { copyCell, dedent, getTokenHref } from '../../../_plugins/tokensHelpers.js';
+import { copyCell, dedent, getTokenHref } from '#11ty-plugins/tokensHelpers.js';
 import { Generator } from '@jspm/generator';
 import { AssetCache } from '@11ty/eleventy-fetch';
-import { Renderer } from '#uxdot/eleventy.config.js';
+import { Renderer } from '#eleventy.config';
+import type { ImportMap } from '#11ty-plugins/importMap.js';
 
 type FileEntry = [string, FileOptions & { inline: string }];
 
@@ -43,16 +44,16 @@ interface Context extends EleventyPageRenderData {
   playgrounds: Record<`rh-${string}`, ProjectManifest>;
 }
 
-export default class ElementsPage extends Renderer {
-  static assetCache = new AssetCache('rhds-ux-dot-import-map-jspmio');
+export default class ElementsPage extends Renderer<Context> {
+  static assetCache = new AssetCache<ImportMap>('rhds-ux-dot-import-map-jspmio');
 
   data() {
     return {
       layout: 'layouts/pages/has-toc.njk',
-      permalink: ({ doc }) => doc.permalink,
+      permalink: ({ doc }: Context) => doc.permalink,
       eleventyComputed: {
-        title: ({ doc }) => doc.pageTitle,
-        tagName: ({ doc }) => doc.tagName,
+        title: ({ doc }: Context) => doc.pageTitle,
+        tagName: ({ doc }: Context) => doc.tagName,
       },
     };
   }
@@ -138,9 +139,9 @@ export default class ElementsPage extends Renderer {
       await assetCache.save(generator.getMap(), 'json');
     }
     const map = structuredClone(await assetCache.getCachedValue());
-    map.imports[`@rhds/elements/${tagName}/${tagName}.js`] =
-      map.imports['@rhds/elements'].replace('elements.js', `${tagName}/${tagName}.js`);
-    delete map.imports['@rhds/elements'];
+    map.imports![`@rhds/elements/${tagName}/${tagName}.js`] =
+      map.imports!['@rhds/elements'].replace('elements.js', `${tagName}/${tagName}.js`);
+    delete map.imports!['@rhds/elements'];
     return JSON.stringify(map, null, 2);
   }
 
@@ -776,7 +777,8 @@ export default class ElementsPage extends Renderer {
   }
 
   async #renderDemos(ctx: Context) {
-    const entries: FileEntry[] = Object.entries(ctx.playgrounds[ctx.tagName]?.files ?? {});
+    const tagName = ctx.tagName as `rh-${string}`;
+    const entries = Object.entries(ctx.playgrounds[tagName]?.files ?? {}) as FileEntry[];
     return [
       await this.#renderDemoHead(),
       ...await this.#renderPlaygrounds(ctx, entries),
diff --git a/docs/_includes/layouts/pages/has-toc.njk b/docs/_includes/layouts/pages/has-toc.njk
index ba37b580d7..6a4fc74d1a 100755
--- a/docs/_includes/layouts/pages/has-toc.njk
+++ b/docs/_includes/layouts/pages/has-toc.njk
@@ -8,7 +8,7 @@ layout: layouts/base.njk
       data-helmet>
 
 <link rel="stylesheet"
-      href="/assets/javascript/elements/uxdot-toc-lightdom.css"
+      href="/assets/packages/@uxdot/elements/uxdot-toc-lightdom.css"
       data-helmet>
 
 <script type="module" data-helmet>
diff --git a/docs/_includes/layouts/pages/tokens.11ty.ts b/docs/_includes/layouts/pages/tokens.11ty.ts
index 1075c77cc2..0e397ca491 100644
--- a/docs/_includes/layouts/pages/tokens.11ty.ts
+++ b/docs/_includes/layouts/pages/tokens.11ty.ts
@@ -3,7 +3,7 @@ import type { DesignToken } from '#11ty-plugins/tokensHelpers.js';
 import tinycolor from 'tinycolor2';
 import { tokens as tokensMeta } from '@rhds/tokens/meta.js';
 import { createRequire } from 'node:module';
-import { Renderer } from '#uxdot/eleventy.config.js';
+import { Renderer } from '#eleventy.config';
 
 const require = createRequire(import.meta.url);
 const tokensJSON = require('@rhds/tokens/json/rhds.tokens.json');
@@ -52,7 +52,7 @@ interface Data {
   tokenCategory: TokenCategory;
 }
 
-export default class TokensPage extends Renderer {
+export default class TokensPage extends Renderer<Data> {
   data() {
     return {
       layout: 'layouts/pages/has-toc.njk',
@@ -419,7 +419,7 @@ export default class TokensPage extends Renderer {
     }
   }
 
-  async render(ctx: Data) {
+  override async render(ctx: Data) {
     const { tokenCategory } = ctx;
     const { exclude, include, path, slug } = tokenCategory;
     const name = path.split('.').pop()!;
diff --git a/docs/_includes/partials/component/feedback.11ty.ts b/docs/_includes/partials/component/feedback.11ty.ts
index 2a40929cab..5505160326 100644
--- a/docs/_includes/partials/component/feedback.11ty.ts
+++ b/docs/_includes/partials/component/feedback.11ty.ts
@@ -1,23 +1,24 @@
-import { Renderer } from '../../../../eleventy.config.ts';
-import { dedent } from '../../../_plugins/tokensHelpers';
+import { Renderer, type GlobalData } from '#eleventy.config';
+import { dedent } from '#11ty-plugins/tokensHelpers.js';
+import type { ElementDocsPageData } from '#11ty-plugins/element-docs.js';
 
 const html = String.raw; // for editor highlighting
 
-export default class Feedback extends Renderer {
-  async render({
-    doc,
-    title,
-    pfeconfig,
-    relatedItems,
-  }) {
-    pfeconfig ??= await import('@patternfly/pfe-tools/config.js').then(x => x.getPfeConfig());
+interface Data {
+  title: string;
+  relatedItems: Record<string, string[]>;
+  doc: ElementDocsPageData;
+}
+
+export default class Feedback extends Renderer<Data> {
+  async render({ doc, title, relatedItems, pfeconfig }: Data & GlobalData) {
     const name = doc?.tagName ?? this.slugify(title);
     const related = [...new Set((relatedItems?.[name] ?? []) as string[])].map(x => {
       const slug = this.getTagNameSlug(x);
       return {
         name: x,
         url: slug === x ? `/patterns/${slug}` : `/elements/${slug}`,
-        text: pfeconfig.aliases[x] || this.deslugify(slug),
+        text: pfeconfig.aliases?.[x] || this.deslugify(slug),
       };
     }).sort((a, b) => a.text < b.text ? -1 : a.text > b.text ? 1 : 0);
     return dedent(html`
diff --git a/docs/_includes/partials/component/header.njk b/docs/_includes/partials/component/header.njk
index dbce0b4b3d..ac410428ed 100644
--- a/docs/_includes/partials/component/header.njk
+++ b/docs/_includes/partials/component/header.njk
@@ -24,7 +24,7 @@
 <uxdot-header {% if tabs %}has-subnav{% endif %} {% if tokenSearch %}has-search {% endif %}>
   {#- TODO: cheap hack here to fix data spaghetti from demos page -#}
   <h1 id="{{ headingId }}" class="page-title">
-    {{ (prettyName or heading or title) | replace('Demos |', '') }}
+    {{ prettyName or heading or title }}
     {% if doc.planned %}
     <rh-tag icon="notification-fill" color="gray">Planned</rh-tag>
     {% endif %}
diff --git a/docs/_plugins/alphabetize-tags.ts b/docs/_plugins/alphabetize-tags.ts
index a8bc3f3e20..61486f05f0 100644
--- a/docs/_plugins/alphabetize-tags.ts
+++ b/docs/_plugins/alphabetize-tags.ts
@@ -44,10 +44,10 @@ export default function(eleventyConfig: UserConfig, opts?: Options) {
       for (const currentWeight of Object.keys(weights).sort() as unknown as number[]) {
         // Sort by title alphabetically
         weights[currentWeight].sort(function(a, b) {
-          if (a.data.title < b.data.title) {
+          if ((a.data?.title ?? 0) < (b.data?.title ?? 0)) {
             return -1;
           }
-          if (a.data.title > b.data.title) {
+          if ((a.data?.title ?? 0) > (b.data?.title ?? 0)) {
             return 1;
           }
           return 0;
diff --git a/docs/_plugins/element-demos.ts b/docs/_plugins/element-demos.ts
index d3ba15ba0d..1b06881c8f 100644
--- a/docs/_plugins/element-demos.ts
+++ b/docs/_plugins/element-demos.ts
@@ -42,8 +42,7 @@ export default function(eleventyConfig: UserConfig) {
       return Parse5.serialize(document);
     }
     return content;
-  },
-  );
+  });
 
   eleventyConfig.addTransform('demo-lightdom-css', async function(this, content) {
     const { outputPath, inputPath } = this.page;
diff --git a/docs/_plugins/element-docs.ts b/docs/_plugins/element-docs.ts
index 5fd877ad75..94fa564224 100644
--- a/docs/_plugins/element-docs.ts
+++ b/docs/_plugins/element-docs.ts
@@ -1,6 +1,6 @@
 /// <reference lib="ESNext.Collection"/>
 import type { UserConfig } from '@11ty/eleventy';
-import type { TagStatus } from '#uxdot/docs/assets/javascript/elements/uxdot-repo.js';
+import type { TagStatus } from '#uxdot/uxdot-repo.js';
 import slugify from 'slugify';
 import { basename, dirname, join, sep } from 'node:path';
 import { glob, readFile, readdir, stat } from 'node:fs/promises';
@@ -47,7 +47,7 @@ interface ElementDocsPageFileSystemData extends ElementDocsPageBasicData {
 }
 
 export interface ElementDocsPageData extends ElementDocsPageFileSystemData {
-  data: {
+  data?: {
     order: number;
     title: string;
   };
@@ -58,6 +58,7 @@ export interface ElementDocsPageData extends ElementDocsPageFileSystemData {
   subnav: { collection: string };
   tags: string[];
   layout: string;
+  [key: string]: unknown;
 }
 
 const cwd = process.cwd();
@@ -89,7 +90,9 @@ function getTabData(filePath: string): ElementDocsPageTabData {
   const tagName = parts.find(x => x.startsWith('rh-'))!;
   const pageSlug = filePath.split(sep).pop()?.split('.').shift()?.replace(/^(\d+|rh)-/, '') ?? '';
   const slug = getTagNameSlug(tagName);
-  const permalink = pageSlug === 'overview' ? `/elements/${slug}/index.html` : `/elements/${slug}/${pageSlug}/index.html`;
+  const permalink =
+        pageSlug === 'overview' ? `/elements/${slug}/index.html`
+      : `/elements/${slug}/${pageSlug}/index.html`;
   const pageTitle = capitalize(deslugify(pageSlug).toLowerCase().replace('rh-', ''));
   return {
     tagName,
@@ -160,11 +163,16 @@ const isDocFor = (tagName: string) =>
 
 async function getDocsPageData(
   data: ElementDocsPageFileSystemData,
-  docsPages: DocsPage[],
+  docsPages: DocsPage[] | (() => Promise<DocsPage[]>),
   docFilePaths: string[],
+  getPrettyElementName: (tagName: string) => string,
 ): Promise<ElementDocsPageData> {
   const [manifest] = getAllManifests();
 
+  if (typeof docsPages === 'function') {
+    docsPages = await docsPages();
+  }
+
   const docsPage = docsPages.find(x => x.tagName === data.tagName)
             ?? new DocsPage(manifest);
 
@@ -175,19 +183,20 @@ async function getDocsPageData(
 
   if (!data.planned) {
     // Add 'virtual' demos page, it's generated by demos.11ty.cjs
-    tabs.splice(-1, 0, {
-      url: `/elements/${data.slug}/demos/`,
-      pageTitle: 'Demos',
-      pageSlug: 'demos',
-      permalink: `/elements/${data.slug}/demos/`,
-      filePath: `${dirname(data.filePath)}90-demos.md`,
-      slug: data.slug,
-      tagName: data.tagName,
-    });
+    const tab = tabs.find(x => x.pageSlug === 'demo');
+    if (tab) {
+      tab.url = `/elements/${data.slug}/demos/`;
+      tab.pageTitle = getPrettyElementName(data.tagName);
+      tab.pageSlug = 'demos';
+      tab.permalink = `/elements/${data.slug}/demos/index.html`;
+      tab.filePath = `${dirname(data.filePath)}/40-demos.md`;
+      tab.slug = data.slug;
+      tab.tagName = data.tagName;
+    }
   }
 
   if (data.planned) {
-    tabs = tabs.filter(x => x.pageSlug !== 'code');
+    tabs = tabs.filter(x => x.pageSlug !== 'code' && x.pageSlug !== 'demos');
   }
 
   const collection = `${data.tagName}-tabs`;
@@ -208,7 +217,6 @@ async function getDocsPageData(
   };
 }
 
-/** @param  eleventyConfig */
 export default function(eleventyConfig: UserConfig) {
   eleventyConfig.addCollection('elementDocs', async function() {
     try {
@@ -218,19 +226,24 @@ export default function(eleventyConfig: UserConfig) {
       // (elementDocs) should be refactored, and the elements/*/docs/*.md files should be used
       // only for markdown content, but the code and demos tabs should be fully generated, with
       // the XX-code.md content interjected, if any.
-      const fakeCodeDocsPaths = await Array.fromAsync(glob('elements/*', { cwd }), x => [
-        `${x}/docs/30-code.md`,
-        `${x}/docs/40-demos.md`,
-      ]);
+      const fakeCodeDocsPaths = await Array.fromAsync(glob('elements/*', { cwd }), x =>
+        x.includes('.') ? [] : [
+          `${x}/docs/30-code.md`,
+          `${x}/docs/90-demos.md`,
+        ]);
       const filePaths = Array.from(new Set([...docFilePaths, ...fakeCodeDocsPaths.flat()]))
           .sort(function alphabetically(a: string, b: string) {
             return ( a < b ? -1 : a > b ? 1 : 0);
           });
+      const { elements } = eleventyConfig.globalData;
+      const getPrettyElementName =
+        eleventyConfig.getFilter('getPrettyElementName') as (tagname: string) => string;
       const elementDocs = await Promise.all(filePaths.map(async filePath =>
         getDocsPageData(
           await getFSData(getBasicData(filePath)),
-          await eleventyConfig.globalData.elements(),
+          elements as DocsPage[] | (() => Promise<DocsPage[]>),
           filePaths,
+          getPrettyElementName
         )));
       return elementDocs;
     } catch (e) {
diff --git a/docs/_plugins/importMap.ts b/docs/_plugins/importMap.ts
index 3022a22116..070919936d 100644
--- a/docs/_plugins/importMap.ts
+++ b/docs/_plugins/importMap.ts
@@ -6,8 +6,8 @@ import chalk from 'chalk';
 
 import type { UserConfig } from '@11ty/eleventy';
 
-interface ImportMap {
-  imports: Record<string, string>;
+export interface ImportMap {
+  imports?: Record<string, string>;
   scopes?: Record<string, Record<string, string>>;
 }
 
@@ -60,7 +60,7 @@ async function getCachedImportMap({
   cwd,
   assetCache,
   nodemodulesPublicPath,
-}: Options) {
+}: Required<Options>) {
   if (assetCache.isCacheValid('1d')) {
     return assetCache.getCachedValue();
   } else {
@@ -116,10 +116,10 @@ async function getCachedImportMap({
 
 export default function(eleventyConfig: UserConfig, opts?: Options) {
   const {
-    inputMap,
-    manualImportMap,
-    defaultProvider,
-    nodemodulesPublicPath,
+    inputMap = {},
+    manualImportMap = {},
+    defaultProvider = 'jspm.io',
+    nodemodulesPublicPath = '/assets/',
     localPackages = [],
   } = opts ?? {};
   const cwd = process.cwd();
diff --git a/docs/_plugins/lit-ssr/lit.ts b/docs/_plugins/lit-ssr/lit.ts
index 378fad10ba..543c59ef14 100644
--- a/docs/_plugins/lit-ssr/lit.ts
+++ b/docs/_plugins/lit-ssr/lit.ts
@@ -24,7 +24,8 @@ function trimOuterMarkers(renderedContent: string) {
       .replace(/((<!--[^<>]*-->)|(<\?>)|\s)+$/, '');
 }
 
-export default function(eleventyConfig: UserConfig, { componentModules }: Options = {}) {
+export default function(eleventyConfig: UserConfig, opts?: Options) {
+  const { componentModules } = opts ?? {};
   if (componentModules === undefined || componentModules.length === 0) {
     // If there are no component modules, we could never have anything to
     // render.
@@ -107,7 +108,6 @@ export default function(eleventyConfig: UserConfig, { componentModules }: Option
 
     const outerMarkersTrimmed = trimOuterMarkers(renderedContent);
     return outerMarkersTrimmed;
-  }
-  );
+  });
 };
 
diff --git a/docs/_plugins/markdown-it.ts b/docs/_plugins/markdown-it.ts
index 7b4a491c93..b2cfd1ed56 100644
--- a/docs/_plugins/markdown-it.ts
+++ b/docs/_plugins/markdown-it.ts
@@ -1,4 +1,5 @@
 import type MarkdownIt from 'markdown-it';
+import type State from 'markdown-it/lib/rules_core/state_core.mjs';
 import type { UserConfig } from '@11ty/eleventy';
 import markdownItAnchor from 'markdown-it-anchor';
 import markdownItAttrs from 'markdown-it-attrs';
@@ -7,7 +8,15 @@ import markdownItFootnote from 'markdown-it-footnote';
 /* eslint-disable lit-a11y/anchor-is-valid */
 /* eslint-disable lit-a11y/accessible-name */
 
-const { makePermalink } = markdownItAnchor.permalink;
+const { makePermalink } = markdownItAnchor.permalink as unknown as {
+  makePermalink(callback: (
+    slug: string,
+    opts: markdownItAnchor.PermalinkOptions,
+    anchorOptions: markdownItAnchor.AnchorOptions,
+    state: State,
+    idx: number,
+  ) => void): () => markdownItAnchor.PermalinkGenerator;
+};
 
 // for editor highlighting
 const html = String.raw;
diff --git a/docs/_plugins/rhds.ts b/docs/_plugins/rhds.ts
index 1ce904b6d9..84c4230e23 100644
--- a/docs/_plugins/rhds.ts
+++ b/docs/_plugins/rhds.ts
@@ -1,5 +1,3 @@
-/// <reference lib="ESNext.Array"/>
-
 import type { UserConfig } from '@11ty/eleventy';
 import * as ChildProcess from 'node:child_process';
 import { join, dirname } from 'node:path';
@@ -94,9 +92,7 @@ export default async function(eleventyConfig: UserConfig, options?: Options) {
   });
 
   /** add the normalized pfe-tools config to global data */
-  eleventyConfig.on('eleventy.before', async function() {
-    eleventyConfig.addGlobalData('pfeconfig', getPfeConfig());
-  });
+  eleventyConfig.addGlobalData('pfeconfig', getPfeConfig());
 
   /** custom-elements.json */
   eleventyConfig.on('eleventy.before', async function({ runMode }) {
@@ -106,8 +102,8 @@ export default async function(eleventyConfig: UserConfig, options?: Options) {
   });
 
   /** /assets/javascript/environment.js */
-  eleventyConfig.on('eleventy.before', async function({ dir }) {
-    const outPath = join(dir.input, '..', 'lib', 'environment.js');
+  eleventyConfig.on('eleventy.before', async function({ directories }) {
+    const outPath = join(directories.input, '..', 'lib', 'environment.js');
     await writeFile(outPath, await makeDemoEnv(), 'utf8');
   });
 
@@ -135,10 +131,10 @@ export default async function(eleventyConfig: UserConfig, options?: Options) {
 
   eleventyConfig.addJavaScriptFunction('getTagNameSlug', getTagNameSlug);
 
-  eleventyConfig.addFilter('getPrettyElementName', function(tagName: string) {
+  eleventyConfig.addFilter('getPrettyElementName', function(this, tagName) {
     const slug = getTagNameSlug(tagName);
     const deslugify = eleventyConfig.getFilter('deslugify');
-    return pfeconfig.aliases[tagName] || deslugify(slug);
+    return pfeconfig.aliases[tagName] || deslugify.call(this, slug);
   });
 
   eleventyConfig.addFilter('deslugify', function(slug: string) {
diff --git a/docs/_plugins/table-of-contents.ts b/docs/_plugins/table-of-contents.ts
index b90617bf89..900055396b 100644
--- a/docs/_plugins/table-of-contents.ts
+++ b/docs/_plugins/table-of-contents.ts
@@ -1,12 +1,10 @@
+/** @license adapted from code (c) Jordan Shermer MIT license*/
+
+
 import type { UserConfig } from '@11ty/eleventy';
 import * as Parse5 from 'parse5';
 import * as Tools from '@parse5/tools';
 
-/// <reference lib="ESNext.collection" />
-
-/** @license adapted from code (c) Jordan Shermer MIT license*/
-
-
 /** Attribute which if found on a heading means the heading is excluded */
 const ignoreAttribute = 'data-toc-exclude';
 
@@ -34,13 +32,13 @@ function getParent(prev: Item, current: Item) {
 class Item {
   children: Item[] = [];
 
-  parent: Item;
+  parent!: Item;
 
   level = 0;
 
-  slug: string | null;
+  slug!: string | null;
 
-  text: string;
+  text!: string;
 
   constructor(element?: Tools.Element) {
     if (element) {
@@ -73,7 +71,7 @@ class Item {
 }
 
 export default function(eleventyConfig: UserConfig, pluginOpts: Partial<Options> = {}) {
-  eleventyConfig.addFilter('toc', async function toc(content: string, opts: Partial<Options>) {
+  eleventyConfig.addFilter('toc', async function toc(content: string, opts?: Partial<Options>) {
     const { tags = ['h2'], ignoredElements = [] } = {
       ...pluginOpts,
       ...opts,
@@ -105,7 +103,5 @@ export default function(eleventyConfig: UserConfig, pluginOpts: Partial<Options>
     }
 
     return Parse5.serialize(root.getNode());
-  }
-
-  );
+  });
 };
diff --git a/docs/styles/lightdom.css b/docs/styles/lightdom.css
index 5aefc693db..8cbd892152 100644
--- a/docs/styles/lightdom.css
+++ b/docs/styles/lightdom.css
@@ -1,6 +1,6 @@
 @layer masthead, sidenav, permalink, repo-status-list, footer;
 
-@import url('../assets/javascript/elements/uxdot-masthead-lightdom.css') layer(masthead);
-@import url('../assets/javascript/elements/uxdot-sidenav-lightdom.css') layer(sidenav);
-@import url('../assets/javascript/elements/uxdot-copy-permalink-lightdom.css') layer(permalink);
-@import url('../assets/packages/@rhds/elements/elements/rh-footer/rh-footer-lightdom.css') layer(footer);
+@import url('/assets/packages/@uxdot/elements/uxdot-masthead-lightdom.css') layer(masthead);
+@import url('/assets/packages/@uxdot/elements/uxdot-sidenav-lightdom.css') layer(sidenav);
+@import url('/assets/packages/@uxdot/elements/uxdot-copy-permalink-lightdom.css') layer(permalink);
+@import url('/assets/packages/@rhds/elements/elements/rh-footer/rh-footer-lightdom.css') layer(footer);
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
new file mode 100644
index 0000000000..0f0e3077e1
--- /dev/null
+++ b/docs/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": [
+    "../tsconfig.settings.json"
+  ],
+  "include": [
+    "./**/*",
+    "../declaration.d.ts",
+    "../eleventy.config.ts",
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true
+  },
+}
diff --git a/elements/tsconfig.json b/elements/tsconfig.json
new file mode 100644
index 0000000000..df38d22d90
--- /dev/null
+++ b/elements/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": [
+    "../tsconfig.settings.json"
+  ],
+  "include": [
+    "./**/*.ts",
+    "../lib/**/*.ts",
+    "../declaration.d.ts"
+  ],
+  "compilerOptions": {
+    "composite": true
+  },
+  "exclude": [
+    "./**/*.spec.ts",
+    "./**/*.e2e.ts",
+  ],
+}
diff --git a/eleventy.config.ts b/eleventy.config.ts
index a0389cb117..2d2ee49cac 100644
--- a/eleventy.config.ts
+++ b/eleventy.config.ts
@@ -1,5 +1,7 @@
 Error.stackTraceLimit = 50;
 
+import type { PfeConfig } from '@patternfly/pfe-tools/config.js';
+
 import SyntaxHighlightPlugin from '@11ty/eleventy-plugin-syntaxhighlight';
 import DirectoryOutputPlugin from '@11ty/eleventy-plugin-directory-output';
 import AnchorsPlugin from '@patternfly/pfe-tools/11ty/plugins/anchors.cjs';
@@ -18,6 +20,29 @@ import LitPlugin from '#11ty-plugins/lit-ssr/lit.js';
 import { promisify } from 'node:util';
 import * as ChildProcess from 'node:child_process';
 
+export interface GlobalData {
+  runMode: 'build' | 'watch' | 'serve';
+  isLocal: boolean;
+  pfeconfig: PfeConfig;
+  sideNavDropdowns: {
+    title: string;
+    url: string;
+    collection: string;
+  }[];
+}
+
+export class Renderer<T> {
+  declare renderTemplate: (path: string, type: string) => Promise<string>;
+  declare renderFile: (path: string, data?: object) => Promise<string>;
+  declare highlight: (lang: string, content: string) => string;
+  declare dedent: (str: string) => string;
+  declare slugify: (str: string) => string;
+  declare deslugify: (str: string) => string;
+  declare getTagNameSlug: (str: string) => string;
+  declare getElementDocs: (str: string) => string;
+  render?(data: T & GlobalData): string | Promise<string>;
+}
+
 const exec = promisify(ChildProcess.exec);
 
 const isWatch =
@@ -25,7 +50,6 @@ const isWatch =
 
 const isLocal = !(process.env.CI || process.env.DEPLOY_URL);
 
-/** @param  eleventyConfig */
 export default async function(eleventyConfig: UserConfig) {
   eleventyConfig.setQuietMode(true);
 
@@ -34,7 +58,7 @@ export default async function(eleventyConfig: UserConfig) {
   });
 
   eleventyConfig.on('eleventy.before', async function() {
-    const { stdout, stderr } = await exec('npx tspc || exit 0');
+    const { stdout, stderr } = await exec('npx tspc -b');
     if (stderr) {
       // eslint-disable-next-line no-console
       console.error(stderr);
@@ -99,6 +123,7 @@ export default async function(eleventyConfig: UserConfig) {
   });
   eleventyConfig.addPassthroughCopy({ 'elements': '/assets/packages/@rhds/elements/elements/' });
   eleventyConfig.addPassthroughCopy({ 'lib': '/assets/packages/@rhds/elements/lib/' });
+  eleventyConfig.addPassthroughCopy({ 'uxdot': '/assets/packages/@uxdot/elements/' });
   eleventyConfig.addPlugin(ImportMapPlugin, {
     nodemodulesPublicPath: '/assets/packages',
     manualImportMap: {
@@ -119,7 +144,7 @@ export default async 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/',
+        '@uxdot/elements/': '/assets/javascript/elements/uxdot/',
         'playground-elements': 'https://cdn.jsdelivr.net/npm/playground-elements@0.18.1/+esm',
       },
     },
@@ -199,22 +224,22 @@ export default async function(eleventyConfig: UserConfig) {
 
   eleventyConfig.addPlugin(LitPlugin, {
     componentModules: [
-      '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-hero.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-checklist.js',
-      'docs/assets/javascript/elements/uxdot-repo-status-list.js',
-      'docs/assets/javascript/elements/uxdot-search.js',
-      'docs/assets/javascript/elements/uxdot-sidenav.js',
-      'docs/assets/javascript/elements/uxdot-spacer-tokens-table.js',
-      'docs/assets/javascript/elements/uxdot-toc.js',
+      'docs/assets/javascript/elements/uxdot/uxdot-best-practice.js',
+      'docs/assets/javascript/elements/uxdot/uxdot-copy-button.js',
+      'docs/assets/javascript/elements/uxdot/uxdot-copy-permalink.js',
+      'docs/assets/javascript/elements/uxdot/uxdot-example.js',
+      'docs/assets/javascript/elements/uxdot/uxdot-feedback.js',
+      'docs/assets/javascript/elements/uxdot/uxdot-header.js',
+      'docs/assets/javascript/elements/uxdot/uxdot-hero.js',
+      'docs/assets/javascript/elements/uxdot/uxdot-installation-tabs.js',
+      'docs/assets/javascript/elements/uxdot/uxdot-masthead.js',
+      'docs/assets/javascript/elements/uxdot/uxdot-pattern.js',
+      'docs/assets/javascript/elements/uxdot/uxdot-repo-status-checklist.js',
+      'docs/assets/javascript/elements/uxdot/uxdot-repo-status-list.js',
+      'docs/assets/javascript/elements/uxdot/uxdot-search.js',
+      'docs/assets/javascript/elements/uxdot/uxdot-sidenav.js',
+      'docs/assets/javascript/elements/uxdot/uxdot-spacer-tokens-table.js',
+      'docs/assets/javascript/elements/uxdot/uxdot-toc.js',
       'elements/rh-button/rh-button.js',
       'elements/rh-code-block/rh-code-block.js',
       'elements/rh-footer/rh-footer-universal.js',
@@ -228,16 +253,7 @@ export default async function(eleventyConfig: UserConfig) {
   });
 
   if (!isWatch && !process.env.QUIET) {
-    eleventyConfig.addPlugin(DirectoryOutputPlugin, {
-    // Customize columns
-      columns: {
-        filesize: true, // Use `false` to disable
-        benchmark: true, // Use `false` to disable
-      },
-
-      // Will show in yellow if greater than this number of bytes
-      warningFileSize: 400 * 1000,
-    });
+    eleventyConfig.addPlugin(DirectoryOutputPlugin);
   }
 
   /**
@@ -271,13 +287,3 @@ export default async function(eleventyConfig: UserConfig) {
   };
 };
 
-export class Renderer {
-  declare renderTemplate: (path: string, type: string) => Promise<string>;
-  declare renderFile: (path: string, data?: object) => Promise<string>;
-  declare highlight: (lang: string, content: string) => string;
-  declare dedent: (str: string) => string;
-  declare slugify: (str: string) => string;
-  declare deslugify: (str: string) => string;
-  declare getTagNameSlug: (str: string) => string;
-  declare getElementDocs: (str: string) => string;
-}
diff --git a/lib/tsconfig.json b/lib/tsconfig.json
new file mode 100644
index 0000000000..8404b988b5
--- /dev/null
+++ b/lib/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": [
+    "../tsconfig.settings.json"
+  ],
+  "include": [
+    "./**/*.ts",
+    "../declaration.d.ts",
+  ],
+  "compilerOptions": {
+    "composite": true
+  },
+}
diff --git a/package-lock.json b/package-lock.json
index 3d7067aa9f..1942f5b0fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,7 +40,10 @@
         "@stylistic/stylelint-config": "^2.0.0",
         "@stylistic/stylelint-plugin": "^3.1.1",
         "@types/js-yaml": "^4.0.9",
+        "@types/markdown-it-attrs": "^4.1.3",
+        "@types/markdown-it-footnote": "^3.0.4",
         "@types/mocha": "^10.0.9",
+        "@types/tinycolor2": "^1.4.6",
         "@web/rollup-plugin-import-meta-assets": "^2.2.1",
         "@webcomponents/template-shadowroot": "^0.2.1",
         "async-csv": "^2.1.3",
@@ -5661,8 +5664,7 @@
       "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
       "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/markdown-it": {
       "version": "14.1.2",
@@ -5670,19 +5672,37 @@
       "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/linkify-it": "^5",
         "@types/mdurl": "^2"
       }
     },
+    "node_modules/@types/markdown-it-attrs": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it-attrs/-/markdown-it-attrs-4.1.3.tgz",
+      "integrity": "sha512-1JsseFdHD6rQHsPcy4W3xx/whxvZ09Z+CqPpnOtrGtpmkFW07N11q7oM383//LtoKv54yn+HGnk6r4ZHUTHJVg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/markdown-it": "*"
+      }
+    },
+    "node_modules/@types/markdown-it-footnote": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it-footnote/-/markdown-it-footnote-3.0.4.tgz",
+      "integrity": "sha512-XJ6n+v+2u+2gmYLSHcxyoNT/YrgrKvHuDJQlykFjuxCQCr86P2/fx1V6/0lcKxv5cSIlCaJ6sUcNS3zDI7I+LA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/markdown-it": "*"
+      }
+    },
     "node_modules/@types/mdurl": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
       "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/mime": {
       "version": "1.3.5",
@@ -5826,6 +5846,13 @@
         "@types/estree": "*"
       }
     },
+    "node_modules/@types/tinycolor2": {
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/@types/tinycolor2/-/tinycolor2-1.4.6.tgz",
+      "integrity": "sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "license": "MIT"
diff --git a/package.json b/package.json
index f8471acec7..7cb0c8cb90 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,9 @@
   },
   "imports": {
     "#scripts/*": "./scripts/*",
-    "#uxdot/*": "./*",
-    "#11ty-plugins/*": "./docs/_plugins/*"
+    "#uxdot/*": "./uxdot/*",
+    "#11ty-plugins/*": "./docs/_plugins/*",
+    "#eleventy.config": "./eleventy.config.ts"
   },
   "contributors": [
     "Adam Johnson <adjohnso@redhat.com>",
@@ -74,7 +75,7 @@
     "🚚-DIST": "❓ Publish packages",
     "prepublishOnly": "wireit",
     "⚙️--UTIL": "❓ Manages the repo",
-    "clean": "git clean -dfx -e ./node_modules -e ./husky",
+    "clean": "git clean -dfx -e node_modules -e .husky",
     "clean:nuke": "git clean -fX",
     "lint": "wireit"
   },
@@ -108,7 +109,7 @@
     },
     "serve": {
       "service": true,
-      "command": "TSX_TSCONFIG_PATH=./tsconfig.docs.json tsx ./node_modules/.bin/eleventy --config=eleventy.config.ts --serve --incremental",
+      "command": "NODE_OPTIONS='--import tsx/esm' eleventy --config=eleventy.config.ts --serve --incremental",
       "dependencies": [
         "patch",
         "compile",
@@ -141,22 +142,20 @@
       ]
     },
     "compile": {
-      "command": "tspc",
+      "command": "tspc -b",
       "files": [
         "elements/**/*.ts",
-        "docs/assets/javascript/**/*.ts",
-        "docs/assets/javascript/**/*.css",
+        "uxdot/*.ts",
+        "uxdot/*.css",
         "lib/**/*.css",
         "lib/**/*.ts"
       ],
       "output": [
         "tsconfig.tsbuildinfo",
-        "elements/**/*.{d.ts,js,map}",
-        "lib/**/*.{d.ts,js,map}",
+        "elements/**/*.{d.ts,js,map,tsbuildinfo}",
+        "lib/**/*.{d.ts,js,map,tsbuildinfo}",
         "elements/rh-secondary-nav/test/fixtures.js",
-        "docs/assets/javascript/elements/*.js",
-        "docs/assets/javascript/**/*.d.ts",
-        "docs/assets/javascript/**/*.js.map",
+        "docs/assets/javascript/elements/*.{js,d.ts,map,tsbuildinfo}",
         "!elements/*/{demo,test}/**/*.js"
       ]
     },
@@ -193,7 +192,7 @@
         "scripts/copy-assets.ts"
       ],
       "output": [
-        "./*/*.css"
+        "./rh-*/*.css"
       ]
     },
     "analyze": {
@@ -209,7 +208,7 @@
       ]
     },
     "docs": {
-      "command": "TSX_TSCONFIG_PATH=./tsconfig.docs.json tsx ./node_modules/.bin/eleventy --config=eleventy.config.ts",
+      "command": "NODE_OPTIONS='--import tsx/esm' eleventy --config=eleventy.config.ts",
       "dependencies": [
         "patch",
         "analyze",
@@ -239,10 +238,11 @@
       ]
     },
     "stylelint": {
-      "command": "stylelint 'elements/**/*.css' 'lib/**/*.css' 'docs/**/*.scss'",
+      "command": "stylelint 'elements/**/*.css' 'lib/**/*.css' 'docs/**/*.scss' 'docs/**/*.css' 'uxdot/**/*.css'",
       "files": [
         "docs/**/*.scss",
         "elements/**/*.css",
+        "uxdot/**/*.css",
         "lib/**/*.css"
       ]
     },
@@ -274,7 +274,7 @@
     },
     "watch:docs": {
       "service": true,
-      "command": "TSX_TSCONFIG_PATH=./tsconfig.docs.json tsx ./node_modules/.bin/eleventy --serve --incremental --config=eleventy.config.ts",
+      "command": "NODE_OPTIONS='--import tsx/esm' eleventy --serve --incremental --config=eleventy.config.ts",
       "dependencies": [
         "analyze",
         "compile"
@@ -327,7 +327,10 @@
     "@stylistic/stylelint-config": "^2.0.0",
     "@stylistic/stylelint-plugin": "^3.1.1",
     "@types/js-yaml": "^4.0.9",
+    "@types/markdown-it-attrs": "^4.1.3",
+    "@types/markdown-it-footnote": "^3.0.4",
     "@types/mocha": "^10.0.9",
+    "@types/tinycolor2": "^1.4.6",
     "@web/rollup-plugin-import-meta-assets": "^2.2.1",
     "@webcomponents/template-shadowroot": "^0.2.1",
     "async-csv": "^2.1.3",
diff --git a/scripts/environment.d.ts b/scripts/environment.d.ts
new file mode 100644
index 0000000000..6093a42d69
--- /dev/null
+++ b/scripts/environment.d.ts
@@ -0,0 +1,9 @@
+/**
+ * create a javascript map containing icon names
+ */
+export declare async function getIconSetsMap(): Promise<Map<IconSetName, IconNameFor<IconSetName>[]>>;
+
+/**
+ * create a javascript module containing element and icon names
+ */
+export async function makeDemoEnv(): Promise<string>;
diff --git a/tsconfig.docs.json b/tsconfig.docs.json
deleted file mode 100644
index d05ca0d44b..0000000000
--- a/tsconfig.docs.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "extends": [
-    "./tsconfig.settings.json"
-  ],
-  "include": [
-    "./docs/**/*.ts",
-  ],
-  "compilerOptions": {
-    "noEmit": true,
-    "emitDeclarationOnly": false,
-    "declaration": false
-  },
-  "exclude": [
-    "**/node_modules/**/*",
-    "_site",
-    "scripts/*.js",
-    "elements/**/*.js",
-    "elements/*/test/**/*.js",
-    "elements/rh-secondary-nav/test/fixtures.js",
-    "**/*.spec.ts",
-    "**/*.e2e.ts",
-    "lib/**/*.js",
-    "./*.config.js"
-  ],
-}
diff --git a/tsconfig.json b/tsconfig.json
index 0822cd8cc4..475444f159 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,24 +1,18 @@
 {
-  "extends": [
-    "./tsconfig.settings.json"
-  ],
-  "include": [
-    "./elements",
-    "./lib",
-    "./declaration.d.ts",
-    "./docs/assets/javascript/elements/*.ts",
-  ],
-  "exclude": [
-    "**/node_modules/**/*",
-    "_site",
-    "scripts/*.js",
-    "elements/**/*.js",
-    "elements/*/test/**/*.js",
-    "elements/rh-secondary-nav/test/fixtures.js",
-    "docs",
-    "**/*.spec.ts",
-    "**/*.e2e.ts",
-    "lib/**/*.js",
-    "./*.config.js"
-  ],
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./elements"
+    },
+    {
+      "path": "./lib"
+    },
+    {
+      "path": "./uxdot"
+    },
+    {
+      "path": "./docs"
+    },
+  ]
 }
diff --git a/tsconfig.settings.json b/tsconfig.settings.json
index 7429d9c7aa..e4d35c23ed 100644
--- a/tsconfig.settings.json
+++ b/tsconfig.settings.json
@@ -1,6 +1,19 @@
 {
   "include": [
-    "./docs/11ty-types.d.ts"
+    "./docs/11ty-types.d.ts",
+    "./declaration.d.ts"
+  ],
+  "exclude": [
+    "**/node_modules/**/*",
+    "_site",
+    "scripts/*.js",
+    "elements/**/*.js",
+    "elements/*/test/**/*.js",
+    "elements/rh-secondary-nav/test/fixtures.js",
+    "**/*.spec.ts",
+    "**/*.e2e.ts",
+    "lib/**/*.js",
+    "./*.config.js"
   ],
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
@@ -53,28 +66,13 @@
       "ESNext.Disposable",
       "ScriptHost"
     ],
-    "paths": {
-      "#uxdot/*": [
-        "."
-      ],
-      "#11ty-plugins/*": [
-        "./docs/_plugins/*"
-      ],
-      "#scripts/*": [
-        "./scripts/*"
-      ],
-      "@rhds/elements/*": [
-        "./elements/*"
-      ],
-      "@rhds/elements/lib/*": [
-        "./lib/*"
-      ],
-      "@rhds/tokens/color.*": [
-        "./node_modules/@rhds/tokens/js/color.*"
-      ],
-      "@rhds/tokens/css/*": [
-        "./node_modules/@rhds/tokens/css/*"
-      ]
+  },
+  "references": [
+    {
+      "path": "./docs"
+    },
+    {
+      "path": "./uxdot"
     }
-  }
+  ]
 }
diff --git a/uxdot/repoStatus.ts b/uxdot/repoStatus.ts
new file mode 100644
index 0000000000..874629c457
--- /dev/null
+++ b/uxdot/repoStatus.ts
@@ -0,0 +1,10 @@
+import type { TagStatus } from './uxdot-repo.js';
+
+import { join, dirname } from 'node:path';
+import { readFile } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+import yaml from 'js-yaml';
+
+const rootDir = fileURLToPath(dirname(import.meta.resolve('@rhds/elements')));
+const text = await readFile(join(rootDir, 'docs/_data/repoStatus.yaml'), 'utf8');
+export default yaml.load(text) as TagStatus[];
diff --git a/uxdot/tsconfig.json b/uxdot/tsconfig.json
new file mode 100644
index 0000000000..cfc3f95932
--- /dev/null
+++ b/uxdot/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": [
+    "../tsconfig.settings.json"
+  ],
+  "include": [
+    "./**/*",
+    "../declaration.d.ts",
+    "../docs/11ty-types.d.ts"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "../docs/assets/javascript/elements",
+  },
+}
diff --git a/docs/assets/javascript/elements/uxdot-best-practice.css b/uxdot/uxdot-best-practice.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-best-practice.css
rename to uxdot/uxdot-best-practice.css
diff --git a/docs/assets/javascript/elements/uxdot-best-practice.ts b/uxdot/uxdot-best-practice.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-best-practice.ts
rename to uxdot/uxdot-best-practice.ts
diff --git a/docs/assets/javascript/elements/uxdot-copy-button.css b/uxdot/uxdot-copy-button.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-copy-button.css
rename to uxdot/uxdot-copy-button.css
diff --git a/docs/assets/javascript/elements/uxdot-copy-button.ts b/uxdot/uxdot-copy-button.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-copy-button.ts
rename to uxdot/uxdot-copy-button.ts
diff --git a/docs/assets/javascript/elements/uxdot-copy-permalink-lightdom.css b/uxdot/uxdot-copy-permalink-lightdom.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-copy-permalink-lightdom.css
rename to uxdot/uxdot-copy-permalink-lightdom.css
diff --git a/docs/assets/javascript/elements/uxdot-copy-permalink.css b/uxdot/uxdot-copy-permalink.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-copy-permalink.css
rename to uxdot/uxdot-copy-permalink.css
diff --git a/docs/assets/javascript/elements/uxdot-copy-permalink.ts b/uxdot/uxdot-copy-permalink.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-copy-permalink.ts
rename to uxdot/uxdot-copy-permalink.ts
diff --git a/docs/assets/javascript/elements/uxdot-example.css b/uxdot/uxdot-example.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-example.css
rename to uxdot/uxdot-example.css
diff --git a/docs/assets/javascript/elements/uxdot-example.ts b/uxdot/uxdot-example.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-example.ts
rename to uxdot/uxdot-example.ts
diff --git a/docs/assets/javascript/elements/uxdot-feedback.css b/uxdot/uxdot-feedback.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-feedback.css
rename to uxdot/uxdot-feedback.css
diff --git a/docs/assets/javascript/elements/uxdot-feedback.ts b/uxdot/uxdot-feedback.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-feedback.ts
rename to uxdot/uxdot-feedback.ts
diff --git a/docs/assets/javascript/elements/uxdot-header.css b/uxdot/uxdot-header.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-header.css
rename to uxdot/uxdot-header.css
diff --git a/docs/assets/javascript/elements/uxdot-header.ts b/uxdot/uxdot-header.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-header.ts
rename to uxdot/uxdot-header.ts
diff --git a/docs/assets/javascript/elements/uxdot-hero.css b/uxdot/uxdot-hero.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-hero.css
rename to uxdot/uxdot-hero.css
diff --git a/docs/assets/javascript/elements/uxdot-hero.ts b/uxdot/uxdot-hero.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-hero.ts
rename to uxdot/uxdot-hero.ts
diff --git a/docs/assets/javascript/elements/uxdot-installation-tabs.ts b/uxdot/uxdot-installation-tabs.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-installation-tabs.ts
rename to uxdot/uxdot-installation-tabs.ts
diff --git a/docs/assets/javascript/elements/uxdot-masthead-lightdom.css b/uxdot/uxdot-masthead-lightdom.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-masthead-lightdom.css
rename to uxdot/uxdot-masthead-lightdom.css
diff --git a/docs/assets/javascript/elements/uxdot-masthead.css b/uxdot/uxdot-masthead.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-masthead.css
rename to uxdot/uxdot-masthead.css
diff --git a/docs/assets/javascript/elements/uxdot-masthead.ts b/uxdot/uxdot-masthead.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-masthead.ts
rename to uxdot/uxdot-masthead.ts
diff --git a/docs/assets/javascript/elements/uxdot-pattern-ssr-controller-client.ts b/uxdot/uxdot-pattern-ssr-controller-client.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-pattern-ssr-controller-client.ts
rename to uxdot/uxdot-pattern-ssr-controller-client.ts
diff --git a/docs/assets/javascript/elements/uxdot-pattern-ssr-controller-server.ts b/uxdot/uxdot-pattern-ssr-controller-server.ts
similarity index 96%
rename from docs/assets/javascript/elements/uxdot-pattern-ssr-controller-server.ts
rename to uxdot/uxdot-pattern-ssr-controller-server.ts
index 49bdd75d09..6726d3cda6 100644
--- a/docs/assets/javascript/elements/uxdot-pattern-ssr-controller-server.ts
+++ b/uxdot/uxdot-pattern-ssr-controller-server.ts
@@ -108,11 +108,10 @@ export class UxdotPatternSSRControllerServer extends RHDSSSRController {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     delete globalThis.document;
-    const hl = await import('@11ty/eleventy-plugin-syntaxhighlight/src/HighlightPairedShortcode.js')
-        .then(m => m.default);
+    const { pairedShortcode } = await import('@11ty/eleventy-plugin-syntaxhighlight');
     // END workaround
     globalThis.document = shim;
-    return hl;
+    return pairedShortcode;
   }
 
   async ssrSetup() {
diff --git a/docs/assets/javascript/elements/uxdot-pattern-ssr-controller.ts b/uxdot/uxdot-pattern-ssr-controller.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-pattern-ssr-controller.ts
rename to uxdot/uxdot-pattern-ssr-controller.ts
diff --git a/docs/assets/javascript/elements/uxdot-pattern.css b/uxdot/uxdot-pattern.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-pattern.css
rename to uxdot/uxdot-pattern.css
diff --git a/docs/assets/javascript/elements/uxdot-pattern.ts b/uxdot/uxdot-pattern.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-pattern.ts
rename to uxdot/uxdot-pattern.ts
diff --git a/docs/assets/javascript/elements/uxdot-repo-status-checklist.ts b/uxdot/uxdot-repo-status-checklist.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-repo-status-checklist.ts
rename to uxdot/uxdot-repo-status-checklist.ts
diff --git a/docs/assets/javascript/elements/uxdot-repo-status-list.css b/uxdot/uxdot-repo-status-list.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-repo-status-list.css
rename to uxdot/uxdot-repo-status-list.css
diff --git a/docs/assets/javascript/elements/uxdot-repo-status-list.ts b/uxdot/uxdot-repo-status-list.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-repo-status-list.ts
rename to uxdot/uxdot-repo-status-list.ts
diff --git a/docs/assets/javascript/elements/uxdot-repo-status-table.css b/uxdot/uxdot-repo-status-table.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-repo-status-table.css
rename to uxdot/uxdot-repo-status-table.css
diff --git a/docs/assets/javascript/elements/uxdot-repo-status-table.ts b/uxdot/uxdot-repo-status-table.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-repo-status-table.ts
rename to uxdot/uxdot-repo-status-table.ts
diff --git a/docs/assets/javascript/elements/uxdot-repo.ts b/uxdot/uxdot-repo.ts
similarity index 93%
rename from docs/assets/javascript/elements/uxdot-repo.ts
rename to uxdot/uxdot-repo.ts
index 2e41d43a99..03af51a3b1 100644
--- a/docs/assets/javascript/elements/uxdot-repo.ts
+++ b/uxdot/uxdot-repo.ts
@@ -65,13 +65,9 @@ export interface ComputedTagStatus extends Omit<TagStatus, 'libraries'> {
   libraries: ComputedLibraryStatus[];
 }
 
-const repoStatus: TagStatus[] = isServer ?
-    await import('node:fs/promises')
-        .then(({ readFile }) => readFile(new URL(`../../../_data/repoStatus.yaml`, import.meta.url), 'utf8'))
-        .then(text => import('js-yaml')
-            .then(yaml => yaml.default.load(text)))
-  : await fetch('/assets/javascript/repoStatus.json')
-      .then(x => x.json());
+const repoStatus: TagStatus[] =
+    isServer ? await import('./repoStatus.js').then(x => x.default)
+  : await fetch('/assets/javascript/repoStatus.json').then(x => x.json());
 
 export class UxdotRepoElement extends LitElement {
   private static libraries: Record<LibraryKey, string> = {
diff --git a/docs/assets/javascript/elements/uxdot-search.css b/uxdot/uxdot-search.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-search.css
rename to uxdot/uxdot-search.css
diff --git a/docs/assets/javascript/elements/uxdot-search.ts b/uxdot/uxdot-search.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-search.ts
rename to uxdot/uxdot-search.ts
diff --git a/docs/assets/javascript/elements/uxdot-sidenav-dropdown-menu-item.css b/uxdot/uxdot-sidenav-dropdown-menu-item.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-sidenav-dropdown-menu-item.css
rename to uxdot/uxdot-sidenav-dropdown-menu-item.css
diff --git a/docs/assets/javascript/elements/uxdot-sidenav-dropdown-menu.css b/uxdot/uxdot-sidenav-dropdown-menu.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-sidenav-dropdown-menu.css
rename to uxdot/uxdot-sidenav-dropdown-menu.css
diff --git a/docs/assets/javascript/elements/uxdot-sidenav-dropdown.css b/uxdot/uxdot-sidenav-dropdown.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-sidenav-dropdown.css
rename to uxdot/uxdot-sidenav-dropdown.css
diff --git a/docs/assets/javascript/elements/uxdot-sidenav-item.css b/uxdot/uxdot-sidenav-item.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-sidenav-item.css
rename to uxdot/uxdot-sidenav-item.css
diff --git a/docs/assets/javascript/elements/uxdot-sidenav-lightdom.css b/uxdot/uxdot-sidenav-lightdom.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-sidenav-lightdom.css
rename to uxdot/uxdot-sidenav-lightdom.css
diff --git a/docs/assets/javascript/elements/uxdot-sidenav.css b/uxdot/uxdot-sidenav.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-sidenav.css
rename to uxdot/uxdot-sidenav.css
diff --git a/docs/assets/javascript/elements/uxdot-sidenav.ts b/uxdot/uxdot-sidenav.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-sidenav.ts
rename to uxdot/uxdot-sidenav.ts
diff --git a/docs/assets/javascript/elements/uxdot-spacer-tokens-table.css b/uxdot/uxdot-spacer-tokens-table.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-spacer-tokens-table.css
rename to uxdot/uxdot-spacer-tokens-table.css
diff --git a/docs/assets/javascript/elements/uxdot-spacer-tokens-table.ts b/uxdot/uxdot-spacer-tokens-table.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-spacer-tokens-table.ts
rename to uxdot/uxdot-spacer-tokens-table.ts
diff --git a/docs/assets/javascript/elements/uxdot-toc-lightdom.css b/uxdot/uxdot-toc-lightdom.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-toc-lightdom.css
rename to uxdot/uxdot-toc-lightdom.css
diff --git a/docs/assets/javascript/elements/uxdot-toc.css b/uxdot/uxdot-toc.css
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-toc.css
rename to uxdot/uxdot-toc.css
diff --git a/docs/assets/javascript/elements/uxdot-toc.ts b/uxdot/uxdot-toc.ts
similarity index 100%
rename from docs/assets/javascript/elements/uxdot-toc.ts
rename to uxdot/uxdot-toc.ts