Add component reference / cheatsheet

No need for functions or computing multiple times, that's what data is for!

.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"
   },

README.md

@@ -59,8 +59,6 @@ To generate a production build, run the following command.
 npm run build
 ```
 
-You can also run `npm run build:serve` to start an [`http-server`](https://www.npmjs.com/package/http-server) instance on `http://localhost:4000` after the build completes, so you can preview the production build.
-
 ### Creating New Components
 
 To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.

cspell.json

@@ -39,15 +39,12 @@
     "crutchcorn",
     "csspart",
     "cssproperty",
-    "cssstate",
     "datetime",
     "describedby",
     "Docsify",
     "dogfood",
     "dropdowns",
     "easings",
-    "ecommerce",
-    "endfor",
     "endraw",
     "endregion",
     "enterkeyhint",
@@ -86,8 +83,6 @@
     "jsfiddle",
     "keydown",
     "keyframes",
-    "keymaker",
-    "Konnor",
     "Kool",
     "labelledby",
     "Laravel",
@@ -105,7 +100,6 @@
     "metaframeworks",
     "middlewares",
     "minlength",
-    "minmax",
     "monospace",
     "mousedown",
     "mousemove",
@@ -114,7 +108,6 @@
     "multiselectable",
     "nextjs",
     "nocheck",
-    "noindex",
     "noopener",
     "noreferrer",
     "novalidate",
@@ -127,7 +120,6 @@
     "peta",
     "petabit",
     "Preact",
-    "preconnect",
     "prismjs",
     "progressbar",
     "radiogroup",
@@ -158,19 +150,16 @@
     "smartquotes",
     "spacebar",
     "stylesheet",
-    "svgs",
     "Tabbable",
     "tabindex",
     "tabler",
     "tablist",
     "tabpanel",
-    "tbody",
     "templating",
     "tera",
     "testid",
     "textareas",
     "textfield",
-    "thead",
     "Themer",
     "tinycolor",
     "transitionend",
@@ -194,8 +183,7 @@
     "webawesomer",
     "WEBP",
     "Webpacker",
-    "xmark",
+    "xmark"
-    "zoomable"
   ],
   "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,71 +1,52 @@
+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 { formatCodePlugin } from './_utils/format-code.js';
-import { removeDataAlphaElements } from './_utils/remove-data-alpha-elements.js';
-// import { formatCodePlugin } from './_utils/format-code.js';
-import litPlugin from '@lit-labs/eleventy-plugin-lit';
-import { readFile } from 'fs/promises';
-import componentList from './_data/componentList.js';
-import * as filters from './_utils/filters.js';
-import { outlinePlugin } from './_utils/outline.js';
 import { replaceTextPlugin } from './_utils/replace-text.js';
 import { searchPlugin } from './_utils/search.js';
+import { readFile } from 'fs/promises';
+import { outlinePlugin } from './_utils/outline.js';
+import componentList from './_data/componentList.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');
-
-const globalData = {
-  package: packageData,
-  isAlpha,
-  layout: 'page.njk',
-};
-
-const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
-const passThrough = [...passThroughExtensions.map(ext => 'docs/**/*.' + ext)];
 
 export default function (eleventyConfig) {
   // NOTE - alpha setting removes certain pages
   if (isAlpha) {
+    eleventyConfig.ignores.add('**/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
-  for (let name in globalData) {
+  eleventyConfig.addGlobalData('package', packageData);
-    eleventyConfig.addGlobalData(name, globalData[name]);
-  }
 
   // Template filters - {{ content | filter }}
   eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
   eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
-
+  eleventyConfig.addFilter('stripExtension', string => parse(string).name);
-  for (let name in filters) {
+  eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
-    eleventyConfig.addFilter(name, filters[name]);
+  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
 
-  // Remove elements that have [data-alpha="remove"]
-  eleventyConfig.addPlugin(removeDataAlphaElements({ isAlpha }));
-
   // Use our own markdown instance
   eleventyConfig.setLibrary('md', markdown);
 
@@ -80,15 +61,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());
@@ -102,77 +83,60 @@ 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
+  const omittedModules = [];
-  if (!isDev) {
-    //
-    // Problematic components in SSR land:
-    //  - animation (breaks on navigation + ssr with Turbo)
-    //  - mutation-observer (why SSR this?)
-    //  - resize-observer (why SSR this?)
-    //  - tooltip (why SSR this?)
-    //
-    const omittedModules = [];
-    const componentModules = componentList
-      .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
-      .map(component => {
-        const name = component.tagName.split(/wa-/)[1];
-        return `./dist/components/${name}/${name}.js`;
-      });
 
-    eleventyConfig.addPlugin(litPlugin, {
+  // problematic components:
-      mode: 'worker',
+  // animation (breaks on navigation + ssr with Turbo)
-      componentModules,
+  // mutation-observer (why SSR this?)
+  // resize-observer (why SSR this?)
+  // tooltip (why SSR this?)
+  const componentModules = componentList
+    // .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
+    .map(component => {
+      const name = component.tagName.split(/wa-/)[1];
+      return `./dist/components/${name}/${name}.js`;
     });
-  }
+
+  eleventyConfig.addPlugin(litPlugin, {
+    mode: 'worker',
+    componentModules
+  });
 
   // Build the search index
   eleventyConfig.addPlugin(
     searchPlugin({
       filename: '',
       selectorsToIgnore: ['code.example'],
-      getContent: doc => doc.querySelector('#content')?.textContent ?? '',
+      getContent: doc => doc.querySelector('#content')?.textContent ?? ''
-    }),
+    })
   );
 
   // Production-only plugins
-  //
+  if (!isDeveloping) {
-  // TODO - disabled because it takes about a minute to run now
+    // Run Prettier on each file (prod only because it can be slow)
-  //
+    eleventyConfig.addPlugin(formatCodePlugin());
-  // if (!isDev) {
-  //   // Run Prettier on each file (prod only because it can be slow)
-  //   eleventyConfig.addPlugin(formatCodePlugin());
-  // }
-
-  eleventyConfig.addPassthroughCopy({
-    'docs/assets': 'assets',
-  });
-
-  for (let glob of passThrough) {
-    eleventyConfig.addPassthroughCopy(glob);
   }
 
   return {
-    markdownTemplateEngine: 'njk',
     dir: {
-      input: 'docs',
       includes: '_includes',
-      layouts: '_layouts',
+      layouts: '_layouts'
     },
-    templateFormats: ['njk', 'md'],
+    templateFormats: ['njk', 'md']
   };
 }

docs/_data/componentList.js

@@ -1,9 +1,9 @@
 /**
  * @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';
+import { readFileSync } from 'fs';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -36,7 +36,7 @@ const components = manifest.modules.flatMap(module => {
         slug: declaration.tagName.replace(/^wa-/, ''),
         methods,
         attributes,
-        properties,
+        properties
       };
     });
 });

docs/_data/componentsBy.js

@@ -6,7 +6,7 @@ const by = {
   event: {},
   method: {},
   cssPart: {},
-  cssProperty: {},
+  cssProperty: {}
 };
 
 function getAll(component, type) {

docs/_data/hues.json

@@ -1 +0,0 @@
-["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]

docs/_data/palettes.js

@@ -1 +0,0 @@
-export { default as default } from '../../src/styles/color/palettes.js';

docs/_includes/base.njk

@@ -1,46 +1,127 @@
 <!DOCTYPE html>
 <html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
   <head>
-    {% include 'head.njk' %}
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="{{ description }}">
     <meta name="theme-color" content="#f36944">
+    {% 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.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>
     <script type="module" src="/assets/scripts/outline.js"></script>
     <script defer data-domain="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>
 
+    {# Web Awesome #}
+    <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
+    <link rel="stylesheet" id="theme-stylesheet" />
+    <link rel="stylesheet" href="/dist/themes/applied.css" />
+    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/layout.css" />
+    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities.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 stylesheet = document.getElementById("theme-stylesheet")
+      let preset = getPresetTheme()
+
+      stylesheet.href = `/dist/themes/${preset}.css`
+
+      document.documentElement.classList.toggle(
+        `wa-theme-${preset}-dark`,
+        isDark()
+      );
+    </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" class="wa-split">
+      <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="only-desktop">{% include "logo.njk" %}</span>
-            <span class="wa-mobile-only">{% include "logo-simple.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" class="wa-cluster wa-gap-xs">
+        <div id="docs-toolbar">
-          {# Desktop selectors #}
+          {# Preset theme selector #}
-          <div class="only-desktop wa-cluster wa-gap-xs">
+          <wa-dropdown id="preset-theme-selector">
-            {% include "preset-theme-selector.njk" %}
+            <wa-button slot="trigger" appearance="tinted" size="small" pill caret>
-            {% include "color-scheme-selector.njk" %}
+              <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
-          </div>
+              <span id="preset-theme-selector__text" class="only-desktop">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="fa">Font Awesome</wa-menu-item>
+
+              <wa-menu-item type="checkbox" value="active">Active</wa-menu-item>
+              <wa-menu-item type="checkbox" value="brutalist">Brutalism</wa-menu-item>
+              <wa-menu-item type="checkbox" value="glassy">Glassy</wa-menu-item>
+              <wa-menu-item type="checkbox" value="migration">Migration</wa-menu-item>
+              <wa-menu-item type="checkbox" value="playful">Playful</wa-menu-item>
+              <wa-menu-item type="checkbox" value="premium">Premium</wa-menu-item>
+            </wa-menu>
+          </wa-dropdown>
+          {# 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>
@@ -53,16 +134,12 @@
 
       {# Sidebar #}
       {% if hasSidebar %}
-        {# Mobile selectors #}
+        <aside slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
-        <div class="wa-mobile-only" slot="navigation-header">
+          <wa-icon-button id="sidebar-close-button" name="xmark" label="Close" data-drawer="close"></wa-icon-button>
-          <div class="wa-cluster wa-gap-xs">
+          <nav>
-            {% include "preset-theme-selector.njk" %}
+            {% include "sidebar.njk" %}
-            {% include "color-scheme-selector.njk" %}
+          </nav>
-          </div>
+        </aside>
-        </div>
-        <div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
-          {% include "sidebar.njk" %}
-        </div>
       {% endif %}
 
       {# Outline #}
@@ -83,12 +160,11 @@
           </details>
         </nav>
 
-        {% block header %}
+        {% block beforeContent %}{% endblock %}
-          {% include 'breadcrumbs.njk' %}
-          <h1 class="title">{{ title }}</h1>
-        {% endblock %}
 
         {% block content %}
+          <h1 class="title">{{ title }}</h1>
+
           {{ content | safe }}
         {% endblock %}
 

docs/_includes/breadcrumbs.njk

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

docs/_includes/color-scheme-selector.njk

@@ -1,19 +0,0 @@
-{# Color scheme selector #}
-<wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" pill title="Press \ to toggle">
-  <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
-  <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
-  <wa-option value="light">
-    <wa-icon slot="prefix" name="sun" variant="regular"></wa-icon>
-    Light
-  </wa-option>
-  <wa-option value="dark">
-    <wa-icon slot="prefix" name="moon" variant="regular"></wa-icon>
-    Dark
-  </wa-option>
-  <wa-divider></wa-divider>
-  <wa-option value="auto">
-    <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
-    <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
-    System
-  </wa-option>
-</wa-select>

docs/_includes/contrast-table.njk

@@ -1,40 +0,0 @@
-<table class="colors wa-palette-{{ paletteId }}">
-  <thead>
-    <tr>
-      <th></th>
-      {% for tint_bg in tints -%}
-        {% for tint_fg in tints | reverse -%}
-          {% if (tint_fg - tint_bg) | abs == difference %}
-          <th>{{ tint_fg }} on {{ tint_bg }}</th>
-          {% endif %}
-        {%- endfor -%}
-      {%- endfor %}
-    </tr>
-  </thead>
-{% for hue in hues -%}
-<tr>
-  <th>{{ hue | capitalize }}</th>
-  {% for tint_bg in tints -%}
-    {% set color_bg = palettes[paletteId][hue][tint_bg] %}
-    {% for tint_fg in tints | reverse -%}
-      {% set color_fg = palettes[paletteId][hue][tint_fg] %}
-      {% if (tint_fg - tint_bg) | abs == difference %}
-      <td>
-        <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})">
-          {% set contrast_wcag = '' %}
-          {% if color_fg and color_bg %}
-            {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
-          {% endif %}
-          {% if contrast_wcag %}
-          {{ contrast_wcag | number({maximumSignificantDigits: 2}) }}
-          {% else %}
-          {{ tint_fg }} on {{ tint_bg }}
-          {% endif %}
-        </div>
-      </td>
-      {% endif %}
-    {%- endfor -%}
-  {%- endfor -%}
-</tr>
-{%- endfor %}
-</table>

docs/_includes/grouped-pages.njk

@@ -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/head.njk

@@ -1,49 +0,0 @@
-<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>
-
-{# Dark mode #}
-<script>
-	let colorScheme = localStorage.colorScheme;
-	let isDark = localStorage.colorScheme === "dark";
-	if (!colorScheme || colorScheme === "auto") {
-		isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-	}
-	document.documentElement.classList.toggle('wa-dark', isDark);
-</script>
-
-<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>
-
-<script type="module" src="/assets/scripts/theme-picker.js"></script>
-{# Preset Theme #}
-{% if forceTheme %}
-<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme }}.css" render="blocking" fetchpriority="high" />
-{% else %}
-<noscript><link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high" /></noscript>
-<script>
-{
-	let preset = localStorage.presetTheme ?? 'default';
-	let script = document.currentScript;
-	script.insertAdjacentHTML('beforebegin', `<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/${ preset }.css" render="blocking" fetchpriority="high" />`);
-}
-</script>
-<script type="module" src="/assets/scripts/preset-theme-picker.js"></script>
-{% endif %}
-
-<link rel="stylesheet" href="/dist/styles/webawesome.css" />
-<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
-<link rel="stylesheet" href="/dist/styles/forms.css" />

docs/_includes/import-stylesheet-code.md.njk

@@ -1,18 +0,0 @@
-<wa-tab-group>
-<wa-tab panel="html">In HTML</wa-tab>
-<wa-tab panel="css">In CSS</wa-tab>
-<wa-tab-panel name="html">
-
-Simply add the following code to the `<head>` of your page:
-```html
-<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
-```
-</wa-tab-panel>
-<wa-tab-panel name="css">
-
-Simply add the following code at the top of your CSS file:
-```css
-@import url('{% cdnUrl stylesheet %}');
-```
-</wa-tab-panel>
-</wa-tab-group>

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="./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(`./demo.js?${cacheBust}`)
-</script>

docs/_includes/preset-theme-selector.njk

@@ -1,9 +0,0 @@
-{# Preset theme selector #}
-<wa-select appearance="filled" size="small" value="default" pill class="preset-theme-selector">
-  <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
-  {% for theme in collections.theme | sort %}
-    <wa-option value="{{ theme.page.fileSlug }}"{{ ' data-alpha="remove"' if theme.noAlpha }}>
-      {{ theme.data.title }}
-    </wa-option>
-  {% endfor %}
-</wa-select>

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] -%}
-  {% set groupUrl %}/docs/{{ tag }}/{% endset %}
-  <wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | attr('open') }}>
-    <h2 slot="summary">
-      {% if groupUrl | getCollectionItemFromUrl %}
-        <a href="{{ groupUrl }}" title="Overview">{{ title or (tag | capitalize) }}
-          <wa-icon name="grid-2"></wa-icon>
-        </a>
-      {% else %}
-        {{ title or (tag | capitalize) }}
-      {% endif %}
-    </h2>
-    <ul>
-      {% for page in collections[tag] | sort %}
-        {% if not page.data.parent -%}
-          {% include 'sidebar-link.njk' %}
-        {%- endif %}
-      {% endfor %}
-    </ul>
-  </wa-details>
-{%- endif %}

docs/_includes/sidebar-link.njk

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

docs/_includes/sidebar.njk

@@ -3,6 +3,7 @@
 <ul>
   <li><a href="/docs/installation">Installation</a></li>
   <li><a href="/docs/usage">Usage</a></li>
+  <li><a href="/docs/themes">Themes</a></li>
   <li><a href="/docs/customizing">Customizing</a></li>
   <li><a href="/docs/form-controls">Form Controls</a></li>
   <li><a href="/docs/localization">Localization</a></li>
@@ -18,15 +19,275 @@
   <li><a href="/docs/resources/changelog">Changelog</a></li>
 </ul>
 
-{% for tag, title in {
+{# Components #}
-  'themes': 'Themes',
+<h2>Components</h2>
-  'components': 'Components',
+<ul>
-  'native': 'Native Styles',
+  <li>
-  'utilities': 'Style Utilities',
+    <a href="/docs/components/">Components Overview</a>
-  'layout': 'Layout',
+  </li>
-  'patterns': 'Patterns',
+  <li>
-  'palettes': 'Color Palettes',
+    <a href="/docs/components/animated-image">Animated Image</a>
-  'tokens': 'Design Tokens'
+  </li>
-} %}
+  <li>
-  {% include 'sidebar-group.njk' %}
+    <a href="/docs/components/animation">Animation</a>
-{% endfor %}
+  </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>
+
+{# Layout #}
+<h2>Layout</h2>
+<ul>
+  <li><a href="/docs/layout">Layout Overview</a></li>
+  <li><a href="/docs/components/page">Page</a></li>
+  <li><a href="/docs/layout/cluster">Cluster</a></li>
+  <li><a href="/docs/layout/flank">Flank</a></li>
+  <li><a href="/docs/layout/frame">Frame</a></li>
+  <li><a href="/docs/layout/grid">Grid</a></li>
+  <li><a href="/docs/layout/split">Split</a></li>
+  <li><a href="/docs/layout/stack">Stack</a></li>
+</ul>
+
+{# Patterns #}
+<h2>Patterns</h2>
+<ul>
+  <li>
+    <a href="/docs/patterns/">Pattern Overview</a>
+  </li>
+  <li><a href="/docs/patterns/app">Web App</a></li>
+  <li><a href="/docs/patterns/ecommerce">E-commerce</a>
+    <ul>
+      <li><a href="/docs/patterns/ecommerce-product-review">Product Reviews</a></li>
+      <li><a href="/docs/patterns/ecommerce-product-list">Product Lists</a></li>
+      <li><a href="/docs/patterns/ecommerce-category-preview">Category Previews</a></li>
+      <li><a href="/docs/patterns/ecommerce-shopping-cart">Shopping Carts</a></li>
+       <li><a href="/docs/patterns/ecommerce-category-filter">Category Filters</a></li>
+      <li><a href="/docs/patterns/ecommerce-product-detail">Product Detail</a></li>
+      <li><a href="/docs/patterns/ecommerce-order-summmary">Order Summaries</a></li>
+      <li><a href="/docs/patterns/ecommerce-order-history">Order History</a></li>
+    </ul>
+  </li>
+  <li><a href="/docs/patterns/blog">Blog</a></li>
+  <li><a href="/docs/patterns/news">News</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>
+
+{# Style Utilities #}
+<h2>Style Utilities</h2>
+<ul>
+  <li><a href="/docs/style-utilities/align-items">Align Items</a></li>
+  <li><a href="/docs/style-utilities/border-radius">Border Radius</a></li>
+  <li><a href="/docs/style-utilities/gap">Gap</a></li>
+  <li><a href="/docs/style-utilities/text">Text</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/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/_includes/svgs/palette.njk

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

docs/_includes/theme-showcase.njk

@@ -1,144 +0,0 @@
-<div class="showcase-examples-wrapper" aria-hidden="true" data-no-outline>
-  <div class="showcase-examples">
-    <wa-card with-header with-footer>
-      <div slot="header" class="wa-split">
-        <h3 class="wa-heading-m">Your Cart</h3>
-        <wa-icon-button name="xmark" tabindex="-1"></wa-icon-button>
-      </div>
-      <div class="wa-stack wa-gap-xl">
-        <div class="wa-flank">
-          <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-green-60); --text-color: var(--wa-color-green-95);">
-            <wa-icon slot="icon" name="sword-laser" family="duotone" style="font-size: 1.5em;"></wa-icon>
-          </wa-avatar>
-          <div class="wa-stack wa-gap-2xs">
-            <div class="wa-split wa-gap-2xs">
-              <strong>Initiate Saber</strong>
-              <strong>$179.99</strong>
-            </div>
-            <div class="wa-split wa-gap-2xs wa-caption-m">
-              <span>Green</span>
-              <a href="#" tabindex="-1">Remove</a>
-            </div>
-          </div>
-        </div>
-        <wa-divider></wa-divider>
-        <div class="wa-flank">
-          <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-teal-60); --text-color: var(--wa-color-teal-95);">
-            <wa-icon slot="icon" name="robot-astromech" family="duotone" style="font-size: 1.5em;"></wa-icon>
-          </wa-avatar>
-          <div class="wa-stack wa-gap-2xs">
-            <div class="wa-split wa-gap-2xs">
-              <strong>Repair Droid</strong>
-              <strong>$3,049.99</strong>
-            </div>
-            <div class="wa-split wa-gap-2xs wa-caption-m">
-              <span>R-series</span>
-              <a href="#" tabindex="-1">Remove</a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div slot="footer" class="wa-stack">
-        <div class="wa-split">
-          <strong>Subtotal</strong>
-          <strong>$3,229.98</strong>
-        </div>
-        <span class="wa-caption-m">Shipping and taxes calculated at checkout.</span>
-        <wa-button tabindex="-1" variant="brand">
-          <wa-icon slot="prefix" name="shopping-bag"></wa-icon>
-          Checkout
-        </wa-button>
-      </div>
-    </wa-card>
-    <wa-card>
-      <wa-avatar shape="rounded" style="--size: 1.9lh; float: left; margin-right: var(--wa-space-m);">
-        <wa-icon slot="icon" name="hat-wizard" family="duotone" style="font-size: 1.75em;"></wa-icon>
-      </wa-avatar>
-      <p class="wa-body-l" style="margin: 0;">&ldquo;All we have to decide is what to do with the time that is given to us. There are other forces at work in this world, Frodo, besides the will of evil.&rdquo;</p>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <h3 class="wa-heading-m">Sign In</h3>
-        <wa-input tabindex="-1" label="Email" placeholder="ddjarin@mandalore.gov">
-          <wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
-        </wa-input>
-        <wa-input tabindex="-1" label="Password" type="password">
-          <wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
-        </wa-input>
-        <wa-button tabindex="-1" variant="brand">Sign In</wa-button>
-        <a href="#" tabindex="-1" class="wa-body-s">I forgot my password</a>
-      </div>
-    </wa-card>
-    <wa-card with-footer>
-      <div class="wa-stack">
-        <div class="wa-split">
-          <h3 class="wa-heading-m">To-Do</h3>
-          <wa-icon-button tabindex="-1" name="plus" label="Add task"></wa-icon-button>
-        </div>
-        <wa-checkbox tabindex="-1" checked>Umbrella for Adelard</wa-checkbox>
-        <wa-checkbox tabindex="-1" checked>Waste-paper basket for Dora</wa-checkbox>
-        <wa-checkbox tabindex="-1" checked>Pen and ink for Milo</wa-checkbox>
-        <wa-checkbox tabindex="-1">Mirror for Angelica</wa-checkbox>
-        <wa-checkbox tabindex="-1">Silver spoons for Lobelia</wa-checkbox>
-      </div>
-      <div slot="footer">
-        <a href="" tabindex="-1">View all completed</a>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <div class="wa-frame wa-border-radius-m" style="align-self: center; max-inline-size: 25ch;">
-          <img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="Album art">
-        </div>
-        <div class="wa-flank:end wa-align-items-start">
-          <div class="wa-stack wa-gap-3xs">
-            <div class="wa-cluster wa-gap-xs" style="height: 2.25em;">
-              <strong>The Stone Troll</strong>
-              <small><wa-badge variant="neutral" appearance="filled">E</wa-badge></small>
-            </div>
-            <span class="wa-caption-m">Samwise G</span>
-          </div>
-          <wa-icon-button tabindex="-1" name="ellipsis" label="Options"></wa-icon-button>
-        </div>
-        <div class="wa-stack wa-gap-2xs">
-          <wa-progress-bar value="34" style="height: 0.5em"></wa-progress-bar>
-          <div class="wa-split">
-            <span class="wa-caption-xs">1:01</span>
-            <span class="wa-caption-xs">-1:58</span>
-          </div>
-        </div>
-        <div class="wa-grid wa-align-items-center" style="--min-column-size: 1em; justify-items: center;">
-          <wa-icon-button tabindex="-1" name="backward" label="Skip backward"></wa-icon-button>
-          <wa-icon-button tabindex="-1" name="pause" style="font-size: var(--wa-font-size-2xl);" label="Pause"></wa-icon-button>
-          <wa-icon-button tabindex="-1" name="forward" label="Skip forward"></wa-icon-button>
-        </div>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <h3 class="wa-heading-m">Chalmun's Spaceport Cantina</h3>
-        <div class="wa-cluster wa-gap-xs">
-          <wa-rating value="4.6" read-only></wa-rating>
-          <strong>4.6</strong>
-          <span>(419 reviews)</span>
-        </div>
-        <div class="wa-cluster wa-gap-xs">
-          <div class="wa-cluster wa-gap-3xs">
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-          </div>
-          <span class="wa-caption-m">&bull;</span>
-          <wa-tag size="small">Cocktail Bar</wa-tag>
-          <wa-tag size="small">Gastropub</wa-tag>
-          <wa-tag size="small">Local Fare</wa-tag>
-          <wa-tag size="small">Gluten Free</wa-tag>
-        </div>
-        <div class="wa-flank wa-gap-xs">
-          <wa-icon name="location-dot"></wa-icon>
-          <a href="#" class="wa-caption-m" tabindex="-1">Mos Eisley, Tatooine</a>
-        </div>
-      </div>
-    </wa-card>
-  </div>
-</div>

docs/_layouts/blank.njk

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
-  <head>
-    {% include 'head.njk' %}
-  </head>
-  <body class="layout-{{ layout | stripExtension }}">
-
-        {% block header %}{% endblock %}
-
-        {% block content %}
-          {{ content | safe }}
-        {% endblock %}
-
-        {% block afterContent %}{% endblock %}
-
-  </body>
-</html>

docs/_layouts/block.njk

@@ -1,38 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-
-{% extends '../_includes/base.njk' %}
-
-{# Component header #}
-{% block header %}
-  {% include 'breadcrumbs.njk' %}
-  <h1 class="title">{{ title }}</h1>
-  <div class="block-info">
-    {% set snippets = (elements or element or snippets or snippet) | dict  %}
-
-    {% for snippet, link in snippets %}
-      {% if snippet %}
-        <code class="class">
-          {%- if link -%}
-            <a href="{{ link }}">{{ snippet }}</a>
-          {%- else -%}
-            {{ snippet }}
-          {%- endif-%}
-        </code>
-      {%- endif %}
-    {% endfor %}
-
-    {% include '../_includes/status.njk' %}
-  </div>
-  {% if description %}
-  <p class="summary">
-    {{ description | inlineMarkdown | safe }}
-  </p>
-  {% endif %}
-  {% block notes %}{% endblock %}
-{% endblock %}
-
-{# Content #}
-{% block content %}
-  {{ content | safe }}
-{% endblock %}

docs/_layouts/component.njk

@@ -1,15 +1,31 @@
-{% extends '../_layouts/block.njk' %}
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
 {% set component = components[page.fileSlug] %}
+{% set description = component.summary %}
+
+{% extends '../_includes/base.njk' %}
 
 {# Component header #}
-{% block notes %}
+{% block beforeContent %}
-  {% if native %}
+  <h1 class="title">{{ title }}</h1>
-  <wa-callout variant="success">
+  <div class="component-info">
-    <wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
+    <code class="component-tag">&lt;{{ component.tagName }}&gt;</code>
-    Just want the styles?
+    <wa-badge variant="neutral">Since {{ component.since }}</wa-badge>
-    Check out the <a href="/docs/native/{{ native }}/">{{ ('/docs/native/' + native + '/') | getTitleFromUrl }} native styles</a>!
+    <wa-badge
-  </wa-callout>
+      {% if component.status == 'stable' %}variant="brand"{% endif %}
-  {% 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>
+    <h2>Properties</h2>
-    <p>Learn more about <a href="/docs/usage/#attributes-and-properties">attributes and properties</a>.</p>
 
     <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 slot="nav" panel="cdn">CDN</wa-tab>
-    <wa-tab panel="npm">npm</wa-tab>
+    <wa-tab slot="nav" panel="npm">npm</wa-tab>
-    <wa-tab panel="react">React</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

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

docs/_layouts/page.njk

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

docs/_layouts/palette.njk

@@ -1,119 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-{# {% set forceTheme = page.fileSlug %} #}
-
-{% extends '../_layouts/block.njk' %}
-
-{% set paletteId = page.fileSlug %}
-
-{% block afterContent %}
-<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
-
-{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
-
-<table class="colors wa-palette-{{ paletteId }}">
-  <thead>
-    <tr>
-      <th></th>
-      {% for tint in tints -%}
-      <th>{{ tint }}</th>
-      {%- endfor %}
-    </tr>
-  </thead>
-{% for hue in hues -%}
-<tr>
-  <th>{{ hue | capitalize }}</th>
-  {% for tint in tints -%}
-    <td>
-      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
-        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
-      </div>
-    </td>
-  {%- endfor -%}
-</tr>
-{%- endfor %}
-</table>
-
-<h2>Used By</h2>
-
-<section class="index-grid">
-{% for page in collections.theme %}
-  {%- if page.data.palette == paletteId -%}
-    {% include "page-card.njk" %}
-  {%- endif -%}
-{% endfor %}
-</section>
-
-{% markdown %}
-## Color Contrast
-
-Web Awesome color scales are designed to guarantee certain contrast ratios,
-both per [WCAG 2.1 success criteria](https://www.w3.org/TR/WCAG21/#contrast-minimum)
-as well as the emergent APCA specification _(planned)_,
-so you can ensure that text is both legible to all users, and legally conformant.
-
-### Level 1
-
-A difference of `40` ensures a minimum **3:1** contrast ratio, suitable for large text and icons (AA).
-{% endmarkdown %}
-
-{% set difference = 40 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-This also goes for a difference of `45`:
-
-{% endmarkdown %}
-
-{% set difference = 45 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-### Level 2
-
-A difference of `50` ensures a minimum **4.5:1** contrast ratio, suitable for normal text (AA) and large text (AAA)
-{% endmarkdown %}
-
-{% set difference = 50 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-This also goes for a difference of `55`:
-
-{% endmarkdown %}
-
-{% set difference = 55 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-### Level 3
-
-A difference of `60` ensures a minimum **7:1** contrast ratio, suitable for all text (AAA)
-{% endmarkdown %}
-
-{% set difference = 60 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-This also goes for a difference of `65`:
-
-{% endmarkdown %}
-
-{% set difference = 65 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-## How to use this palette
-
-If you are using a Web Awesome theme that uses this palette, it will already be included.
-To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.
-
-{% set stylesheet = 'styles/color/' + page.fileSlug + '.css' %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-{% endmarkdown %}
-{% endblock %}

docs/_layouts/theme.njk

@@ -1,150 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-{# {% set forceTheme = page.fileSlug %} #}
-
-{% extends '../_includes/base.njk' %}
-
-{% block header %}
-<iframe src='{{ page.url }}demo.html' id="demo"></iframe>
-
-<p id="mix_and_match" class="wa-gap-m">
-  <strong>
-    <wa-icon name="merge" slot="prefix"></wa-icon>
-    Remix
-    <wa-icon-button href="#remixing" name="circle-question" slot="suffix" variant="regular" label="How to use?"></wa-icon-button>
-  </strong>
-  <wa-select name="colors" label="Colors from…" size="small">
-    <wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
-    <wa-option value="">(Theme default)</wa-option>
-    <wa-divider></wa-divider>
-    {% for theme in collections.theme | sort %}
-      {% if theme.fileSlug !== page.fileSlug %}
-      <wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
-      {% endif %}
-    {% endfor %}
-  </wa-select>
-
-  <wa-select name="palette" label="Palette" size="small">
-    <wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
-    <wa-option value="">(Theme default)</wa-option>
-    <wa-divider></wa-divider>
-    {% for p in collections.palette | sort %}
-      {% if p.fileSlug !== palette %}
-      <wa-option value="{{ p.fileSlug }}">{{ p.data.title }}</wa-option>
-      {% endif %}
-    {% endfor %}
-  </wa-select>
-
-  <wa-select name="typography" label="Typography from…" size="small">
-    <wa-icon name="font-case" slot="prefix"></wa-icon>
-    <wa-option value="">(Theme default)</wa-option>
-    <wa-divider></wa-divider>
-    {% for theme in collections.theme | sort %}
-      {% if theme.fileSlug !== page.fileSlug %}
-      <wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
-      {% endif %}
-    {% endfor %}
-  </wa-select>
-
-
-</p>
-<script>
-  document.querySelector('#mix_and_match').addEventListener('wa-change', function(event) {
-    let selects = document.querySelectorAll('#mix_and_match wa-select');
-    let url = new URL(demo.src);
-
-    for (let select of selects) {
-      url.searchParams.set(select.name, select.value);
-    }
-
-    demo.src = url;
-  });
-</script>
-
-<h2>Default Color Palette</h2>
-{% set paletteURL = '/docs/palettes/' + palette + '/' %}
-{% set themePage = page %}
-{% set page = paletteURL | getCollectionItemFromUrl %}
-<div class="index-grid">
-{% include 'page-card.njk' %}
-</div>
-{% set page = themePage %}
-
-{% endblock %}
-
-{% block afterContent %}
-{% markdown %}
-## How to use this theme
-
-You can import this theme from the Web Awesome CDN.
-
-{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-### Remixing { #remixing }
-
-If you want to combine the **colors** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
-
-{% set stylesheet = 'styles/themes/' + page.fileSlug + '/color.css' %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-To use the **typography** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
-
-{% set stylesheet = 'styles/themes/' + page.fileSlug + '/typography.css' %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-<wa-callout variant="warning">
-  <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
-  Please note that not all combinations will look good — once you’re mixing and matching, you’re on your own!
-</wa-callout>
-
-## Dark mode
-
-To activate the dark color scheme of the theme on any element and its contents, apply the class `wa-dark` to it.
-This means you can use different color schemes throughout the page.
-Here, we use the default theme with a dark sidebar:
-
-```html
-<html>
-  <head>
-    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
-  </head>
-
-  <body>
-    <nav class="wa-dark">
-      <!-- dark-themed sidebar -->
-    </nav>
-
-    <!-- light-themed content -->
-  </body>
-</html>
-```
-
-You can apply the class to the `<html>` element on your page to activate the dark color scheme for the entire page.
-
-```html
-<html class="wa-dark">
-  <head>
-    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/{{ page.fileSlug }}.css" />
-    <!-- other links, scripts, and metadata -->
-  </head>
-  <body>
-    <!-- page content -->
-  </body>
-</html>
-```
-### Detecting Color Scheme Preference
-
-Web Awesome's themes have both light and dark styles built in.
-However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference.
-This should be done at the application level.
-As a best practice, to provide a dark theme in your app, you should:
-
-- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
-- Allow the user to override the setting in your app
-- Remember the user's preference and restore it on subsequent logins
-
-Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
-
-{% endmarkdown %}
-{% endblock %}

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) {
+        const slug = createId(clone.textContent ?? '') ?? uuid().slice(-12);
-          return;
+        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 (hasAnchor || !id) {
-        if (!id) {
+          return;
-          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}`;
-          }
         }
 
         // 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 = {}) {
+export function codeExamplesPlugin(options = {}) {
-  const defaultOptions = {
+  options = {
     container: 'body',
-    defaultOpen: (code, { outputPathIndex }) => {
+    ...options
-      return (
-        outputPathIndex === 1 && // is first
-        code.textContent.length < 500
-      ); // is short
-    },
-  };
-  options = { ...defaultOptions, ...options };
-
-  const stats = {
-    inputPaths: {},
-    outputPaths: {},
   };
 
-  eleventyConfig.addTransform('code-examples', function (content) {
+  return function (eleventyConfig) {
-    const { inputPath, outputPath } = this.page;
+    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 } });
+      if (!container) {
-    const container = doc.querySelector(options.container);
+        return content;
-
-    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;
-        }
       }
 
-      for (const attribute of ['viewport', 'include']) {
+      // Look for external links
-        if (code.hasAttribute(attribute)) {
+      container.querySelectorAll('code.example').forEach(code => {
-          localOptions.attributes[attribute] = code.getAttribute(attribute);
+        const pre = code.closest('pre');
-          code.removeAttribute(attribute);
+        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) {
+        // Run preview scripts as modules to prevent collisions
-        // attributes only work on the new syntax
+        const root = parse(preview, { blockTextElements: { script: true } });
-        localOptions.new = true;
+        root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module'));
-      }
+        preview = root.toString();
 
-      if (localOptions.open === undefined) {
+        const codeExample = parse(`
-        if (localOptions.defaultOpen === true) {
+          <div class="code-example ${isOpen ? 'open' : ''}">
-          localOptions.open = localOptions.defaultOpen;
+            <div class="code-example-preview">
-        } else if (typeof localOptions.defaultOpen === 'function') {
+              ${preview}
-          localOptions.open = localOptions.defaultOpen(code, {
+            </div>
-            pre,
+            <div class="code-example-source" id="${id}">
-            inputPathIndex: stats.inputPaths[inputPath],
+              ${pre.outerHTML}
-            outputPathIndex: stats.outputPaths[outputPath],
+            </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,284 +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 number(value, options) {
-  if (typeof value !== 'number' && isNaN(value)) {
-    return value;
-  }
-
-  let lang = options?.lang ?? 'en';
-  if (options?.lang) {
-    delete options.lang;
-  }
-
-  if (!options || Object.keys(options).length === 0) {
-    options = { maximumSignificantDigits: 3 };
-  }
-
-  return Number(value).toLocaleString(lang, options);
-}
-
-export function isNumeric(value) {
-  return typeof value === 'number' || (typeof value === 'string' && !isNaN(value));
-}
-
-export function isString(value) {
-  return typeof value === 'string';
-}
-
-export function isEmpty(value) {
-  return value === null || value === undefined || value === '';
-}
-
-function compare(a, b) {
-  let isEmptyA = isEmpty(a);
-  let isEmptyB = isEmpty(b);
-
-  if (isEmptyA) {
-    if (isEmptyB) {
-      return 0;
-    } else {
-      return 1;
-    }
-  } else if (isEmptyB) {
-    return -1;
-  }
-
-  // Both strings, and at least one non-numeric
-  if (isNumeric(a) || isNumeric(b)) {
-    return a - b;
-  }
-
-  return (a + '').localeCompare(b);
-}
-
-/** Sort an array of objects by one or more of their properties */
-export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
-  let keys = Array.isArray(by) ? by : Object.keys(by);
-
-  return arr.sort((a, b) => {
-    let aValues = keys.map(key => deepValue(a, key) ?? by[key]);
-    let bValues = keys.map(key => deepValue(b, key) ?? by[key]);
-
-    for (let i = 0; i < aValues.length; i++) {
-      let aVal = aValues[i];
-      let bVal = bValues[i];
-      let result = compare(aVal, bVal);
-
-      // They are not equal in terms of comparison OR we're at the last key
-      if (result !== 0 || i === aValues.length - 1) {
-        return result;
-      }
-    }
-  });
-}
-
-/**
- * Group an 11ty collection (or any array of objects with a `data.tags` property) by certain tags.
- * @param {object[]} collection
- * @param { Object<string, string> | (string | 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 (!collection) {
-    console.error(`Empty collection passed to groupByTags() to group by ${JSON.stringify(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/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/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">
+<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" fill="var(--wa-brand-orange, #f36944)"/>
+<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>
+</svg>

docs/assets/scripts/code-examples.js

@@ -18,11 +18,10 @@ 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}themes/default.css">\n\n` +
-      `<link rel="stylesheet" href="${cdnUrl}styles/webawesome.css">\n` +
+      `<link rel="stylesheet" href="${cdnUrl}themes/applied.css">\n\n` +
-      `<link rel="stylesheet" href="${cdnUrl}styles/utilities.css">\n\n` +
       `${code.textContent}`;
-    const css = 'html > body {\n  padding: 2rem !important;\n}';
+    const css = 'body {\n  font: 16px sans-serif;\n  padding: 2rem;\n}';
     const js = '';
 
     const form = document.createElement('form');
@@ -43,7 +42,7 @@ document.addEventListener('click', event => {
       js_pre_processor: 'none',
       html,
       css,
-      js,
+      js
     };
 
     const input = document.createElement('input');

docs/assets/scripts/color-scheme.js

@@ -0,0 +1,59 @@
+//
+// Color scheme selector
+//
+(() => {
+  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());
+  }
+
+  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;
+    });
+  }
+
+  let colorScheme = window.getColorScheme();
+
+  // Selection is not preserved when changing page, so update when opening dropdown
+  document.addEventListener('wa-show', event => {
+    const colorSchemeSelector = event.target.closest('#color-scheme-selector');
+    if (!colorSchemeSelector) return;
+    updateSelection();
+  });
+
+  // Listen for selections
+  document.addEventListener('wa-select', event => {
+    const menu = event.target.closest('#color-scheme-selector wa-menu');
+    if (!menu) return;
+    setColorScheme(event.detail.item.value);
+  });
+
+  // Update the color scheme when the preference changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => setColorScheme(colorScheme));
+
+  // Toggle with backslash
+  document.addEventListener('keydown', event => {
+    if (
+      event.key === '\\' &&
+      !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
+    ) {
+      event.preventDefault();
+      setColorScheme(window.isDark() ? 'light' : 'dark');
+    }
+  });
+
+  // Set the initial color scheme and sync the UI
+  setColorScheme(colorScheme);
+})();

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-picker.js

@@ -1,52 +0,0 @@
-import { domChange, nextFrame, ThemeAspect } from './theme-picker.js';
-
-const presetTheme = new ThemeAspect({
-  defaultValue: 'default',
-  key: 'presetTheme',
-  picker: 'wa-select.preset-theme-selector',
-
-  applyChange(options = {}) {
-    const oldStylesheets = [...document.querySelectorAll('#theme-stylesheet')];
-    const oldStylesheet = oldStylesheets.pop();
-
-    if (oldStylesheets.length > 0) {
-      // Remove all but the last one
-      for (let stylesheet of oldStylesheets) {
-        stylesheet.remove();
-      }
-    }
-
-    const href = `/dist/styles/themes/${this.value}.css`;
-
-    if (!oldStylesheet || oldStylesheet.getAttribute('href') !== href) {
-      const newStylesheet = document.createElement('link');
-      Object.assign(newStylesheet, { href, id: 'theme-stylesheet', rel: 'preload', as: 'style' });
-      oldStylesheet.after(newStylesheet);
-
-      newStylesheet.addEventListener(
-        'load',
-        e => {
-          domChange(
-            async instant => {
-              // Swap stylesheets
-              newStylesheet.rel = 'stylesheet';
-
-              if (instant) {
-                // If no VT, delay by 1 frame to make it smoother
-                await nextFrame();
-              }
-
-              oldStylesheet.remove();
-            },
-            { behavior: 'smooth', ...options },
-          );
-        },
-        { once: true },
-      );
-    }
-  },
-});
-
-window.addEventListener('turbo:render', e => {
-  presetTheme.applyChange({ behavior: 'instant' });
-});

docs/assets/scripts/preset-theme.js

@@ -0,0 +1,86 @@
+//
+// Preset theme selector
+//
+(() => {
+  function setPresetTheme(newPresetTheme) {
+    presetTheme = newPresetTheme;
+    localStorage.setItem('presetTheme', presetTheme);
+
+    const stylesheet = document.getElementById('theme-stylesheet');
+
+    const newStylesheet = Object.assign(document.createElement('link'), {
+      href: `/dist/themes/${presetTheme}.css`,
+      rel: 'preload',
+      as: 'style'
+    });
+
+    newStylesheet.addEventListener(
+      'load',
+      () => {
+        newStylesheet.rel = 'stylesheet';
+        newStylesheet.id = stylesheet.id;
+        requestAnimationFrame(() => {
+          stylesheet.remove();
+        });
+      },
+      { once: true }
+    );
+
+    document.head.append(newStylesheet);
+
+    // Update the UI
+    updateSelection();
+
+    // Toggle the dark mode class
+    document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
+  }
+
+  function updateSelection(container = document) {
+    const menu = container.querySelector('#preset-theme-selector wa-menu');
+    if (!menu) return;
+    [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
+      const isChecked = item.getAttribute('value') === presetTheme;
+      if (isChecked) {
+        container.querySelector('#preset-theme-selector__text').textContent = item.innerText;
+      }
+      await customElements.whenDefined(item.localName);
+      await item.updateComplete;
+      item.checked = isChecked;
+    });
+  }
+
+  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);
+  if (id) {
-
-  // Only handle smooth scroll if there's a hash and the link points to the current page
-  if (id && link.pathname === window.location.pathname) {
     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,8 +9,7 @@ const icons = {
   component: 'puzzle-piece',
   document: 'file',
   home: 'house',
-  native: 'code',
+  theme: 'palette'
-  theme: 'palette',
 };
 let searchTimeout;
 
@@ -19,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')
   };
 }
 
@@ -167,7 +166,6 @@ async function updateResults(query = '') {
       li.setAttribute('data-selected', index === 0 ? 'true' : 'false');
 
       if (page.url === '/') icon = icons.home;
-      if (page.url.startsWith('/docs/native')) icon = icons.native;
       if (page.url.startsWith('/docs/components')) icon = icons.component;
       if (page.url.startsWith('/docs/theme') || page.url.startsWith('/docs/restyle')) icon = icons.theme;
 

docs/assets/scripts/sync-iframe-height.js

@@ -1,37 +0,0 @@
-/**
- * Sync iframe height with its content page (for same-origin iframes)
- * NOT CURRENTLY USED ANYWHERE
- */
-for (let iframe of document.querySelectorAll('iframe')) {
-  if (iframe.contentDocument) {
-    // Already loaded
-    syncIframeHeight(iframe);
-  }
-
-  iframe.onload = () => {
-    console.log('iframe loaded');
-    if (iframe.contentDocument) {
-      // Same origin
-      iframe.contentWindow.iframe = iframe;
-      syncIframeHeight(iframe);
-      const resizeObserver = new ResizeObserver(entries => {
-        for (let entry of entries) {
-          if (entry.target === iframe.contentDocument.body) {
-            syncIframeHeight(iframe);
-          }
-        }
-      });
-
-      resizeObserver.observe(iframe.contentDocument.body);
-      window.addEventListener('turbo:render', syncIframeHeight(iframe));
-    }
-  };
-}
-
-function syncIframeHeight(iframe) {
-  iframe.style.height = '0px';
-
-  requestAnimationFrame(() => {
-    iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
-  });
-}

docs/assets/scripts/theme-picker.js

@@ -1,119 +0,0 @@
-// Helper for view transitions
-export function domChange(fn, { behavior = 'smooth' } = {}) {
-  const canUseViewTransitions =
-    document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
-  if (canUseViewTransitions && behavior === 'smooth') {
-    document.startViewTransition(fn);
-  } else {
-    fn(true);
-  }
-}
-
-export function nextFrame() {
-  return new Promise(resolve => requestAnimationFrame(resolve));
-}
-
-export class ThemeAspect {
-  constructor(options) {
-    Object.assign(this, options);
-    this.set();
-
-    // Update when local storage changes.
-    // That way changes in one window will propagate to others (including iframes).
-    window.addEventListener('storage', event => {
-      if (event.key === this.key) {
-        this.set();
-      }
-    });
-
-    // Listen for selections
-    document.addEventListener('wa-change', event => {
-      const picker = event.target.closest(this.picker);
-      if (picker) {
-        this.set(picker.value);
-      }
-    });
-
-    ['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
-      document.addEventListener(eventName, e => {
-        const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
-        if (newElement) {
-          this.syncUI(newElement);
-        }
-      });
-    });
-  }
-
-  get() {
-    return localStorage.getItem(this.key) ?? this.defaultValue;
-  }
-
-  computed = {};
-
-  get computedValue() {
-    if (this.value in this.computed) {
-      return this.computed[this.value];
-    }
-
-    return this.value;
-  }
-
-  set(value = this.get()) {
-    if (value === this.value) {
-      return;
-    }
-
-    this.value = value;
-
-    if (this.value === this.defaultValue) {
-      localStorage.removeItem(this.key);
-    } else {
-      localStorage.setItem(this.key, this.value);
-    }
-
-    this.applyChange();
-    this.syncUI();
-  }
-
-  syncUI(container = document) {
-    for (let picker of container.querySelectorAll(this.picker)) {
-      picker.setAttribute('value', this.value);
-      picker.value = this.value;
-    }
-  }
-}
-
-const colorScheme = new ThemeAspect({
-  defaultValue: 'auto',
-  key: 'colorScheme',
-  picker: 'wa-select.color-scheme-selector',
-
-  computed: {
-    get auto() {
-      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    },
-  },
-
-  applyChange() {
-    // Toggle the dark mode class
-    domChange(() => {
-      let dark = this.computedValue === 'dark';
-      document.documentElement.classList.toggle(`wa-dark`, dark);
-    });
-  },
-});
-
-// Update the color scheme when the preference changes
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => colorScheme.set());
-
-// Toggle color scheme with backslash
-document.addEventListener('keydown', event => {
-  if (
-    event.key === '\\' &&
-    !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
-  ) {
-    event.preventDefault();
-    colorScheme.set(theming.colorScheme.resolvedValue === 'dark' ? 'light' : 'dark');
-  }
-});

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-right-radius: var(--wa-border-radius-m);
-    border-bottom-left-radius: var(--wa-border-radius-l);
+    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/code-highlighter.css

@@ -1,12 +1,6 @@
 pre {
   background-color: var(--wa-color-gray-20);
   color: white;
-
-  /* Ensures a discernible background color in dark mode
-   * Useful for themes that use gray-20 as --wa-color-surface-default  */
-  .wa-dark & {
-    background-color: var(--wa-color-surface-lowered);
-  }
 }
 .code-comment,
 .code-prolog,

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

@@ -10,8 +10,8 @@
   --wa-brand-grey: #30323b;
 }
 
-.wa-dark .only-light,
+html.wa-theme-default-dark .only-light,
-.only-dark:not(.wa-dark, .wa-dark *) {
+html:not(.wa-theme-default-dark) .only-dark {
   display: none;
 }
 
@@ -22,18 +22,15 @@ 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);
+  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-}
-
-wa-page::part(body) {
-  padding-top: 0px;
-}
-
-wa-page::part(header-actions) {
-  align-self: center;
 }
 
 wa-page > header {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 4rem;
   padding-inline: var(--wa-space-xl);
 
   a[href='/'] {
@@ -42,8 +39,7 @@ wa-page > header {
   }
 
   wa-button[data-toggle-nav] {
-    --text-color: currentColor;
+    --label-color: currentColor;
-    font-size: 1rem;
     margin-inline-start: -0.875rem;
     margin-inline-end: 0;
 
@@ -72,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);
@@ -89,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-of-type) {
-  h2:not(:first-child),
+    margin-block-start: var(--wa-space-xl);
-  wa-details:not(:first-child) {
-    margin-block-start: var(--wa-space-xs);
   }
-
-  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);
@@ -110,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;
-
+    margin-block-end: var(--wa-space-m);
-    + li {
-      margin-block-start: var(--wa-space-m);
-    }
   }
-
   li a {
     color: var(--wa-color-text-normal);
     text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
   }
-
+  li a:hover {
-  li wa-badge::part(base) {
+    text-decoration: underline;
-    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);
-        }
-      }
-    }
   }
 }
 
@@ -211,20 +136,6 @@ wa-page::part(menu) {
   scrollbar-width: thin;
 }
 
-wa-page[view='mobile'] :is([slot='navigation-header'], [slot='navigation']) {
-  padding: 0;
-
-  & wa-details::part(icon) {
-    padding-inline: var(--wa-space-xs); /* aligns details icons with drawer close icon */
-  }
-}
-
-[slot='navigation-header'] wa-menu {
-  font-family: var(--wa-font-family-body);
-  font-size: var(--wa-font-size-m);
-  font-weight: var(--wa-font-weight-normal);
-}
-
 /* Main content */
 wa-page > main {
   max-width: 80ch;
@@ -232,15 +143,7 @@ wa-page > main {
   margin-inline: auto;
 }
 
-h1.title wa-badge {
+.component-info {
-  vertical-align: middle;
-
-  &::part(base) {
-    font-size: 1.5rem;
-  }
-}
-
-.block-info {
   margin-block-end: var(--wa-flow-spacing);
 }
 
@@ -271,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);
 
@@ -331,48 +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);
-  margin-block-end: var(--wa-space-3xl);
-
-  a {
-    border-radius: var(--wa-border-radius-l);
-    text-decoration: none;
-  }
-
-  wa-card {
-    box-shadow: none;
-    --spacing: var(--wa-space-m);
-    inline-size: 100%;
-
-    &:hover {
-      --border-color: var(--wa-color-brand-border-loud);
-      border-color: var(--border-color);
-      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 {
@@ -381,93 +244,123 @@ wa-page > main:has(> .index-grid) {
   margin-block-start: var(--wa-space-2xl);
 }
 
-/* Swatches */
+.index-grid a {
-.swatch {
+  border-radius: var(--wa-border-radius-m);
-  position: relative;
+}
+
+.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);
+}
+
+/* Index Pages */
+wa-page > main:has(> .index-grid) {
+  max-width: 120ch;
+  margin-inline: auto;
+}
+
+.index-summary {
+  max-inline-size: 80ch;
+}
+
+.index-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
+  gap: var(--wa-space-2xl);
+}
+
+.index-category {
+  grid-column: 1 / -1;
+  margin-block-end: 0;
+  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;
-  min-height: 2.5em;
+  line-height: 2.5;
-  padding: var(--wa-space-xs);
+  height: 2.5em;
-  font-weight: var(--wa-font-weight-semibold);
+  padding-inline: var(--wa-space-xs);
-  line-height: var(--wa-line-height-condensed);
-
-  &.color {
-    border-color: transparent;
-  }
-
-  wa-copy-button {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-    --background-color-hover: transparent;
-    font-family: var(--wa-font-family-code);
-
-    &::part(button) {
-      display: block;
-      height: 100%;
-      width: 100%;
-    }
-
-    &::part(button):hover {
-      cursor: copy;
-    }
-
-    &::part(copy-icon),
-    &::part(success-icon),
-    &::part(error-icon) {
-      opacity: 0 !important;
-    }
-  }
-}
-
-table.colors {
-  thead {
-    th {
-      text-align: center;
-      padding-block: 0;
-    }
-  }
-  tbody {
-    tr {
-      border: none;
-      &:hover {
-        background: transparent;
-      }
-    }
-
-    th {
-      width: 0;
-      vertical-align: middle;
-      text-align: right;
-    }
-
-    td {
-      padding-inline: var(--wa-space-3xs);
-      padding-block: var(--wa-space-s);
-    }
-  }
 }
 
 /* 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);
+  border-radius: var(--wa-border-radius-m);
   padding: var(--wa-space-s);
 }
 
 .layout-example-block {
   background-color: var(--wa-color-indigo-60);
-  border-radius: var(--wa-border-radius-m);
+  border-radius: var(--wa-border-radius-s);
   min-block-size: 4rem;
   min-inline-size: 4rem;
 }
@@ -491,7 +384,6 @@ table.colors {
 
 .table-scroll {
   overflow-x: auto;
-  margin-block-end: var(--wa-flow-spacing);
 }
 
 /** mobile */
@@ -503,9 +395,14 @@ table.colors {
 
 /** 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 {
@@ -520,39 +417,3 @@ table.colors {
     padding: var(--wa-space-3xl);
   }
 }
-
-.layout-theme {
-  wa-page > main {
-    max-width: 140ch;
-
-    .max-line-length {
-      max-width: 80ch;
-    }
-  }
-
-  iframe {
-    width: 100%;
-    min-height: 16lh;
-    height: 65vh;
-    max-height: 21lh;
-  }
-
-  #mix_and_match {
-    strong {
-      display: flex;
-      align-items: center;
-      gap: var(--wa-space-2xs);
-      margin-top: 1.2em;
-    }
-
-    wa-select::part(label) {
-      margin-block-end: 0;
-    }
-
-    wa-select[value='']::part(display-input),
-    wa-option[value=''] {
-      font-style: italic;
-      color: var(--wa-color-text-quiet);
-    }
-  }
-}

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';
-    }
-  }
-}

docs/assets/styles/hydration-errors.css

@@ -18,7 +18,7 @@
 .diff-grid > * {
   height: 100%;
 }
-.diff-dialog {
+.diff-dialog::part(dialog) {
   max-width: 90vw;
   width: 90vw;
 }

docs/assets/styles/outline.css

@@ -31,9 +31,6 @@
 }
 
 @media screen and (max-width: 1199px) {
-  wa-page [slot='aside'] {
-    display: none;
-  }
   #outline {
     padding-block: 0.25rem;
     margin-block-end: -1rem;
@@ -45,6 +42,5 @@
 
   #outline-expandable {
     display: block;
-    margin-block-end: var(--wa-space-xl);
   }
 }

docs/assets/styles/search.css

@@ -1,14 +1,13 @@
 #site-search {
-  width: 38rem;
+  --width: 38rem;
-  position: absolute;
-  top: 0;
-  border-radius: var(--wa-border-radius-l);
-  padding: 0;
-  margin: 0 auto;
-  overflow: hidden;
 
-  &::part(base) {
+  &::part(dialog) {
-    margin-block: 10rem;
+    position: absolute;
+    top: 0;
+    border-radius: var(--wa-border-radius-m);
+    padding: 0;
+    margin: 10rem auto;
+    overflow: hidden;
   }
 
   &::part(body) {
@@ -19,22 +18,21 @@
     justify-content: center;
     gap: 0.5rem;
   }
-
-  @media screen and (max-width: 900px) {
-    max-width: calc(100% - 2rem);
-
-    &::part(base) {
-      margin-block: 1rem;
-    }
-  }
 }
 
 #site-search-container {
   display: flex;
   flex-direction: column;
   max-height: calc(100vh - 20rem);
+}
 
-  @media screen and (max-width: 900px) {
+@media screen and (max-width: 900px) {
+  #site-search::part(dialog) {
+    max-width: calc(100% - 2rem);
+    margin-block: 1rem;
+  }
+
+  #site-search-container {
     max-height: calc(100dvh - 2rem);
   }
 }
@@ -231,8 +229,8 @@ header {
   gap: 2rem;
   color: var(--wa-color-text-quiet);
   border-top: var(--wa-panel-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-  border-bottom-left-radius: var(--wa-border-radius-l);
+  border-bottom-left-radius: var(--wa-border-radius-m);
-  border-bottom-right-radius: var(--wa-border-radius-l);
+  border-bottom-right-radius: var(--wa-border-radius-m);
   padding: 1rem;
 
   kbd {

docs/assets/styles/theme-headers.css

@@ -1,14 +1,5 @@
-/* Theme Builder Headers
+/* #region Custom Styles */
- * These styles control the appearance of the header of the theme builder,
+@container preview (min-width: 0) {
- * allowing each theme to have a unique hero section.
- */
-
-/* #region Default */
-html.wa-theme-default .preview-container {
-  container-name: default-theme;
-}
-
-@container default-theme (min-width: 0) {
   .hero-background {
     height: 47rem;
     background-color: var(--wa-color-brand-fill-loud);
@@ -31,8 +22,8 @@ html.wa-theme-default .preview-container {
   }
 
   .hero wa-button[variant='brand'] {
-    --background-color: var(--wa-color-neutral-fill-quiet);
+    --background: var(--wa-color-neutral-fill-quiet);
-    --text-color: var(--wa-color-neutral-on-normal);
+    --label-color: var(--wa-color-neutral-on-normal);
   }
 
   .project-header {
@@ -50,733 +41,10 @@ html.wa-theme-default .preview-container {
 }
 
 /* responsive */
-@container default-theme (min-width: 1040px) {
+@container preview (min-width: 1040px) {
   .hero-background::after {
     background-position: right bottom;
     background-size: 90%;
   }
 }
 /* #endregion */
-
-/* #region Tailspin */
-html.wa-theme-tailspin .preview-container {
-  container-name: tailspin-theme;
-}
-
-@container tailspin-theme (min-width: 0) {
-  .project-header {
-    background: var(--wa-color-surface-default);
-  }
-
-  .hero {
-    --hero-background-color: var(--wa-color-surface-default);
-    --hero-lines-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 30%);
-    background: linear-gradient(to top, var(--wa-color-surface-lowered), transparent 40%),
-      radial-gradient(circle at 10% 70%, color-mix(in oklab, var(--wa-color-red-50) 16%, transparent), transparent 30%),
-      radial-gradient(
-        circle at 40% 50%,
-        color-mix(in oklab, var(--wa-color-indigo-40) 16%, transparent),
-        transparent 40%
-      ),
-      radial-gradient(circle at 80% 25%, color-mix(in oklab, var(--wa-color-red-50) 8%, transparent), transparent 20%),
-      radial-gradient(
-        circle at 80% 80%,
-        color-mix(in oklab, var(--wa-color-indigo-40) 16%, transparent),
-        transparent 40%
-      ),
-      radial-gradient(circle at 90% 30%, color-mix(in oklab, var(--wa-color-red-60) 8%, transparent), transparent 10%),
-      linear-gradient(176deg, var(--hero-background-color), transparent 6rem),
-      linear-gradient(90deg, var(--hero-background-color), transparent),
-      repeating-linear-gradient(
-        var(--hero-lines-color),
-        var(--hero-lines-color) 1px,
-        transparent 1px,
-        transparent 10rem,
-        var(--hero-lines-color) 10rem
-      ),
-      repeating-linear-gradient(
-        90deg,
-        var(--hero-lines-color),
-        var(--hero-lines-color) 1px,
-        transparent 1px,
-        transparent 10rem,
-        var(--hero-lines-color) 10rem
-      ),
-      var(--hero-background-color);
-
-    & .title {
-      padding-block: calc(var(--wa-space-3xl) * 2) calc(var(--wa-space-3xl) * 10);
-
-      & .hero-title {
-        font-size: calc((var(--wa-font-size-4xl) * 1.125) * 1.125);
-        margin-block: 0 var(--wa-space-3xl);
-      }
-    }
-  }
-  .badge-stock {
-    position: absolute;
-    top: var(--wa-space-l);
-    left: var(--wa-space-l);
-  }
-
-  .message-composer wa-card {
-    &::part(footer) {
-      border: none;
-    }
-    & wa-icon-button {
-      color: var(--wa-color-base-50);
-    }
-  }
-
-  .products {
-    margin-top: calc(var(--wa-space-3xl) * -8);
-  }
-
-  pre.codeblock {
-    background-color: var(--wa-color-neutral-fill-normal);
-  }
-}
-/* #endregion */
-
-/* #region Brutalist */
-html.wa-theme-brutalist .preview-container {
-  container-name: brutalist-theme;
-}
-
-@container brutalist-theme (min-width: 0) {
-  .overlap {
-    background: var(--wa-color-surface-lowered) url('/assets/images/themer/brutalist/hero.png') 50% 3% no-repeat;
-  }
-
-  .strata.hero {
-    height: 42rem;
-    padding-top: 8rem;
-    padding-right: 50%;
-    --wa-font-weight-heading: var(--wa-font-weight-normal);
-  }
-
-  .hero wa-button {
-    --background: var(--wa-color-neutral-fill-loud);
-    margin-block-start: var(--wa-space-xl);
-    font-size: var(--wa-font-size-l);
-  }
-
-  /* imitating the large button styles */
-  .hero wa-button::part(label) {
-    padding: 0 var(--wa-space-l);
-  }
-
-  .strata.products {
-    margin-top: -20rem;
-    padding-top: 10rem;
-  }
-
-  .product-card .badge-stock {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-
-  .product-card::part(footer) {
-    --wa-shadow-offset-x-s: 0;
-    --wa-shadow-offset-y-s: 0;
-    border-width: 0;
-    text-align: right;
-  }
-
-  .product-card wa-button::part(prefix) {
-    padding-inline-start: var(--wa-space-xs);
-  }
-
-  .product-card wa-button::part(suffix) {
-    padding-inline-end: var(--wa-space-xs);
-  }
-
-  .product-card wa-button:not(:last-child) {
-    margin-inline-end: var(--wa-space-xs);
-  }
-
-  /* imitating the rounded avatar */
-  .blog wa-avatar {
-    background-color: transparent;
-  }
-
-  .blog wa-avatar::part(image) {
-    border: var(--wa-border-width-s) solid var(--wa-color-brand-fill-loud);
-    border-radius: var(--wa-border-radius-circle);
-  }
-
-  .blog .landscape-frame {
-    box-shadow: var(--wa-shadow-s);
-    border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
-    margin-block-end: var(--wa-shadow-offset-y-s);
-  }
-
-  .post-meta .categories {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .message-composer wa-card::part(header) {
-    background-color: var(--wa-color-neutral-fill-loud);
-  }
-
-  .message-composer .grouped-buttons {
-    --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-gray-30), white 40%);
-  }
-
-  .message-composer [slot='header'] wa-icon-button::part(base) {
-    color: var(--wa-color-neutral-on-loud);
-  }
-
-  .message-composer .grouped-buttons wa-icon-button::part(base):hover {
-    background-color: var(--wa-color-neutral-fill-normal);
-    color: var(--wa-color-text-normal);
-  }
-
-  .message-composer wa-tooltip::part(body) {
-    background-color: var(--wa-color-brand-fill-loud);
-    color: var(--wa-color-brand-on-loud);
-  }
-
-  .message-composer wa-tooltip::part(base__arrow) {
-    --arrow-color: var(--wa-color-brand-fill-loud);
-  }
-
-  .message-composer wa-card::part(footer) {
-    border-width: 0;
-    --padding: 0 var(--wa-space-s) var(--wa-space-s) var(--wa-space-s);
-  }
-
-  .support-table th {
-    background-color: var(--wa-color-neutral-fill-loud);
-    color: var(--wa-color-neutral-on-loud);
-  }
-
-  .support-table th wa-checkbox {
-    --background: transparent;
-    --border-color: var(--wa-color-neutral-on-loud);
-    --border-color-checked: var(--wa-color-neutral-on-loud);
-  }
-
-  .checkout-form {
-    font-size: var(--wa-font-size-s);
-  }
-
-  .checkout-form .square-frame {
-    box-shadow: var(--wa-shadow-s);
-    border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
-  }
-
-  .wa-theme-brutalist.wa-dark {
-    & p a::before {
-      background: var(--wa-color-yellow-40);
-    }
-
-    & wa-rating {
-      --symbol-color: color-mix(in oklab, var(--wa-color-base-80), transparent 50%);
-      --symbol-color-active: var(--wa-color-gray-80);
-    }
-
-    & wa-alert {
-      &[variant='brand'] {
-        --icon-color: var(--wa-color-brand-on-quiet);
-      }
-      &[variant='success'] {
-        --icon-color: var(--wa-color-success-on-quiet);
-      }
-      &[variant='warning'] {
-        --icon-color: var(--wa-color-warning-on-quiet);
-      }
-      &[variant='danger'] {
-        --icon-color: var(--wa-color-danger-on-quiet);
-      }
-      &[variant='neutral'] {
-        --icon-color: var(--wa-color-neutral-on-quiet);
-      }
-    }
-  }
-
-  .preview-container pre {
-    border-inline-start: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-neutral-border-quiet);
-  }
-
-  p a,
-  a.highlite-link {
-    position: relative;
-    --wa-link-decoration-default: none;
-    --wa-link-decoration-hover: none;
-
-    &:before {
-      position: absolute;
-      z-index: -1;
-      content: '';
-      background: var(--wa-color-yellow-80);
-      width: 100%;
-      bottom: 0;
-      height: 50%;
-      opacity: 0.7;
-      transition: all var(--wa-transition-fast) ease-in-out;
-    }
-
-    &:hover:before {
-      height: 100%;
-    }
-  }
-}
-@container brutalist-theme (min-width: 1040px) and (max-width: 1140px) {
-  .product-card wa-button {
-    font-size: 80%;
-  }
-}
-/* #endregion */
-
-/* #region Playful */
-html.wa-theme-playful .preview-container {
-  container-name: playful-theme;
-}
-
-@container playful-theme (min-width: 0) {
-  .project-header {
-    color: var(--wa-color-success-on-normal);
-  }
-
-  .hero-background {
-    position: absolute;
-    z-index: -1;
-    top: -60rem;
-    left: 50%;
-    width: 250rem;
-    height: 250rem;
-    transform: translate(-50%, -50%);
-    flex-shrink: 0;
-    border-radius: 50%;
-    background: linear-gradient(180deg, var(--wa-color-green-90) 69.42%, var(--wa-color-green-80) 100%);
-  }
-
-  .hero-background::after {
-    background: url(/assets/images/themer/playful/hero.png) 0 50% no-repeat;
-    content: '';
-    position: absolute;
-    width: 520px;
-    height: 600px;
-    transform: translateX(-50%);
-    left: 50%;
-    bottom: 33rem;
-  }
-
-  .strata.hero {
-    padding-top: 19rem;
-    text-align: center;
-  }
-
-  .hero .hero-title {
-    color: var(--wa-color-success-on-normal);
-    font-size: var(--wa-font-size-4xl);
-  }
-
-  .hero .hero-cta {
-    font-size: var(--wa-font-size-l);
-  }
-
-  .product-card .badge-stock {
-    position: absolute;
-    top: var(--wa-space-xl);
-    right: var(--wa-space-xl);
-  }
-
-  .product-card {
-    --wa-panel-border-radius: var(--wa-border-radius-l);
-  }
-
-  .product-card::part(footer) {
-    border-width: 0;
-  }
-
-  .product-card wa-button {
-    margin-inline-end: var(--wa-space-xs);
-  }
-
-  .blog wa-avatar {
-    --size: 2rem;
-  }
-
-  .blog .landscape-frame {
-    border-radius: var(--wa-border-radius-l);
-    box-shadow: var(--wa-shadow-s);
-  }
-
-  .message-composer wa-card {
-    --background: var(--wa-color-surface-raised);
-  }
-
-  .message-composer wa-card::part(header) {
-    --wa-color-neutral-border-quiet: var(--wa-color-gray-70);
-    border-width: 0;
-    background-color: var(--wa-color-neutral-fill-quiet);
-  }
-
-  &:not(.wa-theme-premium.wa-dark) .message-composer wa-card {
-    --wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
-  }
-
-  .message-composer wa-icon-button {
-    color: var(--wa-text-color-normal);
-    font-size: var(--wa-font-size-l);
-  }
-
-  .message-composer wa-card::part(footer) {
-    padding-top: 0;
-  }
-
-  .product-detail .price {
-    font-weight: var(--wa-font-weight-bold);
-  }
-
-  .support-table wa-card {
-    background: var(--wa-color-surface-raised);
-  }
-
-  .support-table th {
-    font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-bold);
-    background-color: var(--wa-color-surface-lowered);
-  }
-
-  .support-table tr {
-    border-top-color: var(--wa-color-surface-lowered);
-  }
-
-  .support-table .excerpt {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .order-item img {
-    border-radius: var(--wa-border-radius-m);
-  }
-
-  .checkout-form {
-    font-size: var(--wa-font-size-s);
-  }
-
-  .checkout-form h2 {
-    font-size: var(--wa-font-size-3xl);
-  }
-
-  .checkout-form wa-input::part(form-control-label),
-  .checkout-form wa-select::part(form-control-label) {
-    font-size: var(--wa-font-size-s);
-    padding-block-end: var(--wa-space-xs);
-  }
-
-  .wa-theme-playful.wa-dark {
-    & .hero-background {
-      background: linear-gradient(180deg, var(--wa-color-green-60) 69.42%, var(--wa-color-green-30) 100%);
-    }
-
-    & .message-composer wa-card {
-      border-color: var(--wa-color-gray-30);
-    }
-
-    & .message-composer wa-card::part(header) {
-      background: var(--wa-color-gray-40);
-    }
-
-    & .message-composer wa-card::part(footer) {
-      border-top: 0;
-    }
-
-    & .message-composer .tools .grouped-buttons:not(:last-of-type) {
-      --wa-color-neutral-border-quiet: var(--wa-color-gray-40);
-    }
-
-    & .support-table th {
-      background: var(--wa-color-surface-lowered);
-    }
-  }
-}
-/* responsive */
-@container playful-theme (min-width: 1040px) and (max-width: 1140px) {
-  .product-card wa-button {
-    font-size: 80%;
-    margin-inline-end: 0;
-  }
-}
-/* #endregion */
-
-/* #region Active */
-html.wa-theme-active .preview-container {
-  container-name: active-theme;
-}
-
-@container active-theme (min-width: 0) {
-  .hero-background::after {
-    backdrop-filter: brightness(0.8);
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  .hero-background {
-    background: linear-gradient(
-      var(--wa-color-green-80) 20%,
-      var(--wa-color-primary-80) 80.5%,
-      var(--wa-color-base-10) 80.5%,
-      var(--wa-color-primary-80) 100%
-    );
-    background: url(/assets/images/themer/active/hero.png) 50% 0px / cover no-repeat;
-    height: 40rem;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: -1;
-  }
-
-  .strata.hero {
-    height: 24rem;
-  }
-
-  .hero .title {
-    text-align: right;
-    margin-inline-start: 55%;
-  }
-
-  .hero .hero-title {
-    font-style: italic;
-    font-weight: var(--wa-font-weight-black);
-    font-size: var(--wa-font-size-2xl);
-  }
-
-  .hero wa-button[variant='brand'] {
-    --background: var(--wa-color-neutral-fill-quiet);
-    --text-color: var(--wa-color-neutral-on-normal);
-  }
-
-  wa-rating {
-    --symbol-color-active: var(--wa-color-brand-on-quiet);
-  }
-}
-
-/* responsive */
-@container preview (min-width: 1100px) {
-  .hero-background {
-    height: 47rem;
-  }
-
-  .strata.hero {
-    height: 30rem;
-  }
-
-  .hero .title {
-    margin-block-start: 10%;
-  }
-}
-/* #endregion */
-
-/* #region Premium */
-html.wa-theme-premium .preview-container {
-  container-name: premium-theme;
-}
-
-@container premium-theme (min-width: 0) {
-  .project-header {
-    background-color: var(--wa-color-warning-fill-normal);
-  }
-
-  .strata.hero {
-    height: 60rem;
-    background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 12rem no-repeat;
-    background-size: cover;
-    padding-top: var(--wa-space-2xl);
-    padding-left: var(--wa-space-s);
-    text-align: right;
-  }
-
-  .hero .hero-title {
-    color: var(--wa-color-warning-on-normal);
-    font-style: italic;
-  }
-
-  .blog wa-avatar {
-    border-radius: var(--wa-border-radius-circle);
-    overflow: hidden;
-  }
-
-  .strata.products {
-    margin-top: -25rem;
-    padding-top: 10rem;
-    background: linear-gradient(0deg, var(--wa-color-surface-lowered) 80%, rgba(255, 255, 255, 0) 100%);
-  }
-
-  .product-card .badge-stock {
-    position: absolute;
-    top: var(--wa-space-xl);
-    right: var(--wa-space-xl);
-  }
-
-  .product-card wa-rating {
-    --symbol-size: var(--wa-font-size-m);
-  }
-
-  .product-card .title {
-    font-size: var(--wa-font-size-2xl);
-  }
-
-  .product-card .description {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .product-card::part(footer) {
-    border-width: 0;
-  }
-
-  .product-card wa-button:not(:last-child) {
-    margin-inline-end: var(--wa-space-xs);
-  }
-
-  .blog .authors a {
-    --wa-color-text-link: var(--wa-color-text-quiet);
-    --wa-link-decoration-default: none;
-  }
-
-  .message-composer wa-card {
-    background: var(--wa-color-surface-raised);
-  }
-
-  .message-composer wa-card::part(header) {
-    border-width: 0;
-    background-color: var(--wa-color-neutral-fill-quiet);
-  }
-
-  &:not(.wa-theme-premium.wa-dark) .message-composer wa-card {
-    --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
-  }
-
-  .message-composer wa-card::part(footer) {
-    border-width: 0;
-    --padding: var(--wa-space-s) var(--wa-space-xl);
-  }
-
-  .message-composer .grouped-buttons wa-icon-button::part(base) {
-    block-size: var(--wa-form-control-height-s);
-    inline-size: var(--wa-form-control-height-s);
-    justify-content: center;
-  }
-  .message-composer .grouped-buttons wa-icon-button::part(base):hover {
-    background-color: var(--wa-color-neutral-fill-normal);
-    color: var(--wa-color-text-normal);
-  }
-
-  .support-table th {
-    text-transform: uppercase;
-    font-weight: var(--wa-font-weight-normal);
-    color: var(--wa-color-text-quiet);
-    background-color: var(--wa-color-surface-lowered);
-  }
-
-  .support-table th:first-child {
-    border-radius: var(--wa-border-radius-l) 0 0 0;
-  }
-
-  .support-table th:last-child {
-    border-radius: 0 var(--wa-border-radius-l) 0 0;
-  }
-
-  .support-table tr {
-    --wa-color-surface-border: var(--wa-color-surface-lowered);
-  }
-
-  .checkout-form wa-input::part(form-control-label),
-  .checkout-form wa-select::part(form-control-label) {
-    font-size: var(--wa-font-size-s);
-    margin-block-end: var(--wa-space-xs);
-  }
-
-  .order-item .finish {
-    color: var(--wa-color-text-quiet);
-    font-size: var(--wa-font-size-s);
-    font-style: italic;
-  }
-
-  .wa-theme-premium.wa-dark {
-    & .message-composer .tools .grouped-buttons:not(:last-of-type) {
-      --wa-color-neutral-border-quiet: var(--wa-color-base-40);
-    }
-
-    & .preview-container pre,
-    & .preview-container code {
-      background-color: var(--wa-color-base-20);
-    }
-
-    /* syntax highlighting */
-    & .token {
-      &.selector {
-        color: var(--wa-color-green-80);
-      }
-
-      &.tag {
-        color: var(--wa-color-primary-80);
-      }
-
-      &.punctuation {
-        color: var(--wa-color-base-95);
-      }
-
-      &.attr-name {
-        color: var(--wa-color-green-80);
-      }
-
-      &.attr-value {
-        color: var(--wa-color-yellow-80);
-      }
-    }
-  }
-  .preview-container pre,
-  .preview-container code {
-    background-color: var(--wa-color-base-90);
-    font-size: var(--font-size-m);
-  }
-
-  /* syntax highlighting */
-  .token {
-    &.selector {
-      color: var(--wa-color-green-30);
-    }
-
-    &.tag {
-      color: var(--wa-color-primary-30);
-    }
-
-    &.punctuation {
-      color: var(--wa-color-base-10);
-    }
-
-    &.attr-name {
-      color: var(--wa-color-green-30);
-    }
-
-    &.attr-value {
-      color: var(--wa-color-yellow-30);
-    }
-  }
-}
-
-/* responsive */
-@container preview (min-width: 1040px) {
-  .strata.hero {
-    background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 35% no-repeat;
-    padding-top: 15rem;
-    padding-left: 50%;
-  }
-
-  .strata.products {
-    margin-top: -25rem;
-    padding-top: 10rem;
-    background: linear-gradient(0deg, var(--wa-color-surface-lowered) 60%, rgba(255, 255, 255, 0) 100%);
-  }
-}
-/* #endregion */

docs/docs/components/animated-image.md

@@ -1,8 +1,7 @@
 ---
 title: Animated Image
 description: A component for displaying animated GIFs and WEBPs that play and pause on interaction.
-tags: [imagery, niche]
+layout: component
-icon: animated-image
 ---
 
 ```html {.example}

docs/docs/components/animation.md

@@ -1,8 +1,7 @@
 ---
 title: Animation
 description: Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.
-tags: [helpers, primitives]
+layout: component
-icon: animation
 ---
 
 To animate an element, wrap it in `<wa-animation>` and set an animation `name`. The animation will not start until you add the `play` attribute. Refer to the [properties table](#properties) for a list of all animation options.
@@ -197,3 +196,4 @@ Animations won't play until you apply the `play` attribute. You can omit it init
     animation.play = true;
   });
 </script>
+```

docs/docs/components/avatar.md

@@ -1,8 +1,7 @@
 ---
 title: Avatar
 description: Avatars are used to represent a person or object.
-tags: [imagery, apps, content]
+layout: component
-icon: avatar
 ---
 
 By default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials, and images. You should always provide a `label` for assistive devices.
@@ -98,7 +97,7 @@ You can group avatars with a few lines of CSS.
     margin-left: calc(-1 * var(--wa-space-m));
   }
 
-  .avatar-group wa-avatar {
+  .avatar-group wa-avatar::part(base) {
     border: solid 2px var(--wa-color-surface-default);
   }
 </style>

docs/docs/components/badge.md

@@ -1,8 +1,7 @@
 ---
 title: Badge
 description: Badges are used to draw attention and display statuses or counts.
-tags: [feedback, content]
+layout: component
-icon: badge
 ---
 
 ```html {.example}
@@ -23,48 +22,6 @@ Set the `variant` attribute to change the badge's variant.
 <wa-badge variant="danger">Danger</wa-badge>
 ```
 
-### Appearance
-
-Use the `appearance` attribute to change the badge's visual appearance.
-
-```html {.example}
-<div style="margin-block-end: 1rem;">
-  <wa-badge appearance="accent outlined" variant="neutral">A+O</wa-badge>
-  <wa-badge appearance="accent" variant="neutral">Accent</wa-badge>
-  <wa-badge appearance="filled outlined" variant="neutral">F+O</wa-badge>
-  <wa-badge appearance="filled" variant="neutral">Filled</wa-badge>
-  <wa-badge appearance="outlined" variant="neutral">Outlined</wa-badge>
-</div>
-<div style="margin-block-end: 1rem;">
-  <wa-badge appearance="accent outlined" variant="brand">A+O</wa-badge>
-  <wa-badge appearance="accent" variant="brand">Accent</wa-badge>
-  <wa-badge appearance="filled outlined" variant="brand">F+O</wa-badge>
-  <wa-badge appearance="filled" variant="brand">Filled</wa-badge>
-  <wa-badge appearance="outlined" variant="brand">Outlined</wa-badge>
-</div>
-<div style="margin-block-end: 1rem;">
-  <wa-badge appearance="accent outlined" variant="success">A+O</wa-badge>
-  <wa-badge appearance="accent" variant="success">Accent</wa-badge>
-  <wa-badge appearance="filled outlined" variant="success">F+O</wa-badge>
-  <wa-badge appearance="filled" variant="success">Filled</wa-badge>
-  <wa-badge appearance="outlined" variant="success">Outlined</wa-badge>
-</div>
-<div style="margin-block-end: 1rem;">
-  <wa-badge appearance="accent outlined" variant="warning">A+O</wa-badge>
-  <wa-badge appearance="accent" variant="warning">Accent</wa-badge>
-  <wa-badge appearance="filled outlined" variant="warning">F+O</wa-badge>
-  <wa-badge appearance="filled" variant="warning">Filled</wa-badge>
-  <wa-badge appearance="outlined" variant="warning">Outlined</wa-badge>
-</div>
-<div>
-  <wa-badge appearance="accent outlined" variant="danger">A+O</wa-badge>
-  <wa-badge appearance="accent" variant="danger">Accent</wa-badge>
-  <wa-badge appearance="filled outlined" variant="danger">F+O</wa-badge>
-  <wa-badge appearance="filled" variant="danger">Filled</wa-badge>
-  <wa-badge appearance="outlined" variant="danger">Outlined</wa-badge>
-</div>
-```
-
 ### Pill Badges
 
 Use the `pill` attribute to give badges rounded edges.
@@ -128,3 +85,4 @@ When including badges in menu items, use the `suffix` slot to make sure they're
   <wa-menu-item>Comments <wa-badge slot="suffix" variant="neutral" pill>4</wa-badge></wa-menu-item>
   <wa-menu-item>Replies <wa-badge slot="suffix" variant="neutral" pill>12</wa-badge></wa-menu-item>
 </wa-menu>
+```

docs/docs/components/breadcrumb-item.md

@@ -1,8 +1,7 @@
 ---
 title: Breadcrumb Item
 description: Breadcrumb Items are used inside breadcrumbs to represent different links.
-tags: component
+layout: component
-parent: breadcrumb
 ---
 
 ```html {.example}

docs/docs/components/breadcrumb.md

@@ -1,8 +1,7 @@
 ---
 title: Breadcrumb
 description: Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
-tags: [navigation]
+layout: component
-icon: breadcrumb
 ---
 
 Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation.
@@ -136,7 +135,7 @@ Dropdown menus can be placed in the default slot to provide additional options.
   <wa-breadcrumb-item>Homepage</wa-breadcrumb-item>
   <wa-breadcrumb-item>
     <wa-dropdown>
-      <wa-button slot="trigger" size="small" appearance="filled" pill>
+      <wa-button slot="trigger" size="small" appearance="tinted" pill>
         <wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
       </wa-button>
       <wa-menu>
@@ -161,7 +160,7 @@ Alternatively, you can place dropdown menus in a prefix or suffix slot.
   <wa-breadcrumb-item>
     Web Design
     <wa-dropdown slot="suffix">
-      <wa-button slot="trigger" size="small" appearance="filled" pill>
+      <wa-button slot="trigger" size="small" appearance="tinted" pill>
         <wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
       </wa-button>
       <wa-menu>
@@ -172,3 +171,4 @@ Alternatively, you can place dropdown menus in a prefix or suffix slot.
     </wa-dropdown>
   </wa-breadcrumb-item>
 </wa-breadcrumb>
+```

docs/docs/components/button-group.md

@@ -1,8 +1,7 @@
 ---
 title: Button Group
 description: Button groups can be used to group related buttons into sections.
-tags: [actions, forms, apps]
+layout: component
-icon: button-group
 ---
 
 ```html {.example}
@@ -140,17 +139,15 @@ Pill buttons are supported through the button's `pill` attribute.
 </wa-button-group>
 ```
 
-### Dropdowns and Native Buttons in Button Groups
+### Dropdowns in Button Groups
 
-Other elements can also be placed inside button groups:
+Dropdowns can be placed inside button groups as long as the trigger is an `<wa-button>` element.
-- Native buttons as long as their [native styles](/docs/native/button) are included
-- Dropdowns as long as the trigger is either a `<wa-button>`, or a `<button>` with [native styles](/docs/native/button) included.
 
 ```html {.example}
 <wa-button-group label="Example Button Group">
   <wa-button>Button</wa-button>
-  <button>Native Button</button>
+  <wa-button>Button</wa-button>
-  <wa-dropdown hoist>
+  <wa-dropdown>
     <wa-button slot="trigger" caret>Dropdown</wa-button>
     <wa-menu>
       <wa-menu-item>Item 1</wa-menu-item>
@@ -168,9 +165,9 @@ Create a split button using a button and a dropdown. Use a [visually hidden](/do
 ```html {.example}
 <wa-button-group label="Example Button Group">
   <wa-button variant="brand">Save</wa-button>
-  <wa-dropdown placement="bottom-end" hoist>
+  <wa-dropdown placement="bottom-end">
     <wa-button slot="trigger" variant="brand" caret>
-      <span class="wa-visually-hidden">More options</span>
+      <wa-visually-hidden>More options</wa-visually-hidden>
     </wa-button>
     <wa-menu>
       <wa-menu-item>Save</wa-menu-item>

docs/docs/components/button.md

@@ -1,9 +1,7 @@
 ---
 title: Button
 description: Buttons represent actions that are available to the user.
-tags: [actions, forms]
+layout: component
-native: button
-icon: button
 ---
 
 ```html {.example}
@@ -29,37 +27,35 @@ Use the `variant` attribute to set the button's semantic variant.
 Use the `appearance` attribute to change the button's visual appearance.
 
 ```html {.example}
-<div class="wa-stack">
+<div style="margin-block-end: 1rem;">
-  <div class="wa-gap-m">
+  <wa-button appearance="filled" variant="neutral">Filled</wa-button>
-    <wa-button appearance="accent" variant="neutral">Accent</wa-button>
+  <wa-button appearance="tinted" variant="neutral">Tinted</wa-button>
-    <wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
+  <wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
-    <wa-button appearance="filled" variant="neutral">Filled</wa-button>
+  <wa-button appearance="text" variant="neutral">Text</wa-button>
-    <wa-button appearance="plain" variant="neutral">Plain</wa-button>
+</div>
-  </div>
+<div style="margin-block-end: 1rem;">
-  <div class="wa-gap-m">
+  <wa-button appearance="filled" variant="brand">Filled</wa-button>
-    <wa-button appearance="accent" variant="brand">Accent</wa-button>
+  <wa-button appearance="tinted" variant="brand">Tinted</wa-button>
-    <wa-button appearance="outlined" variant="brand">Outlined</wa-button>
+  <wa-button appearance="outlined" variant="brand">Outlined</wa-button>
-    <wa-button appearance="filled" variant="brand">Filled</wa-button>
+  <wa-button appearance="text" variant="brand">Text</wa-button>
-    <wa-button appearance="plain" variant="brand">Plain</wa-button>
+</div>
-  </div>
+<div style="margin-block-end: 1rem;">
-  <div class="wa-gap-m">
+  <wa-button appearance="filled" variant="success">Filled</wa-button>
-    <wa-button appearance="accent" variant="success">Accent</wa-button>
+  <wa-button appearance="tinted" variant="success">Tinted</wa-button>
-    <wa-button appearance="outlined" variant="success">Outlined</wa-button>
+  <wa-button appearance="outlined" variant="success">Outlined</wa-button>
-    <wa-button appearance="filled" variant="success">Filled</wa-button>
+  <wa-button appearance="text" variant="success">Text</wa-button>
-    <wa-button appearance="plain" variant="success">Plain</wa-button>
+</div>
-  </div>
+<div style="margin-block-end: 1rem;">
-  <div class="wa-gap-m">
+  <wa-button appearance="filled" variant="warning">Filled</wa-button>
-    <wa-button appearance="accent" variant="warning">Accent</wa-button>
+  <wa-button appearance="tinted" variant="warning">Tinted</wa-button>
-    <wa-button appearance="outlined" variant="warning">Outlined</wa-button>
+  <wa-button appearance="outlined" variant="warning">Outlined</wa-button>
-    <wa-button appearance="filled" variant="warning">Filled</wa-button>
+  <wa-button appearance="text" variant="warning">Text</wa-button>
-    <wa-button appearance="plain" variant="warning">Plain</wa-button>
+</div>
-  </div>
+<div>
-  <div class="wa-gap-m">
+  <wa-button appearance="filled" variant="danger">Filled</wa-button>
-    <wa-button appearance="accent" variant="danger">Accent</wa-button>
+  <wa-button appearance="tinted" variant="danger">Tinted</wa-button>
-    <wa-button appearance="outlined" variant="danger">Outlined</wa-button>
+  <wa-button appearance="outlined" variant="danger">Outlined</wa-button>
-    <wa-button appearance="filled" variant="danger">Filled</wa-button>
+  <wa-button appearance="text" variant="danger">Text</wa-button>
-    <wa-button appearance="plain" variant="danger">Plain</wa-button>
-  </div>
 </div>
 ```
 
@@ -95,7 +91,7 @@ It's often helpful to have a button that works like a link. This is possible by
 
 ### Setting a Custom Width
 
-As expected, buttons can be given a custom width by setting the `width` CSS property. This is useful for making buttons span the full width of their container on smaller screens.
+As expected, buttons can be given a custom width by setting the `width` attribute. This is useful for making buttons span the full width of their container on smaller screens.
 
 ```html {.example}
 <wa-button size="small" style="width: 100%; margin-bottom: 1rem;">Small</wa-button>

docs/docs/components/callout.md

@@ -1,9 +1,7 @@
 ---
 title: Callout
 description: Callouts are used to display important messages inline.
-tags: [feedback, content]
+layout: component
-icon: callout
-native: callout
 ---
 
 ```html {.example}
@@ -59,71 +57,6 @@ Set the `variant` attribute to change the callout's variant.
 </wa-callout>
 ```
 
-### Appearance
-
-Use the `appearance` attribute to change the callout's visual appearance (the default is `outlined filled`).
-
-```html {.example}
-<wa-callout variant="brand" appearance="outlined accent">
-  <wa-icon slot="icon" name="check-to-slot"></wa-icon>
-  This <strong>accent</strong> callout is also <strong>outlined</strong>
-</wa-callout>
-
-<br />
-
-<wa-callout variant="brand" appearance="accent">
-  <wa-icon slot="icon" name="square-check"></wa-icon>
-  This <strong>accent</strong> callout draws attention without an outline
-</wa-callout>
-
-<br />
-
-<wa-callout variant="brand" appearance="outlined filled">
-  <wa-icon slot="icon" name="fill-drip" variant="regular"></wa-icon>
-  This callout is both <strong>filled</strong> and <strong>outlined</strong>
-</wa-callout>
-
-<br />
-
-<wa-callout variant="brand" appearance="filled">
-  <wa-icon slot="icon" name="fill" variant="regular"></wa-icon>
-  This callout is only <strong>filled</strong>
-</wa-callout>
-
-<br />
-
-<wa-callout variant="brand" appearance="outlined">
-  <wa-icon slot="icon" name="lines-leaning" variant="regular"></wa-icon>
-  Here's an <strong>outlined</strong> callout
-</wa-callout>
-
-<br />
-
-<wa-callout variant="brand" appearance="plain">
-  <wa-icon slot="icon" name="font" variant="regular"></wa-icon>
-  No bells and whistles on this <strong>plain</strong> callout
-</wa-callout>
-```
-
-### Sizes
-
-Use the `size` attribute to change a callout's size.
-
-```html {.example}
-<wa-callout variant="brand" appearance="outlined accent" size="large">
-  <wa-icon slot="icon" name="circle-info" variant="solid"></wa-icon>
-  This is meant to be very emphasized.
-</wa-callout>
-<wa-callout>
-  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
-  Normal-sized callout.
-</wa-callout>
-<wa-callout variant="plain" appearance="plain" size="small">
-  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
-  Just a small tip!
-</wa-callout>
-```
-
 ### Without Icons
 
 Icons are optional. Simply omit the `icon` slot if you don't want them.
@@ -131,9 +64,3 @@ Icons are optional. Simply omit the `icon` slot if you don't want them.
 ```html {.example}
 <wa-callout variant="brand"> Nothing fancy here, just a simple callout. </wa-callout>
 ```
-
-### Styling
-
-You can customize the callout's appearance mostly by setting regular CSS properties:
-- `background`, `border`, `border-radius`, `color`, `padding`, `margin`, etc. work as expected
-- `gap` sets the space between the icon and the content