Prefer positive conditionals

Co-Authored-By: Konnor Rogers <konnor5456@gmail.com>

.eslintignore

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

.eslintrc.cjs

@@ -1,213 +0,0 @@
-/* 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

@@ -0,0 +1,39 @@
+# # 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 && 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

.github/workflows/ssr_tests.js.yml

@@ -1,42 +1,13 @@
 # # 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: Node.js CI
+name: SSR 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 && 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
 

.vscode/settings.json

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

cspell.json

@@ -45,6 +45,7 @@
     "dogfood",
     "dropdowns",
     "easings",
+    "ecommerce",
     "endraw",
     "endregion",
     "enterkeyhint",
@@ -83,6 +84,8 @@
     "jsfiddle",
     "keydown",
     "keyframes",
+    "keymaker",
+    "Konnor",
     "Kool",
     "labelledby",
     "Laravel",
@@ -108,6 +111,7 @@
     "multiselectable",
     "nextjs",
     "nocheck",
+    "noindex",
     "noopener",
     "noreferrer",
     "novalidate",
@@ -120,6 +124,7 @@
     "peta",
     "petabit",
     "Preact",
+    "preconnect",
     "prismjs",
     "progressbar",
     "radiogroup",
@@ -183,7 +188,8 @@
     "webawesomer",
     "WEBP",
     "Webpacker",
-    "xmark"
+    "xmark",
+    "zoomable"
   ],
   "ignorePaths": [
     "package.json",

docs/.eleventy.js

@@ -3,31 +3,37 @@ 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 { removeDataAlphaElements } from './_utils/remove-data-alpha-elements.js';
 import { currentLink } from './_utils/current-link.js';
 import { highlightCodePlugin } from './_utils/highlight-code.js';
-import { formatCodePlugin } from './_utils/format-code.js';
+// import { formatCodePlugin } from './_utils/format-code.js';
 import { replaceTextPlugin } from './_utils/replace-text.js';
 import { searchPlugin } from './_utils/search.js';
 import { readFile } from 'fs/promises';
 import { outlinePlugin } from './_utils/outline.js';
-import { getComponents } from './_utils/manifest.js';
+import 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 isDeveloping = process.argv.includes('--develop');
+// const isDeveloping = process.argv.includes('--develop');
 
 export default function (eleventyConfig) {
   // NOTE - alpha setting removes certain pages
   if (isAlpha) {
-    eleventyConfig.ignores.add('**/components/page.md');
     eleventyConfig.ignores.add('**/experimental/**');
+    eleventyConfig.ignores.add('**/layout/**');
+    eleventyConfig.ignores.add('**/patterns/**');
+    eleventyConfig.ignores.add('**/style-utilities/**');
+    eleventyConfig.ignores.add('**/components/code-demo.md');
+    eleventyConfig.ignores.add('**/components/viewport-demo.md');
   }
 
   // Add template data
   eleventyConfig.addGlobalData('package', packageData);
+  eleventyConfig.addGlobalData('isAlpha', isAlpha);
 
   // Template filters - {{ content | filter }}
   eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
@@ -39,6 +45,7 @@ export default function (eleventyConfig) {
     // 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;
   });
+  eleventyConfig.addFilter('keys', obj => Object.keys(obj));
 
   // Shortcodes - {% shortCode arg1, arg2 %}
   eleventyConfig.addShortcode('cdnUrl', location => {
@@ -46,16 +53,9 @@ export default function (eleventyConfig) {
   });
 
   // Helpers
-  eleventyConfig.addNunjucksGlobal('getComponent', tagName => {
-    const component = getComponents().find(c => c.tagName === tagName);
 
-    if (!component) {
-      throw new Error(
-        `Unable to find "<${tagName}>". Make sure the file name is the same as the tag name (without prefix).`
-      );
-    }
-    return component;
-  });
+  // Remove elements that have [data-alpha="remove"]
+  eleventyConfig.addPlugin(removeDataAlphaElements({ isAlpha }));
 
   // Use our own markdown instance
   eleventyConfig.setLibrary('md', markdown);
@@ -79,7 +79,7 @@ export default function (eleventyConfig) {
   eleventyConfig.addPlugin(currentLink());
 
   // Add code examples for `<code class="example">` blocks
-  eleventyConfig.addPlugin(codeExamplesPlugin());
+  eleventyConfig.addPlugin(codeExamplesPlugin);
 
   // Highlight code blocks with Prism
   eleventyConfig.addPlugin(highlightCodePlugin());
@@ -115,8 +115,7 @@ export default function (eleventyConfig) {
   // mutation-observer (why SSR this?)
   // resize-observer (why SSR this?)
   // tooltip (why SSR this?)
-
-  const componentModules = getComponents()
+  const componentModules = componentList
     // .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
     .map(component => {
       const name = component.tagName.split(/wa-/)[1];
@@ -138,12 +137,16 @@ export default function (eleventyConfig) {
   );
 
   // Production-only plugins
-  if (!isDeveloping) {
-    // Run Prettier on each file (prod only because it can be slow)
-    eleventyConfig.addPlugin(formatCodePlugin());
-  }
+  //
+  // TODO - disabled because it takes about a minute to run now
+  //
+  // if (!isDeveloping) {
+  //   // Run Prettier on each file (prod only because it can be slow)
+  //   eleventyConfig.addPlugin(formatCodePlugin());
+  // }
 
   return {
+    markdownTemplateEngine: 'njk',
     dir: {
       includes: '_includes',
       layouts: '_layouts'

docs/_data/componentList.js

@@ -0,0 +1,75 @@
+/**
+ * @module components Fetches components from custom-elements.json and exposes them in a saner format.
+ */
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { readFileSync } from 'fs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const manifest = JSON.parse(readFileSync(resolve(__dirname, '../../dist/custom-elements.json'), 'utf-8'));
+
+const components = manifest.modules.flatMap(module => {
+  return module.declarations
+    .filter(c => c?.customElement)
+    .map(declaration => {
+      // Generate the dist path based on the src path and attach it to the component
+      declaration.path = module.path.replace(/^src\//, 'dist/').replace(/\.ts$/, '.js');
+
+      // Remove private members and those that lack a description
+      const members = declaration.members?.filter(member => member.description && member.privacy !== 'private');
+
+      const methods = members?.filter(prop => prop.kind === 'method' && prop.privacy !== 'private');
+      const attributes = declaration.attributes ?? [];
+      const properties = members?.filter(prop => {
+        // Look for a corresponding attribute
+        const attribute = attributes?.find(attr => attr.fieldName === prop.name);
+        if (attribute) {
+          prop.attribute = attribute.name || attribute.fieldName;
+        }
+
+        return prop.kind === 'field' && prop.privacy !== 'private';
+      });
+
+      return {
+        ...declaration,
+        slug: declaration.tagName.replace(/^wa-/, ''),
+        methods,
+        attributes,
+        properties
+      };
+    });
+});
+
+// Build dependency graphs
+components.forEach(component => {
+  const dependencies = [];
+
+  // Recursively fetch sub-dependencies
+  function getDependencies(tag) {
+    const cmp = components.find(c => c.tagName === tag);
+    if (!cmp || !Array.isArray(component.dependencies)) {
+      return;
+    }
+
+    cmp.dependencies?.forEach(dependentTag => {
+      if (!dependencies.includes(dependentTag)) {
+        dependencies.push(dependentTag);
+      }
+      getDependencies(dependentTag);
+    });
+  }
+
+  getDependencies(component.tagName);
+
+  component.dependencies = dependencies.sort();
+});
+
+// Sort by name
+components.sort((a, b) => {
+  if (a.name < b.name) return -1;
+  if (a.name > b.name) return 1;
+  return 0;
+});
+
+export default components;

docs/_data/components.js

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

docs/_data/componentsBy.js

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

docs/_includes/base.njk

@@ -17,7 +17,7 @@
     <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="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
 
     <script type="module" src="/assets/scripts/code-examples.js"></script>
     <script type="module" src="/assets/scripts/color-scheme.js"></script>
@@ -31,7 +31,7 @@
 
     {# Web Awesome #}
     <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
-    <link rel="stylesheet" id="theme-stylesheet" />
+    <link rel="stylesheet" id="theme-stylesheet" href="/dist/themes/default.css" />
     <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" />
@@ -58,10 +58,24 @@
         return colorScheme === 'dark';
       }
 
-      const stylesheet = document.getElementById("theme-stylesheet")
-      let preset = getPresetTheme()
+      const oldStylesheet = document.querySelector("#theme-stylesheet")
 
-      stylesheet.href = `/dist/themes/${preset}.css`
+      const newStylesheet = document.createElement("link")
+
+      let preset = getPresetTheme()
+      newStylesheet.href = `/dist/themes/${preset}.css`
+      newStylesheet.rel = "preload"
+      newStylesheet.as = "style"
+
+      document.head.append(newStylesheet)
+
+      function updateStylesheet () {
+        newStylesheet.rel = "stylesheet"
+        newStylesheet.id = "theme-stylesheet"
+        requestAnimationFrame(() => oldStylesheet.remove())
+      }
+
+      newStylesheet.addEventListener("load", updateStylesheet)
 
       document.documentElement.classList.toggle(
         `wa-theme-${preset}-dark`,
@@ -71,14 +85,15 @@
   </head>
   <body class="layout-{{ layout | stripExtension }}">
     <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
-    <wa-page view="desktop">
+    <wa-page view="desktop" disable-navigation-toggle="">
       <header slot="header">
         {# Logo #}
         <div id="docs-branding">
           {# Nav toggle #}
-          <wa-button appearance="text" data-toggle-nav>
+          <wa-button appearance="text" size="small" data-toggle-nav>
             <wa-icon name="bars" label="Toggle navigation"></wa-icon>
           </wa-button>
+
           <a href="/" aria-label="Web Awesome">
             <span class="only-desktop">{% include "logo.njk" %}</span>
             <span class="only-mobile">{% include "logo-simple.njk" %}</span>
@@ -88,40 +103,11 @@
         </div>
 
         <div id="docs-toolbar">
-          {# Preset theme selector #}
-          <wa-dropdown id="preset-theme-selector">
-            <wa-button slot="trigger" appearance="tinted" size="small" pill caret>
-              <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
-              <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>
+          {# Desktop selectors #}
+          <div class="only-desktop">
+            {% include "preset-theme-selector.njk" %}
+            {% include "color-scheme-selector.njk" %}
+          </div>
 
           {# Search #}
           <wa-button id="search-trigger" appearance="outlined" size="small" data-search>
@@ -134,12 +120,16 @@
 
       {# Sidebar #}
       {% if hasSidebar %}
-        <aside slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
-          <wa-icon-button id="sidebar-close-button" name="xmark" label="Close" data-drawer="close"></wa-icon-button>
-          <nav>
-            {% include "sidebar.njk" %}
-          </nav>
-        </aside>
+        {# Mobile selectors #}
+        <div class="only-mobile" slot="navigation-header">
+          <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
+            {% include "preset-theme-selector.njk" %}
+            {% include "color-scheme-selector.njk" %}
+          </div>
+        </div>
+        <div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
+          {% include "sidebar.njk" %}
+        </div>
       {% endif %}
 
       {# Outline #}

docs/_includes/color-scheme-selector.njk

@@ -0,0 +1,15 @@
+{# 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">Light</span>
+    <span class="only-dark">Dark</span>
+  </wa-button>
+  <wa-menu>
+    <wa-menu-item type="checkbox" value="light">Light</wa-menu-item>
+    <wa-menu-item type="checkbox" value="dark">Dark</wa-menu-item>
+    <wa-divider></wa-divider>
+    <wa-menu-item type="checkbox" value="auto">System</wa-menu-item>
+  </wa-menu>
+</wa-dropdown>

docs/_includes/page-demo.njk

@@ -0,0 +1,22 @@
+<div id="page_slots_demo">
+<link rel="stylesheet" href="/assets/examples/page-demo/demo.css">
+{% set slots = components.page.slots %}
+
+<fieldset id="page_slots_fieldset">
+  <legend>Slots</legend>
+  <div class="options">
+  {% for slot in slots %}
+	{% if (slot.name != "skip-to-content") and (slot.name != "navigation-toggle-icon") %}
+  <wa-checkbox name="slot" value="{{ slot.name }}" {{ 'checked' if slot.name != "menu" and slot.name != 'navigation-toggle' | safe}} class="{{ 'default' if not slot.name }}"
+  data-description="{{ slot.description | inlineMarkdown }}" title="{{ slot.description | inlineMarkdown | striptags | safe }}">
+    {{ slot.name or "(default)" }}
+  </wa-checkbox>
+	{% endif %}
+  {% endfor %}
+  </div>
+</fieldset>
+<wa-viewport-demo viewport="1000">
+<iframe srcdoc="" id="page_slots_iframe" data-turbo="false" data-turbo-temporary></iframe>
+</wa-viewport-demo>
+</div>
+<script type=module src="/assets/examples/page-demo/demo.js"></script>

docs/_includes/preset-theme-selector.njk

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

docs/_includes/sidebar.njk

@@ -20,11 +20,12 @@
 </ul>
 
 {# Components #}
-<h2>Components</h2>
+<h2>
+  <a href="/docs/components/" title="Overview">Components
+    <wa-icon name="grid-2"></wa-icon>
+  </a>
+</h2>
 <ul>
-  <li>
-    <a href="/docs/components/">Components Overview</a>
-  </li>
   <li>
     <a href="/docs/components/animated-image">Animated Image</a>
   </li>
@@ -68,6 +69,11 @@
   <li>
     <a href="/docs/components/checkbox">Checkbox</a>
   </li>
+  {% if not isAlpha %}
+  <li>
+    <a href="/docs/components/code-demo">Code Demo</a>
+  </li>
+  {% endif %}
   <li>
     <a href="/docs/components/color-picker">Color Picker</a>
   </li>
@@ -127,6 +133,11 @@
   <li>
     <a href="/docs/components/mutation-observer">Mutation Observer</a>
   </li>
+  <li>
+    <a href="/docs/components/page">Page</a>
+    <wa-icon name="flask"></wa-icon>
+    <wa-badge class="pro">PRO</wa-badge>
+  </li>
   <li>
     <a href="/docs/components/popup">Popup</a>
   </li>
@@ -210,15 +221,24 @@
       </li>
     </ul>
   </li>
+  {% if not isAlpha %}
+  <li>
+    <a href="/docs/components/viewport-demo">Viewport Demo</a>
+  </li>
+  {% endif %}
   <li>
     <a href="/docs/components/visually-hidden">Visually Hidden</a>
   </li>
 </ul>
 
 {# Layout #}
-<h2>Layout</h2>
+{% if not isAlpha %}
+<h2>
+  <a href="/docs/layout" title="Overview">Layout
+    <wa-icon name="grid-2"></wa-icon>
+  </a>
+</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>
@@ -227,13 +247,12 @@
   <li><a href="/docs/layout/split">Split</a></li>
   <li><a href="/docs/layout/stack">Stack</a></li>
 </ul>
+{% endif %}
 
 {# Patterns #}
+{% if not isAlpha %}
 <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>
@@ -243,20 +262,22 @@
       <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-summary">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>
+{% endif %}
 
 {# Theming #}
-<h2>Theming</h2>
+<h2>
+  <a href="/docs/theming" title="Overview">Theming
+    <wa-icon name="grid-2"></wa-icon>
+  </a>
+</h2>
 <ul>
-  <li>
-    <a href="/docs/theming/">Theming Overview</a>
-  </li>
   <li>
     <a href="/docs/theming/color">Color</a>
   </li>
@@ -284,10 +305,12 @@
 </ul>
 
 {# Style Utilities #}
+{% if not isAlpha %}
 <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>
+</ul>
+{% endif %}

docs/_includes/svgs/page.njk

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

docs/_layouts/blank.njk

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="{{ description }}">
+    {% if noindex %}<meta name="robots" content="noindex">{% endif %}
+
+    <title>{{ title }}</title>
+
+    <link rel="icon" href="/assets/images/webawesome-logo.svg" />
+    <link rel="apple-touch-icon" href="/assets/images/app-icon.png">
+
+    {# Scripts #}
+    {# Hydration stuff #}
+    <script src="/assets/scripts/hydration-errors.js"></script>
+    <link rel="stylesheet" href="/assets/styles/hydration-errors.css">
+    <link rel="preconnect" href="https://cdn.jsdelivr.net">
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
+
+    {# Web Awesome #}
+    <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
+    <link rel="stylesheet" id="theme-stylesheet" />
+    <link rel="stylesheet" href="/dist/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" />
+
+    {# 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 }}">
+
+        {% block beforeContent %}{% endblock %}
+
+        {% block content %}
+          {{ content | safe }}
+        {% endblock %}
+
+        {% block afterContent %}{% endblock %}
+
+  </body>
+</html>

docs/_layouts/component.njk

@@ -1,6 +1,6 @@
 {% set hasSidebar = true %}
 {% set hasOutline = true %}
-{% set component = getComponent('wa-' + page.fileSlug) %}
+{% set component = components[page.fileSlug] %}
 {% set description = component.summary %}
 
 {% extends '../_includes/base.njk' %}
@@ -17,6 +17,10 @@
     >
       {{ component.status }}
     </wa-badge>
+    {# TODO - add a pro flag for pro components #}
+    {% if component.tagName == 'wa-page' %}
+      <wa-badge class="pro">PRO</wa-badge>
+    {% endif %}
   </div>
   <p class="component-summary">
     {{ component.summary | inlineMarkdown | safe }}
@@ -62,7 +66,7 @@
 
   {# Properties #}
   {% if component.properties.length %}
-    <h2>Properties</h2>
+    <h2>Attributes & Properties</h2>
 
     <div class="table-scroll">
       <table class="component-table">
@@ -77,9 +81,9 @@
           {% for prop in component.properties %}
             <tr>
               <td class="table-name">
-                <code>{{ prop.name }}</code><br>
+                <code title="JS property">{{ prop.name }}</code><br>
                 {% if prop.attribute %}
-                  <div><small><code>{{ prop.attribute }}</code></small></div>
+                  <div><small><code title="HTML attribute">{{ prop.attribute }}</code></small></div>
                 {% endif %}
               </td>
               <td class="table-description">
@@ -266,9 +270,9 @@
   </p>
 
   <wa-tab-group label="How would you like to import this component?">
-    <wa-tab slot="nav" panel="cdn">CDN</wa-tab>
-    <wa-tab slot="nav" panel="npm">npm</wa-tab>
-    <wa-tab slot="nav" panel="react">React</wa-tab>
+    <wa-tab panel="cdn">CDN</wa-tab>
+    <wa-tab panel="npm">npm</wa-tab>
+    <wa-tab 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/page.njk

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

docs/_layouts/pattern.njk

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

docs/_utils/anchor-headings.js

@@ -39,22 +39,26 @@ 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());
 
-        const slug = createId(clone.textContent ?? '') ?? uuid().slice(-12);
-        let id = slug;
-        let suffix = 0;
-
-        // Make sure the slug is unique in the document
-        while (doc.getElementById(id) !== null) {
-          id = `${slug}-${++suffix}`;
+        if (hasAnchor) {
+          return;
         }
 
-        if (hasAnchor || !id) {
-          return;
+        let id = existingId;
+        if (!id) {
+          const slug = createId(clone.textContent ?? '') ?? uuid().slice(-12);
+          id = slug;
+          let suffix = 1;
+
+          // Make sure the slug is unique in the document
+          while (doc.getElementById(id) !== null) {
+            id = `${slug}-${++suffix}`;
+          }
         }
 
         // Create the anchor
@@ -67,7 +71,9 @@ export function anchorHeadingsPlugin(options = {}) {
         anchor.querySelector('.wa-visually-hidden').textContent = options.anchorLabel;
 
         // Update the heading
-        heading.setAttribute('id', id);
+        if (!existingId) {
+          heading.setAttribute('id', id);
+        }
         heading.classList.add('anchor-heading');
         heading.appendChild(anchor);
       });

docs/_utils/code-examples.js

@@ -1,82 +1,190 @@
 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(options = {}) {
-  options = {
+export function codeExamplesPlugin(eleventyConfig, options = {}) {
+  const defaultOptions = {
     container: 'body',
-    ...options
+    defaultOpen: (code, { outputPathIndex }) => {
+      return (
+        outputPathIndex === 1 && // is first
+        code.textContent.length < 500
+      ); // is short
+    }
+  };
+  options = { ...defaultOptions, ...options };
+
+  const stats = {
+    inputPaths: {},
+    outputPaths: {}
   };
 
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('code-examples', content => {
-      const doc = parse(content, { blockTextElements: { code: true } });
-      const container = doc.querySelector(options.container);
+  eleventyConfig.addTransform('code-examples', function (content) {
+    const { inputPath, outputPath } = this.page;
 
-      if (!container) {
-        return content;
+    const doc = parse(content, { blockTextElements: { code: true } });
+    const container = doc.querySelector(options.container);
+
+    if (!container) {
+      return content;
+    }
+
+    // Look for external links
+    container.querySelectorAll('code.example').forEach(code => {
+      stats.inputPaths[inputPath] ??= 0;
+      stats.outputPaths[outputPath] ??= 0;
+      stats.inputPaths[inputPath]++;
+      stats.outputPaths[outputPath]++;
+
+      const pre = code.closest('pre');
+      const first = stats.inputPaths[inputPath] === 1;
+
+      const localOptions = {
+        ...options,
+        first,
+
+        // Modifier defaults
+        edit: true,
+        buttons: true,
+        new: true, // comment this line to default back to the old demos
+        attributes: {}
+      };
+
+      for (const prop of ['new', 'open', 'buttons', 'edit']) {
+        if (code.classList.contains(prop)) {
+          localOptions[prop] = true;
+        } else if (code.classList.contains(`no-${prop}`)) {
+          localOptions[prop] = false;
+        }
       }
 
-      // Look for external links
-      container.querySelectorAll('code.example').forEach(code => {
-        const pre = code.closest('pre');
-        const hasButtons = !code.classList.contains('no-buttons');
-        const isOpen = code.classList.contains('open') || !hasButtons;
-        const noEdit = code.classList.contains('no-edit');
-        const id = `code-example-${uuid().slice(-12)}`;
-        let preview = pre.textContent;
+      for (const attribute of ['viewport', 'include']) {
+        if (code.hasAttribute(attribute)) {
+          localOptions.attributes[attribute] = code.getAttribute(attribute);
+          code.removeAttribute(attribute);
+        }
+      }
 
-        // Run preview scripts as modules to prevent collisions
-        const root = parse(preview, { blockTextElements: { script: true } });
-        root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module'));
-        preview = root.toString();
+      if (Object.keys(localOptions.attributes).length > 0) {
+        // attributes only work on the new syntax
+        localOptions.new = true;
+      }
 
-        const codeExample = parse(`
-          <div class="code-example ${isOpen ? 'open' : ''}">
-            <div class="code-example-preview">
-              ${preview}
-            </div>
-            <div class="code-example-source" id="${id}">
-              ${pre.outerHTML}
-            </div>
-            ${
-              hasButtons
-                ? `
-                <div class="code-example-buttons">
-                  <button
-                    class="code-example-toggle"
-                    type="button"
-                    aria-expanded="${isOpen ? 'true' : 'false'}"
-                    aria-controls="${id}"
-                  >
-                    Code
-                    <wa-icon name="chevron-down"></wa-icon>
-                  </button>
+      if (localOptions.open === undefined) {
+        if (localOptions.defaultOpen === true) {
+          localOptions.open = localOptions.defaultOpen;
+        } else if (typeof localOptions.defaultOpen === 'function') {
+          localOptions.open = localOptions.defaultOpen(code, {
+            pre,
+            inputPathIndex: stats.inputPaths[inputPath],
+            outputPathIndex: stats.outputPaths[outputPath]
+          });
+        }
+      }
 
-                  ${
-                    noEdit
-                      ? ''
-                      : `
-                        <button class="code-example-pen" type="button">
-                          <wa-icon name="pen-to-square"></wa-icon>
-                          Edit
-                        </button>
-                      `
-                  }
+      const template = localOptions.new ? 'new' : 'old';
+      const codeExample = parse(templates[template](pre, code, localOptions));
 
-                `
-                : ''
-            }
-            </div>
-          </div>
-        `);
-
-        pre.replaceWith(codeExample);
-      });
-
-      return doc.toString();
+      pre.replaceWith(codeExample);
     });
-  };
+
+    return doc.toString();
+  });
 }

docs/_utils/manifest.js

@@ -1,71 +0,0 @@
-import { fileURLToPath } from 'url';
-import { dirname, resolve } from 'path';
-import { readFileSync } from 'fs';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-const manifest = JSON.parse(readFileSync(resolve(__dirname, '../../dist/custom-elements.json'), 'utf-8'));
-/**
- * @returns Fetches components from custom-elements.json and returns them in more sane format.
- */
-export function getComponents() {
-  const components = [];
-
-  manifest.modules?.forEach(module => {
-    module.declarations?.forEach(declaration => {
-      if (declaration.customElement) {
-        // Generate the dist path based on the src path and attach it to the component
-        declaration.path = module.path.replace(/^src\//, 'dist/').replace(/\.ts$/, '.js');
-
-        // Remove private members and those that lack a description
-        const members = declaration.members?.filter(member => member.description && member.privacy !== 'private');
-        const methods = members?.filter(prop => prop.kind === 'method' && prop.privacy !== 'private');
-        const properties = members?.filter(prop => {
-          // Look for a corresponding attribute
-          const attribute = declaration.attributes?.find(attr => attr.fieldName === prop.name);
-          if (attribute) {
-            prop.attribute = attribute.name || attribute.fieldName;
-          }
-
-          return prop.kind === 'field' && prop.privacy !== 'private';
-        });
-        components.push({
-          ...declaration,
-          methods,
-          properties
-        });
-      }
-    });
-  });
-
-  // Build dependency graphs
-  components.forEach(component => {
-    const dependencies = [];
-
-    // Recursively fetch sub-dependencies
-    function getDependencies(tag) {
-      const cmp = components.find(c => c.tagName === tag);
-      if (!cmp || !Array.isArray(component.dependencies)) {
-        return;
-      }
-
-      cmp.dependencies?.forEach(dependentTag => {
-        if (!dependencies.includes(dependentTag)) {
-          dependencies.push(dependentTag);
-        }
-        getDependencies(dependentTag);
-      });
-    }
-
-    getDependencies(component.tagName);
-
-    component.dependencies = dependencies.sort();
-  });
-
-  // Sort by name
-  return components.sort((a, b) => {
-    if (a.name < b.name) return -1;
-    if (a.name > b.name) return 1;
-    return 0;
-  });
-}

docs/_utils/markdown.js

@@ -59,5 +59,5 @@ markdown.use(markdownItContainer, 'details', {
 });
 
 markdown.use(markdownItAttrs, {
-  allowedAttributes: ['id', 'class', 'data']
+  allowedAttributes: []
 });

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

@@ -0,0 +1,23 @@
+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/assets/examples/page-demo/demo.css

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

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

@@ -0,0 +1,50 @@
+await customElements.whenDefined('wa-checkbox');
+let container = document.getElementById('page_slots_demo');
+let fieldset = container.querySelector('fieldset');
+let iframe = container.querySelector('iframe');
+let stylesheets = Array.from(document.querySelectorAll("link[rel=stylesheet][href^='/dist/']"))
+  .map(i => i.outerHTML)
+  .join('\n');
+let includes = `${stylesheets}
+  <script src="/dist/webawesome.loader.js" type="module"></script>
+  <link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;
+
+function render() {
+  let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:is([data-wa-checked])'));
+  let slotsHTML = slots
+    .map(slot => {
+      let name = slot.getAttribute('value');
+      let description = slot.getAttribute('data-description');
+
+      let tag = 'div';
+      if (name.endsWith('header')) {
+        tag = 'header';
+      }
+      if (name.endsWith('footer')) {
+        tag = 'footer';
+      }
+
+      return `<${tag} class="slot-content" slot="${name}">
+		<strong>${name || 'main <em>(default)</em>'}</strong>
+		<p>${description}</p>
+	</${tag}>`;
+    })
+    .join('\n');
+  let page = iframe.contentDocument?.querySelector('wa-page');
+
+  if (page) {
+    page.innerHTML = slotsHTML;
+  } else {
+    iframe.srcdoc = `${includes}<wa-page>${slotsHTML}</wa-page>`;
+  }
+}
+fieldset?.addEventListener('input', render);
+render();
+
+//
+// TODO - fix Turbo caching. When this is removed, visiting the <wa-page> docs via Turbo will cause the <iframe srcdoc>
+// to not render. Even with this, there are console errors when leaving the page.
+//
+// NOTE - the iframe already has `data-turbo="false"` and `data-turbo-temporary` on it.
+//
+document.body.setAttribute('data-turbo', 'false');

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

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

docs/assets/images/webawesome-logo.svg

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

docs/assets/scripts/cheatsheet.js

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

docs/assets/scripts/code-examples.js

@@ -18,10 +18,12 @@ 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}themes/default.css">\n\n` +
-      `<link rel="stylesheet" href="${cdnUrl}themes/applied.css">\n\n` +
+      `<link rel="stylesheet" href="${cdnUrl}themes/default.css">\n` +
+      `<link rel="stylesheet" href="${cdnUrl}themes/applied.css">\n` +
+      `<link rel="stylesheet" href="${cdnUrl}themes/layout.css">\n` +
+      `<link rel="stylesheet" href="${cdnUrl}themes/utilities.css">\n\n` +
       `${code.textContent}`;
-    const css = 'body {\n  font: 16px sans-serif;\n  padding: 2rem;\n}';
+    const css = 'html > body {\n  font: 16px sans-serif;\n  padding: 2rem;\n}';
     const js = '';
 
     const form = document.createElement('form');

docs/assets/styles/docs.css

@@ -25,12 +25,19 @@ wa-page::part(header) {
   border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
 }
 
+wa-page::part(drawer__body) {
+  padding-top: 0px;
+}
+
+wa-page::part(drawer__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='/'] {
@@ -40,6 +47,7 @@ wa-page > header {
 
   wa-button[data-toggle-nav] {
     --label-color: currentColor;
+    font-size: 1rem;
     margin-inline-start: -0.875rem;
     margin-inline-end: 0;
 
@@ -87,10 +95,10 @@ wa-page > header {
 #outline {
   h2 {
     font-size: var(--wa-font-size-m);
-    margin-block-end: var(--wa-space-m);
+    margin: 0;
   }
-  h2:not(:first-of-type) {
-    margin-block-start: var(--wa-space-xl);
+  h2:not(:first-child) {
+    margin-block-start: var(--wa-space-xs);
   }
   ul {
     border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
@@ -104,7 +112,9 @@ wa-page > header {
   }
   li {
     list-style: none;
-    margin-block-end: var(--wa-space-m);
+  }
+  li + li {
+    margin-block-start: var(--wa-space-m);
   }
   li a {
     color: var(--wa-color-text-normal);
@@ -113,6 +123,59 @@ wa-page > header {
   li a:hover {
     text-decoration: underline;
   }
+
+  li wa-badge::part(base) {
+    font-size: var(--wa-font-size-2xs);
+    font-weight: var(--wa-font-weight-bold);
+  }
+
+  li wa-icon {
+    color: var(--wa-color-text-quiet);
+    vertical-align: middle;
+
+    &[name='flask'] {
+      margin-inline: 0.125em;
+    }
+  }
+}
+
+#outline-standard h2 {
+  margin-block-end: var(--wa-space-m);
+}
+
+/* Pro badges */
+wa-badge.pro::part(base) {
+  background-color: var(--wa-brand-orange);
+  border-color: var(--wa-brand-orange);
+}
+
+#sidebar {
+  h2 {
+    color: var(--wa-color-text-quiet);
+
+    a {
+      display: flex;
+      align-items: center;
+      gap: 0.4em;
+      color: var(--wa-color-text-normal);
+      text-decoration: none;
+
+      wa-icon {
+        margin-block-end: -0.15em;
+        font-size: var(--wa-font-size-s);
+        font-weight: var(--wa-font-weight-action);
+        color: var(--wa-color-gray-70);
+      }
+
+      &:hover {
+        color: var(--wa-color-brand-on-normal);
+
+        wa-icon {
+          color: var(--wa-color-brand-on-quiet);
+        }
+      }
+    }
+  }
 }
 
 #sidebar-close-button {
@@ -143,6 +206,14 @@ wa-page > main {
   margin-inline: auto;
 }
 
+h1.title wa-badge {
+  vertical-align: middle;
+
+  &::part(base) {
+    font-size: 1.5rem;
+  }
+}
+
 .component-info {
   margin-block-end: var(--wa-flow-spacing);
 }
@@ -384,6 +455,7 @@ wa-page > main:has(> .index-grid) {
 
 .table-scroll {
   overflow-x: auto;
+  margin-block-end: var(--wa-flow-spacing);
 }
 
 /** mobile */

docs/docs/components/callout.md

@@ -64,3 +64,9 @@ 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

docs/docs/components/cheatsheet.njk

@@ -0,0 +1,82 @@
+---
+title: Component Cheatsheet
+layout: docs
+---
+
+<style>
+table code {
+	white-space: nowrap;
+}
+</style>
+
+<p>
+	This page lists every bit of syntax used by every Web Awesome component and which components share it.
+	For these times when your memory is failing, or to simply explore the possibilities!
+</p>
+
+<fieldset id="name_search_group">
+	<legend>Filter by name</legend>
+	<wa-input type=search clearable id="name_search"></wa-input>
+	<wa-checkbox id="name_search_i" checked>Case sensitive</wa-checkbox>
+	<wa-checkbox id="name_search_regexp">Regular expression</wa-checkbox>
+</fieldset>
+
+<script>
+{
+	let url = new URL(location);
+	if (url.searchParams.get("name")) {
+		name_search.value = url.searchParams.get("name");
+	}
+
+	if (url.searchParams.get("match")) {
+		let matcherId = url.searchParams.get("match");
+		let caseSensitive = !matcherId.startsWith("i");
+		let isRegexp = matcherId.endsWith("regexp");
+
+		customElements.whenDefined("wa-checkbox").then(async () => {
+			await Promise.all([
+				name_search_i.updateComplete,
+				name_search_regexp.updateComplete,
+			]);
+			name_search_i.checked = caseSensitive;
+			name_search_regexp.checked = isRegexp;
+		});
+	}
+}
+</script>
+<script type="module" src="/assets/scripts/cheatsheet.js"></script>
+
+{% for type, all in componentsBy -%}
+{% set typeTitle = "CSS custom properties" if type == "cssProperty" else ("CSS parts" if type == "cssPart" else (type | title) + "s") %}
+<h2 id="{{ typeTitle | slugify }}">
+	All <span class="count">{{ (all | keys).length }}</span>
+	{{ typeTitle }}
+</h2>
+
+<table>
+	<thead>
+		<tr>
+			<th>Name</th>
+			<th>Components</th>
+		</tr>
+	</thead>
+	{% for name, thingComponents in all -%}
+	<tr>
+		<th><code>{{ name }}{{ "()" if type == "method" }}</code></th>
+		<td>
+			{% if thingComponents.length > 1 %}
+				<details open>
+					<summary><strong>{{ thingComponents.length }}</strong> components</summary>
+			{% endif %}
+			{% for component in thingComponents  %}
+				<a href="../{{ component.slug }}"><code>&lt;{{ component.tagName }}&gt;</code></a>
+			{%- endfor -%}
+			{% if thingComponents.length > 1 %}
+				</details>
+			{% endif %}
+		</td>
+	</tr>
+	{%- endfor %}
+</table>
+
+{%- endfor %}

docs/docs/components/code-demo.md

@@ -0,0 +1,211 @@
+---
+title: Code Demo
+description: Code demos can be used to render code examples as inline live demos.
+layout: component
+---
+
+```html {.example}
+<wa-code-demo>
+  <pre><code class="language-html">
+    &lt;button&gt;Click me!&lt;/button&gt;
+    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
+  </code></pre>
+</wa-code-demo>
+```
+
+This component is used right here in the docs to render code examples.
+
+:::warning
+Do not render untrusted content in a `<wa-code-demo>` element. This component renders the content as HTML, which introduces XSS vulnerabilities if used with untrusted content.
+:::
+
+## Examples
+
+### Open by default
+
+```html {.example}
+<wa-code-demo open>
+  <pre><code class="language-html">
+    &lt;button&gt;Click me!&lt;/button&gt;
+    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
+  </code></pre>
+</wa-code-demo>
+```
+
+### Custom previews
+
+In some cases you may want to preprocess the code displayed, for example to sanitize HTML, remove irrelevant elements or attributes, fix whitespace, or do server-side rendering (SSR).
+For these cases, you can slot in a custom preview:
+
+```html {.example}
+<wa-code-demo>
+  <wa-button slot="preview">Click me!</wa-button>
+  <pre><code class="language-html">
+    &lt;button&gt;Click me!&lt;/button&gt;
+  </code></pre>
+</wa-code-demo>
+```
+
+Note that this means the preview will be in the light DOM, and can conflict with other things on the page.
+To only render the custom preview within the component’s shadow DOM, or to display raw text, you can wrap it in a `<template>` element:
+
+```html {.example}
+<wa-code-demo>
+  <template slot="preview">
+    <wa-button>Click me!</wa-button>
+  </template>
+  <pre><code class="language-html">
+    &lt;button&gt;Click me!&lt;/button&gt;
+  </code></pre>
+</wa-code-demo>
+```
+
+### Including resources (CSS, scripts, etc.)
+
+Demos are rendered in the shadow DOM of the component, so any resources (stylesheets, scripts, etc.) must be included anew.
+The same applies to isolated demos (see below), opening demos in a new tab, or editing them on CodePen.
+
+While you _could_ manually include all of these on every single demo, it would get tedious to write,
+and it would add noise for the reader.
+
+Instead, `<wa-code-demo>` provides several better ways to include resources.
+The core idea is that rather than specifying these resources over and over on each demo,
+you would **point to elements** which would then be cloned into the demo, at the beginning.
+
+There are two ways to point to elements:
+- Add a `wa-code-demo-include` class to them
+- Specify a CSS selector for which resources to look for in the demo’s `include` attribute.
+
+There are certain types of elements that are handled specially:
+- `<template>`: contents are cloned instead of the element itself.
+This is useful for including resources in your demo that you don't want rendered outside the demo.
+
+The following example shows both methods.
+It includes all stylesheets on this page whose URLs start with `/dist/themes/`,
+plus any other elements with the class `.demo-import`, plus a CSS file with the class `wa-code-demo-include`:
+
+```html {.example}
+<template class="wa-code-demo-include-isolated">
+  <script type="module" src="/dist/webawesome.loader.js"></script>
+  <style>wa-callout { font-size: var(--wa-font-size-2xl) }</style>
+  <script>console.log('Hello!')</script>
+</template>
+<wa-code-demo include="link[rel=stylesheet]">
+  <pre><code class="language-html">
+    &lt;wa-callout&gt;Helloooo!&lt;/wa-callout&gt;
+  </code></pre>
+</wa-code-demo>
+```
+
+
+### Isolated viewports
+
+Often you may want to render your demo in a separate viewport, e.g. when it’s about a whole page.
+Or, you may want to sandbox it.
+For these cases, you can use the `viewport` attribute, which renders the demo in an iframe:
+
+```html {.example}
+<wa-code-demo viewport>
+  <pre><code class="language-html">
+    &lt;button&gt;Click me!&lt;/button&gt;
+  </code></pre>
+</wa-code-demo>
+```
+
+### Viewport Emulation
+
+When you use the `viewport` attribute, `<wa-code-demo>` uses [`<wa-viewport-demo>`](../viewport-demo/) internally, and passes the value of `viewport` to it.
+This allows you to also also provide a width value to emulate and it will be scaled accordingly:
+
+```html {.example}
+<wa-code-demo viewport="300">
+  <pre><code class="language-html">
+    &lt;button&gt;Click me!&lt;/button&gt;
+  </code></pre>
+</wa-code-demo>
+```
+
+Or both a width and a height value:
+
+```html {.example}
+<wa-code-demo viewport="1600 x 1000">
+  <pre><code class="language-html">
+    &lt;button&gt;Click me!&lt;/button&gt;
+    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
+    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
+    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
+  </code></pre>
+</wa-code-demo>
+```
+
+If you only provide a width value, the viewport will be rendered to an initial 16:9 aspect ratio,
+which can be changed via resizing.
+You can customize this via the `--viewport-initial-aspect-ratio` property.
+
+### Isolated demos with resources
+
+Including resources in isolated demos works the same way.
+Any relative URLs are still resolved relative to the host document.
+In addition to the `wa-code-demo-include` class, which specifies resources to be included in *every* demo,
+you can also use the `wa-code-demo-include-isolated` class which specifies resources to be included in every *isolated* demo,
+i.e. the previews of demos using the `viewport` attribute, but also opening demos in a new tab or editing them on CodePen.
+
+```html {.example}
+<template class="wa-code-demo-include-isolated">
+  <script type="module" src="{% cdnUrl 'webawesome.loader.js' %}"></script>
+  <style>
+    body {
+      padding: var(--wa-space-l);
+    }
+    wa-callout { font-size: var(--wa-font-size-2xl) }
+  </style>
+  <script>console.log('Hello from iframe!')</script>
+</template>
+<wa-code-demo viewport include="link[rel=stylesheet]">
+  <pre><code class="language-html">
+    &lt;wa-callout&gt;Helloooo!&lt;/wa-callout&gt;
+  </code></pre>
+</wa-code-demo>
+```
+
+## Styling
+
+Just setting `border-radius` or `border` should work as expected:
+
+```html{.example}
+<wa-code-demo style="border: 2px dotted var(--wa-color-blue-50); border-radius: var(--wa-border-radius-s)">
+  <pre><code class="language-html">
+    &lt;button&gt;Click me!&lt;/button&gt;
+    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
+  </code></pre>
+</wa-code-demo>
+```
+
+The divider width is controlled separately via `--divider-width`:
+
+```html{.example}
+<wa-code-demo open style="border-width: var(--wa-border-width-l); --divider-width: var(--wa-border-width-m);">
+  <pre><code class="language-html">
+    &lt;button&gt;Click me!&lt;/button&gt;
+    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
+  </code></pre>
+</wa-code-demo>
+```
+
+## Roadmap
+
+This component is a work in progress.
+Some of the things that are not yet implemented are listed below.
+It goes without saying that this list is a rough plan and subject to change.
+
+### High priority
+
+- Make the component dynamic so that when the code changes, the demo is updated
+
+### Low priority
+
+- Horizontal layout
+- Tabbed layout
+- Provide a way to display CSS and JS separately
+- Provide a way to customize the playground used (currently it is hardcoded to CodePen)
+- Provide a way to customize the buttons shown

docs/docs/components/index.md

@@ -315,13 +315,21 @@ layout: page-outline
     </wa-card>
   </a>
   <a href="/docs/components/drawer">
-    <wa-card id="drawer-card">
+    <wa-card with-header id="drawer-card">
       <div slot="header">
         {% include "svgs/drawer.njk" %}
       </div>
       <span class="page-name">Drawer</span>
     </wa-card>
   </a>
+  <a href="/docs/components/page">
+    <wa-card with-header>
+      <div slot="header">
+        {% include "svgs/page.njk" %}
+      </div>
+      <span class="page-name">Page</span>
+    </wa-card>
+  </a>
   <a href="/docs/components/split-panel">
     <wa-card with-header>
       <div slot="header">

docs/docs/components/page-samples/documentation.md

@@ -0,0 +1,238 @@
+---
+title: Sample Documentation Page
+description: A sample page for a documentation website using Web Awesome's page component.
+layout: blank
+---
+
+<style>
+  wa-page {
+    --menu-width: 15rem;
+    --aside-width: 15rem;
+  }
+  wa-page[view='desktop'] [data-toggle-nav] {
+    display: none;
+  }
+  wa-page[view='mobile'] {
+    --menu-width: auto;
+    --aside-width: auto;
+  }
+  wa-page[view='mobile'] [slot='aside'] {
+    display: none;
+  }
+  wa-page[view='mobile'] #brand-name {
+    display: none;
+  }
+  wa-page[view='mobile'] #search {
+    display: none;
+  }
+  [slot='banner'] {
+    --wa-color-text-link: var(--wa-color-neutral-on-loud);
+    background-color: var(--wa-color-neutral-fill-loud);
+  }
+  [slot='header'] {
+    --wa-link-decoration-default: none;
+    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+  }
+  [slot*='header'] a {
+    font-weight: var(--wa-font-weight-action);
+  }
+  [slot='subheader'] {
+    background-color: var(--wa-color-surface-lowered);
+    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+  }
+  [slot='navigation-header'] {
+    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+  }
+  wa-page[view='desktop'] [slot*='navigation'] {
+    border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+  }
+  [slot*='navigation'] a {
+    --wa-color-text-link: var(--wa-color-text-normal);
+  }
+  [slot='navigation-footer'] {
+    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+  }
+  [slot='main-header'],
+  main,
+  [slot='main-footer'] {
+    max-inline-size: 60rem;
+    margin-inline: auto;
+  }
+  [slot='main-footer'] {
+    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+  }
+  [slot='footer'] {
+    --wa-color-text-link: var(--wa-color-text-quiet);
+    background-color: var(--wa-color-surface-lowered);
+    font-size: var(--wa-font-size-s);
+  }
+</style>
+
+<wa-page mobile-breakpoint="920">
+  <div slot="banner" class="wa-body-s">
+    <a href="#" class="wa-cluster wa-align-items-baseline wa-gap-xs" style="flex-wrap: nowrap;">
+      <wa-icon name="gift"></wa-icon>
+      <span>Give a Hoot for the Holidays: Donate now and double your impact.</span>
+    </a>
+  </div>
+  <header slot="header" class="wa-split">
+    <div class="wa-cluster">
+      <wa-icon name="feather-pointed" style="color: var(--wa-color-brand-fill-loud); font-size: 1.5em;"></wa-icon>
+      <span id="brand-name" class="wa-heading-s">Audubon Worldwide</span>
+      <a href="#">Our Work</a>
+      <a href="#">About Us</a>
+      <a href="#">Discover</a>
+      <a href="#">Get Involved</a>
+    </div>
+    <div class="wa-cluster wa-gap-xs">
+      <wa-button size="small" variant="brand" appearance="outlined">Find Your Local Audubon</wa-button>
+      <wa-button size="small" variant="brand">Donate</wa-button>
+    </div>
+  </header>
+  <nav slot="subheader">
+    <div class="wa-cluster" style="flex-wrap: nowrap;">
+      <wa-icon-button data-toggle-nav name="bars" label="Menu"></wa-icon-button>
+      <wa-breadcrumb style="font-size: var(--wa-font-size-s);">
+        <wa-breadcrumb-item>Field Guides</wa-breadcrumb-item>
+        <wa-breadcrumb-item>Owls</wa-breadcrumb-item>
+        <wa-breadcrumb-item>Great Horned Owl</wa-breadcrumb-item>
+      </wa-breadcrumb>
+    </div>
+    <wa-input id="search" placeholder="Search" size="small" style="max-inline-size: 12rem;">
+      <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
+    </wa-input>
+  </nav>
+  <nav slot="navigation-header">
+    <div class="wa-flank">
+      <wa-avatar image="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" label=""></wa-avatar>
+      <div class="wa-stack wa-gap-3xs">
+        <span class="wa-heading-s">Great Horned Owl</span>
+        <span class="wa-caption-s" lang="la"><em>Bubo virginianus</em></span>
+      </div>
+    </div>
+  </nav>
+  <nav slot="navigation">
+    <a href="#identification">Identification</a>
+    <a href="#range">Range and Habitat</a>
+    <a href="#behavior">Behavior</a>
+    <a href="#conservation">Conservation</a>
+  </nav>
+  <nav slot="navigation-footer">
+    <a href="#" class="wa-flank" style="--flank-size: 1.25em;">
+      <wa-icon name="camera"></wa-icon>
+      <span>Photo Gallery</span>
+    </a>
+    <a href="#" class="wa-flank" style="--flank-size: 1.25em;">
+      <wa-icon name="map-location-dot"></wa-icon>
+      <span>Interactive Range Map</span>
+    </a>
+  </nav>
+  <header slot="main-header">
+    <div class="wa-flank:end wa-border-radius-m wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
+      <div class="wa-stack" style="margin: var(--wa-space-2xl);">
+        <h1>Great Horned Owl</h1>
+        <wa-divider></wa-divider>
+        <div class="wa-cluster wa-gap-xs">
+          <wa-tag size="small">Owls</wa-tag>
+          <wa-tag size="small">Birds of Prey</wa-tag>
+          <wa-tag size="small">Pleistocene Birds</wa-tag>
+        </div>
+        <div class="wa-flank">
+          <wa-icon name="ruler"></wa-icon>
+          <span class="wa-caption-m">L 21.5" | WS 48.5"</span>
+        </div>
+        <div class="wa-flank">
+          <wa-icon name="earth-americas"></wa-icon>
+          <span class="wa-caption-m">North America (Widespread), Central America (Limited), South America (Limited)</span>
+        </div>
+        <div class="wa-flank">
+          <wa-icon name="shield-heart"></wa-icon>
+          <span class="wa-caption-m">Least Concern</span>
+        </div>
+      </div>
+      <div class="wa-frame" style="border-radius: var(--wa-border-radius-m); max-inline-size: 40ch;">
+        <img src="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" />
+      </div>
+    </div>
+  </header>
+  <main class="wa-body-l">
+    <h2 id="identification">Identification</h2>
+    <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Eget habitant scelerisque lectus ultrices nascetur aliquet sapien primis. Cursus sapien fusce semper nulla elit sociosqu lectus per sem. Sem ad porttitor dictum nisl pharetra tortor convallis. Sit molestie hendrerit porta dictum tortor posuere euismod magna. Mauris suspendisse pharetra finibus; eleifend etiam ridiculus.</p>
+    <h2 id="range">Range and Habitat</h2>
+    <p>Diam sed ipsum pretium porttitor class cubilia elementum. Blandit felis ligula habitant ultricies vulputate rutrum lacus commodo pulvinar. Nostra semper placerat lectus in dis eu. Sagittis ipsum placerat rhoncus lacus id eget. Erat pharetra aptent enim, augue accumsan ultricies inceptos habitasse. Senectus id maximus parturient tellus; fermentum posuere vulputate luctus. Ac tempus dapibus vehicula ligula ullamcorper sit duis.</p>
+    <h2 id="behavior">Behavior</h2>
+    <p>Erat vitae luctus arcu taciti malesuada pretium arcu justo primis. Cubilia vitae maecenas congue velit id netus arcu. Dictum vel pellentesque taciti fermentum risus consectetur amet. Faucibus commodo habitasse sem maximus praesent purus, dignissim tristique porta. Platea magna justo ipsum ut metus ac facilisi. Imperdiet laoreet pharetra maximus lacus tortor suscipit. Nam quisque iaculis orci porttitor pellentesque rhoncus. Molestie sagittis tincidunt quisque nisi non urna conubia.</p>
+    <h2 id="conservation">Conservation</h2>
+    <p>Nullam magna quam quisque eu varius integer. Inceptos donec facilisi risus himenaeos semper mollis habitasse. Vehicula lacus vivamus euismod pharetra mollis dictum. Ante ex tortor elementum eleifend habitasse orci aliquam. Fames erat senectus fames etiam dapibus cursus.</p>
+  </main>
+  <footer slot="main-footer">
+    <section>
+      <h2 class="wa-heading-m">Sources</h2>
+      <ul class="wa-body-s">
+        <li><cite><a href="https://www.audubon.org/field-guide/bird/great-horned-owl" target="_blank" rel="noopener">Great Horned Owl</a></cite>, National Audubon Society. Retrieved 5 December 2024.</li>
+        <li><cite><a href="https://www.allaboutbirds.org/guide/Great_Horned_Owl/" target="_blank" rel="noopener">Great Horned Owl</a></cite>, All About Birds by CornellLab. Retrieved 5 December 2024.</li>
+        <li>Armistead, G. L. (2015). <cite>Field guide to birds of Pennsylvania</cite>. Scott & Nix, Inc.</li>
+      </ul>
+    </section>
+  </footer>
+  <aside slot="aside">
+    <h2 class="wa-heading-m">Discover More Birds</h2>
+    <wa-card with-image>
+      <div slot="image" class="wa-frame">
+        <img src="https://images.unsplash.com/photo-1635254859323-65b78408dcca?q=20" alt="" />
+      </div>
+      <div class="wa-stack wa-gap-3xs">
+        <span class="wa-heading-s">Long-eared Owl</span>
+        <span class="wa-caption-s" lang="la"><em>Asio otus</em></span>
+      </div>
+    </wa-card>
+    <wa-card with-image>
+      <div slot="image" class="wa-frame">
+        <img src="https://images.unsplash.com/photo-1661350356618-f5915c7b6a3c?q=20" alt="" />
+      </div>
+      <div class="wa-stack wa-gap-3xs">
+        <span class="wa-heading-s">Northen Hawk Owl</span>
+        <span class="wa-caption-s" lang="la"><em>Surnia ulula</em></span>
+      </div>
+    </wa-card>
+    <wa-card with-image>
+      <div slot="image" class="wa-frame">
+        <img src="https://images.unsplash.com/photo-1660307777355-f08bced145d3?q=20" alt="" />
+      </div>
+      <div class="wa-stack wa-gap-3xs">
+        <span class="wa-heading-s">Golden Eagle</span>
+        <span class="wa-caption-s" lang="la"><em>Aquila chrysaetos</em></span>
+      </div>
+    </wa-card>
+  </aside>
+  <footer slot="footer" class="wa-grid wa-gap-xl">
+    <div class="wa-cluster" style="flex-wrap: nowrap;">
+      <wa-icon name="feather-pointed" style="font-size: 1.5em;"></wa-icon>
+      <span class="wa-heading-s">Audubon Worldwide</span>
+    </div>
+    <div class="wa-stack">
+      <h3 class="wa-heading-xs">Our Work</h3>
+      <a href="#">Habitat Restoration</a>
+      <a href="#">Migration Science</a>
+      <a href="#">Advocacy</a>
+    </div>
+    <div class="wa-stack">
+      <h3 class="wa-heading-xs">About Us</h3>
+      <a href="#">Our History</a>
+      <a href="#">Leadership</a>
+      <a href="#">Fiscal Reports</a>
+    </div>
+    <div class="wa-stack">
+      <h3 class="wa-heading-xs">Discover</h3>
+      <a href="#">Field Guides</a>
+      <a href="#">Photo Search</a>
+      <a href="#">Gear and Resources</a>
+    </div>
+    <div class="wa-stack">
+      <h3 class="wa-heading-xs">Get Involved</h3>
+      <a href="#">Adopt a Bird</a>
+      <a href="#">Your Local Audubon</a>
+      <a href="#">Youth Audubon Camps</a>
+    </div>
+  </footer>
+</wa-page>

docs/docs/components/page-samples/media-app.md

@@ -0,0 +1,401 @@
+---
+title: Sample Media App Page
+description: A sample page for a media app using Web Awesome's page component.
+layout: blank
+---
+
+<wa-page class="wa-theme-default-dark">
+  <header slot="header">
+    <div class="wa-cluster">
+      <wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
+      <wa-icon name="record-vinyl" family="duotone"></wa-icon>
+      <span class="wa-heading-m">radiogaga</span>
+    </div>
+    <wa-input placeholder="Search" style="max-inline-size: 100%;">
+      <wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
+    </wa-input>
+    <div class="wa-cluster">
+      <wa-button appearance="outlined">Log In</wa-button>
+      <wa-button>Sign Up</wa-button>
+    </div>
+  </header>
+  <div slot="navigation-header" class="wa-split">
+    <h2 class="wa-heading-s">For You</h2>
+    <wa-icon-button id="settings" name="gear" label="Settings"></wa-icon-button>
+  </div>
+  <nav slot="navigation">
+    <h3 class="wa-heading-xs">Discover</h3>
+    <ul class="wa-stack wa-gap-0">
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="house"></wa-icon>
+          <span>Home</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="sparkles"></wa-icon>
+          <span>New</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="tower-broadcast"></wa-icon>
+          <span>Stations</span>
+        </a>
+      </li>
+    </ul>
+    <h3 class="wa-heading-xs">Library</h3>
+    <ul class="wa-stack wa-gap-0">
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="heart"></wa-icon>
+          <span>Favorites</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="list-music"></wa-icon>
+          <span>Playlists</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="microphone-stand"></wa-icon>
+          <span>Artists</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="grid-2"></wa-icon>
+          <span>Albums</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="podcast"></wa-icon>
+          <span>Podcasts</span>
+        </a>
+      </li>
+    </ul>
+    <h3 class="wa-heading-xs">Recently Played</h3>
+    <ul id="recent" class="wa-stack wa-gap-0">
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="cassette-tape" style="background: var(--wa-color-red-90); color: var(--wa-color-red-60);"></wa-icon>
+          <span>Lo-Fi Station</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="face-awesome" style="background: var(--wa-color-blue-30); color: var(--wa-color-yellow-90);"></wa-icon>
+          <span>Podcast Awesome</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="seedling" style="background: var(--wa-color-green-70); color: var(--wa-color-green-90);"></wa-icon>
+          <div class="wa-stack wa-gap-0">
+            <span>Seasons</span>
+            <span class="wa-caption-s">Blister Soul</span>
+          </div>
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <div slot="main-header">
+    <wa-icon-button id="back" name="chevron-left" label="Back"></wa-icon-button>
+    <wa-tooltip for="back" placement="bottom" distance="2">Back</wa-tooltip>
+    <div class="wa-cluster">
+      <wa-icon-button id="favorite" name="heart" variant="regular" label="Favorite"></wa-icon-button>
+      <wa-tooltip for="favorite" placement="bottom" distance="2">Favorite</wa-tooltip>
+      <wa-icon-button id="options" name="ellipsis" label="Options"></wa-icon-button>
+      <wa-tooltip for="options" placement="bottom" distance="2">Options</wa-tooltip>
+    </div>
+  </div>
+  <main>
+    <div class="wa-stack wa-gap-3xl">
+      <div class="wa-flank wa-gap-3xl" style="--flank-size: 35%; --content-percentage: 55%;">
+        <div class="wa-frame wa-border-radius-l" style="max-inline-size: 40ch;">
+          <img src="https://images.unsplash.com/photo-1732430579016-8d5e5ebd3c99?q=20" alt="Home for the Holidays album artwork" />
+        </div>
+        <div class="wa-split:column wa-align-items-start">
+          <div class="wa-stack" style="margin-block: auto;">
+            <h1 class="wa-heading-3xl">Home for the Holidays</h1>
+            <a href="#" class="wa-heading-m">The Shire Choir</a>
+            <div class="wa-cluster wa-caption-m wa-gap-2xs">
+              <span>Holiday</span>
+              <span>&bull;</span>
+              <span>2024</span>
+              <span>&bull;</span>
+              <span>12 songs, 41 minutes 9 seconds</span>
+            </div>
+          </div>
+          <div id="play-controls" class="wa-split wa-gap-xl">
+            <div class="wa-cluster wa-gap-xl">
+              <wa-icon-button name="play" label="Play"></wa-icon-button>
+              <wa-icon-button name="shuffle" label="Shuffle"></wa-icon-button>
+            </div>
+            <wa-icon-button name="plus" label="Add to Library"></wa-icon-button>
+          </div>
+        </div>
+      </div>
+      <ol class="wa-stack wa-gap-0">
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="1"></wa-icon>
+            <span>Fa-La-La-Fellowship</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">3:27</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="2"></wa-icon>
+            <span>Sleigh Ride</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">2:36</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="3"></wa-icon>
+            <span>All I Want For Christmas Is Stew</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">2:51</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="4"></wa-icon>
+            <span>Rockin' Around the Christmas Ent</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">3:05</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="5"></wa-icon>
+            <span>Merry, Did You Know?</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">1:56</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="6"></wa-icon>
+            <span>Run Run Shadowfax</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">3:32</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="7"></wa-icon>
+            <span>You're a Mean One, Mr. Grima</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">2:46</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="8"></wa-icon>
+            <span>O Come, All Ye Faithful</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">3:27</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="9"></wa-icon>
+            <span>Do You Hear What I Hear</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">2:13</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <span class="wa-cluster wa-gap-3xs">
+              <wa-icon name="1"></wa-icon>
+              <wa-icon name="0"></wa-icon>
+            </span>
+            <span>Carol of the Horns</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">2:55</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <span class="wa-cluster wa-gap-3xs">
+              <wa-icon name="1"></wa-icon>
+              <wa-icon name="1"></wa-icon>
+            </span>
+            <span>Silent Night</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">3:10</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <span class="wa-cluster wa-gap-3xs">
+              <wa-icon name="1"></wa-icon>
+              <wa-icon name="2"></wa-icon>
+            </span>
+            <span>Wizard Wonderland</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">3:22</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+      </ol>
+    </div>
+  </main>
+  <div slot="main-footer" class="wa-grid wa-gap-xl">
+    <h2 class="wa-heading-2xl">More You Might Like</h2>
+    <div class="wa-stack wa-gap-xs">
+      <div class="wa-frame wa-border-radius-m">
+        <img src="https://images.unsplash.com/photo-1675219119611-40323b738563?q=20" alt="" />
+      </div>
+      <span class="wa-heading-s">Festival of Lights</span>
+      <span class="wa-caption-s">Station</span>
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <div class="wa-frame wa-border-radius-m">
+        <img src="https://images.unsplash.com/photo-1481930916222-5ec4696fc0f2?q=20" alt="" />
+      </div>
+      <span class="wa-heading-s">Holiday Cheer</span>
+      <span class="wa-caption-s">Essential Playlist</span>
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <div class="wa-frame wa-border-radius-m">
+        <img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="" />
+      </div>
+      <span class="wa-heading-s">Nursery Rhymes from the Shire</span>
+      <span class="wa-caption-s">The Shire Choir</span>
+    </div>
+  </div>
+</wa-page>
+
+<style>
+  wa-page {
+    --menu-width: 18rem;
+    --wa-tooltip-arrow-size: 0;
+    background-color: var(--wa-color-surface-lowered);
+  }
+  wa-page[view='desktop'] [data-toggle-nav] {
+    display: none;
+  }
+  wa-page[view='mobile'] {
+    --menu-width: auto;
+  }
+  wa-page,
+  [slot='header'],
+  wa-page[view='desktop'] [slot*='navigation'] {
+    background-color: var(--wa-color-surface-lowered);
+  }
+  wa-page[view='mobile'] [slot*='navigation'] {
+    padding: 0;
+  }
+  wa-page::part(base) {
+    background-color: var(--wa-color-surface-lowered);
+  }
+  [slot='header'] {
+    background: linear-gradient(to bottom, var(--wa-color-surface-raised), var(--wa-color-surface-lowered));
+  }
+  [slot='navigation-header'],
+  [slot='main-header'] {
+    padding-block-end: 0;
+  }
+  [slot='navigation'] a {
+    --wa-color-text-link: var(--wa-color-text-normal);
+    --wa-link-decoration-default: none;
+    --wa-link-decoration-hover: none;
+    --flank-size: 2rem;
+    font-weight: var(--wa-font-weight-action);
+    gap: 0.5rem;
+  }
+  [slot='navigation'] ul {
+    list-style: none;
+    margin: 0;
+  }
+  [slot='navigation'] ul a {
+    border-radius: var(--wa-border-radius-s);
+    padding: var(--wa-space-xs);
+  }
+  [slot='navigation'] ul a:hover,
+  main ol li:hover {
+    background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
+  }
+  [slot='navigation'] wa-icon {
+    align-items: center;
+    aspect-ratio: 1;
+    color: var(--wa-color-brand-fill-loud);
+    display: flex;
+    height: var(--flank-size);
+    justify-content: center;
+  }
+  [slot='navigation'] #recent wa-icon {
+    border-radius: var(--wa-border-radius-xs);
+  }
+  [slot='main-header'] {
+    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+    border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+    border-radius: var(--wa-border-radius-l) var(--wa-border-radius-l) 0 0
+  }
+  main,
+  [slot*='main'] {
+    margin-inline: var(--wa-space-m);
+  }
+  main ol li {
+    padding: var(--wa-space-m);
+  }
+  main ol li .wa-flank {
+    --flank-size: 2rem;
+  }
+  main ol li:not(:first-child) {
+    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+  }
+  main,
+  [slot='main-footer'] {
+    border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+  }
+  main,
+  [slot='main-header'] {
+    background-color: var(--wa-color-surface-raised);
+  }
+  #play-controls wa-icon-button::part(base) {
+    border: var(--wa-border-width-l) var(--wa-border-style) currentColor;
+    border-radius: var(--wa-border-radius-circle);
+    font-size: 1.5rem;
+  }
+  #play-controls wa-icon-button[name="play"]::part(base) {
+    background-color: var(--wa-color-brand-fill-loud);
+    border: none;
+    color: var(--wa-color-brand-on-loud);
+    font-size: 3rem;
+    padding: 1.5rem;
+  }
+</style>

docs/docs/components/page.md

@@ -1,50 +1,33 @@
 ---
 title: Page
-description: Layouts offer an easy way to scaffold pages using minimal markup.
+description: Pages offer an easy way to scaffold entire page layouts using minimal markup.
 layout: component
+isPro: true
 ---
 
-The layout component is designed to power full webpages. It is flexible enough to handle most modern designs and includes a simple mechanism for handling desktop and mobile navigation.
-
-A number of sections are available as part of the layout, most of which are optional. Content is added by [slotting elements](/docs/usage/#slots) into various locations.
-
-This component _does not_ implement any [content sectioning](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning) or "semantic elements" internally (such as `<main>`, `<header>`, `<footer>`, etc.). Instead, it is recommended that you slot in content sectioning elements wherever you feel they're appropriate.
+The page component is designed to power full webpages. It is flexible enough to handle most modern designs and includes a simple mechanism for handling desktop and mobile navigation.
 
 ## Layout Anatomy
 
-This image depicts the layout's anatomy, including the default positions of each section. The labels represent the [named slots](#slots) you can use to populate them.
+This image depicts a page's anatomy, including the default positions of each section. The labels represent the [named slots](#slots) you can use to populate them.
 
-Most slots are optional. Slots that have no content will not be shown, allowing you to opt-in to just the sections of the layout you actually need.
+Most slots are optional. Slots that have no content will not be shown, allowing you to opt-in to just the sections you actually need.
 
-![Screenshot of Layout Anatomy showing various slots](/assets/images/layout-anatomy.svg)
+{% include "page-demo.njk" %}
+
+<!-- ![Screenshot of Layout Anatomy showing various slots](/assets/images/layout-anatomy.svg) -->
+
+## Using `wa-page`
 
 :::info
 If you're not familiar with how slots work in HTML, you might want to [learn more about slots](/docs/usage/#slots) before using this component.
 :::
 
-## Sticky Sections
+A number of sections are available as part of the page component, most of which are optional. Content is populated by [slotting elements](/docs/usage/#slots) into various locations.
 
-The following sections of the layout are "sticky" by default, meaning they remain in position as the user scrolls.
+This component _does not_ implement any [content sectioning](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning) or "semantic elements" internally (such as `<main>`, `<header>`, `<footer>`, etc.). Instead, we recommended that you slot in content sectioning elements wherever you feel they're appropriate.
 
-- `banner`
-- `header`
-- `sub-header`
-- `aside`
-- `menu`
-
-This is often desirable, but you can change this behavior using the `disable-sticky` attribute. Use a space-delimited list of names to tell the layout which sections should not be sticky.
-
-```html
-<wa-page disable-sticky="header aside"> ... </wa-page>
-```
-
-## How to Apply Spacing to Your Layout
-
-The layout component _does not_ apply spacing for you. You can apply the appropriate paddings or margins directly to the elements you slot in to fine tune your spacing needs.
-
-TODO - add example here
-
-When using `<wa-page>`, make sure to zero out all paddings and margins on `<html>` and `<body>`, otherwise you may see unexpected gaps. The following styles are highly recommended when using `<wa-page>`.
+When using `<wa-page>`, make sure to zero out all paddings and margins on `<html>` and `<body>`, otherwise you may see unexpected gaps. We highly recommend adding the following styles when using `<wa-page>`:
 
 ```css
 html,
@@ -56,7 +39,720 @@ body {
 }
 ```
 
-## Skip To Content
+## Examples
+
+:::warning
+Open demos in a new tab to examine their behavior in different window sizes.
+The previews below use simulated zooming which, depending on your browser, may not be accurate.
+:::
+
+### Documentation
+
+A sample documentation page using [all available slots](#slots).
+The navigation menu collapses into a drawer at a custom `mobile-breakpoint` of 920px.
+It can be opened using a button with `[data-toggle-nav]` that appears in the `subheader` slot. The `aside` slot is also hidden below 920px.
+
+```html {.example viewport="1600"}
+<wa-page mobile-breakpoint="920">
+  <div slot="banner" class="wa-body-s">
+    <a href="#" class="wa-cluster wa-align-items-baseline wa-gap-xs" style="flex-wrap: nowrap;">
+      <wa-icon name="gift"></wa-icon>
+      <span>Give a Hoot for the Holidays: Donate now and double your impact.</span>
+    </a>
+  </div>
+  <header slot="header" class="wa-split">
+    <div class="wa-cluster">
+      <wa-icon name="feather-pointed" style="color: var(--wa-color-brand-fill-loud); font-size: 1.5em;"></wa-icon>
+      <span id="brand-name" class="wa-heading-s">Audubon Worldwide</span>
+      <a href="#">Our Work</a>
+      <a href="#">About Us</a>
+      <a href="#">Discover</a>
+      <a href="#">Get Involved</a>
+    </div>
+    <div class="wa-cluster wa-gap-xs">
+      <wa-button size="small" variant="brand" appearance="outlined">Find Your Local Audubon</wa-button>
+      <wa-button size="small" variant="brand">Donate</wa-button>
+    </div>
+  </header>
+  <nav slot="subheader">
+    <div class="wa-cluster" style="flex-wrap: nowrap;">
+      <wa-icon-button data-toggle-nav name="bars" label="Menu"></wa-icon-button>
+      <wa-breadcrumb style="font-size: var(--wa-font-size-s);">
+        <wa-breadcrumb-item>Field Guides</wa-breadcrumb-item>
+        <wa-breadcrumb-item>Owls</wa-breadcrumb-item>
+        <wa-breadcrumb-item>Great Horned Owl</wa-breadcrumb-item>
+      </wa-breadcrumb>
+    </div>
+    <wa-input id="search" placeholder="Search" size="small" style="max-inline-size: 12rem;">
+      <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
+    </wa-input>
+  </nav>
+  <nav slot="navigation-header">
+    <div class="wa-flank">
+      <wa-avatar image="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" label=""></wa-avatar>
+      <div class="wa-stack wa-gap-3xs">
+        <span class="wa-heading-s">Great Horned Owl</span>
+        <span class="wa-caption-s" lang="la"><em>Bubo virginianus</em></span>
+      </div>
+    </div>
+  </nav>
+  <nav slot="navigation">
+    <a href="#identification">Identification</a>
+    <a href="#range">Range and Habitat</a>
+    <a href="#behavior">Behavior</a>
+    <a href="#conservation">Conservation</a>
+  </nav>
+  <nav slot="navigation-footer">
+    <a href="#" class="wa-flank">
+      <wa-icon name="camera"></wa-icon>
+      <span>Photo Gallery</span>
+    </a>
+    <a href="#" class="wa-flank">
+      <wa-icon name="map-location-dot"></wa-icon>
+      <span>Interactive Range Map</span>
+    </a>
+  </nav>
+  <header slot="main-header">
+    <div class="wa-flank:end wa-border-radius-m wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
+      <div class="wa-stack" style="margin: var(--wa-space-2xl);">
+        <h1>Great Horned Owl</h1>
+        <wa-divider></wa-divider>
+        <div class="wa-cluster wa-gap-xs">
+          <wa-tag size="small">Owls</wa-tag>
+          <wa-tag size="small">Birds of Prey</wa-tag>
+          <wa-tag size="small">Pleistocene Birds</wa-tag>
+        </div>
+        <div class="wa-flank">
+          <wa-icon name="ruler"></wa-icon>
+          <span class="wa-caption-m">L 21.5" | WS 48.5"</span>
+        </div>
+        <div class="wa-flank">
+          <wa-icon name="earth-americas"></wa-icon>
+          <span class="wa-caption-m">North America (Widespread), Central America (Limited), South America (Limited)</span>
+        </div>
+        <div class="wa-flank">
+          <wa-icon name="shield-heart"></wa-icon>
+          <span class="wa-caption-m">Least Concern</span>
+        </div>
+      </div>
+      <div class="wa-frame" style="border-radius: var(--wa-border-radius-m); max-inline-size: 40ch;">
+        <img src="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" />
+      </div>
+    </div>
+  </header>
+  <main class="wa-body-l">
+    <h2 id="identification">Identification</h2>
+    <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Eget habitant scelerisque lectus ultrices nascetur aliquet sapien primis. Cursus sapien fusce semper nulla elit sociosqu lectus per sem. Sem ad porttitor dictum nisl pharetra tortor convallis. Sit molestie hendrerit porta dictum tortor posuere euismod magna. Mauris suspendisse pharetra finibus; eleifend etiam ridiculus.</p>
+    <h2 id="range">Range and Habitat</h2>
+    <p>Diam sed ipsum pretium porttitor class cubilia elementum. Blandit felis ligula habitant ultricies vulputate rutrum lacus commodo pulvinar. Nostra semper placerat lectus in dis eu. Sagittis ipsum placerat rhoncus lacus id eget. Erat pharetra aptent enim, augue accumsan ultricies inceptos habitasse. Senectus id maximus parturient tellus; fermentum posuere vulputate luctus. Ac tempus dapibus vehicula ligula ullamcorper sit duis.</p>
+    <h2 id="behavior">Behavior</h2>
+    <p>Erat vitae luctus arcu taciti malesuada pretium arcu justo primis. Cubilia vitae maecenas congue velit id netus arcu. Dictum vel pellentesque taciti fermentum risus consectetur amet. Faucibus commodo habitasse sem maximus praesent purus, dignissim tristique porta. Platea magna justo ipsum ut metus ac facilisi. Imperdiet laoreet pharetra maximus lacus tortor suscipit. Nam quisque iaculis orci porttitor pellentesque rhoncus. Molestie sagittis tincidunt quisque nisi non urna conubia.</p>
+    <h2 id="conservation">Conservation</h2>
+    <p>Nullam magna quam quisque eu varius integer. Inceptos donec facilisi risus himenaeos semper mollis habitasse. Vehicula lacus vivamus euismod pharetra mollis dictum. Ante ex tortor elementum eleifend habitasse orci aliquam. Fames erat senectus fames etiam dapibus cursus.</p>
+  </main>
+  <footer slot="main-footer">
+    <section>
+      <h2 class="wa-heading-m">Sources</h2>
+      <ul class="wa-body-s">
+        <li><cite><a href="https://www.audubon.org/field-guide/bird/great-horned-owl" target="_blank" rel="noopener">Great Horned Owl</a></cite>, National Audubon Society. Retrieved 5 December 2024.</li>
+        <li><cite><a href="https://www.allaboutbirds.org/guide/Great_Horned_Owl/" target="_blank" rel="noopener">Great Horned Owl</a></cite>, All About Birds by CornellLab. Retrieved 5 December 2024.</li>
+        <li>Armistead, G. L. (2015). <cite>Field guide to birds of Pennsylvania</cite>. Scott & Nix, Inc.</li>
+      </ul>
+    </section>
+  </footer>
+  <aside slot="aside">
+    <h2 class="wa-heading-m">Discover More Birds</h2>
+    <wa-card with-image>
+      <div slot="image" class="wa-frame">
+        <img src="https://images.unsplash.com/photo-1635254859323-65b78408dcca?q=20" alt="" />
+      </div>
+      <div class="wa-stack wa-gap-3xs">
+        <span class="wa-heading-s">Long-eared Owl</span>
+        <span class="wa-caption-s" lang="la"><em>Asio otus</em></span>
+      </div>
+    </wa-card>
+    <wa-card with-image>
+      <div slot="image" class="wa-frame">
+        <img src="https://images.unsplash.com/photo-1661350356618-f5915c7b6a3c?q=20" alt="" />
+      </div>
+      <div class="wa-stack wa-gap-3xs">
+        <span class="wa-heading-s">Northen Hawk Owl</span>
+        <span class="wa-caption-s" lang="la"><em>Surnia ulula</em></span>
+      </div>
+    </wa-card>
+    <wa-card with-image>
+      <div slot="image" class="wa-frame">
+        <img src="https://images.unsplash.com/photo-1660307777355-f08bced145d3?q=20" alt="" />
+      </div>
+      <div class="wa-stack wa-gap-3xs">
+        <span class="wa-heading-s">Golden Eagle</span>
+        <span class="wa-caption-s" lang="la"><em>Aquila chrysaetos</em></span>
+      </div>
+    </wa-card>
+  </aside>
+  <footer slot="footer" class="wa-grid wa-gap-xl">
+    <div class="wa-cluster" style="flex-wrap: nowrap;">
+      <wa-icon name="feather-pointed" style="font-size: 1.5em;"></wa-icon>
+      <span class="wa-heading-s">Audubon Worldwide</span>
+    </div>
+    <div class="wa-stack">
+      <h3 class="wa-heading-xs">Our Work</h3>
+      <a href="#">Habitat Restoration</a>
+      <a href="#">Migration Science</a>
+      <a href="#">Advocacy</a>
+    </div>
+    <div class="wa-stack">
+      <h3 class="wa-heading-xs">About Us</h3>
+      <a href="#">Our History</a>
+      <a href="#">Leadership</a>
+      <a href="#">Fiscal Reports</a>
+    </div>
+    <div class="wa-stack">
+      <h3 class="wa-heading-xs">Discover</h3>
+      <a href="#">Field Guides</a>
+      <a href="#">Photo Search</a>
+      <a href="#">Gear and Resources</a>
+    </div>
+    <div class="wa-stack">
+      <h3 class="wa-heading-xs">Get Involved</h3>
+      <a href="#">Adopt a Bird</a>
+      <a href="#">Your Local Audubon</a>
+      <a href="#">Youth Audubon Camps</a>
+    </div>
+  </footer>
+</wa-page>
+
+<style>
+  wa-page {
+    --menu-width: 15rem;
+    --aside-width: 15rem;
+  }
+  wa-page[view='desktop'] {
+    [data-toggle-nav] {
+      display: none;
+    }
+
+    [slot*='navigation'] {
+      border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+    }
+  }
+  wa-page[view='mobile'] {
+    --menu-width: auto;
+    --aside-width: auto;
+
+    [slot='aside'],
+    #brand-name,
+    #search {
+      display: none;
+    }
+  }
+
+  [slot='banner'] {
+    --wa-color-text-link: var(--wa-color-neutral-on-loud);
+    background-color: var(--wa-color-neutral-fill-loud);
+  }
+  [slot='header'] {
+    --wa-link-decoration-default: none;
+    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+  }
+  [slot*='header'] a {
+    font-weight: var(--wa-font-weight-action);
+  }
+  [slot='subheader'] {
+    background-color: var(--wa-color-surface-lowered);
+    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+  }
+  [slot='navigation-header'] {
+    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+  }
+
+  [slot*='navigation'] a {
+    --wa-color-text-link: var(--wa-color-text-normal);
+  }
+  [slot='navigation-footer'] {
+    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+  }
+  [slot='navigation-footer'] .wa-flank {
+    --flank-size: 1.25em;
+  }
+  [slot='main-header'],
+  main,
+  [slot='main-footer'] {
+    max-inline-size: 60rem;
+    margin-inline: auto;
+  }
+  [slot='main-footer'] {
+    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+  }
+  [slot='footer'] {
+    --wa-color-text-link: var(--wa-color-text-quiet);
+    background-color: var(--wa-color-surface-lowered);
+    font-size: var(--wa-font-size-s);
+  }
+</style>
+
+<script>
+  const sectionAnchors = document.querySelectorAll("[slot*='navigation'] a[href*='#']");
+  sectionAnchors.forEach((sectionAnchor) => sectionAnchor.setAttribute("data-drawer", "close"));
+</script>
+```
+
+### Media
+
+A sample media app page using `header`, `navigation-header`, `main-header`, and `main-footer` along with the default slot. The navigation menu collapses into a drawer at the default `mobile-breakpoint` and can be opened using a button with `[data-toggle-nav]` that appears in the `header` slot.
+
+```html {.example viewport="1600"}
+<wa-page class="wa-theme-default-dark">
+  <header slot="header">
+    <div class="wa-cluster">
+      <wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
+      <wa-icon name="record-vinyl"></wa-icon>
+      <span class="wa-heading-m">radiogaga</span>
+    </div>
+    <wa-input id="search-header" placeholder="Search" style="max-inline-size: 100%;">
+      <wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
+    </wa-input>
+    <div class="wa-cluster">
+      <wa-button appearance="outlined">Log In</wa-button>
+      <wa-button>Sign Up</wa-button>
+    </div>
+  </header>
+  <div slot="navigation-header" class="wa-split">
+    <wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%;">
+      <wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
+    </wa-input>
+    <div class="wa-split">
+      <h2 class="wa-heading-s">For You</h2>
+      <wa-icon-button id="settings" name="gear" label="Settings"></wa-icon-button>
+    </div>
+  </div>
+  <nav slot="navigation">
+    <h3 class="wa-heading-xs">Discover</h3>
+    <ul class="wa-stack wa-gap-0">
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="house"></wa-icon>
+          <span>Home</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="star"></wa-icon>
+          <span>New</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="tower-broadcast"></wa-icon>
+          <span>Stations</span>
+        </a>
+      </li>
+    </ul>
+    <h3 class="wa-heading-xs">Library</h3>
+    <ul class="wa-stack wa-gap-0">
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="heart"></wa-icon>
+          <span>Favorites</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="bars-staggered"></wa-icon>
+          <span>Playlists</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="microphone-lines"></wa-icon>
+          <span>Artists</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="layer-group"></wa-icon>
+          <span>Albums</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="podcast"></wa-icon>
+          <span>Podcasts</span>
+        </a>
+      </li>
+    </ul>
+    <h3 class="wa-heading-xs">Recently Played</h3>
+    <ul id="recent" class="wa-stack wa-gap-0">
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="radio" style="background: var(--wa-color-red-90); color: var(--wa-color-red-60);"></wa-icon>
+          <span>Lo-Fi Station</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="font-awesome" style="background: var(--wa-color-blue-30); color: var(--wa-color-yellow-90);"></wa-icon>
+          <span>Podcast Awesome</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="wa-flank">
+          <wa-icon name="seedling" style="background: var(--wa-color-green-70); color: var(--wa-color-green-90);"></wa-icon>
+          <div class="wa-stack wa-gap-0">
+            <span>Seasons</span>
+            <span class="wa-caption-s">Blister Soul</span>
+          </div>
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <div slot="main-header">
+    <wa-icon-button id="back" name="chevron-left" label="Back"></wa-icon-button>
+    <wa-tooltip for="back" placement="bottom" distance="2">Back</wa-tooltip>
+    <div class="wa-cluster">
+      <wa-icon-button id="favorite" name="heart" variant="regular" label="Favorite"></wa-icon-button>
+      <wa-tooltip for="favorite" placement="bottom" distance="2">Favorite</wa-tooltip>
+      <wa-icon-button id="options" name="ellipsis" label="Options"></wa-icon-button>
+      <wa-tooltip for="options" placement="bottom" distance="2">Options</wa-tooltip>
+    </div>
+  </div>
+  <main>
+    <div class="wa-stack wa-gap-3xl">
+      <div class="wa-flank wa-gap-3xl" style="--content-percentage: 40%;">
+        <div class="wa-frame wa-border-radius-l" style="max-inline-size: 40ch;">
+          <img src="https://images.unsplash.com/photo-1732430579016-8d5e5ebd3c99?q=20" alt="Home for the Holidays album artwork" />
+        </div>
+        <div class="wa-split:column wa-align-items-start">
+          <div class="wa-stack" style="margin-block: auto;">
+            <h1 class="wa-heading-3xl">Home for the Holidays</h1>
+            <a href="#" class="wa-heading-m">The Shire Choir</a>
+            <div class="wa-cluster wa-caption-m wa-gap-2xs">
+              <span>Holiday</span>
+              <span>&bull;</span>
+              <span>2024</span>
+              <span>&bull;</span>
+              <span>12 songs, 41 minutes 9 seconds</span>
+            </div>
+          </div>
+          <div id="play-controls" class="wa-split wa-gap-xl">
+            <div class="wa-cluster wa-gap-xl">
+              <wa-icon-button name="play" label="Play"></wa-icon-button>
+              <wa-icon-button name="shuffle" label="Shuffle"></wa-icon-button>
+            </div>
+            <wa-icon-button name="plus" label="Add to Library"></wa-icon-button>
+          </div>
+        </div>
+      </div>
+      <ol class="wa-stack wa-gap-0">
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="1"></wa-icon>
+            <span>Fa-La-La-Fellowship</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">3:27</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="2"></wa-icon>
+            <span>Sleigh Ride</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">2:36</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="3"></wa-icon>
+            <span>All I Want For Christmas Is Stew</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">2:51</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="4"></wa-icon>
+            <span>Rockin' Around the Christmas Ent</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">3:05</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="5"></wa-icon>
+            <span>Merry, Did You Know?</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">1:56</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="6"></wa-icon>
+            <span>Run Run Shadowfax</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">3:32</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="7"></wa-icon>
+            <span>You're a Mean One, Mr. Grima</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">2:46</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="8"></wa-icon>
+            <span>O Come, All Ye Faithful</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">3:27</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <wa-icon name="9"></wa-icon>
+            <span>Do You Hear What I Hear</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">2:13</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <span class="wa-cluster wa-gap-3xs">
+              <wa-icon name="1"></wa-icon>
+              <wa-icon name="0"></wa-icon>
+            </span>
+            <span>Carol of the Horns</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">2:55</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <span class="wa-cluster wa-gap-3xs">
+              <wa-icon name="1"></wa-icon>
+              <wa-icon name="1"></wa-icon>
+            </span>
+            <span>Silent Night</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">3:10</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+        <li class="wa-split">
+          <span class="wa-flank">
+            <span class="wa-cluster wa-gap-3xs">
+              <wa-icon name="1"></wa-icon>
+              <wa-icon name="2"></wa-icon>
+            </span>
+            <span>Wizard Wonderland</span>
+          </span>
+          <span class="wa-cluster">
+            <span class="wa-caption-m">3:22</span>
+            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
+          </span>
+        </li>
+      </ol>
+    </div>
+  </main>
+  <div slot="main-footer" class="wa-grid wa-gap-xl wa-align-items-center">
+    <h2 class="wa-heading-2xl">More You Might Like</h2>
+    <div class="wa-stack wa-gap-xs">
+      <div class="wa-frame wa-border-radius-m">
+        <img src="https://images.unsplash.com/photo-1675219119611-40323b738563?q=20" alt="" />
+      </div>
+      <span class="wa-heading-s">Festival of Lights</span>
+      <span class="wa-caption-s">Station</span>
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <div class="wa-frame wa-border-radius-m">
+        <img src="https://images.unsplash.com/photo-1481930916222-5ec4696fc0f2?q=20" alt="" />
+      </div>
+      <span class="wa-heading-s">Holiday Cheer</span>
+      <span class="wa-caption-s">Essential Playlist</span>
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <div class="wa-frame wa-border-radius-m">
+        <img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="" />
+      </div>
+      <span class="wa-heading-s">Nursery Rhymes from the Shire</span>
+      <span class="wa-caption-s">The Shire Choir</span>
+    </div>
+  </div>
+</wa-page>
+
+<style>
+  wa-page {
+    --menu-width: 30ch;
+    --wa-tooltip-arrow-size: 0;
+    background-color: var(--wa-color-surface-lowered);
+  }
+  wa-page[view='desktop'] {
+    :is([data-toggle-nav], #search-nav-drawer) {
+      display: none;
+    }
+  }
+  wa-page[view='mobile'] {
+    --menu-width: auto;
+
+    #search-header {
+      display: none;
+    }
+    [slot*='main'], main {
+      padding: var(--wa-space-xl);
+    }
+  }
+
+  wa-page,
+  [slot='header'],
+  wa-page[view='desktop'] [slot*='navigation'] {
+    background-color: var(--wa-color-surface-lowered);
+  }
+  wa-page[view='mobile'] [slot*='navigation'] {
+    padding: 0;
+  }
+  wa-page::part(base) {
+    background-color: var(--wa-color-surface-lowered);
+  }
+  [slot='header'] {
+    background: linear-gradient(to bottom, var(--wa-color-surface-raised), var(--wa-color-surface-lowered));
+  }
+  [slot='navigation-header'],
+  [slot='main-header'] {
+    padding-block-end: 0 !important;
+    padding-block-start: var(--wa-space-3xl);
+  }
+  [slot='navigation'] {
+    a {
+      --wa-color-text-link: var(--wa-color-text-normal);
+      --wa-link-decoration-default: none;
+      --wa-link-decoration-hover: none;
+      --flank-size: 2rem;
+      font-weight: var(--wa-font-weight-action);
+      gap: 0.5rem;
+    }
+    ul {
+      list-style: none;
+      margin: 0;
+
+      a {
+        border-radius: var(--wa-border-radius-s);
+        padding: var(--wa-space-xs);
+
+        &:hover {
+          background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
+        }
+      }
+    }
+    wa-icon {
+      align-items: center;
+      aspect-ratio: 1;
+      color: var(--wa-color-brand-fill-loud);
+      display: flex;
+      height: var(--flank-size);
+      justify-content: center;
+    }
+    #recent wa-icon {
+      border-radius: var(--wa-border-radius-xs);
+    }
+  }
+
+  [slot='main-header'] {
+    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+    border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+    border-radius: var(--wa-border-radius-l) var(--wa-border-radius-l) 0 0
+  }
+  main,
+  [slot*='main'] {
+    margin-inline: var(--wa-space-m);
+  }
+  main ol li {
+    padding: var(--wa-space-m);
+
+    &:hover {
+      background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
+    }
+
+    &:not(:first-child) {
+      border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+    }
+
+    .wa-flank {
+      --flank-size: 2rem;
+    }
+  }
+  main,
+  [slot='main-footer'] {
+    border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
+  }
+  main,
+  [slot='main-header'] {
+    background-color: var(--wa-color-surface-raised);
+  }
+  #play-controls wa-icon-button::part(base) {
+    border: var(--wa-border-width-l) var(--wa-border-style) currentColor;
+    border-radius: var(--wa-border-radius-circle);
+    font-size: 1.5rem;
+  }
+  #play-controls wa-icon-button[name="play"]::part(base) {
+    background-color: var(--wa-color-brand-fill-loud);
+    border: none;
+    color: var(--wa-color-brand-on-loud);
+    font-size: 3rem;
+    padding: 0.5em 0.45em 0.5em 0.55em;
+  }
+  [slot='main-footer'].wa-grid > * {
+    max-inline-size: 30ch;
+  }
+</style>
+
+<script>
+  const sectionAnchors = document.querySelectorAll("[slot*='navigation'] a[href*='#']");
+  sectionAnchors.forEach((sectionAnchor) => sectionAnchor.setAttribute("data-drawer", "close"));
+</script>
+```
+
+
+## Customization
+
+### Sticky Sections
+
+The following sections of a page are "sticky" by default, meaning they remain in position as the user scrolls.
+
+- `banner`
+- `header`
+- `sub-header`
+- `menu` (`navigation` itself is not sticky, but its parent `menu` is)
+- `aside`
+
+This is often desirable, but you can change this behavior using the `disable-sticky` attribute. Use a space-delimited list of names to tell the page which sections should not be sticky.
+
+```html
+<wa-page disable-sticky="header aside"> ... </wa-page>
+```
+
+### Skip To Content
 
 The layout provides a "skip to content" link that's visually hidden until the user tabs into it. You don't have to do anything to configure this, unless you want to change the text displayed in the link. In that case, you can slot in your own text using the `skip-to-content` slot.
 
@@ -70,15 +766,62 @@ This example localizes the "skip to content" link for German users.
 </wa-page>
 ```
 
-## Responsiveness
+### Responsiveness
 
-The layout component tries not to have too many opinions in terms of responsive behaviors — you get to decide with your own CSS and media queries how your content responds! However, the navigation menu _does_ respond by collapsing on smaller screens. The breakpoint at which this occurs is 768px by default, but you can change it using the `mobile-breakpoint` attribute.
+A page isn't very opinionated when it comes to responsive behaviors, but there are tools in place to help make responsiveness easy.
+
+#### Default Slot Styles
+
+Each slot is a [flex container](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container) and specifies some flex properties so that your content is reasonably responsive by default.
+
+The following slots specify `justify-content: space-between` and `flex-wrap: wrap` to evenly distribute child elements horizontally and allow them to wrap when space is limited:
+- `header`
+- `subheader`
+- `main-header`
+- `main-footer`
+- `footer`
+
+The following slots specify `flex-direction: column` to arrange child elements vertically:
+- `navigation-header`
+- `navigation` (or `menu`)
+- `navigation-footer`
+- `aside`
+
+And the `banner` slot specifies `justify-content: center` to horizontally center its child elements.
+
+You can override the default display and flex properties for each slot with your own CSS.
+
+#### Responsive Navigation
+
+When you use the `navigation` slot, your slotted content automatically collapses into a drawer on smaller screens.
+The breakpoint at which this occurs is `768px` by default, but you can change it using the `mobile-breakpoint` attribute,
+which takes either a number or a [CSS length](https://developer.mozilla.org/en-US/docs/Web/CSS/length).
 
 ```html
 <wa-page mobile-breakpoint="600"> ... </wa-page>
 ```
+```html {.example viewport}
+<wa-page mobile-breakpoint="50ch">
+  <div slot=navigation>Nav</div>
+  <header slot=header>
+    <div style="width: 50ch; background: gold">I’m 50ch wide</div>
+  </header>
+</wa-page>
+<style>
+html,
+body {
+  min-height: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+</style>
+```
 
-You can provide a button to toggle the navigation menu anywhere inside the layout by adding the `data-toggle-nav` attribute. (This _does not_ have to be a Web Awesome button.)
+By default, a "hamburger" button appears in the `header` slot to toggle the navigation menu on smaller screens.
+You can customize what this looks like by slotting your own button in the `toggle-navigation` slot,
+or place the `data-toggle-nav` attribute on any button on your page (This _does not_ have to be a Web Awesome element.).
+The default button not be shown when using either of these methods — if you want to use multiple navigation toggles on your page, simply add the `data-toggle-nav` attribute to multiple elements.
 
 ```html
 <wa-page mobile-breakpoint="600">
@@ -94,25 +837,45 @@ Alternatively, you can apply `nav-state="open"` and `nav-state="closed"` to the
 <wa-page nav-state="open"> ... </wa-page>
 ```
 
-## Providing Navigation Items
+`<wa-page>` is given the attribute `view="mobile"` or `view="desktop"` when the viewport narrower or wider than the `mobile-breakpoint` value, respectively. You can leverage these attributes to change styles depending on the size of the viewport.
+This is especially useful to hide your `data-toggle-nav` button when the viewport is wider:
+```css
+wa-page[view='desktop'] [data-toggle-nav] {
+  display: none;
+}
+```
 
-- TODO - example with navigation items
-- TODO - example with`<h2>` and `<a>` as navigation items
+#### Custom Widths
 
-## Examples
+You specify widths for some slots on your page with [CSS custom properties](#css-custom-properties) for `--menu-width`, `--main-width`, and `--aside-width`.
 
-### Hero Layout
+If you specify `--menu-width` to apply a specific width to your `navigation` slot, space will still be reserved on the page even below the `mobile-breakpoint`. To collapse this space on smaller screens, add the following code to your styles:
+```css
+wa-page[view='mobile'] {
+  --menu-width: auto;
+}
+```
 
-- TODO - Sticky header + main + footer
+You can use a similar approach for `--aside-width` to hide the `aside` slot on smaller screens. Be sure to also specify `display: none` for the slot:
+```css
+wa-page[view='mobile'] {
+  --aside-width: auto;
 
-### Blog Layout
+   [slot='aside'] {
+    display: none;
+  }
+}
+```
 
-- TODO - Sticky header + main + aside + footer (blog)
+### Spacing
 
-### App Layout
+A page specifies default `padding` within each slot and a `gap` between the slot's direct children. You can drop elements into any slot, and reasonable spacing is already applied for you.
 
-- TODO - Menu + main, plus maybe headers and footers in each (app)
+You can override the default spacing for each slot with your own CSS. In this example, we're setting custom `gap` and `padding` for the `footer` slot:
+```css
+[slot="footer"] {
+  gap: var(--wa-space-xl);
+  padding: var(--wa-space-xl);
+}
+```
 
-### Docs Layout
-
-- TODO - Menu + main + aside + footer (docs)

docs/docs/components/tab-group.md

@@ -4,14 +4,14 @@ description: Tab groups organize content into a container that shows one section
 layout: component
 ---
 
-Tab groups make use of [tabs](/docs/components/tab) and [tab panels](/docs/components/tab-panel). Each tab must be slotted into the `nav` slot and its `panel` must refer to a tab panel of the same name.
+Tab groups make use of [tabs](/docs/components/tab) and [tab panels](/docs/components/tab-panel). Each panel should have a name that's unique within the tab group, and tabs should have a `panel` attribute that points to the respective panel's name.
 
 ```html {.example}
 <wa-tab-group>
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
-  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
-  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>
+  <wa-tab panel="general">General</wa-tab>
+  <wa-tab panel="custom">Custom</wa-tab>
+  <wa-tab panel="advanced">Advanced</wa-tab>
+  <wa-tab panel="disabled" disabled>Disabled</wa-tab>
 
   <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
   <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
@@ -28,9 +28,9 @@ To make a tab active, set the `active` attribute to the name of the appropriate
 
 ```html {.example}
 <wa-tab-group active="advanced">
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
-  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
+  <wa-tab panel="general">General</wa-tab>
+  <wa-tab panel="custom">Custom</wa-tab>
+  <wa-tab panel="advanced">Advanced</wa-tab>
 
   <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
   <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
@@ -44,10 +44,10 @@ Tabs can be shown on the bottom by setting `placement` to `bottom`.
 
 ```html {.example}
 <wa-tab-group placement="bottom">
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
-  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
-  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>
+  <wa-tab panel="general">General</wa-tab>
+  <wa-tab panel="custom">Custom</wa-tab>
+  <wa-tab panel="advanced">Advanced</wa-tab>
+  <wa-tab panel="disabled" disabled>Disabled</wa-tab>
 
   <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
   <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
@@ -62,10 +62,10 @@ Tabs can be shown on the starting side by setting `placement` to `start`.
 
 ```html {.example}
 <wa-tab-group placement="start">
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
-  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
-  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>
+  <wa-tab panel="general">General</wa-tab>
+  <wa-tab panel="custom">Custom</wa-tab>
+  <wa-tab panel="advanced">Advanced</wa-tab>
+  <wa-tab panel="disabled" disabled>Disabled</wa-tab>
 
   <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
   <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
@@ -80,10 +80,10 @@ Tabs can be shown on the ending side by setting `placement` to `end`.
 
 ```html {.example}
 <wa-tab-group placement="end">
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
-  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
-  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>
+  <wa-tab panel="general">General</wa-tab>
+  <wa-tab panel="custom">Custom</wa-tab>
+  <wa-tab panel="advanced">Advanced</wa-tab>
+  <wa-tab panel="disabled" disabled>Disabled</wa-tab>
 
   <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
   <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
@@ -98,10 +98,10 @@ You can make a tab closable by adding a close button next to the tab and inside
 
 ```html {.example}
 <wa-tab-group class="tabs-closable">
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="closable">Closable</wa-tab>
-  <wa-icon-button slot="nav" tabindex="-1" name="xmark" label="Close the closable tab"></wa-icon-button>
-  <wa-tab slot="nav" panel="closable-2">Advanced</wa-tab>
+  <wa-tab panel="general">General</wa-tab>
+  <wa-tab panel="closable">Closable</wa-tab>
+  <wa-icon-button tabindex="-1" name="xmark" label="Close the closable tab"></wa-icon-button>
+  <wa-tab panel="closable-2">Advanced</wa-tab>
 
   <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
   <wa-tab-panel name="closable">This is the closable tab panel.</wa-tab-panel>
@@ -123,7 +123,7 @@ You can make a tab closable by adding a close button next to the tab and inside
   const tabGroup = document.querySelector('.tabs-closable');
   const generalTab = tabGroup.querySelectorAll('wa-tab')[0];
   const closableTab = tabGroup.querySelectorAll('wa-tab')[1];
-  const closeButton = tabGroup.querySelector('wa-icon-button[slot="nav"]');
+  const closeButton = tabGroup.querySelector('wa-icon-button');
   const restoreButton = tabGroup.nextElementSibling.nextElementSibling;
   
   // Remove the tab when the close button is clicked
@@ -148,26 +148,26 @@ When there are more tabs than horizontal space allows, the nav will be scrollabl
 
 ```html {.example}
 <wa-tab-group>
-  <wa-tab slot="nav" panel="tab-1">Tab 1</wa-tab>
-  <wa-tab slot="nav" panel="tab-2">Tab 2</wa-tab>
-  <wa-tab slot="nav" panel="tab-3">Tab 3</wa-tab>
-  <wa-tab slot="nav" panel="tab-4">Tab 4</wa-tab>
-  <wa-tab slot="nav" panel="tab-5">Tab 5</wa-tab>
-  <wa-tab slot="nav" panel="tab-6">Tab 6</wa-tab>
-  <wa-tab slot="nav" panel="tab-7">Tab 7</wa-tab>
-  <wa-tab slot="nav" panel="tab-8">Tab 8</wa-tab>
-  <wa-tab slot="nav" panel="tab-9">Tab 9</wa-tab>
-  <wa-tab slot="nav" panel="tab-10">Tab 10</wa-tab>
-  <wa-tab slot="nav" panel="tab-11">Tab 11</wa-tab>
-  <wa-tab slot="nav" panel="tab-12">Tab 12</wa-tab>
-  <wa-tab slot="nav" panel="tab-13">Tab 13</wa-tab>
-  <wa-tab slot="nav" panel="tab-14">Tab 14</wa-tab>
-  <wa-tab slot="nav" panel="tab-15">Tab 15</wa-tab>
-  <wa-tab slot="nav" panel="tab-16">Tab 16</wa-tab>
-  <wa-tab slot="nav" panel="tab-17">Tab 17</wa-tab>
-  <wa-tab slot="nav" panel="tab-18">Tab 18</wa-tab>
-  <wa-tab slot="nav" panel="tab-19">Tab 19</wa-tab>
-  <wa-tab slot="nav" panel="tab-20">Tab 20</wa-tab>
+  <wa-tab panel="tab-1">Tab 1</wa-tab>
+  <wa-tab panel="tab-2">Tab 2</wa-tab>
+  <wa-tab panel="tab-3">Tab 3</wa-tab>
+  <wa-tab panel="tab-4">Tab 4</wa-tab>
+  <wa-tab panel="tab-5">Tab 5</wa-tab>
+  <wa-tab panel="tab-6">Tab 6</wa-tab>
+  <wa-tab panel="tab-7">Tab 7</wa-tab>
+  <wa-tab panel="tab-8">Tab 8</wa-tab>
+  <wa-tab panel="tab-9">Tab 9</wa-tab>
+  <wa-tab panel="tab-10">Tab 10</wa-tab>
+  <wa-tab panel="tab-11">Tab 11</wa-tab>
+  <wa-tab panel="tab-12">Tab 12</wa-tab>
+  <wa-tab panel="tab-13">Tab 13</wa-tab>
+  <wa-tab panel="tab-14">Tab 14</wa-tab>
+  <wa-tab panel="tab-15">Tab 15</wa-tab>
+  <wa-tab panel="tab-16">Tab 16</wa-tab>
+  <wa-tab panel="tab-17">Tab 17</wa-tab>
+  <wa-tab panel="tab-18">Tab 18</wa-tab>
+  <wa-tab panel="tab-19">Tab 19</wa-tab>
+  <wa-tab panel="tab-20">Tab 20</wa-tab>
 
   <wa-tab-panel name="tab-1">Tab panel 1</wa-tab-panel>
   <wa-tab-panel name="tab-2">Tab panel 2</wa-tab-panel>
@@ -198,10 +198,10 @@ When focused, keyboard users can press [[Left]] or [[Right]] to select the desir
 
 ```html {.example}
 <wa-tab-group activation="manual">
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
-  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
-  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>
+  <wa-tab panel="general">General</wa-tab>
+  <wa-tab panel="custom">Custom</wa-tab>
+  <wa-tab panel="advanced">Advanced</wa-tab>
+  <wa-tab panel="disabled" disabled>Disabled</wa-tab>
 
   <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
   <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>

docs/docs/components/tab-panel.md

@@ -6,10 +6,10 @@ layout: component
 
 ```html {.example}
 <wa-tab-group>
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
-  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
-  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>
+  <wa-tab panel="general">General</wa-tab>
+  <wa-tab panel="custom">Custom</wa-tab>
+  <wa-tab panel="advanced">Advanced</wa-tab>
+  <wa-tab panel="disabled" disabled>Disabled</wa-tab>
 
   <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
   <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>

docs/docs/components/viewport-demo.md

@@ -0,0 +1,69 @@
+---
+title: Viewport Demo
+description: Viewport demos can be used to display an iframe as a resizable, zoomable preview.
+layout: component
+---
+
+```html {.example}
+<wa-viewport-demo viewport="1200">
+  <iframe src="."></iframe>
+</wa-viewport-demo>
+```
+
+:::warning
+A lot of the functionality of this component will not work on cross-origin iframes.
+:::
+
+## Examples
+
+### Arbitrary HTML content
+
+You can render arbitrary HTML content in the iframe by using the `srcdoc` attribute:
+
+```html {.example}
+<wa-viewport-demo>
+  <iframe srcdoc="
+    &lt;button&gt;Click me!&lt;/button&gt;
+  "></iframe>
+</wa-viewport-demo>
+```
+
+### Viewport Emulation
+
+You can also provide a width value to emulate and it will be scaled accordingly:
+
+```html {.example}
+<wa-viewport-demo viewport="300">
+  <iframe srcdoc="
+    &lt;button&gt;Click me!&lt;/button&gt;
+    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
+  "></iframe>
+</wa-viewport-demo>
+```
+
+By default, the viewport will be rendered to an initial 16:9 aspect ratio,
+which can be changed via resizing.
+You can customize this via the `--viewport-initial-aspect-ratio` property.
+Or, you could add a height value:
+
+```html {.example}
+<wa-viewport-demo viewport="1600 x 1000">
+  <iframe srcdoc="
+    &lt;button&gt;Click me!&lt;/button&gt;
+    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
+    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
+    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
+"></iframe>
+</wa-viewport-demo>
+```
+
+## Roadmap
+
+This component is a work in progress.
+Some of the things that are not yet implemented are listed below.
+It goes without saying that this list is a rough plan and subject to change.
+
+- Non-linear zoom scale
+- Extend to general content, not just iframes
+- Styles for mobile and tablet frames and an attribute to switch between them
+- Automatic iframe height

docs/docs/experimental/default-page-spacing.md

@@ -0,0 +1,100 @@
+---
+title: Default Layout and Spacing
+description: TODO
+layout: blank
+---
+
+<style>
+  [slot='banner'] {
+    background-color: pink;
+  }
+  [slot='header'] {
+    background-color: peachpuff;
+  }
+  [slot='subheader'] {
+    background-color: papayawhip;
+  }
+  [slot='navigation-header'] {
+    background-color: lemonchiffon;
+  }
+  [slot='navigation'] {
+    background-color: honeydew;
+  }
+  [slot='navigation-footer'] {
+    background-color: paleturquoise;
+  }
+  [slot='main-header'] {
+    background-color: lavenderblush;
+  }
+  main {
+    background-color: lavender;
+    height: 100%;
+  }
+  [slot='main-footer'] {
+    background-color: thistle;
+  }
+  [slot='aside'] {
+    background-color: lightcyan;
+    height: 100%;
+  }
+  [slot='footer'] {
+    background-color: lightsteelblue;
+  }
+</style>
+
+<wa-page>
+  <section slot="banner">
+    <strong>Banner</strong>
+    <span>Banner</span>
+    <span>Banner</span>
+  </section>
+  <header slot="header">
+    <strong>Header</strong>
+    <span>Header</span>
+    <span>Header</span>
+  </header>
+  <nav slot="subheader">
+    <strong>Subheader</strong>
+    <span>Subheader</span>
+    <span>Subheader</span>
+  </nav>
+  <nav slot="navigation-header">
+    <strong>Nav Header</strong>
+    <span>Nav Header</span>
+    <span>Nav Header</span>
+  </nav>
+  <nav slot="navigation">
+    <strong>Navigation</strong>
+    <span>Navigation</span>
+    <span>Navigation</span>
+  </nav>
+  <nav slot="navigation-footer">
+    <strong>Nav Footer</strong>
+    <span>Nav Footer</span>
+    <span>Nav Footer</span>
+  </nav>
+  <div slot="main-header">
+    <strong>Main Header</strong>
+    <span>Main Header</span>
+    <span>Main Header</span>
+  </div>
+  <main>
+    <h1>Main</h1>
+    <p>No flex properties here! The author can specify their own preferred content flow and layout in the default slot.</p>
+  </main>
+  <div slot="main-footer">
+    <strong>Main Footer</strong>
+    <span>Main Footer</span>
+    <span>Main Footer</span>
+  </div>
+  <aside slot="aside">
+    <strong>Aside</strong>
+    <span>Aside</span>
+    <span>Aside</span>
+  </aside>
+  <footer slot="footer">
+    <strong>Footer</strong>
+    <span>Footer</span>
+    <span>Footer</span>
+  </footer>
+</wa-page>

docs/docs/experimental/themer.md

@@ -507,13 +507,13 @@ hasOutline: false
     </div>
     <wa-select name="theme" label="Pick a theme to start!" value="default">
       <wa-option value="default">Default</wa-option>
-      <wa-option value="fa">Font Awesome</wa-option>
-      <wa-option value="premium">Premium</wa-option>
-      <wa-option value="playful">Playful</wa-option>
-      <wa-option value="brutalist">Brutalist</wa-option>
-      <wa-option value="migration">Migration</wa-option>
-      <wa-option value="glassy">Glassy</wa-option>
-      <wa-option value="active">Active</wa-option>
+      <wa-option data-alpha="remove" value="fa">Font Awesome</wa-option>
+      <wa-option data-alpha="remove" value="premium">Premium</wa-option>
+      <wa-option data-alpha="remove" value="playful">Playful</wa-option>
+      <wa-option data-alpha="remove" value="brutalist">Brutalist</wa-option>
+      <wa-option data-alpha="remove" value="migration">Migration</wa-option>
+      <wa-option data-alpha="remove" value="glassy">Glassy</wa-option>
+      <wa-option data-alpha="remove" value="active">Active</wa-option>
       <wa-option value="classic">Classic</wa-option>
     </wa-select>
   </div>

docs/docs/localization.md

@@ -29,6 +29,7 @@ Available translations include:
 <div style="columns: 3; gap: 1rem; margin-block-end: 1.5rem;">
 
 - ar
+- cs
 - da
 - de-ch
 - de
@@ -36,19 +37,24 @@ Available translations include:
 - en
 - es
 - fa
+- fi
 - fr
 - he
 - hr
 - hu
 - id
+- it
 - ja
+- nb
 - nl
+- nn
 - pl
 - pt
 - ru
 - sl
 - sv
 - tr
+- uk
 - zh-cn
 - zh-tw
 

docs/docs/patterns/app.md

@@ -1,7 +1,7 @@
 ---
 title: App
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
@@ -285,7 +285,7 @@ TODO Page Description
       Showing 1 to 10 of 50 Results
       <span>
         <wa-button><wa-icon slot="prefix" name="gear" variant="solid"></wa-icon> Prev</wa-button>
-        <wa-button>Next <wa-icon slot="suffix" name="gear" variant="solid"></wa-icon></wa-button>  
+        <wa-button>Next <wa-icon slot="suffix" name="gear" variant="solid"></wa-icon></wa-button>
       </span>
     </div>
   </wa-card>
@@ -349,7 +349,7 @@ TODO Page Description
     wa-card {
       width: 100%;
     }
-  
+
 
     div.comment-footer {
       display: flex;
@@ -401,7 +401,7 @@ TODO Page Description
       grid-column: span 2/ span 2;
       margin: 0;
     }
-   
+
   }
 </style>
 ```
@@ -446,7 +446,7 @@ TODO Page Description
         align-items: center;
       }
 
-    
+
     }
   </style>
 ```
@@ -459,13 +459,13 @@ TODO Page Description
     <wa-icon name="database" style="font-size: 64px; margin: var(--wa-flow-spacing) 0 calc(var(--wa-flow-spacing)/ 2);"></wa-icon>
     <h4>No DBs</h4>
     <p>Get started by creating a database.</p>
-  
+
 </div>
   </a>
   <style>
     .empty-state {
       text-decoration: none;
-      
+
 
       &.dashed .border {
         margin: 0 auto;
@@ -605,10 +605,10 @@ TODO Page Description
         </div>
       </wa-card>
     </dl>
-    
-    
+
+
   </div>
-  
+
 </div>
 <style>
   .with-icon {
@@ -619,7 +619,7 @@ TODO Page Description
       margin-bottom: 0;
 
       wa-card::part(body) {
-        
+
       }
 
       wa-card::part(footer) {
@@ -701,14 +701,14 @@ TODO Page Description
     width: 100%;
     dl {
       display: grid;
-      grid-template-columns: repeat(2, 1fr);  
+      grid-template-columns: repeat(2, 1fr);
       margin: 0;
-      
+
       dt {
         color: #8991A6;
         font-size: 14px;
       }
-     
+
 
       div {
         border-right-style: solid;
@@ -739,8 +739,8 @@ TODO Page Description
         border: none;
       }
     }
-      
-  
+
+
   }
 
    wa-card.with-shared-borders::part(body) {
@@ -758,7 +758,7 @@ TODO Page Description
 ```html{.example}
 <div class="leaderboard">
   <h3 style="grid-column: 1/-1">Collective Activity for Yesterday</h3>
-  
+
     <wa-card class="activity-card" style="--wa-color-surface-default: tomato; --wa-color-text-normal: white; grid-column: 1/5;">
       <span>
         <wa-icon name="book"></wa-icon>
@@ -780,7 +780,7 @@ TODO Page Description
       </span>
       <div class="leaderboard-number">97,303</div>
     </wa-card>
-  
+
   <wa-card class="card-header" with-header style="grid-column: 2/12">
     <div slot="header">
       <div class="leaderboard-badge">
@@ -802,7 +802,7 @@ TODO Page Description
       </li>
       <li>
         <div>
-          
+
         <span>
           <h5 style="--wa-space-xl: 0">Title</h5>
           <span style="font-size: x-large;font-weight: 700;">4,500</span>
@@ -1045,4 +1045,4 @@ TODO Page Description
 ```
 ### With templates
 
-### With recommendations grid
+### With recommendations grid

docs/docs/patterns/blog.md

@@ -1,7 +1,7 @@
 ---
 title: Blog
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
@@ -14,7 +14,7 @@ TODO Page Description
   <wa-carousel-item>
     <a href="#" class="hero-link">
       <div style="background: #fe53a0;">
-       
+
       </div>
       <div style="background: gray;">
         <img
@@ -28,7 +28,7 @@ TODO Page Description
   <wa-carousel-item>
     <a href="#" class="hero-link">
       <div style="background: #5a90f3;">
-       
+
       </div>
       <div style="background: gray;">
         <img
@@ -42,7 +42,7 @@ TODO Page Description
   <wa-carousel-item>
     <a href="#" class="hero-link">
       <div style="background: #8c431e;">
-       
+
       </div>
       <div style="background: gray;">
         <img
@@ -56,7 +56,7 @@ TODO Page Description
   <wa-carousel-item>
     <a href="#" class="hero-link">
       <div style="background: #37b3e6;">
-       
+
       </div>
       <div style="background: gray;">
         <img
@@ -70,7 +70,7 @@ TODO Page Description
   <wa-carousel-item>
     <a href="#" class="hero-link">
       <div style="background: #f993d6;">
-       
+
       </div>
       <div style="background: gray;">
         <img
@@ -81,7 +81,7 @@ TODO Page Description
       <h2><span>Article Title</span></h2>
     </a>
   </wa-carousel-item>
-  
+
 </wa-carousel>
 <style>
   .hero-link {
@@ -202,10 +202,10 @@ TODO Page Description
 
       img {
         margin-right: 1rem;
-        object-fit: cover; 
+        object-fit: cover;
         min-width: 50px;
-        min-height: 50px; 
-        width: 100px; 
+        min-height: 50px;
+        width: 100px;
         height: 100px;
         border-radius: var(--wa-border-radius-circle);
       }
@@ -333,7 +333,7 @@ TODO Page Description
          <wa-input value="https://fontawesome.com"></wa-input>
     <wa-button variant="brand"> <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>Copy</wa-button>
       </div>
-   
+
   </div>
 </wa-card>
 <style>
@@ -350,13 +350,13 @@ TODO Page Description
       background: var(--background);
     }
     wa-icon-button::part(base) {
-      
+
       color: var(--color);
     }
 
     .share-input {
     display: flex;
-    
+
     wa-input {
           --border-radius: var(--wa-form-control-border-radius) 0 0 var(--wa-form-control-border-radius);
     }
@@ -365,6 +365,6 @@ TODO Page Description
     }
   }
   }
-  
+
 </style>
 ```

docs/docs/patterns/business.md

@@ -1,7 +1,7 @@
 ---
 title: Business
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description

docs/docs/patterns/ecommerce-category-filter.md

@@ -1,12 +1,12 @@
 ---
 title: E-commerce - Category Filter
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
 
 ## With inline actions and expandable sidebar filters
 ```html{.example}
- 
+
 ```

docs/docs/patterns/ecommerce-category-preview.md

@@ -1,7 +1,7 @@
 ---
 title: E-commerce - Category Preview
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description

docs/docs/patterns/ecommerce-order-history.md

@@ -1,7 +1,7 @@
 ---
 title: E-commerce - Order History
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
@@ -9,5 +9,5 @@ TODO Page Description
 ## Invoice panels
 
 ```html{.example}
-  
+
 ```

docs/docs/patterns/ecommerce-order-summary.md

@@ -1,7 +1,7 @@
 ---
 title: E-commerce - Product List
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description

docs/docs/patterns/ecommerce-product-detail.md

@@ -1,7 +1,7 @@
 ---
 title: E-commerce - Product Detail
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
@@ -35,7 +35,7 @@ TODO Page Description
    </wa-card>
   </div>
   <style>
-    .with-inline-price { 
+    .with-inline-price {
       wa-card {
         width: 100%;
         .card-header {

docs/docs/patterns/ecommerce-product-list.md

@@ -1,7 +1,7 @@
 ---
 title: E-commerce - Product Lists
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
@@ -52,7 +52,7 @@ TODO Page Description
         align-items: center;
       }
       .grid-item:nth-of-type(odd) {
-       
+
         border-right: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
       }
       .grid-item:not(:nth-last-child(-n + 2)) {
@@ -156,11 +156,10 @@ TODO Page Description
         font-weight: var(--wa-font-weight-action);
       }
     }
-    
+
   </style>
 ```
 ## With color swatches (WIP)
 ```html{.example}
 
 ```
-

docs/docs/patterns/ecommerce-product-review.md

@@ -1,7 +1,7 @@
 ---
 title: E-commerce - Product Reviews
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
@@ -132,7 +132,7 @@ TODO Page Description
       <wa-icon family="solid" name="earth-americas"></wa-icon>
       <h3>International delivery</h3>
       <p>Get your order in 2 years</p>
-  
+
     </wa-card>
   </div>
 </div>
@@ -263,11 +263,11 @@ TODO Page Description
   wa-radio-button #shadow-root div .button--medium {
     padding: var(--wa-space-xs) var(--wa-space-xs);
   }
-  
+
   .color-circle {
     --background: #000;
     background: var(--background);
- 
+
     width: 50px;
     height: 100%;
   }
@@ -372,12 +372,12 @@ TODO Page Description
     <h2>Everyday Ruck Snack</h2>
     <span>
       <span>$220</span> |
-      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating> 
+      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
       <span>1624 reviews</span>
     </span>
     <p>Don't compromise on snack-carrying capacity with this lightweight and spacious bag. The drawstring top keeps all your favorite chips, crisps, fries, biscuits, crackers, and cookies secure.</p>
     <span><wa-icon family="solid" name="check"></wa-icon> In stock and ready to ship</span>
-   
+
 
   </div>
   <div class="div-2">
@@ -398,7 +398,7 @@ TODO Page Description
     /* height: 1000px; */
     /* gap: 1rem; */
     .div-1 {
-   
+
     }
     .div-2 {
       /* background-color: black;
@@ -406,7 +406,7 @@ TODO Page Description
       grid-row: span 2 / span 2; */
     }
     .div-3 {
-   
+
     }
   }
 </style>
@@ -440,10 +440,10 @@ TODO Page Description
 <wa-icon family="brands" name="instagram"></wa-icon>
 <wa-icon family="brands" name="x-twitter"></wa-icon>
   <wa-tab-group>
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
-  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
-  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>
+  <wa-tab panel="general">General</wa-tab>
+  <wa-tab panel="custom">Custom</wa-tab>
+  <wa-tab panel="advanced">Advanced</wa-tab>
+  <wa-tab panel="disabled" disabled>Disabled</wa-tab>
 
   <wa-tab-panel name="general">
     <div></div>
@@ -461,4 +461,4 @@ TODO Page Description
 
 </div>
 
-```
+```

docs/docs/patterns/ecommerce-shopping-cart.md

@@ -1,7 +1,7 @@
 ---
 title: E-commerce - Shopping Cart
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description

docs/docs/patterns/education.md

@@ -1,7 +1,7 @@
 ---
 title: Business
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description

docs/docs/patterns/entertainement.md

@@ -1,7 +1,7 @@
 ---
 title: Entertainment
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description

docs/docs/patterns/membership.md

@@ -1,7 +1,7 @@
 ---
 title: Membership
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description

docs/docs/patterns/news.md

@@ -1,7 +1,7 @@
 ---
 title: News
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description

docs/docs/patterns/non-profit.md

@@ -1,7 +1,7 @@
 ---
 title: Non-profit
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description

docs/docs/patterns/portfilio.md

@@ -1,9 +0,0 @@
----
-title: Business
-description: TODO
-layout: page.njk
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/portfolio.md

@@ -1,7 +1,7 @@
 ---
 title: Portfolio
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description

docs/docs/patterns/product-landing.md

@@ -1,7 +1,7 @@
 ---
 title: Product Landing
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description

docs/docs/resources/accessibility.md

@@ -6,15 +6,15 @@ layout: page
 
 Web Awesome recognizes the need for all users, regardless of ability and device, to have undeterred access to the websites and applications that are created with it. This is an important goal of the project.
 
-Oftentimes, people will ask “is Web Awesome accessible?” I’m reluctant to answer because accessibility isn’t binary — there’s no simple “yes” or “no” response to provide. What seems accessible to a sighted user might be completely inaccessible to a non-sighted user. And even if you optimize for various screen readers, you still have to account for low-level vision, color blindness, hearing impairments, mobility impairments, and more.
+Oftentimes, people will ask “is Web Awesome accessible?” We’re reluctant to answer because accessibility isn’t binary — there’s no simple “yes” or “no” response to provide. What seems accessible to a sighted user might be completely inaccessible to a non-sighted user. And even if you optimize for various screen readers, you still have to account for low-level vision, color blindness, hearing impairments, mobility impairments, and more.
 
 Accessibility is something you have to continuously strive for. No individual contributor — or perhaps even an entire team — can claim their software is 100% accessible because of the sheer diversity of abilities, devices, assistive technologies, and individual use cases.
 
 Furthermore, accessibility doesn’t stop at the component level. Using accessible building blocks doesn’t magically make the rest of your webpage or application compliant. There is no library or overlay that will make your software “fully accessible” without putting in the effort. It’s also worth noting that web components are still somewhat bleeding edge, so browsers, assistive devices, and [even specifications](https://wicg.github.io/aom/spec/) are still evolving to help improve accessibility on the web platform.
 
-My commitment to Web Awesome users is this: Everything I develop will be built with accessibility in mind. I will test and improve every component to the best of my ability and knowledge. I will work around upstream issues, such as browser bugs and limitations, to the best of my ability and within reason.
+My commitment to Web Awesome users is this: Everything we develop will be built with accessibility in mind. We will test and improve every component to the best of our ability and knowledge. We will work around upstream issues, such as browser bugs and limitations, to the best of our ability and within reason.
 
-I’m fully aware that I may not get it right every time for every user, so I invite the community to participate in this ongoing effort by submitting [issues](https://github.com/shoelace-style/shoelace/issues?q=is%3Aissue+is%3Aopen+label%3Aa11y), [pull requests](https://github.com/shoelace-style/shoelace/pulls?q=is%3Aopen+is%3Apr+label%3Aa11y), and [discussions](https://github.com/shoelace-style/shoelace/discussions). Many accessibility improvements have already been made thanks to contributors submitting code, feedback, and suggestions.
+We’re fully aware that we may not get it right every time for every user, so we invite the community to participate in this ongoing effort by submitting [issues](https://github.com/shoelace-style/shoelace/issues?q=is%3Aissue+is%3Aopen+label%3Aa11y), [pull requests](https://github.com/shoelace-style/shoelace/pulls?q=is%3Aopen+is%3Apr+label%3Aa11y), and [discussions](https://github.com/shoelace-style/shoelace/discussions). Many accessibility improvements have already been made thanks to contributors submitting code, feedback, and suggestions.
 
 This is the path forward. Together, we will continue to make Web Awesome accessible to as many users as possible.
 

docs/docs/resources/changelog.md

@@ -12,36 +12,31 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
 During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
 :::
 
-## Next
+## 3.0.0-alpha.5
 
-- Added support for <kbd>Enter</kbd> to `<sl-split-panel>` to align with ARIA APG's [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/)
+- Added the Finnish translation
+- Added the Italian translation
+- Added the Ukrainian translation
+- Added support for <kbd>Enter</kbd> to `<wa-split-panel>` to align with ARIA APG's [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/)
 - Added more resilient support for lazy loaded options in `<wa-select>`
 - Added support for vertical button groups
+- Added the `focus()` method to `<wa-radio-group>`
+- Fixed a bug in `<wa-dialog>` with scroll locking shifting viewports.
+- Fixed a bug in `<wa-dialog>` when using `.show()`
 - Fixed a bug in `<wa-rating>` when using `precision`
+- Fixed a bug in `<wa-rating>` that allowed tabbing into the rating when readonly
 - Fixed a bug in `<wa-relative-time>` where the title attribute would show with redundant info
+- Fixed a bug in `<wa-select>` that caused the placeholder to display incorrectly when using placeholder and multiple
 - Fixed a bug in `<wa-tooltip>` that caused a memory leak in disconnected elements
 - Fixed a bug in `<wa-select>` that prevented label changes in `<wa-option>` from updating the controller
 - Fixed a bug in `<wa-carousel>` that caused interactive elements to be activated when dragging
+- Fixed a bug in `<wa-tab-group>` that prevented changing tabs by setting `active` on `<wa-tab>` elements
+- Fixed a bug in `<wa-tab-group>` that caused an error when removed from the DOM too quickly
+- Fixed a bug in `<wa-textarea>` causing scroll jumping when using `resize="auto"`
+- Fixed a bug with certain bundlers when using dynamic imports
 - Improved alignment of the play icon in `<wa-animated-image>`
 - Improved behavior of link buttons to not set `noreferrer noopener` by default
-
-## 3.0.0-alpha.3
-
-- Added [SSR support](/docs/experimental/ssr/) to all components
-- Added `scroll-margin-top` to children of `wa-page`
-- Added `--scroll-margin-top` css variable `wa-page`
-- Fixed form controls to behave like their native counterparts for value and defaultValue properties / attributes respectively.
-- Fixed a bug in `<wa-input>` around value attributes and properties to behave like native `<input>`.
-- Fixed a bug in `<wa-select>` that made the suffix slot collide with the clear button
-- Fixed a bug in `<wa-checkbox>` where unchecking and then checking would "clear" its value.
-- Fixed a bug where `<wa-relative-time>` would announce the full time instead of the relative time in screen readers [#22](https://github.com/shoelace-style/webawesome-alpha/issues/22)
-- Fixed a bug in `<wa-tab-group>` in Firefox where the overflow container would keep focus. [#14](https://github.com/shoelace-style/webawesome-alpha/issues/14)
-- Fixed a bug in `<wa-input>` where `minlength` and `maxlength` were not being properly validated. [#35](https://github.com/shoelace-style/webawesome-alpha/issues/35)
-- Fixed a bug in `<wa-carousel>` that made pagination work incorrectly
-
-## 3.0.0-alpha.2
-
-- This is the initial release of Web Awesome alpha!
+- Updated all checks for directionality to use `this.localize.dir()` instead of `el.matches(:dir(rtl))` so older browsers don't error out
 
 ---
 
@@ -68,7 +63,7 @@ Here's a list of some of the things that have changed since Shoelace v2. For que
 - Changed the `data-optional`, `data-required`, `data-invalid`, `data-valid`, `data-user-invalid`, and `data-user-valid` states to `data-wa-*` prefix to avoid conflicts with user provided attributes
 - Changed `<wa-icon>` so icons are no longer fixed width by default to accommodate variable width icons
 - Changed `<wa-radio>` from `display: block;` to `display: inline-block`
-- Changed `<wa-tab-group>` to implement a "roving tabindex" and `<wa-tab>` is no longer tabbable by default. This aligns closer to the APG pattern for tabs. [#2041]
+- Changed `<wa-tab-group>` to implement a "roving tabindex" and `<wa-tab>` is no longer tabbable by default. This aligns closer to the APG pattern for tabs [#2041]
 - Changed `<wa-tooltip>` to no longer wrap content due to accessibility and styling issues. Tooltips are now associated using the `for` attribute + an `id` on the trigger [#123]
 - Improved `<wa-spinner>` so it doesn't wobble when zooming in Safari
 - Improved submenu selection by implementing the [safe triangle](https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/) method [#1550]

docs/docs/resources/contributing.md

@@ -97,7 +97,7 @@ The Web Awesome documentation uses an extended version of [markdown-it](https://
 
 #### Code Previews
 
-To render a code preview, use the standard code field syntax and append `:preview` to the language.
+To render a code preview, use the standard code field syntax and add a class of `example`:
 
 ````md
 ```html {.example}
@@ -105,7 +105,11 @@ To render a code preview, use the standard code field syntax and append `:previe
 ```
 ````
 
-You can also append `.open` to expand the code by default, and `.no-edit` to disable the CodePen button. The order of these modifiers doesn't matter, but no spaces should exist between the language and the modifiers.
+You can add additional modifiers as classes or attributes.
+For example, `.open` to expand the code by default.
+The order of these modifiers doesn't matter, but no spaces should exist between them.
+Class name modifiers are turned on by simply using their name as a class (e.g. `open` to expand the code by default),
+and turned off by using `no-` followed by the class name (e.g. `no-edit` to hide the edit button).
 
 ````md
 ```html {.example .open .no-edit}
@@ -113,12 +117,23 @@ You can also append `.open` to expand the code by default, and `.no-edit` to dis
 ```
 ````
 
+the class modifiers currently supported are:
+- `open` - expands the code (default: true for the first code example in the page, false for all others)
+- `new` - Uses `<wa-code-demo>` (default: true). Disable to use the old, non-component demo code.
+- `edit` - Enable the CodePen button (default: true) _(old only)_
+
+The `viewport` and `include` attributes of [`<wa-code-demo>`](../components/code-demo/) can also be specified.
+By default, `include` is set to `link[rel=stylesheet]` to include all stylesheets on the page for non-isolated demos,
+and `link[rel=stylesheet][href^="/dist/"]` for isolated demos.
+Attributes are specified as described in the [`markdown-it-attrs` documentation](https://www.npmjs.com/package/markdown-it-attrs).
+
 This particular syntax was chosen for a few reasons:
 
 1. It's easy to remember
 2. It works out of the box with markdown-it
 3. It appears to have the best support across editors and previewers (the language is usually highlighted correctly)
 
+
 #### Callouts
 
 Special callouts can be added using the following syntax.
@@ -386,4 +401,4 @@ or for hydrated rendering only:
 
 ```bash
 SSR_ONLY="true" npm run test
-```
+```

docs/docs/theming/color.md

@@ -65,7 +65,7 @@ Lightness values on this scale have a strong correlation to [relative luminance]
 - A difference of 50 ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA)
 - A difference of 60 ensures a minimum 7:1 contrast ratio, suitable for all text (AAA)
 
-Web Awesome defines seven literal colors each with 11 lightness values using the format `--wa-color-{name}-{#}`.
+Web Awesome defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
 
 <div class="color-name">Red</div>
 <ul class="color-group">
@@ -549,4 +549,4 @@ Finally, each color is named according to how much attention it draws. Here, we
 
     swatch.appendChild(copyButton)
   })
-</script>
+</script>

docs/index.md

@@ -4,6 +4,8 @@ description: Build better with Web Awesome, the open source library of web compo
 layout: page
 ---
 
+
+
 <style>
   .title,
   .anchor-heading a,
@@ -207,7 +209,7 @@ layout: page
     & > * + * {
       flex-grow: 1;
     }
-    & wa-callout::part(base),
+    & wa-callout,
     & wa-button::part(base) {
       height: 100%;
       width: 100%;
@@ -386,4 +388,4 @@ layout: page
       &copy; Fonticons, Inc.
     </div>
   </footer>
-</div>
+</div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shoelace-style/webawesome",
   "description": "A forward-thinking library of web components.",
-  "version": "3.0.0-alpha.4",
+  "version": "3.0.0-alpha.5",
   "homepage": "https://webawesome.com/",
   "author": "Web Awesome",
   "license": "MIT",
@@ -18,10 +18,13 @@
     "./dist/custom-elements.json": "./dist/custom-elements.json",
     "./dist/webawesome.js": "./dist/webawesome.js",
     "./dist/webawesome.loader.js": "./dist/webawesome.loader.js",
+    "./dist/themes": "./dist/themes",
     "./dist/themes/*": "./dist/themes/*",
+    "./dist/components": "./dist/components",
     "./dist/components/*": "./dist/components/*",
     "./dist/react": "./dist/react/index.js",
     "./dist/react/*": "./dist/react/*",
+    "./dist/translations": "./dist/translations",
     "./dist/translations/*": "./dist/translations/*"
   },
   "files": [
@@ -73,14 +76,13 @@
   "devDependencies": {
     "@11ty/eleventy": "3.0.0-alpha.5",
     "@custom-elements-manifest/analyzer": "^0.9.4",
+    "@konnorr/esbuild-plugin-lit-css": "^1.0.1",
     "@lit-labs/eleventy-plugin-lit": "^1.0.3",
     "@lit-labs/testing": "^0.2.4",
     "@lit/react": "^1.0.0",
     "@open-wc/testing": "^3.2.0",
     "@types/mocha": "^10.0.2",
     "@types/react": "^18.2.28",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.7.5",
     "@web/dev-server-esbuild": "^0.3.6",
     "@web/test-runner": "^0.18.1",
     "@web/test-runner-commands": "^0.9.0",
@@ -99,15 +101,6 @@
     "download": "^8.0.0",
     "esbuild": "^0.19.4",
     "esbuild-plugin-replace": "^1.4.0",
-    "eslint": "^8.51.0",
-    "eslint-plugin-chai-expect": "^3.0.0",
-    "eslint-plugin-chai-friendly": "^0.7.2",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-lit": "^1.9.1",
-    "eslint-plugin-lit-a11y": "^4.1.0",
-    "eslint-plugin-markdown": "^3.0.1",
-    "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
-    "eslint-plugin-wc": "^2.0.4",
     "front-matter": "^4.0.2",
     "get-port": "^7.0.0",
     "globby": "^13.2.2",

prettier.config.js

@@ -14,7 +14,9 @@ const config = {
   singleQuote: true,
   tabWidth: 2,
   trailingComma: 'none',
-  useTabs: false
+  useTabs: false,
+  organizeImportsSkipDestructiveCodeActions: true,
+  plugins: ['prettier-plugin-organize-imports']
 };
 
 export default config;

scripts/build.js

@@ -13,6 +13,7 @@ import esbuild from 'esbuild';
 import getPort, { portNumbers } from 'get-port';
 import ora from 'ora';
 import process from 'process';
+import { litCssPlugin } from '@konnorr/esbuild-plugin-lit-css';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const isDeveloping = process.argv.includes('--develop');
@@ -106,10 +107,11 @@ async function generateStyles() {
   // NOTE - alpha setting omits all stylesheets except for these because we use them in the docs
   if (isAlpha) {
     await copy(join(rootDir, 'src/themes/applied.css'), join(cdnDir, 'themes/applied.css'), { overwrite: true });
-    await copy(join(rootDir, 'src/themes/color_standard.css'), join(cdnDir, 'themes/color_standard.css'), {
-      overwrite: true
-    });
+    await copy(join(rootDir, 'src/themes/classic.css'), join(cdnDir, 'themes/classic.css'), { overwrite: true });
     await copy(join(rootDir, 'src/themes/default.css'), join(cdnDir, 'themes/default.css'), { overwrite: true });
+    await copy(join(rootDir, 'src/themes/forms.css'), join(cdnDir, 'themes/forms.css'), { overwrite: true });
+    await copy(join(rootDir, 'src/themes/layout.css'), join(cdnDir, 'themes/layout.css'), { overwrite: true });
+    await copy(join(rootDir, 'src/themes/utilities.css'), join(cdnDir, 'themes/utilities.css'), { overwrite: true });
   } else {
     await copy(join(rootDir, 'src/themes'), join(cdnDir, 'themes'), { overwrite: true });
   }
@@ -170,7 +172,10 @@ async function generateBundle() {
     bundle: true,
     splitting: true,
     minify: false,
-    plugins: [replace({ __WEBAWESOME_VERSION__: version })]
+    plugins: [replace({ __WEBAWESOME_VERSION__: version }), litCssPlugin()],
+    loader: {
+      '.css': 'text'
+    }
   };
 
   const unbundledConfig = {
@@ -288,12 +293,18 @@ if (isDeveloping) {
       callbacks: {
         ready: (_err, instance) => {
           // 404 errors
-          instance.addMiddleware('*', (req, res) => {
+          instance.addMiddleware('*', async (req, res) => {
             if (req.url.toLowerCase().endsWith('.svg')) {
               // Make sure SVGs error out in dev instead of serve the 404 page
               res.writeHead(404);
             } else {
-              res.writeHead(302, { location: '/404.html' });
+              try {
+                const notFoundTemplate = await readFile(join(siteDir, '404.html'), 'utf-8');
+                res.writeHead(404);
+                res.write(notFoundTemplate || 'Page Not Found');
+              } catch {
+                // We're probably disconnected for some reason, so fail gracefully
+              }
             }
 
             res.end();

src/components/animated-image/animated-image.css

@@ -0,0 +1,50 @@
+:host {
+  --control-box-size: 3rem;
+  --icon-size: calc(var(--control-box-size) * 0.625);
+
+  display: inline-flex;
+  position: relative;
+  cursor: pointer;
+}
+
+img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+img[aria-hidden='true'] {
+  display: none;
+}
+
+.animated-image__control-box {
+  display: flex;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  top: calc(50% - var(--control-box-size) / 2);
+  right: calc(50% - var(--control-box-size) / 2);
+  width: var(--control-box-size);
+  height: var(--control-box-size);
+  font-size: calc(var(--icon-size) * 0.75);
+  background: none;
+  border: solid var(--wa-border-width-s) currentColor;
+  background-color: rgb(0 0 0 / 50%);
+  border-radius: var(--wa-border-radius-circle);
+  color: white;
+  pointer-events: none;
+  transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
+}
+
+:host([play]:hover) .animated-image__control-box {
+  opacity: 1;
+}
+
+:host([play]:not(:hover)) .animated-image__control-box {
+  opacity: 0;
+}
+
+:host([play]) slot[name='play-icon'],
+:host(:not([play])) slot[name='pause-icon'] {
+  display: none;
+}

src/components/animated-image/animated-image.styles.ts

@@ -1,54 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    --control-box-size: 3rem;
-    --icon-size: calc(var(--control-box-size) * 0.625);
-
-    display: inline-flex;
-    position: relative;
-    cursor: pointer;
-  }
-
-  img {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-
-  img[aria-hidden='true'] {
-    display: none;
-  }
-
-  .animated-image__control-box {
-    display: flex;
-    position: absolute;
-    align-items: center;
-    justify-content: center;
-    top: calc(50% - var(--control-box-size) / 2);
-    right: calc(50% - var(--control-box-size) / 2);
-    width: var(--control-box-size);
-    height: var(--control-box-size);
-    font-size: calc(var(--icon-size) * 0.75);
-    background: none;
-    border: solid var(--wa-border-width-s) currentColor;
-    background-color: rgb(0 0 0 / 50%);
-    border-radius: var(--wa-border-radius-circle);
-    color: white;
-    pointer-events: none;
-    transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
-  }
-
-  :host([play]:hover) .animated-image__control-box {
-    opacity: 1;
-  }
-
-  :host([play]:not(:hover)) .animated-image__control-box {
-    opacity: 0;
-  }
-
-  :host([play]) slot[name='play-icon'],
-  :host(:not([play])) slot[name='pause-icon'] {
-    display: none;
-  }
-`;

src/components/animated-image/animated-image.ts

@@ -4,10 +4,8 @@ import { html } from 'lit';
 import { WaErrorEvent } from '../../events/error.js';
 import { WaLoadEvent } from '../../events/load.js';
 import { watch } from '../../internal/watch.js';
-import componentStyles from '../../styles/component.styles.js';
-import styles from './animated-image.styles.js';
+import styles from './animated-image.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction.
@@ -30,7 +28,7 @@ import type { CSSResultGroup } from 'lit';
  */
 @customElement('wa-animated-image')
 export default class WaAnimatedImage extends WebAwesomeElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
+  static shadowStyle = styles;
 
   @query('.animated-image__animated') animatedImage: HTMLImageElement;
 

src/components/animation/animation.css

@@ -0,0 +1,3 @@
+:host {
+  display: contents;
+}

src/components/animation/animation.styles.ts

@@ -1,7 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    display: contents;
-  }
-`;

src/components/animation/animation.ts

@@ -5,10 +5,8 @@ import { WaCancelEvent } from '../../events/cancel.js';
 import { WaFinishEvent } from '../../events/finish.js';
 import { WaStartEvent } from '../../events/start.js';
 import { watch } from '../../internal/watch.js';
-import componentStyles from '../../styles/component.styles.js';
-import styles from './animation.styles.js';
+import styles from './animation.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
@@ -25,7 +23,7 @@ import type { CSSResultGroup } from 'lit';
  */
 @customElement('wa-animation')
 export default class WaAnimation extends WebAwesomeElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
+  static shadowStyle = styles;
 
   private animation?: Animation;
   private hasStarted = false;

src/components/avatar/avatar.css

@@ -0,0 +1,63 @@
+:host {
+  --background-color: var(--wa-color-neutral-fill-normal);
+  --content-color: var(--wa-color-neutral-on-normal);
+  --size: 3rem;
+
+  display: inline-block;
+}
+
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: var(--size);
+  height: var(--size);
+  background-color: var(--background-color);
+  font: inherit;
+  font-size: calc(var(--size) * 0.4);
+  color: var(--content-color);
+  user-select: none;
+  -webkit-user-select: none;
+  vertical-align: middle;
+}
+
+.avatar--circle,
+.avatar--circle .avatar__image {
+  border-radius: var(--wa-border-radius-circle);
+}
+
+.avatar--rounded,
+.avatar--rounded .avatar__image {
+  border-radius: var(--wa-border-radius-s);
+}
+
+.avatar--square {
+  border-radius: 0;
+}
+
+.avatar__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.avatar__initials {
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.avatar__image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  overflow: hidden;
+}

src/components/avatar/avatar.styles.ts

@@ -1,67 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    --background-color: var(--wa-color-neutral-fill-normal);
-    --content-color: var(--wa-color-neutral-on-normal);
-    --size: 3rem;
-
-    display: inline-block;
-  }
-
-  .avatar {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    width: var(--size);
-    height: var(--size);
-    background-color: var(--background-color);
-    font: inherit;
-    font-size: calc(var(--size) * 0.4);
-    color: var(--content-color);
-    user-select: none;
-    -webkit-user-select: none;
-    vertical-align: middle;
-  }
-
-  .avatar--circle,
-  .avatar--circle .avatar__image {
-    border-radius: var(--wa-border-radius-circle);
-  }
-
-  .avatar--rounded,
-  .avatar--rounded .avatar__image {
-    border-radius: var(--wa-border-radius-s);
-  }
-
-  .avatar--square {
-    border-radius: 0;
-  }
-
-  .avatar__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .avatar__initials {
-    line-height: 1;
-    text-transform: uppercase;
-  }
-
-  .avatar__image {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    overflow: hidden;
-  }
-`;

src/components/avatar/avatar.ts

@@ -4,10 +4,8 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { html } from 'lit';
 import { WaErrorEvent } from '../../events/error.js';
 import { watch } from '../../internal/watch.js';
-import componentStyles from '../../styles/component.styles.js';
-import styles from './avatar.styles.js';
+import styles from './avatar.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Avatars are used to represent a person or object.
@@ -33,7 +31,7 @@ import type { CSSResultGroup } from 'lit';
  */
 @customElement('wa-avatar')
 export default class WaAvatar extends WebAwesomeElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
+  static shadowStyle = styles;
 
   @state() private hasError = false;
 

src/components/badge/badge.css

@@ -0,0 +1,77 @@
+:host {
+  --border-color: var(--background-color);
+  --border-radius: var(--wa-border-radius-xs);
+  --border-style: var(--wa-border-style);
+  --border-width: var(--wa-border-width-s);
+
+  display: inline-flex;
+}
+
+:host([variant='brand']) {
+  --background-color: var(--wa-color-brand-fill-loud);
+  --content-color: var(--wa-color-brand-on-loud);
+}
+
+:host([variant='success']) {
+  --background-color: var(--wa-color-success-fill-loud);
+  --content-color: var(--wa-color-success-on-loud);
+}
+
+:host([variant='warning']) {
+  --background-color: var(--wa-color-warning-fill-loud);
+  --content-color: var(--wa-color-warning-on-loud);
+}
+
+:host([variant='neutral']) {
+  --background-color: var(--wa-color-neutral-fill-loud);
+  --content-color: var(--wa-color-neutral-on-loud);
+}
+
+:host([variant='danger']) {
+  --background-color: var(--wa-color-danger-fill-loud);
+  --content-color: var(--wa-color-danger-on-loud);
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: max(var(--wa-font-size-2xs), 0.75em);
+  font-weight: var(--wa-font-weight-semibold);
+  line-height: 1;
+  background-color: var(--background-color);
+  border-color: var(--border-color);
+  border-radius: var(--border-radius);
+  border-style: var(--border-style);
+  border-width: var(--border-width);
+  color: var(--content-color);
+  white-space: nowrap;
+  padding: 0.375em 0.625em;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: inherit;
+}
+
+/* Pill modifier */
+.badge--pill {
+  border-radius: var(--wa-border-radius-pill);
+}
+
+/* Pulse modifier */
+.badge--pulse {
+  --pulse-color: var(--background-color);
+
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 var(--pulse-color);
+  }
+  70% {
+    box-shadow: 0 0 0 0.5rem transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}

src/components/badge/badge.styles.ts

@@ -1,81 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    --border-color: var(--background-color);
-    --border-radius: var(--wa-border-radius-xs);
-    --border-style: var(--wa-border-style);
-    --border-width: var(--wa-border-width-s);
-
-    display: inline-flex;
-  }
-
-  :host([variant='brand']) {
-    --background-color: var(--wa-color-brand-fill-loud);
-    --content-color: var(--wa-color-brand-on-loud);
-  }
-
-  :host([variant='success']) {
-    --background-color: var(--wa-color-success-fill-loud);
-    --content-color: var(--wa-color-success-on-loud);
-  }
-
-  :host([variant='warning']) {
-    --background-color: var(--wa-color-warning-fill-loud);
-    --content-color: var(--wa-color-warning-on-loud);
-  }
-
-  :host([variant='neutral']) {
-    --background-color: var(--wa-color-neutral-fill-loud);
-    --content-color: var(--wa-color-neutral-on-loud);
-  }
-
-  :host([variant='danger']) {
-    --background-color: var(--wa-color-danger-fill-loud);
-    --content-color: var(--wa-color-danger-on-loud);
-  }
-
-  .badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: max(var(--wa-font-size-2xs), 0.75em);
-    font-weight: var(--wa-font-weight-semibold);
-    line-height: 1;
-    background-color: var(--background-color);
-    border-color: var(--border-color);
-    border-radius: var(--border-radius);
-    border-style: var(--border-style);
-    border-width: var(--border-width);
-    color: var(--content-color);
-    white-space: nowrap;
-    padding: 0.375em 0.625em;
-    user-select: none;
-    -webkit-user-select: none;
-    cursor: inherit;
-  }
-
-  /* Pill modifier */
-  .badge--pill {
-    border-radius: var(--wa-border-radius-pill);
-  }
-
-  /* Pulse modifier */
-  .badge--pulse {
-    --pulse-color: var(--background-color);
-
-    animation: pulse 1.5s infinite;
-  }
-
-  @keyframes pulse {
-    0% {
-      box-shadow: 0 0 0 0 var(--pulse-color);
-    }
-    70% {
-      box-shadow: 0 0 0 0.5rem transparent;
-    }
-    100% {
-      box-shadow: 0 0 0 0 transparent;
-    }
-  }
-`;

src/components/badge/badge.ts

@@ -1,10 +1,8 @@
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
-import styles from './badge.styles.js';
+import styles from './badge.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Badges are used to draw attention and display statuses or counts.
@@ -25,7 +23,7 @@ import type { CSSResultGroup } from 'lit';
  */
 @customElement('wa-badge')
 export default class WaBadge extends WebAwesomeElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
+  static shadowStyle = styles;
 
   /** The badge's theme variant. */
   @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';

src/components/breadcrumb-item/breadcrumb-item.css

@@ -0,0 +1,83 @@
+:host {
+  color: var(--wa-color-text-link);
+  display: inline-flex;
+}
+
+:host(:last-of-type) {
+  color: var(--wa-color-text-quiet);
+}
+
+.breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  font: inherit;
+  font-weight: var(--wa-font-weight-action);
+  line-height: var(--wa-line-height-normal);
+  white-space: nowrap;
+}
+
+.breadcrumb-item__label {
+  display: inline-block;
+  font: inherit;
+  text-decoration: none;
+  color: currentColor;
+  background: none;
+  border: none;
+  border-radius: var(--wa-border-radius-s);
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  transition: color var(--wa-transition-normal) var(--wa-transition-easing);
+}
+
+:host(:not(:last-of-type)) .breadcrumb-item__label:hover {
+  color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+}
+
+:host(:not(:last-of-type)) .breadcrumb-item__label:active {
+  color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
+}
+
+.breadcrumb-item__label:focus {
+  outline: none;
+}
+
+.breadcrumb-item__label:focus-visible {
+  outline: var(--wa-focus-ring);
+  outline-offset: var(--wa-focus-ring-offset);
+}
+
+.breadcrumb-item__prefix,
+.breadcrumb-item__suffix {
+  display: none;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb-item__prefix,
+.breadcrumb-item__suffix {
+  display: inline-flex;
+  color: var(--wa-color-text-quiet);
+}
+
+::slotted([slot='prefix']) {
+  margin-inline-end: var(--wa-space-s);
+}
+
+::slotted([slot='suffix']) {
+  margin-inline-start: var(--wa-space-s);
+}
+
+:host(:last-of-type) .breadcrumb-item__separator {
+  display: none;
+}
+
+.breadcrumb-item__separator {
+  color: var(--wa-color-text-quiet);
+  display: inline-flex;
+  align-items: center;
+  margin: 0 var(--wa-space-s);
+  user-select: none;
+  -webkit-user-select: none;
+}

src/components/breadcrumb-item/breadcrumb-item.styles.ts

@@ -1,87 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    color: var(--wa-color-text-link);
-    display: inline-flex;
-  }
-
-  :host(:last-of-type) {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .breadcrumb-item {
-    display: inline-flex;
-    align-items: center;
-    font: inherit;
-    font-weight: var(--wa-font-weight-action);
-    line-height: var(--wa-line-height-normal);
-    white-space: nowrap;
-  }
-
-  .breadcrumb-item__label {
-    display: inline-block;
-    font: inherit;
-    text-decoration: none;
-    color: currentColor;
-    background: none;
-    border: none;
-    border-radius: var(--wa-border-radius-s);
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    transition: color var(--wa-transition-normal) var(--wa-transition-easing);
-  }
-
-  :host(:not(:last-of-type)) .breadcrumb-item__label:hover {
-    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
-  }
-
-  :host(:not(:last-of-type)) .breadcrumb-item__label:active {
-    color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
-  }
-
-  .breadcrumb-item__label:focus {
-    outline: none;
-  }
-
-  .breadcrumb-item__label:focus-visible {
-    outline: var(--wa-focus-ring);
-    outline-offset: var(--wa-focus-ring-offset);
-  }
-
-  .breadcrumb-item__prefix,
-  .breadcrumb-item__suffix {
-    display: none;
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .breadcrumb-item__prefix,
-  .breadcrumb-item__suffix {
-    display: inline-flex;
-    color: var(--wa-color-text-quiet);
-  }
-
-  ::slotted([slot='prefix']) {
-    margin-inline-end: var(--wa-space-s);
-  }
-
-  ::slotted([slot='suffix']) {
-    margin-inline-start: var(--wa-space-s);
-  }
-
-  :host(:last-of-type) .breadcrumb-item__separator {
-    display: none;
-  }
-
-  .breadcrumb-item__separator {
-    color: var(--wa-color-text-quiet);
-    display: inline-flex;
-    align-items: center;
-    margin: 0 var(--wa-space-s);
-    user-select: none;
-    -webkit-user-select: none;
-  }
-`;

src/components/breadcrumb-item/breadcrumb-item.ts

@@ -2,10 +2,8 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { watch } from '../../internal/watch.js';
-import componentStyles from '../../styles/component.styles.js';
-import styles from './breadcrumb-item.styles.js';
+import styles from './breadcrumb-item.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Breadcrumb Items are used inside [breadcrumbs](/docs/components/breadcrumb) to represent different links.
@@ -27,7 +25,7 @@ import type { CSSResultGroup } from 'lit';
  */
 @customElement('wa-breadcrumb-item')
 export default class WaBreadcrumbItem extends WebAwesomeElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
+  static shadowStyle = styles;
 
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
 

src/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,5 @@
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}

src/components/breadcrumb/breadcrumb.styles.ts

@@ -1,9 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .breadcrumb {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-`;

src/components/breadcrumb/breadcrumb.ts

@@ -2,10 +2,8 @@ import '../icon/icon.js';
 import { customElement, property, query } from 'lit/decorators.js';
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';
-import componentStyles from '../../styles/component.styles.js';
-import styles from './breadcrumb.styles.js';
+import styles from './breadcrumb.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import type { CSSResultGroup } from 'lit';
 import type WaBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.js';
 
 /**
@@ -23,7 +21,7 @@ import type WaBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.js';
  */
 @customElement('wa-breadcrumb')
 export default class WaBreadcrumb extends WebAwesomeElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
+  static shadowStyle = styles;
 
   private readonly localize = new LocalizeController(this);
   private separatorDir = this.localize.dir();

src/components/button-group/button-group.css

@@ -0,0 +1,19 @@
+:host {
+  display: inline-flex;
+}
+
+.button-group {
+  display: flex;
+  position: relative;
+  flex-wrap: wrap;
+  isolation: isolate;
+}
+
+:host([orientation='vertical']) .button-group {
+  flex-direction: column;
+}
+
+/* Show the focus indicator above other buttons */
+::slotted(:focus) {
+  z-index: 1 !important;
+}

src/components/button-group/button-group.styles.ts

@@ -1,23 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    display: inline-flex;
-  }
-
-  .button-group {
-    display: flex;
-    position: relative;
-    flex-wrap: wrap;
-    isolation: isolate;
-  }
-
-  :host([orientation='vertical']) .button-group {
-    flex-direction: column;
-  }
-
-  /* Show the focus indicator above other buttons */
-  ::slotted(:focus) {
-    z-index: 1 !important;
-  }
-`;

src/components/button-group/button-group.ts

@@ -1,9 +1,7 @@
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
-import componentStyles from '../../styles/component.styles.js';
-import styles from './button-group.styles.js';
+import styles from './button-group.css';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Button groups can be used to group related buttons into sections.
@@ -17,7 +15,7 @@ import type { CSSResultGroup } from 'lit';
  */
 @customElement('wa-button-group')
 export default class WaButtonGroup extends WebAwesomeElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
+  static shadowStyle = styles;
 
   @query('slot') defaultSlot: HTMLSlotElement;
 

src/components/button/button.css

@@ -0,0 +1,545 @@
+:host {
+  --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
+  --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
+  --border-color: initial;
+  --border-color-hover: var(--border-color);
+  --border-color-active: var(--border-color);
+  --border-radius: var(--wa-form-control-border-radius);
+  --border-style: var(--wa-border-style);
+  --border-width: var(--wa-form-control-border-width);
+  --box-shadow: initial;
+  --label-color-hover: var(--label-color);
+  --label-color-active: var(--label-color);
+
+  display: inline-block;
+  position: relative;
+  width: auto;
+  cursor: pointer;
+}
+
+/*
+   * Filled buttons
+   */
+
+:host([appearance='filled'][variant='neutral']) {
+  --background-color: var(--wa-color-neutral-fill-loud);
+  --label-color: var(--wa-color-neutral-on-loud);
+}
+
+:host([appearance='filled'][variant='brand']) {
+  --background-color: var(--wa-color-brand-fill-loud);
+  --label-color: var(--wa-color-brand-on-loud);
+}
+
+:host([appearance='filled'][variant='success']) {
+  --background-color: var(--wa-color-success-fill-loud);
+  --label-color: var(--wa-color-success-on-loud);
+}
+
+:host([appearance='filled'][variant='warning']) {
+  --background-color: var(--wa-color-warning-fill-loud);
+  --label-color: var(--wa-color-warning-on-loud);
+}
+
+:host([appearance='filled'][variant='danger']) {
+  --background-color: var(--wa-color-danger-fill-loud);
+  --label-color: var(--wa-color-danger-on-loud);
+}
+
+/*
+   * Tinted buttons
+   */
+
+:host([appearance='tinted']) {
+  --background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%);
+  --background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
+}
+
+:host([appearance='tinted'][variant='neutral']) {
+  --background-color: var(--wa-color-neutral-fill-normal);
+  --label-color: var(--wa-color-neutral-on-normal);
+}
+
+:host([appearance='tinted'][variant='brand']) {
+  --background-color: var(--wa-color-brand-fill-normal);
+  --label-color: var(--wa-color-brand-on-normal);
+}
+
+:host([appearance='tinted'][variant='success']) {
+  --background-color: var(--wa-color-success-fill-normal);
+  --label-color: var(--wa-color-success-on-normal);
+}
+
+:host([appearance='tinted'][variant='warning']) {
+  --background-color: var(--wa-color-warning-fill-normal);
+  --label-color: var(--wa-color-warning-on-normal);
+}
+
+:host([appearance='tinted'][variant='danger']) {
+  --background-color: var(--wa-color-danger-fill-normal);
+  --label-color: var(--wa-color-danger-on-normal);
+}
+
+/*
+   * Outlined buttons
+   */
+
+:host([appearance='outlined']),
+:host(.wa-button-group__button--radio:not([checked])) {
+  --background-color: transparent;
+  --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
+}
+
+:host([appearance='outlined'][variant='neutral']),
+:host(.wa-button-group__button--radio:not([checked])) {
+  --background-color-hover: var(--wa-color-neutral-fill-quiet);
+  --border-color: var(--wa-color-neutral-border-loud);
+  --label-color: var(--wa-color-neutral-on-quiet);
+}
+
+:host([appearance='outlined'][variant='brand']) {
+  --background-color-hover: var(--wa-color-brand-fill-quiet);
+  --border-color: var(--wa-color-brand-border-loud);
+  --label-color: var(--wa-color-brand-on-quiet);
+}
+
+:host([appearance='outlined'][variant='success']) {
+  --background-color-hover: var(--wa-color-success-fill-quiet);
+  --border-color: var(--wa-color-success-border-loud);
+  --label-color: var(--wa-color-success-on-quiet);
+}
+
+:host([appearance='outlined'][variant='warning']) {
+  --background-color-hover: var(--wa-color-warning-fill-quiet);
+  --border-color: var(--wa-color-warning-border-loud);
+  --label-color: var(--wa-color-warning-on-quiet);
+}
+
+:host([appearance='outlined'][variant='danger']) {
+  --background-color-hover: var(--wa-color-danger-fill-quiet);
+  --border-color: var(--wa-color-danger-border-loud);
+  --label-color: var(--wa-color-danger-on-quiet);
+}
+
+/*
+   * Text buttons
+   */
+
+:host([appearance='text']) {
+  --background-color: transparent;
+  --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
+}
+
+:host([appearance='text'][variant='neutral']) {
+  --label-color: var(--wa-color-neutral-on-quiet);
+  --background-color-hover: var(--wa-color-neutral-fill-quiet);
+}
+
+:host([appearance='text'][variant='brand']) {
+  --label-color: var(--wa-color-brand-on-quiet);
+  --background-color-hover: var(--wa-color-brand-fill-quiet);
+}
+
+:host([appearance='text'][variant='success']) {
+  --label-color: var(--wa-color-success-on-quiet);
+  --background-color-hover: var(--wa-color-success-fill-quiet);
+}
+
+:host([appearance='text'][variant='warning']) {
+  --label-color: var(--wa-color-warning-on-quiet);
+  --background-color-hover: var(--wa-color-warning-fill-quiet);
+}
+
+:host([appearance='text'][variant='danger']) {
+  --label-color: var(--wa-color-danger-on-quiet);
+  --background-color-hover: var(--wa-color-danger-fill-quiet);
+}
+
+/*
+   * Checked buttons
+   */
+
+:host([checked]) {
+  --background-color: var(--wa-color-brand-fill-quiet);
+  --background-color-hover: var(--background-color);
+  --border-color: var(--wa-form-control-activated-color);
+  --label-color: var(--wa-color-brand-on-normal);
+  --indicator-color: var(--border-color);
+  --indicator-width: var(--wa-border-width-s);
+}
+
+/*
+   * Sizes
+   */
+
+:host([size='small']) {
+  font-size: var(--wa-font-size-s);
+}
+
+:host([size='medium']) {
+  font-size: var(--wa-font-size-m);
+}
+
+:host([size='large']) {
+  font-size: var(--wa-font-size-l);
+}
+
+/*
+   * Internal
+   */
+
+.button {
+  background-color: var(--background-color);
+  border-color: var(--border-color, var(--background-color));
+  border-radius: var(--border-radius);
+  border-style: var(--border-style);
+  border-width: max(1px, var(--border-width));
+  box-shadow: var(--box-shadow);
+  color: var(--label-color);
+  display: inline-flex;
+  align-items: stretch;
+  justify-content: center;
+  width: 100%;
+  font: inherit;
+  font-weight: var(--wa-font-weight-action);
+  text-decoration: none;
+  user-select: none;
+  -webkit-user-select: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  padding: 0;
+  transition:
+    background var(--wa-transition-fast) var(--wa-transition-easing),
+    border var(--wa-transition-fast) var(--wa-transition-easing),
+    box-shadow var(--wa-transition-fast) var(--wa-transition-easing),
+    color var(--wa-transition-fast) var(--wa-transition-easing);
+  cursor: inherit;
+}
+
+.button--checked {
+  box-shadow:
+    var(--box-shadow, 0 0 transparent),
+    inset 0 0 0 var(--indicator-width) var(--indicator-color);
+}
+
+/*
+   * States
+   */
+
+.button::-moz-focus-inner {
+  border: 0;
+}
+
+.button:focus {
+  outline: none;
+}
+
+.button:focus-visible {
+  outline: var(--wa-focus-ring);
+  outline-offset: var(--wa-focus-ring-offset);
+}
+
+.button--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* When disabled, prevent mouse events from bubbling up from children */
+.button--disabled * {
+  pointer-events: none;
+}
+
+.button:hover:not(.button--disabled, .button--loading) {
+  background-color: var(--background-color-hover, var(--background-color, none));
+  border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
+  color: var(--label-color-hover, var(--label-color));
+}
+
+.button:active:not(.button--disabled, .button--loading) {
+  background-color: var(--background-color-active, var(--background-color, none));
+  border-color: var(--border-color-active, var(--border-color, var(--background-color-active)));
+  color: var(--label-color-active, var(--label-color));
+}
+
+@media (forced-colors: active) {
+  .button.button--outlined.button--checked:not(.button--disabled) {
+    outline: solid 2px transparent;
+  }
+}
+
+/*
+   * Label
+   */
+
+.button__prefix,
+.button__suffix {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+
+.button__label {
+  display: inline-block;
+}
+
+.button__label::slotted(wa-icon) {
+  vertical-align: -2px;
+}
+
+/*
+   * Size modifiers
+   */
+
+.button--small {
+  height: var(--wa-form-control-height-s);
+  line-height: calc(var(--wa-form-control-height-s) - var(--border-width) * 2);
+}
+
+.button--medium {
+  height: var(--wa-form-control-height-m);
+  line-height: calc(var(--wa-form-control-height-m) - var(--border-width) * 2);
+}
+
+.button--large {
+  height: var(--wa-form-control-height-l);
+  line-height: calc(var(--wa-form-control-height-l) - var(--border-width) * 2);
+}
+
+/*
+   * Pill modifier
+   */
+
+.button--pill.button--small {
+  border-radius: var(--wa-border-radius-pill);
+}
+
+.button--pill.button--medium {
+  border-radius: var(--wa-border-radius-pill);
+}
+
+.button--pill.button--large {
+  border-radius: var(--wa-border-radius-pill);
+}
+
+/*
+   * Caret modifier
+   */
+
+.button--caret .button__suffix {
+  display: none;
+}
+
+.button--caret .button__caret {
+  display: flex;
+  align-self: center;
+  align-items: center;
+}
+
+.button--caret .button__caret::part(svg) {
+  width: 0.875em;
+  height: 0.875em;
+}
+
+/*
+   * Loading modifier
+   */
+
+.button--loading {
+  position: relative;
+  cursor: wait;
+}
+
+.button--loading .button__prefix,
+.button--loading .button__label,
+.button--loading .button__suffix,
+.button--loading .button__caret {
+  visibility: hidden;
+}
+
+.button--loading wa-spinner {
+  --indicator-color: currentColor;
+  --track-color: color-mix(in oklab, currentColor, transparent 90%);
+  position: absolute;
+  font-size: 1em;
+  height: 1em;
+  width: 1em;
+  top: calc(50% - 0.5em);
+  left: calc(50% - 0.5em);
+}
+
+/*
+   * Badges
+   */
+
+.button ::slotted(wa-badge) {
+  --border-color: var(--wa-color-surface-default);
+  position: absolute;
+  top: 0;
+  right: 0;
+  translate: 50% -50%;
+  pointer-events: none;
+}
+
+.button--rtl ::slotted(wa-badge) {
+  right: auto;
+  left: 0;
+  translate: -50% -50%;
+}
+
+/*
+   * Button spacing
+   */
+
+.button--small {
+  padding: 0 var(--wa-space-s);
+}
+
+.button--medium {
+  padding: 0 var(--wa-space-m);
+}
+
+.button--large {
+  padding: 0 var(--wa-space-l);
+}
+
+.button--small ::slotted([slot='prefix']) {
+  margin-inline-end: var(--wa-space-s);
+}
+
+.button--medium ::slotted([slot='prefix']) {
+  margin-inline-end: var(--wa-space-m);
+}
+
+.button--large ::slotted([slot='prefix']) {
+  margin-inline-end: var(--wa-space-l);
+}
+
+.button--small ::slotted([slot='suffix']),
+.button--small.button--caret:not(.button--visually-hidden-label) .button__caret {
+  margin-inline-start: var(--wa-space-s);
+}
+
+.button--medium ::slotted([slot='suffix']),
+.button--medium.button--caret:not(.button--visually-hidden-label) .button__caret {
+  margin-inline-start: var(--wa-space-m);
+}
+
+.button--large ::slotted([slot='suffix']),
+.button--large.button--caret:not(.button--visually-hidden-label) .button__caret {
+  margin-inline-start: var(--wa-space-l);
+}
+
+/*
+   * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
+   * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
+   * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
+   * buttons and we style them here instead.
+   */
+
+/*
+  :host([data-button-group-middle]) #button {
+    border-radius: 0;
+  }
+
+  :host([data-button-group-horizontal][data-button-group-first]) #button {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :host([data-button-group-horizontal][data-button-group-last]) #button {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  :host([data-button-group-vertical][data-button-group-first]) #button {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :host([data-button-group-vertical][data-button-group-last]) #button {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+  */
+
+:host(.wa-button-group__button--inner) .button {
+  border-radius: 0;
+}
+
+:host(.wa-button-group-horizontal.wa-button-group__button--first:not(.wa-button-group__button--last)) .button {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+:host(.wa-button-group-horizontal.wa-button-group__button--last:not(.wa-button-group__button--first)) .button {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+:host(.wa-button-group-vertical.wa-button-group__button--first:not(.wa-button-group__button--last)) .button {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+:host(.wa-button-group-vertical.wa-button-group__button--last:not(.wa-button-group__button--first)) .button {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+/* All except the first */
+:host(
+    .wa-button-group-horizontal.wa-button-group-horizontal.wa-button-group__button:not(.wa-button-group__button--first)
+  ) {
+  margin-inline-start: calc(-1 * var(--border-width));
+}
+
+:host(
+    .wa-button-group-vertical.wa-button-group-horizontal.wa-button-group__button:not(.wa-button-group__button--first)
+  ) {
+  margin-block-start: calc(-1 * var(--border-width));
+}
+
+/* Add a visual separator between filled buttons */
+:host(.wa-button-group__button:not(.wa-button-group__button--first, .wa-button-group__button--radio)) .button:after {
+  content: '';
+  position: absolute;
+  z-index: 2; /* Keep separators visible on hover */
+}
+
+:host(
+    .wa-button-group-horizontal.wa-button-group__button:not(
+        .wa-button-group__button--first,
+        .wa-button-group__button--radio
+      )
+  )
+  .button:after {
+  top: 0;
+  bottom: 0;
+  inset-inline-start: 0;
+  border-left: solid max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3));
+}
+
+:host(
+    .wa-button-group-vertical.wa-button-group__button:not(
+        .wa-button-group__button--first,
+        .wa-button-group__button--radio
+      )
+  )
+  .button:after {
+  left: 0;
+  right: 0;
+  inset-block-start: 0;
+  border-top: solid max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3));
+}
+
+/* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
+:host(.wa-button-group__button--hover) {
+  z-index: 1;
+}
+
+/* Focus and checked are always on top */
+:host(.wa-button-group__button--focus),
+:host(.wa-button-group__button[checked]) {
+  z-index: 2;
+}

src/components/button/button.styles.ts

@@ -1,551 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
-    --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
-    --border-color: initial;
-    --border-color-hover: var(--border-color);
-    --border-color-active: var(--border-color);
-    --border-radius: var(--wa-form-control-border-radius);
-    --border-style: var(--wa-border-style);
-    --border-width: var(--wa-form-control-border-width);
-    --box-shadow: initial;
-    --label-color-hover: var(--label-color);
-    --label-color-active: var(--label-color);
-
-    display: inline-block;
-    position: relative;
-    width: auto;
-    cursor: pointer;
-  }
-
-  /*
-   * Filled buttons
-   */
-
-  :host([appearance='filled'][variant='neutral']) {
-    --background-color: var(--wa-color-neutral-fill-loud);
-    --label-color: var(--wa-color-neutral-on-loud);
-  }
-
-  :host([appearance='filled'][variant='brand']) {
-    --background-color: var(--wa-color-brand-fill-loud);
-    --label-color: var(--wa-color-brand-on-loud);
-  }
-
-  :host([appearance='filled'][variant='success']) {
-    --background-color: var(--wa-color-success-fill-loud);
-    --label-color: var(--wa-color-success-on-loud);
-  }
-
-  :host([appearance='filled'][variant='warning']) {
-    --background-color: var(--wa-color-warning-fill-loud);
-    --label-color: var(--wa-color-warning-on-loud);
-  }
-
-  :host([appearance='filled'][variant='danger']) {
-    --background-color: var(--wa-color-danger-fill-loud);
-    --label-color: var(--wa-color-danger-on-loud);
-  }
-
-  /*
-   * Tinted buttons
-   */
-
-  :host([appearance='tinted']) {
-    --background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%);
-    --background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
-  }
-
-  :host([appearance='tinted'][variant='neutral']) {
-    --background-color: var(--wa-color-neutral-fill-normal);
-    --label-color: var(--wa-color-neutral-on-normal);
-  }
-
-  :host([appearance='tinted'][variant='brand']) {
-    --background-color: var(--wa-color-brand-fill-normal);
-    --label-color: var(--wa-color-brand-on-normal);
-  }
-
-  :host([appearance='tinted'][variant='success']) {
-    --background-color: var(--wa-color-success-fill-normal);
-    --label-color: var(--wa-color-success-on-normal);
-  }
-
-  :host([appearance='tinted'][variant='warning']) {
-    --background-color: var(--wa-color-warning-fill-normal);
-    --label-color: var(--wa-color-warning-on-normal);
-  }
-
-  :host([appearance='tinted'][variant='danger']) {
-    --background-color: var(--wa-color-danger-fill-normal);
-    --label-color: var(--wa-color-danger-on-normal);
-  }
-
-  /*
-   * Outlined buttons
-   */
-
-  :host([appearance='outlined']),
-  :host(.wa-button-group__button--radio:not([checked])) {
-    --background-color: transparent;
-    --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
-  }
-
-  :host([appearance='outlined'][variant='neutral']),
-  :host(.wa-button-group__button--radio:not([checked])) {
-    --background-color-hover: var(--wa-color-neutral-fill-quiet);
-    --border-color: var(--wa-color-neutral-border-loud);
-    --label-color: var(--wa-color-neutral-on-quiet);
-  }
-
-  :host([appearance='outlined'][variant='brand']) {
-    --background-color-hover: var(--wa-color-brand-fill-quiet);
-    --border-color: var(--wa-color-brand-border-loud);
-    --label-color: var(--wa-color-brand-on-quiet);
-  }
-
-  :host([appearance='outlined'][variant='success']) {
-    --background-color-hover: var(--wa-color-success-fill-quiet);
-    --border-color: var(--wa-color-success-border-loud);
-    --label-color: var(--wa-color-success-on-quiet);
-  }
-
-  :host([appearance='outlined'][variant='warning']) {
-    --background-color-hover: var(--wa-color-warning-fill-quiet);
-    --border-color: var(--wa-color-warning-border-loud);
-    --label-color: var(--wa-color-warning-on-quiet);
-  }
-
-  :host([appearance='outlined'][variant='danger']) {
-    --background-color-hover: var(--wa-color-danger-fill-quiet);
-    --border-color: var(--wa-color-danger-border-loud);
-    --label-color: var(--wa-color-danger-on-quiet);
-  }
-
-  /*
-   * Text buttons
-   */
-
-  :host([appearance='text']) {
-    --background-color: transparent;
-    --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
-  }
-
-  :host([appearance='text'][variant='neutral']) {
-    --label-color: var(--wa-color-neutral-on-quiet);
-    --background-color-hover: var(--wa-color-neutral-fill-quiet);
-  }
-
-  :host([appearance='text'][variant='brand']) {
-    --label-color: var(--wa-color-brand-on-quiet);
-    --background-color-hover: var(--wa-color-brand-fill-quiet);
-  }
-
-  :host([appearance='text'][variant='success']) {
-    --label-color: var(--wa-color-success-on-quiet);
-    --background-color-hover: var(--wa-color-success-fill-quiet);
-  }
-
-  :host([appearance='text'][variant='warning']) {
-    --label-color: var(--wa-color-warning-on-quiet);
-    --background-color-hover: var(--wa-color-warning-fill-quiet);
-  }
-
-  :host([appearance='text'][variant='danger']) {
-    --label-color: var(--wa-color-danger-on-quiet);
-    --background-color-hover: var(--wa-color-danger-fill-quiet);
-  }
-
-  /*
-   * Checked buttons
-   */
-
-  :host([checked]) {
-    --background-color: var(--wa-color-brand-fill-quiet);
-    --background-color-hover: var(--background-color);
-    --border-color: var(--wa-form-control-activated-color);
-    --label-color: var(--wa-color-brand-on-normal);
-    --indicator-color: var(--border-color);
-    --indicator-width: var(--wa-border-width-s);
-  }
-
-  /*
-   * Sizes
-   */
-
-  :host([size='small']) {
-    font-size: var(--wa-font-size-s);
-  }
-
-  :host([size='medium']) {
-    font-size: var(--wa-font-size-m);
-  }
-
-  :host([size='large']) {
-    font-size: var(--wa-font-size-l);
-  }
-
-  /*
-   * Internal
-   */
-
-  .button {
-    background-color: var(--background-color);
-    border-color: var(--border-color, var(--background-color));
-    border-radius: var(--border-radius);
-    border-style: var(--border-style);
-    border-width: max(1px, var(--border-width));
-    box-shadow: var(--box-shadow);
-    color: var(--label-color);
-    display: inline-flex;
-    align-items: stretch;
-    justify-content: center;
-    width: 100%;
-    font: inherit;
-    font-weight: var(--wa-font-weight-action);
-    text-decoration: none;
-    user-select: none;
-    -webkit-user-select: none;
-    white-space: nowrap;
-    vertical-align: middle;
-    padding: 0;
-    transition:
-      background var(--wa-transition-fast) var(--wa-transition-easing),
-      border var(--wa-transition-fast) var(--wa-transition-easing),
-      box-shadow var(--wa-transition-fast) var(--wa-transition-easing),
-      color var(--wa-transition-fast) var(--wa-transition-easing);
-    cursor: inherit;
-  }
-
-  .button--checked {
-    box-shadow:
-      var(--box-shadow, 0 0 transparent),
-      inset 0 0 0 var(--indicator-width) var(--indicator-color);
-  }
-
-  /*
-   * States
-   */
-
-  .button::-moz-focus-inner {
-    border: 0;
-  }
-
-  .button:focus {
-    outline: none;
-  }
-
-  .button:focus-visible {
-    outline: var(--wa-focus-ring);
-    outline-offset: var(--wa-focus-ring-offset);
-  }
-
-  .button--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* When disabled, prevent mouse events from bubbling up from children */
-  .button--disabled * {
-    pointer-events: none;
-  }
-
-  .button:hover:not(.button--disabled, .button--loading) {
-    background-color: var(--background-color-hover, var(--background-color, none));
-    border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
-    color: var(--label-color-hover, var(--label-color));
-  }
-
-  .button:active:not(.button--disabled, .button--loading) {
-    background-color: var(--background-color-active, var(--background-color, none));
-    border-color: var(--border-color-active, var(--border-color, var(--background-color-active)));
-    color: var(--label-color-active, var(--label-color));
-  }
-
-  @media (forced-colors: active) {
-    .button.button--outlined.button--checked:not(.button--disabled) {
-      outline: solid 2px transparent;
-    }
-  }
-
-  /*
-   * Label
-   */
-
-  .button__prefix,
-  .button__suffix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    pointer-events: none;
-  }
-
-  .button__label {
-    display: inline-block;
-  }
-
-  .button__label::slotted(wa-icon) {
-    vertical-align: -2px;
-  }
-
-  /*
-   * Size modifiers
-   */
-
-  .button--small {
-    height: var(--wa-form-control-height-s);
-    line-height: calc(var(--wa-form-control-height-s) - var(--border-width) * 2);
-  }
-
-  .button--medium {
-    height: var(--wa-form-control-height-m);
-    line-height: calc(var(--wa-form-control-height-m) - var(--border-width) * 2);
-  }
-
-  .button--large {
-    height: var(--wa-form-control-height-l);
-    line-height: calc(var(--wa-form-control-height-l) - var(--border-width) * 2);
-  }
-
-  /*
-   * Pill modifier
-   */
-
-  .button--pill.button--small {
-    border-radius: var(--wa-border-radius-pill);
-  }
-
-  .button--pill.button--medium {
-    border-radius: var(--wa-border-radius-pill);
-  }
-
-  .button--pill.button--large {
-    border-radius: var(--wa-border-radius-pill);
-  }
-
-  /*
-   * Caret modifier
-   */
-
-  .button--caret .button__suffix {
-    display: none;
-  }
-
-  .button--caret .button__caret {
-    display: flex;
-    align-self: center;
-    align-items: center;
-  }
-
-  .button--caret .button__caret::part(svg) {
-    width: 0.875em;
-    height: 0.875em;
-  }
-
-  /*
-   * Loading modifier
-   */
-
-  .button--loading {
-    position: relative;
-    cursor: wait;
-  }
-
-  .button--loading .button__prefix,
-  .button--loading .button__label,
-  .button--loading .button__suffix,
-  .button--loading .button__caret {
-    visibility: hidden;
-  }
-
-  .button--loading wa-spinner {
-    --indicator-color: currentColor;
-    --track-color: color-mix(in oklab, currentColor, transparent 90%);
-    position: absolute;
-    font-size: 1em;
-    height: 1em;
-    width: 1em;
-    top: calc(50% - 0.5em);
-    left: calc(50% - 0.5em);
-  }
-
-  /*
-   * Badges
-   */
-
-  .button ::slotted(wa-badge) {
-    --border-color: var(--wa-color-surface-default);
-    position: absolute;
-    top: 0;
-    right: 0;
-    translate: 50% -50%;
-    pointer-events: none;
-  }
-
-  .button--rtl ::slotted(wa-badge) {
-    right: auto;
-    left: 0;
-    translate: -50% -50%;
-  }
-
-  /*
-   * Button spacing
-   */
-
-  .button--small {
-    padding: 0 var(--wa-space-s);
-  }
-
-  .button--medium {
-    padding: 0 var(--wa-space-m);
-  }
-
-  .button--large {
-    padding: 0 var(--wa-space-l);
-  }
-
-  .button--small ::slotted([slot='prefix']) {
-    margin-inline-end: var(--wa-space-s);
-  }
-
-  .button--medium ::slotted([slot='prefix']) {
-    margin-inline-end: var(--wa-space-m);
-  }
-
-  .button--large ::slotted([slot='prefix']) {
-    margin-inline-end: var(--wa-space-l);
-  }
-
-  .button--small ::slotted([slot='suffix']),
-  .button--small.button--caret:not(.button--visually-hidden-label) .button__caret {
-    margin-inline-start: var(--wa-space-s);
-  }
-
-  .button--medium ::slotted([slot='suffix']),
-  .button--medium.button--caret:not(.button--visually-hidden-label) .button__caret {
-    margin-inline-start: var(--wa-space-m);
-  }
-
-  .button--large ::slotted([slot='suffix']),
-  .button--large.button--caret:not(.button--visually-hidden-label) .button__caret {
-    margin-inline-start: var(--wa-space-l);
-  }
-
-  /*
-   * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
-   * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
-   * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
-   * buttons and we style them here instead.
-   */
-
-  /*
-  :host([data-button-group-middle]) #button {
-    border-radius: 0;
-  }
-
-  :host([data-button-group-horizontal][data-button-group-first]) #button {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :host([data-button-group-horizontal][data-button-group-last]) #button {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-
-  :host([data-button-group-vertical][data-button-group-first]) #button {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :host([data-button-group-vertical][data-button-group-last]) #button {
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
-  }
-  */
-
-  :host(.wa-button-group__button--inner) .button {
-    border-radius: 0;
-  }
-
-  :host(.wa-button-group-horizontal.wa-button-group__button--first:not(.wa-button-group__button--last)) .button {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :host(.wa-button-group-horizontal.wa-button-group__button--last:not(.wa-button-group__button--first)) .button {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-
-  :host(.wa-button-group-vertical.wa-button-group__button--first:not(.wa-button-group__button--last)) .button {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :host(.wa-button-group-vertical.wa-button-group__button--last:not(.wa-button-group__button--first)) .button {
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
-  }
-
-  /* All except the first */
-  :host(
-      .wa-button-group-horizontal.wa-button-group-horizontal.wa-button-group__button:not(
-          .wa-button-group__button--first
-        )
-    ) {
-    margin-inline-start: calc(-1 * var(--border-width));
-  }
-
-  :host(
-      .wa-button-group-vertical.wa-button-group-horizontal.wa-button-group__button:not(.wa-button-group__button--first)
-    ) {
-    margin-block-start: calc(-1 * var(--border-width));
-  }
-
-  /* Add a visual separator between filled buttons */
-  :host(.wa-button-group__button:not(.wa-button-group__button--first, .wa-button-group__button--radio)) .button:after {
-    content: '';
-    position: absolute;
-    z-index: 2; /* Keep separators visible on hover */
-  }
-
-  :host(
-      .wa-button-group-horizontal.wa-button-group__button:not(
-          .wa-button-group__button--first,
-          .wa-button-group__button--radio
-        )
-    )
-    .button:after {
-    top: 0;
-    bottom: 0;
-    inset-inline-start: 0;
-    border-left: solid max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3));
-  }
-
-  :host(
-      .wa-button-group-vertical.wa-button-group__button:not(
-          .wa-button-group__button--first,
-          .wa-button-group__button--radio
-        )
-    )
-    .button:after {
-    left: 0;
-    right: 0;
-    inset-block-start: 0;
-    border-top: solid max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3));
-  }
-
-  /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
-  :host(.wa-button-group__button--hover) {
-    z-index: 1;
-  }
-
-  /* Focus and checked are always on top */
-  :host(.wa-button-group__button--focus),
-  :host(.wa-button-group__button[checked]) {
-    z-index: 2;
-  }
-`;

src/components/button/button.test.ts

@@ -183,22 +183,6 @@ describe('<wa-button>', () => {
           expect(el.shadowRoot!.querySelector('button')).not.to.exist;
         });
 
-        it('should render a link with rel="noreferrer noopener" when target is set and rel is not', async () => {
-          const el = await fixture<WaButton>(html`
-            <wa-button href="https://example.com/" target="_blank">Link</wa-button>
-          `);
-          const link = el.shadowRoot!.querySelector('a')!;
-          expect(link?.getAttribute('rel')).to.equal('noreferrer noopener');
-        });
-
-        it('should render a link with rel="" when a target is provided and rel is empty', async () => {
-          const el = await fixture<WaButton>(html`
-            <wa-button href="https://example.com/" target="_blank" rel="">Link</wa-button>
-          `);
-          const link = el.shadowRoot!.querySelector('a')!;
-          expect(link?.getAttribute('rel')).to.equal('');
-        });
-
         it(`should render a link with a custom rel when a custom rel is provided`, async () => {
           const el = await fixture<WaButton>(html`
             <wa-button href="https://example.com/" target="_blank" rel="1">Link</wa-button>

src/components/button/button.ts

@@ -11,9 +11,7 @@ import { WaFocusEvent } from '../../events/focus.js';
 import { WaInvalidEvent } from '../../events/invalid.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
-import componentStyles from '../../styles/component.styles.js';
-import styles from './button.styles.js';
-import type { CSSResultGroup } from 'lit';
+import styles from './button.css';
 
 /**
  * @summary Buttons represent actions that are available to the user.
@@ -55,7 +53,7 @@ import type { CSSResultGroup } from 'lit';
  */
 @customElement('wa-button')
 export default class WaButton extends WebAwesomeFormAssociatedElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
+  static shadowStyle = styles;
 
   static get validators() {
     return [...super.validators, MirrorValidator()];

src/components/callout/callout.css

@@ -0,0 +1,64 @@
+:host {
+  --icon-color: currentColor;
+  --icon-size: var(--wa-font-size-l);
+  --spacing: var(--wa-space-m);
+
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  border-radius: var(--wa-panel-border-radius);
+  background-color: var(--background-color);
+  border-color: var(--border-color);
+  border-style: var(--wa-panel-border-style);
+  border-width: var(--wa-panel-border-width);
+  color: var(--content-color);
+  padding: var(--spacing);
+}
+
+:host([variant='brand']) {
+  --background-color: var(--wa-color-brand-fill-quiet);
+  --border-color: var(--wa-color-brand-border-quiet);
+  --content-color: var(--wa-color-brand-on-normal);
+}
+
+:host([variant='success']) {
+  --background-color: var(--wa-color-success-fill-quiet);
+  --border-color: var(--wa-color-success-border-quiet);
+  --content-color: var(--wa-color-success-on-normal);
+}
+
+:host([variant='neutral']) {
+  --background-color: var(--wa-color-neutral-fill-quiet);
+  --border-color: var(--wa-color-neutral-border-quiet);
+  --content-color: var(--wa-color-neutral-on-normal);
+}
+
+:host([variant='warning']) {
+  --background-color: var(--wa-color-warning-fill-quiet);
+  --border-color: var(--wa-color-warning-border-quiet);
+  --content-color: var(--wa-color-warning-on-normal);
+}
+
+:host([variant='danger']) {
+  --background-color: var(--wa-color-danger-fill-quiet);
+  --border-color: var(--wa-color-danger-border-quiet);
+  --content-color: var(--wa-color-danger-on-normal);
+}
+
+[part~='icon'] {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  color: var(--icon-color);
+  font-size: var(--icon-size);
+
+  ::slotted(*) {
+    margin-inline-end: var(--spacing);
+  }
+}
+
+[part~='message'] {
+  flex: 1 1 auto;
+  display: block;
+  overflow: hidden;
+}