Merge pull request #859 from shoelace-style/kj/patterns-home-stretch

Kj/patterns home stretch

.github/workflows/client_tests.js.yml

@@ -4,13 +4,11 @@
 name: Client Tests
 
 on:
-  workflow_dispatch:
   push:
     branches: [next]
   pull_request:
     branches: [next]
 
-
 jobs:
   client_test:
     runs-on: ubuntu-latest
@@ -32,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

@@ -26,17 +26,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,23 +1,16 @@
-# Files are relative to .prettierignore at the root of this monorepo.
-# <https://github.com/prettier/prettier-vscode/issues/1252>
-
 *.hbs
 *.md
-!packages/webawesome/docs/docs/patterns/**/*.md
-docs/docs/patterns/blog-news/post-list.md
-**/*/.cache
+.cache
 .github
 cspell.json
-packages/**/*/dist
-packages/**/*/dist-cdn
-packages/**/*/docs/search.json
-packages/**/*/src/components/icon/icons
-packages/**/*/src/react/index.ts
-**/*/package.json
-**/*/package-lock.json
-**/*/tsconfig.json
-**/*/tsconfig.prod.json
+dist
+docs/search.json
+src/components/icon/icons
+src/react/index.ts
 node_modules
-
-packages/**/*/_site
-packages/webawesome/docs/assets/scripts/prism-downloaded.js
+package.json
+package-lock.json
+tsconfig.json
+cdn
+_site
+docs/assets/scripts/prism-downloaded.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",
@@ -125,7 +119,6 @@
     "noreferrer",
     "novalidate",
     "Numberish",
-    "nums",
     "oklab",
     "oklch",
     "onscrollend",
@@ -135,12 +128,10 @@
     "petabit",
     "Preact",
     "preconnect",
-    "prerendered",
     "prismjs",
     "progressbar",
     "radiogroup",
     "Railsbyte",
-    "referrerpolicy",
     "remixicon",
     "reregister",
     "resizer",
@@ -157,7 +148,6 @@
     "scrollbars",
     "scrollend",
     "scroller",
-    "Scrollers",
     "Segoe",
     "semibold",
     "shadowrootmode",
@@ -167,7 +157,6 @@
     "slotchange",
     "smartquotes",
     "spacebar",
-    "srcdoc",
     "stylesheet",
     "svgs",
     "Tabbable",

custom-elements-manifest.js

@@ -3,12 +3,9 @@ import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
 // import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
 import { parse } from 'comment-parser';
 import fs from 'fs';
-import * as path from 'node:path';
 import { pascalCase } from 'pascal-case';
-import * as url from 'url';
-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';
 

docs/.eleventy.js

@@ -1,4 +1,3 @@
-import * as fs from 'node:fs';
 import * as path from 'node:path';
 import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
 import { codeExamplesPlugin } from './_utils/code-examples.js';
@@ -6,6 +5,7 @@ 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';
@@ -22,10 +22,12 @@ import * as url from 'url';
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 
 const packageData = JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
+const isAlpha = process.argv.includes('--alpha');
 const isDev = process.argv.includes('--develop');
 
 const globalData = {
   package: packageData,
+  isAlpha,
   layout: 'page.njk',
   server: {
     head: '',
@@ -34,21 +36,25 @@ const globalData = {
   },
 };
 
-export default async function (eleventyConfig) {
-  /**
-   * If you plan to add or remove any of these extensions, make sure to let either Konnor or Cory know as these passthrough extensions
-   * will also need to be updated in the Web Awesome App.
-   */
-  const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
-
-  const docsDir = path.join(process.env.BASE_DIR || '.', 'docs');
-  const passThrough = [...passThroughExtensions.map(ext => path.join(docsDir, '**/*.' + ext))];
+const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
+const passThrough = [...passThroughExtensions.map(ext => 'docs/**/*.' + ext)];
 
+export default function (eleventyConfig) {
   /**
    * This is the guard we use for now to make sure our final built files dont need a 2nd pass by the server. This keeps us able to still deploy the bare HTML files on Vercel until the app is ready.
    */
   const serverBuild = process.env.WEBAWESOME_SERVER === 'true';
 
+  // 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]);
@@ -103,6 +109,9 @@ export default async function (eleventyConfig) {
 
   // Helpers
 
+  // Remove elements that have [data-alpha="remove"]
+  eleventyConfig.addPlugin(removeDataAlphaElements({ isAlpha }));
+
   // Use our own markdown instance
   eleventyConfig.setLibrary('md', markdown);
 
@@ -125,7 +134,7 @@ export default async function (eleventyConfig) {
   eleventyConfig.addPlugin(currentLink());
 
   // Add code examples for `<code class="example">` blocks
-  eleventyConfig.addPlugin(codeExamplesPlugin());
+  eleventyConfig.addPlugin(codeExamplesPlugin);
 
   // Highlight code blocks with Prism
   eleventyConfig.addPlugin(highlightCodePlugin());
@@ -136,10 +145,6 @@ export default async function (eleventyConfig) {
   // Various text replacements
   eleventyConfig.addPlugin(
     replaceTextPlugin([
-      {
-        replace: /\[version\]/gs,
-        replaceWith: packageData.version,
-      },
       // Replace [issue:1234] with a link to the issue on GitHub
       {
         replace: /\[pr:([0-9]+)\]/gs,
@@ -176,8 +181,9 @@ export default async function (eleventyConfig) {
   //   eleventyConfig.addPlugin(formatCodePlugin());
   // }
 
-  let assetsDir = path.join(process.env.BASE_DIR || 'docs', 'assets');
-  fs.cpSync(assetsDir, path.join(eleventyConfig.directories.output, 'assets'), { recursive: true });
+  eleventyConfig.addPassthroughCopy({
+    'docs/assets': 'assets',
+  });
 
   for (let glob of passThrough) {
     eleventyConfig.addPassthroughCopy(glob);
@@ -207,14 +213,14 @@ export default async function (eleventyConfig) {
   //     componentModules,
   //   });
   // }
-}
 
-export const config = {
-  markdownTemplateEngine: 'njk',
-  dir: {
-    input: 'docs',
-    includes: '_includes',
-    layouts: '_layouts',
-  },
-  templateFormats: ['njk', 'md'],
-};
+  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 { dirname, join, 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

docs/_data/componentsBy.js

@@ -0,0 +1,43 @@
+import components from './components.js';
+
+const by = {
+  attribute: {},
+  slot: {},
+  event: {},
+  method: {},
+  cssPart: {},
+  cssProperty: {},
+};
+
+function getAll(component, type) {
+  let prop = type + 's';
+  if (type === 'cssProperty') {
+    prop = 'cssProperties';
+  }
+
+  return component[prop] ?? [];
+}
+
+for (const componentName in components) {
+  const component = components[componentName];
+
+  for (const type of ['attribute', 'slot', 'event', 'method', 'cssPart', 'cssProperty']) {
+    for (const item of getAll(component, type)) {
+      by[type][item.name] ??= [];
+      by[type][item.name].push(component);
+    }
+  }
+}
+
+// Sort by descending number of components
+const sortByLengthDesc = (a, b) => b[1].length - a[1].length;
+
+for (const key in by) {
+  by[key] = sortObject(by[key], sortByLengthDesc);
+}
+
+export default by;
+
+function sortObject(obj, sorter) {
+  return Object.fromEntries(Object.entries(obj).sort(sorter));
+}

docs/_data/hueRanges.js

@@ -0,0 +1 @@
+export { hueRanges as default } from '../assets/scripts/tweak/data.js';

docs/_includes/base.njk

@@ -5,11 +5,11 @@
     <meta name="theme-color" content="#f36944">
 
     <script type="module" src="/assets/scripts/code-examples.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>
 
@@ -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="1180">
+    <wa-page view="desktop" disable-navigation-toggle="">
       <header slot="header" class="wa-split">
         {# Logo #}
         <div id="docs-branding">
@@ -33,22 +33,22 @@
             <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>
 
           {# Search #}
           <wa-button id="search-trigger" appearance="outlined" size="small" data-search>
-            <wa-icon slot="start" name="magnifying-glass"></wa-icon>
+            <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
             Search
-            <kbd slot="end" class="wa-desktop-only">/</kbd>
+            <kbd slot="suffix" class="only-desktop">/</kbd>
           </wa-button>
 
           {# Login #}

docs/_includes/color-scheme-selector.njk

@@ -0,0 +1,19 @@
+{# 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>
+  <wa-option value="light">
+    <wa-icon slot="prefix" name="sun" variant="regular"></wa-icon>
+    Light
+  </wa-option>
+  <wa-option value="dark">
+    <wa-icon slot="prefix" name="moon" variant="regular"></wa-icon>
+    Dark
+  </wa-option>
+  <wa-divider></wa-divider>
+  <wa-option value="auto">
+    <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>
+    System
+  </wa-option>
+</wa-select>

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>
 
@@ -30,25 +30,9 @@
 {# 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="/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 +47,8 @@
 {% endif %}
 
 <link rel="stylesheet" href="/dist/styles/webawesome.css" />
+<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
+<link rel="stylesheet" href="/dist/styles/forms.css" />
 
 {# Used by Web Awesome App to inject other assets into the head. #}
 {% server "head" %}

docs/_includes/page-card.njk

@@ -1,5 +1,5 @@
 {%- 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 %}
@@ -9,5 +9,5 @@
 		<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">
@@ -15,11 +15,12 @@
   {% endfor %}
   </div>
 </fieldset>
-
-<wa-zoomable-frame srcdoc="" zoom="0.5" id="page_slots_iframe"></wa-zoomable-frame>
+<wa-viewport-demo viewport="1000">
+<iframe srcdoc="" id="page_slots_iframe"></iframe>
+</wa-viewport-demo>
 </div>
 
 <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

@@ -1,8 +1,8 @@
 {# Preset theme selector #}
 <wa-select appearance="filled" size="small" value="default" pill class="preset-theme-selector">
-  <wa-icon slot="start" name="paintbrush" variant="regular"></wa-icon>
+  <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"
@@ -24,7 +24,7 @@
           aria-haspopup="listbox"
           aria-activedescendant
         >
-          <wa-icon slot="start" name="search"></wa-icon>
+          <wa-icon slot="prefix" name="search"></wa-icon>
         </wa-input>
       </div>
     </header>

docs/_includes/sidebar-group.njk

@@ -0,0 +1,23 @@
+{# 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 %}
+  {% set groupItem = groupUrl | getCollectionItemFromUrl %}
+  {% set children = groupItem.data.children if groupItem.data.children.length > 0 else (collections[tag] | sort) %}
+
+  <wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | attr('open') }}>
+    <h2 slot="summary">
+      {% if groupItem %}
+        <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 children %}
+          {% include 'sidebar-link.njk' %}
+      {% endfor %}
+    </ul>
+  </wa-details>
+{%- endif %}

docs/_includes/sidebar-link.njk

@@ -0,0 +1,16 @@
+{% if page | show -%}
+	<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</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/icon-button.njk

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H26C29.3137 0 32 2.68629 32 6V26C32 29.3137 29.3137 32 26 32H6C2.68629 32 0 29.3137 0 26V6Z" fill="var(--wa-color-neutral-fill-normal)"/>
+<path d="M23.4688 13.2188C23.5938 13.5 23.5 13.7812 23.2812 14L21.9375 15.2188C21.9688 15.4688 21.9688 15.75 21.9688 16C21.9688 16.2812 21.9688 16.5625 21.9375 16.8125L23.2812 18.0312C23.5 18.2188 23.5938 18.5312 23.4688 18.8125C23.3438 19.1875 23.1875 19.5312 23 19.875L22.8438 20.125C22.625 20.4688 22.4062 20.8125 22.1562 21.0938C21.9688 21.3438 21.6562 21.4062 21.375 21.3125L19.6562 20.7812C19.2188 21.0938 18.75 21.3438 18.2812 21.5625L17.875 23.3438C17.8125 23.625 17.5938 23.8438 17.3125 23.9062C16.875 23.9688 16.4375 24 15.9688 24C15.5312 24 15.0938 23.9688 14.6562 23.9062C14.375 23.8438 14.1562 23.625 14.0938 23.3438L13.6875 21.5625C13.1875 21.3438 12.75 21.0938 12.3125 20.7812L10.5938 21.3125C10.3125 21.4062 10 21.3438 9.8125 21.125C9.5625 20.8125 9.34375 20.4688 9.125 20.125L8.96875 19.875C8.78125 19.5312 8.625 19.1875 8.5 18.8125C8.375 18.5312 8.46875 18.25 8.6875 18.0312L10.0312 16.8125C10 16.5625 10 16.2812 10 16C10 15.75 10 15.4688 10.0312 15.2188L8.6875 14C8.46875 13.7812 8.375 13.5 8.5 13.2188C8.625 12.8438 8.78125 12.5 8.96875 12.1562L9.125 11.9062C9.34375 11.5625 9.5625 11.2188 9.8125 10.9062C10 10.6875 10.3125 10.625 10.5938 10.7188L12.3125 11.25C12.75 10.9375 13.2188 10.6562 13.6875 10.4688L14.0938 8.6875C14.1562 8.40625 14.375 8.1875 14.6562 8.125C15.0938 8.0625 15.5312 8 16 8C16.4375 8 16.875 8.0625 17.3125 8.125C17.5938 8.15625 17.8125 8.40625 17.875 8.6875L18.2812 10.4688C18.7812 10.6562 19.2188 10.9375 19.6562 11.25L21.375 10.7188C21.6562 10.625 21.9688 10.6875 22.1562 10.9062C22.4062 11.2188 22.625 11.5625 22.8438 11.9062L23 12.1562C23.1875 12.5 23.3438 12.8438 23.5 13.2188H23.4688ZM16 18.5C16.875 18.5 17.6875 18.0312 18.1562 17.25C18.5938 16.5 18.5938 15.5312 18.1562 14.75C17.6875 14 16.875 13.5 16 13.5C15.0938 13.5 14.2812 14 13.8125 14.75C13.375 15.5312 13.375 16.5 13.8125 17.25C14.2812 18.0312 15.0938 18.5 16 18.5Z" fill="var(--wa-color-neutral-on-normal)"/>
+</svg>