fix merge conflicts

Initial Commit
Doc revisions
2026-01-19 15:34:15 +00:00 · 2025-01-09 11:04:06 -06:00 · 2025-01-09 10:59:33 -06:00 · 2025-01-09 11:57:35 -05:00 · 2025-01-09 11:57:35 -05:00 · 2025-01-09 02:26:01 -05:00
72 changed files with 1573 additions and 1076 deletions
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -20,6 +20,12 @@ 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',
+};
+
 export default function (eleventyConfig) {
  // NOTE - alpha setting removes certain pages
  if (isAlpha) {
@@ -32,8 +38,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 || ''));
--- a/docs/_includes/base-wide.njk
+++ b/docs/_includes/base-wide.njk
@@ -79,11 +79,12 @@
          </details>
        </nav>

-        {% 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/base.njk
+++ b/docs/_includes/base.njk
@@ -76,16 +76,13 @@

      newStylesheet.addEventListener("load", updateStylesheet)

-      document.documentElement.classList.toggle(
-        `wa-theme-${preset}-dark`,
-        isDark()
-      );
+      document.documentElement.classList.toggle(`wa-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 +98,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 +118,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 +146,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,5 +1,5 @@
 {# Color scheme selector #}
-<wa-dropdown id="color-scheme-selector">
+<wa-dropdown class="color-scheme-selector">
  <wa-button slot="trigger" appearance="filled" size="small" pill caret title="Press \ to toggle">
    <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
    <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
--- a/docs/_includes/preset-theme-selector.njk
+++ b/docs/_includes/preset-theme-selector.njk
@@ -5,15 +5,15 @@
    <span class="preset-theme-selector__text">Default</span>
  </wa-button>
  <wa-menu>
-    <wa-menu-item type="checkbox" value="default">Default</wa-menu-item>
-    <wa-menu-item type="checkbox" value="classic">Classic</wa-menu-item>
-    <wa-menu-item type="checkbox" value="awesome">Awesome</wa-menu-item>
-    <wa-menu-item type="checkbox" value="active">Active</wa-menu-item>
-    <wa-menu-item type="checkbox" value="brutalist">Brutalist</wa-menu-item>
-    <wa-menu-item data-alpha="remove" type="checkbox" value="glassy">Glassy</wa-menu-item>
-    <wa-menu-item type="checkbox" value="mellow">Mellow</wa-menu-item>
-    <wa-menu-item type="checkbox" value="migration">Migration</wa-menu-item>
-    <wa-menu-item data-alpha="remove" type="checkbox" value="playful">Playful</wa-menu-item>
-    <wa-menu-item data-alpha="remove" type="checkbox" value="premium">Premium</wa-menu-item>
+    <wa-menu-item type="checkbox" value="default" data-description="Your trusty companion, like a perfectly broken-in pair of jeans.">Default</wa-menu-item>
+    <wa-menu-item type="checkbox" value="classic" data-description="Timeless elegance that never goes out of style.">Classic</wa-menu-item>
+    <wa-menu-item type="checkbox" value="awesome" data-description="Punchy and vibrant, the rockstar of themes.">Awesome</wa-menu-item>
+    <wa-menu-item type="checkbox" value="active" data-description="Energetic and tactile, always in motion.">Active</wa-menu-item>
+    <wa-menu-item type="checkbox" value="brutalist" data-description="Sharp, raw, and unapologetically bold.">Brutalist</wa-menu-item>
+    <wa-menu-item data-alpha="remove" type="checkbox" value="glassy" data-description="TODO">Glassy</wa-menu-item>
+    <wa-menu-item type="checkbox" value="mellow" data-description="Soft and soothing, like a lazy Sunday morning.">Mellow</wa-menu-item>
+    <wa-menu-item type="checkbox" value="tailspin" data-description="Like a bird in flight, guiding you from there to here.">Tailspin</wa-menu-item>
+    <wa-menu-item data-alpha="remove" type="checkbox" value="playful" data-description="TODO">Playful</wa-menu-item>
+    <wa-menu-item data-alpha="remove" type="checkbox" value="premium" data-description="TODO">Premium</wa-menu-item>
  </wa-menu>
 </wa-dropdown>
--- 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/_layouts/blank.njk
+++ b/docs/_layouts/blank.njk
@@ -48,15 +48,12 @@

      stylesheet.href = `/dist/styles/themes/${preset}.css`

-      document.documentElement.classList.toggle(
-        `wa-theme-${preset}-dark`,
-        isDark()
-      );
+      document.documentElement.classList.toggle(`wa-dark`, isDark());
    </script>
  </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/assets/images/patterns/flower-crop-1.jpg
+++ b/docs/assets/images/patterns/flower-crop-1.jpg
--- a/docs/assets/images/patterns/flower-crop-2.jpg
+++ b/docs/assets/images/patterns/flower-crop-2.jpg
--- a/docs/assets/images/patterns/flower-crop-3.jpg
+++ b/docs/assets/images/patterns/flower-crop-3.jpg
--- 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
@@ -5,22 +5,24 @@
  function setColorScheme(newColorScheme) {
    colorScheme = newColorScheme;
    localStorage.setItem('colorScheme', colorScheme);
-    const presetTheme = window.getPresetTheme();

    // Update the UI
    updateSelection();

    // Toggle the dark mode class
-    document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
+    document.documentElement.classList.toggle(`wa-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;
+    const menus = document.querySelectorAll('.color-scheme-selector wa-menu');
+
+    menus.forEach(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;
+      });
    });
  }

@@ -28,14 +30,16 @@

  // 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');
+    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');
+    const selector = event.target.closest('.color-scheme-selector');
+    const menu = selector?.querySelector('wa-menu');
+    console.log(menu);
    if (!menu) return;
    setColorScheme(event.detail.item.value);
  });
--- a/docs/assets/scripts/preset-theme.js
+++ b/docs/assets/scripts/preset-theme.js
@@ -35,7 +35,7 @@

    document.head.append(newStylesheet);
    updateSelection();
-    document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
+    document.documentElement.classList.toggle(`wa-dark`, window.isDark());
  }

  function updateSelection(container = document) {
@@ -56,12 +56,20 @@
        customElements.whenDefined(selectedItem.localName).then(async () => {
          await selectedItem.updateComplete;
          selectedItem.checked = true;
-          container.querySelector('.preset-theme-selector__text').textContent = selectedItem.innerText;
+          container.querySelectorAll('.preset-theme-selector__text').forEach(themeSelector => {
+            themeSelector.textContent = selectedItem.innerText;
+          });
        });
      }
    });
  }

+  // Updates any element on the page with [data-theme-name] and [data-theme-description] with the current themes info
+  function updateThemeNameAndDescription(name, description) {
+    document.querySelectorAll('[data-theme-name]').forEach(el => (el.textContent = name));
+    document.querySelectorAll('[data-theme-description]').forEach(el => (el.textContent = description));
+  }
+
  let presetTheme = window.getPresetTheme();

  // Selection is not preserved when changing page, so update when opening dropdown
@@ -76,8 +84,15 @@
    const menu = event.target.closest('.preset-theme-selector wa-menu');
    if (!menu) return;
    setPresetTheme(event.detail.item.value);
+    updateThemeNameAndDescription(event.detail.item.textContent, event.detail.item.getAttribute('data-description'));
  });

+  // Set the initial preset name/description in the UI by grabbing it from the dropdown (ugly, but quick)
+  const currentTheme = document.querySelector(`.preset-theme-selector wa-menu-item[value="${presetTheme}"]`);
+  if (currentTheme) {
+    updateThemeNameAndDescription(currentTheme.textContent, currentTheme.getAttribute('data-description'));
+  }
+
  // Update the color scheme when the preference changes
  window.matchMedia('(prefers-preset-theme: dark)').addEventListener('change', () => setPresetTheme(presetTheme));
  updateSelection();
--- 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;
 }

@@ -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='/'] {
@@ -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);
--- 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
@@ -4,7 +4,7 @@
 */

 /* #region Default */
-html[class*='wa-theme-default'] .preview-container {
+html.wa-theme-default .preview-container {
  container-name: default-theme;
 }

@@ -58,12 +58,12 @@ html[class*='wa-theme-default'] .preview-container {
 }
 /* #endregion */

-/* #region Migration */
-html[class*='wa-theme-migration'] .preview-container {
-  container-name: migration-theme;
+/* #region Tailspin */
+html.wa-theme-tailspin .preview-container {
+  container-name: tailspin-theme;
 }

-@container migration-theme (min-width: 0) {
+@container tailspin-theme (min-width: 0) {
  .project-header {
    background: var(--wa-color-surface-default);
  }
@@ -139,7 +139,7 @@ html[class*='wa-theme-migration'] .preview-container {
 /* #endregion */

 /* #region Brutalist */
-html[class*='wa-theme-brutalist'] .preview-container {
+html.wa-theme-brutalist .preview-container {
  container-name: brutalist-theme;
 }

@@ -268,7 +268,7 @@ html[class*='wa-theme-brutalist'] .preview-container {
    border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
  }

-  .wa-theme-brutalist-dark {
+  .wa-theme-brutalist.wa-dark {
    & p a::before {
      background: var(--wa-color-yellow-40);
    }
@@ -332,7 +332,7 @@ html[class*='wa-theme-brutalist'] .preview-container {
 /* #endregion */

 /* #region Playful */
-html[class*='wa-theme-playful'] .preview-container {
+html.wa-theme-playful .preview-container {
  container-name: playful-theme;
 }

@@ -416,7 +416,7 @@ html[class*='wa-theme-playful'] .preview-container {
    background-color: var(--wa-color-neutral-fill-quiet);
  }

-  &:not(.wa-theme-premium-dark) .message-composer wa-card {
+  &:not(.wa-theme-premium.wa-dark) .message-composer wa-card {
    --wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
  }

@@ -434,7 +434,7 @@ html[class*='wa-theme-playful'] .preview-container {
  }

  .support-table wa-card {
-    --background: var(--wa-color-surface-raised);
+    background: var(--wa-color-surface-raised);
  }

  .support-table th {
@@ -469,13 +469,13 @@ html[class*='wa-theme-playful'] .preview-container {
    padding-block-end: var(--wa-space-xs);
  }

-  .wa-theme-playful-dark {
+  .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);
+      border-color: var(--wa-color-gray-30);
    }

    & .message-composer wa-card::part(header) {
@@ -505,7 +505,7 @@ html[class*='wa-theme-playful'] .preview-container {
 /* #endregion */

 /* #region Active */
-html[class*='wa-theme-active'] .preview-container {
+html.wa-theme-active .preview-container {
  container-name: active-theme;
 }

@@ -578,7 +578,7 @@ html[class*='wa-theme-active'] .preview-container {
 /* #endregion */

 /* #region Premium */
-html[class*='wa-theme-premium'] .preview-container {
+html.wa-theme-premium .preview-container {
  container-name: premium-theme;
 }

@@ -644,7 +644,7 @@ html[class*='wa-theme-premium'] .preview-container {
  }

  .message-composer wa-card {
-    --background: var(--wa-color-surface-raised);
+    background: var(--wa-color-surface-raised);
  }

  .message-composer wa-card::part(header) {
@@ -652,7 +652,7 @@ html[class*='wa-theme-premium'] .preview-container {
    background-color: var(--wa-color-neutral-fill-quiet);
  }

-  &:not(.wa-theme-premium-dark) .message-composer wa-card {
+  &:not(.wa-theme-premium.wa-dark) .message-composer wa-card {
    --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
  }

@@ -702,7 +702,7 @@ html[class*='wa-theme-premium'] .preview-container {
    font-style: italic;
  }

-  .wa-theme-premium-dark {
+  .wa-theme-premium.wa-dark {
    & .message-composer .tools .grouped-buttons:not(:last-of-type) {
      --wa-color-neutral-border-quiet: var(--wa-color-base-40);
    }
--- a/docs/docs/components/icon.md
+++ b/docs/docs/components/icon.md
@@ -24,49 +24,6 @@ Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regu
 <wa-icon family="brands" name="web-awesome"></wa-icon>
 ```

-<div data-alpha="remove">
-
-### Setting icon info via CSS
-
-You can set the icon's family, name, and variant via CSS custom properties. This can be useful when you want to set <!-- the icon dynamically or set  --> defaults for a group of icons (e.g. icons inside callouts or all icons for a given theme):
-
-```html {.example}
-<wa-callout>
-  <!-- Look ma, no attributes! -->
-  <wa-icon slot="icon"></wa-icon>
-  This is a callout.
-</wa-callout>
-
-<wa-callout variant="danger">
-  <wa-icon slot="icon" name="dumpster-fire" variant="solid"></wa-icon>
-  This is a callout with an explicit icon.
-</wa-callout>
-
-<wa-callout variant="warning">
-  <!-- Look ma, no attributes! -->
-  <wa-icon slot="icon"></wa-icon>
-  Here be dragons.
-</wa-callout>
-
-<style>
-wa-callout {
-  --wa-icon-variant: regular;
-  --wa-icon-name: info-circle;
-
-  &[variant="warning"] {
-    --wa-icon-name: triangle-exclamation;
-  }
-}
-</style>
-```
-
-Notes:
- If you specify attributes, they will override the CSS custom properties, which provides a way to set defaults and then override them as needed.
- CSS custom properties inherit — so if you set a `--wa-icon-*` custom property on an element, it will affect *all* icons within it that don’t override these values (either via attributes or CSS custom properties).
- These CSS properties are currently not reactive and will only be read when the component is first connected.
-
-</div>
-
 ### Colors

 Icons inherit their color from the current text color. Thus, you can set the `color` property on the `<wa-icon>` element or an ancestor to change the color.
--- 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
@@ -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/customizing.md
+++ b/docs/docs/customizing.md
@@ -17,7 +17,7 @@ To customize a theme, simply override any of these custom properties in your own
 ```css
 :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
@@ -172,7 +172,7 @@ layout: page-outline
 <div class="shadow" style="box-shadow: var(--wa-shadow-l);"></div>
 ```

-## Tests
+## Alignment Tests

 ```html {.example}
 <style>
@@ -254,6 +254,8 @@ layout: page-outline
 </div>
 ```

+## Custom Property Tests
+
 ```html {.example}
 <style>
  .wa-theme-test {
@@ -319,4 +321,32 @@ layout: page-outline
  </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
@@ -505,7 +505,7 @@ hasOutline: false
      <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>
@@ -876,7 +876,7 @@ hasOutline: false

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

    switch(themeSelect.value) {
      case 'premium':
-      case 'migration':
+      case 'tailspin':
      case 'playful':
      case 'brutalist':
      case 'classic':
@@ -1256,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':
@@ -1490,7 +1490,7 @@ hasOutline: false
          }
        });
        break;
-      case 'migration':
+      case 'tailspin':
        iconFamily.value = 'fa-classic';
        iconStyle.value = 'solid';
        useFaIcons();
@@ -1742,7 +1742,7 @@ hasOutline: false

  /* strata product cards */

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

@@ -2123,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/patterns/blog.md
+++ b/docs/docs/patterns/blog.md
@@ -9,7 +9,9 @@ TODO Page Description

 ### Hero
 ```html{.example}
-<wa-carousel pagination>
+<div class="carousel">
+  <div class="container">
+    <wa-carousel pagination>
  <wa-carousel-item>
    <a href="#" class="hero-link">
      <div style="background: #fe53a0;">
@@ -18,7 +20,7 @@ TODO Page Description
      <div style="background: gray;">
        <img
      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-5.jpg"
+      src="https://img.fortawesome.com/cfa83f3c/blog-carousel-5.jpg"
    />
      </div>
      <h2><span>Do you see any Teletubbies in here?</span></h2>
@@ -32,7 +34,7 @@ TODO Page Description
      <div style="background: gray;">
        <img
      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-1.jpg"
+      src="https://img.fortawesome.com/cfa83f3c/blog-carousel-1.jpg"
    />
      </div>
      <h2><span>The path of the righteous man is beset on all sides</span></h2>
@@ -46,7 +48,7 @@ TODO Page Description
      <div style="background: gray;">
        <img
      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-2.jpg"
+      src="https://img.fortawesome.com/cfa83f3c/blog-carousel-2.jpg"
    />
      </div>
      <h2><span>Article Title</span></h2>
@@ -60,7 +62,7 @@ TODO Page Description
      <div style="background: gray;">
        <img
      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-3.jpg"
+      src="https://img.fortawesome.com/cfa83f3c/blog-carousel-3.jpg"
    />
      </div>
      <h2><span>Article Title</span></h2>
@@ -74,7 +76,7 @@ TODO Page Description
      <div style="background: gray;">
        <img
      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-4.jpg"
+      src="https://img.fortawesome.com/cfa83f3c/blog-carousel-4.jpg"
    />
      </div>
      <h2><span>Article Title</span></h2>
@@ -82,13 +84,26 @@ TODO Page Description
  </wa-carousel-item>

 </wa-carousel>
+  </div>
+</div>
+
 <style>
+  .carousel {
+    .container {
+      max-width: 960px;
+      margin: 0 auto;
+    }
+  }
  .hero-link {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;

+    img {
+      width: 100%;
+    }
+
    h2 {
      position: absolute;
      color: white;
@@ -150,7 +165,7 @@ TODO Page Description
  <div class="body">
    <div class="post-list">
      <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-1.jpg" />
+        <img src="https://img.fortawesome.com/cfa83f3c/flower-crop-1.jpg" alt="">
        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
          <span style="font-size: small;"> <wa-icon fixed-width name="mug-hot"></wa-icon> Lifestyle</span>
          <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
@@ -158,7 +173,7 @@ TODO Page Description
        </div>
      </div>
      <div class="post-list-item" style="display: flex; align-items: center; flex-direction: row-reverse;justify-content: flex-end">
-        <img class="last" src="/assets/images/patterns/flower-crop-2.jpg" />
+        <img src="https://img.fortawesome.com/cfa83f3c/flower-crop-2.jpg" alt="">
        <div class="post-list-item-info" style="display: flex;flex-direction: column; margin-right: 1rem;">
          <span style="font-size: small;"><wa-icon fixed-width name="user-nurse"> </wa-icon>Health</span>
          <span style="font-size: larger;font-weight: 600;">That's clear. Your cells react to bacteria</span>
@@ -174,7 +189,7 @@ TODO Page Description
        </div>
      </div>
      <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-3.jpg" />
+        <img src="https://img.fortawesome.com/cfa83f3c/flower-crop-3.jpg" alt="">
        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
          <span style="font-size: small;">Lifestyle</span>
          <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
@@ -182,7 +197,7 @@ TODO Page Description
        </div>
      </div>
      <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-1.jpg" />
+        <img src="https://img.fortawesome.com/cfa83f3c/flower-crop-1.jpg" alt="">
        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
          <span style="font-size: small;">Lifestyle</span>
          <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
@@ -230,59 +245,93 @@ TODO Page Description
 </style>
 ```

-### Related Posts
+## Related articles
 ```html{.example}
-<wa-card with-image with-footer class="card-overview">
-  <img
-    slot="image"
-    src="https://plus.unsplash.com/premium_photo-1661382011487-cd3d6b1d9dff?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDc0ODd8&ixlib=rb-4.0.3&q=80&w=1080"
-    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-  />
-
-  <strong>Color Advancements</strong><br />
-  Lot of new and exciting features in web colors<br />
-  <small>2d ago</small>
-
-  <div slot="footer">
-    <wa-button variant="brand" pill>Read More</wa-button>
-
+  <div class="related-articles">
+    <div class="container">
+      <h4>More From...</h4>
+      <div class="wa-grid" style="--min-column-size: 250px;">
+        <wa-card with-image with-footer class="related-article">
+          <img slot="image" src="https://img.fortawesome.com/cfa83f3c/scott-graham-5fnmwej4taa-unsplash2.jpg" alt="A kitten sits patiently between a terracotta pot and decorative grasses."/>
+          <span style="align-items: center; display: inline-block; margin-bottom: 1rem;">
+            <wa-tooltip for="avatar">This is a tooltip</wa-tooltip>
+            <wa-avatar style="--size: 2rem;" id="avatar" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="Avatar of a gray tabby kitten looking down"></wa-avatar> 
+            <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Andy Kaufman</a> in <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Design Theory</a>
+          </span>
+          <div><strong>How to make Twitter a real super app without breaking its UX</strong></div>
+          <p style="margin-bottom: 0">The buzz around the X super app is deafening. Elon Musk wants to dominate the market with WeChat’s “everything app” strategy.</p>
+          <div slot="footer" style="display: flex; align-items: center; ">
+            <span style="margin-right: 1rem;">Jan 30</span>
+            <span style="margin-right: 1rem;"><wa-icon style="margin-right: .25rem;" fixed-width name="hands-clapping"></wa-icon>394</span>
+            <span><wa-icon style="margin-right: .25rem;" fixed-width name="comment"></wa-icon>394</span>
+            <wa-icon style="margin-left: auto" fixed-width  name="bookmark"></wa-icon>
+          </div>
+        </wa-card>
+        <wa-card with-image with-footer class="related-article">
+          <img slot="image" src="https://img.fortawesome.com/cfa83f3c/scott-graham-5fnmwej4taa-unsplash2.jpg" alt="A kitten sits patiently between a terracotta pot and decorative grasses."/>
+          <span style="align-items: center; display: inline-block; margin-bottom: 1rem;">
+            <wa-tooltip for="avatar">This is a tooltip</wa-tooltip>
+            <wa-avatar style="--size: 2rem;" id="avatar" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="Avatar of a gray tabby kitten looking down"></wa-avatar> 
+            <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Andy Kaufman</a> in <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Design Theory</a>
+          </span>
+          <div><strong>How to make Twitter a real super app without breaking its UX</strong></div>
+          <p style="margin-bottom: 0">The buzz around the X super app is deafening. Elon Musk wants to dominate the market with WeChat’s “everything app” strategy.</p>
+          <div slot="footer" style="display: flex; align-items: center; ">
+            <span style="margin-right: 1rem;">Jan 30</span>
+            <span style="margin-right: 1rem;"><wa-icon style="margin-right: .25rem;" fixed-width name="hands-clapping"></wa-icon>394</span>
+            <span><wa-icon style="margin-right: .25rem;" fixed-width name="comment"></wa-icon>394</span>
+            <wa-icon style="margin-left: auto" fixed-width  name="bookmark"></wa-icon>
+          </div>
+        </wa-card>
+        <wa-card with-image with-footer class="related-article">
+          <img slot="image" src="https://img.fortawesome.com/cfa83f3c/scott-graham-5fnmwej4taa-unsplash2.jpg" alt="A kitten sits patiently between a terracotta pot and decorative grasses."/>
+          <span style="align-items: center; display: inline-block; margin-bottom: 1rem;">
+            <wa-tooltip for="avatar">This is a tooltip</wa-tooltip>
+            <wa-avatar style="--size: 2rem;" id="avatar" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="Avatar of a gray tabby kitten looking down"></wa-avatar> 
+            <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Andy Kaufman</a> in <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Design Theory</a>
+          </span>
+          <div><strong>How to make Twitter a real super app without breaking its UX</strong></div>
+          <p style="margin-bottom: 0">The buzz around the X super app is deafening. Elon Musk wants to dominate the market with WeChat’s “everything app” strategy.</p>
+          <div slot="footer" style="display: flex; align-items: center; ">
+            <span style="margin-right: 1rem;">Jan 30</span>
+            <span style="margin-right: 1rem;"><wa-icon style="margin-right: .25rem;" fixed-width name="hands-clapping"></wa-icon>394</span>
+            <span><wa-icon style="margin-right: .25rem;" fixed-width name="comment"></wa-icon>394</span>
+            <wa-icon style="margin-left: auto" fixed-width  name="bookmark"></wa-icon>
+          </div>
+        </wa-card>
+        <wa-card with-image with-footer class="related-article">
+          <img slot="image" src="https://img.fortawesome.com/cfa83f3c/scott-graham-5fnmwej4taa-unsplash2.jpg" alt="A kitten sits patiently between a terracotta pot and decorative grasses."/>
+          <span style="align-items: center; display: inline-block; margin-bottom: 1rem;">
+            <wa-tooltip for="avatar">This is a tooltip</wa-tooltip>
+            <wa-avatar style="--size: 2rem;" id="avatar" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="Avatar of a gray tabby kitten looking down"></wa-avatar> 
+            <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Andy Kaufman</a> in <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Design Theory</a>
+          </span>
+          <div><strong>How to make Twitter a real super app without breaking its UX</strong></div>
+          <p style="margin-bottom: 0">The buzz around the X super app is deafening. Elon Musk wants to dominate the market with WeChat’s “everything app” strategy.</p>
+          <div slot="footer" style="display: flex; align-items: center; ">
+            <span style="margin-right: 1rem;">Jan 30</span>
+            <span style="margin-right: 1rem;"><wa-icon style="margin-right: .25rem;" fixed-width name="hands-clapping"></wa-icon>394</span>
+            <span><wa-icon style="margin-right: .25rem;" fixed-width name="comment"></wa-icon>394</span>
+            <wa-icon style="margin-left: auto" fixed-width  name="bookmark"></wa-icon>
+          </div>
+        </wa-card>
+      </div>
+    </div>
  </div>
-</wa-card>
-
-
-
-<style>
-  .card-overview {
-    max-width: 300px;
-  }
-
-  .card-overview small {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .card-overview [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-</style>
-
-```
-### Article footer
-```html{.example}
-<div class="article-footer">
-  <div class="article-tags">
-    <a href="#"><wa-tag size="medium" pill>UX</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Product Design</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Design</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Prototyping</wa-tag></a>
-  </div>
-  <div class="article-actions">
-    <wa-icon-button name="hands-clapping"></wa-icon-button>
-  </div>
-</div>
+  <style>
+    .related-articles {
+      .article-list {
+  
+      }
+      .container {
+        max-width: 960px;
+        margin: auto;
+      }
+    }
+  </style>
 ```

+
 ## Social Share

 ### Vertical
@@ -367,3 +416,161 @@ TODO Page Description

 </style>
 ```
+<<<<<<< HEAD
+
+## Related articles
+```html{.example}
+<div>
+  <wa-card>
+    <div class="card-body">
+      <div style="border-bottom: 1px solid var(--wa-color-surface-border);margin-bottom: 1rem; padding-bottom: 1rem;">
+        <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
+        <h2 style="margin-bottom: var(--wa-space-s);">Title</h2>
+        <p style="margin-bottom: var(--wa-space-3xs);">Well, the way they make shows is, they make one show. That show's called a pilot.</p>
+      
+      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
+      </div>
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+        <div>
+            <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
+       
+        <p style="margin-bottom: var(--wa-space-3xs);">Normally, both your asses would be dead as fucking fried chicken.</p>
+      
+      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
+        </div>
+        <div>
+            <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
+       
+        <p style="margin-bottom: var(--wa-space-3xs);">Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
+      
+      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
+        </div>
+      </div>
+    </div>
+  </wa-card>
+</div>
+```
+
+## Footer 
+```html{.example}
+<div class="blog-footer">
+  <div class="container wa-grid" style="--min-column-size: 120px;">
+    <div class="newsletter wa-span-grid" style="align-items: center;">
+      <span>
+        <strong>Stay Informed</strong>
+        <p style="margin-bottom: 0; margin-top: 0;">sign up for our newsletter</p>
+      </span>
+      <span>
+         <div class="subscribe-input"> <wa-input placeholder="Your Email Address"></wa-input><wa-button>Subscribe</wa-button></div>
+      </span>
+    </div>
+    <div style="grid-column: 1/3">
+      <h4>UX Blog</h4>
+      <address style="margin-bottom: 1rem;">
+        Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br/>
+        Visit us at: Example.com<br/>
+        Box 564, Disneyland.USA
+      </address>
+      <div class="social">
+        <a href="#">
+          <wa-avatar label="Avatar with an image icon">
+            <wa-icon slot="icon" name="facebook-f" family="brands"></wa-icon>
+          </wa-avatar>
+        </a>
+        <a href="#">
+          <wa-avatar label="Avatar with an image icon">
+            <wa-icon slot="icon" name="instagram" family="brands"></wa-icon>
+          </wa-avatar>
+        </a>
+        <a href="#">
+          <wa-avatar label="Avatar with an image icon">
+            <wa-icon slot="icon" name="youtube" family="brands"></wa-icon>
+          </wa-avatar>
+        </a>
+        <a href="#">
+          <wa-avatar label="Avatar with an image icon">
+            <wa-icon slot="icon" name="bluesky" family="brands"></wa-icon>
+          </wa-avatar>
+        </a>
+      </div>
+    </div>
+    <div>
+      <h4>About</h4>
+      <ul>
+        <li><a href="#">FAQ</a></li>
+        <li><a href="#">Mission Statement</a></li>
+        <li><a href="#">Contributors</a></li>
+      </ul>
+    </div>
+    <div>
+      <h4>Privacy & Security</h4>
+      <ul>
+        <li><a href="#">Privacy Policy</a></li>
+        <li><a href="#">Social Media Policy</a></li>
+        <li><a href="#">Copyright Notice</a></li>
+      </ul>
+    </div>
+    <div class="legal wa-span-grid">&#169 2024 All rights reserved.</div>
+  </div>
+</div>
+<style>
+  .blog-footer {
+    
+    .container {
+      max-width: 960px;
+      margin: auto;
+   
+    }
+    .newsletter {
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid var(--wa-color-surface-border);
+      margin-bottom: 1rem;
+      padding-bottom: 1rem;
+    }
+    .logo {
+      display: flex;
+      align-items: center;
+    }
+    .nav {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+
+    ul {
+      list-style-type: none;
+      margin-left: 0;
+
+      a {
+        text-decoration: none;
+      }
+    }
+    .social a {
+      text-decoration: none;
+      display: inline-block;
+    }
+    .social a:not(:last-child) {
+      margin-right: 1rem;
+    }
+    section ul li a {
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+      --wa-color-text-link: var(--wa-color-text-normal);
+
+      wa-icon {
+        margin-right: .5rem;
+      }
+    }
+
+    .legal {
+      margin-top: 1rem;
+      padding-top: 1rem;
+      border-top: 1px solid var(--wa-color-surface-border);
+    }
+  }
+</style>
+```
+
+=======
+>>>>>>> pattern-main
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -12,7 +12,7 @@ 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>`
@@ -29,7 +29,7 @@ During the alpha period, things might break! We take breaking changes very serio
  - Active
  - Brutalist
  - Mellow
-  - Migration
+  - 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/))
--- a/docs/docs/themes.md
+++ b/docs/docs/themes.md
@@ -3,55 +3,327 @@ title: Themes
 description: Everything you need to know about theming Web Awesome.
 layout: page-outline
 ---
+<style>
+  wa-page > main {
+    max-width: 140ch;
+
+    .max-line-length {
+      max-width: 80ch;
+    }
+  }
+
+  .theme-showcase {
+    container: showcase / inline-size;
+
+    background-color: var(--wa-color-surface-lowered);
+    border-radius: var(--wa-border-radius-l);
+    min-height: 16lh;
+    height: 65vh;
+    max-height: 21lh;
+    padding: var(--wa-space-xl);
+    overflow: hidden;
+    margin-block-end: var(--wa-space-xl);
+
+    &.wa-flank {
+      --content-percentage: 55%;
+      --flank-size: 20ch;
+    }
+  }
+
+  .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) {
+    .showcase-examples {
+      column-count: 1;
+    }
+
+    @container showcase (width > 700px) {
+      .showcase-examples {
+        column-count: 2;
+      }
+    }
+
+    @container showcase (width > 900px) {
+      .showcase-examples {
+        column-count: 3;
+      }
+    }
+  }
+
+  @supports (zoom: 1) {
+    .showcase-examples {
+      column-count: 2;
+      zoom: 40%;
+    }
+
+    @container showcase (width > 400px) {
+      .showcase-examples {
+        zoom: 55%;
+      }
+    }
+
+    @container showcase (width > 700px) {
+      .showcase-examples {
+        zoom: 70%;
+      }
+    }
+
+    @container showcase (width > 800px) {
+      .showcase-examples {
+        column-count: 3;
+        zoom: 70%;
+      }
+    }
+  }
+</style>
+
+<div class="theme-showcase wa-flank wa-gap-xl">
+  <div>
+    <h2 id="theme-showcase-name" data-theme-name></h2>
+    <p id="theme-showcase-description" data-theme-description></p>
+  </div>
+  <div class="showcase-examples-wrapper">
+    <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"></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-xs">
+              <div class="wa-split wa-gap-xs">
+                <strong>Initiate Saber</strong>
+                <strong>$179.99</strong>
+              </div>
+              <div class="wa-split wa-gap-xs wa-caption-m">
+                <span>Green</span>
+                <a href="#">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-xs">
+              <div class="wa-split wa-gap-xs">
+                <strong>Repair Droid</strong>
+                <strong>$3,049.99</strong>
+              </div>
+              <div class="wa-split wa-gap-xs wa-caption-m">
+                <span>R-series</span>
+                <a href="#">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 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 label="Email" placeholder="ddjarin@mandalore.gov">
+            <wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
+          </wa-input>
+          <wa-input label="Password" type="password">
+            <wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
+          </wa-input>
+          <wa-button variant="brand">Sign In</wa-button>
+          <a href="#" 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 name="plus" label="Add task"></wa-icon-button>
+          </div>
+          <wa-checkbox checked>Umbrella for Adelard</wa-checkbox>
+          <wa-checkbox checked>Waste-paper basket for Dora</wa-checkbox>
+          <wa-checkbox checked>Pen and ink for Milo</wa-checkbox>
+          <wa-checkbox>Mirror for Angelica</wa-checkbox>
+          <wa-checkbox>Silver spoons for Lobelia</wa-checkbox>
+        </div>
+        <div slot="footer">
+          <a href="">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 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 name="backward" label="Skip backward"></wa-icon-button>
+            <wa-icon-button name="pause" style="font-size: var(--wa-font-size-2xl);" label="Pause"></wa-icon-button>
+            <wa-icon-button 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">Mos Eisley, Tatooine</a>
+          </div>
+        </div>
+      </wa-card>
+    </div>
+  </div>
+</div>
+
+<div class="max-line-length">

 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
+Web Awesome Free includes these pre-made themes:
+- **Default** (`default.css`) for a clean look that prioritizes accessibility and performance
+- **Classic** (`classic.css`) for the look and feel of Shoelace with more accessible color pairings
+- **Awesome** (`awesome.css`) for the familiar, vibrant styles from your friends at Font Awesome
+
+Even more themes are available with Web Awesome <wa-badge>Pro</wa-badge>:
+- **Active** (`active.css`)
+- **Brutalist** (`brutalist.css`)
+- **Mellow** (`mellow.css`)
+- **Tailspin** (`tailspin.css`)
+
+To get started right away, include the following in your project, replacing `default.css` at the end with your preferred pre-made theme:
+```html
+<link rel="stylesheet" href="{% cdnUrl 'styles/themes/default.css' %}" />
+```
+

 ## 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 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 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.
+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.

-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.
+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.

-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.
+
+Additionally, styles may be scope to the `:root` selector to be activated automatically.
+For pre-made themes, *all* custom properties are scoped to `:where(:root)`, the theme class, and `wa-light`. 
+
+:::info
+We use `:where(:root)` to give these styles 0 [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) so that they can be easily overridden. If you plan on using multiple themes in your project, we recommend doing the same for your custom themes.
+:::
+
+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
-:root,
+:where(:root),
 :host,
-.wa-theme-default-light {
+.wa-theme-default,
+.wa-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 */
+.wa-dark,
+:host-context(.wa-dark) {
+  /* subset of CSS custom properties for a dark color scheme */
 }
 ```

 ## 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:
+You can import pre-made 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" />
+<link rel="stylesheet" href="{% cdnUrl 'styles/themes/default.css' %}" />
 ```

-Or import the **classic** theme:
+Or the **Classic** theme:

 ```html
-<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/styles/themes/classic.css" />
+<link rel="stylesheet" href="{% cdnUrl '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:
+Or any of our Pro themes, like **Brutalist**:
+
 ```html
-<html class="wa-theme-default-dark">
+<link rel="stylesheet" href="{% cdnUrl 'styles/themes/brutalist.css' %}" />
+```
+
+ To activate the dark color scheme of any theme, apply the class `wa-dark` to the `<html>` element on your page, like this example for the default theme:
+```html
+<html class="wa-theme-default wa-dark">
  <head>
    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
    <!-- other links, scripts, and metadata -->
@@ -62,7 +334,7 @@ Both the default and classic themes include both light and dark color schemes. W
 </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.
+Because themes are scoped to specific classes, you can use different color schemes or even different themes throughout the page. Here, we use the default theme with a dark sidebar:

 ```html
 <html>
@@ -71,7 +343,7 @@ Because themes are scoped to specific classes, you can activate different color
  </head>

  <body>
-    <nav class="wa-theme-default-dark">
+    <nav class="wa-dark">
      <!-- dark-themed sidebar -->
    </nav>

@@ -93,7 +365,8 @@ If you're customizing the default light styles, scope your styles to the followi
 ```css
 :root,
 :host,
-.wa-theme-default-light {
+.wa-theme-default,
+.wa-light {
  /* your custom styles here */
 }
 ```
@@ -101,13 +374,13 @@ If you're customizing the default light styles, scope your styles to the followi
 If you're customizing the default dark styles, scope your styles to the following selectors.

 ```css
-:host,
-.wa-theme-default-dark {
+.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 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.
+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.

@@ -118,8 +391,10 @@ Creating a new theme is more of an undertaking than [customizing an existing one
 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
+:root,
 :host,
-.wa-theme-purple-power {
+.wa-theme-purple-power,
+.wa-light {
  /* your custom styles here */
 }
 ```
@@ -137,3 +412,4 @@ Web Awesome's default theme has both light and dark styles built in. However, We
 - 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.
+</div>
--- 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",
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -119,7 +119,7 @@ async function generateStyles() {
        file.includes('themes/awesome') ||
        file.includes('themes/active') ||
        file.includes('themes/mellow') ||
-        file.includes('themes/migration') ||
+        file.includes('themes/tailspin') ||
        file.includes('themes/brutalist')
      ) {
        return false;
--- 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-border-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/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -48,21 +48,21 @@ export default class WaIcon extends WebAwesomeElement {
  @state() private svg: SVGElement | HTMLTemplateResult | null = null;

  /** The name of the icon to draw. Available names depend on the icon library being used. */
-  @property({ cssProperty: true }) name?: string;
+  @property({ reflect: true }) name?: string;

  /**
   * The family of icons to choose from. For Font Awesome Free (default), valid options include `classic` and `brands`.
   * For Font Awesome Pro subscribers, valid options include, `classic`, `sharp`, `duotone`, and `brands`. Custom icon
   * libraries may or may not use this property.
   */
-  @property({ cssProperty: true }) family: string;
+  @property({ reflect: true }) family: string;

  /**
   * The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for
   * the `classic` and `sharp` families. Some variants require a Font Awesome Pro subscription. Custom icon libraries
   * may or may not use this property.
   */
-  @property({ cssProperty: true }) variant: string;
+  @property({ reflect: true }) variant: string;

  /** Draws the icon in a fixed-width both. */
  @property({ attribute: 'fixed-width', type: Boolean, reflect: true }) fixedWidth: false;
@@ -80,11 +80,10 @@ export default class WaIcon extends WebAwesomeElement {
  @property() label = '';

  /** The name of a registered custom icon library. */
-  @property({ cssProperty: true }) library = 'default';
+  @property({ reflect: true }) library = 'default';

  connectedCallback() {
    super.connectedCallback();
-
    watchIcon(this);
  }

--- 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/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/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -41,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.
 */
--- a/src/internal/webawesome-element.ts
+++ b/src/internal/webawesome-element.ts
@@ -1,18 +1,7 @@
-import type { CSSResult, CSSResultGroup, PropertyDeclaration, PropertyValues } from 'lit';
+import type { CSSResult, CSSResultGroup, PropertyValues } from 'lit';
 import { LitElement, isServer, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import componentStyles from '../styles/shadow/component.css';
-import { getComputedStyle } from './computedStyle.js';
-
-// Augment Lit's module
-declare module 'lit' {
-  interface PropertyDeclaration {
-    /**
-     * Indicates whether the property should reflect to a CSS custom property.
-     */
-    cssProperty?: true | string;
-  }
-}

 export default class WebAwesomeElement extends LitElement {
  constructor() {
@@ -63,16 +52,6 @@ export default class WebAwesomeElement extends LitElement {

  internals: ElementInternals;

-  #computedStyle: CSSStyleDeclaration | null;
-  #setVia: Record<PropertyKey, 'css' | 'attribute' | 'js'> = {};
-  #setting = new Set<PropertyKey>();
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.updateCSSProperties();
-  }
-
  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
    if (!this.#hasRecordedInitialProperties) {
      (this.constructor as typeof WebAwesomeElement).elementProperties.forEach(
@@ -132,21 +111,6 @@ export default class WebAwesomeElement extends LitElement {
    }
  }

-  updated(changedProperties: PropertyValues<this>) {
-    super.updated(changedProperties);
-
-    let Self = this.constructor as typeof WebAwesomeElement;
-
-    if (Self.cssAttributeProperties.size > 0) {
-      for (let [name] of changedProperties) {
-        if (typeof name === 'string' && this.#setVia[name] === 'css' && !this.#setting.has(name)) {
-          // A property is being set via JS and it’s NOT because we're reflecting a CSS property
-          this.#setVia[name] = 'js';
-        }
-      }
-    }
-  }
-
  /** Checks if states are supported by the element */
  private hasStatesSupport(): boolean {
    return Boolean(this.internals?.states);
@@ -184,51 +148,4 @@ export default class WebAwesomeElement extends LitElement {
  hasCustomState(state: string): boolean {
    return this.hasStatesSupport() ? this.internals.states.has(state) : false;
  }
-
-  protected updateCSSProperties() {
-    const Self = this.constructor as typeof WebAwesomeElement;
-    if (Self.cssAttributeProperties.size === 0) {
-      return;
-    }
-
-    this.#computedStyle ??= getComputedStyle(this);
-
-    // FIXME this is currently static. It will only update when the element is connected, and not when the CSS property changes.
-    const tagName = this.tagName.toLowerCase();
-    for (let [name, cssProperty] of Self.cssAttributeProperties) {
-      // FIXME currently this means that CSS properties will override JS properties. This is not ideal.
-      if (typeof name === 'string' && !this.hasAttribute(name) && this.#setVia[name] !== 'js') {
-        // Check if supplied as a CSS custom property
-        // TODO !important should override attribute values
-        cssProperty = cssProperty === true ? `--${tagName}-${name}` : cssProperty;
-        const value = this.#computedStyle?.getPropertyValue(cssProperty);
-
-        if (value) {
-          this.#setVia[name] = 'css';
-          this.#setting.add(name);
-          // @ts-ignore
-          this[name] = value.trim();
-          this.updateComplete.then(() => {
-            this.#setting.delete(name);
-          });
-        }
-      }
-    }
-  }
-
-  // Subclasses will override this
-  protected static cssAttributeProperties = new Map<PropertyKey, true | string>();
-
-  static createProperty(name: PropertyKey, options?: PropertyDeclaration): void {
-    super.createProperty(name, options);
-
-    if (options?.cssProperty) {
-      if (this.cssAttributeProperties === WebAwesomeElement.cssAttributeProperties) {
-        // Each class needs its own, otherwise they'd share the same Set
-        this.cssAttributeProperties = new Map();
-      }
-
-      this.cssAttributeProperties.set(name, options.cssProperty);
-    }
-  }
 }
--- a/src/styles/native/color-picker.css
+++ b/src/styles/native/color-picker.css
@@ -2,12 +2,11 @@ input[type='color'] {
  display: block;
  border-radius: calc(infinity * 1px);
  background: transparent;
-  padding: 3px;
+  padding: var(--wa-form-control-border-width);
  width: calc(var(--wa-form-control-height) - 2px);
  height: calc(var(--wa-form-control-height) - 2px);
-  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-form-control-border-color);
+  border: var(--wa-form-control-border-width) var(--wa-border-style) var(--wa-form-control-border-color);
  cursor: pointer;
-  margin-block-start: 3px;
  forced-color-adjust: none;

  &::-webkit-color-swatch-wrapper {
--- a/src/styles/native/input.css
+++ b/src/styles/native/input.css
@@ -14,13 +14,22 @@ input:where(:not(
    [type='reset'],
    [type='submit']
  )) {
-  &:not(:host *) {
+  /* Styling root, i.e. excluding elements within a host.
+     This is so that these properties can be overridden.
+   */
+  &:not(:host *),
+  /* Safari and FF don't like :host:not(:host *) or :where(:host) so we need to add :host explicitly.
+    However, we can't just specify :host, because then it would become & :host which matches nothing.
+    :host(*) is the same as :host and the & prevents it from becoming a descendant selector.
+   */
+  :host(:is(&, *)) {
    /* Defaults for root element. */
    --outlined-background-color: var(--wa-form-control-background-color);
    --outlined-border-color: var(--wa-form-control-border-color);
    --outlined-text-color: var(--wa-form-control-value-color);

-    :where(&) {
+    :where(&),
+    :host(:where(&, *)) {
      /* Defaults with 0 specificity.
       * Do NOT reset --background-color and --border-color here so they trickle in from the appearance utils
       * Instead we provide the fallback when setting
--- a/src/styles/native/select.css
+++ b/src/styles/native/select.css
@@ -1,41 +1,51 @@
 select,
 label:has(select),
 :host {
-  --background-color: var(--wa-form-control-background-color);
-  --border-color: var(--wa-form-control-border-color);
-  --border-radius: var(--wa-form-control-border-radius);
-  --border-style: var(--wa-form-control-border-style);
-  --border-width: var(--wa-form-control-border-width);
-  --box-shadow: initial;
+  /* Defaults for root element. */
+  --outlined-background-color: var(--wa-form-control-background-color);
+  --outlined-border-color: var(--wa-form-control-border-color);
+  --outlined-text-color: var(--wa-form-control-value-color);
+
+  /* Safari and FF don't like :where(:host) so we need to add :host explicitly.
+    However, we can't just specify :host, because then it would become & :host which matches nothing.
+    :host(*) is the same as :host and the & prevents it from becoming a descendant selector.
+   */
+  :where(&),
+  :host(:where(&, *)) {
+    /* Defaults with 0 specificity.
+       * Do NOT reset --background-color and --border-color here so they trickle in from the appearance utils
+       * Instead we provide the fallback when setting
+       */
+    --border-width: var(--wa-form-control-border-width);
+    --box-shadow: initial;
+  }
 }
+
 select,
 :host [part~='combobox'] {
-  background-color: var(--background-color);
-  border-color: var(--border-color);
-  border-radius: var(--border-radius);
-  border-style: var(--border-style);
+  background-color: var(--background-color, var(--wa-form-control-background-color));
+  border-color: var(--border-color, var(--wa-form-control-border-color));
+  border-radius: var(--wa-form-control-border-radius);
+  border-style: var(--wa-form-control-border-style);
  border-width: var(--border-width);
  box-shadow: var(--box-shadow);
-  width: 100%;
-  min-width: 0;
-  position: relative;
  color: var(--wa-form-control-value-color);
-  font-size: var(--wa-size);
+  cursor: pointer;
  font-family: inherit;
+  font-size: var(--wa-size);
  font-weight: var(--wa-form-control-value-font-weight);
  line-height: var(--wa-form-control-value-line-height);
-  vertical-align: middle;
+  min-width: 0;
  overflow: hidden;
-  cursor: pointer;
+  padding: var(--wa-space-smaller) var(--wa-space);
+  position: relative;
+  vertical-align: middle;
+  width: 100%;
  transition:
-    background var(--wa-transition-normal),
+    background-color var(--wa-transition-normal),
    border var(--wa-transition-normal),
-    box-shadow var(--wa-transition-normal),
-    color var(--wa-transition-normal),
    outline var(--wa-transition-fast);
  transition-timing-function: var(--wa-transition-easing);
-
-  padding: var(--wa-space-smaller) var(--wa-space);
 }

 /* Add ellipses to multi select options */
@@ -66,15 +76,16 @@ select {
 }
 label:has(select) {
  position: relative;
+  --icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
+
  &::after {
    content: '';
    background-color: var(--wa-color-neutral-on-quiet);
-    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>')
-      center no-repeat;
+    mask: var(--icon-caret) 50% 50% no-repeat;
    width: 1rem;
    height: var(--wa-form-control-height);
    position: absolute;
-    bottom: 0;
+    bottom: var(--wa-form-control-border-width);
    right: var(--wa-space);
  }
 }
--- a/src/styles/themes/active.css
+++ b/src/styles/themes/active.css
@@ -9,9 +9,10 @@
@import url('default/groups.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

-:root,
+:where(:root),
 :host,
-.wa-theme-active-light {
+.wa-theme-active,
+.wa-light {
  color-scheme: light;
  color: var(--wa-color-text-normal);

@@ -79,7 +80,7 @@
  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
  --wa-color-neutral-on-loud: black;

-  /** 
+  /**
   * Typography
   */
  --wa-font-family-body: 'Inter', sans-serif;
@@ -98,8 +99,8 @@
  --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
 }

-.wa-theme-active-dark,
-:is(:host-context(.wa-theme-active-dark)) {
+.wa-dark,
+:is(:host-context(.wa-dark)) {
  color-scheme: dark;
  color: var(--wa-color-text-normal);

@@ -182,59 +183,61 @@
 /**
 * Component Styles
 */
-:root {
+:where(:root),
+:host,
+.wa-theme-active {
  --wa-theme-active-shadow-pop-out: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
    inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
    inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */, var(--wa-shadow-s) /* outer shadow */;
  --wa-theme-active-shadow-punch-in: inset 0 0 0 0 transparent /* shine */,
    inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.1) /* inner highlight */,
    inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, 0 0 0 0 transparent /* outer shadow */;
-}

-:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
-    [appearance='plain'],
-    .wa-plain
-  ) {
-  box-shadow: var(--wa-theme-active-shadow-pop-out);
+  :is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
+      [appearance='plain'],
+      .wa-plain
+    ) {
+    box-shadow: var(--wa-theme-active-shadow-pop-out);

-  &:not([disabled], [loading]):active {
-    box-shadow: var(--wa-theme-active-shadow-punch-in);
-  }
-}
-
-wa-card {
-  --box-shadow: var(--wa-theme-active-shadow-pop-out);
-}
-
-input:not([type='button'], [type='reset'], [type='submit'], :checked),
-select,
-textarea,
-:is(wa-checkbox, wa-radio, wa-switch):not(:state(checked)),
-wa-input,
-wa-select,
-wa-textarea {
-  &:not([appearance='filled']):not([disabled]) {
-    --box-shadow: inset var(--wa-shadow-s);
-  }
-}
-
-input[type='radio'],
-wa-radio {
-  --background-color-checked: var(--wa-form-control-activated-color);
-  --checked-icon-color: var(--wa-color-brand-on-loud);
-  --checked-icon-scale: 0.4;
-}
-
-input[type='range'],
-wa-slider,
-wa-switch {
-  --thumb-shadow: var(--wa-theme-active-shadow-pop-out);
-}
-
-wa-progress-bar {
-  box-shadow: inset var(--wa-shadow-s);
-
-  &::part(indicator) {
-    box-shadow: inset 0 -0.5em 1em -0.5em oklch(from var(--indicator-color) calc(l - 0.1) c h);
+    &:not([disabled], [loading]):active {
+      box-shadow: var(--wa-theme-active-shadow-punch-in);
+    }
+  }
+
+  wa-card {
+    box-shadow: var(--wa-theme-active-shadow-pop-out);
+  }
+
+  input:not([type='button'], [type='reset'], [type='submit'], :checked),
+  select,
+  textarea,
+  :is(wa-checkbox, wa-radio, wa-switch):not(:state(checked)),
+  wa-input,
+  wa-select,
+  wa-textarea {
+    &:not([appearance='filled']):not([disabled]) {
+      --box-shadow: inset var(--wa-shadow-s);
+    }
+  }
+
+  input[type='radio'],
+  wa-radio {
+    --background-color-checked: var(--wa-form-control-activated-color);
+    --checked-icon-color: var(--wa-color-brand-on-loud);
+    --checked-icon-scale: 0.4;
+  }
+
+  input[type='range'],
+  wa-slider,
+  wa-switch {
+    --thumb-shadow: var(--wa-theme-active-shadow-pop-out);
+  }
+
+  wa-progress-bar {
+    box-shadow: inset var(--wa-shadow-s);
+
+    &::part(indicator) {
+      box-shadow: inset 0 -0.5em 1em -0.5em oklch(from var(--indicator-color) calc(l - 0.1) c h);
+    }
  }
 }
--- a/src/styles/themes/awesome.css
+++ b/src/styles/themes/awesome.css
@@ -9,9 +9,10 @@
@import url('default/groups.css');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

-:root,
+:where(:root),
 :host,
-.wa-theme-awesome-light {
+.wa-theme-awesome,
+.wa-light {
  color-scheme: light;
  color: var(--wa-color-text-normal);

@@ -141,8 +142,8 @@
  --wa-tooltip-line-height: var(--wa-line-height-normal);
 }

-.wa-theme-awesome-dark,
-:is(:host-context(.wa-theme-awesome-dark)) {
+.wa-dark,
+:is(:host-context(.wa-dark)) {
  color-scheme: dark;
  color: var(--wa-color-text-normal);

@@ -151,7 +152,7 @@
   */
  --wa-color-surface-raised: var(--wa-color-gray-10);
  --wa-color-surface-default: var(--wa-color-gray-05);
-  --wa-color-surface-lowered: var(--wa-color-gray-05);
+  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
  --wa-color-surface-border: var(--wa-color-gray-20);

  --wa-color-text-normal: var(--wa-color-gray-95);
@@ -240,119 +241,120 @@
  --wa-form-control-required-content-color: inherit;
 }

-/* #region Custom Styles */
-wa-badge {
-  border-radius: var(--wa-border-radius-m);
-  font-weight: var(--wa-font-weight-bold);
-  text-transform: uppercase;
-}
-
-:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
-    [appearance='plain'],
-    .wa-plain
-  ) {
-  --wa-transition-slow: 0;
-  --wa-transition-normal: 0;
-  --wa-transition-fast: 0;
-
-  --border-color: var(--text-color);
-  --border-color-hover: var(--border-color);
-  --border-color-active: var(--border-color);
-  box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-shadow-spread-s)
-    var(--border-color);
-  --background-color-active: var(--border-color);
-  --text-color-active: var(--background-color);
-
-  margin-bottom: var(--wa-shadow-offset-y-s);
-
-  &:is([appearance='outlined'], .wa-outlined) {
-    --background-color: var(--wa-color-surface-default);
+:where(:root),
+:host,
+.wa-theme-awesome {
+  /* #region Custom Styles */
+  wa-badge {
+    border-radius: var(--wa-border-radius-m);
+    font-weight: var(--wa-font-weight-bold);
+    text-transform: uppercase;
  }

-  &:not([disabled], [loading]):active {
-    box-shadow: none;
-    transform: translateY(var(--wa-shadow-offset-y-s));
+  :is(
+      button,
+      input:where([type='button'], [type='reset'], [type='submit']),
+      wa-button,
+      wa-radio-group > wa-radio-button,
+      .wa-button
+    ):not([appearance='plain'], .wa-plain) {
+    --wa-transition-slow: 0;
+    --wa-transition-normal: 0;
+    --wa-transition-fast: 0;
+
+    --border-color: var(--text-color);
+    --border-color-hover: var(--border-color);
+    --border-color-active: var(--border-color);
+    box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
+      var(--wa-shadow-spread-s) var(--border-color);
+    --background-color-active: var(--border-color);
+    --text-color-active: var(--background-color);
+
+    margin-bottom: var(--wa-shadow-offset-y-s);
+
+    &:is([appearance='outlined'], .wa-outlined) {
+      --background-color: var(--wa-color-surface-default);
+    }
+
+    &:not([disabled], [loading]):active,
+    &::part(checked) {
+      box-shadow: none;
+      transform: translateY(var(--wa-shadow-offset-y-s));
+    }
+
+    .wa-dark & {
+      --border-color: var(--wa-color-border-quiet);
+    }
  }

-  .wa-theme-awesome-dark & {
-    --border-color: var(--wa-color-border-quiet);
+  wa-callout {
+    &:is([appearance~='outlined'], .wa-outlined) {
+      border-color: var(--wa-color-border-normal);
+    }
+    &:not([appearance~='accent'], .wa-accent) {
+      color: var(--wa-color-text-normal);
+    }
+    &:not([appearance~='accent'], .wa-accent) {
+      --icon-color: var(--wa-color-border-normal);
+    }
  }
-}

-wa-callout {
-  &:is([appearance~='outlined'], .wa-outlined) {
-    border-color: var(--wa-color-border-normal);
+  wa-card {
+    background-color: var(--wa-color-surface-raised);
  }
-  &:not([appearance~='accent'], .wa-accent) {
-    color: var(--wa-color-text-normal);
+  wa-card::part(header) {
+    border-bottom-style: dotted;
  }
-  &:not([appearance~='accent'], .wa-accent) {
-    --icon-color: var(--wa-color-border-normal);
+  wa-card::part(footer) {
+    border-top-style: dotted;
  }
-}

-wa-card {
-  --background-color: var(--wa-color-surface-raised);
-  --border-style: none;
-}
-wa-card::part(header) {
-  border-bottom: var(--border-width) dotted var(--border-color);
-}
-wa-card::part(footer) {
-  border-top: var(--border-width) dotted var(--border-color);
-}
-
-input[type='checkbox'],
-wa-checkbox {
-  --checked-icon-color: var(--wa-color-surface-default);
-}
-
-wa-radio-group > wa-radio-button {
-  --background-color-active: var(--border-color);
-  --border-color-active: var(--background-color-active);
-  --box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--border-color);
-  --label-color-active: var(--wa-color-surface-default);
-
-  &:active,
-  &[checked] {
-    --background-color: var(--border-color);
-    --border-color: var(--wa-color-neutral-border-loud);
-    --box-shadow: none;
-    --label-color: var(--wa-color-surface-default);
-    transform: translate(var(--wa-shadow-offset-x-s), var(--wa-shadow-offset-y-s));
+  input[type='checkbox'],
+  wa-checkbox {
+    --checked-icon-color: var(--wa-color-surface-default);
  }
-}

-wa-switch {
-  --height: 1.5em;
-}
+  wa-radio-group > wa-radio-button {
+    &::part(base):active,
+    &::part(checked) {
+      --background-color: var(--border-color);
+      --background-color-hover: var(--border-color);
+      --border-color: var(--wa-color-neutral-border-loud);
+      --text-color: var(--wa-color-surface-default);
+    }
+  }

-wa-tag {
-  font-weight: var(--wa-font-weight-bold);
-}
+  wa-switch {
+    --height: 1.5em;
+  }

-:is(
-    input:where(
-        :not(
-          [type='button'],
-          [type='checkbox'],
-          [type='color'],
-          [type='file'],
-          [type='hidden'],
-          [type='image'],
-          [type='radio'],
-          [type='range'],
-          [type='reset'],
-          [type='submit']
-        )
-      ),
-    select,
-    textarea,
-    wa-input,
-    wa-select,
-    wa-textarea,
-    .wa-text-field
-  ):not(:focus, [appearance='filled'], .wa-filled) {
-  --box-shadow: inset var(--wa-shadow-s);
+  wa-tag {
+    font-weight: var(--wa-font-weight-bold);
+  }
+
+  :is(
+      input:where(
+          :not(
+            [type='button'],
+            [type='checkbox'],
+            [type='color'],
+            [type='file'],
+            [type='hidden'],
+            [type='image'],
+            [type='radio'],
+            [type='range'],
+            [type='reset'],
+            [type='submit']
+          )
+        ),
+      select,
+      textarea,
+      wa-input,
+      wa-select,
+      wa-textarea,
+      .wa-text-field
+    ):not(:focus, [appearance='filled'], .wa-filled) {
+    --box-shadow: inset var(--wa-shadow-s);
+  }
+  /* #endregion */
 }
-/* #endregion */
--- a/src/styles/themes/brutalist.css
+++ b/src/styles/themes/brutalist.css
@@ -9,9 +9,10 @@
@import url('default/groups.css');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap');

-:root,
+:where(:root),
 :host,
-.wa-theme-brutalist-light {
+.wa-theme-brutalist,
+.wa-light {
  color-scheme: light;
  color: var(--wa-color-text-normal);

@@ -122,8 +123,8 @@
  --wa-form-control-activated-color: var(--wa-color-neutral-fill-loud);
 }

-.wa-theme-brutalist-dark,
-:is(:host-context(.wa-theme-brutalist-dark)) {
+.wa-dark,
+:is(:host-context(.wa-dark)) {
  color-scheme: dark;
  color: var(--wa-color-text-normal);

@@ -206,87 +207,91 @@
 /**
 * Component Styles
 */
-blockquote,
-pre {
-  border-inline-start: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border);
-}
-wa-badge {
-  text-transform: uppercase;
-}
-
-wa-callout,
-wa-tag {
-  border-inline-start-color: var(--border-color, var(--wa-color-border-loud));
-  border-inline-start-width: var(--wa-border-width-s);
-
-  &:not([appearance~='outlined'], .wa-outlined) {
-    border-block-start-width: 0;
-    border-block-end-width: 0;
-    border-inline-end-width: 0;
+:where(:root),
+:host,
+.wa-theme-brutalist {
+  blockquote,
+  pre {
+    border-inline-start: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border);
+  }
+  wa-badge {
+    text-transform: uppercase;
  }

-  &:not([appearance~='accent'], .wa-accent) {
-    --icon-color: var(--wa-color-fill-loud);
-    --text-color: var(--wa-color-text-normal);
+  wa-callout,
+  wa-tag {
+    border-inline-start-color: var(--border-color, var(--wa-color-border-loud));
+    border-inline-start-width: var(--wa-border-width-s);
+
+    &:not([appearance~='outlined'], .wa-outlined) {
+      border-block-start-width: 0;
+      border-block-end-width: 0;
+      border-inline-end-width: 0;
+    }
+
+    &:not([appearance~='accent'], .wa-accent) {
+      --icon-color: var(--wa-color-fill-loud);
+      --text-color: var(--wa-color-text-normal);
+    }
+  }
+
+  wa-callout {
+    --spacing: var(--wa-space-s) var(--wa-space-m);
+
+    &::part(icon) {
+      --spacing: var(--wa-space-m);
+    }
+  }
+
+  wa-carousel {
+    --pagination-color: var(--wa-color-neutral-fill-normal);
+  }
+
+  wa-carousel::part(scroll-container) {
+    padding: var(--wa-shadow-offset-y-s) var(--wa-shadow-offset-x-s); /* make room for the box-shadow */
+  }
+
+  wa-carousel::part(pagination-item),
+  wa-image-comparer::part(handle),
+  wa-progress-bar::part(base),
+  wa-slider::part(base),
+  input[type='range'],
+  wa-switch::part(control),
+  wa-switch::part(thumb) {
+    border-radius: var(--wa-border-radius-square);
+  }
+
+  wa-carousel-item {
+    border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
+    box-shadow: var(--wa-shadow-s);
+  }
+
+  :is(
+    input:where(
+        :not(
+          [type='button'],
+          [type='checkbox'],
+          [type='color'],
+          [type='file'],
+          [type='hidden'],
+          [type='image'],
+          [type='radio'],
+          [type='range'],
+          [type='reset'],
+          [type='submit']
+        )
+      ),
+    select,
+    textarea,
+    wa-input,
+    wa-select,
+    wa-textarea,
+    .wa-text-field
+  ) {
+    --border-width: 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-width);
+  }
+
+  wa-rating {
+    --symbol-color-active: var(--wa-color-neutral-fill-loud);
  }
 }
-
-wa-callout {
-  --spacing: var(--wa-space-s) var(--wa-space-m);
-
-  &::part(icon) {
-    --spacing: var(--wa-space-m);
-  }
-}
-
-wa-carousel {
-  --pagination-color: var(--wa-color-neutral-fill-normal);
-}
-
-wa-carousel::part(scroll-container) {
-  padding: var(--wa-shadow-offset-y-s) var(--wa-shadow-offset-x-s); /* make room for the box-shadow */
-}
-
-wa-carousel::part(pagination-item),
-wa-image-comparer::part(handle),
-wa-progress-bar::part(base),
-wa-slider::part(base),
-input[type='range'],
-wa-switch::part(control),
-wa-switch::part(thumb) {
-  border-radius: var(--wa-border-radius-square);
-}
-
-wa-carousel-item {
-  border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
-  box-shadow: var(--wa-shadow-s);
-}
-
-:is(
-  input:where(
-      :not(
-        [type='button'],
-        [type='checkbox'],
-        [type='color'],
-        [type='file'],
-        [type='hidden'],
-        [type='image'],
-        [type='radio'],
-        [type='range'],
-        [type='reset'],
-        [type='submit']
-      )
-    ),
-  select,
-  textarea,
-  wa-input,
-  wa-select,
-  wa-textarea,
-  .wa-text-field
-) {
-  --border-width: 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-width);
-}
-
-wa-rating {
-  --symbol-color-active: var(--wa-color-neutral-fill-loud);
-}
--- a/src/styles/themes/classic.css
+++ b/src/styles/themes/classic.css
@@ -8,9 +8,10 @@
@import url('default/transitions.css');
@import url('default/groups.css');

-:root,
+:where(:root),
 :host,
-.wa-theme-classic-light {
+.wa-theme-classic,
+.wa-light {
  color-scheme: light;

  /**
@@ -116,8 +117,8 @@
  --wa-tooltip-content-color: var(--wa-color-surface-default);
 }

-.wa-theme-classic-dark,
-:is(:host-context(.wa-theme-classic-dark)) {
+.wa-dark,
+:is(:host-context(.wa-dark)) {
  color-scheme: dark;
  color: var(--wa-color-text-normal);

@@ -126,7 +127,7 @@
   */
  --wa-color-surface-raised: var(--wa-color-gray-10);
  --wa-color-surface-default: var(--wa-color-gray-05);
-  --wa-color-surface-lowered: var(--wa-color-gray-05);
+  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
  --wa-color-surface-border: var(--wa-color-gray-20);

  --wa-color-text-normal: var(--wa-color-gray-80);
@@ -204,132 +205,136 @@
 /**
 * Component Styles
 */
-wa-avatar {
-  --background-color: var(--wa-color-neutral-fill-loud);
-  --text-color: var(--wa-color-neutral-on-loud);
-}
-
-button,
-input:where([type='button'], [type='reset'], [type='submit']),
-wa-button,
-.wa-button,
-wa-radio-button {
-  font-size: var(--wa-size-smaller);
-}
-
-wa-radio-button {
-  --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
-  --background-color-hover: var(--wa-form-control-activated-color);
-  --border-color: var(--wa-form-control-border-color);
-  --border-color-active: var(--background-color-active);
-  --border-color-hover: var(--background-color-hover);
-  --text-color-active: var(--text-color-hover);
-  --text-color-hover: var(--wa-color-brand-on-loud);
-  --indicator-color: var(--wa-background-color);
-
-  &[checked] {
-    --background-color: var(--wa-form-control-activated-color);
-    --border-color: var(--background-color);
-    --text-color: var(--wa-color-brand-on-loud);
+:where(:root),
+:host,
+.wa-theme-classic {
+  wa-avatar {
+    --background-color: var(--wa-color-neutral-fill-loud);
+    --text-color: var(--wa-color-neutral-on-loud);
  }
-}

-wa-breadcrumb {
-  font-size: var(--wa-font-size-s);
-}
+  button,
+  input:where([type='button'], [type='reset'], [type='submit']),
+  wa-button,
+  .wa-button,
+  wa-radio-button {
+    font-size: var(--wa-size-smaller);
+  }

-wa-callout {
-  --spacing: var(--wa-space-l);
-  font-size: var(--wa-size-smaller);
+  wa-radio-button {
+    --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
+    --background-color-hover: var(--wa-form-control-activated-color);
+    --border-color: var(--wa-form-control-border-color);
+    --border-color-active: var(--background-color-active);
+    --border-color-hover: var(--background-color-hover);
+    --text-color-active: var(--text-color-hover);
+    --text-color-hover: var(--wa-color-brand-on-loud);
+    --indicator-color: var(--wa-background-color);

-  &:is([appearance~='outlined'], .wa-outlined) {
-    border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
-    border-color: var(--border-color, var(--wa-color-border-loud)) var(--wa-color-surface-border)
-      var(--wa-color-surface-border) var(--wa-color-surface-border);
-
-    &:not([appearance~='accent'], .wa-accent) {
-      --border-color: var(--wa-color-fill-loud);
+    &[checked] {
+      --background-color: var(--wa-form-control-activated-color);
+      --border-color: var(--background-color);
+      --text-color: var(--wa-color-brand-on-loud);
    }
  }
-  &:not([appearance~='accent'], .wa-accent) {
-    --icon-color: var(--wa-color-fill-loud);
-    --text-color: var(--wa-color-text-normal);
+
+  wa-breadcrumb {
+    font-size: var(--wa-font-size-s);
+  }
+
+  wa-callout {
+    --spacing: var(--wa-space-l);
+    font-size: var(--wa-size-smaller);
+
+    &:is([appearance~='outlined'], .wa-outlined) {
+      border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
+      border-color: var(--border-color, var(--wa-color-border-loud)) var(--wa-color-surface-border)
+        var(--wa-color-surface-border) var(--wa-color-surface-border);
+
+      &:not([appearance~='accent'], .wa-accent) {
+        --border-color: var(--wa-color-fill-loud);
+      }
+    }
+    &:not([appearance~='accent'], .wa-accent) {
+      --icon-color: var(--wa-color-fill-loud);
+      --text-color: var(--wa-color-text-normal);
+    }
+  }
+
+  wa-card {
+    background-color: var(--wa-color-surface-raised);
+  }
+
+  wa-carousel {
+    --box-shadow: var(--wa-shadow-s);
+    --pagination-color-active: var(--wa-color-neutral-fill-loud);
+  }
+
+  wa-dialog,
+  wa-drawer {
+    --spacing: var(--wa-space-l);
+  }
+
+  :is(
+      input:where(
+          :not(
+            [type='button'],
+            [type='checkbox'],
+            [type='color'],
+            [type='file'],
+            [type='hidden'],
+            [type='image'],
+            [type='radio'],
+            [type='range'],
+            [type='reset'],
+            [type='submit']
+          )
+        ),
+      select,
+      textarea,
+      wa-input,
+      wa-select,
+      wa-textarea,
+      .wa-text-field
+    ):not([appearance='filled'], .wa-filled) {
+    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
+      color-mix(in oklab, var(--wa-color-focus), transparent 50%);
+    --wa-focus-ring-offset: 0;
+  }
+
+  input[type='radio'],
+  wa-radio {
+    --background-color-checked: var(--border-color-checked);
+    --checked-icon-color: var(--wa-color-surface-default);
+    --checked-icon-scale: 0.4;
+  }
+
+  input[type='range'],
+  wa-slider {
+    --thumb-gap: 0;
+  }
+
+  wa-switch {
+    --background-color: var(--wa-color-gray-50);
+    --border-color: var(--background-color);
+    --height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
+    --thumb-color: var(--wa-color-surface-default);
+    --thumb-size: calc(var(--height) + 4px);
+    --width: calc(var(--height) * 2);
+
+    &::part(thumb) {
+      border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
+    }
+    &[checked]::part(thumb) {
+      border-color: var(--background-color-checked);
+    }
+  }
+
+  wa-progress-bar {
+    --height: 1rem;
+  }
+
+  wa-tab {
+    font-size: var(--wa-font-size-s);
  }
 }
-
-wa-card {
-  --background-color: var(--wa-color-surface-raised);
-}
-
-wa-carousel {
-  --box-shadow: var(--wa-shadow-s);
-  --pagination-color-active: var(--wa-color-neutral-fill-loud);
-}
-
-wa-dialog,
-wa-drawer {
-  --spacing: var(--wa-space-l);
-}
-
-:is(
-    input:where(
-        :not(
-          [type='button'],
-          [type='checkbox'],
-          [type='color'],
-          [type='file'],
-          [type='hidden'],
-          [type='image'],
-          [type='radio'],
-          [type='range'],
-          [type='reset'],
-          [type='submit']
-        )
-      ),
-    select,
-    textarea,
-    wa-input,
-    wa-select,
-    wa-textarea,
-    .wa-text-field
-  ):not([appearance='filled'], .wa-filled) {
-  --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
-    color-mix(in oklab, var(--wa-color-focus), transparent 50%);
-  --wa-focus-ring-offset: 0;
-}
-
-input[type='radio'],
-wa-radio {
-  --background-color-checked: var(--border-color-checked);
-  --checked-icon-color: var(--wa-color-surface-default);
-  --checked-icon-scale: 0.4;
-}
-
-input[type='range'],
-wa-slider {
-  --thumb-gap: 0;
-}
-
-wa-switch {
-  --background-color: var(--wa-color-gray-50);
-  --border-color: var(--background-color);
-  --height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
-  --thumb-color: var(--wa-color-surface-default);
-  --thumb-size: calc(var(--height) + 4px);
-  --width: calc(var(--height) * 2);
-
-  &::part(thumb) {
-    border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
-  }
-  &[checked]::part(thumb) {
-    border-color: var(--background-color-checked);
-  }
-}
-
-wa-progress-bar {
-  --height: 1rem;
-}
-
-wa-tab {
-  font-size: var(--wa-font-size-s);
-}
--- a/src/styles/themes/default.css
+++ b/src/styles/themes/default.css
@@ -8,15 +8,16 @@
@import url('default/transitions.css');
@import url('default/groups.css');

-:root,
+:where(:root),
 :host,
-.wa-theme-default-light {
+.wa-theme-default,
+.wa-light {
  color-scheme: light;
  color: var(--wa-color-text-normal);
 }

-.wa-theme-default-dark,
-:is(:host-context(.wa-theme-migration-dark)) {
+.wa-dark,
+:is(:host-context(.wa-dark)) {
  color-scheme: dark;
  color: var(--wa-color-text-normal);
 }
--- a/src/styles/themes/default/color-semantic.css
+++ b/src/styles/themes/default/color-semantic.css
@@ -1,8 +1,10 @@
 /**
 * Foundational Colors and Semantic Colors
 */
-:where(:root, :host),
-.wa-theme-default-light {
+:where(:root),
+:host,
+.wa-theme-default,
+.wa-light {
  /**
   * Foundational Colors
   */
@@ -102,14 +104,14 @@
 }

 /** need to wrap :host-context() in an :is() selector for unsupported browsers */
-.wa-theme-default-dark,
-:is(:host-context(.wa-theme-default-dark)) {
+.wa-dark,
+:is(:host-context(.wa-dark)) {
  /**
   * Foundational Colors
   */
  --wa-color-surface-raised: var(--wa-color-gray-10);
  --wa-color-surface-default: var(--wa-color-gray-05);
-  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%);
+  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
  --wa-color-surface-border: var(--wa-color-gray-20);

  --wa-color-text-normal: var(--wa-color-gray-95);
--- a/src/styles/themes/default/color.css
+++ b/src/styles/themes/default/color.css
@@ -6,7 +6,8 @@
 * A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio.
 * A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
 */
-:where(:root, :host) {
+:where(:root),
+:host {
  --wa-color-red-95: #ffefef;
  --wa-color-red-90: #ffdddc;
  --wa-color-red-80: #ffb7b6;
--- a/src/styles/themes/default/groups.css
+++ b/src/styles/themes/default/groups.css
@@ -1,8 +1,10 @@
 /**
 * Component Groups
 */
-:where(:root, :host),
-.wa-theme-default-light {
+:where(:root),
+:host,
+.wa-theme-default,
+.wa-light {
  /* Form controls */
  --wa-form-control-background-color: var(--wa-color-surface-default);

@@ -45,8 +47,8 @@
 }

 /** need to wrap :host-context() in an :is() selector for unsupported browsers */
-.wa-theme-default-dark,
-:is(:host-context(.wa-theme-default-dark)) {
+.wa-dark,
+:is(:host-context(.wa-dark)) {
  /* Form controls */
  --wa-form-control-background-color: var(--wa-color-surface-default);

--- a/src/styles/themes/default/outlines.css
+++ b/src/styles/themes/default/outlines.css
@@ -1,7 +1,8 @@
 /**
  * Borders and outlines
  */
-:where(:root, :host) {
+:where(:root),
+:host {
  --wa-border-style: solid;

  /* A multiplier is provided to uniformly increase or decrease all border widths. */
--- a/src/styles/themes/default/rounding.css
+++ b/src/styles/themes/default/rounding.css
@@ -1,7 +1,8 @@
 /**
 * Rounding
 */
-:where(:root, :host) {
+:where(:root),
+:host {
  /* A multiplier is provided to uniformly increase or decrease all border radii. */
  --wa-border-radius-scale: 1;
  --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
--- a/src/styles/themes/default/shadows.css
+++ b/src/styles/themes/default/shadows.css
@@ -3,7 +3,8 @@
 * Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities.
 * A multiplier is provided for each shadow quality to uniformly scale all related values.
 */
-:where(:root, :host) {
+:where(:root),
+:host {
  --wa-shadow-offset-x-scale: 0;
  --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
  --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
--- a/src/styles/themes/default/space.css
+++ b/src/styles/themes/default/space.css
@@ -1,7 +1,8 @@
 /**
 * Spacing
 */
-:where(:root, :host) {
+:where(:root),
+:host {
  /* A multiplier is provided to uniformly increase or decrease all spacing. */
  --wa-space-scale: 1;
  --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--- a/src/styles/themes/default/transitions.css
+++ b/src/styles/themes/default/transitions.css
@@ -1,7 +1,8 @@
 /**
 * Transitions
 */
-:where(:root, :host) {
+:where(:root),
+:host {
  --wa-transition-easing: ease;
  --wa-transition-slow: 300ms;
  --wa-transition-normal: 150ms;
--- a/src/styles/themes/default/typography.css
+++ b/src/styles/themes/default/typography.css
@@ -1,7 +1,8 @@
 /**
 * Typography
 */
-:where(:root, :host) {
+:where(:root),
+:host {
  --wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
  --wa-font-family-heading: var(--wa-font-family-body);
  --wa-font-family-code: ui-monospace, monospace;
--- a/src/styles/themes/glassy.css
+++ b/src/styles/themes/glassy.css
@@ -8,9 +8,10 @@
@import url('default/transitions.css');
@import url('default/groups.css');

-:root,
+:where(:root),
 :host,
-.wa-theme-glassy-light {
+.wa-theme-glassy,
+.wa-light {
  color-scheme: light;
  color: var(--wa-color-text-normal);

@@ -33,8 +34,8 @@
  --wa-shadow-blur-scale: 3;
 }

-.wa-theme-glassy-dark,
-:is(:host-context(.wa-theme-glassy-dark)) {
+.wa-dark,
+:is(:host-context(.wa-dark)) {
  color-scheme: dark;
  color: var(--wa-color-text-normal);

@@ -117,83 +118,87 @@
 /**
 * Component Styles
 */
-wa-button:not([appearance='plain']) {
-  box-shadow:
-    inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-    inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
-    inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
-    inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-    inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
-    var(--wa-shadow-s) /* outer shadow */;
-
-  margin-bottom: var(--wa-shadow-offset-y-s);
-  transition: transform var(--wa-transition-fast);
-
-  &:not([disabled]) {
-    &:hover {
-      box-shadow:
-        inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-        inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
-        inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
-        inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-        inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */,
-        var(--wa-shadow-m) /* outer shadow */;
-    }
-
-    &:active {
-      box-shadow:
-        inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1) /* shine */,
-        inset 0 0.125rem 0 0 rgb(0 0 0 / 0.1) /* top highlight */,
-        inset 0 1.25em 0 0 rgb(255 255 255 / 0.08) /* upper tint */,
-        inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-        inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04) /* bottom highlight */,
-        0 0 0 0 transparent /* outer shadow */;
-
-      transform: translateY(var(--wa-shadow-offset-y-s));
-    }
-  }
-}
-
-wa-checkbox,
-wa-input:not(:focus),
-wa-radio,
-wa-select {
-  --box-shadow: inset var(--wa-shadow-s), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
-    inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
-}
-
-wa-checkbox:state(checked),
-wa-radio:state(checked) {
-  --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-    inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
-    inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
-}
-
-wa-textarea:not(:focus) {
-  &:not([appearance='filled']):not([disabled]) {
-    --box-shadow: var(--wa-shadow-s);
-  }
-}
-
-wa-switch {
-  --box-shadow: inset var(--wa-shadow-s);
-  --thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-    inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
-    inset 0 calc(var(--height) * 0.25) 0 0 rgb(255 255 255 / 0.04) /* upper tint */,
-    inset 0 calc(var(--height) * -0.25) 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-    inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
-}
-
-wa-progress-bar {
-  box-shadow: inset var(--wa-shadow-s);
-
-  &::part(indicator) {
+:where(:root),
+:host,
+.wa-theme-glassy {
+  wa-button:not([appearance='plain']) {
    box-shadow:
      inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
      inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
-      inset 0 0.625rem 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
-      inset 0 -0.5rem 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+      inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
+      inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
      var(--wa-shadow-s) /* outer shadow */;
+
+    margin-bottom: var(--wa-shadow-offset-y-s);
+    transition: transform var(--wa-transition-fast);
+
+    &:not([disabled]) {
+      &:hover {
+        box-shadow:
+          inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+          inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
+          inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
+          inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+          inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */,
+          var(--wa-shadow-m) /* outer shadow */;
+      }
+
+      &:active {
+        box-shadow:
+          inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1) /* shine */,
+          inset 0 0.125rem 0 0 rgb(0 0 0 / 0.1) /* top highlight */,
+          inset 0 1.25em 0 0 rgb(255 255 255 / 0.08) /* upper tint */,
+          inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+          inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04) /* bottom highlight */,
+          0 0 0 0 transparent /* outer shadow */;
+
+        transform: translateY(var(--wa-shadow-offset-y-s));
+      }
+    }
+  }
+
+  wa-checkbox,
+  wa-input:not(:focus),
+  wa-radio,
+  wa-select {
+    --box-shadow: inset var(--wa-shadow-s), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
+      inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
+  }
+
+  wa-checkbox:state(checked),
+  wa-radio:state(checked) {
+    --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+      inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
+      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
+  }
+
+  wa-textarea:not(:focus) {
+    &:not([appearance='filled']):not([disabled]) {
+      --box-shadow: var(--wa-shadow-s);
+    }
+  }
+
+  wa-switch {
+    --box-shadow: inset var(--wa-shadow-s);
+    --thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+      inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
+      inset 0 calc(var(--height) * 0.25) 0 0 rgb(255 255 255 / 0.04) /* upper tint */,
+      inset 0 calc(var(--height) * -0.25) 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
+  }
+
+  wa-progress-bar {
+    box-shadow: inset var(--wa-shadow-s);
+
+    &::part(indicator) {
+      box-shadow:
+        inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+        inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
+        inset 0 0.625rem 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
+        inset 0 -0.5rem 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+        inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
+        var(--wa-shadow-s) /* outer shadow */;
+    }
  }
 }
--- a/src/styles/themes/mellow.css
+++ b/src/styles/themes/mellow.css
@@ -9,9 +9,10 @@
@import url('default/groups.css');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

-:root,
+:where(:root),
 :host,
-.wa-theme-mellow-light {
+.wa-theme-mellow,
+.wa-light {
  color-scheme: light;
  color: var(--wa-color-text-normal);

@@ -119,8 +120,8 @@
  --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
 }

-.wa-theme-mellow-dark,
-:is(:host-context(.wa-theme-mellow-dark)) {
+.wa-dark,
+:is(:host-context(.wa-dark)) {
  color-scheme: dark;
  color: var(--wa-color-text-normal);

@@ -129,7 +130,7 @@
   */
  --wa-color-surface-raised: var(--wa-color-gray-10);
  --wa-color-surface-default: var(--wa-color-gray-05);
-  --wa-color-surface-lowered: var(--wa-color-gray-05);
+  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
  --wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-30), transparent);

  --wa-color-text-normal: var(--wa-color-blue-90);
@@ -201,28 +202,32 @@
 /**
 * Component Styles
 */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  letter-spacing: calc(1em * -0.02);
-}
+:where(:root),
+:host,
+.wa-theme-mellow {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    letter-spacing: calc(1em * -0.02);
+  }

-wa-callout {
-  border-width: var(--wa-panel-border-width) var(--wa-panel-border-width) var(--wa-panel-border-width)
-    calc(var(--wa-panel-border-width) * 4);
-}
+  wa-callout {
+    border-width: var(--wa-panel-border-width) var(--wa-panel-border-width) var(--wa-panel-border-width)
+      calc(var(--wa-panel-border-width) * 4);
+  }

-wa-card::part(header) {
-  border-bottom: var(--border-width) dotted var(--border-color);
-}
-wa-card::part(footer) {
-  border-top: var(--border-width) dotted var(--border-color);
-}
+  wa-card::part(header) {
+    border-bottom-style: dotted;
+  }
+  wa-card::part(footer) {
+    border-top-style: dotted;
+  }

-input[type='radio'],
-wa-radio {
-  --checked-icon-scale: 0.6;
+  input[type='radio'],
+  wa-radio {
+    --checked-icon-scale: 0.6;
+  }
 }
--- a/src/styles/themes/playful.css
+++ b/src/styles/themes/playful.css
@@ -8,9 +8,10 @@
@import url('default/groups.css');
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

-:root,
+:where(:root),
 :host,
-.wa-theme-playful-light {
+.wa-theme-playful,
+.wa-light {
  color-scheme: light;
  color: var(--wa-color-text-normal);

@@ -203,8 +204,8 @@
  --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
 }

-.wa-theme-playful-dark,
-:is(:host-context(.wa-theme-playful-dark)) {
+.wa-dark,
+:is(:host-context(.wa-dark)) {
  color-scheme: dark;
  color: var(--wa-color-text-normal);

@@ -287,93 +288,97 @@
 /**
 * Component Styles
 */
-wa-button:not([disabled]) {
-  transition-property: all;
+:where(:root),
+:host,
+.wa-theme-playful {
+  wa-button:not([disabled]) {
+    transition-property: all;

-  &:hover {
-    transform: scale(1.02, 1.02);
+    &:hover {
+      transform: scale(1.02, 1.02);
+    }
+
+    &:active {
+      transform: scale(0.98, 0.98);
+    }
+  }
+  wa-button:is([appearance~='accent'], [appearance~='filled']) {
+    --button-gradient-top: oklch(from var(--background-color) calc(l - 0.1) c h);
+    --button-gradient-middle: var(--background-color);
+    --button-gradient-bottom: oklch(from var(--background-color) calc(l + 0.1) c h);
+    --button-shadow-outer: oklch(from var(--background-color) calc(l + 0.1) c h);
+    --button-shadow-inner-a: oklch(from var(--background-color) calc(l - 0.2) c h);
+    --button-shadow-inner-b: oklch(from var(--background-color) calc(l + 0.3) c h);
+    --button-text-shadow: oklch(from var(--background-color) calc(l - 0.1) c h);
+    --border-color: var(--button-gradient-middle);
+    --border-width: 1px;
+    --border-color-hover: var(--button-gradient-middle);
+    --border-color-active: var(--button-gradient-middle);
+
+    &::part(base) {
+      background: linear-gradient(
+        180deg,
+        var(--button-gradient-top) 0%,
+        var(--button-gradient-middle) 51.88%,
+        var(--button-gradient-bottom) 100%
+      );
+      box-shadow:
+        0px 6px 16px var(--button-shadow-outer),
+        inset 0 -2px 8px var(--button-shadow-inner-a),
+        inset 0 2px 8px var(--button-shadow-inner-b);
+    }
+
+    &:not([disabled])::part(base):hover {
+      background: linear-gradient(
+        180deg,
+        var(--button-gradient-bottom) 0%,
+        var(--button-gradient-middle) 51.88%,
+        var(--button-gradient-top) 100%
+      );
+    }
+
+    &:not([disabled])::part(base):active {
+      background: linear-gradient(
+        180deg,
+        color-mix(in oklab, var(--button-gradient-top), var(--wa-color-mix-active)) 0%,
+        color-mix(in oklab, var(--button-gradient-middle), var(--wa-color-mix-active)) 51.88%,
+        color-mix(in oklab, var(--button-gradient-bottom), var(--wa-color-mix-active)) 100%
+      );
+      box-shadow:
+        inset 0 -2px 8px var(--button-shadow-inner-a),
+        inset 0 2px 8px var(--button-shadow-inner-b);
+    }
  }

-  &:active {
-    transform: scale(0.98, 0.98);
-  }
-}
-wa-button:is([appearance~='accent'], [appearance~='filled']) {
-  --button-gradient-top: oklch(from var(--background-color) calc(l - 0.1) c h);
-  --button-gradient-middle: var(--background-color);
-  --button-gradient-bottom: oklch(from var(--background-color) calc(l + 0.1) c h);
-  --button-shadow-outer: oklch(from var(--background-color) calc(l + 0.1) c h);
-  --button-shadow-inner-a: oklch(from var(--background-color) calc(l - 0.2) c h);
-  --button-shadow-inner-b: oklch(from var(--background-color) calc(l + 0.3) c h);
-  --button-text-shadow: oklch(from var(--background-color) calc(l - 0.1) c h);
-  --border-color: var(--button-gradient-middle);
-  --border-width: 1px;
-  --border-color-hover: var(--button-gradient-middle);
-  --border-color-active: var(--button-gradient-middle);
-
-  &::part(base) {
-    background: linear-gradient(
-      180deg,
-      var(--button-gradient-top) 0%,
-      var(--button-gradient-middle) 51.88%,
-      var(--button-gradient-bottom) 100%
-    );
-    box-shadow:
-      0px 6px 16px var(--button-shadow-outer),
-      inset 0 -2px 8px var(--button-shadow-inner-a),
-      inset 0 2px 8px var(--button-shadow-inner-b);
+  wa-button::part(label) {
+    font-weight: var(--wa-font-weight-bold);
+    text-shadow: 0 2px 2px var(--button-text-shadow);
  }

-  &:not([disabled])::part(base):hover {
-    background: linear-gradient(
-      180deg,
-      var(--button-gradient-bottom) 0%,
-      var(--button-gradient-middle) 51.88%,
-      var(--button-gradient-top) 100%
-    );
+  wa-callout {
+    border-style: dashed;
  }

-  &:not([disabled])::part(base):active {
-    background: linear-gradient(
-      180deg,
-      color-mix(in oklab, var(--button-gradient-top), var(--wa-color-mix-active)) 0%,
-      color-mix(in oklab, var(--button-gradient-middle), var(--wa-color-mix-active)) 51.88%,
-      color-mix(in oklab, var(--button-gradient-bottom), var(--wa-color-mix-active)) 100%
-    );
-    box-shadow:
-      inset 0 -2px 8px var(--button-shadow-inner-a),
-      inset 0 2px 8px var(--button-shadow-inner-b);
+  wa-checkbox::part(check-icon) {
+    filter: drop-shadow(var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) 0.125em var(--wa-color-shadow));
+  }
+
+  wa-rating {
+    --symbol-color: color-mix(in oklab, var(--symbol-color-active), transparent);
+  }
+
+  wa-switch {
+    --thumb-size: 0.8em;
+    --height: 1.5em;
+    --width: calc(var(--thumb-size) * 3);
+  }
+
+  wa-switch[checked]::part(thumb) {
+    box-shadow: var(--wa-shadow-s);
+  }
+
+  wa-tag {
+    border-style: dashed;
+    border-color: var(--wa-color-border-quiet);
  }
 }
-
-wa-button::part(label) {
-  font-weight: var(--wa-font-weight-bold);
-  text-shadow: 0 2px 2px var(--button-text-shadow);
-}
-
-wa-callout {
-  border-style: dashed;
-}
-
-wa-checkbox::part(check-icon) {
-  filter: drop-shadow(var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) 0.125em var(--wa-color-shadow));
-}
-
-wa-rating {
-  --symbol-color: color-mix(in oklab, var(--symbol-color-active), transparent);
-}
-
-wa-switch {
-  --thumb-size: 0.8em;
-  --height: 1.5em;
-  --width: calc(var(--thumb-size) * 3);
-}
-
-wa-switch[checked]::part(thumb) {
-  box-shadow: var(--wa-shadow-s);
-}
-
-wa-tag {
-  border-style: dashed;
-  border-color: var(--wa-color-border-quiet);
-}
--- a/src/styles/themes/premium.css
+++ b/src/styles/themes/premium.css
@@ -10,9 +10,10 @@
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

-:root,
+:where(:root),
 :host,
-.wa-theme-premium-light {
+.wa-theme-premium,
+.wa-light {
  color-scheme: light;
  color: var(--wa-color-text-normal);

@@ -104,8 +105,8 @@
  --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
 }

-.wa-theme-premium-dark,
-:is(:host-context(.wa-theme-premium-dark)) {
+.wa-dark,
+:is(:host-context(.wa-dark)) {
  color-scheme: dark;
  color: var(--wa-color-text-normal);

@@ -188,89 +189,91 @@
 /**
 * Component Styles
 */
-wa-rating {
-  --symbol-size: var(--wa-font-size-l);
-  --symbol-color-active: var(--wa-color-text-quiet);
-}
-
-wa-switch {
-  --background: transparent;
-  --border-color: var(--wa-color-neutral-border-normal);
-  --thumb-color: var(--border-color);
-  --thumb-color-checked: var(--wa-color-brand-fill-quiet);
-  --thumb-size: 1em;
-  --height: 1.5em;
-  --width: calc(var(--thumb-size) * 2.5);
-}
-
-wa-button {
-  --box-shadow: inset 0 0.03125rem 0 0 rgb(255 255 255 / 0.5), inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1),
-    inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2), var(--wa-shadow-s);
-}
-
-wa-button[appearance='outlined'] {
-  --box-shadow: none;
-}
-
-wa-card {
-  --border-radius: var(--wa-border-radius-l);
-}
-
-wa-alert {
-  font-size: var(--wa-font-size-s);
-  --border-color: var(--background);
-}
-
-wa-carousel {
-  --pagination-color-active: var(--wa-color-brand-fill-loud);
-  --pagination-color: var(--wa-color-neutral-fill-normal);
-}
-
-wa-badge,
-wa-button::part(label),
-wa-tag {
-  text-transform: uppercase;
-}
-
-wa-badge,
-wa-tag {
-  border-width: 0;
-}
-
-&:not(.wa-theme-premium-dark) wa-alert {
-  &[variant='brand'] {
-    --background: var(--wa-color-primary-95);
+.wa-theme-premium {
+  wa-rating {
+    --symbol-size: var(--wa-font-size-l);
+    --symbol-color-active: var(--wa-color-text-quiet);
  }
-  &[variant='success'] {
-    --background: var(--wa-color-green-95);
+
+  wa-switch {
+    --background: transparent;
+    --border-color: var(--wa-color-neutral-border-normal);
+    --thumb-color: var(--border-color);
+    --thumb-color-checked: var(--wa-color-brand-fill-quiet);
+    --thumb-size: 1em;
+    --height: 1.5em;
+    --width: calc(var(--thumb-size) * 2.5);
  }
-  &[variant='warning'] {
-    --background: var(--wa-color-yellow-95);
+
+  wa-button {
+    --box-shadow: inset 0 0.03125rem 0 0 rgb(255 255 255 / 0.5), inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1),
+      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2), var(--wa-shadow-s);
  }
-  &[variant='danger'] {
-    --background: var(--wa-color-red-95);
-  }
-}
-
-wa-badge {
-  &[variant='brand'] {
-    --background: var(--wa-color-primary-80);
-    --text-color: var(--wa-color-primary-20);
-  }
-  &[variant='success'] {
-    --background: var(--wa-color-green-80);
-    --text-color: var(--wa-color-green-20);
-  }
-  &[variant='warning'] {
-    --background: var(--wa-color-yellow-80);
-    --text-color: var(--wa-color-yellow-20);
-  }
-  &[variant='danger'] {
-    --background: var(--wa-color-red-80);
-    --text-color: var(--wa-color-red-20);
-  }
-  &[variant='neutral'] {
-    --background: white;
-    --text-color: var(--wa-color-base-30);
+
+  wa-button[appearance='outlined'] {
+    --box-shadow: none;
+  }
+
+  wa-card {
+    border-radius: var(--wa-border-radius-l);
+  }
+
+  wa-alert {
+    font-size: var(--wa-font-size-s);
+    --border-color: var(--background);
+  }
+
+  wa-carousel {
+    --pagination-color-active: var(--wa-color-brand-fill-loud);
+    --pagination-color: var(--wa-color-neutral-fill-normal);
+  }
+
+  wa-badge,
+  wa-button::part(label),
+  wa-tag {
+    text-transform: uppercase;
+  }
+
+  wa-badge,
+  wa-tag {
+    border-width: 0;
+  }
+
+  &:not(.wa-dark) wa-alert {
+    &[variant='brand'] {
+      --background: var(--wa-color-primary-95);
+    }
+    &[variant='success'] {
+      --background: var(--wa-color-green-95);
+    }
+    &[variant='warning'] {
+      --background: var(--wa-color-yellow-95);
+    }
+    &[variant='danger'] {
+      --background: var(--wa-color-red-95);
+    }
+  }
+
+  wa-badge {
+    &[variant='brand'] {
+      --background: var(--wa-color-primary-80);
+      --text-color: var(--wa-color-primary-20);
+    }
+    &[variant='success'] {
+      --background: var(--wa-color-green-80);
+      --text-color: var(--wa-color-green-20);
+    }
+    &[variant='warning'] {
+      --background: var(--wa-color-yellow-80);
+      --text-color: var(--wa-color-yellow-20);
+    }
+    &[variant='danger'] {
+      --background: var(--wa-color-red-80);
+      --text-color: var(--wa-color-red-20);
+    }
+    &[variant='neutral'] {
+      --background: white;
+      --text-color: var(--wa-color-base-30);
+    }
  }
 }
--- a/src/styles/themes/migration.css
+++ b/src/styles/themes/migration.css
@@ -9,9 +9,10 @@
@import url('default/groups.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

-:root,
+:where(:root),
 :host,
-.wa-theme-migration-light {
+.wa-theme-tailspin,
+.wa-light {
  color-scheme: light;
  color: var(--wa-color-text-normal);

@@ -124,8 +125,8 @@
  --wa-form-control-label-line-height: var(--wa-line-height-normal);
 }

-.wa-theme-migration-dark,
-:is(:host-context(.wa-theme-migration-dark)) {
+.wa-dark,
+:is(:host-context(.wa-dark)) {
  color-scheme: dark;
  color: var(--wa-color-text-normal);

@@ -134,7 +135,7 @@
   */
  --wa-color-surface-raised: var(--wa-color-gray-10);
  --wa-color-surface-default: var(--wa-color-gray-05);
-  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%);
+  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
  --wa-color-surface-border: rgb(255 255 255 / 0.1);

  --wa-color-text-normal: white;
@@ -208,57 +209,62 @@
 /**
 * Component Styles
 */
-h1,
-h2,
-h3,
-h4 {
-  letter-spacing: calc(1em * -0.03);
-}
+:where(:root),
+:host,
+.wa-theme-tailspin,
+:is(:host-context(.wa-theme-tailspin)) {
+  h1,
+  h2,
+  h3,
+  h4 {
+    letter-spacing: calc(1em * -0.03);
+  }

-wa-avatar {
-  --background-color: var(--wa-color-neutral-fill-quiet);
-  --text-color: var(--wa-color-neutral-on-quiet);
-}
+  wa-avatar {
+    --background-color: var(--wa-color-neutral-fill-quiet);
+    --text-color: var(--wa-color-neutral-on-quiet);
+  }

-a,
-wa-badge,
-wa-tag {
-  font-weight: var(--wa-font-weight-semibold);
-}
+  a,
+  wa-badge,
+  wa-tag {
+    font-weight: var(--wa-font-weight-semibold);
+  }

-:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
-    [appearance='plain'],
-    .wa-plain
-  ) {
-  box-shadow: var(--wa-shadow-s);
-}
+  :is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
+      [appearance='plain'],
+      .wa-plain
+    ) {
+    box-shadow: var(--wa-shadow-s);
+  }

-wa-callout {
-  border-radius: var(--wa-border-radius-m);
+  wa-callout {
+    border-radius: var(--wa-border-radius-m);

-  &::part(icon) {
-    opacity: 0.6;
+    &::part(icon) {
+      opacity: 0.6;
+    }
+  }
+
+  input[type='radio'],
+  wa-radio {
+    --background-color-checked: var(--wa-form-control-activated-color);
+    --checked-icon-color: var(--wa-color-brand-on-loud);
+    --checked-icon-scale: 0.4;
+  }
+
+  wa-switch {
+    --background-color: var(--wa-color-neutral-fill-normal);
+    --border-color: transparent;
+    --height: calc(var(--thumb-size) * (18 / 14));
+    --thumb-color: white;
+    --thumb-color-checked: var(--thumb-color);
+    --thumb-size: 1.25em;
+    --thumb-shadow: var(--wa-shadow-s);
+    --width: calc(var(--thumb-size) * (32 / 14));
+  }
+
+  wa-tab {
+    color: var(--wa-color-text-quiet);
  }
 }
-
-input[type='radio'],
-wa-radio {
-  --background-color-checked: var(--wa-form-control-activated-color);
-  --checked-icon-color: var(--wa-color-brand-on-loud);
-  --checked-icon-scale: 0.4;
-}
-
-wa-switch {
-  --background-color: var(--wa-color-neutral-fill-normal);
-  --border-color: transparent;
-  --height: calc(var(--thumb-size) * (18 / 14));
-  --thumb-color: white;
-  --thumb-color-checked: var(--thumb-color);
-  --thumb-size: 1.25em;
-  --thumb-shadow: var(--wa-shadow-s);
-  --width: calc(var(--thumb-size) * (32 / 14));
-}
-
-wa-tab {
-  color: var(--wa-color-text-quiet);
-}
--- a/src/styles/utilities/appearance.css
+++ b/src/styles/utilities/appearance.css
@@ -36,6 +36,12 @@
  --text-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
 }

+/* 0 specificity. Safari doesn't like :where(:host()) so we need a separate rule. */
+:where(.wa-filled),
+:host(:where([appearance~='filled'])) {
+  --border-color: transparent;
+}
+
 .wa-plain,
 :host([appearance~='plain']) {
  --background-color: transparent;
--- a/src/styles/utilities/size.css
+++ b/src/styles/utilities/size.css
@@ -16,7 +16,7 @@
  font-size: var(--wa-size);
 }

-:root,
+:where(:root),
 :host,
 .wa-size-s,
 .wa-size-m,
Author	SHA1	Message	Date
Kelsey Jackson	a6391ed9d7	fix merge conflicts	2025-01-09 11:04:06 -06:00
Kelsey Jackson	e0038c3125	Initial Commit	2025-01-09 10:59:33 -06: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
Kelsey Jackson	60db87e976	first pass at blog patterns	2024-12-11 13:48:58 -06:00
Kelsey Jackson	4747d246c7	figuring out page	2024-12-11 11:45:45 -06:00
Kelsey Jackson	0392e4c528	Merge branch 'next' into kj/blog-patterns	2024-12-11 11:32:44 -06:00
Kelsey Jackson	7be35746ee	switching machines	2024-12-10 10:24:40 -06:00
Kelsey Jackson	79cb1e91ec	Merge branch 'next' into kj/blog-patterns	2024-12-06 09:41:49 -06:00
Kelsey Jackson	7215ba0e60	Merge branch 'next' into kj/blog-patterns	2024-12-06 09:35:37 -06:00
Kelsey Jackson	2a5b326162	adding utilities	2024-12-06 09:33:59 -06:00
Kelsey Jackson	08f1bb0bfd	Merge branch 'kj/blog-patterns' of github.com:shoelace-style/webawesome into kj/blog-patterns	2024-12-04 21:54:39 -06:00
Kelsey Jackson	995f26f9fe	added utility classes to footer	2024-12-04 21:53:54 -06:00
Kelsey Jackson	9ab4c2ea41	Merge branch 'next' into kj/blog-patterns	2024-12-03 14:13:01 -06:00
Kelsey Jackson	ace1b61c37	removed images	2024-12-02 23:10:31 -06:00
Kelsey Jackson	1068bb632a	Merge branch 'next' into kj/blog-patterns	2024-12-02 23:00:50 -06:00
Kelsey Jackson	43d3ec8dc9	moved more images to hosting and added a container around the hero	2024-11-25 21:30:27 -06:00
Kelsey Jackson	0576332cce	Merge branch 'next' into kj/blog-patterns	2024-11-25 21:08:46 -06:00
Kelsey Jackson	5df97a48f7	played with layout	2024-11-25 14:37:14 -06:00
Kelsey Jackson	2aee3ed06d	Merge branch 'next' into kj/blog-patterns	2024-11-22 12:25:51 -06:00
Kelsey Jackson	cba285c9c1	added grid to footer	2024-11-22 09:28:07 -06:00
Kelsey Jackson	8c8137fedd	moving machines	2024-11-21 10:18:14 -06:00
Kelsey Jackson	4c0265319c	updated blog patterns	2024-11-19 15:07:51 -06:00