Attempt to use tintless variables

Add docs
Tintless color variables
2026-01-19 07:29:14 +00:00 · 2025-01-14 17:08:40 -05:00 · 2025-01-14 17:08:40 -05:00 · 2025-01-14 17:08:40 -05:00 · 2025-01-14 14:56:03 -05:00 · 2025-01-14 14:54:34 -05:00
256 changed files with 6010 additions and 8874 deletions
--- a/.github/workflows/client_tests.js.yml
+++ b/.github/workflows/client_tests.js.yml
@@ -31,7 +31,7 @@ jobs:
      - name: Lint
        run: npm run prettier
      - name: Build
-        run: npm run build
+        run: npm run build:alpha
      - name: Install Playwright
        run: npx playwright install --with-deps
      - name: Run CSR tests
--- a/.github/workflows/ssr_tests.js.yml
+++ b/.github/workflows/ssr_tests.js.yml
@@ -30,7 +30,7 @@ jobs:
        run: npm run prettier

      - name: Build
-        run: npm run build
+        run: npm run build:alpha

      - name: Install Playwright
        run: npx playwright install --with-deps
--- a/README.md
+++ b/README.md
@@ -59,6 +59,8 @@ To generate a production build, run the following command.
 npm run build
 ```

+You can also run `npm run build:serve` to start an [`http-server`](https://www.npmjs.com/package/http-server) instance on `http://localhost:4000` after the build completes, so you can preview the production build.
+
 ### Creating New Components

 To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -20,6 +20,15 @@ const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
 const isAlpha = process.argv.includes('--alpha');
 const isDev = process.argv.includes('--develop');

+const globalData = {
+  package: packageData,
+  isAlpha,
+  layout: 'page.njk',
+};
+
+const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
+const passThrough = [...passThroughExtensions.map(ext => 'docs/**/*.' + ext)];
+
 export default function (eleventyConfig) {
  // NOTE - alpha setting removes certain pages
  if (isAlpha) {
@@ -32,8 +41,9 @@ export default function (eleventyConfig) {
  }

  // Add template data
-  eleventyConfig.addGlobalData('package', packageData);
-  eleventyConfig.addGlobalData('isAlpha', isAlpha);
+  for (let name in globalData) {
+    eleventyConfig.addGlobalData(name, globalData[name]);
+  }

  // Template filters - {{ content | filter }}
  eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
@@ -48,6 +58,9 @@ export default function (eleventyConfig) {
    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, '');
  });

+  // Paired shortcodes - {% shortCode %}content{% endShortCode %}
+  eleventyConfig.addPairedShortcode('markdown', content => markdown.render(content || ''));
+
  // Helpers

  // Remove elements that have [data-alpha="remove"]
@@ -145,9 +158,18 @@ export default function (eleventyConfig) {
  //   eleventyConfig.addPlugin(formatCodePlugin());
  // }

+  eleventyConfig.addPassthroughCopy({
+    'docs/assets': 'assets',
+  });
+
+  for (let glob of passThrough) {
+    eleventyConfig.addPassthroughCopy(glob);
+  }
+
  return {
    markdownTemplateEngine: 'njk',
    dir: {
+      input: 'docs',
      includes: '_includes',
      layouts: '_layouts',
    },
--- a/docs/_includes/base-wide.njk
+++ b/docs/_includes/base-wide.njk
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -1,91 +1,25 @@
 <!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 }}">
+    {% include 'head.njk' %}
    <meta name="theme-color" content="#f36944">
-    {% if noindex %}<meta name="robots" content="noindex">{% endif %}
-
-    <title>{{ title }}</title>
-
-    <link rel="icon" href="/assets/images/webawesome-logo.svg" />
-    <link rel="apple-touch-icon" href="/assets/images/app-icon.png">
-
-    {# Scripts #}
-    {# Hydration stuff #}
-    <script src="/assets/scripts/hydration-errors.js"></script>
-    <link rel="stylesheet" href="/assets/styles/hydration-errors.css">
-    <link rel="preconnect" href="https://cdn.jsdelivr.net">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>

    <script type="module" src="/assets/scripts/code-examples.js"></script>
-    <script type="module" src="/assets/scripts/color-scheme.js"></script>
    <script type="module" src="/assets/scripts/copy-code.js"></script>
-    <script type="module" src="/assets/scripts/preset-theme.js"></script>
+
    <script type="module" src="/assets/scripts/scroll.js"></script>
    <script type="module" src="/assets/scripts/turbo.js"></script>
    <script type="module" src="/assets/scripts/search.js"></script>
    <script type="module" src="/assets/scripts/outline.js"></script>
    <script defer data-domain="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>

-    {# Web Awesome #}
-    <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
-    <link rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" />
-    <link rel="stylesheet" href="/dist/styles/webawesome.css" />
-    <link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
-    <link rel="stylesheet" href="/dist/styles/forms.css" />
-
    {# Docs styles #}
    <link rel="stylesheet" href="/assets/styles/docs.css" />
-
-    {# Set the theme to prevent flashing #}
-    <script>
-      function getColorScheme() {
-        return localStorage.getItem('colorScheme') || 'auto';
-      }
-
-      function getPresetTheme () {
-        return localStorage.getItem('presetTheme') || 'default';
-      }
-
-      function isDark() {
-        const colorScheme = getColorScheme()
-        if (colorScheme === 'auto') {
-          return window.matchMedia('(prefers-color-scheme: dark)').matches;
-        }
-        return colorScheme === 'dark';
-      }
-
-      const oldStylesheet = document.querySelector("#theme-stylesheet")
-
-      const newStylesheet = document.createElement("link")
-
-      let preset = getPresetTheme()
-      newStylesheet.href = `/dist/styles/themes/${preset}.css`
-      newStylesheet.rel = "preload"
-      newStylesheet.as = "style"
-
-      document.head.append(newStylesheet)
-
-      function updateStylesheet () {
-        newStylesheet.rel = "stylesheet"
-        newStylesheet.id = "theme-stylesheet"
-        requestAnimationFrame(() => oldStylesheet.remove())
-      }
-
-      newStylesheet.addEventListener("load", updateStylesheet)
-
-      document.documentElement.classList.toggle(
-        `wa-theme-${preset}-dark`,
-        isDark()
-      );
-    </script>
  </head>
  <body class="layout-{{ layout | stripExtension }}">
    <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
    <wa-page view="desktop" disable-navigation-toggle="">
-      <header slot="header">
+      <header slot="header" class="wa-split">
        {# Logo #}
        <div id="docs-branding">
          {# Nav toggle #}
@@ -101,9 +35,9 @@
          <wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
        </div>

-        <div id="docs-toolbar">
+        <div id="docs-toolbar" class="wa-cluster wa-gap-xs">
          {# Desktop selectors #}
-          <div class="only-desktop">
+          <div class="only-desktop wa-cluster wa-gap-xs">
            {% include "preset-theme-selector.njk" %}
            {% include "color-scheme-selector.njk" %}
          </div>
@@ -121,7 +55,7 @@
      {% if hasSidebar %}
        {# Mobile selectors #}
        <div class="wa-mobile-only" slot="navigation-header">
-          <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
+          <div class="wa-cluster wa-gap-xs">
            {% include "preset-theme-selector.njk" %}
            {% include "color-scheme-selector.njk" %}
          </div>
@@ -149,22 +83,12 @@
          </details>
        </nav>

-        {% set breadcrumbs = page.url | breadcrumbs %}
-        {% if breadcrumbs.length > 0 %}
-          <wa-breadcrumb id="docs-breadcrumbs">
-            {% for crumb in breadcrumbs %}
-              <wa-breadcrumb-item href="{{ crumb.url }}">{{ crumb.title }}</wa-breadcrumb-item>
-            {% endfor %}
-            <wa-breadcrumb-item>{# Current page #}</wa-breadcrumb-item>
-          </wa-breadcrumb>
-          {% else %}
-        {% endif %}
-
-        {% block beforeContent %}{% endblock %}
+        {% block header %}
+          {% include 'breadcrumbs.njk' %}
+          <h1 class="title">{{ title }}</h1>
+        {% endblock %}

        {% block content %}
-          <h1 class="title">{{ title }}</h1>
-
          {{ content | safe }}
        {% endblock %}

--- a/docs/_includes/breadcrumbs.njk
+++ b/docs/_includes/breadcrumbs.njk
@@ -0,0 +1,10 @@
+{% set breadcrumbs = page.url | breadcrumbs %}
+{% if breadcrumbs.length > 0 %}
+  <wa-breadcrumb id="docs-breadcrumbs">
+  {% for crumb in breadcrumbs %}
+    <wa-breadcrumb-item href="{{ crumb.url }}">{{ crumb.title }}</wa-breadcrumb-item>
+  {% endfor %}
+  <wa-breadcrumb-item>{# Current page #}</wa-breadcrumb-item>
+  </wa-breadcrumb>
+  {% else %}
+{% endif %}
--- a/docs/_includes/color-scheme-selector.njk
+++ b/docs/_includes/color-scheme-selector.njk
@@ -1,15 +1,19 @@
 {# Color scheme selector #}
-<wa-dropdown id="color-scheme-selector">
-  <wa-button slot="trigger" appearance="filled" size="small" pill caret title="Press \ to toggle">
+<wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" pill title="Press \ to toggle">
+  <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
+  <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
+  <wa-option value="light">
+    <wa-icon slot="prefix" name="sun" variant="regular"></wa-icon>
+    Light
+  </wa-option>
+  <wa-option value="dark">
+    <wa-icon slot="prefix" name="moon" variant="regular"></wa-icon>
+    Dark
+  </wa-option>
+  <wa-divider></wa-divider>
+  <wa-option value="auto">
    <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
    <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
-    <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>
+    System
+  </wa-option>
+</wa-select>
--- a/docs/_includes/grouped-pages.njk
+++ b/docs/_includes/grouped-pages.njk
@@ -4,10 +4,9 @@
 {% for category, pages in allPages | groupByTags(categories) -%}
  <h2 class="index-category">{{ category | getCategoryTitle(categories) }}</h2>
    {%- for page in pages -%}
-      {%- if not page.data.unlisted and not page.data.parent -%}
+      {%- if not page.data.parent or listChildren -%}
        {% include "page-card.njk" %}
      {%- endif -%}
    {%- endfor -%}
 {%- endfor -%}
 </section>
-
--- a/docs/_includes/head.njk
+++ b/docs/_includes/head.njk
@@ -0,0 +1,49 @@
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="description" content="{{ description }}">
+{% if noindex %}<meta name="robots" content="noindex">{% endif %}
+
+<title>{{ title }}</title>
+
+{# Dark mode #}
+<script>
+	let colorScheme = localStorage.colorScheme;
+	let isDark = localStorage.colorScheme === "dark";
+	if (!colorScheme || colorScheme === "auto") {
+		isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+	}
+	document.documentElement.classList.toggle('wa-dark', isDark);
+</script>
+
+<link rel="icon" href="/assets/images/webawesome-logo.svg" />
+<link rel="apple-touch-icon" href="/assets/images/app-icon.png">
+
+{# Scripts #}
+{# Hydration stuff #}
+<script src="/assets/scripts/hydration-errors.js"></script>
+<link rel="stylesheet" href="/assets/styles/hydration-errors.css">
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
+
+{# Web Awesome #}
+<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
+
+<script type="module" src="/assets/scripts/theme-picker.js"></script>
+{# Preset Theme #}
+{% if forceTheme %}
+<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme }}.css" render="blocking" fetchpriority="high" />
+{% else %}
+<noscript><link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high" /></noscript>
+<script>
+{
+	let preset = localStorage.presetTheme ?? 'default';
+	let script = document.currentScript;
+	script.insertAdjacentHTML('beforebegin', `<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/${ preset }.css" render="blocking" fetchpriority="high" />`);
+}
+</script>
+<script type="module" src="/assets/scripts/preset-theme-picker.js"></script>
+{% endif %}
+
+<link rel="stylesheet" href="/dist/styles/webawesome.css" />
+<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
+<link rel="stylesheet" href="/dist/styles/forms.css" />
--- a/docs/_includes/page-card.njk
+++ b/docs/_includes/page-card.njk
@@ -1,4 +1,5 @@
-<a href="{{ page.url }}" data-keywords="{{ page.data.keywords }}">
+{%- if not page.data.unlisted -%}
+<a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>
 	<wa-card with-header>
 		<div slot="header">
 		{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
@@ -6,3 +7,4 @@
 		<span class="page-name">{{ page.data.title }}</span>
 	</wa-card>
 </a>
+{% endif %}
--- a/docs/_includes/page-demo.njk
+++ b/docs/_includes/page-demo.njk
@@ -1,5 +1,5 @@
 <div id="page_slots_demo">
-<link rel="stylesheet" href="/assets/examples/page-demo/demo.css">
+<link rel="stylesheet" href="./demo.css">
 {% set slots = components.page.slots %}

 <fieldset id="page_slots_fieldset">
@@ -22,5 +22,5 @@

 <script type="module">
  const cacheBust = new Date().toString()
-  import(`/assets/examples/page-demo/demo.js?${cacheBust}`)
+  import(`./demo.js?${cacheBust}`)
 </script>
--- a/docs/_includes/preset-theme-selector.njk
+++ b/docs/_includes/preset-theme-selector.njk
@@ -1,18 +1,9 @@
 {# Preset theme selector #}
-<wa-dropdown id="preset-theme-selector">
-  <wa-button slot="trigger" appearance="filled" 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>
+<wa-select appearance="filled" size="small" value="default" pill class="preset-theme-selector">
+  <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
+  {% for theme in collections.theme | sort %}
+    <wa-option value="{{ theme.page.fileSlug }}"{{ ' data-alpha="remove"' if theme.noAlpha }}>
+      {{ theme.data.title }}
+    </wa-option>
+  {% endfor %}
+</wa-select>
--- a/docs/_includes/sidebar-group.njk
+++ b/docs/_includes/sidebar-group.njk
@@ -0,0 +1,22 @@
+{# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
+{% if collections[tag] -%}
+  {% set groupUrl %}/docs/{{ tag }}/{% endset %}
+  <wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | attr('open') }}>
+    <h2 slot="summary">
+      {% if groupUrl | getCollectionItemFromUrl %}
+        <a href="{{ groupUrl }}" title="Overview">{{ title or (tag | capitalize) }}
+          <wa-icon name="grid-2"></wa-icon>
+        </a>
+      {% else %}
+        {{ title or (tag | capitalize) }}
+      {% endif %}
+    </h2>
+    <ul>
+      {% for page in collections[tag] | sort %}
+        {% if not page.data.parent -%}
+          {% include 'sidebar-link.njk' %}
+        {%- endif %}
+      {% endfor %}
+    </ul>
+  </wa-details>
+{%- endif %}
--- a/docs/_includes/sidebar-link.njk
+++ b/docs/_includes/sidebar-link.njk
@@ -0,0 +1,16 @@
+{% if not (isAlpha and page.data.noAlpha) and page.fileSlug != tag and not page.data.unlisted -%}
+	<li>
+		<a href="{{ page.url }}">{{ page.data.title }}</a>
+		{% if page.data.status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
+		{% if page.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
+
+		{% set children = page.data.children %}
+		{% if children.length > 0 %}
+			<ul>
+				{% for page in children %}
+					{% include 'sidebar-link.njk' %}
+				{% endfor %}
+			</ul>
+		{% endif %}
+	</li>
+{%- endif %}
--- a/docs/_includes/sidebar.njk
+++ b/docs/_includes/sidebar.njk
@@ -3,7 +3,6 @@
 <ul>
  <li><a href="/docs/installation">Installation</a></li>
  <li><a href="/docs/usage">Usage</a></li>
-  <li><a href="/docs/themes">Themes</a></li>
  <li><a href="/docs/customizing">Customizing</a></li>
  <li><a href="/docs/form-controls">Form Controls</a></li>
  <li><a href="/docs/localization">Localization</a></li>
@@ -19,121 +18,14 @@
  <li><a href="/docs/resources/changelog">Changelog</a></li>
 </ul>

-{# Components #}
-<wa-details {{ 'open' if '/components/' in page.url }}>
-  <h2 slot=summary>
-    <a href="/docs/components/" title="Overview">Components
-      <wa-icon name="grid-2"></wa-icon>
-    </a>
-  </h2>
-
-  <ul>
-    {% for component in collections.components | sort %}
-    {% if not component.data.parent and not (isAlpha and component.data.noAlpha) and not component.data.unlisted %}
-    <li>
-      <a href="/docs/components/{{ component.fileSlug }}">{{ component.data.title }}</a>
-
-      {% if components[component.fileSlug].status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
-      {% if component.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
-      <ul>
-      {% for child in collections.components | sort %}
-        {% if child.data.parent == component.fileSlug and not (isAlpha and child.data.noAlpha) %}
-          <li>
-            <a href="/docs/components/{{ child.fileSlug }}">{{ child.data.title }}</a>
-          </li>
-        {% endif %}
-      {% endfor %}
-      </ul>
-    </li>
-    {% endif %}
-    {% endfor %}
-  </ul>
-</wa-details>
-
-<wa-details {{ 'open' if '/native/' in page.url }}>
-  <h2 slot=summary>
-    <a href="/docs/native/" title="Overview">Native Styles
-      <wa-icon name="grid-2"></wa-icon>
-    </a>
-  </h2>
-  <ul>
-    {% for page in collections.native | sort %}
-    {% if page.fileSlug != 'native' and not page.unlisted %}
-    <li>
-      <a href="/docs/native/{{ page.fileSlug }}">{{ page.data.title }}</a>
-    </li>
-    {% endif %}
-    {% endfor %}
-  </ul>
-</wa-details>
-
-<wa-details {{ 'open' if '/utilities/' in page.url }}>
-  <h2 slot=summary>
-    <a href="/docs/utilities/" title="Overview">Style Utilities
-      <wa-icon name="grid-2"></wa-icon>
-    </a>
-  </h2>
-  <ul>
-    {% for page in collections.utilities | sort %}
-    {% if page.fileSlug != 'utilities' and not page.unlisted %}
-    <li>
-      <a href="/docs/utilities/{{ page.fileSlug }}">{{ page.data.title }}</a>
-    </li>
-    {% endif %}
-    {% endfor %}
-  </ul>
-</wa-details>
-
-{# Layout #}
-<h2>
-  <a href="/docs/layout" title="Overview">Layout
-    <wa-icon name="grid-2"></wa-icon>
-  </a>
-</h2>
-<ul>
-  {% for page in collections.layout | sort %}
-    {% if page.fileSlug != 'layout' and not page.unlisted %}
-    <li>
-      <a href="{{ page.url }}">{{ page.data.title }}</a>
-    </li>
-    {% endif %}
-  {% endfor %}
-</ul>
-
-{# Patterns #}
-{% if not isAlpha %}
-<h2>Patterns</h2>
-<ul>
-  <li><a href="/docs/patterns/app">Web App</a></li>
-  <li><a href="/docs/patterns/ecommerce">E-commerce</a>
-    <ul>
-      <li><a href="/docs/patterns/ecommerce-product-review">Product Reviews</a></li>
-      <li><a href="/docs/patterns/ecommerce-product-list">Product Lists</a></li>
-      <li><a href="/docs/patterns/ecommerce-category-preview">Category Previews</a></li>
-      <li><a href="/docs/patterns/ecommerce-shopping-cart">Shopping Carts</a></li>
-       <li><a href="/docs/patterns/ecommerce-category-filter">Category Filters</a></li>
-      <li><a href="/docs/patterns/ecommerce-product-detail">Product Detail</a></li>
-      <li><a href="/docs/patterns/ecommerce-order-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>
-  <a href="/docs/theming" title="Overview">Theming
-    <wa-icon name="grid-2"></wa-icon>
-  </a>
-</h2>
-<ul>
-{% for page in collections.theming | sort %}
-  {% if page.fileSlug != 'theming' and not page.unlisted %}
-    <li>
-      <a href="/docs/theming/{{ page.fileSlug }}">{{ page.data.title }}</a>
-    </li>
-  {% endif %}
+{% for tag, title in {
+  'themes': 'Themes',
+  'components': 'Components',
+  'native': 'Native Styles',
+  'utilities': 'Style Utilities',
+  'layout': 'Layout',
+  'patterns': 'Patterns',
+  'tokens': 'Design Tokens'
+} %}
+  {% include 'sidebar-group.njk' %}
 {% endfor %}
-</ul>
--- a/docs/_includes/status.njk
+++ b/docs/_includes/status.njk
@@ -1,25 +1,25 @@
 {% if since -%}
 	<wa-badge variant="neutral">Since {{ since }}</wa-badge>
-{%- endif %}
+{% endif -%}

-{% if status -%}
+{%- if status %}
 	{%- if status == "wip" %}
 	<wa-badge variant="danger">
 		<wa-icon name="pickaxe"></wa-icon>
 		Work In Progress
 	</wa-badge>
-	{%- elif status == "experimental" -%}
+	{%- elif status == "experimental" %}
 	<wa-badge variant="warning">
 		<wa-icon name="flask"></wa-icon>
 		Experimental
 	</wa-badge>
-	{%- elif status == "stable" -%}
+	{%- elif status == "stable" %}
 	<wa-badge variant="brand">Stable</wa-badge>
 	{%- else %}
 	<wa-badge>{{ status}}</wa-badge>
-	{%- endif %}
+	{%- endif -%}
 {%- endif %}

-{% if isPro -%}
+{%- if isPro %}
 	<wa-badge class="pro">PRO</wa-badge>
-{%- endif %}
+{%- endif -%}
--- a/docs/_includes/svgs/slider.njk
+++ b/docs/_includes/svgs/slider.njk
--- a/docs/_includes/svgs/theming/borders.njk
+++ b/docs/_includes/svgs/theming/borders.njk
--- a/docs/_includes/svgs/theming/color.njk
+++ b/docs/_includes/svgs/theming/color.njk
--- a/docs/_includes/svgs/theming/component-groups.njk
+++ b/docs/_includes/svgs/theming/component-groups.njk
--- a/docs/_includes/svgs/theming/focus.njk
+++ b/docs/_includes/svgs/theming/focus.njk
--- a/docs/_includes/svgs/theming/shadows.njk
+++ b/docs/_includes/svgs/theming/shadows.njk
--- a/docs/_includes/svgs/theming/space.njk
+++ b/docs/_includes/svgs/theming/space.njk
--- a/docs/_includes/svgs/theming/transitions.njk
+++ b/docs/_includes/svgs/theming/transitions.njk
--- a/docs/_includes/svgs/theming/typography.njk
+++ b/docs/_includes/svgs/theming/typography.njk
--- a/docs/_includes/theme-showcase.njk
+++ b/docs/_includes/theme-showcase.njk
@@ -0,0 +1,144 @@
+<div class="showcase-examples-wrapper" aria-hidden="true" data-no-outline>
+  <div class="showcase-examples">
+    <wa-card with-header with-footer>
+      <div slot="header" class="wa-split">
+        <h3 class="wa-heading-m">Your Cart</h3>
+        <wa-icon-button name="xmark" tabindex="-1"></wa-icon-button>
+      </div>
+      <div class="wa-stack wa-gap-xl">
+        <div class="wa-flank">
+          <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-green-60); --text-color: var(--wa-color-green-95);">
+            <wa-icon slot="icon" name="sword-laser" family="duotone" style="font-size: 1.5em;"></wa-icon>
+          </wa-avatar>
+          <div class="wa-stack wa-gap-2xs">
+            <div class="wa-split wa-gap-2xs">
+              <strong>Initiate Saber</strong>
+              <strong>$179.99</strong>
+            </div>
+            <div class="wa-split wa-gap-2xs wa-caption-m">
+              <span>Green</span>
+              <a href="#" tabindex="-1">Remove</a>
+            </div>
+          </div>
+        </div>
+        <wa-divider></wa-divider>
+        <div class="wa-flank">
+          <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-teal-60); --text-color: var(--wa-color-teal-95);">
+            <wa-icon slot="icon" name="robot-astromech" family="duotone" style="font-size: 1.5em;"></wa-icon>
+          </wa-avatar>
+          <div class="wa-stack wa-gap-2xs">
+            <div class="wa-split wa-gap-2xs">
+              <strong>Repair Droid</strong>
+              <strong>$3,049.99</strong>
+            </div>
+            <div class="wa-split wa-gap-2xs wa-caption-m">
+              <span>R-series</span>
+              <a href="#" tabindex="-1">Remove</a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="wa-stack">
+        <div class="wa-split">
+          <strong>Subtotal</strong>
+          <strong>$3,229.98</strong>
+        </div>
+        <span class="wa-caption-m">Shipping and taxes calculated at checkout.</span>
+        <wa-button tabindex="-1" variant="brand">
+          <wa-icon slot="prefix" name="shopping-bag"></wa-icon>
+          Checkout
+        </wa-button>
+      </div>
+    </wa-card>
+    <wa-card>
+      <wa-avatar shape="rounded" style="--size: 1.9lh; float: left; margin-right: var(--wa-space-m);">
+        <wa-icon slot="icon" name="hat-wizard" family="duotone" style="font-size: 1.75em;"></wa-icon>
+      </wa-avatar>
+      <p class="wa-body-l" style="margin: 0;">&ldquo;All we have to decide is what to do with the time that is given to us. There are other forces at work in this world, Frodo, besides the will of evil.&rdquo;</p>
+    </wa-card>
+    <wa-card>
+      <div class="wa-stack">
+        <h3 class="wa-heading-m">Sign In</h3>
+        <wa-input tabindex="-1" label="Email" placeholder="ddjarin@mandalore.gov">
+          <wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
+        </wa-input>
+        <wa-input tabindex="-1" label="Password" type="password">
+          <wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
+        </wa-input>
+        <wa-button tabindex="-1" variant="brand">Sign In</wa-button>
+        <a href="#" tabindex="-1" class="wa-body-s">I forgot my password</a>
+      </div>
+    </wa-card>
+    <wa-card with-footer>
+      <div class="wa-stack">
+        <div class="wa-split">
+          <h3 class="wa-heading-m">To-Do</h3>
+          <wa-icon-button tabindex="-1" name="plus" label="Add task"></wa-icon-button>
+        </div>
+        <wa-checkbox tabindex="-1" checked>Umbrella for Adelard</wa-checkbox>
+        <wa-checkbox tabindex="-1" checked>Waste-paper basket for Dora</wa-checkbox>
+        <wa-checkbox tabindex="-1" checked>Pen and ink for Milo</wa-checkbox>
+        <wa-checkbox tabindex="-1">Mirror for Angelica</wa-checkbox>
+        <wa-checkbox tabindex="-1">Silver spoons for Lobelia</wa-checkbox>
+      </div>
+      <div slot="footer">
+        <a href="" tabindex="-1">View all completed</a>
+      </div>
+    </wa-card>
+    <wa-card>
+      <div class="wa-stack">
+        <div class="wa-frame wa-border-radius-m" style="align-self: center; max-inline-size: 25ch;">
+          <img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="Album art">
+        </div>
+        <div class="wa-flank:end wa-align-items-start">
+          <div class="wa-stack wa-gap-3xs">
+            <div class="wa-cluster wa-gap-xs" style="height: 2.25em;">
+              <strong>The Stone Troll</strong>
+              <small><wa-badge variant="neutral" appearance="filled">E</wa-badge></small>
+            </div>
+            <span class="wa-caption-m">Samwise G</span>
+          </div>
+          <wa-icon-button tabindex="-1" name="ellipsis" label="Options"></wa-icon-button>
+        </div>
+        <div class="wa-stack wa-gap-2xs">
+          <wa-progress-bar value="34" style="height: 0.5em"></wa-progress-bar>
+          <div class="wa-split">
+            <span class="wa-caption-xs">1:01</span>
+            <span class="wa-caption-xs">-1:58</span>
+          </div>
+        </div>
+        <div class="wa-grid wa-align-items-center" style="--min-column-size: 1em; justify-items: center;">
+          <wa-icon-button tabindex="-1" name="backward" label="Skip backward"></wa-icon-button>
+          <wa-icon-button tabindex="-1" name="pause" style="font-size: var(--wa-font-size-2xl);" label="Pause"></wa-icon-button>
+          <wa-icon-button tabindex="-1" name="forward" label="Skip forward"></wa-icon-button>
+        </div>
+      </div>
+    </wa-card>
+    <wa-card>
+      <div class="wa-stack">
+        <h3 class="wa-heading-m">Chalmun's Spaceport Cantina</h3>
+        <div class="wa-cluster wa-gap-xs">
+          <wa-rating value="4.6" read-only></wa-rating>
+          <strong>4.6</strong>
+          <span>(419 reviews)</span>
+        </div>
+        <div class="wa-cluster wa-gap-xs">
+          <div class="wa-cluster wa-gap-3xs">
+            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
+            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
+            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
+          </div>
+          <span class="wa-caption-m">&bull;</span>
+          <wa-tag size="small">Cocktail Bar</wa-tag>
+          <wa-tag size="small">Gastropub</wa-tag>
+          <wa-tag size="small">Local Fare</wa-tag>
+          <wa-tag size="small">Gluten Free</wa-tag>
+        </div>
+        <div class="wa-flank wa-gap-xs">
+          <wa-icon name="location-dot"></wa-icon>
+          <a href="#" class="wa-caption-m" tabindex="-1">Mos Eisley, Tatooine</a>
+        </div>
+      </div>
+    </wa-card>
+  </div>
+</div>
--- a/docs/_layouts/blank.njk
+++ b/docs/_layouts/blank.njk
@@ -1,62 +1,11 @@
 <!DOCTYPE html>
 <html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="{{ description }}">
-    {% if noindex %}<meta name="robots" content="noindex">{% endif %}
-
-    <title>{{ title }}</title>
-
-    <link rel="icon" href="/assets/images/webawesome-logo.svg" />
-    <link rel="apple-touch-icon" href="/assets/images/app-icon.png">
-
-    {# Scripts #}
-    {# Hydration stuff #}
-    <script src="/assets/scripts/hydration-errors.js"></script>
-    <link rel="stylesheet" href="/assets/styles/hydration-errors.css">
-    <link rel="preconnect" href="https://cdn.jsdelivr.net">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
-
-    {# Web Awesome #}
-    <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
-    <link rel="stylesheet" id="theme-stylesheet" />
-    <link rel="stylesheet" href="/dist/styles/webawesome.css" />
-    <link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
-    <link rel="stylesheet" href="/dist/styles/forms.css" />
-
-    {# Set the theme to prevent flashing #}
-    <script>
-      function getColorScheme() {
-        return localStorage.getItem('colorScheme') || 'auto';
-      }
-
-      function getPresetTheme () {
-        return localStorage.getItem('presetTheme') || 'default';
-      }
-
-      function isDark() {
-        const colorScheme = getColorScheme()
-        if (colorScheme === 'auto') {
-          return window.matchMedia('(prefers-color-scheme: dark)').matches;
-        }
-        return colorScheme === 'dark';
-      }
-
-      const stylesheet = document.getElementById("theme-stylesheet")
-      let preset = getPresetTheme()
-
-      stylesheet.href = `/dist/styles/themes/${preset}.css`
-
-      document.documentElement.classList.toggle(
-        `wa-theme-${preset}-dark`,
-        isDark()
-      );
-    </script>
+    {% include 'head.njk' %}
  </head>
  <body class="layout-{{ layout | stripExtension }}">

-        {% block beforeContent %}{% endblock %}
+        {% block header %}{% endblock %}

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

 {# Component header #}
-{% block beforeContent %}
-  <h1 class="title">{{ title }}</h1>
-  <div class="component-info">
-    <code class="tag">&lt;{{ component.tagName }}&gt;</code>
-
-    {% include '../_includes/status.njk' %}
-  </div>
-  <p class="summary">
-    {{ component.summary | inlineMarkdown | safe }}
-  </p>
+{% block notes %}
  {% if native %}
  <wa-callout variant="success">
    <wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
@@ -27,11 +12,6 @@
  {% endif %}
 {% endblock %}

-{# Content #}
-{% block content %}
-  {{ content | safe }}
-{% endblock %}
-
 {# Component API #}
 {% block afterContent %}
  {# Slots #}
--- a/docs/_layouts/element.njk
+++ b/docs/_layouts/element.njk
@@ -1,37 +1,18 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-
-{% extends '../_includes/base.njk' %}
+{% extends '../_layouts/block.njk' %}

 {# Component header #}
-{% block beforeContent %}
-  <h1 class="title">{{ title }}</h1>
-  <div class="component-info">
-    {% for tag, url in elements %}
-      <code class="tag"><a href="{{ url }}">{{ tag }}</a></code>
-    {% endfor %}
-    {% include '../_includes/status.njk' %}
-  </div>
-  {% if description -%}
-    <p class="summary">{{ description | inlineMarkdown | safe }}</p>
-  {%- endif %}
+{% block notes %}
  {% if component %}
  <wa-callout variant="success">
    <wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
    Want to do more?
-    Check out the {% for name in (component | toArray) -%}
+    Check out the {% for name in (component | toList) -%}
      {{ ' and ' if loop.last and not loop.first }}<a href="/docs/components/{{ name }}"><code>&lt;wa-{{ name }}&gt;</code></a>{{ ', ' if not loop.last }}
-      {%- endfor %} component{{ 's' if (component | isArray) }}</a>!
+      {%- endfor %} component{{ 's' if (component | isList) }}</a>!
  </wa-callout>
  {% endif %}
 {% endblock %}

-{# Content #}
-{% block content %}
-  {{ content | safe }}
-{% endblock %}
-
-{# Component API #}
 {% block afterContent %}
  {# Slots #}
  {% if css_file %}
--- a/docs/_layouts/overview.njk
+++ b/docs/_layouts/overview.njk
@@ -0,0 +1,25 @@
+---
+layout: page-outline
+tags: ["overview"]
+---
+{% set forTag = forTag or (page.url | split('/') | last) %}
+{% if description %}
+  <div class="index-summary">{{ description | markdown | safe }}</div>
+{% endif %}
+
+<div id="block-filter">
+  <wa-input type="search" placeholder="Search {{ title }}" clearable autofocus>
+	<wa-icon slot="prefix" name="search"></wa-icon>
+  </wa-input>
+</div>
+
+{% set allPages = collections[forTag] %}
+{% include "grouped-pages.njk" %}
+
+<link href="/assets/styles/filter.css" rel="stylesheet">
+<script type="module" src="/assets/scripts/filter.js"></script>
+
+{% if content | trim %}
+<br> {# Temp fix for spacing issue #}
+{{ content | safe }}
+{% endif %}
--- a/docs/_layouts/page-wide.njk
+++ b/docs/_layouts/page-wide.njk
@@ -1,4 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-
-{% extends "../_includes/base-wide.njk" %}
--- a/docs/_layouts/pattern.njk
+++ b/docs/_layouts/pattern.njk
@@ -1,4 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-
-{% extends "../_includes/base.njk" %}
--- a/docs/_layouts/theme.njk
+++ b/docs/_layouts/theme.njk
@@ -0,0 +1,85 @@
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+{# {% set forceTheme = page.fileSlug %} #}
+
+{% extends '../_includes/base.njk' %}
+
+{% block header %}
+<iframe src='{{ page.url }}demo.html'></iframe>
+{% endblock %}
+
+{% block afterContent %}
+{% markdown %}
+## How to use this theme
+
+You can import this theme from the Web Awesome CDN.
+
+<wa-tab-group>
+<wa-tab panel="html">In HTML</wa-tab>
+<wa-tab panel="css">In CSS</wa-tab>
+<wa-tab-panel name="html">
+
+Simply add the following code to the `<head>` of your page:
+```html
+<link rel="stylesheet" href="{% cdnUrl 'styles/themes/' + page.fileSlug + '.css' %}" />
+```
+</wa-tab-panel>
+<wa-tab-panel name="css">
+
+Simply add the following code at the top of your CSS file:
+```css
+@import url('{% cdnUrl 'styles/themes/' + page.fileSlug + '.css' %}');
+```
+</wa-tab-panel>
+</wa-tab-group>
+
+## Dark mode
+
+To activate the dark color scheme of the theme on any element and its contents, apply the class `wa-dark` to it.
+This means you can use different color schemes throughout the page.
+Here, we use the default theme with a dark sidebar:
+
+```html
+<html>
+  <head>
+    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
+  </head>
+
+  <body>
+    <nav class="wa-dark">
+      <!-- dark-themed sidebar -->
+    </nav>
+
+    <!-- light-themed content -->
+  </body>
+</html>
+```
+
+You can apply the class to the `<html>` element on your page to activate the dark color scheme for the entire page.
+
+```html
+<html class="wa-dark">
+  <head>
+    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/{{ page.fileSlug }}.css" />
+    <!-- other links, scripts, and metadata -->
+  </head>
+  <body>
+    <!-- page content -->
+  </body>
+</html>
+```
+### Detecting Color Scheme Preference
+
+Web Awesome's themes have both light and dark styles built in.
+However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference.
+This should be done at the application level.
+As a best practice, to provide a dark theme in your app, you should:
+
+- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
+- Allow the user to override the setting in your app
+- Remember the user's preference and restore it on subsequent logins
+
+Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
+
+{% endmarkdown %}
+{% endblock %}
--- a/docs/_layouts/utilities.njk
+++ b/docs/_layouts/utilities.njk
@@ -1,25 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-
-{% extends '../_includes/base.njk' %}
-
-{# Component header #}
-{% block beforeContent %}
-  <h1 class="title">{{ title }}</h1>
-  <div class="component-info">
-
-    {% for className in classes %}
-      <code class="class">.{{ className }}</code>
-    {% endfor %}
-    {% include '../_includes/status.njk' %}
-  </div>
-  {% if description -%}
-    <p class="summary">{{ description | inlineMarkdown | safe }}</p>
-  {%- endif %}
-
-{% endblock %}
-
-{# Content #}
-{% block content %}
-  {{ content | safe }}
-{% endblock %}
--- a/docs/_utils/filters.js
+++ b/docs/_utils/filters.js
@@ -38,8 +38,12 @@ export function getTitleFromUrl(url, collection) {
  return item?.data.title || '';
 }

+export function split(text, separator) {
+  return (text + '').split(separator).filter(Boolean);
+}
+
 export function breadcrumbs(url, { withCurrent = false } = {}) {
-  const parts = url.split('/').filter(Boolean);
+  const parts = split(url, '/');
  const ret = [];

  while (parts.length) {
@@ -70,12 +74,30 @@ export function breadcrumbs(url, { withCurrent = false } = {}) {
  return ret;
 }

-export function isArray(value) {
-  return Array.isArray(value);
+export function isObject(value) {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
 }

-export function toArray(value) {
-  return isArray(value) ? value : [value];
+export function isList(value) {
+  return Array.isArray(value) || value instanceof Set;
+}
+
+/** Get an Array or Set */
+export function toList(value) {
+  return isList(value) ? value : [value];
+}
+
+/**
+ * Convert any value to something that can be iterated over with a for key, value loop.
+ * Arrays and sets will be converted to a Map of value -> undefined
+ */
+export function dict(value) {
+  if (value instanceof Map || isObject(value)) {
+    return value;
+  }
+
+  let list = toList(value);
+  return new Map([...list].map(item => [item, undefined]));
 }

 export function deepValue(obj, key) {
@@ -83,11 +105,15 @@ export function deepValue(obj, key) {
  return key.reduce((subObj, property) => subObj?.[property], obj);
 }

-function isNumeric(value) {
+export function isNumeric(value) {
  return typeof value === 'number' || (typeof value === 'string' && !isNaN(value));
 }

-function isEmpty(value) {
+export function isString(value) {
+  return typeof value === 'string';
+}
+
+export function isEmpty(value) {
  return value === null || value === undefined || value === '';
 }

@@ -113,13 +139,13 @@ function compare(a, b) {
  return (a + '').localeCompare(b);
 }

-/** Sort an array of objects */
-export function sort(arr, keys = ['data.order', 'data.title']) {
-  keys = toArray(keys);
+/** Sort an array of objects by one or more of their properties */
+export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
+  let keys = Array.isArray(by) ? by : Object.keys(by);

  return arr.sort((a, b) => {
-    let aValues = keys.map(key => deepValue(a, key));
-    let bValues = keys.map(key => deepValue(b, key));
+    let aValues = keys.map(key => deepValue(a, key) ?? by[key]);
+    let bValues = keys.map(key => deepValue(b, key) ?? by[key]);

    for (let i = 0; i < aValues.length; i++) {
      let aVal = aValues[i];
@@ -141,6 +167,9 @@ export function sort(arr, keys = ['data.order', 'data.title']) {
 * @returns { Object.<string, object[]> } An object with keys for each tag, and an array of items for each tag.
 */
 export function groupByTags(collection, tags) {
+  if (!collection) {
+    console.error(`Empty collection passed to groupByTags() to group by ${JSON.stringify(tags)}`);
+  }
  if (!tags) {
    // Default to grouping by union of all tags
    tags = Array.from(new Set(collection.flatMap(item => item.data.tags)));
@@ -198,3 +227,41 @@ export function getCategoryTitle(category, categories) {
  // Capitalized
  return category.charAt(0).toUpperCase() + category.slice(1);
 }
+
+const IDENTITY = x => x;
+
+/**
+ * Helper to print out one or more HTML attributes, especially conditional ones.
+ * Usage in 11ty:
+ * - Single attribute: `<foo{{ value | attr(name) }}>`
+ * - Multiple attributes: `<foo{{ { name1: value1, name2: value2 } | attr }}>`
+ *
+ * @overload
+ * @param {any} value - The attribute value If falsey, the attribute is not printed. If `true` the attribute is printed without a value.
+ * @param {string} name - The name of the attribute
+ *
+ * @overload
+ * @param {Object<string, any>} obj - Map of attribute names to values
+ *
+ * @returns {string} The attribute string. No `| safe` is needed.
+ */
+export function attr(value, name) {
+  const safe = this?.env.filters.safe ?? IDENTITY;
+
+  if (arguments.length === 1 && value && typeof value === 'object') {
+    // Called with a single object argument of names to values
+    let ret = Object.entries(obj)
+      .map(([name, value]) => attr(value, name))
+      .join('');
+    return safe(ret);
+  }
+
+  if (!value) {
+    // false, "", null, undefined
+    return '';
+  }
+
+  let ret = ' ' + name + (value === true ? '' : `="${value}"`);
+
+  return safe(ret);
+}
--- a/docs/assets/images/themer/migration/blog_feature.jpg
+++ b/docs/assets/images/themer/migration/blog_feature.jpg
--- a/docs/assets/images/themer/migration/carousel-1.jpg
+++ b/docs/assets/images/themer/migration/carousel-1.jpg
--- a/docs/assets/images/themer/migration/carousel-2.jpg
+++ b/docs/assets/images/themer/migration/carousel-2.jpg
--- a/docs/assets/images/themer/migration/carousel-3.jpg
+++ b/docs/assets/images/themer/migration/carousel-3.jpg
--- a/docs/assets/images/themer/migration/keymaker.jpg
+++ b/docs/assets/images/themer/migration/keymaker.jpg
--- a/docs/assets/images/themer/migration/morpheus.jpg
+++ b/docs/assets/images/themer/migration/morpheus.jpg
--- a/docs/assets/images/themer/migration/seraph.jpg
+++ b/docs/assets/images/themer/migration/seraph.jpg
--- a/docs/assets/scripts/color-scheme.js
+++ b/docs/assets/scripts/color-scheme.js
@@ -1,59 +0,0 @@
-//
-// Color scheme selector
-//
-(() => {
-  function setColorScheme(newColorScheme) {
-    colorScheme = newColorScheme;
-    localStorage.setItem('colorScheme', colorScheme);
-    const presetTheme = window.getPresetTheme();
-
-    // Update the UI
-    updateSelection();
-
-    // Toggle the dark mode class
-    document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
-  }
-
-  function updateSelection() {
-    const menu = document.querySelector('#color-scheme-selector wa-menu');
-    if (!menu) return;
-    [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
-      await customElements.whenDefined(item.localName);
-      await item.updateComplete;
-      item.checked = item.getAttribute('value') === colorScheme;
-    });
-  }
-
-  let colorScheme = window.getColorScheme();
-
-  // Selection is not preserved when changing page, so update when opening dropdown
-  document.addEventListener('wa-show', event => {
-    const colorSchemeSelector = event.target.closest('#color-scheme-selector');
-    if (!colorSchemeSelector) return;
-    updateSelection();
-  });
-
-  // Listen for selections
-  document.addEventListener('wa-select', event => {
-    const menu = event.target.closest('#color-scheme-selector wa-menu');
-    if (!menu) return;
-    setColorScheme(event.detail.item.value);
-  });
-
-  // Update the color scheme when the preference changes
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => setColorScheme(colorScheme));
-
-  // Toggle with backslash
-  document.addEventListener('keydown', event => {
-    if (
-      event.key === '\\' &&
-      !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
-    ) {
-      event.preventDefault();
-      setColorScheme(window.isDark() ? 'light' : 'dark');
-    }
-  });
-
-  // Set the initial color scheme and sync the UI
-  setColorScheme(colorScheme);
-})();
--- a/docs/assets/scripts/filter.js
+++ b/docs/assets/scripts/filter.js
@@ -0,0 +1,25 @@
+function updateResults(input) {
+  const filter = input.value.toLowerCase().trim();
+  let filtered = Boolean(filter);
+
+  for (let grid of document.querySelectorAll('.index-grid')) {
+    grid.classList.toggle('filtered', filtered);
+
+    for (let item of grid.querySelectorAll('a:has(> wa-card)')) {
+      let isMatch = true;
+
+      if (filter) {
+        const content = item.textContent.toLowerCase() + ' ' + (item.getAttribute('data-keywords') + ' ');
+        isMatch = content.includes(filter);
+      }
+
+      item.hidden = !isMatch;
+    }
+  }
+}
+
+document.documentElement.addEventListener('wa-input', e => {
+  if (e.target?.matches('#block-filter wa-input')) {
+    updateResults(e.target);
+  }
+});
--- a/docs/assets/scripts/preset-theme-picker.js
+++ b/docs/assets/scripts/preset-theme-picker.js
@@ -0,0 +1,68 @@
+import { domChange, nextFrame, ThemeAspect } from './theme-picker.js';
+
+const presetTheme = new ThemeAspect({
+  defaultValue: 'default',
+  key: 'presetTheme',
+  picker: 'wa-select.preset-theme-selector',
+
+  applyChange(options = {}) {
+    const oldStylesheets = [...document.querySelectorAll('#theme-stylesheet')];
+    const oldStylesheet = oldStylesheets.pop();
+
+    if (oldStylesheets.length > 0) {
+      // Remove all but the last one
+      for (let stylesheet of oldStylesheets) {
+        stylesheet.remove();
+      }
+    }
+
+    const href = `/dist/styles/themes/${this.value}.css`;
+
+    if (!oldStylesheet || oldStylesheet.getAttribute('href') !== href) {
+      const newStylesheet = document.createElement('link');
+      Object.assign(newStylesheet, { href, id: 'theme-stylesheet', rel: 'preload', as: 'style' });
+      oldStylesheet.after(newStylesheet);
+
+      newStylesheet.addEventListener(
+        'load',
+        e => {
+          domChange(
+            async instant => {
+              // Swap stylesheets
+              newStylesheet.rel = 'stylesheet';
+
+              if (instant) {
+                // If no VT, delay by 1 frame to make it smoother
+                await nextFrame();
+              }
+
+              oldStylesheet.remove();
+            },
+            { behavior: 'smooth', ...options },
+          );
+        },
+        { once: true },
+      );
+    }
+  },
+});
+
+/**
+ * Without this, there's a flash of the incorrect preset theme.
+ */
+function updateSelectionBeforeTurboLoad(e) {
+  const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
+  if (newElement) {
+    presetTheme.syncUI(newElement);
+  }
+}
+
+['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
+  document.addEventListener(eventName, updateSelectionBeforeTurboLoad);
+});
+
+window.addEventListener('turbo:render', e => {
+  presetTheme.applyChange({ behavior: 'instant' });
+});
+
+window.presetTheme = presetTheme;
--- a/docs/assets/scripts/preset-theme.js
+++ b/docs/assets/scripts/preset-theme.js
@@ -1,86 +0,0 @@
-//
-// Preset theme selector
-//
-(() => {
-  function setPresetTheme(newPresetTheme) {
-    presetTheme = newPresetTheme;
-    localStorage.setItem('presetTheme', presetTheme);
-
-    const stylesheet = document.getElementById('theme-stylesheet');
-
-    const newStylesheet = Object.assign(document.createElement('link'), {
-      href: `/dist/styles/themes/${presetTheme}.css`,
-      rel: 'preload',
-      as: 'style',
-    });
-
-    newStylesheet.addEventListener(
-      'load',
-      () => {
-        newStylesheet.rel = 'stylesheet';
-        newStylesheet.id = stylesheet.id;
-        requestAnimationFrame(() => {
-          stylesheet.remove();
-        });
-      },
-      { once: true },
-    );
-
-    document.head.append(newStylesheet);
-
-    // Update the UI
-    updateSelection();
-
-    // Toggle the dark mode class
-    document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
-  }
-
-  function updateSelection(container = document) {
-    const menu = container.querySelector('#preset-theme-selector wa-menu');
-    if (!menu) return;
-    [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
-      const isChecked = item.getAttribute('value') === presetTheme;
-      if (isChecked) {
-        container.querySelector('#preset-theme-selector__text').textContent = item.innerText;
-      }
-      await customElements.whenDefined(item.localName);
-      await item.updateComplete;
-      item.checked = isChecked;
-    });
-  }
-
-  let presetTheme = window.getPresetTheme();
-
-  // Selection is not preserved when changing page, so update when opening dropdown
-  document.addEventListener('wa-show', event => {
-    const presetThemeSelector = event.target.closest('#preset-theme-selector');
-    if (!presetThemeSelector) return;
-    updateSelection();
-  });
-
-  // Listen for selections
-  document.addEventListener('wa-select', event => {
-    const menu = event.target.closest('#preset-theme-selector wa-menu');
-    if (!menu) return;
-    setPresetTheme(event.detail.item.value);
-  });
-
-  // Update the color scheme when the preference changes
-  window.matchMedia('(prefers-preset-theme: dark)').addEventListener('change', () => setPresetTheme(presetTheme));
-  updateSelection();
-
-  /**
-   * Without this, there's a flash of the incorrect preset theme.
-   */
-  function updateSelectionBeforeTurboLoad(e) {
-    const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
-    if (!newElement) {
-      return;
-    }
-    updateSelection(newElement);
-  }
-
-  ['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
-    document.addEventListener(eventName, updateSelectionBeforeTurboLoad);
-  });
-})();
--- a/docs/assets/scripts/search.js
+++ b/docs/assets/scripts/search.js
@@ -9,6 +9,7 @@ const icons = {
  component: 'puzzle-piece',
  document: 'file',
  home: 'house',
+  native: 'code',
  theme: 'palette',
 };
 let searchTimeout;
@@ -166,6 +167,7 @@ async function updateResults(query = '') {
      li.setAttribute('data-selected', index === 0 ? 'true' : 'false');

      if (page.url === '/') icon = icons.home;
+      if (page.url.startsWith('/docs/native')) icon = icons.native;
      if (page.url.startsWith('/docs/components')) icon = icons.component;
      if (page.url.startsWith('/docs/theme') || page.url.startsWith('/docs/restyle')) icon = icons.theme;

--- a/docs/assets/scripts/sync-iframe-height.js
+++ b/docs/assets/scripts/sync-iframe-height.js
@@ -0,0 +1,37 @@
+/**
+ * Sync iframe height with its content page (for same-origin iframes)
+ * NOT CURRENTLY USED ANYWHERE
+ */
+for (let iframe of document.querySelectorAll('iframe')) {
+  if (iframe.contentDocument) {
+    // Already loaded
+    syncIframeHeight(iframe);
+  }
+
+  iframe.onload = () => {
+    console.log('iframe loaded');
+    if (iframe.contentDocument) {
+      // Same origin
+      iframe.contentWindow.iframe = iframe;
+      syncIframeHeight(iframe);
+      const resizeObserver = new ResizeObserver(entries => {
+        for (let entry of entries) {
+          if (entry.target === iframe.contentDocument.body) {
+            syncIframeHeight(iframe);
+          }
+        }
+      });
+
+      resizeObserver.observe(iframe.contentDocument.body);
+      window.addEventListener('turbo:render', syncIframeHeight(iframe));
+    }
+  };
+}
+
+function syncIframeHeight(iframe) {
+  iframe.style.height = '0px';
+
+  requestAnimationFrame(() => {
+    iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
+  });
+}
--- a/docs/assets/scripts/theme-picker.js
+++ b/docs/assets/scripts/theme-picker.js
@@ -0,0 +1,110 @@
+// Helper for view transitions
+export function domChange(fn, { behavior = 'smooth' } = {}) {
+  const canUseViewTransitions =
+    document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  if (canUseViewTransitions && behavior === 'smooth') {
+    document.startViewTransition(fn);
+  } else {
+    fn(true);
+  }
+}
+
+export function nextFrame() {
+  return new Promise(resolve => requestAnimationFrame(resolve));
+}
+
+export class ThemeAspect {
+  constructor(options) {
+    Object.assign(this, options);
+    this.set();
+
+    // Update when local storage changes.
+    // That way changes in one window will propagate to others (including iframes).
+    window.addEventListener('storage', event => {
+      if (event.key === this.key) {
+        this.set();
+      }
+    });
+
+    // Listen for selections
+    document.addEventListener('wa-change', event => {
+      const picker = event.target.closest(this.picker);
+      if (picker) {
+        this.set(picker.value);
+      }
+    });
+  }
+
+  get() {
+    return localStorage.getItem(this.key) ?? this.defaultValue;
+  }
+
+  computed = {};
+
+  get computedValue() {
+    if (this.value in this.computed) {
+      return this.computed[this.value];
+    }
+
+    return this.value;
+  }
+
+  set(value = this.get()) {
+    if (value === this.value) {
+      return;
+    }
+
+    this.value = value;
+
+    if (this.value === this.defaultValue) {
+      localStorage.removeItem(this.key);
+    } else {
+      localStorage.setItem(this.key, this.value);
+    }
+
+    this.applyChange();
+    this.syncUI();
+  }
+
+  syncUI(container = document) {
+    for (let picker of container.querySelectorAll(this.picker)) {
+      picker.setAttribute('value', this.value);
+      picker.value = this.value;
+    }
+  }
+}
+
+const colorScheme = new ThemeAspect({
+  defaultValue: 'auto',
+  key: 'colorScheme',
+  picker: 'wa-select.color-scheme-selector',
+
+  computed: {
+    get auto() {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    },
+  },
+
+  applyChange() {
+    // Toggle the dark mode class
+    domChange(() => {
+      let dark = this.computedValue === 'dark';
+      document.documentElement.classList.toggle(`wa-dark`, dark);
+    });
+  },
+});
+
+// Update the color scheme when the preference changes
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => colorScheme.set());
+
+// Toggle color scheme with backslash
+document.addEventListener('keydown', event => {
+  if (
+    event.key === '\\' &&
+    !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
+  ) {
+    event.preventDefault();
+    colorScheme.set(theming.colorScheme.resolvedValue === 'dark' ? 'light' : 'dark');
+  }
+});
--- a/docs/assets/styles/code-highlighter.css
+++ b/docs/assets/styles/code-highlighter.css
@@ -1,6 +1,12 @@
 pre {
  background-color: var(--wa-color-gray-20);
  color: white;
+
+  /* Ensures a discernible background color in dark mode
+   * Useful for themes that use gray-20 as --wa-color-surface-default  */
+  .wa-dark & {
+    background-color: var(--wa-color-surface-lowered);
+  }
 }
 .code-comment,
 .code-prolog,
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -10,8 +10,8 @@
  --wa-brand-grey: #30323b;
 }

-html.wa-theme-default-dark .only-light,
-html:not(.wa-theme-default-dark) .only-dark {
+.wa-dark .only-light,
+.only-dark:not(.wa-dark, .wa-dark *) {
  display: none;
 }

@@ -22,7 +22,7 @@ wa-page {
 /* Header */
 wa-page::part(header) {
  background-color: var(--wa-color-surface-default);
-  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
+  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
 }

 wa-page::part(body) {
@@ -34,10 +34,6 @@ wa-page::part(header-actions) {
 }

 wa-page > header {
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
  padding-inline: var(--wa-space-xl);

  a[href='/'] {
@@ -81,7 +77,7 @@ wa-page > header {
  }
  wa-button#search-trigger {
    --background-color: var(--wa-form-control-background-color);
-    --border-color: var(--wa-form-control-resting-color);
+    --border-color: var(--wa-form-control-border-color);
  }
  #search-trigger kbd {
    font-size: var(--wa-font-size-2xs);
@@ -215,6 +211,20 @@ wa-page::part(menu) {
  scrollbar-width: thin;
 }

+wa-page[view='mobile'] :is([slot='navigation-header'], [slot='navigation']) {
+  padding: 0;
+
+  & wa-details::part(icon) {
+    padding-inline: var(--wa-space-xs); /* aligns details icons with drawer close icon */
+  }
+}
+
+[slot='navigation-header'] wa-menu {
+  font-family: var(--wa-font-family-body);
+  font-size: var(--wa-font-size-m);
+  font-weight: var(--wa-font-weight-normal);
+}
+
 /* Main content */
 wa-page > main {
  max-width: 80ch;
@@ -230,7 +240,7 @@ h1.title wa-badge {
  }
 }

-.component-info {
+.block-info {
  margin-block-end: var(--wa-flow-spacing);
 }

@@ -326,16 +336,18 @@ wa-page > main:has(> .index-grid) {

  a {
    border-radius: var(--wa-border-radius-l);
+    text-decoration: none;
  }

  wa-card {
-    --box-shadow: none;
+    box-shadow: none;
    --spacing: var(--wa-space-m);
    inline-size: 100%;

    &:hover {
      --border-color: var(--wa-color-brand-border-loud);
-      --box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
+      border-color: var(--border-color);
+      box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);

      .page-name {
        color: var(--wa-color-brand-on-quiet);
@@ -370,6 +382,7 @@ wa-page > main:has(> .index-grid) {

 /* Swatches */
 .swatch {
+  position: relative;
  background-color: transparent;
  border-color: var(--wa-color-neutral-border-normal);
  border-style: var(--wa-border-style);
@@ -379,6 +392,33 @@ wa-page > main:has(> .index-grid) {
  line-height: 2.5;
  height: 2.5em;
  padding-inline: var(--wa-space-xs);
+
+  wa-copy-button {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+    --background-color-hover: transparent;
+    font-family: var(--wa-font-family-code);
+
+    &::part(button) {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+
+    &::part(button):hover {
+      cursor: copy;
+    }
+
+    &::part(copy-icon),
+    &::part(success-icon),
+    &::part(error-icon) {
+      opacity: 0 !important;
+    }
+  }
 }

 /* Layout Examples */
@@ -428,7 +468,7 @@ wa-page > main:has(> .index-grid) {
@media screen and not (max-width: 768px) {
  /* Navigation sidebar */
  wa-page::part(navigation) {
-    border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
+    border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
  }

  wa-page > #sidebar {
@@ -443,3 +483,20 @@ wa-page > main:has(> .index-grid) {
    padding: var(--wa-space-3xl);
  }
 }
+
+.layout-theme {
+  wa-page > main {
+    max-width: 140ch;
+
+    .max-line-length {
+      max-width: 80ch;
+    }
+  }
+
+  iframe {
+    width: 100%;
+    min-height: 16lh;
+    height: 65vh;
+    max-height: 21lh;
+  }
+}
--- a/docs/assets/styles/filter.css
+++ b/docs/assets/styles/filter.css
@@ -0,0 +1,37 @@
+wa-card#drawer-card::part(header) {
+  --spacing: 0;
+  justify-content: flex-end;
+  overflow: hidden;
+}
+
+#block-filter {
+  margin-block-end: var(--wa-space-xl);
+}
+
+.index-grid.filtered {
+  h2 {
+    /* Hide headings while filtering */
+    display: none;
+  }
+
+  &:not(:has(> a:not([hidden]))) {
+    /* We’re filtering and there are no results */
+
+    &::before {
+      content: var(--empty-message);
+      grid-column: 1 / -1;
+      color: var(--wa-color-on-quiet);
+      font-style: italic;
+      font-weight: var(--wa-font-weight-action);
+    }
+
+    /* Show empty state when there's a search filter and no results */
+    &[data-empty] {
+      --empty-message: attr(data-empty);
+    }
+
+    &:not([data-empty]) {
+      --empty-message: 'No results';
+    }
+  }
+}
--- a/docs/assets/styles/outline.css
+++ b/docs/assets/styles/outline.css
@@ -31,6 +31,9 @@
 }

@media screen and (max-width: 1199px) {
+  wa-page [slot='aside'] {
+    display: none;
+  }
  #outline {
    padding-block: 0.25rem;
    margin-block-end: -1rem;
--- a/docs/assets/styles/theme-headers.css
+++ b/docs/assets/styles/theme-headers.css
@@ -1,5 +1,14 @@
-/* #region Custom Styles */
-@container preview (min-width: 0) {
+/* Theme Builder Headers
+ * These styles control the appearance of the header of the theme builder,
+ * allowing each theme to have a unique hero section.
+ */
+
+/* #region Default */
+html.wa-theme-default .preview-container {
+  container-name: default-theme;
+}
+
+@container default-theme (min-width: 0) {
  .hero-background {
    height: 47rem;
    background-color: var(--wa-color-brand-fill-loud);
@@ -22,7 +31,7 @@
  }

  .hero wa-button[variant='brand'] {
-    --background: var(--wa-color-neutral-fill-quiet);
+    --background-color: var(--wa-color-neutral-fill-quiet);
    --text-color: var(--wa-color-neutral-on-normal);
  }

@@ -41,10 +50,733 @@
 }

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

 ```html {.example}
@@ -58,6 +59,71 @@ Set the `variant` attribute to change the callout's variant.
 </wa-callout>
 ```

+### Appearance
+
+Use the `appearance` attribute to change the callout's visual appearance (the default is `outlined filled`).
+
+```html {.example}
+<wa-callout variant="brand" appearance="outlined accent">
+  <wa-icon slot="icon" name="check-to-slot"></wa-icon>
+  This <strong>accent</strong> callout is also <strong>outlined</strong>
+</wa-callout>
+
+<br />
+
+<wa-callout variant="brand" appearance="accent">
+  <wa-icon slot="icon" name="square-check"></wa-icon>
+  This <strong>accent</strong> callout draws attention without an outline
+</wa-callout>
+
+<br />
+
+<wa-callout variant="brand" appearance="outlined filled">
+  <wa-icon slot="icon" name="fill-drip" variant="regular"></wa-icon>
+  This callout is both <strong>filled</strong> and <strong>outlined</strong>
+</wa-callout>
+
+<br />
+
+<wa-callout variant="brand" appearance="filled">
+  <wa-icon slot="icon" name="fill" variant="regular"></wa-icon>
+  This callout is only <strong>filled</strong>
+</wa-callout>
+
+<br />
+
+<wa-callout variant="brand" appearance="outlined">
+  <wa-icon slot="icon" name="lines-leaning" variant="regular"></wa-icon>
+  Here's an <strong>outlined</strong> callout
+</wa-callout>
+
+<br />
+
+<wa-callout variant="brand" appearance="plain">
+  <wa-icon slot="icon" name="font" variant="regular"></wa-icon>
+  No bells and whistles on this <strong>plain</strong> callout
+</wa-callout>
+```
+
+### Sizes
+
+Use the `size` attribute to change a callout's size.
+
+```html {.example}
+<wa-callout variant="brand" appearance="outlined accent" size="large">
+  <wa-icon slot="icon" name="circle-info" variant="solid"></wa-icon>
+  This is meant to be very emphasized.
+</wa-callout>
+<wa-callout>
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
+  Normal-sized callout.
+</wa-callout>
+<wa-callout variant="plain" appearance="plain" size="small">
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
+  Just a small tip!
+</wa-callout>
+```
+
 ### Without Icons

 Icons are optional. Simply omit the `icon` slot if you don't want them.
--- a/docs/docs/components/card.md
+++ b/docs/docs/components/card.md
@@ -60,7 +60,8 @@ Basic cards aren't very exciting, but they can display any content you want them

 ### Card with Header

-Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the card.
+Headers can be used to display titles and more.
+If using SSR, you need to also use the `with-header` attribute to add a header to the card (if not, it is added automatically).

 ```html {.example}
 <wa-card with-header class="card-header">
@@ -95,7 +96,8 @@ Headers can be used to display titles and more. Use the `with-header` attribute

 ### Card with Footer

-Footers can be used to display actions, summaries, or other relevant content. Use the `with-footer` attribute to add a footer to the card.
+Footers can be used to display actions, summaries, or other relevant content.
+If using SSR, you need to also use the `with-footer` attribute to add a footer to the card (if not, it is added automatically).

 ```html {.example}
 <wa-card with-footer class="card-footer">
@@ -122,7 +124,8 @@ Footers can be used to display actions, summaries, or other relevant content. Us

 ### Images

-Card images are displayed atop the card and will stretch to fit. Use the `with-image` attribute to add an image to the card.
+Card images are displayed atop the card and will stretch to fit.
+If using SSR, you need to also use the `with-image` attribute to add an image to the card (if not, it is added automatically).

 ```html {.example}
 <wa-card with-image class="card-image">
--- a/docs/docs/components/cheatsheet/cheatsheet.js
+++ b/docs/docs/components/cheatsheet/cheatsheet.js
--- a/docs/docs/components/cheatsheet/index.njk
+++ b/docs/docs/components/cheatsheet/index.njk
@@ -45,7 +45,7 @@ table code {
 	}
 }
 </script>
-<script type="module" src="/assets/scripts/cheatsheet.js"></script>
+<script type="module" src="./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") %}
--- a/docs/docs/components/components.json
+++ b/docs/docs/components/components.json
@@ -1,4 +1,11 @@
 {
  "layout": "component.njk",
-  "tags": ["components"]
+  "tags": ["components"],
+  "eleventyComputed": {
+    "component": "{{ components[page.fileSlug] }}",
+    "description": "{{ components[page.fileSlug].summary }}",
+    "status": "{{ components[page.fileSlug].status }}",
+    "since": "{{ components[page.fileSlug].since }}",
+    "element": "<{{ components[page.fileSlug].tagName }}>"
+  }
 }
--- a/docs/docs/components/index.md
+++ b/docs/docs/components/index.md
@@ -1,81 +0,0 @@
---
-title: Components
-description: Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.
-layout: page-outline
-categories:
-  - actions
-  - feedback: 'Feedback & Status'
-  - imagery
-  - inputs
-  - navigation
-  - organization
-  - helpers: 'Utilities'
-override:tags: []
---
-
-<div id="component-filter">
-  <wa-input type="search" placeholder="Search components" clearable autofocus></wa-input>
-</div>
-
-{% set allPages = collections.components %}
-{% include "grouped-pages.njk" %}
-
-<div id="component-filter-empty" hidden>
-  No results
-</div>
-
-<script type="module">
-  const container = document.getElementById('component-filter');
-  const empty = document.getElementById('component-filter-empty');
-  const grid = document.getElementById('content');
-  const input = container.querySelector('wa-input');
-
-  function updateResults() {
-    const filter = input.value.toLowerCase().trim();
-
-    // Hide headings while filtering
-    grid.querySelectorAll('h2').forEach(heading => {
-      heading.hidden = filter === '' ? false : true;
-    });
-
-    // Show matching components
-    grid.querySelectorAll('a:has(> wa-card)').forEach(link => {
-      console.log(link);
-      const content = link.textContent.toLowerCase();
-      const keywords = link.getAttribute('data-keywords') || '';
-      const isMatch = filter === '' || (content + keywords).includes(filter);
-      link.hidden = !isMatch;
-    });
-
-    // Show empty state when there's a search filter and no results
-    if (filter !== '' && grid.querySelector('a:not([hidden])') === null) {
-      empty.hidden = false;
-    } else {
-      empty.hidden = true;
-    }
-  }
-
-  input.addEventListener('wa-input', updateResults);
-</script>
-
-<style>
-  wa-card#drawer-card::part(header) {
-    --spacing: 0;
-    justify-content: flex-end;
-    overflow: hidden;
-  }
-
-  #component-filter {
-    margin-block-end: var(--wa-space-xl);
-  }
-
-  #component-filter-empty {
-    border: dashed var(--wa-border-width-m) var(--wa-color-neutral-border-quiet);
-    border-radius: var(--wa-border-radius-l);
-    font-size: var(--wa-font-size-l);
-    color: var(--wa-color-text-quiet);
-    text-align: center;
-    padding-block: var(--wa-space-2xl);
-    margin-block-start: 0
-  }
-</style>
--- a/docs/docs/components/index.njk
+++ b/docs/docs/components/index.njk
@@ -0,0 +1,14 @@
+---
+title: Components
+description: Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.
+layout: overview
+categories:
+  - actions
+  - feedback: 'Feedback & Status'
+  - imagery
+  - inputs
+  - navigation
+  - organization
+  - helpers: 'Utilities'
+override:tags: []
+---
--- a/docs/docs/components/page-samples/documentation.md
+++ b/docs/docs/components/page-samples/documentation.md
@@ -127,7 +127,7 @@ eleventyExcludeFromCollections: true
    </a>
  </nav>
  <header slot="main-header">
-    <div class="wa-flank:end wa-border-radius-l wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
+    <div class="wa-flank:end wa-border-radius-l wa-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>
--- a/docs/docs/components/page-samples/media-app.md
+++ b/docs/docs/components/page-samples/media-app.md
@@ -5,7 +5,7 @@ layout: blank
 eleventyExcludeFromCollections: true
 ---

-<wa-page class="wa-theme-default-dark">
+<wa-page class="wa-dark">
  <header slot="header">
    <div class="wa-cluster">
      <wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
--- a/docs/docs/components/page.md
+++ b/docs/docs/components/page.md
@@ -1,9 +1,9 @@
 ---
 title: Page
 description: Pages offer an easy way to scaffold entire page layouts using minimal markup.
-tags: [organization, layout]
+tags: [pro, organization, layout]
 isPro: true
-order: 1
+order: 0
 # icon: page
 ---

@@ -119,7 +119,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
    </a>
  </nav>
  <header slot="main-header">
-    <div class="wa-flank:end wa-border-radius-l wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
+    <div class="wa-flank:end wa-border-radius-l wa-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>
@@ -299,7 +299,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
 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">
+<wa-page class="wa-dark">
  <header slot="header">
    <div class="wa-cluster">
      <wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
--- a/docs/docs/components/page/demo-page.css
+++ b/docs/docs/components/page/demo-page.css
--- a/docs/assets/examples/page-demo/demo.css
+++ b/docs/assets/examples/page-demo/demo.css
--- a/docs/assets/examples/page-demo/demo.js
+++ b/docs/assets/examples/page-demo/demo.js
@@ -7,7 +7,7 @@ let stylesheets = Array.from(document.querySelectorAll("link[rel=stylesheet][hre
  .join('\n');
 let includes = `${stylesheets}
  <script src="/dist/webawesome.loader.js" type="module"></script>
-  <link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;
+  <link rel="stylesheet" href="./demo-page.css">`;

 async function render() {
  await customElements.whenDefined('wa-checkbox');
--- a/docs/docs/components/popup.md
+++ b/docs/docs/components/popup.md
@@ -248,7 +248,7 @@ Use the `distance` attribute to change the distance between the popup and its an
    <div class="box"></div>
  </wa-popup>

-  <wa-range min="-50" max="50" step="1" value="0" label="Distance"></wa-range>
+  <wa-slider min="-50" max="50" step="1" value="0" label="Distance"></wa-slider>
 </div>

 <style>
@@ -267,7 +267,7 @@ Use the `distance` attribute to change the distance between the popup and its an
    border-radius: var(--wa-border-radius-m);
  }

-  .popup-distance wa-range {
+  .popup-distance wa-slider {
    max-width: 260px;
  }
 </style>
@@ -275,7 +275,7 @@ Use the `distance` attribute to change the distance between the popup and its an
 <script>
  const container = document.querySelector('.popup-distance');
  const popup = container.querySelector('wa-popup');
-  const distance = container.querySelector('wa-range');
+  const distance = container.querySelector('wa-slider');

  distance.addEventListener('wa-input', () => (popup.distance = distance.value));
 </script>
@@ -292,7 +292,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
    <div class="box"></div>
  </wa-popup>

-  <wa-range min="-50" max="50" step="1" value="0" label="Skidding"></wa-range>
+  <wa-slider min="-50" max="50" step="1" value="0" label="Skidding"></wa-slider>
 </div>

 <style>
@@ -311,7 +311,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
    border-radius: var(--wa-border-radius-m);
  }

-  .popup-skidding wa-range {
+  .popup-skidding wa-slider {
    max-width: 260px;
  }
 </style>
@@ -319,7 +319,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
 <script>
  const container = document.querySelector('.popup-skidding');
  const popup = container.querySelector('wa-popup');
-  const skidding = container.querySelector('wa-range');
+  const skidding = container.querySelector('wa-slider');

  skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
 </script>
@@ -747,8 +747,8 @@ When a gap exists between the anchor and the popup element, this option will add
  </wa-popup>
  <br>
  <wa-switch checked>Hover Bridge</wa-switch><br>
-  <wa-range min="0" max="50" step="1" value="10" label="Distance"></wa-range>
-  <wa-range min="-50" max="50" step="1" value="0" label="Skidding"></wa-range>
+  <wa-slider min="0" max="50" step="1" value="10" label="Distance"></wa-slider>
+  <wa-slider min="-50" max="50" step="1" value="0" label="Skidding"></wa-slider>
 </div>
 <style>
  .popup-hover-bridge span[slot='anchor'] {
@@ -766,7 +766,7 @@ When a gap exists between the anchor and the popup element, this option will add
    border-radius: var(--wa-border-radius-m);
  }

-  .popup-hover-bridge wa-range {
+  .popup-hover-bridge wa-slider {
    max-width: 260px;
    margin-top: .5rem;
  }
@@ -780,8 +780,8 @@ When a gap exists between the anchor and the popup element, this option will add
  const container = document.querySelector('.popup-hover-bridge');
  const popup = container.querySelector('wa-popup');
  const hoverBridge = container.querySelector('wa-switch');
-  const distance = container.querySelector('wa-range[label="Distance"]');
-  const skidding = container.querySelector('wa-range[label="Skidding"]');
+  const distance = container.querySelector('wa-slider[label="Distance"]');
+  const skidding = container.querySelector('wa-slider[label="Skidding"]');
  distance.addEventListener('wa-input', () => (popup.distance = distance.value));
  skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
  hoverBridge.addEventListener('wa-change', () => (popup.hoverBridge = hoverBridge.checked));
--- a/docs/docs/components/slider.md
+++ b/docs/docs/components/slider.md
@@ -1,13 +1,13 @@
 ---
-title: Range
+title: Slider
 description: Ranges allow the user to select a single value within a given range using a slider.
 tags: [inputs, forms]
 native: slider
-icon: range
+icon: slider
 ---

 ```html {.example}
-<wa-range></wa-range>
+<wa-slider></wa-slider>
 ```

 :::info
@@ -21,7 +21,7 @@ This component works with standard `<form>` elements. Please refer to the sectio
 Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead.

 ```html {.example}
-<wa-range label="Volume" min="0" max="100"></wa-range>
+<wa-slider label="Volume" min="0" max="100"></wa-slider>
 ```

 ### Hint
@@ -29,7 +29,7 @@ Use the `label` attribute to give the range an accessible label. For labels that
 Add descriptive hint to a range with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.

 ```html {.example}
-<wa-range label="Volume" hint="Controls the volume of the current song." min="0" max="100"></wa-range>
+<wa-slider label="Volume" hint="Controls the volume of the current song." min="0" max="100"></wa-slider>
 ```

 ### Min, Max, and Step
@@ -37,7 +37,7 @@ Add descriptive hint to a range with the `hint` attribute. For hints that contai
 Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing.

 ```html {.example}
-<wa-range min="0" max="10" step="1"></wa-range>
+<wa-slider min="0" max="10" step="1"></wa-slider>
 ```

 ### Disabled
@@ -45,7 +45,7 @@ Use the `min` and `max` attributes to set the range's minimum and maximum values
 Use the `disabled` attribute to disable a slider.

 ```html {.example}
-<wa-range disabled></wa-range>
+<wa-slider disabled></wa-slider>
 ```

 ### Tooltip Placement
@@ -53,7 +53,7 @@ Use the `disabled` attribute to disable a slider.
 By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider.

 ```html {.example}
-<wa-range tooltip="bottom"></wa-range>
+<wa-slider tooltip="bottom"></wa-slider>
 ```

 ### Disable the Tooltip
@@ -61,7 +61,7 @@ By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it be
 To disable the tooltip, set `tooltip` to `none`.

 ```html {.example}
-<wa-range tooltip="none"></wa-range>
+<wa-slider tooltip="none"></wa-slider>
 ```

 ### Custom Track Colors
@@ -69,12 +69,12 @@ To disable the tooltip, set `tooltip` to `none`.
 You can customize the active and inactive portions of the track using the `--track-color-active` and `--track-color-inactive` custom properties.

 ```html {.example}
-<wa-range
+<wa-slider
  style="
  --track-color-active: var(--wa-color-brand-fill-loud);
  --track-color-inactive: var(--wa-color-brand-fill-normal);
 "
-></wa-range>
+></wa-slider>
 ```

 ### Custom Track Offset
@@ -82,7 +82,7 @@ You can customize the active and inactive portions of the track using the `--tra
 You can customize the initial offset of the active track using the `--track-active-offset` custom property.

 ```html {.example}
-<wa-range
+<wa-slider
  min="-100"
  max="100"
  style="
@@ -90,7 +90,7 @@ You can customize the initial offset of the active track using the `--track-acti
  --track-color-inactive: var(--wa-color-brand-fill-normal);
  --track-active-offset: 50%;
 "
-></wa-range>
+></wa-slider>
 ```

 ### Custom Tooltip Formatter
@@ -98,7 +98,7 @@ You can customize the initial offset of the active track using the `--track-acti
 You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument.

 ```html {.example}
-<wa-range min="0" max="100" step="1" class="range-with-custom-formatter"></wa-range>
+<wa-slider min="0" max="100" step="1" class="range-with-custom-formatter"></wa-slider>

 <script>
  const range = document.querySelector('.range-with-custom-formatter');
@@ -111,8 +111,8 @@ You can change the tooltip's content by setting the `tooltipFormatter` property
 The component adapts to right-to-left (RTL) languages as you would expect.

 ```html {.example}
-<wa-range dir="rtl"
+<wa-slider dir="rtl"
  label="مقدار"
  hint="التحكم في مستوى صوت الأغنية الحالية."
-  style="--track-color-active: var(--wa-color-brand-fill-loud)" value="10"></wa-range>
+  style="--track-color-active: var(--wa-color-brand-fill-loud)" value="10"></wa-slider>
 ```
--- a/docs/docs/components/tag.md
+++ b/docs/docs/components/tag.md
@@ -15,9 +15,50 @@ icon: tag

 ## Examples

+### Appearance
+
+Use the `size` attribute to change a tag's visual appearance.
+The default appearance is `outlined filled`.
+
+```html {.example}
+<div class="wa-stack">
+<p>
+  <wa-tag variant="brand" appearance="outlined accent">Outlined accent</wa-tag>
+  <wa-tag variant="brand" appearance="accent">Accent</wa-tag>
+  <wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
+  <wa-tag variant="brand" appearance="filled">Filled</wa-tag>
+  <wa-tag variant="brand" appearance="outlined filled">Outlined Filled</wa-tag>
+</p>
+<p>
+  <wa-tag variant="success" appearance="outlined accent">Outlined accent</wa-tag>
+  <wa-tag variant="success" appearance="accent">Accent</wa-tag>
+  <wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
+  <wa-tag variant="success" appearance="filled">Filled</wa-tag>
+  <wa-tag variant="success" appearance="outlined filled">Outlined Filled</wa-tag>
+<p>
+  <wa-tag variant="neutral" appearance="outlined accent">Outlined accent</wa-tag>
+  <wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
+  <wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
+  <wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
+  <wa-tag variant="neutral" appearance="outlined filled">Outlined Filled</wa-tag>
+<p>
+  <wa-tag variant="warning" appearance="outlined accent">Outlined accent</wa-tag>
+  <wa-tag variant="warning" appearance="accent">Accent</wa-tag>
+  <wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
+  <wa-tag variant="warning" appearance="filled">Filled</wa-tag>
+  <wa-tag variant="warning" appearance="outlined filled">Outlined Filled</wa-tag>
+<p>
+  <wa-tag variant="danger" appearance="outlined accent">Outlined accent</wa-tag>
+  <wa-tag variant="danger" appearance="accent">Accent</wa-tag>
+  <wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
+  <wa-tag variant="danger" appearance="filled">Filled</wa-tag>
+  <wa-tag variant="danger" appearance="outlined filled">Outlined Filled</wa-tag>
+</div>
+```
+
 ### Sizes

-Use the `size` attribute to change a tab's size.
+Use the `size` attribute to change a tag's size.

 ```html {.example}
 <wa-tag size="small">Small</wa-tag>
--- a/docs/docs/customizing.md
+++ b/docs/docs/customizing.md
@@ -12,12 +12,12 @@ Web Awesome uses numerous CSS custom properties that make up a high-level themin

 Because these custom properties live at the page level, they're prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties.

-To customize a theme, simply override any of these custom properties in your own stylesheet by scoping your styles to `:root`, `:host`, and, if needed, the class for the specific theme you want to override. Here's an example that changes the default brand color (blue) to violet in the light theme using existing [literal colors](/docs/theming/color/#literal-colors).
+To customize a theme, simply override any of these custom properties in your own stylesheet by scoping your styles to `:root`, `:host`, and, if needed, the class for the specific theme you want to override. Here's an example that changes the default brand color (blue) to violet in the light theme using existing [literal colors](/docs/tokens/color/#literal-colors).

 ```css
-:root,
+:where(:root),
 :host,
-.wa-theme-default-light {
+.wa-theme-default {
  /* Changes the brand color to violet across the library */
  --wa-color-brand-fill-quiet: var(--wa-color-violet-95);
  --wa-color-brand-fill-normal: var(--wa-color-violet-90);
--- a/docs/docs/docs.11tydata.js
+++ b/docs/docs/docs.11tydata.js
@@ -0,0 +1,10 @@
+export default {
+  eleventyComputed: {
+    children(data) {
+      let mainTag = data.tags?.[0];
+      let collection = data.collections[mainTag] ?? [];
+
+      return collection.filter(item => item.data.parent === data.page.fileSlug);
+    },
+  },
+};
--- a/docs/docs/experimental/form-validation.md
+++ b/docs/docs/experimental/form-validation.md
@@ -15,7 +15,7 @@ Adding the `wa-valid` or `wa-invalid` class to a form control will change its ap
      <wa-option>Well, maybe two is OK</wa-option>
    </wa-select>
    <wa-textarea class="wa-valid" label="Bio" hint="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
-    <wa-range class="wa-valid" value="50" label="Volume" hint="Crank it up"></wa-range><br>
+    <wa-slider class="wa-valid" value="50" label="Volume" hint="Crank it up"></wa-slider><br>
    <wa-checkbox class="wa-valid" checked>I am awesome</wa-checkbox><br>
    <wa-checkbox class="wa-valid">So am I</wa-checkbox><br><br>
    <wa-switch class="wa-valid" checked>Still awesome</wa-switch><br>
@@ -35,7 +35,7 @@ Adding the `wa-valid` or `wa-invalid` class to a form control will change its ap
      <wa-option>Well, maybe two is OK</wa-option>
    </wa-select>
    <wa-textarea class="wa-invalid" label="Bio" hint="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
-    <wa-range class="wa-invalid" value="50" label="Volume" hint="Crank it up"></wa-range><br>
+    <wa-slider class="wa-invalid" value="50" label="Volume" hint="Crank it up"></wa-slider><br>
    <wa-checkbox class="wa-invalid" checked>I am awesome</wa-checkbox><br>
    <wa-checkbox class="wa-invalid">So am I</wa-checkbox><br><br>
    <wa-switch class="wa-invalid" checked>Still awesome</wa-switch><br>
--- a/docs/docs/experimental/sandbox.md
+++ b/docs/docs/experimental/sandbox.md
@@ -1,7 +1,7 @@
 ---
 title: Theming Sandbox
 description: TODO
-layout: page
+layout: page-outline
 ---

 ## Card
@@ -132,7 +132,7 @@ layout: page
 <br />
 <wa-switch checked>Switch on</wa-switch>
 <br /><br />
-<wa-range label="Range" hint="Here's a bit of handy content." min="0" max="100"></wa-range>
+<wa-slider label="Range" hint="Here's a bit of handy content." min="0" max="100"></wa-slider>
 <br /><br />
 <wa-input label="Label" hint="Super helpful and/or contextual content" placeholder="Placeholder"></wa-input>
 <br />
@@ -172,7 +172,7 @@ layout: page
 <div class="shadow" style="box-shadow: var(--wa-shadow-l);"></div>
 ```

-## Tests
+## Alignment Tests

 ```html {.example}
 <style>
@@ -239,17 +239,114 @@ layout: page
    <wa-badge>OCBS</wa-badge>
    <wa-avatar></wa-avatar>
    <wa-rating></wa-rating>
-    <wa-range></wa-range>
+    <wa-slider></wa-slider>
    <wa-icon-button name="gear" label="Settings"></wa-icon-button>
    <wa-progress-bar value="50" style="width: 8rem;"></wa-progress-bar>
    <wa-spinner></wa-spinner>
  </div>
  <div class="alignment">
-    <wa-input label="AaBbCc" hint="Lorem ipsum dolor"></wa-input>
-    <wa-select label="AaBbCc" value="ocbs" multiple hint="Lorem ipsum dolor">
+    <wa-input label="AaBbCc" hint="Ipsum"></wa-input>
+    <wa-select label="AaBbCc" value="ocbs" multiple hint="Ipsum">
      <wa-option value="ocbs">OCBS</wa-option>
    </wa-select>
-    <wa-color-picker label="AaBbCc" hint="Lorem ipsum dolor"></wa-color-picker>
+    <wa-color-picker label="AaBbCc" hint="Ipsum"></wa-color-picker>
  </div>
 </div>
 ```
+
+## Custom Property Tests
+
+```html {.example}
+<style>
+  .wa-theme-test {
+    --wa-form-control-background-color: mistyrose;
+
+    --wa-form-control-border-style: dotted;
+    --wa-form-control-border-width: 3px;
+    --wa-form-control-border-radius: 12px;
+
+    --wa-form-control-activated-color: mediumvioletred;
+    --wa-form-control-border-color: palevioletred;
+
+    --wa-form-control-label-color: rosybrown;
+    --wa-form-control-label-font-weight: 900;
+    --wa-form-control-label-line-height: 1;
+
+    --wa-form-control-value-color: brown;
+    --wa-form-control-value-font-weight: 900;
+    --wa-form-control-value-line-height: 2;
+
+    --wa-form-control-placeholder-color: lightpink;
+  }
+</style>
+<div class="wa-theme-test" style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+  <label>Native Input <input type="text" placeholder="placeholder"></label>
+  <wa-input label="WA Input" type="text" placeholder="placeholder"></wa-input>
+
+  <label>Native Input <input type="text" value="value"></label>
+  <wa-input label="WA Input" type="text" value="value"></wa-input>
+
+  <label>Native Textarea <textarea placeholder="placeholder"></textarea></label>
+  <wa-textarea label="WA Textarea" placeholder="placeholder"></wa-textarea>
+
+  <label>Native Textarea <textarea>value</textarea></label>
+  <wa-textarea label="WA Textarea" value="value"></wa-textarea>
+
+  <label><input type="checkbox" checked> Native Checkbox</label>
+  <wa-checkbox checked>WA Checkbox</wa-checkbox>
+
+  <label><input type="checkbox"> Native Checkbox</label>
+  <wa-checkbox>WA Checkbox</wa-checkbox>
+
+  <label><input type="radio" checked> Native Radio</label>
+  <wa-radio checked>WA Radio</wa-radio>
+
+  <label><input type="radio"> Native Radio</label>
+  <wa-radio>WA Radio</wa-radio>
+
+  <label>
+    Native Select 
+    <select value="option-1">
+      <option value="option-1">Option 1</option>
+      <option value="option-2">Option 2</option>
+      <option value="option-3">Option 3</option>
+      <option value="option-4">Option 4</option>
+    </select>
+  </label>
+  <wa-select label="WA Select" value="option-1">
+    <wa-option value="option-1">Option 1</wa-option>
+    <wa-option value="option-2">Option 2</wa-option>
+    <wa-option value="option-3">Option 3</wa-option>
+    <wa-option value="option-4">Option 4</wa-option>
+  </wa-select>
+</div>
+
+```
+
+## Text Controls Tests
+
+```html {.example}
+<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+  <label>Native Input <input type="text" value="value"></label>
+  <wa-input label="WA Input" type="text" value="value"></wa-input>
+
+  <label>
+    Native Select 
+    <select value="option-1">
+      <option value="option-1">Option 1</option>
+      <option value="option-2">Option 2</option>
+      <option value="option-3">Option 3</option>
+      <option value="option-4">Option 4</option>
+    </select>
+  </label>
+  <wa-select label="WA Select" value="option-1">
+    <wa-option value="option-1">Option 1</wa-option>
+    <wa-option value="option-2">Option 2</wa-option>
+    <wa-option value="option-3">Option 3</wa-option>
+    <wa-option value="option-4">Option 4</wa-option>
+  </wa-select>
+
+  <label>Native Textarea <textarea>value</textarea></label>
+  <wa-textarea label="WA Textarea" value="value"></wa-textarea>
+</div>
+```
--- a/docs/docs/experimental/themer.md
+++ b/docs/docs/experimental/themer.md
@@ -5,6 +5,15 @@ layout: page
 hasOutline: false
 ---

+<script>
+  // Add stylesheet to set themed headers
+  const themeHeadersLink = document.createElement("link");
+  themeHeadersLink.type="text/css";
+  themeHeadersLink.rel="stylesheet";
+  themeHeadersLink.href="/assets/styles/theme-headers.css";
+  document.getElementsByTagName("head")[0].appendChild(themeHeadersLink);
+</script>
+
 <style>
  /* turn off eleventy header anchors */
  .anchor-heading a {
@@ -156,7 +165,7 @@ hasOutline: false
    --wa-form-control-border-radius: var(--wa-border-radius-m);

    --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
-    --wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
+    --wa-form-control-border-color: var(--wa-color-neutral-border-normal);

    --wa-form-control-label-color: var(--wa-color-text-normal);
    --wa-form-control-label-font-weight: var(--wa-font-weight-normal);
@@ -168,16 +177,6 @@ hasOutline: false

    --wa-form-control-placeholder-color: color-mix(in oklab, var(--wa-color-text-normal), transparent);

-    --wa-form-control-height-s: calc(
-      var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height)
-    );
-    --wa-form-control-height-m: calc(
-      var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height)
-    );
-    --wa-form-control-height-l: calc(
-      var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height)
-    );
-
    --wa-form-control-required-content: '*';
    --wa-form-control-required-content-color: inherit;
    --wa-form-control-required-content-offset: -0.1em;
@@ -364,13 +363,13 @@ hasOutline: false
  /* file uploader styles */
  .file-uploader {
    position: relative;
-    border: var(--wa-form-control-border-width) dashed var(--wa-form-control-resting-color);
+    border: var(--wa-form-control-border-width) dashed var(--wa-form-control-border-color);
    border-radius: var(--wa-form-control-border-radius);
    background: var(--wa-form-control-background-color);
    cursor: pointer;
    font-weight: var(--wa-font-weight-action);
-    height: calc(var(--wa-form-control-height-m) + var(--wa-border-width-s) * 2);
-    line-height: var(--wa-form-control-height-m);
+    height: calc(var(--wa-form-control-height) + var(--wa-border-width-s) * 2);
+    line-height: var(--wa-form-control-height);
    text-align: center;
  }

@@ -502,11 +501,11 @@ hasOutline: false
    </div>
    <wa-select name="theme" label="Pick a theme to start!" value="default">
      <wa-option value="default">Default</wa-option>
-      <wa-option data-alpha="remove" value="fa">Font Awesome</wa-option>
+      <wa-option data-alpha="remove" value="awesome">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="tailspin">Tailspin</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>
@@ -661,10 +660,10 @@ hasOutline: false
      <wa-option value="dotted">Dotted</wa-option>
      <wa-option value="double">Double</wa-option>
    </wa-select>
-    <wa-range name="border-width" label="Border width" min="1" max="5" value="1" step="1" tooltip="none"></wa-range>
-    <wa-range name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125" tooltip="none"></wa-range>
-    <wa-range name="corners" label="Corners" min="0" max="1.5" value=".25" step=".125" tooltip="none"></wa-range>
-    <wa-range name="depth" label="Depth" min="0" max="4" value="0" step="1" tooltip="none"></wa-range>
+    <wa-slider name="border-width" label="Border width" min="1" max="5" value="1" step="1" tooltip="none"></wa-slider>
+    <wa-slider name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125" tooltip="none"></wa-slider>
+    <wa-slider name="corners" label="Corners" min="0" max="1.5" value=".25" step=".125" tooltip="none"></wa-slider>
+    <wa-slider name="depth" label="Depth" min="0" max="4" value="0" step="1" tooltip="none"></wa-slider>
  </wa-details>
 </form>

@@ -877,10 +876,10 @@ hasOutline: false

    switch(themeSelect.value) {
      case 'classic':
-      case 'migration':
+      case 'tailspin':
        colorPalette = 'classic';
        break;
-      case 'fa':
+      case 'awesome':
        colorPalette = 'bright';
        break;
      case 'playful':
@@ -1045,11 +1044,11 @@ hasOutline: false

    switch(themeSelect.value) {
      case 'premium':
-      case 'migration':
+      case 'tailspin':
      case 'playful':
      case 'brutalist':
      case 'classic':
-      case 'fa':
+      case 'awesome':
      case 'glassy':
      case 'active':
        assetFolder = themeSelect.value;
@@ -1245,7 +1244,7 @@ hasOutline: false
    let presetLogoIcons;

    switch(themeSelect.value) {
-      case 'fa':
+      case 'awesome':
        presetLogoIcons = ['cupcake', 'camera-retro', 'rocket-launch', 'cookie-bite'];
        break;
      case 'premium':
@@ -1257,7 +1256,7 @@ hasOutline: false
      case 'brutalist':
        presetLogoIcons = ['leaf', 'mug-hot', 'book-open', 'landmark'];
        break;
-      case 'migration':
+      case 'tailspin':
        presetLogoIcons = ['wind', 'feather', 'lemon', 'wind-turbine'];
        break;
      case 'glassy':
@@ -1447,7 +1446,7 @@ hasOutline: false

  function setPreferredIcons() {
    switch(themeSelect.value) {
-      case 'fa':
+      case 'awesome':
        iconFamily.value = 'fa-classic';
        iconStyle.value = 'solid';
        useFaIcons();
@@ -1491,7 +1490,7 @@ hasOutline: false
          }
        });
        break;
-      case 'migration':
+      case 'tailspin':
        iconFamily.value = 'fa-classic';
        iconStyle.value = 'solid';
        useFaIcons();
@@ -1664,7 +1663,7 @@ hasOutline: false

  .preview-container {
    background: var(--wa-color-surface-lowered);
-    container: preview / inline-size;
+    container-type: inline-size;
    padding: 0;
    max-inline-size: 1400px;
    margin-inline: auto;
@@ -1743,7 +1742,7 @@ hasOutline: false

  /* strata product cards */

-  .products wa-card::part(base) {
+  .products wa-card {
    height: 100%;
  }

@@ -2124,7 +2123,7 @@ hasOutline: false
 <h3>Ontological Shock</h3>
 <p>The allegory is related to Plato's theory of Forms, which holds that the true essence of an object is not what we perceive with our senses, but rather its quality, and that most people perceive only the shadow of the object and are thus limited to false perception.</p>
 <pre class="codeblock">
-<code class="language-html">&lt;html class="wa-theme-default-dark"&gt;
+<code class="language-html">&lt;html class="wa-dark"&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" href="path/to/webawesome/dist/styles/themes/dark.css" /&gt;
  &lt;/head&gt;
--- a/docs/docs/layout.md
+++ b/docs/docs/layout.md
@@ -1,27 +0,0 @@
---
-title: Layout
-description: Browse Web Awesome's components and utilities for creating responsive web layouts.
-layout: page-outline
-categories: ["components", "utilities"]
---
-
-<style>
-  wa-page > main {
-    max-width: 120ch;
-    margin-inline: auto;
-  }
-  .index-grid wa-card::part(header) {
-    background-color: var(--wa-color-neutral-fill-quiet);
-    border-bottom: none;
-  }
-  wa-card .component-name,
-  wa-card .page-name {
-    font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-action);
-  }
-</style>
-
-<p style="max-width: 80ch">Layout components and utility classes help you organize content that can adapt to any device or screen size. Browse the collection of responsive layout tools included in Web Awesome Pro.</p>
-
-{% set allPages = collections.layout %}
-{% include "grouped-pages.njk" %}
--- a/docs/docs/layout.njk
+++ b/docs/docs/layout.njk
@@ -0,0 +1,7 @@
+---
+title: Layout
+description: Layout components and utility classes help you organize content that can adapt to any device or screen size. Browse the collection of responsive layout tools included in Web Awesome Pro.
+layout: overview
+categories: ["components", "utilities"]
+override:tags: []
+---
--- a/docs/docs/native/button.md
+++ b/docs/docs/native/button.md
@@ -4,6 +4,9 @@ description: 'Button styles apply your Web Awesome theme to native HTML buttons.
 tags: forms
 component: button
 icon: button
+snippets:
+  '<button>': https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+  '.wa-button': false
 ---

 ```html {.example}
@@ -17,7 +20,7 @@ icon: button

 ### Variants

-Use the variant utility classes to set the button's semantic variant.
+Use the [variant utility classes](../utilities/color.md) to set the button's semantic variant.

 ```html {.example}
 <button class="wa-neutral">Neutral</button>
@@ -29,7 +32,7 @@ Use the variant utility classes to set the button's semantic variant.

 ### Appearance

-Use the appearance utility classes to change the button's visual appearance:
+Use the [appearance utility classes](../utilities/appearance.md) to change the button's visual appearance:

 ```html {.example}
 <div style="margin-block-end: 1rem;">
@@ -66,7 +69,7 @@ Use the appearance utility classes to change the button's visual appearance:

 ### Sizes

-Use `wa-size-*` classes to change a button's size.
+Use the [size utility classes](../utilities/size.md) to change a button's size.

 ```html {.example}
 <button class="wa-size-s">Small</button>
--- a/docs/docs/native/callout.md
+++ b/docs/docs/native/callout.md
@@ -0,0 +1,116 @@
+---
+title: Callout
+description: Callouts are used to display important messages inline.
+component: callout
+icon: callout
+snippets: '.wa-callout'
+---
+
+```html {.example}
+<article class="wa-callout">
+  This is a callout style, applied to a standard article element.
+</article>
+```
+
+## Examples
+
+### Variants
+
+Use the [variant utility classes](../utilities/color.md) to set the callout's color variant.
+
+```html {.example}
+<article class="wa-callout wa-brand">
+  <strong>This is super informative</strong><br />
+  You can tell by how pretty the callout is.
+</article>
+
+<br />
+
+<article class="wa-callout wa-success">
+  <strong>Your changes have been saved</strong><br />
+  You can safely exit the app now.
+</article>
+
+<br />
+
+<article class="wa-callout wa-neutral">
+  <strong>Your settings have been updated</strong><br />
+  Settings will take effect on next login.
+</article>
+
+<br />
+
+<article class="wa-callout wa-warning">
+  <strong>Your session has ended</strong><br />
+  Please login again to continue.
+</article>
+
+<br />
+
+<article class="wa-callout wa-danger">
+  <strong>Your account has been deleted</strong><br />
+  We're very sorry to see you go!
+</article>
+```
+
+### Appearance
+
+Use the [appearance utility classes](../utilities/appearance.md) to change the callout's visual appearance (the default is `outlined filled`).
+
+```html {.example}
+<article class="wa-callout wa-brand wa-outlined wa-accent">
+  This <strong>accent</strong> callout is also <strong>outlined</strong>
+</article>
+
+<br />
+
+<article class="wa-callout wa-brand wa-accent">
+  This <strong>accent</strong> callout draws attention without an outline
+</article>
+
+<br />
+
+<article class="wa-callout wa-brand wa-outlined wa-filled">
+  This callout is both <strong>filled</strong> and <strong>outlined</strong>
+</article>
+
+<br />
+
+<article class="wa-callout wa-brand wa-filled">
+  This callout is only <strong>filled</strong>
+</article>
+
+<br />
+
+<article class="wa-callout wa-brand wa-outlined">
+  Here's an <strong>outlined</strong> callout
+</article>
+
+<br />
+
+<article class="wa-callout wa-brand wa-plain">
+  No bells and whistles on this <strong>plain</strong> callout
+</article>
+```
+
+### Sizes
+
+Use the [size utility classes](../utilities/size.md) to change a callout's size.
+
+```html {.example}
+<article class="wa-callout wa-brand wa-outlined wa-accent wa-size-l">
+  This is meant to be very emphasized.
+</article>
+
+<br />
+
+<article class="wa-callout">
+  Normal-sized callout.
+</article>
+
+<br />
+
+<article class="wa-callout wa-plain wa-plain wa-size-s">
+  Just a small tip!
+</article>
+```
--- a/docs/docs/native/index.njk
+++ b/docs/docs/native/index.njk
@@ -1,20 +1,16 @@
 ---
 title: Native Styles
 description: Native Styles use your theme to style native HTML elements to match the look and feel of Web Awesome components.
-layout: page-outline
+layout: overview
 categories: ['forms', 'apps', 'content']
 override:tags: []
 ---

+{% markdown %}
 Web Awesome works _with_ the platform, rather than trying to reinvent it.
 If all you need is styles, you don’t need to use new `<wa-*>` elements!
 We also provide styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit.

-{% set allPages = collections.native %}
-{% include "grouped-pages.njk" %}
-
-<br> {# Temp fix for spacing issue #}
-
 ## Installation

 To use all Web Awesome page styles (including [utilities](/docs/utilities/)), include the following stylesheet in your project:
@@ -86,3 +82,4 @@ E.g. to opt-out of `<details>` styling:

 If you find yourself opting out of entire element types too much, you could consider only including the parts of Native Styles you need instead of the whole thing.
 You can find instructions for how to do that on the individual Native Styles pages.
+{% endmarkdown %}
--- a/docs/docs/native/slider.md
+++ b/docs/docs/native/slider.md
@@ -3,8 +3,8 @@ title: Slider
 description: Sliders allow the user to select a single value within a given range using a slider.
 tags: forms
 layout: element
-icon: range
-component: range
+icon: slider
+component: slider
 elements:
  "<input type=range>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
 ---
--- a/docs/docs/patterns/app.md
+++ b/docs/docs/patterns/app.md
@@ -1,7 +1,6 @@
 ---
 title: App
 description: TODO
-layout: pattern.njk
 ---

 TODO Page Description
@@ -1045,4 +1044,4 @@ TODO Page Description
 ```
 ### With templates

-### With recommendations grid
+### With recommendations grid
--- a/docs/docs/patterns/blog.md
+++ b/docs/docs/patterns/blog.md
@@ -1,7 +1,6 @@
 ---
 title: Blog
 description: TODO
-layout: pattern.njk
 ---

 TODO Page Description
@@ -367,4 +366,4 @@ TODO Page Description
  }

 </style>
-```
+```
--- a/docs/docs/patterns/business.md
+++ b/docs/docs/patterns/business.md
@@ -1,9 +1,8 @@
 ---
 title: Business
 description: TODO
-layout: pattern.njk
 ---

 TODO Page Description

-## Examples
+## Examples
--- a/docs/docs/patterns/ecommerce-category-filter.md
+++ b/docs/docs/patterns/ecommerce-category-filter.md
@@ -1,7 +1,8 @@
 ---
-title: E-commerce - Category Filter
+title: Category Filter
 description: TODO
-layout: pattern.njk
+parent: ecommerce
+tags: e-commerce
 ---

 TODO Page Description
@@ -9,4 +10,4 @@ TODO Page Description
 ## With inline actions and expandable sidebar filters
 ```html{.example}

-```
+```
--- a/docs/docs/patterns/ecommerce-category-preview.md
+++ b/docs/docs/patterns/ecommerce-category-preview.md
@@ -1,11 +1,12 @@
 ---
-title: E-commerce - Category Preview
+title: Category Preview
 description: TODO
-layout: pattern.njk
+parent: ecommerce
+tags: e-commerce
 ---

 TODO Page Description

 ## Three Column (WIP)

-```
+```
--- a/docs/docs/patterns/ecommerce-order-history.md
+++ b/docs/docs/patterns/ecommerce-order-history.md
@@ -1,7 +1,8 @@
 ---
-title: E-commerce - Order History
+title: Order History
 description: TODO
-layout: pattern.njk
+parent: ecommerce
+tags: e-commerce
 ---

 TODO Page Description
@@ -10,4 +11,4 @@ TODO Page Description

 ```html{.example}

-```
+```
--- a/docs/docs/patterns/ecommerce-order-summary.md
+++ b/docs/docs/patterns/ecommerce-order-summary.md
@@ -1,7 +1,8 @@
 ---
-title: E-commerce - Product List
+title: Product List
 description: TODO
-layout: pattern.njk
+parent: ecommerce
+tags: e-commerce
 ---

 TODO Page Description
@@ -9,4 +10,4 @@ TODO Page Description
 ## With split image
 ```html{.example}

-```
+```
--- a/docs/docs/patterns/ecommerce-product-detail.md
+++ b/docs/docs/patterns/ecommerce-product-detail.md
@@ -1,7 +1,8 @@
 ---
-title: E-commerce - Product Detail
+title: Product Detail
 description: TODO
-layout: pattern.njk
+parent: ecommerce
+tags: e-commerce
 ---

 TODO Page Description
--- a/docs/docs/patterns/ecommerce-product-list.md
+++ b/docs/docs/patterns/ecommerce-product-list.md
@@ -1,7 +1,8 @@
 ---
-title: E-commerce - Product Lists
+title: Product Lists
 description: TODO
-layout: pattern.njk
+parent: ecommerce
+tags: e-commerce
 ---

 TODO Page Description
--- a/docs/docs/patterns/ecommerce-product-review.md
+++ b/docs/docs/patterns/ecommerce-product-review.md
@@ -1,7 +1,8 @@
 ---
-title: E-commerce - Product Reviews
+title: Product Reviews
 description: TODO
-layout: pattern.njk
+parent: ecommerce
+tags: e-commerce
 ---

 TODO Page Description
--- a/docs/docs/patterns/ecommerce-shopping-cart.md
+++ b/docs/docs/patterns/ecommerce-shopping-cart.md
@@ -1,9 +1,10 @@
 ---
-title: E-commerce - Shopping Cart
+title: Shopping Cart
 description: TODO
-layout: pattern.njk
+parent: ecommerce
+tags: e-commerce
 ---

 TODO Page Description

-## Examples
+## Examples
--- a/docs/docs/patterns/ecommerce.md
+++ b/docs/docs/patterns/ecommerce.md
@@ -2,6 +2,7 @@
 title: E-commerce
 description: TODO
 layout: page
+tags: e-commerce
 ---

 TODO Page Description
--- a/docs/docs/patterns/education.md
+++ b/docs/docs/patterns/education.md
@@ -1,9 +1,8 @@
 ---
 title: Business
 description: TODO
-layout: pattern.njk
 ---

 TODO Page Description

-## Examples
+## Examples
--- a/docs/docs/patterns/entertainement.md
+++ b/docs/docs/patterns/entertainement.md
@@ -1,9 +1,8 @@
 ---
 title: Entertainment
 description: TODO
-layout: pattern.njk
 ---

 TODO Page Description

-## Examples
+## Examples
--- a/docs/docs/patterns/index.md
+++ b/docs/docs/patterns/index.md
@@ -1,5 +0,0 @@
---
-title: Patterns
-description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
-layout: page-outline
---
--- a/docs/docs/patterns/index.njk
+++ b/docs/docs/patterns/index.njk
@@ -0,0 +1,8 @@
+---
+title: Patterns
+description: Patterns are reusable solutions to common design problems.
+layout: overview
+categories: ["e-commerce"]
+listChildren: true
+override:tags: []
+---
--- a/docs/docs/patterns/membership.md
+++ b/docs/docs/patterns/membership.md
@@ -1,9 +1,8 @@
 ---
 title: Membership
 description: TODO
-layout: pattern.njk
 ---

 TODO Page Description

-## Examples
+## Examples
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Lea Verou	90c1417284	Attempt to use tintless variables	2025-01-14 17:08:40 -05:00
Lea Verou	b512890f2a	Add docs	2025-01-14 17:08:40 -05:00
Lea Verou	bc873afae8	Tintless color variables (definition only for now)	2025-01-14 17:08:40 -05:00
Lea Verou	6b07c9a040	Native callout (#513 ) Co-authored-by: lindsaym-fa <dev@lindsaym.design>	2025-01-14 14:56:03 -05:00
Lea Verou	24a76f6a7c	Color palette housekeeping (#523 )	2025-01-14 14:54:34 -05:00
Lea Verou	89c0667e9c	Improve maintainability of color docs	2025-01-14 14:44:30 -05:00
Lea Verou	434084ea4e	Playful: refer to rudimentary palette	2025-01-14 14:32:39 -05:00
Lea Verou	1738c6345b	Fix #514 for reals this time	2025-01-14 13:02:37 -05:00
Lea Verou	0ac7916a1b	Attempt to fix #514	2025-01-14 13:02:37 -05:00
Lea Verou	e7979991e3	Update docs to lean into the "tokens" terminology in lieu of "properties" Co-Authored-By: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>	2025-01-14 12:31:24 -05:00
Lea Verou	07f70098f8	Theming -> Design Tokens	2025-01-14 12:31:24 -05:00
Lindsay M	17146698db	Finalize Premium theme, closes #489 (#510 ) * Finalize Premium theme * Improve theme compatibility of dark mode shadows * Improve theme compatibility of code examples * Add comments * Revert dark mode shadow color changes (to be addressed separately) * Revert dark mode shadow color change * Clean up redundant `wa-dark` properties	2025-01-14 11:56:30 -05:00
Lea Verou	bf852b1296	Fix #515	2025-01-14 11:29:36 -05:00
Lea Verou	e367c0ef29	Open sidebar group on overview pages, fixes #507	2025-01-14 10:20:04 -05:00
Lea Verou	01210ef364	Implement `.wa-invert`, closes #497 (#508 )	2025-01-14 10:04:27 -05:00
Lea Verou	40648e15fb	Refactor: `library.system.ts` to export supported icons (#505 )	2025-01-13 16:37:54 -05:00
Cory LaViska	ab67ecfad3	add native icon to search (#498 )	2025-01-13 14:48:51 -05:00
Lea Verou	a07f6280a3	Themes category in docs (#477 ) Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> Co-authored-by: lindsaym-fa <dev@lindsaym.design>	2025-01-13 13:14:12 -05:00
Lea Verou	6822b25772	Rewrite color scheme logic (#481 ) - Minimize needless swaps - Centralize logic - Use an actual `<wa-select>` rather than hacking it with `<wa-dropdown>` - Move shared includes to shared template - Rewrite critical theme JS - Refactor of theme picker code - Utilize view transitions better and use them for color scheme too - Do not store default value in localStorage - Removed unused `*-wide` templates - Fixed #482	2025-01-10 15:32:28 -05:00
Konnor Rogers	200188b0c3	properly report build failures (#485 ) * properly report build failures * prettier	2025-01-10 13:29:14 -05:00
Lea Verou	bc6fe95f13	`npm run build:alpha:serve` per @KonnorRogers suggestion	2025-01-10 13:13:01 -05:00
Lea Verou	3a33fa208a	Add command for testing the build without having to push to Vercel	2025-01-10 13:13:01 -05:00
Lea Verou	3ec4e6de07	Fix build	2025-01-10 13:13:01 -05:00
Lea Verou	eb07dc1410	Use passthrough copy (#474 )	2025-01-09 17:24:18 -05:00
Lindsay M	5bfeb8044e	Theme showcase improvements (#480 ) * Presentation improvements * Change `-webkit-text-size-adjust` to supported value (`none` isn't a supported keyword on iOS) * Try using `text-size-adjust` * Throwing caution to the wind * Give up on `text-size-adjust` and add 1-column view	2025-01-09 13:31:31 -05:00
lindsaym-fa	aa915c3e28	Doc revisions	2025-01-09 11:57:35 -05:00
Lea Verou	c79457a607	Attempt at better style isolation between themes Still doesn't quite fix #475 but might be a nudge in the right direction.	2025-01-09 11:57:35 -05:00
Lea Verou	419f0610e4	Template-tweaks - Move breadcrumbs to separate template - Rename `beforeContent` to `header` - Move breadcrumbs inside header	2025-01-09 02:26:01 -05:00
Cory LaViska	7ab5ca8640	3.0.0-alpha.8	2025-01-08 18:30:48 -05:00
Cory LaViska	c39faff936	update version (#473 )	2025-01-08 18:17:31 -05:00
Lindsay M	6d31db57f6	Revise and add showcase to Themes doc (#456 ) * Initial progress * Make responsive * quick fix to show theme name/description * Small styling tweaks * Documentation updates * Revisions and improvements * Avoid using static URLs 'cause that's ridiculous --------- Co-authored-by: Cory LaViska <cory@abeautifulsite.net>	2025-01-08 17:33:09 -05:00
Lea Verou	21ed4f82b0	Improve UX of Layout section	2025-01-08 17:13:38 -05:00
Lea Verou	844e374a72	Fix #470	2025-01-08 16:23:34 -05:00
Lea Verou	e5f4c14608	Fix native select caret positioning, fixes #411	2025-01-08 15:58:33 -05:00
Lea Verou	1ad963f5ad	`wa-card` styling fixes	2025-01-08 15:36:12 -05:00
Lea Verou	4476117932	Add default layout as a failsafe	2025-01-08 15:20:26 -05:00
Lindsay M	e52a7a5ce5	Pre-release theme touchup (#465 ) * Fix themed card styles * Improve lowered surface colors across themes	2025-01-08 15:04:27 -05:00
Lindsay M	fa66f4262d	Fix mobile theme selector; fixes #440 (#446 ) * Fix styling * Fix mobile theme selector label	2025-01-08 15:01:20 -05:00
Lea Verou	a87f3627bb	Fix #451 without changing logic/specificity	2025-01-08 15:00:45 -05:00
Cory LaViska	06e432589f	change migration => tailspin (#463 )	2025-01-08 13:59:27 -05:00
Cory LaViska	b4c4074ae1	fix mobile color picker bug (#462 )	2025-01-08 13:49:57 -05:00
Lea Verou	19042fcca4	Decouple dark mode & theme, fixes #445 closes #385 (#457 ) Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>	2025-01-08 12:50:29 -05:00
Lea Verou	8541369ae1	Fix #437 regression (#458 )	2025-01-08 12:33:19 -05:00
Kelsey Jackson	31cfdf5704	Fixed radio button styling regression (#443 ) * fixed styling regression * Import missing appearance utilities * Fix up radio button theme styles * tweaked based on feedback --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design>	2025-01-08 12:07:28 -05:00
Lindsay M	3511a60b93	Fix missing select styles, improve consistency (#450 ) * Refactor for consistency, fix missing theme styles * Remove unused custom properties from docs * Add missing custom property to docs * Add UI test case	2025-01-08 12:04:22 -05:00
Lindsay M	e55e091192	Fix caret color on slider tooltips (#448 )	2025-01-08 12:03:16 -05:00
Lindsay M	09df23dff8	Use theme properties for color picker border (#449 )	2025-01-08 10:02:18 -05:00
Lea Verou	f4a88c3b3a	Harmonize `updated()` definitions - Use proper type - Use same argument name - Ensure `super.updated()` is called	2025-01-07 17:39:56 -05:00
Cory LaViska	559efcd1d2	Fix switch's submitted value; fixes #409 (#442 ) * fix switch's submitted value; fixes #409 * update tests	2025-01-07 17:01:27 -05:00
Lindsay M	e046015ed5	Theme cleanup (#414 ) * formatting, docs tweaks * FA theme cleanup * Revert removal of `--wa-form-control-height-` Classic theme cleanup * Use consistent selectors for dark mode * Clean slate for additional themes * Retire depth stylesheets * Move header styles for themer out of themes * Missed instance of dark mode selector * Migration theme cleanup * Brutalist theme cleanup * Changelog for new themes * Playful theme cleanup * Formatting * Default theme update * Add tests for form theming * Fix test typo * Change misnamed `multiplier` properties to `scale` * Active theme cleanup * Mellow theme cleanup * Cleanup unused FA styles * Glassy theme progress * Add checked styles to glassy * Fix typo * Final FA theme cleanup * Rename FA theme to 'Awesome', allow in alpha * Final brutalist theme cleanup * A few more brutalist tweaks * One last brutalist tweak * Final mellow theme cleanup * Final Tailwind theme cleanup * Final active theme cleanup * Some classic theme cleanup * Remove unused `--wa-form-control-height-` Rename `--wa-form-control-resting-color` to `border-color` * Touch up callout `appearance` styles * Add more themes to alpha * Add changelog for removal of `--wa-form-control-height-` Clean up colors * Final classic theme cleanup * Add new themes to alpha build * Re-add teal (used by Awesome theme) * sync mobile/desktop theme pickers and don't dup IDs * Remove `color/standard.css` (duplicates `/themes/default/color.css`) * add view transition * Add premium theme for later cleanup * Accommodate new tag `appearance` styles * Revise `--wa-form-control-height-` changelog entry Co-authored-by: Lea Verou <lea@verou.me> Improve `--wa-border-width-scale` description Co-authored-by: Lea Verou <lea@verou.me> * Better border docs * Premium tweaks --------- Co-authored-by: Cory LaViska <cory@abeautifulsite.net> Co-authored-by: Lea Verou <lea@verou.me>	2025-01-07 15:41:57 -05:00
Lea Verou	44dbdd14cc	Separate `WebAwesomeFormAssociatedElement` (and friends) into a separate file	2025-01-07 14:23:20 -05:00
lindsaym-fa	5e3fed605e	Add changelog	2025-01-07 11:56:19 -05:00
Lea Verou	4b4f2247c5	[Tag] Add `appearance`, closes #435	2025-01-07 11:56:19 -05:00
Lea Verou	eca15dc7fc	Revamp `<wa-card>` HTML & CSS, fix #431 (#433 ) Co-authored-by: Cory LaViska <cory@abeautifulsite.net>	2025-01-07 10:12:32 -05:00
Lea Verou	eca444bbaa	[Callout] Add `appearance` & `size`, closes #422 (#432 ) Co-authored-by: lindsaym-fa <dev@lindsaym.design>	2025-01-07 09:38:28 -05:00
Lea Verou	f39308dbc5	Allow customization of outlined styles, fixes #412 (#426 )	2025-01-06 17:35:57 -05:00
Lea Verou	fc84e1a50d	Replace M form control height with size-dependent height (#425 )	2025-01-06 17:10:11 -05:00
Lea Verou	ef7d47e2b9	[Docs] Move commonalities across blocks to a single base layout (#424 )	2025-01-06 17:01:29 -05:00
Lea Verou	a9af3172ad	Rename Range to Slider (#428 )	2025-01-06 16:44:43 -05:00
konnorrogers	cde8bea97a	test commit	2025-01-06 13:24:54 -05:00
Kelsey Jackson	33b4045dad	tweaked the tag component (#407 ) * tweaked the tag component * updated based on feedback * updated to remove span * changed display to initial * prettier --------- Co-authored-by: Konnor Rogers <konnor5456@gmail.com>	2025-01-06 13:23:47 -05:00
Cory LaViska	bc4ad39f2e	Fix tests (#410 ) * skip broken test * add middleware to follow new stylesheet imports * fix avatar tests * update badge tests * fix button tests * skip carousel test * fix checkbox tests * fix details test * update radio button tests * fix input tests * fix progress bar tests * update * fix range tests * fix select tests * restore wrapper div to pass a11y tests * fix switch tests * fix tag tests * fix textarea tests * fix tooltip tests * skips * fix tree item tests * [DRAFT]: test fixes (#421) * working on some stuff.. * add a small delay for menu-item * prettier * add a small delay for menu-item * prettier * add a small delay for menu-item * add a small delay for menu-item * add a small delay for menu-item * prettier * Empty commit * add a small delay for menu-item * always build with alpha * always build with alpha * move to alpha builds --------- Co-authored-by: Konnor Rogers <konnor5456@gmail.com>	2025-01-06 13:13:34 -05:00
Konnor Rogers	b868b1e8fc	fix alpha builds (#423 ) * fix alpha builds * Update docs/_includes/sidebar-group.njk Co-authored-by: Lea Verou <lea@verou.me> * Update docs/_includes/sidebar-group.njk Co-authored-by: Lea Verou <lea@verou.me> --------- Co-authored-by: Lea Verou <lea@verou.me>	2025-01-06 12:53:47 -05:00
Lea Verou	e916d771b0	Ensure `--box-shadow` & `--border-width` defaults are always set on the root stylable element, fixes #419	2025-01-06 12:41:28 -05:00
lindsaym-fa	bd6fe74c7d	Fix missing input value styles	2025-01-04 16:42:45 -05:00
Lea Verou	ac7437894a	Automate all overviews, fix bugs with filtering	2025-01-03 20:17:19 -05:00
Lea Verou	55ebe6e20b	Add `e-commerce` tag, for overview	2025-01-03 20:14:51 -05:00
Lea Verou	e6388e7671	Let `sort` filter provide missing values so we can specify large values to place elements at the end	2025-01-03 19:20:49 -05:00
Lea Verou	9a21ae6f52	Make sure unlisted page cards never show up	2025-01-03 19:02:31 -05:00
Lea Verou	cd3386ce78	Exclude unlisted pages properly	2025-01-03 18:51:16 -05:00
Lea Verou	26b9bbb515	Automate Theming listing	2025-01-03 18:44:11 -05:00
Lea Verou	bda0ec0313	Overviews don't need to be MD files And having them as MD files can insert pointless `<p>` tags if we're not careful, which can cause weird bugs.	2025-01-03 18:27:07 -05:00
Lea Verou	2490fbeaca	`attr` filter for nicer optional attributes	2025-01-03 18:12:41 -05:00
Lea Verou	297149021e	Add `{% markdown %}` paired shortcode	2025-01-03 17:45:26 -05:00
Lea Verou	c700c3ec09	Components index doesn't actually need to be a MD file And having it as a MD file can insert pointless `<p>` tags if we're not careful, which can cause weird bugs.	2025-01-03 16:13:02 -05:00
Lea Verou	b383d8bf2d	Move e-commerce patterns under E-commerce As discussed on Slack with @kelseythejackson	2025-01-03 16:08:24 -05:00
Lea Verou	1dcf895be1	Don’t render children on the top level as well	2025-01-03 16:00:36 -05:00
Lea Verou	19fd55ca97	fix: `noAlpha`, not `isAlpha`	2025-01-03 15:58:42 -05:00
Lea Verou	fa094d924d	Automate sidebar listings	2025-01-03 15:52:58 -05:00
Lea Verou	2a957e6316	Add layout and isAlpha to pattern pages automatically	2025-01-03 15:52:27 -05:00
Lea Verou	90b6a9a8ac	Add `status` as computed data on component pages	2025-01-03 15:02:36 -05:00
Lea Verou	99fdd90601	[Select] Remove leftover code The select uses the appearance utils, so this is done automatically.	2025-01-03 14:23:09 -05:00
Lea Verou	ecaa461638	[Select] Remove leftover code, rel #413 This was meant to be deleted, since there’s already `min-height: var(--wa-form-control-height);` above it which already responds to size.	2025-01-03 14:14:39 -05:00