Update webawesome-element.ts

* fix pass through copying

* prettier

.github/workflows/ssr_tests.js.yml

@@ -1,11 +1,12 @@
-# # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
 name: SSR Tests
 
 on:
-  push:
-    branches: [next]
+  # push:
+  #   branches: [next]
+  workflow_dispatch:
 
 jobs:
   ssr_test:

docs/.eleventy.js

@@ -1,3 +1,4 @@
+import * as path from 'node:path';
 import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
 import { codeExamplesPlugin } from './_utils/code-examples.js';
 import { copyCodePlugin } from './_utils/copy-code.js';
@@ -6,9 +7,10 @@ import { highlightCodePlugin } from './_utils/highlight-code.js';
 import { markdown } from './_utils/markdown.js';
 import { removeDataAlphaElements } from './_utils/remove-data-alpha-elements.js';
 // import { formatCodePlugin } from './_utils/format-code.js';
-import litPlugin from '@lit-labs/eleventy-plugin-lit';
+// import litPlugin from '@lit-labs/eleventy-plugin-lit';
 import { readFile } from 'fs/promises';
-import componentList from './_data/componentList.js';
+import nunjucks from 'nunjucks';
+// import componentList from './_data/componentList.js';
 import * as filters from './_utils/filters.js';
 import { outlinePlugin } from './_utils/outline.js';
 import { replaceTextPlugin } from './_utils/replace-text.js';
@@ -16,7 +18,10 @@ import { searchPlugin } from './_utils/search.js';
 
 import process from 'process';
 
-const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
+import * as url from 'url';
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+const packageData = JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
 const isAlpha = process.argv.includes('--alpha');
 const isDev = process.argv.includes('--develop');
 
@@ -24,12 +29,28 @@ const globalData = {
   package: packageData,
   isAlpha,
   layout: 'page.njk',
+  server: {
+    head: '',
+    loginOrAvatar: '',
+    flashes: '',
+  },
 };
 
-const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
-const passThrough = [...passThroughExtensions.map(ext => 'docs/**/*.' + ext)];
-
 export default function (eleventyConfig) {
+  /**
+   * If you plan to add or remove any of these extensions, make sure to let either Konnor or Cory know as these passthrough extensions
+   * will also need to be updated in the Web Awesome App.
+   */
+  const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
+
+  const baseDir = process.env.BASE_DIR || 'docs';
+  const passThrough = [...passThroughExtensions.map(ext => path.join(baseDir, '**/*.' + ext))];
+
+  /**
+   * This is the guard we use for now to make sure our final built files dont need a 2nd pass by the server. This keeps us able to still deploy the bare HTML files on Vercel until the app is ready.
+   */
+  const serverBuild = process.env.WEBAWESOME_SERVER === 'true';
+
   // NOTE - alpha setting removes certain pages
   if (isAlpha) {
     eleventyConfig.ignores.add('**/experimental/**');
@@ -55,7 +76,38 @@ export default function (eleventyConfig) {
 
   // Shortcodes - {% shortCode arg1, arg2 %}
   eleventyConfig.addShortcode('cdnUrl', location => {
-    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, '');
+    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + (location || '').replace(/^\//, '');
+  });
+
+  // Turns `{% server "foo" %} into `{{ server.foo | safe }}` when the WEBAWESOME_SERVER variable is set to "true"
+  eleventyConfig.addShortcode('server', function (property) {
+    if (serverBuild) {
+      return `{{ server.${property} | safe }}`;
+    }
+
+    return '';
+  });
+
+  eleventyConfig.addTransform('second-nunjucks-transform', function NunjucksTransform(content) {
+    // For a server build, we expect a server to run the second transform.
+    if (serverBuild) {
+      return content;
+    }
+
+    // Only run the transform on files nunjucks would transform.
+    if (!this.page.inputPath.match(/.(md|html|njk)$/)) {
+      return content;
+    }
+
+    /** This largely mimics what an app would do and just stubs out what we don't care about. */
+    return nunjucks.renderString(content, {
+      // Stub the server EJS shortcodes.
+      server: {
+        head: '',
+        loginOrAvatar: '',
+        flashes: '',
+      },
+    });
   });
 
   // Paired shortcodes - {% shortCode %}content{% endShortCode %}
@@ -117,29 +169,6 @@ export default function (eleventyConfig) {
     ]),
   );
 
-  // SSR plugin
-  if (!isDev) {
-    //
-    // Problematic components in SSR land:
-    //  - animation (breaks on navigation + ssr with Turbo)
-    //  - mutation-observer (why SSR this?)
-    //  - resize-observer (why SSR this?)
-    //  - tooltip (why SSR this?)
-    //
-    const omittedModules = [];
-    const componentModules = componentList
-      .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
-      .map(component => {
-        const name = component.tagName.split(/wa-/)[1];
-        return `./dist/components/${name}/${name}.js`;
-      });
-
-    eleventyConfig.addPlugin(litPlugin, {
-      mode: 'worker',
-      componentModules,
-    });
-  }
-
   // Build the search index
   eleventyConfig.addPlugin(
     searchPlugin({
@@ -166,6 +195,31 @@ export default function (eleventyConfig) {
     eleventyConfig.addPassthroughCopy(glob);
   }
 
+  // // SSR plugin
+  // // Make sure this is the last thing, we don't want to run the risk of accidentally transforming shadow roots with the nunjucks 2nd transform.
+  // if (!isDev) {
+  //   //
+  //   // Problematic components in SSR land:
+  //   //  - animation (breaks on navigation + ssr with Turbo)
+  //   //  - mutation-observer (why SSR this?)
+  //   //  - resize-observer (why SSR this?)
+  //   //  - tooltip (why SSR this?)
+  //   //
+  //   const omittedModules = [];
+  //   const componentModules = componentList
+  //     .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
+  //     .map(component => {
+  //       const name = component.tagName.split(/wa-/)[1];
+  //       const componentDirectory = process.env.UNBUNDLED_DIST_DIRECTORY || path.join('.', 'dist');
+  //       return path.join(componentDirectory, 'components', name, `${name}.js`);
+  //     });
+  //
+  //   eleventyConfig.addPlugin(litPlugin, {
+  //     mode: 'worker',
+  //     componentModules,
+  //   });
+  // }
+
   return {
     markdownTemplateEngine: 'njk',
     dir: {

docs/_data/hues.json

@@ -1 +1 @@
-["red", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"]
+["red", "orange", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"]

docs/_includes/base.njk

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
+<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}" class="wa-cloak">
   <head>
     {% include 'head.njk' %}
     <meta name="theme-color" content="#f36944">
@@ -50,6 +50,9 @@
             Search
             <kbd slot="suffix" class="only-desktop">/</kbd>
           </wa-button>
+
+          {# Login #}
+          {% server "loginOrAvatar" %}
         </div>
       </header>
 
@@ -76,14 +79,19 @@
         </aside>
       {% endif %}
 
+
       {# Main #}
       <main id="content">
         {# Expandable outline #}
+        {% if hasOutline %}
         <nav id="outline-expandable">
           <details class="outline-links">
             <summary>On this page</summary>
           </details>
         </nav>
+        {% endif %}
+
+        <div id="flashes">{% server "flashes" %}</div>
 
         {% block header %}
           {% include 'breadcrumbs.njk' %}

docs/_includes/breadcrumbs.njk

@@ -1,8 +1,11 @@
-{% set breadcrumbs = page.url | breadcrumbs %}
-{% if breadcrumbs.length > 0 %}
+{% set ancestors = page.url | ancestors %}
+
+{% if ancestors.length > 0 %}
   <wa-breadcrumb id="docs-breadcrumbs">
-  {% for crumb in breadcrumbs %}
-    <wa-breadcrumb-item href="{{ crumb.url }}">{{ crumb.title }}</wa-breadcrumb-item>
+  {% for ancestor in ancestors %}
+    {% if ancestor.page.url != "/" %}
+    <wa-breadcrumb-item href="{{ ancestor.page.url }}">{{ ancestor.data.title }}</wa-breadcrumb-item>
+    {% endif %}
   {% endfor %}
   <wa-breadcrumb-item>{# Current page #}</wa-breadcrumb-item>
   </wa-breadcrumb>

docs/_includes/grouped-pages.njk

@@ -1,12 +1,18 @@
 {# Cards for pages listed by category #}
 
 <section id="grid" class="index-grid">
-{% for category, pages in allPages | groupByTags(categories) -%}
-  <h2 class="index-category">{{ category | getCategoryTitle(categories) }}</h2>
-    {%- for page in pages -%}
-      {%- if not page.data.parent or listChildren -%}
-        {% include "page-card.njk" %}
-      {%- endif -%}
-    {%- endfor -%}
+{% set groupedPages = allPages | groupPages(categories, page) %}
+{% for category, pages in groupedPages -%}
+  {% if groupedPages.meta.groupCount > 1 and pages.length > 0 %}
+  <h2 class="index-category" id="{{ category | slugify }}">
+    {% if pages.meta.url %}<a href="{{ pages.meta.url }}">{{ pages.meta.title }}</a>
+    {% else %}
+    {{ pages.meta.title }}
+    {% endif %}
+  </h2>
+  {% endif %}
+  {%- for page in pages -%}
+      {% include "page-card.njk" %}
+  {%- endfor -%}
 {%- endfor -%}
 </section>

docs/_includes/head.njk

@@ -23,10 +23,12 @@
 <script src="/assets/scripts/hydration-errors.js"></script>
 <link rel="stylesheet" href="/assets/styles/hydration-errors.css">
 <link rel="preconnect" href="https://cdn.jsdelivr.net">
-<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
+
+{# Internal components #}
+<script type="module" src="/assets/components/scoped.js"></script>
 
 {# Web Awesome #}
-<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
+<script type="module" src="/dist/webawesome.loader.js"></script>
 
 <script type="module" src="/assets/scripts/theme-picker.js"></script>
 {# Preset Theme #}
@@ -47,3 +49,6 @@
 <link rel="stylesheet" href="/dist/styles/webawesome.css" />
 <link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
 <link rel="stylesheet" href="/dist/styles/forms.css" />
+
+{# Used by Web Awesome App to inject other assets into the head. #}
+{% server "head" %}

docs/_includes/page-card.njk

@@ -2,7 +2,7 @@
 <a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>
 	<wa-card with-header>
 		<div slot="header">
-		{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
+		{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" ignore missing %}
 		</div>
 		<span class="page-name">{{ page.data.title }}</span>
 		{% if pageSubtitle -%}

docs/_includes/sidebar-group.njk

@@ -1,9 +1,12 @@
 {# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
 {% if collections[tag] -%}
   {% set groupUrl %}/docs/{{ tag }}/{% endset %}
+  {% set groupItem = groupUrl | getCollectionItemFromUrl %}
+  {% set children = groupItem.data.children if groupItem.data.children.length > 0 else (collections[tag] | sort) %}
+
   <wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | attr('open') }}>
     <h2 slot="summary">
-      {% if groupUrl | getCollectionItemFromUrl %}
+      {% if groupItem %}
         <a href="{{ groupUrl }}" title="Overview">{{ title or (tag | capitalize) }}
           <wa-icon name="grid-2"></wa-icon>
         </a>
@@ -12,10 +15,8 @@
       {% endif %}
     </h2>
     <ul>
-      {% for page in collections[tag] | sort %}
-        {% if not page.data.parent -%}
+      {% for page in children %}
           {% include 'sidebar-link.njk' %}
-        {%- endif %}
       {% endfor %}
     </ul>
   </wa-details>

docs/_includes/sidebar-link.njk

@@ -1,4 +1,4 @@
-{% if not (isAlpha and page.data.noAlpha) and page.fileSlug != tag and not page.data.unlisted -%}
+{% if page | show -%}
 	<li>
 		<a href="{{ page.url }}">{{ page.data.title }}</a>
 		{% if page.data.status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}

docs/_includes/sidebar.njk

@@ -1,7 +1,7 @@
 {# Getting started #}
 <h2>Getting Started</h2>
 <ul>
-  <li><a href="/docs/installation">Installation</a></li>
+  <li><a href="/docs/">Installation</a></li>
   <li><a href="/docs/usage">Usage</a></li>
   <li><a href="/docs/customizing">Customizing</a></li>
   <li><a href="/docs/form-controls">Form Controls</a></li>

docs/_includes/svgs/palette.njk

@@ -1,31 +1,20 @@
 {% set paletteId = palette.fileSlug or page.fileSlug %}
 {% set suffixes = ['-80', '', '-20'] %}
-{% set width = 20 %}
-{% set height = 12 %}
-{% set height_core = 20 %}
-{% set gap_x = 4 %}
-{% set gap_y = 4 %}
 
-{% set total_width = (width + gap_x) * hues|length %}
-{% set total_height = (height + gap_y) * suffixes|length + (height_core - height) %}
-<svg viewBox="0 0 {{ total_width }} {{ total_height }}" 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>
+<wa-scoped class="palette-icon-host">
+  <template>
+    <link rel="stylesheet" href="/dist/styles/color/{{ paletteId }}.css">
+    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
 
-{% for hue in hues -%}
-  {% set hueIndex = loop.index0 %}
-  {% set y = 0 %}
-  {% for suffix in suffixes -%}
-    {% set swatch_height = height if suffix else height_core %}
-
-    <rect x="{{ hueIndex * (width + gap_x) }}" y="{{ y }}"
-	      width="{{ width }}" height="{{ swatch_height }}"
-	      fill="var(--wa-color-{{ hue }}{{ suffix }})" rx="2" />
-	{% set y = y + swatch_height + gap_y %}
-  {%- endfor %}
-{% endfor %}
-</svg>
+    <div class="palette-icon" style="--hues: {{ hues|length }}; --suffixes: {{ suffixes|length }}">
+      {% for hue in hues -%}
+        {% set hueIndex = loop.index %}
+        {% for suffix in suffixes -%}
+          <div class="swatch"
+               data-hue="{{ hue }}" data-suffix="{{ suffix }}"
+               style="--color: var(--wa-color-{{ hue }}{{ suffix }}); grid-column: {{ hueIndex }}; grid-row: {{ loop.index }}">&nbsp;</div>
+        {%- endfor %}
+      {%- endfor %}
+    </div>
+  </template>
+</wa-scoped>

docs/_includes/svgs/theme-color.njk

@@ -1,13 +1,13 @@
 {% set themeId = theme.fileSlug %}
 
-<div>
-  <template shadowrootmode="open">
+<wa-scoped class="theme-icon-host theme-color-icon-host">
+  <template>
     <link rel="stylesheet" href="/dist/styles/utilities.css">
     <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
     <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/color.css">
     <link rel="stylesheet" href="/assets/styles/theme-icons.css">
 
-    <div class="theme-color-icon wa-theme-{{ themeId }}">
+    <div class="theme-icon theme-color-icon wa-theme-{{ themeId }}">
       <div class="wa-brand wa-accent">A</div>
       <div class="wa-brand wa-outlined">A</div>
       <div class="wa-brand wa-filled">A</div>
@@ -21,4 +21,4 @@
       {# <div class="wa-warning wa-outlined wa-filled"><wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon></div> #}
     </div>
   </template>
-</div>
+</wa-scoped>

docs/_includes/svgs/theme-typography.njk

@@ -1,16 +1,16 @@
-{% set themeId = theme.fileSlug %}
+{% set themeId = theme.fileSlug or page.fileSlug %}
 
-<div>
-  <template shadowrootmode="open">
+<wa-scoped class="theme-icon-host theme-typography-icon-host">
+  <template>
     <link rel="stylesheet" href="/dist/styles/native/content.css">
     <link rel="stylesheet" href="/dist/styles/native/blockquote.css">
     <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
     <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/typography.css">
     <link rel="stylesheet" href="/assets/styles/theme-icons.css">
 
-    <div class="theme-typography-icon wa-theme-{{ themeId }}" data-no-outline data-no-anchor role="presentation">
+    <div class="theme-icon theme-typography-icon wa-theme-{{ themeId }}" data-no-outline data-no-anchor role="presentation">
       <h3>Title</h3>
       <p>Body text</p>
     </div>
   </template>
-</div>
+</wa-scoped>

docs/_includes/svgs/theme.njk

@@ -0,0 +1,29 @@
+{% set themeId = theme.fileSlug or page.fileSlug %}
+
+
+<wa-scoped class="theme-icon-host theme-overall-icon-host">
+  <template>
+    <link rel="stylesheet" href="/dist/styles/utilities.css">
+    <link rel="stylesheet" href="/dist/styles/native/content.css">
+    <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}.css">
+    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
+
+    <div class="theme-icon theme-overall-icon" role="presentation" data-no-anchor data-no-outline>
+      <div class="row row-1">
+        <h2>Aa</h2>
+        <div class="swatches">
+          <div class="wa-brand"></div>
+
+          <div class="wa-success"></div>
+          <div class="wa-warning"></div>
+          <div class="wa-danger"></div>
+          <div class="wa-neutral"></div>
+        </div>
+      </div>
+      <div class="row row-2">
+        <wa-input value="Input" size="small" inert></wa-input>
+        <wa-button size="small" variant="brand" inert>Go</wa-button>
+      </div>
+    </div>
+  </template>
+</wa-scoped>

docs/_layouts/overview.njk

@@ -1,6 +1,5 @@
 ---
 layout: page-outline
-tags: ["overview"]
 ---
 {% set forTag = forTag or (page.url | split('/') | last) %}
 {% if description %}
@@ -13,8 +12,10 @@ tags: ["overview"]
   </wa-input>
 </div>
 
-{% set allPages = collections[forTag] %}
+{% set allPages = allPages or collections[forTag] %}
+{% if allPages and allPages.length > 0 %}
 {% include "grouped-pages.njk" %}
+{% endif %}
 
 <link href="/assets/styles/filter.css" rel="stylesheet">
 <script type="module" src="/assets/scripts/filter.js"></script>

docs/_layouts/page.njk

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

docs/_layouts/palette.njk

@@ -18,24 +18,40 @@
     tweaking: tweaking.chroma,
     'tweaking-chroma': tweaking.chroma,
     'tweaking-hue': tweaking.chroma,
-    'tweaked-chroma': tweaked.chroma,
-    'tweaked-hue': tweaked.hue,
-    'tweaked-any': tweaked.chroma || tweaked.hue
+    'tweaking-gray-chroma': tweaking.grayChroma,
+    'tweaked-chroma': tweaked?.chroma,
+    'tweaked-hue': tweaked?.hue,
+    'tweaked-any': tweaked
   }"
-  :style="{ '--chroma-scale': chromaScale }">
+  :style="{
+    '--chroma-scale': chromaScale,
+    '--gray-chroma': tweaked?.grayChroma ? grayChroma : '',
+    }">
 
   {% include 'breadcrumbs.njk' %}
 
-  <h1 v-if="saved" class="title">
-    {% raw %}{{ saved.title }}{% endraw %}
-    <wa-icon-button name="pencil" label="Rename palette" @click="rename"></wa-icon-button>
-    <wa-icon-button class="delete" name="trash" label="Delete palette" @click="deleteSaved"></wa-icon-button>
+  <h1 class="title">
+    <span v-content="title">{{ title }}</span>
+    <template v-if="saved || tweaked">
+      <wa-icon-button name="pencil" label="Rename palette" @click="rename"></wa-icon-button>
+      <wa-icon-button v-if="saved" class="delete" name="trash" label="Delete palette" @click="deleteSaved"></wa-icon-button>
+      <wa-button @click="save()" :disabled="!unsavedChanges"
+        :variant="unsavedChanges ? 'success' : 'neutral'" size="small" :appearance="unsavedChanges ? 'accent' : 'outlined'">
+        <span slot="prefix" class="icon-modifier">
+          <wa-icon name="sidebar" variant="regular"></wa-icon>
+          <wa-icon name="circle-plus" class="modifier" style="color: light-dark(var(--wa-color-green-70), var(--wa-color-green-60));"></wa-icon>
+        </span>
+        <span v-content="unsavedChanges ? 'Save' : 'Saved'">Save</span>
+      </wa-button>
+    </template>
   </h1>
-  <h1 v-if="!saved" class="title">{{ title }}</h1>
 
   <div class="block-info">
     <code class="class">.wa-palette-{{ paletteId }}</code>
     {% include '../_includes/status.njk' %}
+    {% if not isPro %}
+    <wa-badge class="pro" v-if="tweaked">PRO</wa-badge>
+    {% endif %}
   </div>
   {% if description %}
   <p class="summary">
@@ -48,24 +64,19 @@
 
 {% set maxChroma = 0 %}
 
-<wa-callout size="small" class="tweaked-callout" variant="brand">
+<wa-callout size="small" class="tweaked-callout" variant="warning">
   <wa-icon name="sliders-simple" slot="icon" variant="regular"></wa-icon>
    This palette has been tweaked.
-   <wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" removable @wa-remove="removeTweak(param)">{% raw %}{{ tweakHumanReadable }}{% endraw %}</wa-tag>
+   <div class="wa-cluster wa-gap-xs">
+    <wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" removable @wa-remove="reset(param)" v-content="tweakHumanReadable"></wa-tag>
+   </div>
 
-  <wa-button @click="reset" appearance="outlined">
+  <wa-button @click="reset()" appearance="outlined" variant="danger">
     <span slot="prefix" class="icon-modifier">
       <wa-icon name="circle-xmark" variant="regular"></wa-icon>
     </span>
     Reset
   </wa-button>
-  <wa-button v-if="!saved" @click="save">
-    <span slot="prefix" class="icon-modifier">
-      <wa-icon name="sidebar" variant="regular"></wa-icon>
-      <wa-icon name="circle-plus" class="modifier" style="color: light-dark(var(--wa-color-green-70), var(--wa-color-green-60));"></wa-icon>
-    </span>
-    Save
-  </wa-button>
 </wa-callout>
 
 <table class="colors main wa-palette-{{ paletteId }}">
@@ -81,25 +92,67 @@
 {# Initialize to last hue before gray #}
 {%- set hueBefore = hues[hues|length - 2] -%}
 {% for hue in hues -%}
-{%- set coreColor = palettes[paletteId][hue][palettes[paletteId][hue].maxChromaTint] -%}
+{% set coreTint = palettes[paletteId][hue].maxChromaTint %}
+{%- set coreColor = palettes[paletteId][hue][coreTint] -%}
 {%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
-<tr data-hue="{{ hue }}" class="color-scale" :class="{tweaking: tweaking.{{ hue }}, tweaked: hueShifts.{{ hue }} }"
+{% if hue === 'gray' %}
+<tr data-hue="{{ hue }}" class="color-scale"
+    :class="{tweaking: tweaking.grayChroma, tweaked: tweaked.grayChroma || tweaked.grayColor }">
+{% else %}
+<tr data-hue="{{ hue }}" class="color-scale"
+    :class="{tweaking: tweaking.{{ hue }}, tweaked: hueShifts.{{ hue }} }"
     :style="{ '--hue-shift': hueShifts.{{ hue }} || '' }">
+{% endif %}
   <th>
     {{ hue | capitalize }}
   </th>
-  <td class="core-column" style="--color: var(--wa-color-{{ hue }})">
-    {% if hue !== 'gray' %}
-    {%- set hueAfter = hues[loop.index0 + 1] -%}
-    {%- set hueAfter = hues[0] if hueAfter == 'gray' else hueAfter -%}
-    {%- set minShift = hueRanges[hue].min - coreColor.h | round -%}
-    {%- set maxShift = hueRanges[hue].max - coreColor.h | round -%}
+  <td class="core-column"
+      style="--color: var(--wa-color-{{ hue }})"
+      :style="{
+        '--color-tweaked': colors.{{ hue }}[{{ coreTint }}],
+        '--color-gray-undertone': colors[grayColor][{{coreTint}}],
+        '--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ coreTint }}],
+      }">
     <wa-dropdown>
-    <div slot="trigger" id="core-{{ hue }}-swatch" data-tint="core" class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});">
-      {{ palettes[paletteId][hue].maxChromaTint }}
-      <wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
-    </div>
-    <div class="popup">
+      <div slot="trigger" id="core-{{ hue }}-swatch" data-tint="core" class="color swatch"
+      style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});"
+      >
+        {{ palettes[paletteId][hue].maxChromaTint }}
+        <wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
+      </div>
+      <div class="popup">
+      {% if hue === 'gray' %}
+        <wa-radio-group class="core-color" orientation="horizontal" v-model="grayColor">
+          {% for h in hues -%}
+            {%- if h !== 'gray' -%}
+              <wa-radio-button id="gray-undertone-{{ h }}" value="{{ h }}" label="{{ h | capitalize }}" style="--color: var(--wa-color-{{ h }})"></wa-radio-button>
+              <wa-tooltip for="gray-undertone-{{ h }}" hoist>
+                {{ h | capitalize }}
+              </wa-tooltip>
+            {%- endif -%}
+          {%- endfor -%}
+          <div slot="label">
+            Gray undertone
+          </div>
+        </wa-radio-group>
+        <div class="decorated-slider gray-chroma-slider" :style="{'--max': maxGrayChroma}">
+          <wa-slider name="gray-chroma" v-model="grayChroma" ref="grayChromaSlider"
+          value="0" min="0" :max="maxGrayChroma" step="0.01"
+            @input="tweaking.grayChroma = true" @change="tweaking.grayChroma = false">
+            <div slot="label">
+              Gray colorfulness
+              <wa-icon-button @click="grayChroma = originalGrayChroma" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
+            </div>
+          </wa-slider>
+          <div class="label-min">Neutral</div>
+          <div class="label-max" v-content="moreHue[grayColor]">Warmer/Cooler</div>
+        </div>
+      {% else %}
+      {%- set hueAfter = hues[loop.index0 + 1] -%}
+      {%- set hueAfter = hues[0] if hueAfter == 'gray' else hueAfter -%}
+      {%- set minShift = hueRanges[hue].min - coreColor.h | round -%}
+      {%- set maxShift = hueRanges[hue].max - coreColor.h | round -%}
+
       <div class="decorated-slider hue-shift-slider" style="--min: {{ minShift }}; --max: {{ maxShift }};">
         <wa-slider name="{{ hue }}-shift" v-model="hueShifts.{{ hue }}" value="0"
           min="{{ minShift }}" max="{{ maxShift }}" step="1"
@@ -113,23 +166,23 @@
         <div class="label-min">More {{hueBefore}}</div>
         <div class="label-max">More {{hueAfter}}</div>
       </div>
+      {%- set hueBefore = hue -%}
+      {% endif %}
       <div class="wa-gap-s">
-        <code>--wa-color-{{ hue }}</code>
-        <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
-      </div>
-    </div>`
+          <code>--wa-color-{{ hue }}</code>
+          <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
+        </div>
+      </div>`
     </wa-dropdown>
-    {%- set hueBefore = hue -%}
-    {% else %}
-    <div id="core-{{ hue }}-swatch" class="color swatch" data-tint="core" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});">
-      {{ palettes[paletteId][hue].maxChromaTint }}
-    </div>
-    {% endif %}
   </td>
   {% for tint in tints -%}
     {%- set color = palettes[paletteId][hue][tint] -%}
-    <td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})">
-      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
+    <td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})"
+        :style="{
+          '--color-tweaked': colors.{{ hue }}[{{ tint }}],
+          '--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ tint }}],
+        }">
+      <div class="color swatch" style="--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>
@@ -144,7 +197,8 @@
 <div class="decorated-slider chroma-scale-slider wa-palette-{{ paletteId }}"
 :class="{ tweaked: chromaScale !== 1 }"
 style="--min: {{ chromaScaleBounds[0] }}; --max: {{ chromaScaleBounds[1] }};">
-  <wa-slider name="chroma-scale" v-model="chromaScale" value="1" step="0.01"
+  <wa-slider name="chroma-scale" ref="chromaScaleSlider"
+    v-model="chromaScale" value="1" step="0.01"
     min="{{ chromaScaleBounds[0] }}" max="{{ chromaScaleBounds[1] }}"
     @input="tweaking.chroma = true"
     @change="tweaking.chroma = false">

docs/_layouts/theme.njk

@@ -68,7 +68,7 @@ wa_data.palettes = {
       <wa-option label="{{ palette.data.title }}" value="{{ palette.fileSlug if not currentPalette }}" {{ (palette.fileSlug if currentPalette) | attr('data-id') }}>
         <wa-card with-header>
           <div slot="header">
-          {% include "svgs/" + (palette.data.icon or "thumbnail-placeholder") + ".njk" %}
+          {% include "svgs/" + (palette.data.icon or "thumbnail-placeholder") + ".njk" ignore missing %}
           </div>
           <span class="page-name">
             {{ palette.data.title }}

docs/_utils/filters.js

@@ -29,6 +29,9 @@ function getCollection(name) {
 }
 
 export function getCollectionItemFromUrl(url, collection) {
+  if (!url) {
+    return null;
+  }
   collection ??= getCollection.call(this, 'all') || [];
   return collection.find(item => item.url === url);
 }
@@ -42,35 +45,33 @@ export function split(text, separator) {
   return (text + '').split(separator).filter(Boolean);
 }
 
-export function breadcrumbs(url, { withCurrent = false } = {}) {
-  const parts = split(url, '/');
-  const ret = [];
+export function ancestors(url, { withCurrent = false, withRoot = false } = {}) {
+  let ret = [];
+  let currentUrl = url;
+  let currentItem = getCollectionItemFromUrl.call(this, url);
 
-  while (parts.length) {
-    let partialUrl = '/' + parts.join('/') + '/';
-    let item = getCollectionItemFromUrl.call(this, partialUrl);
-
-    if (item && (partialUrl !== url || withCurrent)) {
-      let title = item.data.title;
-      if (title) {
-        ret.unshift({ url: partialUrl, title });
-      }
-    }
-
-    parts.pop();
-
-    if (item?.data.parent) {
-      let parentURL = item.data.parent;
-      if (!item.data.parent.startsWith('/')) {
-        // Parent is in the same directory
-        parts.push(item.data.parent);
-        parentURL = '/' + parts.join('/') + '/';
-      }
-
-      let parentBreadcrumbs = breadcrumbs.call(this, parentURL, { withCurrent: true });
-      return [...parentBreadcrumbs, ...ret];
+  if (!currentItem) {
+    // Might have eleventyExcludeFromCollections, jump to parent
+    let parentUrl = this.ctx.parentUrl;
+    if (parentUrl) {
+      url = parentUrl;
     }
   }
+
+  for (let item; (item = getCollectionItemFromUrl.call(this, url)); url = item.data.parentUrl) {
+    ret.unshift(item);
+  }
+
+  if (!withRoot && ret[0]?.page.url === '/') {
+    // Remove root
+    ret.shift();
+  }
+
+  if (!withCurrent && ret.at(-1)?.page.url === currentUrl) {
+    // Remove current page
+    ret.pop();
+  }
+
   return ret;
 }
 
@@ -177,72 +178,196 @@ export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
   });
 }
 
+export function show(page) {
+  return !(page.data.noAlpha && page.data.isAlpha) && !page.data.unlisted;
+}
+
 /**
  * Group an 11ty collection (or any array of objects with a `data.tags` property) by certain tags.
  * @param {object[]} collection
- * @param { Object<string, string> | (string | Object<string, string>)[]} [tags] The tags to group by. If not provided/empty, defaults to grouping by all tags.
- * @returns { Object.<string, object[]> } An object with keys for each tag, and an array of items for each tag.
+ * @param { Object<string, string> | string[]} [options] Options object or array of tags to group by.
+ * @param {string[] | true} [options.tags] Tags to group by. If true, groups by all tags.
+ *                            If not provided/empty, defaults to grouping by page hierarchy, with any pages with more than 1 children becoming groups.
+ * @param {string[]} [options.groups] The groups to use if only a subset or a specific order is desired. Defaults to `options.tags`.
+ * @param {string[]} [options.titles] Any title overrides for groups.
+ * @param {string | false} [options.other="Other"] The title to use for the "Other" group. If `false`, the "Other" group is removed..
+ * @returns { Object.<string, object[]> } An object of group ids to arrays of page objects.
  */
-export function groupByTags(collection, tags) {
+export function groupPages(collection, options = {}, page) {
   if (!collection) {
-    console.error(`Empty collection passed to groupByTags() to group by ${JSON.stringify(tags)}`);
-  }
-  if (!tags) {
-    // Default to grouping by union of all tags
-    tags = Array.from(new Set(collection.flatMap(item => item.data.tags)));
-  } else if (Array.isArray(tags)) {
-    // May contain objects of one-off tag -> label mappings
-    tags = tags.map(tag => (typeof tag === 'object' ? Object.keys(tag)[0] : tag));
-  } else if (typeof tags === 'object') {
-    // tags is an object of tags to labels, so we just want the keys
-    tags = Object.keys(tags);
+    console.error(`Empty collection passed to groupPages() to group by ${JSON.stringify(options)}`);
   }
 
-  let ret = Object.fromEntries(tags.map(tag => [tag, []]));
-  ret.other = [];
+  if (Array.isArray(options)) {
+    options = { tags: options };
+  }
+
+  let { tags, groups, titles = {}, other = 'Other', filter = show } = options;
+
+  if (groups === undefined && Array.isArray(tags)) {
+    groups = tags;
+  }
+
+  let grouping;
+
+  if (tags) {
+    grouping = {
+      isGroup: item => undefined,
+      getCandidateGroups: item => item.data.tags,
+      getGroupMeta: group => ({}),
+    };
+  } else {
+    grouping = {
+      isGroup: item => (item.data.children.length >= 2 ? item.page.url : undefined),
+      getCandidateGroups: item => {
+        let parentUrl = item.data.parentUrl;
+        if (page?.url === parentUrl) {
+          return [];
+        }
+        return [parentUrl];
+      },
+      getGroupMeta: group => {
+        let item = byUrl[group] || getCollectionItemFromUrl.call(this, group);
+        return {
+          title: item?.data.title,
+          url: group,
+          item,
+        };
+      },
+      sortGroups: groups => sort(groups.map(url => byUrl[url]).filter(Boolean)).map(item => item.page.url),
+    };
+  }
+
+  let byUrl = {};
+  let byParentUrl = {};
+
+  if (filter) {
+    collection = collection.filter(filter);
+  }
 
   for (let item of collection) {
-    let categorized = false;
+    let url = item.page.url;
+    let parentUrl = item.data.parentUrl;
 
-    for (let tag of tags) {
-      if (item.data.tags.includes(tag)) {
-        ret[tag].push(item);
-        categorized = true;
-      }
-    }
+    byUrl[url] = item;
 
-    if (!categorized) {
-      ret.other.push(item);
+    if (parentUrl) {
+      byParentUrl[parentUrl] ??= [];
+      byParentUrl[parentUrl].push(item);
     }
   }
 
-  // Remove empty categories
-  for (let category in ret) {
-    if (ret[category].length === 0) {
-      delete ret[category];
+  let urlToGroups = {};
+
+  for (let item of collection) {
+    let url = item.page.url;
+    let parentUrl = item.data.parentUrl;
+
+    if (grouping.isGroup(item)) {
+      continue;
+    }
+
+    let parentItem = byUrl[parentUrl];
+    if (parentItem && !grouping.isGroup(parentItem)) {
+      // Their parent is also here and is not a group
+      continue;
+    }
+
+    let candidateGroups = grouping.getCandidateGroups(item);
+
+    if (groups) {
+      candidateGroups = candidateGroups.filter(group => groups.includes(group));
+    }
+
+    urlToGroups[url] ??= [];
+
+    for (let group of candidateGroups) {
+      urlToGroups[url].push(group);
+    }
+  }
+
+  let ret = {};
+
+  for (let url in urlToGroups) {
+    let groups = urlToGroups[url];
+    let item = byUrl[url];
+
+    if (groups.length === 0) {
+      // Not filtered out but also not categorized
+      groups = ['other'];
+    }
+
+    for (let group of groups) {
+      ret[group] ??= [];
+      ret[group].push(item);
+
+      if (!ret[group].meta) {
+        if (group === 'other') {
+          ret[group].meta = { title: other };
+        } else {
+          ret[group].meta = grouping.getGroupMeta(group);
+          ret[group].meta.title = titles[group] ?? ret[group].meta.title ?? capitalize(group);
+        }
+      }
+    }
+  }
+
+  if (other === false) {
+    delete ret.other;
+  }
+
+  // Sort
+  let sortedGroups = groups ?? grouping.sortGroups?.(Object.keys(ret));
+
+  if (sortedGroups) {
+    ret = sortObject(ret, sortedGroups);
+  } else {
+    // At least make sure other is last
+    if (ret.other) {
+      let otherGroup = ret.other;
+      delete ret.other;
+      ret.other = otherGroup;
+    }
+  }
+
+  Object.defineProperty(ret, 'meta', {
+    value: {
+      groupCount: Object.keys(ret).length,
+    },
+    enumerable: false,
+  });
+
+  return ret;
+}
+
+/**
+ * Sort an object by its keys
+ * @param {*} obj
+ * @param {function | string[]} order
+ */
+function sortObject(obj, order) {
+  let ret = {};
+  let sortedKeys = Array.isArray(order) ? order : Object.keys(obj).sort(order);
+
+  for (let key of sortedKeys) {
+    if (key in obj) {
+      ret[key] = obj[key];
+    }
+  }
+
+  // Add any keys that weren't in the order
+  for (let key in obj) {
+    if (!(key in ret)) {
+      ret[key] = obj[key];
     }
   }
 
   return ret;
 }
 
-export function getCategoryTitle(category, categories) {
-  let title;
-  if (Array.isArray(categories)) {
-    // Find relevant entry
-    // [{id: "Title"}, id2, ...]
-    title = categories.find(entry => typeof entry === 'object' && entry?.[category])?.[category];
-  } else if (typeof categories === 'object') {
-    // {id: "Title", id2: "Title 2", ...}
-    title = categories[category];
-  }
-
-  if (title) {
-    return title;
-  }
-
-  // Capitalized
-  return category.charAt(0).toUpperCase() + category.slice(1);
+function capitalize(str) {
+  str += '';
+  return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
 const IDENTITY = x => x;

docs/_utils/outline.js

@@ -39,7 +39,7 @@ export function outlinePlugin(options = {}) {
         }
 
         // Create a clone of the heading so we can remove links and [data-no-outline] elements from the text content
-        clone.querySelectorAll('a').forEach(a => a.remove());
+        clone.querySelectorAll('.wa-visually-hidden, [hidden], [aria-hidden="true"]').forEach(el => el.remove());
         clone.querySelectorAll('[data-no-outline]').forEach(el => el.remove());
 
         // Generate the link

docs/_utils/search.js

@@ -2,6 +2,7 @@
 import { mkdir, writeFile } from 'fs/promises';
 import lunr from 'lunr';
 import { parse } from 'node-html-parser';
+import * as path from 'path';
 import { dirname, join } from 'path';
 
 function collapseWhitespace(string) {
@@ -52,8 +53,9 @@ export function searchPlugin(options = {}) {
       return content;
     });
 
-    eleventyConfig.on('eleventy.after', ({ dir }) => {
-      const outputFilename = join(dir.output, 'search.json');
+    eleventyConfig.on('eleventy.after', ({ directories }) => {
+      const { output } = directories;
+      const outputFilename = path.resolve(join(output, 'search.json'));
       const map = [];
       const searchIndex = lunr(async function () {
         let index = 0;

docs/assets/components/scoped.js

@@ -0,0 +1,171 @@
+/**
+ * Low-level utility to encapsulate a bit of HTML (mainly to apply certain stylesheets to it without them leaking to the rest of the page)
+ * Usage: <wa-scoped><template><!-- your HTML here --></template></wa-scoped>
+ */
+import { discover } from '/dist/webawesome.js';
+
+const imports = new Set();
+const fontFaceRules = new Set();
+
+export default class WaScoped extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    this.observer = new MutationObserver(() => this.render());
+    this.observer.observe(this, { childList: true, subtree: true, characterData: true });
+  }
+
+  connectedCallback() {
+    this.render();
+    this.ownerDocument.documentElement.addEventListener('wa-color-scheme-change', e =>
+      this.#applyDarkMode(e.detail.dark),
+    );
+  }
+
+  render() {
+    this.observer.takeRecords();
+    this.observer.disconnect();
+
+    this.shadowRoot.innerHTML = '';
+
+    // To avoid mutating this.childNodes while iterating over it
+    let nodes = [];
+
+    for (let template of this.childNodes) {
+      // Other solutions we can try if needed: <script type="text/html">, or comment nodes
+      if (template instanceof HTMLTemplateElement) {
+        if (template.content.childNodes.length > 0) {
+          nodes.push(template.content.cloneNode(true));
+        } else if (template.childNodes.length > 0) {
+          // Fake template, suck its children out of the light DOM
+          nodes.push(...template.childNodes);
+        }
+      } else {
+        // Regular child, suck it out of the light DOM
+        nodes.push(template);
+      }
+    }
+
+    this.shadowRoot.append(...nodes);
+
+    this.#fixStyles();
+    this.#applyDarkMode();
+
+    discover(this.shadowRoot);
+
+    this.observer.observe(this, { childList: true, subtree: true, characterData: true });
+  }
+
+  #applyDarkMode(isDark = getComputedStyle(this).colorScheme === 'dark') {
+    // Hack to make dark mode work
+    // NOTE If any child nodes actually have .wa-dark, this will override it
+    for (let node of this.shadowRoot.children) {
+      node.classList.toggle('wa-dark', isDark);
+    }
+    this.classList.toggle('wa-dark', isDark);
+  }
+
+  /**
+   * @font-face does not work in shadow DOM in Chrome & FF, as of March 2025 https://issues.chromium.org/issues/41085401
+   * This works around this issue by traversing the shadow DOM CSS looking
+   * for @font-face rules or CSS imports to known font providers and copies them to the main document
+   */
+  async #fixStyles() {
+    let styleElements = [...this.shadowRoot.querySelectorAll('link[rel="stylesheet"], style')];
+
+    let loadStates = styleElements.map(element => {
+      try {
+        if (element.sheet?.cssRules) {
+          // Already loaded
+          return Promise.resolve(element.sheet);
+        }
+      } catch (e) {
+        // CORS
+        return Promise.resolve(null);
+      }
+
+      return new Promise((resolve, reject) => {
+        element.addEventListener('load', e => resolve(element.sheet));
+        element.addEventListener('error', e => reject(null));
+      });
+    });
+
+    await Promise.allSettled(loadStates);
+
+    let fontRules = findFontFaceRules(...this.shadowRoot.styleSheets);
+
+    if (!fontRules.length) {
+      return;
+    }
+
+    let doc = this.ownerDocument;
+    // Why not adoptedStyleSheets? Can't have @import in those yet
+    let id = `wa-scoped-hoisted-fonts`;
+    let style = doc.head.querySelector('style#' + id);
+    if (!style) {
+      style = Object.assign(doc.createElement('style'), { id, textContent: ' ' });
+      doc.head.append(style);
+    }
+    let sheet = style.sheet;
+
+    for (let rule of fontRules) {
+      let cssText = rule.cssText;
+      if (rule.type === CSSRule.FONT_FACE_RULE) {
+        if (fontFaceRules.has(cssText)) {
+          continue;
+        }
+        fontFaceRules.add(cssText);
+        sheet.insertRule(cssText);
+      } else if (rule.type === CSSRule.IMPORT_RULE) {
+        if (imports.has(rule.href)) {
+          continue;
+        }
+        imports.add(rule.href);
+        sheet.insertRule(cssText, 0);
+      }
+    }
+  }
+
+  static observedAttributes = [];
+}
+
+customElements.define('wa-scoped', WaScoped);
+
+export const WEB_FONT_HOSTS = [
+  'fonts.googleapis.com',
+  'fonts.gstatic.com',
+  'use.typekit.net',
+  'fonts.adobe.com',
+  'kit.fontawesome.com',
+  'pro.fontawesome.com',
+  'cdn.materialdesignicons.com',
+];
+
+function findFontFaceRules(...stylesheets) {
+  let ret = [];
+
+  for (let sheet of stylesheets) {
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch (e) {
+      // CORS
+      continue;
+    }
+
+    for (let rule of rules) {
+      if (rule.type === CSSRule.FONT_FACE_RULE) {
+        ret.push(rule);
+      } else if (rule.type === CSSRule.IMPORT_RULE) {
+        if (WEB_FONT_HOSTS.some(host => rule.href.includes(host))) {
+          ret.push(rule);
+        } else if (rule.styleSheet) {
+          ret.push(...findFontFaceRules(rule.styleSheet));
+        }
+      }
+    }
+  }
+
+  return ret;
+}

docs/assets/scripts/code-examples.js

@@ -17,7 +17,7 @@ document.addEventListener('click', event => {
     const code = codeExample.querySelector('code');
     const cdnUrl = document.documentElement.dataset.cdnUrl;
     const html =
-      `<script type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
+      `<script data-fa-kit-code="b10bfbde90" type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
       `<link rel="stylesheet" href="${cdnUrl}styles/themes/default.css">\n` +
       `<link rel="stylesheet" href="${cdnUrl}styles/webawesome.css">\n` +
       `<link rel="stylesheet" href="${cdnUrl}styles/utilities.css">\n\n` +

docs/assets/scripts/filter.js

@@ -1,3 +1,11 @@
+function debounce(func, wait) {
+  let timeout;
+  return function (...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}
+
 function updateResults(input) {
   const filter = input.value.toLowerCase().trim();
   let filtered = Boolean(filter);
@@ -18,8 +26,10 @@ function updateResults(input) {
   }
 }
 
+const debouncedUpdateResults = debounce(updateResults, 300);
+
 document.documentElement.addEventListener('input', e => {
   if (e.target?.matches('#block-filter wa-input')) {
-    updateResults(e.target);
+    debouncedUpdateResults(e.target);
   }
 });

docs/assets/scripts/my.js

@@ -0,0 +1,167 @@
+const my = (globalThis.my = new EventTarget());
+export default my;
+
+class PersistedArray extends Array {
+  constructor(key) {
+    super();
+    this.key = key;
+
+    if (this.key) {
+      this.fromLocalStorage();
+    }
+
+    // Items were updated in another tab
+    addEventListener('storage', event => {
+      if (event.key === this.key || !event.key) {
+        this.fromLocalStorage();
+      }
+    });
+  }
+
+  /**
+   * Update data from local storage
+   */
+  fromLocalStorage() {
+    // First, empty the array
+    this.splice(0, this.length);
+
+    // Then, fill it with the data from local storage
+    let saved = localStorage[this.key] ? JSON.parse(localStorage[this.key]) : null;
+
+    if (saved) {
+      this.push(...saved);
+    }
+  }
+
+  /**
+   * Write data to local storage
+   */
+  toLocalStorage() {
+    if (this.length > 0) {
+      localStorage[this.key] = JSON.stringify(this);
+    } else {
+      delete localStorage[this.key];
+    }
+  }
+}
+
+class SavedEntities extends EventTarget {
+  constructor({ key, type, url }) {
+    super();
+    this.key = key;
+    this.type = type;
+    this.url = url ?? type + 's';
+    this.saved = new PersistedArray(key);
+
+    let all = this;
+    this.entityPrototype = {
+      type: this.type,
+      baseUrl: this.baseUrl,
+
+      get url() {
+        return all.getURL(this);
+      },
+
+      get parentUrl() {
+        return all.getParentURL(this);
+      },
+
+      delete() {
+        all.delete(this);
+      },
+    };
+  }
+
+  getUid() {
+    if (this.saved.length === 0) {
+      return 1;
+    }
+
+    let uids = new Set(this.saved.map(p => p.uid));
+
+    // Find first available number
+    for (let i = 1; i <= this.saved.length + 1; i++) {
+      if (!uids.has(i)) {
+        return i;
+      }
+    }
+  }
+
+  get baseUrl() {
+    return `/docs/${this.url}/`;
+  }
+
+  getURL(entity) {
+    return this.getParentURL(entity) + entity.search;
+  }
+
+  getParentURL(entity) {
+    return this.baseUrl + entity.id + '/';
+  }
+
+  getObject(entity) {
+    let ret = Object.create(this.entityPrototype, Object.getOwnPropertyDescriptors(entity));
+    // debugger;
+    return ret;
+  }
+
+  /**
+   * Save an entity, either by updating its existing entry or creating a new one
+   * @param {object} entity
+   */
+  save(entity) {
+    if (!entity.uid) {
+      // First time saving
+      entity.uid = this.getUid();
+    }
+
+    let savedPalettes = this.saved;
+    let existingIndex = entity.uid ? this.saved.findIndex(p => p.uid === entity.uid) : -1;
+    let newIndex = existingIndex > -1 ? existingIndex : savedPalettes.length;
+
+    this.saved.splice(newIndex, 1, entity);
+
+    this.saved.toLocalStorage();
+
+    this.dispatchEvent(new CustomEvent('save', { detail: this.getObject(entity) }));
+
+    return entity;
+  }
+
+  delete(entity) {
+    let count = this.saved.length;
+
+    if (count === 0 || !entity?.uid) {
+      // No stored entities or this entity has not been saved
+      return;
+    }
+
+    // TODO improve UX of this
+    if (!confirm(`Are you sure you want to delete ${this.type} “${entity.title}”?`)) {
+      return;
+    }
+
+    for (let index; (index = this.saved.findIndex(p => p.uid === entity.uid)) > -1; ) {
+      this.saved.splice(index, 1);
+    }
+
+    if (this.saved.length === count) {
+      // Nothing was removed
+      return;
+    }
+
+    this.saved.toLocalStorage();
+
+    this.dispatchEvent(new CustomEvent('delete', { detail: this.getObject(entity) }));
+  }
+
+  dispatchEvent(event) {
+    super.dispatchEvent(event);
+    my.dispatchEvent(event);
+  }
+}
+
+my.palettes = new SavedEntities({
+  key: 'savedPalettes',
+  type: 'palette',
+});

docs/assets/scripts/sidebar-tweaks.js

@@ -1,206 +1,119 @@
-const sidebar = (globalThis.sidebar = {});
+import my from '/assets/scripts/my.js';
 
-sidebar.palettes = {
-  render() {
-    if (this.saved.length === 0) {
-      return;
-    }
+const sidebar = {
+  addChild(a, parentA) {
+    let parentLi = parentA.closest('li');
+    let ul = parentLi.querySelector(':scope > ul');
+    ul ??= parentLi.appendChild(document.createElement('ul'));
+    let li = document.createElement('li');
+    li.append(a);
+    ul.appendChild(li);
 
-    for (let palette of this.saved) {
-      sidebar.palette.render(palette);
-    }
-
-    sidebar.updateCurrent();
-  },
-
-  saved: localStorage.savedPalettes ? JSON.parse(localStorage.savedPalettes) : [],
-
-  save(saved = this.saved) {
-    this.saved = saved ?? [];
-
-    if (saved.length > 0) {
-      localStorage.savedPalettes = JSON.stringify(saved);
-    } else {
-      delete localStorage.savedPalettes;
-    }
-  },
-};
-
-sidebar.palette = {
-  getUid() {
-    let savedPalettes = sidebar.palettes.saved;
-    let uids = new Set(savedPalettes.map(p => p.uid));
-
-    if (savedPalettes.length === 0) {
-      return 1;
-    }
-
-    // Find first available number
-    for (let i = 1; i < savedPalettes.length + 1; i++) {
-      if (!uids.has(i)) {
-        return i;
-      }
-    }
-  },
-
-  equals(p1, p2) {
-    if (!p1 || !p2) {
-      return false;
-    }
-
-    return p1.id === p2.id && p1.uid === p2.uid;
-  },
-
-  delete(palette) {
-    let savedPalettes = sidebar.palettes.saved;
-    let count = savedPalettes.length;
-    if (count === 0) {
-      return;
-    }
-
-    // TODO improve UX of this
-    if (!confirm(`Are you sure you want to delete palette “${palette.title}”?`)) {
-      return;
-    }
-
-    savedPalettes = savedPalettes.filter(p => !sidebar.palette.equals(palette, p));
-
-    if (savedPalettes.length === count) {
-      // Nothing was removed
-      return;
-    }
-
-    // Update UI
-    let pathname = `/docs/palettes/${palette.id}/`;
-    let url = pathname + palette.search;
-    let uls = new Set();
-
-    for (let a of document.querySelectorAll(`#sidebar a[href="${url}"]`)) {
-      let li = a.closest('li');
-      let ul = li.closest('ul');
-      uls.add(ul);
-      li.remove();
-    }
-
-    // Remove empty lists
-    for (let ul of uls) {
-      if (!ul.children.length) {
-        ul.remove();
-      }
-    }
-
-    sidebar.updateCurrent();
-
-    sidebar.palettes.save(savedPalettes);
-
-    if (sidebar.palette.equals(globalThis.paletteApp?.saved, palette)) {
-      paletteApp.saved = null;
-    }
-  },
-
-  getSaved(palette, savedPalettes = sidebar.palettes.saved) {
-    return savedPalettes.find(p => sidebar.palette.equals(p, palette));
-  },
-
-  render(palette) {
-    // Find existing <a>
-    let { title, id, search, uid } = palette;
-
-    for (let a of document.querySelectorAll(`#sidebar a[href^="/docs/palettes/${id}/"][data-uid="${uid}"]`)) {
-      // Palette already in sidebar, just update it
-      a.textContent = palette.title;
-      a.href = `/docs/palettes/${id}/${search}`;
-      return;
-    }
-
-    let pathname = `/docs/palettes/${id}/`;
-    let url = pathname + search;
-    let parentA = document.querySelector(`a[href="${pathname}"]`);
-    let parentLi = parentA?.closest('li');
-    let a;
-
-    if (parentLi) {
-      a = Object.assign(document.createElement('a'), { href: url, textContent: title });
-      a.dataset.uid = uid;
-      let badges = [...parentLi.querySelectorAll('wa-badge')].map(badge => badge.cloneNode(true));
-      let ul = parentLi.querySelector('ul') ?? parentLi.appendChild(document.createElement('ul'));
-      let li = document.createElement('li');
-      let deleteButton = Object.assign(document.createElement('wa-icon-button'), {
-        name: 'trash',
-        label: 'Delete',
-        className: 'delete',
-      });
-
-      deleteButton.addEventListener('click', () => {
-        let palette = { id, uid, title: a.textContent, search: a.search };
-        sidebar.palette.delete(palette);
-      });
-
-      li.append(a, ' ', ...badges, deleteButton);
-      ul.appendChild(li);
-    }
-  },
-
-  save(palette, saved) {
-    let savedPalettes = sidebar.palettes.saved;
-    let existing = this.getSaved(saved ?? palette, savedPalettes);
-    let oldValues;
-
-    if (existing) {
-      // Rename
-      oldValues = { ...existing };
-      Object.assign(existing, palette);
-    } else {
-      savedPalettes.push(palette);
-    }
-
-    this.render(palette, oldValues);
-    sidebar.updateCurrent();
-
-    sidebar.palettes.save(savedPalettes);
-  },
-};
-
-sidebar.updateCurrent = function () {
-  // Find the sidebar link with the longest shared prefix with the current URL
-  let pathParts = location.pathname.split('/').filter(Boolean);
-  let prefixes = [];
-
-  if (pathParts.length === 1) {
-    // If at /docs/ we just use that, otherwise we want at least two parts (/docs/xxx/)
-    prefixes.push('/' + pathParts[0] + '/');
-  } else {
-    for (let i = 2; i <= pathParts.length; i++) {
-      prefixes.push('/' + pathParts.slice(0, i).join('/') + '/');
-    }
-  }
-
-  // Last prefix includes the search too (if any)
-  if (location.search) {
-    let params = new URLSearchParams(location.search);
-    params.sort();
-    prefixes.push(prefixes.at(-1) + location.search);
-  }
-
-  // We want to start from the longest prefix
-  prefixes.reverse();
-
-  for (let prefix of prefixes) {
-    let a = document.querySelector(`#sidebar a[href^="${prefix}"]`);
-
-    if (a) {
+    // If we are on the same page, update the current link
+    let url = location.href.replace(/#.+$/, '');
+    if (url.startsWith(a.href)) {
+      // Remove existing current
       for (let current of document.querySelectorAll('#sidebar a.current')) {
         current.classList.remove('current');
       }
+
       a.classList.add('current');
-      break;
     }
-  }
+
+    return a;
+  },
+
+  removeLink(a) {
+    if (!a || !a.isConnected) {
+      // Link doesn't exist or is already removed
+      return;
+    }
+
+    let li = a?.closest('li');
+    let ul = li?.closest('ul');
+    let parentA = ul?.closest('li')?.querySelector(':scope > a');
+
+    li?.remove();
+    if (ul?.children.length === 0) {
+      ul.remove();
+    }
+
+    if (a.classList.contains('current')) {
+      // If the deleted palette was the current one, the current one is now the parent
+      parentA.classList.add('current');
+    }
+  },
+
+  findEntity(entity) {
+    return document.querySelector(`#sidebar a[href^="${entity.baseUrl}"][data-uid="${entity.uid}"]`);
+  },
+
+  renderEntity(entity) {
+    let { url, parentUrl } = entity;
+
+    // Find parent
+    let parentA = document.querySelector(`#sidebar a[href="${parentUrl}"]`);
+    let parentLi = parentA?.closest('li');
+
+    if (!parentLi) {
+      throw new Error(`Cannot find parent url ${parentUrl}`);
+    }
+
+    // Find existing
+    let a = this.findEntity(entity);
+    let alreadyExisted = !!a;
+
+    a ??= document.createElement('a');
+
+    a.textContent = entity.title;
+    a.href = url;
+
+    if (!alreadyExisted) {
+      a.dataset.uid = entity.uid;
+
+      a = sidebar.addChild(a, parentA);
+
+      // This is mainly to port Pro badges
+      let badges = Array.from(parentLi.querySelectorAll('wa-badge'), badge => badge.cloneNode(true));
+      let append = [...badges];
+
+      if (entity.delete) {
+        let deleteButton = Object.assign(document.createElement('wa-icon-button'), {
+          name: 'trash',
+          label: 'Delete',
+          className: 'delete',
+        });
+        deleteButton.addEventListener('click', () => entity.delete());
+        append.push(deleteButton);
+      }
+
+      if (append.length > 0) {
+        a.closest('li').append(' ', ...append);
+      }
+    }
+  },
+
+  render() {
+    for (let type in my) {
+      let controller = my[type];
+
+      if (!controller.saved) {
+        continue;
+      }
+
+      for (let entity of controller.saved) {
+        let object = controller.getObject(entity);
+        this.renderEntity(object);
+      }
+    }
+  },
 };
 
-sidebar.render = function () {
-  this.palettes.render();
-};
+globalThis.sidebar = sidebar;
+
+// Update sidebar when my saved stuff changes
+my.addEventListener('delete', e => sidebar.removeLink(sidebar.findEntity(e.detail)));
+my.addEventListener('save', e => sidebar.renderEntity(e.detail));
 
 sidebar.render();
 window.addEventListener('turbo:render', () => sidebar.render());

docs/assets/scripts/theme-picker.js

@@ -1,12 +1,32 @@
+let initialPageLoadComplete = document.readyState === 'complete';
+
+if (!initialPageLoadComplete) {
+  window.addEventListener('load', () => {
+    initialPageLoadComplete = true;
+  });
+}
+
 // Helper for view transitions
-export function domChange(fn, { behavior = 'smooth' } = {}) {
+export function domChange(fn, { behavior = 'smooth', ignoreInitialLoad = true } = {}) {
   const canUseViewTransitions =
     document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
+  // Skip transitions on initial page load
+  if (!initialPageLoadComplete && ignoreInitialLoad) {
+    fn(false);
+    return null;
+  }
+
   if (canUseViewTransitions && behavior === 'smooth') {
-    document.startViewTransition(fn);
+    const transition = document.startViewTransition(() => {
+      fn(true);
+      // Wait a brief delay before finishing the transition to prevent jumpiness
+      return new Promise(resolve => setTimeout(resolve, 200));
+    });
+    return transition;
   } else {
-    fn(true);
+    fn(false);
+    return null;
   }
 }
 
@@ -100,6 +120,7 @@ const colorScheme = new ThemeAspect({
     domChange(() => {
       let dark = this.computedValue === 'dark';
       document.documentElement.classList.toggle(`wa-dark`, dark);
+      document.documentElement.dispatchEvent(new CustomEvent('wa-color-scheme-change', { detail: { dark } }));
     });
   },
 });

docs/assets/scripts/turbo.js

@@ -1,3 +1,6 @@
+import 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm';
+import { preventTurboFouce } from '/dist/webawesome.js';
+
 if (!window.___turboScrollPositions___) {
   window.___turboScrollPositions___ = {};
 }
@@ -70,3 +73,4 @@ function fixDSD(e) {
 window.addEventListener('turbo:before-cache', saveScrollPosition);
 window.addEventListener('turbo:before-render', restoreScrollPosition);
 window.addEventListener('turbo:render', restoreScrollPosition);
+preventTurboFouce();

docs/assets/scripts/tweak.js

@@ -1,6 +1,6 @@
 /**
  * Get import code for remixed themes and tweaked palettes.
  */
-export { theme as getThemeCode } from './tweak/code.js';
+export { getThemeCode } from './tweak/code.js';
 export { cdnUrl, hueRanges, hues, selectors, tints, urls } from './tweak/data.js';
 export { default as Permalink } from './tweak/permalink.js';

docs/assets/scripts/tweak/code.js

@@ -25,18 +25,23 @@ export function cssLiteral(value, options = {}) {
   }
 }
 
-export function theme(base, params, options) {
+// Params in correct order
+export const themeParams = ['colors', 'palette', 'brand', 'typography'];
+
+export function getThemeCode(base, params, options) {
   let ret = [];
 
   if (base) {
     ret.push(urls.theme(base));
   }
 
-  ret.push(
-    ...Object.entries(params)
-      .filter(([aspect, id]) => Boolean(id))
-      .map(([aspect, id]) => urls[aspect](id)),
-  );
+  for (let aspect of themeParams) {
+    let value = params[aspect];
+
+    if (value) {
+      ret.push(urls[aspect](value));
+    }
+  }
 
   return ret.map(url => cssImport(url, options)).join('\n');
 }

docs/assets/scripts/tweak/data.js

@@ -29,6 +29,45 @@ export const hueRanges = {
   pink: { min: 320, max: 365 }, // 45
 };
 
+export const moreHue = {
+  red: 'Redder',
+  orange: 'More orange', // https://www.reddit.com/r/grammar/comments/u9n0uo/is_it_oranger_or_more_orange/
+  yellow: 'Yellower',
+  green: 'Greener',
+  cyan: 'More cyan',
+  blue: 'Bluer',
+  indigo: 'More indigo',
+  pink: 'Pinker',
+};
+
+/**
+ * Max gray chroma (% of chroma of undertone) per hue
+ */
+export const maxGrayChroma = {
+  red: 0.2,
+  orange: 0.2,
+  yellow: 0.25,
+  green: 0.25,
+  cyan: 0.3,
+  blue: 0.35,
+  indigo: 0.35,
+  purple: 0.3,
+  pink: 0.25,
+};
+
+export const docsURLs = {
+  colors: '/docs/themes/',
+  palette: '/docs/palettes/',
+  typography: '/docs/themes/',
+};
+
+export const icons = {
+  colors: 'palette',
+  palette: 'swatchbook',
+  brand: 'droplet',
+  typography: 'font-case',
+};
+
 export const hues = Object.keys(hueRanges);
 
 export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95'];

docs/assets/scripts/tweak/permalink.js

@@ -13,56 +13,42 @@ export default class Permalink extends URLSearchParams {
     return Object.fromEntries(this.entries());
   }
 
-  #mappings = new WeakMap();
-
-  mapObject(obj, mapping = {}) {
-    this.#mappings.set(obj, mapping);
-  }
-
-  readFrom(obj) {
-    let mapping = this.#mappings.get(obj) ?? {};
-    let { keyFrom = IDENTITY, valueFrom = IDENTITY } = mapping;
-
-    for (let key in obj) {
-      let value = obj[key];
-      let mappedValue = valueFrom(value);
-      let mappedKey = keyFrom(key);
-      this.set(mappedKey, mappedValue);
-    }
-  }
-
-  writeTo(obj) {
-    let mapping = this.#mappings.get(obj) ?? {};
-    let { keyTo = IDENTITY, valueTo = IDENTITY, canExtend = false } = mapping;
-
-    for (let [key, value] of this) {
-      let mappedKey = keyTo(key);
-      let mappedValue = valueTo(value);
-
-      if (canExtend || mappedKey in obj) {
-        obj[mappedKey] = mappedValue;
-      }
-    }
-  }
-
   set(key, value, defaultValue) {
-    let oldValue = this.get(key);
+    if (equals(value, defaultValue) || equals(value, '')) {
+      value = null;
+    }
 
-    if (!value || value == defaultValue) {
+    value ??= null; // undefined -> null
+
+    let oldValue = Array.isArray(value) ? this.getAll(key) : this.get(key);
+    let changed = !equals(value, oldValue);
+
+    if (!changed) {
+      // Nothing to do here
+      return;
+    }
+
+    if (Array.isArray(value)) {
       super.delete(key);
+      value = value.slice();
 
-      if (oldValue) {
-        this.changed = true;
+      for (let v of value) {
+        if (v || v === 0) {
+          if (typeof v === 'object') {
+            super.append(key, JSON.stringify(v));
+          } else {
+            super.append(key, v);
+          }
+        }
       }
+    } else if (value === null) {
+      super.delete(key);
     } else {
       super.set(key, value);
-
-      if (String(value) !== String(oldValue)) {
-        this.changed = true;
-      }
     }
 
     this.sort();
+    this.changed ||= changed;
   }
 
   /**
@@ -79,3 +65,40 @@ export default class Permalink extends URLSearchParams {
     }
   }
 }
+
+function equals(value, oldValue) {
+  if (Array.isArray(value) || Array.isArray(oldValue)) {
+    value = toArray(value);
+    oldValue = toArray(oldValue);
+
+    if (value.length !== oldValue.length) {
+      return false;
+    }
+
+    return value.every((v, i) => equals(v, oldValue[i]));
+  }
+
+  // (value ?? oldValue ?? true) returns true if they're both empty (null or undefined)
+  [value, oldValue] = [value, oldValue].map(v => (!v && v !== false && v !== 0 ? null : v));
+  return value === oldValue || String(value) === String(oldValue);
+}
+
+/**
+ * Convert a value to an array. `undefined` and `null` values are converted to an empty array.
+ * @param {*} value - The value to convert.
+ * @returns {any[]} The converted array.
+ */
+function toArray(value) {
+  value ??= [];
+
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  // Don't convert "foo" into ["f", "o", "o"]
+  if (typeof value !== 'string' && typeof value[Symbol.iterator] === 'function') {
+    return Array.from(value);
+  }
+
+  return [value];
+}

docs/assets/scripts/tweak/util.js

@@ -0,0 +1,36 @@
+export function normalizeAngles(angles) {
+  // First, normalize
+  angles = angles.map(h => ((h % 360) + 360) % 360);
+
+  // Remove top and bottom 25% and find average
+  let averageHue =
+    angles
+      .toSorted((a, b) => a - b)
+      .slice(angles.length / 4, -angles.length / 4)
+      .reduce((a, b) => a + b, 0) / angles.length;
+
+  for (let i = 0; i < angles.length; i++) {
+    let h = angles[i];
+    let prevHue = angles[i - 1];
+    let delta = h - prevHue;
+
+    if (Math.abs(delta) > 180) {
+      let equivalent = [h + 360, h - 360];
+      // Offset hue to minimize difference in the direction that brings it closer to the average
+      let delta = h - averageHue;
+
+      if (Math.abs(equivalent[0] - prevHue) <= Math.abs(equivalent[1] - prevHue)) {
+        angles[i] = equivalent[0];
+      } else {
+        angles[i] = equivalent[1];
+      }
+    }
+  }
+
+  return angles;
+}
+
+export function subtractAngles(θ1, θ2) {
+  let [a, b] = normalizeAngles([θ1, θ2]);
+  return a - b;
+}

docs/assets/scripts/vue/directives/content.js

@@ -0,0 +1,22 @@
+// Like v-text, but doesn't complain if the element has content,
+// making it possible to use in a PE fashion, with the contents being the fallback
+export default function content(el, { value, arg }) {
+  if (!el.dataset.fallback) {
+    // Store the original content as a fallback the first time
+    el.dataset.fallback = el.textContent;
+  }
+
+  if (value === '') {
+    value = el.dataset.fallback;
+  } else {
+    if (arg === 'number') {
+      value = Number(value).toLocaleString(undefined, { maximumSignificantDigits: 2 });
+    }
+  }
+
+  if (arg === 'html') {
+    el.innerHTML = value;
+  } else {
+    el.textContent = value;
+  }
+}

docs/assets/scripts/vue/mixins/saved.js

@@ -0,0 +1,110 @@
+import my from '/assets/scripts/my.js';
+import Permalink from '/assets/scripts/tweak/permalink.js';
+
+export default {
+  data() {
+    return {
+      uid: undefined,
+      saved: null,
+      unsavedChanges: false,
+      permalink: new Permalink(),
+    };
+  },
+
+  created() {
+    if (this.permalink.has('uid')) {
+      this.uid = Number(this.permalink.get('uid'));
+      this.saved = this.controller.saved.find(p => p.uid === this.uid);
+    }
+
+    this.controller.addEventListener('delete', ({ detail: entity }) => {
+      if (entity.uid === this.saved?.uid) {
+        this.postDelete();
+      }
+    });
+  },
+
+  mounted() {
+    this.$nextTick().then(() => {
+      if (!location.search || this.saved) {
+        this.unsavedChanges = false;
+      }
+    });
+  },
+
+  computed: {
+    controller() {
+      return my[this.collection];
+    },
+
+    title() {
+      if (this.saved) {
+        return this.saved.title;
+      } else if (this.unsavedChanges) {
+        return this.defaultTitle;
+      } else {
+        return this.originalTitle;
+      }
+    },
+  },
+
+  watch: {
+    saved: {
+      deep: true,
+      handler() {
+        this.unsavedChanges = !this.saved;
+      },
+    },
+  },
+
+  methods: {
+    async save({ title } = {}) {
+      let uid = this.uid;
+
+      this.saved ??= { uid: this.uid };
+      this.saved.id = this.id;
+
+      if (title) {
+        // Renaming
+        this.saved.title = title;
+      } else {
+        this.saved.title ??= this.defaultTitle;
+      }
+
+      this.saved.search = location.search;
+
+      this.saved = this.controller.save(this.saved);
+
+      if (uid !== this.saved.uid) {
+        // UID changed (most likely from saving a new entity)
+        this.uid = this.saved.uid;
+        this.permalink.set('uid', this.uid);
+        this.permalink.updateLocation();
+        await this.$nextTick();
+        this.save(); // Save again to update the search param to include the UID
+      }
+
+      this.unsavedChanges = false;
+    },
+
+    rename() {
+      let newTitle = prompt('Title:', this.saved?.title ?? this.defaultTitle);
+
+      if (newTitle && newTitle !== this.saved?.title) {
+        this.save({ title: newTitle });
+      }
+    },
+
+    // Cannot name this delete() because Vue complains
+    deleteSaved() {
+      this.controller.delete(this.saved);
+    },
+
+    postDelete() {
+      this.saved = null;
+      this.permalink.delete('uid');
+      this.uid = undefined;
+      this.permalink.updateLocation();
+    },
+  },
+};

docs/assets/styles/docs.css

@@ -4,6 +4,7 @@
 @import 'outline.css';
 @import 'search.css';
 @import 'cera_typeface.css';
+@import 'theme-icons.css';
 
 :root {
   --wa-brand-orange: #f36944;
@@ -370,10 +371,22 @@ wa-page > main:has(> .index-grid) {
 
 .index-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
+  grid-template-columns: repeat(4, 1fr);
   gap: var(--wa-space-2xl);
   margin-block-end: var(--wa-space-3xl);
 
+  @media screen and (max-width: 1470px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @media screen and (max-width: 960px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media screen and (max-width: 500px) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
   a {
     border-radius: var(--wa-border-radius-l);
     text-decoration: none;
@@ -400,7 +413,6 @@ wa-page > main:has(> .index-grid) {
 
     &::part(header) {
       background-color: var(--header-background, var(--wa-color-neutral-fill-quiet));
-      border-bottom: none;
       display: flex;
       align-items: center;
       justify-content: center;

docs/assets/styles/search.css

@@ -7,8 +7,9 @@
   margin: 0 auto;
   overflow: hidden;
 
-  &::part(base) {
-    margin-block: 10rem;
+  &::part(dialog) {
+    margin-block-start: 10vh;
+    margin-block-end: 0;
   }
 
   &::part(body) {
@@ -23,20 +24,20 @@
   @media screen and (max-width: 900px) {
     max-width: calc(100% - 2rem);
 
-    &::part(base) {
+    &::part(dialog) {
       margin-block: 1rem;
     }
+
+    #site-search-container {
+      max-height: none;
+    }
   }
 }
 
 #site-search-container {
   display: flex;
   flex-direction: column;
-  max-height: calc(100vh - 20rem);
-
-  @media screen and (max-width: 900px) {
-    max-height: calc(100dvh - 2rem);
-  }
+  max-height: calc(100vh - 18rem);
 }
 
 /* Header */

docs/assets/styles/theme-icons.css

@@ -1,3 +1,61 @@
+wa-card:has(> .theme-icon-host, > [slot='header'] > .theme-icon-host) {
+  &::part(header) {
+    /* We want to add a background color, so any spacing needs to go on .theme-icon */
+    flex: 1;
+    padding: 0;
+    min-block-size: 0;
+  }
+
+  [slot='header'] {
+    width: 100%;
+  }
+}
+
+.theme-icon-host,
+.palette-icon-host {
+  flex: 1;
+  border-radius: inherit;
+
+  &[slot='header'],
+  [slot='header']:has(&) {
+    flex: 1;
+    border-radius: inherit;
+  }
+}
+
+.palette-icon {
+  display: grid;
+  grid-template-columns: repeat(var(--hues, 9), 1fr);
+  gap: var(--wa-space-3xs);
+  min-width: 20ch;
+  min-height: 9ch;
+  align-content: center;
+
+  .swatch {
+    height: 0.7em;
+    background: var(--color);
+    border-radius: var(--wa-border-radius-s);
+
+    &[data-suffix=''] {
+      height: 1.1em;
+    }
+  }
+}
+
+.theme-icon {
+  min-width: 18ch;
+  padding: var(--wa-space-xs) var(--wa-space-m);
+  border-radius: inherit;
+  box-sizing: border-box;
+
+  h2,
+  h3,
+  p {
+    margin-block: 0;
+    padding: 0;
+  }
+}
+
 .theme-color-icon {
   display: grid;
   gap: var(--wa-space-xs);
@@ -25,10 +83,50 @@
   display: flex;
   flex-direction: column;
   gap: var(--wa-space-xs);
+}
 
-  h3,
-  p {
-    margin-block: 0;
-    padding: 0;
+.theme-overall-icon {
+  display: flex;
+  flex-flow: column;
+  gap: var(--wa-space-xs);
+  justify-content: center;
+  width: 100%;
+  min-height: 7.5rem;
+  box-sizing: border-box;
+  background: var(--wa-color-surface-lowered);
+
+  .row {
+    display: flex;
+    gap: var(--wa-space-xs);
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .row-2 {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    contain: inline-size;
+    width: 100%;
+
+    wa-input {
+      min-width: 1em;
+    }
+  }
+
+  .swatches {
+    display: flex;
+    gap: var(--wa-space-3xs);
+
+    > div {
+      width: 1.25rem;
+      height: 1.25rem;
+      border-radius: var(--wa-border-radius-s);
+      background: var(--wa-color-fill-loud);
+      color: var(--wa-color-on-loud);
+
+      &.wa-brand {
+        width: 2.5rem;
+      }
+    }
   }
 }

docs/docs/components/card.md

@@ -15,27 +15,17 @@ icon: card
 
   <strong>Mittens</strong><br />
   This kitten is as cute as he is playful. Bring him home today!<br />
-  <small>6 weeks old</small>
+  <small class="wa-caption-m">6 weeks old</small>
 
-  <div slot="footer">
+  <div slot="footer" class="wa-split">
     <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
+    <wa-rating label="Rating"></wa-rating>
   </div>
 </wa-card>
 
 <style>
   .card-overview {
-    max-width: 300px;
-  }
-
-  .card-overview small {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .card-overview [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    width: 300px;
   }
 </style>
 ```
@@ -65,9 +55,9 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
 
 ```html {.example}
 <wa-card with-header class="card-header">
-  <div slot="header">
+  <div slot="header" class="wa-split">
     Header Title
-    <wa-icon-button name="gear" variant="solid" label="Settings"></wa-icon-button>
+    <wa-icon-button name="gear" variant="solid" label="Settings" class="wa-size-m"></wa-icon-button>
   </div>
 
   This card has a header. You can put all sorts of things in it!
@@ -78,19 +68,9 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
     max-width: 300px;
   }
 
-  .card-header [slot='header'] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
   .card-header h3 {
     margin: 0;
   }
-
-  .card-header wa-icon-button {
-    font-size: var(--wa-font-size-m);
-  }
 </style>
 ```
 
@@ -103,7 +83,7 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
 <wa-card with-footer class="card-footer">
   This card has a footer. You can put all sorts of things in it!
 
-  <div slot="footer">
+  <div slot="footer" class="wa-split">
     <wa-rating></wa-rating>
     <wa-button variant="brand">Preview</wa-button>
   </div>
@@ -113,12 +93,6 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
   .card-footer {
     max-width: 300px;
   }
-
-  .card-footer [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
 </style>
 ```
 
@@ -153,7 +127,7 @@ Use the `size` attribute to change a card's size.
 <wa-card with-footer size="small">
   This is a small card.
 
-  <footer slot="footer" class="wa-flank">
+  <footer slot="footer" class="wa-split">
     <wa-button variant="brand" pill>More Info</wa-button>
     <wa-rating></wa-rating>
   </footer>
@@ -162,7 +136,7 @@ Use the `size` attribute to change a card's size.
 <wa-card with-footer size="medium">
   This is a medium card (default).
 
-  <footer slot="footer" class="wa-flank">
+  <footer slot="footer" class="wa-split">
     <wa-button variant="brand" pill>More Info</wa-button>
     <wa-rating></wa-rating>
   </footer>
@@ -171,14 +145,39 @@ Use the `size` attribute to change a card's size.
 <wa-card with-footer size="large">
   This is a large card.
 
-  <footer slot="footer" class="wa-flank">
+  <footer slot="footer" class="wa-split">
     <wa-button variant="brand" pill>More Info</wa-button>
     <wa-rating></wa-rating>
   </footer>
 </wa-card>
 </div>
-
 ```
 
-<style>
-</style>
+### Appearance
+
+Use the `appearance` attribute to change the card's visual appearance.
+
+```html {.example}
+<div class="wa-grid">
+<wa-card>
+  <img
+    slot="image"
+    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+  />
+  <div slot="header">Outlined (default)</div>
+  Card content.
+</wa-card>
+{% for appearance in ['outlined filled', 'outlined accent', 'plain', 'filled', 'accent'] -%}
+<wa-card appearance="{{ appearance }}">
+  <img
+    slot="image"
+    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+  />
+  <div slot="header">{{ appearance | capitalize }}</div>
+  Card content.
+</wa-card>
+{%- endfor %}
+</div>
+```

docs/docs/components/details.md

@@ -77,6 +77,31 @@ The details component automatically adapts to right-to-left languages:
 </wa-details>
 ```
 
+### Appearance
+
+Use the `appearance` attribute to change the element’s visual appearance.
+
+```html {.example}
+<div class="wa-stack">
+<wa-details summary="Outlined (default)">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</wa-details>
+<wa-details summary="Filled" appearance="filled">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</wa-details>
+<wa-details summary="Filled + Outlined" appearance="filled outlined">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</wa-details>
+<wa-details summary="Plain" appearance="plain">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</wa-details>
+</div>
+```
+
 ### Grouping Details
 
 Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `wa-show` event.

docs/docs/components/icon.md

@@ -24,6 +24,86 @@ Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regu
 <wa-icon family="brands" name="web-awesome"></wa-icon>
 ```
 
+### Setting defaults via CSS
+
+You can use certain CSS custom properties to set icon defaults, not just on the icon itself, but any ancestor.
+This can be useful when you want certain parameters to vary based on context, e.g. icons inside callouts or all icons for a given theme.
+
+:::warning
+These CSS properties are intended to set **defaults**, and thus only make a difference when the corresponding attributes are not set.
+In future versions of Web Awesome, we may change this behavior to allow CSS properties to override attributes if `!important` is used.
+:::
+
+For example, here is how you can use CSS custom properties to set a default icon for each type of callout:
+
+```html {.example}
+<wa-callout>
+  <!-- Look ma, no attributes! -->
+  <wa-icon slot="icon"></wa-icon>
+  This is a normal callout.
+</wa-callout>
+
+<wa-callout variant="danger">
+  <wa-icon slot="icon" name="dumpster-fire" variant="solid"></wa-icon>
+  This is a callout with an explicit icon, which overrides these defaults.
+</wa-callout>
+
+<wa-callout variant="warning">
+  <!-- Look ma, no attributes! -->
+  <wa-icon slot="icon"></wa-icon>
+  Here be dragons.
+</wa-callout>
+
+<wa-callout variant="danger">
+  <!-- Look ma, no attributes! -->
+  <wa-icon slot="icon"></wa-icon>
+  Here be more dragons.
+</wa-callout>
+
+<wa-callout variant="success">
+  <!-- Look ma, no attributes! -->
+  <wa-icon slot="icon"></wa-icon>
+  Success!
+</wa-callout>
+
+<style>
+wa-callout {
+  --wa-icon-variant: regular;
+  --wa-icon-name: info-circle;
+
+  &[variant="warning"] {
+    --wa-icon-name: triangle-exclamation;
+  }
+
+  &[variant="danger"] {
+    --wa-icon-name: circle-exclamation;
+  }
+
+  &[variant="success"] {
+    --wa-icon-name: circle-check;
+  }
+}
+</style>
+```
+
+You can even set icons dynamically, as a response to user interaction or media queries.
+For example, here's how we can change the icon on hover:
+
+```html {.example}
+<wa-button class="github" href="https://github.com/webawesome/webawesome"><wa-icon slot="prefix" fixed-width></wa-icon> GitHub Repo</wa-button>
+<style>
+.github {
+  --wa-icon-name: github;
+  --wa-icon-family: brands;
+
+  &:hover {
+    --wa-icon-name: arrow-up-right-from-square;
+    --wa-icon-family: classic;
+  }
+}
+</style>
+```
+
 ### Colors
 
 Icons inherit their color from the current text color. Thus, you can set the `color` property on the `<wa-icon>` element or an ancestor to change the color.

docs/docs/components/index.njk

@@ -2,13 +2,10 @@
 title: Components
 description: Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.
 layout: overview
-categories:
-  - actions
-  - feedback: 'Feedback & Status'
-  - imagery
-  - inputs
-  - navigation
-  - organization
-  - helpers: 'Utilities'
 override:tags: []
+categories:
+  tags: [actions, feedback, imagery, inputs, navigation, organization, helpers]
+  titles:
+    feedback: 'Feedback & Status'
+    helpers: 'Utilities'
 ---

docs/docs/components/page.md

@@ -885,4 +885,4 @@ If you don’t want to use [native styles](/docs/native/), you can include this
 
 ```html
 <link rel="stylesheet" href="{% cdnUrl 'styles/components/page.css' %}" />
-```
+```

docs/docs/docs.11tydata.js

@@ -1,10 +1,108 @@
+/**
+ * Global data for all pages
+ */
+import { sort } from '../_utils/filters.js';
+
 export default {
   eleventyComputed: {
-    children(data) {
-      let mainTag = data.tags?.[0];
-      let collection = data.collections[mainTag] ?? [];
+    /**
+     * Default parent slug. Can be overridden by explicitly setting parent in the data.
+     * It can be either the URL slug of a page in the same directory or a parent directory.
+     * @returns {string | undefined}
+     */
+    parent(data) {
+      let { parent, page } = data;
 
-      return collection.filter(item => item.data.parent === data.page.fileSlug);
+      if (parent) {
+        return parent;
+      }
+
+      return page.url.split('/').filter(Boolean).at(-2);
+    },
+
+    /**
+     * URL of parent page
+     * @returns {string | undefined}
+     */
+    parentUrl(data) {
+      let { parent, page } = data;
+      return getParentUrl(page.url, parent);
+    },
+
+    /**
+     * Collection item of parent page
+     * @returns {object | undefined} Parent page item
+     */
+    parentItem(data) {
+      let { parentUrl } = data;
+      return data.collections.all.find(item => item.url === parentUrl);
+    },
+
+    /**
+     * Child pages of current page
+     * @returns {object[]} Array of child pages
+     */
+    children(data) {
+      let { collections, page, parentOf } = data;
+
+      if (parentOf) {
+        return collections[parentOf];
+      }
+
+      let collection = collections.all ?? [];
+      let url = page.url;
+
+      let ret = collection.filter(item => {
+        return item.data.parentUrl === url;
+      });
+
+      sort(ret);
+
+      return ret;
     },
   },
 };
+
+/**
+ * Resolve a parent slug against a page URL
+ * @param {string} url - The URL of the page
+ * @param {string} parent - The slug of the parent page
+ * @returns {string} The resolved URL of the parent page
+ */
+function getParentUrl(url, parent) {
+  if (!parent) {
+    return undefined;
+  }
+
+  let parts = url.split('/').filter(Boolean);
+  let ancestorIndex = parts.findLastIndex(part => part === parent);
+  let retParts = parts.slice();
+
+  if (ancestorIndex > -1) {
+    // parent is an ancestor
+    retParts.splice(ancestorIndex + 1);
+  } else {
+    // parent is a sibling in the same directory
+    retParts.splice(-1, 1, parent);
+  }
+
+  let ret = retParts.join('/');
+
+  if (url.startsWith('/')) {
+    // If the current page starts with a slash, make sure the parent does too
+    // This is pretty much always the case with 11ty page URLs
+    ret = '/' + ret;
+  }
+
+  if (!retParts.at(-1)?.includes('.') && !ret.endsWith('/')) {
+    // If no extension, make sure to end with a slash
+    ret += '/';
+  }
+
+  if (ret === '/docs/') {
+    // We don't want anyone's parent to be "Installation"!
+    ret = '/';
+  }
+
+  return ret;
+}

docs/docs/experimental/clamped-colors.njk

@@ -1,13 +1,10 @@
 ---
-title: Clamped brand tokens
+title: Clamped Color Tokens
 layout: block
 ---
 
-{% set tints = ['40-max', '50-max', '60-max', '40-min', '50-min', '60-min'] %}
-
-{% for hue in hues %}
-<link href="/dist/styles/brand/{{ hue }}.css" rel="stylesheet">
-{% endfor %}
+{% set tints = ['max-50', 'max-60', 'max-70', 'min-50', 'min-60', 'min-70'] %}
+{% set hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'] %}
 
 <table class="colors">
   <thead>
@@ -20,18 +17,18 @@ layout: block
     </tr>
   </thead>
 {% for hue in hues -%}
-<tr class="wa-brand-{{ hue }}">
+<tr class="wa-color-{{ hue }}">
   <th>{{ hue | capitalize }}</th>
   <td class="core-column">
-    <div class="color swatch" style="background-color: var(--wa-color-brand); color: var(--wa-color-brand-on);">
+    <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-on); --key: var(--wa-color-{{ hue }}-key);">
       {{ palettes[paletteId][hue].maxChromaTint }}
-      <wa-copy-button value="--wa-color-brand" copy-label="--wa-color-brand"></wa-copy-button>
+      <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
     </div>
   </td>
   {% for tint in tints -%}
     <td>
-      <div class="color swatch" style="background-color: var(--wa-color-brand-{{ tint }})">
-        <wa-copy-button value="--wa-color-brand-{{ tint }}" copy-label="--wa-color-brand-{{ tint }}"></wa-copy-button>
+      <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 -%}
@@ -41,7 +38,7 @@ layout: block
 
 <style>
 .core-column .color.swatch::before {
-  counter-reset: key var(--wa-color-brand-key);
+  counter-reset: key var(--key);
   content: counter(key);
 }
-</style>
+</style>

docs/docs/index.md

@@ -32,15 +32,11 @@ To get everything included in Web Awesome, add the following code to the `<head>
 
 This snippet includes three parts:
 1. **The default theme**, a stylesheet that gives a cohesive look to Web Awesome components with both light and dark modes
-2. **Web Awesome styles**, an optional stylesheet that [styles native HTML elements](/docs/native) and includes [utility classes](/docs/utilities) you can use in your project 
+2. **Web Awesome styles**, an optional stylesheet that [styles native HTML elements](/docs/native) and includes [utility classes](/docs/utilities) you can use in your project
 3. **The autoloader**, a lightweight script watches the DOM for unregistered Web Awesome elements and lazy loads them for you — even if they're added dynamically
 
 Now you can [start using Web Awesome!](/docs/usage)
 
-:::info
-While convenient, autoloading may lead to a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/). The linked article describes some ways to alleviate it.
-:::
-
 ---
 
 ## Using Font Awesome Kit Codes
@@ -62,7 +58,7 @@ Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You
 
 ## Advanced Setup
 
-The autoloader is the easiest way to use Web Awesome, but different projects (or your own preferences!) may require different installation methods. 
+The autoloader is the easiest way to use Web Awesome, but different projects (or your own preferences!) may require different installation methods.
 
 ### Installing via npm
 
@@ -126,4 +122,4 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you
   // Get the path to an asset, e.g. /path/to/assets/file.ext
   const assetPath = getBasePath('file.ext');
 </script>
-```
+```

docs/docs/layout.njk

@@ -2,6 +2,7 @@
 title: Layout
 description: Layout components and utility classes help you organize content that can adapt to any device or screen size. See the [installation instructions](#installation) to use Web Awesome's layout tools in your project.
 layout: overview
+parentOf: layout
 categories: ["components", "utilities"]
 override:tags: []
 ---
@@ -22,4 +23,4 @@ Or, you can choose to import _only_ the utilities:
 ```html
 <link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
 ```
-{% endmarkdown %}
+{% endmarkdown %}

docs/docs/native/button.md

@@ -33,7 +33,7 @@ Use the [variant utility classes](../utilities/color.md) to set the button's sem
 
 ### Appearance
 
-Use the [appearance utility classes](../utilities/appearance.md) to change the button's visual appearance:
+Use the [appearance utility classes](/docs/utilities/appearance) to change the button's visual appearance:
 
 ```html {.example}
 <div style="margin-block-end: 1rem;">

docs/docs/native/callout.md

@@ -57,7 +57,7 @@ Use the [variant utility classes](../utilities/color.md) to set the callout's co
 
 ### Appearance
 
-Use the [appearance utility classes](../utilities/appearance.md) to change the callout's visual appearance (the default is `outlined filled`).
+Use the [appearance utility classes](/docs/utilities/appearance) to change the callout's visual appearance (the default is `outlined filled`).
 
 ```html {.example}
 <article class="wa-callout wa-brand wa-outlined wa-accent">

docs/docs/native/details.md

@@ -19,6 +19,35 @@ file: styles/native/details.css
 
 ## Examples
 
+### Appearance
+
+Use the [appearance utility classes](/docs/utilities/appearance) to change the element's visual appearance:
+
+```html {.example}
+<div class="wa-stack">
+<details>
+  <summary>Outlined (default)</summary>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</details>
+<details class="wa-filled">
+  <summary>Filled</summary>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</details>
+<details class="wa-filled wa-outlined">
+  <summary>Filled + Outlined</summary>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</details>
+<details class="wa-plain">
+  <summary>Plain</summary>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</details>
+</div>
+```
+
 ### Right-to-Left Languages
 
 The details styling automatically adapts to right-to-left languages:

docs/docs/native/input.md

@@ -42,6 +42,14 @@ wa-code-demo::part(preview) {
 <wa-input label="WA Input (url)" type="url"></wa-input>
 ```
 
+## Pill shaped text fields
+
+Add the `wa-pill` class to an `<input>` to make it pill-shaped.
+
+```html {.example}
+<label>Input <input type="text" placeholder="placeholder" class="wa-pill"></label>
+```
+
 ## Color Picker
 
 Basic:

docs/docs/palettes/index.njk

@@ -5,6 +5,6 @@ layout: overview
 override:tags: []
 forTag: palette
 categories:
+  tags: [other, pro]
   other: Free
-  pro: Pro
 ---

docs/docs/palettes/tweak.css

@@ -25,9 +25,16 @@ wa-dropdown > .color.swatch {
     --track-color-inactive: transparent;
     --track-color-active: transparent;
     --thumb-color: var(--color-tweaked, var(--color));
+    --thumb-shadow: 0 0 0 var(--thumb-gap) var(--wa-color-surface-default),
+      var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
+        calc(var(--wa-shadow-offset-x-m) * -1 + var(--thumb-gap)) var(--wa-color-shadow);
+
+    &:active {
+      --thumb-size: 2em;
+    }
 
     &::part(base) {
-      background: linear-gradient(to right in oklch, var(--color-1), var(--color-2));
+      background: linear-gradient(to right in var(--color-interpolation-space, oklab), var(--color-1), var(--color-2));
     }
   }
 
@@ -63,13 +70,20 @@ wa-dropdown > .color.swatch {
 .hue-shift-slider {
   --color-1: oklch(from var(--color) l c calc(h + var(--min, 0)));
   --color-2: oklch(from var(--color) l c calc(h + var(--max, 0)));
+  --color-interpolation-space: oklch;
 }
 
 .chroma-scale-slider {
   --color: var(--wa-color-brand);
   --color-1: oklch(from var(--color) l calc(c * var(--min)) h);
   --color-2: oklch(from var(--color) l calc(c * var(--max)) h);
-  --color-tweaked: oklch(from var(--color) l calc(c * var(--chroma-scale)) h);
+}
+
+.gray-chroma-slider {
+  --color: var(--wa-color-gray);
+  --color-1: oklch(from var(--wa-color-gray) l 0 none);
+  --color-2: oklch(from var(--color-gray-undertone) l calc(c * var(--max)) h);
+  margin-top: var(--wa-space-m);
 }
 
 .popup {
@@ -91,13 +105,13 @@ wa-dropdown > .color.swatch {
   td:not([data-hue='gray'] *) {
     --tweak-c: calc(c * var(--chroma-scale, 1));
     --tweak-h: calc(h + var(--hue-shift, 0));
-    --color-tweaked: oklch(from var(--color) l var(--tweak-c) var(--tweak-h));
+
     --color-tweaked-no-chroma-scale: oklch(from var(--color) l c var(--tweak-h));
     --color-tweaked-no-hue-shift: oklch(from var(--color) l var(--tweak-c) h);
 
     &:is([data-tint='90'], [data-tint='95']) {
       /* Work around  https://bugs.webkit.org/show_bug.cgi?id=287637 */
-      --color-tweaked: lch(from var(--color) l var(--tweak-c) var(--tweak-h));
+
       --color-tweaked-no-chroma-scale: lch(from var(--color) l c var(--tweak-h));
       --color-tweaked-no-hue-shift: lch(from var(--color) l var(--tweak-c) h);
 
@@ -111,14 +125,18 @@ wa-dropdown > .color.swatch {
 
     &:is(.tweaking *) {
       --color-2-height: 70%;
+    }
 
-      &:is(.tweaking-chroma *) {
-        --color: var(--color-tweaked-no-chroma-scale);
-      }
+    &:is(.tweaking-chroma *) {
+      --color: var(--color-tweaked-no-chroma-scale);
+    }
 
-      &:is(.tweaking-hue *) {
-        --color: var(--color-tweaked-no-hue-shift);
-      }
+    &:is(.tweaking-hue *) {
+      --color: var(--color-tweaked-no-hue-shift);
+    }
+
+    &:is(.tweaking-gray-chroma *) {
+      --color: var(--color-tweaked-no-gray-chroma);
     }
   }
 
@@ -159,6 +177,29 @@ wa-dropdown > .color.swatch {
   }
 }
 
-[v-if='saved'] {
+/* Better UI before Vue initializes */
+[v-if='saved'],
+[v-if^='tweaked'] {
   display: none;
 }
+
+.core-color {
+  wa-radio-button::part(base) {
+    width: 2em;
+    height: 2em;
+    padding: 0;
+    border-radius: var(--wa-border-radius-circle);
+    background: var(--color);
+    background-clip: border-box;
+  }
+
+  wa-radio-button:is([checked], :state(checked))::part(base) {
+    box-shadow:
+      inset 0 0 0 var(--indicator-width) var(--indicator-color),
+      inset 0 0 0 calc(var(--indicator-width) + 1.5px) var(--wa-color-surface-default);
+  }
+
+  &::part(form-control-input) {
+    gap: var(--wa-space-xs);
+  }
+}

docs/docs/palettes/tweak.js

@@ -3,8 +3,11 @@ import Color from 'https://colorjs.io/dist/color.js';
 import { createApp, nextTick } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
 import { cdnUrl, hueRanges, hues, Permalink, tints } from '../../assets/scripts/tweak.js';
 import { cssImport, cssLiteral, cssRule } from '../../assets/scripts/tweak/code.js';
-import { selectors, urls } from '../../assets/scripts/tweak/data.js';
+import { maxGrayChroma, moreHue, selectors, urls } from '../../assets/scripts/tweak/data.js';
+import { subtractAngles } from '../../assets/scripts/tweak/util.js';
 import Prism from '/assets/scripts/prism.js';
+import content from '/assets/scripts/vue/directives/content.js';
+import savedMixin from '/assets/scripts/vue/mixins/saved.js';
 
 await Promise.all(['wa-slider'].map(tag => customElements.whenDefined(tag)));
 
@@ -34,59 +37,81 @@ for (let palette in allPalettes) {
   }
 }
 
+const percentFormatter = value => value.toLocaleString(undefined, { style: 'percent' });
+
 let paletteAppSpec = {
+  mixins: [savedMixin],
+
   data() {
     let appRoot = document.querySelector('#palette-app');
-    let paletteId = appRoot.dataset.paletteId;
-    let palette = allPalettes[paletteId];
+    let id = appRoot.dataset.paletteId;
+    let palette = allPalettes[id];
 
     return {
-      uid: undefined,
-      paletteId,
-      paletteTitle: palette.title,
+      id,
+      originalTitle: palette.title,
       originalColors: palette.colors,
-      permalink: new Permalink(),
       hueRanges,
       hueShifts: Object.fromEntries(hues.map(hue => [hue, 0])),
       chromaScale: 1,
+      grayChroma: undefined,
+      grayColor: undefined,
       tweaking: {},
-      saved: null,
+      type: 'palette',
+      collection: 'palettes',
     };
   },
 
   created() {
-    // Read URL params and apply them. This facilitates permalinks.
-    this.permalink.mapObject(this.hueShifts, {
-      keyTo: key => key.replace(/-shift$/, ''),
-      keyFrom: key => key + '-shift',
-      valueFrom: value => (!value ? '' : Number(value)),
-      valueTo: value => (!value ? 0 : Number(value)),
-    });
+    // Non-reactive variables to expose
+    Object.assign(this, { moreHue });
+
+    this.grayChroma = this.originalGrayChroma;
+    this.grayColor = this.originalGrayColor;
 
     if (location.search) {
-      // Update from URL
-      this.permalink.writeTo(this.hueShifts);
-
-      if (this.permalink.has('chroma-scale')) {
-        this.chromaScale = Number(this.permalink.get('chroma-scale') || 1);
+      // Read URL params and apply them. This facilitates permalinks.
+      for (let hue in this.hueShifts) {
+        if (this.permalink.has(hue + '-shift')) {
+          this.hueShifts[hue] = Number(this.permalink.get(hue + '-shift'));
+        }
       }
 
-      if (this.permalink.has('uid')) {
-        this.uid = Number(this.permalink.get('uid'));
-      }
+      for (let param of ['chroma-scale', 'gray-color', 'gray-chroma']) {
+        if (this.permalink.has(param)) {
+          let value = this.permalink.get(param);
 
-      let palette = { id: this.paletteId, uid: this.uid, search: location.search };
-      this.saved = sidebar.palette.getSaved(palette);
+          if (!isNaN(value)) {
+            // Convert numeric values to numbers
+            value = Number(value);
+          }
+
+          let prop = camelCase(param);
+          this[prop] = value;
+        }
+      }
+    }
+  },
+
+  mounted() {
+    for (let ref in this.$refs) {
+      this.$refs[ref].tooltipFormatter = percentFormatter;
     }
   },
 
   computed: {
-    global() {
-      return globalThis;
+    /** Default palette title for saving */
+    defaultTitle() {
+      return this.originalTitle + ' (tweaked)';
     },
 
     tweaks() {
-      return { hueShifts: this.hueShifts, chromaScale: this.chromaScale };
+      return {
+        hueShifts: this.hueShifts,
+        chromaScale: this.chromaScale,
+        grayColor: this.grayColor,
+        grayChroma: this.grayChroma,
+      };
     },
 
     isTweaked() {
@@ -96,7 +121,7 @@ let paletteAppSpec = {
     code() {
       let ret = {};
       for (let language of ['html', 'css']) {
-        let code = getPaletteCode(this.paletteId, this.tweaks, { language, cdnUrl });
+        let code = getPaletteCode(this.id, this.colors, this.tweaked, { language, cdnUrl });
         ret[language] = {
           raw: code,
           highlighted: Prism.highlight(code, Prism.languages[language], language),
@@ -107,47 +132,46 @@ let paletteAppSpec = {
     },
 
     colors() {
-      let ret = {};
+      return applyTweaks.call(this, this.originalColors, this.tweaks, this.tweaked);
+    },
 
-      for (let hue in this.originalColors) {
-        let originalScale = this.originalColors[hue];
-        let scale = (ret[hue] = {});
-        let descriptors = Object.getOwnPropertyDescriptors(originalScale);
-        Object.defineProperties(scale, {
-          maxChromaTint: { ...descriptors.maxChromaTint, enumerable: false },
-          maxChromaTintRaw: { ...descriptors.maxChromaTintRaw, enumerable: false },
-        });
+    colorsMinusChromaScale() {
+      let tweaked = { ...this.tweaked, chromaScale: false };
+      return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
+    },
 
-        for (let tint of tints) {
-          let oklch = originalScale[tint].coords.slice();
+    colorsMinusHueShifts() {
+      let tweaked = { ...this.tweaked, hue: false };
+      return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
+    },
 
-          if (this.hueShifts[hue]) {
-            oklch[2] += this.hueShifts[hue];
-          }
-
-          if (this.chromaScale !== 1) {
-            oklch[1] *= this.chromaScale;
-          }
-
-          scale[tint] = new Color('oklch', oklch);
-        }
-      }
-
-      return ret;
+    colorsMinusGrayChroma() {
+      let tweaked = { ...this.tweaked, grayChroma: false };
+      return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
     },
 
     tweaked() {
-      return {
-        chroma: this.chromaScale !== 1,
-        hue: Object.values(this.hueShifts).some(Boolean),
+      let anyHueTweaked = Object.values(this.hueShifts).some(Boolean);
+      let hue = anyHueTweaked
+        ? Object.fromEntries(Object.entries(this.hueShifts).map(([hue, shift]) => [hue, shift !== 0]))
+        : false;
+
+      let ret = {
+        chromaScale: this.chromaScale !== 1,
+        hue,
+        grayChroma: this.grayChroma !== this.originalGrayChroma,
+        grayColor: this.grayColor !== this.originalGrayColor,
       };
+
+      let anyTweaked = Object.values(ret).some(Boolean);
+      return anyTweaked ? ret : false;
     },
 
     tweaksHumanReadable() {
       let ret = {};
 
       if (this.chromaScale !== 1) {
-        ret.chromaScale = 'more ' + (this.chromaScale > 1 ? 'vibrant' : 'muted');
+        ret.chromaScale = 'More ' + (this.chromaScale > 1 ? 'vibrant' : 'muted');
       }
 
       for (let hue in this.hueShifts) {
@@ -158,63 +182,99 @@ let paletteAppSpec = {
         }
 
         let relHue = shift < 0 ? arrayPrevious(hues, hue) : arrayNext(hues, hue);
-        let hueTweak =
-          {
-            red: 'redder',
-            orange: 'oranger',
-            indigo: 'more indigo',
-          }[relHue] ?? relHue + 'er';
+        let hueTweak = moreHue[relHue] ?? relHue + 'er';
 
-        ret[hue] = hueTweak + ' ' + hue + 's';
+        ret[hue] = capitalize(hueTweak + ' ' + hue + 's');
+      }
+
+      if (this.tweaked.grayChroma || this.tweaked.grayColor) {
+        if (this.tweaked.grayChroma === 0) {
+          ret.grayChroma = 'Achromatic grays';
+        } else {
+          if (this.tweaked.grayColor) {
+            ret.grayColor = capitalize(this.grayColor) + ' gray undertone';
+          }
+
+          if (this.tweaked.grayChroma) {
+            let more = this.tweaked.grayChroma > this.originalGrayChroma;
+            ret.grayChroma = `More ${more ? 'colorful' : 'neutral'} grays`;
+          }
+        }
       }
 
       return ret;
     },
 
     originalContrasts() {
+      return getContrasts(this.originalColors);
+    },
+
+    contrasts() {
+      return getContrasts(this.colors, this.originalContrasts);
+    },
+
+    originalCoreColors() {
       let ret = {};
-
       for (let hue in this.originalColors) {
-        ret[hue] = {};
+        let maxChromaTintRaw = this.originalColors[hue].maxChromaTintRaw;
+        ret[hue] = this.originalColors[hue][maxChromaTintRaw];
+      }
+      return ret;
+    },
 
-        for (let tintBg of tints) {
-          ret[hue][tintBg] = {};
-          let bgColor = this.originalColors[hue][tintBg];
-
-          if (!bgColor || !bgColor.contrast) {
-            continue;
-          }
-
-          for (let tintFg of tints) {
-            let contrast = bgColor.contrast(this.originalColors[hue][tintFg], 'WCAG21');
-            ret[hue][tintBg][tintFg] = contrast;
-          }
-        }
+    coreColors() {
+      let ret = {};
+      for (let hue in this.colors) {
+        let maxChromaTintRaw = this.colors[hue].maxChromaTintRaw;
+        ret[hue] = this.colors[hue][maxChromaTintRaw];
       }
 
       return ret;
     },
 
-    contrasts() {
-      let ret = {};
+    originalGrayColor() {
+      let grayHue = this.originalCoreColors.gray.get('h');
+      let minDistance = Infinity;
+      let closestHue = null;
 
-      for (let hue in this.colors) {
-        ret[hue] = {};
+      for (let name in this.originalCoreColors) {
+        if (name === 'gray') {
+          continue;
+        }
 
-        for (let tintBg in this.colors[hue]) {
-          ret[hue][tintBg] = {};
-          let bgColor = this.colors[hue][tintBg];
-
-          for (let tintFg in this.colors[hue]) {
-            let fgColor = this.colors[hue][tintFg];
-            let value = bgColor.contrast(fgColor, 'WCAG21');
-            let original = this.originalContrasts[hue][tintBg][tintFg];
-            ret[hue][tintBg][tintFg] = { value, original, bgColor, fgColor };
-          }
+        let hue = this.originalCoreColors[name].get('h');
+        let distance = Math.abs(subtractAngles(hue, grayHue));
+        if (distance < minDistance) {
+          minDistance = distance;
+          closestHue = name;
         }
       }
 
-      return ret;
+      return closestHue ?? 'indigo';
+    },
+
+    originalGrayChroma() {
+      let coreTint = this.originalColors.gray.maxChromaTint;
+      let grayChroma = this.originalColors.gray[coreTint].get('c');
+      if (grayChroma === 0 || grayChroma === null) {
+        return 0;
+      }
+
+      let grayColorChroma = this.originalColors[this.originalGrayColor][coreTint].get('c');
+      return grayChroma / grayColorChroma;
+    },
+
+    /**
+     * We want to preserve the original grayChroma selection so that when the user switches to another undertone
+     * that supports higher chromas, their selection will be there.
+     * This property is the gray chroma % that is actually applied.
+     */
+    computedGrayChroma() {
+      return Math.min(this.grayChroma, this.maxGrayChroma);
+    },
+
+    maxGrayChroma() {
+      return maxGrayChroma[this.grayColor] ?? 0.3;
     },
   },
 
@@ -222,7 +282,9 @@ let paletteAppSpec = {
     hueShifts: {
       deep: true,
       handler() {
-        this.permalink.readFrom(this.hueShifts);
+        for (let hue in this.hueShifts) {
+          this.permalink.set(hue + '-shift', this.hueShifts[hue], 0);
+        }
       },
     },
 
@@ -230,6 +292,14 @@ let paletteAppSpec = {
       this.permalink.set('chroma-scale', this.chromaScale, 1);
     },
 
+    grayColor() {
+      this.permalink.set('gray-color', this.grayColor, this.originalGrayColor);
+    },
+
+    grayChroma() {
+      this.permalink.set('gray-chroma', this.grayChroma, this.originalGrayChroma);
+    },
+
     tweaks: {
       deep: true,
       async handler(value, oldValue) {
@@ -238,96 +308,41 @@ let paletteAppSpec = {
         // Update page URL
         this.permalink.updateLocation();
 
-        if (this.saved) {
-          this.save({ silent: true });
-        }
+        this.unsavedChanges = true;
       },
     },
   },
 
   methods: {
-    save({ silent } = {}) {
-      let title = silent
-        ? (this.saved?.title ?? this.paletteTitle)
-        : prompt('Palette title:', `${this.paletteTitle} (tweaked)`);
-
-      if (!title) {
-        return;
-      }
-
-      let uid = this.uid;
-
-      if (!uid) {
-        this.uid = uid = sidebar.palette.getUid();
-
-        this.permalink.set('uid', uid);
-        this.permalink.updateLocation();
-      }
-
-      let palette = { title, id: this.paletteId, uid, search: location.search };
-      sidebar.palette.save(palette, this.saved);
-      this.saved = palette;
-    },
-
-    rename() {
-      if (!this.saved) {
-        return;
-      }
-
-      let newTitle = prompt('New title:', this.saved.title);
-
-      if (!newTitle) {
-        return;
-      }
-
-      this.saved.title = newTitle;
-      sidebar.palette.save(this.saved);
-    },
-
-    deleteSaved() {
-      sidebar.palette.delete(this.saved);
-      this.saved = null;
-    },
-
-    reset() {
-      for (let hue in this.hueShifts) {
-        this.hueShifts[hue] = 0;
-      }
-      this.chromaScale = 1;
-    },
-
-    removeTweak(param) {
-      if (param === 'chromaScale') {
+    /**
+     * Remove a specific tweak or all tweaks
+     * @param {string} [param] - The tweak to remove. If not provided, all tweaks are removed.
+     */
+    reset(param) {
+      if (!param || param === 'chromaScale') {
         this.chromaScale = 1;
-      } else {
+      }
+
+      if (param in this.hueShifts) {
         this.hueShifts[param] = 0;
+      } else if (!param) {
+        for (let hue in this.hueShifts) {
+          this.hueShifts[hue] = 0;
+        }
+      }
+
+      if (!param || param === 'grayColor') {
+        this.grayColor = this.originalGrayColor;
+      }
+
+      if (!param || param === 'grayChroma') {
+        this.grayChroma = this.originalGrayChroma;
       }
     },
   },
 
   directives: {
-    // Like v-text, but doesn't complain if the element has content,
-    // making it possible to use in a PE fashion, with the contents being the fallback
-    content(el, { value, arg }) {
-      if (!el.dataset.fallback) {
-        // Store the original content as a fallback the first time
-        el.dataset.fallback = el.textContent;
-      }
-
-      if (value === '') {
-        value = el.dataset.fallback;
-      } else {
-        if (arg === 'number') {
-          value = Number(value).toLocaleString(undefined, { maximumSignificantDigits: 2 });
-        }
-      }
-
-      if (arg === 'html') {
-        el.innerHTML = value;
-      } else {
-        el.textContent = value;
-      }
-    },
+    content,
   },
 
   compilerOptions: {
@@ -336,16 +351,20 @@ let paletteAppSpec = {
 };
 
 function init() {
+  let paletteAppContainer = document.querySelector('#palette-app');
   globalThis.paletteApp?.unmount?.();
-  globalThis.paletteApp = createApp(paletteAppSpec).mount('#palette-app');
+
+  if (!paletteAppContainer) {
+    return;
+  }
+
+  globalThis.paletteApp = createApp(paletteAppSpec).mount(paletteAppContainer);
 }
 
 init();
 addEventListener('turbo:render', init);
 
-export function getPaletteCode(paletteId, tweaks, options) {
-  let palette = allPalettes[paletteId].colors;
-
+export function getPaletteCode(paletteId, colors, tweaked, options) {
   let imports = [];
 
   if (paletteId) {
@@ -353,37 +372,27 @@ export function getPaletteCode(paletteId, tweaks, options) {
   }
 
   let css = '';
+  let declarations = [];
 
-  if (tweaks) {
-    let { hueShifts, chromaScale = 1 } = tweaks;
-    let declarations = [];
-
-    if (hueShifts || chromaScale !== 1) {
-      for (let hue in hueShifts) {
-        let shift = hueShifts[hue];
-
-        if ((!shift && chromaScale === 1) || hue === 'orange') {
+  if (tweaked) {
+    for (let hue in colors) {
+      if (hue === 'orange') {
+        continue;
+      } else if (hue === 'gray') {
+        if (!tweaked.grayChroma && !tweaked.grayColor) {
           continue;
         }
-
-        let scale = palette[hue];
-
-        for (let tint of ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95']) {
-          let color = scale[tint];
-
-          if (Array.isArray(color)) {
-            color = new Color('oklch', coords);
-          } else {
-            color = color.clone();
-          }
-          color.set({ h: h => h + shift, c: c => c * chromaScale });
-          let stringified = color.toString({ format: color.inGamut('srgb') ? 'hex' : undefined });
-
-          declarations.push(`--wa-color-${hue}-${tint}: ${stringified};`);
-        }
-
-        declarations.push('');
+      } else if (!tweaked.chromaScale && !tweaked.hue?.[hue]) {
+        continue;
       }
+
+      for (let tint of tints) {
+        let color = colors[hue][tint];
+        let stringified = color.toString({ format: color.inGamut('srgb') ? 'hex' : undefined });
+        declarations.push(`--wa-color-${hue}-${tint}: ${stringified};`);
+      }
+
+      declarations.push('');
     }
 
     if (declarations.length > 0) {
@@ -409,3 +418,85 @@ function arrayPrevious(array, element) {
   let index = array.indexOf(element);
   return array[(index - 1 + array.length) % array.length];
 }
+
+function applyTweaks(originalColors, tweaks, tweaked) {
+  let ret = {};
+  let { hueShifts, chromaScale = 1, grayColor, grayChroma } = tweaks;
+
+  if (!tweaked) {
+    return originalColors;
+  }
+
+  if (tweaked.grayChroma) {
+    grayChroma = this.computedGrayChroma;
+  }
+
+  for (let hue in originalColors) {
+    let originalScale = originalColors[hue];
+    let scale = (ret[hue] = {});
+    let descriptors = Object.getOwnPropertyDescriptors(originalScale);
+    Object.defineProperties(scale, {
+      maxChromaTint: { ...descriptors.maxChromaTint, enumerable: false },
+      maxChromaTintRaw: { ...descriptors.maxChromaTintRaw, enumerable: false },
+    });
+
+    for (let tint of tints) {
+      let color = originalScale[tint].clone();
+
+      if (tweaked.hue && hueShifts[hue]) {
+        color.set({ h: h => h + hueShifts[hue] });
+      }
+
+      if (tweaked.chromaScale && chromaScale !== 1) {
+        color.set({ c: c => c * chromaScale });
+      }
+
+      if (hue === 'gray' && (tweaked.grayChroma || tweaked.grayColor)) {
+        let colorUndertone = originalColors[grayColor][tint].clone();
+        color = colorUndertone.set({ c: c => c * grayChroma });
+      }
+
+      scale[tint] = color;
+    }
+  }
+
+  return ret;
+}
+
+function camelCase(str) {
+  return (str + '').replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+
+function capitalize(str) {
+  return str[0].toUpperCase() + str.slice(1);
+}
+
+function getContrasts(colors, originalContrasts) {
+  let ret = {};
+
+  for (let hue in colors) {
+    ret[hue] = {};
+
+    for (let tintBg of tints) {
+      ret[hue][tintBg] = {};
+      let bgColor = colors[hue][tintBg];
+
+      if (!bgColor || !bgColor.contrast) {
+        continue;
+      }
+
+      for (let tintFg of tints) {
+        let fgColor = colors[hue][tintFg];
+        let value = bgColor.contrast(fgColor, 'WCAG21');
+        if (originalContrasts) {
+          let original = originalContrasts[hue][tintBg][tintFg];
+          ret[hue][tintBg][tintFg] = { value, original, bgColor, fgColor };
+        } else {
+          ret[hue][tintBg][tintFg] = value;
+        }
+      }
+    }
+  }
+
+  return ret;
+}

docs/docs/patterns/index.njk

@@ -2,7 +2,5 @@
 title: Patterns
 description: Patterns are reusable solutions to common design problems.
 layout: overview
-categories: ["e-commerce"]
-listChildren: true
 override:tags: []
 ---

docs/docs/resources/changelog.md

@@ -12,13 +12,47 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
 During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
 :::
 
-## Next
+## 3.0.0-alpha.12
+
+### Enhancements
+
+- Added `appearance` to [`<wa-details>`](/docs/components/details) and [`<wa-card>`](/docs/components/card) and support for the [appearance utilities](/docs/utilities/appearance/) in the [`<details>` native styles](/docs/native/details).
+- Added an `orange` scale to all color palettes
+- Added the [`.wa-cloak` utility](/docs/utilities/fouce) to prevent FOUCE
+- Added the [`allDefined()` utility](/docs/usage/#all-defined) for awaiting component registration
+
+### Bug fixes
+
+- Specifying inherited CSS properties on `<wa-tooltip>` now works as expected ([thanks Dennis!](https://github.com/shoelace-style/webawesome-alpha/discussions/203))
+- Fixed a bug in `<wa-select>` that made it hard to use with VueJS, Svelte, and many other frameworks
+- Fixed a bug in `<wa-select multiple>` that sometimes resulted in empty `<div>` elements being output
+- Fixed a bug where changing a `<wa-option>` label wouldn't update the display label in `<wa-select>`
+- Added default spacing to icons slotted into `<wa-tab>`
+- Lots of fixes around pill-shaped elements:
+  - Fixed the `wa-pill` class for text fields
+  - Fixed `pill` style for `<wa-input>` and `<wa-radio-button>` elements
+- Fixed a bug in `<wa-radio-button>` that prevented active buttons from receiving the correct styles
+- Fixed a bug in `<wa-button>` that prevented the focus ring from showing in Safari
+- Fixed alignment of `<wa-dropdown>` inside button groups
+- Removed close watcher logic to backdrop hide animation bugs in `<wa-dialog>` and `<wa-drawer>`; this logic is already handled and we'll revisit `CloseWatcher` when browser support is better and behaviors are consistent
+- Revert `<wa-dialog>` structure and CSS to fix clipped content in dialogs (WA-A #123) and light dismiss in iOS Safari (WA-A #201)
+- Fixed a bug in `<wa-color-picker>` that prevented light dismiss from working when clicking immediately above the color picker dropdown
+- Fixed a bug in `<wa-progress>` that prevented Safari from animation progress changes
+- Fixed the missing indeterminate icon in [native checkbox styles](/docs/native/checkbox)
+- Fixed a bug in `<wa-radio>` where elements would stack instead of display inline
+- Docs fixes:
+  - Fixed the search dialog's styles so it doesn't jump around as you search
+  - Theme cards now have icons
+
+## 3.0.0-alpha.11
 
 ### Color Palettes
 
+- Color palette tweaking UI. Tweak hue, grays, overall colorfulness, save or share the results.
 - Added a `pink` scale to all color palettes
-- Fixed an incorrect CSS value in `<wa-select>`'s expand icon
 - Tweaked hues of all color palettes to make them more distinct and make their hues more intentional
+- Dropped `violet` and `teal`, instead using `purple` and `cyan` (this is not just a renaming, the colors have been adjusted too).
+- Fixed a bug in `<wa-switch>` that caused tooltips to work incorrectly when toggling the switch
 
 ### Design Tokens
 
@@ -27,32 +61,54 @@ You can find them in the first column of each color palette.
 
 ### Themes
 
+- Improved UI for theme remixing:
+  - You can now override the brand color of any theme with any of the 9 hues supported.
+  - Rich previews
+  - Generated copyable code snippets.
+  - Permalinks
 - Updated Active, Glossy, Playful, and Premium themes so that `--wa-color-brand-fill-loud` uses the core color of the chosen brand color, regardless of tint.
-- You can now override the brand color of any theme with any of the 9 hues supported.
-- Improved UI for theme remixing, with previews and generated copyable code snippets.
 
 ### Components
 
-- Various `<wa-radio>` improvements:
-  - Dropped the `base` part. It can now be styled by directly applying CSS to the element itself.
-  - Added `hint` attribute and corresponding slot.
-- Various `<wa-select>` improvements:
-  - Added the `tag` part (and associated exported parts) to `<wa-select>` to allow targeting the tag that shows when more than the max number of visible items have been selected
-  - Fixed a bug that prevented the placeholder color from being customized with the `--wa-form-control-placeholder-color` token
-  - Dropped the `base` part from `<wa-option>` for easier styling. CSS can now be applied directly to the element itself.
-- Various `<wa-card>` improvements:
-  - Fixed a bug where child elements did not have correct rounding when headers and footers were absent.
-  - Re-introduced `--border-color` so that the card itself can have a different border color than its inner borders.
-  - Fixed a bug that prevented slots from showing automatically without `with-` attributes
-- Fixed a bug in `<wa-select>` that prevented the description from being read by screen readers
+#### `<wa-radio>`
 
+- Dropped the `base` part. It can now be styled by directly applying CSS to the element itself.
+- Added `hint` attribute and corresponding slot.
+
+#### `<wa-select>`
+
+- Added the `tag` part (and associated exported parts) to `<wa-select>` to allow targeting the tag that shows when more than the max number of visible items have been selected
+- Fixed a bug that prevented the placeholder color from being customized with the `--wa-form-control-placeholder-color` token
+- Fixed an incorrect CSS value in the expand icon
+- Fixed a bug that prevented the description from being read by screen readers
+
+####  `<wa-option>`
+
+- `label` attribute to override the generated label (useful for rich content)
+- `defaultLabel` property
+- Dropped `getTextLabel()` method (if you need dynamic labels, just set the `label` attribute dynamically)
+- Dropped `base` part for easier styling. CSS can now be applied directly to the element itself.
+
+####  `<wa-menu-item>`
+
+- `label` attribute to override the generated label (useful for rich content)
+- `defaultLabel` property
+- Dropped `getTextLabel()` method (if you need dynamic labels, just set the `label` attribute dynamically)
+
+#### `<wa-card>`
+- Fixed a bug where child elements did not have correct rounding when headers and footers were absent.
+- Re-introduced `--border-color` so that the card itself can have a different border color than its inner borders.
+- Fixed a bug that prevented slots from showing automatically without `with-` attributes
+
+#### `<wa-tab>`
+
+- Fixed a bug that caused `document.createElement('wa-tab')` to fail (which also meant it could not be used in VueJS and other frameworks)
 
 ### Docs
 
 - Added an orientation example to the native radio docs
 - Fixed a number of broken event listeners throughout the docs
 
-
 ## 3.0.0-alpha.10
 
 - 🚨 BREAKING: updated all components to use native events instead of `wa-` prefixed events. This will allow components to work more like native elements in your code, frameworks, third-party plugins, etc. To update your code, simply remove the prefix from your event listeners for the following events.

docs/docs/test/benchmark.njk

@@ -0,0 +1,71 @@
+---
+title: CSS Properties Benchmark
+unlisted: true
+wide: true
+---
+
+{% set icons = {
+    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>'
+} %}
+
+<style>
+.icon-tests {
+	font-size: .5rem;
+	line-height: 1;
+}
+
+wa-icon {
+	transition: 1s font-size;
+	&:hover {
+		font-size: 1rem;
+	}
+}
+</style>
+
+{% set repetitions = 200 %}
+
+<h2>Setting everything via attributes</h2>
+
+<div class="icon-tests">
+{% for icon, svg in icons %}
+	{% for i in range(repetitions) %}
+	<wa-icon name="{{ icon }}" variant="solid" family="classic"></wa-icon>
+	{% endfor %}
+{% endfor %}
+</div>
+
+<h2>Setting variant & family via CSS</h2>
+
+<div class="icon-tests" style="--wa-icon-variant: regular; --wa-icon-family: classic">
+{% for icon, svg in icons %}
+	{% for i in range(repetitions) %}
+	<wa-icon name="{{ icon }}"></wa-icon>
+	{% endfor %}
+{% endfor %}
+</div>
+
+<h2>Setting name via CSS</h2>
+
+<div class="icon-tests">
+{% for icon, svg in icons %}
+<span style="--wa-icon-name: {{ icon }}">
+	{% for i in range(repetitions) %}
+	<wa-icon variant="solid" family="classic"></wa-icon>
+	{% endfor %}
+</span>
+{% endfor %}
+</div>
+

docs/docs/themes/creating.md

@@ -31,8 +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)) {
+.wa-invert {
   /* your custom styles here */
 }
 ```

docs/docs/themes/demo.njk

@@ -10,15 +10,17 @@ override:tags: []
 eleventyComputed:
   forceTheme: "{{ theme.fileSlug }}"
 ---
-
+{% set isPro = theme.data.isPro %}
+{% set status = theme.data.status %}
+{% set since = theme.data.since %}
 <link rel="stylesheet" href="/docs/themes/showcase.css" />
 
 {% set content %}
 <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="mix_and_match" class="wa-size-s"></p>
+  <p id="theme-status">{% include 'status.njk' %}</p>
   <p id="theme-showcase-description">{{ theme.data.description | inlineMarkdown | safe }}</p>
 </header>
 {% include 'theme-showcase.njk' %}
@@ -34,30 +36,18 @@ eleventyComputed:
 </wa-image-comparer>
 
 <script type="module">
-import { urls as stylesheetURLs } from "/assets/scripts/tweak/data.js";
-import { theme as getThemeCode } from "/assets/scripts/tweak/code.js";
+import { urls as stylesheetURLs, docsURLs, icons } from "/assets/scripts/tweak/data.js";
+import { getThemeCode } from "/assets/scripts/tweak/code.js";
 
 function updateTheme() {
   let params = new URLSearchParams(window.location.search);
   params = Object.fromEntries(params.entries());
 
-  const docsURLs = {
-    colors: '/docs/themes/',
-    palette: '/docs/palettes/',
-    typography: '/docs/themes/'
-  };
-  const icons = {
-    colors: 'palette',
-    palette: 'swatchbook',
-    brand: 'droplet',
-    typography: 'font-case'
-  };
-
   for (let link of document.querySelectorAll('link.mix-and-match')) {
     link.remove();
   }
 
-  let msgs = [];
+  let tweaks = [];
   let code = getThemeCode("{{ theme.fileSlug }}", params, {attributes: 'class="mix-and-match"'});
   document.head.insertAdjacentHTML('beforeend', code);
 
@@ -72,18 +62,29 @@ function updateTheme() {
       }
 
       let icon = icons[name];
-      msgs.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> ${ title }`);
+      tweaks.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> ${ title }`);
     }
   }
 
-  for (let p of mix_and_match) {
-    p.hidden = msgs.length === 0;
-    if (msgs.length) {
-      let icon =
-      p.innerHTML = `<strong><wa-icon name="arrows-rotate"></wa-icon> Remixed</strong> ` + msgs.map(msg => `<wa-badge appearance=outlined>
-        ${ msg }</wa-badge>`).join(' ');
+  let isRemixed = tweaks.length > 0;
+  document.documentElement.classList.toggle('is-remixed', isRemixed);
+
+  if (isRemixed) {
+    for (let p of document.querySelectorAll("#theme-status")) {
+        let proBadge = p.querySelector(".pro");
+        if (!proBadge) {
+          p.insertAdjacentHTML('beforeend', '<wa-badge class="pro">PRO</wa-badge>');
+        }
+    }
+
+    for (let p of mix_and_match) {
+      if (tweaks.length) {
+        p.innerHTML = `<strong><wa-icon name="arrows-rotate"></wa-icon> Remixed</strong> ` + tweaks.map(msg => `<wa-badge appearance=outlined>
+          ${ msg }</wa-badge>`).join(' ');
+      }
     }
   }
+
 }
 updateTheme();
 </script>

docs/docs/themes/index.njk

@@ -1,13 +1,13 @@
 ---
 title: Themes
-description: Themes are collections of design tokens that thread through every Web Awesome component and pattern. 
+description: Themes are collections of design tokens that thread through every Web Awesome component and pattern.
   Themes play a crucial role in [customizing Web Awesome](/docs/customizing).
 layout: overview
 override:tags: []
 forTag: theme
 categories:
+  tags: [other, pro]
   other: Free
-  pro: Pro
 ---
 
 <div class="max-line-length">
@@ -30,7 +30,7 @@ In pre-made themes, we use a light color scheme by default.
 Additionally, styles may be scoped to the `:root` selector to be activated automatically.
 For pre-made themes, *all* custom properties are scoped to `:root`, the theme class, and `wa-light`.
 
-Finally, we scope themes to `:host` and `:host-context()` to ensure the styles are applied to the shadow roots of custom elements.
+Finally, we scope themes to `:host` to ensure the styles are applied to the shadow roots of custom elements.
 
 For example, the default theme is set up like this:
 
@@ -44,8 +44,7 @@ For example, the default theme is set up like this:
 }
 
 .wa-dark,
-.wa-invert,
-:host-context(.wa-dark) {
+.wa-invert {
   /* subset of CSS custom properties for a dark color scheme */
 }
 ```

docs/docs/themes/remix.js

@@ -54,8 +54,12 @@ function init() {
     urlParams: new Permalink(),
   };
 
-  data.urlParams.mapObject(data.params);
-  data.urlParams.writeTo(data.params);
+  // Apply params from permalink
+  for (let key in data.params) {
+    if (data.urlParams.has(key)) {
+      data.params[key] = data.urlParams.get(key);
+    }
+  }
 
   if (computed.isRemixed) {
     // Start with the remixing UI open if the theme has been remixed
@@ -107,6 +111,10 @@ function setDefault(select, value) {
 }
 
 function render(changedAspect) {
+  if (!globalThis.demo) {
+    return;
+  }
+
   let url = new URL(demo.src);
 
   if (!changedAspect || changedAspect === 'colors') {
@@ -124,7 +132,11 @@ function render(changedAspect) {
     selects[aspect].value = value;
   }
 
-  data.urlParams.readFrom(data.params);
+  for (let key in data.params) {
+    if (data.params[key]) {
+      data.urlParams.set(key, data.params[key]);
+    }
+  }
 
   // Update demo URL
   domChange(() => {

docs/docs/themes/showcase.css

@@ -12,6 +12,11 @@ body,
 #mix_and_match {
   font-weight: var(--wa-font-weight-semibold);
   color: var(--wa-color-text-quiet);
+  margin-block-end: var(--wa-space-xs);
+
+  html:not(.is-remixed) {
+    display: none;
+  }
 
   wa-icon {
     vertical-align: -0.15em;

docs/docs/themes/themes.json

@@ -3,6 +3,7 @@
   "wide": true,
   "tags": ["themes", "theme"],
   "brand": "blue",
+  "icon": "theme",
   "eleventyComputed": {
     "file": "styles/themes/{{ page.fileSlug }}.css"
   }

docs/docs/tokens/index.njk

@@ -3,4 +3,5 @@ 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: []
+categories: {tags: true}
 ---

docs/docs/usage.md

@@ -8,6 +8,61 @@ Web Awesome components are just regular HTML elements, or [custom elements](http
 
 If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them.
 
+## Awaiting Registration
+
+Unlike traditional frameworks, custom elements don't have a centralized initialization phase. This means you need to verify that a custom element has been properly registered before attempting to interact with its properties or methods.
+
+### Individual components: `customElements.whenDefined()` { #when-defined}
+
+You can use the [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined) method to ensure a specific component is ready:
+
+```ts
+await customElements.whenDefined('wa-button');
+
+// <wa-button> is ready to use!
+const button = document.querySelector('wa-button');
+```
+
+### All Web Awesome components: `allDefined()` { #all-defined }
+
+When working with multiple components, checking each one individually can become tedious. For convenience, Web Awesome provides the `allDefined()` function which automatically detects and waits for all Web Awesome components in the DOM to be initialized before resolving.
+
+```ts
+import { allDefined } from '/dist/webawesome.js';
+
+// Waits for all Web Awesome components in the DOM to be registered
+await allDefined();
+
+// All Web Awesome components on the page are ready!
+```
+
+#### Advanced Usage
+
+By default, `allDefined()` will wait for all `wa-` prefixed custom elements within the current `document` to be registered.
+You can customize this behavior by passing in options:
+- `root` allows you to pass in a different element to search within, or a different document entirely (defaults to `document`).
+- `match` allows you to specify a custom function to determine which elements to wait for. This function should return `true` for elements you want to wait for and `false` for those you don't.
+- `additionalElements` allows you to wait for custom elements to be defined that may not be present in the DOM at the time `allDefined()` is called. This can be useful for elements that are loaded dynamically via JS.
+
+Here is an example of using `match` and `root` to await registration of Web Awesome components inside an element with an id of `sidebar`, plus a `<my-component>` element if present in the DOM, and `<wa-slider>` and `<other-slider>` elements whether present in the DOM or not:
+
+```js
+import { allDefined } from '/dist/webawesome.js';
+
+await allDefined({
+  match: tagName => tagName.startsWith('wa-') || tagName === 'my-component',
+  root: document.getElementById('sidebar'),
+  additionalElements: ['wa-slider', 'other-slider']
+});
+```
+
+:::warning
+`additionalElements` will only wait for elements to be registered — it will not load them.
+If you're using the autoloader plus custom JS to inject HTML dynamically, **you need to make sure your JS runs _before_ the `await allDefined()` call**,
+otherwise you could run into a chicken and egg issue:
+since the autoloader will not load elements until they are present in the DOM, the promise will never resolve and your JS to inject them will not run.
+:::
+
 ## Attributes & Properties
 
 Many components have properties that can be set using attributes. For example, buttons accept a `size` attribute that maps to the `size` property which dictates the button's size.
@@ -88,49 +143,6 @@ For example, `<button>` and `<wa-button>` both have a `type` attribute, but the
 **Don't make assumptions about a component's API!** To prevent unexpected behaviors, please take the time to review the documentation and make sure you understand what each attribute, property, method, and event is intended to do.
 :::
 
-## Waiting for Components to Load
-
-Web components are registered with JavaScript, so depending on how and when you load Web Awesome, you may notice a [Flash of Undefined Custom Elements (FOUCE)](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/) when the page loads. There are a couple ways to prevent this, both of which are described in the linked article.
-
-One option is to use the [`:defined`](https://developer.mozilla.org/en-US/docs/Web/CSS/:defined) CSS pseudo-class to "hide" custom elements that haven't been registered yet. You can scope it to specific tags or you can hide all undefined custom elements as shown below.
-
-```css
-:not(:defined) {
-  visibility: hidden;
-}
-```
-
-As soon as a custom element is registered, it will immediately appear with all of its styles, effectively eliminating FOUCE. Note the use of `visibility: hidden` instead of `display: none` to reduce shifting as elements are registered. The drawback to this approach is that custom elements can potentially appear one by one instead of all at the same time.
-
-Another option is to use [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined), which returns a promise that resolves when the specified element gets registered. You'll probably want to use it with [`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) in case an element fails to load for some reason.
-
-A clever way to use this method is to hide the `<body>` with `opacity: 0` and add a class that fades it in as soon as all your custom elements are defined.
-
-```html
-<style>
-  body {
-    opacity: 0;
-  }
-
-  body.ready {
-    opacity: 1;
-    transition: 0.25s opacity;
-  }
-</style>
-
-<script type="module">
-  await Promise.allSettled([
-    customElements.whenDefined('wa-button'),
-    customElements.whenDefined('wa-card'),
-    customElements.whenDefined('wa-rating')
-  ]);
-
-  // Button, card, and rating are registered now! Add
-  // the `ready` class so the UI fades in.
-  document.body.classList.add('ready');
-</script>
-```
-
 ## Component Rendering and Updating
 
 Web Awesome components are built with [Lit](https://lit.dev/), a tiny library that makes authoring custom elements easier, more maintainable, and a lot of fun! As a Web Awesome user, here is some helpful information about rendering and updating you should probably be aware of.

docs/docs/utilities/fouce.md

@@ -0,0 +1,34 @@
+---
+title: Reduce FOUCE
+description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
+file: styles/utilities/fouce.css
+icon: spinner
+snippet: .wa-cloak
+---
+
+Often, components are shown before their logic and styles have had a chance to load, also known as a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/).
+The FOUCE style utility (which is automatically applied if you use our [style utilities](/docs/utilities/)) automatically takes care of hiding custom elements until **both they and their contents** have been registered, up to a maximum of two seconds.
+
+In many cases, this is not enough, and you may wish to hide a broader wrapper element or even the entire page until all WA elements within it have loaded.
+To do that, you can add the `wa-cloak` class to any element on the page or even apply it to the whole page by placing the class on the `<html>` element:
+
+```html
+<html class="wa-cloak">
+  ...
+</html>
+```
+
+As soon as all elements are registered _or_ after two seconds have elapsed, the autoloader will show the page. The two-second timeout prevents blank screens from persisting on slow networks and pages that have errors.
+
+:::details Are you using Turbo in your app?
+
+If you're using [Turbo](https://turbo.hotwired.dev/) to serve a multi-page application (MPA) as a single page application (SPA), you might notice FOUCE when navigating from page to page. This is because Turbo renders the new page's content before the autoloader has a change to register new components.
+
+The following function acts as a middleware to ensure components are registered _before_ the page shows, eliminating FOUCE for page-to-page navigation with Turbo.
+
+```js
+import { preventTurboFouce } from '/dist/webawesome.js';
+
+preventTurboFouce();
+```
+:::

docs/docs/utilities/fouce.njk

@@ -1,131 +0,0 @@
----
-title: Reduce FOUCE
-description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
-file: styles/utilities/fouce.css
-icon: spinner
----
-{% markdown %}
-No class is needed to use this utility, it will be applied automatically as long as it its CSS is included.
-
-Here is a comparison of the loading experience with and without this utility,
-with a simulated slow loading time:
-
-{% endmarkdown %}
-
-
-<div class="wa-split wa-align-items-end">
-  <strong>Normal loading</strong>
-  <wa-button onclick="document.querySelectorAll('iframe').forEach(iframe => iframe.srcdoc = iframe.srcdoc)">
-    <wa-icon name="refresh"></wa-icon>
-    Refresh
-  </wa-button>
-  <strong>With FOUCE reduction</strong>
-</div>
-
-
-{% set sample_card %}
-<link id="theme-stylesheet" rel="stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high">
-<link rel="stylesheet" href="/dist/styles/webawesome.css">
-<link rel="stylesheet" href="/dist/styles/forms.css">
-<script type=module>
-const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
-const loadScript = src => new Promise((resolve, reject) => {
-  const script = document.createElement("script");
-  script.src = src;
-  script.type = "module";
-  script.onload = resolve;
-  script.onerror = reject;
-  document.head.appendChild(script);
-});
-
-await delay(500);
-await loadScript("/dist/components/button/button.js");
-await delay(500);
-await loadScript("/dist/components/card/card.js");
-await delay(500);
-await loadScript("/dist/components/rating/rating.js");
-</script>
-
-<wa-card with-footer with-image class="card-overview">
-  <img
-    slot="image"
-    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
-    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-  />
-
-  <strong>Mittens</strong><br />
-  This kitten is as cute as he is playful. Bring him home today!<br />
-  <small>6 weeks old</small>
-
-  <div slot="footer">
-    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
-  </div>
-</wa-card>
-
-<style>
-  .card-overview small {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .card-overview [slot=footer] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-</style>
-{% endset %}
-
-
-<div class="iframes">
-<iframe srcdoc='<body class="wa-fouce-off">{{ sample_card }}</body>'></iframe>
-<iframe srcdoc='{{ sample_card }}'></iframe>
-</div>
-<style>
-.iframes {
-	display: flex;
-	gap: var(--wa-space-m);
-  margin-top: var(--wa-space-l);
-
-	iframe {
-		flex: 1;
-		height: 60ch;
-	}
-}
-</style>
-
-{% markdown %}
-## How does it work?
-
-The utility consists of a timeout (`2s` by default) and a fade duration (`200ms` by default).
-- If the element is _ready_ before the timeout, it will appear immediately.
-- If it takes longer than _timeout_ + _fade_, it will fade in over the fade duration.
-- If it takes somewhere between _timeout_ and _timeout_ + _fade_, you will get an interrupted fade.
-
-An element is considered ready when both of these are true:
-1. Either It has been registered or has a `did-ssr` attribute (indicating it was pre-rendered)
-2. If it’s a Web Awesome component, its contents are also ready
-
-## Customization
-
-You can use the following CSS variables to customize the behavior:
-
-| Variable | Description | Default |
-| --- | --- | --- |
-| `--wa-fouce-fade` | The transition duration for the fade effect. | `200ms` |
-| `--wa-fouce-timeout` | The timeout after which elements will appear even if not registered | `2s` |
-
-The fade duration cannot be longer than the timeout.
-This means that you can disable FOUCE reduction on an element by setting `--wa-fouce-timeout: 0s`.
-
-For example, if instead of `did-ssr` you used an `ssr` attribute to mark elements that were pre-rendered, you can do this to get them to appear immediately:
-
-```css
-[ssr] {
-  --wa-fouce-timeout: 0s;
-}
-```
-
-You can also opt-out from FOUCE reduction for an element and its contents by adding the `.wa-fouce-off` class to it.
-Applying this class to the root element will disable the utility for the entire page.
-{% endmarkdown %}

docs/index.md

@@ -4,8 +4,6 @@ description: Build better with Web Awesome, the open source library of web compo
 layout: page
 ---
 
-
-
 <style>
   .title,
   .anchor-heading a,
@@ -387,4 +385,4 @@ layout: page
       &copy; Fonticons, Inc.
     </div>
   </footer>
-</div>
+</div>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@shoelace-style/webawesome",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@shoelace-style/webawesome",
-      "version": "3.0.0-alpha.10",
+      "version": "3.0.0-alpha.12",
       "license": "MIT",
       "dependencies": {
         "@ctrl/tinycolor": "^4.1.0",
@@ -15,7 +15,8 @@
         "@shoelace-style/localize": "^3.2.1",
         "composed-offset-position": "^0.0.6",
         "lit": "^3.2.1",
-        "qr-creator": "^1.0.0"
+        "qr-creator": "^1.0.0",
+        "style-observer": "^0.0.7"
       },
       "devDependencies": {
         "@11ty/eleventy": "3.0.0",
@@ -13085,6 +13086,12 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/style-observer": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/style-observer/-/style-observer-0.0.7.tgz",
+      "integrity": "sha512-t75H3CRy+vd5q3yqyrf/De4tkz33hPQTiCcfh0NTesI5G7kJnZ227LEYTwqjKTtaFOCJvqZcYFHpJlF8bsk3bQ==",
+      "license": "MIT"
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shoelace-style/webawesome",
   "description": "A forward-thinking library of web components.",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.12",
   "homepage": "https://webawesome.com/",
   "author": "Web Awesome",
   "license": "MIT",
@@ -52,8 +52,8 @@
     "start:alpha": "node scripts/build.js --alpha --develop",
     "publish-alpha-cdn": "./publish-alpha-cdn.sh",
     "create": "plop --plopfile scripts/plop/plopfile.js",
-    "test": "web-test-runner --group default",
-    "test:component": "web-test-runner -- --watch --group",
+    "test": "CSR_ONLY=\"true\" web-test-runner --group default",
+    "test:component": "CSR_ONLY=\"true\" 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 .",
@@ -73,7 +73,8 @@
     "@shoelace-style/localize": "^3.2.1",
     "composed-offset-position": "^0.0.6",
     "lit": "^3.2.1",
-    "qr-creator": "^1.0.0"
+    "qr-creator": "^1.0.0",
+    "style-observer": "^0.0.7"
   },
   "devDependencies": {
     "@11ty/eleventy": "3.0.0",

scripts/build.js

@@ -4,6 +4,7 @@ import { execSync } from 'child_process';
 import { deleteAsync } from 'del';
 import esbuild from 'esbuild';
 import { replace } from 'esbuild-plugin-replace';
+
 import { mkdir, readFile } from 'fs/promises';
 import getPort, { portNumbers } from 'get-port';
 import { globby } from 'globby';
@@ -12,7 +13,6 @@ import { dirname, join, relative } from 'path';
 import process from 'process';
 import copy from 'recursive-copy';
 import { fileURLToPath } from 'url';
-import { preprocessStylesheet } from './preprocess-css.js';
 import { cdnDir, distDir, docsDir, rootDir, runScript, siteDir } from './utils.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -37,7 +37,6 @@ async function buildAll() {
     await generateManifest();
     await generateReactWrappers();
     await generateTypes();
-    await preprocessStyles();
     await generateStyles();
 
     // copy everything to unbundled before we generate bundles.
@@ -107,23 +106,6 @@ function generateReactWrappers() {
   return Promise.resolve();
 }
 
-/**
- * Generate preprocessed CSS
- */
-async function preprocessStyles() {
-  const preprocessedCSSFiles = await globby(join(rootDir, 'src/styles/**/*.css.njk'));
-
-  if (preprocessedCSSFiles.length > 0) {
-    spinner.start('Preprocessing stylesheets');
-
-    for (let filePath of preprocessedCSSFiles) {
-      await preprocessStylesheet(filePath);
-    }
-
-    spinner.succeed();
-  }
-}
-
 /**
  * Copies theme stylesheets to the dist.
  */
@@ -285,6 +267,13 @@ async function regenerateBundle() {
  * Generates the documentation site.
  */
 async function generateDocs() {
+  /**
+   * Used by the webawesome-app to skip doc generation since it will do its own.
+   */
+  if (process.env.SKIP_ELEVENTY === 'true') {
+    return;
+  }
+
   spinner.start('Writing the docs');
 
   const args = [];
@@ -390,7 +379,6 @@ if (isDeveloping) {
     try {
       const isTestFile = filename.includes('.test.ts');
       const isCssStylesheet = filename.includes('.css');
-      const isPreprocessedStylesheet = filename.endsWith('.css.njk');
       const isComponent =
         filename.includes('components/') && filename.includes('.ts') && !isCssStylesheet && !isTestFile;
 
@@ -401,10 +389,6 @@ if (isDeveloping) {
 
       await regenerateBundle();
 
-      if (isPreprocessedStylesheet || filename.endsWith('src/styles/data.js')) {
-        await preprocessStyles();
-      }
-
       // Copy stylesheets when CSS files change
       if (isCssStylesheet) {
         await generateStyles();

scripts/preprocess-css.js

@@ -1,61 +0,0 @@
-import { readFile, writeFile } from 'fs/promises';
-import nunjucks from 'nunjucks';
-import * as prettier from 'prettier';
-import prettierConfig from '../prettier.config.js';
-import * as globalData from '../src/styles/data.js';
-
-const prelude = inputFilename => `/* DO NOT EDIT THIS FILE. It is generated from "${inputFilename}" */`;
-
-let env = nunjucks.configure({ autoescape: false });
-let filenameVariables = Object.keys(globalData)
-  .filter(key => key.endsWith('s'))
-  .map(key => key.slice(0, -1));
-let filenameVariablesRegex = RegExp(`\\{\\{\\s*(${filenameVariables.join('|')})\\s*\\}\\}`, 'g');
-
-export async function preprocessStylesheet(inputPath) {
-  const content = await readFile(inputPath, 'utf-8');
-  let outputPath = inputPath.replace(/\.njk$/, '');
-  let filename = outputPath.split('/').pop();
-
-  if (filenameVariablesRegex.test(filename)) {
-    // NOTE only supports a single variable right now
-    filenameVariablesRegex.lastIndex = 0;
-    let ret = [];
-
-    for (let match of filename.matchAll(filenameVariablesRegex)) {
-      let variable = match[1];
-      let values = globalData[variable + 's'];
-
-      for (let value of values) {
-        let data = { [variable]: value };
-        let css = await renderCSS(content, { data, inputPath, outputPath });
-
-        // Now use Nunjucks *again*, to render the actual filename
-        let localOutputFilePath = env.renderString(outputPath, data);
-
-        ret.push(writeFile(localOutputFilePath, css, 'utf-8'));
-      }
-    }
-
-    return Promise.all(ret);
-  } else {
-    let css = await renderCSS(content, { inputPath, outputPath });
-    return writeFile(outputPath, css, 'utf-8');
-  }
-
-  // TODO add generated files to .gitignore?
-}
-
-export async function renderCSS(content, { data, inputPath, outputPath } = {}) {
-  let inputFilename = inputPath.split('/').pop();
-  data = data ? { ...globalData, ...data } : globalData;
-  let css = env.renderString(content, data);
-
-  if (prelude) {
-    css = prelude(inputFilename) + '\n' + css;
-  }
-
-  css = await prettier.format(css, { ...prettierConfig, filepath: outputPath });
-
-  return css;
-}

src/components/badge/badge.ts

@@ -17,9 +17,6 @@ import styles from './badge.css';
  *
  * @cssproperty --background-color - The badge's background color.
  * @cssproperty --border-color - The color of the badge's border.
- * @cssproperty --border-radius - The radius of the badge's corners.
- * @cssproperty --border-style - The style of the badge's border.
- * @cssproperty --border-width - The width of the badge's border.
  * @cssproperty --text-color - The color of the badge's content.
  */
 @customElement('wa-badge')

src/components/button/button.ts

@@ -52,6 +52,7 @@ import styles from './button.css';
 @customElement('wa-button')
 export default class WaButton extends WebAwesomeFormAssociatedElement {
   static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
+  static rectProxy = 'button';
 
   static get validators() {
     return [...super.validators, MirrorValidator()];
@@ -108,7 +109,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   @property({ reflect: true }) value: string | null = null;
 
   /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
-  @property() href = '';
+  @property({ reflect: true }) href = null;
 
   /** Tells the browser where to open the link. Only used when `href` is present. */
   @property() target: '_blank' | '_parent' | '_self' | '_top';
@@ -224,17 +225,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
     this.button.blur();
   }
 
-  getBoundingClientRect(): DOMRect {
-    let rect = super.getBoundingClientRect();
-    let buttonRect = this.button.getBoundingClientRect();
-
-    if (rect.width === 0 && buttonRect.width > 0) {
-      return buttonRect;
-    }
-
-    return rect;
-  }
-
   render() {
     const isLink = this.isLink();
     const tag = isLink ? literal`a` : literal`button`;

src/components/card/card.css

@@ -5,15 +5,16 @@
 
   --spacing: var(--wa-space);
   --border-width: var(--wa-panel-border-width);
-  --border-color: var(--wa-color-surface-border);
+  --outlined-background-color: var(--wa-color-surface-default);
+  --outlined-border-color: var(--wa-color-surface-border);
   --border-radius: var(--wa-panel-border-radius);
-
   --inner-border-radius: calc(var(--border-radius) - var(--border-width));
+  --inner-border-color: var(--outlined-border-color);
 
   display: flex;
   flex-direction: column;
-  background-color: var(--wa-color-surface-default);
-  border-color: var(--border-color);
+  background-color: var(--background-color, var(--wa-color-surface-default));
+  border-color: var(--border-color, var(--wa-color-surface-border));
   border-radius: var(--border-radius);
   border-style: var(--wa-panel-border-style);
   box-shadow: var(--wa-shadow-s);
@@ -21,6 +22,20 @@
   color: var(--wa-color-text-normal);
 }
 
+:host(:is([appearance~='accent'], .wa-accent)) {
+  color: var(--text-color, var(--wa-color-text-normal));
+}
+
+:host([appearance~='filled']),
+:host(.wa-filled) {
+  --inner-border-color: oklab(from var(--outlined-border-color) l a b / 65%);
+}
+
+:host([appearance='plain']) {
+  --inner-border-color: transparent;
+  box-shadow: none;
+}
+
 /* Take care of top and bottom radii */
 .image,
 :host(:not([with-image])) .header,
@@ -46,10 +61,19 @@
   }
 }
 
+/* Round all corners for plain appearance */
+:host([appearance='plain']) .image {
+  border-radius: var(--inner-border-radius);
+
+  &::slotted(img) {
+    border-radius: inherit !important;
+  }
+}
+
 .header {
   display: block;
   border-block-end-style: inherit;
-  border-block-end-color: var(--border-color);
+  border-block-end-color: var(--inner-border-color);
   border-block-end-width: var(--border-width);
   padding: calc(var(--spacing) / 2) var(--spacing);
 }
@@ -62,7 +86,7 @@
 .footer {
   display: block;
   border-block-start-style: inherit;
-  border-block-start-color: var(--border-color);
+  border-block-start-color: var(--inner-border-color);
   border-block-start-width: var(--border-width);
   padding: var(--spacing);
 }

src/components/card/card.ts

@@ -2,6 +2,7 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { HasSlotController } from '../../internal/slot.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import styles from './card.css';
 
@@ -22,19 +23,24 @@ import styles from './card.css';
  * @csspart footer - The container that wraps the card's footer.
  *
  * @cssproperty [--border-radius=var(--wa-panel-border-radius)] - The radius for the card's corners. Expects a single value.
- * @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders, including inner borders. Expects a single value.
+ * @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders. Expects a single value.
+ * @cssproperty [--inner-border-color=var(--wa-color-surface-border)] - The color of the card's inner borders, e.g. those separating headers and footers from the main content. Expects a single value.
  * @cssproperty [--border-width=var(--wa-panel-border-width)] - The width of the card's borders. Expects a single value.
  * @cssproperty [--spacing=var(--wa-space)] - The amount of space around and between sections of the card. Expects a single value.
  */
 @customElement('wa-card')
 export default class WaCard extends WebAwesomeElement {
-  static shadowStyle = [sizeStyles, styles];
+  static shadowStyle = [sizeStyles, appearanceStyles, styles];
 
   private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');
 
   /** The component's size. Will be inherited by any descendants with a `size` attribute. */
   @property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
 
+  /** The card's visual appearance. */
+  @property({ reflect: true })
+  appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'outlined';
+
   /** Renders the card with a header. Only needed for SSR, otherwise is automatically added. */
   @property({ attribute: 'with-header', type: Boolean, reflect: true }) withHeader = false;
 

src/components/color-picker/color-picker.css

@@ -278,11 +278,11 @@
 }
 
 /*
-   * Color dropdown
-   */
+ * Color dropdown
+ */
 
 .color-dropdown {
-  display: flex;
+  display: contents;
 }
 
 .color-dropdown::part(panel) {

src/components/details/details.ts

@@ -9,6 +9,7 @@ import { getTargetElement, waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import nativeStyles from '../../styles/native/details.css';
+import appearanceStyles from '../../styles/utilities/appearance.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
 import styles from './details.css';
@@ -45,7 +46,7 @@ import styles from './details.css';
  */
 @customElement('wa-details')
 export default class WaDetails extends WebAwesomeElement {
-  static shadowStyle = [nativeStyles, styles];
+  static shadowStyle = [appearanceStyles, nativeStyles, styles];
 
   private detailsObserver: MutationObserver;
   private readonly localize = new LocalizeController(this);
@@ -67,6 +68,9 @@ export default class WaDetails extends WebAwesomeElement {
   /** Disables the details so it can't be toggled. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** The element's visual appearance. */
+  @property({ reflect: true }) appearance: 'filled' | 'outlined' | 'plain' = 'outlined';
+
   firstUpdated() {
     this.body.style.height = this.open ? 'auto' : '0';
     if (this.open) {

src/components/dialog/dialog.css

@@ -1,24 +1,89 @@
 :host {
+  --background-color: var(--wa-color-surface-raised);
+  --border-radius: var(--wa-panel-border-radius);
+  --box-shadow: var(--wa-shadow-l);
+  --width: 31rem;
   --spacing: var(--wa-space-xl);
+  --show-duration: 200ms;
+  --hide-duration: 200ms;
 
-  display: contents;
-}
-
-:host(:not([open])) {
   display: none;
 }
 
-dialog {
-  width: inherit;
-  max-width: inherit;
-  max-height: inherit;
-  background-color: inherit;
-  border-radius: inherit;
-  border: inherit;
-  box-shadow: inherit;
-  padding: inherit;
+:host([open]) {
+  display: block;
+}
+
+.dialog {
+  display: flex;
+  flex-direction: column;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--width);
+  max-width: calc(100% - var(--wa-space-2xl));
+  max-height: calc(100% - var(--wa-space-2xl));
+  background-color: var(--background-color);
+  border-radius: var(--border-radius);
+  border: none;
+  box-shadow: var(--box-shadow);
+  padding: 0;
   margin: auto;
-  transition: inherit;
+
+  &.show {
+    animation: show-dialog var(--show-duration) ease;
+
+    &::backdrop {
+      animation: show-backdrop var(--show-duration, 200ms) ease;
+    }
+  }
+
+  &.hide {
+    animation: show-dialog var(--hide-duration) ease reverse;
+
+    &::backdrop {
+      animation: show-backdrop var(--hide-duration, 200ms) ease reverse;
+    }
+  }
+
+  &.pulse {
+    animation: pulse 250ms ease;
+  }
+}
+
+.dialog:focus {
+  outline: none;
+}
+
+/* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
+@media screen and (max-width: 420px) {
+  .dialog {
+    max-height: 80vh;
+  }
+}
+
+.dialog--open {
+  display: flex;
+  opacity: 1;
+}
+
+.header {
+  flex: 0 0 auto;
+  display: flex;
+  flex-wrap: nowrap;
+  padding: var(--spacing);
+  padding-block-end: 0;
+}
+
+.title {
+  align-self: center;
+  flex: 1 1 auto;
+  font-family: inherit;
+  font-size: var(--wa-font-size-l);
+  font-weight: var(--wa-font-weight-heading);
+  line-height: var(--wa-line-height-condensed);
+  margin: 0;
 }
 
 .header-actions {
@@ -28,13 +93,81 @@ dialog {
   flex-wrap: wrap;
   justify-content: end;
   gap: var(--wa-space-2xs);
-  margin-inline-start: auto;
+  padding-inline-start: var(--spacing);
+}
 
-  wa-icon-button,
-  ::slotted(wa-icon-button) {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    font-size: var(--wa-font-size-m);
+.header-actions wa-icon-button,
+.header-actions ::slotted(wa-icon-button) {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  font-size: var(--wa-font-size-m);
+}
+
+.body {
+  flex: 1 1 auto;
+  display: block;
+  padding: var(--spacing);
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.footer {
+  flex: 0 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wa-space-xs);
+  justify-content: end;
+  padding: var(--spacing);
+  padding-block-start: 0;
+}
+
+.footer ::slotted(wa-button:not(:first-of-type)) {
+  margin-inline-start: var(--wa-spacing-xs);
+}
+
+.dialog::backdrop {
+  /*
+      NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can
+      remove the fallback values here.
+    */
+  background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
+}
+
+@keyframes pulse {
+  0% {
+    scale: 1;
+  }
+  50% {
+    scale: 1.02;
+  }
+  100% {
+    scale: 1;
+  }
+}
+
+@keyframes show-dialog {
+  from {
+    opacity: 0;
+    scale: 0.8;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+@keyframes show-backdrop {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (forced-colors: active) {
+  .dialog {
+    border: solid 1px white;
   }
 }

src/components/dialog/dialog.ts

@@ -1,5 +1,6 @@
 import { html, isServer } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { WaAfterHideEvent } from '../../events/after-hide.js';
 import { WaAfterShowEvent } from '../../events/after-show.js';
 import { WaHideEvent } from '../../events/hide.js';
@@ -8,7 +9,6 @@ import { animateWithClass } from '../../internal/animate.js';
 import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import dialogStyles from '../../styles/native/dialog.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon-button/icon-button.js';
 import styles from './dialog.css';
@@ -35,7 +35,6 @@ import styles from './dialog.css';
  *  behavior such as data loss.
  * @event wa-after-hide - Emitted after the dialog closes and all animations are complete.
  *
- * @csspart base - The inner `<dialog>` used to render this component.
  * @csspart header - The dialog's header. This element wraps the title and header actions.
  * @csspart header-actions - Optional actions to add to the header. Works best with `<wa-icon-button>`.
  * @csspart title - The dialog's title.
@@ -44,16 +43,22 @@ import styles from './dialog.css';
  * @csspart body - The dialog's body.
  * @csspart footer - The dialog's footer.
  *
+ * @cssproperty --background-color - The dialog's background color.
+ * @cssproperty --border-radius - The radius of the dialog's corners.
+ * @cssproperty --box-shadow - The shadow effects around the edges of the dialog.
+ * @cssproperty --spacing - The amount of space around and between the dialog's content.
+ * @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
+ * @cssproperty [--show-duration=200ms] - The animation duration when showing the dialog.
+ * @cssproperty [--hide-duration=200ms] - The animation duration when hiding the dialog.
  */
 @customElement('wa-dialog')
 export default class WaDialog extends WebAwesomeElement {
-  static shadowStyle = [dialogStyles, styles];
+  static shadowStyle = styles;
 
   private readonly localize = new LocalizeController(this);
   private originalTrigger: HTMLElement | null;
-  private closeWatcher: CloseWatcher | null;
 
-  @query('dialog') dialog: HTMLDialogElement;
+  @query('.dialog') dialog: HTMLDialogElement;
 
   /**
    * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
@@ -76,9 +81,6 @@ export default class WaDialog extends WebAwesomeElement {
   /** When enabled, the dialog will be closed when the user clicks outside of it. */
   @property({ attribute: 'light-dismiss', type: Boolean }) lightDismiss = false;
 
-  @state()
-  hasOpened = this.open;
-
   firstUpdated() {
     if (this.open) {
       this.addOpenListeners();
@@ -100,12 +102,14 @@ export default class WaDialog extends WebAwesomeElement {
 
     if (waHideEvent.defaultPrevented) {
       this.open = true;
-      animateWithClass(this.dialog, 'wa-dialog-pulse');
+      animateWithClass(this.dialog, 'pulse');
       return;
     }
 
     this.removeOpenListeners();
 
+    await animateWithClass(this.dialog, 'hide');
+
     this.open = false;
     this.dialog.close();
     unlockBodyScrolling(this);
@@ -120,16 +124,7 @@ export default class WaDialog extends WebAwesomeElement {
   }
 
   private addOpenListeners() {
-    if ('CloseWatcher' in window) {
-      this.closeWatcher?.destroy();
-      this.closeWatcher = new CloseWatcher();
-      this.closeWatcher.onclose = () => {
-        this.requestClose(this.dialog);
-      };
-    } else {
-      this.closeWatcher?.destroy();
-      document.addEventListener('keydown', this.handleDocumentKeyDown);
-    }
+    document.addEventListener('keydown', this.handleDocumentKeyDown);
   }
 
   private removeOpenListeners() {
@@ -161,7 +156,7 @@ export default class WaDialog extends WebAwesomeElement {
       if (this.lightDismiss) {
         this.requestClose(this.dialog);
       } else {
-        await animateWithClass(this.dialog, 'wa-dialog-pulse');
+        await animateWithClass(this.dialog, 'pulse');
       }
     }
   }
@@ -198,7 +193,6 @@ export default class WaDialog extends WebAwesomeElement {
     this.addOpenListeners();
     this.originalTrigger = document.activeElement as HTMLElement;
     this.open = true;
-    this.hasOpened = true;
     this.dialog.showModal();
 
     lockBodyScrolling(this);
@@ -211,20 +205,28 @@ export default class WaDialog extends WebAwesomeElement {
       }
     });
 
+    await animateWithClass(this.dialog, 'show');
+
     this.dispatchEvent(new WaAfterShowEvent());
   }
 
   render() {
     return html`
       <dialog
-        part="base"
+        part="dialog"
+        class=${classMap({
+          dialog: true,
+          'dialog--open': this.open,
+          'dialog--with-header': this.withHeader,
+          'dialog--with-footer': this.withFooter,
+        })}
         @cancel=${this.handleDialogCancel}
         @click=${this.handleDialogClick}
         @pointerdown=${this.handleDialogPointerDown}
       >
         ${this.withHeader
           ? html`
-              <header part="header">
+              <header part="header" class="header">
                 <h2 part="title" class="title" id="title">
                   <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
                   <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
@@ -246,11 +248,11 @@ export default class WaDialog extends WebAwesomeElement {
             `
           : ''}
 
-        <slot part="body" class="body"></slot>
+        <div part="body" class="body"><slot></slot></div>
 
         ${this.withFooter
           ? html`
-              <footer part="footer">
+              <footer part="footer" class="footer">
                 <slot name="footer"></slot>
               </footer>
             `
@@ -262,7 +264,7 @@ export default class WaDialog extends WebAwesomeElement {
 
 // Ugly, but it fixes light dismiss in Safari: https://bugs.webkit.org/show_bug.cgi?id=267688
 if (!isServer) {
-  document.body.addEventListener('pointerdown', () => {
+  document.addEventListener('pointerdown', () => {
     /* empty */
   });
 }

src/components/drawer/drawer.ts

@@ -62,7 +62,6 @@ export default class WaDrawer extends WebAwesomeElement {
 
   private readonly localize = new LocalizeController(this);
   private originalTrigger: HTMLElement | null;
-  private closeWatcher: CloseWatcher | null;
 
   @query('.drawer') drawer: HTMLDialogElement;
 
@@ -136,16 +135,7 @@ export default class WaDrawer extends WebAwesomeElement {
   }
 
   private addOpenListeners() {
-    if ('CloseWatcher' in window) {
-      this.closeWatcher?.destroy();
-      this.closeWatcher = new CloseWatcher();
-      this.closeWatcher.onclose = () => {
-        this.requestClose(this.drawer);
-      };
-    } else {
-      this.closeWatcher?.destroy();
-      document.addEventListener('keydown', this.handleDocumentKeyDown);
-    }
+    document.addEventListener('keydown', this.handleDocumentKeyDown);
   }
 
   private removeOpenListeners() {

src/components/dropdown/dropdown.ts

@@ -50,8 +50,6 @@ export default class WaDropdown extends WebAwesomeElement {
   @query('#trigger') trigger: HTMLSlotElement;
   @query('.panel') panel: HTMLSlotElement;
 
-  private closeWatcher: CloseWatcher | null;
-
   /**
    * Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
    * can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
@@ -148,7 +146,7 @@ export default class WaDropdown extends WebAwesomeElement {
   private handleKeyDown = (event: KeyboardEvent) => {
     // Close when escape is pressed inside an open dropdown. We need to listen on the panel itself and stop propagation
     // in case any ancestors are also listening for this key.
-    if (this.open && event.key === 'Escape' && !this.closeWatcher) {
+    if (this.open && event.key === 'Escape') {
       event.stopPropagation();
       this.hide();
       this.focusOnTrigger();
@@ -344,16 +342,7 @@ export default class WaDropdown extends WebAwesomeElement {
 
   addOpenListeners() {
     this.panel.addEventListener('wa-select', this.handlePanelSelect);
-    if ('CloseWatcher' in window) {
-      this.closeWatcher?.destroy();
-      this.closeWatcher = new CloseWatcher();
-      this.closeWatcher.onclose = () => {
-        this.hide();
-        this.focusOnTrigger();
-      };
-    } else {
-      this.panel.addEventListener('keydown', this.handleKeyDown);
-    }
+    this.panel.addEventListener('keydown', this.handleKeyDown);
     document.addEventListener('keydown', this.handleDocumentKeyDown);
     document.addEventListener('mousedown', this.handleDocumentMouseDown);
   }
@@ -365,7 +354,6 @@ export default class WaDropdown extends WebAwesomeElement {
     }
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
     document.removeEventListener('mousedown', this.handleDocumentMouseDown);
-    this.closeWatcher?.destroy();
   }
 
   @watch('open', { waitUntilFirstUpdate: true })

src/components/icon-button/icon-button.css

@@ -1,5 +1,8 @@
 :host {
   --background-color-hover: var(--wa-color-neutral-fill-quiet);
+  --text-color-hover: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  --background-color-active: transparent;
+  --text-color-active: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
 
   display: inline-block;
   color: var(--wa-color-text-quiet);
@@ -22,12 +25,13 @@
 
 :host(:not([disabled])) .icon-button:hover,
 :host(:not([disabled])) .icon-button:focus-visible {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  background-color: var(--background-color-hover);
+  color: var(--text-color-hover);
 }
 
 :host(:not([disabled])) .icon-button:active {
-  color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
+  background-color: var(--background-color-active);
+  color: var(--text-color-active);
 }
 
 .icon-button:focus {

src/components/icon-button/icon-button.ts

@@ -17,7 +17,10 @@ import styles from './icon-button.css';
  * @event blur - Emitted when the icon button loses focus.
  * @event focus - Emitted when the icon button gains focus.
  *
- * @cssproperty --background-color-hover - The color of the button's background on hover.
+ * @cssproperty [--background-color-hover=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on hover.
+ * @cssproperty [--background-color-active=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on `:active`.
+ * @cssproperty --text-color-hover - The color of the button's background on hover.
+ * @cssproperty --text-color-active - The color of the button's background on `:active`.
  *
  * @csspart base - The component's base wrapper.
  */

src/components/icon/icon.ts

@@ -48,21 +48,21 @@ export default class WaIcon extends WebAwesomeElement {
   @state() private svg: SVGElement | HTMLTemplateResult | null = null;
 
   /** The name of the icon to draw. Available names depend on the icon library being used. */
-  @property({ reflect: true }) name?: string;
+  @property({ cssProperty: '--wa-icon-name' }) name?: string;
 
   /**
    * The family of icons to choose from. For Font Awesome Free (default), valid options include `classic` and `brands`.
    * For Font Awesome Pro subscribers, valid options include, `classic`, `sharp`, `duotone`, and `brands`. Custom icon
    * libraries may or may not use this property.
    */
-  @property({ reflect: true }) family: string;
+  @property({ cssProperty: '--wa-icon-family' }) family: string;
 
   /**
    * The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for
    * the `classic` and `sharp` families. Some variants require a Font Awesome Pro subscription. Custom icon libraries
    * may or may not use this property.
    */
-  @property({ reflect: true }) variant: string;
+  @property({ cssProperty: '--wa-icon-variant' }) variant: string;
 
   /** Draws the icon in a fixed-width both. */
   @property({ attribute: 'fixed-width', type: Boolean, reflect: true }) fixedWidth: false;
@@ -80,14 +80,16 @@ export default class WaIcon extends WebAwesomeElement {
   @property() label = '';
 
   /** The name of a registered custom icon library. */
-  @property({ reflect: true }) library = 'default';
+  @property({ cssProperty: '--wa-icon-library', default: 'default' }) library = 'default';
 
   connectedCallback() {
     super.connectedCallback();
+
     watchIcon(this);
   }
 
-  firstUpdated() {
+  firstUpdated(changedProperties: PropertyValues<this>) {
+    super.firstUpdated(changedProperties);
     this.initialRender = true;
     this.setIcon();
   }

src/components/option/option.ts

@@ -106,6 +106,11 @@ export default class WaOption extends WebAwesomeElement {
   }
 
   private handleDefaultSlotChange() {
+    // Tell the controller to update the label
+    if (customElements.get('wa-select')) {
+      this.closest('wa-select')?.selectionChanged();
+    }
+
     this.updateDefaultLabel();
 
     if (this.isInitialized) {
@@ -123,7 +128,7 @@ export default class WaOption extends WebAwesomeElement {
 
   private handleHover = (event: Event) => {
     // We need this because Safari doesn't honor :hover styles while dragging
-    // Testcase: https://codepen.io/leaverou/pen/VYZOOjy
+    // Test case: https://codepen.io/leaverou/pen/VYZOOjy
     if (event.type === 'mouseenter') {
       this.toggleCustomState('hover', true);
     } else if (event.type === 'mouseleave') {

src/components/page/page.css

@@ -97,6 +97,7 @@ slot:not([name]) {
 :host([disable-sticky~='menu']) [part~='menu'] {
   position: static;
   overflow: unset;
+  z-index: unset;
 }
 
 :host([disable-sticky~='aside']) [part~='aside'],

src/components/progress-bar/progress-bar.css

@@ -16,7 +16,7 @@
 }
 
 .indicator {
-  width: calc(var(--value, 0) * 1%);
+  width: var(--percentage);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -26,9 +26,7 @@
   overflow: hidden;
   line-height: 1;
   font-weight: var(--wa-font-weight-semibold);
-  transition: var(--wa-transition-slow, 200ms) var(--wa-transition-easing, ease);
-  transition: 1s;
-  /* transition-property: width, background; */
+  transition: all var(--wa-transition-slow, 200ms) var(--wa-transition-easing, ease);
   user-select: none;
   -webkit-user-select: none;
 }

src/components/progress-bar/progress-bar.test.ts

@@ -38,8 +38,9 @@ describe('<wa-progress-bar>', () => {
           expect(base.getAttribute('aria-valuenow')).to.equal('25');
         });
 
-        it('uses the value parameter to set the custom property on the indicator', () => {
-          expect(indicator.style.getPropertyValue('--value')).to.equal('25');
+        it('uses the value parameter to set the custom property on the indicator', async () => {
+          await new Promise(requestAnimationFrame);
+          expect(el.style.getPropertyValue('--percentage')).to.equal('25%');
         });
       });
 

src/components/progress-bar/progress-bar.ts

@@ -1,6 +1,8 @@
+import type { PropertyValues } from 'lit';
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { clamp } from '../../internal/math.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import styles from './progress-bar.css';
@@ -33,6 +35,16 @@ export default class WaProgressBar extends WebAwesomeElement {
   /** A custom label for assistive devices. */
   @property() label = '';
 
+  updated(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has('value')) {
+      // Wait a cycle before setting it so Safari animates it.
+      // https://github.com/shoelace-style/webawesome/issues/356
+      requestAnimationFrame(() => {
+        this.style.setProperty('--percentage', `${clamp(this.value, 0, 100)}%`);
+      });
+    }
+  }
+
   render() {
     return html`
       <div
@@ -45,7 +57,7 @@ export default class WaProgressBar extends WebAwesomeElement {
         aria-valuemax="100"
         aria-valuenow=${this.indeterminate ? '0' : this.value}
       >
-        <div part="indicator" class="indicator" style="--value: ${this.value}">
+        <div part="indicator" class="indicator">
           ${!this.indeterminate ? html` <slot part="label" class="label"></slot> ` : ''}
         </div>
       </div>

src/components/radio-button/radio-button.css

@@ -32,7 +32,6 @@
 /*
  * Checked buttons
  */
-
 :host([checked]) {
   --indicator-color: var(--wa-form-control-activated-color);
   --indicator-width: var(--wa-border-width-s);
@@ -43,3 +42,41 @@
     --border-color: var(--indicator-color);
   }
 }
+
+/*
+ * Active buttons
+ */
+button:active {
+  --text-color-active: var(--wa-form-control-activated-color);
+  --border-color-active: var(--wa-form-control-activated-color);
+}
+
+/* Horizontal radio pill buttons */
+:host([data-wa-radio-horizontal][data-wa-radio-first]:not([data-wa-radio-last])) .wa-pill {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+:host([data-wa-radio-horizontal][data-wa-radio-inner]) .wa-pill {
+  border-radius: 0;
+}
+
+:host([data-wa-radio-horizontal][data-wa-radio-last]:not([data-wa-radio-first])) .wa-pill {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+/* Vertical radio pill buttons */
+:host([data-wa-radio-vertical][data-wa-radio-first]:not([data-wa-radio-last])) .wa-pill {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+:host([data-wa-radio-vertical][data-wa-radio-inner]) .wa-pill {
+  border-radius: 0;
+}
+
+:host([data-wa-radio-vertical][data-wa-radio-last]:not([data-wa-radio-first])) .wa-pill {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}

src/components/radio-button/radio-button.ts

@@ -9,7 +9,6 @@ import nativeStyles from '../../styles/native/button.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
-import buttonStyles from '../button/button.css';
 import styles from './radio-button.css';
 
 /**
@@ -49,7 +48,8 @@ import styles from './radio-button.css';
  */
 @customElement('wa-radio-button')
 export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, buttonStyles, styles];
+  static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
+  static rectProxy = 'input';
 
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
 

src/components/radio-group/radio-group.ts

@@ -38,8 +38,6 @@ import styles from './radio-group.css';
  * @csspart form-control-input - The input's wrapper.
  * @csspart radios - The wrapper than surrounds radio items, styled as a flex container by default.
  * @csspart hint - The hint's wrapper.
- * @csspart button-group - The button group that wraps radio buttons.
- * @csspart button-group__base - The button group's `base` part.
  */
 @customElement('wa-radio-group')
 export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
@@ -65,7 +63,6 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
 
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
 
-  @state() private hasButtonGroup = false;
   @state() private hasRadioButtons = false;
 
   /**
@@ -150,7 +147,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
     clickedRadio.checked = true;
 
     const radios = this.getAllRadios();
-    const hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'wa-radio-button');
+    const hasRadioButtons = radios.some(radio => radio.tagName.toLowerCase() === 'wa-radio-button');
     for (const radio of radios) {
       if (clickedRadio === radio) {
         continue;
@@ -158,7 +155,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
 
       radio.checked = false;
 
-      if (!hasButtonGroup) {
+      if (!hasRadioButtons) {
         radio.setAttribute('tabindex', '-1');
       }
     }
@@ -183,6 +180,15 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
     // Detect the presence of radio buttons
     this.hasRadioButtons = radios.some(radio => radio.localName === 'wa-radio-button');
 
+    // Add data attributes to support styling
+    radios.forEach((radio, index) => {
+      radio.toggleAttribute('data-wa-radio-horizontal', this.orientation !== 'vertical');
+      radio.toggleAttribute('data-wa-radio-vertical', this.orientation === 'vertical');
+      radio.toggleAttribute('data-wa-radio-first', index === 0);
+      radio.toggleAttribute('data-wa-radio-inner', index !== 0 && index !== radios.length - 1);
+      radio.toggleAttribute('data-wa-radio-last', index === radios.length - 1);
+    });
+
     await Promise.all(
       // Sync the checked state and size
       radios.map(async radio => {
@@ -196,10 +202,8 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
       }),
     );
 
-    this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'wa-radio-button');
-
     if (radios.length > 0 && !radios.some(radio => radio.checked)) {
-      if (this.hasButtonGroup) {
+      if (this.hasRadioButtons) {
         const buttonRadio = radios[0].shadowRoot?.querySelector('button');
 
         if (buttonRadio) {
@@ -210,7 +214,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
       }
     }
 
-    if (this.hasButtonGroup) {
+    if (this.hasRadioButtons) {
       const buttonGroup = this.shadowRoot?.querySelector('wa-button-group');
 
       if (buttonGroup) {
@@ -276,12 +280,12 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
       index = 0;
     }
 
-    const hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'wa-radio-button');
+    const hasRadioButtons = radios.some(radio => radio.tagName.toLowerCase() === 'wa-radio-button');
 
     this.getAllRadios().forEach(radio => {
       radio.checked = false;
 
-      if (!hasButtonGroup) {
+      if (!hasRadioButtons) {
         radio.setAttribute('tabindex', '-1');
       }
     });
@@ -289,7 +293,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
     this.value = radios[index].value;
     radios[index].checked = true;
 
-    if (!hasButtonGroup) {
+    if (!hasRadioButtons) {
       radios[index].setAttribute('tabindex', '0');
       radios[index].focus();
     } else {
@@ -351,7 +355,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
         <slot
           part="form-control-input"
           class=${classMap({
-            'wa-button-group': this.hasButtonGroup,
+            'wa-button-group': this.hasRadioButtons,
             'wa-button-group-vertical': this.orientation === 'vertical',
           })}
           @slotchange=${this.syncRadioElements}

src/components/radio/radio.css

@@ -23,6 +23,10 @@
   opacity: 0;
 }
 
+[part~='label'] {
+  display: inline;
+}
+
 [part~='hint'] {
   grid-column: 2;
   margin-block-start: var(--wa-space-3xs);

src/components/select/select.css

@@ -208,13 +208,13 @@
   &::slotted(wa-divider) {
     --spacing: var(--wa-space-xs);
   }
-
-  &::slotted(small) {
-    display: block;
-    font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-semibold);
-    color: var(--wa-color-text-quiet);
-    padding-block: var(--wa-space-xs);
-    padding-inline: var(--wa-space-xl);
-  }
+}
+
+slot:not([name])::slotted(small) {
+  display: block;
+  font-size: var(--wa-font-size-s);
+  font-weight: var(--wa-font-weight-semibold);
+  color: var(--wa-color-text-quiet);
+  padding-block: var(--wa-space-xs);
+  padding-inline: var(--wa-space-xl);
 }

src/components/select/select.test.ts

@@ -647,6 +647,7 @@ describe('<wa-select>', () => {
             );
             const el = form.querySelector<WaSelect>('wa-select')!;
 
+            expect(el.defaultValue).to.equal('option-1');
             expect(el.value).to.equal('');
             expect(new FormData(form).get('select')).equal('');
 
@@ -657,6 +658,7 @@ describe('<wa-select>', () => {
 
             await aTimeout(10);
             await el.updateComplete;
+            expect(el.optionValues ? [...el.optionValues] : []).to.have.members(['option-1']);
             expect(el.value).to.equal('option-1');
             expect(new FormData(form).get('select')).equal('option-1');
           });
@@ -745,6 +747,8 @@ describe('<wa-select>', () => {
             );
 
             const el = form.querySelector<WaSelect>('wa-select')!;
+            expect(el.optionValues ? [...el.optionValues] : []).to.have.members(['bar', 'baz']);
+            expect(el.optionValues?.size).to.equal(2);
             expect(el.value).to.have.members(['bar', 'baz']);
             expect(el.value!.length).to.equal(2);
             expect(new FormData(form).getAll('select')).to.have.members(['bar', 'baz']);
@@ -760,6 +764,36 @@ describe('<wa-select>', () => {
             expect(new FormData(form).getAll('select')).to.have.members(['foo', 'bar', 'baz']);
           });
         });
+
+        describe('With setting the value via JS', () => {
+          it('Should preserve value even if not returned', async () => {
+            const form = await fixture<HTMLFormElement>(
+              html` <form>
+                <wa-select name="select">
+                  <wa-option value="bar">Bar</wa-option>
+                  <wa-option value="baz">Baz</wa-option>
+                </wa-select>
+              </form>`,
+            );
+
+            const el = form.querySelector<WaSelect>('wa-select')!;
+            expect(el.value).to.equal('');
+
+            el.value = 'foo';
+            await aTimeout(10);
+            await el.updateComplete;
+            expect(el.value).to.equal('');
+
+            const option = document.createElement('wa-option');
+            option.value = 'foo';
+            option.innerText = 'Foo';
+            el.append(option);
+
+            await aTimeout(10);
+            await el.updateComplete;
+            expect(el.value).to.equal('foo');
+          });
+        });
       });
     });
   }

src/components/select/select.ts

@@ -22,6 +22,7 @@ import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
+import '../option/option.js';
 import type WaOption from '../option/option.js';
 import '../popup/popup.js';
 import type WaPopup from '../popup/popup.js';
@@ -37,6 +38,7 @@ import styles from './select.css';
  * @dependency wa-icon
  * @dependency wa-popup
  * @dependency wa-tag
+ * @dependency wa-option
  *
  * @slot - The listbox options. Must be `<wa-option>` elements. You can use `<wa-divider>` to group items visually.
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
@@ -102,7 +104,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
   private readonly localize = new LocalizeController(this);
   private typeToSelectString = '';
   private typeToSelectTimeout: number;
-  private closeWatcher: CloseWatcher | null;
 
   @query('.select') popup: WaPopup;
   @query('.combobox') combobox: HTMLSlotElement;
@@ -118,6 +119,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
   @state() displayLabel = '';
   @state() currentOption: WaOption;
   @state() selectedOptions: WaOption[] = [];
+  @state() optionValues: Set<string> | undefined;
 
   /** The name of the select, submitted as a name/value pair with form data. */
   @property() name = '';
@@ -158,7 +160,47 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     return val;
   }
 
-  @property({ attribute: false }) value: string | string[] | null = null;
+  private _value: string[] | undefined;
+  @property({ attribute: false })
+  set value(val: string | string[]) {
+    let oldValue = this.value;
+
+    if (!Array.isArray(val)) {
+      val = val.split(' ');
+    }
+
+    if (!this._value || this._value.join(' ') !== val.join(' ')) {
+      this._value = val;
+      let newValue = this.value;
+
+      if (newValue != oldValue) {
+        this.requestUpdate('value', oldValue);
+      }
+    }
+  }
+  get value() {
+    let value = this._value ?? this.defaultValue;
+    value = Array.isArray(value) ? value : [value];
+    let optionsChanged = !this.optionValues;
+
+    if (optionsChanged) {
+      this.optionValues = new Set(
+        this.getAllOptions()
+          .filter(option => !option.disabled)
+          .map(option => option.value),
+      );
+    }
+
+    // Drop values not in the DOM
+    let ret: string | string[] = value.filter(v => this.optionValues!.has(v));
+    ret = this.multiple ? ret : (ret[0] ?? '');
+
+    if (optionsChanged) {
+      this.requestUpdate('value');
+    }
+
+    return ret;
+  }
 
   /** The select's size. */
   @property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@@ -250,7 +292,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
           ?pill=${this.pill}
           size=${this.size}
           removable
-          @wa-remove=${(event: WaRemoveEvent) => this.handleTagRemove(event, option)}
         >
           ${option.label}
         </wa-tag>
@@ -280,17 +321,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     if (this.getRootNode() !== document) {
       this.getRootNode().addEventListener('focusin', this.handleDocumentFocusIn);
     }
-
-    if ('CloseWatcher' in window) {
-      this.closeWatcher?.destroy();
-      this.closeWatcher = new CloseWatcher();
-      this.closeWatcher.onclose = () => {
-        if (this.open) {
-          this.hide();
-          this.displayInput.focus({ preventScroll: true });
-        }
-      };
-    }
   }
 
   private removeOpenListeners() {
@@ -301,8 +331,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     if (this.getRootNode() !== document) {
       this.getRootNode().removeEventListener('focusin', this.handleDocumentFocusIn);
     }
-
-    this.closeWatcher?.destroy();
   }
 
   private handleFocus() {
@@ -538,21 +566,41 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     }
 
     const allOptions = this.getAllOptions();
-    const val = this.valueHasChanged ? this.value : this.defaultValue;
-    const value = Array.isArray(val) ? val : [val];
-    const values: string[] = [];
+    this.optionValues = undefined; // dirty the value so it gets recalculated
 
-    // Check for duplicate values in menu items
-    allOptions.forEach(option => values.push(option.value));
+    const value = this.value;
 
     // Select only the options that match the new value
     this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
   }
 
-  private handleTagRemove(event: WaRemoveEvent, option: WaOption) {
+  private handleTagRemove(event: WaRemoveEvent, directOption?: WaOption) {
     event.stopPropagation();
 
-    if (!this.disabled) {
+    if (this.disabled) return;
+
+    // Use the directly provided option if available (from getTag method)
+    let option = directOption;
+
+    // If no direct option was provided, find the option from the event path
+    if (!option) {
+      const tagElement = (event.target as Element).closest('wa-tag[part~=tag]');
+
+      if (tagElement) {
+        // Find the index of this tag among all tags
+        const tagsContainer = this.shadowRoot?.querySelector('[part="tags"]');
+        if (tagsContainer) {
+          const allTags = Array.from(tagsContainer.children);
+          const index = allTags.indexOf(tagElement as HTMLElement);
+
+          if (index >= 0 && index < this.selectedOptions.length) {
+            option = this.selectedOptions[index];
+          }
+        }
+      }
+    }
+
+    if (option) {
       this.toggleOptionSelection(option, false);
 
       // Emit after updating
@@ -565,6 +613,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
 
   // Gets an array of all `<wa-option>` elements
   private getAllOptions() {
+    if (!this?.querySelectorAll) {
+      return [];
+    }
     return [...this.querySelectorAll<WaOption>('wa-option')];
   }
 
@@ -621,18 +672,31 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     this.selectionChanged();
   }
 
-  // This method must be called whenever the selection changes. It will update the selected options cache, the current
-  // value, and the display value
-  private selectionChanged() {
+  // @internal This method must be called whenever the selection changes. It will update the selected options cache, the
+  // current value, and the display value. The option component uses it internally to update labels as they change.
+  public selectionChanged() {
     const options = this.getAllOptions();
 
     // Update selected options cache
     this.selectedOptions = options.filter(el => el.selected);
+    let selectedValues = new Set(this.selectedOptions.map(el => el.value));
+
+    // Toggle values present in the DOM from this.value, while preserving options NOT present in the DOM (for lazy loading)
+    // Note that options NOT present in the DOM will be moved to the end after this
+    if (selectedValues.size > 0 || this._value) {
+      if (!this._value) {
+        // First time it's set
+        let value = this.defaultValue ?? [];
+        this._value = Array.isArray(value) ? value : [value];
+      }
+
+      // Filter out values that are in the DOM
+      this._value = this._value.filter(value => !this.optionValues?.has(value));
+      this._value.unshift(...selectedValues);
+    }
 
     // Update the value and display label
     if (this.multiple) {
-      this.value = this.selectedOptions.map(el => el.value);
-
       if (this.placeholder && this.value.length === 0) {
         // When no items are selected, keep the value empty so the placeholder shows
         this.displayLabel = '';
@@ -641,7 +705,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
       }
     } else {
       const selectedOption = this.selectedOptions[0];
-      this.value = selectedOption?.value ?? '';
       this.displayLabel = selectedOption?.label ?? '';
     }
 
@@ -650,14 +713,13 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
       this.updateValidity();
     });
   }
+
   protected get tags() {
     return this.selectedOptions.map((option, index) => {
       if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
         const tag = this.getTag(option, index);
-        // Wrap so we can handle the remove
-        return html`<div @wa-remove=${(e: WaRemoveEvent) => this.handleTagRemove(e, option)}>
-          ${typeof tag === 'string' ? unsafeHTML(tag) : tag}
-        </div>`;
+        if (!tag) return null;
+        return typeof tag === 'string' ? unsafeHTML(tag) : tag;
       } else if (index === this.maxOptionsVisible) {
         // Hit tag limit
         return html`
@@ -673,7 +735,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
           >
         `;
       }
-      return html``;
+      return null;
     });
   }
 
@@ -873,7 +935,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
               />
 
               <!-- Tags need to wait for first hydration before populating otherwise it will create a hydration mismatch. -->
-              ${this.multiple && this.hasUpdated ? html`<div part="tags" class="tags">${this.tags}</div>` : ''}
+              ${this.multiple && this.hasUpdated
+                ? html`<div part="tags" class="tags" @wa-remove=${this.handleTagRemove}>${this.tags}</div>`
+                : ''}
 
               <input
                 class="value-input"

src/components/switch/switch.ts

@@ -49,6 +49,7 @@ import styles from './switch.css';
  */
 @customElement('wa-switch')
 export default class WaSwitch extends WebAwesomeFormAssociatedElement {
+  static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
   static shadowStyle = [formControlStyles, sizeStyles, styles];
 
   static get validators() {

src/components/tab/tab.css

@@ -15,6 +15,14 @@
   -webkit-user-select: none;
   cursor: pointer;
   transition: color var(--wa-transition-fast) var(--wa-transition-easing);
+
+  ::slotted(wa-icon:first-child) {
+    margin-inline-end: var(--wa-space-xs);
+  }
+
+  ::slotted(wa-icon:last-child) {
+    margin-inline-start: var(--wa-space-xs);
+  }
 }
 
 :host(:hover:not([disabled])) .tab {