From f6a70d1110cd51b6eee3499720f3af89028f7587 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 10 Jun 2025 11:21:21 -0400
Subject: [PATCH] untying the knots

---
 cspell.json                                   |   7 +
 packages/webawesome/docs/.eleventy.js         |  14 +-
 .../webawesome/docs/_data/componentList.js    |  78 ---
 packages/webawesome/docs/_data/components.js  |   3 -
 packages/webawesome/docs/_data/hueRanges.js   |   1 -
 packages/webawesome/docs/_data/hues.json      |   1 -
 packages/webawesome/docs/_data/palettes.js    |   1 -
 packages/webawesome/docs/_data/themes.js      |  62 ---
 packages/webawesome/docs/_includes/base.njk   |   2 -
 .../webawesome/docs/_includes/breadcrumbs.njk |  13 -
 .../docs/_includes/color-scheme-selector.njk  |   1 -
 .../docs/_includes/contrast-table.njk         |  52 --
 .../docs/_includes/grouped-pages.njk          |  18 -
 packages/webawesome/docs/_includes/head.njk   |  20 +-
 .../_includes/import-stylesheet-code.md.njk   |  18 -
 .../webawesome/docs/_includes/page-card.njk   |  13 -
 .../webawesome/docs/_includes/page-demo.njk   |  25 -
 .../docs/_includes/preset-theme-selector.njk  |   9 +-
 packages/webawesome/docs/_includes/status.njk |  20 -
 .../docs/_includes/svgs/palette.njk           |  20 -
 .../docs/_includes/svgs/theme-color.njk       |  24 -
 .../docs/_includes/svgs/theme-typography.njk  |  16 -
 .../webawesome/docs/_includes/svgs/theme.njk  |  29 -
 .../docs/_includes/theme-showcase.njk         | 347 ------------
 packages/webawesome/docs/_layouts/block.njk   |  38 --
 .../webawesome/docs/_layouts/component.njk    |   2 +-
 packages/webawesome/docs/_layouts/element.njk |  32 --
 .../webawesome/docs/_layouts/overview.njk     |  26 -
 packages/webawesome/docs/_layouts/palette.njk | 313 -----------
 .../webawesome/docs/_layouts/patterns.njk     |   1 -
 packages/webawesome/docs/_layouts/theme.njk   | 185 -------
 packages/webawesome/docs/_layouts/utility.njk |  19 -
 packages/webawesome/docs/_utils/filters.js    | 410 --------------
 .../docs/assets/components/scoped.js          | 172 ------
 .../webawesome/docs/assets/data/colors.js     |  47 --
 packages/webawesome/docs/assets/data/fonts.js |  65 ---
 packages/webawesome/docs/assets/data/icons.js |   7 -
 packages/webawesome/docs/assets/data/index.js |   6 -
 .../docs/assets/data/palettes.js.njk          |  57 --
 .../webawesome/docs/assets/data/themes.js.njk |  27 -
 .../webawesome/docs/assets/data/theming.js    | 100 ----
 .../docs/assets/examples/page/demo-1.html     | 289 ----------
 .../docs/assets/examples/page/demo-2.html     | 484 -----------------
 .../webawesome/docs/assets/scripts/filter.js  |  35 --
 packages/webawesome/docs/assets/scripts/my.js | 172 ------
 .../assets/scripts/preset-theme-picker.js     |  52 --
 .../docs/assets/scripts/prism-downloaded.js   |   9 -
 .../webawesome/docs/assets/scripts/prism.js   |   8 -
 .../docs/assets/scripts/sidebar-tweaks.js     | 122 -----
 .../docs/assets/scripts/sync-iframe-height.js |  37 --
 .../docs/assets/scripts/theme-picker.js       | 139 -----
 .../webawesome/docs/assets/scripts/tweak.js   |   6 -
 .../docs/assets/scripts/tweak/code.js         |  91 ----
 .../docs/assets/scripts/tweak/util.js         |  36 --
 .../docs/assets/scripts/util/array.js         |  17 -
 .../docs/assets/scripts/util/deep.js          | 180 -------
 .../docs/assets/scripts/util/string.js        |  42 --
 .../dom-change.js => view-transitions.js}     |  16 +-
 .../assets/vue/components/color-select.js     |  78 ---
 .../assets/vue/components/editable-text.js    |  90 ----
 .../docs/assets/vue/components/fonts-card.js  | 132 -----
 .../docs/assets/vue/components/icons-card.js  | 176 -------
 .../docs/assets/vue/components/index.js       |  13 -
 .../docs/assets/vue/components/info-tip.js    |  39 --
 .../docs/assets/vue/components/page-card.js   |  83 ---
 .../assets/vue/components/palette-card.js     |  63 ---
 .../docs/assets/vue/components/panel.css      | 167 ------
 .../docs/assets/vue/components/scrollable.css |  89 ----
 .../assets/vue/components/swatch-select.js    |  54 --
 .../docs/assets/vue/components/theme-card.js  | 119 -----
 .../vue/components/ui-panel-container.js      | 120 -----
 .../docs/assets/vue/components/ui-panel.js    |  73 ---
 .../assets/vue/components/ui-scrollable.js    |  77 ---
 .../docs/assets/vue/components/ui-slider.css  |  46 --
 .../docs/assets/vue/components/ui-slider.js   |  88 ----
 .../docs/assets/vue/directives/content.js     |  22 -
 .../docs/assets/vue/mixins/input.js           |  32 --
 .../docs/assets/vue/mixins/saved.js           | 110 ----
 .../docs/docs/components/animated-image.md    |   1 -
 .../docs/docs/components/animation.md         |  15 +-
 .../webawesome/docs/docs/components/avatar.md |   1 -
 .../webawesome/docs/docs/components/badge.md  |   1 -
 .../docs/docs/components/breadcrumb-item.md   |   2 -
 .../docs/docs/components/breadcrumb.md        |   1 -
 .../docs/docs/components/button-group.md      |   1 -
 .../webawesome/docs/docs/components/button.md |   2 -
 .../docs/docs/components/callout.md           |   3 +-
 .../webawesome/docs/docs/components/card.md   |  43 +-
 .../docs/docs/components/carousel-item.md     |   2 -
 .../docs/docs/components/carousel.md          |   9 +-
 .../docs/docs/components/checkbox.md          |   2 -
 .../docs/docs/components/color-picker.md      |   2 -
 .../docs/docs/components/comparison.md        |   1 -
 .../docs/docs/components/components.json      |  11 -
 .../docs/docs/components/copy-button.md       |   5 +-
 .../docs/docs/components/details.md           |  49 +-
 .../webawesome/docs/docs/components/dialog.md |  21 +-
 .../docs/docs/components/divider.md           |   1 -
 .../webawesome/docs/docs/components/drawer.md |  25 +-
 .../docs/docs/components/dropdown.md          |   1 -
 .../docs/docs/components/format-bytes.md      |   1 -
 .../docs/docs/components/format-date.md       |   1 -
 .../docs/docs/components/format-number.md     |   1 -
 .../webawesome/docs/docs/components/icon.md   |  72 +--
 .../docs/docs/components/include.md           |   1 -
 .../webawesome/docs/docs/components/index.md  |   5 +
 .../webawesome/docs/docs/components/index.njk |  11 -
 .../webawesome/docs/docs/components/input.md  |   7 +-
 .../docs/docs/components/mutation-observer.md |   1 -
 .../webawesome/docs/docs/components/option.md |   2 -
 .../webawesome/docs/docs/components/popup.md  |  32 +-
 .../docs/docs/components/progress-bar.md      |   3 +-
 .../docs/docs/components/progress-ring.md     |   1 -
 .../docs/docs/components/qr-code.md           |   1 -
 .../docs/docs/components/radio-group.md       |   3 +-
 .../webawesome/docs/docs/components/radio.md  |   4 -
 .../webawesome/docs/docs/components/rating.md |  13 +-
 .../docs/docs/components/relative-time.md     |   1 -
 .../docs/docs/components/resize-observer.md   |   1 -
 .../docs/docs/components/scroller.md          | 103 +++-
 .../webawesome/docs/docs/components/select.md |  85 ++-
 .../docs/docs/components/skeleton.md          |   1 -
 .../webawesome/docs/docs/components/slider.md |   4 +-
 .../docs/docs/components/spinner.md           |   2 -
 .../docs/docs/components/split-panel.md       |   1 -
 .../webawesome/docs/docs/components/switch.md |   2 -
 .../docs/docs/components/tab-group.md         |   8 +-
 .../docs/docs/components/tab-panel.md         |   2 -
 .../webawesome/docs/docs/components/tab.md    |   2 -
 .../webawesome/docs/docs/components/tag.md    |  70 +--
 .../docs/docs/components/textarea.md          |   2 -
 .../docs/docs/components/tooltip.md           |   6 +-
 .../docs/docs/components/tree-item.md         |   1 -
 .../webawesome/docs/docs/components/tree.md   |   1 -
 .../webawesome/docs/docs/docs.11tydata.js     | 108 ----
 .../webawesome/docs/docs/experimental/ssr.md  |  18 +-
 packages/webawesome/docs/docs/layout.njk      |   5 +-
 .../webawesome/docs/docs/palettes/bright.md   |   3 -
 .../webawesome/docs/docs/palettes/default.md  |   5 -
 .../webawesome/docs/docs/palettes/index.njk   |  10 -
 .../docs/docs/palettes/palettes.json          |  10 -
 .../webawesome/docs/docs/palettes/shoelace.md |   4 -
 .../webawesome/docs/docs/palettes/tweak.css   | 172 ------
 .../webawesome/docs/docs/palettes/tweak.js    | 498 ------------------
 .../docs/docs/resources/visual-tests.md       |   6 +-
 .../webawesome/docs/docs/themes/app/index.js  |   0
 .../webawesome/docs/docs/themes/awesome.md    |   9 +-
 .../webawesome/docs/docs/themes/creating.md   |  60 ---
 .../webawesome/docs/docs/themes/default.md    |   8 +-
 .../webawesome/docs/docs/themes/demo/index.js |  69 ---
 .../docs/docs/themes/demo/index.njk           |  47 --
 .../webawesome/docs/docs/themes/edit/index.js | 361 -------------
 .../docs/docs/themes/edit/index.njk           | 243 ---------
 .../docs/docs/themes/edit/style.css           | 240 ---------
 .../webawesome/docs/docs/themes/index.njk     |  58 --
 .../docs/docs/themes/preview/app.css          |  39 --
 .../docs/docs/themes/preview/app.njk          |  20 -
 .../docs/docs/themes/preview/content.css      | 342 ------------
 .../docs/docs/themes/preview/content.njk      | 147 ------
 .../docs/docs/themes/preview/preview.js       | 276 ----------
 .../webawesome/docs/docs/themes/remix.css     |  74 ---
 .../webawesome/docs/docs/themes/shoelace.md   |   4 +-
 .../webawesome/docs/docs/themes/showcase.css  |  67 ---
 .../webawesome/docs/docs/themes/themes.json   |  10 -
 packages/webawesome/docs/docs/tokens/index.md |   7 +
 .../webawesome/docs/docs/tokens/index.njk     |   7 -
 .../webawesome/docs/docs/tokens/tokens.json   |   7 -
 .../docs/docs/utilities/align-items.md        |   6 +-
 .../webawesome/docs/docs/utilities/cluster.md |   6 +-
 .../webawesome/docs/docs/utilities/color.md   |  13 +-
 .../webawesome/docs/docs/utilities/flank.md   |  36 +-
 .../webawesome/docs/docs/utilities/fouce.md   |   5 +-
 .../webawesome/docs/docs/utilities/frame.md   |   7 +-
 .../webawesome/docs/docs/utilities/gap.md     |   4 +-
 .../webawesome/docs/docs/utilities/grid.md    |   5 +-
 .../docs/utilities/{index.njk => index.md}    |   9 +-
 .../webawesome/docs/docs/utilities/native.md  | 118 +++--
 .../docs/docs/utilities/rounding.md           |   5 +-
 .../webawesome/docs/docs/utilities/split.md   |  12 +-
 .../webawesome/docs/docs/utilities/stack.md   |  17 +-
 .../webawesome/docs/docs/utilities/text.md    |  33 +-
 .../docs/docs/utilities/utilities.json        |   4 -
 .../docs/docs/utilities/visually-hidden.md    |  67 ++-
 packages/webawesome/package.json              |   4 +-
 .../scripts/color-palette-contrast-test.js    |  71 ---
 .../animated-image/animated-image.test.ts     |   2 +-
 .../src/components/carousel/carousel.test.ts  |   2 +-
 .../src/components/checkbox/checkbox.test.ts  |   2 +-
 .../color-picker/color-picker.test.ts         |   2 +-
 .../src/components/dialog/dialog.test.ts      |   2 +-
 .../src/components/drawer/drawer.test.ts      |   2 +-
 .../src/components/input/input.test.ts        |   2 +-
 .../src/components/rating/rating.test.ts      |   2 +-
 .../src/components/select/select.test.ts      |   2 +-
 .../src/components/slider/slider.test.ts      |   2 +-
 .../split-panel/split-panel.test.ts           |   2 +-
 .../components/tab-group/tab-group.test.ts    |   2 +-
 .../src/components/tree/tree.test.ts          |   2 +-
 .../src/internal/active-elements.ts           |   2 +-
 packages/webawesome/src/internal/form.test.ts |   2 +-
 .../internal/test/form-control-base-tests.ts  |   2 +-
 .../{test.ts => test/pointer-utilities.ts}    |   0
 .../styles/color/scripts/palettes-analyzed.js |  70 ---
 .../src/styles/color/scripts/palettes.js      |  82 ---
 .../src/styles/color/scripts/postprocess.js   | 162 ------
 .../src/styles/color/scripts/ranges.js        | 207 --------
 .../src/styles/color/scripts/util.js          | 106 ----
 .../src/utilities/animation-registry.ts       |  74 ---
 208 files changed, 585 insertions(+), 9861 deletions(-)
 delete mode 100644 packages/webawesome/docs/_data/componentList.js
 delete mode 100644 packages/webawesome/docs/_data/components.js
 delete mode 100644 packages/webawesome/docs/_data/hueRanges.js
 delete mode 100644 packages/webawesome/docs/_data/hues.json
 delete mode 100644 packages/webawesome/docs/_data/palettes.js
 delete mode 100644 packages/webawesome/docs/_data/themes.js
 delete mode 100644 packages/webawesome/docs/_includes/breadcrumbs.njk
 delete mode 100644 packages/webawesome/docs/_includes/contrast-table.njk
 delete mode 100644 packages/webawesome/docs/_includes/grouped-pages.njk
 delete mode 100644 packages/webawesome/docs/_includes/import-stylesheet-code.md.njk
 delete mode 100644 packages/webawesome/docs/_includes/page-card.njk
 delete mode 100644 packages/webawesome/docs/_includes/page-demo.njk
 delete mode 100644 packages/webawesome/docs/_includes/status.njk
 delete mode 100644 packages/webawesome/docs/_includes/svgs/palette.njk
 delete mode 100644 packages/webawesome/docs/_includes/svgs/theme-color.njk
 delete mode 100644 packages/webawesome/docs/_includes/svgs/theme-typography.njk
 delete mode 100644 packages/webawesome/docs/_includes/svgs/theme.njk
 delete mode 100644 packages/webawesome/docs/_includes/theme-showcase.njk
 delete mode 100644 packages/webawesome/docs/_layouts/block.njk
 delete mode 100644 packages/webawesome/docs/_layouts/element.njk
 delete mode 100644 packages/webawesome/docs/_layouts/overview.njk
 delete mode 100644 packages/webawesome/docs/_layouts/palette.njk
 delete mode 100644 packages/webawesome/docs/_layouts/patterns.njk
 delete mode 100644 packages/webawesome/docs/_layouts/theme.njk
 delete mode 100644 packages/webawesome/docs/_layouts/utility.njk
 delete mode 100644 packages/webawesome/docs/_utils/filters.js
 delete mode 100644 packages/webawesome/docs/assets/components/scoped.js
 delete mode 100644 packages/webawesome/docs/assets/data/colors.js
 delete mode 100644 packages/webawesome/docs/assets/data/fonts.js
 delete mode 100644 packages/webawesome/docs/assets/data/icons.js
 delete mode 100644 packages/webawesome/docs/assets/data/index.js
 delete mode 100644 packages/webawesome/docs/assets/data/palettes.js.njk
 delete mode 100644 packages/webawesome/docs/assets/data/themes.js.njk
 delete mode 100644 packages/webawesome/docs/assets/data/theming.js
 delete mode 100644 packages/webawesome/docs/assets/examples/page/demo-1.html
 delete mode 100644 packages/webawesome/docs/assets/examples/page/demo-2.html
 delete mode 100644 packages/webawesome/docs/assets/scripts/filter.js
 delete mode 100644 packages/webawesome/docs/assets/scripts/my.js
 delete mode 100644 packages/webawesome/docs/assets/scripts/preset-theme-picker.js
 delete mode 100644 packages/webawesome/docs/assets/scripts/prism-downloaded.js
 delete mode 100644 packages/webawesome/docs/assets/scripts/prism.js
 delete mode 100644 packages/webawesome/docs/assets/scripts/sidebar-tweaks.js
 delete mode 100644 packages/webawesome/docs/assets/scripts/sync-iframe-height.js
 delete mode 100644 packages/webawesome/docs/assets/scripts/theme-picker.js
 delete mode 100644 packages/webawesome/docs/assets/scripts/tweak.js
 delete mode 100644 packages/webawesome/docs/assets/scripts/tweak/code.js
 delete mode 100644 packages/webawesome/docs/assets/scripts/tweak/util.js
 delete mode 100644 packages/webawesome/docs/assets/scripts/util/array.js
 delete mode 100644 packages/webawesome/docs/assets/scripts/util/deep.js
 delete mode 100644 packages/webawesome/docs/assets/scripts/util/string.js
 rename packages/webawesome/docs/assets/scripts/{util/dom-change.js => view-transitions.js} (52%)
 delete mode 100644 packages/webawesome/docs/assets/vue/components/color-select.js
 delete mode 100644 packages/webawesome/docs/assets/vue/components/editable-text.js
 delete mode 100644 packages/webawesome/docs/assets/vue/components/fonts-card.js
 delete mode 100644 packages/webawesome/docs/assets/vue/components/icons-card.js
 delete mode 100644 packages/webawesome/docs/assets/vue/components/index.js
 delete mode 100644 packages/webawesome/docs/assets/vue/components/info-tip.js
 delete mode 100644 packages/webawesome/docs/assets/vue/components/page-card.js
 delete mode 100644 packages/webawesome/docs/assets/vue/components/palette-card.js
 delete mode 100644 packages/webawesome/docs/assets/vue/components/panel.css
 delete mode 100644 packages/webawesome/docs/assets/vue/components/scrollable.css
 delete mode 100644 packages/webawesome/docs/assets/vue/components/swatch-select.js
 delete mode 100644 packages/webawesome/docs/assets/vue/components/theme-card.js
 delete mode 100644 packages/webawesome/docs/assets/vue/components/ui-panel-container.js
 delete mode 100644 packages/webawesome/docs/assets/vue/components/ui-panel.js
 delete mode 100644 packages/webawesome/docs/assets/vue/components/ui-scrollable.js
 delete mode 100644 packages/webawesome/docs/assets/vue/components/ui-slider.css
 delete mode 100644 packages/webawesome/docs/assets/vue/components/ui-slider.js
 delete mode 100644 packages/webawesome/docs/assets/vue/directives/content.js
 delete mode 100644 packages/webawesome/docs/assets/vue/mixins/input.js
 delete mode 100644 packages/webawesome/docs/assets/vue/mixins/saved.js
 delete mode 100644 packages/webawesome/docs/docs/components/components.json
 create mode 100644 packages/webawesome/docs/docs/components/index.md
 delete mode 100644 packages/webawesome/docs/docs/components/index.njk
 delete mode 100644 packages/webawesome/docs/docs/docs.11tydata.js
 delete mode 100644 packages/webawesome/docs/docs/palettes/bright.md
 delete mode 100644 packages/webawesome/docs/docs/palettes/default.md
 delete mode 100644 packages/webawesome/docs/docs/palettes/index.njk
 delete mode 100644 packages/webawesome/docs/docs/palettes/palettes.json
 delete mode 100644 packages/webawesome/docs/docs/palettes/shoelace.md
 delete mode 100644 packages/webawesome/docs/docs/palettes/tweak.css
 delete mode 100644 packages/webawesome/docs/docs/palettes/tweak.js
 delete mode 100644 packages/webawesome/docs/docs/themes/app/index.js
 delete mode 100644 packages/webawesome/docs/docs/themes/creating.md
 delete mode 100644 packages/webawesome/docs/docs/themes/demo/index.js
 delete mode 100644 packages/webawesome/docs/docs/themes/demo/index.njk
 delete mode 100644 packages/webawesome/docs/docs/themes/edit/index.js
 delete mode 100644 packages/webawesome/docs/docs/themes/edit/index.njk
 delete mode 100644 packages/webawesome/docs/docs/themes/edit/style.css
 delete mode 100644 packages/webawesome/docs/docs/themes/index.njk
 delete mode 100644 packages/webawesome/docs/docs/themes/preview/app.css
 delete mode 100644 packages/webawesome/docs/docs/themes/preview/app.njk
 delete mode 100644 packages/webawesome/docs/docs/themes/preview/content.css
 delete mode 100644 packages/webawesome/docs/docs/themes/preview/content.njk
 delete mode 100644 packages/webawesome/docs/docs/themes/preview/preview.js
 delete mode 100644 packages/webawesome/docs/docs/themes/remix.css
 delete mode 100644 packages/webawesome/docs/docs/themes/showcase.css
 delete mode 100644 packages/webawesome/docs/docs/themes/themes.json
 create mode 100644 packages/webawesome/docs/docs/tokens/index.md
 delete mode 100644 packages/webawesome/docs/docs/tokens/index.njk
 delete mode 100644 packages/webawesome/docs/docs/tokens/tokens.json
 rename packages/webawesome/docs/docs/utilities/{index.njk => index.md} (68%)
 delete mode 100644 packages/webawesome/docs/docs/utilities/utilities.json
 delete mode 100644 packages/webawesome/scripts/color-palette-contrast-test.js
 rename packages/webawesome/src/internal/{test.ts => test/pointer-utilities.ts} (100%)
 delete mode 100644 packages/webawesome/src/styles/color/scripts/palettes-analyzed.js
 delete mode 100644 packages/webawesome/src/styles/color/scripts/palettes.js
 delete mode 100644 packages/webawesome/src/styles/color/scripts/postprocess.js
 delete mode 100644 packages/webawesome/src/styles/color/scripts/ranges.js
 delete mode 100644 packages/webawesome/src/styles/color/scripts/util.js
 delete mode 100644 packages/webawesome/src/utilities/animation-registry.ts

diff --git a/cspell.json b/cspell.json
index f6f397bb8..07b88cc2b 100644
--- a/cspell.json
+++ b/cspell.json
@@ -8,8 +8,10 @@
     "APG",
     "apos",
     "atrule",
+    "autocapitalize",
     "autocorrect",
     "autofix",
+    "autofocus",
     "autoload",
     "autoloader",
     "autoloading",
@@ -50,7 +52,9 @@
     "dropdowns",
     "easings",
     "ecommerce",
+    "elif",
     "endfor",
+    "endmarkdown",
     "endraw",
     "endregion",
     "enterkeyhint",
@@ -60,6 +64,7 @@
     "esbuild",
     "exportmaps",
     "exportparts",
+    "fetchpriority",
     "fieldsets",
     "focusin",
     "focusout",
@@ -88,6 +93,7 @@
     "inputmode",
     "ionicon",
     "ionicons",
+    "jank",
     "jsDelivr",
     "jsfiddle",
     "keydown",
@@ -123,6 +129,7 @@
     "noindex",
     "noopener",
     "noreferrer",
+    "noscript",
     "novalidate",
     "Numberish",
     "nums",
diff --git a/packages/webawesome/docs/.eleventy.js b/packages/webawesome/docs/.eleventy.js
index 48b2361c1..359d125db 100644
--- a/packages/webawesome/docs/.eleventy.js
+++ b/packages/webawesome/docs/.eleventy.js
@@ -1,5 +1,6 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
+import { parse } from 'path';
 import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
 import { codeExamplesPlugin } from './_utils/code-examples.js';
 import { copyCodePlugin } from './_utils/copy-code.js';
@@ -10,8 +11,6 @@ import { markdown } from './_utils/markdown.js';
 // import litPlugin from '@lit-labs/eleventy-plugin-lit';
 import { readFile } from 'fs/promises';
 import nunjucks from 'nunjucks';
-// import componentList from './_data/componentList.js';
-import * as filters from './_utils/filters.js';
 import { outlinePlugin } from './_utils/outline.js';
 import { replaceTextPlugin } from './_utils/replace-text.js';
 import { searchPlugin } from './_utils/search.js';
@@ -57,10 +56,13 @@ export default async function (eleventyConfig) {
   // Template filters - {{ content | filter }}
   eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
   eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
-
-  for (let name in filters) {
-    eleventyConfig.addFilter(name, filters[name]);
-  }
+  eleventyConfig.addFilter('stripExtension', string => parse(string).name);
+  eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
+  // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
+  // With Prettier 3, this means a leading pipe will exist be present when the line wraps.
+  eleventyConfig.addFilter('trimPipes', content => {
+    return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
+  });
 
   // Shortcodes - {% shortCode arg1, arg2 %}
   eleventyConfig.addShortcode('cdnUrl', location => {
diff --git a/packages/webawesome/docs/_data/componentList.js b/packages/webawesome/docs/_data/componentList.js
deleted file mode 100644
index b212e5738..000000000
--- a/packages/webawesome/docs/_data/componentList.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * @module components Fetches components from custom-elements.json and exposes them in a saner format.
- */
-import { readFileSync } from 'fs';
-import { dirname, join, resolve } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const customElementsJSON = process.env.DIST_DIR
-  ? join(process.env.DIST_DIR, 'custom-elements.json')
-  : resolve(__dirname, '../../dist/custom-elements.json');
-
-const manifest = JSON.parse(readFileSync(customElementsJSON), 'utf-8');
-
-const components = manifest.modules.flatMap(module => {
-  return module.declarations
-    .filter(c => c?.customElement)
-    .map(declaration => {
-      // Generate the dist path based on the src path and attach it to the component
-      declaration.path = module.path.replace(/^src\//, 'dist/').replace(/\.ts$/, '.js');
-
-      // Remove private members and those that lack a description
-      const members = declaration.members?.filter(member => member.description && member.privacy !== 'private');
-
-      const methods = members?.filter(prop => prop.kind === 'method' && prop.privacy !== 'private');
-      const attributes = declaration.attributes ?? [];
-      const properties = members?.filter(prop => {
-        // Look for a corresponding attribute
-        const attribute = attributes?.find(attr => attr.fieldName === prop.name);
-        if (attribute) {
-          prop.attribute = attribute.name || attribute.fieldName;
-        }
-
-        return prop.kind === 'field' && prop.privacy !== 'private';
-      });
-
-      return {
-        ...declaration,
-        slug: declaration.tagName.replace(/^wa-/, ''),
-        methods,
-        attributes,
-        properties,
-      };
-    });
-});
-
-// Build dependency graphs
-components.forEach(component => {
-  const dependencies = [];
-
-  // Recursively fetch sub-dependencies
-  function getDependencies(tag) {
-    const cmp = components.find(c => c.tagName === tag);
-    if (!cmp || !Array.isArray(component.dependencies)) {
-      return;
-    }
-
-    cmp.dependencies?.forEach(dependentTag => {
-      if (!dependencies.includes(dependentTag)) {
-        dependencies.push(dependentTag);
-      }
-      getDependencies(dependentTag);
-    });
-  }
-
-  getDependencies(component.tagName);
-
-  component.dependencies = dependencies.sort();
-});
-
-// Sort by name
-components.sort((a, b) => {
-  if (a.name < b.name) return -1;
-  if (a.name > b.name) return 1;
-  return 0;
-});
-
-export default components;
diff --git a/packages/webawesome/docs/_data/components.js b/packages/webawesome/docs/_data/components.js
deleted file mode 100644
index 1dab4c111..000000000
--- a/packages/webawesome/docs/_data/components.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import componentList from './componentList.js';
-
-export default Object.fromEntries(componentList.map(component => [component.slug, component]));
diff --git a/packages/webawesome/docs/_data/hueRanges.js b/packages/webawesome/docs/_data/hueRanges.js
deleted file mode 100644
index 63d7400a6..000000000
--- a/packages/webawesome/docs/_data/hueRanges.js
+++ /dev/null
@@ -1 +0,0 @@
-export { hueRanges as default } from '../assets/data/index.js';
diff --git a/packages/webawesome/docs/_data/hues.json b/packages/webawesome/docs/_data/hues.json
deleted file mode 100644
index 2e68ebe4b..000000000
--- a/packages/webawesome/docs/_data/hues.json
+++ /dev/null
@@ -1 +0,0 @@
-["red", "orange", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"]
diff --git a/packages/webawesome/docs/_data/palettes.js b/packages/webawesome/docs/_data/palettes.js
deleted file mode 100644
index 3ce705beb..000000000
--- a/packages/webawesome/docs/_data/palettes.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as default } from '../../src/styles/color/scripts/palettes-analyzed.js';
diff --git a/packages/webawesome/docs/_data/themes.js b/packages/webawesome/docs/_data/themes.js
deleted file mode 100644
index 52ea04b20..000000000
--- a/packages/webawesome/docs/_data/themes.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-// import { inlined } from '../../dist/components/icon/library.wa.js';
-const distDirectory = process.env.UNBUNDLED_DIST_DIRECTORY || path.join(path.resolve(), 'dist');
-
-const THEME_DIR = path.join(distDirectory, 'styles', 'themes');
-
-const themeFiles = fs.readdirSync(THEME_DIR).filter(file => file.endsWith('.css') && !file.endsWith('base.css'));
-
-const declarationRegex = /^\s*--wa-(?<property>[a-z-]+)?:\s*(?<value>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
-const importRegex = /^\s*@import\s+url\(['"](?<path>.+?)['"]\);$/gm;
-const themes = {};
-
-for (const file of themeFiles) {
-  const id = file.replace('.css', '');
-  const { imports, declarations } = readCSSFile(file);
-  let theme = { palette: 'default', declarations, imports };
-
-  for (const url of imports) {
-    if (url.endsWith('/color.css')) {
-      // Color settings
-      const color = readCSSFile(url);
-      for (const colorUrl of color.imports) {
-        if (colorUrl.startsWith('../../color/')) {
-          // Color palette
-          theme.palette = getFileSlug(colorUrl);
-        } else if (colorUrl.startsWith('../../brand/')) {
-          // Brand color
-          theme.brand = getFileSlug(colorUrl);
-        }
-      }
-    } else if (url.endsWith('/dimension.css')) {
-      theme.dimension = true;
-    }
-  }
-
-  let icon = {};
-  icon.family = theme.declarations['icon-family'] ?? theme.default?.iconFamily ?? 'classic';
-  icon.variant = theme.declarations['icon-variant'] ?? theme.default?.iconVariant ?? 'solid';
-  theme.icons = icon;
-
-  theme.rounding = Number(theme.declarations['border-radius-scale'] ?? theme.default?.rounding ?? 1);
-  theme.spacing = Number(theme.declarations['space-scale'] ?? theme.default?.spacing ?? 1);
-  theme.borderWidth = Number(theme.declarations['border-width-scale'] ?? theme.default?.borderWidth ?? 1);
-
-  themes[id] = theme;
-}
-
-export default themes;
-
-function readCSSFile(url) {
-  const contents = fs.readFileSync(path.join(THEME_DIR, url), 'utf8');
-  const imports = [...contents.matchAll(importRegex)].map(match => match.groups.path);
-  const declarations = Object.fromEntries(
-    [...contents.matchAll(declarationRegex)].map(match => [match.groups.property, match.groups.value]),
-  );
-  return { imports, declarations };
-}
-
-function getFileSlug(url) {
-  return url.split('/').pop().replace('.css', '');
-}
diff --git a/packages/webawesome/docs/_includes/base.njk b/packages/webawesome/docs/_includes/base.njk
index b826b1cf2..e9add0b30 100644
--- a/packages/webawesome/docs/_includes/base.njk
+++ b/packages/webawesome/docs/_includes/base.njk
@@ -10,7 +10,6 @@
     <script type="module" src="/assets/scripts/search.js"></script>
     <script type="module" src="/assets/scripts/outline.js"></script>
     {% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar.js"></script>{% endif %}
-    {% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar-tweaks.js"></script>{% endif %}
     <script defer data-domain="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>
 
     {# Docs styles #}
@@ -94,7 +93,6 @@
         <div id="flashes">{% server "flashes" %}</div>
 
         {% block header %}
-          {% include 'breadcrumbs.njk' %}
           <h1 class="title">{{ title }}</h1>
         {% endblock %}
 
diff --git a/packages/webawesome/docs/_includes/breadcrumbs.njk b/packages/webawesome/docs/_includes/breadcrumbs.njk
deleted file mode 100644
index 96d5563e8..000000000
--- a/packages/webawesome/docs/_includes/breadcrumbs.njk
+++ /dev/null
@@ -1,13 +0,0 @@
-{% set ancestors = page.url | ancestors %}
-
-{% if ancestors.length > 0 %}
-  <wa-breadcrumb id="docs-breadcrumbs">
-  {% for ancestor in ancestors %}
-    {% if ancestor.page.url != "/" %}
-    <wa-breadcrumb-item href="{{ ancestor.page.url }}">{{ ancestor.data.title }}</wa-breadcrumb-item>
-    {% endif %}
-  {% endfor %}
-  <wa-breadcrumb-item>{# Current page #}</wa-breadcrumb-item>
-  </wa-breadcrumb>
-  {% else %}
-{% endif %}
diff --git a/packages/webawesome/docs/_includes/color-scheme-selector.njk b/packages/webawesome/docs/_includes/color-scheme-selector.njk
index a320fc8d6..1cee3e2d3 100644
--- a/packages/webawesome/docs/_includes/color-scheme-selector.njk
+++ b/packages/webawesome/docs/_includes/color-scheme-selector.njk
@@ -1,4 +1,3 @@
-{# Color scheme selector #}
 <wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" pill title="Press \ to toggle">
   <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
   <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
diff --git a/packages/webawesome/docs/_includes/contrast-table.njk b/packages/webawesome/docs/_includes/contrast-table.njk
deleted file mode 100644
index 9ecdfb852..000000000
--- a/packages/webawesome/docs/_includes/contrast-table.njk
+++ /dev/null
@@ -1,52 +0,0 @@
-<table class="colors wa-palette-{{ paletteId }} contrast-table" data-min-contrast="{{ minContrast }}">
-  <thead>
-    <tr>
-      <th></th>
-      {% for tint_bg in tints -%}
-        {% for tint_fg in tints | reverse -%}
-          {% if (tint_fg - tint_bg) | abs == difference %}
-          <th>{{ tint_fg }} on {{ tint_bg }}</th>
-          {% endif %}
-        {%- endfor -%}
-      {%- endfor %}
-    </tr>
-  </thead>
-{% for hue in hues -%}
-<tr data-hue="{{ hue }}">
-  <th>{{ hue | capitalize }}</th>
-  {% for tint_bg in tints -%}
-    {% set color_bg = palettes[paletteId][hue][tint_bg] %}
-    {% for tint_fg in tints | reverse -%}
-      {% set color_fg = palettes[paletteId][hue][tint_fg] %}
-      {% if (tint_fg - tint_bg) | abs == difference %}
-      {% set contrast_wcag = '' %}
-      {% if color_fg and color_bg -%}
-        {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
-      {%- endif %}
-      <td v-for="contrast of [contrasts.{{ hue }}['{{ tint_bg }}']['{{ tint_fg }}']]"
-      data-tint-bg="{{ tint_bg }}" data-tint-fg="{{ tint_fg }}" data-original-contrast="{{ contrast_wcag }}">
-        <div v-content:number="contrast.value"
-        class="color swatch" :class="{
-          'value-up': contrast.value - contrast.original > 0.0001,
-          'value-down': contrast.original - contrast.value > 0.0001,
-          'contrast-fail': contrast.value < {{ minContrast }}
-        }"
-        style="--color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})"
-        :style="{
-          '--color': contrast.bgColor,
-          color: contrast.fgColor,
-        }"
-        >
-          {% if contrast_wcag %}
-          {{ contrast_wcag | number({maximumSignificantDigits: 2}) }}
-          {% else %}
-          {{ tint_fg }} on {{ tint_bg }}
-          {% endif %}
-        </div>
-      </td>
-      {% endif %}
-    {%- endfor -%}
-  {%- endfor -%}
-</tr>
-{%- endfor %}
-</table>
diff --git a/packages/webawesome/docs/_includes/grouped-pages.njk b/packages/webawesome/docs/_includes/grouped-pages.njk
deleted file mode 100644
index 2273f4c98..000000000
--- a/packages/webawesome/docs/_includes/grouped-pages.njk
+++ /dev/null
@@ -1,18 +0,0 @@
-{# Cards for pages listed by category #}
-
-<section id="grid" class="index-grid">
-{% set groupedPages = allPages | groupPages(categories, page) %}
-{% for category, pages in groupedPages -%}
-  {% if groupedPages.meta.groupCount > 1 and pages.length > 0 %}
-  <h2 class="index-category" id="{{ category | slugify }}">
-    {% if pages.meta.url %}<a href="{{ pages.meta.url }}">{{ pages.meta.title }}</a>
-    {% else %}
-    {{ pages.meta.title }}
-    {% endif %}
-  </h2>
-  {% endif %}
-  {%- for page in pages -%}
-      {% include "page-card.njk" %}
-  {%- endfor -%}
-{%- endfor -%}
-</section>
diff --git a/packages/webawesome/docs/_includes/head.njk b/packages/webawesome/docs/_includes/head.njk
index fa6afd1ea..d2c49ca1c 100644
--- a/packages/webawesome/docs/_includes/head.njk
+++ b/packages/webawesome/docs/_includes/head.njk
@@ -24,9 +24,6 @@
 <link rel="stylesheet" href="/assets/styles/hydration-errors.css">
 <link rel="preconnect" href="https://cdn.jsdelivr.net">
 
-{# Internal components #}
-<script type="module" src="/assets/components/scoped.js"></script>
-
 {# Web Awesome #}
 <script type="module" src="/dist/webawesome.loader.js"></script>
 
@@ -45,22 +42,7 @@
   }
 </script>
 
-<script type="module" src="/assets/scripts/theme-picker.js"></script>
-{# Preset Theme #}
-{% if noTheme %}
-{% elif forceTheme %}
-<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme }}.css" render="blocking" fetchpriority="high" />
-{% else %}
-<noscript><link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high" /></noscript>
-<script>
-{
-	let preset = localStorage.presetTheme ?? 'default';
-	let script = document.currentScript;
-	script.insertAdjacentHTML('beforebegin', `<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/${ preset }.css" render="blocking" fetchpriority="high" />`);
-}
-</script>
-<script type="module" src="/assets/scripts/preset-theme-picker.js"></script>
-{% endif %}
+<link rel="stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high" />
 
 <link rel="stylesheet" href="/dist/styles/webawesome.css" />
 
diff --git a/packages/webawesome/docs/_includes/import-stylesheet-code.md.njk b/packages/webawesome/docs/_includes/import-stylesheet-code.md.njk
deleted file mode 100644
index d7f538b5b..000000000
--- a/packages/webawesome/docs/_includes/import-stylesheet-code.md.njk
+++ /dev/null
@@ -1,18 +0,0 @@
-<wa-tab-group class="import-stylesheet-code">
-<wa-tab panel="html">In HTML</wa-tab>
-<wa-tab panel="css">In CSS</wa-tab>
-<wa-tab-panel name="html">
-
-Add the following code to the `<head>` of your page:
-```html
-<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
-```
-</wa-tab-panel>
-<wa-tab-panel name="css">
-
-Add the following code at the top of your CSS file:
-```css
-@import url('{% cdnUrl stylesheet %}');
-```
-</wa-tab-panel>
-</wa-tab-group>
diff --git a/packages/webawesome/docs/_includes/page-card.njk b/packages/webawesome/docs/_includes/page-card.njk
deleted file mode 100644
index d1111fcf0..000000000
--- a/packages/webawesome/docs/_includes/page-card.njk
+++ /dev/null
@@ -1,13 +0,0 @@
-{%- if not page.data.unlisted -%}
-{% if page.url %}<a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>{% endif %}
-	<wa-card with-header>
-		<div slot="header">
-		{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" ignore missing %}
-		</div>
-		<span class="page-name">{{ page.data.title }}</span>
-		{% if pageSubtitle -%}
-		<div class="wa-caption-s">{{ pageSubtitle }}</div>
-		{%- endif %}
-	</wa-card>
-{% if page.url %}</a>{% endif %}
-{% endif %}
diff --git a/packages/webawesome/docs/_includes/page-demo.njk b/packages/webawesome/docs/_includes/page-demo.njk
deleted file mode 100644
index fc22ab978..000000000
--- a/packages/webawesome/docs/_includes/page-demo.njk
+++ /dev/null
@@ -1,25 +0,0 @@
-<div id="page_slots_demo">
-<link rel="stylesheet" href="/docs/components/page/demo.css">
-{% set slots = components.page.slots %}
-
-<fieldset id="page_slots_fieldset">
-  <legend>Slots</legend>
-  <div class="options">
-  {% for slot in slots %}
-	{% if (slot.name != "skip-to-content") and (slot.name != "navigation-toggle-icon") %}
-  <wa-checkbox name="slot" value="{{ slot.name }}" {{ 'checked' if slot.name != "menu" and slot.name != 'navigation-toggle' | safe}} class="{{ 'default' if not slot.name }}"
-  data-description="{{ slot.description | inlineMarkdown }}" title="{{ slot.description | inlineMarkdown | striptags | safe }}">
-    {{ slot.name or "(default)" }}
-  </wa-checkbox>
-	{% endif %}
-  {% endfor %}
-  </div>
-</fieldset>
-
-<wa-zoomable-frame srcdoc="" zoom="0.5" id="page_slots_iframe"></wa-zoomable-frame>
-</div>
-
-<script type="module">
-  const cacheBust = new Date().toString()
-  import(`/docs/components/page/demo.js?${cacheBust}`)
-</script>
diff --git a/packages/webawesome/docs/_includes/preset-theme-selector.njk b/packages/webawesome/docs/_includes/preset-theme-selector.njk
index 0a6527d76..ed134db2c 100644
--- a/packages/webawesome/docs/_includes/preset-theme-selector.njk
+++ b/packages/webawesome/docs/_includes/preset-theme-selector.njk
@@ -1,9 +1,6 @@
-{# Preset theme selector #}
 <wa-select appearance="filled" size="small" value="default" pill class="preset-theme-selector">
   <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
-  {% for theme in collections.theme | sort %}
-    <wa-option value="{{ theme.page.fileSlug }}">
-      {{ theme.data.title }}
-    </wa-option>
-  {% endfor %}
+  <wa-option value="default">Default</wa-option>
+  <wa-option value="shoelace">Shoelace</wa-option>
+  <wa-option value="awesome">Awesome</wa-option>
 </wa-select>
diff --git a/packages/webawesome/docs/_includes/status.njk b/packages/webawesome/docs/_includes/status.njk
deleted file mode 100644
index 4ccb6845d..000000000
--- a/packages/webawesome/docs/_includes/status.njk
+++ /dev/null
@@ -1,20 +0,0 @@
-{% if since -%}
-	<wa-badge variant="neutral">Since {{ since }}</wa-badge>
-{% endif -%}
-
-{%- if status %}
-	{%- if status == "experimental" %}
-	<wa-badge variant="warning">
-		<wa-icon name="flask"></wa-icon>
-		Experimental
-	</wa-badge>
-	{%- elif status == "stable" %}
-	<wa-badge variant="brand">Stable</wa-badge>
-	{%- else %}
-	<wa-badge>{{ status}}</wa-badge>
-	{%- endif -%}
-{%- endif %}
-
-{%- if isPro %}
-	<wa-badge class="pro">PRO</wa-badge>
-{%- endif -%}
diff --git a/packages/webawesome/docs/_includes/svgs/palette.njk b/packages/webawesome/docs/_includes/svgs/palette.njk
deleted file mode 100644
index 380be36ca..000000000
--- a/packages/webawesome/docs/_includes/svgs/palette.njk
+++ /dev/null
@@ -1,20 +0,0 @@
-{% set paletteId = palette.fileSlug or page.fileSlug %}
-{% set suffixes = ['-80', '', '-20'] %}
-
-<wa-scoped class="palette-icon-host">
-  <template>
-    <link rel="stylesheet" href="/dist/styles/color/{{ paletteId }}.css">
-    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-    <div class="palette-icon" style="--hues: {{ hues|length }}; --suffixes: {{ suffixes|length }}">
-      {% for hue in hues -%}
-        {% set hueIndex = loop.index %}
-        {% for suffix in suffixes -%}
-          <div class="swatch"
-               data-hue="{{ hue }}" data-suffix="{{ suffix }}"
-               style="--color: var(--wa-color-{{ hue }}{{ suffix }}); grid-column: {{ hueIndex }}; grid-row: {{ loop.index }}">&nbsp;</div>
-        {%- endfor %}
-      {%- endfor %}
-    </div>
-  </template>
-</wa-scoped>
diff --git a/packages/webawesome/docs/_includes/svgs/theme-color.njk b/packages/webawesome/docs/_includes/svgs/theme-color.njk
deleted file mode 100644
index a5d543ced..000000000
--- a/packages/webawesome/docs/_includes/svgs/theme-color.njk
+++ /dev/null
@@ -1,24 +0,0 @@
-{% set themeId = theme.fileSlug %}
-
-<wa-scoped class="theme-icon-host theme-color-icon-host">
-  <template>
-    <link rel="stylesheet" href="/dist/styles/utilities.css">
-    <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
-    <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/color.css">
-    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-    <div class="theme-icon theme-color-icon wa-theme-{{ themeId }}">
-      <div class="wa-brand wa-accent">A</div>
-      <div class="wa-brand wa-outlined">A</div>
-      <div class="wa-brand wa-filled">A</div>
-      <div class="wa-brand wa-plain">A</div>
-      {# <div class="wa-danger wa-outlined wa-filled"><wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon></div> #}
-
-      <div class="wa-neutral wa-accent">A</div>
-      <div class="wa-neutral wa-outlined">A</div>
-      <div class="wa-neutral wa-filled">A</div>
-      <div class="wa-neutral wa-plain">A</div>
-      {# <div class="wa-warning wa-outlined wa-filled"><wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon></div> #}
-    </div>
-  </template>
-</wa-scoped>
diff --git a/packages/webawesome/docs/_includes/svgs/theme-typography.njk b/packages/webawesome/docs/_includes/svgs/theme-typography.njk
deleted file mode 100644
index e72813555..000000000
--- a/packages/webawesome/docs/_includes/svgs/theme-typography.njk
+++ /dev/null
@@ -1,16 +0,0 @@
-{% set themeId = theme.fileSlug or page.fileSlug %}
-
-<wa-scoped class="theme-icon-host theme-typography-icon-host">
-  <template>
-    <link rel="stylesheet" href="/dist/styles/native/content.css">
-    <link rel="stylesheet" href="/dist/styles/native/blockquote.css">
-    <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
-    <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/typography.css">
-    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-    <div class="theme-icon theme-typography-icon wa-theme-{{ themeId }}" data-no-outline data-no-anchor role="presentation">
-      <h3>Title</h3>
-      <p>Body text</p>
-    </div>
-  </template>
-</wa-scoped>
diff --git a/packages/webawesome/docs/_includes/svgs/theme.njk b/packages/webawesome/docs/_includes/svgs/theme.njk
deleted file mode 100644
index 613f9ceb4..000000000
--- a/packages/webawesome/docs/_includes/svgs/theme.njk
+++ /dev/null
@@ -1,29 +0,0 @@
-{% set themeId = theme.fileSlug or page.fileSlug %}
-
-
-<wa-scoped class="theme-icon-host theme-overall-icon-host">
-  <template>
-    <link rel="stylesheet" href="/dist/styles/utilities.css">
-    <link rel="stylesheet" href="/dist/styles/native/content.css">
-    <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}.css">
-    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-    <div class="theme-icon theme-overall-icon" role="presentation" data-no-anchor data-no-outline>
-      <div class="row row-1">
-        <h2>Aa</h2>
-        <div class="swatches">
-          <div class="wa-brand"></div>
-
-          <div class="wa-success"></div>
-          <div class="wa-warning"></div>
-          <div class="wa-danger"></div>
-          <div class="wa-neutral"></div>
-        </div>
-      </div>
-      <div class="row row-2">
-        <wa-input value="Input" size="small" inert></wa-input>
-        <wa-button size="small" variant="brand" inert>Go</wa-button>
-      </div>
-    </div>
-  </template>
-</wa-scoped>
diff --git a/packages/webawesome/docs/_includes/theme-showcase.njk b/packages/webawesome/docs/_includes/theme-showcase.njk
deleted file mode 100644
index 551f2e628..000000000
--- a/packages/webawesome/docs/_includes/theme-showcase.njk
+++ /dev/null
@@ -1,347 +0,0 @@
-<div class="showcase-examples-wrapper" aria-hidden="true" data-no-outline>
-  <div class="showcase-examples">
-    <wa-card>
-      <div slot="header" class="wa-split">
-        <h3 class="wa-heading-m">Your Cart</h3>
-        <wa-button appearance="plain" size="small" tabindex="-1">
-          <wa-icon name="xmark" label="Close"></wa-icon>
-        </wa-button>
-      </div>
-      <div class="wa-stack wa-gap-xl">
-        <div class="wa-flank">
-          <wa-avatar shape="rounded" style="--background-color: var(--wa-color-green-60); --text-color: var(--wa-color-green-95);">
-            <wa-icon slot="icon" name="sword-laser"></wa-icon>
-          </wa-avatar>
-          <div class="wa-stack wa-gap-2xs">
-            <div class="wa-split wa-gap-2xs">
-              <strong>Initiate Saber</strong>
-              <strong>$179.99</strong>
-            </div>
-            <div class="wa-split wa-gap-2xs wa-caption-m">
-              <span>Green</span>
-              <a href="#" tabindex="-1">Remove</a>
-            </div>
-          </div>
-        </div>
-        <wa-divider></wa-divider>
-        <div class="wa-flank">
-          <wa-avatar shape="rounded" style="--background-color: var(--wa-color-cyan-60); --text-color: var(--wa-color-cyan-95);">
-            <wa-icon slot="icon" name="robot-astromech"></wa-icon>
-          </wa-avatar>
-          <div class="wa-stack wa-gap-2xs">
-            <div class="wa-split wa-gap-2xs">
-              <strong>Repair Droid</strong>
-              <strong>$3,049.99</strong>
-            </div>
-            <div class="wa-split wa-gap-2xs wa-caption-m">
-              <span>R-series</span>
-              <a href="#" tabindex="-1">Remove</a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div slot="footer" class="wa-stack">
-        <div class="wa-split">
-          <strong>Subtotal</strong>
-          <strong>$3,229.98</strong>
-        </div>
-        <span class="wa-caption-m">Shipping and taxes calculated at checkout.</span>
-        <wa-button tabindex="-1" variant="brand">
-          <wa-icon slot="prefix" name="shopping-bag"></wa-icon>
-          Checkout
-        </wa-button>
-      </div>
-    </wa-card>
-    <wa-card>
-      <wa-avatar shape="rounded" style="--size: 1.9lh; float: left; margin-right: var(--wa-space-m);">
-        <wa-icon slot="icon" name="hat-wizard" style="font-size: 1.75em;"></wa-icon>
-      </wa-avatar>
-      <p class="wa-body-l" style="margin: 0;">&ldquo;All we have to decide is what to do with the time that is given to us. There are other forces at work in this world, Frodo, besides the will of evil.&rdquo;</p>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <h3 class="wa-heading-m">Sign In</h3>
-        <wa-input tabindex="-1" label="Email" placeholder="ddjarin@mandalore.gov">
-          <wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
-        </wa-input>
-        <wa-input tabindex="-1" label="Password" type="password">
-          <wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
-        </wa-input>
-        <wa-button tabindex="-1" variant="brand">Sign In</wa-button>
-        <a href="#" tabindex="-1" class="wa-body-s">I forgot my password</a>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <div class="wa-split">
-          <h3 class="wa-heading-m">To-Do</h3>
-          <wa-button appearance="plain" size="small" tabindex="-1">
-            <wa-icon name="plus" label="Add task"></wa-icon>
-          </wa-button>
-        </div>
-        <wa-checkbox tabindex="-1" checked>Umbrella for Adelard</wa-checkbox>
-        <wa-checkbox tabindex="-1" checked>Waste-paper basket for Dora</wa-checkbox>
-        <wa-checkbox tabindex="-1" checked>Pen and ink for Milo</wa-checkbox>
-        <wa-checkbox tabindex="-1">Mirror for Angelica</wa-checkbox>
-        <wa-checkbox tabindex="-1">Silver spoons for Lobelia</wa-checkbox>
-      </div>
-      <div slot="footer">
-        <a href="" tabindex="-1">View all completed</a>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <div class="wa-frame wa-border-radius-m" style="align-self: center; max-inline-size: 25ch;">
-          <img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="Album art">
-        </div>
-        <div class="wa-flank:end wa-align-items-start">
-          <div class="wa-stack wa-gap-3xs">
-            <div class="wa-cluster wa-gap-xs" style="height: 2.25em;">
-              <strong>The Stone Troll</strong>
-              <small><wa-badge variant="neutral" appearance="filled">E</wa-badge></small>
-            </div>
-            <span class="wa-caption-m">Samwise G</span>
-          </div>
-          <wa-button appearance="plain" size="small" tabindex="-1">
-            <wa-icon name="ellipsis" label="Options"></wa-icon>
-          </wa-button>
-        </div>
-        <div class="wa-stack wa-gap-2xs">
-          <wa-progress-bar value="34" style="height: 0.5em"></wa-progress-bar>
-          <div class="wa-split">
-            <span class="wa-caption-xs">1:01</span>
-            <span class="wa-caption-xs">-1:58</span>
-          </div>
-        </div>
-        <div class="wa-grid wa-align-items-center" style="--min-column-size: 1em; justify-items: center;">
-          <wa-button appearance="plain" tabindex="-1">
-            <wa-icon name="backward" label="Skip backward"></wa-icon>
-          </wa-button>
-          <wa-button appearance="plain" size="large" tabindex="-1">
-            <wa-icon name="pause" label="Pause"></wa-icon>
-          </wa-button>
-          <wa-button appearance="plain" tabindex="-1">
-            <wa-icon name="forward" label="Skip forward"></wa-icon>
-          </wa-button>
-        </div>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <h3 class="wa-heading-m">Chalmun's Spaceport Cantina</h3>
-        <div class="wa-cluster wa-gap-xs">
-          <wa-rating value="4.6" readonly tabindex="-1"></wa-rating>
-          <strong>4.6</strong>
-          <span>(419 reviews)</span>
-        </div>
-        <div class="wa-cluster wa-gap-xs">
-          <div class="wa-cluster wa-gap-3xs">
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-          </div>
-          <span class="wa-caption-m">&bull;</span>
-          <wa-tag size="small">Cocktail Bar</wa-tag>
-          <wa-tag size="small">Gastropub</wa-tag>
-          <wa-tag size="small">Local Fare</wa-tag>
-          <wa-tag size="small">Gluten Free</wa-tag>
-        </div>
-        <div class="wa-flank wa-gap-xs">
-          <wa-icon name="location-dot"></wa-icon>
-          <a href="#" class="wa-caption-m" tabindex="-1">Mos Eisley, Tatooine</a>
-        </div>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <div class="wa-flank:end">
-          <h3 id="odds-label" class="wa-heading-m">Tell Me the Odds</h3>
-          <wa-switch size="large" aria-labelledby="odds-label" tabindex="-1"></wa-switch>
-        </div>
-        <p class="wa-body-s">Allow protocol droids to inform you of probabilities, such as the success rate of navigating an asteroid field. We recommend setting this to "Never."</p>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <div class="wa-split wa-align-items-start">
-          <dl class="wa-stack wa-gap-2xs">
-            <dt class="wa-heading-s">Amount</dt>
-            <dd class="wa-heading-l">$5,610.00</dd>
-          </dl>
-          <wa-badge appearance="filled outlined" variant="success">Paid</wa-badge>
-        </div>
-        <wa-divider></wa-divider>
-        <dl class="wa-stack">
-          <div class="wa-flank wa-align-items-center">
-            <dt><wa-icon name="user" label="Name" fixed-width></wa-icon></dt>
-            <dd>Tom Bombadil</dd>
-          </div>
-          <div class="wa-flank wa-align-items-center">
-            <dt><wa-icon name="calendar-days" label="Date" fixed-width></wa-icon></dt>
-            <dd><wa-format-date date="2025-03-15"></wa-format-date></dd>
-          </div>
-          <div class="wa-flank wa-align-items-center">
-            <dt><wa-icon name="coin-vertical" fixed-width></wa-icon></dt>
-            <dd>Paid with copper pennies</dd>
-          </div>
-        </dl>
-      </div>
-      <div slot="footer">
-        <a href="" class="wa-cluster wa-gap-2xs" tabindex="-1">
-          <span>Download Receipt</span>
-          <wa-icon name="arrow-right"></wa-icon>
-        </a>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <div class="wa-split">
-          <div class="wa-cluster wa-heading-l">
-            <wa-icon name="book-sparkles"></wa-icon>
-            <h3>Fellowship</h3>
-          </div>
-          <wa-badge>Most Popular</wa-badge>
-        </div>
-        <span class="wa-flank wa-align-items-baseline wa-gap-2xs">
-          <span class="wa-heading-2xl">$120</span>
-          <span class="wa-caption-l">per year</span>
-        </span>
-        <p class="wa-caption-l">Carry great power (and great responsibility).</p>
-        <wa-button variant="brand" tabindex="-1">Get this Plan</wa-button>
-      </div>
-      <div slot="footer" class="wa-stack wap-gap-s">
-        <h4 class="wa-heading-s">What You Get</h4>
-        <div class="wa-stack">
-          <div class="wa-flank">
-            <wa-icon name="user" fixed-width></wa-icon>
-            <span class="wa-caption-m">9 users</span>
-          </div>
-          <div class="wa-flank">
-            <wa-icon name="ring" fixed-width></wa-icon>
-            <span class="wa-caption-m">1 ring</span>
-          </div>
-          <div class="wa-flank">
-            <wa-icon name="chess-rook" fixed-width></wa-icon>
-            <span class="wa-caption-m">API access to Isengard</span>
-          </div>
-          <div class="wa-flank">
-            <wa-icon name="feather" fixed-width></wa-icon>
-            <span class="wa-caption-m">Priority eagle support</span>
-          </div>
-        </div>
-      </div>
-    </wa-card>
-    <wa-card with-footer>
-      <div class="wa-flank:end">
-        <div class="wa-stack wa-gap-xs">
-          <div class="wa-cluster wa-gap-xs">
-            <h3 class="wa-heading-s">Migs Mayfeld</h3 class="wa-heading-s">
-            <wa-badge pill>Admin</wa-badge>
-          </div>
-          <span class="wa-caption-m">Bounty Hunter</span>
-        </div>
-        <wa-avatar image="https://images.unsplash.com/photo-1633268335280-a41fbde58707?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Avatar of a man wearing a sci-fi helmet (Photograph by Nandu Vasudevan)"></wa-avatar>
-      </div>
-      <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
-        <wa-button appearance="outlined" tabindex="-1">
-          <wa-icon slot="prefix" name="at"></wa-icon>
-          Email
-        </wa-button>
-        <wa-button appearance="outlined" tabindex="-1">
-          <wa-icon slot="prefix" name="phone"></wa-icon>
-          Phone
-        </wa-button>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-flank:end">
-        <a href="" class="wa-flank wa-link-plain" tabindex="-1">
-          <wa-avatar shape="rounded" style="--background-color: var(--wa-color-yellow-90); --text-color: var(--wa-color-yellow-50)">
-            <wa-icon slot="icon" name="egg-fried"></wa-icon>
-          </wa-avatar>
-          <div class="wa-gap-2xs wa-stack">
-            <span class="wa-heading-s">Second Breakfast</span>
-            <span class="wa-caption-m">19 Items</span>
-          </div>
-        </a>
-        <wa-dropdown>
-          <wa-button id="more-actions-2" slot="trigger" appearance="plain" size="small" tabindex="-1">
-            <wa-icon name="ellipsis-vertical" label="View menu"></wa-icon>
-          </wa-button>
-          <wa-dropdown-item>Copy link</wa-dropdown-item>
-          <wa-dropdown-item>Rename</wa-dropdown-item>
-          <wa-dropdown-item>Move to trash</wa-dropdown-item>
-        </wa-dropdown>
-        <wa-tooltip for="more-actions-2">View menu</wa-tooltip>
-      </div>
-    </wa-card>
-    <wa-card with-header with-footer>
-      <div slot="header" class="wa-stack wa-gap-xs">
-        <h2 class="wa-heading-m">Decks</h2>
-      </div>
-      <div class="wa-stack wa-gap-xl">
-        <p class="wa-caption-m">You haven’t created any decks yet. Get started by selecting an aspect that matches your play style.</p>
-        <div class="wa-grid wa-gap-xl" style="--min-column-size: 30ch;">
-          <a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
-            <wa-avatar shape="rounded" style="--background-color: var(--wa-color-blue-90);color: var(--wa-color-blue-50);">
-              <wa-icon slot="icon" name="shield"></wa-icon>
-            </wa-avatar>
-            <div class="wa-stack wa-gap-2xs">
-              <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
-                Vigilance <wa-icon name="arrow-right"></wa-icon>
-              </span>
-              <p class="wa-caption-m">
-                Protect, defend, and restore as you ready heavy-hitters.
-              </p>
-            </div>
-          </a>
-          <a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
-            <wa-avatar shape="rounded" style="--background-color: var(--wa-color-green-90);color: var(--wa-color-green-50);">
-              <wa-icon slot="icon" name="chevrons-up"></wa-icon>
-            </wa-avatar>
-            <div class="wa-stack wa-gap-2xs">
-              <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
-                Command <wa-icon name="arrow-right"></wa-icon>
-              </span>
-              <p class="wa-caption-m">
-                Build imposing armies and stockpile resources.
-              </p>
-            </div>
-          </a>
-          <a href=""class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
-            <wa-avatar shape="rounded" style="--background-color: var(--wa-color-red-90);color: var(--wa-color-red-50);">
-              <wa-icon slot="icon" name="explosion"></wa-icon>
-            </wa-avatar>
-            <div class="wa-stack wa-gap-2xs">
-              <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
-                Aggression <wa-icon name="arrow-right"></wa-icon>
-              </span>
-              <p class="wa-caption-m">
-                Relentlessly deal damage and apply pressure to your opponent.
-              </p>
-            </div>
-          </a>
-          <a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
-            <wa-avatar shape="rounded" style="--background-color: var(--wa-color-yellow-90);color: var(--wa-color-yellow-50);">
-              <wa-icon slot="icon" name="moon-stars"></wa-icon>
-            </wa-avatar>
-            <div class="wa-stack wa-gap-2xs">
-              <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
-                Cunning <wa-icon name="arrow-right"></wa-icon>
-              </span>
-              <p class="wa-caption-m">
-                Disrupt and frustrate your opponent with dastardly tricks.
-              </p>
-            </div>
-          </a>
-        </div>
-      </div>
-      <div slot="footer">
-        <a href="" class="wa-cluster wa-gap-xs" tabindex="-1">
-          <span>Or start a deck from scratch</span>
-          <wa-icon name="arrow-right"></wa-icon>
-        </a>
-      </div>
-    </wa-card>
-  </div>
-</div>
diff --git a/packages/webawesome/docs/_layouts/block.njk b/packages/webawesome/docs/_layouts/block.njk
deleted file mode 100644
index 91e64589b..000000000
--- a/packages/webawesome/docs/_layouts/block.njk
+++ /dev/null
@@ -1,38 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-
-{% extends '../_includes/base.njk' %}
-
-{# Component header #}
-{% block header %}
-  {% include 'breadcrumbs.njk' %}
-  <h1 class="title">{{ title }}</h1>
-  <div class="block-info">
-    {% set snippets = (elements or element or snippets or snippet) | dict  %}
-
-    {% for snippet, link in snippets %}
-      {% if snippet %}
-        <code class="class">
-          {%- if link -%}
-            <a href="{{ link }}">{{ snippet }}</a>
-          {%- else -%}
-            {{ snippet }}
-          {%- endif-%}
-        </code>
-      {%- endif %}
-    {% endfor %}
-
-    {% include '../_includes/status.njk' %}
-  </div>
-  {% if description %}
-  <p class="summary">
-    {{ description | inlineMarkdown | safe }}
-  </p>
-  {% endif %}
-  {% block notes %}{% endblock %}
-{% endblock %}
-
-{# Content #}
-{% block content %}
-  {{ content | safe }}
-{% endblock %}
diff --git a/packages/webawesome/docs/_layouts/component.njk b/packages/webawesome/docs/_layouts/component.njk
index 774ef07fe..d683f6506 100644
--- a/packages/webawesome/docs/_layouts/component.njk
+++ b/packages/webawesome/docs/_layouts/component.njk
@@ -1,4 +1,4 @@
-{% extends '../_layouts/block.njk' %}
+{% extends '../_layouts/docs.njk' %}
 {% set component = components[page.fileSlug] %}
 
 {# Component API #}
diff --git a/packages/webawesome/docs/_layouts/element.njk b/packages/webawesome/docs/_layouts/element.njk
deleted file mode 100644
index a0b5b434b..000000000
--- a/packages/webawesome/docs/_layouts/element.njk
+++ /dev/null
@@ -1,32 +0,0 @@
-{% extends '../_layouts/block.njk' %}
-
-{# Component header #}
-{% block notes %}
-  {% if component %}
-  <wa-callout variant="success">
-    <wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
-    Want to do more?
-    Check out the {% for name in (component | toList) -%}
-      {{ ' and ' if loop.last and not loop.first }}<a href="/docs/components/{{ name }}"><code>&lt;wa-{{ name }}&gt;</code></a>{{ ', ' if not loop.last }}
-      {%- endfor %} component{{ 's' if (component | isList) }}</a>!
-  </wa-callout>
-  {% endif %}
-{% endblock %}
-
-{% block afterContent %}
-{% if file %}
-{% markdown %}
-## Opting In to Native {{ title }} Styles
-
-If you want to use the Native {{ title }} styles **without including the entirety of Web Awesome Native Styles**,
- you can include the following CSS files from the Web Awesome CDN.
-
-{% set stylesheet = file %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-To use all of Web Awesome Native styles, follow the [instructions on the Native Styles overview page](../).
-
-{% endmarkdown %}
-{% endif %}
-
-{% endblock %}
diff --git a/packages/webawesome/docs/_layouts/overview.njk b/packages/webawesome/docs/_layouts/overview.njk
deleted file mode 100644
index f0e201092..000000000
--- a/packages/webawesome/docs/_layouts/overview.njk
+++ /dev/null
@@ -1,26 +0,0 @@
----
-layout: page-outline
----
-{% set forTag = forTag or (page.url | split('/') | last) %}
-{% if description %}
-  <div class="index-summary">{{ description | markdown | safe }}</div>
-{% endif %}
-
-<div id="block-filter">
-  <wa-input type="search" placeholder="Search {{ title }}" with-clear autofocus>
-	<wa-icon slot="prefix" name="search"></wa-icon>
-  </wa-input>
-</div>
-
-{% set allPages = allPages or collections[forTag] %}
-{% if allPages and allPages.length > 0 %}
-{% include "grouped-pages.njk" %}
-{% endif %}
-
-<link href="/assets/styles/filter.css" rel="stylesheet">
-<script type="module" src="/assets/scripts/filter.js"></script>
-
-{% if content | trim %}
-<wa-divider style="--spacing: var(--wa-space-3xl)"></wa-divider> {# Temp fix for spacing issue #}
-{{ content | safe }}
-{% endif %}
diff --git a/packages/webawesome/docs/_layouts/palette.njk b/packages/webawesome/docs/_layouts/palette.njk
deleted file mode 100644
index ed311a403..000000000
--- a/packages/webawesome/docs/_layouts/palette.njk
+++ /dev/null
@@ -1,313 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-{% set paletteId = page.fileSlug %}
-{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
-
-{% extends '../_includes/base.njk' %}
-
-{% block head %}
-<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
-<link href="{{ page.url }}../tweak.css" rel="stylesheet">
-<script type="module" src="{{ page.url }}../tweak.js"></script>
-{% endblock %}
-
-{% block header %}
-<div id="palette-app" data-palette-id="{{ paletteId }}">
-  <div
-  :class="{
-    tweaking: tweaking.chroma,
-    'tweaking-chroma': tweaking.chroma,
-    'tweaking-hue': tweaking.chroma,
-    'tweaking-gray-chroma': tweaking.grayChroma,
-    'tweaked-chroma': tweaked?.chroma,
-    'tweaked-hue': tweaked?.hue,
-    'tweaked-any': tweaked
-  }"
-  :style="{
-    '--chroma-scale': chromaScale,
-    '--gray-chroma': tweaked?.grayChroma ? grayChroma : '',
-    }">
-
-  {% include 'breadcrumbs.njk' %}
-
-  <h1 class="title">
-    <span v-content="title">{{ title }}</span>
-    <template v-if="saved || tweaked">
-      <wa-button appearance="plain" size="small" @click="rename">
-        <wa-icon name="pencil" label="Rename palette"></wa-icon>
-      </wa-button>
-      <wa-button appearance="plain" size="small" v-if="saved" class="delete" @click="deleteSaved">
-        <wa-icon name="trash" label="Delete palette"></wa-icon>
-      </wa-button>
-      <wa-button @click="save()" :disabled="!unsavedChanges"
-        :variant="unsavedChanges ? 'success' : 'neutral'" size="small" :appearance="unsavedChanges ? 'accent' : 'outlined'">
-        <span v-content="unsavedChanges ? 'Save' : 'Saved'">Save</span>
-      </wa-button>
-    </template>
-  </h1>
-
-  <div class="block-info">
-    <code class="class">.wa-palette-{{ paletteId }}</code>
-    {% include '../_includes/status.njk' %}
-    {% if not isPro %}
-    <wa-badge class="pro" v-if="tweaked">PRO</wa-badge>
-    {% endif %}
-  </div>
-  {% if description %}
-  <p class="summary">
-    {{ description | inlineMarkdown | safe }}
-  </p>
-  {% endif %}
-{% endblock %}
-
-{% block afterContent %}
-
-{% set maxChroma = 0 %}
-
-<wa-callout size="small" class="tweaked-callout" variant="warning">
-  <wa-icon name="sliders-simple" slot="icon" variant="regular"></wa-icon>
-   This palette has been tweaked.
-   <div class="wa-cluster wa-gap-xs">
-    <wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" with-remove @wa-remove="reset(param)" v-content="tweakHumanReadable"></wa-tag>
-   </div>
-
-  <wa-button @click="reset()" appearance="outlined" variant="danger" size="small">
-    <wa-icon slot="prefix" name="circle-xmark" variant="regular"></wa-icon>
-    Reset
-  </wa-button>
-</wa-callout>
-
-<table class="colors main wa-palette-{{ paletteId }}">
-  <thead>
-    <tr>
-      <th></th>
-      <th class="core-column">Core tint</th>
-      {% for tint in tints -%}
-      <th>{{ tint }}</th>
-      {%- endfor %}
-    </tr>
-  </thead>
-{# Initialize to last hue before gray #}
-{%- set hueBefore = hues[hues|length - 2] -%}
-{% for hue in hues -%}
-{% set coreTint = palettes[paletteId][hue].maxChromaTint %}
-{%- set coreColor = palettes[paletteId][hue][coreTint] -%}
-{%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
-{% if hue === 'gray' %}
-<tr data-hue="{{ hue }}" class="color-scale"
-    :class="{tweaking: tweaking.grayChroma, tweaked: tweaked.grayChroma || tweaked.grayColor }">
-{% else %}
-<tr data-hue="{{ hue }}" class="color-scale"
-    :class="{tweaking: tweaking.{{ hue }}, tweaked: hueShifts.{{ hue }} }"
-    :style="{ '--hue-shift': hueShifts.{{ hue }} || '' }">
-{% endif %}
-  <th>
-    {{ hue | capitalize }}
-  </th>
-  <td class="core-column"
-      style="--color: var(--wa-color-{{ hue }})"
-      :style="{
-        '--color-tweaked': colors.{{ hue }}[{{ coreTint }}],
-        '--color-gray-undertone': colors[grayColor][{{coreTint}}],
-        '--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ coreTint }}],
-      }">
-    <wa-dropdown>
-      <div slot="trigger" id="core-{{ hue }}-swatch" data-tint="core" class="color swatch"
-      style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});"
-      >
-        {{ palettes[paletteId][hue].maxChromaTint }}
-        <wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
-      </div>
-      <div class="popup">
-      {% if hue === 'gray' %}
-        <swatch-select label="Gray undertone" shape="circle" :values="hues" v-model="grayColor"></swatch-select>
-
-        <div class="decorated-slider gray-chroma-slider" :style="{'--max': maxGrayChroma}">
-          <wa-slider name="gray-chroma" v-model="grayChroma" ref="grayChromaSlider"
-          value="0" min="0" :max="maxGrayChroma" step="0.01"
-            @input="tweaking.grayChroma = true" @change="tweaking.grayChroma = false">
-            <div slot="label">
-              Gray colorfulness
-              <wa-button appearance="plain" @click="grayChroma = originalGrayChroma" class="clear-button">
-                <wa-icon name="circle-xmark" label="Reset" variant="regular"></wa-icon>
-              </wa-button>
-            </div>
-          </wa-slider>
-          <div class="label-min">Neutral</div>
-          <div class="label-max" v-content="moreHue[grayColor]">Warmer/Cooler</div>
-        </div>
-      {% else %}
-      {%- set hueAfter = hues[loop.index0 + 1] -%}
-      {%- set hueAfter = hues[0] if hueAfter == 'gray' else hueAfter -%}
-      {%- set minShift = hueRanges[hue].min - coreColor.h | round -%}
-      {%- set maxShift = hueRanges[hue].max - coreColor.h | round -%}
-
-      <div class="decorated-slider hue-shift-slider" style="--min: {{ minShift }}; --max: {{ maxShift }};">
-        <wa-slider name="{{ hue }}-shift" v-model="hueShifts.{{ hue }}" value="0"
-          min="{{ minShift }}" max="{{ maxShift }}" step="1"
-          @input="tweaking.hue = tweaking.{{hue}} = true"
-          @change="tweaking.hue = tweaking.{{ hue }} = false">
-          <div slot="label">
-            Tweak {{ hue }} hue
-            <wa-button appearance="plain" @click="hueShifts.{{ hue }} = 0" class="clear-button">
-              <wa-icon name="circle-xmark" label="Reset" variant="regular"></wa-icon>
-            </wa-button>
-          </div>
-        </wa-slider>
-        <div class="label-min">More {{hueBefore}}</div>
-        <div class="label-max">More {{hueAfter}}</div>
-      </div>
-      {%- set hueBefore = hue -%}
-      {% endif %}
-      <div class="wa-gap-s">
-          <code>--wa-color-{{ hue }}</code>
-          <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
-        </div>
-      </div>`
-    </wa-dropdown>
-  </td>
-  {% for tint in tints -%}
-    {%- set color = palettes[paletteId][hue][tint] -%}
-    <td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})"
-        :style="{
-          '--color-tweaked': colors.{{ hue }}[{{ tint }}],
-          '--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ tint }}],
-        }">
-      <div class="color swatch" style="--color: var(--wa-color-{{ hue }}-{{ tint }})">
-        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
-      </div>
-    </td>
-  {%- endfor -%}
-</tr>
-{%- endfor %}
-</table>
-
-{% set chromaScaleBounds = [
-(0.08 / maxChroma) | number({maximumFractionDigits: 2}),
-(0.3 / maxChroma]) | number({maximumFractionDigits: 2}) -%}
-<div class="decorated-slider chroma-scale-slider wa-palette-{{ paletteId }}"
-:class="{ tweaked: chromaScale !== 1 }"
-style="--min: {{ chromaScaleBounds[0] }}; --max: {{ chromaScaleBounds[1] }};">
-  <wa-slider name="chroma-scale" ref="chromaScaleSlider"
-    v-model="chromaScale" value="1" step="0.01"
-    min="{{ chromaScaleBounds[0] }}" max="{{ chromaScaleBounds[1] }}"
-    @input="tweaking.chroma = true"
-    @change="tweaking.chroma = false">
-    <div slot="label">
-      Overall colorfulness
-      <wa-button appearance="plain" @click="chromaScale = 1" class="clear-button">
-        <wa-icon name="circle-xmark" label="Reset" variant="regular"></wa-icon>
-      </wa-button>
-    </div>
-  </wa-slider>
-  <div class="label-min">More muted</div>
-  <div class="label-max">More vibrant</div>
-</div>
-
-<h2>Used By</h2>
-
-<section class="index-grid">
-{% for page in collections.theme %}
-  {%- if page.data.palette == paletteId -%}
-    {% include "page-card.njk" %}
-  {%- endif -%}
-{% endfor %}
-</section>
-
-{% markdown %}
-## Color Contrast
-
-Web Awesome color scales are designed to guarantee certain contrast ratios,
-both per [WCAG 2.1 success criteria](https://www.w3.org/TR/WCAG21/#contrast-minimum)
-as well as the emergent APCA specification _(planned)_,
-so you can ensure that text is both legible to all users, and legally conformant.
-
-### Level 1
-
-A difference of `40` ensures a minimum **3:1** contrast ratio, suitable for large text and icons (AA).
-{% endmarkdown %}
-
-{% set difference = 40 %}
-{% set minContrast = 3 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-This also goes for a difference of `45`:
-
-{% endmarkdown %}
-
-{% set difference = 45 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-### Level 2
-
-A difference of `50` ensures a minimum **4.5:1** contrast ratio, suitable for normal text (AA) and large text (AAA)
-{% endmarkdown %}
-
-{% set difference = 50 %}
-{% set minContrast = 4.5 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-This also goes for a difference of `55`:
-
-{% endmarkdown %}
-
-{% set difference = 55 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-### Level 3
-
-A difference of `60` ensures a minimum **7:1** contrast ratio, suitable for all text (AAA)
-{% endmarkdown %}
-
-{% set difference = 60 %}
-{% set minContrast = 7 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-This also goes for a difference of `65`:
-
-{% endmarkdown %}
-
-{% set difference = 65 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-## How to use this palette { #usage }
-
-If you are using a Web Awesome theme that uses this palette, it will already be included.
-To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.
-
-{% set stylesheet = 'styles/color/' + page.fileSlug + '.css' %}
-<wa-tab-group class="import-stylesheet-code">
-<wa-tab panel="html">In HTML</wa-tab>
-<wa-tab panel="css">In CSS</wa-tab>
-<wa-tab-panel name="html">
-
-Add the following code to the `<head>` of your page:
-```html { v-content:html="code.html.highlighted" }
-<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
-```
-</wa-tab-panel>
-<wa-tab-panel name="css">
-
-Add the following code at the top of your CSS file:
-```css { v-content:html="code.css.highlighted" }
-@import url('{% cdnUrl stylesheet %}');
-```
-</wa-tab-panel>
-</wa-tab-group>
-
-
-{% endmarkdown %}
-</div></div> {# end palette app #}
-{% endblock %}
-
-
diff --git a/packages/webawesome/docs/_layouts/patterns.njk b/packages/webawesome/docs/_layouts/patterns.njk
deleted file mode 100644
index cb2836dd6..000000000
--- a/packages/webawesome/docs/_layouts/patterns.njk
+++ /dev/null
@@ -1 +0,0 @@
-{% extends '../_layouts/block.njk' %}
diff --git a/packages/webawesome/docs/_layouts/theme.njk b/packages/webawesome/docs/_layouts/theme.njk
deleted file mode 100644
index 5ac6bad97..000000000
--- a/packages/webawesome/docs/_layouts/theme.njk
+++ /dev/null
@@ -1,185 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-{# {% set forceTheme = page.fileSlug %} #}
-
-{% extends '../_includes/base.njk' %}
-
-{% block head %}
-<link href="{{ page.url }}../remix.css" rel="stylesheet">
-<script type="module" src="{{ page.url }}../edit/index.js"></script>
-{% endblock %}
-
-{% block header %}
-<script>
-if (location.pathname.endsWith('/custom/') && !location.search) {
-  location.href = "../edit/";
-}
-</script>
-<div id="theme-app" data-theme-id="{{ page.fileSlug }}">
-
-<iframe ref="preview" :src="'{{ page.url }}demo.html' + urlParams" src='{{ page.url }}demo.html' id="demo"></iframe>
-
-{% if page.fileSlug !== 'custom' %}
-<wa-details id="mix_and_match" class="wa-gap-m" :open="saved || unsavedChanges">
-  <h4 slot="summary" data-no-anchor data-no-outline id="remix">
-    <wa-icon name="arrows-rotate"></wa-icon>
-    Remix this theme
-    <wa-icon id="what-is-remixing" href="#remixing" name="circle-question" slot="suffix" variant="regular"></wa-icon>
-    <wa-tooltip for="what-is-remixing">Customize this theme by changing its colors and/or remixing it with design elements from other themes!</wa-tooltip>
-  </h4>
-
-  <wa-select name="palette" label="Color palette" with-clear v-model="theme.palette">
-    <wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
-    <wa-option v-for="(palette, paletteId) in palettes" :label="palette.title" :value="paletteId === baseTheme.palette ? '' : paletteId">
-      <palette-card :palette="paletteId" size="small">
-        <template #extra>
-          <wa-badge v-if="paletteId === baseTheme.palette" variant="neutral" appearance="outlined">Theme default</wa-badge>
-        </template>
-      </palette-card>
-    </wa-option>
-  </wa-select>
-
-  <color-select :model-value="computed.brand" @update:model-value="value => theme.brand = value" label="Brand color"
-                :values="hues"></color-select>
-
-  <wa-select name="colors" class="theme-colors-select" label="Color contrast from…" value="" with-clear v-model="theme.colors">
-    <wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
-    <template v-for="(themeMeta, themeId) in themes">
-      <wa-option v-if="themeId !== 'custom'" :label="themeMeta.title" :value="themeId === computed.colors ? '' : themeId">
-        <theme-card :theme="themeId" type="colors" :rest="{base: computed.base, palette: computed.palette, brand: computed.brand}" size="small">
-          <template #extra>
-          <wa-badge v-if="themeId === theme.base" variant="neutral" appearance="outlined">This theme</wa-badge>
-        </template>
-        </theme-card>
-      </wa-option>
-    </template>
-  </wa-select>
-
-  <wa-select name="typography" label="Typography from…" with-clear v-model="theme.typography">
-    <wa-icon name="font-case" slot="prefix"></wa-icon>
-
-    <wa-option v-for="(themeMeta, themeId) in themes" :label="themeMeta.title" :value="themeId === theme.base ? '' : themeId">
-      <fonts-card :theme="themeId" size="small">
-        <template #extra>
-          <wa-badge v-if="themeId === theme.base" variant="neutral" appearance="outlined">This theme</wa-badge>
-        </template>
-      </fonts-card>
-    </wa-option>
-  </wa-select>
-</wa-details>
-{% endif %}
-<h2>Color</h2>
-
-<div class="index-grid">
-  {% if page.fileSlug === 'custom' %}
-    <palette-card :palette="computed.palette" subtitle="Color palette"></palette-card>
-  {% else %}
-    {% set themePage = page %}
-    {% set paletteURL = '/docs/palettes/' + palette + '/' %}
-    {% set page = paletteURL | getCollectionItemFromUrl %}
-    {% set pageSubtitle = "Default color palette" %}
-    {% include 'page-card.njk' %}
-    {% set page = themePage %}
-  {% endif %}
-  <wa-card class="wa-palette-{{ palette }}"          style="--header-background: var(--wa-color-{{ brand }})"
-          :class="`wa-palette-${computed.palette}`" :style="{'--header-background': palettes[computed.palette]?.colors[computed.brand]?.key}">
-    <div slot="header"></div>
-    <div class="page-name" v-content="capitalize(computed.brand)">{{ brand | capitalize }}</div>
-    <div class="wa-caption-s">{{ 'Brand color' if page.fileSlug === 'custom' else 'Default brand color' }}</div>
-  </wa-card>
-</div>
-{% endblock %}
-
-{% block afterContent %}
-
-<h2 id="usage">How to use this theme</h2>
-
-{% markdown %}
-You can import this theme from the Web Awesome CDN.
-
-{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
-
-<wa-tab-group class="import-stylesheet-code">
-<wa-tab panel="html">In HTML</wa-tab>
-<wa-tab panel="css">In CSS</wa-tab>
-<wa-tab-panel name="html">
-
-Add the following code to the `<head>` of your page:
-```html { v-content:html="code.html.highlighted" }
-<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
-```
-</wa-tab-panel>
-<wa-tab-panel name="css">
-
-Add the following code at the top of your CSS file:
-```css { v-content:html="code.css.highlighted" }
-@import url('{% cdnUrl stylesheet %}');
-```
-</wa-tab-panel>
-</wa-tab-group>
-
-## Dark mode
-
-To activate the dark color scheme of the theme on any element and its contents, apply the class `wa-dark` to it.
-This means you can use different color schemes throughout the page.
-Here, we use the default theme with a dark sidebar:
-
-```html
-<html>
-  <head>
-    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
-  </head>
-
-  <body>
-    <nav class="wa-dark">
-      <!-- dark-themed sidebar -->
-    </nav>
-
-    <!-- light-themed content -->
-  </body>
-</html>
-```
-
-You can apply the class to the `<html>` element on your page to activate the dark color scheme for the entire page.
-
-```html
-<html class="wa-dark">
-  <head>
-    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/{{ page.fileSlug }}.css" />
-    <!-- other links, scripts, and metadata -->
-  </head>
-  <body>
-    <!-- page content -->
-  </body>
-</html>
-```
-### Detecting Color Scheme Preference
-
-Web Awesome's themes have both light and dark styles built in.
-However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference.
-This should be done at the application level.
-
-As a best practice, to provide a dark theme in your app, you should:
-
-- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
-- Allow the user to override the setting in your app
-- Remember the user's preference and restore it on subsequent logins
-
-Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
-
-Assuming the user's preference is in a variable called `colorScheme` (values: `auto`, `light`, `dark`),
-you can use the following JS snippet to apply the `wa-dark` class to the `<html>` element accordingly:
-
-```js
-const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
-const applyDark = function (event = systemDark) {
-  const isDark = colorScheme === 'auto' ? event.matches : colorScheme === 'dark';
-  document.documentElement.classList.toggle('wa-dark', isDark);
-};
-systemDark.addEventListener('change', applyDark);
-applyDark();
-```
-
-</div> {# end theme app #}
-{% endmarkdown %}
-{% endblock %}
diff --git a/packages/webawesome/docs/_layouts/utility.njk b/packages/webawesome/docs/_layouts/utility.njk
deleted file mode 100644
index 032e98277..000000000
--- a/packages/webawesome/docs/_layouts/utility.njk
+++ /dev/null
@@ -1,19 +0,0 @@
-{% extends '../_layouts/block.njk' %}
-
-{% block afterContent %}
-{% if file %}
-{% markdown %}
-## Opting In
-
-If you want to use this utility **only** without [all others](../), you can include the following CSS file from the Web Awesome CDN.
-
-{% set stylesheet = file %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-Want them all?
-Follow the [instructions on the Utilities overview page](../) to get all Web Awesome utilities.
-
-{% endmarkdown %}
-{% endif %}
-
-{% endblock %}
diff --git a/packages/webawesome/docs/_utils/filters.js b/packages/webawesome/docs/_utils/filters.js
deleted file mode 100644
index 5b0f5a285..000000000
--- a/packages/webawesome/docs/_utils/filters.js
+++ /dev/null
@@ -1,410 +0,0 @@
-import { parse } from 'path';
-
-export function stripExtension(string) {
-  return parse(string).name;
-}
-
-export function stripPrefix(content) {
-  return content.replace(/^wa-/, '');
-}
-
-// Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
-// With Prettier 3, this means a leading pipe will exist be present when the line wraps.
-export function trimPipes(content) {
-  return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
-}
-
-export function keys(obj) {
-  return Object.keys(obj);
-}
-
-export function log(firstArg, ...rest) {
-  console.log(firstArg, ...rest);
-  return firstArg;
-}
-
-function getCollection(name) {
-  // From https://github.com/11ty/eleventy/blob/d3d24ccddb804e6e14773501d8c4e07e2c4b9c2b/src/Filters/GetLocaleCollectionItem.js#L39-L43
-  return this.collections?.[name] || this.ctx?.collections?.[name] || this.context?.environments?.collections?.[name];
-}
-
-export function getCollectionItemFromUrl(url, collection) {
-  if (!url) {
-    return null;
-  }
-  collection ??= getCollection.call(this, 'all') || [];
-  return collection.find(item => item.url === url);
-}
-
-export function getTitleFromUrl(url, collection) {
-  const item = getCollectionItemFromUrl.call(this, url, collection);
-  return item?.data.title || '';
-}
-
-export function split(text, separator) {
-  return (text + '').split(separator).filter(Boolean);
-}
-
-export function ancestors(url, { withCurrent = false, withRoot = false } = {}) {
-  let ret = [];
-  let currentUrl = url;
-  let currentItem = getCollectionItemFromUrl.call(this, url);
-
-  if (!currentItem) {
-    // Might have eleventyExcludeFromCollections, jump to parent
-    let parentUrl = this.ctx.parentUrl;
-    if (parentUrl) {
-      url = parentUrl;
-    }
-  }
-
-  for (let item; (item = getCollectionItemFromUrl.call(this, url)); url = item.data.parentUrl) {
-    ret.unshift(item);
-  }
-
-  if (!withRoot && ret[0]?.page.url === '/') {
-    // Remove root
-    ret.shift();
-  }
-
-  if (!withCurrent && ret.at(-1)?.page.url === currentUrl) {
-    // Remove current page
-    ret.pop();
-  }
-
-  return ret;
-}
-
-export function isObject(value) {
-  return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
-
-export function isList(value) {
-  return Array.isArray(value) || value instanceof Set;
-}
-
-/** Get an Array or Set */
-export function toList(value) {
-  return isList(value) ? value : [value];
-}
-
-/**
- * Convert any value to something that can be iterated over with a for key, value loop.
- * Arrays and sets will be converted to a Map of value -> undefined
- */
-export function dict(value) {
-  if (value instanceof Map || isObject(value)) {
-    return value;
-  }
-
-  let list = toList(value);
-  return new Map([...list].map(item => [item, undefined]));
-}
-
-export function deepValue(obj, key) {
-  key = Array.isArray(key) ? key : key.split('.');
-  return key.reduce((subObj, property) => subObj?.[property], obj);
-}
-
-export function number(value, options) {
-  if (typeof value !== 'number' && isNaN(value)) {
-    return value;
-  }
-
-  let lang = options?.lang ?? 'en';
-  if (options?.lang) {
-    delete options.lang;
-  }
-
-  if (!options || Object.keys(options).length === 0) {
-    options = { maximumSignificantDigits: 3 };
-  }
-
-  return Number(value).toLocaleString(lang, options);
-}
-
-export function isNumeric(value) {
-  return typeof value === 'number' || (typeof value === 'string' && !isNaN(value));
-}
-
-export function isString(value) {
-  return typeof value === 'string';
-}
-
-export function isEmpty(value) {
-  return value === null || value === undefined || value === '';
-}
-
-function compare(a, b) {
-  let isEmptyA = isEmpty(a);
-  let isEmptyB = isEmpty(b);
-
-  if (isEmptyA) {
-    if (isEmptyB) {
-      return 0;
-    } else {
-      return 1;
-    }
-  } else if (isEmptyB) {
-    return -1;
-  }
-
-  // Both strings, and at least one non-numeric
-  if (isNumeric(a) || isNumeric(b)) {
-    return a - b;
-  }
-
-  return (a + '').localeCompare(b);
-}
-
-/** Sort an array of objects by one or more of their properties */
-export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
-  let keys = Array.isArray(by) ? by : Object.keys(by);
-
-  return arr.sort((a, b) => {
-    let aValues = keys.map(key => deepValue(a, key) ?? by[key]);
-    let bValues = keys.map(key => deepValue(b, key) ?? by[key]);
-
-    for (let i = 0; i < aValues.length; i++) {
-      let aVal = aValues[i];
-      let bVal = bValues[i];
-      let result = compare(aVal, bVal);
-
-      // They are not equal in terms of comparison OR we're at the last key
-      if (result !== 0 || i === aValues.length - 1) {
-        return result;
-      }
-    }
-  });
-}
-
-/**
- * Group an 11ty collection (or any array of objects with a `data.tags` property) by certain tags.
- * @param {object[]} collection
- * @param { Object<string, string> | string[]} [options] Options object or array of tags to group by.
- * @param {string[] | true} [options.tags] Tags to group by. If true, groups by all tags.
- *                            If not provided/empty, defaults to grouping by page hierarchy, with any pages with more than 1 children becoming groups.
- * @param {string[]} [options.groups] The groups to use if only a subset or a specific order is desired. Defaults to `options.tags`.
- * @param {string[]} [options.titles] Any title overrides for groups.
- * @param {string | false} [options.other="Other"] The title to use for the "Other" group. If `false`, the "Other" group is removed..
- * @returns { Object.<string, object[]> } An object of group ids to arrays of page objects.
- */
-export function groupPages(collection, options = {}, page) {
-  if (!collection) {
-    console.error(`Empty collection passed to groupPages() to group by ${JSON.stringify(options)}`);
-  }
-
-  if (Array.isArray(options)) {
-    options = { tags: options };
-  }
-
-  let { tags, groups, titles = {}, other = 'Other' } = options;
-
-  if (groups === undefined && Array.isArray(tags)) {
-    groups = tags;
-  }
-
-  let grouping;
-
-  if (tags) {
-    grouping = {
-      isGroup: item => undefined,
-      getCandidateGroups: item => item.data.tags,
-      getGroupMeta: group => ({}),
-    };
-  } else {
-    grouping = {
-      isGroup: item => (item.data.children.length >= 2 ? item.page.url : undefined),
-      getCandidateGroups: item => {
-        let parentUrl = item.data.parentUrl;
-        if (page?.url === parentUrl) {
-          return [];
-        }
-        return [parentUrl];
-      },
-      getGroupMeta: group => {
-        let item = byUrl[group] || getCollectionItemFromUrl.call(this, group);
-        return {
-          title: item?.data.title,
-          url: group,
-          item,
-        };
-      },
-      sortGroups: groups => sort(groups.map(url => byUrl[url]).filter(Boolean)).map(item => item.page.url),
-    };
-  }
-
-  let byUrl = {};
-  let byParentUrl = {};
-
-  for (let item of collection) {
-    let url = item.page.url;
-    let parentUrl = item.data.parentUrl;
-
-    byUrl[url] = item;
-
-    if (parentUrl) {
-      byParentUrl[parentUrl] ??= [];
-      byParentUrl[parentUrl].push(item);
-    }
-  }
-
-  let urlToGroups = {};
-
-  for (let item of collection) {
-    let url = item.page.url;
-    let parentUrl = item.data.parentUrl;
-
-    if (grouping.isGroup(item)) {
-      continue;
-    }
-
-    let parentItem = byUrl[parentUrl];
-    if (parentItem && !grouping.isGroup(parentItem)) {
-      // Their parent is also here and is not a group
-      continue;
-    }
-
-    let candidateGroups = grouping.getCandidateGroups(item);
-
-    if (groups) {
-      candidateGroups = candidateGroups.filter(group => groups.includes(group));
-    }
-
-    urlToGroups[url] ??= [];
-
-    for (let group of candidateGroups) {
-      urlToGroups[url].push(group);
-    }
-  }
-
-  let ret = {};
-
-  for (let url in urlToGroups) {
-    let groups = urlToGroups[url];
-    let item = byUrl[url];
-
-    if (groups.length === 0) {
-      // Not filtered out but also not categorized
-      groups = ['other'];
-    }
-
-    for (let group of groups) {
-      ret[group] ??= [];
-      ret[group].push(item);
-
-      if (!ret[group].meta) {
-        if (group === 'other') {
-          ret[group].meta = { title: other };
-        } else {
-          ret[group].meta = grouping.getGroupMeta(group);
-          ret[group].meta.title = titles[group] ?? ret[group].meta.title ?? capitalize(group);
-        }
-      }
-    }
-  }
-
-  if (other === false) {
-    delete ret.other;
-  }
-
-  // Sort
-  let sortedGroups = groups ?? grouping.sortGroups?.(Object.keys(ret));
-
-  if (sortedGroups) {
-    ret = sortObject(ret, sortedGroups);
-  } else {
-    // At least make sure other is last
-    if (ret.other) {
-      let otherGroup = ret.other;
-      delete ret.other;
-      ret.other = otherGroup;
-    }
-  }
-
-  Object.defineProperty(ret, 'meta', {
-    value: {
-      groupCount: Object.keys(ret).length,
-    },
-    enumerable: false,
-  });
-
-  return ret;
-}
-
-/**
- * Sort an object by its keys
- * @param {*} obj
- * @param {function | string[]} order
- */
-function sortObject(obj, order) {
-  let ret = {};
-  let sortedKeys = Array.isArray(order) ? order : Object.keys(obj).sort(order);
-
-  for (let key of sortedKeys) {
-    if (key in obj) {
-      ret[key] = obj[key];
-    }
-  }
-
-  // Add any keys that weren't in the order
-  for (let key in obj) {
-    if (!(key in ret)) {
-      ret[key] = obj[key];
-    }
-  }
-
-  return ret;
-}
-
-function capitalize(str) {
-  str += '';
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
-const IDENTITY = x => x;
-
-/**
- * Helper to print out one or more HTML attributes, especially conditional ones.
- * Usage in 11ty:
- * - Single attribute: `<foo{{ value | attr(name) }}>`
- * - Multiple attributes: `<foo{{ { name1: value1, name2: value2 } | attr }}>`
- *
- * @overload
- * @param {any} value - The attribute value If falsey, the attribute is not printed. If `true` the attribute is printed without a value.
- * @param {string} name - The name of the attribute
- *
- * @overload
- * @param {Object<string, any>} obj - Map of attribute names to values
- *
- * @returns {string} The attribute string. No `| safe` is needed.
- */
-export function attr(value, name) {
-  const safe = this?.env.filters.safe ?? IDENTITY;
-
-  if (arguments.length === 1 && value && typeof value === 'object') {
-    // Called with a single object argument of names to values
-    let ret = Object.entries(obj)
-      .map(([name, value]) => attr(value, name))
-      .join('');
-    return safe(ret);
-  }
-
-  if (!value) {
-    // false, "", null, undefined
-    return '';
-  }
-
-  let ret = ' ' + name + (value === true ? '' : `="${value}"`);
-
-  return safe(ret);
-}
-
-/**
- * Format an object as JSON, with formatting & indentation (unlike the default `dump` filter)
- * @param {*} value
- * @returns {string}
- */
-export function json(value) {
-  return JSON.stringify(value, null, 2);
-}
diff --git a/packages/webawesome/docs/assets/components/scoped.js b/packages/webawesome/docs/assets/components/scoped.js
deleted file mode 100644
index a4c777119..000000000
--- a/packages/webawesome/docs/assets/components/scoped.js
+++ /dev/null
@@ -1,172 +0,0 @@
-/**
- * Low-level utility to encapsulate a bit of HTML (mainly to apply certain stylesheets to it without them leaking to the rest of the page)
- * Usage: <wa-scoped><template><!-- your HTML here --></template></wa-scoped>
- */
-import { discover } from '/dist/webawesome.js';
-
-const imports = new Set();
-const fontFaceRules = new Set();
-
-export default class WaScoped extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-
-    this.observer = new MutationObserver(records => this.render(records));
-    this.observer.observe(this, { childList: true, subtree: true, characterData: true });
-  }
-
-  connectedCallback() {
-    this.render();
-    this.ownerDocument.documentElement.addEventListener('wa-color-scheme-change', e =>
-      this.#applyDarkMode(e.detail.dark),
-    );
-  }
-
-  render(records) {
-    this.observer.takeRecords();
-    this.observer.disconnect();
-
-    this.shadowRoot.innerHTML = '';
-
-    // To avoid mutating this.childNodes while iterating over it
-    let nodes = [];
-
-    for (let template of this.childNodes) {
-      if (!(template instanceof HTMLTemplateElement)) {
-        if (template.nodeType === Node.ELEMENT_NODE) {
-          console.warn('<wa-scoped> can only contain <template> elements');
-        }
-        continue;
-      }
-
-      if (template.content.childNodes.length > 0) {
-        nodes.push(template.content.cloneNode(true));
-      } else if (template.childNodes.length > 0) {
-        // Fake template, suck its children out of the light DOM
-        nodes.push(...template.childNodes);
-      }
-    }
-
-    this.shadowRoot.append(...nodes);
-
-    this.#fixStyles();
-    this.#applyDarkMode();
-
-    discover(this.shadowRoot);
-
-    this.observer.observe(this, { childList: true, subtree: true, characterData: true });
-  }
-
-  #applyDarkMode(isDark = getComputedStyle(this).colorScheme === 'dark') {
-    // Hack to make dark mode work
-    // NOTE If any child nodes actually have .wa-dark, this will override it
-    for (let node of this.shadowRoot.children) {
-      node.classList.toggle('wa-dark', isDark);
-    }
-    this.classList.toggle('wa-dark', isDark);
-  }
-
-  /**
-   * @font-face does not work in shadow DOM in Chrome & FF, as of March 2025 https://issues.chromium.org/issues/41085401
-   * This works around this issue by traversing the shadow DOM CSS looking
-   * for @font-face rules or CSS imports to known font providers and copies them to the main document
-   */
-  async #fixStyles() {
-    let styleElements = [...this.shadowRoot.querySelectorAll('link[rel="stylesheet"], style')];
-
-    let loadStates = styleElements.map(element => {
-      try {
-        if (element.sheet?.cssRules) {
-          // Already loaded
-          return Promise.resolve(element.sheet);
-        }
-      } catch (e) {
-        // CORS
-        return Promise.resolve(null);
-      }
-
-      return new Promise((resolve, reject) => {
-        element.addEventListener('load', e => resolve(element.sheet));
-        element.addEventListener('error', e => reject(null));
-      });
-    });
-
-    await Promise.allSettled(loadStates);
-
-    let fontRules = findFontFaceRules(...this.shadowRoot.styleSheets);
-
-    if (!fontRules.length) {
-      return;
-    }
-
-    let doc = this.ownerDocument;
-    // Why not adoptedStyleSheets? Can't have @import in those yet
-    let id = `wa-scoped-hoisted-fonts`;
-    let style = doc.head.querySelector('style#' + id);
-    if (!style) {
-      style = Object.assign(doc.createElement('style'), { id, textContent: ' ' });
-      doc.head.append(style);
-    }
-    let sheet = style.sheet;
-
-    for (let rule of fontRules) {
-      let cssText = rule.cssText;
-      if (rule.type === CSSRule.FONT_FACE_RULE) {
-        if (fontFaceRules.has(cssText)) {
-          continue;
-        }
-        fontFaceRules.add(cssText);
-        sheet.insertRule(cssText);
-      } else if (rule.type === CSSRule.IMPORT_RULE) {
-        if (imports.has(rule.href)) {
-          continue;
-        }
-        imports.add(rule.href);
-        sheet.insertRule(cssText, 0);
-      }
-    }
-  }
-
-  static observedAttributes = [];
-}
-
-customElements.define('wa-scoped', WaScoped);
-
-export const WEB_FONT_HOSTS = [
-  'fonts.googleapis.com',
-  'fonts.gstatic.com',
-  'use.typekit.net',
-  'fonts.adobe.com',
-  'kit.fontawesome.com',
-  'pro.fontawesome.com',
-  'cdn.materialdesignicons.com',
-];
-
-function findFontFaceRules(...stylesheets) {
-  let ret = [];
-
-  for (let sheet of stylesheets) {
-    let rules;
-    try {
-      rules = sheet.cssRules;
-    } catch (e) {
-      // CORS
-      continue;
-    }
-
-    for (let rule of rules) {
-      if (rule.type === CSSRule.FONT_FACE_RULE) {
-        ret.push(rule);
-      } else if (rule.type === CSSRule.IMPORT_RULE) {
-        if (WEB_FONT_HOSTS.some(host => rule.href.includes(host))) {
-          ret.push(rule);
-        } else if (rule.styleSheet) {
-          ret.push(...findFontFaceRules(rule.styleSheet));
-        }
-      }
-    }
-  }
-
-  return ret;
-}
diff --git a/packages/webawesome/docs/assets/data/colors.js b/packages/webawesome/docs/assets/data/colors.js
deleted file mode 100644
index 2073f902d..000000000
--- a/packages/webawesome/docs/assets/data/colors.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Data related to palettes and colors.
- * Must work in both browser and Node.js
- */
-
-export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95'];
-
-export const hueRanges = {
-  red: { min: 5, max: 35 }, // 30
-  orange: { min: 35, max: 60 }, // 25
-  yellow: { min: 60, max: 112 }, // 45
-  green: { min: 112, max: 170 }, // 55
-  cyan: { min: 170, max: 220 }, // 50
-  blue: { min: 220, max: 265 }, // 45
-  indigo: { min: 265, max: 290 }, // 25
-  purple: { min: 290, max: 320 }, // 30
-  pink: { min: 320, max: 365 }, // 45
-};
-
-export const hues = Object.keys(hueRanges);
-export const allHues = [...hues, 'gray'];
-
-export const moreHue = {
-  red: 'Redder',
-  orange: 'More orange', // https://www.reddit.com/r/grammar/comments/u9n0uo/is_it_oranger_or_more_orange/
-  yellow: 'Yellower',
-  green: 'Greener',
-  cyan: 'More cyan',
-  blue: 'Bluer',
-  indigo: 'More indigo',
-  pink: 'Pinker',
-};
-
-/**
- * Max gray chroma (% of chroma of undertone) per hue
- */
-export const maxGrayChroma = {
-  red: 0.2,
-  orange: 0.2,
-  yellow: 0.25,
-  green: 0.25,
-  cyan: 0.3,
-  blue: 0.35,
-  indigo: 0.35,
-  purple: 0.3,
-  pink: 0.25,
-};
diff --git a/packages/webawesome/docs/assets/data/fonts.js b/packages/webawesome/docs/assets/data/fonts.js
deleted file mode 100644
index 263e9cab8..000000000
--- a/packages/webawesome/docs/assets/data/fonts.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { deepEntries } from '../scripts/util/deep.js';
-import { themeConfig } from './theming.js';
-import themes from '/assets/data/themes.js';
-
-/**
- * Map of font pairings (body + heading) to the first theme that uses them.
- */
-export const pairings = {};
-
-// NOTE Do not use Symbols, we want these to be enumerable when used as keys
-export const sameAs = { body: '$body' };
-
-export const fontNames = {
-  'system-ui': 'OS Default',
-  'ui-serif': 'OS Default Serif',
-  'ui-sans-serif': 'OS Default Sans Serif',
-  'ui-monospace': 'OS Default Code Font',
-  'ui-monospace': 'OS Default Code Font',
-};
-
-export function defaultTitle(fonts) {
-  let { body, heading = sameAs.body } = fonts;
-  let names = [body];
-
-  if (heading !== sameAs.body) {
-    names.unshift(heading);
-  }
-
-  return names.map(name => fontNames[name] ?? name).join(' • ');
-}
-
-for (let id in themes) {
-  let theme = themes[id];
-  let { fonts } = theme;
-
-  if (fonts) {
-    let { body, heading = sameAs.body } = fonts;
-
-    pairings[body] ??= {};
-    pairings[body][heading] ??= {
-      id, // First theme that uses this pairing
-      ids: new Set([id]), // All themes that use this pairing
-      url: themeConfig.typography.url(id), // Stylesheet URL
-      fonts,
-      get title() {
-        return defaultTitle(this.fonts);
-      },
-    };
-    pairings[body][heading].ids.add(id);
-  }
-}
-
-export const pairingsEntries = deepEntries(pairings, {
-  descend(value, key, parent, path) {
-    if (value?.fonts) {
-      return false; // Don't recurse into pairing objects
-    }
-  },
-  filter(value, key, parent, path) {
-    // Only keep 2 levels (body → heading → pairing)
-    return path.length === 1;
-  },
-});
-
-export const pairingsList = pairingsEntries.map(arg => arg.at(-1));
diff --git a/packages/webawesome/docs/assets/data/icons.js b/packages/webawesome/docs/assets/data/icons.js
deleted file mode 100644
index 61a78295c..000000000
--- a/packages/webawesome/docs/assets/data/icons.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export const iconLibraries = {
-  default: {
-    title: 'Font Awesome',
-    family: ['classic', 'sharp', 'duotone', 'sharp-duotone'],
-    style: ['solid', 'regular', 'light', 'thin'],
-  },
-};
diff --git a/packages/webawesome/docs/assets/data/index.js b/packages/webawesome/docs/assets/data/index.js
deleted file mode 100644
index f544aeb11..000000000
--- a/packages/webawesome/docs/assets/data/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from './colors.js';
-// export * from './fonts.js';
-export * from './icons.js';
-export * from './theming.js';
-
-export const cdnUrl = globalThis.document ? document.documentElement.dataset.cdnUrl : '/dist/';
diff --git a/packages/webawesome/docs/assets/data/palettes.js.njk b/packages/webawesome/docs/assets/data/palettes.js.njk
deleted file mode 100644
index b503f4425..000000000
--- a/packages/webawesome/docs/assets/data/palettes.js.njk
+++ /dev/null
@@ -1,57 +0,0 @@
----
-layout: null
-permalink: '/assets/data/palettes.js'
-eleventyExcludeFromCollections: true
----
-import Color from 'https://colorjs.io/dist/color.js';
-
-const palettes = {
-{%- for palette in collections.palette | sort %}
-{%- if not palette.data.unlisted %}
-  {% set paletteId = palette.fileSlug -%}
-  {%- set colors = palettes[paletteId] -%}
-  '{{ paletteId }}': {
-    id: '{{ paletteId }}',
-    title: '{{ palette.data.title }}',
-    colors: {
-      {% for hue, tints in colors -%}
-        '{{ hue }}': {
-          {% for tint, value in tints -%}
-            {%- if tint != '05' -%}
-              '{{ '05' if tint == '5' else tint }}': '{{ value | safe }}',
-            {%- endif %}
-          {% endfor %}
-
-          get key() {
-            return this[this.maxChromaTint];
-          }
-        },
-      {% endfor -%} // end colors
-    }
-  }, // end palette
-{%- endif -%}
-{% endfor %}
-};
-
-// Create Color instances for each color
-for (let palette in palettes) {
-  for (let hue in palettes[palette].colors) {
-    let scale = palettes[palette].colors[hue];
-
-    for (let tint in scale) {
-      let color = scale[tint];
-      try {
-        if (Array.isArray(color)) {
-          scale[tint] = new Color('oklch', color);
-        }
-        else if (typeof color === 'string' && isNaN(color)) {
-          scale[tint] = new Color(color);
-        }
-      } catch (e) {
-        console.error(e);
-      }
-    }
-  }
-}
-
-export default palettes;
diff --git a/packages/webawesome/docs/assets/data/themes.js.njk b/packages/webawesome/docs/assets/data/themes.js.njk
deleted file mode 100644
index 423710d32..000000000
--- a/packages/webawesome/docs/assets/data/themes.js.njk
+++ /dev/null
@@ -1,27 +0,0 @@
----
-layout: null
-permalink: '/assets/data/themes.js'
-eleventyExcludeFromCollections: true
----
-
-export default {
-{%- for theme in collections.theme | sort %}
-{%- if not theme.data.unlisted and theme.fileSlug !== 'edit' and theme.fileSlug !== 'custom' %}
-  {% set themeId = theme.fileSlug -%}
-  {%- set themeMeta = themes[themeId] -%}
-  '{{ themeId }}': {
-    id: '{{ themeId }}',
-    title: '{{ theme.data.title }}',
-    palette: '{{ themeMeta.palette }}',
-    brand: '{{ themeMeta.brand }}',
-    isPro: {{ theme.data.isPro or 'pro' in theme.data.tags }},
-    fonts: {{ (theme.data.fonts | json or 'null') | safe }},
-    icons: {{ (themeMeta.icons | json or 'null') | safe }},
-    rounding: {{ themeMeta.rounding }},
-    spacing: {{ themeMeta.spacing }},
-    borderWidth: {{ themeMeta.borderWidth }},
-    dimension: {{ (theme.data.dimension or themeMeta.dimension or false) | json | safe }},
-  },
-{%- endif %}
-{% endfor %}
-};
diff --git a/packages/webawesome/docs/assets/data/theming.js b/packages/webawesome/docs/assets/data/theming.js
deleted file mode 100644
index 1fe14251d..000000000
--- a/packages/webawesome/docs/assets/data/theming.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import { deepEach, isPlainObject } from '../scripts/util/deep.js';
-
-/**
- * Data related to themes, theme remixing
- * Must work in both browser and Node.js
- */
-export const cdnUrl = globalThis.document ? document.documentElement.dataset.cdnUrl : '/dist/';
-
-// This should eventually replace all uses of `urls` and `themeParams`
-export const themeConfig = {
-  base: { url: id => `styles/themes/${id}.css`, default: 'default' },
-  colors: {
-    url: id => `styles/themes/${id}/color.css`,
-    docs: '/docs/themes/',
-    icon: 'palette',
-    default() {
-      return this.base;
-    },
-  },
-  palette: {
-    url: id => `styles/color/${id}.css`,
-    docs: '/docs/palette/',
-    icon: 'swatchbook',
-    default(baseTheme) {
-      return baseTheme?.palette;
-    },
-  },
-  brand: {
-    url: id => `styles/brand/${id}.css`,
-    icon: 'droplet',
-    default(baseTheme) {
-      return baseTheme?.brand;
-    },
-  },
-  typography: {
-    url: id => `styles/themes/${id}/typography.css`,
-    docs: '/docs/themes/',
-    icon: 'font-case',
-    default() {
-      return this.base;
-    },
-  },
-  rounding: {
-    cssProperty: '--wa-border-radius-scale',
-    default(baseTheme) {
-      return baseTheme?.rounding ?? 1;
-    },
-  },
-  spacing: {
-    cssProperty: '--wa-space-scale',
-    default(baseTheme) {
-      return baseTheme?.spacing ?? 1;
-    },
-  },
-  borderWidth: {
-    cssProperty: '--wa-border-width-scale',
-    default(baseTheme) {
-      return baseTheme?.borderWidth ?? 1;
-    },
-  },
-  dimensionality: {
-    url: id => `styles/themes/${id}/dimension.css`,
-    docs: '/docs/themes/',
-    icon: 'cube',
-    default() {
-      return this.base;
-    },
-  },
-};
-
-export function getPath(key) {
-  if (key.startsWith('icon-')) {
-    // TODO detect what the nested prefixes are from theme config metadata
-    return ['icon', ...key.slice(5)];
-  }
-}
-
-// Shallow remixing params in correct order
-// base must be first. brand needs to come after palette, which needs to come after colors.
-export const themeParams = Object.keys(themeConfig).filter(aspect => themeConfig[aspect].url);
-
-export const urls = themeParams.reduce((acc, aspect) => {
-  acc[aspect] = themeConfig[aspect].url;
-  return acc;
-}, {});
-
-export const themeDefaults = { ...themeConfig };
-
-deepEach(themeDefaults, (value, key, parent, path) => {
-  if (isPlainObject(value)) {
-    // Replace w/ default value or shallow clone
-    return value.default ?? { ...value };
-  }
-});
-
-export const selectors = {
-  palette: id =>
-    [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${id}`].join(',\n'),
-  theme: id => [':where(:root)', ':host', `.wa-theme-${id}`].join(',\n'),
-};
diff --git a/packages/webawesome/docs/assets/examples/page/demo-1.html b/packages/webawesome/docs/assets/examples/page/demo-1.html
deleted file mode 100644
index 7a4688b34..000000000
--- a/packages/webawesome/docs/assets/examples/page/demo-1.html
+++ /dev/null
@@ -1,289 +0,0 @@
-<!doctype html>
-<html lang="en" class="wa-cloak">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Web Awesome Page Demo 1</title>
-    <link rel="stylesheet" href="/dist/styles/themes/default.css" />
-    <link rel="stylesheet" href="/dist/styles/webawesome.css" />
-    <script type="module" src="/dist/webawesome.loader.js"></script>
-  </head>
-  <body>
-    <wa-page mobile-breakpoint="920">
-      <div slot="banner" class="wa-body-s">
-        <a href="#" class="wa-cluster wa-align-items-baseline wa-gap-xs" style="flex-wrap: nowrap">
-          <wa-icon name="gift"></wa-icon>
-          <span>Give a Hoot for the Holidays: Donate now and double your impact.</span>
-        </a>
-      </div>
-      <header slot="header" class="wa-split">
-        <div class="wa-cluster">
-          <wa-icon name="feather-pointed" style="color: var(--wa-color-brand-fill-loud); font-size: 1.5em"></wa-icon>
-          <span id="brand-name" class="wa-heading-s wa-desktop-only">Audubon Worldwide</span>
-          <a href="#">Our Work</a>
-          <a href="#">About Us</a>
-          <a href="#">Discover</a>
-          <a href="#">Get Involved</a>
-        </div>
-        <div class="wa-cluster wa-gap-xs">
-          <wa-button size="small" variant="brand" appearance="outlined">Find Your Local Audubon</wa-button>
-          <wa-button size="small" variant="brand">Donate</wa-button>
-        </div>
-      </header>
-      <nav slot="subheader">
-        <div class="wa-cluster" style="flex-wrap: nowrap">
-          <wa-button data-toggle-nav appearance="plain" size="small">
-            <wa-icon name="bars" label="Menu"></wa-icon>
-          </wa-button>
-          <wa-breadcrumb style="font-size: var(--wa-font-size-s)">
-            <wa-breadcrumb-item>Field Guides</wa-breadcrumb-item>
-            <wa-breadcrumb-item>Owls</wa-breadcrumb-item>
-            <wa-breadcrumb-item>Great Horned Owl</wa-breadcrumb-item>
-          </wa-breadcrumb>
-        </div>
-        <wa-input id="search" class="wa-desktop-only" placeholder="Search" size="small" style="max-inline-size: 12rem">
-          <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
-        </wa-input>
-      </nav>
-      <nav slot="navigation-header">
-        <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" label=""></wa-avatar>
-          <div class="wa-stack wa-gap-3xs">
-            <span class="wa-heading-s">Great Horned Owl</span>
-            <span class="wa-caption-s" lang="la"><em>Bubo virginianus</em></span>
-          </div>
-        </div>
-      </nav>
-      <nav slot="navigation">
-        <a href="#identification">Identification</a>
-        <a href="#range">Range and Habitat</a>
-        <a href="#behavior">Behavior</a>
-        <a href="#conservation">Conservation</a>
-      </nav>
-      <nav slot="navigation-footer">
-        <a href="#" class="wa-flank">
-          <wa-icon name="camera"></wa-icon>
-          <span>Photo Gallery</span>
-        </a>
-        <a href="#" class="wa-flank">
-          <wa-icon name="map-location-dot"></wa-icon>
-          <span>Interactive Range Map</span>
-        </a>
-      </nav>
-      <header slot="main-header">
-        <div
-          class="wa-flank:end wa-border-radius-l wa-dark"
-          style="
-            background-color: var(--wa-color-surface-lowered);
-            --content-percentage: 35%;
-            padding: var(--wa-space-m);
-          "
-        >
-          <div class="wa-stack" style="margin: var(--wa-space-2xl)">
-            <h1>Great Horned Owl</h1>
-            <wa-divider></wa-divider>
-            <div class="wa-cluster wa-gap-xs">
-              <wa-tag size="small">Owls</wa-tag>
-              <wa-tag size="small">Birds of Prey</wa-tag>
-              <wa-tag size="small">Pleistocene Birds</wa-tag>
-            </div>
-            <div class="wa-flank">
-              <wa-icon name="ruler"></wa-icon>
-              <span class="wa-caption-m">L 21.5" | WS 48.5"</span>
-            </div>
-            <div class="wa-flank">
-              <wa-icon name="earth-americas"></wa-icon>
-              <span class="wa-caption-m"
-                >North America (Widespread), Central America (Limited), South America (Limited)</span
-              >
-            </div>
-            <div class="wa-flank">
-              <wa-icon name="shield-heart"></wa-icon>
-              <span class="wa-caption-m">Least Concern</span>
-            </div>
-          </div>
-          <div class="wa-frame" style="border-radius: var(--wa-border-radius-l); max-inline-size: 40ch">
-            <img src="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" />
-          </div>
-        </div>
-      </header>
-      <main class="wa-body-l">
-        <h2 id="identification">Identification</h2>
-        <p>
-          Lorem ipsum odor amet, consectetuer adipiscing elit. Eget habitant scelerisque lectus ultrices nascetur
-          aliquet sapien primis. Cursus sapien fusce semper nulla elit sociosqu lectus per sem. Sem ad porttitor dictum
-          nisl pharetra tortor convallis. Sit molestie hendrerit porta dictum tortor posuere euismod magna. Mauris
-          suspendisse pharetra finibus; eleifend etiam ridiculus.
-        </p>
-        <h2 id="range">Range and Habitat</h2>
-        <p>
-          Diam sed ipsum pretium porttitor class cubilia elementum. Blandit felis ligula habitant ultricies vulputate
-          rutrum lacus commodo pulvinar. Nostra semper placerat lectus in dis eu. Sagittis ipsum placerat rhoncus lacus
-          id eget. Erat pharetra aptent enim, augue accumsan ultricies inceptos habitasse. Senectus id maximus
-          parturient tellus; fermentum posuere vulputate luctus. Ac tempus dapibus vehicula ligula ullamcorper sit duis.
-        </p>
-        <h2 id="behavior">Behavior</h2>
-        <p>
-          Erat vitae luctus arcu taciti malesuada pretium arcu justo primis. Cubilia vitae maecenas congue velit id
-          netus arcu. Dictum vel pellentesque taciti fermentum risus consectetur amet. Faucibus commodo habitasse sem
-          maximus praesent purus, dignissim tristique porta. Platea magna justo ipsum ut metus ac facilisi. Imperdiet
-          laoreet pharetra maximus lacus tortor suscipit. Nam quisque iaculis orci porttitor pellentesque rhoncus.
-          Molestie sagittis tincidunt quisque nisi non urna conubia.
-        </p>
-        <h2 id="conservation">Conservation</h2>
-        <p>
-          Nullam magna quam quisque eu varius integer. Inceptos donec facilisi risus himenaeos semper mollis habitasse.
-          Vehicula lacus vivamus euismod pharetra mollis dictum. Ante ex tortor elementum eleifend habitasse orci
-          aliquam. Fames erat senectus fames etiam dapibus cursus.
-        </p>
-      </main>
-      <footer slot="main-footer">
-        <section>
-          <h2 class="wa-heading-m">Sources</h2>
-          <ul class="wa-body-s">
-            <li>
-              <cite
-                ><a href="https://www.audubon.org/field-guide/bird/great-horned-owl" target="_blank" rel="noopener"
-                  >Great Horned Owl</a
-                ></cite
-              >, National Audubon Society. Retrieved 5 December 2024.
-            </li>
-            <li>
-              <cite
-                ><a href="https://www.allaboutbirds.org/guide/Great_Horned_Owl/" target="_blank" rel="noopener"
-                  >Great Horned Owl</a
-                ></cite
-              >, All About Birds by CornellLab. Retrieved 5 December 2024.
-            </li>
-            <li>Armistead, G. L. (2015). <cite>Field guide to birds of Pennsylvania</cite>. Scott & Nix, Inc.</li>
-          </ul>
-        </section>
-      </footer>
-      <aside slot="aside" class="wa-desktop-only">
-        <h2 class="wa-heading-m">Discover More Birds</h2>
-        <wa-card>
-          <div slot="media" class="wa-frame">
-            <img src="https://images.unsplash.com/photo-1635254859323-65b78408dcca?q=20" alt="" />
-          </div>
-          <div class="wa-stack wa-gap-3xs">
-            <span class="wa-heading-s">Long-eared Owl</span>
-            <span class="wa-caption-s" lang="la"><em>Asio otus</em></span>
-          </div>
-        </wa-card>
-        <wa-card>
-          <div slot="media" class="wa-frame">
-            <img src="https://images.unsplash.com/photo-1661350356618-f5915c7b6a3c?q=20" alt="" />
-          </div>
-          <div class="wa-stack wa-gap-3xs">
-            <span class="wa-heading-s">Northen Hawk Owl</span>
-            <span class="wa-caption-s" lang="la"><em>Surnia ulula</em></span>
-          </div>
-        </wa-card>
-        <wa-card>
-          <div slot="media" class="wa-frame">
-            <img src="https://images.unsplash.com/photo-1660307777355-f08bced145d3?q=20" alt="" />
-          </div>
-          <div class="wa-stack wa-gap-3xs">
-            <span class="wa-heading-s">Golden Eagle</span>
-            <span class="wa-caption-s" lang="la"><em>Aquila chrysaetos</em></span>
-          </div>
-        </wa-card>
-      </aside>
-      <footer slot="footer" class="wa-grid wa-gap-xl">
-        <div class="wa-cluster" style="flex-wrap: nowrap">
-          <wa-icon name="feather-pointed" style="font-size: 1.5em"></wa-icon>
-          <span class="wa-heading-s">Audubon Worldwide</span>
-        </div>
-        <div class="wa-stack">
-          <h3 class="wa-heading-xs">Our Work</h3>
-          <a href="#">Habitat Restoration</a>
-          <a href="#">Migration Science</a>
-          <a href="#">Advocacy</a>
-        </div>
-        <div class="wa-stack">
-          <h3 class="wa-heading-xs">About Us</h3>
-          <a href="#">Our History</a>
-          <a href="#">Leadership</a>
-          <a href="#">Fiscal Reports</a>
-        </div>
-        <div class="wa-stack">
-          <h3 class="wa-heading-xs">Discover</h3>
-          <a href="#">Field Guides</a>
-          <a href="#">Photo Search</a>
-          <a href="#">Gear and Resources</a>
-        </div>
-        <div class="wa-stack">
-          <h3 class="wa-heading-xs">Get Involved</h3>
-          <a href="#">Adopt a Bird</a>
-          <a href="#">Your Local Audubon</a>
-          <a href="#">Youth Audubon Camps</a>
-        </div>
-      </footer>
-    </wa-page>
-
-    <style>
-      wa-page {
-        --menu-width: 15rem;
-        --aside-width: 15rem;
-      }
-      wa-page[view='desktop'] {
-        [slot*='navigation'] {
-          border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-        }
-      }
-      wa-page[view='mobile'] {
-        --menu-width: auto;
-        --aside-width: auto;
-      }
-
-      [slot='banner'] {
-        --wa-color-text-link: var(--wa-color-neutral-on-loud);
-        background-color: var(--wa-color-neutral-fill-loud);
-      }
-      [slot='header'] {
-        --wa-link-decoration-default: none;
-        border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-      }
-      [slot*='header'] a {
-        font-weight: var(--wa-font-weight-action);
-      }
-      [slot='subheader'] {
-        background-color: var(--wa-color-surface-lowered);
-        border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-      }
-      [slot='navigation-header'] {
-        border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-      }
-
-      [slot*='navigation'] a {
-        --wa-color-text-link: var(--wa-color-text-normal);
-      }
-      [slot='navigation-footer'] {
-        border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-
-        .wa-flank {
-          --flank-size: 1.25em;
-        }
-      }
-      [slot='main-header'],
-      main,
-      [slot='main-footer'] {
-        max-inline-size: 60rem;
-        margin-inline: auto;
-      }
-      [slot='main-footer'] {
-        border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-      }
-      [slot='footer'] {
-        --wa-color-text-link: var(--wa-color-text-quiet);
-        background-color: var(--wa-color-surface-lowered);
-        font-size: var(--wa-font-size-s);
-      }
-    </style>
-
-    <script>
-      const sectionAnchors = document.querySelectorAll("[slot*='navigation'] a[href*='#']");
-      sectionAnchors.forEach(sectionAnchor => sectionAnchor.setAttribute('data-drawer', 'close'));
-    </script>
-  </body>
-</html>
diff --git a/packages/webawesome/docs/assets/examples/page/demo-2.html b/packages/webawesome/docs/assets/examples/page/demo-2.html
deleted file mode 100644
index 56d29494d..000000000
--- a/packages/webawesome/docs/assets/examples/page/demo-2.html
+++ /dev/null
@@ -1,484 +0,0 @@
-<!doctype html>
-<html lang="en" class="wa-cloak">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Web Awesome Page Demo 2</title>
-    <link rel="stylesheet" href="/dist/styles/themes/default.css" />
-    <link rel="stylesheet" href="/dist/styles/webawesome.css" />
-    <script type="module" src="/dist/webawesome.loader.js"></script>
-  </head>
-  <body>
-    <wa-page class="wa-dark">
-      <header slot="header">
-        <div class="wa-cluster">
-          <wa-button data-toggle-nav appearance="plain" size="small">
-            <wa-icon name="bars" label="Menu"></wa-icon>
-          </wa-button>
-          <wa-icon name="record-vinyl"></wa-icon>
-          <span class="wa-heading-m">radiogaga</span>
-        </div>
-        <wa-input id="search-header" placeholder="Search" class="wa-desktop-only" style="max-inline-size: 100%">
-          <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
-        </wa-input>
-        <div class="wa-cluster">
-          <wa-button appearance="outlined">Log In</wa-button>
-          <wa-button>Sign Up</wa-button>
-        </div>
-      </header>
-      <div slot="navigation-header" class="wa-split">
-        <wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%" class="wa-mobile-only">
-          <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
-        </wa-input>
-        <div class="wa-split">
-          <h2 class="wa-heading-s">For You</h2>
-          <wa-button id="settings" appearance="plain" size="small">
-            <wa-icon name="gear" label="Settings"></wa-icon>
-          </wa-button>
-          <wa-tooltip for="settings">Settings</wa-tooltip>
-        </div>
-      </div>
-      <nav slot="navigation">
-        <h3 class="wa-heading-xs">Discover</h3>
-        <ul class="wa-stack wa-gap-0">
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="house"></wa-icon>
-              <span>Home</span>
-            </a>
-          </li>
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="star"></wa-icon>
-              <span>New</span>
-            </a>
-          </li>
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="tower-broadcast"></wa-icon>
-              <span>Stations</span>
-            </a>
-          </li>
-        </ul>
-        <h3 class="wa-heading-xs">Library</h3>
-        <ul class="wa-stack wa-gap-0">
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="heart"></wa-icon>
-              <span>Favorites</span>
-            </a>
-          </li>
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="bars-staggered"></wa-icon>
-              <span>Playlists</span>
-            </a>
-          </li>
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="microphone-lines"></wa-icon>
-              <span>Artists</span>
-            </a>
-          </li>
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="layer-group"></wa-icon>
-              <span>Albums</span>
-            </a>
-          </li>
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="podcast"></wa-icon>
-              <span>Podcasts</span>
-            </a>
-          </li>
-        </ul>
-        <h3 class="wa-heading-xs">Recently Played</h3>
-        <ul id="recent" class="wa-stack wa-gap-0">
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="radio" style="background: var(--wa-color-red-90); color: var(--wa-color-red-60)"></wa-icon>
-              <span>Lo-Fi Station</span>
-            </a>
-          </li>
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon
-                name="font-awesome"
-                style="background: var(--wa-color-blue-30); color: var(--wa-color-yellow-90)"
-              ></wa-icon>
-              <span>Podcast Awesome</span>
-            </a>
-          </li>
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon
-                name="seedling"
-                style="background: var(--wa-color-green-70); color: var(--wa-color-green-90)"
-              ></wa-icon>
-              <div class="wa-stack wa-gap-0">
-                <span>Seasons</span>
-                <span class="wa-caption-s">Blister Soul</span>
-              </div>
-            </a>
-          </li>
-        </ul>
-      </nav>
-      <div slot="main-header">
-        <wa-button id="back" appearance="plain" size="small">
-          <wa-icon name="chevron-left" label="Back"></wa-icon>
-        </wa-button>
-        <wa-tooltip for="back" placement="bottom" distance="2">Back</wa-tooltip>
-        <div class="wa-cluster">
-          <wa-button id="favorite" appearance="plain" size="small">
-            <wa-icon name="heart" label="Favorite" variant="regular"></wa-icon>
-          </wa-button>
-          <wa-tooltip for="favorite" placement="bottom" distance="2">Favorite</wa-tooltip>
-          <wa-button id="options" appearance="plain" size="small">
-            <wa-icon name="ellipsis" label="Options"></wa-icon>
-          </wa-button>
-          <wa-tooltip for="options" placement="bottom" distance="2">Options</wa-tooltip>
-        </div>
-      </div>
-      <main>
-        <div class="wa-stack wa-gap-3xl">
-          <div class="wa-flank wa-gap-3xl" style="--content-percentage: 40%">
-            <div class="wa-frame wa-border-radius-l" style="max-inline-size: 40ch">
-              <img
-                src="https://images.unsplash.com/photo-1732430579016-8d5e5ebd3c99?q=20"
-                alt="Home for the Holidays album artwork"
-              />
-            </div>
-            <div class="wa-split:column wa-align-items-start">
-              <div class="wa-stack" style="margin-block: auto">
-                <h1 class="wa-heading-3xl">Home for the Holidays</h1>
-                <a href="#" class="wa-heading-m">The Shire Choir</a>
-                <div class="wa-cluster wa-caption-m wa-gap-2xs">
-                  <span>Holiday</span>
-                  <span>&bull;</span>
-                  <span>2024</span>
-                  <span>&bull;</span>
-                  <span>12 songs, 41 minutes 9 seconds</span>
-                </div>
-              </div>
-              <div id="play-controls" class="wa-split wa-gap-xl">
-                <div class="wa-cluster wa-gap-xl">
-                  <wa-button variant="brand" size="large">
-                    <wa-icon name="play" label="Play"></wa-icon>
-                  </wa-button>
-                  <wa-button appearance="plain">
-                    <wa-icon name="shuffle" label="Shuffle"></wa-icon>
-                  </wa-button>
-                </div>
-                <wa-button appearance="plain">
-                  <wa-icon name="plus" label="Add to Library"></wa-icon>
-                </wa-button>
-              </div>
-            </div>
-          </div>
-          <ol class="wa-stack wa-gap-0">
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="1"></wa-icon>
-                <span>Fa-La-La-Fellowship</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">3:27</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="2"></wa-icon>
-                <span>Sleigh Ride</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">2:36</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="3"></wa-icon>
-                <span>All I Want For Christmas Is Stew</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">2:51</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="4"></wa-icon>
-                <span>Rockin' Around the Christmas Ent</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">3:05</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="5"></wa-icon>
-                <span>Merry, Did You Know?</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">1:56</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="6"></wa-icon>
-                <span>Run Run Shadowfax</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">3:32</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="7"></wa-icon>
-                <span>You're a Mean One, Mr. Grima</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">2:46</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="8"></wa-icon>
-                <span>O Come, All Ye Faithful</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">3:27</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="9"></wa-icon>
-                <span>Do You Hear What I Hear</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">2:13</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <span class="wa-cluster wa-gap-3xs">
-                  <wa-icon name="1"></wa-icon>
-                  <wa-icon name="0"></wa-icon>
-                </span>
-                <span>Carol of the Horns</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">2:55</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <span class="wa-cluster wa-gap-3xs">
-                  <wa-icon name="1"></wa-icon>
-                  <wa-icon name="1"></wa-icon>
-                </span>
-                <span>Silent Night</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">3:10</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <span class="wa-cluster wa-gap-3xs">
-                  <wa-icon name="1"></wa-icon>
-                  <wa-icon name="2"></wa-icon>
-                </span>
-                <span>Wizard Wonderland</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">3:22</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-          </ol>
-        </div>
-      </main>
-      <div slot="main-footer" class="wa-grid wa-gap-xl wa-align-items-center">
-        <h2 class="wa-heading-2xl">More You Might Like</h2>
-        <div class="wa-stack wa-gap-xs">
-          <div class="wa-frame wa-border-radius-l">
-            <img src="https://images.unsplash.com/photo-1675219119611-40323b738563?q=20" alt="" />
-          </div>
-          <span class="wa-heading-s">Festival of Lights</span>
-          <span class="wa-caption-s">Station</span>
-        </div>
-        <div class="wa-stack wa-gap-xs">
-          <div class="wa-frame wa-border-radius-l">
-            <img src="https://images.unsplash.com/photo-1481930916222-5ec4696fc0f2?q=20" alt="" />
-          </div>
-          <span class="wa-heading-s">Holiday Cheer</span>
-          <span class="wa-caption-s">Essential Playlist</span>
-        </div>
-        <div class="wa-stack wa-gap-xs">
-          <div class="wa-frame wa-border-radius-l">
-            <img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="" />
-          </div>
-          <span class="wa-heading-s">Nursery Rhymes from the Shire</span>
-          <span class="wa-caption-s">The Shire Choir</span>
-        </div>
-      </div>
-    </wa-page>
-
-    <style>
-      wa-page {
-        --menu-width: 30ch;
-        --wa-tooltip-arrow-size: 0;
-        background-color: var(--wa-color-surface-lowered);
-      }
-
-      wa-page[view='mobile'] {
-        --menu-width: auto;
-
-        [slot*='main'],
-        main {
-          padding: var(--wa-space-xl);
-        }
-      }
-
-      wa-page,
-      [slot='header'],
-      wa-page[view='desktop'] [slot*='navigation'] {
-        background-color: var(--wa-color-surface-lowered);
-      }
-      wa-page[view='mobile'] [slot*='navigation'] {
-        padding: 0;
-      }
-      wa-page::part(base) {
-        background-color: var(--wa-color-surface-lowered);
-      }
-      [slot='header'] {
-        background: linear-gradient(to bottom, var(--wa-color-surface-raised), var(--wa-color-surface-lowered));
-      }
-      [slot='navigation-header'],
-      [slot='main-header'] {
-        padding-block-end: 0 !important;
-        padding-block-start: var(--wa-space-3xl);
-      }
-      [slot='navigation'] {
-        a {
-          --wa-color-text-link: var(--wa-color-text-normal);
-          --wa-link-decoration-default: none;
-          --wa-link-decoration-hover: none;
-          --flank-size: 2rem;
-          font-weight: var(--wa-font-weight-action);
-          gap: 0.5rem;
-        }
-        ul {
-          list-style: none;
-          margin: 0;
-
-          a {
-            border-radius: var(--wa-border-radius-m);
-            padding: var(--wa-space-xs);
-
-            &:hover {
-              background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
-            }
-          }
-        }
-        wa-icon {
-          align-items: center;
-          aspect-ratio: 1;
-          color: var(--wa-color-brand-fill-loud);
-          display: flex;
-          justify-content: center;
-          padding-block: 0.5em;
-        }
-        #recent wa-icon {
-          border-radius: var(--wa-border-radius-s);
-        }
-      }
-
-      [slot='main-header'] {
-        border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-        border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-        border-radius: var(--wa-border-radius-l) var(--wa-border-radius-l) 0 0;
-      }
-      main,
-      [slot*='main'] {
-        margin-inline: var(--wa-space-m);
-      }
-      main ol li {
-        padding: var(--wa-space-m);
-
-        &:hover {
-          background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
-        }
-
-        &:not(:first-child) {
-          border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-        }
-
-        .wa-flank {
-          --flank-size: 2rem;
-        }
-      }
-      main,
-      [slot='main-footer'] {
-        border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-      }
-      main,
-      [slot='main-header'] {
-        background-color: var(--wa-color-surface-raised);
-      }
-      #play-controls wa-button::part(base) {
-        border: var(--wa-border-width-l) var(--wa-border-style) currentColor;
-        border-radius: var(--wa-border-radius-circle);
-        font-size: 1.5rem;
-      }
-      #play-controls wa-button:has(wa-icon[name='play'])::part(base) {
-        border: none;
-        font-size: 2.5rem;
-        padding: 0.5em 0.45em 0.5em 0.55em;
-      }
-      [slot='main-footer'].wa-grid > * {
-        max-inline-size: 30ch;
-      }
-    </style>
-
-    <script>
-      const sectionAnchors = document.querySelectorAll("[slot*='navigation'] a[href*='#']");
-      sectionAnchors.forEach(sectionAnchor => sectionAnchor.setAttribute('data-drawer', 'close'));
-    </script>
-  </body>
-</html>
diff --git a/packages/webawesome/docs/assets/scripts/filter.js b/packages/webawesome/docs/assets/scripts/filter.js
deleted file mode 100644
index d0b16de9e..000000000
--- a/packages/webawesome/docs/assets/scripts/filter.js
+++ /dev/null
@@ -1,35 +0,0 @@
-function debounce(func, wait) {
-  let timeout;
-  return function (...args) {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => func.apply(this, args), wait);
-  };
-}
-
-function updateResults(input) {
-  const filter = input.value.toLowerCase().trim();
-  let filtered = Boolean(filter);
-
-  for (let grid of document.querySelectorAll('.index-grid')) {
-    grid.classList.toggle('filtered', filtered);
-
-    for (let item of grid.querySelectorAll('a:has(> wa-card)')) {
-      let isMatch = true;
-
-      if (filter) {
-        const content = item.textContent.toLowerCase() + ' ' + (item.getAttribute('data-keywords') + ' ');
-        isMatch = content.includes(filter);
-      }
-
-      item.hidden = !isMatch;
-    }
-  }
-}
-
-const debouncedUpdateResults = debounce(updateResults, 300);
-
-document.documentElement.addEventListener('input', e => {
-  if (e.target?.matches('#block-filter wa-input')) {
-    debouncedUpdateResults(e.target);
-  }
-});
diff --git a/packages/webawesome/docs/assets/scripts/my.js b/packages/webawesome/docs/assets/scripts/my.js
deleted file mode 100644
index 25793113d..000000000
--- a/packages/webawesome/docs/assets/scripts/my.js
+++ /dev/null
@@ -1,172 +0,0 @@
-const my = (globalThis.my = new EventTarget());
-export default my;
-
-class PersistedArray extends Array {
-  constructor(key) {
-    super();
-    this.key = key;
-
-    if (this.key) {
-      this.fromLocalStorage();
-    }
-
-    // Items were updated in another tab
-    addEventListener('storage', event => {
-      if (event.key === this.key || !event.key) {
-        this.fromLocalStorage();
-      }
-    });
-  }
-
-  /**
-   * Update data from local storage
-   */
-  fromLocalStorage() {
-    // First, empty the array
-    this.splice(0, this.length);
-
-    // Then, fill it with the data from local storage
-    let saved = localStorage[this.key] ? JSON.parse(localStorage[this.key]) : null;
-
-    if (saved) {
-      this.push(...saved);
-    }
-  }
-
-  /**
-   * Write data to local storage
-   */
-  toLocalStorage() {
-    if (this.length > 0) {
-      localStorage[this.key] = JSON.stringify(this);
-    } else {
-      delete localStorage[this.key];
-    }
-  }
-}
-
-class SavedEntities extends EventTarget {
-  constructor({ key, type, url }) {
-    super();
-    this.key = key;
-    this.type = type;
-    this.url = url ?? type + 's';
-    this.saved = new PersistedArray(key);
-
-    let all = this;
-    this.entityPrototype = {
-      type: this.type,
-      baseUrl: this.baseUrl,
-
-      get url() {
-        return all.getURL(this);
-      },
-
-      get parentUrl() {
-        return all.getParentURL(this);
-      },
-
-      delete() {
-        all.delete(this);
-      },
-    };
-  }
-
-  getUid() {
-    if (this.saved.length === 0) {
-      return 1;
-    }
-
-    let uids = new Set(this.saved.map(p => p.uid));
-
-    // Find first available number
-    for (let i = 1; i <= this.saved.length + 1; i++) {
-      if (!uids.has(i)) {
-        return i;
-      }
-    }
-  }
-
-  get baseUrl() {
-    return `/docs/${this.url}/`;
-  }
-
-  getURL(entity) {
-    return this.getParentURL(entity) + entity.search;
-  }
-
-  getParentURL(entity) {
-    return this.baseUrl + entity.id + '/';
-  }
-
-  getObject(entity) {
-    let ret = Object.create(this.entityPrototype, Object.getOwnPropertyDescriptors(entity));
-    // debugger;
-    return ret;
-  }
-
-  /**
-   * Save an entity, either by updating its existing entry or creating a new one
-   * @param {object} entity
-   */
-  save(entity) {
-    if (!entity.uid) {
-      // First time saving
-      entity.uid = this.getUid();
-    }
-
-    let savedPalettes = this.saved;
-    let existingIndex = entity.uid ? this.saved.findIndex(p => p.uid === entity.uid) : -1;
-    let newIndex = existingIndex > -1 ? existingIndex : savedPalettes.length;
-
-    this.saved.splice(newIndex, 1, entity);
-
-    this.saved.toLocalStorage();
-
-    this.dispatchEvent(new CustomEvent('save', { detail: this.getObject(entity) }));
-
-    return entity;
-  }
-
-  delete(entity) {
-    let count = this.saved.length;
-
-    if (count === 0 || !entity?.uid) {
-      // No stored entities or this entity has not been saved
-      return;
-    }
-
-    // TODO improve UX of this
-    if (!confirm(`Are you sure you want to delete ${this.type} “${entity.title}”?`)) {
-      return;
-    }
-
-    for (let index; (index = this.saved.findIndex(p => p.uid === entity.uid)) > -1; ) {
-      this.saved.splice(index, 1);
-    }
-
-    if (this.saved.length === count) {
-      // Nothing was removed
-      return;
-    }
-
-    this.saved.toLocalStorage();
-
-    this.dispatchEvent(new CustomEvent('delete', { detail: this.getObject(entity) }));
-  }
-
-  dispatchEvent(event) {
-    super.dispatchEvent(event);
-    my.dispatchEvent(event);
-  }
-}
-
-my.palettes = new SavedEntities({
-  key: 'savedPalettes',
-  type: 'palette',
-});
-
-my.themes = new SavedEntities({
-  key: 'savedThemes',
-  type: 'theme',
-});
diff --git a/packages/webawesome/docs/assets/scripts/preset-theme-picker.js b/packages/webawesome/docs/assets/scripts/preset-theme-picker.js
deleted file mode 100644
index 90953cd2e..000000000
--- a/packages/webawesome/docs/assets/scripts/preset-theme-picker.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { domChange, ThemeAspect } from './theme-picker.js';
-
-const presetTheme = new ThemeAspect({
-  defaultValue: 'default',
-  key: 'presetTheme',
-  picker: 'wa-select.preset-theme-selector',
-
-  applyChange(options = {}) {
-    const oldStylesheets = [...document.querySelectorAll('#theme-stylesheet')];
-    const oldStylesheet = oldStylesheets.pop();
-
-    if (oldStylesheets.length > 0) {
-      // Remove all but the last one
-      for (let stylesheet of oldStylesheets) {
-        stylesheet.remove();
-      }
-    }
-
-    const href = `/dist/styles/themes/${this.value}.css`;
-
-    if (!oldStylesheet || oldStylesheet.getAttribute('href') !== href) {
-      const newStylesheet = document.createElement('link');
-      Object.assign(newStylesheet, { href, id: 'theme-stylesheet', rel: 'preload', as: 'style' });
-      oldStylesheet.after(newStylesheet);
-
-      newStylesheet.addEventListener(
-        'load',
-        e => {
-          domChange(
-            async instant => {
-              // Swap stylesheets
-              newStylesheet.rel = 'stylesheet';
-
-              if (instant) {
-                // If no VT, delay by 1 frame to make it smoother
-                await new Promise(requestAnimationFrame);
-              }
-
-              oldStylesheet.remove();
-            },
-            { behavior: 'smooth', ...options },
-          );
-        },
-        { once: true },
-      );
-    }
-  },
-});
-
-window.addEventListener('turbo:render', e => {
-  presetTheme.applyChange({ behavior: 'instant' });
-});
diff --git a/packages/webawesome/docs/assets/scripts/prism-downloaded.js b/packages/webawesome/docs/assets/scripts/prism-downloaded.js
deleted file mode 100644
index 1fea307c3..000000000
--- a/packages/webawesome/docs/assets/scripts/prism-downloaded.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/* PrismJS 1.29.0
-https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript&plugins=custom-class */
-var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function e(n,t){var r,i;switch(t=t||{},a.util.type(n)){case"Object":if(i=a.util.objId(n),t[i])return t[i];for(var l in r={},t[i]=r,n)n.hasOwnProperty(l)&&(r[l]=e(n[l],t));return r;case"Array":return i=a.util.objId(n),t[i]?t[i]:(r=[],t[i]=r,n.forEach((function(n,a){r[a]=e(n,t)})),r);default:return n}},getLanguage:function(e){for(;e;){var t=n.exec(e.className);if(t)return t[1].toLowerCase();e=e.parentElement}return"none"},setLanguage:function(e,t){e.className=e.className.replace(RegExp(n,"gi"),""),e.classList.add("language-"+t)},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(r){var e=(/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(r.stack)||[])[1];if(e){var n=document.getElementsByTagName("script");for(var t in n)if(n[t].src==e)return n[t]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:r,plaintext:r,text:r,txt:r,extend:function(e,n){var t=a.util.clone(a.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(e,n,t,r){var i=(r=r||a.languages)[e],l={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var s in t)t.hasOwnProperty(s)&&(l[s]=t[s]);t.hasOwnProperty(o)||(l[o]=i[o])}var u=r[e];return r[e]=l,a.languages.DFS(a.languages,(function(n,t){t===u&&n!=e&&(this[n]=l)})),l},DFS:function e(n,t,r,i){i=i||{};var l=a.util.objId;for(var o in n)if(n.hasOwnProperty(o)){t.call(n,o,n[o],r||o);var s=n[o],u=a.util.type(s);"Object"!==u||i[l(s)]?"Array"!==u||i[l(s)]||(i[l(s)]=!0,e(s,t,o,i)):(i[l(s)]=!0,e(s,t,null,i))}}},plugins:{},highlightAll:function(e,n){a.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};a.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),a.hooks.run("before-all-elements-highlight",r);for(var i,l=0;i=r.elements[l++];)a.highlightElement(i,!0===n,r.callback)},highlightElement:function(n,t,r){var i=a.util.getLanguage(n),l=a.languages[i];a.util.setLanguage(n,i);var o=n.parentElement;o&&"pre"===o.nodeName.toLowerCase()&&a.util.setLanguage(o,i);var s={element:n,language:i,grammar:l,code:n.textContent};function u(e){s.highlightedCode=e,a.hooks.run("before-insert",s),s.element.innerHTML=s.highlightedCode,a.hooks.run("after-highlight",s),a.hooks.run("complete",s),r&&r.call(s.element)}if(a.hooks.run("before-sanity-check",s),(o=s.element.parentElement)&&"pre"===o.nodeName.toLowerCase()&&!o.hasAttribute("tabindex")&&o.setAttribute("tabindex","0"),!s.code)return a.hooks.run("complete",s),void(r&&r.call(s.element));if(a.hooks.run("before-highlight",s),s.grammar)if(t&&e.Worker){var c=new Worker(a.filename);c.onmessage=function(e){u(e.data)},c.postMessage(JSON.stringify({language:s.language,code:s.code,immediateClose:!0}))}else u(a.highlight(s.code,s.grammar,s.language));else u(a.util.encode(s.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};if(a.hooks.run("before-tokenize",r),!r.grammar)throw new Error('The language "'+r.language+'" has no grammar.');return r.tokens=a.tokenize(r.code,r.grammar),a.hooks.run("after-tokenize",r),i.stringify(a.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new s;return u(a,a.head,e),o(e,a,n,a.head,0),function(e){for(var n=[],t=e.head.next;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=a.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=a.hooks.all[e];if(t&&t.length)for(var r,i=0;r=t[i++];)r(n)}},Token:i};function i(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function l(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function o(e,n,t,r,s,g){for(var f in t)if(t.hasOwnProperty(f)&&t[f]){var h=t[f];h=Array.isArray(h)?h:[h];for(var d=0;d<h.length;++d){if(g&&g.cause==f+","+d)return;var v=h[d],p=v.inside,m=!!v.lookbehind,y=!!v.greedy,k=v.alias;if(y&&!v.pattern.global){var x=v.pattern.toString().match(/[imsuy]*$/)[0];v.pattern=RegExp(v.pattern.source,x+"g")}for(var b=v.pattern||v,w=r.next,A=s;w!==n.tail&&!(g&&A>=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(j<O||"string"==typeof C.value);C=C.next)L++,j+=C.value.length;L--,E=e.slice(A,j),P.index-=A}else if(!(P=l(b,0,E,m)))continue;S=P.index;var N=P[0],_=E.slice(0,S),M=E.slice(S+N.length),W=A+E.length;g&&W>g.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;n.next=r,r.prev=n,e.length-=a}if(e.Prism=a,i.stringify=function e(n,t){if("string"==typeof n)return n;if(Array.isArray(n)){var r="";return n.forEach((function(n){r+=e(n,t)})),r}var i={type:n.type,content:e(n.content,t),tag:"span",classes:["token",n.type],attributes:{},language:t},l=n.alias;l&&(Array.isArray(l)?Array.prototype.push.apply(i.classes,l):i.classes.push(l)),a.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=" "+s+'="'+(i.attributes[s]||"").replace(/"/g,"&quot;")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+o+">"+i.content+"</"+i.tag+">"},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
-Prism.languages.markup={comment:{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var t={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml;
-!function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:[^;{\\s\"']|\\s+(?!\\s)|"+e.source+")*?(?:;|(?=\\s*\\{))"),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism);
-Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
-Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript;
-!function(){if("undefined"!=typeof Prism){var n,s,a="";Prism.plugins.customClass={add:function(s){n=s},map:function(n){s="function"==typeof n?n:function(s){return n[s]||s}},prefix:function(n){a=n||""},apply:t},Prism.hooks.add("wrap",(function(e){if(n){var u=n({content:e.content,type:e.type,language:e.language});Array.isArray(u)?e.classes.push.apply(e.classes,u):u&&e.classes.push(u)}(s||a)&&(e.classes=e.classes.map((function(n){return t(n,e.language)})))}))}function t(n,t){return a+(s?s(n,t):n)}}();
-
diff --git a/packages/webawesome/docs/assets/scripts/prism.js b/packages/webawesome/docs/assets/scripts/prism.js
deleted file mode 100644
index 215b8092d..000000000
--- a/packages/webawesome/docs/assets/scripts/prism.js
+++ /dev/null
@@ -1,8 +0,0 @@
-globalThis.Prism = globalThis.Prism || {};
-globalThis.Prism.manual = true;
-
-await import('./prism-downloaded.js');
-
-Prism.plugins.customClass.prefix('code-');
-
-export default Prism;
diff --git a/packages/webawesome/docs/assets/scripts/sidebar-tweaks.js b/packages/webawesome/docs/assets/scripts/sidebar-tweaks.js
deleted file mode 100644
index 8d4a1bb24..000000000
--- a/packages/webawesome/docs/assets/scripts/sidebar-tweaks.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import my from '/assets/scripts/my.js';
-
-const sidebar = {
-  addChild(a, parentA) {
-    let parentLi = parentA.closest('li');
-    let ul = parentLi.querySelector(':scope > ul');
-    ul ??= parentLi.appendChild(document.createElement('ul'));
-    let li = document.createElement('li');
-    li.append(a);
-    ul.appendChild(li);
-
-    // If we are on the same page, update the current link
-    let url = location.href.replace(/#.+$/, '');
-    if (url.startsWith(a.href)) {
-      // Remove existing current
-      for (let current of document.querySelectorAll('#sidebar a.current')) {
-        current.classList.remove('current');
-      }
-
-      a.classList.add('current');
-    }
-
-    return a;
-  },
-
-  removeLink(a) {
-    if (!a || !a.isConnected) {
-      // Link doesn't exist or is already removed
-      return;
-    }
-
-    let li = a?.closest('li');
-    let ul = li?.closest('ul');
-    let parentA = ul?.closest('li')?.querySelector(':scope > a');
-
-    li?.remove();
-    if (ul?.children.length === 0) {
-      ul.remove();
-    }
-
-    if (a.classList.contains('current')) {
-      // If the deleted palette was the current one, the current one is now the parent
-      parentA.classList.add('current');
-    }
-  },
-
-  findEntity(entity) {
-    return document.querySelector(`#sidebar a[href^="${entity.baseUrl}"][data-uid="${entity.uid}"]`);
-  },
-
-  renderEntity(entity) {
-    let { url, parentUrl } = entity;
-
-    // Find parent
-    let parentA = document.querySelector(`#sidebar a[href="${parentUrl}"]`);
-    let parentLi = parentA?.closest('li');
-
-    if (!parentLi) {
-      throw new Error(`Cannot find parent url ${parentUrl}`);
-    }
-
-    // Find existing
-    let a = this.findEntity(entity);
-    let alreadyExisted = !!a;
-
-    a ??= document.createElement('a');
-
-    a.textContent = entity.title;
-    a.href = url;
-
-    if (!alreadyExisted) {
-      a.dataset.uid = entity.uid;
-
-      a = sidebar.addChild(a, parentA);
-
-      // This is mainly to port Pro badges
-      let badges = Array.from(parentLi.querySelectorAll(':scope > wa-badge'), badge => badge.cloneNode(true));
-
-      let append = [...badges];
-
-      if (entity.delete) {
-        let deleteButton = Object.assign(document.createElement('wa-button'), {
-          appearance: 'plain',
-          variant: 'danger',
-          size: 'small',
-          className: 'delete',
-          innerHTML: '<wa-icon name="trash" label="Delete"></wa-icon>',
-        });
-        deleteButton.addEventListener('click', () => entity.delete());
-        append.push(deleteButton);
-      }
-
-      if (append.length > 0) {
-        a.closest('li').append(' ', ...append);
-      }
-    }
-  },
-
-  render() {
-    for (let type in my) {
-      let controller = my[type];
-
-      if (!controller.saved) {
-        continue;
-      }
-
-      for (let entity of controller.saved) {
-        let object = controller.getObject(entity);
-        this.renderEntity(object);
-      }
-    }
-  },
-};
-
-globalThis.sidebar = sidebar;
-
-// Update sidebar when my saved stuff changes
-my.addEventListener('delete', e => sidebar.removeLink(sidebar.findEntity(e.detail)));
-my.addEventListener('save', e => sidebar.renderEntity(e.detail));
-
-sidebar.render();
-window.addEventListener('turbo:render', () => sidebar.render());
diff --git a/packages/webawesome/docs/assets/scripts/sync-iframe-height.js b/packages/webawesome/docs/assets/scripts/sync-iframe-height.js
deleted file mode 100644
index 1e74f0266..000000000
--- a/packages/webawesome/docs/assets/scripts/sync-iframe-height.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Sync iframe height with its content page (for same-origin iframes)
- * NOT CURRENTLY USED ANYWHERE
- */
-for (let iframe of document.querySelectorAll('iframe')) {
-  if (iframe.contentDocument) {
-    // Already loaded
-    syncIframeHeight(iframe);
-  }
-
-  iframe.onload = () => {
-    console.log('iframe loaded');
-    if (iframe.contentDocument) {
-      // Same origin
-      iframe.contentWindow.iframe = iframe;
-      syncIframeHeight(iframe);
-      const resizeObserver = new ResizeObserver(entries => {
-        for (let entry of entries) {
-          if (entry.target === iframe.contentDocument.body) {
-            syncIframeHeight(iframe);
-          }
-        }
-      });
-
-      resizeObserver.observe(iframe.contentDocument.body);
-      window.addEventListener('turbo:render', syncIframeHeight(iframe));
-    }
-  };
-}
-
-function syncIframeHeight(iframe) {
-  iframe.style.height = '0px';
-
-  requestAnimationFrame(() => {
-    iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
-  });
-}
diff --git a/packages/webawesome/docs/assets/scripts/theme-picker.js b/packages/webawesome/docs/assets/scripts/theme-picker.js
deleted file mode 100644
index 1a39ee50a..000000000
--- a/packages/webawesome/docs/assets/scripts/theme-picker.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import { domChange } from './util/dom-change.js';
-export { domChange };
-
-export class ThemeAspect {
-  constructor(options) {
-    Object.assign(this, options);
-    this.set();
-    this.syncIframes();
-
-    // Update when local storage changes.
-    // That way changes in one window will propagate to others (including iframes).
-    window.addEventListener('storage', event => {
-      if (event.key === this.key) {
-        this.set();
-      }
-    });
-
-    // Listen for selections
-    document.addEventListener('change', event => {
-      const picker = event.target.closest(this.picker);
-      if (picker) {
-        this.set(picker.value);
-      }
-    });
-
-    ['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
-      document.addEventListener(eventName, e => {
-        const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
-        if (newElement) {
-          this.syncUI(newElement);
-        }
-      });
-    });
-  }
-
-  get() {
-    return localStorage.getItem(this.key) ?? this.defaultValue;
-  }
-
-  computed = {};
-
-  get computedValue() {
-    if (this.value in this.computed) {
-      return this.computed[this.value];
-    }
-
-    return this.value;
-  }
-
-  set(value = this.get()) {
-    if (value === this.value) {
-      return;
-    }
-
-    this.value = value;
-
-    if (this.value === this.defaultValue) {
-      localStorage.removeItem(this.key);
-    } else {
-      localStorage.setItem(this.key, this.value);
-    }
-
-    this.applyChange();
-    this.syncUI();
-  }
-
-  async syncIframes() {
-    await customElements.whenDefined('wa-zoomable-frame');
-    await new Promise(requestAnimationFrame);
-
-    // Sync to wa-zoomable-frame iframes
-    let dark = this.computedValue === 'dark';
-    for (let zoomableEl of document.querySelectorAll('wa-zoomable-frame')) {
-      const iframe = zoomableEl.iframe;
-
-      const applyToIframe = () => {
-        try {
-          iframe.contentDocument.documentElement.classList.toggle('wa-dark', dark);
-        } catch (e) {
-          // Silently handle access issues
-        }
-      };
-
-      // Try immediately
-      applyToIframe();
-      // Also listen for load in case it wasn't ready
-      iframe.addEventListener('load', applyToIframe, { once: true });
-    }
-  }
-
-  syncUI(container = document) {
-    for (let picker of container.querySelectorAll(this.picker)) {
-      picker.setAttribute('value', this.value);
-      picker.value = this.value;
-    }
-  }
-}
-
-const colorScheme = new ThemeAspect({
-  defaultValue: 'auto',
-  key: 'colorScheme',
-  picker: 'wa-select.color-scheme-selector',
-
-  computed: {
-    get auto() {
-      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    },
-  },
-
-  applyChange() {
-    // Toggle the dark mode class with view transition
-    const updateTheme = () => {
-      let dark = this.computedValue === 'dark';
-      document.documentElement.classList.toggle(`wa-dark`, dark);
-      document.documentElement.dispatchEvent(new CustomEvent('wa-color-scheme-change', { detail: { dark } }));
-      this.syncIframes();
-    };
-
-    if (document.startViewTransition) {
-      document.startViewTransition(() => domChange(updateTheme));
-    } else {
-      domChange(updateTheme);
-    }
-  },
-});
-
-// Update the color scheme when the preference changes
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => colorScheme.set());
-
-// Toggle color scheme with backslash
-document.addEventListener('keydown', event => {
-  if (
-    event.key === '\\' &&
-    !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
-  ) {
-    event.preventDefault();
-    colorScheme.set(colorScheme.get() === 'dark' ? 'light' : 'dark');
-  }
-});
diff --git a/packages/webawesome/docs/assets/scripts/tweak.js b/packages/webawesome/docs/assets/scripts/tweak.js
deleted file mode 100644
index 47f1f5702..000000000
--- a/packages/webawesome/docs/assets/scripts/tweak.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Get import code for remixed themes and tweaked palettes.
- */
-export { cdnUrl, hueRanges, hues, selectors, tints, urls } from '../data/index.js';
-export { default as Permalink } from './permalink.js';
-export { getThemeCode } from './tweak/code.js';
diff --git a/packages/webawesome/docs/assets/scripts/tweak/code.js b/packages/webawesome/docs/assets/scripts/tweak/code.js
deleted file mode 100644
index 3ec36033c..000000000
--- a/packages/webawesome/docs/assets/scripts/tweak/code.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * Get import code for remixed themes and tweaked palettes.
- */
-import { selectors, themeConfig } from '../../data/theming.js';
-import { deepEach, deepGet } from '/assets/scripts/util/deep.js';
-
-export function cssImport(url, options = {}) {
-  let { language = 'html', cdnUrl = '/dist/', attributes } = options;
-  url = cdnUrl + url;
-
-  if (language === 'css') {
-    return `@import url('${url}');`;
-  } else {
-    attributes = attributes ? ` ${attributes}` : '';
-    return `<link rel="stylesheet" href="${url}"${attributes} />`;
-  }
-}
-
-export function cssLiteral(value, options = {}) {
-  let { language = 'html' } = options;
-
-  if (language === 'css') {
-    return value;
-  } else {
-    return `<style${options.attributes ?? ''}>\n${value}\n</style>`;
-  }
-}
-
-/**
- * Get code for a theme, including tweaks
- * @param {*} theme
- * @param {*} options
- * @returns
- */
-export function getThemeCode(theme, options = {}) {
-  let urls = [];
-  let declarations = [];
-  let id = options.id ?? theme.base ?? 'default';
-
-  deepEach(themeConfig, (config, aspect, obj, path) => {
-    if (!config?.default) {
-      // We're not in a config object
-      return;
-    }
-
-    let value = deepGet(theme, [...path, aspect]);
-
-    if (!value && value !== 0) {
-      return;
-    }
-
-    if (config.url) {
-      // This is implemented by pulling in different CSS files
-      urls.push(config.url(value));
-    } else {
-      if (config.cssProperty) {
-        declarations.push(`${config.cssProperty}: ${value};`);
-      }
-    }
-  });
-
-  let ret = urls.map(url => cssImport(url, options)).join('\n');
-
-  if (declarations.length > 0) {
-    let cssCode = cssRule(selectors.theme(id), declarations, options);
-
-    if (theme.icon?.kit) {
-      let faKitAttribute = ` data-fa-kit-code="${theme.icon.kit}"`;
-      options.attributes ??= '';
-      options.attributes += faKitAttribute;
-      cssCode =
-        `/* Note: To use Font Awesome Pro icons,\n   set ${faKitAttribute} on the <link> (or any other) element */\n\n` +
-        cssCode;
-    }
-
-    cssCode = cssLiteral(cssCode, options);
-
-    if (ret) {
-      ret += '\n\n' + cssCode;
-    }
-  }
-
-  return ret;
-}
-
-export function cssRule(selector, declarations, { indent = '  ' } = {}) {
-  selector = Array.isArray(selector) ? selector.flat().join(',\n') : selector;
-  declarations = Array.isArray(declarations) ? declarations.flat() : declarations;
-  declarations = declarations.map(declaration => indent + declaration.trim()).join('\n');
-  return `${selector} {\n${declarations.trimEnd()}\n}`;
-}
diff --git a/packages/webawesome/docs/assets/scripts/tweak/util.js b/packages/webawesome/docs/assets/scripts/tweak/util.js
deleted file mode 100644
index 12ee8dd55..000000000
--- a/packages/webawesome/docs/assets/scripts/tweak/util.js
+++ /dev/null
@@ -1,36 +0,0 @@
-export function normalizeAngles(angles) {
-  // First, normalize
-  angles = angles.map(h => ((h % 360) + 360) % 360);
-
-  // Remove top and bottom 25% and find average
-  let averageHue =
-    angles
-      .toSorted((a, b) => a - b)
-      .slice(angles.length / 4, -angles.length / 4)
-      .reduce((a, b) => a + b, 0) / angles.length;
-
-  for (let i = 0; i < angles.length; i++) {
-    let h = angles[i];
-    let prevHue = angles[i - 1];
-    let delta = h - prevHue;
-
-    if (Math.abs(delta) > 180) {
-      let equivalent = [h + 360, h - 360];
-      // Offset hue to minimize difference in the direction that brings it closer to the average
-      let delta = h - averageHue;
-
-      if (Math.abs(equivalent[0] - prevHue) <= Math.abs(equivalent[1] - prevHue)) {
-        angles[i] = equivalent[0];
-      } else {
-        angles[i] = equivalent[1];
-      }
-    }
-  }
-
-  return angles;
-}
-
-export function subtractAngles(θ1, θ2) {
-  let [a, b] = normalizeAngles([θ1, θ2]);
-  return a - b;
-}
diff --git a/packages/webawesome/docs/assets/scripts/util/array.js b/packages/webawesome/docs/assets/scripts/util/array.js
deleted file mode 100644
index 6eff57b6d..000000000
--- a/packages/webawesome/docs/assets/scripts/util/array.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Picks a random element from an array.
- * @param {any[]} arr
- */
-export function sample(arr) {
-  if (!Array.isArray(arr)) {
-    return arr;
-  }
-
-  if (arr.length < 2) {
-    return arr[0];
-  }
-
-  let index = Math.floor(Math.random() * arr.length);
-
-  return arr[index];
-}
diff --git a/packages/webawesome/docs/assets/scripts/util/deep.js b/packages/webawesome/docs/assets/scripts/util/deep.js
deleted file mode 100644
index 4bfcfd5d7..000000000
--- a/packages/webawesome/docs/assets/scripts/util/deep.js
+++ /dev/null
@@ -1,180 +0,0 @@
-/**
- * @typedef { string | number | Symbol } Property
- * @typedef { (value: any, key: Property, parent: object, path: Property[]) => any } EachCallback
- */
-
-export function isPlainObject(obj) {
-  return isObject(obj, 'Object');
-}
-
-export function isObject(obj, type) {
-  if (!obj || typeof obj !== 'object') {
-    return false;
-  }
-
-  let proto = Object.getPrototypeOf(obj);
-  return proto.constructor?.name === type;
-}
-
-export function deepMerge(target, source, options = {}) {
-  let {
-    emptyValues = [undefined],
-    containers = ['Object', 'EventTarget'],
-    isContainer = value => containers.some(type => isObject(value, type)),
-  } = options;
-
-  if (isContainer(target) && isContainer(source)) {
-    for (let key in source) {
-      if (key in target && isContainer(target[key]) && isContainer(source[key])) {
-        target[key] = deepMerge(target[key], source[key], options);
-      } else if (!emptyValues.includes(source[key])) {
-        target[key] = source[key];
-      }
-    }
-
-    return target;
-  }
-
-  return target ?? source;
-}
-
-/**
- * Iterate over a deep array, recursively for plain objects
- * @param { any } obj The object to iterate over. Can be an array or a plain object, or even a primitive value.
- * @param { EachCallback } callback. value is === parent[key]
- * @param { object } [parentObj] The parent object of the current value Mainly used internally to facilitate recursion.
- * @param { Property } [key] The key of the current value. Mainly used internally to facilitate recursion.
- * @param { Property[] } [path] Any existing path (not including the key). Mainly used internally to facilitate recursion.
- */
-export function deepEach(obj, callback, parentObj, key, path = []) {
-  if (key !== undefined) {
-    let ret = callback(obj, key, parentObj, path);
-
-    if (ret !== undefined) {
-      if (ret === false) {
-        // Do not descend further
-        return;
-      }
-
-      // Overwrite value
-      parentObj[key] = ret;
-      obj = ret;
-    }
-  }
-
-  let newPath = key !== undefined ? [...path, key] : path;
-
-  if (Array.isArray(obj)) {
-    for (let i = 0; i < obj.length; i++) {
-      deepEach(obj[i], callback, obj, i, newPath);
-    }
-  } else if (isPlainObject(obj)) {
-    for (let key in obj) {
-      deepEach(obj[key], callback, obj, key, newPath);
-    }
-  }
-}
-
-/**
- * Get a value from a deeply nested object
- * @param {*} obj
- * @param {PropertyPath} path
- * @returns
- */
-export function deepGet(obj, path) {
-  if (path.length === 0) {
-    return obj;
-  }
-
-  let ret = obj;
-
-  for (let key of path) {
-    if (ret === undefined) {
-      return undefined;
-    }
-
-    ret = ret[key];
-  }
-
-  return ret;
-}
-
-/**
- * Set a value in a deep object, creating object literals as needed
- * @param { * } obj
- * @param { Property[] } path
- * @param { any } value
- */
-export function deepSet(obj, path, value) {
-  if (path.length === 0) {
-    return;
-  }
-
-  let key = path.pop();
-
-  let ret = path.reduce((acc, property) => {
-    if (acc[property] === undefined) {
-      acc[property] = {};
-    }
-
-    return acc[property];
-  }, obj);
-
-  ret[key] = value;
-}
-
-export function deepClone(obj) {
-  if (!obj) {
-    return obj;
-  }
-
-  let ret = obj;
-
-  if (Array.isArray(obj)) {
-    ret = obj.map(item => deepClone(item));
-  } else if (isPlainObject(obj)) {
-    ret = { ...obj };
-
-    for (let key in obj) {
-      ret[key] = deepClone(obj[key]);
-    }
-  }
-
-  return ret;
-}
-
-/**
- * Like Object.entries, but for deeply nested objects.
- * For shallow objects the output is the same as Object.entries.
- * @param {*} obj
- * @param { object } options
- * @param { EachCallback } each - If this returns false, the entry is not added to the result and the recursion is stopped.
- * @param { EachCallback } filter - If this returns false, the entry is not added to the result.
- * @param { EachCallback } descend - If this returns false, recursion is stopped.
- * @returns {any[][]}
- */
-export function deepEntries(obj, options = {}) {
-  let { each, filter, descend } = options;
-  let entries = [];
-
-  deepEach(obj, (value, key, parent, path) => {
-    let ret = each?.(value, key, parent, path);
-
-    if (ret !== false) {
-      let included = filter?.(value, key, parent, path) ?? true;
-
-      if (included) {
-        entries.push([...path, key, value]);
-      }
-
-      let descendRet = descend?.(value, key, parent, path);
-      if (descendRet === false) {
-        return false; // Stop recursion
-      }
-    }
-
-    return ret;
-  });
-
-  return entries;
-}
diff --git a/packages/webawesome/docs/assets/scripts/util/string.js b/packages/webawesome/docs/assets/scripts/util/string.js
deleted file mode 100644
index ff889e169..000000000
--- a/packages/webawesome/docs/assets/scripts/util/string.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Make the first letter of a string uppercase
- * @param {*} str
- * @returns
- */
-export function capitalize(str) {
-  str += '';
-  return str[0]?.toUpperCase() + str.slice(1);
-}
-
-/**
- * Convert a readable string to a slug.
- * @param {*} str - Input string. If argument is not a string, it will be stringified.
- * @returns {string} - The slugified string
- */
-export function slugify(str) {
-  return (str + '')
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '') // Convert accented letters to ASCII
-    .replace(/[^\w\s-]/g, '') // Remove remaining non-ASCII characters
-    .trim()
-    .replace(/\s+/g, '-') // Convert whitespace to hyphens
-    .toLowerCase();
-}
-
-/**
- * Convert a string to camel case.
- * @param {string} str - The string to convert.
- * @returns {string} The camel case string.
- */
-export function camelCase(str) {
-  return str.replace(/-([a-z])/g, (_, letter) => letter?.toUpperCase());
-}
-
-/**
- * Convert a string to kebab case.
- * @param {string} str - The string to convert.
- * @returns {string} The kebab case string.
- */
-export function kebabCase(str) {
-  return str.replace(/([A-Z])/g, '-$1')?.toLowerCase();
-}
diff --git a/packages/webawesome/docs/assets/scripts/util/dom-change.js b/packages/webawesome/docs/assets/scripts/view-transitions.js
similarity index 52%
rename from packages/webawesome/docs/assets/scripts/util/dom-change.js
rename to packages/webawesome/docs/assets/scripts/view-transitions.js
index f01a3d13c..d676ad0ce 100644
--- a/packages/webawesome/docs/assets/scripts/util/dom-change.js
+++ b/packages/webawesome/docs/assets/scripts/view-transitions.js
@@ -7,33 +7,27 @@ if (!initialPageLoadComplete) {
 }
 
 /**
- * Helper for performing a DOM change using a view transition, wherever supported and reduced motion is not desired.
- * @param {function} fn - Function to perform the DOM change. If async, must resolve when the change is complete.
- * @param {object} [options] - Options for the transition
- * @param {'smooth' | 'instant'} [options.behavior] - Transition behavior. Defaults to 'smooth'. 'instant' will skip the transition.
- * @param {boolean} [options.ignoreInitialLoad] - If true, will skip the transition on initial page load. Defaults to true.
+ * A wrapper around `document.startViewTransition()` that falls back to no transitions in unsupportive browsers.
  */
-export function domChange(fn, { behavior = 'smooth', ignoreInitialLoad = true } = {}) {
+export function doViewTransition(callback, { behavior = 'smooth', ignoreInitialLoad = true } = {}) {
   const canUseViewTransitions =
     document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
   // Skip transitions on initial page load
   if (!initialPageLoadComplete && ignoreInitialLoad) {
-    fn(false);
+    callback(false);
     return null;
   }
 
   if (canUseViewTransitions && behavior === 'smooth') {
     const transition = document.startViewTransition(() => {
-      fn(true);
+      callback(true);
       // Wait a brief delay before finishing the transition to prevent jumpiness
       return new Promise(resolve => setTimeout(resolve, 200));
     });
     return transition;
   } else {
-    fn(false);
+    callback(false);
     return null;
   }
 }
-
-export default domChange;
diff --git a/packages/webawesome/docs/assets/vue/components/color-select.js b/packages/webawesome/docs/assets/vue/components/color-select.js
deleted file mode 100644
index d17e371e6..000000000
--- a/packages/webawesome/docs/assets/vue/components/color-select.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import { capitalize } from '../../scripts/util/string.js';
-
-const template = `
-    <wa-select class="color-select" name="brand" :label="label" :value="modelValue"  @input="$emit('update:modelValue', $event.target.value)"
-    :style="{'--color': getColor(modelValue)}">
-      <template v-for="values, group in computedGroups">
-        <template v-if="group">
-          <wa-divider v-if="group !== firstGroup"></wa-divider>
-          <small>{{ group }}</small>
-        </template>
-        <wa-option v-if="values?.length" v-for="value of values" :label="getLabel(value)" :value="value" :style="{'--color': getColor(value)}" v-html="getContent?.(value) ?? getLabel(value)"></wa-option>
-      </template>
-      <slot></slot>
-    </wa-select>
-  `;
-
-export default {
-  props: {
-    modelValue: String,
-    label: String,
-    getLabel: {
-      type: Function,
-      default: capitalize,
-    },
-    getContent: {
-      type: Function,
-    },
-    getColor: {
-      type: Function,
-      default: value => `var(--wa-color-${value})`,
-    },
-    values: {
-      type: Array,
-      default: [],
-    },
-    groups: {
-      type: Object,
-    },
-  },
-  emits: ['update:modelValue', 'input'],
-  data() {
-    return {};
-  },
-  computed: {
-    computedGroups() {
-      let ret = {};
-
-      if (this.values?.length) {
-        ret[''] = this.values;
-      }
-
-      if (this.groups) {
-        for (let group in this.groups) {
-          if (this.groups[group]?.length) {
-            ret[group] = this.groups[group];
-          }
-        }
-      }
-
-      return ret;
-    },
-
-    firstGroup() {
-      return Object.keys(this.computedGroups)[0];
-    },
-  },
-
-  methods: {
-    capitalize,
-    handleInput(e) {
-      this.$emit('input', this.modelValue);
-    },
-  },
-  template,
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};
diff --git a/packages/webawesome/docs/assets/vue/components/editable-text.js b/packages/webawesome/docs/assets/vue/components/editable-text.js
deleted file mode 100644
index f2e7b51a0..000000000
--- a/packages/webawesome/docs/assets/vue/components/editable-text.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import inputMixin from '../mixins/input.js';
-
-const template = `
-<span class="editable-text">
-<template v-if="isEditing">
-  <input ref="input" class="wa-size-s" :aria-label="label" :value="value" @input="handleInput" @keydown.enter="done" @keydown.esc="cancel" @blur="handleBlur" />
-  <wa-button appearance="plain" v-if="blur !== 'done'" @click="done">
-    <wa-icon name="check" label="Done editing"></wa-icon>
-  </wa-button>
-</template>
-<template v-else>
-  <span class="text" ref="wrapper" @focus="edit" @click="edit" tabindex="0">{{ value }}</span>
-  <wa-button appearance="plain" @click="edit">
-    <wa-icon name="pencil" :label="'Edit ' + label"></wa-icon>
-  </wa-button>
-</template>
-</span>
-`;
-
-export default {
-  mixins: [inputMixin],
-  props: {
-    label: {
-      type: String,
-      default: 'Rename',
-    },
-    blur: {
-      type: String,
-      validator(value) {
-        return ['', 'done', 'cancel'].includes(value);
-      },
-    },
-  },
-  emits: ['update:modelValue', 'submit'],
-  data() {
-    return {
-      previousValue: undefined,
-      isEditing: false,
-    };
-  },
-  computed: {},
-
-  methods: {
-    edit(event) {
-      if (this.isEditing) {
-        return;
-      }
-
-      event.stopPropagation();
-
-      this.isEditing = true;
-      this.previousValue = this.value;
-
-      this.$nextTick(() => {
-        this.$refs.input.focus();
-        this.$refs.input.select();
-      });
-    },
-    done(event) {
-      if (!this.isEditing) {
-        return;
-      }
-
-      event.stopPropagation();
-
-      this.isEditing = false;
-
-      if (!this.previousValue || this.previousValue !== this.value) {
-        this.$emit('submit', this.value);
-      }
-    },
-    cancel(event) {
-      if (!this.isEditing) {
-        return;
-      }
-
-      event.stopPropagation();
-
-      this.isEditing = false;
-      this.value = this.previousValue;
-    },
-    handleBlur(event) {
-      this.done(event);
-    },
-  },
-  template,
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};
diff --git a/packages/webawesome/docs/assets/vue/components/fonts-card.js b/packages/webawesome/docs/assets/vue/components/fonts-card.js
deleted file mode 100644
index 48c96aa33..000000000
--- a/packages/webawesome/docs/assets/vue/components/fonts-card.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import themes from '../../data/themes.js';
-import PageCard from './page-card.js';
-import { defaultTitle, pairings, sameAs } from '/assets/data/fonts.js';
-import { themeConfig } from '/assets/data/theming.js';
-import { cssImport, getThemeCode } from '/assets/scripts/tweak/code.js';
-
-const template = `
-  <page-card class="fonts-card" :info="computedPairing">
-    <template #icon>
-      <wa-scoped slot="header" class="fonts-icon-host" inert :key="html">
-        <template v-html="html"></template>
-        <template>
-          <link rel="stylesheet" href="/dist/styles/native/content.css">
-          <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-          <div class="fonts-icon" role="presentation">
-            <h2>When my six o'clock alarm buzzes, I require a pot of good java.</h2>
-            <p>By quarter past seven, I've jotted hazy musings in a flax-bound notebook, sipping lukewarm espresso.</p>
-          </div>
-        </template>
-      </wa-scoped>
-    </template>
-    <slot></slot>
-    <template #extra>
-      <slot name="extra" />
-    </template>
-  </page-card>
-`;
-
-export default {
-  props: {
-    theme: String,
-    src: String,
-    fonts: Object,
-    pairing: Object,
-  },
-
-  data() {
-    return {};
-  },
-
-  computed: {
-    content() {
-      let pairingTitle = this.computedPairing.title;
-      // let themeTitle = this.themeId ? `As seen in ${this.themeMeta.title}` : '';
-
-      if (this.title) {
-        return { title: this.title, subtitle: this.subtitle ?? pairingTitle };
-      } else {
-        return { title: pairingTitle, subtitle: this.subtitle };
-      }
-    },
-
-    url() {
-      let ret = this.src ?? this.pairing?.url;
-
-      if (!ret && this.theme) {
-        return themeConfig.typography.url(this.theme);
-      }
-
-      return ret;
-    },
-
-    themeId() {
-      return this.theme ?? this.pairing?.id;
-    },
-
-    themeMeta() {
-      return themes[this.themeId] ?? {};
-    },
-
-    computedFonts() {
-      let ret = this.fonts ?? this.pairing?.fonts ?? this.themeMeta?.fonts;
-      let defaults = themes.default.fonts;
-      return Object.assign({}, defaults, { ...ret });
-    },
-
-    computedPairing() {
-      let ret;
-
-      if (this.pairing) {
-        ret = { ...this.pairing };
-      } else {
-        // Get from theme
-        let fonts = this.computedFonts;
-        let { body, heading = sameAs.body } = fonts;
-        let pairing = pairings[body]?.[heading];
-        ret = Object.assign({ fonts }, pairing);
-      }
-
-      ret.url = this.url;
-      ret.title ??= defaultTitle(fonts);
-      return ret;
-    },
-
-    computed() {
-      let ret = { fonts: this.computedFonts };
-
-      for (let key in ret.fonts) {
-        if (ret.fonts[key] === sameAs.body) {
-          ret.fonts[key] = ret.fonts.body;
-        }
-      }
-
-      ret.pairing = this.computedPairing;
-      ret.theme = this.themeId;
-      ret.url = this.url;
-
-      return ret;
-    },
-
-    html() {
-      let { id, url } = this.computedPairing;
-
-      if (id) {
-        let theme = { typography: id };
-
-        return getThemeCode(theme, { id, language: 'html' });
-      } else {
-        return cssImport(url, { language: 'html' });
-      }
-    },
-  },
-
-  template,
-  components: {
-    PageCard,
-  },
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};
diff --git a/packages/webawesome/docs/assets/vue/components/icons-card.js b/packages/webawesome/docs/assets/vue/components/icons-card.js
deleted file mode 100644
index 7b0a23e21..000000000
--- a/packages/webawesome/docs/assets/vue/components/icons-card.js
+++ /dev/null
@@ -1,176 +0,0 @@
-import { sample } from '../../scripts/util/array.js';
-import { capitalize } from '../../scripts/util/string.js';
-import PageCard from './page-card.js';
-import { iconLibraries } from '/assets/data/icons.js';
-
-const iconNames = [
-  'user',
-  'paper-plane',
-  'face-laugh',
-  'pen-to-square',
-  'trash',
-  'cart-shopping',
-  'link',
-  'sun',
-  'bookmark',
-  'sparkles',
-  'thumbs-up',
-  'gear',
-];
-const brands = new Set(['web-awesome', 'font-awesome']);
-const ICON_GRID = { columns: 6, rows: 2 };
-const TOTAL_ICONS = ICON_GRID.columns * ICON_GRID.rows;
-
-const template = `
-	<page-card class="icons-card" :class="'icons-' + type + '-card'" :pro="$slots.default ? false : iconsMeta.isPro" :info="iconsMeta">
-    <template #icon>
-      <div slot="header" class="icons-icon" :class="'icons-' + type + '-icon'" :style="{ '--columns': ICON_GRID.columns }">
-        <template v-for="icon of icons">
-          <wa-icon v-bind="icon"></wa-icon>
-        </template>
-      </div>
-    </template>
-    <slot></slot>
-	</page-card>
-`;
-
-const defaultDefaults = {
-  library: 'default',
-  family: 'classic',
-  style: 'solid',
-};
-
-export default {
-  props: {
-    library: String,
-    family: String,
-    style: String,
-    defaults: Object,
-    type: {
-      type: String,
-      validate(value) {
-        return ['library', 'family', 'style'].includes(value);
-      },
-    },
-    vary: {
-      type: [Array, String],
-      validate(value) {
-        if (Array.isArray(value)) {
-          return value.every(v => ['family', 'style'].includes(v));
-        }
-
-        return ['family', 'style'].includes(value);
-      },
-      default() {
-        return [];
-      },
-    },
-  },
-
-  data() {
-    return {};
-  },
-
-  created() {
-    Object.assign(this, { iconNames, brands, ICON_GRID });
-  },
-
-  computed: {
-    computedLibrary() {
-      return this.library ?? 'default';
-    },
-
-    libraryMeta() {
-      return iconLibraries[this.computedLibrary] ?? {};
-    },
-
-    defaultTitle() {
-      let titles = {};
-      for (let key in this.computed) {
-        let value = this.computed[key];
-
-        if (key === 'library') {
-          titles[key] = iconLibraries[value]?.title;
-        }
-
-        titles[key] ??= capitalize(value);
-      }
-
-      if (this.type) {
-        return titles[this.type];
-      } else {
-        return titles.library + ' ' + titles.family + ' • ' + titles.style;
-      }
-    },
-
-    icons() {
-      let { family, style } = this.computed;
-      let library = this.libraryMeta;
-      let vary = Array.isArray(this.vary) ? this.vary : [this.vary];
-
-      let ret = [];
-
-      if (vary.length > 0) {
-        for (let param of vary) {
-          let allValues = library[param];
-          if (!allValues) return;
-          let random = (allValues.random ??= []);
-
-          while (random.length < TOTAL_ICONS) {
-            random.push(sample(allValues));
-          }
-        }
-      }
-
-      while (ret.length < TOTAL_ICONS) {
-        ret.push(
-          ...iconNames.map((name, i) => {
-            let index = ret.length + i;
-
-            return {
-              library: this.computedLibrary,
-              name,
-              family: !this.family && vary.includes('family') ? library.family.random[index] : family,
-              variant: !this.style && vary.includes('style') ? library.style.random[index] : style,
-            };
-          }),
-        );
-      }
-
-      return ret.slice(0, TOTAL_ICONS);
-    },
-
-    computedDefaults() {
-      return Object.assign({}, defaultDefaults, this.defaults);
-    },
-
-    computed() {
-      let { library, family, style } = this;
-      let ret = { library, family, style };
-
-      for (let key in this.computedDefaults) {
-        if (!ret[key]) {
-          ret[key] = this.computedDefaults[key];
-        }
-      }
-
-      return ret;
-    },
-
-    iconsMeta() {
-      return { title: this.defaultTitle };
-    },
-  },
-
-  methods: {
-    capitalize,
-  },
-
-  template,
-  components: {
-    PageCard,
-  },
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};
diff --git a/packages/webawesome/docs/assets/vue/components/index.js b/packages/webawesome/docs/assets/vue/components/index.js
deleted file mode 100644
index 77bcbd26e..000000000
--- a/packages/webawesome/docs/assets/vue/components/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export { default as ColorSelect } from './color-select.js';
-export { default as EditableText } from './editable-text.js';
-export { default as FontsCard } from './fonts-card.js';
-export { default as IconsCard } from './icons-card.js';
-export { default as InfoTip } from './info-tip.js';
-export { default as PageCard } from './page-card.js';
-export { default as PaletteCard } from './palette-card.js';
-export { default as SwatchSelect } from './swatch-select.js';
-export { default as ThemeCard } from './theme-card.js';
-export { default as UiPanelContainer } from './ui-panel-container.js';
-export { default as UiPanel } from './ui-panel.js';
-export { default as UiScrollable } from './ui-scrollable.js';
-export { default as UiSlider } from './ui-slider.js';
diff --git a/packages/webawesome/docs/assets/vue/components/info-tip.js b/packages/webawesome/docs/assets/vue/components/info-tip.js
deleted file mode 100644
index 0ce21c476..000000000
--- a/packages/webawesome/docs/assets/vue/components/info-tip.js
+++ /dev/null
@@ -1,39 +0,0 @@
-const template = `
-	<slot>
-  		<wa-icon :slot class="info-tip-default-trigger" :id="id" name="circle-question" variant="regular" tabindex="0"></wa-icon>
-	</slot>
-	<wa-tooltip :slot :for="id" ref="tooltip"><slot name="content">{{ text }}</slot></wa-tooltip>
-  `;
-
-let maxUid = 0;
-
-export default {
-  props: {
-    slot: String,
-    text: String,
-  },
-  data() {
-    let uid = ++maxUid;
-    return { uid, id: 'info-tip-' + uid };
-  },
-  mounted() {
-    let tooltip = this.$refs.tooltip;
-    if (tooltip) {
-      // Find trigger
-      let trigger = tooltip.previousElementSibling;
-      if (trigger) {
-        if (trigger.id) {
-          // Already has id
-          this.id = trigger.id;
-        } else {
-          trigger.id = this.id;
-        }
-      }
-    }
-  },
-  computed: {},
-  template,
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};
diff --git a/packages/webawesome/docs/assets/vue/components/page-card.js b/packages/webawesome/docs/assets/vue/components/page-card.js
deleted file mode 100644
index 242dd54c9..000000000
--- a/packages/webawesome/docs/assets/vue/components/page-card.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * Generic component for displaying a (possibly interactive) card that represents a page
- * For more specific use cases check out theme-card, icons-card, etc.
- */
-export const ICON_PLACEHOLDER = `
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 7C1 3.68629 3.68629 1 7 1H43C46.3137 1 49 3.68629 49 7V43C49 46.3137 46.3137 49 43 49H7C3.68629 49 1 46.3137 1 43V7Z" stroke="var(--wa-color-surface-border)" stroke-width="2" stroke-linecap="round" stroke-dasharray="6 6"/>
-<path d="M14.1566 18.7199L21.5367 16.7424C22.6036 16.4565 23.7003 17.0896 23.9862 18.1566L26.8463 28.8306C27.1322 29.8975 26.499 30.9942 25.4321 31.2801L18.052 33.2576C16.985 33.5435 15.8884 32.9103 15.6025 31.8434L12.7424 21.1694C12.4565 20.1024 13.0897 19.0057 14.1566 18.7199Z" stroke="var(--wa-color-neutral-border-normal)" stroke-width="2"/>
-<path d="M33.8449 16.3273H26.2045C23.9953 16.3273 22.2045 18.1181 22.2045 20.3273V31.3778C22.2045 33.587 23.9953 35.3778 26.2045 35.3778H33.8449C36.0541 35.3778 37.8449 33.587 37.8449 31.3778V20.3273C37.8449 18.1181 36.0541 16.3273 33.8449 16.3273Z" fill="var(--wa-color-neutral-border-normal)" stroke="var(--wa-color-neutral-fill-quiet)" stroke-width="2"/>
-</svg>`;
-
-const template = `
-<wa-card with-header class="page-card" :aria-disabled="disabled ? 'true' : null" :inert="disabled"
-         @click="handleClick" @keyup.enter="handleClick"  @keyup.space="handleClick"
-         :role="action ? 'button' : null" :tabindex="action? 0 : null">
-  <slot name="icon" slot="header">
-    <div slot="header" v-html="icon || ICON_PLACEHOLDER"></div>
-  </slot>
-
-  <div class="page-name">
-    <div>
-      <slot>
-        {{ content.title }}
-        <wa-badge class="pro" v-if="pro">PRO</wa-badge>
-        <div v-if="content.subtitle" class="wa-caption-m">{{ content.subtitle }}</div>
-      </slot>
-    </div>
-    <slot name="extra"></slot>
-    <wa-icon v-if="action" name="angle-right" class="angle-right" variant="regular"></wa-icon>
-  </div>
-</wa-card>
-`;
-
-export default {
-  props: {
-    title: String,
-    subtitle: String,
-    info: Object,
-    icon: String,
-    pro: Boolean,
-    disabled: Boolean,
-    action: Function,
-  },
-
-  data() {
-    return {};
-  },
-
-  created() {
-    Object.assign(this, { ICON_PLACEHOLDER });
-  },
-
-  computed: {
-    content() {
-      let defaultTitle = this.info?.title ?? {};
-
-      if (this.title) {
-        return { title: this.title, subtitle: this.subtitle ?? defaultTitle };
-      } else {
-        return { title: defaultTitle, subtitle: this.subtitle };
-      }
-    },
-  },
-
-  methods: {
-    handleClick(event) {
-      if (this.disabled) {
-        event.stopImmediatePropagation();
-        return;
-      }
-
-      if (this.action) {
-        this.action(event);
-      }
-    },
-  },
-
-  template,
-  components: {},
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};
diff --git a/packages/webawesome/docs/assets/vue/components/palette-card.js b/packages/webawesome/docs/assets/vue/components/palette-card.js
deleted file mode 100644
index 335ff8978..000000000
--- a/packages/webawesome/docs/assets/vue/components/palette-card.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import palettes from '../../data/palettes.js';
-import PageCard from './page-card.js';
-import { hues } from '/assets/data/index.js';
-
-// TODO import from data.js once available
-const allHues = [...hues, 'gray'];
-
-const template = `
-	<page-card class="palette-card" :pro="$slots.default ? false : paletteMeta.isPro" :info="paletteMeta">
-    <template #icon>
-      <wa-scoped slot="header" class="palette-icon-host">
-        <template>
-          <link rel="stylesheet" :href="'/dist/styles/color/' + palette + '.css'">
-          <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-          <div class="palette-icon" style="--hues: {{ hues|length }}; --suffixes: {{ suffixes|length }}">
-            <template v-for="(hue, hueIndex) of hues">
-              <div class="swatch" v-for="(suffix, suffixIndex) of suffixes"
-                  :data-hue="hue" :data-suffix="suffix"
-                  :style="{
-                    '--color': 'var(--wa-color-' + hue + suffix + ')',
-                    gridColumn: hueIndex + 1,
-                    gridRow: suffixIndex + 1
-                  }">&nbsp;</div>
-            </template>
-          </div>
-        </template>
-      </wa-scoped>
-    </template>
-    <slot></slot>
-    <template #extra>
-      <slot name="extra" />
-    </template>
-	</page-card>
-`;
-
-export default {
-  props: {
-    palette: String,
-  },
-
-  data() {
-    return {};
-  },
-
-  created() {
-    Object.assign(this, { hues: allHues, suffixes: ['-80', '', '-20'] });
-  },
-
-  computed: {
-    paletteMeta() {
-      return palettes[this.palette] ?? {};
-    },
-  },
-
-  template,
-  components: {
-    PageCard,
-  },
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};
diff --git a/packages/webawesome/docs/assets/vue/components/panel.css b/packages/webawesome/docs/assets/vue/components/panel.css
deleted file mode 100644
index 4a38bec55..000000000
--- a/packages/webawesome/docs/assets/vue/components/panel.css
+++ /dev/null
@@ -1,167 +0,0 @@
-.sidebar.panel-container {
-  position: relative;
-  display: flex;
-  flex-flow: column;
-  gap: 0;
-  padding: 0;
-  width: 32ch;
-  overflow: hidden;
-  scrollbar-width: thin;
-}
-
-.panel {
-  /* Remove the uniform spacing used in wa-details */
-  --spacing: 0;
-  /* Specify value to manually set spacing where needed */
-  --panel-spacing: var(--wa-space-2xl);
-  --panel-background: var(--wa-color-surface-default);
-
-  display: flex;
-  flex-flow: column;
-  max-height: 100%;
-  margin-bottom: 0;
-  position: relative;
-  background: var(--panel-background);
-  border: none;
-  transition:
-    translate var(--wa-transition-slow) allow-discrete,
-    opacity var(--wa-transition-slow) 50ms allow-discrete;
-  /* Ensure horizontal scrollbar isn't visible when translate takes effect */
-  overflow-x: hidden !important;
-
-  @starting-style {
-    display: block;
-  }
-
-  .panel-header {
-    flex-direction: row-reverse;
-    justify-content: start;
-    gap: var(--wa-space-xs);
-    cursor: pointer;
-    background: var(--panel-background);
-    color: var(--wa-color-text-normal);
-    padding-block-end: var(--panel-spacing);
-    padding-inline: var(--panel-spacing);
-    transition: inherit;
-    transition-property: all;
-    margin-block: 0;
-    font-size: inherit;
-
-    [data-step='0'] &,
-    .previous & {
-      padding-block-start: var(--panel-spacing);
-    }
-
-    .back-icon {
-      vertical-align: -0.15em;
-      margin-inline-end: var(--wa-space-xs);
-      font-size: var(--wa-font-size-m);
-      transition: transform var(--wa-transition-normal) var(--wa-transition-easing);
-    }
-
-    &:hover .back-icon {
-      transform: translateX(-0.25em);
-    }
-
-    label {
-      pointer-events: none;
-      font: inherit;
-      color: inherit;
-    }
-  }
-
-  .panel-content {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-flow: column;
-    gap: var(--panel-spacing);
-    padding-block-end: var(--panel-spacing);
-    padding-inline: var(--panel-spacing);
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-block-end: 0;
-  }
-
-  &:not(.open) {
-    padding: 0;
-
-    &:not(.previous, .next) {
-      /* Hide all but the immediately preceding or following steps */
-      display: none;
-    }
-
-    &.next {
-      height: 0;
-      overflow: hidden;
-    }
-
-    &.next {
-      opacity: 0;
-    }
-
-    &.next {
-      translate: 100% 0%;
-    }
-
-    .panel-header {
-      font-size: var(--wa-font-size-s);
-      margin: 0;
-    }
-
-    .panel-content {
-      opacity: 0;
-      pointer-events: none;
-      content-visibility: hidden;
-      padding: 0;
-    }
-  }
-
-  &.open {
-    flex: 1;
-    opacity: 1;
-
-    .panel-header {
-      font-size: var(--wa-font-size-l);
-
-      .back-icon {
-        display: none;
-      }
-    }
-  }
-
-  .panel-content {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-flow: column;
-    transition: inherit;
-
-    @starting-style {
-      display: flex;
-      content-visibility: visible;
-    }
-  }
-
-  &:not(.open) {
-    &.previous {
-      .panel-content {
-        opacity: 0;
-        translate: -100% 0%;
-      }
-    }
-
-    &.next {
-      .panel-content {
-        opacity: 0;
-        translate: inherit;
-      }
-    }
-  }
-}
diff --git a/packages/webawesome/docs/assets/vue/components/scrollable.css b/packages/webawesome/docs/assets/vue/components/scrollable.css
deleted file mode 100644
index 4a49cc2d5..000000000
--- a/packages/webawesome/docs/assets/vue/components/scrollable.css
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Scrollable element in a vertical flex container
- * Showing shadows as an indicator of scrollability (PE wherever scroll-timeline is supported for now, can be polyfilled with JS later)
- */
-
-.scrollable {
-  --scroll-shadow-height: 0.5em;
-
-  flex-shrink: 1;
-  min-height: 0;
-  overflow: auto;
-  position: relative;
-  scrollbar-width: inherit;
-
-  &:is(.panel-content > div) {
-    display: flex;
-    flex-flow: column;
-    gap: inherit;
-  }
-
-  .scroll-shadow {
-    position: sticky;
-    z-index: 1;
-    inset-inline: 0;
-    display: block;
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset-inline: 0;
-      height: var(--scroll-shadow-height);
-      pointer-events: none;
-      mix-blend-mode: multiply;
-      background: radial-gradient(farthest-side, var(--wa-color-shadow) 10%, transparent) center / 120% 200%;
-      transition: var(--wa-transition-slow);
-      /* transition-property: opacity, transform, display, height, min-height; */
-      transition-behavior: allow-discrete;
-    }
-  }
-
-  &:not(.can-scroll-top) .scroll-shadow-top,
-  &:not(.can-scroll-bottom) .scroll-shadow-bottom {
-    opacity: 0;
-
-    &::before {
-      height: 0;
-    }
-  }
-
-  &:not(.can-scroll-top) .scroll-shadow-top {
-    &::before {
-      transform: translateY(-100%);
-    }
-  }
-
-  .scroll-shadow-top {
-    top: 0;
-
-    &::before {
-      background-position: bottom;
-    }
-  }
-
-  &:not(.can-scroll-bottom) .scroll-shadow-bottom {
-    &::before {
-      transform: translateY(100%);
-    }
-  }
-
-  .scroll-shadow-bottom {
-    top: 100%;
-
-    &::before {
-      bottom: 0;
-      background-position: top;
-    }
-  }
-}
-
-.scrollable:where(.panel-content) {
-  .scroll-shadow-top {
-    /* TODO convert this magic number to a token that explains what it is */
-    margin-bottom: -18px;
-  }
-
-  .scroll-shadow-bottom {
-    transform: translateY(var(--padding-bottom, var(--panel-spacing)));
-  }
-}
diff --git a/packages/webawesome/docs/assets/vue/components/swatch-select.js b/packages/webawesome/docs/assets/vue/components/swatch-select.js
deleted file mode 100644
index 1dbfab059..000000000
--- a/packages/webawesome/docs/assets/vue/components/swatch-select.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { capitalize } from '../../scripts/util/string.js';
-import inputMixin from '../mixins/input.js';
-import InfoTip from './info-tip.js';
-
-const template = `
-<wa-radio-group :label class="swatch-select" :class="'swatch-shape-' + shape" orientation="horizontal" :value @input="handleInput">
-  <info-tip v-for="value in values">
-      <wa-radio appearance="button" :value :label="getLabel(value)" :style="{'--color': getColor(value)}"></wa-radio>
-      <template #content>
-        {{ getLabel(value) }}
-      </template>
-  </info-tip>
-</wa-radio-group>
-  `;
-
-export default {
-  mixins: [inputMixin],
-  props: {
-    modelValue: String,
-    name: String,
-    label: String,
-    shape: {
-      type: String,
-      default: 'rounded',
-      validator: value => ['circle', 'rounded'].includes(value),
-    },
-    getLabel: {
-      type: Function,
-      default: capitalize,
-    },
-    getColor: {
-      type: Function,
-      default: value => `var(--wa-color-${value})`,
-    },
-    values: {
-      type: Array,
-      default: [],
-    },
-  },
-  computed: {},
-
-  methods: {
-    capitalize,
-  },
-
-  template,
-  components: {
-    InfoTip,
-  },
-
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};
diff --git a/packages/webawesome/docs/assets/vue/components/theme-card.js b/packages/webawesome/docs/assets/vue/components/theme-card.js
deleted file mode 100644
index 9536295bb..000000000
--- a/packages/webawesome/docs/assets/vue/components/theme-card.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import themes from '../../data/themes.js';
-import { capitalize } from '../../scripts/util/string.js';
-import PageCard from './page-card.js';
-import { getThemeCode } from '/assets/scripts/tweak/code.js';
-
-const iconTemplates = {
-  colors: `
-    <div class="theme-icon theme-color-icon" role="presentation">
-      <div style="background: var(--wa-color-brand-fill-loud);   border-color: var(--wa-color-brand-border-loud);   color: var(--wa-color-brand-on-loud);">A</div>
-      <div style="background: var(--wa-color-brand-fill-normal); border-color: var(--wa-color-brand-border-normal); color: var(--wa-color-brand-on-normal);">A</div>
-      <div style="background: var(--wa-color-brand-fill-quiet);  border-color: var(--wa-color-brand-border-quiet);  color: var(--wa-color-brand-on-quiet);">A</div>
-    </div>
-
-    <div class="wa-invert theme-icon theme-color-icon" role="presentation">
-      <div style="background: var(--wa-color-brand-fill-loud);   border-color: var(--wa-color-brand-border-loud);   color: var(--wa-color-brand-on-loud);">A</div>
-      <div style="background: var(--wa-color-brand-fill-normal); border-color: var(--wa-color-brand-border-normal); color: var(--wa-color-brand-on-normal);">A</div>
-      <div style="background: var(--wa-color-brand-fill-quiet);  border-color: var(--wa-color-brand-border-quiet);  color: var(--wa-color-brand-on-quiet);">A</div>
-    </div>`,
-  dimensionality: `
-    <wa-card size="small">
-      <wa-input value="Input" size="small"></wa-input>
-      <wa-button size="small" variant="brand">Go</wa-button>
-    </wa-card>
-  `,
-  overall: `
-    <div class="row row-1">
-      <h2>Aa</h2>
-      <div class="swatches">
-        <div class="wa-brand"></div>
-        <div class="wa-success"></div>
-        <div class="wa-warning"></div>
-        <div class="wa-danger"></div>
-      </div>
-    </div>
-    <div class="row row-2">
-      <wa-input value="Input" size="small"></wa-input>
-      <wa-button size="small" variant="brand">Go</wa-button>
-    </div>`,
-};
-
-const template = `
-  <page-card class="theme-card" :class="type + '-card'" :info="themeMeta" :data-theme="theme">
-    <template #icon>
-      <wa-scoped slot="header" class="theme-icon-host" inert :key="themeCode">
-        <template v-html="themeCode"></template>
-        <template>
-          <link rel="stylesheet" href="/dist/styles/utilities.css">
-          <link rel="stylesheet" href="/dist/styles/native/content.css">
-          <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-          <template v-if="type === 'colors'">
-            ${iconTemplates.colors}
-          </template>
-          <div v-else-if="type in iconTemplates && type !== 'overall'" class="theme-icon" :class="'theme-' + type + '-icon'" v-html="iconTemplates[type]" role="presentation">
-          </div>
-          <div v-else class="theme-icon theme-overall-icon" :class="'wa-theme-' + theme" role="presentation">
-            ${iconTemplates.overall}
-          </div>
-        </template>
-      </wa-scoped>
-    </template>
-    <slot></slot>
-    <template #extra>
-      <slot name="extra" />
-    </template>
-  </page-card>
-`;
-
-export default {
-  props: {
-    theme: String,
-    type: {
-      type: String,
-      validator(value) {
-        return !value || value in iconTemplates;
-      },
-    },
-    rest: Object,
-  },
-
-  data() {
-    return {};
-  },
-
-  created() {
-    this.iconTemplates = iconTemplates;
-  },
-
-  computed: {
-    themeMeta() {
-      let ret = themes[this.theme] ? { ...themes[this.theme] } : {};
-      // if (this.type === 'dimensionality' && typeof ret.dimension === 'string') {
-      //   ret.title = capitalize(ret.dimension);
-      // }
-      return ret;
-    },
-
-    themeCode() {
-      let theme = { ...(this.rest || {}), [this.type || 'base']: this.theme };
-      theme.base ||= 'default';
-
-      // if (theme.dimensionality) {
-      //   if (!themes[theme.dimensionality]?.dimension || theme.dimensionality === theme.base) {
-      //     theme.dimensionality = '';
-      //   }
-      // }
-
-      return getThemeCode(theme, { id: this.theme, language: 'html', cdnUrl: '/dist/' });
-    },
-  },
-
-  template,
-  components: {
-    PageCard,
-  },
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};
diff --git a/packages/webawesome/docs/assets/vue/components/ui-panel-container.js b/packages/webawesome/docs/assets/vue/components/ui-panel-container.js
deleted file mode 100644
index 8997b5671..000000000
--- a/packages/webawesome/docs/assets/vue/components/ui-panel-container.js
+++ /dev/null
@@ -1,120 +0,0 @@
-const template = `
-<section class="panel-container" ref="container" :style="{'--panel-step': step}" @open="handleOpen">
-  <slot ref="panels"></slot>
-</section>
-`;
-
-export default {
-  props: {
-    /** Currently selected id */
-    modelValue: String,
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      value: '',
-      previousValue: '',
-      step: 0,
-      trail: [],
-    };
-  },
-
-  mounted() {
-    let { container } = this.$refs;
-    let activePanel = container.querySelector(':scope > .open');
-
-    if (activePanel) {
-      let { step, value } = activePanel.dataset;
-      this.step = Number(step);
-      this.value = value;
-      this.$emit('update:modelValue', this.value);
-    }
-  },
-
-  computed: {
-    panels() {
-      if (!this.$refs.container) {
-        return new Map();
-      }
-
-      let { container } = this.$refs;
-
-      return new Map(
-        [...container.querySelectorAll(':scope > .panel')].map(panel => [
-          panel.dataset.value,
-          Number(panel.dataset.step),
-        ]),
-      );
-    },
-  },
-
-  methods: {
-    handleOpen(e) {
-      let { value, step } = e.detail;
-      this.value = value;
-      this.step = step;
-    },
-
-    updatePanels() {
-      let { container } = this.$refs;
-
-      if (!container) {
-        return;
-      }
-
-      let { step, value } = this;
-
-      if (this.panels.get(value) !== step) {
-        // Hasn't stabilized yet
-        return;
-      }
-
-      let previousValue = this.trail.findLast(panel => this.panels.get(panel) === step - 1);
-
-      for (let panel of container.querySelectorAll(':scope > .panel')) {
-        let panelStep = Number(panel.dataset.step);
-        let panelValue = panel.dataset.value;
-        let isPrevious = previousValue ? panelValue === previousValue : panelStep === step - 1;
-        let isOpen = panelValue === value;
-        let isNext = panelStep === step + 1;
-
-        panel.classList.toggle('previous', isPrevious);
-        panel.classList.toggle('open', isOpen);
-        panel.classList.toggle('next', isNext);
-      }
-    },
-  },
-
-  watch: {
-    value() {
-      if (this.value !== this.modelValue) {
-        this.$emit('update:modelValue', this.value);
-      }
-    },
-
-    modelValue: {
-      immediate: true,
-      async handler(value, previousValue) {
-        if (this.value !== this.modelValue) {
-          this.value = this.modelValue;
-        }
-
-        if (previousValue) {
-          this.trail.push(previousValue);
-        }
-
-        this.updatePanels();
-      },
-    },
-
-    step() {
-      this.updatePanels();
-    },
-  },
-
-  template,
-  components: {},
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};
diff --git a/packages/webawesome/docs/assets/vue/components/ui-panel.js b/packages/webawesome/docs/assets/vue/components/ui-panel.js
deleted file mode 100644
index c336d3a20..000000000
--- a/packages/webawesome/docs/assets/vue/components/ui-panel.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import UiScrollable from './ui-scrollable.js';
-
-const template = `
-<ui-scrollable :disabled="!open" role="group" :name="name || 'panel'" :data-value="value" :data-step="step" class="panel" :class="{open}">
-  <h2 :inert="open" class="panel-header" @click="openPanel" ref="panelHeader">
-    <wa-icon name="chevron-left" class="back-icon" />
-    <slot name="title">{{ title }}</slot>
-  </h2>
-  <div class="panel-content">
-    <slot></slot>
-  </div>
-</ui-scrollable>
-`;
-
-export default {
-  props: {
-    title: String,
-    name: String,
-    step: Number,
-
-    /** Id of this panel */
-    value: String,
-
-    /** Currently selected id */
-    modelValue: String,
-  },
-  emits: ['update:modelValue', 'open'],
-  data() {
-    return {};
-  },
-
-  mounted() {
-    if (this.open) {
-      this.$refs.panelHeader.dispatchEvent(
-        new CustomEvent('open', { detail: { value: this.value, step: this.step }, bubbles: true }),
-      );
-    }
-  },
-
-  computed: {
-    open() {
-      return this.value === this.modelValue;
-    },
-  },
-
-  methods: {
-    openPanel() {
-      let wasOpen = this.open;
-      this.$emit('update:modelValue', wasOpen ? '' : this.value);
-    },
-  },
-
-  watch: {
-    open: {
-      immediate: true,
-      handler(open) {
-        if (open && this.$refs.panelHeader) {
-          this.$refs.panelHeader.dispatchEvent(
-            new CustomEvent('open', { detail: { value: this.value, step: this.step }, bubbles: true }),
-          );
-        }
-      },
-    },
-  },
-
-  template,
-  components: {
-    UiScrollable,
-  },
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};
diff --git a/packages/webawesome/docs/assets/vue/components/ui-scrollable.js b/packages/webawesome/docs/assets/vue/components/ui-scrollable.js
deleted file mode 100644
index a23c0491a..000000000
--- a/packages/webawesome/docs/assets/vue/components/ui-scrollable.js
+++ /dev/null
@@ -1,77 +0,0 @@
-const template = `
-<div class="scrollable" :class="{'can-scroll-top': canScrollTop, 'can-scroll-bottom': canScrollBottom}" ref="container">
-  <div v-if="!disabled" class="scroll-shadow scroll-shadow-top"></div>
-  <slot></slot>
-  <div v-if="!disabled" class="scroll-shadow scroll-shadow-bottom"></div>
-</div>
-`;
-
-export default {
-  props: {
-    disabled: Boolean,
-  },
-  data() {
-    return {
-      scrollTop: 0,
-      scrollHeight: 0,
-      height: 0,
-    };
-  },
-
-  mounted() {
-    let { container, content } = this.$refs;
-    container.addEventListener('scroll', this.handleScroll, { passive: true });
-
-    this.scrollHeight = container.scrollHeight;
-    this.height = container.clientHeight;
-  },
-
-  computed: {
-    canScrollTop() {
-      return !this.disabled && this.scrollTop > 1;
-    },
-
-    maxScrollTop() {
-      return this.scrollHeight - this.height;
-    },
-
-    canScrollBottom() {
-      return !this.disabled && this.scrollTop < this.maxScrollTop - 1;
-    },
-
-    scrollProgress() {
-      return this.scrollTop / this.maxScrollTop;
-    },
-
-    scrollProgressEnd() {
-      return this.scrollProgress + this.maxScrollTop / this.scrollHeight;
-    },
-
-    scrollBottom() {
-      return this.scrollHeight * this.scrollProgressEnd;
-    },
-  },
-
-  methods: {
-    handleScroll(event) {
-      let { container } = this.$refs;
-      this.scrollTop = container.scrollTop;
-    },
-  },
-
-  watch: {
-    scrollTop(value, oldValue) {
-      let { container } = this.$refs;
-      if (container && oldValue === 0) {
-        this.scrollHeight = container.scrollHeight;
-        this.height = container.clientHeight;
-      }
-    },
-  },
-
-  template,
-  components: {},
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};
diff --git a/packages/webawesome/docs/assets/vue/components/ui-slider.css b/packages/webawesome/docs/assets/vue/components/ui-slider.css
deleted file mode 100644
index 41089d4da..000000000
--- a/packages/webawesome/docs/assets/vue/components/ui-slider.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.ui-slider {
-  display: grid;
-  grid-template:
-    'label label label'
-    'min slider max';
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: var(--wa-space-2xs);
-
-  wa-slider {
-    display: block;
-    grid-area: slider;
-    width: 100%;
-  }
-
-  &:has(.ui-slider-min) wa-slider {
-    &::part(label) {
-      margin-inline-start: calc(-1 * (var(--wa-space-s) + 1rem + 2 * var(--wa-border-width-m)));
-    }
-  }
-
-  .clear-button {
-    vertical-align: middle;
-    margin-inline-start: var(--wa-space-xs);
-    font-size: var(--wa-font-size-xs);
-  }
-}
-
-.ui-slider-header {
-  grid-area: label;
-}
-
-.ui-slider-min,
-.ui-slider-max {
-  width: min-content;
-}
-
-.ui-slider-min {
-  grid-area: min;
-  margin-inline-start: calc(-1 * var(--wa-space-s));
-}
-
-.ui-slider-max {
-  grid-area: max;
-  margin-inline-end: calc(-1 * var(--wa-space-s));
-}
diff --git a/packages/webawesome/docs/assets/vue/components/ui-slider.js b/packages/webawesome/docs/assets/vue/components/ui-slider.js
deleted file mode 100644
index 5d7370028..000000000
--- a/packages/webawesome/docs/assets/vue/components/ui-slider.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import inputMixin from '../mixins/input.js';
-import InfoTip from './info-tip.js';
-
-let maxUid = 0;
-
-const template = `
-    <div class="ui-slider">
-      <div class="ui-slider-header">
-        <label :for="sliderId">{{ label }}</label>
-        <info-tip v-if="clearable && (value !== defaultValue ?? initialValue)" :text="'Reset to ' + valueFormatter(defaultValue ?? initialValue)">
-          <wa-button @click="value = defaultValue ?? initialValue" class="clear-button">
-            <wa-icon name="circle-xmark" library="system" variant="regular" :label="'Reset to ' + tooltipFormatter(defaultValue ?? initialValue)"></wa-icon>
-          </wa-button>
-        </info-tip>
-      </div>
-      <info-tip v-if="$slots.min" :text="'Set to min (' + valueFormatter(min) + ')'">
-        <wa-button class="ui-slider-min" appearance="plain" size="small" @click="value = min"><slot name="min"></slot></wa-button>
-      </info-tip>
-      <wa-slider ref="slider" :id="sliderId" class="ui-slider" :value  @input="handleInput"
-                :min="min" :max="max" :step="step">
-      </wa-slider>
-      <info-tip v-if="$slots.max" :text="'Set to max (' + valueFormatter(max) + ')'">
-        <wa-button class="ui-slider-max" appearance="plain" size="small" @click="value = max"><slot name="max"></slot></wa-button>
-      </info-tip>
-    </div>
-  `;
-
-export default {
-  mixins: [inputMixin],
-  props: {
-    label: String,
-    id: String,
-    defaultValue: Number,
-    min: {
-      type: Number,
-      default: 0,
-    },
-    max: {
-      type: Number,
-      default: 100,
-    },
-    step: {
-      type: Number,
-      default(rawProps) {
-        return (rawProps.max - rawProps.min) / 100;
-      },
-    },
-    format: [Function, String],
-    clearable: Boolean,
-  },
-  data() {
-    let uid = ++maxUid;
-    return { uid, value: this.modelValue };
-  },
-  mounted() {
-    if (this.format) {
-      this.$refs.slider.tooltipFormatter = this.valueFormatter;
-    }
-  },
-  computed: {
-    sliderId() {
-      return this.id || `ui-slider-${this.uid}`;
-    },
-    valueFormatter() {
-      if (typeof this.format === 'string') {
-        return v => this.format.replaceAll('{value}', v);
-      }
-
-      return this.format;
-    },
-  },
-
-  watch: {
-    tooltip() {
-      if (this.$refs.slider) {
-        this.$refs.slider.tooltipFormatter = this.tooltipFormatter;
-      }
-    },
-  },
-  template,
-
-  components: {
-    InfoTip,
-  },
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};
diff --git a/packages/webawesome/docs/assets/vue/directives/content.js b/packages/webawesome/docs/assets/vue/directives/content.js
deleted file mode 100644
index 893c5acae..000000000
--- a/packages/webawesome/docs/assets/vue/directives/content.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// Like v-text, but doesn't complain if the element has content,
-// making it possible to use in a PE fashion, with the contents being the fallback
-export default function content(el, { value, arg }) {
-  if (!el.dataset.fallback) {
-    // Store the original content as a fallback the first time
-    el.dataset.fallback = el.textContent;
-  }
-
-  if (value === '') {
-    value = el.dataset.fallback;
-  } else {
-    if (arg === 'number') {
-      value = Number(value).toLocaleString(undefined, { maximumSignificantDigits: 2 });
-    }
-  }
-
-  if (arg === 'html') {
-    el.innerHTML = value;
-  } else {
-    el.textContent = value;
-  }
-}
diff --git a/packages/webawesome/docs/assets/vue/mixins/input.js b/packages/webawesome/docs/assets/vue/mixins/input.js
deleted file mode 100644
index 0f653df2a..000000000
--- a/packages/webawesome/docs/assets/vue/mixins/input.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Mixin for components that behave like form controls.
- */
-
-export default {
-  props: {
-    modelValue: {
-      type: [String, Number, Boolean],
-    },
-  },
-  data() {
-    return {
-      initialValue: this.modelValue,
-      value: this.modelValue,
-    };
-  },
-  emits: ['update:modelValue', 'input'],
-  methods: {
-    handleInput(e) {
-      this.value = e.target.value;
-      this.$emit('input', this.value);
-    },
-  },
-  watch: {
-    value(value) {
-      this.$emit('update:modelValue', value);
-    },
-    modelValue(value) {
-      this.value = value;
-    },
-  },
-};
diff --git a/packages/webawesome/docs/assets/vue/mixins/saved.js b/packages/webawesome/docs/assets/vue/mixins/saved.js
deleted file mode 100644
index 18dc53d5d..000000000
--- a/packages/webawesome/docs/assets/vue/mixins/saved.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import my from '/assets/scripts/my.js';
-import Permalink from '/assets/scripts/permalink.js';
-
-export default {
-  data() {
-    return {
-      uid: undefined,
-      saved: null,
-      unsavedChanges: false,
-      permalink: new Permalink(),
-    };
-  },
-
-  created() {
-    if (this.permalink.has('uid')) {
-      this.uid = Number(this.permalink.get('uid'));
-      this.saved = this.controller.saved.find(p => p.uid === this.uid);
-    }
-
-    this.controller.addEventListener('delete', ({ detail: entity }) => {
-      if (entity.uid === this.saved?.uid) {
-        this.postDelete();
-      }
-    });
-  },
-
-  mounted() {
-    this.$nextTick().then(() => {
-      if (!location.search || this.saved) {
-        this.unsavedChanges = false;
-      }
-    });
-  },
-
-  computed: {
-    controller() {
-      return my[this.collection];
-    },
-
-    title() {
-      if (this.saved) {
-        return this.saved.title;
-      } else if (this.unsavedChanges) {
-        return this.defaultTitle;
-      } else {
-        return this.originalTitle;
-      }
-    },
-  },
-
-  watch: {
-    saved: {
-      deep: true,
-      handler() {
-        this.unsavedChanges = !this.saved;
-      },
-    },
-  },
-
-  methods: {
-    async save({ title } = {}) {
-      let uid = this.uid;
-
-      this.saved ??= { uid: this.uid };
-      this.saved.id = this.id;
-
-      if (title) {
-        // Renaming
-        this.saved.title = title;
-      } else {
-        this.saved.title ??= this.defaultTitle;
-      }
-
-      this.saved.search = location.search;
-
-      this.saved = this.controller.save(this.saved);
-
-      if (uid !== this.saved.uid) {
-        // UID changed (most likely from saving a new entity)
-        this.uid = this.saved.uid;
-        this.permalink.set('uid', this.uid);
-        this.permalink.updateLocation();
-        await this.$nextTick();
-        this.save(); // Save again to update the search param to include the UID
-      }
-
-      this.unsavedChanges = false;
-    },
-
-    rename() {
-      let newTitle = prompt('Title:', this.saved?.title ?? this.defaultTitle);
-
-      if (newTitle && newTitle !== this.saved?.title) {
-        this.save({ title: newTitle });
-      }
-    },
-
-    // Cannot name this delete() because Vue complains
-    deleteSaved() {
-      this.controller.delete(this.saved);
-    },
-
-    postDelete() {
-      this.saved = null;
-      this.permalink.delete('uid');
-      this.uid = undefined;
-      this.permalink.updateLocation();
-    },
-  },
-};
diff --git a/packages/webawesome/docs/docs/components/animated-image.md b/packages/webawesome/docs/docs/components/animated-image.md
index 2f97e649c..bcc0cbe4d 100644
--- a/packages/webawesome/docs/docs/components/animated-image.md
+++ b/packages/webawesome/docs/docs/components/animated-image.md
@@ -1,7 +1,6 @@
 ---
 title: Animated Image
 description: A component for displaying animated GIFs and WEBPs that play and pause on interaction.
-tags: [imagery, niche]
 icon: animated-image
 ---
 
diff --git a/packages/webawesome/docs/docs/components/animation.md b/packages/webawesome/docs/docs/components/animation.md
index 12cc733f0..88f75f9d2 100644
--- a/packages/webawesome/docs/docs/components/animation.md
+++ b/packages/webawesome/docs/docs/components/animation.md
@@ -1,7 +1,6 @@
 ---
 title: Animation
 description: Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.
-tags: [helpers, primitives]
 icon: animation
 ---
 
@@ -45,8 +44,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
   <div class="controls">
     <wa-select label="Animation" value="bounce"></wa-select>
     <wa-select label="Easing" value="linear"></wa-select>
-    <wa-input label="Playback Rate" type="number" min="0" max="2" step=".25" value="1">
-    </wa-input>
+    <wa-input label="Playback Rate" type="number" min="0" max="2" step=".25" value="1"> </wa-input>
   </div>
 </div>
 
@@ -64,7 +62,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
   animations.map(name => {
     const option = Object.assign(document.createElement('wa-option'), {
       textContent: name,
-      value: name
+      value: name,
     });
     animationName.appendChild(option);
   });
@@ -72,7 +70,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
   easings.map(name => {
     const option = Object.assign(document.createElement('wa-option'), {
       textContent: name,
-      value: name
+      value: name,
     });
     easingName.appendChild(option);
   });
@@ -156,15 +154,15 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/
       easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
       fillMode: 'both',
       transformOrigin: 'center center',
-      transform: 'rotate(0)'
+      transform: 'rotate(0)',
     },
     {
       offset: 1,
       easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
       fillMode: 'both',
       transformOrigin: 'center center',
-      transform: 'rotate(90deg)'
-    }
+      transform: 'rotate(90deg)',
+    },
   ];
 </script>
 
@@ -197,3 +195,4 @@ Animations won't play until you apply the `play` attribute. You can omit it init
     animation.play = true;
   });
 </script>
+```
diff --git a/packages/webawesome/docs/docs/components/avatar.md b/packages/webawesome/docs/docs/components/avatar.md
index 3f16ddfc3..f93c6f9c6 100644
--- a/packages/webawesome/docs/docs/components/avatar.md
+++ b/packages/webawesome/docs/docs/components/avatar.md
@@ -1,7 +1,6 @@
 ---
 title: Avatar
 description: Avatars are used to represent a person or object.
-tags: [imagery, apps, content]
 icon: avatar
 ---
 
diff --git a/packages/webawesome/docs/docs/components/badge.md b/packages/webawesome/docs/docs/components/badge.md
index 4f3895a2f..710808307 100644
--- a/packages/webawesome/docs/docs/components/badge.md
+++ b/packages/webawesome/docs/docs/components/badge.md
@@ -1,7 +1,6 @@
 ---
 title: Badge
 description: Badges are used to draw attention and display statuses or counts.
-tags: [feedback, content]
 icon: badge
 ---
 
diff --git a/packages/webawesome/docs/docs/components/breadcrumb-item.md b/packages/webawesome/docs/docs/components/breadcrumb-item.md
index 559b34451..3c0a61a33 100644
--- a/packages/webawesome/docs/docs/components/breadcrumb-item.md
+++ b/packages/webawesome/docs/docs/components/breadcrumb-item.md
@@ -1,8 +1,6 @@
 ---
 title: Breadcrumb Item
 description: Breadcrumb Items are used inside breadcrumbs to represent different links.
-tags: component
-parent: breadcrumb
 ---
 
 ```html {.example}
diff --git a/packages/webawesome/docs/docs/components/breadcrumb.md b/packages/webawesome/docs/docs/components/breadcrumb.md
index 65db6ff40..be0c965ac 100644
--- a/packages/webawesome/docs/docs/components/breadcrumb.md
+++ b/packages/webawesome/docs/docs/components/breadcrumb.md
@@ -1,7 +1,6 @@
 ---
 title: Breadcrumb
 description: Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
-tags: [navigation]
 icon: breadcrumb
 ---
 
diff --git a/packages/webawesome/docs/docs/components/button-group.md b/packages/webawesome/docs/docs/components/button-group.md
index 5b800018c..e90da7d98 100644
--- a/packages/webawesome/docs/docs/components/button-group.md
+++ b/packages/webawesome/docs/docs/components/button-group.md
@@ -1,7 +1,6 @@
 ---
 title: Button Group
 description: Button groups can be used to group related buttons into sections.
-tags: [actions, forms, apps]
 icon: button-group
 ---
 
diff --git a/packages/webawesome/docs/docs/components/button.md b/packages/webawesome/docs/docs/components/button.md
index 5cabbf00a..989efbd1e 100644
--- a/packages/webawesome/docs/docs/components/button.md
+++ b/packages/webawesome/docs/docs/components/button.md
@@ -1,8 +1,6 @@
 ---
 title: Button
 description: Buttons represent actions that are available to the user.
-tags: [actions, forms]
-native: button
 icon: button
 ---
 
diff --git a/packages/webawesome/docs/docs/components/callout.md b/packages/webawesome/docs/docs/components/callout.md
index 5a378475f..2608e3ed8 100644
--- a/packages/webawesome/docs/docs/components/callout.md
+++ b/packages/webawesome/docs/docs/components/callout.md
@@ -1,9 +1,7 @@
 ---
 title: Callout
 description: Callouts are used to display important messages inline.
-tags: [feedback, content]
 icon: callout
-native: callout
 ---
 
 ```html {.example}
@@ -135,5 +133,6 @@ Icons are optional. Simply omit the `icon` slot if you don't want them.
 ### Styling
 
 You can customize the callout's appearance mostly by setting regular CSS properties:
+
 - `background`, `border`, `border-radius`, `color`, `padding`, `margin`, etc. work as expected
 - `gap` sets the space between the icon and the content
diff --git a/packages/webawesome/docs/docs/components/card.md b/packages/webawesome/docs/docs/components/card.md
index 1100f7b3e..15a1fc4c5 100644
--- a/packages/webawesome/docs/docs/components/card.md
+++ b/packages/webawesome/docs/docs/components/card.md
@@ -1,7 +1,6 @@
 ---
 title: Card
 description: Cards can be used to group related subjects in a container.
-tags: [organization, layout]
 icon: card
 ---
 
@@ -115,7 +114,7 @@ If using SSR, you need to also use the `with-media` attribute to add a media sec
   </wa-card>
   <wa-card class="card-media">
     <video slot="media" controls>
-      <source src="https://uploads.webawesome.com/dog-with-glasses.mp4">
+      <source src="https://uploads.webawesome.com/dog-with-glasses.mp4" />
       <p>Your browser doesn't support HTML video</p>
     </video>
     This is a kitten, but not just any kitten. This kitten likes walking along pallets.
@@ -135,25 +134,25 @@ Use the `appearance` attribute to change the card's visual appearance.
 
 ```html {.example}
 <div class="wa-grid">
-<wa-card>
-  <img
-    slot="media"
-    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
-    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-  />
-  <div slot="header">Outlined (default)</div>
-  Card content.
-</wa-card>
-{% for appearance in ['outlined filled', 'outlined accent', 'plain', 'filled', 'accent'] -%}
-<wa-card appearance="{{ appearance }}">
-  <img
-    slot="media"
-    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
-    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-  />
-  <div slot="header">{{ appearance | capitalize }}</div>
-  Card content.
-</wa-card>
-{%- endfor %}
+  <wa-card>
+    <img
+      slot="media"
+      src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+      alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+    />
+    <div slot="header">Outlined (default)</div>
+    Card content.
+  </wa-card>
+  {% for appearance in ['outlined filled', 'outlined accent', 'plain', 'filled', 'accent'] -%}
+  <wa-card appearance="{{ appearance }}">
+    <img
+      slot="media"
+      src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+      alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+    />
+    <div slot="header">{{ appearance | capitalize }}</div>
+    Card content.
+  </wa-card>
+  {%- endfor %}
 </div>
 ```
diff --git a/packages/webawesome/docs/docs/components/carousel-item.md b/packages/webawesome/docs/docs/components/carousel-item.md
index 6fb06cce8..2be331a2b 100644
--- a/packages/webawesome/docs/docs/components/carousel-item.md
+++ b/packages/webawesome/docs/docs/components/carousel-item.md
@@ -1,8 +1,6 @@
 ---
 title: Carousel Item
 description: A carousel item represent a slide within a carousel.
-tags: component
-parent: carousel
 icon: carousel-item
 ---
 
diff --git a/packages/webawesome/docs/docs/components/carousel.md b/packages/webawesome/docs/docs/components/carousel.md
index d909d037c..b52649348 100644
--- a/packages/webawesome/docs/docs/components/carousel.md
+++ b/packages/webawesome/docs/docs/components/carousel.md
@@ -1,7 +1,6 @@
 ---
 title: Carousel
 description: Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
-tags: [imagery, disclosure]
 icon: carousel
 ---
 
@@ -536,7 +535,11 @@ The carousel has a robust API that makes it possible to extend and customize. Th
 
 <div class="thumbnails">
   <div class="scroller">
-    <img alt="Thumbnail by 1" class="image active" src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=10" />
+    <img
+      alt="Thumbnail by 1"
+      class="image active"
+      src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=10"
+    />
     <img alt="Thumbnail by 2" class="image" src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=10" />
     <img alt="Thumbnail by 3" class="image" src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?q=10" />
     <img alt="Thumbnail by 4" class="image" src="https://images.unsplash.com/photo-1475113548554-5a36f1f523d6?q=10" />
@@ -606,7 +609,7 @@ The carousel has a robust API that makes it possible to extend and customize. Th
         thumb.classList.toggle('active', i === slideIndex);
         if (i === slideIndex) {
           thumb.scrollIntoView({
-            block: 'nearest'
+            block: 'nearest',
           });
         }
       });
diff --git a/packages/webawesome/docs/docs/components/checkbox.md b/packages/webawesome/docs/docs/components/checkbox.md
index 6c0d111f9..52d635bbb 100644
--- a/packages/webawesome/docs/docs/components/checkbox.md
+++ b/packages/webawesome/docs/docs/components/checkbox.md
@@ -1,8 +1,6 @@
 ---
 title: Checkbox
 description: Checkboxes allow the user to toggle an option on or off.
-tags: [inputs, forms]
-native: checkbox
 icon: checkbox
 ---
 
diff --git a/packages/webawesome/docs/docs/components/color-picker.md b/packages/webawesome/docs/docs/components/color-picker.md
index bc6ac7699..e27f01d08 100644
--- a/packages/webawesome/docs/docs/components/color-picker.md
+++ b/packages/webawesome/docs/docs/components/color-picker.md
@@ -1,8 +1,6 @@
 ---
 title: Color Picker
 description: Color pickers allow the user to select a color.
-tags: [inputs, forms]
-native: input
 icon: color-picker
 ---
 
diff --git a/packages/webawesome/docs/docs/components/comparison.md b/packages/webawesome/docs/docs/components/comparison.md
index b94c8ab1b..5ee8ec5b4 100644
--- a/packages/webawesome/docs/docs/components/comparison.md
+++ b/packages/webawesome/docs/docs/components/comparison.md
@@ -1,7 +1,6 @@
 ---
 title: Comparison
 description: Compare visual differences between similar content with a sliding panel.
-tags: [imagery, niche]
 icon: comparison
 ---
 
diff --git a/packages/webawesome/docs/docs/components/components.json b/packages/webawesome/docs/docs/components/components.json
deleted file mode 100644
index f53d51e9f..000000000
--- a/packages/webawesome/docs/docs/components/components.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "layout": "component.njk",
-  "tags": ["components"],
-  "eleventyComputed": {
-    "component": "{{ components[page.fileSlug] }}",
-    "description": "{{ components[page.fileSlug].summary }}",
-    "status": "{{ components[page.fileSlug].status }}",
-    "since": "{{ components[page.fileSlug].since }}",
-    "element": "<{{ components[page.fileSlug].tagName }}>"
-  }
-}
diff --git a/packages/webawesome/docs/docs/components/copy-button.md b/packages/webawesome/docs/docs/components/copy-button.md
index ef461af0b..8ffa58404 100644
--- a/packages/webawesome/docs/docs/components/copy-button.md
+++ b/packages/webawesome/docs/docs/components/copy-button.md
@@ -1,7 +1,6 @@
 ---
 title: Copy Button
 description: Copies data to the clipboard when the user clicks the button.
-tags: [actions, apps]
 icon: copy-button
 ---
 
@@ -53,13 +52,13 @@ To copy data from an attribute, use `from="id[attr]"` where `id` is the id of th
 <span id="my-phone">+1 (234) 456-7890</span>
 <wa-copy-button from="my-phone"></wa-copy-button>
 
-<br><br>
+<br /><br />
 
 <!-- Copies the input's "value" property -->
 <wa-input id="my-input" type="text" value="User input" style="display: inline-block; max-width: 300px;"></wa-input>
 <wa-copy-button from="my-input.value"></wa-copy-button>
 
-<br><br>
+<br /><br />
 
 <!-- Copies the link's "href" attribute -->
 <a id="my-link" href="https://shoelace.style/">Web Awesome Website</a>
diff --git a/packages/webawesome/docs/docs/components/details.md b/packages/webawesome/docs/docs/components/details.md
index 0678f6c4a..1b58757bb 100644
--- a/packages/webawesome/docs/docs/components/details.md
+++ b/packages/webawesome/docs/docs/components/details.md
@@ -1,9 +1,6 @@
 ---
 title: Details
 description: Details show a brief summary and expand to show additional content.
-tags: [organization, apps, content, disclosure]
-icon: details
-native: details
 ---
 
 <!-- cspell:dictionaries lorem-ipsum -->
@@ -83,22 +80,22 @@ Use the `appearance` attribute to change the element’s visual appearance.
 
 ```html {.example}
 <div class="wa-stack">
-<wa-details summary="Outlined (default)">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-</wa-details>
-<wa-details summary="Filled" appearance="filled">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-</wa-details>
-<wa-details summary="Filled + Outlined" appearance="filled outlined">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-</wa-details>
-<wa-details summary="Plain" appearance="plain">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-</wa-details>
+  <wa-details summary="Outlined (default)">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+  <wa-details summary="Filled" appearance="filled">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+  <wa-details summary="Filled + Outlined" appearance="filled outlined">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+  <wa-details summary="Plain" appearance="plain">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
 </div>
 ```
 
@@ -109,18 +106,18 @@ Use the `name` attribute to create accordion-like behavior where only one detail
 ```html {.example}
 <div class="wa-stack">
   <wa-details name="group-1" summary="Section 1" open>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
   </wa-details>
 
   <wa-details name="group-1" summary="Section 2">
-  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
-  eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
+    eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
   </wa-details>
 
   <wa-details name="group-1" summary="Section 3">
-  At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
-  corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
+    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
+    corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
   </wa-details>
 </div>
-```
\ No newline at end of file
+```
diff --git a/packages/webawesome/docs/docs/components/dialog.md b/packages/webawesome/docs/docs/components/dialog.md
index 9670315f2..a11a6371d 100644
--- a/packages/webawesome/docs/docs/components/dialog.md
+++ b/packages/webawesome/docs/docs/components/dialog.md
@@ -1,10 +1,7 @@
 ---
 title: Dialog
 description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.'
-tags: [organization, apps, disclosure]
 icon: dialog
-native: dialog
-keywords: modal
 ---
 
 <!-- cspell:dictionaries lorem-ipsum -->
@@ -21,7 +18,7 @@ keywords: modal
   const dialog = document.querySelector('#dialog-overview');
   const openButton = dialog.nextElementSibling;
 
-  openButton.addEventListener('click', () => dialog.open = true);
+  openButton.addEventListener('click', () => (dialog.open = true));
 </script>
 ```
 
@@ -43,7 +40,7 @@ Headers are enabled by default. To render a dialog without a header, add the `wi
   const dialog = document.querySelector('.dialog-without-header');
   const openButton = dialog.nextElementSibling;
 
-  openButton.addEventListener('click', () => dialog.open = true);
+  openButton.addEventListener('click', () => (dialog.open = true));
 </script>
 ```
 
@@ -63,7 +60,7 @@ Footers can be used to display titles and more. Use the `footer` slot to add a f
   const dialog = document.querySelector('.dialog-footer');
   const openButton = dialog.nextElementSibling;
 
-  openButton.addEventListener('click', () => dialog.open = true);
+  openButton.addEventListener('click', () => (dialog.open = true));
 </script>
 ```
 
@@ -107,7 +104,7 @@ Just use the `--width` custom property to set the dialog's width.
   const dialog = document.querySelector('.dialog-width');
   const openButton = dialog.nextElementSibling;
 
-  openButton.addEventListener('click', () => dialog.open = true);
+  openButton.addEventListener('click', () => (dialog.open = true));
 </script>
 ```
 
@@ -129,7 +126,7 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
   const dialog = document.querySelector('.dialog-scrolling');
   const openButton = dialog.nextElementSibling;
 
-  openButton.addEventListener('click', () => dialog.open = true);
+  openButton.addEventListener('click', () => (dialog.open = true));
 </script>
 ```
 
@@ -153,7 +150,7 @@ The header shows a functional close button by default. You can use the `header-a
   const openButton = dialog.nextElementSibling;
   const newWindowButton = dialog.querySelector('.new-window');
 
-  openButton.addEventListener('click', () => dialog.open = true);
+  openButton.addEventListener('click', () => (dialog.open = true));
   newWindowButton.addEventListener('click', () => window.open(location.href));
 </script>
 ```
@@ -174,7 +171,7 @@ If you want the dialog to close when the user clicks on the overlay, add the `li
   const dialog = document.querySelector('.dialog-light-dismiss');
   const openButton = dialog.nextElementSibling;
 
-  openButton.addEventListener('click', () => dialog.open = true);
+  openButton.addEventListener('click', () => (dialog.open = true));
 </script>
 ```
 
@@ -199,7 +196,7 @@ You can use `event.detail.source` to determine which element triggered the reque
   const openButton = dialog.nextElementSibling;
   const closeButton = dialog.querySelector('wa-button[slot="footer"]');
 
-  openButton.addEventListener('click', () => dialog.open = true);
+  openButton.addEventListener('click', () => (dialog.open = true));
 
   // Prevent the dialog from closing unless the close button was clicked
   dialog.addEventListener('wa-hide', event => {
@@ -227,6 +224,6 @@ To give focus to a specific element when the dialog opens, use the `autofocus` a
   const input = dialog.querySelector('wa-input');
   const openButton = dialog.nextElementSibling;
 
-  openButton.addEventListener('click', () => dialog.open = true);
+  openButton.addEventListener('click', () => (dialog.open = true));
 </script>
 ```
diff --git a/packages/webawesome/docs/docs/components/divider.md b/packages/webawesome/docs/docs/components/divider.md
index 22533eadb..7c666bf54 100644
--- a/packages/webawesome/docs/docs/components/divider.md
+++ b/packages/webawesome/docs/docs/components/divider.md
@@ -1,7 +1,6 @@
 ---
 title: Divider
 description: Dividers are used to visually separate or group elements.
-tags: [organization, content, forms]
 icon: divider
 ---
 
diff --git a/packages/webawesome/docs/docs/components/drawer.md b/packages/webawesome/docs/docs/components/drawer.md
index 5001b2cef..a1147212c 100644
--- a/packages/webawesome/docs/docs/components/drawer.md
+++ b/packages/webawesome/docs/docs/components/drawer.md
@@ -1,7 +1,6 @@
 ---
 title: Drawer
 description: Drawers slide in from a container to expose additional options and information.
-tags: [organization, disclosure]
 icon: drawer
 ---
 
@@ -19,7 +18,7 @@ icon: drawer
   const drawer = document.querySelector('#drawer-overview');
   const openButton = drawer.nextElementSibling;
 
-  openButton.addEventListener('click', () => drawer.open = true);
+  openButton.addEventListener('click', () => (drawer.open = true));
 </script>
 ```
 
@@ -41,7 +40,7 @@ Headers are enabled by default. To render a drawer without a header, add the `wi
   const drawer = document.querySelector('.drawer-without-header');
   const openButton = drawer.nextElementSibling;
 
-  openButton.addEventListener('click', () => drawer.open = true);
+  openButton.addEventListener('click', () => (drawer.open = true));
 </script>
 ```
 
@@ -61,7 +60,7 @@ Footers can be used to display titles and more. Use the `footer` slot to add a f
   const drawer = document.querySelector('.drawer-footer');
   const openButton = drawer.nextElementSibling;
 
-  openButton.addEventListener('click', () => drawer.open = true);
+  openButton.addEventListener('click', () => (drawer.open = true));
 </script>
 ```
 
@@ -105,7 +104,7 @@ By default, drawers slide in from the end. To make the drawer slide in from the
   const drawer = document.querySelector('.drawer-placement-start');
   const openButton = drawer.nextElementSibling;
 
-  openButton.addEventListener('click', () => drawer.open = true);
+  openButton.addEventListener('click', () => (drawer.open = true));
 </script>
 ```
 
@@ -125,7 +124,7 @@ To make the drawer slide in from the top, set the `placement` attribute to `top`
   const drawer = document.querySelector('.drawer-placement-top');
   const openButton = drawer.nextElementSibling;
 
-  openButton.addEventListener('click', () => drawer.open = true);
+  openButton.addEventListener('click', () => (drawer.open = true));
 </script>
 ```
 
@@ -145,7 +144,7 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b
   const drawer = document.querySelector('.drawer-placement-bottom');
   const openButton = drawer.nextElementSibling;
 
-  openButton.addEventListener('click', () => drawer.open = true);
+  openButton.addEventListener('click', () => (drawer.open = true));
 </script>
 ```
 
@@ -165,7 +164,7 @@ Use the `--size` custom property to set the drawer's size. This will be applied
   const drawer = document.querySelector('.drawer-custom-size');
   const openButton = drawer.nextElementSibling;
 
-  openButton.addEventListener('click', () => drawer.open = true);
+  openButton.addEventListener('click', () => (drawer.open = true));
 </script>
 ```
 
@@ -187,7 +186,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
   const drawer = document.querySelector('.drawer-scrolling');
   const openButton = drawer.nextElementSibling;
 
-  openButton.addEventListener('click', () => drawer.open = true);
+  openButton.addEventListener('click', () => (drawer.open = true));
 </script>
 ```
 
@@ -211,7 +210,7 @@ The header shows a functional close button by default. You can use the `header-a
   const openButton = drawer.nextElementSibling;
   const newWindowButton = drawer.querySelector('.new-window');
 
-  openButton.addEventListener('click', () => drawer.open = true);
+  openButton.addEventListener('click', () => (drawer.open = true));
   newWindowButton.addEventListener('click', () => window.open(location.href));
 </script>
 ```
@@ -232,7 +231,7 @@ If you want the drawer to close when the user clicks on the overlay, add the `li
   const drawer = document.querySelector('.drawer-light-dismiss');
   const openButton = drawer.nextElementSibling;
 
-  openButton.addEventListener('click', () => drawer.open = true);
+  openButton.addEventListener('click', () => (drawer.open = true));
 </script>
 ```
 
@@ -257,7 +256,7 @@ You can use `event.detail.source` to determine what triggered the request to clo
   const openButton = drawer.nextElementSibling;
   const closeButton = drawer.querySelector('wa-button[slot="footer"]');
 
-  openButton.addEventListener('click', () => drawer.open = true);
+  openButton.addEventListener('click', () => (drawer.open = true));
 
   // Prevent the drawer from closing unless the close button is clicked
   drawer.addEventListener('wa-hide', event => {
@@ -285,6 +284,6 @@ To give focus to a specific element when the drawer opens, use the `autofocus` a
   const input = drawer.querySelector('wa-input');
   const openButton = drawer.nextElementSibling;
 
-  openButton.addEventListener('click', () => drawer.open = true);
+  openButton.addEventListener('click', () => (drawer.open = true));
 </script>
 ```
diff --git a/packages/webawesome/docs/docs/components/dropdown.md b/packages/webawesome/docs/docs/components/dropdown.md
index 18f337dd6..f3828a032 100644
--- a/packages/webawesome/docs/docs/components/dropdown.md
+++ b/packages/webawesome/docs/docs/components/dropdown.md
@@ -1,7 +1,6 @@
 ---
 title: Dropdown
 description: 'Dropdowns expose additional content that "drops down" in a panel.'
-tags: [actions, apps]
 icon: dropdown
 ---
 
diff --git a/packages/webawesome/docs/docs/components/format-bytes.md b/packages/webawesome/docs/docs/components/format-bytes.md
index 7a0e77554..b81469a3e 100644
--- a/packages/webawesome/docs/docs/components/format-bytes.md
+++ b/packages/webawesome/docs/docs/components/format-bytes.md
@@ -1,7 +1,6 @@
 ---
 title: Format Bytes
 description: Formats a number as a human readable bytes value.
-tags: [helpers, content, inline]
 icon: format-bytes
 ---
 
diff --git a/packages/webawesome/docs/docs/components/format-date.md b/packages/webawesome/docs/docs/components/format-date.md
index fc6bd9214..041e6741f 100644
--- a/packages/webawesome/docs/docs/components/format-date.md
+++ b/packages/webawesome/docs/docs/components/format-date.md
@@ -1,7 +1,6 @@
 ---
 title: Format Date
 description: Formats a date/time using the specified locale and options.
-tags: [helpers, content, inline]
 icon: format-date
 ---
 
diff --git a/packages/webawesome/docs/docs/components/format-number.md b/packages/webawesome/docs/docs/components/format-number.md
index fc8763b4f..6a61ef90f 100644
--- a/packages/webawesome/docs/docs/components/format-number.md
+++ b/packages/webawesome/docs/docs/components/format-number.md
@@ -1,7 +1,6 @@
 ---
 title: Format Number
 description: Formats a number using the specified locale and options.
-tags: [helpers, content, inline]
 icon: format-number
 ---
 
diff --git a/packages/webawesome/docs/docs/components/icon.md b/packages/webawesome/docs/docs/components/icon.md
index ea4e7462e..8af00593e 100644
--- a/packages/webawesome/docs/docs/components/icon.md
+++ b/packages/webawesome/docs/docs/components/icon.md
@@ -1,7 +1,6 @@
 ---
 title: Icon
 description: Icons are symbols that can be used to represent various options within an application.
-tags: [imagery, apps, popular]
 icon: icon
 ---
 
@@ -20,11 +19,11 @@ The default icon library is Font Awesome Free, which comes with two icon familie
 Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regular`, and `solid`. Font Awesome Pro users can [provide their kit code](/docs/#using-font-awesome-kit-codes) to unlock additional families, including `sharp`, `duotone`, and `sharp-duotone`. For these icon families, use the `variant` attribute to set the variant.
 
 ```html {.example}
-  <wa-icon family="brands" name="font-awesome"></wa-icon>
-  <wa-icon family="brands" name="web-awesome"></wa-icon>
-  <wa-icon family="classic" variant="light" name="sparkles"></wa-icon>
-  <wa-icon family="sharp" variant="solid" name="fire"></wa-icon>
-  <wa-icon family="duotone" variant="regular" name="cake-slice"></wa-icon>
+<wa-icon family="brands" name="font-awesome"></wa-icon>
+<wa-icon family="brands" name="web-awesome"></wa-icon>
+<wa-icon family="classic" variant="light" name="sparkles"></wa-icon>
+<wa-icon family="sharp" variant="solid" name="fire"></wa-icon>
+<wa-icon family="duotone" variant="regular" name="cake-slice"></wa-icon>
 ```
 
 ### Colors
@@ -120,7 +119,7 @@ Here's an example that registers an icon library located in the `/assets/icons`
 
   registerIconLibrary('my-icons', {
     resolver: (name, family, variant) => `/assets/icons/${name}.svg`,
-    mutator: svg => svg.setAttribute('fill', 'currentColor')
+    mutator: svg => svg.setAttribute('fill', 'currentColor'),
   });
 </script>
 ```
@@ -149,8 +148,8 @@ Icons in this library are licensed under the [MIT License](https://github.com/tw
   registerIconLibrary('bootstrap', {
     resolver: (name, family) => {
       const suffix = family === 'filled' ? '-fill' : '';
-      return `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/${name}${suffix}.svg`
-    }
+      return `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/${name}${suffix}.svg`;
+    },
   });
 </script>
 
@@ -179,16 +178,16 @@ Icons in this library are licensed under the [Creative Commons 4.0 License](http
 
 ```html {.example}
 <script type="module">
-import { registerIconLibrary } from '/dist/webawesome.js';
+  import { registerIconLibrary } from '/dist/webawesome.js';
 
-registerIconLibrary('boxicons', {
+  registerIconLibrary('boxicons', {
     resolver: name => {
       let folder = 'regular';
       if (name.substring(0, 4) === 'bxs-') folder = 'solid';
       if (name.substring(0, 4) === 'bxl-') folder = 'logos';
       return `https://cdn.jsdelivr.net/npm/boxicons@2.0.5/svg/${folder}/${name}.svg`;
     },
-    mutator: svg => svg.setAttribute('fill', 'currentColor')
+    mutator: svg => svg.setAttribute('fill', 'currentColor'),
   });
 </script>
 
@@ -228,10 +227,11 @@ Icons in this library are licensed under the [MIT License](https://github.com/lu
 
   registerIconLibrary('lucide', {
     resolver: name => `https://cdn.jsdelivr.net/npm/lucide-static@0.16.29/icons/${name}.svg`,
-    mutator: svg => svg.querySelectorAll('path').forEach(path => {
-      path.setAttribute('fill', 'none');
-      path.setAttribute('stroke', 'currentColor');
-    })    
+    mutator: svg =>
+      svg.querySelectorAll('path').forEach(path => {
+        path.setAttribute('fill', 'none');
+        path.setAttribute('stroke', 'currentColor');
+      }),
   });
 </script>
 
@@ -257,10 +257,11 @@ Icons in this library are licensed under the [MIT License](https://github.com/ta
 
   registerIconLibrary('heroicons', {
     resolver: name => `https://cdn.jsdelivr.net/npm/heroicons@2.0.1/24/outline/${name}.svg`,
-    mutator: svg => svg.querySelectorAll('path').forEach(path => {
-      path.setAttribute('fill', 'none');
-      path.setAttribute('stroke', 'currentColor');
-    })
+    mutator: svg =>
+      svg.querySelectorAll('path').forEach(path => {
+        path.setAttribute('fill', 'none');
+        path.setAttribute('stroke', 'currentColor');
+      }),
   });
 </script>
 
@@ -286,10 +287,11 @@ Icons in this library are licensed under the [MIT License](https://github.com/lu
 
   registerIconLibrary('iconoir', {
     resolver: name => `https://cdn.jsdelivr.net/gh/lucaburgio/iconoir@latest/icons/${name}.svg`,
-    mutator: svg => svg.querySelectorAll('path').forEach(path => {
-      path.setAttribute('fill', 'none');
-      path.setAttribute('stroke', 'currentColor');
-    })    
+    mutator: svg =>
+      svg.querySelectorAll('path').forEach(path => {
+        path.setAttribute('fill', 'none');
+        path.setAttribute('stroke', 'currentColor');
+      }),
   });
 </script>
 
@@ -320,7 +322,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/io
       svg.setAttribute('stroke', 'currentColor');
       [...svg.querySelectorAll('.ionicon-fill-none')].map(el => el.setAttribute('fill', 'none'));
       [...svg.querySelectorAll('.ionicon-stroke-width')].map(el => el.setAttribute('stroke-width', '32px'));
-    }
+    },
   });
 </script>
 
@@ -360,7 +362,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/mi
 
   registerIconLibrary('jam', {
     resolver: name => `https://cdn.jsdelivr.net/npm/jam-icons@2.0.0/svg/${name}.svg`,
-    mutator: svg => svg.setAttribute('fill', 'currentColor')
+    mutator: svg => svg.setAttribute('fill', 'currentColor'),
   });
 </script>
 
@@ -396,7 +398,7 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
       const match = name.match(/^(.*?)(_(round|sharp))?$/);
       return `https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.5/svg/${match[1]}/${match[3] || 'outline'}.svg`;
     },
-    mutator: svg => svg.setAttribute('fill', 'currentColor')
+    mutator: svg => svg.setAttribute('fill', 'currentColor'),
   });
 </script>
 
@@ -440,7 +442,7 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
       match[1] = match[1].charAt(0).toUpperCase() + match[1].slice(1);
       return `https://cdn.jsdelivr.net/npm/remixicon@2.5.0/icons/${match[1]}/${match[2]}.svg`;
     },
-    mutator: svg => svg.setAttribute('fill', 'currentColor')
+    mutator: svg => svg.setAttribute('fill', 'currentColor'),
   });
 </script>
 
@@ -476,7 +478,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/ta
     mutator: svg => {
       svg.style.fill = 'none';
       svg.setAttribute('stroke', 'currentColor');
-    }
+    },
   });
 </script>
 
@@ -514,7 +516,7 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
         match[1]
       }.svg`;
     },
-    mutator: svg => svg.setAttribute('fill', 'currentColor')
+    mutator: svg => svg.setAttribute('fill', 'currentColor'),
   });
 </script>
 
@@ -548,8 +550,8 @@ For example, this will change the default icon library to use [Bootstrap Icons](
   registerIconLibrary('default', {
     resolver: (name, family) => {
       const suffix = family === 'filled' ? '-fill' : '';
-      return `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/${name}${suffix}.svg`
-    }
+      return `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/${name}${suffix}.svg`;
+    },
   });
 </script>
 ```
@@ -573,7 +575,7 @@ For security reasons, browsers may apply the same-origin policy on `<use>` eleme
   registerIconLibrary('sprite', {
     resolver: name => `/assets/images/sprite.svg#${name}`,
     mutator: svg => svg.setAttribute('fill', 'currentColor'),
-    spriteSheet: true
+    spriteSheet: true,
   });
 </script>
 ```
@@ -589,7 +591,7 @@ If you want to change the icons Web Awesome uses internally, you can register an
   import { registerIconLibrary } from '/dist/webawesome.js';
 
   registerIconLibrary('system', {
-    resolver: name => `/path/to/custom/icons/${name}.svg`
+    resolver: name => `/path/to/custom/icons/${name}.svg`,
   });
 </script>
-```
\ No newline at end of file
+```
diff --git a/packages/webawesome/docs/docs/components/include.md b/packages/webawesome/docs/docs/components/include.md
index f56771e48..6ed869c2f 100644
--- a/packages/webawesome/docs/docs/components/include.md
+++ b/packages/webawesome/docs/docs/components/include.md
@@ -1,7 +1,6 @@
 ---
 title: Include
 description: Includes give you the power to embed external HTML files into the page.
-tags: [helpers, primitives]
 icon: include
 ---
 
diff --git a/packages/webawesome/docs/docs/components/index.md b/packages/webawesome/docs/docs/components/index.md
new file mode 100644
index 000000000..48683eb97
--- /dev/null
+++ b/packages/webawesome/docs/docs/components/index.md
@@ -0,0 +1,5 @@
+---
+title: Components
+description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
+layout: docs
+---
diff --git a/packages/webawesome/docs/docs/components/index.njk b/packages/webawesome/docs/docs/components/index.njk
deleted file mode 100644
index 64ddf6e40..000000000
--- a/packages/webawesome/docs/docs/components/index.njk
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Components
-description: Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.
-layout: overview
-override:tags: []
-categories:
-  tags: [actions, feedback, imagery, inputs, navigation, organization, helpers]
-  titles:
-    feedback: 'Feedback & Status'
-    helpers: 'Utilities'
----
diff --git a/packages/webawesome/docs/docs/components/input.md b/packages/webawesome/docs/docs/components/input.md
index b716c881b..576c64250 100644
--- a/packages/webawesome/docs/docs/components/input.md
+++ b/packages/webawesome/docs/docs/components/input.md
@@ -1,10 +1,6 @@
 ---
 title: Input
 description: Inputs collect data from the user.
-tags: [inputs, forms]
-icon: input
-native: input
-keywords: textfield text field
 ---
 
 ```html {.example}
@@ -148,7 +144,8 @@ Use [CSS parts](#css-parts) to customize the way form controls are drawn. This e
     gap: var(--wa-space-l);
     align-items: center;
 
-    wa-input, wa-textarea {
+    wa-input,
+    wa-textarea {
       grid-column: 1 / -1;
       grid-row-end: span 2;
       display: grid;
diff --git a/packages/webawesome/docs/docs/components/mutation-observer.md b/packages/webawesome/docs/docs/components/mutation-observer.md
index 90b8ebe69..a5c3bc1aa 100644
--- a/packages/webawesome/docs/docs/components/mutation-observer.md
+++ b/packages/webawesome/docs/docs/components/mutation-observer.md
@@ -1,7 +1,6 @@
 ---
 title: Mutation Observer
 description: The Mutation Observer component offers a thin, declarative interface to the MutationObserver API.
-tags: [helpers, primitives]
 icon: mutation-observer
 ---
 
diff --git a/packages/webawesome/docs/docs/components/option.md b/packages/webawesome/docs/docs/components/option.md
index 412fd9041..7135e67ac 100644
--- a/packages/webawesome/docs/docs/components/option.md
+++ b/packages/webawesome/docs/docs/components/option.md
@@ -1,8 +1,6 @@
 ---
 title: Option
 description: Options define the selectable items within various form controls such as select.
-tags: component
-parent: select
 icon: option
 ---
 
diff --git a/packages/webawesome/docs/docs/components/popup.md b/packages/webawesome/docs/docs/components/popup.md
index f18a7d9f4..e8714a12a 100644
--- a/packages/webawesome/docs/docs/components/popup.md
+++ b/packages/webawesome/docs/docs/components/popup.md
@@ -1,7 +1,6 @@
 ---
 title: Popup
 description: 'Popup is a utility that lets you declaratively anchor "popup" containers to another element.'
-tags: [helpers, primitives]
 icon: popup
 ---
 
@@ -537,7 +536,14 @@ Scroll the container to see how the popup changes it's fallback placement to pre
 ```html {.example}
 <div class="popup-flip-fallbacks">
   <div class="overflow">
-    <wa-popup placement="top" flip flip-fallback-placements="right bottom" flip-fallback-strategy="initial" active boundary="scroll">
+    <wa-popup
+      placement="top"
+      flip
+      flip-fallback-placements="right bottom"
+      flip-fallback-strategy="initial"
+      active
+      boundary="scroll"
+    >
       <span slot="anchor"></span>
       <div class="box"></div>
     </wa-popup>
@@ -698,8 +704,8 @@ When a gap exists between the anchor and the popup element, this option will add
     <span slot="anchor"></span>
     <div class="box"></div>
   </wa-popup>
-  <br>
-  <wa-switch checked>Hover Bridge</wa-switch><br>
+  <br />
+  <wa-switch checked>Hover Bridge</wa-switch><br />
   <wa-slider min="0" max="50" step="1" value="10" label="Distance"></wa-slider>
   <wa-slider min="-50" max="50" step="1" value="0" label="Skidding"></wa-slider>
 </div>
@@ -721,12 +727,12 @@ When a gap exists between the anchor and the popup element, this option will add
 
   .popup-hover-bridge wa-slider {
     max-width: 260px;
-    margin-top: .5rem;
+    margin-top: 0.5rem;
   }
 
   .popup-hover-bridge wa-popup::part(hover-bridge) {
     background: tomato;
-    opacity: .5;
+    opacity: 0.5;
   }
 </style>
 <script>
@@ -750,7 +756,7 @@ const virtualElement = {
   getBoundingClientRect() {
     // ...
     return { width, height, x, y, top, left, right, bottom };
-  }
+  },
 };
 ```
 
@@ -784,9 +790,9 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc
         top: clientY,
         left: clientX,
         right: clientX,
-        bottom: clientY
+        bottom: clientY,
       };
-    }
+    },
   };
 
   // Only activate the popup when the switch is checked
@@ -826,8 +832,12 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc
   }
 
   @keyframes virtual-cursor {
-    0% { scale: 1; }
-    50% { scale: 1.1; }
+    0% {
+      scale: 1;
+    }
+    50% {
+      scale: 1.1;
+    }
   }
 </style>
 ```
diff --git a/packages/webawesome/docs/docs/components/progress-bar.md b/packages/webawesome/docs/docs/components/progress-bar.md
index 985e38dbb..a998b6f69 100644
--- a/packages/webawesome/docs/docs/components/progress-bar.md
+++ b/packages/webawesome/docs/docs/components/progress-bar.md
@@ -1,8 +1,6 @@
 ---
 title: Progress Bar
 description: Progress bars are used to show the status of an ongoing operation.
-tags: [feedback, apps]
-native: progress
 icon: progress-bar
 ---
 
@@ -17,6 +15,7 @@ icon: progress-bar
 ### Labels
 
 Use the `label` attribute to label the progress bar and tell assistive devices how to announce it.
+
 ```html {.example}
 <wa-progress-bar value="50" label="Upload progress"></wa-progress-bar>
 ```
diff --git a/packages/webawesome/docs/docs/components/progress-ring.md b/packages/webawesome/docs/docs/components/progress-ring.md
index 501b5b1fa..86bac393f 100644
--- a/packages/webawesome/docs/docs/components/progress-ring.md
+++ b/packages/webawesome/docs/docs/components/progress-ring.md
@@ -1,7 +1,6 @@
 ---
 title: Progress Ring
 description: Progress rings are used to show the progress of a determinate operation in a circular fashion.
-tags: [feedback, apps]
 icon: progress-ring
 ---
 
diff --git a/packages/webawesome/docs/docs/components/qr-code.md b/packages/webawesome/docs/docs/components/qr-code.md
index 2f801ff53..cfd74a16b 100644
--- a/packages/webawesome/docs/docs/components/qr-code.md
+++ b/packages/webawesome/docs/docs/components/qr-code.md
@@ -1,7 +1,6 @@
 ---
 title: QR Code
 description: Generates a QR code and renders it using the Canvas API.
-tags: [actions, apps, niche]
 icon: qr-code
 ---
 
diff --git a/packages/webawesome/docs/docs/components/radio-group.md b/packages/webawesome/docs/docs/components/radio-group.md
index 9fa82ee04..20bb023fd 100644
--- a/packages/webawesome/docs/docs/components/radio-group.md
+++ b/packages/webawesome/docs/docs/components/radio-group.md
@@ -1,7 +1,6 @@
 ---
 title: Radio Group
 description: Radio groups are used to group multiple radios so they function as a single form control.
-tags: [inputs, forms]
 icon: radio-group
 ---
 
@@ -44,7 +43,7 @@ Set the `appearance` attribute to `button` on all radios to render a radio butto
   <wa-radio appearance="button" value="3">Option 3</wa-radio>
 </wa-radio-group>
 
-<br>
+<br />
 
 <wa-radio-group
   label="Vertical options"
diff --git a/packages/webawesome/docs/docs/components/radio.md b/packages/webawesome/docs/docs/components/radio.md
index 10adc4a44..dc2551d2f 100644
--- a/packages/webawesome/docs/docs/components/radio.md
+++ b/packages/webawesome/docs/docs/components/radio.md
@@ -1,9 +1,6 @@
 ---
 title: Radio
 description: Radios allow the user to select a single option from a group.
-tags: component
-parent: radio-group
-native: radio
 icon: radio-group
 ---
 
@@ -74,4 +71,3 @@ Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to c
   <wa-radio value="3">Large 3</wa-radio>
 </wa-radio-group>
 ```
-
diff --git a/packages/webawesome/docs/docs/components/rating.md b/packages/webawesome/docs/docs/components/rating.md
index 26631de31..acd74a616 100644
--- a/packages/webawesome/docs/docs/components/rating.md
+++ b/packages/webawesome/docs/docs/components/rating.md
@@ -1,7 +1,6 @@
 ---
 title: Rating
 description: Ratings give users a way to quickly view and provide feedback.
-tags: [inputs, interactive]
 icon: rating
 ---
 
@@ -40,8 +39,8 @@ Use the `precision` attribute to let users select fractional ratings.
 Use the `size` attribute to adjust the size of the rating.
 
 ```html {.example}
-<wa-rating label="Rating" size="small"></wa-rating><br>
-<wa-rating label="Rating" size="medium"></wa-rating><br>
+<wa-rating label="Rating" size="small"></wa-rating><br />
+<wa-rating label="Rating" size="medium"></wa-rating><br />
 <wa-rating label="Rating" size="large"></wa-rating>
 ```
 
@@ -122,8 +121,8 @@ You can provide custom icons by passing a function to the `getSymbol` property.
 <script type="module">
   const rating = document.querySelector('.rating-hearts');
 
-  await customElements.whenDefined("wa-rating")
-  await rating.updateComplete
+  await customElements.whenDefined('wa-rating');
+  await rating.updateComplete;
 
   rating.getSymbol = () => '<wa-icon name="heart" variant="solid"></wa-icon>';
 </script>
@@ -139,8 +138,8 @@ You can also use the `getSymbol` property to render different icons based on val
 <script type="module">
   const rating = document.querySelector('.rating-emojis');
 
-  await customElements.whenDefined("wa-rating")
-  await rating.updateComplete
+  await customElements.whenDefined('wa-rating');
+  await rating.updateComplete;
 
   rating.getSymbol = (value, isSelected) => {
     const icons = ['face-angry', 'face-frown', 'face-meh', 'face-smile', 'face-laugh'];
diff --git a/packages/webawesome/docs/docs/components/relative-time.md b/packages/webawesome/docs/docs/components/relative-time.md
index 9e51f82fc..71f521f0b 100644
--- a/packages/webawesome/docs/docs/components/relative-time.md
+++ b/packages/webawesome/docs/docs/components/relative-time.md
@@ -1,7 +1,6 @@
 ---
 title: Relative Time
 description: Outputs a localized time phrase relative to the current date and time.
-tags: [helpers, inline, content]
 icon: relative-time
 ---
 
diff --git a/packages/webawesome/docs/docs/components/resize-observer.md b/packages/webawesome/docs/docs/components/resize-observer.md
index 263f3b527..f37ff61eb 100644
--- a/packages/webawesome/docs/docs/components/resize-observer.md
+++ b/packages/webawesome/docs/docs/components/resize-observer.md
@@ -1,7 +1,6 @@
 ---
 title: Resize Observer
 description: The Resize Observer component offers a thin, declarative interface to the ResizeObserver API.
-tags: [helpers, primitives]
 icon: resize-observer
 ---
 
diff --git a/packages/webawesome/docs/docs/components/scroller.md b/packages/webawesome/docs/docs/components/scroller.md
index c4c0b02e5..18134b5cc 100644
--- a/packages/webawesome/docs/docs/components/scroller.md
+++ b/packages/webawesome/docs/docs/components/scroller.md
@@ -1,8 +1,6 @@
 ---
 title: Scroller
 description: Scrollers create an accessible container while providing visual cues that help users identify and navigate through content that scrolls.
-layout: component
-tags: [organization]
 icon: scroller
 ---
 
@@ -87,19 +85,34 @@ The scroller component automatically provides a scrollable container for any con
     <div class="wa-grid" style="--wa-grid-columns: 4; --wa-grid-gap: var(--wa-spacing-l);">
       <div>
         <h4>Team Leaders</h4>
-        <p>Charismatic captains like Captain America or Cyclops are the heart of any superteam, rallying everyone with epic speeches and killer strategies. They’re the ones calling the shots in a cosmic showdown, keeping the squad focused when Thanos or Magneto crashes the party.</p>
+        <p>
+          Charismatic captains like Captain America or Cyclops are the heart of any superteam, rallying everyone with
+          epic speeches and killer strategies. They’re the ones calling the shots in a cosmic showdown, keeping the
+          squad focused when Thanos or Magneto crashes the party.
+        </p>
       </div>
       <div>
         <h4>Heavy Hitters</h4>
-        <p>Powerhouses like Thor or Hulk bring the boom, smashing through villain lairs or alien armadas. Their job is to land the big punches, but they gotta pace themselves to avoid stealing the spotlight from sneakier teammates.</p>
+        <p>
+          Powerhouses like Thor or Hulk bring the boom, smashing through villain lairs or alien armadas. Their job is to
+          land the big punches, but they gotta pace themselves to avoid stealing the spotlight from sneakier teammates.
+        </p>
       </div>
       <div>
         <h4>Tech Geniuses</h4>
-        <p>Brainiacs like Iron Man or Mr. Fantastic keep the team one step ahead with gadgets and gizmos. They’re crafting quinjets or hacking evil AI, always ready with a snarky quip while saving the day from a computer terminal.</p>
+        <p>
+          Brainiacs like Iron Man or Mr. Fantastic keep the team one step ahead with gadgets and gizmos. They’re
+          crafting quinjets or hacking evil AI, always ready with a snarky quip while saving the day from a computer
+          terminal.
+        </p>
       </div>
       <div>
         <h4>Stealth Specialists</h4>
-        <p>Ninja-like heroes like Black Widow or Nightcrawler slip through the shadows, gathering intel or pulling off surprise attacks. They’re the glue that makes risky plans work, coordinating with the team to flip a losing fight into a win.</p>
+        <p>
+          Ninja-like heroes like Black Widow or Nightcrawler slip through the shadows, gathering intel or pulling off
+          surprise attacks. They’re the glue that makes risky plans work, coordinating with the team to flip a losing
+          fight into a win.
+        </p>
       </div>
     </div>
   </div>
@@ -112,9 +125,28 @@ Set the `orientation` attribute to `vertical` and provide a height to create a v
 
 ```html {.example}
 <wa-scroller orientation="vertical" style="max-height: 300px;">
-  <p>Superhero movies are the ultimate popcorn-fueled thrill rides, turning comic book pages into cinematic rollercoasters. Back in the early 2000s, films like X-Men and Spider-Man kicked open the door, proving tights and teamwork could pack theaters. Those early flicks leaned on practical effects and heart—like Tobey Maguire’s earnest web-slinger saving a train—making us believe a guy in spandex could be a hero. They weren’t perfect, but they set the stage for the genre to become a cultural juggernaut.</p>
-  <p>By the 2010s, the Marvel Cinematic Universe turned superhero films into a shared saga, like a comic crossover event on steroids. The Avengers in 2012 was a game-changer, tossing Iron Man’s snark, Thor’s hammer, and Cap’s shield into one epic brawl. Directors learned to balance humor, heart, and explosions, while studios figured out how to make every movie feel like a chapter in a bigger story. Even standalone hits like Wonder Woman brought fresh vibes, with Gal Gadot’s lasso-wielding warrior stealing hearts and smashing box office records.</p>
-  <p>Today, superhero flicks are a global obsession, from Deadpool’s chimichanga-fueled chaos to Black Panther’s Wakandan pride. They’re not just about powers—they’re about characters we root for, like Rocket Raccoon’s scrappy loyalty or Harley Quinn’s wild energy. Fans dissect trailers like detectives, theorizing about multiverses and cameos, while memes of sad Affleck or dancing Groot flood the internet. Whether it’s a gritty Joker origin or a cosmic Guardians adventure, these movies keep us glued to our seats, dreaming of heroism and one-liners that’d make even Tony Stark jealous.</p>
+  <p>
+    Superhero movies are the ultimate popcorn-fueled thrill rides, turning comic book pages into cinematic
+    rollercoasters. Back in the early 2000s, films like X-Men and Spider-Man kicked open the door, proving tights and
+    teamwork could pack theaters. Those early flicks leaned on practical effects and heart—like Tobey Maguire’s earnest
+    web-slinger saving a train—making us believe a guy in spandex could be a hero. They weren’t perfect, but they set
+    the stage for the genre to become a cultural juggernaut.
+  </p>
+  <p>
+    By the 2010s, the Marvel Cinematic Universe turned superhero films into a shared saga, like a comic crossover event
+    on steroids. The Avengers in 2012 was a game-changer, tossing Iron Man’s snark, Thor’s hammer, and Cap’s shield into
+    one epic brawl. Directors learned to balance humor, heart, and explosions, while studios figured out how to make
+    every movie feel like a chapter in a bigger story. Even standalone hits like Wonder Woman brought fresh vibes, with
+    Gal Gadot’s lasso-wielding warrior stealing hearts and smashing box office records.
+  </p>
+  <p>
+    Today, superhero flicks are a global obsession, from Deadpool’s chimichanga-fueled chaos to Black Panther’s Wakandan
+    pride. They’re not just about powers—they’re about characters we root for, like Rocket Raccoon’s scrappy loyalty or
+    Harley Quinn’s wild energy. Fans dissect trailers like detectives, theorizing about multiverses and cameos, while
+    memes of sad Affleck or dancing Groot flood the internet. Whether it’s a gritty Joker origin or a cosmic Guardians
+    adventure, these movies keep us glued to our seats, dreaming of heroism and one-liners that’d make even Tony Stark
+    jealous.
+  </p>
 </wa-scroller>
 ```
 
@@ -125,9 +157,29 @@ Use the `without-shadow` attribute to remove the fading shadow effect at the edg
 ```html {.example}
 <wa-scroller without-shadow>
   <div style="width: 1500px;">
-  <p>Gaming consoles are like time machines for nerds, zapping us from pixelated 2D adventures to jaw-dropping cinematic worlds. Back in the ‘90s, the Super Nintendo was the cool kid on the block, using a 16-bit chip to pull off tricks like Mode 7, which made Mario Kart’s tracks feel like they were zooming right at you. It was like wizardry for a kid with a chunky controller, turning flat sprites into pseudo-3D races that had us yelling at our TVs when we got hit by a red shell.</p>
-  <p>Fast-forward to today, and consoles like the PlayStation 5 and Xbox Series X are basically supercomputers in sleek boxes. They’re packing enough power to make games look like Hollywood blockbusters, with lighting so real you can practically feel the sun glare in Spider-Man: Miles Morales. These machines can handle massive open worlds, like the sprawling lands of Elden Ring, without breaking a sweat, letting you swing swords or race cars while your living room feels like a sci-fi movie set. It’s a far cry from the SNES days, but the vibe’s the same: pure, controller-gripping fun.</p>
-  <p>What makes consoles the heart of gaming culture is how they bring everyone together, from casual players to hardcore speedrunners. Whether it’s your uncle fumbling through Super Mario World in ‘92 or your best friend screaming during a late-night Call of Duty match, consoles are the ultimate couch co-op machines. Modern systems even let you stream your clutch Fortnite wins to the world or jump into crossplay with PC pals. From the GameCube’s quirky handle to the Switch’s grab-and-go joy-cons, every console’s got its own personality, making every era of gaming feel like a legendary chapter in a never-ending quest.</p>
+    <p>
+      Gaming consoles are like time machines for nerds, zapping us from pixelated 2D adventures to jaw-dropping
+      cinematic worlds. Back in the ‘90s, the Super Nintendo was the cool kid on the block, using a 16-bit chip to pull
+      off tricks like Mode 7, which made Mario Kart’s tracks feel like they were zooming right at you. It was like
+      wizardry for a kid with a chunky controller, turning flat sprites into pseudo-3D races that had us yelling at our
+      TVs when we got hit by a red shell.
+    </p>
+    <p>
+      Fast-forward to today, and consoles like the PlayStation 5 and Xbox Series X are basically supercomputers in sleek
+      boxes. They’re packing enough power to make games look like Hollywood blockbusters, with lighting so real you can
+      practically feel the sun glare in Spider-Man: Miles Morales. These machines can handle massive open worlds, like
+      the sprawling lands of Elden Ring, without breaking a sweat, letting you swing swords or race cars while your
+      living room feels like a sci-fi movie set. It’s a far cry from the SNES days, but the vibe’s the same: pure,
+      controller-gripping fun.
+    </p>
+    <p>
+      What makes consoles the heart of gaming culture is how they bring everyone together, from casual players to
+      hardcore speedrunners. Whether it’s your uncle fumbling through Super Mario World in ‘92 or your best friend
+      screaming during a late-night Call of Duty match, consoles are the ultimate couch co-op machines. Modern systems
+      even let you stream your clutch Fortnite wins to the world or jump into crossplay with PC pals. From the
+      GameCube’s quirky handle to the Switch’s grab-and-go joy-cons, every console’s got its own personality, making
+      every era of gaming feel like a legendary chapter in a never-ending quest.
+    </p>
   </div>
 </wa-scroller>
 ```
@@ -139,13 +191,32 @@ Use the `without-scrollbar` attribute to hide the scrollbar while maintaining sc
 ```html {.example}
 <wa-scroller without-scrollbar>
   <div style="width: 1500px;">
-    <p>Dungeons & Dragons 5e is the blockbuster superhero flick of tabletop RPGs, turning every session into an epic tavern brawl or dragon-slaying saga. Unlike the old 3.5e days, where you’d stack +30 bonuses like a mathlete on a mission, 5e keeps things chill with skill checks capping around +11—like a +5 from your slick Charisma and +6 from being a pro at persuasion. This means even a squad of scrappy kobolds can give your level 10 barbarian a bad day if you roll poorly. It’s like the game’s saying, “Sure, you’re a hero, but don’t get cocky!”</p>
-    <p>The advantage and disadvantage system is 5e’s secret sauce, making every dice roll feel like a movie cliffhanger. Instead of juggling a dozen modifiers, you just roll two d20s and take the better (or worse) one, which shakes out to about a +5 or -5 vibe shift. It’s like your rogue’s got a lucky charm when sneaking past guards or a cursed boot when dodging a fireball. This keeps the game’s flow snappy, so you’re not stuck crunching numbers when you could be roleplaying a dramatic speech to charm a dragon or bluffing your way out of a bandit ambush.</p>
-    <p>5e’s world is built for storytelling, not just stat sheets, and that’s why it’s the king of game nights. The rules are flexible enough for your DM to whip up a haunted forest crawl or a pirate ship heist without needing a PhD in game design. Classes like the warlock let you make shady pacts with cosmic entities, while feats like Tavern Brawler turn your monk into a bar-fighting legend who can knock out goblins with a chair. Whether you’re a newbie rolling your first d20 or a veteran plotting a castle siege, 5e’s vibe is all about epic moments—like when your party’s wizard crits on a fireball and you all cheer like you just won the Super Bowl.</p>
+    <p>
+      Dungeons & Dragons 5e is the blockbuster superhero flick of tabletop RPGs, turning every session into an epic
+      tavern brawl or dragon-slaying saga. Unlike the old 3.5e days, where you’d stack +30 bonuses like a mathlete on a
+      mission, 5e keeps things chill with skill checks capping around +11—like a +5 from your slick Charisma and +6 from
+      being a pro at persuasion. This means even a squad of scrappy kobolds can give your level 10 barbarian a bad day
+      if you roll poorly. It’s like the game’s saying, “Sure, you’re a hero, but don’t get cocky!”
+    </p>
+    <p>
+      The advantage and disadvantage system is 5e’s secret sauce, making every dice roll feel like a movie cliffhanger.
+      Instead of juggling a dozen modifiers, you just roll two d20s and take the better (or worse) one, which shakes out
+      to about a +5 or -5 vibe shift. It’s like your rogue’s got a lucky charm when sneaking past guards or a cursed
+      boot when dodging a fireball. This keeps the game’s flow snappy, so you’re not stuck crunching numbers when you
+      could be roleplaying a dramatic speech to charm a dragon or bluffing your way out of a bandit ambush.
+    </p>
+    <p>
+      5e’s world is built for storytelling, not just stat sheets, and that’s why it’s the king of game nights. The rules
+      are flexible enough for your DM to whip up a haunted forest crawl or a pirate ship heist without needing a PhD in
+      game design. Classes like the warlock let you make shady pacts with cosmic entities, while feats like Tavern
+      Brawler turn your monk into a bar-fighting legend who can knock out goblins with a chair. Whether you’re a newbie
+      rolling your first d20 or a veteran plotting a castle siege, 5e’s vibe is all about epic moments—like when your
+      party’s wizard crits on a fireball and you all cheer like you just won the Super Bowl.
+    </p>
   </div>
 </wa-scroller>
 ```
 
 :::warning
 Hiding scrollbars can negatively impact accessibility. Users who rely on visible scrollbars to navigate content may have difficulty recognizing that content is scrollable or controlling their scrolling position. Consider the needs of all users when implementing this option.
-:::
\ No newline at end of file
+:::
diff --git a/packages/webawesome/docs/docs/components/select.md b/packages/webawesome/docs/docs/components/select.md
index 8c785ba71..a7f7f887f 100644
--- a/packages/webawesome/docs/docs/components/select.md
+++ b/packages/webawesome/docs/docs/components/select.md
@@ -1,8 +1,6 @@
 ---
 title: Select
 description: Selects allow you to choose items from a menu of predefined options.
-tags: [inputs, forms]
-native: select
 icon: select
 ---
 
@@ -269,13 +267,7 @@ When multiple options can be selected, you can provide custom tags by passing a
 Remember that custom tags are rendered in a shadow root. To style them, you can use the `style` attribute in your template or you can add your own [parts](/docs/customizing/#css-parts) and target them with the [`::part()`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) selector.
 
 ```html {.example}
-<wa-select
-  placeholder="Select one"
-  value="email phone"
-  multiple
-  with-clear
-  class="custom-tag"
->
+<wa-select placeholder="Select one" value="email phone" multiple with-clear class="custom-tag">
   <wa-option value="email">
     <wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
     Email
@@ -291,9 +283,9 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
 </wa-select>
 
 <script type="module">
-  await customElements.whenDefined("wa-select")
+  await customElements.whenDefined('wa-select');
   const select = document.querySelector('.custom-tag');
-  await select.updateComplete
+  await select.updateComplete;
 
   select.getTag = (option, index) => {
     // Use the same icon used in wa-option
@@ -324,7 +316,7 @@ Here are the following conditions:
 
 EX: `<wa-select value="foo">` will have a value of `""` until `<wa-option value="foo">Foo</wa-option>` connects, at which point its value will become `"foo"` when submitting.
 
-- If a `<wa-select multiple>` with an initial value has multiple values, but only some of the options are present, it will only respect the options that are present, and if a selected option is loaded in later, *AND* the value of the select has not changed via user interaction or direct property assignment, it will add the selected option to the form value and to the `.value` of the select.
+- If a `<wa-select multiple>` with an initial value has multiple values, but only some of the options are present, it will only respect the options that are present, and if a selected option is loaded in later, _AND_ the value of the select has not changed via user interaction or direct property assignment, it will add the selected option to the form value and to the `.value` of the select.
 
 This can be hard to conceptualize, so heres a fairly large example showing how lazy loaded options work with `<wa-select>` and `<wa-select multiple>` when given initial value attributes. Feel free to play around with it in a codepen.
 
@@ -335,93 +327,90 @@ This can be hard to conceptualize, so heres a fairly large example showing how l
       <wa-option value="bar">Bar</wa-option>
       <wa-option value="baz">Baz</wa-option>
     </wa-select>
-    <br>
+    <br />
     <wa-button type="button">Add "foo" option</wa-button>
   </div>
 
-  <br>
+  <br />
 
   <div>
-    <wa-select name="select-2" value="foo" label="Single select (with no existing options)">
-    </wa-select>
-    <br>
+    <wa-select name="select-2" value="foo" label="Single select (with no existing options)"> </wa-select>
+    <br />
     <wa-button type="button">Add "foo" option</wa-button>
   </div>
 
-  <br>
+  <br />
 
   <div>
     <wa-select name="select-3" value="foo bar baz" multiple label="Multiple Select (with existing options)">
       <wa-option value="bar">Bar</wa-option>
       <wa-option value="baz">Baz</wa-option>
     </wa-select>
-    <br>
+    <br />
     <wa-button type="button">Add "foo" option</wa-button>
   </div>
 
-  <br>
+  <br />
 
   <div>
-    <wa-select name="select-4" value="foo" multiple label="Multiple Select (with no existing options)">
-    </wa-select>
-    <br>
+    <wa-select name="select-4" value="foo" multiple label="Multiple Select (with no existing options)"> </wa-select>
+    <br />
     <wa-button type="button">Add "foo" option</wa-button>
   </div>
 
-  <br><br>
+  <br /><br />
 
   <div style="display: flex; gap: 16px;">
     <wa-button type="reset">Reset</wa-button>
     <wa-button type="submit" variant="brand">Show FormData</wa-button>
   </div>
 
-  <br>
+  <br />
 
   <pre hidden><code id="lazy-options-example-form-data"></code></pre>
 
-  <br>
+  <br />
 </form>
 
 <script type="module">
   function addFooOption(e) {
-    const addFooButton = e.target.closest("wa-button[type='button']")
+    const addFooButton = e.target.closest("wa-button[type='button']");
     if (!addFooButton) {
-      return
+      return;
     }
-    const select = addFooButton.parentElement.querySelector("wa-select")
+    const select = addFooButton.parentElement.querySelector('wa-select');
 
     if (select.querySelector("wa-option[value='foo']")) {
       // Foo already exists. no-op.
-      return
+      return;
     }
 
-    const option = document.createElement("wa-option")
-    option.setAttribute("value", "foo")
-    option.innerText = "Foo"
-    select.append(option)
+    const option = document.createElement('wa-option');
+    option.setAttribute('value', 'foo');
+    option.innerText = 'Foo';
+    select.append(option);
   }
 
-  function handleLazySubmit (event) {
-    event.preventDefault()
+  function handleLazySubmit(event) {
+    event.preventDefault();
 
-    const formData = new FormData(event.target)
-    const codeElement = document.querySelector("#lazy-options-example-form-data")
+    const formData = new FormData(event.target);
+    const codeElement = document.querySelector('#lazy-options-example-form-data');
 
-    const obj = {}
+    const obj = {};
     for (const key of formData.keys()) {
-      const val = formData.getAll(key).length > 1 ? formData.getAll(key) : formData.get(key)
-      obj[key] = val
+      const val = formData.getAll(key).length > 1 ? formData.getAll(key) : formData.get(key);
+      obj[key] = val;
     }
 
-    codeElement.textContent = JSON.stringify(obj, null, 2)
+    codeElement.textContent = JSON.stringify(obj, null, 2);
 
-    const preElement = codeElement.parentElement
-    preElement.removeAttribute("hidden")
+    const preElement = codeElement.parentElement;
+    preElement.removeAttribute('hidden');
   }
 
-  const container = document.querySelector("#lazy-options-example")
-  container.addEventListener("click", addFooOption)
-  container.addEventListener("submit", handleLazySubmit)
+  const container = document.querySelector('#lazy-options-example');
+  container.addEventListener('click', addFooOption);
+  container.addEventListener('submit', handleLazySubmit);
 </script>
 ```
-
diff --git a/packages/webawesome/docs/docs/components/skeleton.md b/packages/webawesome/docs/docs/components/skeleton.md
index cbb5176c9..bf5ae3401 100644
--- a/packages/webawesome/docs/docs/components/skeleton.md
+++ b/packages/webawesome/docs/docs/components/skeleton.md
@@ -1,7 +1,6 @@
 ---
 title: Skeleton
 description: Skeletons are used to provide a visual representation of where content will eventually be drawn.
-tags: [feedback, apps, content]
 icon: skeleton
 ---
 
diff --git a/packages/webawesome/docs/docs/components/slider.md b/packages/webawesome/docs/docs/components/slider.md
index f4f7cda6d..bfdd71a8f 100644
--- a/packages/webawesome/docs/docs/components/slider.md
+++ b/packages/webawesome/docs/docs/components/slider.md
@@ -1,8 +1,6 @@
 ---
 title: Slider
 description: Ranges allow the user to select a single value within a given range using a slider.
-tags: [inputs, forms]
-native: slider
 icon: slider
 ---
 
@@ -286,4 +284,4 @@ Mark a slider as required using the `required` attribute. Users must interact wi
   <br />
   <button type="submit">Submit</button>
 </form>
-```
\ No newline at end of file
+```
diff --git a/packages/webawesome/docs/docs/components/spinner.md b/packages/webawesome/docs/docs/components/spinner.md
index d73108e94..4af613a9b 100644
--- a/packages/webawesome/docs/docs/components/spinner.md
+++ b/packages/webawesome/docs/docs/components/spinner.md
@@ -1,8 +1,6 @@
 ---
 title: Spinner
 description: Spinners are used to show the progress of an indeterminate operation.
-tags: [feedback, apps]
-keywords: loader
 icon: spinner
 ---
 
diff --git a/packages/webawesome/docs/docs/components/split-panel.md b/packages/webawesome/docs/docs/components/split-panel.md
index adfaf1f04..74e5c974d 100644
--- a/packages/webawesome/docs/docs/components/split-panel.md
+++ b/packages/webawesome/docs/docs/components/split-panel.md
@@ -1,7 +1,6 @@
 ---
 title: Split Panel
 description: Split panels display two adjacent panels, allowing the user to reposition them.
-tags: [organization, layout, apps]
 icon: split-panel
 ---
 
diff --git a/packages/webawesome/docs/docs/components/switch.md b/packages/webawesome/docs/docs/components/switch.md
index f9527f0c3..89e18d5c0 100644
--- a/packages/webawesome/docs/docs/components/switch.md
+++ b/packages/webawesome/docs/docs/components/switch.md
@@ -1,8 +1,6 @@
 ---
 title: Switch
 description: Switches allow the user to toggle an option on or off.
-tags: [inputs, forms]
-icon: switch
 keywords: toggle
 ---
 
diff --git a/packages/webawesome/docs/docs/components/tab-group.md b/packages/webawesome/docs/docs/components/tab-group.md
index 06d1a9a8d..e72c9c133 100644
--- a/packages/webawesome/docs/docs/components/tab-group.md
+++ b/packages/webawesome/docs/docs/components/tab-group.md
@@ -1,7 +1,6 @@
 ---
 title: Tab Group
 description: Tab groups organize content into a container that shows one section at a time.
-tags: [navigation, disclosure]
 icon: tab-group
 ---
 
@@ -111,7 +110,7 @@ You can make a tab closable by adding a close button next to the tab and inside
   <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
 </wa-tab-group>
 
-<br>
+<br />
 
 <wa-button disabled>Restore tab</wa-button>
 
@@ -119,7 +118,8 @@ You can make a tab closable by adding a close button next to the tab and inside
   .tabs-closable wa-button {
     position: relative;
     left: -1.5em;
-    top: 0.675em;  }
+    top: 0.675em;
+  }
 </style>
 
 <script>
@@ -141,7 +141,7 @@ You can make a tab closable by adding a close button next to the tab and inside
     restoreButton.disabled = true;
     generalTab.insertAdjacentElement('afterend', closeButton);
     generalTab.insertAdjacentElement('afterend', closableTab);
-  })
+  });
 </script>
 ```
 
diff --git a/packages/webawesome/docs/docs/components/tab-panel.md b/packages/webawesome/docs/docs/components/tab-panel.md
index fcafe7c54..b23ab7511 100644
--- a/packages/webawesome/docs/docs/components/tab-panel.md
+++ b/packages/webawesome/docs/docs/components/tab-panel.md
@@ -1,8 +1,6 @@
 ---
 title: Tab Panel
 description: Tab panels are used inside tab groups to display tabbed content.
-tags: component
-parent: tab-group
 icon: tab-panel
 ---
 
diff --git a/packages/webawesome/docs/docs/components/tab.md b/packages/webawesome/docs/docs/components/tab.md
index 2c22508d1..35aff8c6e 100644
--- a/packages/webawesome/docs/docs/components/tab.md
+++ b/packages/webawesome/docs/docs/components/tab.md
@@ -1,8 +1,6 @@
 ---
 title: Tab
 description: Tabs are used inside tab groups to represent and activate tab panels.
-tags: component
-parent: tab-group
 icon: tab
 ---
 
diff --git a/packages/webawesome/docs/docs/components/tag.md b/packages/webawesome/docs/docs/components/tag.md
index 8b54747fb..71d81c927 100644
--- a/packages/webawesome/docs/docs/components/tag.md
+++ b/packages/webawesome/docs/docs/components/tag.md
@@ -1,7 +1,6 @@
 ---
 title: Tag
 description: Tags are used as labels to organize things or to indicate a selection.
-tags: [feedback, content, apps]
 icon: tag
 ---
 
@@ -22,37 +21,44 @@ The default appearance is `outlined filled`.
 
 ```html {.example}
 <div class="wa-stack">
-<p>
-  <wa-tag variant="brand" appearance="outlined accent">Outlined accent</wa-tag>
-  <wa-tag variant="brand" appearance="accent">Accent</wa-tag>
-  <wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
-  <wa-tag variant="brand" appearance="filled">Filled</wa-tag>
-  <wa-tag variant="brand" appearance="outlined filled">Outlined Filled</wa-tag>
-</p>
-<p>
-  <wa-tag variant="success" appearance="outlined accent">Outlined accent</wa-tag>
-  <wa-tag variant="success" appearance="accent">Accent</wa-tag>
-  <wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
-  <wa-tag variant="success" appearance="filled">Filled</wa-tag>
-  <wa-tag variant="success" appearance="outlined filled">Outlined Filled</wa-tag>
-<p>
-  <wa-tag variant="neutral" appearance="outlined accent">Outlined accent</wa-tag>
-  <wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
-  <wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
-  <wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
-  <wa-tag variant="neutral" appearance="outlined filled">Outlined Filled</wa-tag>
-<p>
-  <wa-tag variant="warning" appearance="outlined accent">Outlined accent</wa-tag>
-  <wa-tag variant="warning" appearance="accent">Accent</wa-tag>
-  <wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
-  <wa-tag variant="warning" appearance="filled">Filled</wa-tag>
-  <wa-tag variant="warning" appearance="outlined filled">Outlined Filled</wa-tag>
-<p>
-  <wa-tag variant="danger" appearance="outlined accent">Outlined accent</wa-tag>
-  <wa-tag variant="danger" appearance="accent">Accent</wa-tag>
-  <wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
-  <wa-tag variant="danger" appearance="filled">Filled</wa-tag>
-  <wa-tag variant="danger" appearance="outlined filled">Outlined Filled</wa-tag>
+  <p>
+    <wa-tag variant="brand" appearance="outlined accent">Outlined accent</wa-tag>
+    <wa-tag variant="brand" appearance="accent">Accent</wa-tag>
+    <wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
+    <wa-tag variant="brand" appearance="filled">Filled</wa-tag>
+    <wa-tag variant="brand" appearance="outlined filled">Outlined Filled</wa-tag>
+  </p>
+  <p>
+    <wa-tag variant="success" appearance="outlined accent">Outlined accent</wa-tag>
+    <wa-tag variant="success" appearance="accent">Accent</wa-tag>
+    <wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
+    <wa-tag variant="success" appearance="filled">Filled</wa-tag>
+    <wa-tag variant="success" appearance="outlined filled">Outlined Filled</wa-tag>
+  </p>
+
+  <p>
+    <wa-tag variant="neutral" appearance="outlined accent">Outlined accent</wa-tag>
+    <wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
+    <wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
+    <wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
+    <wa-tag variant="neutral" appearance="outlined filled">Outlined Filled</wa-tag>
+  </p>
+
+  <p>
+    <wa-tag variant="warning" appearance="outlined accent">Outlined accent</wa-tag>
+    <wa-tag variant="warning" appearance="accent">Accent</wa-tag>
+    <wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
+    <wa-tag variant="warning" appearance="filled">Filled</wa-tag>
+    <wa-tag variant="warning" appearance="outlined filled">Outlined Filled</wa-tag>
+  </p>
+
+  <p>
+    <wa-tag variant="danger" appearance="outlined accent">Outlined accent</wa-tag>
+    <wa-tag variant="danger" appearance="accent">Accent</wa-tag>
+    <wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
+    <wa-tag variant="danger" appearance="filled">Filled</wa-tag>
+    <wa-tag variant="danger" appearance="outlined filled">Outlined Filled</wa-tag>
+  </p>
 </div>
 ```
 
diff --git a/packages/webawesome/docs/docs/components/textarea.md b/packages/webawesome/docs/docs/components/textarea.md
index f82d3b86b..95b9c365e 100644
--- a/packages/webawesome/docs/docs/components/textarea.md
+++ b/packages/webawesome/docs/docs/components/textarea.md
@@ -1,9 +1,7 @@
 ---
 title: Textarea
 description: Textareas collect data from the user and allow multiple lines of text.
-tags: [inputs, forms]
 icon: textarea
-native: input
 ---
 
 ```html {.example}
diff --git a/packages/webawesome/docs/docs/components/tooltip.md b/packages/webawesome/docs/docs/components/tooltip.md
index 6fd2d679b..158e9d9f8 100644
--- a/packages/webawesome/docs/docs/components/tooltip.md
+++ b/packages/webawesome/docs/docs/components/tooltip.md
@@ -1,16 +1,13 @@
 ---
 title: Tooltip
 description: Tooltips display additional information based on a specific action.
-tags: [feedback, apps, disclosure]
 icon: tooltip
 ---
 
-
 A tooltip's target is based on the `for` attribute which points to an element id.
 
 ```html {.example}
-<wa-tooltip for="my-button">This is a tooltip</wa-tooltip>
-<wa-button id="my-button">Hover Me</wa-button>
+<wa-tooltip for="my-button">This is a tooltip</wa-tooltip> <wa-button id="my-button">Hover Me</wa-button>
 ```
 
 ## Examples
@@ -151,4 +148,3 @@ Use the `--max-width` custom property to change the width the tooltip can grow t
 </wa-tooltip>
 <wa-button id="wrapping-tooltip">Hover me</wa-button>
 ```
-
diff --git a/packages/webawesome/docs/docs/components/tree-item.md b/packages/webawesome/docs/docs/components/tree-item.md
index f86385e55..f73a11613 100644
--- a/packages/webawesome/docs/docs/components/tree-item.md
+++ b/packages/webawesome/docs/docs/components/tree-item.md
@@ -1,7 +1,6 @@
 ---
 title: Tree Item
 description: A tree item serves as a hierarchical node that lives inside a tree.
-tags: [navigation, disclosure, apps]
 icon: tree
 ---
 
diff --git a/packages/webawesome/docs/docs/components/tree.md b/packages/webawesome/docs/docs/components/tree.md
index 792e0dfd6..ee6aff845 100644
--- a/packages/webawesome/docs/docs/components/tree.md
+++ b/packages/webawesome/docs/docs/components/tree.md
@@ -1,7 +1,6 @@
 ---
 title: Tree
 description: Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded and collapsed as desired by the user.
-tags: [navigation, disclosure, apps]
 icon: tree
 ---
 
diff --git a/packages/webawesome/docs/docs/docs.11tydata.js b/packages/webawesome/docs/docs/docs.11tydata.js
deleted file mode 100644
index 38a4c3554..000000000
--- a/packages/webawesome/docs/docs/docs.11tydata.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Global data for all pages
- */
-import { sort } from '../_utils/filters.js';
-
-export default {
-  eleventyComputed: {
-    /**
-     * Default parent slug. Can be overridden by explicitly setting parent in the data.
-     * It can be either the URL slug of a page in the same directory or a parent directory.
-     * @returns {string | undefined}
-     */
-    parent(data) {
-      let { parent, page } = data;
-
-      if (parent) {
-        return parent;
-      }
-
-      return page.url.split('/').filter(Boolean).at(-2);
-    },
-
-    /**
-     * URL of parent page
-     * @returns {string | undefined}
-     */
-    parentUrl(data) {
-      let { parent, page } = data;
-      return getParentUrl(page.url, parent);
-    },
-
-    /**
-     * Collection item of parent page
-     * @returns {object | undefined} Parent page item
-     */
-    parentItem(data) {
-      let { parentUrl } = data;
-      return data.collections.all.find(item => item.url === parentUrl);
-    },
-
-    /**
-     * Child pages of current page
-     * @returns {object[]} Array of child pages
-     */
-    children(data) {
-      let { collections, page, parentOf } = data;
-
-      if (parentOf) {
-        return collections[parentOf];
-      }
-
-      let collection = collections.all ?? [];
-      let url = page.url;
-
-      let ret = collection.filter(item => {
-        return item.data.parentUrl === url;
-      });
-
-      sort(ret);
-
-      return ret;
-    },
-  },
-};
-
-/**
- * Resolve a parent slug against a page URL
- * @param {string} url - The URL of the page
- * @param {string} parent - The slug of the parent page
- * @returns {string} The resolved URL of the parent page
- */
-function getParentUrl(url, parent) {
-  if (!parent) {
-    return undefined;
-  }
-
-  let parts = url.split('/').filter(Boolean);
-  let ancestorIndex = parts.findLastIndex(part => part === parent);
-  let retParts = parts.slice();
-
-  if (ancestorIndex > -1) {
-    // parent is an ancestor
-    retParts.splice(ancestorIndex + 1);
-  } else {
-    // parent is a sibling in the same directory
-    retParts.splice(-1, 1, parent);
-  }
-
-  let ret = retParts.join('/');
-
-  if (url.startsWith('/')) {
-    // If the current page starts with a slash, make sure the parent does too
-    // This is pretty much always the case with 11ty page URLs
-    ret = '/' + ret;
-  }
-
-  if (!retParts.at(-1)?.includes('.') && !ret.endsWith('/')) {
-    // If no extension, make sure to end with a slash
-    ret += '/';
-  }
-
-  if (ret === '/docs/') {
-    // We don't want anyone's parent to be "Installation"!
-    ret = '/';
-  }
-
-  return ret;
-}
diff --git a/packages/webawesome/docs/docs/experimental/ssr.md b/packages/webawesome/docs/docs/experimental/ssr.md
index c9aa68d67..e283b8a91 100644
--- a/packages/webawesome/docs/docs/experimental/ssr.md
+++ b/packages/webawesome/docs/docs/experimental/ssr.md
@@ -2,6 +2,7 @@
 title: Server Side Rendering
 description: A document on how to get started with SSR in Web Awesome.
 layout: page-outline
+unlisted: true
 ---
 
 Server Side Rendering ("SSR") means your webpage is rendered on the server before being sent to the user's browser. This provides a fully formed HTML page right from the start, which is great for SEO and initial load times. Once the page is rendered, JavaScript kicks in to "hydrate" the components which makes them interactive. The Web platform supports this through a feature called [Declarative Shadow DOM](https://web.dev/articles/declarative-shadow-dom).
@@ -23,10 +24,10 @@ If you're using a bundler, make sure it comes _before_ any components are import
 
 ```js
 // Make sure this import is first.
-import "@lit-labs/ssr-client/lit-element-hydrate-support.js"
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
 
-import "webawesome/dist/components/button/button.js"
-import "webawesome/dist/components/input/input.js"
+import 'webawesome/dist/components/button/button.js';
+import 'webawesome/dist/components/input/input.js';
 ```
 
 ## Enable Server Rendering
@@ -40,12 +41,9 @@ For example, here's what the [11ty](https://www.11ty.dev/) integration looks lik
 
 import litPlugin from '@lit-labs/eleventy-plugin-lit';
 
- eleventyConfig.addPlugin(litPlugin, {
+eleventyConfig.addPlugin(litPlugin, {
   mode: 'worker',
-  componentModules: [
-    "webawesome/dist/components/button/button.js",
-    "webawesome/dist/components/input/input.js"
-  ]
+  componentModules: ['webawesome/dist/components/button/button.js', 'webawesome/dist/components/input/input.js'],
 });
 ```
 
@@ -60,7 +58,7 @@ As SSR becomes more stable, we'll work to add more instructions for various fram
 All Web Awesome components that get rendered for SSR will receive the `did-ssr` attribute.
 
 ```html
-<wa-button did-ssr>
+<wa-button did-ssr></wa-button>
 ```
 
 This can help if you need some styling prior to the element connecting.
@@ -116,4 +114,4 @@ Here are some known issues and things we're still working on.
 - `@shoelace-style/localize` (our localization library) has no way to set a language currently so it always falls back to `en`.
 - `<wa-icon>` has no fallback if there's no JS besides a blank `<svg>`. There's perhaps some backend mechanisms we can use to fetch. But requires altering APIs. Should also have a way to set height / widths, but we don't want to increase pain for SSR users.
 - `<wa-qr-code>` QR Code will not error on the backend and will render a blank canvas at the appropriate size, but will not render the canvas until the client component connects.
-- `setBasePath` and `kit codes` may need reconfiguring to work with SSR.
\ No newline at end of file
+- `setBasePath` and `kit codes` may need reconfiguring to work with SSR.
diff --git a/packages/webawesome/docs/docs/layout.njk b/packages/webawesome/docs/docs/layout.njk
index c2173ca46..e9223dce3 100644
--- a/packages/webawesome/docs/docs/layout.njk
+++ b/packages/webawesome/docs/docs/layout.njk
@@ -1,10 +1,7 @@
 ---
 title: Layout
 description: Layout components and utility classes help you organize content that can adapt to any device or screen size. See the [installation instructions](#installation) to use Web Awesome's layout tools in your project.
-layout: overview
-parentOf: layout
-categories: ["components", "utilities"]
-override:tags: []
+layout: docs
 ---
 
 {% markdown %}
diff --git a/packages/webawesome/docs/docs/palettes/bright.md b/packages/webawesome/docs/docs/palettes/bright.md
deleted file mode 100644
index 2ed50bd18..000000000
--- a/packages/webawesome/docs/docs/palettes/bright.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Bright
----
diff --git a/packages/webawesome/docs/docs/palettes/default.md b/packages/webawesome/docs/docs/palettes/default.md
deleted file mode 100644
index f6b920d88..000000000
--- a/packages/webawesome/docs/docs/palettes/default.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Default
-description: This is the palette used in the default theme.
-order: 0
----
diff --git a/packages/webawesome/docs/docs/palettes/index.njk b/packages/webawesome/docs/docs/palettes/index.njk
deleted file mode 100644
index 36a41a6c3..000000000
--- a/packages/webawesome/docs/docs/palettes/index.njk
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: Color Palettes
-description: Palettes define [literal colors](/docs/tokens/colors) that are used in the design system.
-layout: overview
-override:tags: []
-forTag: palette
-categories:
-  tags: [other, pro]
-  other: Free
----
diff --git a/packages/webawesome/docs/docs/palettes/palettes.json b/packages/webawesome/docs/docs/palettes/palettes.json
deleted file mode 100644
index 2d40de5f3..000000000
--- a/packages/webawesome/docs/docs/palettes/palettes.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "layout": "palette.njk",
-  "tags": ["palettes", "palette"],
-  "wide": true,
-  "eleventyComputed": {
-    "snippet": ".wa-palette-{{ page.fileSlug }}",
-    "icon": "palette",
-    "file": "styles/color/{{ page.fileSlug }}.css"
-  }
-}
diff --git a/packages/webawesome/docs/docs/palettes/shoelace.md b/packages/webawesome/docs/docs/palettes/shoelace.md
deleted file mode 100644
index d5e272bfe..000000000
--- a/packages/webawesome/docs/docs/palettes/shoelace.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Shoelace
-description: The original Shoelace color palette.
----
diff --git a/packages/webawesome/docs/docs/palettes/tweak.css b/packages/webawesome/docs/docs/palettes/tweak.css
deleted file mode 100644
index 1e9fdb320..000000000
--- a/packages/webawesome/docs/docs/palettes/tweak.css
+++ /dev/null
@@ -1,172 +0,0 @@
-@import url('/assets/styles/ui.css');
-
-.core-column {
-  position: relative;
-
-  > wa-dropdown {
-    min-width: 100%;
-  }
-}
-
-wa-dropdown > .color.swatch {
-  cursor: pointer;
-}
-
-.decorated-slider {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  margin-block-end: var(--wa-space-xl);
-
-  wa-slider {
-    grid-column: 1 / -1;
-    --track-height: 1em;
-    --track-color-inactive: transparent;
-    --track-color-active: transparent;
-    --thumb-color: var(--color-tweaked, var(--color));
-    --thumb-shadow:
-      0 0 0 var(--thumb-gap) var(--wa-color-surface-default),
-      var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
-        calc(var(--wa-shadow-offset-x-m) * -1 + var(--thumb-gap)) var(--wa-color-shadow);
-
-    &:active {
-      --thumb-size: 2em;
-    }
-
-    &::part(base) {
-      background: linear-gradient(to right in var(--color-interpolation-space, oklab), var(--color-1), var(--color-2));
-    }
-  }
-
-  [slot='label'] {
-    min-height: 1.1lh;
-  }
-
-  .clear-button {
-    vertical-align: middle;
-    font-size: var(--wa-font-size-xs);
-
-    &:not(.tweaked *) {
-      display: none;
-    }
-  }
-
-  .label-min,
-  .label-max {
-    font-size: var(--wa-font-size-xs);
-  }
-
-  .label-min {
-    grid-column: 1;
-    margin-inline-start: 0.15em;
-  }
-
-  .label-max {
-    grid-column: 3;
-    margin-inline-end: 0.1em;
-  }
-}
-
-.hue-shift-slider {
-  --color-1: oklch(from var(--color) l c calc(h + var(--min, 0)));
-  --color-2: oklch(from var(--color) l c calc(h + var(--max, 0)));
-  --color-interpolation-space: oklch;
-}
-
-.chroma-scale-slider {
-  --color: var(--wa-color-brand);
-  --color-1: oklch(from var(--color) l calc(c * var(--min)) h);
-  --color-2: oklch(from var(--color) l calc(c * var(--max)) h);
-}
-
-.gray-chroma-slider {
-  --color: var(--wa-color-gray);
-  --color-1: oklch(from var(--wa-color-gray) l 0 none);
-  --color-2: oklch(from var(--color-gray-undertone) l calc(c * var(--max)) h);
-  margin-top: var(--wa-space-m);
-}
-
-.color-scale {
-  th {
-    white-space: nowrap;
-  }
-
-  td:not([data-hue='gray'] *) {
-    --tweak-c: calc(c * var(--chroma-scale, 1));
-    --tweak-h: calc(h + var(--hue-shift, 0));
-
-    --color-tweaked-no-chroma-scale: oklch(from var(--color) l c var(--tweak-h));
-    --color-tweaked-no-hue-shift: oklch(from var(--color) l var(--tweak-c) h);
-
-    &:is([data-tint='90'], [data-tint='95']) {
-      /* Work around  https://bugs.webkit.org/show_bug.cgi?id=287637 */
-
-      --color-tweaked-no-chroma-scale: lch(from var(--color) l c var(--tweak-h));
-      --color-tweaked-no-hue-shift: lch(from var(--color) l var(--tweak-c) h);
-
-      /* outline: 1px dashed red; */
-    }
-  }
-
-  .color.swatch {
-    --color-2: var(--color-tweaked);
-    --color-2-height: 100%;
-
-    &:is(.tweaking *) {
-      --color-2-height: 70%;
-    }
-
-    &:is(.tweaking-chroma *) {
-      --color: var(--color-tweaked-no-chroma-scale);
-    }
-
-    &:is(.tweaking-hue *) {
-      --color: var(--color-tweaked-no-hue-shift);
-    }
-
-    &:is(.tweaking-gray-chroma *) {
-      --color: var(--color-tweaked-no-gray-chroma);
-    }
-  }
-
-  .tweak-icon {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: var(--wa-space-s);
-    opacity: var(--tweak-icon-opacity, 0%);
-  }
-
-  .core-column:hover {
-    --tweak-icon-opacity: 40%;
-  }
-
-  &.tweaked .core-column {
-    --tweak-icon-opacity: 80%;
-  }
-}
-
-.tweaked-callout {
-  padding: var(--wa-space-xs);
-  padding-inline-start: var(--wa-space-m);
-  align-items: center;
-
-  &:not(.tweaked-any *) {
-    visibility: hidden;
-  }
-
-  &::part(message) {
-    display: flex;
-    align-items: center;
-    gap: var(--wa-space-xs);
-  }
-
-  wa-button:first-of-type {
-    margin-inline-start: auto;
-  }
-}
-
-/* Better UI before Vue initializes */
-[v-if='saved'],
-[v-if^='tweaked'] {
-  display: none;
-}
diff --git a/packages/webawesome/docs/docs/palettes/tweak.js b/packages/webawesome/docs/docs/palettes/tweak.js
deleted file mode 100644
index 666b1caab..000000000
--- a/packages/webawesome/docs/docs/palettes/tweak.js
+++ /dev/null
@@ -1,498 +0,0 @@
-// TODO move these to local imports
-import Color from 'https://colorjs.io/dist/color.js';
-import { createApp, nextTick } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
-import { maxGrayChroma, moreHue, selectors, themeConfig } from '../../assets/data/index.js';
-import { cdnUrl, hueRanges, hues, tints } from '../../assets/scripts/tweak.js';
-import { cssImport, cssLiteral, cssRule } from '../../assets/scripts/tweak/code.js';
-import { subtractAngles } from '../../assets/scripts/tweak/util.js';
-import allPalettes from '/assets/data/palettes.js';
-import Prism from '/assets/scripts/prism.js';
-import { SwatchSelect } from '/assets/vue/components/index.js';
-import content from '/assets/vue/directives/content.js';
-import savedMixin from '/assets/vue/mixins/saved.js';
-
-await Promise.all(['wa-slider'].map(tag => customElements.whenDefined(tag)));
-
-// // Detect https://bugs.webkit.org/show_bug.cgi?id=287637
-// const SAFARI_OKLCH_BUG = (() => {
-//   let dummy = document.createElement('div');
-//   document.body.appendChild(dummy);
-//   dummy.style.color = 'oklch(from #d5e0e6 l c h)';
-//   let computedColor = getComputedStyle(dummy).color;
-//   dummy.remove();
-//   return computedColor.endsWith(' 0)');
-// })();
-
-globalThis.allPalettes = allPalettes;
-
-const percentFormatter = value => value.toLocaleString(undefined, { style: 'percent' });
-
-let paletteAppSpec = {
-  mixins: [savedMixin],
-
-  data() {
-    let appRoot = document.querySelector('#palette-app');
-    let id = appRoot.dataset.paletteId;
-    let palette = allPalettes[id];
-
-    return {
-      id,
-      originalTitle: palette.title,
-      originalColors: palette.colors,
-      hueRanges,
-      hueShifts: Object.fromEntries(hues.map(hue => [hue, 0])),
-      chromaScale: 1,
-      grayChroma: undefined,
-      grayColor: undefined,
-      tweaking: {},
-      type: 'palette',
-      collection: 'palettes',
-    };
-  },
-
-  created() {
-    // Non-reactive variables to expose
-    Object.assign(this, { moreHue, hues });
-
-    this.grayChroma = this.originalGrayChroma;
-    this.grayColor = this.originalGrayColor;
-
-    if (location.search) {
-      // Read URL params and apply them. This facilitates permalinks.
-      for (let hue in this.hueShifts) {
-        if (this.permalink.has(hue + '-shift')) {
-          this.hueShifts[hue] = Number(this.permalink.get(hue + '-shift'));
-        }
-      }
-
-      for (let param of ['chroma-scale', 'gray-color', 'gray-chroma']) {
-        if (this.permalink.has(param)) {
-          let value = this.permalink.get(param);
-
-          if (!isNaN(value)) {
-            // Convert numeric values to numbers
-            value = Number(value);
-          }
-
-          let prop = camelCase(param);
-          this[prop] = value;
-        }
-      }
-    }
-  },
-
-  mounted() {
-    for (let ref in this.$refs) {
-      this.$refs[ref].tooltipFormatter = percentFormatter;
-    }
-  },
-
-  computed: {
-    /** Default palette title for saving */
-    defaultTitle() {
-      return this.originalTitle + ' (tweaked)';
-    },
-
-    tweaks() {
-      return {
-        hueShifts: this.hueShifts,
-        chromaScale: this.chromaScale,
-        grayColor: this.grayColor,
-        grayChroma: this.grayChroma,
-      };
-    },
-
-    isTweaked() {
-      return Object.values(this.hueShifts).some(Boolean);
-    },
-
-    code() {
-      let ret = {};
-      for (let language of ['html', 'css']) {
-        let code = getPaletteCode(this.id, this.colors, this.tweaked, {
-          language,
-          cdnUrl,
-          attributes: ' class="wa-palette',
-        });
-        ret[language] = {
-          raw: code,
-          highlighted: Prism.highlight(code, Prism.languages[language], language),
-        };
-      }
-
-      return ret;
-    },
-
-    colors() {
-      return applyTweaks.call(this, this.originalColors, this.tweaks, this.tweaked);
-    },
-
-    colorsMinusChromaScale() {
-      let tweaked = { ...this.tweaked, chromaScale: false };
-      return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
-    },
-
-    colorsMinusHueShifts() {
-      let tweaked = { ...this.tweaked, hue: false };
-      return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
-    },
-
-    colorsMinusGrayChroma() {
-      let tweaked = { ...this.tweaked, grayChroma: false };
-      return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
-    },
-
-    tweaked() {
-      let anyHueTweaked = Object.values(this.hueShifts).some(Boolean);
-      let hue = anyHueTweaked
-        ? Object.fromEntries(Object.entries(this.hueShifts).map(([hue, shift]) => [hue, shift !== 0]))
-        : false;
-
-      let ret = {
-        chromaScale: this.chromaScale !== 1,
-        hue,
-        grayChroma: this.grayChroma !== this.originalGrayChroma,
-        grayColor: this.grayColor !== this.originalGrayColor,
-      };
-
-      let anyTweaked = Object.values(ret).some(Boolean);
-      return anyTweaked ? ret : false;
-    },
-
-    tweaksHumanReadable() {
-      let ret = {};
-
-      if (this.chromaScale !== 1) {
-        ret.chromaScale = 'More ' + (this.chromaScale > 1 ? 'vibrant' : 'muted');
-      }
-
-      for (let hue in this.hueShifts) {
-        let shift = this.hueShifts[hue];
-
-        if (!shift) {
-          continue;
-        }
-
-        let relHue = shift < 0 ? arrayPrevious(hues, hue) : arrayNext(hues, hue);
-        let hueTweak = moreHue[relHue] ?? relHue + 'er';
-
-        ret[hue] = capitalize(hueTweak + ' ' + hue + 's');
-      }
-
-      if (this.tweaked.grayChroma || this.tweaked.grayColor) {
-        if (this.tweaked.grayChroma === 0) {
-          ret.grayChroma = 'Achromatic grays';
-        } else {
-          if (this.tweaked.grayColor) {
-            ret.grayColor = capitalize(this.grayColor) + ' gray undertone';
-          }
-
-          if (this.tweaked.grayChroma) {
-            let more = this.tweaked.grayChroma > this.originalGrayChroma;
-            ret.grayChroma = `More ${more ? 'colorful' : 'neutral'} grays`;
-          }
-        }
-      }
-
-      return ret;
-    },
-
-    originalContrasts() {
-      return getContrasts(this.originalColors);
-    },
-
-    contrasts() {
-      return getContrasts(this.colors, this.originalContrasts);
-    },
-
-    originalCoreColors() {
-      let ret = {};
-      for (let hue in this.originalColors) {
-        let maxChromaTintRaw = this.originalColors[hue].maxChromaTintRaw;
-        ret[hue] = this.originalColors[hue][maxChromaTintRaw];
-      }
-      return ret;
-    },
-
-    coreColors() {
-      let ret = {};
-      for (let hue in this.colors) {
-        let maxChromaTintRaw = this.colors[hue].maxChromaTintRaw;
-        ret[hue] = this.colors[hue][maxChromaTintRaw];
-      }
-
-      return ret;
-    },
-
-    originalGrayColor() {
-      let grayHue = this.originalCoreColors.gray.get('h');
-      let minDistance = Infinity;
-      let closestHue = null;
-
-      for (let name in this.originalCoreColors) {
-        if (name === 'gray') {
-          continue;
-        }
-
-        let hue = this.originalCoreColors[name].get('h');
-        let distance = Math.abs(subtractAngles(hue, grayHue));
-        if (distance < minDistance) {
-          minDistance = distance;
-          closestHue = name;
-        }
-      }
-
-      return closestHue ?? 'indigo';
-    },
-
-    originalGrayChroma() {
-      let coreTint = this.originalColors.gray.maxChromaTint;
-      let grayChroma = this.originalColors.gray[coreTint].get('c');
-      if (grayChroma === 0 || grayChroma === null) {
-        return 0;
-      }
-
-      let grayColorChroma = this.originalColors[this.originalGrayColor][coreTint].get('c');
-      return grayChroma / grayColorChroma;
-    },
-
-    /**
-     * We want to preserve the original grayChroma selection so that when the user switches to another undertone
-     * that supports higher chromas, their selection will be there.
-     * This property is the gray chroma % that is actually applied.
-     */
-    computedGrayChroma() {
-      return Math.min(this.grayChroma, this.maxGrayChroma);
-    },
-
-    maxGrayChroma() {
-      return maxGrayChroma[this.grayColor] ?? 0.3;
-    },
-  },
-
-  watch: {
-    hueShifts: {
-      deep: true,
-      handler() {
-        for (let hue in this.hueShifts) {
-          this.permalink.set(hue + '-shift', this.hueShifts[hue], 0);
-        }
-      },
-    },
-
-    chromaScale() {
-      this.permalink.set('chroma-scale', this.chromaScale, 1);
-    },
-
-    grayColor() {
-      this.permalink.set('gray-color', this.grayColor, this.originalGrayColor);
-    },
-
-    grayChroma() {
-      this.permalink.set('gray-chroma', this.grayChroma, this.originalGrayChroma);
-    },
-
-    tweaks: {
-      deep: true,
-      async handler(value, oldValue) {
-        await nextTick(); // must run after individual watchers
-
-        // Update page URL
-        this.permalink.updateLocation();
-
-        this.unsavedChanges = true;
-      },
-    },
-  },
-
-  methods: {
-    /**
-     * Remove a specific tweak or all tweaks
-     * @param {string} [param] - The tweak to remove. If not provided, all tweaks are removed.
-     */
-    reset(param) {
-      if (!param || param === 'chromaScale') {
-        this.chromaScale = 1;
-      }
-
-      if (param in this.hueShifts) {
-        this.hueShifts[param] = 0;
-      } else if (!param) {
-        for (let hue in this.hueShifts) {
-          this.hueShifts[hue] = 0;
-        }
-      }
-
-      if (!param || param === 'grayColor') {
-        this.grayColor = this.originalGrayColor;
-      }
-
-      if (!param || param === 'grayChroma') {
-        this.grayChroma = this.originalGrayChroma;
-      }
-    },
-  },
-
-  directives: {
-    content,
-  },
-
-  components: {
-    SwatchSelect,
-  },
-
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};
-
-function init() {
-  let paletteAppContainer = document.querySelector('#palette-app');
-  globalThis.paletteApp?.unmount?.();
-
-  if (!paletteAppContainer) {
-    return;
-  }
-
-  globalThis.paletteApp = createApp(paletteAppSpec).mount(paletteAppContainer);
-}
-
-init();
-addEventListener('turbo:render', init);
-
-export function getPaletteCode(paletteId, colors, tweaked, options) {
-  let imports = [];
-
-  if (paletteId) {
-    imports.push(themeConfig.palette.url(paletteId));
-  }
-
-  let css = '';
-  let declarations = [];
-
-  if (tweaked) {
-    for (let hue in colors) {
-      if (hue === 'orange') {
-        continue;
-      } else if (hue === 'gray') {
-        if (!tweaked.grayChroma && !tweaked.grayColor) {
-          continue;
-        }
-      } else if (!tweaked.chromaScale && !tweaked.hue?.[hue]) {
-        continue;
-      }
-
-      for (let tint of tints) {
-        let color = colors[hue][tint];
-        let stringified = color.toString({ format: color.inGamut('srgb') ? 'hex' : undefined });
-        declarations.push(`--wa-color-${hue}-${tint}: ${stringified};`);
-      }
-
-      declarations.push('');
-    }
-
-    if (declarations.length > 0) {
-      css += cssRule(selectors.palette(paletteId), declarations);
-    }
-  }
-
-  let ret = imports.map(url => cssImport(url, options)).join('\n');
-
-  if (css) {
-    ret += `\n\n${cssLiteral(css, options)}`;
-  }
-
-  return ret;
-}
-
-function arrayNext(array, element) {
-  let index = array.indexOf(element);
-  return array[(index + 1) % array.length];
-}
-
-function arrayPrevious(array, element) {
-  let index = array.indexOf(element);
-  return array[(index - 1 + array.length) % array.length];
-}
-
-function applyTweaks(originalColors, tweaks, tweaked) {
-  let ret = {};
-  let { hueShifts, chromaScale = 1, grayColor, grayChroma } = tweaks;
-
-  if (!tweaked) {
-    return originalColors;
-  }
-
-  if (tweaked.grayChroma) {
-    grayChroma = this.computedGrayChroma;
-  }
-
-  for (let hue in originalColors) {
-    let originalScale = originalColors[hue];
-    let scale = (ret[hue] = {});
-    let descriptors = Object.getOwnPropertyDescriptors(originalScale);
-    Object.defineProperties(scale, {
-      maxChromaTint: { ...descriptors.maxChromaTint, enumerable: false },
-      maxChromaTintRaw: { ...descriptors.maxChromaTintRaw, enumerable: false },
-    });
-
-    for (let tint of tints) {
-      let color = originalScale[tint].clone();
-
-      if (tweaked.hue && hueShifts[hue]) {
-        color.set({ h: h => h + hueShifts[hue] });
-      }
-
-      if (tweaked.chromaScale && chromaScale !== 1) {
-        color.set({ c: c => c * chromaScale });
-      }
-
-      if (hue === 'gray' && (tweaked.grayChroma || tweaked.grayColor)) {
-        let colorUndertone = originalColors[grayColor][tint].clone();
-        color = colorUndertone.set({ c: c => c * grayChroma });
-      }
-
-      scale[tint] = color;
-    }
-  }
-
-  return ret;
-}
-
-function camelCase(str) {
-  return (str + '').replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-}
-
-function capitalize(str) {
-  return str[0].toUpperCase() + str.slice(1);
-}
-
-function getContrasts(colors, originalContrasts) {
-  let ret = {};
-
-  for (let hue in colors) {
-    ret[hue] = {};
-
-    for (let tintBg of tints) {
-      ret[hue][tintBg] = {};
-      let bgColor = colors[hue][tintBg];
-
-      if (!bgColor || !bgColor.contrast) {
-        continue;
-      }
-
-      for (let tintFg of tints) {
-        let fgColor = colors[hue][tintFg];
-        let value = bgColor.contrast(fgColor, 'WCAG21');
-        if (originalContrasts) {
-          let original = originalContrasts[hue][tintBg][tintFg];
-          ret[hue][tintBg][tintFg] = { value, original, bgColor, fgColor };
-        } else {
-          ret[hue][tintBg][tintFg] = value;
-        }
-      }
-    }
-  }
-
-  return ret;
-}
diff --git a/packages/webawesome/docs/docs/resources/visual-tests.md b/packages/webawesome/docs/docs/resources/visual-tests.md
index dfd057f91..781a5dcea 100644
--- a/packages/webawesome/docs/docs/resources/visual-tests.md
+++ b/packages/webawesome/docs/docs/resources/visual-tests.md
@@ -1,6 +1,6 @@
 ---
 title: Visual Tests
-description: TODO
+description: A page to visually test component styles against native styles.
 layout: page
 wide: true
 ---
@@ -47,7 +47,7 @@ These tests can come in handy when creating or customizing your own theme. Look
 Alignment tests reveal the top boundary, vertical center, and bottom boundary of components. These help to evaluate how well components align with one another when arranged horizontally.
 
 {% include 'visual-tests/alignment.njk' %}
-  
+
 </wa-tab-panel>
 
 <wa-tab-panel name="color">
@@ -90,4 +90,4 @@ Size tests ensure that both the `size` attribute and `.wa-size-[s|m|l]` classes
 
 </wa-tab-panel>
 
-</wa-tab-group>
\ No newline at end of file
+</wa-tab-group>
diff --git a/packages/webawesome/docs/docs/themes/app/index.js b/packages/webawesome/docs/docs/themes/app/index.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/webawesome/docs/docs/themes/awesome.md b/packages/webawesome/docs/docs/themes/awesome.md
index f4787c51c..23ee02011 100644
--- a/packages/webawesome/docs/docs/themes/awesome.md
+++ b/packages/webawesome/docs/docs/themes/awesome.md
@@ -1,8 +1,7 @@
 ---
 title: Awesome
-description: Punchy and vibrant, the rockstar of themes.
-order: 0.2
-fonts:
-  body: Quicksand
-dimension: Blocky
+description: Bustling with plenty of luster and shine.
+isPro: true
 ---
+
+TODO
diff --git a/packages/webawesome/docs/docs/themes/creating.md b/packages/webawesome/docs/docs/themes/creating.md
deleted file mode 100644
index a73484182..000000000
--- a/packages/webawesome/docs/docs/themes/creating.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: Creating Themes
-layout: page-outline
-order: 999
-override:tags: [themes]
----
-
-There are two ways to create themes.
-The easiest way is to customize the default theme.
-The advanced way is to create a new theme from scratch.
-Which method you choose depends on your project's requirements and the amount of effort you're willing to invest.
-
-## Customizing a Built-in Theme
-
-Overriding the default theme is the easiest way to customize Web Awesome.
-You can do this by importing the default theme as-is, then creating a separate stylesheet that overrides [the theming API](/docs/customizing#design-tokens) and adds [component styles](/docs/customizing#css-parts) to your liking. You must import your theme _after_ the default theme.
-
-If you're customizing the default light styles, scope your styles to the following selectors.
-
-```css
-:where(:root),
-:host,
-.wa-theme-default,
-.wa-light,
-.wa-dark .wa-invert {
-  /* your custom styles here */
-}
-```
-
-If you're customizing the default dark styles, scope your styles to the following selectors.
-
-```css
-.wa-dark,
-.wa-invert {
-  /* your custom styles here */
-}
-```
-
-By customizing a built-in theme, you'll maintain a smaller stylesheet containing only your changes. Contrast this to [creating a new theme](#creating-a-new-theme), where you need to explicitly define every custom property required by the library. This approach is more "future-proof," as new design tokens that emerge in subsequent versions of Web Awesome will be accounted for by built-in themes.
-
-While this approach is easier to maintain, the drawback is that your theme can't be activated independently — it's tied to the built-in theme you're extending.
-
-## Creating a New Theme
-
-Creating a new theme is more of an undertaking than [customizing an existing one](#customizing-a-built-in-theme). At a minimum, you must implement all of the required custom properties. The easiest way to do this is by "forking" a built-in theme and modifying it from there.
-
-Start by changing the selector to match your theme's name. Assuming your new theme is called "Purple Power", your theme should be scoped like this.
-
-```css
-:where(:root),
-:host,
-.wa-theme-purple-power,
-.wa-light {
-  /* your custom styles here */
-}
-```
-
-By creating a new theme, you won't be relying on a built-in theme as a foundation. Because of this, you can activate it independently as an alternative to the default theme. This is the recommended approach if you're looking to open source your theme for others to use.
-
-You will, however, need to maintain your theme more carefully, as new versions of Web Awesome change the theming API in ways that your theme won't have accounted for. It's recommended that you clearly specify which version(s) of Web Awesome your theme is designed to work with and keep it up to date as new versions of Web Awesome are released.
diff --git a/packages/webawesome/docs/docs/themes/default.md b/packages/webawesome/docs/docs/themes/default.md
index c4270392b..3b93c0630 100644
--- a/packages/webawesome/docs/docs/themes/default.md
+++ b/packages/webawesome/docs/docs/themes/default.md
@@ -1,9 +1,7 @@
 ---
 title: Default
 description: Your trusty companion, like a perfectly broken-in pair of jeans.
-order: 0
-fonts:
-  body: ui-sans-serif
-  code: ui-monospace
-  longform: ui-serif
+isPro: true
 ---
+
+TODO
diff --git a/packages/webawesome/docs/docs/themes/demo/index.js b/packages/webawesome/docs/docs/themes/demo/index.js
deleted file mode 100644
index 4a5cb9ff6..000000000
--- a/packages/webawesome/docs/docs/themes/demo/index.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { themeConfig, themeParams } from '/assets/data/index.js';
-import my from '/assets/scripts/my.js';
-import { documentTheme, theme } from '/docs/themes/preview/preview.js';
-
-let urlParams = new URLSearchParams(location.search);
-
-if (urlParams.has('uid') && my.themes.saved.length > 0) {
-  let savedTheme = my.themes.saved.find(p => p.uid === Number(urlParams.get('uid')));
-
-  // Update title
-  document.title = savedTheme.title;
-  for (let title of document.querySelectorAll('.title')) {
-    title.innerHTML = savedTheme.title;
-  }
-}
-
-for (let editLink of document.querySelectorAll('.edit-link')) {
-  editLink.href = '../edit/?' + urlParams;
-  editLink.addEventListener('click', e => {
-    editLink.href = '../edit/?' + urlParams;
-  });
-}
-
-theme.addEventListener('change', e => {
-  let tweaks = [];
-
-  for (let aspect of themeParams) {
-    if (theme[aspect] && theme[aspect] !== documentTheme[aspect]) {
-      let config = themeConfig[aspect];
-      let override = theme[aspect];
-      let { docs, icon } = config;
-      let docsURL = docs ? docs + override + '/' : '';
-      let title = override.replace(/^[a-z]/g, c => c.toUpperCase());
-
-      if (docsURL) {
-        title = `<a href="${docsURL}">${title}</a>`;
-      }
-
-      tweaks.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> ${title}`);
-    }
-  }
-
-  let isRemixed = tweaks.length > 0;
-  document.documentElement.classList.toggle('is-remixed', isRemixed);
-
-  if (isRemixed) {
-    for (let p of document.querySelectorAll('#theme-status')) {
-      let proBadge = p.querySelector('.pro');
-      if (!proBadge) {
-        p.insertAdjacentHTML('beforeend', '<wa-badge class="pro">PRO</wa-badge>');
-      }
-    }
-
-    for (let p of mix_and_match) {
-      if (tweaks.length) {
-        p.innerHTML =
-          `<strong><wa-icon name="arrows-rotate"></wa-icon> Remixed</strong> ` +
-          tweaks
-            .map(
-              msg => `<wa-badge appearance=outlined>
-          ${msg}</wa-badge>`,
-            )
-            .join(' ');
-      } else {
-        p.innerHTML = '';
-      }
-    }
-  }
-});
diff --git a/packages/webawesome/docs/docs/themes/demo/index.njk b/packages/webawesome/docs/docs/themes/demo/index.njk
deleted file mode 100644
index 69c847a08..000000000
--- a/packages/webawesome/docs/docs/themes/demo/index.njk
+++ /dev/null
@@ -1,47 +0,0 @@
----
-layout: blank
-pagination:
-  data: collections.theme
-  size: 1
-  alias: theme
-permalink: '/docs/themes/{{ theme.fileSlug }}/demo.html'
-eleventyExcludeFromCollections: true
-override:tags: []
-eleventyComputed:
-  forceTheme: "{{ theme.fileSlug if theme.fileSlug !== 'custom' else 'default' }}"
-unlisted: true
----
-{% set isPro = theme.data.isPro %}
-{% set status = theme.data.status %}
-{% set since = theme.data.since %}
-<link rel="stylesheet" href="/docs/themes/showcase.css" />
-
-{% set content %}
-<header>
-  {% include 'breadcrumbs.njk' %}
-  <h1 class="title">{{ theme.data.title }}</h1>
-  <p id="mix_and_match" class="wa-size-s"></p>
-  <p id="theme-status">{% include 'status.njk' %}</p>
-  <p id="theme-showcase-description">{{ theme.data.description | inlineMarkdown | safe }}</p>
-  {% if theme.fileSlug === 'custom' %}
-  <p>
-    <wa-button href="../edit/" class="edit-link" target="_parent" appearance="outlined">
-      <wa-icon slot="prefix" name="pencil"></wa-icon>
-      Edit theme
-    </wa-button>
-  </p>
-  {% endif %}
-</header>
-{% include 'theme-showcase.njk' %}
-{% endset %}
-
-<wa-comparison  style="width: 100%" position="90">
-<div slot="after" class="theme-showcase wa-gap-0">
-{{ content | safe }}
-</div>
-<div slot="before" class="theme-showcase wa-gap-0 wa-invert">
-  {{ content | safe }}
-</div>
-</wa-comparison >
-
-<script type="module" src="../demo/index.js"></script>
diff --git a/packages/webawesome/docs/docs/themes/edit/index.js b/packages/webawesome/docs/docs/themes/edit/index.js
deleted file mode 100644
index 6837d3587..000000000
--- a/packages/webawesome/docs/docs/themes/edit/index.js
+++ /dev/null
@@ -1,361 +0,0 @@
-// import { createApp, nextTick } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
-import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.js';
-import { pairingsList, sameAs } from '/assets/data/fonts.js';
-import { allHues, cdnUrl, iconLibraries } from '/assets/data/index.js';
-import palettes from '/assets/data/palettes.js';
-import themes from '/assets/data/themes.js';
-import { getPath, themeDefaults } from '/assets/data/theming.js';
-import Prism from '/assets/scripts/prism.js';
-import { getThemeCode } from '/assets/scripts/tweak/code.js';
-import { deepClone, deepEach, deepEntries, deepGet, deepMerge } from '/assets/scripts/util/deep.js';
-import { camelCase, capitalize, slugify } from '/assets/scripts/util/string.js';
-import {
-  ColorSelect,
-  EditableText,
-  FontsCard,
-  IconsCard,
-  InfoTip,
-  PageCard,
-  PaletteCard,
-  SwatchSelect,
-  ThemeCard,
-  UiPanel,
-  UiPanelContainer,
-  UiSlider,
-} from '/assets/vue/components/index.js';
-import content from '/assets/vue/directives/content.js';
-import savedMixin from '/assets/vue/mixins/saved.js';
-
-let appSpec = {
-  mixins: [savedMixin],
-
-  data() {
-    let mobileMQ = window.matchMedia('(max-width: 768px)');
-    let isMobile = mobileMQ.matches;
-    mobileMQ.addEventListener('change', e => {
-      this.isMobile = e.matches;
-    });
-
-    let id = location.pathname.match(/\/themes\/([^/]+)\/?$/)?.[1];
-    let isCustom = id === 'custom' || id === 'edit';
-
-    return {
-      type: 'theme',
-      collection: 'themes',
-      id: id === 'edit' ? 'custom' : id,
-      isCustom,
-      urlParams: location.search,
-      theme: getBlankTheme(isCustom ? '' : id),
-      ui: {
-        panel: 'styles',
-        showCode: false,
-        code: 'css',
-        preview: 'app',
-      },
-      isMobile,
-      isCreated: false,
-    };
-  },
-
-  created() {
-    // Data that won't change so we don't need reactivity.
-    // By adding them here instead of in data() we skip having them wrapped in Proxies.
-    Object.assign(this, {
-      themes,
-      palettes,
-      hues: allHues,
-      iconLibraries,
-      themeDefaults,
-      sameAs,
-      pairings: pairingsList,
-    });
-
-    if (location.search) {
-      let urlTheme = this.permalink.toObject({
-        ignoreKeys: ['panel', 'color-scheme'],
-        getPath,
-      });
-      deepMerge(this.theme, urlTheme, { emptyValues: [undefined, ''] });
-
-      if (this.permalink.has('panel')) {
-        this.ui.panel = this.permalink.get('panel');
-      }
-    }
-
-    this.isCreated = true;
-  },
-
-  mounted() {
-    let { preview, previewInvert } = this.$refs;
-
-    if (!preview || !previewInvert) {
-      return;
-    }
-
-    let contentWindow, contentWindowInvert;
-
-    preview.addEventListener('load', () => {
-      try {
-        contentWindow = preview.contentWindow;
-      } catch (e) {}
-
-      if (contentWindow) {
-        contentWindow.addEventListener('scroll', e => {
-          let { scrollX, scrollY } = contentWindow;
-          if (contentWindowInvert) {
-            contentWindowInvert.scrollTo(scrollX, scrollY);
-          }
-        });
-      }
-    });
-
-    previewInvert.addEventListener('load', () => {
-      try {
-        contentWindowInvert = previewInvert.contentWindow;
-      } catch (e) {}
-
-      if (contentWindowInvert) {
-        contentWindowInvert.addEventListener('scroll', e => {
-          let { scrollX, scrollY } = contentWindowInvert;
-          if (contentWindow) {
-            contentWindow.scrollTo(scrollX, scrollY);
-          }
-        });
-      }
-    });
-  },
-
-  computed: {
-    originalTitle() {
-      if (this.isCustom) {
-        return 'My Theme';
-      }
-
-      return themes[this.computed.base]?.title ?? 'Unknown Theme';
-    },
-
-    /** Default theme title for saving */
-    defaultTitle() {
-      let ret = this.originalTitle;
-
-      if (!this.isCustom) {
-        ret += ' (remixed)';
-      }
-
-      return ret;
-    },
-
-    slug() {
-      return slugify(this.title);
-    },
-
-    cssFilename() {
-      return `theme-${this.slug}.css`;
-    },
-
-    computedBase() {
-      return this.theme.base || themeDefaults.base;
-    },
-
-    baseTheme() {
-      return themes[this.computedBase];
-    },
-
-    // Resolved defaults for the current theme
-    defaults() {
-      let ret = deepClone(themeDefaults);
-
-      deepEach(ret, value => {
-        // Resolve defaults that depend on other values based on the current theme params
-        if (typeof value === 'function') {
-          return value.call(this.theme, this.baseTheme);
-        }
-      });
-
-      return ret;
-    },
-
-    customizations() {
-      return deepEntries(this.theme, {
-        filter: (value, key, parent, path) => {
-          let fullPath = [...path, key];
-          let defaultValue = deepGet(this.defaults, fullPath);
-          return key !== 'base' && typeof value !== 'object' && value !== '' && value !== defaultValue;
-        },
-      });
-    },
-
-    computed() {
-      let ret = deepClone(themeDefaults);
-
-      deepMerge(ret, this.theme, { emptyValues: [undefined, ''] });
-
-      deepEach(ret, value => {
-        // Resolve defaults that depend on other values
-        if (typeof value === 'function') {
-          return value.call(ret, this.baseTheme);
-        }
-      });
-
-      return ret;
-    },
-
-    code() {
-      let ret = {};
-      let theme = { ...this.theme };
-      theme.base ||= 'default';
-
-      for (let language of ['html', 'css']) {
-        let code = getThemeCode(theme, { id: this.slug, language, cdnUrl });
-        ret[language] = {
-          raw: code,
-          highlighted: Prism.highlight(code, Prism.languages[language], language),
-        };
-      }
-
-      ret.css.dataURI = `data:text/css;charset=utf-8,${encodeURIComponent(ret.css.raw)}`;
-      ret.css.blob = URL.createObjectURL(new Blob([ret.css.raw], { type: 'text/css' }));
-
-      return ret;
-    },
-
-    codeToUse() {
-      let attributes = this.theme.icon.kit ? ` data-fa-kit-code="${this.theme.icon.kit}"` : '';
-      let code = `<link rel="stylesheet" href="path/to/${this.cssFilename}"${attributes}>`;
-      return {
-        raw: code,
-        highlighted: Prism.highlight(code, Prism.languages.html, 'html'),
-      };
-    },
-
-    tweaked() {
-      return Object.values(this.theme).filter(Boolean).length > 0;
-    },
-
-    urlParamsInvert() {
-      let invert = 'color-scheme=invert';
-      return (this.urlParams ? this.urlParams + '&' : '?') + invert;
-    },
-  },
-
-  watch: {
-    theme: {
-      deep: true,
-      async handler() {
-        await this.$nextTick(); // give defaults a chance to update
-
-        this.permalink.setAll(this.theme, this.defaults);
-        this.permalink.updateLocation();
-
-        this.updatePreview();
-
-        this.unsavedChanges = true;
-      },
-    },
-
-    'ui.preview': {
-      immediate: true,
-      handler() {
-        if (!this.isCreated) {
-          return;
-        }
-
-        // Update urlParams only when the preview changes
-        // We use postMessage for other updates
-        let urlParams = new URLSearchParams(this.computed);
-        urlParams.sort();
-        urlParams = urlParams + '';
-
-        this.urlParams = urlParams ? '?' + urlParams : '';
-      },
-    },
-  },
-
-  methods: {
-    capitalize,
-
-    log(...args) {
-      console.log(...args);
-      return args[0];
-    },
-
-    updatePreview() {
-      // Update page URL
-      let theme = JSON.parse(JSON.stringify(this.theme));
-      let message = {
-        type: 'updatePreview',
-        theme,
-        id: this.slug,
-      };
-
-      this.$refs.preview?.contentWindow.postMessage(message);
-      this.$refs.previewInvert?.contentWindow.postMessage(message);
-    },
-
-    resetTo(base) {
-      let kit = this.theme.icon.kit;
-      let theme = getBlankTheme(base);
-
-      if (kit) {
-        theme.icon.kit = kit;
-      }
-
-      return (this.theme = theme);
-    },
-  },
-
-  components: {
-    ColorSelect,
-    EditableText,
-    FontsCard,
-    IconsCard,
-    InfoTip,
-    PageCard,
-    PaletteCard,
-    ThemeCard,
-    UiPanel,
-    UiPanelContainer,
-    SwatchSelect,
-    UiSlider,
-  },
-
-  directives: { content },
-
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};
-
-function init() {
-  let appContainer = document.querySelector('#theme-app');
-  globalThis.app?.unmount?.();
-
-  if (!appContainer) {
-    return;
-  }
-
-  globalThis.app = createApp(appSpec).mount(appContainer);
-}
-
-init();
-addEventListener('turbo:render', init);
-
-function getBlankTheme(base) {
-  return {
-    base,
-    palette: '',
-    typography: '',
-    colors: '',
-    brand: '',
-    icon: {
-      kit: '',
-      library: '',
-      family: '',
-      style: '',
-    },
-    rounding: '',
-    spacing: '',
-    borderWidth: '',
-    dimensionality: '',
-  };
-}
diff --git a/packages/webawesome/docs/docs/themes/edit/index.njk b/packages/webawesome/docs/docs/themes/edit/index.njk
deleted file mode 100644
index 1f085faf0..000000000
--- a/packages/webawesome/docs/docs/themes/edit/index.njk
+++ /dev/null
@@ -1,243 +0,0 @@
----
-layout: blank
-title: Create
-permalink: "/docs/themes/edit/"
-override:tags: [themes, pro]
-isPro: true
-order: 99
-unlisted: true
----
-
-{% block head %}
-<link href="/assets/styles/docs.css" rel="stylesheet" />
-<link href="/assets/styles/ui.css" rel="stylesheet" />
-<link href="{{ page.url }}style.css" rel="stylesheet" />
-<script src="{{ page.url }}index.js" type="module"></script>
-{% endblock %}
-
-<wa-page id="theme-app">
-  <header slot="header">
-    <a href="/" aria-label="Web Awesome">
-      {% include "logo-simple.njk" %}
-    </a>
-
-    <div class="title">
-      <h1><editable-text :model-value="title" label="theme name" @submit="newTitle => save({title: newTitle})" blur="cancel"></editable-text></h1>
-      <wa-button v-if="saved" class="delete" @click="deleteSaved" appearance="plain" size="small">
-        <wa-icon name="trash" label="Delete theme"></wa-icon>
-      </wa-button>
-    </div>
-
-    <wa-button v-if="tweaked || uid" @click="save()" :disabled="!unsavedChanges"
-      :variant="unsavedChanges ? 'success' : 'neutral'" size="small" :appearance="unsavedChanges ? 'accent' : 'outlined'">
-      <span v-content="unsavedChanges ? 'Save' : 'Saved'">Save</span>
-    </wa-button>
-    <wa-button size="small" @click="ui.showCode = !showCode" appearance="outlined">
-      <wa-icon name="code" variant="solid"></wa-icon>
-      Code
-    </wa-button>
-    <wa-drawer label="Theme code" :open="ui.showCode" @wa-after-hide="ui.showCode = false" light-dismiss>
-      <wa-tab-group class="import-stylesheet-code" :active="ui.code" @wa-tab-show="ui.code = $event.detail.name">
-        <wa-tab panel="css">CSS</wa-tab>
-        <wa-tab-panel name="css">
-          <p>
-            <wa-button variant="brand" :href="code.css.blob" :download="cssFilename">
-              <wa-icon name="arrow-down-to-line" variant="solid" slot="prefix"></wa-icon>
-              Download <code v-text="cssFilename"></code>
-            </wa-button>
-          </p>
-
-          <pre class="language-css"><code v-content:html="code.css.highlighted"></code></pre>
-
-          <wa-divider></wa-divider>
-
-          <p>To use this theme, add this code snippet to the <code>&lt;head&gt;</code> section of your HTML file:</p>
-
-          <pre class="language-html"><code v-content:html="codeToUse.highlighted"></code></pre>
-
-          <wa-callout size="small" variant="warning" appearance="filled">
-            <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
-            Don't forget to replace <code v-text="'path/to/' + cssFilename"></code> with your local path!
-          </wa-callout>
-        </wa-tab-panel>
-
-        <wa-tab panel="html">HTML</wa-tab>
-        <wa-tab-panel name="html">
-          <p>To use this theme, add this code snippet to the <code>&lt;head&gt;</code> section of your HTML file:</p>
-          <pre class="language-html"><code v-content:html="code.html.highlighted"></code></pre>
-        </wa-tab-panel>
-      </wa-tab-group>
-    </wa-drawer>
-  </header>
-
-  <ui-panel-container class="sidebar" slot="navigation" v-model="ui.panel">
-    <ui-panel v-model="ui.panel" value="styles" title="Styles" :step="0">
-      <theme-card :theme="computed.base" size="small" :action="e => ui.panel = 'theme'" title="Starting Theme"></theme-card>
-
-      <wa-divider></wa-divider>
-
-      <palette-card :palette="computed.palette" size="small" :action="e => ui.panel = 'color'" role="button" tabindex="0"
-                    title="Colors" :subtitle="`${ palettes[computed.palette]?.title } palette &bull; ${ capitalize(computed.brand) } brand`">
-      </palette-card>
-
-      <fonts-card :theme="computed.typography" title="Fonts" size="small" :action="e => ui.panel = 'typography'">
-      </fonts-card>
-
-      <icons-card size="small" :action="e => ui.panel = 'icons'" :family="computed.icon.family" :style="computed.icon.style"
-                  title="Icons" :subtitle="`${ capitalize(computed.icon.family) } &bull; ${ capitalize(computed.icon.style) }`">
-      </icons-card>
-
-      <theme-card type="dimensionality" :theme="computed.dimensionality" title="Elements" size="small" :action="e => ui.panel = 'elements'"></theme-card>
-    </ui-panel>
-
-    <ui-panel v-model="ui.panel" value="theme" :step="1">
-      <template #title>
-        <label for="starting-theme">Starting Theme</label>
-      </template>
-
-      <wa-callout v-if="customizations.length > 0" variant="danger" size="small">
-        <wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
-        Editing the starting theme will reset your <span v-text="customizations.length + ' customization' + (customizations.length > 1 ? 's' : '')"></span>.
-      </wa-callout>
-
-      <wa-radio-group id="starting-theme" class="card-picker" :value="theme.base" @input="e => resetTo(e.target.value)">
-        <template v-for="(themeMeta, themeId) in themes">
-          <wa-radio v-if="themeId !== 'custom'" :value="themeId" size="small" :aria-selected="!theme.base && themeId === 'default' ? 'true' : null">
-            <theme-card :theme="themeId"></theme-card>
-          </wa-radio>
-        </template>
-      </wa-radio-group>
-    </ui-panel>
-
-    <ui-panel v-model="ui.panel" value="color" title="Colors" :step="1">
-      <palette-card :palette="computed.palette" size="small" :action="e => ui.panel = 'color-palette'" role="button" tabindex="0"
-                    title="Color Palette" :subtitle="palettes[computed.palette]?.title">
-      </palette-card>
-      <swatch-select label="Brand Color" shape="rounded"
-                     :get-color="hue => palettes[computed.palette].colors[hue].key"
-                     :model-value="computed.brand" @update:model-value="value => theme.brand = value"
-                     :values="hues"></swatch-select>
-    </ui-panel>
-
-    <ui-panel v-model="ui.panel" value="color-palette" title="Color Palette" :step="2">
-      <wa-radio-group class="card-picker" v-model="theme.palette" size="small">
-        <wa-radio v-for="(palette, paletteId) in palettes" :value="paletteId">
-          <palette-card :palette="paletteId" size="small" :aria-selected="!theme.palette && paletteId === themes[computed.base].palette ? 'true' : null">
-            <template #extra><wa-badge appearance="outlined" variant="neutral" v-if="paletteId === themes[computed.base].palette">Default</wa-badge></template>
-          </palette-card>
-        </wa-radio>
-      </wa-radio-group>
-    </ui-panel>
-
-    <ui-panel v-model="ui.panel" value="typography" title="Fonts" :step="1">
-      <wa-radio-group class="card-picker" v-model="theme.typography" >
-        <wa-radio v-for="pairing of pairings" :value="pairing.id" size="small">
-          <fonts-card :pairing :aria-selected="!theme.typography && pairing.id === theme.base ? 'true' : null">
-            <template #extra><wa-badge appearance="outlined" variant="neutral" v-if="pairing.id === theme.base">Default</wa-badge></template>
-          </fonts-card>
-        </wa-radio>
-      </wa-radio-group>
-    </ui-panel>
-
-    <ui-panel v-model="ui.panel" value="icons" title="Icons" :step="1">
-      <wa-select label="Library" value="default" disabled style="display: none;">
-        <wa-option value="default" selected>Font Awesome</wa-option>
-      </wa-select>
-
-      <icons-card type="family" vary="style" size="small" :action="e => ui.panel = 'icon-family'" :defaults="computed.icon"
-                  title="Icon Family">
-      </icons-card>
-
-      <icons-card type="style" size="small" :action="e => ui.panel = 'icon-style'" :defaults="computed.icon"
-                  title="Icon Style">
-      </icons-card>
-
-      <wa-input label="Font Awesome Pro Kit Code" v-model="theme.icon.kit" placeholder="e.g. f0nta7e50e">
-        <info-tip slot="suffix"><template #content>You need a Font Awesome Pro license to use certain families and styles.</template></info-tip>
-        <a href="https://fontawesome.com/kits" target="_blank" slot="hint" class="wa-caption-m wa-cluster wa-gap-2xs">
-          <span>Find your kit code here</span>
-          <wa-icon name="arrow-up-right-from-square" variant="regular" style="font-size: 0.75em"></wa-icon>
-        </a>
-      </wa-input>
-    </ui-panel>
-
-    <ui-panel v-model="ui.panel" value="elements" title="Elements" :step="1">
-      <ui-slider label="Rounding" :default-value="1" :min="0" :max="2" :step="0.125" format="{value}x" :model-value="computed.rounding" @update:model-value="value => theme.rounding = value">
-        <template #min>
-          <div class="corner" style="--border-radius: 0;"></div>
-        </template>
-        <template #max>
-          <div class="corner" style="--border-radius: var(--wa-border-radius-l);"></div>
-        </template>
-      </ui-slider>
-      <ui-slider label="Spacing" :default-value="1":min="0.5" :max="2" :step="0.125" format="{value}x" :model-value="computed.spacing" @update:model-value="value => theme.spacing = value">
-        <template #min>
-          <div class="spacing" style="--spacing: 0.5;"><div></div><div></div><div></div></div>
-        </template>
-        <template #max>
-          <div class="spacing" style="--spacing: 1.5;"><div></div><div></div><div></div></div>
-        </template>
-      </ui-slider>
-
-      <ui-slider label="Border thickness" :default-value="1" :min="0.5" :max="3" :step="0.5" format="{value}x" :model-value="computed.borderWidth" @update:model-value="value => theme.borderWidth = value">
-        <template #min>
-          <div class="borders" style="--border-width: 1px;"></div>
-        </template>
-        <template #max>
-          <div class="borders" style="--border-width: var(--wa-border-width-l);"></div>
-        </template>
-      </ui-slider>
-
-      <!--
-      <theme-card type="dimensionality" :theme="computed.dimensionality" title="Dimensionality" :subtitle="computed.dimensionality ? undefined : 'Flat'" size="small" :action="e => ui.panel = 'dimensionality'"></theme-card>
-      -->
-    </ui-panel>
-
-    <!--
-    <ui-panel v-model="ui.panel" value="dimensionality" title="Dimensionality" :step="2">
-      <template #title>
-        <label for="dimensionality-radio-group">Dimensionality</label>
-      </template>
-      <wa-radio-group id="dimensionality-radio-group" class="card-picker" v-model="theme.dimensionality">
-        <wa-radio value="" size="small" :aria-selected="!theme.dimensionality || theme.dimensionality === computed.base ? 'true' : null">
-          <theme-card type="dimensionality" :theme="computed.base"></theme-card>
-        </wa-radio>
-        <template v-for="(themeMeta, themeId) in themes">
-          <wa-radio v-if="themeId !== computed.base && themeMeta.dimension" :value="themeId" size="small" :aria-selected="theme.dimensionality === themeId ? 'true' : null">
-            <theme-card type="dimensionality" :theme="themeId"></theme-card>
-          </wa-radio>
-        </template>
-      </wa-radio-group>
-    </ui-panel>
-    -->
-
-    <ui-panel v-model="ui.panel" value="icon-family" title="Icon Family" :step="2">
-      <template #title>
-        <label for="icon-family-radio-group">Icon Family</label>
-      </template>
-      <wa-radio-group id="icon-family-radio-group" class="card-picker" v-model="theme.icon.family">
-          <wa-radio v-for="family of iconLibraries.default.family" :value="family" size="small" :aria-selected="computed.icon.family === family ? 'true' : null">
-            <icons-card type="family" vary="style" :family="family"  :library="computed.icon.library"></icons-card>
-          </wa-radio>
-      </wa-radio-group>
-    </ui-panel>
-
-    <ui-panel v-model="ui.panel" value="icon-style" title="Icon Style" :step="2">
-      <template #title>
-        <label for="icon-style-radio-group">Icon Style</label>
-      </template>
-      <wa-radio-group id="icon-style-radio-group" class="card-picker" v-model="theme.icon.style">
-          <wa-radio v-for="style of iconLibraries.default.style" :value="style" size="small" :aria-selected="computed.icon.style === style ? 'true' : null">
-            <icons-card type="style" :style="style" :defaults="computed.icon"></icons-card>
-          </wa-radio>
-      </wa-radio-group>
-    </ui-panel>
-  </ui-panel-container>
-
-  <div class="preview-container">
-    <wa-comparison position="80">
-      <iframe slot="before" class="preview" ref="previewInvert" :src="`{{ page.url }}../preview/${ui.preview}/${urlParamsInvert}`"></iframe>
-      <iframe slot="after" class="preview" ref="preview" :src="`{{ page.url }}../preview/${ui.preview}/${urlParams}`"></iframe>
-    </wa-comparison>
-  </div>
-</wa-page>
diff --git a/packages/webawesome/docs/docs/themes/edit/style.css b/packages/webawesome/docs/docs/themes/edit/style.css
deleted file mode 100644
index 9e0504cf0..000000000
--- a/packages/webawesome/docs/docs/themes/edit/style.css
+++ /dev/null
@@ -1,240 +0,0 @@
-@import url('/assets/styles/theme-icons.css');
-@import url('/assets/vue/components/panel.css');
-@import url('/assets/vue/components/scrollable.css');
-@import url('/assets/vue/components/ui-slider.css');
-:root {
-  --ui-border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
-}
-
-html,
-body {
-  min-height: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-}
-
-.sidebar {
-  max-width: 22rem;
-}
-
-wa-card {
-  .page-name {
-    display: flex;
-    gap: var(--wa-space-xs);
-  }
-}
-
-wa-page > header {
-  flex: 1;
-  padding-block: var(--wa-space-s);
-
-  .title {
-    display: flex;
-    margin: 0 auto;
-    gap: var(--wa-space-xs);
-    align-items: center;
-    text-indent: 4lh;
-
-    .editable-text {
-      text-indent: 0;
-    }
-
-    h1 {
-      font-size: var(--wa-font-size-l);
-      margin: 0;
-    }
-
-    wa-button {
-      transition: var(--wa-transition-slow);
-    }
-
-    &:not(:hover, :focus-within, :has(input)) wa-button {
-      opacity: 0;
-    }
-  }
-
-  &::part(menu) {
-    overflow: initial;
-  }
-}
-
-.preview-header {
-  padding-block: var(--wa-space-s) 0;
-
-  wa-radio-group {
-    margin-left: auto;
-
-    &::part(form-control) {
-      display: flex;
-      gap: var(--wa-space-xs);
-      align-items: center;
-    }
-  }
-}
-
-.preview-container {
-  padding: var(--wa-space-m);
-  display: grid;
-  height: 100%;
-  max-inline-size: 140ch;
-  margin: auto;
-
-  wa-comparison {
-    height: 100%;
-
-    &::part(base),
-    &::part(before),
-    &::part(after) {
-      height: 100%;
-    }
-  }
-
-  iframe.preview {
-    border-radius: var(--wa-border-radius-m);
-    border: var(--ui-border);
-    width: 100%;
-    height: 100%;
-  }
-}
-
-wa-tab::part(base) {
-  padding-bottom: var(--wa-space-xs);
-}
-
-wa-tab-panel:empty {
-  --padding: 0;
-}
-
-wa-radio-group.card-picker {
-  &::part(form-control-input) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
-    gap: var(--wa-space-l);
-  }
-
-  wa-radio {
-    display: flex;
-    margin: 0 !important;
-  }
-}
-
-.panel-content {
-  &:is(.panel[data-value='styles'] *) {
-    gap: var(--wa-space-l);
-  }
-
-  > wa-divider {
-    --spacing: 0;
-  }
-
-  > wa-callout {
-    margin-bottom: 0;
-
-    &[size='small'][variant='danger'] {
-      font-weight: var(--wa-font-weight-semibold);
-    }
-  }
-
-  > footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .next {
-      margin-inline-start: auto;
-    }
-  }
-}
-
-.panel wa-card {
-  --spacing: var(--wa-space-s);
-  position: relative;
-
-  .coming-soon {
-    position: absolute;
-    top: calc(-1 * var(--wa-space-2xs));
-    left: 50%;
-    translate: -50% 0;
-  }
-}
-
-wa-card wa-icon.angle-right {
-  margin-inline-start: auto;
-  align-self: center;
-  font-size: var(--wa-font-size-l);
-  color: var(--wa-color-text-quiet);
-}
-
-.dimensionality-card {
-  .page-name .wa-caption-m {
-    display: none;
-  }
-}
-
-.ui-slider {
-  .corner,
-  .borders,
-  .spacing {
-    aspect-ratio: 1;
-    width: max(var(--wa-font-size-l), var(--wa-border-radius-l) * 1.25);
-  }
-
-  .corner,
-  .borders {
-    --border-color: var(--wa-color-border-normal);
-    background-color: var(--wa-color-fill-quiet);
-    border-color: var(--border-color, var(--wa-color-border-normal));
-    border-style: solid;
-    border-width: var(--border-width, var(--wa-border-width-m));
-
-    &:is(wa-button:hover *) {
-      background-color: var(--wa-color-fill-normal);
-    }
-  }
-
-  .corner {
-    border-bottom: none;
-    border-left: none;
-    border-top-right-radius: var(--border-radius);
-  }
-
-  .spacing {
-    display: grid;
-
-    grid-template-columns: 3fr 2fr;
-    gap: calc(2px + var(--spacing) * 2px);
-    border-radius: 2px;
-
-    div {
-      padding: calc(2px + var(--spacing) * 1px);
-      border-radius: inherit;
-      background-color: var(--wa-color-border-quiet);
-    }
-
-    div:nth-child(3) {
-      grid-column: 2;
-      grid-row: 1 / 3;
-    }
-  }
-
-  &:hover,
-  &:focus-within {
-    .corner,
-    .borders {
-      --border-color: var(--wa-color-brand);
-    }
-
-    .spacing {
-      background-color: lab(from var(--wa-color-brand) l a b / 10%);
-
-      &:is(wa-button:hover *) {
-        background-color: lab(from var(--wa-color-brand) l a b / 15%);
-
-        div {
-          background-color: var(--wa-color-border-normal);
-        }
-      }
-    }
-  }
-}
diff --git a/packages/webawesome/docs/docs/themes/index.njk b/packages/webawesome/docs/docs/themes/index.njk
deleted file mode 100644
index 71331c483..000000000
--- a/packages/webawesome/docs/docs/themes/index.njk
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: Themes
-description: Themes are collections of design tokens that thread through every Web Awesome component and pattern.
-  Themes play a crucial role in [customizing Web Awesome](/docs/customizing).
-layout: overview
-override:tags: []
-forTag: theme
-categories:
-  tags: [other, pro]
-  other: Free
----
-
-<div class="max-line-length">
-{% markdown %}
-
-## What's a Theme?
-
-A theme is a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), also called "design tokens," that cover a range of styles from colors to transitions. We use these tokens throughout Web Awesome components for a cohesive look and feel. Our [Design Tokens section](/docs/tokens/) document these styles so that you can use them freely throughout your project and customize them as needed.
-
-Themes are scoped to unique classes, such as `wa-theme-default` or `wa-theme-classic`.
-Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions.
-Please note that if you import multiple themes, the last one will be the default that will apply if no class is used.
-
-Each theme may also include both light and dark color schemes with the classes `wa-light` and `wa-dark`.
-You can use these classes to apply a specific color scheme to an entire page or just a section.
-You can also use `wa-invert` which behaves like `wa-dark` in light mode, and like `wa-light` in dark mode.
-In pre-made themes, we use a light color scheme by default.
-
-
-Additionally, styles may be scoped to the `:root` selector to be activated automatically.
-For pre-made themes, *all* custom properties are scoped to `:root`, the theme class, and `wa-light`.
-
-Finally, we scope themes to `:host` to ensure the styles are applied to the shadow roots of custom elements.
-
-For example, the default theme is set up like this:
-
-```css
-:where(:root),
-:host,
-.wa-theme-default,
-.wa-light,
-.wa-dark .wa-invert {
-  /* all CSS custom properties for color, typography, space, etc. */
-}
-
-.wa-dark,
-.wa-invert {
-  /* subset of CSS custom properties for a dark color scheme */
-}
-```
-
-## Using Themes
-
-You can import pre-made themes from the Web Awesome CDN.
-Refer to each theme’s page for copyable code snippets.
-
-{% endmarkdown %}
-</div>
diff --git a/packages/webawesome/docs/docs/themes/preview/app.css b/packages/webawesome/docs/docs/themes/preview/app.css
deleted file mode 100644
index 3c4a6e4cf..000000000
--- a/packages/webawesome/docs/docs/themes/preview/app.css
+++ /dev/null
@@ -1,39 +0,0 @@
-body:has(> .showcase-examples-wrapper) {
-  background-color: var(--wa-color-surface-lowered);
-}
-
-.showcase-examples-wrapper {
-  container-type: inline-size;
-  inline-size: 100%;
-  min-block-size: 100%;
-  box-sizing: border-box;
-  padding: var(--wa-space-xl);
-  background-color: var(--wa-color-surface-lowered);
-}
-
-.showcase-examples {
-  column-count: 1;
-  column-gap: var(--wa-space-xl);
-
-  & wa-card {
-    display: inline-block;
-    width: 100%;
-
-    &:has(+ wa-card) {
-      margin-block-end: var(--wa-space-xl);
-    }
-  }
-
-  @container (width > 500px) {
-    column-count: 2;
-  }
-
-  @container (width > 750px) {
-    column-count: 3;
-  }
-
-  @container (width > 950px) {
-    column-count: auto;
-    column-width: 32ch;
-  }
-}
diff --git a/packages/webawesome/docs/docs/themes/preview/app.njk b/packages/webawesome/docs/docs/themes/preview/app.njk
deleted file mode 100644
index c005826a3..000000000
--- a/packages/webawesome/docs/docs/themes/preview/app.njk
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: App-focused theme preview
-layout: blank
-eleventyExcludeFromCollections: true
-override:tags: []
-noTheme: true
----
-
-{% block head %}
-<link href="{{ page.url }}../app.css" rel="stylesheet" />
-<script type="module" src="{{ page.url }}../preview.js"></script>
-{% endblock %}
-
-<style>
-.showcase-examples-wrapper {
-  padding: var(--wa-space-3xl);
-}
-</style>
-
-{% include 'theme-showcase.njk' %}
diff --git a/packages/webawesome/docs/docs/themes/preview/content.css b/packages/webawesome/docs/docs/themes/preview/content.css
deleted file mode 100644
index ea87fee04..000000000
--- a/packages/webawesome/docs/docs/themes/preview/content.css
+++ /dev/null
@@ -1,342 +0,0 @@
-html {
-  background: var(--wa-color-surface-default);
-  background-attachment: fixed;
-  background-image: radial-gradient(var(--wa-color-surface-lowered) 1.5px, transparent 0);
-  background-size: 28px 28px;
-  background-position: -19px -19px;
-  min-height: 100vh;
-}
-
-/* page layout */
-.content {
-  max-width: none;
-  margin: 0;
-}
-
-.preview-container {
-  background: var(--wa-color-surface-lowered);
-  container-type: inline-size;
-  padding: 0;
-  max-inline-size: 1400px;
-  margin-inline: auto;
-  border: var(--wa-border-width-s) var(--wa-color-neutral-border-quiet) var(--wa-border-style);
-  overflow: clip;
-}
-
-.overlap {
-  position: relative;
-  color: var(--wa-color-text-normal);
-  z-index: 1;
-}
-
-.grid-12-col {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  gap: var(--wa-space-m);
-}
-
-/* general and utility */
-.strata {
-  padding: var(--wa-space-3xl) 7%;
-}
-
-pre wa-copy-button {
-  display: none;
-}
-
-wa-input::part(input) {
-  width: 100%;
-}
-
-.square-frame,
-.landscape-frame {
-  flex: 1 1 auto;
-  overflow: hidden;
-
-  &:not(wa-card *) {
-    border-radius: calc(var(--wa-border-radius-l) - var(--wa-panel-border-width));
-  }
-
-  & > img {
-    block-size: 100%;
-    inline-size: 100%;
-    object-fit: cover;
-  }
-}
-
-.square-frame {
-  aspect-ratio: 1 / 1;
-}
-
-.landscape-frame {
-  aspect-ratio: 16 / 9;
-}
-
-/* strata - hero/header */
-.project-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.project-header .title {
-  grid-column-end: col-end;
-}
-
-.project-header wa-button {
-  color: inherit;
-  font-size: var(--wa-font-size-l);
-
-  &:not(:last-of-type) {
-    margin-right: var(--wa-space-m);
-  }
-}
-
-/* strata product cards */
-
-.products wa-card {
-  height: 100%;
-}
-
-.products wa-card::part(body) {
-  flex-grow: 1;
-}
-
-.product-card {
-  grid-column: span 12;
-  position: relative;
-}
-
-.product-card {
-  max-width: 45ch;
-  margin: 0 auto;
-}
-
-.product-card .title-rating {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  flex-wrap: wrap;
-  margin-bottom: var(--wa-flow-spacing);
-}
-
-.product-card .title {
-  margin: 0;
-}
-
-.product-card p:last-of-type {
-  margin-bottom: 0;
-}
-
-/* strata - blog post */
-
-.blog .column-post-header {
-  grid-column: span 12;
-  position: relative;
-}
-
-.blog .post-body {
-  grid-column: span 12;
-}
-
-.blog .post-header {
-  position: sticky;
-  top: 1rem;
-}
-
-.blog .post-title {
-  margin-top: 0;
-  line-height: 1.2;
-}
-
-.blog .authors {
-  margin: var(--wa-space-2xl) 0;
-}
-
-.blog .authors a {
-  display: flex;
-  align-items: center;
-  gap: var(--wa-space-s);
-}
-
-/* strata - message composer */
-
-.message-composer .card-header [slot='header'] {
-  display: flex;
-  align-items: center;
-}
-
-.message-composer .card-footer [slot='footer'] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.message-composer wa-card p {
-  margin-bottom: 0;
-}
-
-.message-composer .card-footer [slot='footer'] .tools {
-  display: flex;
-  align-items: center;
-}
-
-.message-composer .grouped-buttons:not(:first-of-type) {
-  padding-inline-start: var(--wa-space-m);
-}
-
-.message-composer .grouped-buttons:not(:last-of-type) {
-  padding-inline-end: var(--wa-space-m);
-  border-right: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
-}
-
-.message-composer wa-card::part(header) {
-  border-start-start-radius: calc(var(--border-radius) - var(--border-width));
-  border-start-end-radius: calc(var(--border-radius) - var(--border-width));
-}
-
-.message-composer wa-card::part(footer) {
-  border-end-start-radius: calc(var(--border-radius) - var(--border-width));
-  border-end-end-radius: calc(var(--border-radius) - var(--border-width));
-}
-
-/* strata - product detail */
-
-.product-detail .product-detail-images {
-  grid-column: span 12;
-}
-
-.product-detail .product-detail-info {
-  grid-column: span 12;
-}
-
-.product-detail wa-carousel {
-  max-width: 350px;
-  margin: 0 auto;
-}
-
-.product-detail .title-rating {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.5rem;
-}
-
-.product-detail .price {
-  font-size: var(--wa-font-size-xl);
-}
-
-.product-detail .price-discounted {
-  text-decoration: line-through;
-  color: var(--wa-color-text-quiet);
-  margin-inline-end: var(--wa-space-m);
-}
-
-/* strata - support table */
-.support-table {
-  font-size: var(--wa-font-size-s);
-}
-
-.support-table th {
-  padding: var(--wa-space-l);
-}
-
-.support-table td {
-  padding: var(--wa-space-m) var(--wa-space-l);
-}
-
-.support-table .desc {
-  max-width: 30ch;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.support-table .excerpt {
-  color: var(--wa-color-text-quiet);
-}
-
-.support-table wa-avatar {
-  --size: var(--wa-font-size-2xl);
-}
-
-.support-table wa-card > * {
-  border-radius: calc(var(--border-radius) - var(--border-width));
-}
-
-/* strata - Checkout Form */
-.checkout-form .payment {
-  grid-column: span 12;
-  order: 2;
-}
-
-.checkout-form .order {
-  grid-column: span 12;
-}
-
-.checkout-form .payment wa-input,
-.checkout-form .payment wa-switch {
-  margin-bottom: var(--wa-space-l);
-}
-
-.checkout-form .order-item {
-  display: grid;
-  gap: var(--wa-space-xl);
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--wa-space-xl);
-}
-
-.order-item .square-frame {
-  grid-column: span 2;
-}
-
-.order-item .name {
-  grid-column: span 5;
-}
-
-.order-item .finish {
-  display: block;
-}
-
-.order-item wa-input {
-  grid-column: span 3;
-  margin: 0;
-}
-
-.order-item .price {
-  grid-column: span 2;
-}
-
-/* responsive */
-@container preview (min-width: 1040px) {
-  .product-card {
-    grid-column: span 4;
-  }
-
-  .blog .column-post-header {
-    grid-column: 1 / 5;
-  }
-
-  .blog .post-body {
-    grid-column: 5 / 13;
-  }
-
-  .product-detail .product-detail-images {
-    grid-column: 1 / 6;
-  }
-
-  .product-detail .product-detail-info {
-    grid-column: 7 / 13;
-  }
-
-  .checkout-form .payment {
-    grid-column: 1 / 6;
-    order: 1;
-  }
-
-  .checkout-form .order {
-    grid-column: 7 / 13;
-    order: 2;
-  }
-}
diff --git a/packages/webawesome/docs/docs/themes/preview/content.njk b/packages/webawesome/docs/docs/themes/preview/content.njk
deleted file mode 100644
index 52955824c..000000000
--- a/packages/webawesome/docs/docs/themes/preview/content.njk
+++ /dev/null
@@ -1,147 +0,0 @@
----
-title: Content-focused theme preview
-layout: blank
-eleventyExcludeFromCollections: true
-override:tags: []
-noTheme: true
----
-
-{% block head %}
-<link href="{{ page.url }}../content.css" rel="stylesheet" />
-<script type="module" src="{{ page.url }}../preview.js"></script>
-{% endblock %}
-
-
-<div class="preview-container">
-  <section class="overlap">
-    <div class="hero-background"></div>
-    <header class="strata project-header">
-      <h1 style="display: flex; align-items: center; margin: 0;">
-        <wa-icon id="project-logo" name="shapes"></wa-icon>
-        <span id="project-name" style="margin-inline-start: var(--wa-space-l);">Project Name</span>
-      </h1>
-      <div>
-        <wa-button appearance="plain">
-          <wa-icon name="magnifying-glass" label="Search"></wa-icon>
-        </wa-button>
-        <wa-button appearance="plain">
-          <wa-icon name="user" label="Account"></wa-icon>
-        </wa-button>
-        <wa-button appearance="plain">
-          <wa-icon name="bag-shopping" label="Your Basket"></wa-icon>
-        </wa-button>
-      </div>
-    </header>
-    <section class="strata hero">
-      <div class="title">
-        <h1 class="hero-title">What you know you can't explain, but you feel it.</h1>
-        <wa-button variant="brand" class="hero-cta">
-          <wa-icon slot="prefix" name="arrow-down"></wa-icon>
-          Free Your Mind
-        </wa-button>
-      </div>
-    </section>
-    <section class="strata products grid-12-col">
-      <wa-card class="card-image product-card">
-        <wa-badge variant="brand" class="badge-stock">New</wa-badge>
-        <div slot="media" class="landscape-frame">
-          <img id="product-1" src="/assets/images/themer/default/morpheus.jpg" alt="" />
-        </div>
-        <div class="title-rating">
-          <h2 class="title">Morpheus</h2>
-          <wa-rating label="Rating" value="4" readonly></wa-rating>
-        </div>
-        <div class="description">
-          <p>I see it in your eyes. You have the look of a man who accepts what he sees because he is expecting to wake up. Ironically, that's not far from the truth.</p>
-        </div>
-        <div slot="footer">
-          <wa-button size="small">
-            <wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
-            Add to Cart
-          </wa-button>
-          <wa-button size="small" appearance="outline">
-            <wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
-            Save
-          </wa-button>
-        </div>
-      </wa-card>
-      <wa-card class="card-image product-card">
-        <wa-badge variant="warning" class="badge-stock">Low Stock</wa-badge>
-        <div slot="media" class="landscape-frame">
-          <img id="product-2" src="/assets/images/themer/default/seraph.jpg" alt="" />
-        </div>
-        <div class="title-rating">
-          <h2 class="title">Seraph</h2>
-          <wa-rating label="Rating" value="5" readonly></wa-rating>
-        </div>
-        <div class="description">
-          <p>The Oracle has many enemies, I had to be sure. You do not truly know someone until you fight them.</p>
-        </div>
-        <div slot="footer">
-          <wa-button size="small">
-            <wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
-            Add to Cart
-          </wa-button>
-          <wa-button size="small" appearance="outline">
-            <wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
-            Save
-          </wa-button>
-        </div>
-      </wa-card>
-      <wa-card class="card-image product-card">
-        <div slot="media" class="landscape-frame">
-          <img id="product-3" src="/assets/images/themer/default/keymaker.jpg" alt="" />
-        </div>
-        <div class="title-rating">
-          <h2 class="title">Keymaker</h2>
-          <wa-rating label="Rating" value="3" readonly></wa-rating>
-        </div>
-        <div class="description">
-          <p>Only the One can open the door. And only during that window can that door be opened.</p>
-        </div>
-        <div slot="footer">
-          <wa-button size="small">
-            <wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
-            Add to Cart
-          </wa-button>
-          <wa-button size="small" appearance="outline">
-            <wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
-            Save
-          </wa-button>
-        </div>
-      </wa-card>
-    </section>
-    <section class="strata blog grid-12-col">
-      <div class="column-post-header">
-        <div class="post-header">
-          <h1 class="post-title">Simulacra &amp; Simulation</h1>
-          <div class="post-meta">
-            <div class="authors">
-              <a href="">
-                <wa-avatar image="/assets/images/themer/avatar-baudrillard.jpg" label="Jean Baudrillard" shape="rounded"> </wa-avatar>
-                Jean Baudrillard
-              </a>
-            </div>
-            <div class="categories">
-              <a href=""><wa-tag size="small" variant="neutral">Action</wa-tag></a>
-              <a href=""><wa-tag size="small" variant="success">Dystopia</wa-tag></a>
-              <a href=""><wa-tag size="small" variant="warning">Sci-fi</wa-tag></a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="post-body">
-        <p>At an abandoned hotel, a police squad corners Trinity, who overpowers them with superhuman abilities. She flees, pursued by the police and a group of suited Agents capable of similar superhuman feats. She answers a ringing public telephone and vanishes.</p>
-        <p>Fishburne stated that once he read the script, he did not understand why other people found it confusing. However, he doubted if the movie would ever be made, because it was "so smart." The Wachowskis instructed Fishburne to base his performance on the character Morpheus in Neil Gaiman's <a href=""><i>Sandman</i></a> comics.</p>
-        <h2>The New Biology of Machines</h2>
-        <p>The method used for creating these effects involved a technically expanded version of an old art photography technique known as time-slice photography, in which an array of cameras are placed around an object and triggered simultaneously. Each camera captures a still picture, contributing one frame to the video sequence, which creates the effect of "virtual camera movement"; the illusion of a viewpoint moving around an object that appears frozen in time.</p>
-        <div class="landscape-frame" style="margin: 0 0 1rem 0;" >
-          <img id="blog_feature" src="/assets/images/themer/default/blog_feature.jpg" alt="blog post example image" />
-        </div>
-        <p>For the "real world," the actors' hair was less styled, their clothing had more textile content, and the cinematographers used longer lenses to soften the backgrounds and emphasize the actors.</p>
-<pre class="codeblock">
-<code class="language-css">:host,
-.wa-theme-purple-power {
-  /* ... */
-}</code></pre>
-
diff --git a/packages/webawesome/docs/docs/themes/preview/preview.js b/packages/webawesome/docs/docs/themes/preview/preview.js
deleted file mode 100644
index 0f101ef22..000000000
--- a/packages/webawesome/docs/docs/themes/preview/preview.js
+++ /dev/null
@@ -1,276 +0,0 @@
-import { allHues } from '/assets/data/index.js';
-import palettes from '/assets/data/palettes.js';
-import themes from '/assets/data/themes.js';
-import { getPath, themeConfig, themeDefaults, themeParams } from '/assets/data/theming.js';
-import Permalink from '/assets/scripts/permalink.js';
-import { getThemeCode } from '/assets/scripts/tweak/code.js';
-import { deepClone, deepEach, deepGet, deepMerge } from '/assets/scripts/util/deep.js';
-import { domChange } from '/assets/scripts/util/dom-change.js';
-
-const themeIds = Object.keys(themes);
-const paletteIds = Object.keys(palettes);
-let dummy;
-
-export const aspects = {};
-
-deepEach(themeConfig, (config, aspect, obj, path) => {
-  if (!config?.default) {
-    // We're not in a config object
-    return;
-  }
-
-  if (config.url) {
-    config.values ??= aspect === 'palette' ? paletteIds : aspect === 'brand' ? allHues : themeIds;
-    config.urls ??= config.values.map(id => config.url(id));
-    config.selector ??= `link[rel="stylesheet"]:is(${config.urls.map(url => `[href$="/${url}"]`).join(', ')})`;
-    config.getValue = RegExp(`/${config.url('([^\\\\]+)')}($|\\?|#)`);
-  } else {
-    let styleClass = aspect === 'palette' || aspect === 'brand' ? aspect : `theme-${aspect}`;
-    config.selector ??= `style.wa-${styleClass}`;
-  }
-});
-
-/**
- * @typedef {object} Theme
- * @property {string} base
- * @property {string} colors
- * @property {string} palette
- * @property {string} brand
- * @property {string} typography
- */
-export const theme = new EventTarget();
-
-// Read base theme from document
-// TODO read from non-URL aspects too
-for (let aspect of themeParams) {
-  let element = document.querySelector(themeConfig[aspect].selector);
-
-  if (element) {
-    let value = element.href.match(themeConfig[aspect].getValue)?.[1];
-    if (value) {
-      theme[aspect] = value;
-    }
-  }
-}
-
-export const documentTheme = { ...theme };
-
-if (location.search) {
-  let permalink = new Permalink();
-  // Apply any overrides from URL
-  let urlOverrides = permalink.toObject({
-    ignoreKeys: ['color-scheme'],
-    getPath,
-  });
-
-  updateTheme(urlOverrides, { silent: true });
-
-  let colorScheme = permalink.get('color-scheme');
-  if (colorScheme) {
-    document.body.classList.add('wa-' + colorScheme);
-  }
-}
-
-theme.base ??= 'default';
-
-let isSameOrigin = false;
-try {
-  isSameOrigin = Boolean(parent.document);
-} catch (e) {}
-
-if (isSameOrigin) {
-  // We’re in the same origin as the parent, so let’s be proactive about updating the preview.
-  // For third-party websites, we wait until a message is sent from the parent
-  // to avoid messing up the site for visitors
-  updatePreview({ immediate: true });
-}
-
-window.addEventListener('message', event => {
-  if (!event.data) {
-    return;
-  }
-
-  let { type, theme, id } = event.data;
-
-  if (type === 'updatePreview') {
-    updatePreview({ theme, id });
-  }
-});
-
-/**
- * Returns a theme object to be fed to `getThemeCode()`,
- * i.e. with empties for aspects that are set to their default values, and a resolved base
- * Does NOT update `theme`, you need to call `updateTheme()` for that.
- * @param {object} newTheme
- * @returns {object}
- */
-export function resolveTheme(newTheme) {
-  let ret = deepClone(theme);
-  ret = deepMerge(ret, newTheme, { emptyValues: [undefined, ''] });
-
-  deepEach(newTheme, (value, key, parent, path) => {
-    if (typeof value === 'object') {
-      return;
-    }
-
-    let defaultValue = deepGet(themeDefaults, path)?.[key];
-    defaultValue = typeof defaultValue === 'function' ? defaultValue.call(parent, themes) : defaultValue;
-
-    if (!value || value === defaultValue) {
-      delete parent[key];
-    }
-  });
-
-  return ret;
-}
-
-/**
- * Update the current theme and fire a change event on it.
- * Does NOT update the visible preview, you must call `updatePreview()` for that.
- * @param {Theme} newTheme
- * @param {object} options
- * @param {boolean} options.silent - If true, don't fire the change event
- * @returns {Theme & {any: boolean}} - The changed properties
- */
-function updateTheme(newTheme, options = {}) {
-  let resolvedNewTheme = resolveTheme(newTheme);
-
-  let changed = {};
-  let anyChanged = false;
-
-  deepEach(theme, (value, key, parent, path) => {
-    if (typeof value === 'object') {
-      return;
-    }
-
-    let oldValue = deepGet(resolvedNewTheme, path)?.[key];
-    if (value !== oldValue) {
-      changed[key] = oldValue;
-      anyChanged = true;
-      parent[key] = value;
-    }
-  });
-
-  Object.defineProperty(changed, 'any', { value: anyChanged, enumerable: false });
-
-  if (anyChanged && !options.silent) {
-    theme.dispatchEvent(new CustomEvent('change', { detail: changed }));
-  }
-
-  return changed;
-}
-
-export async function updatePreview(options = {}) {
-  if (options.theme) {
-    updateTheme(options.theme, options);
-  }
-
-  let code = getThemeCode(theme, { id: options.id, attributes: ' class="wa-themer"' });
-
-  dummy ??= document.createElement('div');
-  dummy.innerHTML = code;
-
-  let allStylesheets = {};
-
-  let first, last;
-  let changeDom = false;
-
-  // DOM diffing of old and new <link> elements
-  // We want to keep any <link> elements that have not changed,
-  // and add any new ones near the old ones, in the right order
-  for (let aspect of themeParams) {
-    allStylesheets[aspect] ??= {};
-    let stylesheets = allStylesheets[aspect];
-
-    // TODO use old values in selector instead of any?
-    let selector = themeConfig[aspect].selector;
-    let oldStylesheets = [...document.querySelectorAll(selector)];
-    let newStylesheets = [...dummy.querySelectorAll(selector)];
-
-    let oldUrls = new Set(oldStylesheets.map(link => link.href));
-    let newUrls = new Set(newStylesheets.map(link => link.href));
-
-    stylesheets.elements = new Map();
-
-    for (let link of oldStylesheets) {
-      let action = !link.href || newUrls.has(link.href) ? 'keep' : 'remove';
-      stylesheets.elements.set(link, action);
-
-      if (action === 'remove') {
-        changeDom = true;
-      }
-    }
-
-    for (let link of newStylesheets) {
-      if (!link.href || !oldUrls.has(link.href)) {
-        stylesheets.elements.set(link, 'add');
-        changeDom = true;
-      }
-    }
-
-    first ??= oldStylesheets[0];
-    last = oldStylesheets.at(-1);
-  }
-
-  // Replace all themer <style> elements, we don't diff those since it does not involve URL loading
-
-  // First, remove old ones
-  for (let oldStyle of document.querySelectorAll('style.wa-themer, style.wa-theme')) {
-    oldStyle.remove();
-  }
-  // Then, insert new ones
-  for (let newStyle of dummy.querySelectorAll('style.wa-themer, style.wa-theme')) {
-    (last || document.head.lastElementChild).after(newStyle);
-  }
-
-  if (!changeDom) {
-    return;
-  }
-
-  let toLoad = [];
-  let toRemove = [];
-
-  await domChange(async () => {
-    let previous;
-
-    for (let aspect of themeParams) {
-      let stylesheets = allStylesheets[aspect];
-
-      for (let [link, action] of stylesheets.elements) {
-        if (action === 'remove') {
-          toRemove.push(link);
-        } else if (action === 'add') {
-          toLoad.push(link);
-
-          if (previous) {
-            previous.after(link);
-          } else if (first) {
-            first.before(link);
-          } else {
-            // If no first, it means we didn't find any theme stylesheets
-            // We may still have <style> elements though
-            let firstStyleElement = document.querySelector(
-              'style:is(.wa-themer, .wa-palette, [class^="wa-theme-"], [class*=" wa-theme-"])',
-            );
-            if (firstStyleElement) {
-              firstStyleElement.before(link);
-            } else {
-              document.head.append(link);
-            }
-          }
-        }
-
-        previous = link;
-      }
-    }
-
-    let promises = toLoad.map(link => new Promise(resolve => (link.onload = resolve)));
-
-    await Promise.all(promises);
-
-    // Remove old stylesheets once the new ones load
-    for (let link of toRemove) {
-      link.remove();
-    }
-  }, options);
-}
diff --git a/packages/webawesome/docs/docs/themes/remix.css b/packages/webawesome/docs/docs/themes/remix.css
deleted file mode 100644
index eae4d38b5..000000000
--- a/packages/webawesome/docs/docs/themes/remix.css
+++ /dev/null
@@ -1,74 +0,0 @@
-@import url('/assets/styles/ui.css');
-
-#mix_and_match {
-  margin-block-end: var(--wa-space-2xl);
-
-  &::part(content) {
-    display: flex;
-    gap: var(--wa-space-xl);
-    padding-block-start: var(--wa-space-m);
-  }
-
-  > [slot='summary'] {
-    margin: 0;
-
-    wa-icon:first-of-type {
-      vertical-align: -0.15em;
-      color: var(--wa-color-text-quiet);
-    }
-
-    wa-icon#what-is-remixing {
-      vertical-align: -0.1em;
-      font-size: var(--wa-font-size-s);
-      color: var(--wa-color-text-quiet);
-    }
-  }
-
-  wa-select {
-    &::part(label) {
-      margin-block-end: 0;
-    }
-  }
-
-  wa-select:has(> wa-option > wa-card) {
-    &::part(listbox) {
-      --column-width: 16ch;
-      --columns: 3;
-    }
-
-    &.theme-colors-select::part(listbox) {
-      --column-width: 15ch;
-      --columns: 4;
-    }
-
-    &:state(blank)::part(display-input) {
-      font-style: italic;
-      color: var(--wa-color-text-quiet);
-    }
-  }
-
-  .selected-swatch,
-  wa-select[name='brand'] wa-option::before {
-    content: '';
-    display: inline-block;
-    width: 1.2em;
-    aspect-ratio: 1;
-    flex: none;
-    border-radius: var(--wa-border-radius-m);
-    background: var(--color);
-    border: 1px solid var(--wa-color-surface-default);
-  }
-
-  wa-select[name='brand'] wa-option {
-    white-space: nowrap;
-
-    &::before {
-      width: 1em;
-      margin-inline: var(--wa-space-xs);
-    }
-
-    &::part(checked-icon) {
-      order: 2;
-    }
-  }
-}
diff --git a/packages/webawesome/docs/docs/themes/shoelace.md b/packages/webawesome/docs/docs/themes/shoelace.md
index 5799cdb8f..09cba343b 100644
--- a/packages/webawesome/docs/docs/themes/shoelace.md
+++ b/packages/webawesome/docs/docs/themes/shoelace.md
@@ -1,5 +1,7 @@
 ---
 title: Shoelace
 description: The original, familiar look you know and love from Shoelace.
-order: 0.1
+isPro: true
 ---
+
+TODO
diff --git a/packages/webawesome/docs/docs/themes/showcase.css b/packages/webawesome/docs/docs/themes/showcase.css
deleted file mode 100644
index 2b3cb3e34..000000000
--- a/packages/webawesome/docs/docs/themes/showcase.css
+++ /dev/null
@@ -1,67 +0,0 @@
-@import url('preview/app.css');
-
-html {
-  background: transparent;
-}
-
-html,
-body,
-.theme-showcase {
-  height: 100vh;
-  overflow: hidden;
-}
-
-#mix_and_match {
-  font-weight: var(--wa-font-weight-semibold);
-  color: var(--wa-color-text-quiet);
-  margin-block-end: var(--wa-space-xs);
-
-  html:not(.is-remixed) {
-    display: none;
-  }
-
-  wa-icon {
-    vertical-align: -0.15em;
-  }
-
-  > strong {
-    margin-inline-end: var(--wa-space-2xs);
-  }
-
-  wa-badge {
-    > a {
-      text-decoration: none;
-      color: inherit;
-    }
-  }
-}
-
-.theme-showcase {
-  isolation: isolate;
-  background-color: var(--wa-color-surface-lowered);
-  border-radius: var(--wa-border-radius-l);
-  overflow: hidden;
-
-  @media (width < 500px) {
-    flex-flow: column;
-  }
-
-  header {
-    min-width: min(25ch, 100vw);
-    align-self: center;
-    padding: var(--wa-space-xl);
-    box-sizing: border-box;
-
-    h1 {
-      margin-bottom: var(--wa-space-2xs);
-    }
-
-    wa-breadcrumb-item:not(:first-of-type, :last-of-type) {
-      display: none;
-    }
-
-    p:empty {
-      display: none;
-    }
-  }
-}
diff --git a/packages/webawesome/docs/docs/themes/themes.json b/packages/webawesome/docs/docs/themes/themes.json
deleted file mode 100644
index 35e61b030..000000000
--- a/packages/webawesome/docs/docs/themes/themes.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "layout": "theme.njk",
-  "wide": true,
-  "tags": ["themes", "theme"],
-  "brand": "blue",
-  "icon": "theme",
-  "eleventyComputed": {
-    "file": "styles/themes/{{ page.fileSlug }}.css"
-  }
-}
diff --git a/packages/webawesome/docs/docs/tokens/index.md b/packages/webawesome/docs/docs/tokens/index.md
new file mode 100644
index 000000000..18ee9b834
--- /dev/null
+++ b/packages/webawesome/docs/docs/tokens/index.md
@@ -0,0 +1,7 @@
+---
+title: Design Tokens
+description: These custom properties thread through all of Web Awesome's components, giving things a consistent look and feel.
+layout: docs
+---
+
+TODO
diff --git a/packages/webawesome/docs/docs/tokens/index.njk b/packages/webawesome/docs/docs/tokens/index.njk
deleted file mode 100644
index 578b6524f..000000000
--- a/packages/webawesome/docs/docs/tokens/index.njk
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Design Tokens
-description: A theme is a collection of predefined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel.
-layout: overview
-override:tags: []
-categories: {tags: true}
----
diff --git a/packages/webawesome/docs/docs/tokens/tokens.json b/packages/webawesome/docs/docs/tokens/tokens.json
deleted file mode 100644
index 07e8f60c3..000000000
--- a/packages/webawesome/docs/docs/tokens/tokens.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "layout": "page-outline.njk",
-  "tags": ["tokens"],
-  "eleventyComputed": {
-    "icon": "tokens/{{ page.fileSlug }}"
-  }
-}
diff --git a/packages/webawesome/docs/docs/utilities/align-items.md b/packages/webawesome/docs/docs/utilities/align-items.md
index 581c8d33c..48f78cd1f 100644
--- a/packages/webawesome/docs/docs/utilities/align-items.md
+++ b/packages/webawesome/docs/docs/utilities/align-items.md
@@ -1,7 +1,7 @@
 ---
 title: Align Items
 description: Align items utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
-tags: ["utilities", "layout"]
+layout: docs
 ---
 
 <style>
@@ -21,8 +21,8 @@ tags: ["utilities", "layout"]
 
 Web Awesome includes classes to set the `align-items` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/layout/cluster) and [stack](/docs/layout/stack), to align children in container on the container's cross axis.
 
-| Class Name          | `align-items` Value | Preview                                                                                                                            |
-| ------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| Class Name                | `align-items` Value | Preview                                                                                                                                  |
+| ------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
 | `wa-align-items-baseline` | `baseline`          | <div class="wa-cluster wa-align-items-baseline preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
 | `wa-align-items-center`   | `center`            | <div class="wa-cluster wa-align-items-center preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>   |
 | `wa-align-items-end`      | `flex-end`          | <div class="wa-cluster wa-align-items-end preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>      |
diff --git a/packages/webawesome/docs/docs/utilities/cluster.md b/packages/webawesome/docs/docs/utilities/cluster.md
index b17e34692..9b52aa8cf 100644
--- a/packages/webawesome/docs/docs/utilities/cluster.md
+++ b/packages/webawesome/docs/docs/utilities/cluster.md
@@ -1,9 +1,7 @@
 ---
 title: Cluster
 description: 'Use the `wa-cluster` class to arrange elements inline with even spacing, allowing items to wrap when space is limited.'
-tags: ["utilities", "layout"]
-layout: element
-icon: layout/cluster
+layout: docs
 ---
 
 <style>
@@ -86,6 +84,7 @@ Clusters are great for inline lists and aligning items of varying sizes.
 ## Align Items
 
 By default, items are centered in the block direction of the `wa-cluster` container. You can add any of the following [`wa-align-items-*`](/docs/style-utilities/align-items) classes to an element with `wa-cluster` to specify how items are aligned in the block direction:
+
 - `wa-align-items-start`
 - `wa-align-items-end`
 - `wa-align-items-center`
@@ -120,6 +119,7 @@ By default, items are centered in the block direction of the `wa-cluster` contai
 ## Gap
 
 By default, the gap between cluster items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/gap) classes to an element with `wa-cluster` to specify the gap between items:
+
 - `wa-gap-0`
 - `wa-gap-3xs`
 - `wa-gap-2xs`
diff --git a/packages/webawesome/docs/docs/utilities/color.md b/packages/webawesome/docs/docs/utilities/color.md
index 91513d416..71ad3e2c5 100644
--- a/packages/webawesome/docs/docs/utilities/color.md
+++ b/packages/webawesome/docs/docs/utilities/color.md
@@ -1,8 +1,7 @@
 ---
 title: Color Variants
 description: Color utilities allow you to apply the brand, neutral, success, warning, and danger colors from your theme to any element.
-icon: tokens/color
-file: styles/utilities/variants.css
+layout: docs
 ---
 
 Some Web Awesome components, like `<wa-button>`, allow you to change the color by using a `variant` attribute:
@@ -22,7 +21,7 @@ You can create the same effect on any element by using the color variant utility
 - `.wa-danger`
 
 Using these classes is a two-way handshake:
-they do not directly apply styles, but define generic color tokens modeled after our [Semantic Colors](/docs/tokens/color/#semantic-colors) but *without* the group identifier (`neutral`, `brand`, `success`, `warning`, `danger`), defaulting to `neutral`.
+they do not directly apply styles, but define generic color tokens modeled after our [Semantic Colors](/docs/tokens/color/#semantic-colors) but _without_ the group identifier (`neutral`, `brand`, `success`, `warning`, `danger`), defaulting to `neutral`.
 This means that styles can be written to respond to variants by using e.g. `--wa-color-fill-loud` instead of e.g. `--wa-color-brand-fill-loud`,
 and all of our [native styles](/docs/utilities/native/) do so (where it made sense).
 
@@ -38,10 +37,10 @@ This is all we need to do:
 
 <style>
   .callout {
-	background-color: var(--wa-color-fill-quiet);
-	border: 1px solid var(--wa-color-border-quiet);
-	color: var(--wa-color-on-quiet);
-	padding: var(--wa-space-m) var(--wa-space-l);
+    background-color: var(--wa-color-fill-quiet);
+    border: 1px solid var(--wa-color-border-quiet);
+    color: var(--wa-color-on-quiet);
+    padding: var(--wa-space-m) var(--wa-space-l);
   }
 </style>
 ```
diff --git a/packages/webawesome/docs/docs/utilities/flank.md b/packages/webawesome/docs/docs/utilities/flank.md
index a54b074b3..c81e15692 100644
--- a/packages/webawesome/docs/docs/utilities/flank.md
+++ b/packages/webawesome/docs/docs/utilities/flank.md
@@ -1,9 +1,7 @@
 ---
 title: Flank
 description: 'Use the `wa-flank` class to position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space.'
-tags: ["utilities", "layout"]
-layout: element
-icon: layout/flank
+layout: docs
 ---
 
 <style>
@@ -46,24 +44,42 @@ Flanks work especially well for asides, inputs with adjacent buttons, and rich d
 ```html {.example}
 <div class="wa-stack wa-gap-xl">
   <div class="wa-flank wa-align-items-start">
-    <wa-avatar image="https://images.unsplash.com/photo-1553284966-19b8815c7817?q=20" label="Gandalf's avatar"></wa-avatar>
+    <wa-avatar
+      image="https://images.unsplash.com/photo-1553284966-19b8815c7817?q=20"
+      label="Gandalf's avatar"
+    ></wa-avatar>
     <div class="wa-stack wa-gap-3xs">
       <strong>Gandalf</strong>
-      <p class="wa-body-s">All we have to decide is what to do with the time that is given to us. There are other forces at work in this world, Frodo, besides the will of evil.</p>
+      <p class="wa-body-s">
+        All we have to decide is what to do with the time that is given to us. There are other forces at work in this
+        world, Frodo, besides the will of evil.
+      </p>
     </div>
   </div>
   <div class="wa-flank wa-align-items-start">
-    <wa-avatar image="https://images.unsplash.com/photo-1542403764-c26462c4697e?q=20" label="Boromir's avatar"></wa-avatar>
+    <wa-avatar
+      image="https://images.unsplash.com/photo-1542403764-c26462c4697e?q=20"
+      label="Boromir's avatar"
+    ></wa-avatar>
     <div class="wa-stack wa-gap-3xs">
       <strong>Boromir</strong>
-      <p class="wa-body-s">One does not simply walk into Mordor. Its Black Gates are guarded by more than just Orcs. There is evil there that does not sleep, and the Great Eye is ever watchful.</p>
+      <p class="wa-body-s">
+        One does not simply walk into Mordor. Its Black Gates are guarded by more than just Orcs. There is evil there
+        that does not sleep, and the Great Eye is ever watchful.
+      </p>
     </div>
   </div>
   <div class="wa-flank wa-align-items-start">
-    <wa-avatar image="https://images.unsplash.com/photo-1518495973542-4542c06a5843?q=20" label="Galadriel's avatar"></wa-avatar>
+    <wa-avatar
+      image="https://images.unsplash.com/photo-1518495973542-4542c06a5843?q=20"
+      label="Galadriel's avatar"
+    ></wa-avatar>
     <div class="wa-stack wa-gap-3xs">
       <strong>Galadriel</strong>
-      <p class="wa-body-s">The world is changed. I feel it in the water. I feel it in the earth. I smell it in the air. Much that once was is lost, for none now live who remember it.</p>
+      <p class="wa-body-s">
+        The world is changed. I feel it in the water. I feel it in the earth. I smell it in the air. Much that once was
+        is lost, for none now live who remember it.
+      </p>
     </div>
   </div>
 </div>
@@ -121,6 +137,7 @@ The main content fills the remaining inline space of the container. By default,
 ## Align Items
 
 By default, items are centered in the block direction of the `wa-flank` container. You can add any of the following [`wa-align-items-*`](/docs/style-utilities/align-items) classes to an element with `wa-flank` to specify how items are aligned in the block direction:
+
 - `wa-align-items-start`
 - `wa-align-items-end`
 - `wa-align-items-center`
@@ -151,6 +168,7 @@ By default, items are centered in the block direction of the `wa-flank` containe
 ## Gap
 
 By default, the gap between flank items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/gap) classes to an element with `wa-flank` to specify the gap between items:
+
 - `wa-gap-0`
 - `wa-gap-3xs`
 - `wa-gap-2xs`
diff --git a/packages/webawesome/docs/docs/utilities/fouce.md b/packages/webawesome/docs/docs/utilities/fouce.md
index 05a17a265..fa822e187 100644
--- a/packages/webawesome/docs/docs/utilities/fouce.md
+++ b/packages/webawesome/docs/docs/utilities/fouce.md
@@ -1,9 +1,7 @@
 ---
 title: Reducing FOUCE
 description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
-file: styles/utilities/fouce.css
-icon: spinner
-snippet: .wa-cloak
+layout: docs
 ---
 
 Often, components are shown before their logic and styles have had a chance to load, also known as a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/).
@@ -32,4 +30,5 @@ import { preventTurboFouce } from '/dist/webawesome.js';
 
 preventTurboFouce();
 ```
+
 :::
diff --git a/packages/webawesome/docs/docs/utilities/frame.md b/packages/webawesome/docs/docs/utilities/frame.md
index adb2ce6d1..1adc27aab 100644
--- a/packages/webawesome/docs/docs/utilities/frame.md
+++ b/packages/webawesome/docs/docs/utilities/frame.md
@@ -1,9 +1,7 @@
 ---
 title: Frame
 description: 'Use the `wa-frame` class to create a responsive container with consistent proportions to enclose content.'
-tags: ["utilities", "layout"]
-layout: element
-icon: layout/frame
+layout: docs
 ---
 
 <style>
@@ -33,7 +31,7 @@ Frames are well-suited for images and image placeholders.
 ```html {.example}
 <div class="wa-flank" style="--flank-size: 8rem;">
   <div class="wa-frame wa-border-radius-m">
-    <img src="https://images.unsplash.com/photo-1523593288094-3ccfb6b2c192?q=20" alt=""/>
+    <img src="https://images.unsplash.com/photo-1523593288094-3ccfb6b2c192?q=20" alt="" />
   </div>
   <div class="wa-flank:end" style="--content-percentage: 70%">
     <div class="wa-stack wa-gap-xs">
@@ -141,6 +139,7 @@ Frames have a square aspect ratio by default. You can append `:square` (1 / 1),
 ## Border Radius
 
 Frames have a square border radius by default. You can add any of the following [`wa-border-radius-*`](/docs/style-utilities/border-radius) classes to an element with `wa-frame` to specify the border radius:
+
 - `wa-border-radius-s`
 - `wa-border-radius-m`
 - `wa-border-radius-l`
diff --git a/packages/webawesome/docs/docs/utilities/gap.md b/packages/webawesome/docs/docs/utilities/gap.md
index 7ac26c899..d369535ad 100644
--- a/packages/webawesome/docs/docs/utilities/gap.md
+++ b/packages/webawesome/docs/docs/utilities/gap.md
@@ -1,8 +1,7 @@
 ---
 title: Gap
 description: Gap utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
-tags: ["utilities", "layout"]
-file: styles/utilities/gap.css
+layout: docs
 ---
 
 <style>
@@ -31,4 +30,3 @@ Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of t
 | `wa-gap-xl`  | `--wa-space-xl`  | <div class="wa-cluster wa-gap-xl"><div class="preview-block"></div><div class="preview-block"></div></div>  |
 | `wa-gap-2xl` | `--wa-space-2xl` | <div class="wa-cluster wa-gap-2xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
 | `wa-gap-3xl` | `--wa-space-3xl` | <div class="wa-cluster wa-gap-3xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
-
diff --git a/packages/webawesome/docs/docs/utilities/grid.md b/packages/webawesome/docs/docs/utilities/grid.md
index 3b8d0b4d0..446023132 100644
--- a/packages/webawesome/docs/docs/utilities/grid.md
+++ b/packages/webawesome/docs/docs/utilities/grid.md
@@ -1,9 +1,7 @@
 ---
 title: Grid
 description: 'Use the `wa-grid` class to arrange elements into rows and columns that automatically adapt to the available space.'
-tags: ["utilities", "layout"]
-layout: element
-icon: layout/grid
+layout: docs
 ---
 
 <style>
@@ -171,6 +169,7 @@ By default, grid items will wrap when the grid's column size is less than `20ch`
 ## Gap
 
 By default, the gap between grid items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/gap) classes to an element with `wa-grid` to specify the gap between items:
+
 - `wa-gap-0`
 - `wa-gap-3xs`
 - `wa-gap-2xs`
diff --git a/packages/webawesome/docs/docs/utilities/index.njk b/packages/webawesome/docs/docs/utilities/index.md
similarity index 68%
rename from packages/webawesome/docs/docs/utilities/index.njk
rename to packages/webawesome/docs/docs/utilities/index.md
index cd165ed6b..73c85c76b 100644
--- a/packages/webawesome/docs/docs/utilities/index.njk
+++ b/packages/webawesome/docs/docs/utilities/index.md
@@ -1,13 +1,11 @@
 ---
 title: Style Utilities
-description: Style utilities are preset rules that let you efficiently customize styles for components and native elements alike.
+description:
+  Style utilities are preset rules that let you efficiently customize styles for components and native elements alike.
   See the [installation instructions](#installation) to use style utilities in your project.
-layout: overview
-categories: ["layout"]
-override:tags: []
+layout: docs
 ---
 
-{% markdown %}
 ## Installation
 
 To use all Web Awesome page styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
@@ -21,4 +19,3 @@ Or, to _only_ include utilities:
 ```html
 <link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
 ```
-{% endmarkdown %}
diff --git a/packages/webawesome/docs/docs/utilities/native.md b/packages/webawesome/docs/docs/utilities/native.md
index cbcdced13..8a411c578 100644
--- a/packages/webawesome/docs/docs/utilities/native.md
+++ b/packages/webawesome/docs/docs/utilities/native.md
@@ -4,8 +4,6 @@ description: Native styles apply your theme to native HTML elements so they matc
 layout: page-outline
 ---
 
-# Web Awesome Native Styles
-
 Web Awesome provides optional Native Styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit.
 
 ## Installation
@@ -42,9 +40,16 @@ Semantic heading elements with proper hierarchy and styling.
 Standard paragraph text with optimal spacing and readability.
 
 ```html {.example}
-<p>Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Amet mauris commodo quis imperdiet. Bibendum ut tristique et egestas quis ipsum suspendisse. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat.</p>
+<p>
+  Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Amet mauris commodo quis imperdiet. Bibendum
+  ut tristique et egestas quis ipsum suspendisse. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat.
+</p>
 
-<p>Cras pulvinar mattis nunc sed blandit libero. Facilisis magna etiam tempor orci. Scelerisque eleifend donec pretium vulputate sapien nec. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque.</p>
+<p>
+  Cras pulvinar mattis nunc sed blandit libero. Facilisis magna etiam tempor orci. Scelerisque eleifend donec pretium
+  vulputate sapien nec. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Mauris rhoncus aenean vel
+  elit scelerisque mauris pellentesque.
+</p>
 ```
 
 ### Blockquotes
@@ -53,7 +58,8 @@ Styled quotations that stand out from regular text.
 
 ```html {.example}
 <blockquote>
-  What is a Web year now, about three months? And when people can browse around, discover new things, and download them fast, when we all have agents - then Web years could slip by before human beings can notice.<br><br>
+  What is a Web year now, about three months? And when people can browse around, discover new things, and download them
+  fast, when we all have agents - then Web years could slip by before human beings can notice.<br /><br />
   — Tim Berners-Lee
 </blockquote>
 ```
@@ -65,7 +71,8 @@ Organized content in bulleted or numbered format with proper nesting support.
 ```html {.example}
 <ul>
   <li>List item 1</li>
-  <li>List item 2
+  <li>
+    List item 2
     <ul>
       <li>Subitem a</li>
       <li>Subitem b</li>
@@ -76,7 +83,8 @@ Organized content in bulleted or numbered format with proper nesting support.
 
 <ol>
   <li>List item 1</li>
-  <li>List item 2
+  <li>
+    List item 2
     <ol>
       <li>Subitem a</li>
       <li>Subitem b</li>
@@ -93,11 +101,20 @@ Term and definition pairs for glossaries and descriptions.
 ```html {.example}
 <dl>
   <dt>Definition 1</dt>
-  <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
+  <dd>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </dd>
   <dt>Definition 2</dt>
-  <dd>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
+  <dd>
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </dd>
   <dt>Definition 3</dt>
-  <dd>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</dd>
+  <dd>
+    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
+    eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+  </dd>
 </dl>
 ```
 
@@ -108,7 +125,10 @@ Collapsible content sections with expand/collapse functionality.
 ```html {.example}
 <details>
   <summary>Tincidunt nunc pulvinar</summary>
-  <p>Ut lectus arcu bibendum at varius. Convallis a cras semper auctor neque vitae. Odio pellentesque diam volutpat commodo sed egestas. Amet dictum sit amet justo donec enim diam vulputate ut.</p>
+  <p>
+    Ut lectus arcu bibendum at varius. Convallis a cras semper auctor neque vitae. Odio pellentesque diam volutpat
+    commodo sed egestas. Amet dictum sit amet justo donec enim diam vulputate ut.
+  </p>
 </details>
 ```
 
@@ -119,7 +139,7 @@ Modal dialog windows for alerts, confirmations, and overlays.
 ```html {.example}
 <dialog id="dialog-example">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-	<button type="button">Close</button>
+  <button type="button">Close</button>
 </dialog>
 
 <button>Open Dialog</button>
@@ -147,8 +167,12 @@ Various text formatting elements for emphasis and semantic meaning.
   <p><del>Deleted</del></p>
   <p><ins>Inserted</ins></p>
   <p><small>Small</small></p>
-  <p><span>Subscript <sub>Sub</sub></span></p>
-  <p><span>Superscript <sup>Sup</sup></span></p>
+  <p>
+    <span>Subscript <sub>Sub</sub></span>
+  </p>
+  <p>
+    <span>Superscript <sup>Sup</sup></span>
+  </p>
   <p><abbr title="Abbreviation">Abbr.</abbr></p>
   <p><mark>Highlighted</mark></p>
   <p><a href="#">Link text</a></p>
@@ -182,7 +206,7 @@ Visual indicators for task completion and loading states.
 
 ```html {.example}
 <progress value="40" max="100"></progress>
-<br>
+<br />
 <progress></progress>
 ```
 
@@ -192,7 +216,9 @@ Structured data presentation with clean styling and optional zebra striping.
 
 ```html {.example}
 <table>
-  <caption>I'm just a table</caption>
+  <caption>
+    I'm just a table
+  </caption>
   <thead>
     <tr>
       <th>Column 1</th>
@@ -234,7 +260,9 @@ You can use the `wa-zebra-rows` class to add alternating row colors to your tabl
 
 ```html {.example}
 <table class="wa-zebra-rows">
-  <caption>I'm just a table</caption>
+  <caption>
+    I'm just a table
+  </caption>
   <thead>
     <tr>
       <th>Column 1</th>
@@ -352,12 +380,12 @@ Use the `wa-pill` class to give buttons rounded edges.
 Multi-select form controls with checked, indeterminate, and disabled states.
 
 ```html {.example}
-<label><input type="checkbox" checked> Checked</label><br>
-<label><input type="checkbox" class="indeterminate"> Indeterminate</label><br>
-<label><input type="checkbox" disabled> Disabled</label>
+<label><input type="checkbox" checked /> Checked</label><br />
+<label><input type="checkbox" class="indeterminate" /> Indeterminate</label><br />
+<label><input type="checkbox" disabled /> Disabled</label>
 
 <script>
-  document.querySelector(".indeterminate").indeterminate = true;
+  document.querySelector('.indeterminate').indeterminate = true;
 </script>
 ```
 
@@ -369,15 +397,15 @@ You can wrap native radios in a flex container to give them a horizontal or vert
 
 ```html {.example}
 <div class="wa-cluster">
-  <label><input type="radio" name="b" value="1" checked> Option 1</label>
-  <label><input type="radio" name="b" value="2"> Option 2</label>
-  <label><input type="radio" name="b" value="3"> Option 3</label>
+  <label><input type="radio" name="b" value="1" checked /> Option 1</label>
+  <label><input type="radio" name="b" value="2" /> Option 2</label>
+  <label><input type="radio" name="b" value="3" /> Option 3</label>
 </div>
 
 <div class="wa-stack" style="margin-block-start: var(--wa-space-2xl);">
-  <label><input type="radio" name="g" value="1" checked> Option 1</label>
-  <label><input type="radio" name="g" value="2"> Option 2</label>
-  <label><input type="radio" name="g" value="3"> Option 3</label>
+  <label><input type="radio" name="g" value="1" checked /> Option 1</label>
+  <label><input type="radio" name="g" value="2" /> Option 2</label>
+  <label><input type="radio" name="g" value="3" /> Option 3</label>
 </div>
 ```
 
@@ -386,7 +414,8 @@ You can wrap native radios in a flex container to give them a horizontal or vert
 Dropdown menus for choosing from a list of options.
 
 ```html {.example}
-<label>Select
+<label
+  >Select
   <select id="select">
     <option value="option-1">Option 1</option>
     <option value="option-2">Option 2</option>
@@ -400,7 +429,7 @@ Dropdown menus for choosing from a list of options.
 Range inputs for selecting numeric values within a specified range.
 
 ```html {.example}
-<label>Select a value: <input type="range"></label>
+<label>Select a value: <input type="range" /></label>
 ```
 
 ### Text Fields
@@ -408,25 +437,25 @@ Range inputs for selecting numeric values within a specified range.
 Various input types for collecting user text and data.
 
 ```html {.example}
-<label>Text <input type="text" placeholder="placeholder"></label>
+<label>Text <input type="text" placeholder="placeholder" /></label>
 
-<label>Number <input type="number"></label>
+<label>Number <input type="number" /></label>
 
-<label>Password <input type="password" required></label>
+<label>Password <input type="password" required /></label>
 
-<label>Email <input type="email"></label>
+<label>Email <input type="email" /></label>
 
-<label>Search <input type="search"></label>
+<label>Search <input type="search" /></label>
 
-<label>Telephone <input type="tel"></label>
+<label>Telephone <input type="tel" /></label>
 
-<label>URL <input type="url"></label>
+<label>URL <input type="url" /></label>
 ```
 
 Add the `wa-pill` class to an `<input>` to make it pill-shaped.
 
 ```html {.example}
-<label>Input <input type="text" placeholder="placeholder" class="wa-pill"></label>
+<label>Input <input type="text" placeholder="placeholder" class="wa-pill" /></label>
 ```
 
 ### Color Pickers
@@ -434,7 +463,7 @@ Add the `wa-pill` class to an `<input>` to make it pill-shaped.
 Visual color selection interface with hex value input.
 
 ```html {.example}
-<label>Input (color) <input type="color" value="#ff0066"></label>
+<label>Input (color) <input type="color" value="#ff0066" /></label>
 ```
 
 ### Date & Time Pickers
@@ -442,11 +471,11 @@ Visual color selection interface with hex value input.
 Specialized inputs for selecting dates, times, and datetime values.
 
 ```html {.example}
-<label>Input (datetime-local) <input type="datetime-local"></label>
+<label>Input (datetime-local) <input type="datetime-local" /></label>
 
-<label>Input (date) <input type="date"></label>
+<label>Input (date) <input type="date" /></label>
 
-<label>Input (time) <input type="time"></label>
+<label>Input (time) <input type="time" /></label>
 ```
 
 ### Textareas
@@ -457,11 +486,12 @@ Multi-line text input fields for longer content.
 <label>Textarea <textarea placeholder="Type something"></textarea></label>
 ```
 
-### Fieldsets 
+### Fieldsets
 
 ```html {.example}
 <fieldset>
   <legend>Legend</legend>
-  Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Tincidunt id aliquet risus feugiat in ante. Ac turpis egestas integer eget aliquet nibh praesent tristique magna.
+  Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Tincidunt id aliquet risus feugiat in ante. Ac turpis egestas
+  integer eget aliquet nibh praesent tristique magna.
 </fieldset>
-```
\ No newline at end of file
+```
diff --git a/packages/webawesome/docs/docs/utilities/rounding.md b/packages/webawesome/docs/docs/utilities/rounding.md
index cbf4eb9c8..78e9c3b76 100644
--- a/packages/webawesome/docs/docs/utilities/rounding.md
+++ b/packages/webawesome/docs/docs/utilities/rounding.md
@@ -1,7 +1,7 @@
 ---
 title: Rounding Utilities
 description: Border radius utilities set an element's border radius property.
-tags: ["utilities"]
+layout: docs
 ---
 
 <style>
@@ -17,10 +17,9 @@ Each class corresponds to one of the [`--wa-border-radius-*`](/docs/tokens/borde
 
 | Class Name                | `border-radius` Value       | Preview                                                                                 |
 | ------------------------- | --------------------------- | --------------------------------------------------------------------------------------- |
-| `wa-border-radius-s`     | `--wa-border-radius-s`     | <div class="preview-block" style="border-radius: var(--wa-border-radius-s)"></div>     |
+| `wa-border-radius-s`      | `--wa-border-radius-s`      | <div class="preview-block" style="border-radius: var(--wa-border-radius-s)"></div>      |
 | `wa-border-radius-m`      | `--wa-border-radius-m`      | <div class="preview-block" style="border-radius: var(--wa-border-radius-m)"></div>      |
 | `wa-border-radius-l`      | `--wa-border-radius-l`      | <div class="preview-block" style="border-radius: var(--wa-border-radius-l)"></div>      |
 | `wa-border-radius-pill`   | `--wa-border-radius-pill`   | <div class="preview-block" style="border-radius: var(--wa-border-radius-pill)"></div>   |
 | `wa-border-radius-circle` | `--wa-border-radius-circle` | <div class="preview-block" style="border-radius: var(--wa-border-radius-circle)"></div> |
 | `wa-border-radius-square` | `--wa-border-radius-square` | <div class="preview-block" style="border-radius: var(--wa-border-radius-square)"></div> |
-
diff --git a/packages/webawesome/docs/docs/utilities/split.md b/packages/webawesome/docs/docs/utilities/split.md
index a71d05c57..9dfb76934 100644
--- a/packages/webawesome/docs/docs/utilities/split.md
+++ b/packages/webawesome/docs/docs/utilities/split.md
@@ -1,9 +1,7 @@
 ---
 title: Split
 description: 'Use the `wa-split` class to distribute two or more items evenly across available space, either in a row or a column.'
-tags: ["utilities", "layout"]
-layout: element
-icon: layout/split
+layout: docs
 ---
 
 <style>
@@ -53,8 +51,7 @@ Splits are especially helpful for navigation, header, and footer layouts.
       </wa-button>
     </div>
   </div>
-  <div class="placeholder">
-  </div>
+  <div class="placeholder"></div>
 </div>
 
 <style>
@@ -76,8 +73,7 @@ Splits are especially helpful for navigation, header, and footer layouts.
       <wa-button appearance="outlined">Log In</wa-button>
     </div>
   </div>
-  <div class="placeholder">
-  </div>
+  <div class="placeholder"></div>
 </div>
 
 <style>
@@ -110,6 +106,7 @@ Items can be split across a row or a column by appending `:row` or `:column` to
 ## Align Items
 
 By default, items are centered on the cross axis of the `wa-split` container. You can add any of the following [`wa-align-items-*`](/docs/style-utilities/align-items) classes to an element with `wa-split` to specify how items are aligned:
+
 - `wa-align-items-start`
 - `wa-align-items-end`
 - `wa-align-items-center`
@@ -142,6 +139,7 @@ These modifiers specify how items are aligned in the block direction for `wa-spl
 ## Gap
 
 A split's gap determines how close items can be before they wrap. By default, the gap between split items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/gap) classes to an element with `wa-split` to specify the gap between items:
+
 - `wa-gap-0`
 - `wa-gap-3xs`
 - `wa-gap-2xs`
diff --git a/packages/webawesome/docs/docs/utilities/stack.md b/packages/webawesome/docs/docs/utilities/stack.md
index 928e1aa3d..b1d646f35 100644
--- a/packages/webawesome/docs/docs/utilities/stack.md
+++ b/packages/webawesome/docs/docs/utilities/stack.md
@@ -1,9 +1,7 @@
 ---
 title: Stack
 description: 'Use `wa-stack` to arrange elements in the block direction with even spacing.'
-tags: ["utilities", "layout"]
-icon: layout/stack
-layout: element
+layout: docs
 ---
 
 <style>
@@ -49,14 +47,22 @@ Stacks are well suited for forms, text, and ensuring consistent spacing between
 ```html {.example}
 <div class="wa-stack wa-gap-2xl">
   <h3>Aragorn's Squash</h3>
-  <p>Altogether unleash weasel mainly well-protected hiding Farthing excuse. Falling pits oil em Hasufel levels weight rides vagabonds? Gamgee hard-won thunder merrier forests treasury. Past birthday lasts lowly there'd woe Woodland pa sun's slaying most handling.</p>
-  <p>Even the smallest person can change the course of the future. They tempted completely other caves cloven wisest draught scrumptious cook Undómiel friends. Dory crunchy huge sleepless. Unmade took nerves liquor defeated Arathorn.</p>
+  <p>
+    Altogether unleash weasel mainly well-protected hiding Farthing excuse. Falling pits oil em Hasufel levels weight
+    rides vagabonds? Gamgee hard-won thunder merrier forests treasury. Past birthday lasts lowly there'd woe Woodland pa
+    sun's slaying most handling.
+  </p>
+  <p>
+    Even the smallest person can change the course of the future. They tempted completely other caves cloven wisest
+    draught scrumptious cook Undómiel friends. Dory crunchy huge sleepless. Unmade took nerves liquor defeated Arathorn.
+  </p>
 </div>
 ```
 
 ## Align Items
 
 By default, items stretch to fill the inline size of the `wa-stack` container. You can add any of the following [`wa-align-items-*`](/docs/style-utilities/align-items) classes to an element with `wa-stack` to specify how items are aligned in the inline direction:
+
 - `wa-align-items-start`
 - `wa-align-items-end`
 - `wa-align-items-center`
@@ -86,6 +92,7 @@ By default, items stretch to fill the inline size of the `wa-stack` container. Y
 ## Gap
 
 By default, the gap between stack items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/gap) classes to an element with `wa-stack` to specify the gap between items:
+
 - `wa-gap-0`
 - `wa-gap-3xs`
 - `wa-gap-2xs`
diff --git a/packages/webawesome/docs/docs/utilities/text.md b/packages/webawesome/docs/docs/utilities/text.md
index ad8139b4e..c3fc56bf4 100644
--- a/packages/webawesome/docs/docs/utilities/text.md
+++ b/packages/webawesome/docs/docs/utilities/text.md
@@ -1,7 +1,7 @@
 ---
 title: Text
 description: Text utility classes combine custom properties from your Web Awesome theme to conveniently style text content.
-tags: ["utilities", "layout"]
+layout: docs
 ---
 
 Web Awesome includes classes to set multiple text properties at once to style body text, headings, and captions.
@@ -9,23 +9,25 @@ Web Awesome includes classes to set multiple text properties at once to style bo
 ## Body
 
 Use body classes to style the main content of your pages. Each `wa-body-*` class specifies the following properties:
+
 - `font-family: var(--wa-font-family-body);`
 - `font-weight: var(--wa-font-weight-body);`
 - `line-height: var(--wa-line-height-normal);`
 
 Additionally, each class specifies a `font-size` that corresponds to a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme.
 
-| Class Name         | `font-size` Value    |  Preview                                                                  |
-| ------------------ | -------------------- | ------------------------------------------------------------------------- |
-| `wa-body-xs`  | `--wa-font-size-xs`  | <div class="wa-body-xs">Sphinx of black quartz, judge my vow.</div>  |
-| `wa-body-s`   | `--wa-font-size-s`   | <div class="wa-body-s">Sphinx of black quartz, judge my vow.</div>   |
-| `wa-body-m`   | `--wa-font-size-m`   | <div class="wa-body-m">Sphinx of black quartz, judge my vow.</div>   |
-| `wa-body-l`   | `--wa-font-size-l`   | <div class="wa-body-l">Sphinx of black quartz, judge my vow.</div>   |
-| `wa-body-xl`  | `--wa-font-size-xl`  | <div class="wa-body-xl">Sphinx of black quartz, judge my vow.</div>  |
+| Class Name   | `font-size` Value   | Preview                                                             |
+| ------------ | ------------------- | ------------------------------------------------------------------- |
+| `wa-body-xs` | `--wa-font-size-xs` | <div class="wa-body-xs">Sphinx of black quartz, judge my vow.</div> |
+| `wa-body-s`  | `--wa-font-size-s`  | <div class="wa-body-s">Sphinx of black quartz, judge my vow.</div>  |
+| `wa-body-m`  | `--wa-font-size-m`  | <div class="wa-body-m">Sphinx of black quartz, judge my vow.</div>  |
+| `wa-body-l`  | `--wa-font-size-l`  | <div class="wa-body-l">Sphinx of black quartz, judge my vow.</div>  |
+| `wa-body-xl` | `--wa-font-size-xl` | <div class="wa-body-xl">Sphinx of black quartz, judge my vow.</div> |
 
 ## Headings
 
 Use heading classes to style section titles and headings in your content. Each `wa-heading-*` class specifies the following properties:
+
 - `font-family: var(--wa-font-family-heading);`
 - `font-weight: var(--wa-font-weight-heading);`
 - `line-height: var(--wa-line-height-condensed);`
@@ -46,6 +48,7 @@ Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/d
 ## Captions
 
 Use caption classes to style descriptions or auxiliary text in your content. Each `wa-caption-*` class specifies the following properties:
+
 - `color: var(--wa-color-text-quiet);`
 - `font-family: var(--wa-font-family-body);`
 - `font-weight: var(--wa-font-weight-body);`
@@ -53,10 +56,10 @@ Use caption classes to style descriptions or auxiliary text in your content. Eac
 
 Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme. Caption classes are one font size smaller than the corresponding `wa-body-*` class.
 
-| Class Name       | `font-size` Value    | Preview                                                                        |
-| ---------------- | -------------------- | ------------------------------------------------------------------------------ |
-| `wa-caption-xs`  | `--wa-font-size-2xs` | <div class="wa-caption-xs">The quick brown fox jumps over the lazy dog.</div>  |
-| `wa-caption-s`   | `--wa-font-size-xs`  | <div class="wa-caption-s">The quick brown fox jumps over the lazy dog.</div>   |
-| `wa-caption-m`   | `--wa-font-size-s`   | <div class="wa-caption-m">The quick brown fox jumps over the lazy dog.</div>   |
-| `wa-caption-l`   | `--wa-font-size-m`   | <div class="wa-caption-l">The quick brown fox jumps over the lazy dog.</div>   |
-| `wa-caption-xl`  | `--wa-font-size-l`   | <div class="wa-caption-xl">The quick brown fox jumps over the lazy dog.</div>  |
+| Class Name      | `font-size` Value    | Preview                                                                       |
+| --------------- | -------------------- | ----------------------------------------------------------------------------- |
+| `wa-caption-xs` | `--wa-font-size-2xs` | <div class="wa-caption-xs">The quick brown fox jumps over the lazy dog.</div> |
+| `wa-caption-s`  | `--wa-font-size-xs`  | <div class="wa-caption-s">The quick brown fox jumps over the lazy dog.</div>  |
+| `wa-caption-m`  | `--wa-font-size-s`   | <div class="wa-caption-m">The quick brown fox jumps over the lazy dog.</div>  |
+| `wa-caption-l`  | `--wa-font-size-m`   | <div class="wa-caption-l">The quick brown fox jumps over the lazy dog.</div>  |
+| `wa-caption-xl` | `--wa-font-size-l`   | <div class="wa-caption-xl">The quick brown fox jumps over the lazy dog.</div> |
diff --git a/packages/webawesome/docs/docs/utilities/utilities.json b/packages/webawesome/docs/docs/utilities/utilities.json
deleted file mode 100644
index 4fa52caa8..000000000
--- a/packages/webawesome/docs/docs/utilities/utilities.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "layout": "utility",
-  "tags": ["utilities"]
-}
diff --git a/packages/webawesome/docs/docs/utilities/visually-hidden.md b/packages/webawesome/docs/docs/utilities/visually-hidden.md
index af7971223..1147aee0a 100644
--- a/packages/webawesome/docs/docs/utilities/visually-hidden.md
+++ b/packages/webawesome/docs/docs/utilities/visually-hidden.md
@@ -1,13 +1,10 @@
 ---
 title: Visually Hidden
 description: The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
-icon: visually-hidden
-snippets:
-  - .wa-visually-hidden
-  - .wa-visually-hidden-force
+layout: docs
 ---
 
-> "there are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead."
+> "There are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead."
 > — [The A11Y Project](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/)
 
 Since visually hidden content can receive focus when tabbing, the element will become visible when something inside receives focus.
@@ -39,9 +36,7 @@ Adding a label may seem redundant at times, but they're very helpful for unsight
 
 ```html {.example}
 <wa-card style="width: 100%; max-width: 360px;">
-  <header class="wa-visually-hidden">
-    Personal Info
-  </header>
+  <header class="wa-visually-hidden">Personal Info</header>
   <wa-input label="Name" style="margin-bottom: .5rem;"></wa-input>
   <wa-input label="Email" type="email"></wa-input>
 </wa-card>
@@ -61,37 +56,37 @@ For example when hiding a checkbox to render a custom one:
 </label>
 
 <style>
-.checkbox {
-  display: inline-flex;
-  vertical-align: middle;
-  width: var(--wa-font-size-l);
-  height: var(--wa-font-size-l);
-  background: var(--wa-color-neutral-fill-quiet);
-  color: var(--wa-color-neutral-on-quiet);
-  border-radius: var(--wa-border-radius-s);
-  margin-inline-end: var(--wa-space-xs);
+  .checkbox {
+    display: inline-flex;
+    vertical-align: middle;
+    width: var(--wa-font-size-l);
+    height: var(--wa-font-size-l);
+    background: var(--wa-color-neutral-fill-quiet);
+    color: var(--wa-color-neutral-on-quiet);
+    border-radius: var(--wa-border-radius-s);
+    margin-inline-end: var(--wa-space-xs);
 
-  &::after {
-    content: "✓" / "";
-    margin: auto;
-    transition: opacity var(--wa-transition-slow) var(--wa-transition-easing);
-  }
-
-  &:has(:checked) {
-    background: var(--wa-color-brand-fill-loud);
-    color: var(--wa-color-brand-on-loud);
-  }
-
-  &:not(:has(:checked)) {
     &::after {
-      opacity: 0;
+      content: '✓' / '';
+      margin: auto;
+      transition: opacity var(--wa-transition-slow) var(--wa-transition-easing);
+    }
+
+    &:has(:checked) {
+      background: var(--wa-color-brand-fill-loud);
+      color: var(--wa-color-brand-on-loud);
+    }
+
+    &:not(:has(:checked)) {
+      &::after {
+        opacity: 0;
+      }
+    }
+
+    &:focus-within {
+      outline: var(--wa-focus-ring);
+      outline-offset: var(--wa-focus-ring-offset);
     }
   }
-
-  &:focus-within {
-    outline: var(--wa-focus-ring);
-    outline-offset: var(--wa-focus-ring-offset);
-  }
-}
 </style>
 ```
diff --git a/packages/webawesome/package.json b/packages/webawesome/package.json
index f4127cd2c..d8165a7fb 100644
--- a/packages/webawesome/package.json
+++ b/packages/webawesome/package.json
@@ -52,7 +52,6 @@
     "create": "plop --plopfile scripts/plop/plopfile.js",
     "test": "CSR_ONLY=\"true\" web-test-runner --group default",
     "test:component": "CSR_ONLY=\"true\" web-test-runner -- --watch --group",
-    "test:contrast": "cd src/styles/color && node contrast.test.js",
     "test:watch": "web-test-runner --watch --group default",
     "prettier": "prettier --check --log-level=warn --ignore-path=\"../../.prettierignore\" .",
     "prettier:fix": "prettier --write --log-level=warn --ignore-path=\"../../.prettierignore\" .",
@@ -74,8 +73,7 @@
     "qr-creator": "^1.0.0",
     "style-observer": "^0.0.7"
   },
-  "devDependencies": {
-  },
+  "devDependencies": {},
   "lint-staged": {
     "*.{ts,js}": [
       "prettier --write"
diff --git a/packages/webawesome/scripts/color-palette-contrast-test.js b/packages/webawesome/scripts/color-palette-contrast-test.js
deleted file mode 100644
index 875efde3e..000000000
--- a/packages/webawesome/scripts/color-palette-contrast-test.js
+++ /dev/null
@@ -1,71 +0,0 @@
-// Get a list of all CSS files in repo
-import chalk from 'chalk';
-import Color from 'colorjs.io';
-import palettes from '../src/styles/color/scripts/palettes.js';
-
-let targetContrasts = {
-  40: 3,
-  50: 4.5,
-  60: 7,
-};
-
-let result = { pass: 0, fail: 0, invalid: 0 };
-
-for (let paletteId in palettes) {
-  const tokens = palettes[paletteId];
-  let prefix = chalk.dim(`[${paletteId}]`);
-
-  for (let hue in tokens) {
-    let tints = tokens[hue];
-
-    for (let tint = 10; tint <= 50; tint += 10) {
-      let color = tints[tint];
-
-      if (!(color instanceof Color)) {
-        result.invalid++;
-        continue;
-      }
-
-      for (let difference in targetContrasts) {
-        let targetContrast = targetContrasts[difference];
-        let tint2 = tint + Number(difference);
-        if (tint2 > 90) {
-          continue;
-        }
-
-        let color2 = tints[tint2];
-
-        if (!(color2 instanceof Color)) {
-          result.invalid++;
-          continue;
-        }
-
-        let contrast = color.contrast(color2, 'WCAG21');
-        let pass = contrast >= targetContrast;
-        if (pass) {
-          result.pass++;
-        } else {
-          result.fail++;
-          console.log(
-            chalk.red(
-              `${prefix} WCAG 2.1 contrast between ${hue}-${tint} and ${hue}-${tint2} is ${contrast.toLocaleString('en')} < ${targetContrast}`,
-            ),
-          );
-        }
-      }
-    }
-  }
-}
-
-let testCount = result.pass + result.fail;
-console.info(
-  `Ran ${testCount} tests: ${chalk.green(`${chalk.bold(result.pass)} passed`)}` +
-    (result.fail ? `, ${chalk.red(`${chalk.bold(result.fail)} failed`)}` : '') +
-    (result.invalid ? `, ${chalk.red(`${chalk.bold(result.invalid)} invalid colors`)}` : ''),
-);
-
-if (testCount === result.pass) {
-  process.exit(0);
-} else {
-  process.exit(1);
-}
diff --git a/packages/webawesome/src/components/animated-image/animated-image.test.ts b/packages/webawesome/src/components/animated-image/animated-image.test.ts
index ee37cd45a..b7544ca7d 100644
--- a/packages/webawesome/src/components/animated-image/animated-image.test.ts
+++ b/packages/webawesome/src/components/animated-image/animated-image.test.ts
@@ -1,7 +1,7 @@
 import { expect, oneEvent } from '@open-wc/testing';
 import { html } from 'lit';
-import { clickOnElement } from '../../internal/test.js';
 import { clientFixture } from '../../internal/test/fixture.js';
+import { clickOnElement } from '../../internal/test/pointer-utilities.js';
 import type WaAnimatedImage from './animated-image.js';
 
 describe('<wa-animated-image>', () => {
diff --git a/packages/webawesome/src/components/carousel/carousel.test.ts b/packages/webawesome/src/components/carousel/carousel.test.ts
index 43eb7e906..8abb8dd97 100644
--- a/packages/webawesome/src/components/carousel/carousel.test.ts
+++ b/packages/webawesome/src/components/carousel/carousel.test.ts
@@ -5,8 +5,8 @@ import { map } from 'lit/directives/map.js';
 import { range } from 'lit/directives/range.js';
 import type { SinonStub } from 'sinon';
 import sinon from 'sinon';
-import { clickOnElement, dragElement, moveMouseOnElement } from '../../internal/test.js';
 import { clientFixture } from '../../internal/test/fixture.js';
+import { clickOnElement, dragElement, moveMouseOnElement } from '../../internal/test/pointer-utilities.js';
 import type WaCarousel from './carousel.js';
 
 describe('<wa-carousel>', () => {
diff --git a/packages/webawesome/src/components/checkbox/checkbox.test.ts b/packages/webawesome/src/components/checkbox/checkbox.test.ts
index c5d89ba69..fc607b68b 100644
--- a/packages/webawesome/src/components/checkbox/checkbox.test.ts
+++ b/packages/webawesome/src/components/checkbox/checkbox.test.ts
@@ -2,9 +2,9 @@ import { aTimeout, expect, oneEvent, waitUntil } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit';
 import sinon from 'sinon';
-import { clickOnElement } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
+import { clickOnElement } from '../../internal/test/pointer-utilities.js';
 import type WaCheckbox from './checkbox.js';
 
 describe('<wa-checkbox>', () => {
diff --git a/packages/webawesome/src/components/color-picker/color-picker.test.ts b/packages/webawesome/src/components/color-picker/color-picker.test.ts
index e46672d9c..5f7167d4e 100644
--- a/packages/webawesome/src/components/color-picker/color-picker.test.ts
+++ b/packages/webawesome/src/components/color-picker/color-picker.test.ts
@@ -2,8 +2,8 @@ import { aTimeout, expect, oneEvent } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit';
 import sinon from 'sinon';
-import { clickOnElement, dragElement } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
+import { clickOnElement, dragElement } from '../../internal/test/pointer-utilities.js';
 // import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import { serialize } from '../../utilities/form.js';
 import type WaColorPicker from './color-picker.js';
diff --git a/packages/webawesome/src/components/dialog/dialog.test.ts b/packages/webawesome/src/components/dialog/dialog.test.ts
index 91004e64b..f75d1eef7 100644
--- a/packages/webawesome/src/components/dialog/dialog.test.ts
+++ b/packages/webawesome/src/components/dialog/dialog.test.ts
@@ -3,8 +3,8 @@ import { aTimeout, expect, waitUntil } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit';
 import sinon from 'sinon';
-import { clickOnElement } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
+import { clickOnElement } from '../../internal/test/pointer-utilities.js';
 import type WaDialog from './dialog.js';
 
 describe('<wa-dialog>', () => {
diff --git a/packages/webawesome/src/components/drawer/drawer.test.ts b/packages/webawesome/src/components/drawer/drawer.test.ts
index 7a9bdd4f1..d2f48e21b 100644
--- a/packages/webawesome/src/components/drawer/drawer.test.ts
+++ b/packages/webawesome/src/components/drawer/drawer.test.ts
@@ -3,8 +3,8 @@ import { aTimeout, expect, waitUntil } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit';
 import sinon from 'sinon';
-import { clickOnElement } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
+import { clickOnElement } from '../../internal/test/pointer-utilities.js';
 import type WaDrawer from './drawer.js';
 
 describe('<wa-drawer>', () => {
diff --git a/packages/webawesome/src/components/input/input.test.ts b/packages/webawesome/src/components/input/input.test.ts
index 735ea00da..e39f05b09 100644
--- a/packages/webawesome/src/components/input/input.test.ts
+++ b/packages/webawesome/src/components/input/input.test.ts
@@ -4,9 +4,9 @@ import { sendKeys } from '@web/test-runner-commands'; // must come from the same
 import { html } from 'lit';
 import sinon from 'sinon';
 import { serialize } from '../../../dist-cdn/webawesome.js';
-import { isSafari } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
+import { isSafari } from '../../internal/test/pointer-utilities.js';
 import type WaInput from './input.js';
 
 describe('<wa-input>', () => {
diff --git a/packages/webawesome/src/components/rating/rating.test.ts b/packages/webawesome/src/components/rating/rating.test.ts
index af17e1f88..9aa96e454 100644
--- a/packages/webawesome/src/components/rating/rating.test.ts
+++ b/packages/webawesome/src/components/rating/rating.test.ts
@@ -2,8 +2,8 @@ import { expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit';
 import sinon from 'sinon';
-import { clickOnElement } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
+import { clickOnElement } from '../../internal/test/pointer-utilities.js';
 import type WaRating from './rating.js';
 
 describe('<wa-rating>', () => {
diff --git a/packages/webawesome/src/components/select/select.test.ts b/packages/webawesome/src/components/select/select.test.ts
index 972e0afc1..106f3a94f 100644
--- a/packages/webawesome/src/components/select/select.test.ts
+++ b/packages/webawesome/src/components/select/select.test.ts
@@ -2,9 +2,9 @@ import { aTimeout, expect, waitUntil } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit';
 import sinon from 'sinon';
-import { clickOnElement } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
+import { clickOnElement } from '../../internal/test/pointer-utilities.js';
 import { serialize } from '../../utilities/form.js';
 import type WaOption from '../option/option.js';
 import type WaSelect from './select.js';
diff --git a/packages/webawesome/src/components/slider/slider.test.ts b/packages/webawesome/src/components/slider/slider.test.ts
index 3594c26e3..931fc3af9 100644
--- a/packages/webawesome/src/components/slider/slider.test.ts
+++ b/packages/webawesome/src/components/slider/slider.test.ts
@@ -2,9 +2,9 @@ import { expect, oneEvent } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit';
 import sinon from 'sinon';
-import { clickOnElement } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
+import { clickOnElement } from '../../internal/test/pointer-utilities.js';
 import { serialize } from '../../utilities/form.js';
 import type WaSlider from './slider.js';
 
diff --git a/packages/webawesome/src/components/split-panel/split-panel.test.ts b/packages/webawesome/src/components/split-panel/split-panel.test.ts
index c68d4803f..a1fe58d26 100644
--- a/packages/webawesome/src/components/split-panel/split-panel.test.ts
+++ b/packages/webawesome/src/components/split-panel/split-panel.test.ts
@@ -1,9 +1,9 @@
 import { expect, oneEvent } from '@open-wc/testing';
 import { resetMouse } from '@web/test-runner-commands';
 import { html } from 'lit';
-import { dragElement } from '../../internal/test.js';
 import { queryByTestId } from '../../internal/test/data-testid-helpers.js';
 import { fixtures } from '../../internal/test/fixture.js';
+import { dragElement } from '../../internal/test/pointer-utilities.js';
 import type WaSplitPanel from './split-panel.js';
 
 const DIVIDER_WIDTH_IN_PX = 4;
diff --git a/packages/webawesome/src/components/tab-group/tab-group.test.ts b/packages/webawesome/src/components/tab-group/tab-group.test.ts
index ad788ccb4..c4b89709a 100644
--- a/packages/webawesome/src/components/tab-group/tab-group.test.ts
+++ b/packages/webawesome/src/components/tab-group/tab-group.test.ts
@@ -3,10 +3,10 @@ import { sendKeys } from '@web/test-runner-commands';
 import type { HTMLTemplateResult } from 'lit';
 import { html } from 'lit';
 import type { WaTabShowEvent } from '../../events/tab-show.js';
-import { clickOnElement } from '../../internal/test.js';
 import { queryByTestId } from '../../internal/test/data-testid-helpers.js';
 import { isElementVisibleFromOverflow } from '../../internal/test/element-visible-overflow.js';
 import { clientFixture, fixtures } from '../../internal/test/fixture.js';
+import { clickOnElement } from '../../internal/test/pointer-utilities.js';
 import { waitForScrollingToEnd } from '../../internal/test/wait-for-scrolling.js';
 import type WaTabPanel from '../tab-panel/tab-panel.js';
 import type WaTab from '../tab/tab.js';
diff --git a/packages/webawesome/src/components/tree/tree.test.ts b/packages/webawesome/src/components/tree/tree.test.ts
index a722bbfec..80171c71b 100644
--- a/packages/webawesome/src/components/tree/tree.test.ts
+++ b/packages/webawesome/src/components/tree/tree.test.ts
@@ -2,8 +2,8 @@ import { aTimeout, expect, triggerBlurFor, triggerFocusFor } from '@open-wc/test
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit';
 import sinon from 'sinon';
-import { clickOnElement } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
+import { clickOnElement } from '../../internal/test/pointer-utilities.js';
 import type WaTreeItem from '../tree-item/tree-item.js';
 import type WaTree from './tree.js';
 
diff --git a/packages/webawesome/src/internal/active-elements.ts b/packages/webawesome/src/internal/active-elements.ts
index b5dc1f188..918ea9d7d 100644
--- a/packages/webawesome/src/internal/active-elements.ts
+++ b/packages/webawesome/src/internal/active-elements.ts
@@ -7,7 +7,7 @@
  *   // Early return
  *   for (const activeElement of activeElements()) {
  *     if (<cond>) {
- *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!
+ *       break; // Break the loop, don't need to iterate over the whole array or store an array in memory!
  *     }
  *   }
  */
diff --git a/packages/webawesome/src/internal/form.test.ts b/packages/webawesome/src/internal/form.test.ts
index 9a81f30de..0b8af517f 100644
--- a/packages/webawesome/src/internal/form.test.ts
+++ b/packages/webawesome/src/internal/form.test.ts
@@ -1,8 +1,8 @@
 import { aTimeout, expect, waitUntil } from '@open-wc/testing';
 import { html } from 'lit';
 import sinon from 'sinon';
-import { clickOnElement } from './test.js';
 import { fixtures } from './test/fixture.js';
+import { clickOnElement } from './test/pointer-utilities.js';
 
 describe('Form tests', () => {
   for (const fixture of fixtures) {
diff --git a/packages/webawesome/src/internal/test/form-control-base-tests.ts b/packages/webawesome/src/internal/test/form-control-base-tests.ts
index 97a91b3a4..e22de3c9d 100644
--- a/packages/webawesome/src/internal/test/form-control-base-tests.ts
+++ b/packages/webawesome/src/internal/test/form-control-base-tests.ts
@@ -1,10 +1,10 @@
 import { aTimeout, expect } from '@open-wc/testing';
 import { html, type TemplateResult } from 'lit';
 import { html as staticHTML, unsafeStatic } from 'lit/static-html.js';
-import { clickOnElement } from '../test.js';
 import type { WebAwesomeFormControl } from '../webawesome-form-associated-element.js';
 import type { clientFixture, hydratedFixture } from './fixture.js';
 import { fixtures } from './fixture.js';
+import { clickOnElement } from './pointer-utilities.js';
 
 type CreateControlFn = () => Promise<WebAwesomeFormControl>;
 
diff --git a/packages/webawesome/src/internal/test.ts b/packages/webawesome/src/internal/test/pointer-utilities.ts
similarity index 100%
rename from packages/webawesome/src/internal/test.ts
rename to packages/webawesome/src/internal/test/pointer-utilities.ts
diff --git a/packages/webawesome/src/styles/color/scripts/palettes-analyzed.js b/packages/webawesome/src/styles/color/scripts/palettes-analyzed.js
deleted file mode 100644
index d296b6457..000000000
--- a/packages/webawesome/src/styles/color/scripts/palettes-analyzed.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * Analyze palettes and export the results.
- * ✅ Convert colors to OKLCH
- * ✅ Find accent tint (real and clamped)
- * More later.
- */
-import rawPalettes from './palettes.js';
-import { clamp } from './util.js';
-
-// Default accent tint if all chromas are 0, but also the tint accent colors will be nudged towards (see chromaTolerance)
-const DEFAULT_ACCENT = 60;
-
-// Min and max allowed tints
-const MIN_ACCENT = 40;
-const MAX_ACCENT = 90;
-
-// Chroma tolerance: Chroma will need to differ more than this to gravitate away from defaultAccent
-const CHROMA_TOLERANCE = 0.000001;
-
-const palettes = Object.assign({}, rawPalettes);
-
-for (let paletteId in palettes) {
-  const tokens = Object.assign({}, palettes[paletteId]);
-  palettes[paletteId] = tokens;
-
-  for (let hue in tokens) {
-    let scale = Object.assign({}, tokens[hue]);
-    tokens[hue] = scale;
-
-    let maxChromaTint = DEFAULT_ACCENT; // TODO handle scale.core
-    let maxChroma = scale.core?.get('oklch.c') ?? (scale[DEFAULT_ACCENT].c || 0);
-
-    for (let tint in scale) {
-      let color = scale[tint];
-
-      if (!color || color.constructor.name !== 'Color') {
-        // Not a color
-        continue;
-      }
-
-      color = color.to('oklch');
-      scale[tint] = color;
-
-      if (tint === '05') {
-        // The object has both '5' and '05' keys, but '05' is out of order
-        continue;
-      }
-
-      tint = tint.padStart(2, '0');
-
-      if (color.c > maxChroma + CHROMA_TOLERANCE) {
-        maxChroma = color.c;
-        maxChromaTint = tint;
-      }
-    }
-
-    scale['05'] = scale['5'];
-
-    scale.maxChroma = scale.maxChromaRaw = maxChroma;
-    scale.maxChromaTint = scale.maxChromaTintRaw = maxChromaTint;
-
-    if (maxChromaTint < MIN_ACCENT || maxChromaTint > MAX_ACCENT) {
-      scale.maxChromaTint = clamp(MIN_ACCENT, maxChromaTint, MAX_ACCENT);
-      scale.maxChroma = scale[maxChromaTint].c;
-    }
-  }
-}
-
-export default palettes;
-export { rawPalettes };
diff --git a/packages/webawesome/src/styles/color/scripts/palettes.js b/packages/webawesome/src/styles/color/scripts/palettes.js
deleted file mode 100644
index fa3c76989..000000000
--- a/packages/webawesome/src/styles/color/scripts/palettes.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * Export data on all color tokens from all palettes
- */
-
-// Get a list of all CSS files in repo
-import Color from 'colorjs.io';
-import fs from 'fs';
-import path from 'path';
-import { PALETTE_DIR } from './util.js';
-
-export const paletteFiles = fs
-  .readdirSync(PALETTE_DIR + '/')
-  .filter(file => file.endsWith('.css') && !file.endsWith('base.css'));
-export const declarationRegex =
-  /^\s*--wa-color-(?<hue>[a-z]+)(?:-(?<level>[0-9]+|key))?:\s*(?<color>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
-export const rawCSS = {};
-
-function parse(contents, file) {
-  // Regex for each declaration
-  const matches = [...contents.matchAll(declarationRegex)];
-
-  if (matches.length === 0) {
-    throw new Error('Cound not extract colors');
-  }
-
-  const ret = {};
-
-  for (let match of matches) {
-    let { hue, level = '', color } = match.groups;
-    ret[hue] ??= {};
-    let scale = ret[hue];
-
-    if (level === 'key') {
-      scale.maxChromaTint = color;
-      continue;
-    }
-
-    if (!level) {
-      if (color.startsWith('var(')) {
-        // Core color aliased to another color, ignore
-        continue;
-      } else {
-        // Custom core color
-        level = 'core';
-      }
-    }
-
-    // Attempt to convert color to Color object, fall back to string if this fails
-    // This will happen for e.g. colors defined via color-mix()
-    try {
-      color = new Color(color);
-    } catch (e) {
-      console.warn(`[${file}] Unparsable color ${hue}-${level}: ${color}`);
-    }
-
-    if (level.startsWith('0')) {
-      // Leading zeroes throw off sorting, add both properties
-      // NOTE: Ideally one of the two would be added as non-enumerable, but then we cannot access it via 11ty data
-      scale[level] = color;
-
-      // Drop leading zeroes
-      level = level.replace(/^0+/, '');
-    }
-
-    scale[level] = color;
-  }
-
-  return ret;
-}
-
-const palettes = {};
-
-for (let file of paletteFiles) {
-  let css = fs.readFileSync(path.join(PALETTE_DIR, file), 'utf8');
-  rawCSS[file] = css;
-  let tokens = parse(css, file);
-  let paletteId = file.replace(/\.css$/, '');
-
-  palettes[paletteId] = tokens;
-}
-
-export default palettes;
diff --git a/packages/webawesome/src/styles/color/scripts/postprocess.js b/packages/webawesome/src/styles/color/scripts/postprocess.js
deleted file mode 100644
index 053f26173..000000000
--- a/packages/webawesome/src/styles/color/scripts/postprocess.js
+++ /dev/null
@@ -1,162 +0,0 @@
-/**
- * Post-process palette CSS files to add core colors, oklch coordinates etc.
- * Run via node postprocess.js
- * Warning: Will overwrite existing files. Check the diff before committing!
- */
-import chalk from 'chalk';
-import fs from 'fs';
-import path from 'path';
-import palettes from './palettes-analyzed.js';
-import { PALETTE_DIR, formatComparison, hueToChalk } from './util.js';
-
-// TODO import from global data file instead of duplicating this data
-const hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'];
-const huesChromatic = hues.slice(0, -1);
-
-/** If a hue is missing, how should it be generated from the neighboring hues? */
-const mixPercentage = { orange: 0.6 };
-const selector = paletteId =>
-  [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${paletteId}`].join(
-    ',\n',
-  );
-
-// Used for formatting warnings
-const paletteIdMaxChars = Object.keys(palettes).reduce((max, id) => Math.max(max, id.length), 0);
-const hueMaxChars = Object.keys(palettes.default).reduce((max, id) => Math.max(max, id.length), 0);
-
-const indent = '  ';
-
-const paletteIssues = { total: 0 };
-
-for (let paletteId in palettes) {
-  const palette = palettes[paletteId];
-
-  let paletteCSS = '';
-  let hueCSS = Object.fromEntries(hues.map(hue => [hue, '']));
-
-  for (let hue in palette) {
-    let scale = palette[hue];
-
-    if (scale.maxChromaTint != scale.maxChromaTintRaw) {
-      reportPaletteIssue(
-        `Clamping accent color to ${chalk.bold(scale.maxChromaTint)}, but peak chroma is in ${chalk.bold(scale.maxChromaTintRaw)} (${formatComparison(scale[scale.maxChromaTintRaw].c, scale[scale.maxChromaTint].c)})`,
-        { paletteId, hue: hue },
-      );
-    }
-
-    hueCSS[hue] += scaleCSS(hue, scale);
-  }
-
-  // Generate missing hues
-  for (let i = 0; i < hues.length; i++) {
-    let hue = hues[i];
-
-    if (hueCSS[hue]) {
-      continue;
-    }
-
-    // Find previous and next hue to interpolate
-    // We assume gaps will always be at most 1 hue wide
-    let prevHue = huesChromatic[i - 1] ?? huesChromatic.at(-1);
-    let nextHue = huesChromatic[i + 1] ?? huesChromatic[0];
-
-    reportPaletteIssue(`Missing hue. Generating from ${prevHue} and ${nextHue}`, { paletteId, hue });
-
-    let prevScale = palette[prevHue];
-    let nextScale = palette[nextHue];
-
-    let progress = mixPercentage[hue] ?? 0.5;
-    let scale = (palette[hue] = {});
-
-    scale.maxChromaTint = (1 - progress) * prevScale.maxChromaTint + progress * nextScale.maxChromaTint;
-    scale.maxChromaTint = Math.round(scale.maxChromaTint / 10) * 10;
-
-    for (let tint in prevScale) {
-      if (tint === '05' || !(tint > 0)) {
-        continue;
-      }
-
-      let prevColor = palette[prevHue][tint];
-      let nextColor = palette[nextHue][tint];
-
-      let color = prevColor.mix(nextColor, progress, { space: 'oklch' });
-      scale[tint] = color;
-    }
-
-    // Ensure core color has the max chroma
-    let coreColor = scale[scale.maxChromaTint];
-    coreColor.c = Math.max(...Object.values(scale).map(color => color.c || 0)) + 0.0002;
-
-    hueCSS[hue] += scaleCSS(hue, scale);
-  }
-
-  hueCSS = Object.values(hueCSS).filter(Boolean).join('\n\n');
-  // TODO apply Prettier instead of faking it
-  paletteCSS = `${selector(paletteId)} {\n${hueCSS.trimEnd().replace(/^(?=\S)/gm, indent)}\n}\n`;
-
-  fs.writeFileSync(path.join(PALETTE_DIR, paletteId + '.css'), paletteCSS, 'utf8');
-}
-
-let issuePaletteCount = Object.keys(paletteIssues).length - 1;
-console.info(
-  `🎨 Wrote ${Object.keys(palettes).length} palette files.` +
-    (paletteIssues.total > 0
-      ? ` ${chalk.bold(paletteIssues.total)} issues found across ${chalk.bold(issuePaletteCount)} palettes.`
-      : ''),
-);
-
-function reportPaletteIssue(issue, { paletteId, hue }) {
-  let palettePrefix = `[${paletteId}]`.padEnd(paletteIdMaxChars + 2);
-
-  if (!paletteIssues[paletteId]) {
-    // First time encountering an issue with this palette
-    paletteIssues[paletteId] = { count: 0 };
-  } else {
-    // Don't print palette id multiple times
-    palettePrefix = ' '.repeat(paletteIdMaxChars + 2);
-  }
-
-  paletteIssues[paletteId].count++;
-  paletteIssues.total++;
-
-  let msg = palettePrefix;
-  let huePrefix = '';
-
-  if (hue) {
-    huePrefix = hueToChalk(hue)(hue.padEnd(hueMaxChars + 2));
-  }
-
-  console.warn(`${msg}${huePrefix}${issue}`);
-}
-
-function declareColor(color, hue, tint) {
-  tint = tint.padStart(2, '0');
-  let ret = `--wa-color-${hue}-${tint}: `;
-
-  if (color.inGamut('srgb')) {
-    ret += `${color.toString({ format: 'hex' })} /* ${color.toString()} */;`;
-  } else {
-    ret += `${color.toString()};`;
-  }
-
-  return ret;
-}
-
-function scaleCSS(hue, scale) {
-  let ret = [];
-  for (let tint in scale) {
-    if (tint === '05' || !(tint > 0)) {
-      // The object has both '5' and '05' keys, but '05' is out of order
-      // Also ignore non-tints
-      continue;
-    }
-
-    let color = scale[tint];
-    ret.push(declareColor(color, hue, tint));
-  }
-  ret.reverse();
-
-  ret.push(`--wa-color-${hue}: var(--wa-color-${hue}-${scale.maxChromaTint});`);
-  ret.push(`--wa-color-${hue}-key: ${scale.maxChromaTint};`);
-  return ret.join('\n');
-}
diff --git a/packages/webawesome/src/styles/color/scripts/ranges.js b/packages/webawesome/src/styles/color/scripts/ranges.js
deleted file mode 100644
index d0ba46308..000000000
--- a/packages/webawesome/src/styles/color/scripts/ranges.js
+++ /dev/null
@@ -1,207 +0,0 @@
-// Run via node ranges.js to analyze all palettes
-// Add palette ids, hue names, or tints to filter the analysis (e.g. node ranges.js red anodized -gray)
-import palettes from './palettes-analyzed.js';
-import { aggregates, normalizeAngles, toPrecision } from './util.js';
-
-/**
- * Each "test" consists of the following params to analyze:
- * - component: The color component to analyze (h, c, l). If `getValue()` is provided, this is ignored.
- * - getValue: A function to extract the value to analyze from a color, for more complex analysis than just getting a component
- * - by: The grouping to analyze by (1-2 of 'tint', 'hue', 'palette'). If `getKey()` is provided, this is ignored
- * - getKey: A function to generate a key for each group. If not provided, it is generated based on the 'by' param
- * - caption: The caption to display in the console. If not provided, a default label is generated from test params.
- * - filter: Restrict to specific hues/tints/palettes or exclude them
- * - stats: The stats to calculate for each group (min, max, mid, extent, avg, median, count)
- */
-let tests = [
-  { component: 'h', by: 'hue', filter: ['core ± 10', '-gray'] },
-  { component: 'h', by: 'hue', filter: ['core', '-gray'] },
-  { component: 'h', by: 'palette', filter: ['core', 'gray'] },
-  { component: 'c', by: 'tint', filter: '-gray' },
-  { component: 'c', by: 'palette', filter: 'core', stats: ['max', 'avg', 'median', 'count'] },
-  { component: 'l', by: 'tint' },
-  {
-    caption: 'Hue change between consecutive tints',
-    getValue(color, { palette, tint, hue }) {
-      let nextTint = getNextTint(tint);
-      let nextColor = palettes[palette][hue][nextTint];
-      return color.h - nextColor.h;
-    },
-    getKey({ tint }) {
-      return `${tint} → ${getNextTint(tint)}`;
-    },
-    filter: '-95',
-  },
-];
-
-const COMPONENT_NAMES = { l: 'lightness', c: 'chroma', h: 'hue' };
-const CORE_TINT_MICROSYNTAX = /^core\s*((?<op>[-+±])\s*(?<offset>\d+))?$/;
-
-const all = {
-  tints: ['95', '90', '80', '70', '60', '50', '40', '30', '20', '10', '05'],
-  hues: ['red', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'],
-  palettes: Object.keys(palettes),
-};
-
-let args = process.argv.slice(2);
-let used = getSubset(all, args);
-
-const getNextTint = tint => Number(tint) + (tint == 5 || tint == 90 ? 5 : 10);
-
-for (let key in used) {
-  if (used[key].length < all[key].length) {
-    // Subset of values
-    console.log(`Analyzing only ${key}:`, used[key].join(', '));
-  }
-}
-
-/**
- * Apply a list of args (hues, tints, palette ids) to add or exclude against the corresponding arrays
- */
-function getSubset(all, args) {
-  args = Array.isArray(args) ? args : [args];
-
-  let used = {
-    tints: [],
-    hues: [],
-    palettes: [],
-  };
-
-  if (args.length > 0) {
-    for (let arg of args) {
-      let isNegative = arg.startsWith('-');
-      arg = isNegative ? arg.slice(1) : arg;
-      let key = Object.entries(all).find(([key, values]) => values.includes(arg))?.[0];
-
-      if (!key && CORE_TINT_MICROSYNTAX.test(arg)) {
-        key = 'tints';
-      }
-
-      if (key) {
-        if (isNegative) {
-          let array = used[key].length === 0 ? all[key] : used[key];
-          used[key] = array.filter(value => value !== arg);
-        } else {
-          used[key].push(arg);
-        }
-      }
-    }
-  }
-
-  // If no filters, use all values
-  for (let key in used) {
-    if (used[key].length === 0) {
-      used[key] = all[key].slice();
-    }
-  }
-
-  return used;
-}
-
-function runTest(test = {}) {
-  let {
-    component,
-    getValue = color => color[component],
-    by = 'tint',
-    getKey = getDefaultKey(by),
-    filter,
-    caption = getDefaultCaption(test),
-    stats = ['min', 'max', 'median', 'count'],
-    silent,
-  } = test;
-  let results = {};
-  let localUsed = filter ? getSubset(used, filter) : used;
-
-  for (let palette of localUsed.palettes) {
-    for (let hue of localUsed.hues) {
-      let coreTint = palettes[palette][hue].maxChromaTint;
-      // Resolve any core tint microsyntax
-      let tints = localUsed.tints.flatMap(tint => {
-        if (CORE_TINT_MICROSYNTAX.test(tint)) {
-          let { op, offset } = CORE_TINT_MICROSYNTAX.exec(tint).groups;
-
-          if (!offset) {
-            return coreTint;
-          }
-
-          return used.tints.filter(t => {
-            let distance = t - coreTint;
-            return Math.abs(distance) <= offset && !((op === '-' && distance > 0) || (op === '+' && distance < 0));
-          });
-        }
-
-        return tint;
-      });
-
-      for (let tint of tints) {
-        let key = getKey({ hue, tint, palette });
-        let color = palettes[palette][hue][tint];
-        let value = getValue(color, { hue, tint, palette }, localUsed);
-
-        results[key] ??= [];
-        results[key].push(value);
-      }
-    }
-  }
-
-  // Process results
-  for (let key in results) {
-    let values = results[key];
-
-    if (component === 'h') {
-      values = normalizeAngles(values);
-    }
-
-    results[key] = stats.reduce((acc, stat) => {
-      acc[stat] = toPrecision(aggregates[stat](values, acc));
-      return acc;
-    }, {});
-  }
-
-  if (!silent) {
-    console.log(caption);
-    console.table(results);
-    console.log('\n');
-  }
-
-  return results;
-}
-
-for (let test of tests) {
-  runTest(test);
-}
-
-function getDefaultKey(by) {
-  by = Array.isArray(by) ? by : [by];
-
-  return variables =>
-    by
-      .map((variableName, i) => {
-        if (variableName === 'tint' && i === 0) {
-          // Drop leading zeros because they throw off row order
-          return String(variables.tint).replace(/^0+/, '');
-        }
-        return variables[variableName];
-      })
-      .join('-');
-}
-
-function getDefaultCaption({ component, by, filter }) {
-  let ret = COMPONENT_NAMES[component];
-
-  by = Array.isArray(by) ? by : [by];
-  ret += ` by ${by.join(' ')}`;
-
-  if (filter) {
-    filter = Array.isArray(filter) ? filter.join(', ') : filter;
-    ret += ` (${filter})`;
-  }
-
-  ret = ret.replace('hue by hue', 'hue by color name');
-
-  return capitalize(ret);
-}
-
-function capitalize(str) {
-  return str[0].toUpperCase() + str.slice(1);
-}
diff --git a/packages/webawesome/src/styles/color/scripts/util.js b/packages/webawesome/src/styles/color/scripts/util.js
deleted file mode 100644
index 8a2837306..000000000
--- a/packages/webawesome/src/styles/color/scripts/util.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import chalk from 'chalk';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-let url = new URL('.', import.meta.url);
-// One level up
-url.pathname = path.join(url.pathname, '..');
-export const PALETTE_DIR = fileURLToPath(url);
-
-export function clamp(min, value, max) {
-  return Math.min(Math.max(min, value), max);
-}
-
-/**
- * Format a comparison by rounding numbers to the lowest number of significant digits that still shows a difference.
- * @param {number} a
- * @param {number} b
- * @returns {string}
- */
-export function formatComparison(a, b) {
-  let op = a < b ? '<' : '>';
-
-  for (let i = 1; i < 10; i++) {
-    let roundedA = a.toPrecision(i);
-    let roundedB = b.toPrecision(i);
-
-    if (roundedA !== roundedB) {
-      return `${roundedA} ${op} ${roundedB}`;
-    }
-  }
-
-  return `${a} ${op} ${b}`;
-}
-
-export function hueToChalk(hue) {
-  let ret;
-
-  if (hue in chalk) {
-    ret = chalk[hue];
-  }
-  switch (hue) {
-    case 'indigo':
-      ret = chalk.hex('#8a8beb');
-      break;
-    case 'purple':
-      ret = chalk.hex('#a94dc6');
-      break;
-  }
-
-  if (ret) {
-    return ret.bold;
-  }
-
-  return chalk.bold;
-}
-
-export function toPrecision(value, precision = 2) {
-  return +Number(value).toPrecision(precision);
-}
-
-export function normalizeAngles(angles) {
-  // First, normalize
-  angles = angles.map(h => ((h % 360) + 360) % 360);
-
-  // Remove top and bottom 25% and find average
-  let averageHue =
-    angles
-      .toSorted((a, b) => a - b)
-      .slice(angles.length / 4, -angles.length / 4)
-      .reduce((a, b) => a + b, 0) / angles.length;
-
-  for (let i = 0; i < angles.length; i++) {
-    let h = angles[i];
-    let prevHue = angles[i - 1];
-    let delta = h - prevHue;
-
-    if (Math.abs(delta) > 180) {
-      let equivalent = [h + 360, h - 360];
-      // Offset hue to minimize difference in the direction that brings it closer to the average
-      let delta = h - averageHue;
-
-      if (Math.abs(equivalent[0] - prevHue) <= Math.abs(equivalent[1] - prevHue)) {
-        angles[i] = equivalent[0];
-      } else {
-        angles[i] = equivalent[1];
-      }
-    }
-  }
-
-  return angles;
-}
-
-export const aggregates = {
-  min: values => Math.min(...values),
-  max: values => Math.max(...values),
-  avg: values => values.reduce((a, b) => a + b, 0) / values.length,
-  count: values => values.length,
-  values: values => values,
-  median: values => {
-    let sorted = values.slice().sort((a, b) => a - b);
-    let mid = Math.floor(sorted.length / 2);
-    return sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
-  },
-  extent: (values, { min, max }) => max - min,
-  mid: (values, { min, max }) => (max + min) / 2,
-};
diff --git a/packages/webawesome/src/utilities/animation-registry.ts b/packages/webawesome/src/utilities/animation-registry.ts
deleted file mode 100644
index fc888963e..000000000
--- a/packages/webawesome/src/utilities/animation-registry.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-export interface ElementAnimation {
-  keyframes: Keyframe[];
-  rtlKeyframes?: Keyframe[];
-  options?: KeyframeAnimationOptions;
-}
-
-export interface ElementAnimationMap {
-  [animationName: string]: ElementAnimation;
-}
-
-export interface GetAnimationOptions {
-  /**
-   * The component's directionality. When set to "rtl", `rtlKeyframes` will be preferred over `keyframes` where
-   * available using getAnimation().
-   */
-  dir: string;
-}
-
-const defaultAnimationRegistry = new Map<string, ElementAnimation>();
-const customAnimationRegistry = new WeakMap<Element, ElementAnimationMap>();
-
-function ensureAnimation(animation: ElementAnimation | null) {
-  return animation ?? { keyframes: [], options: { duration: 0 } };
-}
-
-//
-// Given an ElementAnimation, this function returns a new ElementAnimation where the keyframes property reflects either
-// keyframes or rtlKeyframes depending on the specified directionality.
-//
-function getLogicalAnimation(animation: ElementAnimation, dir: string) {
-  if (dir.toLowerCase() === 'rtl') {
-    return {
-      keyframes: animation.rtlKeyframes || animation.keyframes,
-      options: animation.options,
-    };
-  }
-
-  return animation;
-}
-
-/**
- * Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`
- * for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.
- */
-export function setDefaultAnimation(animationName: string, animation: ElementAnimation | null) {
-  defaultAnimationRegistry.set(animationName, ensureAnimation(animation));
-}
-
-/** Sets a custom animation for the specified element. */
-export function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null) {
-  customAnimationRegistry.set(el, { ...customAnimationRegistry.get(el), [animationName]: ensureAnimation(animation) });
-}
-
-/** Gets an element's animation. Falls back to the default if no animation is found. */
-export function getAnimation(el: Element, animationName: string, options: GetAnimationOptions) {
-  const customAnimation = customAnimationRegistry.get(el);
-
-  // Check for a custom animation
-  if (customAnimation?.[animationName]) {
-    return getLogicalAnimation(customAnimation[animationName], options.dir);
-  }
-
-  // Check for a default animation
-  const defaultAnimation = defaultAnimationRegistry.get(animationName);
-  if (defaultAnimation) {
-    return getLogicalAnimation(defaultAnimation, options.dir);
-  }
-
-  // Fall back to an empty animation
-  return {
-    keyframes: [],
-    options: { duration: 0 },
-  };
-}