Support inheritance and initial values

Do not reflect default values
- Add `default` descriptor - Do not reflect attributes when equal to their default value - Patch getter return value to return default value when empty - Use it in button `appearance`
2026-01-13 12:39:14 +00:00 · 2025-01-21 15:26:45 -05:00 · 2025-01-21 15:16:11 -05:00 · 2025-01-21 12:54:38 -05:00 · 2025-01-21 12:52:41 -05:00 · 2025-01-21 12:36:54 -05:00
158 changed files with 4638 additions and 3613 deletions
--- a/docs/_data/hues.json
+++ b/docs/_data/hues.json
@@ -0,0 +1 @@
+["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]
--- a/docs/_data/palettes.js
+++ b/docs/_data/palettes.js
@@ -0,0 +1 @@
+export { default as default } from '../../src/styles/color/palettes.js';
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -83,8 +83,6 @@
          </details>
        </nav>

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

 <script type="module" src="/assets/scripts/theme-picker.js"></script>
 {# Preset Theme #}
-<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme or 'default' }}.css" render="blocking" fetchpriority="high" />
-{% if not forceTheme %}
+{% if forceTheme %}
+<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme }}.css" render="blocking" fetchpriority="high" />
+{% else %}
+<noscript><link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high" /></noscript>
 <script>
-if (localStorage.presetTheme) {
-	let preset = localStorage.presetTheme;
+{
+	let preset = localStorage.presetTheme ?? 'default';
 	let script = document.currentScript;
-	let link = script.previousElementSibling;
-	let newLink = link.cloneNode();
-	newLink.href = link.href.replace("/default.css", `/${preset}.css`);
-	newLink.addEventListener('load', () => {
-		link.remove();
-	});
-	link.after(newLink);
+	script.insertAdjacentHTML('beforebegin', `<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/${ preset }.css" render="blocking" fetchpriority="high" />`);
 }
 </script>
 <script type="module" src="/assets/scripts/preset-theme-picker.js"></script>
--- a/docs/_includes/import-stylesheet-code.md.njk
+++ b/docs/_includes/import-stylesheet-code.md.njk
@@ -0,0 +1,18 @@
+<wa-tab-group>
+<wa-tab panel="html">In HTML</wa-tab>
+<wa-tab panel="css">In CSS</wa-tab>
+<wa-tab-panel name="html">
+
+Simply add the following code to the `<head>` of your page:
+```html
+<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
+```
+</wa-tab-panel>
+<wa-tab-panel name="css">
+
+Simply add the following code at the top of your CSS file:
+```css
+@import url('{% cdnUrl stylesheet %}');
+```
+</wa-tab-panel>
+</wa-tab-group>
--- a/docs/_includes/sidebar-group.njk
+++ b/docs/_includes/sidebar-group.njk
@@ -1,8 +1,8 @@
 {# 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 (tags or [])) | attr('open') }}>
+  {% set groupUrl %}/docs/{{ tag }}/{% endset %}
+  <wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | attr('open') }}>
    <h2 slot="summary">
-      {% set groupUrl %}/docs/{{ tag }}/{% endset %}
      {% if groupUrl | getCollectionItemFromUrl %}
        <a href="{{ groupUrl }}" title="Overview">{{ title or (tag | capitalize) }}
          <wa-icon name="grid-2"></wa-icon>
--- a/docs/_includes/sidebar.njk
+++ b/docs/_includes/sidebar.njk
@@ -25,7 +25,8 @@
  'utilities': 'Style Utilities',
  'layout': 'Layout',
  'patterns': 'Patterns',
-  'theming': 'Theming'
+  'palettes': 'Color Palettes',
+  'tokens': 'Design Tokens'
 } %}
  {% include 'sidebar-group.njk' %}
 {% endfor %}
--- a/docs/_includes/svgs/palette.njk
+++ b/docs/_includes/svgs/palette.njk
@@ -0,0 +1,24 @@
+{% set paletteId = page.fileSlug %}
+{% set tints = [80, 60, 40, 20] %}
+{% set width = 20 %}
+{% set height = 13 %}
+{% set gap_x = 3 %}
+{% set gap_y = 3 %}
+
+<svg viewBox="0 0 {{ (width + gap_x) * hues|length }} {{ (height + gap_y) * tints|length }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
+<style>
+	@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});
+	.palette-icon {
+		height: 8ch;
+	}
+</style>
+
+{% for hue in hues -%}
+  {% set hueIndex = loop.index0 %}
+  {% for tint in tints -%}
+    <rect x="{{ hueIndex * (width + gap_x) }}" y="{{ loop.index0 * (height + gap_y) }}"
+	      width="{{ width }}" height="{{ height }}"
+	      fill="var(--wa-color-{{ hue }}-{{ tint }})" rx="4" />
+  {%- endfor %}
+{% endfor %}
+</svg>
--- a/docs/_includes/svgs/theming/borders.njk
+++ b/docs/_includes/svgs/theming/borders.njk
--- a/docs/_includes/svgs/theming/color.njk
+++ b/docs/_includes/svgs/theming/color.njk
--- a/docs/_includes/svgs/theming/component-groups.njk
+++ b/docs/_includes/svgs/theming/component-groups.njk
--- a/docs/_includes/svgs/theming/focus.njk
+++ b/docs/_includes/svgs/theming/focus.njk
--- a/docs/_includes/svgs/theming/shadows.njk
+++ b/docs/_includes/svgs/theming/shadows.njk
--- a/docs/_includes/svgs/theming/space.njk
+++ b/docs/_includes/svgs/theming/space.njk
--- a/docs/_includes/svgs/theming/transitions.njk
+++ b/docs/_includes/svgs/theming/transitions.njk
--- a/docs/_includes/svgs/theming/typography.njk
+++ b/docs/_includes/svgs/theming/typography.njk
--- a/docs/_layouts/palette.njk
+++ b/docs/_layouts/palette.njk
@@ -0,0 +1,119 @@
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+{# {% set forceTheme = page.fileSlug %} #}
+
+{% extends '../_layouts/block.njk' %}
+
+{% set paletteId = page.fileSlug %}
+
+{% block afterContent %}
+<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
+
+{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
+
+<table class="colors wa-palette-{{ paletteId }}">
+  <thead>
+    <tr>
+      <th></th>
+      {% for tint in tints -%}
+      <th>{{ tint }}</th>
+      {%- endfor %}
+    </tr>
+  </thead>
+{% for hue in hues -%}
+<tr>
+  <th>{{ hue | capitalize }}</th>
+  {% for tint in tints -%}
+    <td>
+      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
+        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
+      </div>
+    </td>
+  {%- endfor -%}
+</tr>
+{%- endfor %}
+</table>
+
+<h2>Used By</h2>
+
+<section class="index-grid">
+{% for page in collections.theme %}
+  {%- if page.data.palette == paletteId -%}
+    {% include "page-card.njk" %}
+  {%- endif -%}
+{% endfor %}
+</section>
+
+{% markdown %}
+## Color Contrast
+
+Web Awesome color scales are designed to guarantee certain contrast ratios,
+both per [WCAG 2.1 success criteria](https://www.w3.org/TR/WCAG21/#contrast-minimum)
+as well as the emergent APCA specification _(planned)_,
+so you can ensure that text is both legible to all users, and legally conformant.
+
+### Level 1
+
+A difference of `40` ensures a minimum **3:1** contrast ratio, suitable for large text and icons (AA).
+{% endmarkdown %}
+
+{% set difference = 40 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+
+This also goes for a difference of `45`:
+
+{% endmarkdown %}
+
+{% set difference = 45 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+
+### Level 2
+
+A difference of `50` ensures a minimum **4.5:1** contrast ratio, suitable for normal text (AA) and large text (AAA)
+{% endmarkdown %}
+
+{% set difference = 50 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+
+This also goes for a difference of `55`:
+
+{% endmarkdown %}
+
+{% set difference = 55 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+### Level 3
+
+A difference of `60` ensures a minimum **7:1** contrast ratio, suitable for all text (AAA)
+{% endmarkdown %}
+
+{% set difference = 60 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+
+This also goes for a difference of `65`:
+
+{% endmarkdown %}
+
+{% set difference = 65 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+## How to use this palette
+
+If you are using a Web Awesome theme that uses this palette, it will already be included.
+To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.
+
+{% set stylesheet = 'styles/color/' + page.fileSlug + '.css' %}
+{% include 'import-stylesheet-code.md.njk' %}
+
+{% endmarkdown %}
+{% endblock %}
--- a/docs/_layouts/theme.njk
+++ b/docs/_layouts/theme.njk
@@ -5,7 +5,71 @@
 {% extends '../_includes/base.njk' %}

 {% block header %}
-<iframe src='{{ page.url }}demo.html'></iframe>
+<iframe src='{{ page.url }}demo.html' id="demo"></iframe>
+
+<p id="mix_and_match" class="wa-gap-m">
+  <strong>
+    <wa-icon name="merge" slot="prefix"></wa-icon>
+    Remix
+    <wa-icon-button href="#remixing" name="circle-question" slot="suffix" variant="regular" label="How to use?"></wa-icon-button>
+  </strong>
+  <wa-select name="colors" label="Colors from…" size="small">
+    <wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
+    <wa-option value="">(Theme default)</wa-option>
+    <wa-divider></wa-divider>
+    {% for theme in collections.theme | sort %}
+      {% if theme.fileSlug !== page.fileSlug %}
+      <wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
+      {% endif %}
+    {% endfor %}
+  </wa-select>
+
+  <wa-select name="palette" label="Palette" size="small">
+    <wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
+    <wa-option value="">(Theme default)</wa-option>
+    <wa-divider></wa-divider>
+    {% for p in collections.palette | sort %}
+      {% if p.fileSlug !== palette %}
+      <wa-option value="{{ p.fileSlug }}">{{ p.data.title }}</wa-option>
+      {% endif %}
+    {% endfor %}
+  </wa-select>
+
+  <wa-select name="typography" label="Typography from…" size="small">
+    <wa-icon name="font-case" slot="prefix"></wa-icon>
+    <wa-option value="">(Theme default)</wa-option>
+    <wa-divider></wa-divider>
+    {% for theme in collections.theme | sort %}
+      {% if theme.fileSlug !== page.fileSlug %}
+      <wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
+      {% endif %}
+    {% endfor %}
+  </wa-select>
+
+
+</p>
+<script>
+  document.querySelector('#mix_and_match').addEventListener('wa-change', function(event) {
+    let selects = document.querySelectorAll('#mix_and_match wa-select');
+    let url = new URL(demo.src);
+
+    for (let select of selects) {
+      url.searchParams.set(select.name, select.value);
+    }
+
+    demo.src = url;
+  });
+</script>
+
+<h2>Default Color Palette</h2>
+{% set paletteURL = '/docs/palettes/' + palette + '/' %}
+{% set themePage = page %}
+{% set page = paletteURL | getCollectionItemFromUrl %}
+<div class="index-grid">
+{% include 'page-card.njk' %}
+</div>
+{% set page = themePage %}
+
 {% endblock %}

 {% block afterContent %}
@@ -14,24 +78,25 @@

 You can import this theme from the Web Awesome CDN.

-<wa-tab-group>
-<wa-tab panel="html">In HTML</wa-tab>
-<wa-tab panel="css">In CSS</wa-tab>
-<wa-tab-panel name="html">
+{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
+{% include 'import-stylesheet-code.md.njk' %}

-Simply add the following code to the `<head>` of your page:
-```html
-<link rel="stylesheet" href="{% cdnUrl 'styles/themes/' + page.fileSlug + '.css' %}" />
-```
-</wa-tab-panel>
-<wa-tab-panel name="css">
+### Remixing { #remixing }

-Simply add the following code at the top of your CSS file:
-```css
-@import url('{% cdnUrl 'styles/themes/' + page.fileSlug + '.css' %}');
-```
-</wa-tab-panel>
-</wa-tab-group>
+If you want to combine the **colors** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
+
+{% set stylesheet = 'styles/themes/' + page.fileSlug + '/color.css' %}
+{% include 'import-stylesheet-code.md.njk' %}
+
+To use the **typography** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
+
+{% set stylesheet = 'styles/themes/' + page.fileSlug + '/typography.css' %}
+{% include 'import-stylesheet-code.md.njk' %}
+
+<wa-callout variant="warning">
+  <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
+  Please note that not all combinations will look good — once you’re mixing and matching, you’re on your own!
+</wa-callout>

 ## Dark mode

--- a/docs/_utils/filters.js
+++ b/docs/_utils/filters.js
@@ -105,6 +105,23 @@ export function deepValue(obj, key) {
  return key.reduce((subObj, property) => subObj?.[property], obj);
 }

+export function number(value, options) {
+  if (typeof value !== 'number' && isNaN(value)) {
+    return value;
+  }
+
+  let lang = options?.lang ?? 'en';
+  if (options?.lang) {
+    delete options.lang;
+  }
+
+  if (!options || Object.keys(options).length === 0) {
+    options = { maximumSignificantDigits: 3 };
+  }
+
+  return Number(value).toLocaleString(lang, options);
+}
+
 export function isNumeric(value) {
  return typeof value === 'number' || (typeof value === 'string' && !isNaN(value));
 }
--- a/docs/assets/scripts/preset-theme-picker.js
+++ b/docs/assets/scripts/preset-theme-picker.js
@@ -5,7 +5,7 @@ const presetTheme = new ThemeAspect({
  key: 'presetTheme',
  picker: 'wa-select.preset-theme-selector',

-  applyChange() {
+  applyChange(options = {}) {
    const oldStylesheets = [...document.querySelectorAll('#theme-stylesheet')];
    const oldStylesheet = oldStylesheets.pop();

@@ -38,7 +38,7 @@ const presetTheme = new ThemeAspect({

              oldStylesheet.remove();
            },
-            { behavior: 'smooth' },
+            { behavior: 'smooth', ...options },
          );
        },
        { once: true },
@@ -47,18 +47,6 @@ const presetTheme = new ThemeAspect({
  },
 });

-/**
- * Without this, there's a flash of the incorrect preset theme.
- */
-function updateSelectionBeforeTurboLoad(e) {
-  const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
-  if (newElement) {
-    presetTheme.syncUI(newElement);
-  }
-}
-
-['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
-  document.addEventListener(eventName, updateSelectionBeforeTurboLoad);
+window.addEventListener('turbo:render', e => {
+  presetTheme.applyChange({ behavior: 'instant' });
 });
-
-window.presetTheme = presetTheme;
--- a/docs/assets/scripts/search.js
+++ b/docs/assets/scripts/search.js
@@ -9,6 +9,7 @@ const icons = {
  component: 'puzzle-piece',
  document: 'file',
  home: 'house',
+  native: 'code',
  theme: 'palette',
 };
 let searchTimeout;
@@ -166,6 +167,7 @@ async function updateResults(query = '') {
      li.setAttribute('data-selected', index === 0 ? 'true' : 'false');

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

--- a/docs/assets/scripts/theme-picker.js
+++ b/docs/assets/scripts/theme-picker.js
@@ -34,6 +34,15 @@ export class ThemeAspect {
        this.set(picker.value);
      }
    });
+
+    ['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
+      document.addEventListener(eventName, e => {
+        const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
+        if (newElement) {
+          this.syncUI(newElement);
+        }
+      });
+    });
  }

  get() {
@@ -91,11 +100,6 @@ const colorScheme = new ThemeAspect({
    domChange(() => {
      let dark = this.computedValue === 'dark';
      document.documentElement.classList.toggle(`wa-dark`, dark);
-
-      for (let el of document.querySelectorAll('.wa-invert')) {
-        el.classList.toggle('wa-dark', !dark);
-        el.classList.toggle('wa-light', dark);
-      }
    });
  },
 });
--- a/docs/assets/styles/code-highlighter.css
+++ b/docs/assets/styles/code-highlighter.css
@@ -1,6 +1,12 @@
 pre {
  background-color: var(--wa-color-gray-20);
  color: white;
+
+  /* Ensures a discernible background color in dark mode
+   * Useful for themes that use gray-20 as --wa-color-surface-default  */
+  .wa-dark & {
+    background-color: var(--wa-color-surface-lowered);
+  }
 }
 .code-comment,
 .code-prolog,
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -333,6 +333,7 @@ wa-page > main:has(> .index-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
  gap: var(--wa-space-2xl);
+  margin-block-end: var(--wa-space-3xl);

  a {
    border-radius: var(--wa-border-radius-l);
@@ -382,15 +383,79 @@ wa-page > main:has(> .index-grid) {

 /* Swatches */
 .swatch {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
  background-color: transparent;
  border-color: var(--wa-color-neutral-border-normal);
  border-style: var(--wa-border-style);
  border-width: var(--wa-border-width-s);
  border-radius: var(--wa-border-radius-m);
  box-sizing: border-box;
-  line-height: 2.5;
-  height: 2.5em;
-  padding-inline: var(--wa-space-xs);
+  min-height: 2.5em;
+  padding: var(--wa-space-xs);
+  font-weight: var(--wa-font-weight-semibold);
+  line-height: var(--wa-line-height-condensed);
+
+  &.color {
+    border-color: transparent;
+  }
+
+  wa-copy-button {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+    --background-color-hover: transparent;
+    font-family: var(--wa-font-family-code);
+
+    &::part(button) {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+
+    &::part(button):hover {
+      cursor: copy;
+    }
+
+    &::part(copy-icon),
+    &::part(success-icon),
+    &::part(error-icon) {
+      opacity: 0 !important;
+    }
+  }
+}
+
+table.colors {
+  thead {
+    th {
+      text-align: center;
+      padding-block: 0;
+    }
+  }
+  tbody {
+    tr {
+      border: none;
+      &:hover {
+        background: transparent;
+      }
+    }
+
+    th {
+      width: 0;
+      vertical-align: middle;
+      text-align: right;
+    }
+
+    td {
+      padding-inline: var(--wa-space-3xs);
+      padding-block: var(--wa-space-s);
+    }
+  }
 }

 /* Layout Examples */
@@ -471,4 +536,23 @@ wa-page > main:has(> .index-grid) {
    height: 65vh;
    max-height: 21lh;
  }
+
+  #mix_and_match {
+    strong {
+      display: flex;
+      align-items: center;
+      gap: var(--wa-space-2xs);
+      margin-top: 1.2em;
+    }
+
+    wa-select::part(label) {
+      margin-block-end: 0;
+    }
+
+    wa-select[value='']::part(display-input),
+    wa-option[value=''] {
+      font-style: italic;
+      color: var(--wa-color-text-quiet);
+    }
+  }
 }
--- a/docs/docs/components/callout.md
+++ b/docs/docs/components/callout.md
@@ -3,6 +3,7 @@ title: Callout
 description: Callouts are used to display important messages inline.
 tags: [feedback, content]
 icon: callout
+native: callout
 ---

 ```html {.example}
--- a/docs/docs/components/select.md
+++ b/docs/docs/components/select.md
@@ -420,5 +420,7 @@ This can be hard to conceptualize, so heres a fairly large example showing how l
  //
  // TODO - remove once we switch to the Popover API
  //
-  document.querySelectorAll('wa-code-demo [slot="preview"] wa-select').forEach(select => select.hoist = true);
+  customElements.whenDefined('wa-select').then(() => {
+    document.querySelectorAll('wa-code-demo [slot="preview"] wa-select').forEach(select => select.hoist = true);
+  });
 </script>
--- a/docs/docs/customizing.md
+++ b/docs/docs/customizing.md
@@ -12,7 +12,7 @@ Web Awesome uses numerous CSS custom properties that make up a high-level themin

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

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

 ```css
 :where(:root),
--- a/docs/docs/experimental/inherit.md
+++ b/docs/docs/experimental/inherit.md
@@ -0,0 +1,69 @@
+---
+title: Inheritance & Default value tests
+---
+
+Button variant should default to `neutral`:
+
+```html {.example}
+<wa-button>Neutral</wa-button>
+<wa-button variant="neutral">Neutral</wa-button>
+<wa-button variant="brand">Brand</wa-button>
+```
+
+Callout variant should default to `brand`.
+Buttons within an element with a variant should inherit that variant unless they have a variant of their own.
+
+```html {.example}
+<wa-callout>
+	Brand
+	<wa-button>Brand</wa-button>
+	<wa-button variant="neutral">Neutral</wa-button>
+	<wa-button variant="brand">Brand</wa-button>
+	<button>Brand</button>
+	<button class="wa-neutral">Neutral</button>
+	<button class="wa-brand">Brand</button>
+</wa-callout>
+<wa-callout variant="neutral">
+	Neutral
+	<wa-button>Neutral</wa-button>
+	<wa-button variant="neutral">Neutral</wa-button>
+	<wa-button variant="brand">Brand</wa-button>
+	<button>Neutral</button>
+	<button class="wa-neutral">Neutral</button>
+	<button class="wa-brand">Brand</button>
+</wa-callout>
+```
+
+Nested callouts:
+
+
+```html {.example}
+<wa-callout>
+	Brand
+	<wa-callout>Brand</wa-callout>
+</wa-callout>
+<wa-callout variant="neutral">
+	Neutral
+	<wa-callout>Neutral</wa-callout>
+</wa-callout>
+```
+
+
+```html {.example}
+<wa-callout>
+	Brand
+	<wa-button>Brand</wa-button>
+	<wa-button variant="neutral">Neutral</wa-button>
+	<button>Brand</button>
+	<button class="wa-neutral">Neutral</button>
+	<br>
+	<br>
+	<wa-callout variant="neutral">
+		Neutral
+		<wa-button>Neutral</wa-button>
+		<wa-button variant="brand">Brand</wa-button>
+		<button>Neutral</button>
+		<button class="wa-brand">Brand</button>
+	</wa-callout>
+</wa-callout>
+```
--- a/docs/docs/experimental/themer.md
+++ b/docs/docs/experimental/themer.md
@@ -506,7 +506,7 @@ hasOutline: false
      <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="tailspin">Tailspin</wa-option>
-      <wa-option data-alpha="remove" value="glassy">Glassy</wa-option>
+      <wa-option data-alpha="remove" value="glossy">Glossy</wa-option>
      <wa-option data-alpha="remove" value="active">Active</wa-option>
      <wa-option value="classic">Classic</wa-option>
    </wa-select>
@@ -886,7 +886,7 @@ hasOutline: false
      case 'active':
        colorPalette = 'rudimentary';
        break;
-      case 'glassy':
+      case 'glossy':
        colorPalette = 'elegant';
        break;
      case 'premium':
@@ -1049,7 +1049,7 @@ hasOutline: false
      case 'brutalist':
      case 'classic':
      case 'awesome':
-      case 'glassy':
+      case 'glossy':
      case 'active':
        assetFolder = themeSelect.value;
        break;
@@ -1259,7 +1259,7 @@ hasOutline: false
      case 'tailspin':
        presetLogoIcons = ['wind', 'feather', 'lemon', 'wind-turbine'];
        break;
-      case 'glassy':
+      case 'glossy':
        presetLogoIcons = ['raindrops', 'citrus-slice', 'lighthouse', 'kiwi-bird'];
        break;
      case 'active':
--- a/docs/docs/native/button.md
+++ b/docs/docs/native/button.md
@@ -20,7 +20,7 @@ snippets:

 ### Variants

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

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

 ### Appearance

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

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

 ### Sizes

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

 ```html {.example}
 <button class="wa-size-s">Small</button>
--- a/docs/docs/native/callout.md
+++ b/docs/docs/native/callout.md
@@ -0,0 +1,117 @@
+---
+title: Callout
+description: Callouts are used to display important messages inline.
+component: callout
+icon: callout
+snippets: '.wa-callout'
+noAlpha: true
+---
+
+```html {.example}
+<article class="wa-callout">
+  This is a callout style, applied to a standard article element.
+</article>
+```
+
+## Examples
+
+### Variants
+
+Use the [variant utility classes](../utilities/color.md) to set the callout's color variant.
+
+```html {.example}
+<article class="wa-callout wa-brand">
+  <strong>This is super informative</strong><br />
+  You can tell by how pretty the callout is.
+</article>
+
+<br />
+
+<article class="wa-callout wa-success">
+  <strong>Your changes have been saved</strong><br />
+  You can safely exit the app now.
+</article>
+
+<br />
+
+<article class="wa-callout wa-neutral">
+  <strong>Your settings have been updated</strong><br />
+  Settings will take effect on next login.
+</article>
+
+<br />
+
+<article class="wa-callout wa-warning">
+  <strong>Your session has ended</strong><br />
+  Please login again to continue.
+</article>
+
+<br />
+
+<article class="wa-callout wa-danger">
+  <strong>Your account has been deleted</strong><br />
+  We're very sorry to see you go!
+</article>
+```
+
+### Appearance
+
+Use the [appearance utility classes](../utilities/appearance.md) to change the callout's visual appearance (the default is `outlined filled`).
+
+```html {.example}
+<article class="wa-callout wa-brand wa-outlined wa-accent">
+  This <strong>accent</strong> callout is also <strong>outlined</strong>
+</article>
+
+<br />
+
+<article class="wa-callout wa-brand wa-accent">
+  This <strong>accent</strong> callout draws attention without an outline
+</article>
+
+<br />
+
+<article class="wa-callout wa-brand wa-outlined wa-filled">
+  This callout is both <strong>filled</strong> and <strong>outlined</strong>
+</article>
+
+<br />
+
+<article class="wa-callout wa-brand wa-filled">
+  This callout is only <strong>filled</strong>
+</article>
+
+<br />
+
+<article class="wa-callout wa-brand wa-outlined">
+  Here's an <strong>outlined</strong> callout
+</article>
+
+<br />
+
+<article class="wa-callout wa-brand wa-plain">
+  No bells and whistles on this <strong>plain</strong> callout
+</article>
+```
+
+### Sizes
+
+Use the [size utility classes](../utilities/size.md) to change a callout's size.
+
+```html {.example}
+<article class="wa-callout wa-brand wa-outlined wa-accent wa-size-l">
+  This is meant to be very emphasized.
+</article>
+
+<br />
+
+<article class="wa-callout">
+  Normal-sized callout.
+</article>
+
+<br />
+
+<article class="wa-callout wa-plain wa-plain wa-size-s">
+  Just a small tip!
+</article>
+```
--- a/docs/docs/native/select.md
+++ b/docs/docs/native/select.md
@@ -33,3 +33,39 @@ Use the [appearance utilities](/docs/utilities/appearance/) to change the select
  </select>
 </label>
 ```
+
+### Grouping options
+
+In [modern browsers](https://caniuse.com/mdn-html_elements_select_hr_in_select), you can use the `<hr>` element as a divider:
+
+```html {.example}
+<select>
+  <small>Section 1</small>
+  <option value="option-1">Option 1</option>
+  <option value="option-2">Option 2</option>
+  <option value="option-3">Option 3</option>
+  <hr />
+  <small>Section 2</small>
+  <option value="option-4">Option 4</option>
+  <option value="option-5">Option 5</option>
+  <option value="option-6">Option 6</option>
+</select>
+```
+
+To provide labels, you can use the `<optgroup>` element (with or without dividers):
+
+```html {.example}
+<select>
+  <optgroup label="Section 1">
+  <option value="option-1">Option 1</option>
+  <option value="option-2">Option 2</option>
+  <option value="option-3">Option 3</option>
+  </optgroup>
+  <optgroup label="Section 2">
+  <option value="option-4">Option 4</option>
+  <option value="option-5">Option 5</option>
+  <hr />
+  <option value="option-6">Option 6</option>
+  </optgroup>
+</select>
+```
--- a/docs/docs/palettes/anodized.md
+++ b/docs/docs/palettes/anodized.md
@@ -0,0 +1,5 @@
+---
+title: Anodized
+isPro: true
+tags: pro
+---
--- a/docs/docs/palettes/bright.md
+++ b/docs/docs/palettes/bright.md
@@ -0,0 +1,3 @@
+---
+title: Bright
+---
--- a/docs/docs/palettes/classic.md
+++ b/docs/docs/palettes/classic.md
@@ -0,0 +1,4 @@
+---
+title: Classic
+description: The original Shoelace color palette.
+---
--- a/docs/docs/palettes/default.md
+++ b/docs/docs/palettes/default.md
@@ -0,0 +1,4 @@
+---
+title: Default
+description: This is the palette used in the default theme.
+---
--- a/docs/docs/palettes/elegant.md
+++ b/docs/docs/palettes/elegant.md
@@ -0,0 +1,5 @@
+---
+title: Elegant
+isPro: true
+tags: pro
+---
--- a/docs/docs/palettes/index.njk
+++ b/docs/docs/palettes/index.njk
@@ -0,0 +1,10 @@
+---
+title: Color Palettes
+description: Palettes define [literal colors](/docs/tokens/colors) that are used in the design system.
+layout: overview
+override:tags: []
+forTag: palette
+categories:
+  other: Free
+  pro: Pro
+---
--- a/docs/docs/palettes/mild.md
+++ b/docs/docs/palettes/mild.md
@@ -0,0 +1,5 @@
+---
+title: Mild
+isPro: true
+tags: pro
+---
--- a/docs/docs/palettes/natural.md
+++ b/docs/docs/palettes/natural.md
@@ -0,0 +1,5 @@
+---
+title: Natural
+isPro: true
+tags: pro
+---
--- a/docs/docs/palettes/palettes.json
+++ b/docs/docs/palettes/palettes.json
@@ -0,0 +1,8 @@
+{
+  "layout": "palette.njk",
+  "tags": ["palettes", "palette"],
+  "eleventyComputed": {
+    "snippet": ".wa-palette-{{ page.fileSlug }}",
+    "icon": "palette"
+  }
+}
--- a/docs/docs/palettes/rudimentary.md
+++ b/docs/docs/palettes/rudimentary.md
@@ -0,0 +1,5 @@
+---
+title: Rudimentary
+isPro: true
+tags: pro
+---
--- a/docs/docs/palettes/vogue.md
+++ b/docs/docs/palettes/vogue.md
@@ -0,0 +1,5 @@
+---
+title: Vogue
+isPro: true
+tags: pro
+---
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -12,6 +12,25 @@ 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
+
+- Added `.wa-callout` utility class
+- Fixed a bug in `<wa-tab-group>` that prevented nested tab groups from working properly
+- Fixed slot names for `show-password-icon` and `hide-password-icon` in `<wa-input>` to more intuitively represent their functions
+
+## 3.0.0-alpha.9
+
+- Added new themes:
+  - Glossy
+  - Matter
+  - Premium
+  - Playful
+- Added docs on themes and palettes
+- Separated colors and typography out from themes so they can be used independently
+- Added test suite to ensure all color palettes provide the color contrast they are supposed to
+- Added `.wa-invert` utility class to invert the current color scheme
+- Added `:state(blank)` to `<wa-input>`, `<wa-textarea>`, and `<wa-select>` to style form inputs differently when empty.
+
 ## 3.0.0-alpha.8

 - Simplified the internal structure and CSS properties of `<wa-card>`, removed `base` part.
@@ -30,7 +49,6 @@ During the alpha period, things might break! We take breaking changes very serio
  - Brutalist
  - Mellow
  - Tailspin
-  - Playful
 - Renamed `--wa-form-control-resting-color` to `--wa-form-control-border-color` for familiarity and accuracy
 - Removed size-based `--wa-form-control-height-*` tokens in favor of `--wa-form-control-height` (see [size utilities](/docs/utilities/size/))
 - Updated the `--wa-border-width-*` and `--wa-border-radius-*` scale for better DX
--- a/docs/docs/themes/active.md
+++ b/docs/docs/themes/active.md
@@ -3,4 +3,5 @@ title: Active
 description: Energetic and tactile, always in motion.
 isPro: true
 tags: pro
+palette: rudimentary
 ---
--- a/docs/docs/themes/awesome.md
+++ b/docs/docs/themes/awesome.md
@@ -2,4 +2,5 @@
 title: Awesome
 description: Punchy and vibrant, the rockstar of themes.
 order: 0.2
+palette: bright
 ---
--- a/docs/docs/themes/brutalist.md
+++ b/docs/docs/themes/brutalist.md
@@ -3,4 +3,5 @@ title: Brutalist
 description: Sharp, square, and unapologetically bold.
 isPro: true
 tags: pro
+palette: default
 ---
--- a/docs/docs/themes/classic.md
+++ b/docs/docs/themes/classic.md
@@ -2,4 +2,5 @@
 title: Classic
 description: Timeless elegance that never goes out of style.
 order: 0.1
+palette: classic
 ---
--- a/docs/docs/themes/creating.md
+++ b/docs/docs/themes/creating.md
@@ -21,7 +21,8 @@ If you're customizing the default light styles, scope your styles to the followi
 :where(:root),
 :host,
 .wa-theme-default,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
  /* your custom styles here */
 }
 ```
@@ -30,6 +31,7 @@ If you're customizing the default dark styles, scope your styles to the followin

 ```css
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
  /* your custom styles here */
 }
--- a/docs/docs/themes/default.md
+++ b/docs/docs/themes/default.md
@@ -2,4 +2,5 @@
 title: Default
 description: Your trusty companion, like a perfectly broken-in pair of jeans.
 order: 0
+palette: default
 ---
--- a/docs/docs/themes/demo.njk
+++ b/docs/docs/themes/demo.njk
@@ -10,12 +10,6 @@ override:tags: []
 eleventyComputed:
  forceTheme: "{{ theme.fileSlug }}"
 ---
-<script>
-  document.getElementById('theme-stylesheet').href = '/dist/styles/themes/{{ theme.fileSlug }}.css';
-</script>
-<script type=module>
-  document.getElementById('theme-stylesheet').href = '/dist/styles/themes/{{ theme.fileSlug }}.css';
-</script>

 <link rel="stylesheet" href="/dist/styles/themes/{{ theme.fileSlug }}.css" />
 <link rel="stylesheet" href="/docs/themes/showcase.css" />
@@ -24,6 +18,7 @@ eleventyComputed:
 <header>
  {% include 'breadcrumbs.njk' %}
  <h1 class="title">{{ theme.data.title }}</h1>
+  <p id="mix_and_match" hidden class="wa-size-s"></p>
  <p>{% include 'status.njk' %}</p>
  <p id="theme-showcase-description">{{ theme.data.description | inlineMarkdown | safe }}</p>
 </header>
@@ -38,3 +33,47 @@ eleventyComputed:
  {{ content | safe }}
 </div>
 </wa-image-comparer>
+
+<script>
+function updateTheme() {
+  let params = new URLSearchParams(window.location.search);
+  let script = document.currentScript;
+  const stylesheetURLs = {
+    colors: id => `/dist/styles/themes/${ id }/color.css`,
+    palette: id => `/dist/styles/color/${ id }.css`,
+    typography: id => `/dist/styles/themes/${ id }/typography.css`
+  };
+  const icons = {
+    colors: 'palette',
+    palette: 'swatchbook',
+    typography: 'font-case'
+  }
+
+  for (let link of document.querySelectorAll('link.mix-and-match')) {
+    link.remove();
+  }
+
+  let msgs = [];
+
+  for (let name in stylesheetURLs) {
+    if (params.get(name)) {
+      let url = stylesheetURLs[name](params.get(name));
+      script.insertAdjacentHTML('afterend', `<link rel="stylesheet" href="${ url }" class="mix-and-match" />`);
+      let docsURL = (name === 'palette' ? '/docs/palettes/' : '/docs/themes/') + params.get(name) + '/';
+      let title = params.get(name).replace(/^[a-z]/g, c => c.toUpperCase());
+      let icon = icons[name];
+      msgs.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> <a href="${ docsURL }">${ title }</a>`);
+    }
+  }
+
+  for (let p of mix_and_match) {
+    p.hidden = msgs.length === 0;
+    if (msgs.length) {
+      let icon =
+      p.innerHTML = `<strong><wa-icon name="merge"></wa-icon> Remixed</strong> ` + msgs.map(msg => `<wa-badge appearance=outlined>
+        ${ msg }</wa-badge>`).join(' ');
+    }
+  }
+}
+updateTheme();
+</script>
--- a/docs/docs/themes/glassy.md
+++ b/docs/docs/themes/glassy.md
@@ -1,7 +0,0 @@
---
-title: Glassy
-description: Smooth, sleek, and reflective.
-isPro: true
-tags: pro
-noAlpha: true
---
--- a/docs/docs/themes/glossy.md
+++ b/docs/docs/themes/glossy.md
@@ -0,0 +1,7 @@
+---
+title: Glossy
+description: Bustling with plenty of luster and shine.
+isPro: true
+tags: pro
+palette: elegant
+---
--- a/docs/docs/themes/index.njk
+++ b/docs/docs/themes/index.njk
@@ -1,6 +1,6 @@
 ---
 title: Themes
-description: Themes are collections of pre-defined CSS custom properties that thread through every Web Awesome component and pattern.
+description: Themes are collections of predefined CSS custom properties that thread through every Web Awesome component and pattern.
 layout: overview
 override:tags: []
 forTag: theme
@@ -14,7 +14,7 @@ categories:

 ## What's a Theme?

-Themes are a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) that cover a range of styles from colors to transitions. We use these custom properties throughout Web Awesome components for a cohesive look and feel. Our [Theming pages](/docs/theming/) document these styles so that you can use them freely throughout your project and customize them as needed.
+A theme is a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), also called "design tokens," that cover a range of styles from colors to transitions. We use these tokens throughout Web Awesome components for a cohesive look and feel. Our [Design Tokens pages](/docs/tokens/) document these styles so that you can use them freely throughout your project and customize them as needed.

 Themes are scoped to unique classes, such as `wa-theme-default` or `wa-theme-classic`.
 Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions.
@@ -22,6 +22,7 @@ Please note that if you import multiple themes, the last one will be the 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.
+You can also use `wa-invert` which behaves like `wa-dark` in light mode, and like `wa-light` in dark mode.
 In pre-made themes, we use a light color scheme by default.


@@ -36,11 +37,13 @@ For example, the default theme is set up like this:
 :where(:root),
 :host,
 .wa-theme-default,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
  /* all CSS custom properties for color, typography, space, etc. */
 }

 .wa-dark,
+.wa-invert,
 :host-context(.wa-dark) {
  /* subset of CSS custom properties for a dark color scheme */
 }
--- a/docs/docs/themes/matter.md
+++ b/docs/docs/themes/matter.md
@@ -0,0 +1,85 @@
+---
+title: Matter
+description: Digital design inspired by the real world.
+isPro: true
+tags: pro
+palette: mild
+---
+
+Set the page theme to "{{ title }}" from the top right to preview the following examples.
+
+## Floating Labels
+
+This theme implements "floating labels" for `wa-input`, `wa-textarea`, `wa-select`,
+which makes labels look like placeholders when the input is empty, does not have an actual placeholder, and is not focused.
+
+```html {.example}
+<wa-input label="What is your name?"></wa-input>
+<br>
+<wa-input label="What is your name?" appearance="filled"></wa-input>
+```
+
+## Ripple Effect
+
+This theme implements a ripple effect for buttons, including native buttons.
+Click on the following buttons to observe it:
+
+```html {.example}
+<wa-button variant="brand">Button</wa-button>
+<button class="wa-brand">Button</button>
+```
+
+
+
+### Customization
+
+You can use several properties to customize the ripple effect.
+
+These properties can be set on any ancestor, including the root element:
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `--wa-ripple-start-radius` | `<length>` | `0.1em` | The starting radius of the ripple effect. |
+| `--wa-ripple-start-opacity` | `<number>` | `0.1` | The starting opacity of the ripple effect. |
+| `--wa-ripple-duration` | `<time>` | `calc(2 * var(--wa-transition-slow))` | The duration of the ripple effect transition. |
+
+Any of these can be used to disable the ripple effect:
+
+```css
+--wa-ripple-start-radius: 0em;
+```
+```css
+--wa-ripple-start-opacity: 0;
+```
+```css
+--wa-ripple-duration: 0s;
+```
+
+These properties would only work on the button itself:
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `--wa-ripple-center-x` | `<percentage>` | `50%` | The x-coordinate of the ripple center point as a percentage of the button width. |
+| `--wa-ripple-center-y` | `<percentage>` | `50%` | The y-coordinate of the ripple center point as a percentage of the button height. |
+
+### Ripple Center Point
+
+By default the ripple effect starts from the center of the button.
+If you want it to start from the position the button was clicked, you can use this JS snippet:
+
+```js
+document.addEventListener("mousedown", evt => {
+	let target = evt.target;
+
+	if (!target.matches?.('wa-button, button, .wa-button')) {
+		return;
+	}
+
+	let rect = target.getBoundingClientRect();
+	let x = (evt.clientX - rect.left) / rect.width;
+	let y = (evt.clientY - rect.top) / rect.height;
+
+	target.style.setProperty("--mouse-local-x", x);
+	target.style.setProperty("--mouse-local-y", y);
+});
+```
--- a/docs/docs/themes/mellow.md
+++ b/docs/docs/themes/mellow.md
@@ -3,4 +3,5 @@ title: Mellow
 description: Soft and soothing, like a lazy Sunday morning.
 isPro: true
 tags: pro
+palette: natural
 ---
--- a/docs/docs/themes/playful.md
+++ b/docs/docs/themes/playful.md
@@ -1,7 +1,7 @@
 ---
 title: Playful
-description: Fun, colorful, and full of personality.
+description: Cheerful and engaging, like a playground on screen.
 isPro: true
 tags: pro
-noAlpha: true
+palette: rudimentary
 ---
--- a/docs/docs/themes/premium.md
+++ b/docs/docs/themes/premium.md
@@ -3,5 +3,5 @@ title: Premium
 description: The ultimate in sophistication and style.
 isPro: true
 tags: pro
-noAlpha: true
+palette: anodized
 ---
--- a/docs/docs/themes/showcase.css
+++ b/docs/docs/themes/showcase.css
@@ -9,7 +9,17 @@ body,
  overflow: hidden;
 }

+#mix_and_match {
+  font-weight: var(--wa-font-weight-semibold);
+  color: var(--wa-color-text-quiet);
+
+  wa-icon {
+    vertical-align: middle;
+  }
+}
+
 .theme-showcase {
+  isolation: isolate;
  background-color: var(--wa-color-surface-lowered);
  border-radius: var(--wa-border-radius-l);
  padding: var(--wa-space-xl);
--- a/docs/docs/themes/tailspin.md
+++ b/docs/docs/themes/tailspin.md
@@ -3,4 +3,5 @@ title: Tailspin
 description: Like a bird in flight, guiding you from there to here.
 isPro: true
 tags: pro
+palette: vogue
 ---
--- a/docs/docs/theming/color.md
+++ b/docs/docs/theming/color.md
@@ -1,599 +0,0 @@
---
-title: Color
-description: Ensure consistent use of color and readable contrast with Web Awesome's color properties.
---
-
-<style>
-  td { vertical-align: middle; }
-
-  .color-name {
-    font-weight: var(--wa-font-weight-semibold);
-    margin-block-end: var(--wa-space-2xs);
-  }
-  ul.color-group {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .color-group {
-    align-items: start;
-    display: flex;
-    flex-wrap: nowrap;
-    gap: 0.25em;
-  }
-  .color-group + * {
-    margin-block-start: var(--wa-space-xl);
-  }
-  .color-preview {
-    flex: 1 1 auto;
-  }
-  .swatch {
-    border-color: transparent;
-  }
-  .color-mix-example {
-    background-image:
-      linear-gradient(to right,
-      color-mix(in oklab, transparent, var(--mix-color)) 25%,
-      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 25%,
-      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 75%,
-      var(--wa-color-brand-fill-loud) 75%,
-      var(--wa-color-brand-fill-loud))
-    ;
-    border: none;
-    color: var(--wa-color-brand-on-loud);
-    text-align: center;
-  }
-</style>
-
-Web Awesome's color system is made up of CSS custom properties to help with consistent color use throughout your project.
-
-Color is organized by three main categories:
-
- [Literal colors](/#literal-colors) that give familiar names to your starting color palette
- [Foundational colors](/#foundational-colors) that lay the groundwork for your theme
- [Semantic colors](/#semantic-colors) that draw attention and convey meaning
-
-
-## Literal Colors
-
-Literal colors are the lowest level color properties in your theme. Each color is identified by a name, like red or gray, and a number that roughly corresponds to the color's perceived lightness. On this scale, 100 is equal to pure white and 0 is equal to pure black.
-
-Lightness values on this scale have a strong correlation to [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance), which is used to calculate color contrast. To meet [WCAG 2.1 success criteria for minimum or enhanced contrast](https://www.w3.org/TR/WCAG21/#contrast-minimum), even across hues, calculate the difference between the lightness values of any two colors:
-
- A difference of 40 ensures a minimum 3:1 contrast ratio, suitable for large text and icons (AA)
- A difference of 50 ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA)
- A difference of 60 ensures a minimum 7:1 contrast ratio, suitable for all text (AAA)
-
-Web Awesome defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
-
-<div class="color-name">Red</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Yellow</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Green</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Teal</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Blue</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Indigo</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Violet</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Gray</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-## Foundational Colors
-
-Foundational colors lay the groundwork for the content and structure of your project. These colors are named according to their role in your theme.
-
-### Surfaces
-
-Surfaces are background layers that other content rests on. Surface colors help convey hierarchy through a sense of elevation, where `--wa-color-surface-raised` is the closest to the user (e.g., dialogs and popup menus) and `--wa-color-surface-lowered` is the farthest away (e.g., wells).
-
-| Custom Property               | Preview                                                                                                                         |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| `--wa-color-surface-raised`   | <div class="swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-s)"></div>              |
-| `--wa-color-surface-default`  | <div class="swatch" style="background-color: var(--wa-color-surface-default)"></div>                                            |
-| `--wa-color-surface-lowered`  | <div class="swatch" style="background-color: var(--wa-color-surface-lowered); box-shadow: inset var(--wa-shadow-s)"></div>      |
-| `--wa-color-surface-border`   | <div class="swatch" style="border-color: var(--wa-color-surface-border)"></div>                                                 |
-
-### Text
-
-Text colors are used for standard text elements. We recommend a minimum 4.5:1 contrast ratio between text colors and surface colors.
-
-| Custom Property          | Preview                                                    |
-| ------------------------ | ---------------------------------------------------------- |
-| `--wa-color-text-normal` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-normal); display: inline-block;">AaBb</div> |
-| `--wa-color-text-quiet`  | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-quiet); display: inline-block;">AaBb</div>  |
-| `--wa-color-text-link`   | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-link); display: inline-block;">AaBb</div>   |
-
-### Overlays
-
-Overlays provide a backdrop to isolate content, often allowing background context to show through.
-
-| Custom Property             | Preview                                                                             |
-| --------------------------- | ----------------------------------------------------------------------------------- |
-| `--wa-color-overlay-modal`  | <div class="swatch" style="background-color: var(--wa-color-overlay-modal)"></div>  |
-| `--wa-color-overlay-inline` | <div class="swatch" style="background-color: var(--wa-color-overlay-inline)"></div> |
-
-### Shadow
-
-Web Awesome uses a single color for all shadows. This is used alongside other [shadow properties](/docs/theming/shadows) to construct your theme's shadows.
-
-| Custom Property     | Preview                                                                     |
-| ------------------- | --------------------------------------------------------------------------- |
-| `--wa-color-shadow` | <div class="swatch" style="background-color: var(--wa-color-shadow)"></div> |
-
-### Interactions
-
-#### Focus
-
-Web Awesome uses a single focus color for predictable keyboard navigation. This is used alongside other [focus properties](/docs/theming/focus) to construct `--wa-focus-ring`. We recommend a minimum 3:1 contrast ratio against surface colors and background colors wherever possible.
-
-| Custom Property    | Preview                                                                                                                 |
-| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
-| `--wa-color-focus` | <div class="swatch" value="--wa-color-focus" style="outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)"></div> |
-
-#### Hover and Active
-
-Web Awesome leverages `color-mix()` to achieve consistent hover and active states across components without the need for untold numbers of handpicked colors. Through `color-mix()`, these custom properties contextually generate hover and active colors based on the color of the component.
-
-| Custom Property         | Preview                                                                                                          |
-| ----------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `--wa-color-mix-hover`  | <div class="swatch color-mix-example" value="--wa-color-mix-hover" style="--mix-color: var(--wa-color-mix-hover)"><small>mixed</small></div>  |
-| `--wa-color-mix-active` | <div class="swatch color-mix-example" value="--wa-color-mix-active" style="--mix-color: var(--wa-color-mix-active)"><small>mixed</small></div> |
-
-
-## Semantic Colors
-
-Semantic colors reinforce a specific message, intended usage, or expected results through familiar, meaningful hues. Each color is identified by its semantic group, role, and attention using the format `--wa-color-{group}-{role}-{attention}`. There are five groups of semantic colors:
- **Brand** to emphasize your brand color
- **Success** for validity or confirmation
- **Neutral** for ordinary or inactive content
- **Warning** for caution or uncertainty
- **Danger** for errors or risk
-
-Each group defines colors for specific roles so that colors can be easily assembled with predictable results and readable contrast. There are three roles:
- **Fill** for background colors or areas larger than a few pixels
- **Border** for borders, dividers, and other stroke-width elements
- **On** for content displayed on a fill (e.g., pair `--wa-color-danger-on-loud` with `--wa-color-danger-fill-loud`)
-
-Finally, each color is named according to how much attention it draws. Here, we use noise as an analogy: a loud noise draws more attention than a quiet one. There are three levels of attention:
- **Quiet** draws the least attention
- **Normal** draws some attention
- **Loud** draws the most attention
-
-| Custom Property              |  <code>brand</code> |  <code>success</code> |  <code>neutral</code> |  <code>warning</code> | <code>danger</code> |
-| ---------------------------- | ------------------- | --------------------- | --------------------- | --------------------- | ------------------- |
-| `--wa-color-*-fill-quiet`    | <div class="swatch" style="background-color: var(--wa-color-brand-fill-quiet)"></div> |  <div class="swatch" style="background-color: var(--wa-color-success-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-quiet)"></div> |
-| `--wa-color-*-fill-normal`   | <div class="swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-normal)"></div> |<div class="swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div> |
-| `--wa-color-*-fill-loud`     | <div class="swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div> |  <div class="swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div> |  <div class="swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div> |
-| `--wa-color-*-border-quiet`  | <div class="swatch" value="--wa-color-brand-border-quiet" style="border-color: var(--wa-color-brand-border-quiet)"></div> | <div class="swatch" value="--wa-color-success-border-quiet" style="border-color: var(--wa-color-success-border-quiet)"></div> | <div class="swatch" value="--wa-color-success-border-quiet" style="border-color: var(--wa-color-neutral-border-quiet)"></div> | <div class="swatch" value="--wa-color-warning-border-quiet" style="border-color: var(--wa-color-warning-border-quiet)"></div> | <div class="swatch" value="--wa-color-danger-border-quiet" style="border-color: var(--wa-color-danger-border-quiet)"></div> |
-| `--wa-color-*-border-normal`  | <div class="swatch" value="--wa-color-brand-border-normal" style="border-color: var(--wa-color-brand-border-normal)"></div> | <div class="swatch" value="--wa-color-success-border-normal" style="border-color: var(--wa-color-success-border-normal)"></div> | <div class="swatch" value="--wa-color-success-border-normal" style="border-color: var(--wa-color-neutral-border-normal)"></div> | <div class="swatch" value="--wa-color-warning-border-normal" style="border-color: var(--wa-color-warning-border-normal)"></div> | <div class="swatch" value="--wa-color-danger-border-normal" style="border-color: var(--wa-color-danger-border-normal)"></div> |
-| `--wa-color-*-border-loud`  | <div class="swatch" value="--wa-color-brand-border-loud" style="border-color: var(--wa-color-brand-border-loud)"></div> | <div class="swatch" value="--wa-color-success-border-loud" style="border-color: var(--wa-color-success-border-loud)"></div> | <div class="swatch" value="--wa-color-success-border-loud" style="border-color: var(--wa-color-neutral-border-loud)"></div> | <div class="swatch" value="--wa-color-warning-border-loud" style="border-color: var(--wa-color-warning-border-loud)"></div> | <div class="swatch" value="--wa-color-danger-border-loud" style="border-color: var(--wa-color-danger-border-loud)"></div> |
-| `--wa-color-*-on-quiet`      | <div class="swatch" value="--wa-color-brand-on-quiet" style="background-color: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-success-on-quiet" style="background-color: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-neutral-on-quiet" style="background-color: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-quiet" style="background-color: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-danger-on-quiet" style="background-color: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet)">AaBb</div> |
-| `--wa-color-*-on-normal`     | <div class="swatch" value="--wa-color-brand-on-normal" style="background-color: var(--wa-color-brand-fill-normal); color: var(--wa-color-brand-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-success-on-normal" style="background-color: var(--wa-color-success-fill-normal); color: var(--wa-color-success-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-neutral-on-normal" style="background-color: var(--wa-color-neutral-fill-normal); color: var(--wa-color-neutral-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-normal" style="background-color: var(--wa-color-warning-fill-normal); color: var(--wa-color-warning-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-normal" style="background-color: var(--wa-color-danger-fill-normal); color: var(--wa-color-danger-on-normal)">AaBb</div> |
-| `--wa-color-*-on-loud`       | <div class="swatch" value="--wa-color-brand-on-loud" style="background-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-success-on-loud" style="background-color: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-neutral-on-loud" style="background-color: var(--wa-color-neutral-fill-loud); color: var(--wa-color-neutral-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-loud" style="background-color: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-danger-on-loud" style="background-color: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud)">AaBb</div> |
-
-<style>
-.swatch {
-  position: relative;
-}
-.swatch wa-copy-button {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.swatch wa-copy-button::part(button) {
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-
-.swatch wa-copy-button {
-  --background-color-hover: transparent;
-  font-family: var(--wa-font-family-code);
-}
-
-.swatch wa-copy-button::part(button):hover {
-  cursor: copy;
-}
-
-.swatch wa-copy-button::part(copy-icon),
-.swatch wa-copy-button::part(success-icon),
-.swatch wa-copy-button::part(error-icon) {
-  opacity: 0 !important;
-}
-</style>
-
-<script type="module">
-  const computedStyle = getComputedStyle(document.body)
-  document.querySelectorAll(".swatch").forEach((swatch) => {
-    let varName = swatch.getAttribute("value")
-
-    if (!varName) {
-      const bgColor = swatch.style.backgroundColor
-      varName = bgColor.replace(/^var\((--.*)\)$/, "$1")
-    }
-
-    const copyButton = Object.assign(document.createElement("wa-copy-button"), {
-      value: varName,
-      copyLabel: varName,
-      errorLabel: "Whoops, your browser doesn't support this!",
-    })
-
-    swatch.appendChild(copyButton)
-  })
-</script>
--- a/docs/docs/theming/index.njk
+++ b/docs/docs/theming/index.njk
@@ -1,6 +0,0 @@
---
-title: Theming
-description: A theme is a collection of pre-defined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel.
-layout: overview
-override:tags: []
---
--- a/docs/docs/theming/theming.json
+++ b/docs/docs/theming/theming.json
@@ -1,7 +0,0 @@
-{
-  "layout": "page-outline.njk",
-  "tags": ["theming"],
-  "eleventyComputed": {
-    "icon": "theming/{{ page.fileSlug }}"
-  }
-}
--- a/docs/docs/theming/borders.md
+++ b/docs/docs/theming/borders.md
@@ -21,7 +21,7 @@ Border widths use `rem` units in order to scale proportionately with the root fo
 | `--wa-border-width-m` | `0.125rem` <small>(2px)</small>  | <div class="swatch" style="border-width: var(--wa-border-width-m)"></div> |
 | `--wa-border-width-l` | `0.1875rem` <small>(3px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-l)"></div> |

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

 ## Radius
@@ -44,5 +44,5 @@ Size-based border radius properties allow you to customize the overall roundness
 | `--wa-border-radius-m`  | `0.375rem` <small>(6px)</small>  | <div class="swatch" style="border-radius: var(--wa-border-radius-m)"></div> |
 | `--wa-border-radius-l`  | `0.75rem` <small>(12px)</small>  | <div class="swatch" style="border-radius: var(--wa-border-radius-l)"></div> |

-To scale all border radii at once, you can use the  `--wa-border-radius-scale` property which specifies a multiplier on `border-radius`. 
-Values < 1 make corners sharper, while values > 1 make them rounder.
+To scale all border radii at once, you can use the  `--wa-border-radius-scale` property which specifies a multiplier on `border-radius`.
+Values < 1 make corners sharper, while values > 1 make them rounder.
--- a/docs/docs/tokens/color.md
+++ b/docs/docs/tokens/color.md
@@ -0,0 +1,191 @@
+---
+title: Color
+description: Ensure consistent use of color and readable contrast with Web Awesome's color properties.
+---
+
+<style>
+  td { vertical-align: middle; }
+
+  .color-name {
+    font-weight: var(--wa-font-weight-semibold);
+    margin-block-end: var(--wa-space-2xs);
+  }
+  ul.color-group {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .color-group {
+    align-items: start;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 0.25em;
+  }
+  .color-group + * {
+    margin-block-start: var(--wa-space-xl);
+  }
+  .color-preview {
+    flex: 1 1 auto;
+  }
+  .swatch {
+    border-color: transparent;
+  }
+  .color-mix-example {
+    background-image:
+      linear-gradient(to right,
+      color-mix(in oklab, transparent, var(--mix-color)) 25%,
+      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 25%,
+      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 75%,
+      var(--wa-color-brand-fill-loud) 75%,
+      var(--wa-color-brand-fill-loud))
+    ;
+    border: none;
+    color: var(--wa-color-brand-on-loud);
+    text-align: center;
+  }
+</style>
+
+Web Awesome's color system is made up of CSS custom properties to help with consistent color use throughout your project.
+
+Color is organized by three main categories:
+
+- [Literal colors](/#literal-colors) that give familiar names to your starting [color palette](/docs/palettes/)
+- [Foundational colors](/#foundational-colors) that lay the groundwork for your theme
+- [Semantic colors](/#semantic-colors) that draw attention and convey meaning
+
+
+## Literal Colors
+
+Literal colors are defined by your theme's [color palette](/docs/palettes/) and are the lowest level color tokens in your theme. Each token is identified by a name, like red or gray, and a number based on the color's lightness. On this scale, 100 is equal to pure white and 0 is equal to pure black.
+
+You can use these numbers to ensure accessible color contrast per [WCAG 2.1 success criteria](https://www.w3.org/TR/WCAG21/#contrast-minimum):
+
+- A difference of 40 ensures a minimum 3:1 contrast ratio, suitable for large text and icons (AA)
+- A difference of 50 ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA)
+- A difference of 60 ensures a minimum 7:1 contrast ratio, suitable for all text (AAA)
+
+Each Web Awesome palette defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
+
+{% for hue in ["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"] -%}
+<div class="color-name">{{ hue | capitalize }}</div>
+<ul class="color-group">
+  {% for tint in ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] -%}
+    <li class="color-preview">
+      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
+        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
+      </div>
+      <small>{{ tint }}</small>
+    </li>
+  {%- endfor %}
+</ul>
+{%- endfor %}
+
+## Foundational Colors
+
+Foundational colors lay the groundwork for the content and structure of your project. These colors are named according to their role in your theme.
+
+### Surfaces
+
+Surfaces are background layers that other content rests on. Surface colors help convey hierarchy through a sense of elevation, where `--wa-color-surface-raised` is the closest to the user (e.g., dialogs and popup menus) and `--wa-color-surface-lowered` is the farthest away (e.g., wells).
+
+| Custom Property               | Preview                                                                                                                         |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `--wa-color-surface-raised`   | <div class="swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-s)"></div>              |
+| `--wa-color-surface-default`  | <div class="swatch" style="background-color: var(--wa-color-surface-default)"></div>                                            |
+| `--wa-color-surface-lowered`  | <div class="swatch" style="background-color: var(--wa-color-surface-lowered); box-shadow: inset var(--wa-shadow-s)"></div>      |
+| `--wa-color-surface-border`   | <div class="swatch" style="border-color: var(--wa-color-surface-border)"></div>                                                 |
+
+### Text
+
+Text colors are used for standard text elements. We recommend a minimum 4.5:1 contrast ratio between text colors and surface colors.
+
+| Custom Property          | Preview                                                    |
+| ------------------------ | ---------------------------------------------------------- |
+| `--wa-color-text-normal` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-normal); display: inline-block;">AaBb</div> |
+| `--wa-color-text-quiet`  | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-quiet); display: inline-block;">AaBb</div>  |
+| `--wa-color-text-link`   | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-link); display: inline-block;">AaBb</div>   |
+
+### Overlays
+
+Overlays provide a backdrop to isolate content, often allowing background context to show through.
+
+| Custom Property             | Preview                                                                             |
+| --------------------------- | ----------------------------------------------------------------------------------- |
+| `--wa-color-overlay-modal`  | <div class="swatch" style="background-color: var(--wa-color-overlay-modal)"></div>  |
+| `--wa-color-overlay-inline` | <div class="swatch" style="background-color: var(--wa-color-overlay-inline)"></div> |
+
+### Shadow
+
+Web Awesome uses a single color for all shadows.
+This is used alongside other [shadow tokens](/docs/tokens/shadows) to construct your theme's shadows.
+
+| Custom Property     | Preview                                                                     |
+| ------------------- | --------------------------------------------------------------------------- |
+| `--wa-color-shadow` | <div class="swatch" style="background-color: var(--wa-color-shadow)"></div> |
+
+### Interactions
+
+#### Focus
+
+Web Awesome uses a single focus color for predictable keyboard navigation. This is used alongside other [focus tokens](/docs/tokens/focus) to construct `--wa-focus-ring`. We recommend a minimum 3:1 contrast ratio against surface colors and background colors wherever possible.
+
+| Custom Property    | Preview                                                                                                                 |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
+| `--wa-color-focus` | <div class="swatch" value="--wa-color-focus" style="outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)"></div> |
+
+#### Hover and Active
+
+Web Awesome leverages `color-mix()` to achieve consistent hover and active states across components without the need for untold numbers of handpicked colors. Through `color-mix()`, these custom properties contextually generate hover and active colors based on the color of the component.
+
+| Custom Property         | Preview                                                                                                          |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `--wa-color-mix-hover`  | <div class="swatch color-mix-example" value="--wa-color-mix-hover" style="--mix-color: var(--wa-color-mix-hover)"><small>mixed</small></div>  |
+| `--wa-color-mix-active` | <div class="swatch color-mix-example" value="--wa-color-mix-active" style="--mix-color: var(--wa-color-mix-active)"><small>mixed</small></div> |
+
+
+## Semantic Colors
+
+Semantic colors reinforce a specific message, intended usage, or expected results through familiar, meaningful hues. Each color is identified by its semantic group, role, and attention using the format `--wa-color-{group}-{role}-{attention}`. There are five groups of semantic colors:
+- **Brand** to emphasize your brand color
+- **Success** for validity or confirmation
+- **Neutral** for ordinary or inactive content
+- **Warning** for caution or uncertainty
+- **Danger** for errors or risk
+
+Each group defines colors for specific roles so that colors can be easily assembled with predictable results and readable contrast. There are three roles:
+- **Fill** for background colors or areas larger than a few pixels
+- **Border** for borders, dividers, and other stroke-width elements
+- **On** for content displayed on a fill (e.g., pair `--wa-color-danger-on-loud` with `--wa-color-danger-fill-loud`)
+
+Finally, each color is named according to how much attention it draws. Here, we use noise as an analogy: a loud noise draws more attention than a quiet one. There are three levels of attention:
+- **Quiet** draws the least attention
+- **Normal** draws some attention
+- **Loud** draws the most attention
+
+{% set variants = ['brand', 'success', 'neutral', 'warning', 'danger'] %}
+<table>
+  <thead>
+    <tr>
+      <th>Custom Property</th>
+      {% for variant in variants -%}
+        <th><code>{{ variant }}</code></th>
+      {%- endfor %}
+    </tr>
+  </thead>
+  {% for type in ['fill', 'border', 'on'] -%}
+    {% for attention in ['quiet', 'normal', 'loud'] -%}
+      <tr>
+        <td><code>--wa-color-*-{{ type }}-{{ attention }}</code></td>
+        {% for variant in variants -%}
+          <td>
+            {%- if type == 'border' -%}
+            <div class="swatch" style="border-color: var(--wa-color-{{ variant }}-{{ type }}-{{ attention }})"></div>
+            {%- else -%}
+            <div class="swatch" style="background-color: var(--wa-color-{{ variant }}-fill-{{ attention }}); color: var(--wa-color-{{ variant }}-on-{{ attention }})">{{ 'AaBb' if type == 'on' }}</div>
+            {%- endif %}
+          </td>
+        {%- endfor %}
+      </tr>
+    {%- endfor %}
+    {%- endfor %}
+</table>
--- a/docs/docs/theming/component-groups.md
+++ b/docs/docs/theming/component-groups.md
--- a/docs/docs/theming/focus.md
+++ b/docs/docs/theming/focus.md
@@ -3,7 +3,7 @@ title: Focus
 description: Configure recognizable focus states with Web Awesome's focus properties.
 ---

-A consistent focus ring helps with predictable keyboard navigation. Together with [`--wa-color-focus`](/docs/theming/color/#interactions), these custom properties create a uniform focus state for Web Awesome components.
+A consistent focus ring helps with predictable keyboard navigation. Together with [`--wa-color-focus`](/docs/tokens/color/#interactions), these tokens create a uniform focus state for Web Awesome components.


 | Custom Property          |  Default Value                                                                |
--- a/docs/docs/tokens/index.njk
+++ b/docs/docs/tokens/index.njk
@@ -0,0 +1,6 @@
+---
+title: Design Tokens
+description: A theme is a collection of predefined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel.
+layout: overview
+override:tags: []
+---
--- a/docs/docs/theming/shadows.md
+++ b/docs/docs/theming/shadows.md
@@ -3,7 +3,7 @@ title: Shadows
 description: Elevate your components with Web Awesome's shadow properties.
 ---

-Shadows indicate elevation and, often, interactivity. Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with [`--wa-color-shadow`](/docs/theming/color/#shadow), these custom properties create realistic shadows for Web Awesome components.
+Shadows indicate elevation and, often, interactivity. Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with [`--wa-color-shadow`](/docs/tokens/color/#shadow), these tokens create realistic shadows for Web Awesome components.

 Shadows are constructed using corresponding offset-x, offset-y, blur, and spread properties, detailed in the sections below. In Web Awesome, shadows use a size-based scale where larger shadows have greater offset and blur values to indicate greater distance from the surface below.

--- a/docs/docs/theming/space.md
+++ b/docs/docs/theming/space.md
--- a/docs/docs/tokens/tokens.json
+++ b/docs/docs/tokens/tokens.json
@@ -0,0 +1,7 @@
+{
+  "layout": "page-outline.njk",
+  "tags": ["tokens"],
+  "eleventyComputed": {
+    "icon": "tokens/{{ page.fileSlug }}"
+  }
+}
--- a/docs/docs/theming/transitions.md
+++ b/docs/docs/theming/transitions.md
--- a/docs/docs/theming/typography.md
+++ b/docs/docs/theming/typography.md
@@ -69,7 +69,7 @@ Line heights control the distance between lines of text and are unitless to scal

 ## Links

-Together with [`--wa-color-link`](/docs/theming/color/#text), these custom properties add text decoration to `<a>` elements to signal their role as hyperlinks.
+Together with [`--wa-color-link`](/docs/tokens/color/#text), these tokens add text decoration to `<a>` elements to signal their role as hyperlinks.

 | Custom Property                | Default Value                                                                      |
 | ------------------------------ | ---------------------------------------------------------------------------------- |
--- a/docs/docs/utilities/color.md
+++ b/docs/docs/utilities/color.md
@@ -1,7 +1,7 @@
 ---
 title: Color Variants
 description: Color utilities allow you to apply the brand, neutral, success, warning, and danger colors from your theme to any element.
-icon: theming/color
+icon: tokens/color
 snippets:
  - .wa-brand
  - .wa-neutral
@@ -27,7 +27,7 @@ You can create the same effect on any element by using the color variant utility
 - `.wa-danger`

 Using these classes is a two-way handshake:
-they do not directly apply styles, but define generic color tokens modeled after our [Semantic Colors](/docs/theming/color/#semantic-colors) but *without* the group identifier (`neutral`, `brand`, `success`, `warning`, `danger`), defaulting to `neutral`.
+they do not directly apply styles, but define generic color tokens modeled after our [Semantic Colors](/docs/tokens/color/#semantic-colors) but *without* the group identifier (`neutral`, `brand`, `success`, `warning`, `danger`), defaulting to `neutral`.
 This means that styles can be written to respond to variants by using e.g. `--wa-color-fill-loud` instead of e.g. `--wa-color-brand-fill-loud`,
 and all of our [native styles](/docs/native/) do so (where it made sense).

--- a/docs/docs/utilities/gap.md
+++ b/docs/docs/utilities/gap.md
@@ -16,7 +16,7 @@ tags: ["utilities", "layout"]
 Web Awesome includes classes to set the `gap` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/layout/cluster) and [stack](/docs/layout/stack), to change the space between items.
 Or even by themselves — all gap properties also set `display: flex` with a specificity of 0 so that it can be trivially overridden.

-Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/theming/space) properties in your theme.
+Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/tokens/space) tokens in your theme.

 | Class Name   | `gap` Value      | Preview                                                                                                     |
 | ------------ | ---------------- | ----------------------------------------------------------------------------------------------------------- |
--- a/docs/docs/utilities/rounding.md
+++ b/docs/docs/utilities/rounding.md
@@ -14,7 +14,7 @@ status: wip

 Web Awesome includes classes to set an element's `border-radius` property. They can be used alongside Web Awesome layout utilities, like [frame](/docs/layout/frame), to round all corners of an element.

-Each class corresponds to one of the [`--wa-border-radius-*`](/docs/theming/borders/#radius) properties in your theme.
+Each class corresponds to one of the [`--wa-border-radius-*`](/docs/tokens/borders/#radius) tokens in your theme.

 | Class Name                | `border-radius` Value       | Preview                                                                                 |
 | ------------------------- | --------------------------- | --------------------------------------------------------------------------------------- |
--- a/docs/docs/utilities/size.md
+++ b/docs/docs/utilities/size.md
@@ -1,7 +1,7 @@
 ---
 title: Size
 description: Size utilities give elements one of three preset sizes (small, medium, or large).
-icon: theming/space
+icon: tokens/space
 status: experimental
 snippets:
  - .wa-size-s
@@ -22,7 +22,7 @@ You can create the same effect on any element by using the size utility classes:
 - `.wa-size-l`

 Using these classes does two things:
- It sets `font-size` to one of the [size tokens](/docs/theming/typography/#font-size).
+- It sets `font-size` to one of the [size tokens](/docs/tokens/typography/#font-size).
 You can use CSS `em` units to reference that size in other properties.
 - It calculates `--wa-form-control-height` based on the applied size, supporting consistent heights for elements like inputs and buttons.
 - It aliases a bunch of other properties that CSS can use:
--- a/docs/docs/utilities/text.md
+++ b/docs/docs/utilities/text.md
@@ -13,7 +13,7 @@ Use body classes to style the main content of your pages. Each `wa-body-*` class
 - `font-weight: var(--wa-font-weight-body);`
 - `line-height: var(--wa-line-height-normal);`

-Additionally, each class specifies a `font-size` that corresponds to a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme.
+Additionally, each class specifies a `font-size` that corresponds to a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme.

 | Class Name         | `font-size` Value    |  Preview                                                                  |
 | ------------------ | -------------------- | ------------------------------------------------------------------------- |
@@ -31,7 +31,7 @@ Use heading classes to style section titles and headings in your content. Each `
 - `line-height: var(--wa-line-height-condensed);`
 - `text-wrap: balance;`

-Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme. Heading classes are one font size larger than the corresponding `wa-body-*` class.
+Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme. Heading classes are one font size larger than the corresponding `wa-body-*` class.

 | Class Name       | `font-size` Value    | Preview                                               |
 | ---------------- | -------------------- | ----------------------------------------------------- |
@@ -51,7 +51,7 @@ Use caption classes to style descriptions or auxiliary text in your content. Eac
 - `font-weight: var(--wa-font-weight-body);`
 - `line-height: var(--wa-line-height-condensed);`

-Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme. Caption classes are one font size smaller than the corresponding `wa-body-*` class.
+Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme. Caption classes are one font size smaller than the corresponding `wa-body-*` class.

 | Class Name       | `font-size` Value    | Preview                                                                        |
 | ---------------- | -------------------- | ------------------------------------------------------------------------------ |
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@shoelace-style/webawesome",
-  "version": "3.0.0-alpha.8",
+  "version": "3.0.0-alpha.9",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@shoelace-style/webawesome",
-      "version": "3.0.0-alpha.8",
+      "version": "3.0.0-alpha.9",
      "license": "MIT",
      "dependencies": {
        "@ctrl/tinycolor": "^4.1.0",
@@ -34,6 +34,7 @@
        "chalk": "^5.3.0",
        "change-case": "^4.1.2",
        "chokidar": "^3.5.3",
+        "colorjs.io": "^0.6.0-alpha.1",
        "command-line-args": "^5.2.1",
        "comment-parser": "^1.4.1",
        "cspell": "^6.18.1",
@@ -5078,6 +5079,17 @@
      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
      "dev": true
    },
+    "node_modules/colorjs.io": {
+      "version": "0.6.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.6.0-alpha.1.tgz",
+      "integrity": "sha512-c/h/8uAmPydQcriRdX8UTAFHj6SpSHFHBA8LvMikvYWAVApPTwg/pyOXNsGmaCBd6L/EeDlRHSNhTtnIFp/qsg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/color"
+      }
+    },
    "node_modules/command-line-args": {
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/command-line-args/-/command-line-args-5.2.1.tgz",
--- 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.8",
+  "version": "3.0.0-alpha.9",
  "homepage": "https://webawesome.com/",
  "author": "Web Awesome",
  "license": "MIT",
@@ -54,6 +54,7 @@
    "create": "plop --plopfile scripts/plop/plopfile.js",
    "test": "web-test-runner --group default",
    "test:component": "web-test-runner -- --watch --group",
+    "test:contrast": "cd src/styles/color && node contrast.test.js",
    "test:watch": "web-test-runner --watch --group default",
    "prettier": "prettier --check --log-level=warn .",
    "prettier:fix": "prettier --write --log-level=warn .",
@@ -91,6 +92,7 @@
    "chalk": "^5.3.0",
    "change-case": "^4.1.2",
    "chokidar": "^3.5.3",
+    "colorjs.io": "^0.6.0-alpha.1",
    "command-line-args": "^5.2.1",
    "comment-parser": "^1.4.1",
    "cspell": "^6.18.1",
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -126,7 +126,11 @@ async function generateStyles() {
        file.includes('themes/default') ||
        file.includes('themes/awesome') ||
        file.includes('themes/active') ||
+        file.includes('themes/glossy') ||
+        file.includes('themes/matter') ||
        file.includes('themes/mellow') ||
+        file.includes('themes/playful') ||
+        file.includes('themes/premium') ||
        file.includes('themes/tailspin') ||
        file.includes('themes/brutalist')
      ) {
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -69,10 +69,12 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
  @property() title = ''; // make reactive to pass through

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

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

  /** The button's size. */
  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
--- a/src/components/callout/callout.css
+++ b/src/components/callout/callout.css
@@ -1,22 +1,8 @@
 :host {
  --icon-color: currentColor;
  --icon-size: var(--wa-font-size-l);
-  --spacing: var(--wa-space-m);

-  position: relative;
  display: flex;
-  align-items: stretch;
-  border-radius: var(--wa-panel-border-radius);
-  background-color: var(--background-color, var(--wa-color-fill-quiet));
-  border-color: var(--border-color, transparent);
-  border-style: var(--wa-panel-border-style);
-  border-width: var(--wa-panel-border-width);
-  color: var(--text-color, var(--wa-color-on-normal));
-  padding: var(--spacing);
-}
-
-:host([appearance~='accent']) {
-  font-weight: var(--wa-font-weight-semibold);
 }

 [part~='icon'] {
--- a/src/components/callout/callout.ts
+++ b/src/components/callout/callout.ts
@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import nativeStyles from '../../styles/native/callout.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
@@ -24,10 +25,16 @@ import styles from './callout.css';
 */
@customElement('wa-callout')
 export default class WaCallout extends WebAwesomeElement {
-  static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, styles];
+  static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];

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

  /** The callout's visual appearance. */
  @property({ reflect: true }) appearance:
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -1,29 +1,35 @@
 :host {
  --spacing: var(--wa-space-xl);
+  --border-width: var(--wa-panel-border-width);
+  --border-radius: var(--wa-panel-border-radius);
+
+  --inner-border-radius: calc(var(--border-radius) - var(--border-width));

  display: flex;
  flex-direction: column;
  background-color: var(--wa-color-surface-default);
  border-color: var(--wa-color-surface-border);
-  border-radius: var(--wa-panel-border-radius);
+  border-radius: var(--border-radius);
  border-style: var(--wa-panel-border-style);
-  border-width: var(--wa-panel-border-width);
  box-shadow: var(--wa-shadow-s);
+  border-width: var(--border-width);
  color: var(--wa-color-text-normal);
 }

+.image,
+:host(:not([with-image])) .header {
+  border-start-start-radius: var(--inner-border-radius);
+  border-start-end-radius: var(--inner-border-radius);
+}
+
 .image {
  display: flex;
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-  margin: calc(-1 * var(--border-width));
-  overflow: hidden;

  &::slotted(img) {
    display: block;
    width: 100%;
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
+    border-start-start-radius: inherit !important;
+    border-start-end-radius: inherit !important;
  }
 }

@@ -33,11 +39,6 @@
  padding: calc(var(--spacing) / 2) var(--spacing);
 }

-:host(:not([with-image])) .header {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-}
-
 .body {
  display: block;
  padding: var(--spacing);
@@ -46,8 +47,8 @@
 .footer {
  display: block;
  border-top: inherit;
-  border-bottom-left-radius: inherit;
-  border-bottom-right-radius: inherit;
+  border-end-start-radius: var(--inner-border-radius);
+  border-end-end-radius: var(--inner-border-radius);
  padding: var(--spacing);
 }

--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -19,6 +19,8 @@ import styles from './card.css';
 * @csspart body - The container that wraps the card's main content.
 * @csspart footer - The container that wraps the card's footer.
 *
+ * @cssproperty --border-radius - The radius for the card's corners. Expects a single value. Defaults to `var(--wa-panel-border-radius)`.
+ * @cssproperty --border-width - The width of the card's borders. Expects a single value. Defaults to `var(--wa-panel-border-width)`.
 * @cssproperty --spacing - The amount of space around and between sections of the card. Expects a single value.
 */
@customElement('wa-card')
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -233,47 +233,40 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
    // https://bugs.chromium.org/p/chromium/issues/detail?id=1413733
    //
    return html`
-      <div
-        class=${classMap({
-          'form-control--has-hint': hasHint,
-          'form-control': true,
-        })}
+      <label part="base">
+        <span part="control">
+          <input
+            class="input"
+            type="checkbox"
+            title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
+            name=${this.name}
+            value=${ifDefined(this._value)}
+            .indeterminate=${live(this.indeterminate)}
+            .checked=${live(this.checked)}
+            .disabled=${this.disabled}
+            .required=${this.required}
+            aria-checked=${this.checked ? 'true' : 'false'}
+            aria-describedby="hint"
+            @click=${this.handleClick}
+            @input=${this.handleInput}
+            @blur=${this.handleBlur}
+            @focus=${this.handleFocus}
+          />
+
+          <wa-icon part="${iconState}-icon icon" library="system" name=${iconName}></wa-icon>
+        </span>
+
+        <slot part="label"></slot>
+      </label>
+
+      <slot
+        name="hint"
+        aria-hidden=${hasHint ? 'false' : 'true'}
+        class="${classMap({ 'has-slotted': hasHint })}"
+        id="hint"
+        part="hint"
+        >${this.hint}</slot
      >
-        <label part="base">
-          <span class="control">
-            <input
-              class="input"
-              type="checkbox"
-              title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
-              name=${this.name}
-              value=${ifDefined(this._value)}
-              .indeterminate=${live(this.indeterminate)}
-              .checked=${live(this.checked)}
-              .disabled=${this.disabled}
-              .required=${this.required}
-              aria-checked=${this.checked ? 'true' : 'false'}
-              aria-describedby="hint"
-              @click=${this.handleClick}
-              @input=${this.handleInput}
-              @blur=${this.handleBlur}
-              @focus=${this.handleFocus}
-            />
-
-            <wa-icon part="${iconState}-icon icon" library="system" name=${iconName}></wa-icon>
-          </span>
-
-          <slot part="label"></slot>
-        </label>
-
-        <slot
-          name="hint"
-          aria-hidden=${hasHint ? 'false' : 'true'}
-          class="${classMap({ 'has-slotted': hasHint })}"
-          id="hint"
-          part="hint"
-          >${this.hint}</slot
-        >
-      </div>
    `;
  }
 }
--- a/src/components/icon/library.system.ts
+++ b/src/components/icon/library.system.ts
@@ -4,6 +4,36 @@ function dataUri(svg: string) {
  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
 }

+export const iconsByVariant: { [key: string]: { [key: string]: string } } = {
+  solid: {
+    check: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>`,
+    'chevron-down': `<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>`,
+    'chevron-left': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>`,
+    'chevron-right': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>`,
+    circle: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>`,
+    'eye-dropper': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z"/></svg>`,
+    'grip-vertical': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>`,
+    indeterminate: `<svg part="indeterminate-icon" class="icon" viewBox="0 0 16 16"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g stroke="currentColor" stroke-width="2"><g transform="translate(2.285714, 6.857143)"><path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path></g></g></g></svg>`,
+    minus: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>`,
+    pause: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>`,
+    play: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>`,
+    star: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>`,
+    user: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>`,
+    xmark: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>`,
+  },
+  regular: {
+    'circle-xmark': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>`,
+    copy: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg>`,
+    eye: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>`,
+    'eye-slash': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"/></svg>`,
+  },
+};
+
+/**
+ * Union of all icons, across variants
+ */
+export const icons: { [key: string]: string } = Object.assign({}, ...Object.values(iconsByVariant));
+
 //
 // System icons are a separate library to ensure they're always available, regardless of how the default icon library is
 // configured or if its icons resolve properly. All Web Awesome components must use the system library instead of the
@@ -12,107 +42,12 @@ function dataUri(svg: string) {
 const systemLibrary: IconLibrary = {
  name: 'system',
  resolver: (name: string, family = 'classic', variant = 'solid') => {
-    //
-    // Classic + Solid
-    //
-    if (family === 'classic' && variant === 'solid') {
-      switch (name) {
-        case 'check':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>`,
-          );
+    if (family === 'classic') {
+      // Try given variant first, fall back to any variant
+      let svg = iconsByVariant[variant]?.[name];

-        case 'chevron-down':
-          return dataUri(
-            `<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>`,
-          );
-
-        case 'chevron-left':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>`,
-          );
-
-        case 'chevron-right':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>`,
-          );
-
-        case 'circle':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>`,
-          );
-
-        case 'eye-dropper':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z"/></svg>`,
-          );
-
-        case 'grip-vertical':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>`,
-          );
-
-        case 'indeterminate':
-          return dataUri(`
-            <svg part="indeterminate-icon" class="icon" viewBox="0 0 16 16"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g stroke="currentColor" stroke-width="2"><g transform="translate(2.285714, 6.857143)"><path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path></g></g></g></svg>
-          `);
-
-        case 'minus':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>`,
-          );
-
-        case 'pause':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>`,
-          );
-
-        case 'play':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>`,
-          );
-
-        case 'star':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>`,
-          );
-
-        case 'user':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>`,
-          );
-
-        case 'xmark':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg`,
-          );
-      }
-    }
-
-    //
-    // Classic + Regular
-    //
-    if (family === 'classic' && variant === 'regular') {
-      switch (name) {
-        case 'circle-xmark':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>`,
-          );
-
-        case 'copy':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg>`,
-          );
-
-        case 'eye':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>`,
-          );
-
-        case 'eye-slash':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"/></svg>`,
-          );
+      if (svg) {
+        return dataUri(svg);
      }
    }

--- a/src/components/image-comparer/image-comparer.css
+++ b/src/components/image-comparer/image-comparer.css
@@ -17,16 +17,13 @@
 .before,
 .after {
  display: block;
-  pointer-events: none;
-}

-.before::slotted(img),
-.after::slotted(img),
-.before::slotted(svg),
-.after::slotted(svg) {
-  display: block;
-  max-width: 100% !important;
-  height: auto;
+  &::slotted(img),
+  &::slotted(svg) {
+    display: block;
+    max-width: 100% !important;
+    height: auto;
+  }
 }

 .after {
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -1,4 +1,4 @@
-import { html, isServer } from 'lit';
+import { html, isServer, type PropertyValues } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -57,6 +57,8 @@ import styles from './input.css';
 * @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.
+ *
+ * @cssstate blank - The input is empty.
 */
@customElement('wa-input')
 export default class WaInput extends WebAwesomeFormAssociatedElement {
@@ -308,6 +310,14 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
    this.passwordVisible = !this.passwordVisible;
  }

+  updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('value')) {
+      this.toggleCustomState('blank', !this.value);
+    }
+  }
+
  @watch('step', { waitUntilFirstUpdate: true })
  handleStepChange() {
    // If step changes, the value may become invalid so we need to recheck after the update. We set the new step
@@ -465,15 +475,15 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
                @click=${this.handlePasswordToggle}
                tabindex="-1"
              >
-                ${this.passwordVisible
+                ${!this.passwordVisible
                  ? html`
                      <slot name="show-password-icon">
-                        <wa-icon name="eye-slash" library="system" variant="regular"></wa-icon>
+                        <wa-icon name="eye" library="system" variant="regular"></wa-icon>
                      </slot>
                    `
                  : html`
                      <slot name="hide-password-icon">
-                        <wa-icon name="eye" library="system" variant="regular"></wa-icon>
+                        <wa-icon name="eye-slash" library="system" variant="regular"></wa-icon>
                      </slot>
                    `}
              </button>
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -1,4 +1,4 @@
-import type { TemplateResult } from 'lit';
+import type { PropertyValues, TemplateResult } from 'lit';
 import { html, isServer } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -83,6 +83,8 @@ import styles from './select.css';
 * @cssproperty --border-color - The border color of the select's combobox.
 * @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.
+ *
+ * @cssstate blank - The select is empty.
 */
@customElement('wa-select')
 export default class WaSelect extends WebAwesomeFormAssociatedElement {
@@ -674,6 +676,14 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
    });
  }

+  updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('value')) {
+      this.toggleCustomState('blank', !this.value);
+    }
+  }
+
  @watch('disabled', { waitUntilFirstUpdate: true })
  handleDisabledChange() {
    // Close the listbox when the control is disabled
@@ -799,7 +809,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
      >
        <label
          id="label"
-          part="form-control-label"
+          part="form-control-label label"
          class="label"
          aria-hidden=${hasLabel ? 'false' : 'true'}
          @click=${this.handleLabelClick}
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -90,17 +90,22 @@ export default class WaTabGroup extends WebAwesomeElement {
        setTimeout(() => this.setAriaLabels());
      }

+      // Only process mutations for elements that are children of this tab group
+      const relevantMutations = mutations.filter(m => {
+        const target = m.target as HTMLElement;
+        return target.closest('wa-tab-group') === this;
+      });
+
      // Sync tabs when disabled states change
-      if (mutations.some(m => m.attributeName === 'disabled')) {
+      if (relevantMutations.some(m => m.attributeName === 'disabled')) {
        this.syncTabsAndPanels();
-        // sync tabs when active state on tab changes
-      } else if (mutations.some(m => m.attributeName === 'active')) {
-        const tabs = mutations
+      } else if (relevantMutations.some(m => m.attributeName === 'active')) {
+        const tabs = relevantMutations
          .filter(m => m.attributeName === 'active' && (m.target as HTMLElement).tagName.toLowerCase() === 'wa-tab')
          .map(m => m.target as WaTab);
        const newActiveTab = tabs.find(tab => tab.active);

-        if (newActiveTab) {
+        if (newActiveTab && newActiveTab.closest('wa-tab-group') === this) {
          this.setActiveTab(newActiveTab);
        }
      }
@@ -164,7 +169,7 @@ export default class WaTabGroup extends WebAwesomeElement {
    const tab = target.closest('wa-tab');
    const tabGroup = tab?.closest('wa-tab-group');

-    // Ensure the target tab is in this tab group
+    // Ensure the target tab is in this specific tab group instance
    if (tabGroup !== this) {
      return;
    }
@@ -179,7 +184,7 @@ export default class WaTabGroup extends WebAwesomeElement {
    const tab = target.closest('wa-tab');
    const tabGroup = tab?.closest('wa-tab-group');

-    // Ensure the target tab is in this tab group
+    // Ensure the target tab is in this specific tab group instance
    if (tabGroup !== this) {
      return;
    }
@@ -297,6 +302,11 @@ export default class WaTabGroup extends WebAwesomeElement {
      ...options,
    };

+    // Ensure the tab belongs to this tab group before activating
+    if (tab.closest('wa-tab-group') !== this) {
+      return;
+    }
+
    if (tab !== this.activeTab && !tab.disabled) {
      const previousTab = this.activeTab;
      this.active = tab.panel;
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -43,6 +43,8 @@ import styles from './textarea.css';
 * @cssproperty --border-color - The color 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.
+ *
+ * @cssstate blank - The textarea is empty.
 */
@customElement('wa-textarea')
 export default class WaTextarea extends WebAwesomeFormAssociatedElement {
@@ -275,7 +277,12 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
    if (changedProperties.has('resize')) {
      this.setTextareaDimensions();
    }
+
    super.updated(changedProperties);
+
+    if (changedProperties.has('value')) {
+      this.toggleCustomState('blank', !this.value);
+    }
  }

  /** Sets focus on the textarea. */
--- a/src/components/tree-item/tree-item.css
+++ b/src/components/tree-item/tree-item.css
@@ -30,14 +30,16 @@ slot:not([name])::slotted(wa-icon) {
 }

 .checkbox {
+  line-height: var(--wa-form-control-value-line-height);
  pointer-events: none;
 }

 .expand-button,
 .checkbox,
 .label {
-  font: inherit;
+  font-family: inherit;
  font-size: var(--wa-font-size-m);
+  font-weight: inherit;
 }

 .checkbox::part(base) {
--- a/src/internal/webawesome-element.ts
+++ b/src/internal/webawesome-element.ts
@@ -1,8 +1,19 @@
-import type { CSSResult, CSSResultGroup, PropertyValues } from 'lit';
-import { LitElement, isServer, unsafeCSS } from 'lit';
+import type { CSSResult, CSSResultGroup, PropertyDeclaration, PropertyValues } from 'lit';
+import { LitElement, defaultConverter, isServer, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import componentStyles from '../styles/shadow/component.css';

+// Augment Lit's module
+declare module 'lit' {
+  interface PropertyDeclaration {
+    /**
+     * Specifies the property’s default value
+     */
+    default?: any;
+    initial?: any;
+  }
+}
+
 export default class WebAwesomeElement extends LitElement {
  constructor() {
    super();
@@ -14,6 +25,13 @@ export default class WebAwesomeElement extends LitElement {
      /* eslint-disable-next-line */
      console.error('Element internals are not supported in your browser. Consider using a polyfill');
    }
+
+    let Self = this.constructor as typeof WebAwesomeElement;
+    for (let [property, spec] of Self.elementProperties) {
+      if (spec.default === 'inherit' && spec.initial !== undefined && typeof property === 'string') {
+        this.toggleCustomState(`initial-${property}-${spec.initial}`);
+      }
+    }
  }

  // Make localization attributes reactive
@@ -148,4 +166,72 @@ export default class WebAwesomeElement extends LitElement {
  hasCustomState(state: string): boolean {
    return this.hasStatesSupport() ? this.internals.states.has(state) : false;
  }
+
+  static createProperty(name: PropertyKey, options?: PropertyDeclaration): void {
+    if (options) {
+      if (options.initial !== undefined && options.default === undefined) {
+        // Set "inherit" value as default if no default is specified but the initial value is
+        // This saves us having to tediously specify default: "inherit", initial: "foo" for every property
+        options.default = 'inherit';
+      }
+
+      if (options.default !== undefined && options.converter === undefined) {
+        // Wrap the default converter to remove the attribute if the value is the default
+        // This effectively prevents the component sprouting attributes that have not been specified
+        let converter = {
+          ...defaultConverter,
+          toAttribute(value: string, type: unknown): unknown {
+            if (value === options!.default) {
+              return null;
+            }
+            return defaultConverter.toAttribute!(value, type);
+          },
+        };
+        options = { ...options, converter };
+      }
+    }
+
+    super.createProperty(name, options);
+
+    // Wrap the default accessor with logic to return the default value if the value is null
+    if (options) {
+      if (options.default !== undefined) {
+        const descriptor = Object.getOwnPropertyDescriptor(this.prototype, name as string);
+
+        if (descriptor?.get) {
+          const getter = descriptor.get;
+
+          Object.defineProperty(this.prototype, name, {
+            ...descriptor,
+            get() {
+              return getter.call(this) ?? options.default;
+            },
+          });
+        }
+
+        if (options.default === 'inherit') {
+          // Add getter for "computed" value (taking ancestors into account)
+          let capitalizedName = name.toString().replace(/^\w/, c => c.toUpperCase());
+          Object.defineProperty(this.prototype, `computed${capitalizedName}`, {
+            get() {
+              let value;
+              let element = this;
+
+              do {
+                value = element[name as string];
+                element = element.parentElement;
+              } while (value === 'inherit' && element.parentElement);
+
+              if (value === 'inherit') {
+                // If we've reached this point and we still have `inherit`, we just ran out of parents
+                return options.initial;
+              }
+
+              return value;
+            },
+          });
+        }
+      }
+    }
+  }
 }
--- a/src/styles/color/anodized.css
+++ b/src/styles/color/anodized.css
@@ -1,5 +1,7 @@
-:root,
-:host {
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-anodized {
  --wa-color-red-95: #fbeeeb;
  --wa-color-red-90: #f8e0d9;
  --wa-color-red-80: #efbdb1;
--- a/src/styles/color/bright.css
+++ b/src/styles/color/bright.css
@@ -1,5 +1,7 @@
-:root,
-:host {
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-bright {
  --wa-color-red-95: #ffefef;
  --wa-color-red-90: #ffdddd;
  --wa-color-red-80: #ffb7b7;
@@ -36,17 +38,17 @@
  --wa-color-green-10: #0b2210;
  --wa-color-green-05: #07150a;

-  --wa-color-teal-95: #cafae6;
-  --wa-color-teal-90: #aaf3d7;
-  --wa-color-teal-80: #46e2b7;
-  --wa-color-teal-70: #00cba0;
-  --wa-color-teal-60: #00b28f;
-  --wa-color-teal-50: #008f76;
-  --wa-color-teal-40: #00705e;
-  --wa-color-teal-30: #005c4d;
-  --wa-color-teal-20: #00483d;
-  --wa-color-teal-10: #00312b;
-  --wa-color-teal-05: #001613;
+  --wa-color-teal-95: #d8fbf0;
+  --wa-color-teal-90: #a4f5dd;
+  --wa-color-teal-80: #51e1b5;
+  --wa-color-teal-70: #1cc693;
+  --wa-color-teal-60: #0da97a;
+  --wa-color-teal-50: #088660;
+  --wa-color-teal-40: #066549;
+  --wa-color-teal-30: #054f39;
+  --wa-color-teal-20: #043a2a;
+  --wa-color-teal-10: #022319;
+  --wa-color-teal-05: #01160f;

  --wa-color-blue-95: #e7f5ff;
  --wa-color-blue-90: #ceeaff;
--- a/src/styles/color/classic.css
+++ b/src/styles/color/classic.css
@@ -1,5 +1,7 @@
-:root,
-:host {
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-classic {
  --wa-color-red-95: #feeeee;
  --wa-color-red-90: #fedede;
  --wa-color-red-80: #fdb8b8;
@@ -30,7 +32,7 @@
  --wa-color-green-70: #6cc08a;
  --wa-color-green-60: #38a961;
  --wa-color-green-50: #178640;
-  --wa-color-green-40: #3d6208;
+  --wa-color-green-40: #006823;
  --wa-color-green-30: #0d5026;
  --wa-color-green-20: #0c391d;
  --wa-color-green-10: #082213;
--- a/src/styles/color/contrast.test.js
+++ b/src/styles/color/contrast.test.js
@@ -0,0 +1,71 @@
+// Get a list of all CSS files in repo
+import chalk from 'chalk';
+import Color from 'colorjs.io';
+import palettes from './palettes.js';
+
+let targetContrasts = {
+  40: 3,
+  50: 4.5,
+  60: 7,
+};
+
+let result = { pass: 0, fail: 0, invalid: 0 };
+
+for (let paletteId in palettes) {
+  const tokens = palettes[paletteId];
+  let prefix = chalk.dim(`[${paletteId}]`);
+
+  for (let hue in tokens) {
+    let tints = tokens[hue];
+
+    for (let tint = 10; tint <= 50; tint += 10) {
+      let color = tints[tint];
+
+      if (!(color instanceof Color)) {
+        result.invalid++;
+        continue;
+      }
+
+      for (let difference in targetContrasts) {
+        let targetContrast = targetContrasts[difference];
+        let tint2 = tint + Number(difference);
+        if (tint2 > 90) {
+          continue;
+        }
+
+        let color2 = tints[tint2];
+
+        if (!(color2 instanceof Color)) {
+          result.invalid++;
+          continue;
+        }
+
+        let contrast = color.contrast(color2, 'WCAG21');
+        let pass = contrast >= targetContrast;
+        if (pass) {
+          result.pass++;
+        } else {
+          result.fail++;
+          console.log(
+            chalk.red(
+              `${prefix} WCAG 2.1 contrast between ${hue}-${tint} and ${hue}-${tint2} is ${contrast.toLocaleString('en')} < ${targetContrast}`,
+            ),
+          );
+        }
+      }
+    }
+  }
+}
+
+let testCount = result.pass + result.fail;
+console.info(
+  `Ran ${testCount} tests: ${chalk.green(`${chalk.bold(result.pass)} passed`)}` +
+    (result.fail ? `, ${chalk.red(`${chalk.bold(result.fail)} failed`)}` : '') +
+    (result.invalid ? `, ${chalk.red(`${chalk.bold(result.invalid)} invalid colors`)}` : ''),
+);
+
+if (testCount === result.pass) {
+  process.exit(0);
+} else {
+  process.exit(1);
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Lea Verou	3dc526c948	Support inheritance and initial values	2025-01-21 15:26:45 -05:00
Lea Verou	e3560dcf98	Do not reflect default values - Add `default` descriptor - Do not reflect attributes when equal to their default value - Patch getter return value to return default value when empty - Use it in button `appearance`	2025-01-21 15:16:11 -05:00
Cory LaViska	f2bb2c84a0	fix nested tab groups (#576 )	2025-01-21 12:54:38 -05:00
Cory LaViska	13b3342017	fix slot names (#577 )	2025-01-21 12:52:41 -05:00
Cory LaViska	d1c1d689ce	ensure fix works on backers website (#579 )	2025-01-21 12:36:54 -05:00
Cory LaViska	44e5e37a2b	3.0.0-alpha.9	2025-01-17 10:40:54 -05:00
Cory LaViska	566aae927d	fix typo	2025-01-17 10:39:18 -05:00
Lea Verou	7258c001a7	Demo for mixing and matching (#565 )	2025-01-17 10:38:03 -05:00
Lea Verou	7a70940c6a	Update changelog, remove `.wa-callout` from alpha	2025-01-16 18:27:47 -05:00
Lea Verou	45f4edc426	Fix #561	2025-01-16 16:50:28 -05:00
Lea Verou	da32015f27	Basic mixing and matching docs (#560 )	2025-01-16 16:31:24 -05:00
Lea Verou	03d8238edb	Add missing `:state(blank)` docs	2025-01-16 16:17:50 -05:00
Lindsay M	34f8744493	Fix missing mild palette doc and links (#557 )	2025-01-16 16:09:52 -05:00
Lindsay M	fa3fe5f753	Theme files housekeeping, closes #519 (#552 ) * Reorg Glossy theme * Reorg Playful theme * Remove redundant dark mode tokens	2025-01-16 16:09:28 -05:00
Lindsay M	fc6c7de1fd	Fix contrast issues with Bright teal (#556 )	2025-01-16 16:09:03 -05:00
Lea Verou	0037712549	Matter Ripple MVP (#558 ) Co-authored-by: lindsaym-fa <dev@lindsaym.design>	2025-01-16 16:05:50 -05:00
Lea Verou	5301945bfa	Filled inputs	2025-01-16 14:48:56 -05:00
Lea Verou	1298651dd8	Floating labels on select	2025-01-16 14:48:56 -05:00
Lea Verou	5f9695fde1	Floating labels on textarea	2025-01-16 14:48:56 -05:00
Lea Verou	2eb2597efe	Floating labels for input	2025-01-16 14:48:56 -05:00
lindsaym-fa	431e82261b	Initial floating label attempt	2025-01-16 14:48:56 -05:00
Lea Verou	df51149d0a	Show contrast ratios in contrast pair tables	2025-01-16 13:18:26 -05:00
Lindsay M	fba0b11343	Add Matter theme (#547 ) * Add Matter theme * Add Matter to alpha build * Add changelog * Fix incorrect palette name * Make loud fills darker in light mode	2025-01-16 12:08:51 -05:00
Lea Verou	3618e93490	Reintroduce `--border-width` and `--border-radius`, fixes #531	2025-01-16 10:36:03 -05:00
Lea Verou	cfa95307d1	Quick proof of concept contrast tests	2025-01-16 10:22:01 -05:00
Lea Verou	15344c2a2a	Appease Turbo for the color scheme picker too, fixes #520	2025-01-16 10:15:52 -05:00
lindsaym-fa	3974aa5130	Decrease line height on swatches	2025-01-16 10:15:16 -05:00
lindsaym-fa	a6702ad6d2	Revise Color tokens doc and link to palettes	2025-01-16 10:15:16 -05:00
lindsaym-fa	ecf21adddc	Fix punctuation	2025-01-16 10:15:16 -05:00
Lea Verou	52c24fc3b7	Add color palette to theme pages	2025-01-16 10:15:16 -05:00
Lea Verou	d464714d7b	Rudimentary palette icons	2025-01-16 10:15:16 -05:00
Lea Verou	7d089bbe2f	Palette Docs	2025-01-16 10:15:16 -05:00
Lea Verou	71914afc91	`defaultPalette` -> `palette`	2025-01-16 10:15:16 -05:00
Lindsay M	9d139e3fa0	Minor style update for checkboxes in `wa-tree-item` (#542 ) * Use theme value line height for tree item checkbox * Apply theme checkbox styles to selected tree items	2025-01-16 09:30:35 -05:00
Lindsay M	db3039e9fe	Fix `green-40` in classic color palette (#548 )	2025-01-16 09:26:06 -05:00
Lindsay M	9494b9bb67	Improve default tooltip styles (#543 ) * Use inverted colors for tooltips * Remove redundant tooltip overrides from themes	2025-01-16 04:35:08 -05:00
Lea Verou	7e1f4f0351	Separate meaningful theme parts out (#526 ) Co-authored-by: lindsaym-fa <dev@lindsaym.design>	2025-01-15 17:32:36 -05:00
Lindsay M	5ebe4f4d3e	Finalize playful theme, closes #490 (#527 ) * Finalize Playful theme * Add changelog, add to alpha * Add playful theme to alpha build * Touchup and tweaks * Tweak hover mix color in `wa-dark` * Avoid transforming buttons in button groups * Final touchup --------- Co-authored-by: Lea Verou <lea@verou.me>	2025-01-15 17:13:48 -05:00
Lea Verou	dfb9d53a25	Checkbox improvements - Added `part="control", fixes #529 - Removed wrapper div which is no longer needed - Removed `form-control--has-hint` class which is no longer used anywhere	2025-01-15 15:03:58 -05:00
Lindsay M	c2c1a2ff5b	Add missing Glossy and Premium themes to alpha build (#528 )	2025-01-15 10:45:43 -05:00
Lindsay M	ac86c037a1	Finalize Glossy theme, closes #491 (#525 ) * Initial glassy theme progress * Add fallback to slider thumb box shadow * Remove redundant `wa-dark` styles and refactor shadows * Rename to 'Glossy' since it fits the vibe better	2025-01-14 18:44:31 -05:00
Lea Verou	6b07c9a040	Native callout (#513 ) Co-authored-by: lindsaym-fa <dev@lindsaym.design>	2025-01-14 14:56:03 -05:00
Lea Verou	24a76f6a7c	Color palette housekeeping (#523 )	2025-01-14 14:54:34 -05:00
Lea Verou	89c0667e9c	Improve maintainability of color docs	2025-01-14 14:44:30 -05:00
Lea Verou	434084ea4e	Playful: refer to rudimentary palette	2025-01-14 14:32:39 -05:00
Lea Verou	1738c6345b	Fix #514 for reals this time	2025-01-14 13:02:37 -05:00
Lea Verou	0ac7916a1b	Attempt to fix #514	2025-01-14 13:02:37 -05:00
Lea Verou	e7979991e3	Update docs to lean into the "tokens" terminology in lieu of "properties" Co-Authored-By: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>	2025-01-14 12:31:24 -05:00
Lea Verou	07f70098f8	Theming -> Design Tokens	2025-01-14 12:31:24 -05:00
Lindsay M	17146698db	Finalize Premium theme, closes #489 (#510 ) * Finalize Premium theme * Improve theme compatibility of dark mode shadows * Improve theme compatibility of code examples * Add comments * Revert dark mode shadow color changes (to be addressed separately) * Revert dark mode shadow color change * Clean up redundant `wa-dark` properties	2025-01-14 11:56:30 -05:00
Lea Verou	bf852b1296	Fix #515	2025-01-14 11:29:36 -05:00
Lea Verou	e367c0ef29	Open sidebar group on overview pages, fixes #507	2025-01-14 10:20:04 -05:00
Lea Verou	01210ef364	Implement `.wa-invert`, closes #497 (#508 )	2025-01-14 10:04:27 -05:00
Lea Verou	40648e15fb	Refactor: `library.system.ts` to export supported icons (#505 )	2025-01-13 16:37:54 -05:00
Cory LaViska	ab67ecfad3	add native icon to search (#498 )	2025-01-13 14:48:51 -05:00
				`@@ -0,0 +1 @@`
				`["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]`
				`@@ -0,0 +1 @@`
				`export { default as default } from '../../src/styles/color/palettes.js';`