update changelog

.github/workflows/client_tests.js.yml

@@ -9,7 +9,6 @@ on:
   pull_request:
     branches: [next]
 
-
 jobs:
   client_test:
     runs-on: ubuntu-latest
@@ -31,17 +30,10 @@ jobs:
         run: npm ci
       - name: Lint
         run: npm run prettier
-        working-directory: ./packages/webawesome
-
       - name: Build
-        run: npm run build
-        working-directory: ./packages/webawesome
-
+        run: npm run build:alpha
       - name: Install Playwright
         run: npx playwright install --with-deps
-        working-directory: ./packages/webawesome
-
       - name: Run CSR tests
         # FAIL_FAST to fail on first failing test.
         run: FAIL_FAST="true" CSR_ONLY="true" npm run test
-        working-directory: ./packages/webawesome

.github/workflows/ssr_tests.js.yml

@@ -1,12 +1,11 @@
-# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+# # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
 name: SSR Tests
 
 on:
-  # push:
-  #   branches: [next]
-  workflow_dispatch:
+  push:
+    branches: [next]
 
 jobs:
   ssr_test:
@@ -26,17 +25,17 @@ jobs:
           cache: 'npm'
       - name: Install dependencies
         run: npm ci
+      # Just lint here too. Save some GH Action minutes and not need to use "depends_on" or anything.
+      - name: Lint
+        run: npm run prettier
 
       - name: Build
-        run: npm run build
-        working-directory: ./packages/webawesome
+        run: npm run build:alpha
 
       - name: Install Playwright
         run: npx playwright install --with-deps
-        working-directory: ./packages/webawesome
 
       - name: Run SSR tests
         # FAIL_FAST to fail on first failing test.
         run: FAIL_FAST="true" SSR_ONLY="true" npm run test
-        working-directory: ./packages/webawesome
 

.gitignore

@@ -1,12 +1,12 @@
 _site
 .cache
 .DS_Store
+package.json
+package-lock.json
 dist/
 dist-cdn/
+docs/public/pagefind
 node_modules
-packages/**/*/src/react
+src/react
+.astro
 cdn/
-yarn.lock
-_bundle_
-/packages/webawesome-pro
-/packages/webawesome-app

.prettierignore

@@ -1,7 +1,5 @@
 *.hbs
 *.md
-!docs/docs/patterns/**/*.md
-docs/docs/patterns/blog-news/post-list.md
 .cache
 .github
 cspell.json
@@ -15,4 +13,4 @@ package-lock.json
 tsconfig.json
 cdn
 _site
-docs/assets/scripts/prism-downloaded.js
+docs/assets/scripts/prism.js

README.md

@@ -31,30 +31,6 @@ If that's not what you're trying to do, the [documentation website](https://weba
 
 Components are built with [LitElement](https://lit-element.polymer-project.org/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/).
 
-### Understanding the Web Awesome monorepo
-
-Web Awesome uses [NPM workspaces](https://docs.npmjs.com/cli/v11/using-npm/workspaces) for its monorepo structure and is fairly minimal in what it provides.
-
-By using a NPM workspaces and a monorepo structure, we can get consistent builds, shared configurations, and reduced duplication across repositories which reduces regressions and forces consistency across `webawesome`, `webawesome-pro`, and `webawesome-app`.
-
-Generally, if you plan to only work with the free version of `webawesome` it is easiest to go to `packages/webawesome` and run all commands from there.
-
-### Where do NPM dependencies go?
-
-Any dependencies intended to be used across all packages (IE: `prettier`, `eslint`) that are _NOT_ used at runtime should be in the root `devDependencies` of `package.json`.
-
-```bash
-npm install -D -w prettier
-```
-
-Any dependencies that will be used at runtime by a package should be part of the specific package's `"dependencies"` such as `lit`. This is required because if that dependency is not in the `packages/*/package.json`, it will not be installed when used via NPM.
-
-Individual packages are also free to install devDependencies as needed as long as they are specific to that package only.
-
-To do install a package specific to a package, change your working directory to that package's root
-
-IE: `cd packages/webawesome && npm install <package-name>`
-
 ### Forking the Repo
 
 Start by [forking the repo](https://github.com/shoelace-style/webawesome/fork) on GitHub, then clone it locally and install dependencies.
@@ -67,10 +43,9 @@ npm install
 
 ### Developing
 
-Once you've cloned the repo, run the following command from the respective directory within `packages/*`
+Once you've cloned the repo, run the following command.
 
 ```bash
-cd packages/webawesome
 npm start
 ```
 
@@ -81,7 +56,6 @@ This will spin up the dev server. After the initial build, a browser will open a
 To generate a production build, run the following command.
 
 ```bash
-cd packages/webawesome
 npm run build
 ```
 
@@ -92,24 +66,15 @@ You can also run `npm run build:serve` to start an [`http-server`](https://www.n
 To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.
 
 ```bash
-cd packages/webawesome
 npm run create wa-tag-name
 ```
 
 This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
 
-### Adding additional packages
-
-Right now the only additional packages are in private repositories.
-
-To add additional packages from other repositories, run: `git clone <url> packages/<package-name>` to clone your repo into `packages/`.
-
-Make sure to run `npm install` at the root of the monorepo after adding your package!
-
 ### Contributing
 
 Web Awesome is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
 
 ## License
 
-Web Awesome is available under the terms of the MIT license.
+Web Awesome is available under the terms of the MIT license.

cspell.json

@@ -15,19 +15,16 @@
     "autoloading",
     "autoplay",
     "bezier",
-    "Blockquotes",
     "boxicons",
     "CACHEABLE",
     "callout",
     "callouts",
-    "canvastext",
     "chatbubble",
     "checkmark",
     "Clippy",
     "codebases",
     "codepen",
     "colocated",
-    "colorjs",
     "colour",
     "combobox",
     "Commonmark",
@@ -61,8 +58,6 @@
     "exportmaps",
     "exportparts",
     "fieldsets",
-    "focusin",
-    "focusout",
     "fontawesome",
     "formaction",
     "formdata",
@@ -72,7 +67,6 @@
     "formtarget",
     "FOUC",
     "FOUCE",
-    "Frontmatter",
     "fullscreen",
     "gestern",
     "giga",
@@ -134,7 +128,6 @@
     "petabit",
     "Preact",
     "preconnect",
-    "prerendered",
     "prismjs",
     "progressbar",
     "radiogroup",
@@ -155,7 +148,6 @@
     "scrollbars",
     "scrollend",
     "scroller",
-    "Scrollers",
     "Segoe",
     "semibold",
     "shadowrootmode",

custom-elements-manifest.js

@@ -4,11 +4,8 @@ import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
 import { parse } from 'comment-parser';
 import fs from 'fs';
 import { pascalCase } from 'pascal-case';
-import * as url from 'url';
-import * as path from "node:path"
-const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 
-const packageData = JSON.parse(fs.readFileSync(path.join(__dirname, 'package.json'), 'utf8'));
+const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 const { name, description, version, author, homepage, license } = packageData;
 const outdir = 'dist-cdn';
 
@@ -186,4 +183,3 @@ export default {
     // })
   ],
 };
-

docs/.eleventy.js

@@ -0,0 +1,178 @@
+import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
+import { codeExamplesPlugin } from './_utils/code-examples.js';
+import { copyCodePlugin } from './_utils/copy-code.js';
+import { currentLink } from './_utils/current-link.js';
+import { highlightCodePlugin } from './_utils/highlight-code.js';
+import { markdown } from './_utils/markdown.js';
+import { removeDataAlphaElements } from './_utils/remove-data-alpha-elements.js';
+// import { formatCodePlugin } from './_utils/format-code.js';
+import litPlugin from '@lit-labs/eleventy-plugin-lit';
+import { readFile } from 'fs/promises';
+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';
+
+import process from 'process';
+
+const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
+const isAlpha = process.argv.includes('--alpha');
+const isDev = process.argv.includes('--develop');
+
+const globalData = {
+  package: packageData,
+  isAlpha,
+  layout: 'page.njk',
+};
+
+const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
+const passThrough = [...passThroughExtensions.map(ext => 'docs/**/*.' + ext)];
+
+export default function (eleventyConfig) {
+  // NOTE - alpha setting removes certain pages
+  if (isAlpha) {
+    eleventyConfig.ignores.add('**/experimental/**');
+    eleventyConfig.ignores.add('**/layout/**');
+    eleventyConfig.ignores.add('**/patterns/**');
+    eleventyConfig.ignores.add('**/style-utilities/**');
+    eleventyConfig.ignores.add('**/components/code-demo.md');
+    eleventyConfig.ignores.add('**/components/viewport-demo.md');
+  }
+
+  // Add template data
+  for (let name in globalData) {
+    eleventyConfig.addGlobalData(name, globalData[name]);
+  }
+
+  // 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]);
+  }
+
+  // Shortcodes - {% shortCode arg1, arg2 %}
+  eleventyConfig.addShortcode('cdnUrl', location => {
+    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, '');
+  });
+
+  // Paired shortcodes - {% shortCode %}content{% endShortCode %}
+  eleventyConfig.addPairedShortcode('markdown', content => markdown.render(content || ''));
+
+  // Helpers
+
+  // Remove elements that have [data-alpha="remove"]
+  eleventyConfig.addPlugin(removeDataAlphaElements({ isAlpha }));
+
+  // Use our own markdown instance
+  eleventyConfig.setLibrary('md', markdown);
+
+  // Add anchors to headings
+  eleventyConfig.addPlugin(anchorHeadingsPlugin({ container: '#content' }));
+
+  // Add an outline to the page
+  eleventyConfig.addPlugin(
+    outlinePlugin({
+      container: '#content',
+      target: '.outline-links',
+      selector: 'h2, h3',
+      ifEmpty: doc => {
+        doc.querySelector('#outline')?.remove();
+      },
+    }),
+  );
+
+  // Add current link classes
+  eleventyConfig.addPlugin(currentLink());
+
+  // Add code examples for `<code class="example">` blocks
+  eleventyConfig.addPlugin(codeExamplesPlugin);
+
+  // Highlight code blocks with Prism
+  eleventyConfig.addPlugin(highlightCodePlugin());
+
+  // Add copy code buttons to code blocks
+  eleventyConfig.addPlugin(copyCodePlugin());
+
+  // Various text replacements
+  eleventyConfig.addPlugin(
+    replaceTextPlugin([
+      // Replace [issue:1234] with a link to the issue on GitHub
+      {
+        replace: /\[pr:([0-9]+)\]/gs,
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1">#$1</a>',
+      },
+      // Replace [pr:1234] with a link to the pull request on GitHub
+      {
+        replace: /\[issue:([0-9]+)\]/gs,
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1">#$1</a>',
+      },
+      // Replace [discuss:1234] with a link to the discussion on GitHub
+      {
+        replace: /\[discuss:([0-9]+)\]/gs,
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1">#$1</a>',
+      },
+    ]),
+  );
+
+  // SSR plugin
+  if (!isDev) {
+    //
+    // Problematic components in SSR land:
+    //  - animation (breaks on navigation + ssr with Turbo)
+    //  - mutation-observer (why SSR this?)
+    //  - resize-observer (why SSR this?)
+    //  - tooltip (why SSR this?)
+    //
+    const omittedModules = [];
+    const componentModules = componentList
+      .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
+      .map(component => {
+        const name = component.tagName.split(/wa-/)[1];
+        return `./dist/components/${name}/${name}.js`;
+      });
+
+    eleventyConfig.addPlugin(litPlugin, {
+      mode: 'worker',
+      componentModules,
+    });
+  }
+
+  // Build the search index
+  eleventyConfig.addPlugin(
+    searchPlugin({
+      filename: '',
+      selectorsToIgnore: ['code.example'],
+      getContent: doc => doc.querySelector('#content')?.textContent ?? '',
+    }),
+  );
+
+  // Production-only plugins
+  //
+  // TODO - disabled because it takes about a minute to run now
+  //
+  // if (!isDev) {
+  //   // Run Prettier on each file (prod only because it can be slow)
+  //   eleventyConfig.addPlugin(formatCodePlugin());
+  // }
+
+  eleventyConfig.addPassthroughCopy({
+    'docs/assets': 'assets',
+  });
+
+  for (let glob of passThrough) {
+    eleventyConfig.addPassthroughCopy(glob);
+  }
+
+  return {
+    markdownTemplateEngine: 'njk',
+    dir: {
+      input: 'docs',
+      includes: '_includes',
+      layouts: '_layouts',
+    },
+    templateFormats: ['njk', 'md'],
+  };
+}

docs/_data/componentList.js

@@ -2,15 +2,12 @@
  * @module components Fetches components from custom-elements.json and exposes them in a saner format.
  */
 import { readFileSync } from 'fs';
-import { join, dirname, resolve } from 'path';
+import { dirname, 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 manifest = JSON.parse(readFileSync(resolve(__dirname, '../../dist/custom-elements.json'), 'utf-8'));
 
 const components = manifest.modules.flatMap(module => {
   return module.declarations
@@ -76,4 +73,3 @@ components.sort((a, b) => {
 });
 
 export default components;
-

docs/_data/hues.json

@@ -0,0 +1 @@
+["red", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"]

docs/_includes/base.njk

@@ -1,16 +1,16 @@
 <!DOCTYPE html>
-<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}" class="wa-cloak">
+<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
   <head>
     {% include 'head.njk' %}
     <meta name="theme-color" content="#f36944">
 
     <script type="module" src="/assets/scripts/code-examples.js"></script>
+    <script type="module" src="/assets/scripts/copy-code.js"></script>
+
     <script type="module" src="/assets/scripts/scroll.js"></script>
     <script type="module" src="/assets/scripts/turbo.js"></script>
     <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 #}
@@ -20,7 +20,7 @@
   </head>
   <body class="layout-{{ layout | stripExtension }}{{ ' page-wide' if wide }}">
     <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
-    <wa-page view="desktop" disable-navigation-toggle="" mobile-breakpoint="1140">
+    <wa-page view="desktop" disable-navigation-toggle="">
       <header slot="header" class="wa-split">
         {# Logo #}
         <div id="docs-branding">
@@ -33,13 +33,13 @@
             <span class="wa-desktop-only">{% include "logo.njk" %}</span>
             <span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
           </a>
-          <small id="version-number" class="wa-desktop-only">{{ package.version }}</small>
-          <wa-badge variant="warning" appearance="filled" class="wa-desktop-only">Alpha</wa-badge>
+          <small id="version-number" class="only-desktop">{{ package.version }}</small>
+          <wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
         </div>
 
         <div id="docs-toolbar" class="wa-cluster wa-gap-xs">
           {# Desktop selectors #}
-          <div class="wa-desktop-only wa-cluster wa-gap-xs">
+          <div class="only-desktop wa-cluster wa-gap-xs">
             {% include "preset-theme-selector.njk" %}
             {% include "color-scheme-selector.njk" %}
           </div>
@@ -48,11 +48,8 @@
           <wa-button id="search-trigger" appearance="outlined" size="small" data-search>
             <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
             Search
-            <kbd slot="suffix" class="wa-desktop-only">/</kbd>
+            <kbd slot="suffix" class="only-desktop">/</kbd>
           </wa-button>
-
-          {# Login #}
-          {% server "loginOrAvatar" %}
         </div>
       </header>
 
@@ -79,19 +76,14 @@
         </aside>
       {% endif %}
 
-
       {# Main #}
       <main id="content">
         {# Expandable outline #}
-        {% if hasOutline %}
         <nav id="outline-expandable">
           <details class="outline-links">
             <summary>On this page</summary>
           </details>
         </nav>
-        {% endif %}
-
-        <div id="flashes">{% server "flashes" %}</div>
 
         {% block header %}
           {% include 'breadcrumbs.njk' %}

docs/_includes/breadcrumbs.njk

@@ -0,0 +1,10 @@
+{% set breadcrumbs = page.url | breadcrumbs %}
+{% if breadcrumbs.length > 0 %}
+  <wa-breadcrumb id="docs-breadcrumbs">
+  {% for crumb in breadcrumbs %}
+    <wa-breadcrumb-item href="{{ crumb.url }}">{{ crumb.title }}</wa-breadcrumb-item>
+  {% endfor %}
+  <wa-breadcrumb-item>{# Current page #}</wa-breadcrumb-item>
+  </wa-breadcrumb>
+  {% else %}
+{% endif %}

docs/_includes/contrast-table.njk

@@ -0,0 +1,40 @@
+<table class="colors wa-palette-{{ paletteId }}">
+  <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>
+  <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 %}
+      <td>
+        <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})">
+          {% set contrast_wcag = '' %}
+          {% if color_fg and color_bg %}
+            {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
+          {% endif %}
+          {% if contrast_wcag %}
+          {{ contrast_wcag | number({maximumSignificantDigits: 2}) }}
+          {% else %}
+          {{ tint_fg }} on {{ tint_bg }}
+          {% endif %}
+        </div>
+      </td>
+      {% endif %}
+    {%- endfor -%}
+  {%- endfor -%}
+</tr>
+{%- endfor %}
+</table>

docs/_includes/grouped-pages.njk

@@ -0,0 +1,12 @@
+{# Cards for pages listed by category #}
+
+<section id="grid" class="index-grid">
+{% for category, pages in allPages | groupByTags(categories) -%}
+  <h2 class="index-category">{{ category | getCategoryTitle(categories) }}</h2>
+    {%- for page in pages -%}
+      {%- if not page.data.parent or listChildren -%}
+        {% include "page-card.njk" %}
+      {%- endif -%}
+    {%- endfor -%}
+{%- endfor -%}
+</section>

docs/_includes/head.njk

@@ -1,7 +1,7 @@
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="description" content="{{ description }}">
-{% if noindex or unlisted %}<meta name="robots" content="noindex">{% endif %}
+{% if noindex %}<meta name="robots" content="noindex">{% endif %}
 
 <title>{{ title }}</title>
 
@@ -23,32 +23,14 @@
 <script src="/assets/scripts/hydration-errors.js"></script>
 <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>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
 
 {# Web Awesome #}
-<script type="module" src="/dist/webawesome.loader.js"></script>
-
-{# Fallback loading when using the free repo #}
-<link rel="preconnect" href="https://early.webawesome.com">
-<script type="module">
-  document.addEventListener("wa-discovery-complete", loadLayout)
-  function loadLayout () {
-    if (!customElements.get("wa-page")) {
-      import("https://early.webawesome.com/webawesome@3.0.0-alpha.13/dist/components/page/page.js")
-        .catch((e) => {
-          console.error(e)
-        // known errors with dual registration. This is only a thing in the free repo.
-        })
-    }
-  }
-</script>
+<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
 
 <script type="module" src="/assets/scripts/theme-picker.js"></script>
 {# Preset Theme #}
-{% if noTheme %}
-{% elif forceTheme %}
+{% if 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>
@@ -63,6 +45,5 @@
 {% endif %}
 
 <link rel="stylesheet" href="/dist/styles/webawesome.css" />
-
-{# Used by Web Awesome App to inject other assets into the head. #}
-{% server "head" %}
+<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
+<link rel="stylesheet" href="/dist/styles/forms.css" />

docs/_includes/page-card.njk

@@ -1,13 +1,13 @@
 {%- if not page.data.unlisted -%}
-{% if page.url %}<a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>{% endif %}
+<a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>
 	<wa-card with-header>
 		<div slot="header">
-		{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" ignore missing %}
+		{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
 		</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 %}
+</a>
 {% endif %}

docs/_includes/page-demo.njk

@@ -1,5 +1,5 @@
 <div id="page_slots_demo">
-<link rel="stylesheet" href="/docs/components/page/demo.css">
+<link rel="stylesheet" href="./demo.css">
 {% set slots = components.page.slots %}
 
 <fieldset id="page_slots_fieldset">
@@ -22,5 +22,5 @@
 
 <script type="module">
   const cacheBust = new Date().toString()
-  import(`/docs/components/page/demo.js?${cacheBust}`)
+  import(`./demo.js?${cacheBust}`)
 </script>

docs/_includes/preset-theme-selector.njk

@@ -2,7 +2,7 @@
 <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 }}">
+    <wa-option value="{{ theme.page.fileSlug }}"{{ ' data-alpha="remove"' if theme.noAlpha }}>
       {{ theme.data.title }}
     </wa-option>
   {% endfor %}

docs/_includes/search.njk

@@ -1,4 +1,4 @@
-<wa-dialog id="site-search" without-header light-dismiss>
+<wa-dialog id="site-search" no-header light-dismiss>
   <div id="site-search-container">
     {# Header #}
     <header>
@@ -8,7 +8,7 @@
           type="search"
           appearance="filled"
           size="large"
-          with-clear
+          clearable
           placeholder="Search"
           autofocus
           autocomplete="off"

docs/_includes/sidebar-group.njk

@@ -0,0 +1,22 @@
+{# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
+{% if collections[tag] -%}
+  {% set groupUrl %}/docs/{{ tag }}/{% endset %}
+  <wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | attr('open') }}>
+    <h2 slot="summary">
+      {% if groupUrl | getCollectionItemFromUrl %}
+        <a href="{{ groupUrl }}" title="Overview">{{ title or (tag | capitalize) }}
+          <wa-icon name="grid-2"></wa-icon>
+        </a>
+      {% else %}
+        {{ title or (tag | capitalize) }}
+      {% endif %}
+    </h2>
+    <ul>
+      {% for page in collections[tag] | sort %}
+        {% if not page.data.parent -%}
+          {% include 'sidebar-link.njk' %}
+        {%- endif %}
+      {% endfor %}
+    </ul>
+  </wa-details>
+{%- endif %}

docs/_includes/sidebar-link.njk

@@ -0,0 +1,16 @@
+{% if not (isAlpha and page.data.noAlpha) and page.fileSlug != tag and not page.data.unlisted -%}
+	<li>
+		<a href="{{ page.url }}">{{ page.data.title }}</a>
+		{% if page.data.status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
+		{% if page.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
+
+		{% set children = page.data.children %}
+		{% if children.length > 0 %}
+			<ul>
+				{% for page in children %}
+					{% include 'sidebar-link.njk' %}
+				{% endfor %}
+			</ul>
+		{% endif %}
+	</li>
+{%- endif %}

docs/_includes/sidebar.njk

@@ -0,0 +1,33 @@
+{# Getting started #}
+<h2>Getting Started</h2>
+<ul>
+  <li><a href="/docs/installation">Installation</a></li>
+  <li><a href="/docs/usage">Usage</a></li>
+  <li><a href="/docs/customizing">Customizing</a></li>
+  <li><a href="/docs/form-controls">Form Controls</a></li>
+  <li><a href="/docs/localization">Localization</a></li>
+</ul>
+
+{# Resources #}
+<h2>Resources</h2>
+<ul>
+  <li><a href="https://github.com/shoelace-style/webawesome-alpha/discussions" target="_blank">Help &amp; Support</a></li>
+  <li><a href="/docs/resources/community">Community</a></li>
+  <li><a href="/docs/resources/accessibility">Accessibility</a></li>
+  <li><a href="/docs/resources/contributing">Contributing</a></li>
+  <li><a href="/docs/resources/changelog">Changelog</a></li>
+  <li><a href="/docs/resources/visual-tests">Visual Tests</a></li>
+</ul>
+
+{% for tag, title in {
+  'themes': 'Themes',
+  'components': 'Components',
+  'native': 'Native Styles',
+  'utilities': 'Style Utilities',
+  'layout': 'Layout',
+  'patterns': 'Patterns',
+  'palettes': 'Color Palettes',
+  'tokens': 'Design Tokens'
+} %}
+  {% include 'sidebar-group.njk' %}
+{% endfor %}

docs/_includes/status.njk

@@ -3,7 +3,12 @@
 {% endif -%}
 
 {%- if status %}
-	{%- if status == "experimental" %}
+	{%- if status == "wip" %}
+	<wa-badge variant="danger">
+		<wa-icon name="pickaxe"></wa-icon>
+		Work In Progress
+	</wa-badge>
+	{%- elif status == "experimental" %}
 	<wa-badge variant="warning">
 		<wa-icon name="flask"></wa-icon>
 		Experimental

docs/_includes/svgs/palette.njk

@@ -0,0 +1,24 @@
+{% set paletteId = palette.fileSlug or page.fileSlug %}
+{% set tints = [80, 60, 40, 20] %}
+{% set width = 20 %}
+{% set height = 13 %}
+{% set gap_x = 3 %}
+{% set gap_y = 3 %}
+
+<svg viewBox="0 0 {{ (width + gap_x) * hues|length }} {{ (height + gap_y) * tints|length }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
+<style>
+	@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});
+	.palette-icon {
+		height: 8ch;
+	}
+</style>
+
+{% for hue in hues -%}
+  {% set hueIndex = loop.index0 %}
+  {% for tint in tints -%}
+    <rect x="{{ hueIndex * (width + gap_x) }}" y="{{ loop.index0 * (height + gap_y) }}"
+	      width="{{ width }}" height="{{ height }}"
+	      fill="var(--wa-color-{{ hue }}-{{ tint }})" rx="4" />
+  {%- endfor %}
+{% endfor %}
+</svg>

docs/_includes/svgs/theme-color.njk

@@ -1,13 +1,13 @@
 {% set themeId = theme.fileSlug %}
 
-<wa-scoped class="theme-icon-host theme-color-icon-host">
-  <template>
+<div>
+  <template shadowrootmode="open">
     <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="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>
@@ -21,4 +21,4 @@
       {# <div class="wa-warning wa-outlined wa-filled"><wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon></div> #}
     </div>
   </template>
-</wa-scoped>
+</div>

docs/_includes/svgs/theme-typography.njk

@@ -1,16 +1,16 @@
-{% set themeId = theme.fileSlug or page.fileSlug %}
+{% set themeId = theme.fileSlug %}
 
-<wa-scoped class="theme-icon-host theme-typography-icon-host">
-  <template>
+<div>
+  <template shadowrootmode="open">
     <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">
+    <div class="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>
+</div>

docs/_includes/theme-showcase.njk

@@ -0,0 +1,144 @@
+<div class="showcase-examples-wrapper" aria-hidden="true" data-no-outline>
+  <div class="showcase-examples">
+    <wa-card with-header with-footer>
+      <div slot="header" class="wa-split">
+        <h3 class="wa-heading-m">Your Cart</h3>
+        <wa-icon-button name="xmark" tabindex="-1"></wa-icon-button>
+      </div>
+      <div class="wa-stack wa-gap-xl">
+        <div class="wa-flank">
+          <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-green-60); --text-color: var(--wa-color-green-95);">
+            <wa-icon slot="icon" name="sword-laser" family="duotone" style="font-size: 1.5em;"></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="--size: 3em; --background-color: var(--wa-color-cyan-60); --text-color: var(--wa-color-cyan-95);">
+            <wa-icon slot="icon" name="robot-astromech" family="duotone" style="font-size: 1.5em;"></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" family="duotone" 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 with-footer>
+      <div class="wa-stack">
+        <div class="wa-split">
+          <h3 class="wa-heading-m">To-Do</h3>
+          <wa-icon-button tabindex="-1" name="plus" label="Add task"></wa-icon-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-icon-button tabindex="-1" name="ellipsis" label="Options"></wa-icon-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-icon-button tabindex="-1" name="backward" label="Skip backward"></wa-icon-button>
+          <wa-icon-button tabindex="-1" name="pause" style="font-size: var(--wa-font-size-2xl);" label="Pause"></wa-icon-button>
+          <wa-icon-button tabindex="-1" name="forward" label="Skip forward"></wa-icon-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" read-only></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>
+  </div>
+</div>