Merge branch 'styling-attributes' of https://github.com/shoelace-style/webawesome into styling-attributes

Experiment
Themes category in docs (#477 )
2026-01-19 07:29:14 +00:00 · 2025-01-13 13:20:31 -05:00 · 2025-01-13 13:20:25 -05:00 · 2025-01-13 13:14:12 -05:00 · 2025-01-10 15:32:28 -05:00 · 2025-01-10 13:29:14 -05:00
132 changed files with 4067 additions and 6364 deletions
--- 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 || ''));
@@ -148,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/_data/componentList.js
+++ b/docs/_data/componentList.js
@@ -31,13 +31,25 @@ const components = manifest.modules.flatMap(module => {
        return prop.kind === 'field' && prop.privacy !== 'private';
      });

-      return {
+      let ret = {
        ...declaration,
        slug: declaration.tagName.replace(/^wa-/, ''),
        methods,
        attributes,
        properties,
      };
+
+      // Add named keys to these arrays
+      for (let thing of ['methods', 'attributes', 'properties', 'cssProperties', 'cssParts', 'cssStates', 'events']) {
+        if (ret[thing]) {
+          ret[thing] = ret[thing].reduce((acc, item) => {
+            acc[item.name] = item;
+            return acc;
+          }, ret[thing]);
+        }
+      }
+
+      return ret;
    });
 });

--- 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,14 @@
          </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/head.njk
+++ b/docs/_includes/head.njk
@@ -0,0 +1,53 @@
+<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 #}
+<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme or 'default' }}.css" render="blocking" fetchpriority="high" />
+{% if not forceTheme %}
+<script>
+if (localStorage.presetTheme) {
+	let preset = localStorage.presetTheme;
+	let script = document.currentScript;
+	let link = script.previousElementSibling;
+	let newLink = link.cloneNode();
+	newLink.href = link.href.replace("/default.css", `/${preset}.css`);
+	newLink.addEventListener('load', () => {
+		link.remove();
+	});
+	link.after(newLink);
+}
+</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-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
@@ -1,6 +1,6 @@
 {# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
 {% if collections[tag] -%}
-  <wa-details {{ (('/' + tag + '/') in page.url) | attr('open') }}>
+  <wa-details {{ (tag in (tags or [])) | attr('open') }}>
    <h2 slot="summary">
      {% set groupUrl %}/docs/{{ tag }}/{% endset %}
      {% if groupUrl | getCollectionItemFromUrl %}
--- a/docs/_includes/sidebar-link.njk
+++ b/docs/_includes/sidebar-link.njk
@@ -1,6 +1,6 @@
 {% if not (isAlpha and page.data.noAlpha) and page.fileSlug != tag and not page.data.unlisted -%}
 	<li>
-		<a href="/docs/{{ tag }}/{{ page.fileSlug }}">{{ page.data.title }}</a>
+		<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 %}

--- 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>
@@ -20,6 +19,7 @@
 </ul>

 {% for tag, title in {
+  'themes': 'Themes',
  'components': 'Components',
  'native': 'Native Styles',
  'utilities': 'Style Utilities',
--- 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/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
@@ -4,7 +4,8 @@
 {% extends '../_includes/base.njk' %}

 {# Component header #}
-{% block beforeContent %}
+{% block header %}
+  {% include 'breadcrumbs.njk' %}
  <h1 class="title">{{ title }}</h1>
  <div class="block-info">
    {% set snippets = (elements or element or snippets or snippet) | dict  %}
--- 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/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/_utils/filters.js
+++ b/docs/_utils/filters.js
@@ -14,6 +14,18 @@ export function trimPipes(content) {
  return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
 }

+export function stripQuotes(content) {
+  return content.replace(/^(['"])(.+)\1$/g, '$2');
+}
+
+export function getEnumValues(type) {
+  return type
+    .split('|')
+    .map(value => value.trim())
+    .filter(Boolean)
+    .map(stripQuotes);
+}
+
 export function keys(obj) {
  return Object.keys(obj);
 }
@@ -167,6 +179,9 @@ export function sort(arr, by = { 'data.order': 1, '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)));
--- 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/preset-theme-picker.js
+++ b/docs/assets/scripts/preset-theme-picker.js
@@ -0,0 +1,64 @@
+import { domChange, nextFrame, ThemeAspect } from './theme-picker.js';
+
+const presetTheme = new ThemeAspect({
+  defaultValue: 'default',
+  key: 'presetTheme',
+  picker: 'wa-select.preset-theme-selector',
+
+  applyChange() {
+    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' },
+          );
+        },
+        { 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.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/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,115 @@
+// 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);
+
+      for (let el of document.querySelectorAll('.wa-invert')) {
+        el.classList.toggle('wa-dark', !dark);
+        el.classList.toggle('wa-light', 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/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;
@@ -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);
@@ -428,7 +440,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 +455,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/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/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/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,7 +1,7 @@
 ---
 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: 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/customizing.md
+++ b/docs/docs/customizing.md
@@ -15,9 +15,9 @@ Because these custom properties live at the page level, they're prefixed with `-
 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).

 ```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/experimental/sandbox.md
+++ b/docs/docs/experimental/sandbox.md
@@ -1,7 +1,7 @@
 ---
 title: Theming Sandbox
 description: TODO
-layout: page
+layout: page-outline
 ---

 ## Card
@@ -172,7 +172,7 @@ layout: page
 <div class="shadow" style="box-shadow: var(--wa-shadow-l);"></div>
 ```

-## Tests
+## Alignment Tests

 ```html {.example}
 <style>
@@ -245,11 +245,108 @@ layout: page
    <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>
@@ -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/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -12,17 +12,27 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
 During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
 :::

-## Next
+## 3.0.0-alpha.8

 - Simplified the internal structure and CSS properties of `<wa-card>`, removed `base` part.
 - Added `appearance` to `<wa-callout>` and `<wa-tag>`
 - Fixed a bug in `<wa-switch>` where it would not properly change its "checked" state when its property changed.
+- Fixed a bug in `<wa-switch>` where the value would be incorrectly submitted as "on" when a value is provided and the switch is checked
 - Fixed a bug in the `wa-split` CSS utility that caused it to behave incorrectly
 - Improved performance of `<wa-select>` when using a large number of options
 - Updated the Japanese translation

 ### Theming

+- Added new themes:
+  - Awesome
+  - Active
+  - Brutalist
+  - Mellow
+  - Tailspin
+  - Playful
+- Renamed `--wa-form-control-resting-color` to `--wa-form-control-border-color` for familiarity and accuracy
+- Removed size-based `--wa-form-control-height-*` tokens in favor of `--wa-form-control-height` (see [size utilities](/docs/utilities/size/))
 - Updated the `--wa-border-width-*` and `--wa-border-radius-*` scale for better DX
  - Changed the value of `--wa-border-width-scale` to `1` and updated calculations of size-based `--wa-border-width-*` tokens
  - Changed the value of `--wa-border-radius-scale` to `1` and updated calculations of size-based `--wa-border-radius-*` tokens
--- a/docs/docs/test/styling.njk
+++ b/docs/docs/test/styling.njk
@@ -0,0 +1,36 @@
+---
+title: Styling Tests
+---
+
+<h2>Appearance and variant tests</h2>
+
+{% for component in componentsBy.attribute.variant %}
+{%- if component.attributes.appearance -%}
+<h3><a href="../{{ component.url }}"><code>&lt;{{ component.tagName }}&gt;</code></a></h3>
+
+{% set variantValues = component.attributes.variant.type.text | getEnumValues %}
+{% set appearanceValues = component.attributes.appearance.type.text | getEnumValues %}
+
+<table>
+<thead>
+	<tr>
+		<th>Variant</th>
+		{% for appearance in appearanceValues %}
+			<th>{{ appearance }}</th>
+		{%- endfor %}
+	</tr>
+</thead>
+{% for variant in variantValues %}
+<tr>
+	<th>{{ variant }}</th>
+	{% for appearance in appearanceValues %}
+	<td>
+		<{{ component.tagName }} variant={{ variant }} appearance={{ appearance }}>{{ variant }} {{ appearance }}</{{ component.tagName }}>
+	</td>
+	{%- endfor %}
+</tr>
+{%- endfor %}
+</table>
+
+{% endif %}
+{%- endfor %}
--- a/docs/docs/themes.md
+++ b/docs/docs/themes.md
@@ -1,139 +0,0 @@
---
-title: Themes
-description: Everything you need to know about theming Web Awesome.
-layout: page-outline
---
-
-Themes are collections of pre-defined CSS custom properties that thread through every Web Awesome component and pattern.
-
-Web Awesome includes two pre-made themes:
- **Default** for a clean look that prioritizes accessibility and performance
- **Classic** for the look and feel of Shoelace with more accessible color pairings
-
-## What's a Theme?
-
-Themes are a standard collection of [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) that cover all styles from colors to transitions. We use these custom properties throughout Web Awesome components to ensure a cohesive look and feel. Our [Theming pages](/docs/theming/) document these styles so that you can use them freely throughout your project and customize them as needed.
-
-Themes are scoped to unique classes for each color scheme, such as `wa-theme-default-light` and `wa-theme-default-dark`, and the `:host` selector. Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions, while scoping to `:host` ensures the styles are applied to the shadow roots of custom elements.
-
-Additionally, styles may be scoped to the `:root` selector to be activated automatically. For pre-made themes, *all* custom properties are scoped to both `:root` and the class for the light color scheme (`wa-theme-default-light` or `wa-theme-classic-light`), activating the light color scheme by default.
-
-Other themes or color schemes must be activated with the corresponding class, like the dark color scheme for pre-made themes (`wa-theme-default-dark` or `wa-theme-classic-dark`), which only defines a subset of custom properties for colors. This ensures that non-color styles only need to be defined once for the theme, regardless of whether the color scheme is light or dark.
-
-For example, the default theme is set up like this:
-
-```css
-:root,
-:host,
-.wa-theme-default-light {
-  /* all CSS custom properties for color, typography, space, etc. */
-}
-
-.wa-theme-default-dark,
-.wa-theme-default-dark :host {
-  /* subset of CSS custom properties for color */
-}
-```
-
-## Using Themes
-
-You can import the default and classic themes from the Web Awesome CDN. Simply add the following code to the `<head>` of your page to import the **default** theme:
-
-```html
-<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/styles/themes/default.css" />
-```
-
-Or import the **classic** theme:
-
-```html
-<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/styles/themes/classic.css" />
-```
-
-Both the default and classic themes include both light and dark color schemes. When importing either theme, the light color scheme is activated by default. To activate the dark color scheme, apply the appropriate class (`wa-theme-default-dark` or `wa-theme-classic-dark`, depending on theme) to the `<html>` element on your page, like this example for the default theme:
-```html
-<html class="wa-theme-default-dark">
-  <head>
-    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
-    <!-- other links, scripts, and metadata -->
-  </head>
-  <body>
-    <!-- page content -->
-  </body>
-</html>
-```
-
-Because themes are scoped to specific classes, you can activate different color schemes or entire themes on different containers throughout the page. This example uses 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-theme-default-dark">
-      <!-- dark-themed sidebar -->
-    </nav>
-
-    <!-- light-themed content -->
-  </body>
-</html>
-```
-
-## Creating Themes
-
-There are two ways to create themes. The easiest way is to customize the default theme. The advanced way is to create a new theme from scratch. Which method you choose depends on your project's requirements and the amount of effort you're willing to invest.
-
-### Customizing a Built-in Theme
-
-Overriding the default theme is the easiest way to customize Web Awesome. You can do this by importing the default theme as-is, then creating a separate stylesheet that overrides [the theming API](/docs/customizing#design-tokens) and adds [component styles](/docs/customizing#css-parts) to your liking. You must import your theme _after_ the default theme.
-
-If you're customizing the default light styles, scope your styles to the following selectors.
-
-```css
-:root,
-:host,
-.wa-theme-default-light {
-  /* your custom styles here */
-}
-```
-
-If you're customizing the default dark styles, scope your styles to the following selectors.
-
-```css
-:host,
-.wa-theme-default-dark {
-  /* your custom styles here */
-}
-```
-
-By customizing a built-in theme, you'll maintain a smaller stylesheet containing only the changes you've made. Contrast this to [creating a new theme](#creating-a-new-theme), where you need to explicitly define every custom property required by the library. This approach is more "future-proof," as new design tokens that emerge in subsequent versions of Web Awesome will be accounted for by built-in themes.
-
-While this approach is easier to maintain, the drawback is that your theme can't be activated independently — it's tied to the built-in theme you're extending.
-
-### Creating a New Theme
-
-Creating a new theme is more of an undertaking than [customizing an existing one](#customizing-a-built-in-theme). At a minimum, you must implement all of the required custom properties. The easiest way to do this is by "forking" a built-in theme and modifying it from there.
-
-Start by changing the selector to match your theme's name. Assuming your new theme is called "Purple Power", your theme should be scoped like this.
-
-```css
-:host,
-.wa-theme-purple-power {
-  /* your custom styles here */
-}
-```
-
-By creating a new theme, you won't be relying on a built-in theme as a foundation. Because of this, you can activate it independently as an alternative to the default theme. This is the recommended approach if you're looking to open source your theme for others to use.
-
-You will, however, need to maintain your theme more carefully, as new versions of Web Awesome change the theming API in ways that your theme won't have accounted for. It's recommended that you clearly specify which version(s) of Web Awesome your theme is designed to work with and keep it up to date as new versions of Web Awesome are released.
-
-## Detecting Color Scheme Preference
-
-Web Awesome's default theme has 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.
--- a/docs/docs/themes/active.md
+++ b/docs/docs/themes/active.md
@@ -0,0 +1,6 @@
+---
+title: Active
+description: Energetic and tactile, always in motion.
+isPro: true
+tags: pro
+---
--- a/docs/docs/themes/awesome.md
+++ b/docs/docs/themes/awesome.md
@@ -0,0 +1,5 @@
+---
+title: Awesome
+description: Punchy and vibrant, the rockstar of themes.
+order: 0.2
+---
--- a/docs/docs/themes/brutalist.md
+++ b/docs/docs/themes/brutalist.md
@@ -0,0 +1,6 @@
+---
+title: Brutalist
+description: Sharp, square, and unapologetically bold.
+isPro: true
+tags: pro
+---
--- a/docs/docs/themes/classic.md
+++ b/docs/docs/themes/classic.md
@@ -0,0 +1,5 @@
+---
+title: Classic
+description: Timeless elegance that never goes out of style.
+order: 0.1
+---
--- a/docs/docs/themes/creating.md
+++ b/docs/docs/themes/creating.md
@@ -0,0 +1,59 @@
+---
+title: Creating Themes
+layout: page-outline
+order: 999
+override:tags: [themes]
+---
+
+There are two ways to create themes.
+The easiest way is to customize the default theme.
+The advanced way is to create a new theme from scratch.
+Which method you choose depends on your project's requirements and the amount of effort you're willing to invest.
+
+## Customizing a Built-in Theme
+
+Overriding the default theme is the easiest way to customize Web Awesome.
+You can do this by importing the default theme as-is, then creating a separate stylesheet that overrides [the theming API](/docs/customizing#design-tokens) and adds [component styles](/docs/customizing#css-parts) to your liking. You must import your theme _after_ the default theme.
+
+If you're customizing the default light styles, scope your styles to the following selectors.
+
+```css
+:where(:root),
+:host,
+.wa-theme-default,
+.wa-light {
+  /* your custom styles here */
+}
+```
+
+If you're customizing the default dark styles, scope your styles to the following selectors.
+
+```css
+.wa-dark,
+:is(:host-context(.wa-dark)) {
+  /* your custom styles here */
+}
+```
+
+By customizing a built-in theme, you'll maintain a smaller stylesheet containing only your changes. Contrast this to [creating a new theme](#creating-a-new-theme), where you need to explicitly define every custom property required by the library. This approach is more "future-proof," as new design tokens that emerge in subsequent versions of Web Awesome will be accounted for by built-in themes.
+
+While this approach is easier to maintain, the drawback is that your theme can't be activated independently — it's tied to the built-in theme you're extending.
+
+## Creating a New Theme
+
+Creating a new theme is more of an undertaking than [customizing an existing one](#customizing-a-built-in-theme). At a minimum, you must implement all of the required custom properties. The easiest way to do this is by "forking" a built-in theme and modifying it from there.
+
+Start by changing the selector to match your theme's name. Assuming your new theme is called "Purple Power", your theme should be scoped like this.
+
+```css
+:where(:root),
+:host,
+.wa-theme-purple-power,
+.wa-light {
+  /* your custom styles here */
+}
+```
+
+By creating a new theme, you won't be relying on a built-in theme as a foundation. Because of this, you can activate it independently as an alternative to the default theme. This is the recommended approach if you're looking to open source your theme for others to use.
+
+You will, however, need to maintain your theme more carefully, as new versions of Web Awesome change the theming API in ways that your theme won't have accounted for. It's recommended that you clearly specify which version(s) of Web Awesome your theme is designed to work with and keep it up to date as new versions of Web Awesome are released.
--- a/docs/docs/themes/default.md
+++ b/docs/docs/themes/default.md
@@ -0,0 +1,5 @@
+---
+title: Default
+description: Your trusty companion, like a perfectly broken-in pair of jeans.
+order: 0
+---
--- a/docs/docs/themes/demo.njk
+++ b/docs/docs/themes/demo.njk
@@ -0,0 +1,40 @@
+---
+layout: blank
+pagination:
+  data: collections.theme
+  size: 1
+  alias: theme
+permalink: '/docs/themes/{{ theme.fileSlug }}/demo.html'
+eleventyExcludeFromCollections: true
+override:tags: []
+eleventyComputed:
+  forceTheme: "{{ theme.fileSlug }}"
+---
+<script>
+  document.getElementById('theme-stylesheet').href = '/dist/styles/themes/{{ theme.fileSlug }}.css';
+</script>
+<script type=module>
+  document.getElementById('theme-stylesheet').href = '/dist/styles/themes/{{ theme.fileSlug }}.css';
+</script>
+
+<link rel="stylesheet" href="/dist/styles/themes/{{ theme.fileSlug }}.css" />
+<link rel="stylesheet" href="/docs/themes/showcase.css" />
+
+{% set content %}
+<header>
+  {% include 'breadcrumbs.njk' %}
+  <h1 class="title">{{ theme.data.title }}</h1>
+  <p>{% include 'status.njk' %}</p>
+  <p id="theme-showcase-description">{{ theme.data.description | inlineMarkdown | safe }}</p>
+</header>
+{% include 'theme-showcase.njk' %}
+{% endset %}
+
+<wa-image-comparer style="width: 100%" position="90">
+<div slot="after" class="theme-showcase wa-gap-xl">
+{{ content | safe }}
+</div>
+<div slot="before" class="theme-showcase wa-gap-xl wa-invert">
+  {{ content | safe }}
+</div>
+</wa-image-comparer>
--- a/docs/docs/themes/glassy.md
+++ b/docs/docs/themes/glassy.md
@@ -0,0 +1,7 @@
+---
+title: Glassy
+description: Smooth, sleek, and reflective.
+isPro: true
+tags: pro
+noAlpha: true
+---
--- a/docs/docs/themes/index.njk
+++ b/docs/docs/themes/index.njk
@@ -0,0 +1,55 @@
+---
+title: Themes
+description: Themes are collections of pre-defined CSS custom properties that thread through every Web Awesome component and pattern.
+layout: overview
+override:tags: []
+forTag: theme
+categories:
+  other: Free
+  pro: Pro
+---
+
+<div class="max-line-length">
+{% markdown %}
+
+## What's a Theme?
+
+Themes are a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) that cover a range of styles from colors to transitions. We use these custom properties throughout Web Awesome components for a cohesive look and feel. Our [Theming pages](/docs/theming/) document these styles so that you can use them freely throughout your project and customize them as needed.
+
+Themes are scoped to unique classes, such as `wa-theme-default` or `wa-theme-classic`.
+Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions.
+Please note that if you import multiple themes, the last one will be the default that will apply if no class is used.
+
+Each theme may also include both light and dark color schemes with the classes `wa-light` and `wa-dark`.
+You can use these classes to apply a specific color scheme to an entire page or just a section.
+In pre-made themes, we use a light color scheme by default.
+
+
+Additionally, styles may be scoped to the `:root` selector to be activated automatically.
+For pre-made themes, *all* custom properties are scoped to `:root`, the theme class, and `wa-light`.
+
+Finally, we scope themes to `:host` and `:host-context()` to ensure the styles are applied to the shadow roots of custom elements.
+
+For example, the default theme is set up like this:
+
+```css
+:where(:root),
+:host,
+.wa-theme-default,
+.wa-light {
+  /* all CSS custom properties for color, typography, space, etc. */
+}
+
+.wa-dark,
+:host-context(.wa-dark) {
+  /* subset of CSS custom properties for a dark color scheme */
+}
+```
+
+## Using Themes
+
+You can import pre-made themes from the Web Awesome CDN.
+Refer to each theme’s page for copyable code snippets.
+
+{% endmarkdown %}
+</div>
--- a/docs/docs/themes/mellow.md
+++ b/docs/docs/themes/mellow.md
@@ -0,0 +1,6 @@
+---
+title: Mellow
+description: Soft and soothing, like a lazy Sunday morning.
+isPro: true
+tags: pro
+---
--- a/docs/docs/themes/playful.md
+++ b/docs/docs/themes/playful.md
@@ -0,0 +1,7 @@
+---
+title: Playful
+description: Fun, colorful, and full of personality.
+isPro: true
+tags: pro
+noAlpha: true
+---
--- a/docs/docs/themes/premium.md
+++ b/docs/docs/themes/premium.md
@@ -0,0 +1,7 @@
+---
+title: Premium
+description: The ultimate in sophistication and style.
+isPro: true
+tags: pro
+noAlpha: true
+---
--- a/docs/docs/themes/showcase.css
+++ b/docs/docs/themes/showcase.css
@@ -0,0 +1,90 @@
+html {
+  background: transparent;
+}
+
+html,
+body,
+.theme-showcase {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.theme-showcase {
+  background-color: var(--wa-color-surface-lowered);
+  border-radius: var(--wa-border-radius-l);
+  padding: var(--wa-space-xl);
+  box-sizing: border-box;
+  overflow: hidden;
+
+  @media (width < 500px) {
+    flex-flow: column;
+  }
+
+  header {
+    min-width: min(25ch, 100vw);
+    align-self: center;
+
+    h1 {
+      margin-bottom: var(--wa-space-2xs);
+    }
+
+    wa-breadcrumb-item:not(:first-of-type, :last-of-type) {
+      display: none;
+    }
+
+    p:empty {
+      display: none;
+    }
+  }
+}
+
+.showcase-examples-wrapper {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.showcase-examples {
+  column-gap: var(--wa-space-xl);
+
+  & wa-card {
+    display: inline-block;
+    width: 100%;
+
+    &:has(+ wa-card) {
+      margin-block-end: var(--wa-space-xl);
+    }
+  }
+
+  @supports not (zoom: 1) {
+    column-count: 1;
+
+    @media (width > 750px) {
+      column-count: 2;
+    }
+
+    @media (width > 950px) {
+      column-count: 3;
+    }
+  }
+
+  @supports (zoom: 1) {
+    column-count: 1;
+    zoom: 40%;
+
+    @media (width > 350px) {
+      column-count: 2;
+    }
+
+    @media (width > 450px) {
+      zoom: 55%;
+    }
+
+    @media (width > 750px) {
+      zoom: 70%;
+    }
+
+    @media (width > 950px) {
+      column-count: 3;
+    }
+  }
+}
--- a/docs/docs/themes/tailspin.md
+++ b/docs/docs/themes/tailspin.md
@@ -0,0 +1,6 @@
+---
+title: Tailspin
+description: Like a bird in flight, guiding you from there to here.
+isPro: true
+tags: pro
+---
--- a/docs/docs/themes/themes.json
+++ b/docs/docs/themes/themes.json
@@ -0,0 +1,4 @@
+{
+  "layout": "theme.njk",
+  "tags": ["themes", "theme"]
+}
--- a/docs/docs/theming/borders.md
+++ b/docs/docs/theming/borders.md
@@ -15,14 +15,15 @@ Border style controls the standard line shape of borders throughout Web Awesome.

 Border widths use `rem` units in order to scale proportionately with the root font size.

-Each border width value uses a `calc()` function with `--wa-border-width-scale` to scale all border widths at once. By default, this multiplier is `0.0625`. The table below lists the result of the calculation.
-
 | Custom Property       | Default Value                    | Preview                                                                   |
 | --------------------- | -------------------------------- | ------------------------------------------------------------------------- |
 | `--wa-border-width-s` | `0.0625rem` <small>(1px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-s)"></div> |
 | `--wa-border-width-m` | `0.125rem` <small>(2px)</small>  | <div class="swatch" style="border-width: var(--wa-border-width-m)"></div> |
 | `--wa-border-width-l` | `0.1875rem` <small>(3px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-l)"></div> |

+To scale all borders at once, you can use the  `--wa-border-width-scale` property which specifies a multiplier on `border-width`. 
+Values < 1 make all borders uniformly thinner, while values > 1 make them thicker.
+
 ## Radius

 Border radius controls the corners of Web Awesome components.
@@ -37,10 +38,11 @@ Common border radius properties allow you to achieve specific shapes beyond your

 Size-based border radius properties allow you to customize the overall roundness of Web Awesome components. These use `rem` units in order to scale proportionately with the root font size.

-Each property uses a `calc()` function with `--wa-border-radius-scale` to uniformly scale all border radii. By default, this multiplier is `1`. The table below lists the result of the calculation.
+| Custom Property         | Default Value                    |  Preview                                                                    |
+| ----------------------- | -------------------------------- | --------------------------------------------------------------------------- |
+| `--wa-border-radius-s`  | `0.1875rem` <small>(3px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-s)"></div> |
+| `--wa-border-radius-m`  | `0.375rem` <small>(6px)</small>  | <div class="swatch" style="border-radius: var(--wa-border-radius-m)"></div> |
+| `--wa-border-radius-l`  | `0.75rem` <small>(12px)</small>  | <div class="swatch" style="border-radius: var(--wa-border-radius-l)"></div> |

-| Custom Property         | Default Value                    |  Preview                                                                     |
-| ----------------------- | -------------------------------- | ---------------------------------------------------------------------------- |
-| `--wa-border-radius-s` | `0.1875rem` <small>(3px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-s)"></div> |
-| `--wa-border-radius-m`  | `0.375rem` <small>(6px)</small>  | <div class="swatch" style="border-radius: var(--wa-border-radius-m)"></div>  |
-| `--wa-border-radius-l`  | `0.75rem` <small>(12px)</small>  | <div class="swatch" style="border-radius: var(--wa-border-radius-l)"></div>  |
+To scale all border radii at once, you can use the  `--wa-border-radius-scale` property which specifies a multiplier on `border-radius`. 
+Values < 1 make corners sharper, while values > 1 make them rounder.
--- a/docs/docs/theming/color.md
+++ b/docs/docs/theming/color.md
@@ -210,6 +210,54 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
  </li>
 </ul>

+<div class="color-name">Teal</div>
+<ul class="color-group">
+  <li class="color-preview">
+    <div class="swatch" style="background-color: var(--wa-color-teal-95)"></div>
+    <small>95</small>
+  </li>
+  <li class="color-preview">
+    <div class="swatch" style="background-color: var(--wa-color-teal-90)"></div>
+    <small>90</small>
+  </li>
+  <li class="color-preview">
+    <div class="swatch" style="background-color: var(--wa-color-teal-80)"></div>
+    <small>80</small>
+  </li>
+  <li class="color-preview">
+    <div class="swatch" style="background-color: var(--wa-color-teal-70)"></div>
+    <small>70</small>
+  </li>
+  <li class="color-preview">
+    <div class="swatch" style="background-color: var(--wa-color-teal-60)"></div>
+    <small>60</small>
+  </li>
+  <li class="color-preview">
+    <div class="swatch" style="background-color: var(--wa-color-teal-50)"></div>
+    <small>50</small>
+  </li>
+  <li class="color-preview">
+    <div class="swatch" style="background-color: var(--wa-color-teal-40)"></div>
+    <small>40</small>
+  </li>
+  <li class="color-preview">
+    <div class="swatch" style="background-color: var(--wa-color-teal-30)"></div>
+    <small>30</small>
+  </li>
+  <li class="color-preview">
+    <div class="swatch" style="background-color: var(--wa-color-teal-20)"></div>
+    <small>20</small>
+  </li>
+  <li class="color-preview">
+    <div class="swatch" style="background-color: var(--wa-color-teal-10)"></div>
+    <small>10</small>
+  </li>
+  <li class="color-preview">
+    <div class="swatch" style="background-color: var(--wa-color-teal-05)"></div>
+    <small>05</small>
+  </li>
+</ul>
+
 <div class="color-name">Blue</div>
 <ul class="color-group">
  <li class="color-preview">
--- a/docs/docs/theming/component-groups.md
+++ b/docs/docs/theming/component-groups.md
@@ -15,11 +15,11 @@ Not every form control uses all of these custom properties. For example, `<wa-ra
 | Custom Property                             | Default Value                                                                                     |
 | ------------------------------------------- | ------------------------------------------------------------------------------------------------- |
 | `--wa-form-control-background-color`        | `var(--wa-color-surface-default)`                                                                 |
+| `--wa-form-control-border-color`            | `var(--wa-color-neutral-border-loud)`                                                             |
 | `--wa-form-control-border-style`            | `var(--wa-border-style)`                                                                          |
 | `--wa-form-control-border-width`            | `var(--wa-border-width-s)`                                                                        |
 | `--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-loud)`                                                             |
 | `--wa-form-control-label-color`             | `var(--wa-color-neutral-border-loud)`                                                             |
 | `--wa-form-control-label-font-weight`       | `var(--wa-font-weight-normal)`                                                                    |
 | `--wa-form-control-label-line-height`       | `var(--wa-line-height-normal)`                                                                    |
@@ -27,9 +27,6 @@ Not every form control uses all of these custom properties. For example, `<wa-ra
 | `--wa-form-control-value-font-weight`       | `var(--wa-font-weight-body)`                                                                      |
 | `--wa-form-control-value-line-height`       | `var(--wa-line-height-condensed)`                                                                 |
 | `--wa-form-control-placeholder-color`       | `var(--wa-color-gray-60)`                                                                         |
-| `--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`                                                                                          |
--- a/docs/docs/utilities/size.md
+++ b/docs/docs/utilities/size.md
@@ -24,6 +24,7 @@ You can create the same effect on any element by using the size utility classes:
 Using these classes does two things:
 - It sets `font-size` to one of the [size tokens](/docs/theming/typography/#font-size).
 You can use CSS `em` units to reference that size in other properties.
+- It calculates `--wa-form-control-height` based on the applied size, supporting consistent heights for elements like inputs and buttons.
 - It aliases a bunch of other properties that CSS can use:

 | Custom Property | Small | Medium | Large |
@@ -32,7 +33,6 @@ You can use CSS `em` units to reference that size in other properties.
 | `--wa-size-smaller` | `--wa-font-size-xs` | `--wa-font-size-s` | `--wa-font-size-m` |
 | `--wa-space` | `--wa-space-s` | `--wa-space-m` | `--wa-space-l` |
 | `--wa-space-smaller` | `--wa-space-xs` | `--wa-space-s` | `--wa-space-m` |
-| `--wa-form-control-height` | `--wa-form-control-height-s` | `--wa-form-control-height-m` | `--wa-form-control-height-l` |

 For example, assume we wanted to make a custom `.tag` class with size variants.

--- a/docs/index.md
+++ b/docs/index.md
@@ -268,7 +268,7 @@ layout: page
    <h1 class="brand-font">Make something <span class="emphasis">awesome</span> with open-source web components</h1>
    <div class="hero-cta">
      <span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price &mdash; but not for long. Get in while the gettin’s good.</span>
-      <wa-button class="wa-theme-default-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
+      <wa-button class="wa-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
        <wa-icon slot="prefix" name="person-running"></wa-icon>
        Pre-order WA Pro
      </wa-button>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@shoelace-style/webawesome",
-  "version": "3.0.0-alpha.7",
+  "version": "3.0.0-alpha.8",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@shoelace-style/webawesome",
-      "version": "3.0.0-alpha.7",
+      "version": "3.0.0-alpha.8",
      "license": "MIT",
      "dependencies": {
        "@ctrl/tinycolor": "^4.1.0",
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@shoelace-style/webawesome",
  "description": "A forward-thinking library of web components.",
-  "version": "3.0.0-alpha.7",
+  "version": "3.0.0-alpha.8",
  "homepage": "https://webawesome.com/",
  "author": "Web Awesome",
  "license": "MIT",
@@ -46,7 +46,9 @@
  "scripts": {
    "start": "node scripts/build.js --develop",
    "build": "node scripts/build.js",
+    "build:serve": "npm run build && npx http-server _site -p 4000",
    "build:alpha": "node scripts/build.js --alpha",
+    "build:alpha:serve": "npm run build:alpha && npx http-server _site -p 4000",
    "start:alpha": "node scripts/build.js --alpha --develop",
    "publish-alpha-cdn": "./publish-alpha-cdn.sh",
    "create": "plop --plopfile scripts/plop/plopfile.js",
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -74,6 +74,10 @@ function generateManifest() {
    execSync('cem analyze --config "custom-elements-manifest.js"');
  } catch (error) {
    console.error(`\n\n${error.message}`);
+
+    if (!isDeveloping) {
+      process.exit(1);
+    }
  }

  spinner.succeed();
@@ -91,6 +95,10 @@ function generateReactWrappers() {
    execSync(`node scripts/make-react.js --outdir "${cdnDir}"`, { stdio: 'inherit' });
  } catch (error) {
    console.error(`\n\n${error.message}`);
+
+    if (!isDeveloping) {
+      process.exit(1);
+    }
  }
  spinner.succeed();

@@ -113,7 +121,15 @@ async function generateStyles() {
    // Remove pro themes
    const allThemes = await globby(join(cdnDir, 'styles/themes/**/*.css'));
    const proThemes = allThemes.filter(file => {
-      if (file.includes('themes/classic') || file.includes('themes/default')) {
+      if (
+        file.includes('themes/classic') ||
+        file.includes('themes/default') ||
+        file.includes('themes/awesome') ||
+        file.includes('themes/active') ||
+        file.includes('themes/mellow') ||
+        file.includes('themes/tailspin') ||
+        file.includes('themes/brutalist')
+      ) {
        return false;
      }
      return true;
@@ -139,6 +155,9 @@ async function generateTypes() {
  try {
    execSync(`tsc --project ./tsconfig.prod.json --outdir "${cdnDir}"`);
  } catch (error) {
+    if (!isDeveloping) {
+      process.exit(1);
+    }
    return Promise.reject(error.stdout);
  }

@@ -211,6 +230,9 @@ async function generateBundle() {
  } catch (error) {
    spinner.fail();
    console.log(chalk.red(`\n${error}`));
+    if (!isDeveloping) {
+      process.exit(1);
+    }
  }

  spinner.succeed();
@@ -227,6 +249,10 @@ async function regenerateBundle() {
  } catch (error) {
    spinner.fail();
    console.log(chalk.red(`\n${error}`));
+
+    if (!isDeveloping) {
+      process.exit(1);
+    }
  }

  spinner.succeed();
@@ -242,24 +268,31 @@ async function generateDocs() {
  if (isAlpha) args.push('--alpha');
  if (isDeveloping) args.push('--develop');

-  // 11ty
-  const output = (await runScript(join(__dirname, 'docs.js'), args))
-    // Cleanup the output
-    .replace('[11ty]', '')
-    .replace(' seconds', 's')
-    .replace(/\(.*?\)/, '')
-    .toLowerCase()
-    .trim();
+  let output;
+  try {
+    // 11ty
+    output = (await runScript(join(__dirname, 'docs.js'), args))
+      // Cleanup the output
+      .replace('[11ty]', '')
+      .replace(' seconds', 's')
+      .replace(/\(.*?\)/, '')
+      .toLowerCase()
+      .trim();

-  // Copy assets
-  await copy(join(docsDir, 'assets'), join(siteDir, 'assets'), { overwrite: true });
+    // Copy dist (production only)
+    if (!isDeveloping) {
+      await copy(cdnDir, join(siteDir, 'dist'));
+    }

-  // Copy dist (production only)
-  if (!isDeveloping) {
-    await copy(cdnDir, join(siteDir, 'dist'));
+    spinner.succeed(`Writing the docs ${chalk.gray(`(${output}`)})`);
+  } catch (error) {
+    console.error('\n\n' + chalk.red(error) + '\n');
+
+    spinner.fail(chalk.red(`Error while writing the docs.`));
+    if (!isDeveloping) {
+      process.exit(1);
+    }
  }
-
-  spinner.succeed(`Writing the docs ${chalk.gray(`(${output}`)})`);
 }

 // Initial build
@@ -360,6 +393,10 @@ if (isDeveloping) {
      reload();
    } catch (err) {
      console.error(chalk.red(err));
+
+      if (!isDeveloping) {
+        process.exit(1);
+      }
    }
  });

--- a/src/components/button-group/button-group.ts
+++ b/src/components/button-group/button-group.ts
@@ -1,3 +1,4 @@
+import type { PropertyValues } from 'lit';
 import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
@@ -32,8 +33,10 @@ export default class WaButtonGroup extends WebAwesomeElement {
  /** The button group's orientation. */
  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';

-  updated(changedProps: Map<string, unknown>) {
-    if (changedProps.has('orientation')) {
+  updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('orientation')) {
      this.setAttribute('aria-orientation', this.orientation);
      this.updateClassNames();
    }
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -5,13 +5,18 @@ import { html, literal } from 'lit/static-html.js';
 import { WaBlurEvent } from '../../events/blur.js';
 import { WaFocusEvent } from '../../events/focus.js';
 import { WaInvalidEvent } from '../../events/invalid.js';
+import {
+  appearanceStyles,
+  sizeStyles,
+  variantStyles,
+  type AppearanceAttribute,
+  type SizeAttribute,
+  type VariantAttribute,
+} from '../../internal/styling-attributes.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
 import nativeStyles from '../../styles/native/button.css';
-import appearanceStyles from '../../styles/utilities/appearance.css';
-import sizeStyles from '../../styles/utilities/size.css';
-import variantStyles from '../../styles/utilities/variants.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
 import '../spinner/spinner.js';
@@ -69,13 +74,13 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
  @property() title = ''; // make reactive to pass through

  /** The button's theme variant. */
-  @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
+  @property({ reflect: true }) variant: VariantAttribute = 'neutral';

  /** The button's visual appearance. */
-  @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent';
+  @property({ reflect: true }) appearance: AppearanceAttribute = 'accent';

  /** The button's size. */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+  @property({ reflect: true }) size: SizeAttribute = 'medium';

  /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
  @property({ type: Boolean, reflect: true }) caret = false;
--- a/src/components/carousel/carousel.css
+++ b/src/components/carousel/carousel.css
@@ -1,7 +1,7 @@
 :host {
  --aspect-ratio: 16 / 9;
  --navigation-color: var(--wa-color-text-quiet);
-  --pagination-color: var(--wa-form-control-resting-color);
+  --pagination-color: var(--wa-form-control-border-color);
  --pagination-color-active: var(--wa-form-control-activated-color);
  --scroll-hint: 0px;
  --slide-gap: var(--wa-space-m, 1rem);
--- a/src/components/color-picker/color-picker.css
+++ b/src/components/color-picker/color-picker.css
@@ -317,8 +317,8 @@
  border-radius: inherit;
  background-color: currentColor;
  box-shadow:
-    inset 0 0 0 0.0625rem var(--wa-form-control-resting-color),
-    inset 0 0 0 0.25rem var(--wa-color-surface-default);
+    inset 0 0 0 var(--border-width) var(--wa-form-control-border-color),
+    inset 0 0 0 calc(var(--border-width) * 2) var(--wa-color-surface-default);
 }

 .trigger--empty:before {
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -54,6 +54,7 @@ import styles from './input.css';
 * @csspart suffix - The container that wraps the suffix.
 *
 * @cssproperty --background-color - The input's background color.
+ * @cssproperty --border-color - The color of the input's borders.
 * @cssproperty --border-width - The width of the input's borders. Expects a single value.
 * @cssproperty --box-shadow - The shadow effects around the edges of the input.
 */
--- a/src/components/popup/popup.ts
+++ b/src/components/popup/popup.ts
@@ -1,5 +1,6 @@
 import { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';
 import { offsetParent } from 'composed-offset-position';
+import type { PropertyValues } from 'lit';
 import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -222,11 +223,11 @@ export default class WaPopup extends WebAwesomeElement {
    this.stop();
  }

-  async updated(changedProps: Map<string, unknown>) {
-    super.updated(changedProps);
+  async updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);

    // Start or stop the positioner when active changes
-    if (changedProps.has('active')) {
+    if (changedProperties.has('active')) {
      if (this.active) {
        this.start();
      } else {
@@ -235,7 +236,7 @@ export default class WaPopup extends WebAwesomeElement {
    }

    // Update the anchor when anchor changes
-    if (changedProps.has('anchor')) {
+    if (changedProperties.has('anchor')) {
      this.handleAnchorChange();
    }

--- a/src/components/progress-ring/progress-ring.ts
+++ b/src/components/progress-ring/progress-ring.ts
@@ -1,3 +1,4 @@
+import type { PropertyValues } from 'lit';
 import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
@@ -38,15 +39,15 @@ export default class WaProgressRing extends WebAwesomeElement {
  /** A custom label for assistive devices. */
  @property() label = '';

-  updated(changedProps: Map<string, unknown>) {
-    super.updated(changedProps);
+  updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);

    //
    // This block is only required for Safari because it doesn't transition the circle when the custom properties
    // change, possibly because of a mix of pixel + unit-less values in the calc() function. It seems like a Safari bug,
    // but I couldn't pinpoint it so this works around the problem.
    //
-    if (changedProps.has('value')) {
+    if (changedProperties.has('value')) {
      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r'));
      const circumference = 2 * Math.PI * radius;
      const offset = circumference - (this.value / 100) * circumference;
--- a/src/components/radio-button/radio-button.css
+++ b/src/components/radio-button/radio-button.css
@@ -34,14 +34,12 @@
 */

 :host([checked]) {
-  --background-color: var(--wa-color-brand-fill-quiet);
-  --background-color-hover: var(--background-color);
-  --border-color: var(--wa-form-control-activated-color);
-  --text-color: var(--wa-color-brand-on-normal);
-  --indicator-color: var(--border-color);
+  --indicator-color: var(--wa-form-control-activated-color);
  --indicator-width: var(--wa-border-width-s);

-  box-shadow:
-    var(--box-shadow, 0 0 transparent),
-    inset 0 0 0 var(--indicator-width) var(--indicator-color);
+  box-shadow: inset 0 0 0 var(--indicator-width) var(--indicator-color);
+
+  & button {
+    --border-color: var(--indicator-color);
+  }
 }
--- a/src/components/radio-button/radio-button.ts
+++ b/src/components/radio-button/radio-button.ts
@@ -8,6 +8,7 @@ import { HasSlotController } from '../../internal/slot.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
 import nativeStyles from '../../styles/native/button.css';
+import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
 import buttonStyles from '../button/button.css';
@@ -50,7 +51,7 @@ import styles from './radio-button.css';
 */
@customElement('wa-radio-button')
 export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = [variantStyles, sizeStyles, nativeStyles, buttonStyles, styles];
+  static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, buttonStyles, styles];

  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');

--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -81,8 +81,6 @@ import styles from './select.css';
 *
 * @cssproperty --background-color - The background color of the select's combobox.
 * @cssproperty --border-color - The border color of the select's combobox.
- * @cssproperty --border-radius - The border radius of the select's combobox.
- * @cssproperty --border-style - The style of the select's borders, including the listbox.
 * @cssproperty --border-width - The width of the select's borders, including the listbox.
 * @cssproperty --box-shadow - The shadow effects around the edges of the select's combobox.
 */
--- a/src/components/slider/slider.css
+++ b/src/components/slider/slider.css
@@ -38,7 +38,7 @@
  }

  --inset-block: calc(50% + (var(--thumb-size) / 2) + var(--tooltip-offset));
-  --border-block: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-fill-loud);
+  --border-block: var(--wa-tooltip-arrow-size) solid var(--wa-tooltip-background-color);

  @media (forced-colors: active) {
    border: solid 1px transparent;
--- a/src/components/switch/switch.css
+++ b/src/components/switch/switch.css
@@ -1,13 +1,13 @@
 :host {
  --background-color: var(--wa-form-control-background-color);
  --background-color-checked: var(--wa-form-control-activated-color);
-  --border-color: var(--wa-form-control-resting-color);
+  --border-color: var(--wa-form-control-border-color);
  --border-color-checked: var(--background-color-checked);
  --border-style: var(--wa-form-control-border-style);
  --border-width: var(--wa-form-control-border-width);
  --box-shadow: initial;
  --height: calc(1em * var(--wa-form-control-value-line-height));
-  --thumb-color: var(--wa-form-control-resting-color);
+  --thumb-color: var(--wa-form-control-border-color);
  --thumb-color-checked: var(--wa-form-control-background-color);
  --thumb-shadow: initial;
  --thumb-size: calc((var(--height) - var(--border-width) * 2) * 0.75);
--- a/src/components/switch/switch.test.ts
+++ b/src/components/switch/switch.test.ts
@@ -20,8 +20,7 @@ describe('<wa-switch>', () => {
        const el = await fixture<WaSwitch>(html` <wa-switch></wa-switch> `);

        expect(el.name).to.equal(null);
-        // TODO - fix default value
-        // expect(el.value).to.be.null;
+        expect(el.value).to.equal('on');
        expect(el.title).to.equal('');
        expect(el.disabled).to.be.false;
        expect(el.required).to.be.false;
@@ -138,10 +137,7 @@ describe('<wa-switch>', () => {
      });

      describe('when submitting a form', () => {
-        //
-        // TODO - this test should pass, so this is likely a bug in the component
-        //
-        it.skip('should submit the correct value when a value is provided', async () => {
+        it('should submit the correct value when a value is provided', async () => {
          const form = await fixture<HTMLFormElement>(html`
            <form>
              <wa-switch name="a" value="1" checked></wa-switch>
@@ -215,10 +211,7 @@ describe('<wa-switch>', () => {
          expect(waSwitch.checkValidity()).to.be.true;
        });

-        //
-        // TODO - this test should pass, so this is likely a bug in the component
-        //
-        it.skip('should be present in form data when using the form attribute and located outside of a <form>', async () => {
+        it('should be present in form data when using the form attribute and located outside of a <form>', async () => {
          const el = await fixture<HTMLFormElement>(html`
            <div>
              <form id="f">
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -212,16 +212,11 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {

  setValue(value: string | File | FormData | null, stateValue?: string | File | FormData | null | undefined): void {
    if (!this.checked) {
-      this.value = null;
      this.internals.setFormValue(null, null);
      return;
    }

-    if (!value) {
-      value = 'on';
-    }
-
-    this.internals.setFormValue(value, stateValue);
+    this.internals.setFormValue(value ?? 'on', stateValue);
  }

  formResetCallback(): void {
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -1,10 +1,15 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { WaRemoveEvent } from '../../events/remove.js';
+import {
+  appearanceStyles,
+  sizeStyles,
+  variantStyles,
+  type AppearanceAttribute,
+  type SizeAttribute,
+  type VariantAttribute,
+} from '../../internal/styling-attributes.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import appearanceStyles from '../../styles/utilities/appearance.css';
-import sizeStyles from '../../styles/utilities/size.css';
-import variantStyles from '../../styles/utilities/variants.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon-button/icon-button.js';
 import styles from './tag.css';
@@ -33,14 +38,13 @@ export default class WaTag extends WebAwesomeElement {
  private readonly localize = new LocalizeController(this);

  /** The tag's theme variant. */
-  @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'neutral';
+  @property({ reflect: true }) variant: VariantAttribute = 'neutral';

  /** The tag's visual appearance. */
-  @property({ reflect: true }) appearance: 'accent' | 'outlined accent' | 'filled' | 'outlined' | 'outlined filled' =
-    'outlined filled';
+  @property({ reflect: true }) appearance: AppearanceAttribute = 'outlined filled';

  /** The tag's size. */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+  @property({ reflect: true }) size: SizeAttribute = 'medium';

  /** Draws a pill-style tag with rounded edges. */
  @property({ type: Boolean, reflect: true }) pill = false;
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -1,4 +1,5 @@
-import { html, type PropertyValues } from 'lit';
+import type { PropertyValues } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -40,8 +41,6 @@ import styles from './textarea.css';
 *
 * @cssproperty --background-color - The textarea's background color.
 * @cssproperty --border-color - The color of the textarea's borders.
- * @cssproperty --border-radius - The border radius of the textarea's corners.
- * @cssproperty --border-style - The style of the textarea's borders.
 * @cssproperty --border-width - The width of the textarea's borders.
 * @cssproperty --box-shadow - The shadow effects around the edges of the textarea.
 */
@@ -272,7 +271,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
    this.setTextareaDimensions();
  }

-  protected updated(changedProperties: PropertyValues<this>) {
+  updated(changedProperties: PropertyValues<this>) {
    if (changedProperties.has('resize')) {
      this.setTextareaDimensions();
    }
--- a/src/components/viewport-demo/viewport-demo.ts
+++ b/src/components/viewport-demo/viewport-demo.ts
@@ -1,3 +1,4 @@
+import type { PropertyValues } from 'lit';
 import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -281,14 +282,14 @@ export default class WaViewportDemo extends WebAwesomeElement {
    }
  }

-  updated(changedProperties: Map<string | number | symbol, unknown>) {
+  updated(changedProperties: PropertyValues<this>) {
    super.updated(changedProperties);

-    if (changedProperties.has('iframe')) {
+    if (changedProperties.has('iframe' as keyof WaViewportDemo)) {
      this.observeResize();
    }

-    if (['zoomLevel', 'availableWidth', 'viewport'].some(p => changedProperties.has(p))) {
+    if (['zoomLevel', 'availableWidth', 'viewport'].some(p => changedProperties.has(p as keyof WaViewportDemo))) {
      this.updateZoom();
    }

--- a/src/internal/styling-attributes.ts
+++ b/src/internal/styling-attributes.ts
@@ -0,0 +1,16 @@
+export { default as appearanceStyles } from '../styles/utilities/appearance.css';
+export { default as sizeStyles } from '../styles/utilities/size.css';
+export { default as variantStyles } from '../styles/utilities/variants.css';
+
+export type AppearanceAttribute =
+  | 'outlined'
+  | 'accent'
+  | 'outlined accent'
+  | 'accent outlined'
+  | 'filled'
+  | 'outlined filled'
+  | 'filled outlined'
+  | 'plain';
+
+export type VariantAttribute = 'brand' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
+export type SizeAttribute = 'small' | 'medium' | 'large';
--- a/src/styles/color/anodized.css
+++ b/src/styles/color/anodized.css
@@ -1,17 +1,5 @@
 :root,
 :host {
-  --wa-color-rose-95: #ffecf9;
-  --wa-color-rose-90: #ffdcf3;
-  --wa-color-rose-80: #ffb2db;
-  --wa-color-rose-70: #ea95bf;
-  --wa-color-rose-60: #ca7da3;
-  --wa-color-rose-50: #a36282;
-  --wa-color-rose-40: #7c4963;
-  --wa-color-rose-30: #63384e;
-  --wa-color-rose-20: #492839;
-  --wa-color-rose-10: #2d1722;
-  --wa-color-rose-05: #1d0d15;
-
  --wa-color-red-95: #fbeeeb;
  --wa-color-red-90: #f8e0d9;
  --wa-color-red-80: #efbdb1;
@@ -36,18 +24,6 @@
  --wa-color-yellow-10: #2c1912;
  --wa-color-yellow-05: #1d0e0a;

-  --wa-color-lime-95: #defe88;
-  --wa-color-lime-90: #d1f376;
-  --wa-color-lime-80: #b0d65f;
-  --wa-color-lime-70: #95bc54;
-  --wa-color-lime-60: #7ba04a;
-  --wa-color-lime-50: #5e803c;
-  --wa-color-lime-40: #45612c;
-  --wa-color-lime-30: #354c21;
-  --wa-color-lime-20: #253716;
-  --wa-color-lime-10: #15210b;
-  --wa-color-lime-05: #0b1405;
-
  --wa-color-green-95: #dcf8ea;
  --wa-color-green-90: #bcf1d8;
  --wa-color-green-80: #6dddad;
@@ -72,18 +48,6 @@
  --wa-color-teal-10: #04221f;
  --wa-color-teal-05: #021513;

-  --wa-color-gray-95: #f1f2f4;
-  --wa-color-gray-90: #e2e5e8;
-  --wa-color-gray-80: #c2c9d0;
-  --wa-color-gray-70: #a6b0ba;
-  --wa-color-gray-60: #8897a3;
-  --wa-color-gray-50: #657888;
-  --wa-color-gray-40: #435c6f;
-  --wa-color-gray-30: #2d485d;
-  --wa-color-gray-20: #18354a;
-  --wa-color-gray-10: #012034;
-  --wa-color-gray-05: #001421;
-
  --wa-color-blue-95: #ecf3ff;
  --wa-color-blue-90: #d9e7ff;
  --wa-color-blue-80: #abcaff;
@@ -119,4 +83,16 @@
  --wa-color-violet-20: #561658;
  --wa-color-violet-10: #340d36;
  --wa-color-violet-05: #210822;
+
+  --wa-color-gray-95: #f1f2f4;
+  --wa-color-gray-90: #e2e5e8;
+  --wa-color-gray-80: #c2c9d0;
+  --wa-color-gray-70: #a6b0ba;
+  --wa-color-gray-60: #8897a3;
+  --wa-color-gray-50: #657888;
+  --wa-color-gray-40: #435c6f;
+  --wa-color-gray-30: #2d485d;
+  --wa-color-gray-20: #18354a;
+  --wa-color-gray-10: #012034;
+  --wa-color-gray-05: #001421;
 }
--- a/src/styles/color/bright.css
+++ b/src/styles/color/bright.css
@@ -1,64 +1,40 @@
 :root,
 :host {
-  --wa-color-rose-95: #fdeef4;
-  --wa-color-rose-90: #fddde9;
-  --wa-color-rose-80: #fbb6cf;
-  --wa-color-rose-70: #f88fb4;
-  --wa-color-rose-60: #ea6997;
-  --wa-color-rose-50: #ca4171;
-  --wa-color-rose-40: #a7204f;
-  --wa-color-rose-30: #85183e;
-  --wa-color-rose-20: #60112d;
-  --wa-color-rose-10: #3b0b1c;
-  --wa-color-rose-05: #240611;
+  --wa-color-red-95: #ffefef;
+  --wa-color-red-90: #ffdddd;
+  --wa-color-red-80: #ffb7b7;
+  --wa-color-red-70: #ff8e8e;
+  --wa-color-red-60: #fd5f5f;
+  --wa-color-red-50: #de3131;
+  --wa-color-red-40: #b40917;
+  --wa-color-red-30: #910000;
+  --wa-color-red-20: #6d0000;
+  --wa-color-red-10: #450000;
+  --wa-color-red-05: #300000;

-  --wa-color-red-95: #ffeeef;
-  --wa-color-red-90: #fdd;
-  --wa-color-red-80: #ffb2b2;
-  --wa-color-red-70: #ff8585;
-  --wa-color-red-60: #ff5c5c;
-  --wa-color-red-50: #e12124;
-  --wa-color-red-40: #aa1d00;
-  --wa-color-red-30: #8a0b00;
-  --wa-color-red-20: #700000;
-  --wa-color-red-10: #46000c;
-  --wa-color-red-05: #2e0008;
+  --wa-color-yellow-95: #fef3c1;
+  --wa-color-yellow-90: #fee682;
+  --wa-color-yellow-80: #fbc217;
+  --wa-color-yellow-70: #f39b00;
+  --wa-color-yellow-60: #e67700;
+  --wa-color-yellow-50: #b75d00;
+  --wa-color-yellow-40: #8c4600;
+  --wa-color-yellow-30: #6f3600;
+  --wa-color-yellow-20: #532600;
+  --wa-color-yellow-10: #341500;
+  --wa-color-yellow-05: #220c00;

-  --wa-color-yellow-95: #fff3bf;
-  --wa-color-yellow-90: #f8e695;
-  --wa-color-yellow-80: #eec637;
-  --wa-color-yellow-70: #d8a815;
-  --wa-color-yellow-60: #ce8500;
-  --wa-color-yellow-50: #aa6300;
-  --wa-color-yellow-40: #824c00;
-  --wa-color-yellow-30: #663b00;
-  --wa-color-yellow-20: #492b00;
-  --wa-color-yellow-10: #2c1a00;
-  --wa-color-yellow-05: #1b0e00;
-
-  --wa-color-lime-95: #e8f9c7;
-  --wa-color-lime-90: #d2f19c;
-  --wa-color-lime-80: #9edc41;
-  --wa-color-lime-70: #7dc11d;
-  --wa-color-lime-60: #68a514;
-  --wa-color-lime-50: #50810b;
-  --wa-color-lime-40: #3a630c;
-  --wa-color-lime-30: #2b4e0b;
-  --wa-color-lime-20: #1e3808;
-  --wa-color-lime-10: #122206;
-  --wa-color-lime-05: #081404;
-
-  --wa-color-green-95: #dbfadf;
-  --wa-color-green-90: #bbf3c3;
-  --wa-color-green-80: #79df8a;
-  --wa-color-green-70: #4dc661;
-  --wa-color-green-60: #35aa4a;
-  --wa-color-green-50: #298539;
-  --wa-color-green-40: #20652d;
-  --wa-color-green-30: #165025;
-  --wa-color-green-20: #0d391c;
-  --wa-color-green-10: #062312;
-  --wa-color-green-05: #03140c;
+  --wa-color-green-95: #e0fae4;
+  --wa-color-green-90: #baf4c2;
+  --wa-color-green-80: #73e085;
+  --wa-color-green-70: #46c65c;
+  --wa-color-green-60: #33aa49;
+  --wa-color-green-50: #2a863c;
+  --wa-color-green-40: #20662e;
+  --wa-color-green-30: #194f24;
+  --wa-color-green-20: #123a1a;
+  --wa-color-green-10: #0b2210;
+  --wa-color-green-05: #07150a;

  --wa-color-teal-95: #cafae6;
  --wa-color-teal-90: #aaf3d7;
@@ -72,51 +48,51 @@
  --wa-color-teal-10: #00312b;
  --wa-color-teal-05: #001613;

-  --wa-color-blue-95: #e4f1ff;
-  --wa-color-blue-90: #cee6ff;
-  --wa-color-blue-80: #96ccff;
-  --wa-color-blue-70: #53b4ff;
-  --wa-color-blue-60: #349bf1;
-  --wa-color-blue-50: #0079cd;
-  --wa-color-blue-40: #005aa8;
-  --wa-color-blue-30: #00458c;
-  --wa-color-blue-20: #003073;
-  --wa-color-blue-10: #00175c;
-  --wa-color-blue-05: #000e39;
+  --wa-color-blue-95: #e7f5ff;
+  --wa-color-blue-90: #ceeaff;
+  --wa-color-blue-80: #94d0fe;
+  --wa-color-blue-70: #60b5f9;
+  --wa-color-blue-60: #3299f0;
+  --wa-color-blue-50: #1a77cc;
+  --wa-color-blue-40: #165a9b;
+  --wa-color-blue-30: #11477a;
+  --wa-color-blue-20: #0d3459;
+  --wa-color-blue-10: #071f35;
+  --wa-color-blue-05: #051321;

-  --wa-color-indigo-95: #f4f0fe;
-  --wa-color-indigo-90: #e9e2fe;
-  --wa-color-indigo-80: #d0c1fc;
-  --wa-color-indigo-70: #b8a2fa;
-  --wa-color-indigo-60: #9f81f9;
-  --wa-color-indigo-50: #7d59ea;
-  --wa-color-indigo-40: #5f3dc4;
-  --wa-color-indigo-30: #4b309b;
-  --wa-color-indigo-20: #36236f;
-  --wa-color-indigo-10: #211543;
-  --wa-color-indigo-05: #130c27;
+  --wa-color-indigo-95: #edf2ff;
+  --wa-color-indigo-90: #dce5ff;
+  --wa-color-indigo-80: #bac8ff;
+  --wa-color-indigo-70: #96abff;
+  --wa-color-indigo-60: #738efc;
+  --wa-color-indigo-50: #486af1;
+  --wa-color-indigo-40: #354dc3;
+  --wa-color-indigo-30: #293c98;
+  --wa-color-indigo-20: #1e2c70;
+  --wa-color-indigo-10: #121a43;
+  --wa-color-indigo-05: #0b102a;

-  --wa-color-violet-95: #fbeefe;
-  --wa-color-violet-90: #f6defc;
-  --wa-color-violet-80: #ecb8f8;
-  --wa-color-violet-70: #e191f4;
-  --wa-color-violet-60: #cd70e3;
-  --wa-color-violet-50: #a84ebe;
-  --wa-color-violet-40: #892f9f;
-  --wa-color-violet-30: #6c257e;
-  --wa-color-violet-20: #4e1b5a;
-  --wa-color-violet-10: #2f1037;
-  --wa-color-violet-05: #1c0920;
+  --wa-color-violet-95: #f3f0ff;
+  --wa-color-violet-90: #eae2ff;
+  --wa-color-violet-80: #d1c0ff;
+  --wa-color-violet-70: #b8a0fd;
+  --wa-color-violet-60: #a080fb;
+  --wa-color-violet-50: #7f57f5;
+  --wa-color-violet-40: #603dc7;
+  --wa-color-violet-30: #4c309c;
+  --wa-color-violet-20: #372372;
+  --wa-color-violet-10: #211544;
+  --wa-color-violet-05: #150d2a;

-  --wa-color-gray-95: #f1f2f5;
-  --wa-color-gray-90: #e3e6eb;
-  --wa-color-gray-80: #c5cad4;
-  --wa-color-gray-70: #a8afbf;
-  --wa-color-gray-60: #8b95aa;
-  --wa-color-gray-50: #677490;
-  --wa-color-gray-40: #4a5877;
-  --wa-color-gray-30: #3a455d;
-  --wa-color-gray-20: #2a3142;
-  --wa-color-gray-10: #191e28;
-  --wa-color-gray-05: #0e1117;
+  --wa-color-gray-95: #f1f2f4;
+  --wa-color-gray-90: #e3e5ea;
+  --wa-color-gray-80: #c7cad4;
+  --wa-color-gray-70: #a9afbe;
+  --wa-color-gray-60: #8d95a8;
+  --wa-color-gray-50: #6a7591;
+  --wa-color-gray-40: #4b5977;
+  --wa-color-gray-30: #344566;
+  --wa-color-gray-20: #1a3356;
+  --wa-color-gray-10: #0e1e35;
+  --wa-color-gray-05: #081220;
 }
--- a/src/styles/color/classic.css
+++ b/src/styles/color/classic.css
@@ -1,17 +1,5 @@
 :root,
 :host {
-  --wa-color-rose-95: #fdeff0;
-  --wa-color-rose-90: #fadfe1;
-  --wa-color-rose-80: #ecbec4;
-  --wa-color-rose-70: #eb98a2;
-  --wa-color-rose-60: #ed6b7e;
-  --wa-color-rose-50: #d53752;
-  --wa-color-rose-40: #ae1638;
-  --wa-color-rose-30: #8b0d2c;
-  --wa-color-rose-20: #620e30;
-  --wa-color-rose-10: #3d0919;
-  --wa-color-rose-05: #29030d;
-
  --wa-color-red-95: #feeeee;
  --wa-color-red-90: #fedede;
  --wa-color-red-80: #fdb8b8;
@@ -36,18 +24,6 @@
  --wa-color-yellow-10: #321606;
  --wa-color-yellow-05: #1f0c01;

-  --wa-color-lime-95: #e4fbb9;
-  --wa-color-lime-90: #c9f47f;
-  --wa-color-lime-80: #9cdc33;
-  --wa-color-lime-70: #7dc115;
-  --wa-color-lime-60: #6ba512;
-  --wa-color-lime-50: #50810a;
-  --wa-color-lime-40: #3d6208;
-  --wa-color-lime-30: #304d09;
-  --wa-color-lime-20: #23370a;
-  --wa-color-lime-10: #152108;
-  --wa-color-lime-05: #0b1302;
-
  --wa-color-green-95: #e9f5ed;
  --wa-color-green-90: #cfedd9;
  --wa-color-green-80: #a2d5b4;
@@ -108,15 +84,15 @@
  --wa-color-violet-10: #2e054e;
  --wa-color-violet-05: #1d0331;

-  --wa-color-gray-95: #f1f2f3;
-  --wa-color-gray-90: #e5e6e7;
-  --wa-color-gray-80: #c8c9cd;
-  --wa-color-gray-70: #acafb4;
-  --wa-color-gray-60: #8f95a0;
-  --wa-color-gray-50: #6e7482;
-  --wa-color-gray-40: #4f5967;
-  --wa-color-gray-30: #3c4655;
-  --wa-color-gray-20: #293240;
-  --wa-color-gray-10: #171d2c;
-  --wa-color-gray-05: #0d111b;
+  --wa-color-gray-95: #f2f2f3;
+  --wa-color-gray-90: #e5e5e8;
+  --wa-color-gray-80: #c9c9cc;
+  --wa-color-gray-70: #aeafb1;
+  --wa-color-gray-60: #94959b;
+  --wa-color-gray-50: #72747d;
+  --wa-color-gray-40: #565861;
+  --wa-color-gray-30: #43454d;
+  --wa-color-gray-20: #313134;
+  --wa-color-gray-10: #1d1d20;
+  --wa-color-gray-05: #101113;
 }
--- a/src/styles/color/elegant.css
+++ b/src/styles/color/elegant.css
@@ -1,17 +1,5 @@
 :root,
 :host {
-  --wa-color-rose-95: #faeff6;
-  --wa-color-rose-90: #f5e0ed;
-  --wa-color-rose-80: #eabcd8;
-  --wa-color-rose-70: #e09ac3;
-  --wa-color-rose-60: #d476ae;
-  --wa-color-rose-50: #c54490;
-  --wa-color-rose-40: #ad0066;
-  --wa-color-rose-30: #8a0051;
-  --wa-color-rose-20: #67003d;
-  --wa-color-rose-10: #410026;
-  --wa-color-rose-05: #2a0019;
-
  --wa-color-red-95: #fdeeef;
  --wa-color-red-90: #fcdfe0;
  --wa-color-red-80: #f8b9bc;
@@ -36,18 +24,6 @@
  --wa-color-yellow-10: #2b1a02;
  --wa-color-yellow-05: #191008;

-  --wa-color-lime-95: #f1f3ec;
-  --wa-color-lime-90: #e3e7da;
-  --wa-color-lime-80: #c4cdb1;
-  --wa-color-lime-70: #a6b48b;
-  --wa-color-lime-60: #899c65;
-  --wa-color-lime-50: #667e36;
-  --wa-color-lime-40: #476017;
-  --wa-color-lime-30: #384c12;
-  --wa-color-lime-20: #29370d;
-  --wa-color-lime-10: #182008;
-  --wa-color-lime-05: #0e1304;
-
  --wa-color-green-95: #ecf4f1;
  --wa-color-green-90: #dae9e3;
  --wa-color-green-80: #b0d1c4;
--- a/src/styles/color/natural.css
+++ b/src/styles/color/natural.css
@@ -1,17 +1,5 @@
 :root,
 :host {
-  --wa-color-rose-95: #f9f0f2;
-  --wa-color-rose-90: #f3e2e7;
-  --wa-color-rose-80: #e4bfca;
-  --wa-color-rose-70: #d5a1b1;
-  --wa-color-rose-60: #c28397;
-  --wa-color-rose-50: #a76179;
-  --wa-color-rose-40: #85455b;
-  --wa-color-rose-30: #6b3448;
-  --wa-color-rose-20: #512435;
-  --wa-color-rose-10: #32131f;
-  --wa-color-rose-05: #210b13;
-
  --wa-color-red-95: #f9f0ee;
  --wa-color-red-90: #f5e2dd;
  --wa-color-red-80: #e8bfb5;
@@ -36,18 +24,6 @@
  --wa-color-yellow-10: #2a1b00;
  --wa-color-yellow-05: #1b1000;

-  --wa-color-lime-95: #f0f2eb;
-  --wa-color-lime-90: #e3e8da;
-  --wa-color-lime-80: #c2ccaf;
-  --wa-color-lime-70: #a6b48b;
-  --wa-color-lime-60: #8a9b68;
-  --wa-color-lime-50: #6b7c45;
-  --wa-color-lime-40: #505e2d;
-  --wa-color-lime-30: #3e4a20;
-  --wa-color-lime-20: #2c3614;
-  --wa-color-lime-10: #192008;
-  --wa-color-lime-05: #0f1404;
-
  --wa-color-green-95: #edf2ee;
  --wa-color-green-90: #dde8df;
  --wa-color-green-80: #b8cebc;
--- a/src/styles/color/rudimentary.css
+++ b/src/styles/color/rudimentary.css
@@ -1,17 +1,5 @@
 :root,
 :host {
-  --wa-color-rose-95: #ffecf8;
-  --wa-color-rose-90: #ffdcf1;
-  --wa-color-rose-80: #ffb2de;
-  --wa-color-rose-70: #fe88c4;
-  --wa-color-rose-60: #fa57a7;
-  --wa-color-rose-50: #e30084;
-  --wa-color-rose-40: #ae0068;
-  --wa-color-rose-30: #890057;
-  --wa-color-rose-20: #660043;
-  --wa-color-rose-10: #400029;
-  --wa-color-rose-05: #2c001b;
-
  --wa-color-red-95: #ffeeee;
  --wa-color-red-90: #ffdddd;
  --wa-color-red-80: #ffb6b8;
@@ -36,18 +24,6 @@
  --wa-color-yellow-10: #311613;
  --wa-color-yellow-05: #1f0d0b;

-  --wa-color-lime-95: #daff92;
-  --wa-color-lime-90: #c1f759;
-  --wa-color-lime-80: #9bdc1a;
-  --wa-color-lime-70: #7ec200;
-  --wa-color-lime-60: #60a600;
-  --wa-color-lime-50: #3e8600;
-  --wa-color-lime-40: #216600;
-  --wa-color-lime-30: #135100;
-  --wa-color-lime-20: #083b00;
-  --wa-color-lime-10: #022400;
-  --wa-color-lime-05: #011600;
-
  --wa-color-green-95: #dafadc;
  --wa-color-green-90: #b9f4bc;
  --wa-color-green-80: #64e177;
--- a/src/styles/color/standard.css
+++ b/src/styles/color/standard.css
@@ -1,86 +0,0 @@
-:root,
-:host {
-  --wa-color-red-95: #ffefef;
-  --wa-color-red-90: #ffdddc;
-  --wa-color-red-80: #ffb7b6;
-  --wa-color-red-70: #fc9090;
-  --wa-color-red-60: #f2676c;
-  --wa-color-red-50: #de2d44;
-  --wa-color-red-40: #b11036;
-  --wa-color-red-30: #861a2f;
-  --wa-color-red-20: #641122;
-  --wa-color-red-10: #400712;
-  --wa-color-red-05: #2a030a;
-
-  --wa-color-yellow-95: #fdf3ba;
-  --wa-color-yellow-90: #fee590;
-  --wa-color-yellow-80: #fcc041;
-  --wa-color-yellow-70: #f39b00;
-  --wa-color-yellow-60: #e07b00;
-  --wa-color-yellow-50: #bb5a00;
-  --wa-color-yellow-40: #924200;
-  --wa-color-yellow-30: #743200;
-  --wa-color-yellow-20: #572300;
-  --wa-color-yellow-10: #361300;
-  --wa-color-yellow-05: #240b00;
-
-  --wa-color-green-95: #e2f9e2;
-  --wa-color-green-90: #c2f2c1;
-  --wa-color-green-80: #92da97;
-  --wa-color-green-70: #5dc36f;
-  --wa-color-green-60: #00ac49;
-  --wa-color-green-50: #008825;
-  --wa-color-green-40: #006800;
-  --wa-color-green-30: #005300;
-  --wa-color-green-20: #003c00;
-  --wa-color-green-10: #002400;
-  --wa-color-green-05: #001700;
-
-  --wa-color-blue-95: #e8f3ff;
-  --wa-color-blue-90: #d1e8ff;
-  --wa-color-blue-80: #9fceff;
-  --wa-color-blue-70: #6eb3ff;
-  --wa-color-blue-60: #3e96ff;
-  --wa-color-blue-50: #0071ec;
-  --wa-color-blue-40: #0053c0;
-  --wa-color-blue-30: #003f9c;
-  --wa-color-blue-20: #002d77;
-  --wa-color-blue-10: #001a4e;
-  --wa-color-blue-05: #000f35;
-
-  --wa-color-indigo-95: #f0f2fe;
-  --wa-color-indigo-90: #e2e4fc;
-  --wa-color-indigo-80: #c2c6f8;
-  --wa-color-indigo-70: #a5a9f2;
-  --wa-color-indigo-60: #8a8beb;
-  --wa-color-indigo-50: #6b65e2;
-  --wa-color-indigo-40: #5246c1;
-  --wa-color-indigo-30: #412eaa;
-  --wa-color-indigo-20: #321393;
-  --wa-color-indigo-10: #1c006a;
-  --wa-color-indigo-05: #130049;
-
-  --wa-color-violet-95: #f9effd;
-  --wa-color-violet-90: #f4defb;
-  --wa-color-violet-80: #e7baf7;
-  --wa-color-violet-70: #d996ef;
-  --wa-color-violet-60: #c674e1;
-  --wa-color-violet-50: #a94dc6;
-  --wa-color-violet-40: #8732a1;
-  --wa-color-violet-30: #6d2283;
-  --wa-color-violet-20: #521564;
-  --wa-color-violet-10: #330940;
-  --wa-color-violet-05: #22042b;
-
-  --wa-color-gray-95: #f1f2f3;
-  --wa-color-gray-90: #e4e5e9;
-  --wa-color-gray-80: #c7c9d0;
-  --wa-color-gray-70: #abaeb9;
-  --wa-color-gray-60: #9194a2;
-  --wa-color-gray-50: #717584;
-  --wa-color-gray-40: #545868;
-  --wa-color-gray-30: #424554;
-  --wa-color-gray-20: #2f323f;
-  --wa-color-gray-10: #1b1d26;
-  --wa-color-gray-05: #101219;
-}
--- a/src/styles/color/vogue.css
+++ b/src/styles/color/vogue.css
@@ -0,0 +1,98 @@
+:root,
+:host {
+  --wa-color-red-95: #feeeee;
+  --wa-color-red-90: #fedddd;
+  --wa-color-red-80: #fdb8b8;
+  --wa-color-red-70: #fb9191;
+  --wa-color-red-60: #f66565;
+  --wa-color-red-50: #e12b2b;
+  --wa-color-red-40: #af1b1b;
+  --wa-color-red-30: #851e1e;
+  --wa-color-red-20: #641414;
+  --wa-color-red-10: #400809;
+  --wa-color-red-05: #2b0404;
+
+  --wa-color-yellow-95: #fef6ab;
+  --wa-color-yellow-90: #ffe759;
+  --wa-color-yellow-80: #f3c41a;
+  --wa-color-yellow-70: #e0a502;
+  --wa-color-yellow-60: #c88804;
+  --wa-color-yellow-50: #a76706;
+  --wa-color-yellow-40: #834b0f;
+  --wa-color-yellow-30: #693910;
+  --wa-color-yellow-20: #502809;
+  --wa-color-yellow-10: #311704;
+  --wa-color-yellow-05: #1f0e02;
+
+  --wa-color-green-95: #d6fbe3;
+  --wa-color-green-90: #acf5c6;
+  --wa-color-green-80: #58e38b;
+  --wa-color-green-70: #25c861;
+  --wa-color-green-60: #17ab4e;
+  --wa-color-green-50: #158740;
+  --wa-color-green-40: #166635;
+  --wa-color-green-30: #13502b;
+  --wa-color-green-20: #093a1d;
+  --wa-color-green-10: #032311;
+  --wa-color-green-05: #02160a;
+
+  --wa-color-teal-95: #d1fbf2;
+  --wa-color-teal-90: #9bf6e4;
+  --wa-color-teal-80: #43e0ca;
+  --wa-color-teal-70: #1ac4b0;
+  --wa-color-teal-60: #0ea798;
+  --wa-color-teal-50: #0e837a;
+  --wa-color-teal-40: #11635e;
+  --wa-color-teal-30: #134d49;
+  --wa-color-teal-20: #073938;
+  --wa-color-teal-10: #022222;
+  --wa-color-teal-05: #011515;
+
+  --wa-color-blue-95: #ebf3ff;
+  --wa-color-blue-90: #d6e7fe;
+  --wa-color-blue-80: #a4cefe;
+  --wa-color-blue-70: #73b2fb;
+  --wa-color-blue-60: #4d95f9;
+  --wa-color-blue-50: #2b6df0;
+  --wa-color-blue-40: #1d4bd3;
+  --wa-color-blue-30: #1e3d9c;
+  --wa-color-blue-20: #1c2e69;
+  --wa-color-blue-10: #101b41;
+  --wa-color-blue-05: #09102c;
+
+  --wa-color-indigo-95: #eef2ff;
+  --wa-color-indigo-90: #dde5ff;
+  --wa-color-indigo-80: #bbc8fd;
+  --wa-color-indigo-70: #9caafb;
+  --wa-color-indigo-60: #818bf8;
+  --wa-color-indigo-50: #6164f0;
+  --wa-color-indigo-40: #493fd8;
+  --wa-color-indigo-30: #3932aa;
+  --wa-color-indigo-20: #2b2871;
+  --wa-color-indigo-10: #1b1842;
+  --wa-color-indigo-05: #100f29;
+
+  --wa-color-violet-95: #f7efff;
+  --wa-color-violet-90: #efe0ff;
+  --wa-color-violet-80: #dcbdfe;
+  --wa-color-violet-70: #cb99fd;
+  --wa-color-violet-60: #b875fb;
+  --wa-color-violet-50: #9e44f3;
+  --wa-color-violet-40: #7e22cd;
+  --wa-color-violet-30: #63209a;
+  --wa-color-violet-20: #4b1079;
+  --wa-color-violet-10: #2f0451;
+  --wa-color-violet-05: #1e0238;
+
+  --wa-color-gray-95: #f1f2f4;
+  --wa-color-gray-90: #e3e5e9;
+  --wa-color-gray-80: #c5cad1;
+  --wa-color-gray-70: #a9afba;
+  --wa-color-gray-60: #8e95a2;
+  --wa-color-gray-50: #6e7583;
+  --wa-color-gray-40: #505968;
+  --wa-color-gray-30: #3c4656;
+  --wa-color-gray-20: #293342;
+  --wa-color-gray-10: #161e2d;
+  --wa-color-gray-05: #0c1220;
+}
--- a/src/styles/depth/0_flat.css
+++ b/src/styles/depth/0_flat.css
@@ -1,40 +0,0 @@
-:root {
-  /**
-   * Shadows
-   * Shadow effects indicate elevation and, at times, interactivity.
-   * Elevation is defined by levels relative to the surface where the element rests -
-   *  *  Inset sits below the surface for a punched-in effect
-   *  *  Level 0 is the surface level
-   *  *  Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
-   *  *  Level 2 is raised above all other elements on the same surface, such as dropdown menus
-   *  *  Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
-   */
-  /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-shadow-blur-scale: 0;
-  --wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
-  --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
-  --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
-  --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
-
-  /* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
-   * or transforming elements with shadows. */
-  --wa-shadow-offset-y-scale: 0;
-  --wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
-  --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
-  --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
-  --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
-
-  --wa-shadow-offset-x-scale: 0;
-  --wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
-  --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
-  --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
-  --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
-
-  --wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
-    var(--wa-color-shadow);
-  --wa-shadow-level-0: none;
-  --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-color-shadow);
-  --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) var(--wa-color-shadow);
-  --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-color-shadow);
-}
--- a/src/styles/depth/1_semiflat.css
+++ b/src/styles/depth/1_semiflat.css
@@ -1,40 +0,0 @@
-:root {
-  /**
-   * Shadows
-   * Shadow effects indicate elevation and, at times, interactivity.
-   * Elevation is defined by levels relative to the surface where the element rests -
-   *  *  Inset sits below the surface for a punched-in effect
-   *  *  Level 0 is the surface level
-   *  *  Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
-   *  *  Level 2 is raised above all other elements on the same surface, such as dropdown menus
-   *  *  Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
-   */
-  /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-shadow-blur-scale: 0.125;
-  --wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
-  --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
-  --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
-  --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
-
-  /* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
-   * or transforming elements with shadows. */
-  --wa-shadow-offset-y-scale: 0.1;
-  --wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
-  --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
-  --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
-  --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
-
-  --wa-shadow-offset-x-scale: 0;
-  --wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
-  --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
-  --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
-  --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
-
-  --wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
-    var(--wa-color-shadow);
-  --wa-shadow-level-0: none;
-  --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-color-shadow);
-  --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) var(--wa-color-shadow);
-  --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-color-shadow);
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Lea Verou	bc775fd2b9	Merge branch 'styling-attributes' of https://github.com/shoelace-style/webawesome into styling-attributes	2025-01-13 13:20:31 -05:00
Lea Verou	96fd2941df	Experiment	2025-01-13 13:20:25 -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	6644288f2b	Experiment	2025-01-10 12:29:12 -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