fix documentation

.eslintignore

@@ -0,0 +1,10 @@
+.cache
+docs/dist
+docs/search.json
+docs/**/*.min.js
+dist
+examples
+node_modules
+src/react
+scripts
+

.eslintrc.cjs

@@ -0,0 +1,213 @@
+/* eslint-env node */
+
+module.exports = {
+  plugins: [
+    '@typescript-eslint',
+    'wc',
+    'lit',
+    'lit-a11y',
+    'chai-expect',
+    'chai-friendly',
+    'import',
+    'sort-imports-es6-autofix'
+  ],
+  extends: [
+    'eslint:recommended',
+    'plugin:wc/recommended',
+    'plugin:wc/best-practice',
+    'plugin:lit/recommended',
+    'plugin:lit-a11y/recommended'
+  ],
+  env: {
+    es2021: true,
+    browser: true
+  },
+  parserOptions: {
+    sourceType: 'module'
+  },
+  overrides: [
+    {
+      extends: [
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:@typescript-eslint/recommended-requiring-type-checking'
+      ],
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        sourceType: 'module',
+        project: './tsconfig.json',
+        tsconfigRootDir: __dirname
+      },
+      files: ['*.ts'],
+      rules: {
+        'default-param-last': 'off',
+        '@typescript-eslint/default-param-last': 'error',
+        'no-console': 'warn',
+        'no-empty-function': 'off',
+        '@typescript-eslint/no-empty-function': 'warn',
+        'no-implied-eval': 'off',
+        'no-invalid-this': 'off',
+        'no-shadow': 'off',
+        'no-throw-literal': 'off',
+        'no-unused-expressions': 'off',
+        'lit-a11y/no-autofocus': 'off',
+        '@typescript-eslint/no-implied-eval': 'error',
+        '@typescript-eslint/no-invalid-this': 'error',
+        '@typescript-eslint/no-throw-literal': 'error',
+        '@typescript-eslint/no-shadow': 'error',
+        '@typescript-eslint/prefer-regexp-exec': 'off',
+        '@typescript-eslint/no-unused-expressions': 'error',
+        '@typescript-eslint/unbound-method': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        '@typescript-eslint/no-floating-promises': 'off',
+        '@typescript-eslint/no-misused-promises': [
+          'error',
+          {
+            checksVoidReturn: false
+          }
+        ],
+        '@typescript-eslint/consistent-type-assertions': [
+          'warn',
+          {
+            assertionStyle: 'as',
+            objectLiteralTypeAssertions: 'never'
+          }
+        ],
+        '@typescript-eslint/consistent-type-imports': 'warn',
+        '@typescript-eslint/no-base-to-string': 'error',
+        '@typescript-eslint/no-confusing-non-null-assertion': 'error',
+        '@typescript-eslint/no-invalid-void-type': 'error',
+        '@typescript-eslint/no-require-imports': 'error',
+        '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'warn',
+        '@typescript-eslint/no-unnecessary-condition': 'off',
+        '@typescript-eslint/no-unnecessary-qualifier': 'warn',
+        '@typescript-eslint/non-nullable-type-assertion-style': 'warn',
+        '@typescript-eslint/prefer-for-of': 'warn',
+        '@typescript-eslint/prefer-optional-chain': 'warn',
+        '@typescript-eslint/prefer-ts-expect-error': 'warn',
+        '@typescript-eslint/prefer-return-this-type': 'error',
+        '@typescript-eslint/prefer-string-starts-ends-with': 'warn',
+        '@typescript-eslint/require-array-sort-compare': 'error',
+        '@typescript-eslint/unified-signatures': 'warn',
+        '@typescript-eslint/array-type': 'warn',
+        '@typescript-eslint/consistent-type-definitions': ['warn', 'interface'],
+        '@typescript-eslint/member-delimiter-style': 'warn',
+        '@typescript-eslint/method-signature-style': 'warn',
+        '@typescript-eslint/no-extraneous-class': 'error',
+        '@typescript-eslint/no-redundant-type-constituents': 'off',
+        '@typescript-eslint/parameter-properties': 'error',
+        '@typescript-eslint/strict-boolean-expressions': 'off'
+      }
+    },
+    {
+      files: ['**/*.cjs'],
+      env: {
+        node: true
+      }
+    },
+    {
+      extends: ['plugin:chai-expect/recommended', 'plugin:chai-friendly/recommended'],
+      files: ['*.test.ts'],
+      rules: {
+        '@typescript-eslint/no-unsafe-call': 'off',
+        '@typescript-eslint/no-unused-expressions': 'off'
+      }
+    }
+  ],
+  rules: {
+    'no-template-curly-in-string': 'error',
+    'array-callback-return': 'error',
+    'comma-dangle': 'off',
+    'consistent-return': 'error',
+    curly: 'off',
+    'default-param-last': 'error',
+    eqeqeq: 'error',
+    'lit-a11y/click-events-have-key-events': 'off',
+    'no-constructor-return': 'error',
+    'no-empty-function': 'warn',
+    'no-eval': 'error',
+    'no-extend-native': 'error',
+    'no-extra-bind': 'error',
+    'no-floating-decimal': 'error',
+    'no-implicit-coercion': 'off',
+    'no-implicit-globals': 'error',
+    'no-implied-eval': 'error',
+    'no-invalid-this': 'error',
+    'no-labels': 'error',
+    'no-lone-blocks': 'error',
+    'no-new': 'error',
+    'no-new-func': 'error',
+    'no-new-wrappers': 'error',
+    'no-octal-escape': 'error',
+    'no-proto': 'error',
+    'no-return-assign': 'warn',
+    'no-script-url': 'error',
+    'no-self-compare': 'warn',
+    'no-sequences': 'warn',
+    'no-throw-literal': 'error',
+    'no-unmodified-loop-condition': 'error',
+    'no-unused-expressions': 'warn',
+    'no-useless-call': 'error',
+    'no-useless-concat': 'error',
+    'no-useless-return': 'warn',
+    'prefer-promise-reject-errors': 'error',
+    radix: 'off',
+    'require-await': 'error',
+    'wrap-iife': ['warn', 'inside'],
+    'no-shadow': 'error',
+    'no-array-constructor': 'error',
+    'no-bitwise': 'error',
+    'no-multi-assign': 'warn',
+    'no-new-object': 'error',
+    'no-useless-computed-key': 'warn',
+    'no-useless-rename': 'warn',
+    'no-var': 'error',
+    'prefer-const': 'warn',
+    'prefer-numeric-literals': 'warn',
+    'prefer-object-spread': 'warn',
+    'prefer-rest-params': 'warn',
+    'prefer-spread': 'warn',
+    'prefer-template': 'off',
+    'no-else-return': 'off',
+    'func-names': ['warn', 'never'],
+    'one-var': ['warn', 'never'],
+    'operator-assignment': 'warn',
+    'prefer-arrow-callback': 'warn',
+    'no-restricted-imports': [
+      'warn',
+      {
+        paths: [
+          {
+            name: '.',
+            message: 'Usage of local index imports is not allowed.'
+          },
+          {
+            name: './index',
+            message: 'Import from the source file instead.'
+          }
+        ]
+      }
+    ],
+    'import/extensions': [
+      'error',
+      'always',
+      {
+        ignorePackages: true,
+        pattern: {
+          js: 'always',
+          ts: 'never'
+        }
+      }
+    ],
+    'import/no-duplicates': 'warn',
+    'sort-imports-es6-autofix/sort-imports-es6': [
+      2,
+      {
+        ignoreCase: true,
+        ignoreMemberSort: false,
+        memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single']
+      }
+    ],
+    'wc/guard-super-call': 'off'
+  }
+};

.github/workflows/client_tests.js.yml

@@ -1,39 +0,0 @@
-# # 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: Client Tests
-
-on:
-  push:
-    branches: [next]
-  pull_request:
-    branches: [next]
-
-jobs:
-  client_test:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [20.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci
-      - name: Lint
-        run: npm run prettier
-      - name: Build
-        run: npm run build:alpha
-      - name: Install Playwright
-        run: npx playwright install --with-deps
-      - name: Run CSR tests
-        # FAIL_FAST to fail on first failing test.
-        run: FAIL_FAST="true" CSR_ONLY="true" npm run test

.github/workflows/node.js.yml

@@ -1,13 +1,42 @@
 # # 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
+name: Node.js CI
 
 on:
   push:
     branches: [next]
+  pull_request:
+    branches: [next]
 
 jobs:
+  client_test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+      - name: Lint
+        run: npm run prettier && npm run lint
+      - name: Build
+        run: npm run build
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Run CSR tests
+        # FAIL_FAST to fail on first failing test.
+        run: FAIL_FAST="true" CSR_ONLY="true" npm run test
   ssr_test:
     runs-on: ubuntu-latest
 
@@ -27,10 +56,10 @@ jobs:
         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
+        run: npm run prettier && npm run lint
 
       - name: Build
-        run: npm run build:alpha
+        run: npm run build
 
       - name: Install Playwright
         run: npx playwright install --with-deps

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "bierner.lit-html",
+    "bashmish.es6-string-css",
     "streetsidesoftware.code-spell-checker"
   ]
 }

.vscode/settings.json

@@ -1,7 +1,6 @@
 {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "prettier.enable": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },

cspell.json

@@ -5,7 +5,6 @@
     "allowfullscreen",
     "animationend",
     "Animista",
-    "APG",
     "apos",
     "atrule",
     "autocorrect",
@@ -39,15 +38,12 @@
     "crutchcorn",
     "csspart",
     "cssproperty",
-    "cssstate",
     "datetime",
     "describedby",
     "Docsify",
     "dogfood",
     "dropdowns",
     "easings",
-    "ecommerce",
-    "endfor",
     "endraw",
     "endregion",
     "enterkeyhint",
@@ -86,8 +82,6 @@
     "jsfiddle",
     "keydown",
     "keyframes",
-    "keymaker",
-    "Konnor",
     "Kool",
     "labelledby",
     "Laravel",
@@ -105,7 +99,6 @@
     "metaframeworks",
     "middlewares",
     "minlength",
-    "minmax",
     "monospace",
     "mousedown",
     "mousemove",
@@ -114,7 +107,6 @@
     "multiselectable",
     "nextjs",
     "nocheck",
-    "noindex",
     "noopener",
     "noreferrer",
     "novalidate",
@@ -127,7 +119,6 @@
     "peta",
     "petabit",
     "Preact",
-    "preconnect",
     "prismjs",
     "progressbar",
     "radiogroup",
@@ -158,19 +149,16 @@
     "smartquotes",
     "spacebar",
     "stylesheet",
-    "svgs",
     "Tabbable",
     "tabindex",
     "tabler",
     "tablist",
     "tabpanel",
-    "tbody",
     "templating",
     "tera",
     "testid",
     "textareas",
     "textfield",
-    "thead",
     "Themer",
     "tinycolor",
     "transitionend",
@@ -194,8 +182,7 @@
     "webawesomer",
     "WEBP",
     "Webpacker",
-    "xmark",
-    "zoomable"
+    "xmark"
   ],
   "ignorePaths": [
     "package.json",

custom-elements-manifest.js

@@ -2,8 +2,8 @@ import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integrat
 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 { pascalCase } from 'pascal-case';
+import fs from 'fs';
 
 const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 const { name, description, version, author, homepage, license } = packageData;
@@ -28,7 +28,7 @@ export default {
       name: 'wa-package-data',
       packageLinkPhase({ customElementsManifest }) {
         customElementsManifest.package = { name, description, version, author, homepage, license };
-      },
+      }
     },
 
     // Parse custom jsDoc tags
@@ -83,13 +83,13 @@ export default {
                   classDoc[t.tag].push({
                     name: t.name,
                     description: t.description,
-                    type: t.type || undefined,
+                    type: t.type || undefined
                   });
               }
             });
           }
         }
-      },
+      }
     },
 
     {
@@ -109,7 +109,7 @@ export default {
             }
           }
         }
-      },
+      }
     },
 
     {
@@ -127,7 +127,7 @@ export default {
           //
           const terms = [
             { from: /^src\//, to: '' }, // Strip the src/ prefix
-            { from: /\.(t|j)sx?$/, to: '.js' }, // Convert .ts to .js
+            { from: /\.(t|j)sx?$/, to: '.js' } // Convert .ts to .js
           ];
 
           mod.path = replace(mod.path, terms);
@@ -146,7 +146,7 @@ export default {
             }
           }
         });
-      },
+      }
     },
 
     // Generate custom VS Code data
@@ -156,9 +156,9 @@ export default {
       referencesTemplate: (_, tag) => [
         {
           name: 'Documentation',
-          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`,
-        },
-      ],
+          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`
+        }
+      ]
     }),
 
     customElementJetBrainsPlugin({
@@ -168,10 +168,10 @@ export default {
       referencesTemplate: (_, tag) => {
         return {
           name: 'Documentation',
-          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`,
+          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`
         };
-      },
-    }),
+      }
+    })
 
     //
     // TODO - figure out why this broke when events were updated
@@ -181,5 +181,5 @@ export default {
     //   fileName: 'index.d.ts',
     //   componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.js`
     // })
-  ],
+  ]
 };

docs/.eleventy.js

@@ -1,60 +1,61 @@
+import { parse } from 'path';
+import { markdown } from './_utils/markdown.js';
 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 { formatCodePlugin } from './_utils/format-code.js';
 import { replaceTextPlugin } from './_utils/replace-text.js';
 import { searchPlugin } from './_utils/search.js';
+import { readFile } from 'fs/promises';
+import { outlinePlugin } from './_utils/outline.js';
+import { getComponents } from './_utils/manifest.js';
+import litPlugin from '@lit-labs/eleventy-plugin-lit';
 
 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 isDeveloping = process.argv.includes('--develop');
 
 export default function (eleventyConfig) {
   // NOTE - alpha setting removes certain pages
   if (isAlpha) {
+    eleventyConfig.ignores.add('**/components/page.md');
     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
   eleventyConfig.addGlobalData('package', packageData);
-  eleventyConfig.addGlobalData('isAlpha', isAlpha);
 
   // 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-/, ''));
+  eleventyConfig.addFilter('trimPipes', content => {
+    // 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.
+    return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
+  });
 
   // 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
+  eleventyConfig.addNunjucksGlobal('getComponent', tagName => {
+    const component = getComponents().find(c => c.tagName === tagName);
 
-  // Remove elements that have [data-alpha="remove"]
-  eleventyConfig.addPlugin(removeDataAlphaElements({ isAlpha }));
+    if (!component) {
+      throw new Error(
+        `Unable to find "<${tagName}>". Make sure the file name is the same as the tag name (without prefix).`
+      );
+    }
+    return component;
+  });
 
   // Use our own markdown instance
   eleventyConfig.setLibrary('md', markdown);
@@ -70,15 +71,15 @@ export default function (eleventyConfig) {
       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);
+  eleventyConfig.addPlugin(codeExamplesPlugin());
 
   // Highlight code blocks with Prism
   eleventyConfig.addPlugin(highlightCodePlugin());
@@ -92,68 +93,61 @@ export default function (eleventyConfig) {
       // 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>',
+        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>',
+        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>',
-      },
-    ]),
+        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`;
-      });
+  const omittedModules = [];
 
-    eleventyConfig.addPlugin(litPlugin, {
-      mode: 'worker',
-      componentModules,
+  // problematic components:
+  // animation (breaks on navigation + ssr with Turbo)
+  // mutation-observer (why SSR this?)
+  // resize-observer (why SSR this?)
+  // tooltip (why SSR this?)
+
+  const componentModules = getComponents()
+    // .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 ?? '',
-    }),
+      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());
-  // }
+  if (!isDeveloping) {
+    // Run Prettier on each file (prod only because it can be slow)
+    eleventyConfig.addPlugin(formatCodePlugin());
+  }
 
   return {
-    markdownTemplateEngine: 'njk',
     dir: {
       includes: '_includes',
-      layouts: '_layouts',
+      layouts: '_layouts'
     },
-    templateFormats: ['njk', 'md'],
+    templateFormats: ['njk', 'md']
   };
 }

docs/_data/componentList.js

@@ -1,75 +0,0 @@
-/**
- * @module components Fetches components from custom-elements.json and exposes them in a saner format.
- */
-import { readFileSync } from 'fs';
-import { dirname, resolve } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-const manifest = JSON.parse(readFileSync(resolve(__dirname, '../../dist/custom-elements.json'), '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;

docs/_data/components.js

@@ -1,3 +0,0 @@
-import componentList from './componentList.js';
-
-export default Object.fromEntries(componentList.map(component => [component.slug, component]));

docs/_data/componentsBy.js

@@ -1,43 +0,0 @@
-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/_includes/base.njk

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
+<html lang="en" data-cdn-url="{% cdnUrl %}">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -17,12 +17,11 @@
     <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">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.4/+esm"></script>
 
     <script type="module" src="/assets/scripts/code-examples.js"></script>
     <script type="module" src="/assets/scripts/color-scheme.js"></script>
     <script type="module" src="/assets/scripts/copy-code.js"></script>
-    <script type="module" src="/assets/scripts/preset-theme.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>
@@ -31,82 +30,55 @@
 
     {# Web Awesome #}
     <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
-    <link rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" />
-    <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" />
+    <link rel="stylesheet" id="theme-stylesheet" href="/dist/themes/default.css" />
+    <link rel="stylesheet" href="/dist/themes/applied.css" />
+    <link rel="stylesheet" href="/dist/themes/forms.css" />
 
     {# Docs styles #}
     <link rel="stylesheet" href="/assets/styles/docs.css" />
 
     {# Set the theme to prevent flashing #}
     <script>
-      function getColorScheme() {
-        return localStorage.getItem('colorScheme') || 'auto';
-      }
-
-      function getPresetTheme () {
-        return localStorage.getItem('presetTheme') || 'default';
-      }
-
-      function isDark() {
-        const colorScheme = getColorScheme()
-        if (colorScheme === 'auto') {
-          return window.matchMedia('(prefers-color-scheme: dark)').matches;
-        }
-        return colorScheme === 'dark';
-      }
-
-      const oldStylesheet = document.querySelector("#theme-stylesheet")
-
-      const newStylesheet = document.createElement("link")
-
-      let preset = getPresetTheme()
-      newStylesheet.href = `/dist/styles/themes/${preset}.css`
-      newStylesheet.rel = "preload"
-      newStylesheet.as = "style"
-
-      document.head.append(newStylesheet)
-
-      function updateStylesheet () {
-        newStylesheet.rel = "stylesheet"
-        newStylesheet.id = "theme-stylesheet"
-        requestAnimationFrame(() => oldStylesheet.remove())
-      }
-
-      newStylesheet.addEventListener("load", updateStylesheet)
-
       document.documentElement.classList.toggle(
-        `wa-theme-${preset}-dark`,
-        isDark()
+        'wa-theme-default-dark',
+        sessionStorage.getItem('colorScheme') === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches
       );
     </script>
   </head>
   <body class="layout-{{ layout | stripExtension }}">
     <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
-    <wa-page view="desktop" disable-navigation-toggle="">
+    <wa-page view="desktop">
       <header slot="header">
         {# Logo #}
         <div id="docs-branding">
           {# Nav toggle #}
-          <wa-button appearance="plain" size="small" data-toggle-nav>
+          <wa-button appearance="text" data-toggle-nav>
             <wa-icon name="bars" label="Toggle navigation"></wa-icon>
           </wa-button>
-
           <a href="/" aria-label="Web Awesome">
-            <span class="wa-desktop-only">{% include "logo.njk" %}</span>
-            <span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
+            <span class="only-desktop">{% include "logo.njk" %}</span>
+            <span class="only-mobile">{% include "logo-simple.njk" %}</span>
           </a>
           <small id="version-number" class="only-desktop">{{ package.version }}</small>
-          <wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
+          <wa-badge variant="warning" class="only-desktop">Alpha</wa-badge>
         </div>
 
         <div id="docs-toolbar">
-          {# Desktop selectors #}
-          <div class="only-desktop">
-            {% include "preset-theme-selector.njk" %}
-            {% include "color-scheme-selector.njk" %}
-          </div>
+          {# Color scheme selector #}
+          <wa-dropdown id="color-scheme-selector">
+            <wa-button slot="trigger" appearance="tinted" size="small" pill caret 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>
+              <span class="only-light only-desktop">Light</span>
+              <span class="only-dark only-desktop">Dark</span>
+            </wa-button>
+            <wa-menu>
+              <wa-menu-item type="checkbox" value="light">Light</wa-menu-item>
+              <wa-menu-item type="checkbox" value="dark">Dark</wa-menu-item>
+              <wa-divider></wa-divider>
+              <wa-menu-item type="checkbox" value="auto">System</wa-menu-item>
+            </wa-menu>
+          </wa-dropdown>
 
           {# Search #}
           <wa-button id="search-trigger" appearance="outlined" size="small" data-search>
@@ -119,16 +91,12 @@
 
       {# Sidebar #}
       {% if hasSidebar %}
-        {# Mobile selectors #}
-        <div class="wa-mobile-only" slot="navigation-header">
-          <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
-            {% include "preset-theme-selector.njk" %}
-            {% include "color-scheme-selector.njk" %}
-          </div>
-        </div>
-        <div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
-          {% include "sidebar.njk" %}
-        </div>
+        <aside slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
+          <wa-icon-button id="sidebar-close-button" name="xmark" label="Close" data-drawer="close"></wa-icon-button>
+          <nav>
+            {% include "sidebar.njk" %}
+          </nav>
+        </aside>
       {% endif %}
 
       {# Outline #}
@@ -149,17 +117,6 @@
           </details>
         </nav>
 
-        {% 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 %}
-
         {% block beforeContent %}{% endblock %}
 
         {% block content %}

docs/_includes/color-scheme-selector.njk

@@ -1,15 +0,0 @@
-{# Color scheme selector #}
-<wa-dropdown id="color-scheme-selector">
-  <wa-button slot="trigger" appearance="filled" size="small" pill caret 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>
-    <span class="only-light">Light</span>
-    <span class="only-dark">Dark</span>
-  </wa-button>
-  <wa-menu>
-    <wa-menu-item type="checkbox" value="light">Light</wa-menu-item>
-    <wa-menu-item type="checkbox" value="dark">Dark</wa-menu-item>
-    <wa-divider></wa-divider>
-    <wa-menu-item type="checkbox" value="auto">System</wa-menu-item>
-  </wa-menu>
-</wa-dropdown>

docs/_includes/grouped-pages.njk

@@ -1,12 +0,0 @@
-{# 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/page-card.njk

@@ -1,10 +0,0 @@
-{%- if not page.data.unlisted -%}
-<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" %}
-		</div>
-		<span class="page-name">{{ page.data.title }}</span>
-	</wa-card>
-</a>
-{% endif %}

docs/_includes/page-demo.njk

@@ -1,26 +0,0 @@
-<div id="page_slots_demo">
-<link rel="stylesheet" href="/assets/examples/page-demo/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-viewport-demo viewport="1000">
-<iframe srcdoc="" id="page_slots_iframe"></iframe>
-</wa-viewport-demo>
-</div>
-
-<script type="module">
-  const cacheBust = new Date().toString()
-  import(`/assets/examples/page-demo/demo.js?${cacheBust}`)
-</script>

docs/_includes/preset-theme-selector.njk

@@ -1,19 +0,0 @@
-{# Preset theme selector #}
-<wa-dropdown class="preset-theme-selector">
-  <wa-button slot="trigger" appearance="filled" size="small" pill caret>
-    <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
-    <span class="preset-theme-selector__text">Default</span>
-  </wa-button>
-  <wa-menu>
-    <wa-menu-item type="checkbox" value="default">Default</wa-menu-item>
-    <wa-menu-item type="checkbox" value="classic">Classic</wa-menu-item>
-    <wa-menu-item type="checkbox" value="awesome">Awesome</wa-menu-item>
-    <wa-menu-item type="checkbox" value="active">Active</wa-menu-item>
-    <wa-menu-item type="checkbox" value="brutalist">Brutalist</wa-menu-item>
-    <wa-menu-item data-alpha="remove" type="checkbox" value="glassy">Glassy</wa-menu-item>
-    <wa-menu-item type="checkbox" value="mellow">Mellow</wa-menu-item>
-    <wa-menu-item type="checkbox" value="migration">Migration</wa-menu-item>
-    <wa-menu-item data-alpha="remove" type="checkbox" value="playful">Playful</wa-menu-item>
-    <wa-menu-item data-alpha="remove" type="checkbox" value="premium">Premium</wa-menu-item>
-  </wa-menu>
-</wa-dropdown>

docs/_includes/search.njk

@@ -6,7 +6,7 @@
         <wa-input
           id="site-search-input"
           type="search"
-          appearance="filled"
+          filled
           size="large"
           clearable
           placeholder="Search"

docs/_includes/sidebar-group.njk

@@ -1,22 +0,0 @@
-{# 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] -%}
-  <wa-details {{ (('/' + tag + '/') in page.url) | attr('open') }}>
-    <h2 slot="summary">
-      {% set groupUrl %}/docs/{{ tag }}/{% endset %}
-      {% 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

@@ -1,16 +0,0 @@
-{% if not (isAlpha and page.data.noAlpha) and page.fileSlug != tag and not page.data.unlisted -%}
-	<li>
-		<a href="/docs/{{ tag }}/{{ page.fileSlug }}">{{ 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

@@ -19,13 +19,230 @@
   <li><a href="/docs/resources/changelog">Changelog</a></li>
 </ul>
 
-{% for tag, title in {
-  'components': 'Components',
-  'native': 'Native Styles',
-  'utilities': 'Style Utilities',
-  'layout': 'Layout',
-  'patterns': 'Patterns',
-  'theming': 'Theming'
-} %}
-  {% include 'sidebar-group.njk' %}
-{% endfor %}
+{# Components #}
+<h2>Components</h2>
+<ul>
+  <li>
+    <a href="/docs/components/">Components Overview</a>
+  </li>
+  <li>
+    <a href="/docs/components/animated-image">Animated Image</a>
+  </li>
+  <li>
+    <a href="/docs/components/animation">Animation</a>
+  </li>
+  <li>
+    <a href="/docs/components/avatar">Avatar</a>
+  </li>
+  <li>
+    <a href="/docs/components/badge">Badge</a>
+  </li>
+  <li>
+    <a href="/docs/components/breadcrumb">Breadcrumb</a>
+    <ul>
+      <li>
+        <a href="/docs/components/breadcrumb-item">Breadcrumb Item</a>
+      </li>
+    </ul>
+  </li>
+  <li>
+    <a href="/docs/components/button">Button</a>
+  </li>
+  <li>
+    <a href="/docs/components/button-group">Button Group</a>
+  </li>
+  <li>
+    <a href="/docs/components/callout">Callout</a>
+  </li>
+  <li>
+    <a href="/docs/components/card">Card</a>
+  </li>
+  <li>
+    <a href="/docs/components/carousel">Carousel</a>
+    <ul>
+      <li>
+        <a href="/docs/components/carousel-item">Carousel Item</a>
+      </li>
+    </ul>
+  </li>
+  <li>
+    <a href="/docs/components/checkbox">Checkbox</a>
+  </li>
+  <li>
+    <a href="/docs/components/color-picker">Color Picker</a>
+  </li>
+  <li>
+    <a href="/docs/components/copy-button">Copy Button</a>
+  </li>
+  <li>
+    <a href="/docs/components/details">Details</a>
+  </li>
+  <li>
+    <a href="/docs/components/dialog">Dialog</a>
+  </li>
+  <li>
+    <a href="/docs/components/divider">Divider</a>
+  </li>
+  <li>
+    <a href="/docs/components/drawer">Drawer</a>
+  </li>
+  <li>
+    <a href="/docs/components/dropdown">Dropdown</a>
+  </li>
+  <li>
+    <a href="/docs/components/format-bytes">Format Bytes</a>
+  </li>
+  <li>
+    <a href="/docs/components/format-date">Format Date</a>
+  </li>
+  <li>
+    <a href="/docs/components/format-number">Format Number</a>
+  </li>
+  <li>
+    <a href="/docs/components/icon">Icon</a>
+  </li>
+  <li>
+    <a href="/docs/components/icon-button">Icon Button</a>
+  </li>
+  <li>
+    <a href="/docs/components/image-comparer">Image Comparer</a>
+  </li>
+  <li>
+    <a href="/docs/components/include">Include</a>
+  </li>
+  <li>
+    <a href="/docs/components/input">Input</a>
+  </li>
+  <li>
+    <a href="/docs/components/menu">Menu</a>
+    <ul>
+      <li>
+        <a href="/docs/components/menu-item">Menu Item</a>
+      </li>
+      <li>
+        <a href="/docs/components/menu-label">Menu Label</a>
+      </li>
+    </ul>
+  </li>
+  <li>
+    <a href="/docs/components/mutation-observer">Mutation Observer</a>
+  </li>
+  <li>
+    <a href="/docs/components/popup">Popup</a>
+  </li>
+  <li>
+    <a href="/docs/components/progress-bar">Progress Bar</a>
+  </li>
+  <li>
+    <a href="/docs/components/progress-ring">Progress Ring</a>
+  </li>
+  <li>
+    <a href="/docs/components/qr-code">QR Code</a>
+  </li>
+  <li>
+    <a href="/docs/components/radio-group">Radio Group</a>
+    <ul>
+      <li>
+        <a href="/docs/components/radio">Radio</a>
+      </li>
+      <li>
+        <a href="/docs/components/radio-button">Radio Button</a>
+      </li>
+    </ul>
+  </li>
+  <li>
+    <a href="/docs/components/range">Range</a>
+  </li>
+  <li>
+    <a href="/docs/components/rating">Rating</a>
+  </li>
+  <li>
+    <a href="/docs/components/relative-time">Relative Time</a>
+  </li>
+  <li>
+    <a href="/docs/components/resize-observer">Resize Observer</a>
+  </li>
+  <li>
+    <a href="/docs/components/select">Select</a>
+    <ul>
+      <li>
+        <a href="/docs/components/option">Option</a>
+      </li>
+    </ul>
+  </li>
+  <li>
+    <a href="/docs/components/skeleton">Skeleton</a>
+  </li>
+  <li>
+    <a href="/docs/components/spinner">Spinner</a>
+  </li>
+  <li>
+    <a href="/docs/components/split-panel">Split Panel</a>
+  </li>
+  <li>
+    <a href="/docs/components/switch">Switch</a>
+  </li>
+  <li>
+    <a href="/docs/components/tab-group">Tab Group</a>
+    <ul>
+      <li>
+        <a href="/docs/components/tab">Tab</a>
+      </li>
+      <li>
+        <a href="/docs/components/tab-panel">Tab Panel</a>
+      </li>
+    </ul>
+  </li>
+  <li>
+    <a href="/docs/components/tag">Tag</a>
+  </li>
+  <li>
+    <a href="/docs/components/textarea">Textarea</a>
+  </li>
+  <li>
+    <a href="/docs/components/tooltip">Tooltip</a>
+  </li>
+  <li>
+    <a href="/docs/components/tree">Tree</a>
+    <ul>
+      <li>
+        <a href="/docs/components/tree-item">Tree Item</a>
+      </li>
+    </ul>
+  </li>
+  <li>
+    <a href="/docs/components/visually-hidden">Visually Hidden</a>
+  </li>
+</ul>
+
+{# Theming #}
+<h2>Theming</h2>
+<ul>
+  <li>
+    <a href="/docs/theming/">Theming Overview</a>
+  </li>
+  <li>
+    <a href="/docs/theming/color">Color</a>
+  </li>
+  <li>
+    <a href="/docs/theming/typography">Typography</a>
+  </li>
+  <li>
+    <a href="/docs/theming/space">Space</a>
+  </li>
+  <li>
+    <a href="/docs/theming/borders">Borders</a>
+  </li>
+  <li>
+    <a href="/docs/theming/focus">Focus</a>
+  </li>
+  <li>
+    <a href="/docs/theming/shadows">Shadows</a>
+  </li>
+  <li>
+    <a href="/docs/theming/transitions">Transitions</a>
+  </li>
+  <li>
+    <a href="/docs/theming/component-groups">Component Groups</a>
+  </li>
+</ul>

docs/_includes/status.njk

@@ -1,25 +0,0 @@
-{% if since -%}
-	<wa-badge variant="neutral">Since {{ since }}</wa-badge>
-{%- endif %}
-
-{% if status -%}
-	{%- 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
-	</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 %}

docs/_includes/svgs/layout/cluster.njk

@@ -1,11 +0,0 @@
-<svg width="88" height="64" viewBox="0 0 88 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V10C24 13.3137 21.3137 16 18 16H6C2.68629 16 0 13.3137 0 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M0 30C0 26.6863 2.68629 24 6 24H10C13.3137 24 16 26.6863 16 30V34C16 37.3137 13.3137 40 10 40H6C2.68629 40 0 37.3137 0 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M0 54C0 50.6863 2.68629 48 6 48H26C29.3137 48 32 50.6863 32 54V58C32 61.3137 29.3137 64 26 64H6C2.68629 64 0 61.3137 0 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M32 6C32 2.68629 34.6863 0 38 0H42C45.3137 0 48 2.68629 48 6V10C48 13.3137 45.3137 16 42 16H38C34.6863 16 32 13.3137 32 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M24 30C24 26.6863 26.6863 24 30 24H42C45.3137 24 48 26.6863 48 30V34C48 37.3137 45.3137 40 42 40H30C26.6863 40 24 37.3137 24 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M40 54C40 50.6863 42.6863 48 46 48H58C61.3137 48 64 50.6863 64 54V58C64 61.3137 61.3137 64 58 64H46C42.6863 64 40 61.3137 40 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M56 6C56 2.68629 58.6863 0 62 0H82C85.3137 0 88 2.68629 88 6V10C88 13.3137 85.3137 16 82 16H62C58.6863 16 56 13.3137 56 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M56 30C56 26.6863 58.6863 24 62 24H66C69.3137 24 72 26.6863 72 30V34C72 37.3137 69.3137 40 66 40H62C58.6863 40 56 37.3137 56 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M72 54C72 50.6863 74.6863 48 78 48H82C85.3137 48 88 50.6863 88 54V58C88 61.3137 85.3137 64 82 64H78C74.6863 64 72 61.3137 72 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-</svg>

docs/_includes/svgs/layout/flank.njk

@@ -1,4 +0,0 @@
-<svg width="128" height="24" viewBox="0 0 128 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V18C24 21.3137 21.3137 24 18 24H6C2.68629 24 0 21.3137 0 18V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M32 6C32 2.68629 34.6863 0 38 0H122C125.314 0 128 2.68629 128 6V18C128 21.3137 125.314 24 122 24H38C34.6863 24 32 21.3137 32 18V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-</svg>

docs/_includes/svgs/layout/frame.njk

@@ -1,6 +0,0 @@
-<svg width="82" height="66" viewBox="0 0 82 66" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17 15C17 11.6863 19.6863 9 23 9H59C62.3137 9 65 11.6863 65 15V51C65 54.3137 62.3137 57 59 57H23C19.6863 57 17 54.3137 17 51V15Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M1 7C1 3.68629 3.68629 1 7 1H75C78.3137 1 81 3.68629 81 7V59C81 62.3137 78.3137 65 75 65H7C3.68629 65 1 62.3137 1 59V7Z" stroke="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))" stroke-width="2" stroke-linecap="round" stroke-dasharray="6 6"/>
-<path d="M25 40.6444L30.3333 35.3111L35.6667 40.6444L46.3333 28.8444L57 40.6444" stroke="var(--wa-color-neutral-fill-quiet)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M32.8889 29.5556C32.8889 30.9669 31.7447 32.1111 30.3333 32.1111C28.9219 32.1111 27.7778 30.9669 27.7778 29.5556C27.7778 28.1442 28.9219 27 30.3333 27C31.7447 27 32.8889 28.1442 32.8889 29.5556Z" stroke="var(--wa-color-neutral-fill-quiet)" stroke-width="2"/>
-</svg>

docs/_includes/svgs/layout/grid.njk

@@ -1,11 +0,0 @@
-<svg width="88" height="64" viewBox="0 0 88 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V10C24 13.3137 21.3137 16 18 16H6C2.68629 16 0 13.3137 0 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M0 30C0 26.6863 2.68629 24 6 24H18C21.3137 24 24 26.6863 24 30V34C24 37.3137 21.3137 40 18 40H6C2.68629 40 0 37.3137 0 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M0 54C0 50.6863 2.68629 48 6 48H18C21.3137 48 24 50.6863 24 54V58C24 61.3137 21.3137 64 18 64H6C2.68629 64 0 61.3137 0 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M32 6C32 2.68629 34.6863 0 38 0H50C53.3137 0 56 2.68629 56 6V10C56 13.3137 53.3137 16 50 16H38C34.6863 16 32 13.3137 32 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M32 30C32 26.6863 34.6863 24 38 24H50C53.3137 24 56 26.6863 56 30V34C56 37.3137 53.3137 40 50 40H38C34.6863 40 32 37.3137 32 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M32 54C32 50.6863 34.6863 48 38 48H50C53.3137 48 56 50.6863 56 54V58C56 61.3137 53.3137 64 50 64H38C34.6863 64 32 61.3137 32 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M64 6C64 2.68629 66.6863 0 70 0H82C85.3137 0 88 2.68629 88 6V10C88 13.3137 85.3137 16 82 16H70C66.6863 16 64 13.3137 64 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M64 30C64 26.6863 66.6863 24 70 24H82C85.3137 24 88 26.6863 88 30V34C88 37.3137 85.3137 40 82 40H70C66.6863 40 64 37.3137 64 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M64 54C64 50.6863 66.6863 48 70 48H82C85.3137 48 88 50.6863 88 54V58C88 61.3137 85.3137 64 82 64H70C66.6863 64 64 61.3137 64 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-</svg>

docs/_includes/svgs/layout/split.njk

@@ -1,4 +0,0 @@
-<svg width="128" height="24" viewBox="0 0 128 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V18C24 21.3137 21.3137 24 18 24H6C2.68629 24 0 21.3137 0 18V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M104 6C104 2.68629 106.686 0 110 0H122C125.314 0 128 2.68629 128 6V18C128 21.3137 125.314 24 122 24H110C106.686 24 104 21.3137 104 18V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-</svg>

docs/_includes/svgs/layout/stack.njk

@@ -1,5 +0,0 @@
-<svg width="88" height="64" viewBox="0 0 88 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 6C0 2.68629 2.68629 0 6 0H82C85.3137 0 88 2.68629 88 6V10C88 13.3137 85.3137 16 82 16H6C2.68629 16 0 13.3137 0 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M0 30C0 26.6863 2.68629 24 6 24H82C85.3137 24 88 26.6863 88 30V34C88 37.3137 85.3137 40 82 40H6C2.68629 40 0 37.3137 0 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-<path d="M0 54C0 50.6863 2.68629 48 6 48H82C85.3137 48 88 50.6863 88 54V58C88 61.3137 85.3137 64 82 64H6C2.68629 64 0 61.3137 0 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
-</svg>

docs/_includes/svgs/page.njk

@@ -1,9 +0,0 @@
-<svg width="96" height="80" viewBox="0 0 96 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1" y="1" width="94" height="6" rx="3" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
-<rect x="1" y="13" width="94" height="6" rx="3" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
-<rect x="1" y="73" width="94" height="6" rx="3" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
-<rect x="25" y="61" width="46" height="6" rx="3" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
-<rect x="25" y="25" width="46" height="30" rx="5" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
-<rect x="1" y="25" width="18" height="42" rx="5" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
-<rect x="77" y="25" width="18" height="42" rx="5" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
-</svg>

docs/_layouts/blank.njk

@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="{{ description }}">
-    {% if noindex %}<meta name="robots" content="noindex">{% endif %}
-
-    <title>{{ title }}</title>
-
-    <link rel="icon" href="/assets/images/webawesome-logo.svg" />
-    <link rel="apple-touch-icon" href="/assets/images/app-icon.png">
-
-    {# Scripts #}
-    {# Hydration stuff #}
-    <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">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
-
-    {# Web Awesome #}
-    <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
-    <link rel="stylesheet" id="theme-stylesheet" />
-    <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" />
-
-    {# Set the theme to prevent flashing #}
-    <script>
-      function getColorScheme() {
-        return localStorage.getItem('colorScheme') || 'auto';
-      }
-
-      function getPresetTheme () {
-        return localStorage.getItem('presetTheme') || 'default';
-      }
-
-      function isDark() {
-        const colorScheme = getColorScheme()
-        if (colorScheme === 'auto') {
-          return window.matchMedia('(prefers-color-scheme: dark)').matches;
-        }
-        return colorScheme === 'dark';
-      }
-
-      const stylesheet = document.getElementById("theme-stylesheet")
-      let preset = getPresetTheme()
-
-      stylesheet.href = `/dist/styles/themes/${preset}.css`
-
-      document.documentElement.classList.toggle(
-        `wa-theme-${preset}-dark`,
-        isDark()
-      );
-    </script>
-  </head>
-  <body class="layout-{{ layout | stripExtension }}">
-
-        {% block beforeContent %}{% endblock %}
-
-        {% block content %}
-          {{ content | safe }}
-        {% endblock %}
-
-        {% block afterContent %}{% endblock %}
-
-  </body>
-</html>

docs/_layouts/block.njk

@@ -1,37 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-
-{% extends '../_includes/base.njk' %}
-
-{# Component header #}
-{% block beforeContent %}
-  <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 %}

docs/_layouts/component.njk

@@ -1,15 +1,31 @@
-{% extends '../_layouts/block.njk' %}
-{% set component = components[page.fileSlug] %}
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+{% set component = getComponent('wa-' + page.fileSlug) %}
+{% set description = component.summary %}
+
+{% extends '../_includes/base.njk' %}
 
 {# Component header #}
-{% block notes %}
-  {% if native %}
-  <wa-callout variant="success">
-    <wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
-    Just want the styles?
-    Check out the <a href="/docs/native/{{ native }}/">{{ ('/docs/native/' + native + '/') | getTitleFromUrl }} native styles</a>!
-  </wa-callout>
-  {% endif %}
+{% block beforeContent %}
+  <h1 class="title">{{ title }}</h1>
+  <div class="component-info">
+    <code class="component-tag">&lt;{{ component.tagName }}&gt;</code>
+    <wa-badge variant="neutral">Since {{ component.since }}</wa-badge>
+    <wa-badge
+      {% if component.status == 'stable' %}variant="brand"{% endif %}
+      {% if component.status == 'experimental' %}variant="warning"{% endif %}
+    >
+      {{ component.status }}
+    </wa-badge>
+  </div>
+  <p class="component-summary">
+    {{ component.summary | inlineMarkdown | safe }}
+  </p>
+{% endblock %}
+
+{# Content #}
+{% block content %}
+  {{ content | safe }}
 {% endblock %}
 
 {# Component API #}
@@ -17,7 +33,6 @@
   {# Slots #}
   {% if component.slots.length %}
     <h2>Slots</h2>
-    <p>Learn more about <a href="/docs/usage/#slots">using slots</a>.</p>
 
     <div class="table-scroll">
       <table class="component-table">
@@ -47,8 +62,7 @@
 
   {# Properties #}
   {% if component.properties.length %}
-    <h2>Attributes & Properties</h2>
-    <p>Learn more about <a href="/docs/usage/#attributes-and-properties">attributes and properties</a>.</p>
+    <h2>Properties</h2>
 
     <div class="table-scroll">
       <table class="component-table">
@@ -63,9 +77,9 @@
           {% for prop in component.properties %}
             <tr>
               <td class="table-name">
-                <code title="JS property">{{ prop.name }}</code><br>
+                <code>{{ prop.name }}</code><br>
                 {% if prop.attribute %}
-                  <div><small><code title="HTML attribute">{{ prop.attribute }}</code></small></div>
+                  <div><small><code>{{ prop.attribute }}</code></small></div>
                 {% endif %}
               </td>
               <td class="table-description">
@@ -95,8 +109,6 @@
   {# Methods #}
   {% if component.methods.length %}
     <h2>Methods</h2>
-    <p>Learn more about <a href="/docs/usage/#methods">methods</a>.</p>
-
     <div class="table-scroll">
       <table class="component-table">
         <thead>
@@ -127,10 +139,34 @@
     </div>
   {% endif %}
 
+  {# States #}
+  {% if component.states.length %}
+    <h2>States</h2>
+    <div class="table-scroll">
+      <table class="component-table">
+        <thead>
+          <tr>
+            <th class="table-name">Name</th>
+            <th class="table-description">Description</th>
+            <th class="table-selector">CSS selector</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for state in component.states %}
+            <tr>
+              <td class="table-name"><code>{{ state.name }}</code></td>
+              <td class="table-description">{{ state.description | inlineMarkdown | safe }}</td>
+              <td class="table-selector"><code>[data-state-{{ state.name }}]</code></td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  {% endif %}
+
   {# Events #}
   {% if component.events.length %}
     <h2>Events</h2>
-    <p>Learn more about <a href="/docs/usage/#events">events</a>.</p>
 
     <div class="table-scroll">
       <table class="component-table">
@@ -157,7 +193,6 @@
   {# Custom Properties #}
   {% if component.cssProperties.length %}
     <h2>CSS custom properties</h2>
-    <p>Learn more about <a href="/docs/customizing/#custom-properties">CSS custom properties</a>.</p>
 
     <div class="table-scroll">
       <table class="component-table">
@@ -186,37 +221,9 @@
     </div>
   {% endif %}
 
-  {# Custom States #}
-  {% if component.cssStates.length %}
-    <h2>Custom States</h2>
-    <p>Learn more about <a href="/docs/customizing/#custom-states">custom states</a>.</p>
-
-    <div class="table-scroll">
-      <table class="component-table">
-        <thead>
-          <tr>
-            <th class="table-name">Name</th>
-            <th class="table-description">Description</th>
-            <th class="table-selector">CSS selector</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for state in component.cssStates %}
-            <tr>
-              <td class="table-name"><code>{{ state.name }}</code></td>
-              <td class="table-description">{{ state.description | inlineMarkdown | safe }}</td>
-              <td class="table-selector"><code>:state({{ state.name }})</code></td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-  {% endif %}
-
   {# CSS Parts #}
   {% if component.cssParts.length %}
     <h2>CSS parts</h2>
-    <p>Learn more about <a href="/docs/customizing/#css-parts">CSS parts</a>.</p>
 
     <div class="table-scroll">
       <table class="component-table">
@@ -242,7 +249,7 @@
   {% if component.dependencies.length %}
     <h2>Dependencies</h2>
     <p>
-      This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.
+      This component automatically imports the following elements. Subdependencies, if any exist, will also be included in this list.
     </p>
 
     <ul class="dependency-list">
@@ -259,9 +266,9 @@
   </p>
 
   <wa-tab-group label="How would you like to import this component?">
-    <wa-tab panel="cdn">CDN</wa-tab>
-    <wa-tab panel="npm">npm</wa-tab>
-    <wa-tab panel="react">React</wa-tab>
+    <wa-tab slot="nav" panel="cdn">CDN</wa-tab>
+    <wa-tab slot="nav" panel="npm">npm</wa-tab>
+    <wa-tab slot="nav" panel="react">React</wa-tab>
     <wa-tab-panel name="cdn">
       <p>
         To manually import this component from the CDN, use the following code.

docs/_layouts/element.njk

@@ -1,24 +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 %}
-  {# Slots #}
-  {% if css_file %}
-    <h2>Using these styles</h2>
-    <p>If you want to use these styles without using the entirety of Web Awesome Native Styles, you can include the following CSS files:</p>
-
-
-  {% endif %}
-{% endblock %}

docs/_layouts/overview.njk

@@ -1,25 +0,0 @@
----
-layout: page-outline
-tags: ["overview"]
----
-{% 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 }}" clearable autofocus>
-	<wa-icon slot="prefix" name="search"></wa-icon>
-  </wa-input>
-</div>
-
-{% set allPages = collections[forTag] %}
-{% include "grouped-pages.njk" %}
-
-<link href="/assets/styles/filter.css" rel="stylesheet">
-<script type="module" src="/assets/scripts/filter.js"></script>
-
-{% if content | trim %}
-<br> {# Temp fix for spacing issue #}
-{{ content | safe }}
-{% endif %}

docs/_layouts/page-wide.njk

@@ -1,4 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-
-{% extends "../_includes/base-wide.njk" %}

docs/_utils/anchor-headings.js

@@ -1,11 +1,11 @@
 import { parse } from 'node-html-parser';
-import slugify from 'slugify';
 import { v4 as uuid } from 'uuid';
+import slugify from 'slugify';
 
 function createId(text) {
   let slug = slugify(String(text), {
     remove: /[^\w|\s]/g,
-    lower: true,
+    lower: true
   });
 
   // ids must start with a letter
@@ -24,7 +24,7 @@ export function anchorHeadingsPlugin(options = {}) {
     container: 'body',
     headingSelector: 'h2, h3, h4, h5, h6',
     anchorLabel: 'Jump to heading',
-    ...options,
+    ...options
   };
 
   return function (eleventyConfig) {
@@ -39,26 +39,22 @@ export function anchorHeadingsPlugin(options = {}) {
       // Look for headings
       container.querySelectorAll(options.headingSelector).forEach(heading => {
         const hasAnchor = heading.querySelector('a');
-        const existingId = heading.getAttribute('id');
         const clone = parse(heading.outerHTML);
 
         // Create a clone of the heading so we can remove [data-no-anchor] elements from the text content
         clone.querySelectorAll('[data-no-anchor]').forEach(el => el.remove());
 
-        if (hasAnchor) {
-          return;
+        const slug = createId(clone.textContent ?? '') ?? uuid().slice(-12);
+        let id = slug;
+        let suffix = 0;
+
+        // Make sure the slug is unique in the document
+        while (doc.getElementById(id) !== null) {
+          id = `${slug}-${++suffix}`;
         }
 
-        let id = existingId;
-        if (!id) {
-          const slug = createId(clone.textContent ?? '') ?? uuid().slice(-12);
-          id = slug;
-          let suffix = 1;
-
-          // Make sure the slug is unique in the document
-          while (doc.getElementById(id) !== null) {
-            id = `${slug}-${++suffix}`;
-          }
+        if (hasAnchor || !id) {
+          return;
         }
 
         // Create the anchor
@@ -71,9 +67,7 @@ export function anchorHeadingsPlugin(options = {}) {
         anchor.querySelector('.wa-visually-hidden').textContent = options.anchorLabel;
 
         // Update the heading
-        if (!existingId) {
-          heading.setAttribute('id', id);
-        }
+        heading.setAttribute('id', id);
         heading.classList.add('anchor-heading');
         heading.appendChild(anchor);
       });

docs/_utils/code-examples.js

@@ -1,190 +1,82 @@
 import { parse } from 'node-html-parser';
 import { v4 as uuid } from 'uuid';
 
-const templates = {
-  old(pre, code, { open, buttons, edit }) {
-    const id = `code-example-${uuid().slice(-12)}`;
-    let preview = code.textContent;
-
-    // Run preview scripts as modules to prevent collisions
-    const root = parse(preview, { blockTextElements: { script: true } });
-    root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module'));
-    preview = root.toString();
-
-    return `
-      <div class="code-example ${open ? 'open' : ''}">
-        <div class="code-example-preview">
-          ${preview}
-        </div>
-        <div class="code-example-source" id="${id}">
-          ${pre.outerHTML}
-        </div>
-        ${
-          buttons
-            ? `
-            <div class="code-example-buttons">
-              <button
-                class="code-example-toggle"
-                type="button"
-                aria-expanded="${open ? 'true' : 'false'}"
-                aria-controls="${id}"
-              >
-                Code
-                <wa-icon name="chevron-down"></wa-icon>
-              </button>
-              ${
-                edit
-                  ? `
-                    <button class="code-example-pen" type="button">
-                      <wa-icon name="pen-to-square"></wa-icon>
-                      Edit
-                    </button>
-                  `
-                  : ''
-              }
-            `
-            : ''
-        }
-        </div>
-      </div>
-    `;
-  },
-  new(pre, code, { open, first, attributes }) {
-    attributes = {
-      open,
-      include: `link[rel=stylesheet][href^='/dist/']`,
-      ...attributes,
-    };
-
-    const attributesString = Object.entries(attributes)
-      .map(([key, value]) => {
-        if (value === true) {
-          return key;
-        }
-        if (value === false || value === null) {
-          return '';
-        }
-        return `${key}="${value}"`;
-      })
-      .join(' ');
-
-    let includes = '';
-    if (first) {
-      includes = `
-        <template class="wa-code-demo-include-isolated">
-          <script src="/dist/webawesome.loader.js" type="module"></script>
-        </template>`;
-    }
-
-    let preview = '';
-    if (attributes.viewport === undefined) {
-      // Slot in pre-rendered preview
-      preview = `<div style="display:contents" slot="preview">${code.textContent}</div>`;
-
-      // Run preview scripts as modules to prevent collisions
-      const root = parse(preview, { blockTextElements: { script: true } });
-      root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module'));
-      preview = root.toString();
-    }
-
-    return `${includes}
-      <wa-code-demo ${attributesString}>
-        ${preview}
-        ${pre.outerHTML}
-      </wa-code-demo>
-    `;
-  },
-};
-
 /**
  * Eleventy plugin to turn `<code class="example">` blocks into live examples.
  */
-export function codeExamplesPlugin(eleventyConfig, options = {}) {
-  const defaultOptions = {
+export function codeExamplesPlugin(options = {}) {
+  options = {
     container: 'body',
-    defaultOpen: (code, { outputPathIndex }) => {
-      return (
-        outputPathIndex === 1 && // is first
-        code.textContent.length < 500
-      ); // is short
-    },
-  };
-  options = { ...defaultOptions, ...options };
-
-  const stats = {
-    inputPaths: {},
-    outputPaths: {},
+    ...options
   };
 
-  eleventyConfig.addTransform('code-examples', function (content) {
-    const { inputPath, outputPath } = this.page;
+  return function (eleventyConfig) {
+    eleventyConfig.addTransform('code-examples', content => {
+      const doc = parse(content, { blockTextElements: { code: true } });
+      const container = doc.querySelector(options.container);
 
-    const doc = parse(content, { blockTextElements: { code: true } });
-    const container = doc.querySelector(options.container);
-
-    if (!container) {
-      return content;
-    }
-
-    // Look for external links
-    container.querySelectorAll('code.example').forEach(code => {
-      stats.inputPaths[inputPath] ??= 0;
-      stats.outputPaths[outputPath] ??= 0;
-      stats.inputPaths[inputPath]++;
-      stats.outputPaths[outputPath]++;
-
-      const pre = code.closest('pre');
-      const first = stats.inputPaths[inputPath] === 1;
-
-      const localOptions = {
-        ...options,
-        first,
-
-        // Modifier defaults
-        edit: true,
-        buttons: true,
-        new: true, // comment this line to default back to the old demos
-        attributes: {},
-      };
-
-      for (const prop of ['new', 'open', 'buttons', 'edit']) {
-        if (code.classList.contains(prop)) {
-          localOptions[prop] = true;
-        } else if (code.classList.contains(`no-${prop}`)) {
-          localOptions[prop] = false;
-        }
+      if (!container) {
+        return content;
       }
 
-      for (const attribute of ['viewport', 'include']) {
-        if (code.hasAttribute(attribute)) {
-          localOptions.attributes[attribute] = code.getAttribute(attribute);
-          code.removeAttribute(attribute);
-        }
-      }
+      // Look for external links
+      container.querySelectorAll('code.example').forEach(code => {
+        const pre = code.closest('pre');
+        const hasButtons = !code.classList.contains('no-buttons');
+        const isOpen = code.classList.contains('open') || !hasButtons;
+        const noEdit = code.classList.contains('no-edit');
+        const id = `code-example-${uuid().slice(-12)}`;
+        let preview = pre.textContent;
 
-      if (Object.keys(localOptions.attributes).length > 0) {
-        // attributes only work on the new syntax
-        localOptions.new = true;
-      }
+        // Run preview scripts as modules to prevent collisions
+        const root = parse(preview, { blockTextElements: { script: true } });
+        root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module'));
+        preview = root.toString();
 
-      if (localOptions.open === undefined) {
-        if (localOptions.defaultOpen === true) {
-          localOptions.open = localOptions.defaultOpen;
-        } else if (typeof localOptions.defaultOpen === 'function') {
-          localOptions.open = localOptions.defaultOpen(code, {
-            pre,
-            inputPathIndex: stats.inputPaths[inputPath],
-            outputPathIndex: stats.outputPaths[outputPath],
-          });
-        }
-      }
+        const codeExample = parse(`
+          <div class="code-example ${isOpen ? 'open' : ''}">
+            <div class="code-example-preview">
+              ${preview}
+            </div>
+            <div class="code-example-source" id="${id}">
+              ${pre.outerHTML}
+            </div>
+            ${
+              hasButtons
+                ? `
+                <div class="code-example-buttons">
+                  <button
+                    class="code-example-toggle"
+                    type="button"
+                    aria-expanded="${isOpen ? 'true' : 'false'}"
+                    aria-controls="${id}"
+                  >
+                    Code
+                    <wa-icon name="chevron-down"></wa-icon>
+                  </button>
 
-      const template = localOptions.new ? 'new' : 'old';
-      const codeExample = parse(templates[template](pre, code, localOptions));
+                  ${
+                    noEdit
+                      ? ''
+                      : `
+                        <button class="code-example-pen" type="button">
+                          <wa-icon name="pen-to-square"></wa-icon>
+                          Edit
+                        </button>
+                      `
+                  }
 
-      pre.replaceWith(codeExample);
+                `
+                : ''
+            }
+            </div>
+          </div>
+        `);
+
+        pre.replaceWith(codeExample);
+      });
+
+      return doc.toString();
     });
-
-    return doc.toString();
-  });
+  };
 }

docs/_utils/copy-code.js

@@ -6,7 +6,7 @@ import { parse } from 'node-html-parser';
 export function copyCodePlugin(options = {}) {
   options = {
     container: 'body',
-    ...options,
+    ...options
   };
 
   return function (eleventyConfig) {

docs/_utils/current-link.js

@@ -28,7 +28,7 @@ export function currentLink(options = {}) {
   options = {
     container: 'body',
     className: 'current',
-    ...options,
+    ...options
   };
 
   return function (eleventyConfig) {

docs/_utils/filters.js

@@ -1,264 +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) {
-  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 breadcrumbs(url, { withCurrent = false } = {}) {
-  const parts = split(url, '/');
-  const ret = [];
-
-  while (parts.length) {
-    let partialUrl = '/' + parts.join('/') + '/';
-    let item = getCollectionItemFromUrl.call(this, partialUrl);
-
-    if (item && (partialUrl !== url || withCurrent)) {
-      let title = item.data.title;
-      if (title) {
-        ret.unshift({ url: partialUrl, title });
-      }
-    }
-
-    parts.pop();
-
-    if (item?.data.parent) {
-      let parentURL = item.data.parent;
-      if (!item.data.parent.startsWith('/')) {
-        // Parent is in the same directory
-        parts.push(item.data.parent);
-        parentURL = '/' + parts.join('/') + '/';
-      }
-
-      let parentBreadcrumbs = breadcrumbs.call(this, parentURL, { withCurrent: true });
-      return [...parentBreadcrumbs, ...ret];
-    }
-  }
-  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 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 | Object<string, string>)[]} [tags] The tags to group by. If not provided/empty, defaults to grouping by all tags.
- * @returns { Object.<string, object[]> } An object with keys for each tag, and an array of items for each tag.
- */
-export function groupByTags(collection, tags) {
-  if (!tags) {
-    // Default to grouping by union of all tags
-    tags = Array.from(new Set(collection.flatMap(item => item.data.tags)));
-  } else if (Array.isArray(tags)) {
-    // May contain objects of one-off tag -> label mappings
-    tags = tags.map(tag => (typeof tag === 'object' ? Object.keys(tag)[0] : tag));
-  } else if (typeof tags === 'object') {
-    // tags is an object of tags to labels, so we just want the keys
-    tags = Object.keys(tags);
-  }
-
-  let ret = Object.fromEntries(tags.map(tag => [tag, []]));
-  ret.other = [];
-
-  for (let item of collection) {
-    let categorized = false;
-
-    for (let tag of tags) {
-      if (item.data.tags.includes(tag)) {
-        ret[tag].push(item);
-        categorized = true;
-      }
-    }
-
-    if (!categorized) {
-      ret.other.push(item);
-    }
-  }
-
-  // Remove empty categories
-  for (let category in ret) {
-    if (ret[category].length === 0) {
-      delete ret[category];
-    }
-  }
-
-  return ret;
-}
-
-export function getCategoryTitle(category, categories) {
-  let title;
-  if (Array.isArray(categories)) {
-    // Find relevant entry
-    // [{id: "Title"}, id2, ...]
-    title = categories.find(entry => typeof entry === 'object' && entry?.[category])?.[category];
-  } else if (typeof categories === 'object') {
-    // {id: "Title", id2: "Title 2", ...}
-    title = categories[category];
-  }
-
-  if (title) {
-    return title;
-  }
-
-  // Capitalized
-  return category.charAt(0).toUpperCase() + category.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);
-}

docs/_utils/format-code.js

@@ -11,7 +11,7 @@ import defaultOptions from '../../prettier.config.js';
 export async function formatCode(string, options) {
   return await format(string, {
     ...defaultOptions,
-    ...options,
+    ...options
   });
 }
 
@@ -21,7 +21,7 @@ export async function formatCode(string, options) {
 export function formatCodePlugin(options = {}) {
   options = {
     parser: 'html',
-    ...options,
+    ...options
   };
 
   return function (eleventyConfig) {

docs/_utils/highlight-code.js

@@ -1,8 +1,8 @@
 /* eslint sort-imports-es6-autofix/sort-imports-es6: 0 */
 import { parse } from 'node-html-parser';
 import Prism from 'prismjs';
-import PrismLoader from 'prismjs/components/index.js';
 import 'prismjs/plugins/custom-class/prism-custom-class.js';
+import PrismLoader from 'prismjs/components/index.js';
 
 PrismLoader('diff');
 PrismLoader.silent = true;
@@ -40,7 +40,7 @@ export function highlightCode(code, language = 'plain') {
 export function highlightCodePlugin(options = {}) {
   options = {
     container: 'body',
-    ...options,
+    ...options
   };
 
   return function (eleventyConfig) {

docs/_utils/manifest.js

@@ -0,0 +1,71 @@
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+import { readFileSync } from 'fs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const manifest = JSON.parse(readFileSync(resolve(__dirname, '../../dist/custom-elements.json'), 'utf-8'));
+/**
+ * @returns Fetches components from custom-elements.json and returns them in more sane format.
+ */
+export function getComponents() {
+  const components = [];
+
+  manifest.modules?.forEach(module => {
+    module.declarations?.forEach(declaration => {
+      if (declaration.customElement) {
+        // 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 properties = members?.filter(prop => {
+          // Look for a corresponding attribute
+          const attribute = declaration.attributes?.find(attr => attr.fieldName === prop.name);
+          if (attribute) {
+            prop.attribute = attribute.name || attribute.fieldName;
+          }
+
+          return prop.kind === 'field' && prop.privacy !== 'private';
+        });
+        components.push({
+          ...declaration,
+          methods,
+          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
+  return components.sort((a, b) => {
+    if (a.name < b.name) return -1;
+    if (a.name > b.name) return 1;
+    return 0;
+  });
+}

docs/_utils/markdown.js

@@ -14,7 +14,7 @@ export const markdown = MarkdownIt({
   breaks: false,
   langPrefix: 'language-',
   linkify: false,
-  typographer: false,
+  typographer: false
 });
 
 markdown.use(markdownItIns);
@@ -34,7 +34,7 @@ markdown.use(markdownItMark);
         `;
       }
       return '</div></div>\n';
-    },
+    }
   });
 });
 
@@ -44,7 +44,7 @@ markdown.use(markdownItContainer, 'aside', {
       return `<aside>`;
     }
     return '</aside>\n';
-  },
+  }
 });
 
 markdown.use(markdownItContainer, 'details', {
@@ -55,9 +55,9 @@ markdown.use(markdownItContainer, 'details', {
       return `<details>\n<summary><span>${markdown.utils.escapeHtml(m[1])}</span></summary>\n`;
     }
     return '</details>\n';
-  },
+  }
 });
 
 markdown.use(markdownItAttrs, {
-  allowedAttributes: [],
+  allowedAttributes: ['id', 'class', 'data']
 });

docs/_utils/outline.js

@@ -15,7 +15,7 @@ export function outlinePlugin(options = {}) {
     target: '.outline',
     selector: 'h2,h3',
     ifEmpty: () => null,
-    ...options,
+    ...options
   };
 
   return function (eleventyConfig) {

docs/_utils/remove-data-alpha-elements.js

@@ -1,23 +0,0 @@
-import { parse } from 'node-html-parser';
-
-/**
- * Eleventy plugin to add remove elements with <div data-alpha="remove"> from the alpha build.
- */
-export function removeDataAlphaElements(options = {}) {
-  options = {
-    isAlpha: false,
-    ...options,
-  };
-
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('remove-data-alpha-elements', content => {
-      const doc = parse(content, { blockTextElements: { code: true } });
-
-      if (options.isAlpha) {
-        doc.querySelectorAll('[data-alpha="remove"]').forEach(el => el.remove());
-      }
-
-      return doc.toString();
-    });
-  };
-}

docs/_utils/search.js

@@ -1,8 +1,8 @@
 /* eslint-disable no-invalid-this */
-import { mkdir, writeFile } from 'fs/promises';
-import lunr from 'lunr';
-import { parse } from 'node-html-parser';
 import { dirname, join } from 'path';
+import { mkdir, writeFile } from 'fs/promises';
+import { parse } from 'node-html-parser';
+import lunr from 'lunr';
 
 function collapseWhitespace(string) {
   return string.replace(/\s+/g, ' ');
@@ -19,7 +19,7 @@ export function searchPlugin(options = {}) {
     getDescription: doc => doc.querySelector('meta[name="description"]')?.getAttribute('content') ?? '',
     getHeadings: doc => [...doc.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(heading => heading.textContent ?? ''),
     getContent: doc => doc.querySelector('body')?.textContent ?? '',
-    ...options,
+    ...options
   };
 
   return function (eleventyConfig) {
@@ -32,8 +32,8 @@ export function searchPlugin(options = {}) {
           noscript: false,
           style: false,
           pre: false,
-          code: false,
-        },
+          code: false
+        }
       });
 
       // Remove content that shouldn't be searchable to reduce the index size
@@ -46,7 +46,7 @@ export function searchPlugin(options = {}) {
         description: collapseWhitespace(options.getDescription(doc)),
         headings: options.getHeadings(doc).map(collapseWhitespace),
         content: collapseWhitespace(options.getContent(doc)),
-        url: this.page.url === '/' ? '/' : this.page.url.replace(/\/$/, ''),
+        url: this.page.url === '/' ? '/' : this.page.url.replace(/\/$/, '')
       });
 
       return content;

docs/assets/examples/page-demo/demo.css

@@ -1,23 +0,0 @@
-#page_slots_demo {
-  display: flex;
-  flex-flow: column;
-  gap: 1em;
-  margin-bottom: var(--wa-space-xl);
-
-  fieldset .options {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
-    gap: 0.2em 1em;
-
-    wa-checkbox {
-      white-space: nowrap;
-    }
-
-    p {
-      display: contents;
-    }
-  }
-
-  wa-viewport-demo {
-  }
-}

docs/assets/examples/page-demo/demo.js

@@ -1,51 +0,0 @@
-let container = document.getElementById('page_slots_demo');
-
-let fieldset = container.querySelector('fieldset');
-let iframe = container.querySelector('iframe');
-let stylesheets = Array.from(document.querySelectorAll("link[rel=stylesheet][href^='/dist/']"))
-  .map(i => i.outerHTML)
-  .join('\n');
-let includes = `${stylesheets}
-  <script src="/dist/webawesome.loader.js" type="module"></script>
-  <link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;
-
-async function render() {
-  await customElements.whenDefined('wa-checkbox');
-
-  // Let checkboxes update their "state"
-  await Promise.allSettled(
-    Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]')).map(checkbox => {
-      return checkbox.updateComplete;
-    }),
-  );
-
-  let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:state(checked)'));
-  let slotsHTML = slots
-    .map(slot => {
-      let name = slot.getAttribute('value');
-      let description = slot.getAttribute('data-description');
-
-      let tag = 'div';
-      if (name.endsWith('header')) {
-        tag = 'header';
-      }
-      if (name.endsWith('footer')) {
-        tag = 'footer';
-      }
-
-      return `<${tag} class="slot-content" slot="${name}">
-		<strong>${name || 'main <em>(default)</em>'}</strong>
-		<p>${description}</p>
-	</${tag}>`;
-    })
-    .join('\n');
-  let page = iframe.contentDocument?.querySelector('wa-page');
-
-  if (page) {
-    page.innerHTML = slotsHTML;
-  } else {
-    iframe.srcdoc = `${includes}<wa-page>${slotsHTML}</wa-page>`;
-  }
-}
-await render();
-fieldset?.addEventListener('input', render);

docs/assets/examples/page-demo/page.css

@@ -1,66 +0,0 @@
-body {
-  padding: 0;
-  margin: 0;
-}
-
-wa-page {
-  margin: var(--wa-space-xs);
-  margin-inline-start: 0;
-  &::part(base),
-  &::part(main),
-  &::part(navigation),
-  &::part(body) {
-    gap: var(--wa-space-xs);
-  }
-}
-
-:is([slot='banner'], [slot='header'], [slot='subheader'], [slot='footer'], [slot*='navigation']) {
-  margin-inline-start: var(--wa-space-xs);
-}
-
-.slot-content[slot='banner'],
-.slot-content[slot='header'],
-.slot-content[slot='subheader'] {
-  outline: 2px solid var(--wa-color-surface-default);
-}
-
-.slot-content {
-  padding: var(--wa-space-m);
-  border-radius: var(--wa-border-radius-m);
-  align-content: center;
-  justify-content: center;
-  text-align: center;
-  height: 100%;
-  box-sizing: border-box;
-  background: var(--wa-color-blue-80);
-  color: var(--wa-color-blue-20);
-
-  &[slot='banner'] {
-    background: var(--wa-color-blue-50);
-    color: white;
-  }
-
-  &[slot='header'] {
-    background: var(--wa-color-blue-60);
-    color: var(--wa-color-blue-10);
-  }
-
-  &[slot^='main'],
-  &[slot=''] {
-    background: var(--wa-color-gray-80);
-    color: var(--wa-color-gray-20);
-  }
-
-  &[slot^='navigation'] {
-    background: var(--wa-color-violet-80);
-    color: var(--wa-color-violet-20);
-  }
-
-  strong {
-    display: block;
-  }
-
-  &:not([slot='']) p {
-    display: none;
-  }
-}

docs/assets/images/webawesome-logo.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z" fill="var(--wa-brand-orange, #f36944)"/>
-</svg>
+<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg" fill="#f68a4c">
+<path d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"/>
+</svg>

docs/assets/scripts/cheatsheet.js

@@ -1,76 +0,0 @@
-let url = new URL(location);
-const pushedURL = false;
-
-const matchers = {
-  default(textContent, query) {
-    return textContent.includes(query);
-  },
-
-  i(textContent, query) {
-    return textContent.toLowerCase().includes(query.toLowerCase());
-  },
-
-  regexp(textContent, query) {
-    query.lastIndex = 0;
-    return query.test(textContent);
-  },
-};
-
-matchers.iregexp = matchers.regexp; // i is baked into the query
-
-function filterByName(value) {
-  const previousFilter = url.searchParams.get('name') || '';
-  url = new URL(location);
-
-  if (value) {
-    const isRegexp = name_search_regexp.checked;
-    const i = !name_search_i.checked;
-    const query = isRegexp ? new RegExp(value, 'gmsv' + (i ? 'i' : '')) : value;
-    const matcherId = (i ? 'i' : '') + (isRegexp ? 'regexp' : '');
-    const matcher = matchers[matcherId] ?? matchers.default;
-
-    for (const th of document.querySelectorAll('table tbody th:first-child')) {
-      const tr = th.parentNode;
-      const matches = matcher(th.textContent, query);
-      tr.toggleAttribute('hidden', !matches);
-    }
-    url.searchParams.set('name', value);
-
-    if (matcherId) {
-      url.searchParams.set('match', matcherId);
-    } else {
-      url.searchParams.delete('match');
-    }
-  } else {
-    for (const tr of document.querySelectorAll('table tbody tr[hidden]')) {
-      tr.removeAttribute('hidden');
-    }
-    url.searchParams.delete('name');
-    url.searchParams.delete('match');
-  }
-
-  if (value !== previousFilter) {
-    history[pushedURL ? 'replaceState' : 'pushState'](null, '', url);
-  }
-
-  // Update heading counts
-  for (const h2 of document.querySelectorAll('h2:has(+ table)')) {
-    const count = h2.querySelector('.count');
-    if (!count) continue;
-    const table = h2.nextElementSibling;
-    const visibleRows = table.querySelectorAll('tbody tr:not([hidden])').length;
-    count.textContent = visibleRows;
-    const outlineLink = document.querySelector(`#outline-standard a[href="#${h2.id}"]`);
-    if (outlineLink) {
-      // Why not just = h2.textContent? To skip the "Jump to heading" link
-      outlineLink.textContent = '';
-      outlineLink.append(...[...h2.childNodes].slice(0, 3).map(n => n.cloneNode(true)));
-    }
-  }
-}
-
-if (name_search.value) {
-  filterByName(name_search.value);
-}
-
-name_search_group.addEventListener('wa-input', e => filterByName(name_search.value));

docs/assets/scripts/code-examples.js

@@ -18,11 +18,9 @@ document.addEventListener('click', event => {
     const cdnUrl = document.documentElement.dataset.cdnUrl;
     const html =
       `<script type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
-      `<link rel="stylesheet" href="${cdnUrl}styles/themes/default.css">\n` +
-      `<link rel="stylesheet" href="${cdnUrl}styles/webawesome.css">\n` +
-      `<link rel="stylesheet" href="${cdnUrl}styles/utilities.css">\n\n` +
+      `<link rel="stylesheet" href="${cdnUrl}themes/default.css">\n\n` +
       `${code.textContent}`;
-    const css = 'html > body {\n  padding: 2rem !important;\n}';
+    const css = 'body {\n  font: 16px sans-serif;\n  padding: 1rem;\n}';
     const js = '';
 
     const form = document.createElement('form');
@@ -43,7 +41,7 @@ document.addEventListener('click', event => {
       js_pre_processor: 'none',
       html,
       css,
-      js,
+      js
     };
 
     const input = document.createElement('input');

docs/assets/scripts/color-scheme.js

@@ -2,29 +2,35 @@
 // Color scheme selector
 //
 (() => {
+  function getColorScheme() {
+    return localStorage.getItem('colorScheme') || 'auto';
+  }
+
+  function isDark() {
+    if (colorScheme === 'auto') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    return colorScheme === 'dark';
+  }
+
   function setColorScheme(newColorScheme) {
     colorScheme = newColorScheme;
     localStorage.setItem('colorScheme', colorScheme);
-    const presetTheme = window.getPresetTheme();
 
     // Update the UI
     updateSelection();
 
     // Toggle the dark mode class
-    document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
+    document.documentElement.classList.toggle('wa-theme-default-dark', isDark());
   }
 
   function updateSelection() {
     const menu = document.querySelector('#color-scheme-selector wa-menu');
     if (!menu) return;
-    [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
-      await customElements.whenDefined(item.localName);
-      await item.updateComplete;
-      item.checked = item.getAttribute('value') === colorScheme;
-    });
+    [...menu.querySelectorAll('wa-menu-item')].map(item => (item.checked = item.getAttribute('value') === colorScheme));
   }
 
-  let colorScheme = window.getColorScheme();
+  let colorScheme = getColorScheme();
 
   // Selection is not preserved when changing page, so update when opening dropdown
   document.addEventListener('wa-show', event => {
@@ -50,7 +56,7 @@
       !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
     ) {
       event.preventDefault();
-      setColorScheme(window.isDark() ? 'light' : 'dark');
+      setColorScheme(isDark() ? 'light' : 'dark');
     }
   });
 

docs/assets/scripts/filter.js

@@ -1,25 +0,0 @@
-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;
-    }
-  }
-}
-
-document.documentElement.addEventListener('wa-input', e => {
-  if (e.target?.matches('#block-filter wa-input')) {
-    updateResults(e.target);
-  }
-});

docs/assets/scripts/hydration-errors.js

@@ -79,8 +79,8 @@
       diffViewer.appendChild(
         createDiff({
           serverHTML,
-          clientHTML,
-        }),
+          clientHTML
+        })
       );
     });
   }
@@ -88,7 +88,7 @@
   function createDiff({ serverHTML, clientHTML }) {
     const diff = diffLines(serverHTML, clientHTML, {
       ignoreWhitespace: false,
-      newLineIsToken: true,
+      newLineIsToken: true
     });
     const fragment = document.createDocumentFragment();
     for (var i = 0; i < diff.length; i++) {

docs/assets/scripts/preset-theme.js

@@ -1,99 +0,0 @@
-(() => {
-  function applyThemeChange(stylesheet, newStylesheet) {
-    newStylesheet.rel = 'stylesheet';
-    newStylesheet.id = stylesheet.id;
-    requestAnimationFrame(() => {
-      stylesheet.remove();
-    });
-  }
-
-  function setPresetTheme(newPresetTheme) {
-    presetTheme = newPresetTheme;
-    localStorage.setItem('presetTheme', presetTheme);
-
-    const stylesheet = document.getElementById('theme-stylesheet');
-    const newStylesheet = Object.assign(document.createElement('link'), {
-      href: `/dist/styles/themes/${presetTheme}.css`,
-      rel: 'preload',
-      as: 'style',
-    });
-
-    newStylesheet.addEventListener(
-      'load',
-      () => {
-        const canUseViewTransitions =
-          document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
-        if (canUseViewTransitions) {
-          document.startViewTransition(() => applyThemeChange(stylesheet, newStylesheet));
-        } else {
-          applyThemeChange(stylesheet, newStylesheet);
-        }
-      },
-      { once: true },
-    );
-
-    document.head.append(newStylesheet);
-    updateSelection();
-    document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
-  }
-
-  function updateSelection(container = document) {
-    const menus = container.querySelectorAll('.preset-theme-selector wa-menu');
-    if (!menus) return;
-
-    [...menus].forEach(menu => {
-      // Clear all checked states
-      [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
-        await customElements.whenDefined(item.localName);
-        await item.updateComplete;
-        item.checked = false; // Reset all items to unchecked first
-      });
-
-      // Then set only the selected item as checked
-      const selectedItem = menu.querySelector(`wa-menu-item[value="${presetTheme}"]`);
-      if (selectedItem) {
-        customElements.whenDefined(selectedItem.localName).then(async () => {
-          await selectedItem.updateComplete;
-          selectedItem.checked = true;
-          container.querySelector('.preset-theme-selector__text').textContent = selectedItem.innerText;
-        });
-      }
-    });
-  }
-
-  let presetTheme = window.getPresetTheme();
-
-  // Selection is not preserved when changing page, so update when opening dropdown
-  document.addEventListener('wa-show', event => {
-    const presetThemeSelector = event.target.closest('.preset-theme-selector');
-    if (!presetThemeSelector) return;
-    updateSelection();
-  });
-
-  // Listen for selections
-  document.addEventListener('wa-select', event => {
-    const menu = event.target.closest('.preset-theme-selector wa-menu');
-    if (!menu) return;
-    setPresetTheme(event.detail.item.value);
-  });
-
-  // Update the color scheme when the preference changes
-  window.matchMedia('(prefers-preset-theme: dark)').addEventListener('change', () => setPresetTheme(presetTheme));
-  updateSelection();
-
-  /**
-   * Without this, there's a flash of the incorrect preset theme.
-   */
-  function updateSelectionBeforeTurboLoad(e) {
-    const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
-    if (!newElement) {
-      return;
-    }
-    updateSelection(newElement);
-  }
-
-  ['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
-    document.addEventListener(eventName, updateSelectionBeforeTurboLoad);
-  });
-})();

docs/assets/scripts/scroll.js

@@ -1,14 +1,13 @@
 // Smooth links
 document.addEventListener('click', event => {
   const link = event.target.closest('a');
+  const id = (link?.hash ?? '').substr(1);
+
   if (!link || link.getAttribute('data-smooth-link') === 'off') {
     return;
   }
 
-  const id = (link.hash ?? '').substr(1);
-
-  // Only handle smooth scroll if there's a hash and the link points to the current page
-  if (id && link.pathname === window.location.pathname) {
+  if (id) {
     const target = document.getElementById(id);
     const headerHeight = document.querySelector('wa-page > header').clientHeight;
 
@@ -16,7 +15,7 @@ document.addEventListener('click', event => {
       event.preventDefault();
       window.scroll({
         top: target.offsetTop - headerHeight,
-        behavior: 'smooth',
+        behavior: 'smooth'
       });
       history.pushState(undefined, undefined, `#${id}`);
     }

docs/assets/scripts/search.js

@@ -9,7 +9,7 @@ const icons = {
   component: 'puzzle-piece',
   document: 'file',
   home: 'house',
-  theme: 'palette',
+  theme: 'palette'
 };
 let searchTimeout;
 
@@ -18,7 +18,7 @@ function getElements() {
   return {
     dialog: document.getElementById('site-search'),
     input: document.getElementById('site-search-input'),
-    results: document.getElementById('site-search-listbox'),
+    results: document.getElementById('site-search-listbox')
   };
 }
 

docs/assets/scripts/turbo.js

@@ -9,7 +9,7 @@ function saveScrollPosition() {
     if (element.id) {
       positions[element.id] = {
         top: element.scrollTop,
-        left: element.scrollLeft,
+        left: element.scrollLeft
       };
     } else {
       console.warn(`Can't save scroll position for elements without an id.`, el);

docs/assets/styles/code-examples.css

@@ -1,6 +1,6 @@
 .code-example {
   border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-  border-radius: var(--wa-border-radius-l);
+  border-radius: var(--wa-border-radius-m);
   color: var(--wa-color-text-normal);
   margin-block-end: var(--wa-flow-spacing);
 }
@@ -41,8 +41,8 @@
   border-bottom: none;
 
   pre {
-    border-bottom-right-radius: var(--wa-border-radius-l);
-    border-bottom-left-radius: var(--wa-border-radius-l);
+    border-bottom-right-radius: var(--wa-border-radius-m);
+    border-bottom-left-radius: var(--wa-border-radius-m);
   }
 }
 
@@ -62,11 +62,11 @@
 
     &:first-of-type {
       border-left: none;
-      border-bottom-left-radius: var(--wa-border-radius-l);
+      border-bottom-left-radius: var(--wa-border-radius-m);
     }
 
     &:last-of-type {
-      border-bottom-right-radius: var(--wa-border-radius-l);
+      border-bottom-right-radius: var(--wa-border-radius-m);
     }
 
     &:focus-visible {

docs/assets/styles/copy-code.css

@@ -6,7 +6,7 @@ wa-copy-button.copy-button {
   right: 0.25rem;
   font-family: var(--wa-font-family-body);
   color: var(--wa-color-gray-80);
-  border-radius: var(--wa-border-radius-m);
+  border-radius: var(--wa-border-radius-s);
   padding: 0.25rem;
 
   &:hover {

docs/assets/styles/docs.css

@@ -22,15 +22,7 @@ wa-page {
 /* Header */
 wa-page::part(header) {
   background-color: var(--wa-color-surface-default);
-  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
-}
-
-wa-page::part(body) {
-  padding-top: 0px;
-}
-
-wa-page::part(header-actions) {
-  align-self: center;
+  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
 }
 
 wa-page > header {
@@ -38,6 +30,7 @@ wa-page > header {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  height: 4rem;
   padding-inline: var(--wa-space-xl);
 
   a[href='/'] {
@@ -46,8 +39,7 @@ wa-page > header {
   }
 
   wa-button[data-toggle-nav] {
-    --text-color: currentColor;
-    font-size: 1rem;
+    --label-color: currentColor;
     margin-inline-start: -0.875rem;
     margin-inline-end: 0;
 
@@ -76,12 +68,14 @@ wa-page > header {
     margin-block-start: var(--wa-space-2xs);
   }
   #version-number + wa-badge {
+    --background-color: var(--wa-color-warning-fill-quiet);
+    --content-color: var(--wa-color-warning-on-quiet);
     font-size: var(--wa-font-size-2xs);
     text-transform: uppercase;
   }
   wa-button#search-trigger {
     --background-color: var(--wa-form-control-background-color);
-    --border-color: var(--wa-form-control-border-color);
+    --border-color: var(--wa-form-control-resting-color);
   }
   #search-trigger kbd {
     font-size: var(--wa-font-size-2xs);
@@ -93,20 +87,11 @@ wa-page > header {
 #outline {
   h2 {
     font-size: var(--wa-font-size-m);
-    margin: 0;
+    margin-block-end: var(--wa-space-m);
   }
-
-  h2:not(:first-child),
-  wa-details:not(:first-child) {
-    margin-block-start: var(--wa-space-xs);
+  h2:not(:first-of-type) {
+    margin-block-start: var(--wa-space-xl);
   }
-
-  wa-details {
-    border: none;
-    background: none;
-    padding: 0;
-  }
-
   ul {
     border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
     font-size: var(--wa-font-size-s);
@@ -114,83 +99,19 @@ wa-page > header {
     margin: 0;
     padding-inline-start: var(--wa-space-m);
   }
-
   ul ul {
     margin-block-start: var(--wa-space-m);
   }
-
-  ul:empty {
-    display: none;
-  }
-
   li {
     list-style: none;
-
-    + li {
-      margin-block-start: var(--wa-space-m);
-    }
+    margin-block-end: var(--wa-space-m);
   }
-
   li a {
     color: var(--wa-color-text-normal);
     text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
   }
-
-  li wa-badge::part(base) {
-    font-size: var(--wa-font-size-2xs);
-    font-weight: var(--wa-font-weight-bold);
-  }
-
-  li wa-icon {
-    color: var(--wa-color-text-quiet);
-    vertical-align: middle;
-
-    &[name='flask'] {
-      margin-inline: 0.125em;
-    }
-  }
-}
-
-#outline-standard h2 {
-  margin-block-end: var(--wa-space-m);
-}
-
-/* Pro badges */
-wa-badge.pro::part(base) {
-  background-color: var(--wa-brand-orange);
-  border-color: var(--wa-brand-orange);
-}
-
-#sidebar {
-  h2 {
-    color: var(--wa-color-text-quiet);
-
-    a {
-      display: flex;
-      align-items: center;
-      gap: 0.4em;
-      color: var(--wa-color-text-normal);
-      text-decoration: none;
-
-      wa-icon {
-        margin-block-end: -0.15em;
-        font-size: var(--wa-font-size-s);
-        font-weight: var(--wa-font-weight-action);
-        color: var(--wa-color-gray-70);
-      }
-
-      &:hover {
-        color: var(--wa-color-brand-on-normal);
-
-        wa-icon {
-          color: var(--wa-color-brand-on-quiet);
-        }
-      }
-    }
+  li a:hover {
+    text-decoration: underline;
   }
 }
 
@@ -222,15 +143,7 @@ wa-page > main {
   margin-inline: auto;
 }
 
-h1.title wa-badge {
-  vertical-align: middle;
-
-  &::part(base) {
-    font-size: 1.5rem;
-  }
-}
-
-.block-info {
+.component-info {
   margin-block-end: var(--wa-flow-spacing);
 }
 
@@ -261,7 +174,7 @@ h1.title wa-badge {
   display: flex;
   gap: 1rem;
   border: var(--wa-border-style) var(--wa-border-width-s);
-  border-radius: var(--wa-border-radius-l);
+  border-radius: var(--wa-border-radius-m);
   padding: 1rem;
   margin-block-end: var(--wa-flow-spacing);
 
@@ -321,45 +234,8 @@ wa-page > main:has(> .index-grid) {
 
 .index-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
   gap: var(--wa-space-2xl);
-
-  a {
-    border-radius: var(--wa-border-radius-l);
-  }
-
-  wa-card {
-    --box-shadow: none;
-    --spacing: var(--wa-space-m);
-    inline-size: 100%;
-
-    &:hover {
-      --border-color: var(--wa-color-brand-border-loud);
-      --box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
-
-      .page-name {
-        color: var(--wa-color-brand-on-quiet);
-      }
-    }
-
-    [slot='header'] {
-      display: flex;
-    }
-
-    &::part(header) {
-      background-color: var(--wa-color-neutral-fill-quiet);
-      border-bottom: none;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-block-size: calc(6rem + var(--spacing));
-    }
-  }
-
-  .page-name {
-    font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-action);
-  }
 }
 
 .index-category {
@@ -368,40 +244,55 @@ wa-page > main:has(> .index-grid) {
   margin-block-start: var(--wa-space-2xl);
 }
 
+.index-grid a {
+  border-radius: var(--wa-border-radius-m);
+}
+
+.index-grid wa-card {
+  --box-shadow: none;
+  --spacing: var(--wa-space-m);
+  inline-size: 100%;
+}
+
+.index-grid wa-card:hover {
+  --border-color: var(--wa-color-brand-border-loud);
+  --box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
+  & .page-name {
+    color: var(--wa-color-brand-on-quiet);
+  }
+}
+
+.index-grid wa-card [slot='header'] {
+  display: flex;
+}
+
+.index-grid wa-card::part(header) {
+  background-color: var(--wa-color-neutral-fill-quiet);
+  border-bottom: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: calc(6rem + var(--spacing));
+}
+
+.index-grid .page-name {
+  font-size: var(--wa-font-size-s);
+  font-weight: var(--wa-font-weight-action);
+}
+
 /* Swatches */
 .swatch {
   background-color: transparent;
   border-color: var(--wa-color-neutral-border-normal);
   border-style: var(--wa-border-style);
   border-width: var(--wa-border-width-s);
-  border-radius: var(--wa-border-radius-m);
+  border-radius: var(--wa-border-radius-s);
   box-sizing: border-box;
   line-height: 2.5;
   height: 2.5em;
   padding-inline: var(--wa-space-xs);
 }
 
-/* Layout Examples */
-.layout-example-boundary {
-  border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
-  border-radius: var(--wa-border-radius-l);
-  padding: var(--wa-space-s);
-}
-
-.layout-example-block {
-  background-color: var(--wa-color-indigo-60);
-  border-radius: var(--wa-border-radius-m);
-  min-block-size: 4rem;
-  min-inline-size: 4rem;
-}
-
-.layout-example-mixed-sizing .layout-example-block:nth-child(3n) {
-  min-inline-size: 6rem;
-}
-.layout-example-mixed-sizing .layout-example-block:nth-child(3n + 2) {
-  min-inline-size: 8rem;
-}
-
 /* Utilities */
 .two-columns {
   columns: 2;
@@ -414,7 +305,6 @@ wa-page > main:has(> .index-grid) {
 
 .table-scroll {
   overflow-x: auto;
-  margin-block-end: var(--wa-flow-spacing);
 }
 
 /** mobile */
@@ -426,9 +316,14 @@ wa-page > main:has(> .index-grid) {
 
 /** desktop */
 @media screen and not (max-width: 768px) {
+  wa-page [data-toggle-nav],
+  wa-page .only-mobile {
+    display: none;
+  }
+
   /* Navigation sidebar */
   wa-page::part(navigation) {
-    border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
+    border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
   }
 
   wa-page > #sidebar {

docs/assets/styles/filter.css

@@ -1,37 +0,0 @@
-wa-card#drawer-card::part(header) {
-  --spacing: 0;
-  justify-content: flex-end;
-  overflow: hidden;
-}
-
-#block-filter {
-  margin-block-end: var(--wa-space-xl);
-}
-
-.index-grid.filtered {
-  h2 {
-    /* Hide headings while filtering */
-    display: none;
-  }
-
-  &:not(:has(> a:not([hidden]))) {
-    /* We’re filtering and there are no results */
-
-    &::before {
-      content: var(--empty-message);
-      grid-column: 1 / -1;
-      color: var(--wa-color-on-quiet);
-      font-style: italic;
-      font-weight: var(--wa-font-weight-action);
-    }
-
-    /* Show empty state when there's a search filter and no results */
-    &[data-empty] {
-      --empty-message: attr(data-empty);
-    }
-
-    &:not([data-empty]) {
-      --empty-message: 'No results';
-    }
-  }
-}