Merge branch 'next' into custom-palettes

- Only include my scales for custom palettes
- Do not include bogus role declarations

.github/workflows/ssr_tests.js.yml

@@ -1,12 +1,11 @@
-# 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]
-  workflow_dispatch:
+  push:
+    branches: [next]
 
 jobs:
   ssr_test:

docs/.eleventy.js

@@ -7,10 +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 nunjucks from 'nunjucks';
-// import componentList from './_data/componentList.js';
+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';
@@ -29,6 +29,7 @@ const globalData = {
   package: packageData,
   isAlpha,
   layout: 'page.njk',
+
   server: {
     head: '',
     loginOrAvatar: '',
@@ -189,30 +190,30 @@ 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,
-  //   });
-  // }
+  // SSR plugin
+  // Make sure this is the last thing, we dont 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',

docs/_data/hueRanges.js

@@ -1 +1 @@
-export { hueRanges as default } from '../assets/scripts/tweak/data.js';
+export { HUE_RANGES as default } from '../assets/scripts/tweak/data.js';

docs/_includes/base.njk

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}" class="wa-cloak">
+<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
   <head>
     {% include 'head.njk' %}
     <meta name="theme-color" content="#f36944">

docs/_includes/contrast-table.njk

@@ -12,7 +12,7 @@
     </tr>
   </thead>
 {% for hue in hues -%}
-<tr data-hue="{{ hue }}">
+<tr data-hue="{{ hue }}" v-if="'{{hue}}' in paletteScales">
   <th>{{ hue | capitalize }}</th>
   {% for tint_bg in tints -%}
     {% set color_bg = palettes[paletteId][hue][tint_bg] %}

docs/_includes/grouped-pages.njk

@@ -3,8 +3,8 @@
 <section id="grid" class="index-grid">
 {% 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 groupedPages.meta.groupCount > 1 %}
+  <h2 class="index-category">
     {% if pages.meta.url %}<a href="{{ pages.meta.url }}">{{ pages.meta.title }}</a>
     {% else %}
     {{ pages.meta.title }}

docs/_includes/head.njk

@@ -23,12 +23,10 @@
 <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">
-
-{# Internal components #}
-<script type="module" src="/assets/components/scoped.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
 
 {# Web Awesome #}
-<script type="module" src="/dist/webawesome.loader.js"></script>
+<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
 
 <script type="module" src="/assets/scripts/theme-picker.js"></script>
 {# Preset Theme #}
@@ -50,5 +48,6 @@
 <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/palette.njk

@@ -0,0 +1,36 @@
+<table class="colors main wa-palette-{{ paletteId }} static-palette">
+  <thead>
+    <tr>
+      <th></th>
+      <th class="core-column">Core tint</th>
+      {% for tint in tints -%}
+      <th>{{ tint }}</th>
+      {%- endfor %}
+    </tr>
+  </thead>
+  <tbody>
+    {%- set hueBefore = hues[hues|length - 2] -%}
+    {% for hue in hues -%}
+      {% set scale = palettes[paletteId][hue] %}
+      {% set coreTint = scale.maxChromaTint %}
+      {%- set coreColor = scale[coreTint] -%}
+      {%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
+      <tr data-hue="{{ hue }}" class="color-scale" style="--swatch-text-color: light-dark(var(--wa-color-{{ hue }}-10), white)">
+        <th>{{ hue | capitalize }}</th>
+        <td class="core-column" style="--color: var(--wa-color-{{ hue }})">
+          <div class="color swatch" style="color-scheme: {{ 'light' if scale.maxChromaTint > 60 else 'dark' }};">
+            {{ scale.maxChromaTint }}
+          </div>
+        </td>
+        {% for tint in tints -%}
+        {%- set color = scale[tint] -%}
+        <td style="--color: var(--wa-color-{{ hue }}-{{ tint }}); color-scheme: ">
+          <div class="color swatch" style="color-scheme: {{ 'light' if tint > 60 else 'dark' }};">
+            <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
+          </div>
+        </td>
+      {%- endfor -%}
+      </tr>
+  </tbody>
+  {% endfor %}
+</table>

docs/_includes/sidebar-link.njk

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

docs/_includes/sidebar.njk

@@ -1,7 +1,7 @@
 {# Getting started #}
 <h2>Getting Started</h2>
 <ul>
-  <li><a href="/docs/">Installation</a></li>
+  <li><a href="/docs/installation">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/status.njk

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

docs/_includes/svgs/action-panel.njk

@@ -1,8 +0,0 @@
-<svg width="96" height="57" viewBox="0 0 96 57" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 1H84C90.0751 1 95 5.92487 95 12V45C95 51.0751 90.0751 56 84 56H12C5.92487 56 1 51.0751 1 45V12C1 5.92487 5.92487 1 12 1Z" fill="white" stroke="#E4E5E9" stroke-width="2"/>
-<rect x="7" y="39" width="50" height="11" rx="4" fill="#4895FD"/>
-<rect x="7" y="8" width="41" height="5" fill="#616D8A"/>
-<rect x="7" y="19.75" width="76" height="3" fill="#D9D9D9"/>
-<rect x="7" y="25" width="76" height="3" fill="#D9D9D9"/>
-<rect x="7" y="32" width="76" height="3" fill="#D9D9D9"/>
-</svg>

docs/_includes/svgs/palette.njk

@@ -1,20 +1,31 @@
 {% 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 %}
 
-<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">
+{% 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>
 
-    <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>
+{% 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>

docs/_includes/svgs/preview.njk

@@ -1,10 +0,0 @@
-<svg width="120" height="87" viewBox="0 0 240 178" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect y="39" width="67" height="63" rx="12" fill="#D9D9D9"/>
-<rect y="115" width="67" height="63" rx="12" fill="#D9D9D9"/>
-<rect width="67" height="19" rx="6" fill="#D9D9D9"/>
-<rect x="87" y="39" width="67" height="63" rx="12" fill="#D9D9D9"/>
-<rect x="174" y="39" width="67" height="63" rx="12" fill="#D9D9D9"/>
-<rect x="174" y="7" width="67" height="4.75" rx="2.375" fill="#D9D9D9"/>
-<rect x="87" y="115" width="67" height="63" rx="12" fill="#D9D9D9"/>
-<rect x="174" y="115" width="67" height="63" rx="12" fill="#D9D9D9"/>
-</svg>

docs/_includes/svgs/theme-color.njk

@@ -1,13 +1,13 @@
 {% set themeId = theme.fileSlug %}
 
-<wa-scoped class="theme-icon-host theme-color-icon-host">
-  <template>
+<div>
+  <template shadowrootmode="open">
     <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-icon theme-color-icon wa-theme-{{ themeId }}">
+    <div class="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>
-</wa-scoped>
+</div>

docs/_includes/svgs/theme-typography.njk

@@ -1,16 +1,16 @@
-{% set themeId = theme.fileSlug or page.fileSlug %}
+{% set themeId = theme.fileSlug %}
 
-<wa-scoped class="theme-icon-host theme-typography-icon-host">
-  <template>
+<div>
+  <template shadowrootmode="open">
     <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-icon theme-typography-icon wa-theme-{{ themeId }}" data-no-outline data-no-anchor role="presentation">
+    <div class="theme-typography-icon wa-theme-{{ themeId }}" data-no-outline data-no-anchor role="presentation">
       <h3>Title</h3>
       <p>Body text</p>
     </div>
   </template>
-</wa-scoped>
+</div>

docs/_includes/svgs/theme.njk

@@ -1,29 +0,0 @@
-{% 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/palette.njk

@@ -1,38 +1,39 @@
 {% set hasSidebar = true %}
 {% set hasOutline = true %}
-{% set paletteId = page.fileSlug %}
+{% set paletteId = "default" if page.fileSlug == 'custom' else page.fileSlug %}
+{% set isCustom = page.fileSlug == 'custom' %}
 {% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
 
 {% extends '../_includes/base.njk' %}
 
 {% block head %}
 <style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
-<link href="{{ page.url }}../tweak.css" rel="stylesheet">
-<script type="module" src="{{ page.url }}../tweak.js"></script>
+<link href="{{ page.url }}../app/tweak.css" rel="stylesheet">
+<script type="module" src="{{ page.url }}../app/tweak.js"></script>
 {% endblock %}
 
 {% block header %}
-<div id="palette-app" data-palette-id="{{ paletteId }}">
+<div id="palette-app" data-slug="{{ page.fileSlug }}" data-palette-id="{{ page.fileSlug }}">
   <div
   :class="{
-    tweaking: tweaking.chroma,
-    'tweaking-chroma': tweaking.chroma,
-    'tweaking-hue': tweaking.chroma,
-    'tweaking-gray-chroma': tweaking.grayChroma,
+    seeded: isSeeded,
     'tweaked-chroma': tweaked?.chroma,
     'tweaked-hue': tweaked?.hue,
-    'tweaked-any': tweaked
+    'tweaked-any': Object.keys(tweaksHumanReadable).length,
   }"
   :style="{
     '--chroma-scale': chromaScale,
-    '--gray-chroma': tweaked?.grayChroma ? grayChroma : '',
+    '--gray-chroma': tweaked?.grayChroma ? grayChroma : originalGrayChroma,
+    '--max-c': maxChroma,
+    '--avg-l': L_RANGES[level].mid,
     }">
 
+  <header id="palette-info">
   {% include 'breadcrumbs.njk' %}
 
   <h1 class="title">
-    <span v-content="title">{{ title }}</span>
-    <template v-if="saved || tweaked">
+    <span v-content="saved?.title || (step > 0 ? defaultPaletteTitle : paletteTitle)">{{ title }}</span>
+    <template v-if="saved || step > 0">
       <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"
@@ -46,11 +47,11 @@
     </template>
   </h1>
 
-  <div class="block-info">
-    <code class="class">.wa-palette-{{ paletteId }}</code>
+  <div class="block-info" v-cloak>
+    <code class="class" v-if="saved || !isCustom || step > 0">.wa-palette-<span v-content="slug">{{ page.fileSlug }}</span></code>
     {% include '../_includes/status.njk' %}
     {% if not isPro %}
-    <wa-badge class="pro" v-if="tweaked">PRO</wa-badge>
+    <wa-badge class="pro" v-if="tweaked || isCustom">PRO</wa-badge>
     {% endif %}
   </div>
   {% if description %}
@@ -58,17 +59,32 @@
     {{ description | inlineMarkdown | safe }}
   </p>
   {% endif %}
+  {% raw %}
+    <div class="hue-wheel" v-if="!isCustom || step > 1">
+      <template v-for="color, hue in coreColors">
+        <template v-if="!isCustom || seedHues[hue]">
+          <div :id="`hue-wheel-${hue}`" class="color"
+              :style="{
+            '--color': color,
+            '--h': color.get('oklch.h'),
+            '--c': color.get('oklch.c'),
+            '--l': color.get('oklch.l'),
+            }"></div>
+          <wa-tooltip :for="`hue-wheel-${ hue }`" hoist>{{ capitalize(hue) }} {{ coreLevels[hue] }}</wa-tooltip>
+        </template>
+      </template>
+  </div>
+  {% endraw %}
+  </header>
 {% endblock %}
 
 {% block afterContent %}
 
-{% set maxChroma = 0 %}
-
-<wa-callout size="small" class="tweaked-callout" variant="warning">
+<wa-callout size="small" class="tweaked-callout" variant="warning" v-if="!isCustom">
   <wa-icon name="sliders-simple" slot="icon" variant="regular"></wa-icon>
    This palette has been tweaked.
    <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>
+    <wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" removable @wa-remove="reset(param)">{% raw %}{{ tweakHumanReadable }}{% endraw %}</wa-tag>
    </div>
 
   <wa-button @click="reset()" appearance="outlined" variant="danger">
@@ -79,6 +95,10 @@
   </wa-button>
 </wa-callout>
 
+<h2>Scales</h2>
+
+{% include "palette.njk" %}
+
 <table class="colors main wa-palette-{{ paletteId }}">
   <thead>
     <tr>
@@ -89,128 +109,126 @@
       {%- endfor %}
     </tr>
   </thead>
-{# Initialize to last hue before gray #}
-{%- set hueBefore = hues[hues|length - 2] -%}
-{% for hue in hues -%}
-{% set coreTint = palettes[paletteId][hue].maxChromaTint %}
-{%- set coreColor = palettes[paletteId][hue][coreTint] -%}
-{%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
-{% 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 }})"
-      :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">
-      {% 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"
-          @input="tweaking.hue = tweaking.{{hue}} = true"
-          @change="tweaking.hue = tweaking.{{ hue }} = false">
-          <div slot="label">
-            Tweak {{ hue }} hue
-            <wa-icon-button @click="hueShifts.{{ hue }} = 0" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
-          </div>
-        </wa-slider>
-        <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>`
-    </wa-dropdown>
-  </td>
-  {% for tint in tints -%}
-    {%- set color = palettes[paletteId][hue][tint] -%}
-    <td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})"
+  {% raw %}
+  <tbody v-cloak>
+    <tr v-for="hue in paletteScalesList" :data-hue="hue" :key="hue"
+        class="color-scale" :class="{
+          tweaked: hue === 'gray' ? tweaked.grayChroma || tweaked.grayColor : hueShifts[hue],
+        }"
         :style="{
-          '--color-tweaked': colors.{{ hue }}[{{ tint }}],
-          '--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ tint }}],
+          '--swatch-text-color': `light-dark(var(--wa-color-${ hue }-10), white)`,
+          '--hue-shift': hueShifts[hue] || ''
         }">
-      <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>
-  {%- endfor -%}
-</tr>
-{%- endfor %}
+      <th>
+        {{ capitalize(hue) }}
+        <info-tip v-if="isCustom && !seedHues[hue]">
+          <wa-icon name="sparkles" style="color: var(--wa-color-gray-50)"></wa-icon>
+          <template #content>Generated scale</template>
+        </info-tip>
+      </th>
+      <td class="core-column" :style="{'--original-color': `var(--wa-color-${ hue })`, '--color': colors[hue][coreLevels[hue]]}">
+        <color-popup :title="capitalize(hue) + ' (core)'" :token="`--wa-color-${ hue }`" :color="coreColors[hue]"
+          :pinned="!!seedColors[colorToIndex[hue].core]"
+          :deletable="isCustom" @delete="deleteColor(colorToIndex[hue].core)"
+          :pinnable="isCustom" @pin="addColor(coreColors[hue] + '')">
+          <div slot="trigger" :id="`core-${ hue }-swatch`" class="color swatch" :style="{colorScheme: coreLevels[hue] > 60 ? 'light' : 'dark'}">
+            <span v-content="coreLevels[hue]"></span>
+            <wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
+          </div>
+          <template #content>
+            <template v-if="hue === 'gray'">
+              <color-swatch-picker :model-value="computedGrayColor" @update:model-value="grayColor = $event" label="Gray undertone" :colors="coreColors"></color-swatch-picker>
+            </template>
+            <template v-else>
+            <color-slider v-if="isCustom && seedColors[colorToIndex[hue].core]"
+              coord="h" type="shift"
+              v-model:color="seedColors[colorToIndex[hue].core].color"
+              :default-value="seedColors[colorToIndex[hue].core].inputColor.oklch.h"
+              :min="HUE_RANGES[hue].min + 1" :max="HUE_RANGES[hue].max"
+              label="Adjust hue" :label-min="moreHue[hueBefore[hue]]" :label-max="moreHue[hueAfter[hue]]"
+              ></color-slider>
+
+              <color-slider  v-if="!isCustom && baseCoreColors[hue]"
+                coord="h" type="shift"
+                v-model="hueShifts[hue]"
+                :default-color="baseCoreColors[hue]"
+                :min="HUE_RANGES[hue].min + 1" :max="HUE_RANGES[hue].max"
+                label="Adjust hue" :label-min="moreHue[hueBefore[hue]]" :label-max="moreHue[hueAfter[hue]]"
+                ></color-slider>
+            </template>
+
+            <color-slider v-if="hue === 'gray'" coord="c" type="scale"
+              :model-value="computedGrayChroma"
+              @update:model-value="grayChroma = $event"
+              :default-color="baseCoreColors[computedGrayColor]"
+              :base-value="baseCoreColors[originalGrayColor].oklch.c"
+              :default-value-relative="originalGrayChroma"
+              :min="0" :max-relative="maxGrayChroma" :step="0.00001"
+              label="Gray colorfulness" label-min="Neutral" :label-max="moreHue[computedGrayColor]"
+              ></color-slider>
+            <color-slider v-else-if="isCustom" v-model:color="seedColors[colorToIndex[hue].core].color"
+              :default-value="seedColors[colorToIndex[hue].core].inputColor?.oklch.c"
+              coord="c"
+              :min="Math.max(coreColors.gray.oklch.c, ...Object.keys(seedHues[hue]).filter(t => t !== coreLevels[hue]).map(t => seedHues[hue][t].oklch.c))"
+              :max="getMaxChroma(colors[hue].core?.oklch.l, colors[hue].core?.oklch.h) - 0.001" :step="0.00001"
+              label="Adjust colorfulness" label-min="More muted" label-max="More vibrant"
+              label-default="Entered color"
+              format-type="scale"
+              ></color-slider>
+
+          </template>
+        </color-popup>
+      </td>
+      <td v-for="tint in tints.toReversed()" :data-tint="tint" :style="{'--original-color': `var(--wa-color-${ hue }-${tint})`, '--color': colors[hue][tint] }">
+        <color-popup :title="capitalize(hue) + ' ' + tint" :token="`--wa-color-${ hue }-${ tint }`" :color="colors[hue][tint]"
+          :pinned="!!seedColors[colorToIndex[hue][tint]]"
+          :deletable="isCustom" @delete="deleteColor(colorToIndex[hue][tint])"
+          :pinnable="isCustom" @pin="addColor({hue, pinnedHue: hue, level: tint})">
+          <div slot="trigger" class="color swatch" :style="{ colorScheme: tint > 60 ? 'light' : 'dark' }">
+            <wa-icon class="pinned-icon" name="thumbtack" variant="regular" v-if="seedColors[colorToIndex[hue][tint]]"></wa-icon>
+            <wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
+          </div>
+          <template #content v-if="isCustom && seedHues[hue] && (tint == '95' || tint == '05' || seedColors[colorToIndex[hue][tint]]) && tweakBase[hue][tint]">
+            <color-slider v-if="HUE_RANGES[hue]" v-model:color="colors[hue][tint]"
+              :default-value="colors[hue][tweakBase[hue][tint]].oklch.h"
+              @input="!seedColors[colorToIndex[hue][tint]] ? addColor({hue, pinnedHue: hue, level: tint}) : null"
+              @update:color="seedColors[colorToIndex[hue][tint]] ? seedColors[colorToIndex[hue][tint]].color = $event : null"
+              coord="h"
+              :min="HUE_RANGES[hue].mid - 70" :max="HUE_RANGES[hue].mid + 70" :step="1"
+              label="Hue shift" :label-min="moreHue[hueBefore[hue]]" :label-max="moreHue[hueAfter[hue]]"
+              :label-default="`${capitalize(hue)} ${tweakBase[hue][tint]}`"
+              format-type="shift"
+              ></color-slider>
+            <color-slider v-if="hue != 'gray'" v-model:color="colors[hue][tint]"
+              :default-value="colors[hue][tweakBase[hue][tint]].oklch.c"
+              @input="!seedColors[colorToIndex[hue][tint]] ? addColor({hue, pinnedHue: hue, level: tint}) : null"
+              @update:color="seedColors[colorToIndex[hue][tint]] ? seedColors[colorToIndex[hue][tint]].color = $event : null"
+              coord="c"
+              :min="coreColors.gray.oklch.c + 0.001"
+              :max="tint == coreLevels[hue] ? maxChroma(colors[hue][tweakBase[hue][tint]].oklch.l, colors[hue][tweakBase[hue][tint]].oklch.h) : coreColors[hue].oklch.c - 0.001" :step="0.001"
+              label="Colorfulness" label-min="More muted" label-max="More vibrant"
+              format-type="scale"
+              :label-default="`${capitalize(hue)} ${tweakBase[hue][tint]}`"
+              ></color-slider>
+          </template>
+        </color-popup>
+      </td>
+    </tr>
+{% endraw %}
+</tbody>
 </table>
 
-{% set chromaScaleBounds = [
-(0.08 / maxChroma) | number({maximumFractionDigits: 2}),
-(0.3 / maxChroma]) | number({maximumFractionDigits: 2}) -%}
-<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" ref="chromaScaleSlider"
-    v-model="chromaScale" value="1" step="0.01"
-    min="{{ chromaScaleBounds[0] }}" max="{{ chromaScaleBounds[1] }}"
-    @input="tweaking.chroma = true"
-    @change="tweaking.chroma = false">
-    <div slot="label">
-      Overall colorfulness
-      <wa-icon-button @click="chromaScale = 1" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
-    </div>
-  </wa-slider>
-  <div class="label-min">More muted</div>
-  <div class="label-max">More vibrant</div>
-</div>
+<color-slider v-if="!isCustom" :class="{ tweaked: chromaScale !== 1 }"
+  type="scale"
+  v-model="chromaScale"
+  coord="c"
+  :default-color="baseMaxChromaColor"
+  :default-value="baseMaxChroma"
+  :min="MAX_CHROMA_BOUNDS.min" :max="MAX_CHROMA_BOUNDS.max" :step="0.01"
+  label="Overall colorfulness" label-min="More muted" label-max="More vibrant"
+></color-slider>
 
+{% if page.fileSlug != 'custom' %}
 <h2>Used By</h2>
 
 <section class="index-grid">
@@ -220,6 +238,7 @@ style="--min: {{ chromaScaleBounds[0] }}; --max: {{ chromaScaleBounds[1] }};">
   {%- endif -%}
 {% endfor %}
 </section>
+{% endif %}
 
 {% markdown %}
 ## Color Contrast
@@ -312,8 +331,22 @@ Add the following code at the top of your CSS file:
 </wa-tab-panel>
 </wa-tab-group>
 
-
 {% endmarkdown %}
+
+<section id="saved" class="index-grid" v-if="savedVariations?.length">
+  <h2 class="index-category">Saved {{ 'custom palettes' if page.fileSlug == 'custom' else title + ' variations' }}</h2>
+  <a v-for="palette of savedVariations" :href="'/docs/palettes/' + palette.id">
+    <wa-card with-header>
+      <div slot="header">
+      {# {% include "svgs/palette.njk" %} #}
+      {% include "svgs/thumbnail-placeholder.njk" %}
+      </div>
+      <span class="page-name" v-text="palette.title"></span>
+    </wa-card>
+  </a>
+</section>
+
+
 </div></div> {# end palette app #}
 {% endblock %}
 

docs/_layouts/patterns.njk

@@ -1,5 +0,0 @@
-{% extends '../_layouts/block.njk' %}
-
-{% block head %}
-<link href="/docs/patterns/patterns.css" rel="stylesheet">
-{% endblock %}

docs/_layouts/theme.njk

@@ -81,7 +81,7 @@ wa_data.palettes = {
     {% set palette = defaultPalette %}
   </wa-select>
 
-  <wa-select name="brand" label="Brand color" value="" clearable>
+  <wa-select class="color-select" name="brand" label="Brand color" value="" clearable>
     <div class="selected-swatch" slot="prefix"></div>
     {% for hue in hues %}
       {% set currentBrand = hue == brand %}

docs/_utils/filters.js

@@ -178,10 +178,6 @@ 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
@@ -202,7 +198,7 @@ export function groupPages(collection, options = {}, page) {
     options = { tags: options };
   }
 
-  let { tags, groups, titles = {}, other = 'Other', filter = show } = options;
+  let { tags, groups, titles = {}, other = 'Other' } = options;
 
   if (groups === undefined && Array.isArray(tags)) {
     groups = tags;
@@ -241,10 +237,6 @@ export function groupPages(collection, options = {}, page) {
   let byUrl = {};
   let byParentUrl = {};
 
-  if (filter) {
-    collection = collection.filter(filter);
-  }
-
   for (let item of collection) {
     let url = item.page.url;
     let parentUrl = item.data.parentUrl;
@@ -321,13 +313,6 @@ export function groupPages(collection, options = {}, page) {
 
   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', {

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('.wa-visually-hidden, [hidden], [aria-hidden="true"]').forEach(el => el.remove());
+        clone.querySelectorAll('a').forEach(a => a.remove());
         clone.querySelectorAll('[data-no-outline]').forEach(el => el.remove());
 
         // Generate the link

docs/_utils/search.js

@@ -2,7 +2,6 @@
 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) {
@@ -53,9 +52,8 @@ export function searchPlugin(options = {}) {
       return content;
     });
 
-    eleventyConfig.on('eleventy.after', ({ directories }) => {
-      const { output } = directories;
-      const outputFilename = path.resolve(join(output, 'search.json'));
+    eleventyConfig.on('eleventy.after', ({ dir }) => {
+      const outputFilename = join(dir.output, 'search.json');
       const map = [];
       const searchIndex = lunr(async function () {
         let index = 0;

docs/assets/components/scoped.js

@@ -1,171 +0,0 @@
-/**
- * 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 data-fa-kit-code="b10bfbde90" type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
+      `<script 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,11 +1,3 @@
-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);
@@ -26,10 +18,8 @@ function updateResults(input) {
   }
 }
 
-const debouncedUpdateResults = debounce(updateResults, 300);
-
 document.documentElement.addEventListener('input', e => {
   if (e.target?.matches('#block-filter wa-input')) {
-    debouncedUpdateResults(e.target);
+    updateResults(e.target);
   }
 });

docs/assets/scripts/my.js

@@ -1,167 +0,0 @@
-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,119 +1,269 @@
-import my from '/assets/scripts/my.js';
+const sidebar = (globalThis.sidebar = {});
 
-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);
-
-    // 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');
-    }
-
-    return a;
-  },
-
-  removeLink(a) {
-    if (!a || !a.isConnected) {
-      // Link doesn't exist or is already removed
+sidebar.palettes = {
+  render() {
+    if (this.saved.length === 0) {
       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();
+    for (let palette of this.saved) {
+      sidebar.palette.render(palette);
     }
 
-    if (a.classList.contains('current')) {
-      // If the deleted palette was the current one, the current one is now the parent
-      parentA.classList.add('current');
-    }
+    sidebar.updateCurrent();
   },
 
-  findEntity(entity) {
-    return document.querySelector(`#sidebar a[href^="${entity.baseUrl}"][data-uid="${entity.uid}"]`);
+  saved: [],
+
+  /**
+   * Update saved palettes from local storage
+   */
+  fromLocalStorage() {
+    // Replace contents of array without breaking references
+    let saved = localStorage.savedPalettes ? JSON.parse(localStorage.savedPalettes) : [];
+    this.saved.splice(0, this.saved.length, ...saved);
   },
 
-  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);
-      }
+  /**
+   * Write palettes to local storage
+   */
+  toLocalStorage() {
+    if (this.saved.length > 0) {
+      localStorage.savedPalettes = JSON.stringify(this.saved);
+    } else {
+      delete localStorage.savedPalettes;
     }
   },
 };
 
-globalThis.sidebar = sidebar;
+sidebar.palettes.fromLocalStorage();
 
-// 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));
+// Palettes were updated in another tab
+addEventListener('storage', () => sidebar.palettes.fromLocalStorage());
+
+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 || !palette.uid) {
+      // No stored palettes or this palette has not been saved
+      return;
+    }
+
+    // TODO improve UX of this
+    if (!confirm(`Are you sure you want to delete palette “${palette.title}”?`)) {
+      return;
+    }
+
+    for (let index; index > -1; index = savedPalettes.findIndex(p => p.uid === palette.uid)) {
+      savedPalettes.splice(index, 1);
+    }
+
+    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.toLocalStorage();
+
+    if (globalThis.paletteApp?.saved?.uid === palette.uid) {
+      // We deleted the currently active palette
+      paletteApp.postDelete();
+    }
+  },
+
+  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 a palette, either by updating its existing entry or creating a new one
+   * @param {object} palette
+   */
+  save(palette) {
+    if (!palette.uid) {
+      // First time saving
+      palette.uid = this.getUid();
+    }
+
+    let savedPalettes = sidebar.palettes.saved;
+    let existingIndex = palette.uid ? sidebar.palettes.saved.findIndex(p => p.uid === palette.uid) : -1;
+    let newIndex = existingIndex > -1 ? existingIndex : savedPalettes.length;
+
+    let [oldValues] = sidebar.palettes.saved.splice(newIndex, 1, palette);
+
+    this.render(palette, oldValues);
+    sidebar.updateCurrent();
+    sidebar.palettes.toLocalStorage();
+
+    return palette;
+  },
+};
+
+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();
+  let candidates;
+  let matchingPrefix;
+
+  for (let prefix of prefixes) {
+    candidates = document.querySelectorAll(`#sidebar a[href^="${prefix}"]`);
+
+    if (candidates.length > 0) {
+      matchingPrefix = prefix;
+      break;
+    }
+  }
+
+  if (!matchingPrefix) {
+    // Abort mission
+    return;
+  }
+
+  if (matchingPrefix === pathParts.at(-1)) {
+    // Full path matches, check search
+    if (location.search) {
+      candidates = [...candidates];
+
+      let searchParams = new URLSearchParams(location.search);
+
+      if (searchParams.has('uid')) {
+        // Only consider candidates with the same uid
+        candidates = candidates.filter(a => {
+          let params = new URLSearchParams(a.search);
+          return params.get('uid') === searchParams.get('uid');
+        });
+      } else {
+        // Sort candidates based on how many params they have in common, in descending order
+        candidates = candidates.sort((a, b) => {
+          return countSharedSearchParams(searchParams, b.search) - countSharedSearchParams(searchParams, a.search);
+        });
+      }
+    }
+  }
+
+  if (candidates.length > 0) {
+    for (let current of document.querySelectorAll('#sidebar a.current')) {
+      current.classList.remove('current');
+    }
+
+    candidates[0].classList.add('current');
+  }
+};
+
+sidebar.render = function () {
+  this.palettes.render();
+};
 
 sidebar.render();
 window.addEventListener('turbo:render', () => sidebar.render());
+
+function countSharedSearchParams(searchParams, search) {
+  if (!search || search === '?') {
+    return 0;
+  }
+
+  let params = new URLSearchParams(search);
+  return [...searchParams.keys()].filter(k => params.get(k) === searchParams.get(k)).length;
+}

docs/assets/scripts/theme-picker.js

@@ -1,32 +1,12 @@
-let initialPageLoadComplete = document.readyState === 'complete';
-
-if (!initialPageLoadComplete) {
-  window.addEventListener('load', () => {
-    initialPageLoadComplete = true;
-  });
-}
-
 // Helper for view transitions
-export function domChange(fn, { behavior = 'smooth', ignoreInitialLoad = true } = {}) {
+export function domChange(fn, { behavior = 'smooth' } = {}) {
   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') {
-    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;
+    document.startViewTransition(fn);
   } else {
-    fn(false);
-    return null;
+    fn(true);
   }
 }
 
@@ -120,7 +100,6 @@ 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,6 +1,3 @@
-import 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm';
-import { preventTurboFouce } from '/dist/webawesome.js';
-
 if (!window.___turboScrollPositions___) {
   window.___turboScrollPositions___ = {};
 }
@@ -73,4 +70,3 @@ 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

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

docs/assets/scripts/tweak/data.js

@@ -12,49 +12,6 @@ export const urls = {
   typography: id => `styles/themes/${id}/typography.css`,
 };
 
-export const selectors = {
-  palette: id =>
-    [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${id}`].join(',\n'),
-};
-
-export const hueRanges = {
-  red: { min: 5, max: 35 }, // 30
-  orange: { min: 35, max: 60 }, // 25
-  yellow: { min: 60, max: 112 }, // 45
-  green: { min: 112, max: 170 }, // 55
-  cyan: { min: 170, max: 220 }, // 50
-  blue: { min: 220, max: 265 }, // 45
-  indigo: { min: 265, max: 290 }, // 25
-  purple: { min: 290, max: 320 }, // 30
-  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/',
@@ -68,6 +25,189 @@ export const icons = {
   typography: 'font-case',
 };
 
-export const hues = Object.keys(hueRanges);
+export const selectors = {
+  palette: id =>
+    [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${id}`].join(',\n'),
+};
 
+export const HUE_RANGES = {
+  red: { min: 15, max: 35 }, // 20
+  orange: { min: 35, max: 75 }, // 40
+  yellow: { min: 75, max: 110 }, // 35
+  green: { min: 115, max: 170 }, // 55
+  cyan: { min: 170, max: 220 }, // 50
+  blue: { min: 220, max: 265 }, // 45
+  indigo: { min: 265, max: 290 }, // 25
+  purple: { min: 290, max: 320 }, // 30
+  pink: { min: 320, max: 375 }, // 55
+};
+
+export const hues = Object.keys(HUE_RANGES);
+export const allHues = [...hues, 'gray'];
 export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95'];
+
+export const L_RANGES = {
+  '05': { min: 0.18, max: 0.2 },
+  10: { min: 0.23, max: 0.25 },
+  20: { min: 0.31, max: 0.35 },
+  30: { min: 0.38, max: 0.43 },
+  40: { min: 0.45, max: 0.5 },
+  50: { min: 0.55, max: 0.6 },
+  60: { min: 0.65, max: 0.7 },
+  70: { min: 0.73, max: 0.78 },
+  80: { min: 0.82, max: 0.85 },
+  90: { min: 0.91, max: 0.93 },
+  95: { min: 0.95, max: 0.97 },
+};
+
+for (let range of [HUE_RANGES, L_RANGES]) {
+  for (let key in range) {
+    range[key].mid = (range[key].min + range[key].max) / 2;
+  }
+}
+
+/**
+ * Most common tint per hue.
+ * Largely the statistical mode, but also informed by the average and median.
+ */
+export const HUE_TOP_TINT = {
+  red: 50,
+  orange: 70,
+  yellow: 80,
+  green: 80,
+  cyan: 70,
+  blue: 50,
+  indigo: 40,
+  purple: 50,
+  pink: 50,
+  gray: 40,
+};
+
+/*
+┌─────────┬──────┬──────┬────────┬──────┬────────┬───────┐
+│ (index) │ min  │ max  │ median │ avg  │ stddev │ count │
+├─────────┼──────┼──────┼────────┼──────┼────────┼───────┤
+│ red     │ 0.74 │ 1    │ 0.92   │ 0.88 │ 0.085  │ 9     │
+│ yellow  │ 0.72 │ 1    │ 0.98   │ 0.92 │ 0.11   │ 8     │
+│ green   │ 0.55 │ 0.93 │ 0.75   │ 0.75 │ 0.1    │ 8     │
+│ cyan    │ 0.7  │ 0.88 │ 0.82   │ 0.81 │ 0.053  │ 8     │
+│ blue    │ 0.54 │ 1    │ 0.83   │ 0.82 │ 0.15   │ 9     │
+│ indigo  │ 0.63 │ 1    │ 0.87   │ 0.86 │ 0.13   │ 8     │
+│ purple  │ 0.58 │ 0.99 │ 0.86   │ 0.84 │ 0.11   │ 8     │
+│ pink    │ 0.74 │ 1    │ 0.93   │ 0.89 │ 0.089  │ 8     │
+└─────────┴──────┴──────┴────────┴──────┴────────┴───────┘
+*/
+/** Max(Average, Median) % of max P3 chroma per hue, relative to palette maximum and capped to 0.8 */
+export const HUE_CHROMA_SCALE = {
+  red: 0.92,
+  orange: 0.96, // interpolated
+  yellow: 1,
+  green: 0.7,
+  cyan: 0.81,
+  blue: 0.83,
+  indigo: 0.87,
+  purple: 0.86,
+  pink: 0.92,
+};
+
+export const CHROMA_SCALE_LIGHTEST = {
+  95: 1,
+  90: 0.8,
+  80: 0.5,
+  70: 0.2,
+  60: 0.2,
+  50: 0.15,
+  40: 0.1,
+};
+
+export const MAX_CHROMA_BY_TINT = {
+  95: 0.11,
+};
+
+/**
+ * Chroma levels to identify gray.
+ * First number: below this we identify as gray regardless
+ * Second number: below this we identify as gray if it's also in the bottom 25% of colors when sorted by chroma
+ */
+export const GRAY_CHROMA_BY_TINT = {
+  '05': [0.03, 0.05],
+  10: [0.035, 0.06],
+  20: [0.045, 0.06],
+  30: [0.05, 0.06],
+  40: [0.05, 0.06],
+  50: [0.04, 0.06],
+  60: [0.03, 0.05],
+  70: [0.02, 0.04],
+  80: [0.015, 0.03],
+  90: [0.007, 0.01],
+  95: [0.004, 0.005],
+};
+
+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',
+  purple: 'Purpler',
+  pink: 'Pinker',
+};
+
+export const hueBefore = {};
+export const hueAfter = {};
+
+for (let i = 0; i < hues.length; i++) {
+  hueBefore[hues[i]] = hues[i - 1] ?? hues.at(-1);
+  hueAfter[hues[i]] = hues[i + 1] ?? hues[0];
+}
+
+export const HUE_SHIFTS = [
+  // Reds
+  { range: [0, 25], peak: [10, 25], shift: { dark: 15, light: -18 }, maxConsecutive: { dark: 4, light: -2 } },
+  // Yellows
+  { range: [30, 112], peak: [70, 100], shift: { dark: -48, light: 16 }, maxConsecutive: { dark: -20, light: 4 } },
+
+  // Greens
+  { range: [140, 160], peak: [145, 155], shift: { dark: 15, light: -5 }, maxConsecutive: { dark: 7, light: -5 } },
+  // Blues
+  { range: [240, 265], peak: [245, 260], shift: { dark: -3, light: -15 }, maxConsecutive: { dark: -3, light: -4 } },
+];
+
+export const CHROMA_CURVES = {
+  50: { dark: 0.9, light: 0.8 },
+  60: { dark: 1, light: 1.2 },
+  70: { light: 1.2 },
+  80: { dark: 1.1, light: 2 },
+  90: { dark: 3, light: 2 },
+};
+
+export const MAX_CHROMA_BOUNDS = { min: 0.08, max: 0.3 };
+
+/**
+ * Max gray chroma (% of chroma of undertone) per hue
+ */
+export const MAX_GRAY_CHROMA_SCALE = {
+  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,
+};
+
+/** Default accent tint if all chromas are 0, but also the tint accent colors will be nudged towards (see chromaTolerance) */
+export const DEFAULT_ACCENT = 60;
+
+/** Min and max allowed tints */
+export const MIN_ACCENT = 40;
+export const MAX_ACCENT = 90;
+
+/** Chroma tolerance: Chroma will need to differ more than this to gravitate away from defaultAccent */
+export const CHROMA_TOLERANCE = 0.000001;
+
+export const ROLES = ['brand', 'neutral', 'success', 'warning', 'danger'];

docs/assets/scripts/tweak/util.js

@@ -1,36 +1,304 @@
+// https://lea.verou.me/blog/2016/12/resolve-promises-externally-with-this-one-weird-trick/
+export function promise() {
+  let res, rej;
+
+  let promise = new Promise((resolve, reject) => {
+    res = resolve;
+    rej = reject;
+  });
+
+  return Object.assign(promise, { resolve: res, reject: rej });
+}
+
 export function normalizeAngles(angles) {
-  // First, normalize
-  angles = angles.map(h => ((h % 360) + 360) % 360);
+  // First, normalize each angle individually
+  let normalizedAngles = 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;
+  for (let i = 1; i < angles.length; i++) {
+    let angle = normalizedAngles[i];
+    let prevAngle = normalizedAngles[i - 1];
+    let delta = angle - prevAngle;
 
     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;
+      let equivalent = [angle + 360, angle - 360];
 
-      if (Math.abs(equivalent[0] - prevHue) <= Math.abs(equivalent[1] - prevHue)) {
-        angles[i] = equivalent[0];
-      } else {
-        angles[i] = equivalent[1];
-      }
+      // Offset hue to minimize difference in the direction that brings it closer to the previous hue
+      let deltas = equivalent.map(e => Math.abs(e - prevAngle));
+
+      normalizedAngles[i] = equivalent[deltas[0] < deltas[1] ? 0 : 1];
     }
   }
 
-  return angles;
+  return normalizedAngles;
 }
 
 export function subtractAngles(θ1, θ2) {
   let [a, b] = normalizeAngles([θ1, θ2]);
   return a - b;
 }
+
+/**
+ * Given an object of keys to ranges, find the closest range.
+ * Ranges are assumed to be mutually exclusive.
+ * @param {Object<string, {min: number, max: number}>} ranges
+ * @param {number} value
+ * @param {object} options
+ * @param {"angle" | undefined} options.type
+ * @param {number} [options.tolerance=Infinity] If value is not within any range, how close can it be?
+ * @param {(range: {min: number, max: number}) => {min: number, max: number}} options.getRange
+ * @returns {{key: string, distance: number}} The key of the closest range. Distance is 0 if the value is within the range, negative if below, positive if above.
+ */
+export function getRange(ranges, value, options) {
+  let { type } = options || {};
+  let keys = Object.keys(ranges);
+  let closest = { key: keys[0], distance: Infinity };
+
+  for (let key of keys) {
+    let range = ranges[key];
+
+    if (options?.getRange) {
+      range = options.getRange(range);
+    }
+
+    let { min, max } = range;
+
+    if (Array.isArray(range)) {
+      [min, max] = range;
+    }
+
+    let deltaMin = type === 'angle' ? subtractAngles(value, min) : value - min;
+    let deltaMax = type === 'angle' ? subtractAngles(value, max) : value - max;
+
+    if (deltaMin >= 0 && deltaMax <= 0) {
+      return { key, distance: 0 };
+    }
+
+    if (Math.abs(deltaMin) < Math.abs(closest.distance)) {
+      closest = { key, distance: deltaMin };
+    }
+
+    if (deltaMax > 0 && Math.abs(deltaMax) < Math.abs(closest.distance)) {
+      closest = { key, distance: deltaMax };
+    }
+  }
+
+  // TODO use angle functions to check tolerance against angles
+  if (options?.tolerance !== undefined && Math.abs(closest.distance) > options.tolerance) {
+    return;
+  }
+
+  return closest;
+}
+
+export function camelCase(str) {
+  return (str + '').replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+
+export function capitalize(str) {
+  if (!str) {
+    return str;
+  }
+
+  str = str + '';
+  return str[0].toUpperCase() + str.slice(1);
+}
+
+export function arrayNext(array, element) {
+  let index = array.indexOf(element);
+  return array[(index + 1) % array.length];
+}
+
+export function arrayPrevious(array, element) {
+  let index = array.indexOf(element);
+  return array[(index - 1 + array.length) % array.length];
+}
+
+export function levelToIndex(level) {
+  if (level === '05') {
+    return 0;
+  }
+
+  return level === '95' ? 10 : +level / 10;
+}
+
+export function indexToLevel(i) {
+  if (i === 0) {
+    return '05';
+  }
+
+  return (i === 10 ? 95 : i * 10) + '';
+}
+
+export function previousLevel(level) {
+  if (level === '05') {
+    return;
+  }
+
+  return indexToLevel(levelToIndex(level) - 1);
+}
+
+export function nextLevel(level) {
+  if (level === '95') {
+    return;
+  }
+
+  return indexToLevel(levelToIndex(level) + 1);
+}
+
+export function relativeLevel(level, steps) {
+  if (level == 100) {
+    // loose intentional
+    return relativeLevel(95, ++steps);
+  }
+
+  if (level == 95) {
+    // loose intentional
+    return relativeLevel(90, ++steps);
+  }
+
+  if (level == 0) {
+    // loose intentional
+    return relativeLevel(5, --steps);
+  }
+
+  if (level == 5) {
+    // loose intentional
+    return relativeLevel(10, --steps);
+  }
+
+  let index = clamp(0, levelToIndex(level) + steps, 10);
+
+  return indexToLevel(index);
+}
+
+/**
+ *
+ * @param {number} p Number from 0-1 where 0 is start and 1 is end
+ * @param {*} start Number for p=0
+ * @param {*} end Number for p=1
+ * @returns
+ */
+export function interpolate(p, range = [0, 1], options) {
+  let [start, end] = range;
+
+  if (p <= 0 || p >= 1 || range.length === 2) {
+    let value = start + p * (end - start);
+    return options?.unclamped ? value : clamp(start, value, end);
+  }
+
+  // If we're here, there are more points in the range
+  let interval = 1 / (range.length - 1);
+  let index = Math.floor(p / interval);
+  let intervalProgress = progress(p, [index * interval, (index + 1) * interval]);
+  return interpolate(intervalProgress, range.slice(index, index + 2), options);
+}
+
+/**
+ * Inverse of interpolate: given a value, find the progress between start and end.
+ * @param {*} value
+ * @param {*} range
+ * @returns
+ */
+export function progress(value, range = [0, 1], options) {
+  let [start, end] = range;
+
+  if (value <= start || value >= end || range.length === 2) {
+    let ret = (value - start) / (end - start);
+
+    return options?.unclamped ? ret : clamp(0, ret, 1);
+  }
+
+  // If we're here, there are more points in the range
+  let index = range.findIndex((v, i) => value > range[i - 1] && value <= v);
+  return (index - 1) / (range.length - 1);
+}
+
+export function mapRange(value, { from, to, progression }) {
+  let p = progress(value, from);
+
+  if (progression) {
+    p = progression(p);
+  }
+
+  return interpolate(p, to);
+}
+
+export function clamp(min, value, max) {
+  if (max < min) {
+    [min, max] = [max, min];
+  }
+
+  if (min !== undefined) {
+    value = Math.max(min, value);
+  }
+
+  if (max !== undefined) {
+    value = Math.min(max, value);
+  }
+
+  return value;
+}
+
+export function clampAngle(min, value, max) {
+  [min, value, max] = normalizeAngles([min, value, max]);
+  return clamp(min, value, max);
+}
+
+export function interpolateAngles(p, range) {
+  range = normalizeAngles(range);
+  return interpolate(p, range, { unclamped: true });
+}
+
+export function progressAngle(angle, range) {
+  [angle, ...range] = normalizeAngles([angle, ...range]);
+  return progress(angle, range, { unclamped: true });
+}
+
+/**
+ * Round a number to the nearest multiple of `roundTo` or to the closest number in an array of numbers
+ * @param {number} value
+ * @param {number | number[]} roundTo
+ * @returns
+ */
+export function roundTo(value, roundTo = 1) {
+  if (Array.isArray(roundTo)) {
+    let closest = roundTo[0];
+    let closestDistance = Math.abs(value - closest);
+
+    for (let candidate of roundTo) {
+      let distance = Math.abs(value - candidate);
+
+      if (distance < closestDistance) {
+        closest = candidate;
+        closestDistance = distance;
+      }
+    }
+
+    return closest;
+  }
+
+  let decimals = roundTo.toString().split('.')[1]?.length ?? 0;
+  let ret = Math.round(value / roundTo) * roundTo;
+
+  if (decimals > 0) {
+    // Eliminate IEEE 754 floating point errors
+    ret = +ret.toFixed(decimals);
+  }
+
+  return ret;
+}
+
+export function slugify(str) {
+  return str
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '') // Convert accented letters to ASCII
+    .replace(/[^\w\s-]/g, '') // Remove remaining non-ASCII characters
+    .trim()
+    .replace(/\s+/g, '-') // Convert whitespace to hyphens
+    .toLowerCase();
+}
+
+export function log(...args) {
+  console.log(...args);
+  return args[0];
+}

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

@@ -1,22 +0,0 @@
-// 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

@@ -1,110 +0,0 @@
-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,7 +4,6 @@
 @import 'outline.css';
 @import 'search.css';
 @import 'cera_typeface.css';
-@import 'theme-icons.css';
 
 :root {
   --wa-brand-orange: #f36944;
@@ -371,22 +370,10 @@ wa-page > main:has(> .index-grid) {
 
 .index-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 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;
@@ -413,6 +400,7 @@ 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;
@@ -452,9 +440,14 @@ wa-page > main:has(> .index-grid) {
   &.color {
     border-color: transparent;
     transition: background var(--wa-transition-slow);
-    background: linear-gradient(var(--color-2, transparent) 0% 100%) no-repeat border-box var(--color,);
-    background-position: var(--color-2-position, bottom);
-    background-size: var(--color-2-width, 100%) var(--color-2-height, 50%);
+    background:
+      linear-gradient(var(--color-top, transparent) 0% 100%) top no-repeat border-box,
+      linear-gradient(var(--color-bottom, transparent) 0% 100%) bottom no-repeat border-box var(--color,);
+    background-position: top, bottom;
+    background-size:
+      var(--color-top-width, 100%) var(--color-top-height, 30%),
+      var(--color-bottom-width, 100%) var(--color-bottom-height, 30%);
+    color: var(--swatch-text-color);
 
     &.contrast-fail {
       outline: 1px dashed var(--wa-color-red);
@@ -653,3 +646,46 @@ table.colors {
     max-height: 21lh;
   }
 }
+
+.color-select {
+  &.default::part(display-input) {
+    opacity: 0.6;
+    font-style: italic;
+  }
+
+  > small {
+    margin-inline-start: var(--wa-space-xs);
+    padding-block: 0 var(--wa-space-xs);
+  }
+
+  &::part(combobox)::before,
+  wa-option::before {
+    content: '';
+    display: inline-block;
+    width: 1.2em;
+    aspect-ratio: 1;
+    margin-inline-end: var(--wa-space-xs);
+    flex: none;
+    border-radius: var(--wa-border-radius-m);
+    background: var(--color);
+    border: 1px solid var(--wa-color-surface-default);
+  }
+
+  wa-option {
+    white-space: nowrap;
+
+    &::before {
+      width: 1em;
+      margin-inline: var(--wa-space-xs);
+    }
+
+    &::part(checked-icon) {
+      order: 2;
+    }
+  }
+
+  .default-badge {
+    opacity: 0.6;
+    margin-inline-start: var(--wa-space-xs);
+  }
+}

docs/assets/styles/search.css

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

docs/assets/styles/theme-icons.css

@@ -1,61 +1,3 @@
-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);
@@ -83,50 +25,10 @@ wa-card:has(> .theme-icon-host, > [slot='header'] > .theme-icon-host) {
   display: flex;
   flex-direction: column;
   gap: var(--wa-space-xs);
-}
 
-.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;
-      }
-    }
+  h3,
+  p {
+    margin-block: 0;
+    padding: 0;
   }
 }

docs/docs/components/card.md

@@ -15,9 +15,9 @@ icon: card
 
   <strong>Mittens</strong><br />
   This kitten is as cute as he is playful. Bring him home today!<br />
-  <small class="wa-caption-m">6 weeks old</small>
+  <small>6 weeks old</small>
 
-  <div slot="footer" class="wa-split">
+  <div slot="footer">
     <wa-button variant="brand" pill>More Info</wa-button>
     <wa-rating label="Rating"></wa-rating>
   </div>
@@ -27,6 +27,16 @@ icon: card
   .card-overview {
     width: 300px;
   }
+
+  .card-overview small {
+    color: var(--wa-color-text-quiet);
+  }
+
+  .card-overview [slot='footer'] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 </style>
 ```
 
@@ -55,9 +65,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" class="wa-split">
+  <div slot="header">
     Header Title
-    <wa-icon-button name="gear" variant="solid" label="Settings" class="wa-size-m"></wa-icon-button>
+    <wa-icon-button name="gear" variant="solid" label="Settings"></wa-icon-button>
   </div>
 
   This card has a header. You can put all sorts of things in it!
@@ -68,9 +78,19 @@ 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>
 ```
 
@@ -83,7 +103,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" class="wa-split">
+  <div slot="footer">
     <wa-rating></wa-rating>
     <wa-button variant="brand">Preview</wa-button>
   </div>
@@ -93,6 +113,12 @@ 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>
 ```
 
@@ -127,7 +153,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-split">
+  <footer slot="footer" class="wa-flank">
     <wa-button variant="brand" pill>More Info</wa-button>
     <wa-rating></wa-rating>
   </footer>
@@ -136,7 +162,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-split">
+  <footer slot="footer" class="wa-flank">
     <wa-button variant="brand" pill>More Info</wa-button>
     <wa-rating></wa-rating>
   </footer>
@@ -145,39 +171,14 @@ 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-split">
+  <footer slot="footer" class="wa-flank">
     <wa-button variant="brand" pill>More Info</wa-button>
     <wa-rating></wa-rating>
   </footer>
 </wa-card>
 </div>
+
 ```
 
-### 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>
-```
+<style>
+</style>

docs/docs/components/details.md

@@ -77,31 +77,6 @@ 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/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

@@ -5,11 +5,8 @@ import { sort } from '../_utils/filters.js';
 
 export default {
   eleventyComputed: {
-    /**
-     * 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}
-     */
+    // Default parent. Can be overridden by explicitly setting parent in the data.
+    // parent can refer to either an ancestor page in the URL or another page in the same directory
     parent(data) {
       let { parent, page } = data;
 
@@ -20,28 +17,16 @@ export default {
       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;
 
@@ -63,17 +48,7 @@ export default {
   },
 };
 
-/**
- * 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();
@@ -89,18 +64,15 @@ function getParentUrl(url, 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 (!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 = '/';
   }
 

docs/docs/installation.md

@@ -32,11 +32,15 @@ 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
@@ -58,7 +62,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
 
@@ -122,4 +126,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/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](/docs/utilities/appearance) to change the button's visual appearance:
+Use the [appearance utility classes](../utilities/appearance.md) to change the button's visual appearance:
 
 ```html {.example}
 <div style="margin-block-end: 1rem;">

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](/docs/utilities/appearance) to change the callout's visual appearance (the default is `outlined filled`).
+Use the [appearance utility classes](../utilities/appearance.md) to change the callout's visual appearance (the default is `outlined filled`).
 
 ```html {.example}
 <article class="wa-callout wa-brand wa-outlined wa-accent">

docs/docs/native/details.md

@@ -19,35 +19,6 @@ 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/palettes/app/color/generate-grays.js

@@ -0,0 +1,28 @@
+import { tints } from '/assets/scripts/tweak/data.js';
+
+export function generateGrays(colors, { grayColor, grayChroma }) {
+  let ret = {};
+  let undertoneScale = colors[grayColor];
+
+  // These will be the same, since scaling them won't change the relationship
+  ret.maxChromaTint = undertoneScale.maxChromaTint;
+  Object.defineProperty(ret, 'core', {
+    enumerable: false,
+    get() {
+      return this[this.maxChromaTint];
+    },
+  });
+  ret.maxChromaTintRaw = undertoneScale.maxChromaTintRaw;
+
+  for (let tint of tints) {
+    let colorUndertone = undertoneScale[tint].clone().to('oklch');
+    ret[tint] = colorUndertone.set({ c: c => c * grayChroma });
+  }
+
+  ret.maxChroma = ret[ret.maxChromaTint].get('oklch.c');
+  ret.maxChromaRaw = ret[ret.maxChromaTintRaw].get('oklch.c');
+
+  return ret;
+}
+
+export default generateGrays;

docs/docs/palettes/app/color/generate-palette.js

@@ -0,0 +1,162 @@
+// TODO move these to local imports
+import Color from 'https://colorjs.io/dist/color.js';
+import generateGrays from './generate-grays.js';
+import generateScale from './generate-scale.js';
+import getMaxChroma from './get-max-chroma.js';
+import { getCoreTint } from './util.js';
+import {
+  HUE_CHROMA_SCALE,
+  HUE_RANGES,
+  HUE_TOP_TINT,
+  L_RANGES,
+  MAX_ACCENT,
+  MIN_ACCENT,
+} from '/assets/scripts/tweak/data.js';
+import {
+  clamp,
+  clampAngle,
+  interpolate,
+  normalizeAngles,
+  progressAngle,
+  roundTo,
+  subtractAngles,
+} from '/assets/scripts/tweak/util.js';
+
+export default function generatePalette(seedHues, { huesAfter: allHuesAfter, ...options } = {}) {
+  let ret = {};
+
+  // Generate scales from seed hues
+  let firstSeedHue;
+
+  let coreLevels = {};
+  let seedMeta = {};
+
+  for (let hue in seedHues) {
+    let seedColors = seedHues[hue];
+
+    if (!seedColors) {
+      continue;
+    }
+
+    firstSeedHue ??= hue;
+
+    let coreLevel = (coreLevels[hue] = getCoreTint(seedColors));
+    let coreColor = seedColors[coreLevel];
+    let [l, c, h] = coreColor.getAll('oklch');
+
+    let lOffset = l - L_RANGES[coreLevel].mid;
+    let cScale = c / getMaxChroma(l, h);
+    let relativeCScale = cScale / HUE_CHROMA_SCALE[hue];
+    let levelOffset = coreLevel - HUE_TOP_TINT[hue];
+    seedMeta[hue] = { lOffset, cScale, relativeCScale, levelOffset };
+
+    ret[hue] = generateScale(seedColors);
+  }
+
+  if (!firstSeedHue) {
+    // No valid seed colors, abort mission
+    return null;
+  }
+
+  // Fill in remaining hues
+  let hueBefore = firstSeedHue;
+
+  for (let hue of allHuesAfter[firstSeedHue]) {
+    if (hue in ret) {
+      continue;
+    }
+
+    let huesAfter = allHuesAfter[hue];
+    let seedHuesAfter = huesAfter.filter(hue => seedHues[hue]);
+    let neighboringSeedHues = [seedHuesAfter.at(-1), seedHuesAfter[0]];
+
+    // A number from 0 to 1 indicating how close we are to each neighboring seed hue (0 if only one seed hue)
+    let hueProgress =
+      seedHuesAfter.length === 1
+        ? 0
+        : progressAngle(
+            HUE_RANGES[hue].mid,
+            neighboringSeedHues.map(hue => HUE_RANGES[hue].mid),
+          );
+
+    // Hue of the core color of the previous seed scale
+    let hBefore = ret[hueBefore][ret[hueBefore].maxChromaTint].get('oklch.h');
+
+    // We start from the midpoint of the hue range
+    let h = HUE_RANGES[hue].mid;
+
+    // Shift if too close to seed hues
+    let hBeforeDelta = subtractAngles(h, hBefore);
+
+    if (Math.abs(hBeforeDelta) < 40) {
+      h = hBefore + 40 * Math.sign(hBeforeDelta);
+    }
+
+    if (seedHuesAfter.length > 1) {
+      let hueAfter = seedHuesAfter[0];
+      let hAfter = ret[hueAfter][ret[hueAfter].maxChromaTint].get('oklch.h');
+      [hBefore, h, hAfter] = normalizeAngles([hBefore, h, hAfter]);
+      let hAfterDelta = subtractAngles(hAfter, h);
+
+      if (hAfter - 40 < hBefore + 40) {
+        // It's not possible to have a distance of at least 40deg from both neighboring hues
+        // so at least maximize distance
+        h = (hBefore + hAfter) / 2;
+      } else if (hAfterDelta < 40) {
+        h = hAfter - 40;
+      }
+    }
+
+    // Make sure hue is still within range for this scale
+    h = clampAngle(HUE_RANGES[hue].min, h, HUE_RANGES[hue].max);
+
+    let coreLevelOffset = interpolate(
+      hueProgress,
+      neighboringSeedHues.map(hue => seedMeta[hue].levelOffset),
+    );
+    let coreLevel = clamp(MIN_ACCENT, roundTo(HUE_TOP_TINT[hue] + coreLevelOffset, 10), MAX_ACCENT);
+
+    coreLevels[hue] = coreLevel;
+    let lOffsets = neighboringSeedHues.map(hue => seedMeta[hue].lOffset);
+    let lOffset = interpolate(hueProgress, lOffsets);
+    let l = L_RANGES[coreLevel].mid + lOffset;
+
+    let cScale = 1;
+
+    if (hue === 'yellow') {
+      // Yellow tends to be the brighest hue in the palette
+      cScale = Math.max(
+        ...Object.values(seedMeta)
+          .map(meta => meta.relativeCScale)
+          .filter(c => c > 0),
+      );
+    } else {
+      cScale = interpolate(
+        hueProgress,
+        neighboringSeedHues.map(neighboringHue => seedMeta[neighboringHue].relativeCScale),
+      );
+    }
+
+    cScale *= HUE_CHROMA_SCALE[hue];
+
+    let maxC = getMaxChroma(l, h);
+    let c = cScale * maxC;
+    // let c = interpolate(
+    //   hueProgress,
+    //   pinnedScale.map(scale => scale.maxChroma),
+    // );
+
+    let coreColor = new Color('oklch', [l, c, h]).toGamut('p3');
+
+    ret[hue] = generateScale(coreColor);
+    hueBefore = hue;
+  }
+
+  if ('gray' in seedHues) {
+    ret.gray = generateScale(seedHues.gray);
+  } else {
+    ret.gray = generateGrays(ret, options);
+  }
+
+  return ret;
+}

docs/docs/palettes/app/color/generate-scale.js

@@ -0,0 +1,138 @@
+import { getCoreTint, getHueShift, getLightness, identifyColor } from './util.js';
+import {
+  CHROMA_CURVES,
+  CHROMA_SCALE_LIGHTEST,
+  L_RANGES,
+  MAX_CHROMA_BY_TINT,
+  tints,
+} from '/assets/scripts/tweak/data.js';
+import { clamp, interpolate, progress } from '/assets/scripts/tweak/util.js';
+
+/**
+ * Generate a scale of tints from one or more key colors
+ * @param {Color | Record<number | string, Color>} seedColors
+ * @returns {Record<number | string, Color>}
+ */
+export function generateScale(seedColors) {
+  if (seedColors.constructor.name === 'Color') {
+    // Single color given
+    let { level } = identifyColor(seedColors);
+    seedColors = { [level]: seedColors };
+  }
+
+  // Find core color
+  let coreLevel = getCoreTint(seedColors);
+  let coreColor = seedColors[coreLevel];
+  let coreChroma = coreColor.get('oklch.c');
+
+  let scale = {};
+
+  Object.defineProperties(scale, {
+    maxChromaTint: { value: coreLevel, enumerable: false, configurable: true },
+    maxChromaTintRaw: { value: coreLevel, enumerable: false, configurable: true },
+    maxChroma: { value: coreChroma, enumerable: false, configurable: true },
+    maxChromaRaw: { value: coreChroma, enumerable: false, configurable: true },
+    core: {
+      get() {
+        return this[this.maxChromaTint];
+      },
+      enumerable: false,
+    },
+  });
+
+  // First, add pinned colors
+  for (let tint in seedColors) {
+    scale[tint] = seedColors[tint];
+  }
+
+  // For finding lightest and darkest pinned colors
+  let pinnedTints = Object.keys(seedColors).sort((a, b) => a - b);
+  let chromaCurve = CHROMA_CURVES[clamp(50, coreLevel, 90)];
+
+  // Now generate the rest, starting from the edges
+  if (!('95' in scale)) {
+    let lightestPinnedTint = pinnedTints.at(-1);
+    let lightest = seedColors[lightestPinnedTint];
+    let lOffset = lightest.get('oklch.l') - L_RANGES[lightestPinnedTint].mid;
+    let chromaScale = CHROMA_SCALE_LIGHTEST[lightestPinnedTint];
+    let hueShift = getHueShift(lightest, lightestPinnedTint, '95');
+
+    let color = lightest.clone().to('oklch');
+    color.set({
+      l: getLightness(95, lOffset),
+      c: clamp(0, lightest.get('oklch.c') * chromaScale, MAX_CHROMA_BY_TINT[95]),
+      h: h => h + hueShift,
+    });
+
+    scale[95] = color;
+  }
+
+  if (!('05' in scale)) {
+    let darkestPinnedTint = pinnedTints[0];
+    let darkest = seedColors[darkestPinnedTint];
+    let lOffset = darkest.get('oklch.l') - L_RANGES[darkestPinnedTint].mid;
+    let color = darkest.clone().to('oklch');
+    let hueShift = getHueShift(darkest, darkestPinnedTint, '05');
+
+    color.set({
+      l: getLightness('05', lOffset),
+      // TODO c
+      h: h => h + hueShift,
+    });
+
+    scale['05'] = color;
+  }
+
+  let tintBefore = '05';
+
+  for (let tint of tints) {
+    if (tint in scale) {
+      // Pinned or already generated
+      tintBefore = tint;
+      continue;
+    }
+
+    // Generated color
+    // First, find closest pinned colors before and after
+    let tintAfter = pinnedTints.find(level => level > tint) ?? '95';
+    let neighboringTints = [tintBefore, tintAfter];
+    let neighboringColors = neighboringTints.map(t => scale[t]);
+    let tintProgress = progress(tint, neighboringTints);
+
+    let color = coreColor.clone().to('oklch');
+
+    // Lightness
+    let lOffset = interpolate(
+      tintProgress,
+      neighboringTints.map(t => scale[t].get('oklch.l') - L_RANGES[t].mid),
+    );
+
+    // Interpolate hue linearly and chroma with a power curve
+    color.set({
+      l: getLightness(tint, lOffset),
+      c: interpolate(
+        tintProgress,
+        neighboringColors.map(c => c.get('oklch.c')),
+        {
+          progression: tint > coreLevel ? p => p ** chromaCurve.light : undefined,
+        },
+      ),
+      h: interpolate(
+        tintProgress,
+        neighboringColors.map(c => c.get('oklch.h')),
+      ),
+    });
+
+    scale[tint] = color;
+  }
+
+  for (let tint in scale) {
+    if (!(tint in seedColors) && scale[tint].toGamut) {
+      scale[tint] = scale[tint].toGamut('p3');
+    }
+  }
+
+  return scale;
+}
+
+export default generateScale;

docs/docs/palettes/app/color/generate.js

@@ -0,0 +1,3 @@
+export { generateGrays, generateGrays as grays } from './generate-grays.js';
+export { generatePalette, generatePalette as palette } from './generate-palette.js';
+export { generateScale, generateScale as scale } from './generate-scale.js';

docs/docs/palettes/app/color/get-max-chroma.js

@@ -0,0 +1,91 @@
+/**
+ * Memoized calculation of OKLCH gamut boundary for a given L and H
+ * Currently unused, but we can use it if existing code becomes too slow.
+ */
+import Color from 'https://colorjs.io/dist/color.js';
+import { interpolate, progress, progressAngle, roundTo } from '/assets/scripts/tweak/util.js';
+
+/** Max oklch.c per h and l (rounded to 1 significant digit) */
+const maxChroma = {};
+const OOG_CHROMA = 0.4; // guaranteed to be OOG for every P3 color
+const C_THRESHOLD = 0.03;
+const MIN_H_STEP = 0.1;
+const MIN_L_STEP = 0.001;
+
+export default function getMaxChroma(l, h) {
+  let { hStep, lStep, count } = calculateBoundary(l, h);
+
+  let hRounded = roundTo(h, hStep);
+  let lRounded = roundTo(l, lStep);
+
+  // Calculate gamut boundary around this point
+  let hProgress = progressAngle(h - hRounded, [-hStep, 0, hStep]);
+  let lProgress = progress(l - lRounded, [-lStep, 0, lStep]);
+  let maxChromaH = [];
+
+  for (let i of [-1, 0, 1]) {
+    let h = roundTo(hRounded + i * hStep, hStep);
+
+    let cs = [-1, 0, 1].map(j => {
+      let l = roundTo(lRounded + j * lStep, lStep);
+
+      return maxChroma[l][h];
+    });
+
+    maxChromaH.push(interpolate(lProgress, cs));
+  }
+
+  // Interpolate between the 9 points using bilinear interpolation
+  let c = interpolate(hProgress, maxChromaH);
+
+  return c;
+}
+
+function calculateBoundary(pointL, pointH, lStep = 0.1, hStep = 10) {
+  let hRounded = roundTo(pointH, hStep);
+  let lRounded = roundTo(pointL, lStep);
+  let ret = { count: 0, hStep, lStep };
+
+  for (let i of [-1, 0, 1]) {
+    let l = roundTo(lRounded + i * lStep, lStep);
+    maxChroma[l] ??= {};
+
+    for (let j of [-1, 0, 1]) {
+      let h = roundTo(hRounded + j * hStep, hStep);
+
+      if (maxChroma[l][h] !== undefined) {
+        continue;
+      }
+
+      let gamutBoundary = new Color('oklch', [l, OOG_CHROMA, h]).toGamut('p3', { method: 'oklch.c' });
+      let c = gamutBoundary.get('c');
+      maxChroma[l][h] = c;
+      ret.count++;
+      let tooFar = { h: false, l: false };
+
+      if (i > -1) {
+        let lPrev = roundTo(lRounded + (i - 1) * lStep, lStep);
+        let cPrev = maxChroma[lPrev][h];
+        tooFar.l = Math.abs(c - cPrev) > C_THRESHOLD && lStep > MIN_L_STEP;
+
+        if (tooFar.l) {
+          ret.lStep /= 2;
+          ret.count += calculateBoundary(pointL, pointH, ret.lStep, ret.hStep).count;
+        }
+      }
+
+      if (j > -1) {
+        let hPrev = roundTo(hRounded + (j - 1) * hStep, hStep);
+        let cPrev = maxChroma[l][hPrev];
+        tooFar.h = Math.abs(c - cPrev) > C_THRESHOLD && hStep > MIN_H_STEP;
+
+        if (tooFar.h) {
+          ret.hStep /= 2;
+          ret.count += calculateBoundary(pointL, pointH, ret.lStep, ret.hStep).count;
+        }
+      }
+    }
+  }
+
+  return ret;
+}

docs/docs/palettes/app/color/get-palette-code.js

@@ -0,0 +1,83 @@
+import { stringifyColor } from './util.js';
+import { cssImport, cssLiteral, cssRule } from '/assets/scripts/tweak/code.js';
+import { selectors, tints, urls } from '/assets/scripts/tweak/data.js';
+
+export function getPaletteCode({ base, slug = base, colors, tweaked, roles, ...options }) {
+  let imports = [];
+
+  if (base && options.imports !== false && !tweaked.seedColors) {
+    imports.push(urls.palette(base));
+  }
+
+  let ret = imports.map(url => cssImport(url, options)).join('\n');
+
+  let declarations = [];
+  let prefix = options.prefix ?? 'wa-color';
+
+  let css = '';
+
+  if (tweaked) {
+    for (let hue in colors) {
+      if (!tweaked.seedColors) {
+        if (hue === 'gray') {
+          if (!tweaked.grayChroma && !tweaked.grayColor) {
+            continue;
+          }
+        } else if (!tweaked.chromaScale && !tweaked.hue?.[hue]) {
+          continue;
+        }
+      }
+
+      let scale = colors[hue];
+
+      for (let tint of tints) {
+        let color = scale[tint];
+        let stringified = stringifyColor(color);
+        declarations.push(`--${prefix}-${hue}-${tint}: ${stringified};`);
+      }
+
+      let coreTint = scale.maxChromaTint;
+      if (coreTint) {
+        declarations.push(
+          `--${prefix}-${hue}: var(--${prefix}-${hue}-${coreTint});`,
+          `--${prefix}-${hue}-key: ${coreTint};`,
+        );
+      }
+
+      declarations.push('');
+    }
+  }
+
+  if (roles) {
+    for (let role in roles) {
+      let hue = roles[role];
+
+      if (!hue) {
+        continue;
+      }
+
+      for (let suffix of [...tints.map(t => '-' + t), '', '-key']) {
+        declarations.push(`--${prefix}-${role}${suffix}: var(--${prefix}-${hue}${suffix});`);
+      }
+
+      declarations.push('');
+    }
+  }
+
+  if (declarations.length > 0) {
+    let selector = options.selector ?? selectors.palette(slug);
+    css += cssRule(selector, declarations);
+  }
+
+  if (css) {
+    if (imports.length) {
+      ret += '\n\n';
+    }
+
+    ret += `${cssLiteral(css, options)}`;
+  }
+
+  return ret;
+}
+
+export default getPaletteCode;

docs/docs/palettes/app/color/palettes.js

@@ -0,0 +1,28 @@
+// TODO move these to local imports
+import Color from 'https://colorjs.io/dist/color.js';
+import { tints } from '/assets/scripts/tweak/data.js';
+
+let palettes = await fetch('/docs/palettes/data.json').then(r => r.json());
+
+for (let palette in palettes) {
+  for (let hue in palettes[palette].colors) {
+    let scale = palettes[palette].colors[hue];
+    for (let tint of tints) {
+      let color = scale[tint];
+
+      if (Array.isArray(color)) {
+        scale[tint] = new Color('oklch', color);
+      }
+    }
+
+    Object.defineProperty(scale, 'core', {
+      get() {
+        return this[this.maxChromaTint];
+      },
+      enumerable: false,
+    });
+  }
+}
+
+globalThis.allPalettes = palettes;
+export default palettes;

docs/docs/palettes/app/color/tweak.js

@@ -0,0 +1,74 @@
+// TODO move these to local imports
+import generateGrays from './generate-grays.js';
+import { tints } from '/assets/scripts/tweak/data.js';
+
+export function tweakPalette(baseColors, tweaks, tweaked) {
+  let ret = {};
+
+  if (!tweaked) {
+    return baseColors;
+  }
+
+  for (let hue in baseColors) {
+    let originalScale = baseColors[hue];
+    let scale = (ret[hue] = {});
+    let descriptors = Object.getOwnPropertyDescriptors(originalScale);
+    Object.defineProperties(scale, {
+      maxChromaTint: { ...descriptors.maxChromaTint, enumerable: false },
+      maxChromaTintRaw: { ...descriptors.maxChromaTintRaw, enumerable: false },
+      core: {
+        get() {
+          return this[this.maxChromaTint];
+        },
+        enumerable: false,
+      },
+    });
+
+    if (hue === 'gray') {
+      if (tweaked.grayChroma || tweaked.grayColor) {
+        let grayColor = tweaks.grayColor ?? this.originalGrayColor;
+        let grayChroma = this.computedGrayChroma;
+        ret.gray = generateGrays(baseColors, { grayColor, grayChroma });
+      } else {
+        ret.gray = originalScale;
+      }
+      continue;
+    }
+
+    for (let tint of tints) {
+      scale[tint] = tweakColor(hue, originalScale[tint], tweaks, tweaked);
+    }
+  }
+
+  return ret;
+}
+
+export function tweakColor(hue, originalColor, tweaks, tweaked) {
+  if (!tweaked) {
+    return originalColor;
+  }
+
+  let color = originalColor;
+  let { hueShifts, chromaScale = 1, grayColor, grayChroma } = tweaks;
+
+  let tweak = {};
+  let thisTweaked = false;
+
+  if (tweaked.hue && hueShifts[hue]) {
+    tweak.h = h => h + hueShifts[hue];
+    thisTweaked = true;
+  }
+
+  if (tweaked.chromaScale && chromaScale !== 1) {
+    tweak.c = c => c * chromaScale;
+    thisTweaked = true;
+  }
+
+  if (thisTweaked) {
+    color = color.clone().to('oklch').set(tweak);
+  }
+
+  return color;
+}
+
+export default tweakPalette;

docs/docs/palettes/app/color/util.js

@@ -0,0 +1,154 @@
+import {
+  CHROMA_TOLERANCE,
+  DEFAULT_ACCENT,
+  GRAY_CHROMA_BY_TINT,
+  HUE_RANGES,
+  HUE_SHIFTS,
+  L_RANGES,
+  MAX_ACCENT,
+  MIN_ACCENT,
+  tints,
+} from '/assets/scripts/tweak/data.js';
+import { clamp, getRange, mapRange } from '/assets/scripts/tweak/util.js';
+
+export function identifyColor(color, colors) {
+  let [l, c, h] = color.getAll('oklch');
+  let level = getRange(L_RANGES, l).key;
+  let hue;
+
+  // Identify grays
+  let grayBounds = GRAY_CHROMA_BY_TINT[level];
+  if (c <= grayBounds[1]) {
+    // Possibly gray
+    if (c <= grayBounds[0]) {
+      // Definitely gray
+      hue = 'gray';
+    } else if (colors) {
+      // May or may not be gray, compare to palette max chroma
+      // FIXME this does not take level into account, so is more likely to identify lighter colors as gray
+      let maxChroma = Math.max(...colors.map(color => color.get('oklch.c')));
+
+      if (c / maxChroma < 0.2) {
+        hue = 'gray';
+      }
+    }
+  }
+
+  hue ??= getRange(HUE_RANGES, h, { type: 'angle' }).key;
+
+  return { hue, level };
+}
+
+export function getLightness(level, distance) {
+  return clamp(L_RANGES[level].min, L_RANGES[level].mid + distance, L_RANGES[level].max);
+}
+
+/**
+ * How many tints are between two tints?
+ * E.g. `getTintDistance('90', '95')` should return `1`
+ * @param {number | string} tint1
+ * @param {number | string} tint2
+ * @returns {number}
+ */
+export function getTintDistance(tint1, tint2) {
+  tint1 = String(tint1);
+  tint2 = String(tint2);
+  return tints.indexOf(tint2) - tints.indexOf(tint1);
+}
+export function getHueShift(color, fromTint, toTint) {
+  let tintDistance = getTintDistance(fromTint, toTint);
+  let hueShift = getRange(HUE_SHIFTS, color.get('oklch.h'), {
+    getRange: v => v.range,
+    type: 'angle',
+    tolerance: 0,
+  });
+
+  if (!hueShift) {
+    return 0;
+  }
+
+  hueShift = HUE_SHIFTS[hueShift.key];
+
+  let { peak, range } = hueShift;
+  let h = color.get('oklch.h');
+  let breakpoints = [range[0], ...peak, range[1]];
+  let intensity = mapRange(h, breakpoints, [0, 1, 1, 0]);
+  let type = tintDistance < 0 ? 'dark' : 'light';
+  let shift = hueShift.shift[type];
+
+  let ret = shift * intensity;
+  let maxConsecutive = hueShift.maxConsecutive[type] ?? hueShift.maxConsecutive;
+  let maxShift = Math.sign(shift) * maxConsecutive * Math.abs(tintDistance);
+
+  ret = clamp(undefined, ret, maxShift);
+
+  return ret;
+}
+
+export function getCoreTint(scale) {
+  let tintsInScale = Object.keys(scale);
+
+  if (tintsInScale.length <= 1) {
+    return tintsInScale[0];
+  }
+
+  let ret = DEFAULT_ACCENT in scale ? DEFAULT_ACCENT : tintsInScale[Math.floor(tintsInScale.length / 2)];
+  let maxChroma = 0;
+
+  for (let tint in scale) {
+    let color = scale[tint];
+    let chroma = color.get('oklch.c');
+
+    if (chroma > maxChroma + CHROMA_TOLERANCE && tint >= MIN_ACCENT && tint <= MAX_ACCENT) {
+      ret = tint;
+      maxChroma = chroma;
+    }
+  }
+
+  return ret;
+}
+
+export 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;
+}
+
+/**
+ * Return hex code iff a color is within sRGB, otherwise fall back to its default string representation
+ *
+ * @param {Color} color
+ * @returns {string}
+ */
+export function stringifyColor(color) {
+  if (color?.constructor.name !== 'Color') {
+    return color;
+  }
+
+  let format = color.inGamut('srgb') ? 'hex' : undefined;
+  return color.toString({ format });
+}

docs/docs/palettes/app/custom.css

@@ -0,0 +1,187 @@
+/* CSS for custom palettes only */
+#seed-colors {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(22ch, 1fr));
+  gap: var(--wa-space-m);
+
+  > .add-button {
+    flex-flow: column wrap;
+    height: auto;
+    min-height: 15ch;
+    border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
+    --border-color: var(--wa-color-surface-border);
+    border-radius: var(--wa-panel-border-radius);
+    background-color: var(--wa-color-surface-default);
+    box-shadow: var(--wa-shadow-s);
+
+    wa-icon {
+      font-size: 200%;
+      margin: 0;
+      margin-top: 0.35em;
+    }
+  }
+
+  > wa-card {
+    --spacing: var(--wa-space-s);
+
+    [slot='image'] {
+      position: relative;
+      height: 5.5rem;
+      width: 100%;
+      border-start-start-radius: var(--inner-border-radius);
+      border-start-end-radius: var(--inner-border-radius);
+      background-color: var(--color);
+      color: canvastext;
+
+      .tweak-icon {
+        position: absolute;
+        top: var(--wa-space-s);
+        right: var(--wa-space-s);
+
+        --background-color-hover: oklab(from currentColor l a b / 15%);
+        --text-color-hover: currentColor;
+
+        &:not(:hover, :focus, :has(+ :focus-within)) {
+          opacity: 50%;
+        }
+
+        &:is(.tweaked *) {
+          &::part(base) {
+            transition: var(--wa-transition-normal);
+            transition-property: padding, border, opacity;
+            background-color: var(--color-original);
+            padding: var(--wa-space-s);
+            border: 1px solid hsl(0 0 100 / 60%);
+          }
+        }
+      }
+
+      .name {
+        display: flex;
+        gap: var(--wa-space-xs);
+        position: absolute;
+        bottom: var(--wa-space-xs);
+        left: var(--wa-space-s);
+        font-weight: var(--wa-font-weight-semibold);
+
+        wa-dropdown.pin-hue {
+          wa-button {
+            --outlined-border-color: oklab(from currentColor l a b / 10%);
+            --outlined-background-color-hover: transparent;
+            --border-width: 1.5px;
+            --text-color: currentColor;
+            --wa-space: var(--wa-space-xs);
+            --wa-space-smaller: var(--wa-space-2xs);
+          }
+
+          &.pin-hue.pinned {
+            wa-button {
+              --outlined-border-color: oklab(from currentColor l a b / 40%);
+              font-weight: var(--wa-font-weight-bold);
+            }
+          }
+
+          wa-icon[name='thumbtack'] {
+            opacity: 60%;
+          }
+        }
+
+        .level {
+          font-weight: var(--wa-font-weight-bold);
+        }
+      }
+    }
+
+    wa-input {
+      margin-top: var(--wa-space-xs);
+    }
+
+    wa-icon-button {
+      color: light-dark(black, white);
+      transition: opacity var(--wa-transition-slow);
+      --background-color-hover: oklab(from currentColor l a b / 15%);
+      --text-color-hover: currentColor;
+    }
+  }
+
+  .color-to-role {
+    --border-width: 0;
+    margin-inline-start: calc(-1 * var(--wa-space-3xs));
+
+    &::part(tags) {
+      margin-inline-start: 0;
+    }
+
+    &::part(combobox) {
+      padding: var(--wa-space-3xs);
+      min-height: auto;
+    }
+  }
+}
+
+wa-icon-button.delete-button {
+  position: absolute;
+  top: var(--wa-space-s);
+  right: var(--wa-space-s);
+  --text-color-hover: var(--wa-color-danger-on-normal);
+}
+
+.pinned-icon {
+  opacity: 70%;
+}
+
+#suggested-colors {
+  margin-top: var(--wa-space-2xl);
+
+  h3 {
+    margin-bottom: 0;
+  }
+
+  &::part(content) {
+    padding-block-start: 0;
+  }
+
+  p.wa-caption-m {
+    margin-block: var(--wa-space-xs) var(--wa-space-m);
+    text-wrap: pretty;
+  }
+
+  .suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--wa-space-s);
+
+    wa-button {
+      /* --background-color-hover: var(--background-color); */
+      height: var(--wa-form-control-height);
+      aspect-ratio: 1.2;
+
+      wa-icon {
+        transition: var(--wa-transition-normal);
+      }
+
+      &:not(:focus, :hover) wa-icon {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+#roles {
+  margin-block: var(--wa-space-2xl);
+
+  > div {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--wa-space-m);
+
+    > wa-select {
+      flex: 1;
+      max-width: 20ch;
+    }
+  }
+}
+
+.seed-color-tweak .popup {
+  min-width: clamp(0ch, 50ch, 90vw);
+}

docs/docs/palettes/app/tweak.css

@@ -0,0 +1,390 @@
+/* CSS included both in predefined palettes and custom ones */
+:root {
+  --fa-sliders-simple: '\f1de';
+}
+
+.core-column {
+  position: relative;
+
+  > wa-dropdown {
+    min-width: 100%;
+  }
+}
+
+wa-dropdown > .color.swatch {
+  cursor: pointer;
+}
+
+.color-slider {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+
+  wa-slider {
+    grid-column: 1 / -1;
+    --track-height: 1em;
+    --track-color-inactive: transparent;
+    --track-color-active: transparent;
+    --thumb-color: 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) {
+      position: relative;
+      background: linear-gradient(to right in var(--color-interpolation-space, oklab), var(--color-1), var(--color-2));
+    }
+
+    .tick {
+      --width: 1px;
+      --height: 0.5em;
+      --tick-color: var(--wa-color-neutral-border-normal);
+      width: 4px;
+      height: 2.4em;
+      background: no-repeat;
+      background-image: linear-gradient(var(--tick-color) 0 100%), linear-gradient(var(--tick-color) 0 100%);
+      background-position: top, bottom;
+      background-size: var(--width) var(--height);
+      position: absolute;
+      left: calc(var(--default-value-progress) * 100% - (var(--default-value-progress) - 0.5) * var(--thumb-size));
+      translate: -50% 0;
+      bottom: -0.5em;
+
+      &:hover {
+        --tick-color: var(--wa-color-neutral-border-loud);
+      }
+    }
+  }
+
+  [slot='label'] {
+    min-height: 1.1lh;
+  }
+
+  .clear-button {
+    vertical-align: middle;
+    font-size: var(--wa-font-size-xs);
+  }
+
+  .label-min,
+  .label-max {
+    font-size: var(--wa-font-size-xs);
+  }
+
+  .label-min {
+    grid-column: 1;
+    margin-inline-start: 0.15em;
+  }
+
+  .label-max {
+    grid-column: 3;
+    margin-inline-end: 0.1em;
+  }
+}
+
+[data-component='h'] {
+  --color-interpolation-space: oklch increasing hue;
+}
+
+.popup {
+  display: flex;
+  flex-flow: column;
+  gap: var(--wa-space-m);
+  background: var(--wa-color-surface-default);
+  color: var(--wa-color-text-normal);
+  border: 1px solid var(--wa-color-surface-border);
+  padding: var(--wa-space-m) var(--wa-space-l);
+  border-radius: var(--wa-border-radius-m);
+  color-scheme: light;
+
+  .copyable-code {
+    display: flex;
+    gap: var(--wa-space-xs);
+    align-items: center;
+
+    code {
+      flex: 1;
+      max-width: 20ch;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  > legend {
+    /* Force legend to be rendered inside the fieldset */
+    float: left;
+    clear: all;
+    padding: 0;
+  }
+
+  .wa-heading-s {
+    display: flex;
+    gap: var(--wa-gap-xs);
+    align-items: center;
+
+    > :nth-child(1 of .align-end) {
+      margin-inline-start: auto;
+    }
+  }
+}
+
+@scope (.wa-dark) to (.wa-light) {
+  .popup {
+    color-scheme: dark;
+  }
+}
+
+.color-scale {
+  th {
+    white-space: nowrap;
+  }
+
+  .tweak-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: var(--wa-space-s);
+    opacity: var(--tweak-icon-opacity, 0%);
+  }
+
+  .color.swatch:hover {
+    --tweak-icon-opacity: 40%;
+  }
+
+  &.tweaked .core-column {
+    --tweak-icon-opacity: 80%;
+  }
+}
+
+.tweaked-callout {
+  padding: var(--wa-space-xs);
+  padding-inline-start: var(--wa-space-m);
+  margin-block: var(--wa-space-m);
+  align-items: center;
+
+  &:not(.tweaked-any *) {
+    visibility: hidden;
+  }
+
+  &::part(message) {
+    display: flex;
+    align-items: center;
+    gap: var(--wa-space-xs);
+  }
+
+  wa-button:first-of-type {
+    margin-inline-start: auto;
+  }
+}
+
+/* Better UI before Vue initializes */
+[v-if='saved'],
+[v-if^='tweaked'],
+[v-cloak] {
+  display: none;
+}
+
+.static-palette:has(+ .colors:not([v-cloak])) {
+  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);
+  }
+}
+
+[data-slug='custom'] > :not(.seeded) #seed-colors ~ :not(#saved),
+#outline:has(+ main > [data-slug='custom'] > :not(.seeded)) li:nth-child(n + 2) {
+  display: none;
+}
+
+[id='palette-info'] {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-auto-flow: column;
+
+  > * {
+    grid-column: 1;
+  }
+}
+
+.hue-wheel {
+  --r: clamp(2em, 6rem, 25vmin);
+  grid-column: 2;
+  grid-row: 1 / 5;
+  position: relative;
+  width: calc(var(--r) * 2);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  --lc: var(--avg-l) var(--max-c);
+  --lc2: var(--avg-l) calc(var(--max-c) / 2);
+  margin-top: calc(var(--r) * -0.05);
+  background: conic-gradient(
+    in oklch,
+    oklch(var(--lc) 0),
+    oklch(var(--lc) 60),
+    oklch(var(--lc) 120),
+    oklch(var(--lc) 180),
+    oklch(var(--lc) 240),
+    oklch(var(--lc) 300),
+    oklch(var(--lc) 360)
+  );
+
+  &,
+  &::before {
+    --stops: oklch(var(--lc) 0), oklch(var(--lc) 60), oklch(var(--lc) 120), oklch(var(--lc) 180), oklch(var(--lc) 240),
+      oklch(var(--lc) 300), oklch(var(--lc) 360);
+  }
+
+  &::before {
+    content: '';
+    display: block;
+    height: 100%;
+    border-radius: 50%;
+    -webkit-mask: radial-gradient(white, transparent);
+    background: radial-gradient(oklch(var(--avg-l) calc(var(--gray-chroma) * var(--max-c)) 0) 5%, transparent 30%),
+      conic-gradient(
+        in oklch,
+        oklch(var(--lc2) 0),
+        oklch(var(--lc2) 60),
+        oklch(var(--lc2) 120),
+        oklch(var(--lc2) 180),
+        oklch(var(--lc2) 240),
+        oklch(var(--lc2) 300),
+        oklch(var(--lc2) 360)
+      );
+  }
+
+  .color {
+    --scale-c: calc(var(--c) / var(--max-c));
+    --distance: calc(var(--r) * var(--scale-c));
+
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(calc(var(--h) * 1deg - 90deg)) translateX(var(--distance));
+    position: absolute;
+    z-index: 1;
+    width: calc(1.2em + 0.3em * var(--scale-c));
+    aspect-ratio: 1;
+
+    &:hover {
+      --scale: 1.2;
+      --line-color: white;
+      --line-style: solid;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      width: 100%;
+      height: 0;
+      border-top: 2px var(--line-style, dashed) var(--line-color, var(--wa-color-gray-80));
+      padding-top: 100%;
+      top: calc(50% - 1px);
+      right: 50%;
+      width: var(--distance);
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      position: relative;
+      height: 100%;
+      border-radius: 50%;
+      border: 2px solid white;
+      box-shadow: var(--wa-shadow-l);
+      background: var(--color);
+      transition: var(--wa-transition-fast);
+      scale: var(--scale, 1);
+    }
+  }
+
+  wa-tooltip {
+    /* Prevent flickering */
+    pointer-events: none;
+  }
+}
+
+.scale-filter {
+  wa-tab wa-icon {
+    margin-right: 0.4em;
+  }
+}
+
+.title wa-icon-button[name='pencil'] {
+  margin-inline-start: var(--wa-space-xs);
+}
+
+.seeded {
+  wa-badge.status {
+    display: none;
+  }
+
+  wa-badge.pro {
+    filter: grayscale(0.95);
+  }
+}
+
+.selected-swatch,
+.color-select wa-option::before {
+  content: '';
+  display: inline-block;
+  width: 1.2em;
+  aspect-ratio: 1;
+  flex: none;
+  border-radius: var(--wa-border-radius-m);
+  background: var(--color);
+  border: 1px solid var(--wa-color-surface-default);
+}
+
+.color-select wa-option {
+  white-space: nowrap;
+
+  &::before {
+    width: 1em;
+    margin-inline: var(--wa-space-xs);
+  }
+
+  &::part(checked-icon) {
+    order: 2;
+  }
+
+  wa-icon[name='square-plus'] {
+    vertical-align: -0.15em;
+    color: var(--color-gray);
+    opacity: 0.6;
+  }
+}
+
+.color-popup {
+  display: block;
+
+  .popup {
+    min-width: 25ch;
+  }
+}
+
+wa-icon[name='thumbtack'],
+wa-icon-button[name='thumbtack']::part(icon) {
+  rotate: 45deg;
+}

docs/docs/palettes/app/vue-components/color-input.js

@@ -0,0 +1,357 @@
+const template = `
+<wa-card size="small" class="color" :class="{tweaked}"
+  :style="{'--color': value, '--color-original': inputValue}">
+  <div slot="image" :style="{ colorScheme: level <= 60 ? 'dark' : 'light'}">
+
+    <color-popup placement="top-start" class="seed-color-tweak" :pinned=true deletable @delete="$emit('delete')" title="Edit color">
+      <wa-icon-button name="sliders-simple" class="tweak-icon"></wa-icon-button>
+      <template #content>
+        <color-slider label="Hue" label-default="Entered color"
+                      coord="h" :min="0" :max="359" :step="1"
+                      v-model:color="color" :default-value="inputLCH[2]" ></color-slider>
+        <color-slider label="Colorfulness" label-default="Entered color"
+                      coord="c" :min="0" :max="maxChroma" :step="0.001"
+                      v-model:color="color" :default-value="inputLCH[1]" format-type="scale" :format-base-value="maxChroma" ></color-slider>
+        <color-slider label="Lightness" label-default="Entered color"
+                      coord="l" :min="0" :max="1" :step="0.01"
+                      v-model:color="color" :default-value="inputLCH[0]" format-type="scale" :format-base-value="1" ></color-slider>
+      </template>
+    </color-popup>
+
+    <div class="name">
+      <wa-dropdown class="pin-hue" :class="{pinned: pinnedHue}">
+        <wa-button slot="trigger" appearance="outlined" caret>
+          <wa-icon name="thumbtack" v-if="pinnedHue" variant="solid" slot="prefix"></wa-icon>
+          {{ capitalize(hue) || 'New color' }}
+        </wa-button>
+        <wa-menu @wa-select="pinnedHue = $event.detail.item.value">
+          <wa-menu-item type="checkbox" :checked="pinnedHue ? null : ''">Automatic <em>({{ capitalize(detectedColorInfo.hue) }})</em></wa-menu-item>
+          <wa-divider></wa-divider>
+          <wa-menu-label>Pin to…</wa-menu-label>
+          <wa-menu-item v-for="hue in allHues" type="checkbox" :value="hue" :checked="pinnedHue === hue ? '' : null">{{ capitalize(hue) }}</wa-menu-item>
+        </wa-menu>
+      </wa-dropdown>
+      <span class="level">{{ level }}</span>
+     </div>
+  </div>
+
+  <wa-select class="color-to-role" multiple appearance="plain" placeholder="(No states)" max-options-visible="2"
+    ref="roles" :value.attr="Object.keys(roles).join(' ')" :value="Object.keys(roles)"
+    :getTag="getTag"
+    @input="$emit('update:roles', $event.target.value)">
+    <wa-option v-for="role in ROLES" :value="role" :class="{'default': !roles[role]}">{{ capitalize(role) }}</wa-option>
+  </wa-select>
+
+  <wa-input :value="valueRaw" @input="handleInput" @focus="inputFocused = true" @blur="inputFocused = false" ref="input"></wa-input>
+</wa-card>
+`;
+
+import Color from 'https://colorjs.io/dist/color.js';
+// import { nextTick } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
+import { nextTick } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.js';
+import getMaxChroma from '../color/get-max-chroma.js';
+import { identifyColor } from '../color/util.js';
+import ColorPopup from './color-popup.js';
+import ColorSlider from './color-slider.js';
+import InfoTip from './info-tip.js';
+import { ROLES, allHues } from '/assets/scripts/tweak/data.js';
+import { capitalize } from '/assets/scripts/tweak/util.js';
+
+await customElements.whenDefined('wa-select');
+
+let maxUid = 0;
+
+const expose = [
+  'valueRaw',
+  'value',
+  'inputValueRaw',
+  'inputValue',
+  'colorRaw',
+  'color',
+  'inputColorRaw',
+  'inputColor',
+  'hue',
+  'pinnedHue',
+  'level',
+  'tweaked',
+];
+
+export default {
+  expose,
+  props: {
+    modelValue: {
+      type: Object,
+      default(rawProps) {
+        return { value: '' };
+      },
+    },
+    otherColors: {
+      type: Array,
+    },
+    roles: {
+      type: Object,
+      default: {},
+    },
+  },
+  emits: ['update:modelValue', 'update:roles', 'delete'],
+  data() {
+    let uid = this.modelValue.uid ?? maxUid++;
+    if (this.modelValue.uid) {
+      maxUid = Math.max(maxUid, uid);
+    }
+    this.modelValue.uid = uid;
+
+    let valueRaw = this.modelValue.value;
+    let inputValueRaw = this.modelValue.inputValue ?? valueRaw;
+    let color = tryColor(this.modelValue.value);
+    let inputColor = tryColor(inputValueRaw);
+
+    return {
+      uid,
+      initialProps: { ...this.modelValue },
+      valueRaw,
+      value: color ? valueRaw : undefined,
+      color,
+      inputValueRaw,
+      inputValue: inputColor ? inputValueRaw : undefined,
+      inputColor,
+      pinnedHue: this.modelValue.pinnedHue,
+      editing: 0,
+      inputFocused: false,
+      watching: {},
+    };
+  },
+  created() {
+    // Non-reactive variables to expose
+    Object.assign(this, { ROLES, allHues });
+  },
+  async mounted() {
+    if (this.modelValue.editImmediately) {
+      let input = this.$refs.input;
+      await input.updateComplete;
+      input.focus();
+      input.select();
+    }
+  },
+  computed: {
+    inputLCH() {
+      return this.inputColor?.oklch;
+    },
+
+    currentLCH() {
+      return this.color?.oklch;
+    },
+
+    tweaked() {
+      if (this.inputFocused || this.editing > 0 || !this.inputLCH || !this.currentLCH) {
+        return false;
+      }
+
+      return this.inputLCH.some((coord, i) => coord !== this.currentLCH[i]);
+    },
+
+    computedValue() {
+      let ret = {};
+      for (let property of expose) {
+        ret[property] = this[property];
+      }
+
+      return ret;
+    },
+
+    colorRaw() {
+      let ret = tryColor(this.modelValue.valueRaw);
+
+      if (ret) {
+        this.value = this.modelValue.valueRaw;
+      }
+
+      return ret;
+    },
+
+    colorInfo() {
+      let ret = { ...this.detectedColorInfo };
+
+      if (this.pinnedHue) {
+        ret.hue = this.pinnedHue;
+      }
+
+      return ret;
+    },
+
+    detectedColorInfo() {
+      if (!this.color) {
+        return { hue: undefined, level: undefined };
+      }
+
+      return identifyColor(this.color, this.otherColors);
+    },
+
+    hue() {
+      return this.colorInfo.hue;
+    },
+
+    level() {
+      return this.colorInfo.level;
+    },
+
+    stringifiedColor() {
+      // return stringifyColor(this.colorRaw);
+      return this.color + '';
+    },
+
+    inputColorRaw() {
+      let ret = tryColor(this.inputValueRaw);
+
+      if (ret) {
+        this.inputValue = this.inputValueRaw;
+      }
+
+      return ret;
+    },
+
+    maxChroma() {
+      if (!this.color) {
+        return 0.4;
+      }
+
+      return getMaxChroma(this.color.oklch.l, this.color.oklch.h);
+    },
+  },
+  methods: {
+    capitalize,
+
+    handleInput(event) {
+      this.editing++;
+
+      let value = event.target.value;
+      // Editing the input manually also incorporates any tweaks as part of the color itself
+      // I.e. input color and color are now the same
+      this.valueRaw = this.inputValueRaw = value;
+
+      nextTick().then(() => {
+        if (this.colorRaw) {
+          this.color = this.colorRaw;
+          this.$refs.input.setCustomValidity('');
+        } else {
+          this.$refs.input.setCustomValidity('Invalid color');
+          this.$refs.input.reportValidity();
+        }
+
+        this.editing--;
+      });
+    },
+
+    mutateModelValue(mutator) {
+      if (this.watching.modelValue === null) {
+        // If we're not watching modelValue, it means we're reacting to a change to it
+        // so no point in updating it again
+        return;
+      }
+
+      if (this.watching.modelValue) {
+        this.watching.modelValue();
+        this.watching.modelValue = null;
+      }
+
+      mutator();
+
+      this.watching.modelValue = this.$watch('modelValue', {
+        deep: true,
+        handler() {
+          let computedValue = this.computedValue;
+          // What changed?
+
+          if (this.modelValue.value !== computedValue.value) {
+            this.valueRaw = this.modelValue.value;
+          }
+
+          if (this.modelValue.color + '' !== computedValue.color + '') {
+            this.color = this.modelValue.color;
+          }
+        },
+      });
+    },
+
+    getTag(option) {
+      let isDefault = option.classList.contains('default');
+      let tag = Object.assign(document.createElement('wa-tag'), {
+        part: `tag${isDefault ? ' default' : ''}`,
+        exportparts: `
+          base:tag__base,
+          content:tag__content,
+          remove-button:tag__remove-button,
+          remove-button__base:tag__remove-button__base`,
+        size: 'small',
+        removable: !isDefault,
+        'data-value': option.value,
+        id: 'tag-' + option.value,
+        innerHTML: option.label + ` <wa-tooltip hoist for="tag-${option.value}">Default role</wa-tooltip>`,
+      });
+
+      return tag;
+    },
+  },
+  watch: {
+    /** colorRaw -> color */
+    colorRaw: {
+      deep: true,
+      handler() {
+        if (this.colorRaw) {
+          this.color = this.colorRaw;
+        }
+      },
+    },
+    /** inputColorRaw -> inputColor */
+    inputColorRaw: {
+      deep: true,
+      handler() {
+        if (this.inputColorRaw) {
+          this.inputColor = this.inputColorRaw;
+        }
+      },
+    },
+    /** color -> value, valueRaw, modelValue.value */
+    color: {
+      deep: true,
+      handler() {
+        if (this.tweaked && this.color) {
+          // If tweaked, color is the source of truth
+          this.value = this.valueRaw = this.color + '';
+        }
+      },
+    },
+    /** computedValue -> modelValue */
+    computedValue: {
+      deep: true,
+      immediate: true,
+      handler() {
+        this.mutateModelValue(() => {
+          Object.assign(this.modelValue, this.computedValue);
+          this.$emit('update:modelValue', this.modelValue);
+        });
+      },
+    },
+  },
+  template,
+  components: { InfoTip, ColorSlider, ColorPopup },
+  compilerOptions: {
+    isCustomElement: tag => tag.startsWith('wa-'),
+  },
+};
+
+function tryColor(value) {
+  if (!value) {
+    return null;
+  }
+
+  if (value instanceof Color) {
+    return value;
+  }
+
+  try {
+    return new Color(value);
+  } catch (e) {
+    return null;
+  }
+}

docs/docs/palettes/app/vue-components/color-popup.js

@@ -0,0 +1,82 @@
+import Color from 'https://colorjs.io/dist/color.js';
+import { stringifyColor } from '../color/util.js';
+import InfoTip from './info-tip.js';
+
+export default {
+  props: {
+    title: String,
+    token: String,
+    color: Color,
+    deletable: Boolean,
+    pinnable: Boolean,
+    pinned: Boolean,
+    placement: String,
+  },
+  data() {
+    return {};
+  },
+  emits: ['delete', 'pin'],
+  mounted() {
+    let popup = this.$refs.popup;
+
+    if (popup) {
+      // Find trigger
+      let trigger = popup.previousElementSibling;
+      if (trigger) {
+        trigger.slot ||= 'trigger';
+      }
+    }
+  },
+  computed: {
+    stringifiedColor() {
+      return stringifyColor(this.color);
+    },
+  },
+  template: `
+  <wa-dropdown class="color-popup" :placement>
+    <slot></slot>
+    <component :is="title ? 'fieldset' : 'div'" class="popup" ref="popup">
+      <component :is="title ? 'legend' : 'div'"  class="wa-heading-s" v-if="title || token || deletable || pinnable">
+        <span v-if="title">{{ title }}</span>
+        <wa-copy-button v-if="title && token" :value="token" :copy-label="token"></wa-copy-button>
+
+        <info-tip v-if="deletable && pinned">
+          <wa-button size="small" variant="danger" appearance="plain" class="delete-button align-end" @click="$emit('delete')">
+            <wa-icon name="trash" variant="regular"></wa-icon>
+          </wa-button>
+          <template #content>
+            Delete from my colors
+          </template>
+        </info-tip>
+        <info-tip v-if="pinnable && !pinned">
+          <wa-button appearance="outlined" size="small" class="pin-color align-end" @click="$emit('pin')">
+            <wa-icon name="thumbtack" variant="regular" slot="prefix"></wa-icon>
+            Pin
+          </wa-button>
+          <template #content>
+            Prevent this color from changing as others are edited
+          </template>
+        </info-tip>
+      </component>
+
+      <slot name="content"></slot>
+
+      <div class="wa-stack wa-gap-xs">
+        <div class="copyable-code" v-if="token && !title">
+          <code>{{ token }}</code>
+          <wa-copy-button :value="token"></wa-copy-button>
+        </div>
+        <div class="copyable-code" v-if="color">
+          <code>{{ stringifiedColor }}</code>
+          <wa-copy-button :value="stringifiedColor"></wa-copy-button>
+        </div>
+      </div>
+    </component>
+  </wa-dropdown>`,
+  compilerOptions: {
+    isCustomElement: tag => tag.startsWith('wa-'),
+  },
+  components: {
+    InfoTip,
+  },
+};

docs/docs/palettes/app/vue-components/color-select.js

@@ -0,0 +1,73 @@
+import { capitalize } from '/assets/scripts/tweak/util.js';
+
+export default {
+  props: {
+    modelValue: String,
+    label: String,
+    getLabel: {
+      type: Function,
+      default: capitalize,
+    },
+    getContent: {
+      type: Function,
+    },
+    getColor: {
+      type: Function,
+      default: value => `var(--wa-color-${value})`,
+    },
+    values: {
+      type: Array,
+      default: [],
+    },
+    groups: {
+      type: Object,
+    },
+  },
+  emits: ['update:modelValue', 'input'],
+  data() {
+    return {};
+  },
+  computed: {
+    computedGroups() {
+      let ret = {};
+
+      if (this.values?.length) {
+        ret[''] = this.values;
+      }
+
+      if (this.groups) {
+        for (let group in this.groups) {
+          if (this.groups[group]?.length) {
+            ret[group] = this.groups[group];
+          }
+        }
+      }
+
+      return ret;
+    },
+
+    firstGroup() {
+      return Object.keys(this.computedGroups)[0];
+    },
+  },
+
+  methods: {
+    capitalize,
+    handleInput(e) {
+      this.$emit('input', this.modelValue);
+    },
+  },
+  template: `
+    <wa-select class="color-select" name="brand" :label="label" :value="modelValue"  @input="$emit('update:modelValue', $event.target.value)"
+    :style="{'--color': getColor(modelValue)}">
+      <template v-for="values, group in computedGroups">
+        <template v-if="group">
+          <wa-divider v-if="group !== firstGroup"></wa-divider>
+          <small>{{ group }}</small>
+        </template>
+        <wa-option v-if="values?.length" v-for="value of values" :label="getLabel(value)" :value="value" :style="{'--color': getColor(value)}" v-html="getContent?.(value) ?? getLabel(value)"></wa-option>
+      </template>
+      <slot></slot>
+    </wa-select>
+  `,
+};

docs/docs/palettes/app/vue-components/color-slider.js

@@ -0,0 +1,343 @@
+const template = `
+<div class="color-slider" :style="{
+  '--color': computedColor, '--color-1': colorMin, '--color-2': colorMax,
+  '--default-value-progress': defaultProgress,
+  }" :data-component="coord || null">
+  <wa-slider ref="slider" :min="computedMin" :max="computedMax" :step="step" :value="value"
+    @input="handleInput($event.target.value);" @change="inputEnd($event.target.value)">
+    <div slot="label">
+      {{ label }}
+      <wa-icon-button v-if="value !== computedDefaultValue" @click="reset" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
+      <info-tip>
+        <div class="tick"></div>
+        <template #content>{{ computedLabelDefault }}</template>
+      </info-tip>
+    </div>
+  </wa-slider>
+  <div class="label-min">{{ labelMin }}</div>
+  <div class="label-max">{{ labelMax }}</div>
+</div>
+`;
+
+import Color from 'https://colorjs.io/dist/color.js';
+import InfoTip from './info-tip.js';
+import { capitalize, promise, roundTo } from '/assets/scripts/tweak/util.js';
+
+export default {
+  props: {
+    coord: {
+      type: String,
+      required: true,
+      validator(value) {
+        return ['l', 'c', 'h'].includes(value);
+      },
+    },
+    color: Color,
+    defaultColor: Color,
+
+    defaultValue: Number,
+    defaultValueRelative: Number,
+
+    /** Used for relative types. Defaults to defaultValue if not provided. */
+    baseValue: Number,
+
+    /** Used for formatting only. Only specify if different from base value. */
+    formatBaseValue: {
+      type: Number,
+      default: undefined,
+    },
+
+    modelValue: {
+      type: Number,
+    },
+    min: Number,
+    max: Number,
+    minRelative: Number,
+    maxRelative: Number,
+    step: {
+      type: Number,
+      default: 1,
+    },
+
+    type: {
+      type: String,
+      default: 'raw',
+    },
+    formatType: {
+      type: String,
+    },
+
+    label: String,
+    labelMin: String,
+    labelMax: String,
+    labelDefault: String,
+  },
+  emits: ['update:modelValue', 'update:color', 'input'],
+  data() {
+    return {
+      mounted: promise(),
+      initialColor: this.color,
+      value: undefined,
+      tweaking: false,
+    };
+  },
+  created() {
+    if (!this.color && !this.defaultColor) {
+      console.warn(
+        `[${this.label}]`,
+        '<color-slider> requires at least one of the following props: color, defaultColor',
+      );
+    }
+
+    if (this.modelValue !== undefined) {
+      this.value = this.getAbsoluteValue(this.modelValue);
+    } else if (this.color) {
+      this.value = this.colorCoords[this.coordIndex];
+    }
+  },
+  mounted() {
+    if (this.$refs.slider) {
+      this.$refs.slider.tooltipFormatter = value => this.formatValue(value);
+      this.$refs.slider.colorSliderData = this; // for debugging
+    }
+
+    this.mounted.resolve();
+  },
+  beforeUnmount() {
+    delete this.$refs.slider?.colorSliderData;
+  },
+  computed: {
+    computedMin() {
+      if (this.minRelative !== undefined) {
+        return getAbsoluteValue(this.minRelative);
+      }
+
+      return this.min;
+    },
+
+    computedMax() {
+      if (this.maxRelative !== undefined) {
+        return this.getAbsoluteValue(this.maxRelative);
+      }
+
+      return this.max;
+    },
+
+    computedColor() {
+      return this.getColorAt(this.value);
+    },
+
+    computedColorCoords() {
+      return this.computedColor.oklch.slice();
+    },
+
+    colorCoords() {
+      let color = this.color ?? this.computedColor;
+      return color?.oklch.slice();
+    },
+
+    computedColorString() {
+      return `oklch(${this.computedColorCoords.join(' ')})`;
+    },
+
+    colorString() {
+      return `oklch(${this.colorCoords.join(' ')})`;
+    },
+
+    defaultCoords() {
+      if (this.defaultColor) {
+        return this.defaultColor.oklch.slice();
+      }
+
+      let ret = this.color.oklch.slice();
+
+      if (this.defaultValue !== undefined) {
+        ret[this.coordIndex] = this.defaultValue;
+      }
+
+      return ret;
+    },
+
+    coordIndex() {
+      return ['l', 'c', 'h'].indexOf(this.coord);
+    },
+
+    colorMin() {
+      return this.getColorAt(this.computedMin);
+    },
+
+    colorMax() {
+      return this.getColorAt(this.computedMax);
+    },
+
+    isRelative() {
+      return this.type && this.type !== 'raw';
+    },
+
+    computedBaseValue() {
+      if (!this.isRelative) {
+        return;
+      }
+
+      if (this.baseValue !== undefined) {
+        return this.baseValue;
+      }
+
+      return this.computedDefaultValue;
+    },
+
+    computedDefaultValue() {
+      if (this.defaultValue !== undefined) {
+        return this.defaultValue;
+      }
+
+      if (this.defaultValueRelative !== undefined) {
+        return this.getAbsoluteValue(this.defaultValueRelative);
+      }
+
+      if (this.baseValue !== undefined) {
+        return this.baseValue;
+      }
+
+      return this.defaultCoords[this.coordIndex];
+    },
+
+    computedDefaultColor() {
+      return this.defaultColor ?? this.getColorAt(this.computedDefaultValue);
+    },
+
+    computedLabelDefault() {
+      let labelDefault = this.labelDefault || 'Default value';
+      let formattedDefaultValue = this.formatValue(this.computedDefaultValue);
+      return `${labelDefault} (${formattedDefaultValue})`;
+    },
+
+    defaultProgress() {
+      return (this.computedDefaultValue - this.computedMin) / (this.computedMax - this.computedMin);
+    },
+
+    relativeValue() {
+      this.computedBaseValue;
+      return this.getRelativeValue(this.value);
+    },
+  },
+  methods: {
+    capitalize,
+
+    getAbsoluteValue(relativeValue) {
+      return getAbsoluteValue({
+        type: this.type,
+        relativeValue,
+        baseValue: this.baseValue ?? this.computedBaseValue,
+      });
+    },
+
+    getRelativeValue(absoluteValue) {
+      return getRelativeValue({
+        type: this.type,
+        absoluteValue,
+        baseValue: this.baseValue ?? this.computedBaseValue,
+      });
+    },
+
+    formatValue(value = this.value) {
+      let formatType = this.formatType ?? this.type;
+      let style = formatType === 'scale' ? 'percent' : undefined;
+
+      if (formatType && formatType !== 'raw') {
+        let baseValue = this.formatBaseValue ?? this.computedBaseValue;
+        value = getRelativeValue({ type: formatType, absoluteValue: value, baseValue });
+      }
+
+      value = roundTo(value, this.step);
+      return value.toLocaleString(undefined, { style });
+    },
+
+    getColorAt(value) {
+      let coords = this.defaultCoords.slice();
+      coords[this.coordIndex] = value;
+      return new Color('oklch', coords);
+    },
+
+    /** Called when value changes due to user interaction */
+    handleInput(value) {
+      this.value = value;
+      this.tweaking = true;
+      this.$emit('input', value);
+    },
+
+    inputEnd() {
+      this.tweaking = false;
+    },
+
+    reset() {
+      this.handleInput(this.computedDefaultValue);
+      this.inputEnd();
+    },
+  },
+  watch: {
+    computedColorString() {
+      if (this.color && this.colorString !== this.computedColorString) {
+        // Color changed, communicate to the outside world
+        this.$emit('update:color', this.computedColor);
+      }
+    },
+
+    colorString() {
+      if (this.color && this.colorString !== this.computedColorString) {
+        // Color changed in the outside world, update our internals
+        if (this.colorCoords[this.coordIndex] !== this.value) {
+          this.value = this.colorCoords[this.coordIndex];
+
+          let modelValue = this.getRelativeValue(this.value);
+          this.$emit('update:modelValue', modelValue);
+        }
+      }
+    },
+
+    relativeValue() {
+      this.$emit('update:modelValue', this.relativeValue);
+    },
+  },
+  template,
+  components: { InfoTip },
+  compilerOptions: {
+    isCustomElement: tag => tag.startsWith('wa-'),
+  },
+};
+
+function getAbsoluteValue({ type, relativeValue, baseValue }) {
+  if (baseValue === undefined) {
+    type = 'raw';
+  }
+
+  if (type === 'shift') {
+    return relativeValue + baseValue;
+  }
+
+  if (type === 'scale') {
+    return relativeValue * baseValue;
+  }
+
+  return relativeValue;
+}
+
+function getRelativeValue({ type, absoluteValue, baseValue }) {
+  if (baseValue === undefined) {
+    type = 'raw';
+  }
+
+  if (type === 'shift') {
+    return absoluteValue - baseValue;
+  }
+
+  if (type === 'scale') {
+    if (!absoluteValue) {
+      return 0;
+    }
+
+    return absoluteValue / baseValue;
+  }
+
+  return absoluteValue;
+}

docs/docs/palettes/app/vue-components/color-swatch-picker.js

@@ -0,0 +1,56 @@
+const template = `
+<wa-radio-group class="core-color" orientation="horizontal" :value="modelValue" @input="handleInput($event.target.value)">
+<template v-for="h in hues">
+	<info-tip>
+		<wa-radio-button :label="capitalize(h)" :value="h" :style="{'--color': colors[h]}"></wa-radio-button>
+		<template #content>{{ capitalize(h) }}</template>
+	</info-tip>
+</template>
+<div slot="label">{{ label }}</div>
+</wa-radio-group>
+`;
+
+import Color from 'https://colorjs.io/dist/color.js';
+import InfoTip from './info-tip.js';
+import { hues } from '/assets/scripts/tweak/data.js';
+import { capitalize, promise, roundTo } from '/assets/scripts/tweak/util.js';
+
+export default {
+  props: {
+    modelValue: String,
+    label: {
+      type: String,
+      default: 'Color',
+    },
+    colors: Object,
+  },
+  emits: ['update:modelValue', 'input'],
+  data() {
+    return {
+      defaultValue: this.modelValue,
+    };
+  },
+  created() {
+    Object.assign(this, { hues });
+  },
+  computed: {},
+  methods: {
+    capitalize,
+
+    /** Called when value changes due to user interaction */
+    handleInput(value) {
+      this.value = value;
+      this.$emit('input', value);
+      this.$emit('update:modelValue', value);
+    },
+
+    reset() {
+      this.handleInput(this.defaultValue);
+    },
+  },
+  template,
+  components: { InfoTip },
+  compilerOptions: {
+    isCustomElement: tag => tag.startsWith('wa-'),
+  },
+};

docs/docs/palettes/app/vue-components/color-swatch.js

@@ -0,0 +1,85 @@
+const template = `
+<color-popup :title :token="token" :color="modelValue"
+  :pinned :pinnable @pin="$emit('pin')" :deletable @delete="$emit('delete')">
+  <div slot="trigger" class="color swatch" :style="{ '--color': modelValue, colorScheme: level > 60 ? 'light' : 'dark' }">
+    <wa-icon class="pinned-icon" name="thumbtack" variant="regular" v-if="pinned"></wa-icon>
+    <wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
+  </div>
+  <template #content>
+    <color-slider v-if="(isEdge || pinned) && tweakBase && HUE_RANGES[hue]"
+      :color="modelValue" @update:model-value="$emit('update:modelValue', $event)" :default-value="colors[hue][tweakBase].oklch.h"
+      @input="!pinned ? $emit('pin') : null"
+      coord="h" :min="HUE_RANGES[hue].min + 1" :max="HUE_RANGES[hue].max" :step="1"
+      label="Hue shift" :label-min="moreHue[hueBefore[hue]]" :label-max="moreHue[hueAfter[hue]]"
+      :label-default="\`\${capitalize(hue)} \${tweakBase}\`"
+      ></color-slider>
+  </template>
+</color-popup>
+`;
+
+import Color from 'https://colorjs.io/dist/color.js';
+import ColorPopup from './color-popup.js';
+import ColorSlider from './color-slider.js';
+import InfoTip from './info-tip.js';
+import { HUE_RANGES, hueAfter, hueBefore, hues, moreHue } from '/assets/scripts/tweak/data.js';
+import { capitalize, clamp, promise, roundTo } from '/assets/scripts/tweak/util.js';
+
+export default {
+  props: {
+    modelValue: Color,
+    hue: {
+      type: String,
+      required: true,
+    },
+    level: {
+      type: [String, Number],
+      required: true,
+    },
+    coreLevel: {
+      type: [String, Number],
+      required: true,
+    },
+    pinned: Boolean,
+    pinnable: Boolean,
+    deletable: Boolean,
+    colors: {
+      type: Object,
+      required: true,
+    },
+    tweakBase: [String, Number],
+  },
+  emits: ['update:modelValue', 'pin', 'delete'],
+  data() {
+    return {};
+  },
+  created() {
+    // Attach non-reactive data
+    Object.assign(this, { moreHue, HUE_RANGES });
+  },
+  computed: {
+    title() {
+      return capitalize(this.hue) + ' ' + this.level;
+    },
+    hueBefore() {
+      return hueBefore[this.hue];
+    },
+    hueAfter() {
+      return hueAfter[this.hue];
+    },
+    token() {
+      return `--wa-color-${this.hue}-${this.level}`;
+    },
+    isEdge() {
+      return this.level == '95' || this.level == '05';
+    },
+    isCore() {
+      return this.level == this.coreLevel;
+    },
+  },
+  methods: { capitalize },
+  template,
+  components: { InfoTip, ColorSlider, ColorPopup },
+  compilerOptions: {
+    isCustomElement: tag => tag.startsWith('wa-'),
+  },
+};

docs/docs/palettes/app/vue-components/info-tip.js

@@ -0,0 +1,37 @@
+import Color from 'https://colorjs.io/dist/color.js';
+import { stringifyColor } from '../color/util.js';
+
+let maxUid = 0;
+
+export default {
+  props: {},
+  data() {
+    let uid = ++maxUid;
+    return { uid, id: 'info-tip-' + uid };
+  },
+  mounted() {
+    let tooltip = this.$refs.tooltip;
+    if (tooltip) {
+      // Find trigger
+      let trigger = tooltip.previousElementSibling;
+      if (trigger) {
+        if (trigger.id) {
+          // Already has id
+          this.id = trigger.id;
+        } else {
+          trigger.id = this.id;
+        }
+      }
+    }
+  },
+  computed: {},
+  template: `
+	<slot>
+  		<wa-icon-button :id="id" name="circle-question" variant="regular"></wa-icon-button>
+	</slot>
+	<wa-tooltip :for="id" ref="tooltip"><slot name="content"></slot></wa-tooltip>
+  `,
+  compilerOptions: {
+    isCustomElement: tag => tag.startsWith('wa-'),
+  },
+};

docs/docs/palettes/custom.njk

@@ -0,0 +1,71 @@
+---
+title: Custom
+isPro: true
+override:tags: [palettes, pro]
+order: 99
+description: Create your own color palette from scratch, from one or more seed colors.
+status: experimental
+---
+<link href="{{ page.url }}../app/custom.css" rel="stylesheet">
+
+<h2 v-if="step > 0" v-cloak>My Colors</h2>
+
+<p v-if="step > 0" v-cloak>
+  Just add your colors, in any order. We’ll sort them out for you, generate tints, and suggest additional colors.
+</p>
+
+<div id="seed-colors">
+  <template v-for="color, i in seedColors" :key="color.uid ?? maxSeedUid">
+    <color-input v-model="seedColors[i]"
+      :other-colors="seedColors.filter((_, j) => j !== i).map(c => c.color)"
+      :roles="seedColorRoles[i]"
+      @update:roles="roles => setColorRole(i, roles)"
+      @delete="deleteColor(i)"></color-input>
+  </template>
+  <wa-button class="add-button" appearance="outlined" @click="addColor(undefined, {editImmediately: true})">
+    <wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
+    <span v-content="step > 0 ? 'Add color' : 'New palette'">New palette</span>
+  </wa-button>
+</div>
+
+<wa-details id="suggested-colors" v-if="step > 0" v-cloak open>
+  <h3 class="wa-heading-m" slot="summary">Suggestions</h3>
+
+  <p class="wa-caption-m">
+    Generated by our fancy-schmancy algorithm to complement your colors.
+    See a color you like? Grab it before it’s gone!
+  </p>
+
+  <div class="suggestions wa-cluster wa-align-items-start wa-gap-s">
+    <template v-for="color, hue in suggestedColors">
+      <info-tip>
+        <wa-button :style="{'--background-color': color}" @click="addColor({hue})">
+          <wa-icon name="plus"></wa-icon>
+        </wa-button>
+        <template #content>{% raw %}{{ capitalize(hue) }}{% endraw %}</template>
+      </info-tip>
+    </template>
+  </div>
+</wa-details>
+
+<section id="roles" v-if="step > 0" v-cloak>
+  <h2>Roles</h2>
+
+  <div>
+    <color-select v-for="computedRole, role in computedRoles"
+    :model-value="computedRoles[role]"
+    @update:model-value="value => setRoleColor(role, value)"
+    :class="{'default': !roles[role]}"
+    :label="capitalize(role) + ':'"
+    :groups="{
+      Dynamic: !['brand', 'neutral'].includes(role) ? ['brand', 'neutral'] : undefined,
+      Colors: Object.keys(paletteScales),
+      Common: suggestedForRole[role]
+    }"
+    :get-label="capitalize"
+    :get-content="value => capitalize(value) + (seedHues[value] || computedRoles[value] || value === 'gray' ? '' : ' <wa-icon name=square-plus variant=regular></wa-icon>')"
+    :get-color="value => coreColors[computedRoles[value] ?? value]">
+      {# <wa-badge class="default-badge" v-if="!roles[role]" slot="suffix" variant="neutral" appearance="outlined">Default</wa-badge> #}
+    </color-select>
+  </div>
+</section>

docs/docs/palettes/tweak.css

@@ -1,205 +0,0 @@
-:root {
-  --fa-sliders-simple: '\f1de';
-}
-
-.core-column {
-  position: relative;
-
-  > wa-dropdown {
-    min-width: 100%;
-  }
-}
-
-wa-dropdown > .color.swatch {
-  cursor: pointer;
-}
-
-.decorated-slider {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  margin-block-end: var(--wa-space-xl);
-
-  wa-slider {
-    grid-column: 1 / -1;
-    --track-height: 1em;
-    --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 var(--color-interpolation-space, oklab), var(--color-1), var(--color-2));
-    }
-  }
-
-  [slot='label'] {
-    min-height: 1.1lh;
-  }
-
-  .clear-button {
-    vertical-align: middle;
-    font-size: var(--wa-font-size-xs);
-
-    &:not(.tweaked *) {
-      display: none;
-    }
-  }
-
-  .label-min,
-  .label-max {
-    font-size: var(--wa-font-size-xs);
-  }
-
-  .label-min {
-    grid-column: 1;
-    margin-inline-start: 0.15em;
-  }
-
-  .label-max {
-    grid-column: 3;
-    margin-inline-end: 0.1em;
-  }
-}
-
-.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);
-}
-
-.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 {
-  background: var(--wa-color-surface-default);
-  border: 1px solid var(--wa-color-surface-border);
-  padding: var(--wa-space-xl);
-  border-radius: var(--wa-border-radius-m);
-
-  code {
-    white-space: nowrap;
-  }
-}
-
-.color-scale {
-  th {
-    white-space: nowrap;
-  }
-
-  td:not([data-hue='gray'] *) {
-    --tweak-c: calc(c * var(--chroma-scale, 1));
-    --tweak-h: calc(h + var(--hue-shift, 0));
-
-    --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-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);
-
-      /* outline: 1px dashed red; */
-    }
-  }
-
-  .color.swatch {
-    --color-2: var(--color-tweaked);
-    --color-2-height: 100%;
-
-    &:is(.tweaking *) {
-      --color-2-height: 70%;
-    }
-
-    &:is(.tweaking-chroma *) {
-      --color: var(--color-tweaked-no-chroma-scale);
-    }
-
-    &:is(.tweaking-hue *) {
-      --color: var(--color-tweaked-no-hue-shift);
-    }
-
-    &:is(.tweaking-gray-chroma *) {
-      --color: var(--color-tweaked-no-gray-chroma);
-    }
-  }
-
-  .tweak-icon {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: var(--wa-space-s);
-    opacity: var(--tweak-icon-opacity, 0%);
-  }
-
-  .core-column:hover {
-    --tweak-icon-opacity: 40%;
-  }
-
-  &.tweaked .core-column {
-    --tweak-icon-opacity: 80%;
-  }
-}
-
-.tweaked-callout {
-  padding: var(--wa-space-xs);
-  padding-inline-start: var(--wa-space-m);
-  align-items: center;
-
-  &:not(.tweaked-any *) {
-    visibility: hidden;
-  }
-
-  &::part(message) {
-    display: flex;
-    align-items: center;
-    gap: var(--wa-space-xs);
-  }
-
-  wa-button:first-of-type {
-    margin-inline-start: auto;
-  }
-}
-
-/* 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

@@ -1,502 +0,0 @@
-// TODO move these to local imports
-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 { 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)));
-
-// // Detect https://bugs.webkit.org/show_bug.cgi?id=287637
-// const SAFARI_OKLCH_BUG = (() => {
-//   let dummy = document.createElement('div');
-//   document.body.appendChild(dummy);
-//   dummy.style.color = 'oklch(from #d5e0e6 l c h)';
-//   let computedColor = getComputedStyle(dummy).color;
-//   dummy.remove();
-//   return computedColor.endsWith(' 0)');
-// })();
-
-let allPalettes = await fetch('/docs/palettes/data.json').then(r => r.json());
-globalThis.allPalettes = allPalettes;
-
-for (let palette in allPalettes) {
-  for (let hue in allPalettes[palette].colors) {
-    let scale = allPalettes[palette].colors[hue];
-    for (let tint of tints) {
-      let color = scale[tint];
-
-      if (Array.isArray(color)) {
-        scale[tint] = new Color('oklch', color);
-      }
-    }
-  }
-}
-
-const percentFormatter = value => value.toLocaleString(undefined, { style: 'percent' });
-
-let paletteAppSpec = {
-  mixins: [savedMixin],
-
-  data() {
-    let appRoot = document.querySelector('#palette-app');
-    let id = appRoot.dataset.paletteId;
-    let palette = allPalettes[id];
-
-    return {
-      id,
-      originalTitle: palette.title,
-      originalColors: palette.colors,
-      hueRanges,
-      hueShifts: Object.fromEntries(hues.map(hue => [hue, 0])),
-      chromaScale: 1,
-      grayChroma: undefined,
-      grayColor: undefined,
-      tweaking: {},
-      type: 'palette',
-      collection: 'palettes',
-    };
-  },
-
-  created() {
-    // Non-reactive variables to expose
-    Object.assign(this, { moreHue });
-
-    this.grayChroma = this.originalGrayChroma;
-    this.grayColor = this.originalGrayColor;
-
-    if (location.search) {
-      // 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'));
-        }
-      }
-
-      for (let param of ['chroma-scale', 'gray-color', 'gray-chroma']) {
-        if (this.permalink.has(param)) {
-          let value = this.permalink.get(param);
-
-          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: {
-    /** Default palette title for saving */
-    defaultTitle() {
-      return this.originalTitle + ' (tweaked)';
-    },
-
-    tweaks() {
-      return {
-        hueShifts: this.hueShifts,
-        chromaScale: this.chromaScale,
-        grayColor: this.grayColor,
-        grayChroma: this.grayChroma,
-      };
-    },
-
-    isTweaked() {
-      return Object.values(this.hueShifts).some(Boolean);
-    },
-
-    code() {
-      let ret = {};
-      for (let language of ['html', 'css']) {
-        let code = getPaletteCode(this.id, this.colors, this.tweaked, { language, cdnUrl });
-        ret[language] = {
-          raw: code,
-          highlighted: Prism.highlight(code, Prism.languages[language], language),
-        };
-      }
-
-      return ret;
-    },
-
-    colors() {
-      return applyTweaks.call(this, this.originalColors, this.tweaks, this.tweaked);
-    },
-
-    colorsMinusChromaScale() {
-      let tweaked = { ...this.tweaked, chromaScale: false };
-      return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
-    },
-
-    colorsMinusHueShifts() {
-      let tweaked = { ...this.tweaked, hue: false };
-      return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
-    },
-
-    colorsMinusGrayChroma() {
-      let tweaked = { ...this.tweaked, grayChroma: false };
-      return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
-    },
-
-    tweaked() {
-      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');
-      }
-
-      for (let hue in this.hueShifts) {
-        let shift = this.hueShifts[hue];
-
-        if (!shift) {
-          continue;
-        }
-
-        let relHue = shift < 0 ? arrayPrevious(hues, hue) : arrayNext(hues, hue);
-        let hueTweak = moreHue[relHue] ?? relHue + 'er';
-
-        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) {
-        let maxChromaTintRaw = this.originalColors[hue].maxChromaTintRaw;
-        ret[hue] = this.originalColors[hue][maxChromaTintRaw];
-      }
-      return ret;
-    },
-
-    coreColors() {
-      let ret = {};
-      for (let hue in this.colors) {
-        let maxChromaTintRaw = this.colors[hue].maxChromaTintRaw;
-        ret[hue] = this.colors[hue][maxChromaTintRaw];
-      }
-
-      return ret;
-    },
-
-    originalGrayColor() {
-      let grayHue = this.originalCoreColors.gray.get('h');
-      let minDistance = Infinity;
-      let closestHue = null;
-
-      for (let name in this.originalCoreColors) {
-        if (name === 'gray') {
-          continue;
-        }
-
-        let hue = this.originalCoreColors[name].get('h');
-        let distance = Math.abs(subtractAngles(hue, grayHue));
-        if (distance < minDistance) {
-          minDistance = distance;
-          closestHue = name;
-        }
-      }
-
-      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;
-    },
-  },
-
-  watch: {
-    hueShifts: {
-      deep: true,
-      handler() {
-        for (let hue in this.hueShifts) {
-          this.permalink.set(hue + '-shift', this.hueShifts[hue], 0);
-        }
-      },
-    },
-
-    chromaScale() {
-      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) {
-        await nextTick(); // must run after individual watchers
-
-        // Update page URL
-        this.permalink.updateLocation();
-
-        this.unsavedChanges = true;
-      },
-    },
-  },
-
-  methods: {
-    /**
-     * 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;
-      }
-
-      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: {
-    content,
-  },
-
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};
-
-function init() {
-  let paletteAppContainer = document.querySelector('#palette-app');
-  globalThis.paletteApp?.unmount?.();
-
-  if (!paletteAppContainer) {
-    return;
-  }
-
-  globalThis.paletteApp = createApp(paletteAppSpec).mount(paletteAppContainer);
-}
-
-init();
-addEventListener('turbo:render', init);
-
-export function getPaletteCode(paletteId, colors, tweaked, options) {
-  let imports = [];
-
-  if (paletteId) {
-    imports.push(urls.palette(paletteId));
-  }
-
-  let css = '';
-  let declarations = [];
-
-  if (tweaked) {
-    for (let hue in colors) {
-      if (hue === 'orange') {
-        continue;
-      } else if (hue === 'gray') {
-        if (!tweaked.grayChroma && !tweaked.grayColor) {
-          continue;
-        }
-      } 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) {
-      css += cssRule(selectors.palette(paletteId), declarations);
-    }
-  }
-
-  let ret = imports.map(url => cssImport(url, options)).join('\n');
-
-  if (css) {
-    ret += `\n\n${cssLiteral(css, options)}`;
-  }
-
-  return ret;
-}
-
-function arrayNext(array, element) {
-  let index = array.indexOf(element);
-  return array[(index + 1) % array.length];
-}
-
-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/app/action-panel.md

@@ -1,66 +0,0 @@
----
-title: Action Panel
-description: 'Help users complete tasks efficiently with quick access to key actions.'
-icon: action-panel
----
-
-## Simple
-
-```html {.example}
-<wa-card style="max-width: 60ch; margin: auto">
-  <div class="wa-stack wa-align-items-start">
-    <h3 class="wa-heading-m">New Dashboard</h3>
-    <p>Arrange your data into a single view to monitor trends and track performance.</p>
-    <wa-button variant="brand" size="small">Build Dashboard</wa-button>
-  </div>
-</wa-card>
-```
-
-## With Flanked Button
-
-```html {.example}
-<wa-card style="max-width: 60ch; margin: auto">
-  <div class="wa-flank:end">
-    <div class="wa-stack wa-gap-xs">
-      <h3 class="wa-heading-m">Query with SQL Runner</h3>
-      <p>Access your database to run ad hoc queries.</p>
-    </div>
-    <wa-button variant="brand">New Query</wa-button>
-  </div>
-</wa-card>
-```
-
-## With Switch
-
-```html {.example}
-<wa-card style="max-width: 70ch; margin: auto">
-  <div class="wa-stack">
-    <div class="wa-flank:end">
-      <h3 id="auto-renew-label" class="wa-heading-m">Auto-renew</h3>
-      <wa-switch size="large" aria-labelledby="auto-renew-label"></wa-switch>
-    </div>
-    <p class="wa-body-s">Automatically renew your subscription using your preferred payment method. We'll send you a reminder 30 days before we draft your account.</p>
-  </div>
-</wa-card>
-```
-
-## Avatar and Quick actions
-
-```html{.example}
-<wa-card style="margin: 0 auto; max-width: 45ch;">
-  <div class="wa-flank">
-    <wa-avatar image="https://images.unsplash.com/photo-1532202802379-df93d543bac3?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile-image"></wa-avatar>
-    <div class="wa-split">
-      <div class="wa-stack wa-gap-0">
-        <span class="wa-heading-s">Super Dog</span>
-        <span class="wa-caption-m">Online</span>
-      </div>
-      <div class="wa-cluster" style="font-size: var(--wa-font-size-l);">
-        <wa-icon-button name="microphone" label="audio-input"></wa-icon-button>
-        <wa-icon-button name="headphones" label="audio-output"></wa-icon-button>
-        <wa-icon-button name="gear" label="settings"></wa-icon-button>
-      </div>
-    </div>
-  </div>
-</wa-card>
-```

docs/docs/patterns/app/activity-log.md

@@ -1,206 +0,0 @@
----
-title: Activity Log
-description: 'Track and organize recent user actions or events.'
----
-
-## Simple
-
-```html {.example}
-<div class="wa-stack" style="max-width: 60ch; margin: auto">
-  <article class="wa-flank:end wa-align-items-baseline" style="--flank-size: 10ch">
-    <div class="wa-grid">
-      <div class="wa-cluster">
-        <wa-icon name="french-fries" fixed-width></wa-icon>
-        <span>Fast food</span>
-      </div>
-      <wa-relative-time sync></wa-relative-time>
-    </div>
-    <wa-tag variant="danger">- $5.00</wa-tag>
-  </article>
-  <wa-divider></wa-divider>
-  <article class="wa-flank:end wa-align-items-baseline" style="--flank-size: 10ch">
-    <div class="wa-grid">
-      <div class="wa-cluster">
-        <wa-icon name="piggy-bank" fixed-width></wa-icon>
-        <span>Refund</span>
-      </div>
-      <wa-relative-time date="2025-03-26T09:00:00-04:00"></wa-relative-time>
-    </div>
-    <wa-tag variant="success">+ $48.99</wa-tag>
-  </article>
-  <wa-divider></wa-divider>
-  <article class="wa-flank:end wa-align-items-baseline" style="--flank-size: 10ch">
-    <div class="wa-grid">
-      <div class="wa-cluster">
-        <wa-icon name="carrot" fixed-width></wa-icon>
-        <span>Groceries</span>
-      </div>
-      <wa-relative-time date="2025-03-24T09:00:00-04:00"></wa-relative-time>
-    </div>
-    <wa-tag variant="danger">- $115.37</wa-tag>
-  </article>
-  <wa-divider></wa-divider>
-  <article class="wa-flank:end wa-align-items-baseline" style="--flank-size: 10ch">
-    <div class="wa-grid">
-      <div class="wa-cluster">
-        <wa-icon name="shirt" fixed-width></wa-icon>
-        <span>Clothing</span>
-      </div>
-      <wa-relative-time date="2025-03-15T09:00:00-04:00"></wa-relative-time>
-    </div>
-    <wa-tag variant="danger">- $220.99</wa-tag>
-  </article>
-</div>
-```
-
-## Timeline with Icons
-
-```html {.example}
-<div class="wa-stack wa-gap-3xs" style="max-width: 60ch; margin: auto">
-  <article class="wa-flank" style="flex-wrap: nowrap">
-    <wa-avatar style="--size: 2rem">
-      <wa-icon slot="icon" name="acorn"></wa-icon>
-    </wa-avatar>
-    <div class="wa-flank:end wa-gap-xs">
-      <span>Buried by <strong>squirrel</strong></span>
-      <wa-format-date date="2025-04-01" month="short" day="numeric"></wa-format-date>
-    </div>
-  </article>
-  <wa-divider vertical style="height: 1em; margin-left: 1rem"></wa-divider>
-  <article class="wa-flank" style="flex-wrap: nowrap">
-    <wa-avatar style="--size: 2rem">
-      <wa-icon slot="icon" name="seedling"></wa-icon>
-    </wa-avatar>
-    <div class="wa-flank:end wa-gap-xs">
-      <span>Germinated in <strong>nutrient-rich soil</strong></span>
-      <wa-format-date date="2025-05-29" month="short" day="numeric"></wa-format-date>
-    </div>
-  </article>
-  <wa-divider vertical style="height: 1em; margin-left: 1rem"></wa-divider>
-  <article class="wa-flank" style="flex-wrap: nowrap">
-    <wa-avatar style="--size: 2rem">
-      <wa-icon slot="icon" name="tree-deciduous"></wa-icon>
-    </wa-avatar>
-    <div class="wa-flank:end wa-gap-xs">
-      <span>Matured by <strong>water</strong> and <strong>sunlight</strong></span>
-      <wa-format-date date="2025-09-15" month="short" day="numeric"></wa-format-date>
-    </div>
-  </article>
-  <wa-divider vertical style="height: 1em; margin-left: 1rem"></wa-divider>
-  <article class="wa-flank" style="flex-wrap: nowrap">
-    <wa-avatar style="--size: 2rem">
-      <wa-icon slot="icon" name="crate-apple"></wa-icon>
-    </wa-avatar>
-    <div class="wa-flank:end wa-gap-xs">
-      <span>Fruit harvested by <strong>you</strong></span>
-      <wa-format-date date="2025-10-18" month="short" day="numeric"></wa-format-date>
-    </div>
-  </article>
-</div>
-```
-
-## With Expandable Details
-
-```html {.example}
-<wa-card style="max-width: 70ch; margin: auto">
-  <h3 class="wa-heading-l">Monthly Activity</h3>
-  <div class="wa-stack">
-    <wa-details>
-      <span class="wa-heading-m" slot="summary">
-        February
-      </span>
-      <div class="wa-stack">
-        <article class="wa-flank">
-          <wa-icon style="font-size: var(--wa-font-size-xl)" name="envelope" fixed-width></wa-icon>
-          <div class="wa-split">
-            <div class="wa-stack wa-gap-0">
-              <span class="wa-heading-s">Email blasts</span>
-              <div class="wa-cluster wa-gap-2xs">
-                <a href="#">Nick Burkhart</a><span>sent to</span><a href="#">likely customers</a>
-              </div>
-            </div>
-            <wa-format-date date="2025-02-28" month="short" day="numeric" class="wa-caption-m"></wa-format-date>
-          </div>
-        </article>
-        <wa-divider></wa-divider>
-        <article class="wa-flank">
-          <wa-icon style="font-size: var(--wa-font-size-xl)" name="phone" fixed-width></wa-icon>
-          <div class="wa-split">
-            <div class="wa-stack wa-gap-0">
-              <span class="wa-heading-s">Spoke with the Pope</span>
-              <div class="wa-cluster wa-gap-2xs">
-                <a href="#">Artur Fleck</a><span>for 1 hour</span>
-              </div>
-            </div>
-            <wa-format-date date="2025-02-23" month="short" day="numeric" class="wa-caption-m"></wa-format-date>
-          </div>
-        </article>
-      </div>
-    </wa-details>
-    <wa-details>
-      <span class="wa-heading-m" slot="summary">
-        March
-      </span>
-      <div class="wa-stack">
-        <article class="wa-flank">
-          <wa-icon style="font-size: var(--wa-font-size-xl)" name="video" fixed-width></wa-icon>
-          <div class="wa-split">
-            <div class="wa-stack wa-gap-0">
-              <span class="wa-heading-s">Zoom Call with Northeast office</span>
-              <div class="wa-cluster wa-gap-2xs">
-                <a href="#">Axel Foley</a><span>for 47 minutes</span>
-              </div>
-            </div>
-            <wa-format-date date="2025-03-15" month="short" day="numeric" class="wa-caption-m"></wa-format-date>
-          </div>
-        </article>
-        <wa-divider></wa-divider>
-        <article class="wa-flank">
-          <wa-icon style="font-size: var(--wa-font-size-xl)" name="calendar" fixed-width></wa-icon>
-          <div class="wa-split">
-            <div class="wa-stack wa-gap-0">
-              <span class="wa-heading-s">Scheduled birthday party</span>
-              <div class="wa-cluster wa-gap-2xs">
-                <a href="#">John Blaze</a><span>in</span><a href="#">Social Events</a>
-              </div>
-            </div>
-            <wa-format-date date="2025-03-03" month="short" day="numeric" class="wa-caption-m"></wa-format-date>
-          </div>
-        </article>
-      </div>
-    </wa-details>
-    <wa-details>
-      <span class="wa-heading-m" slot="summary">
-        April
-      </span>
-      <div class="wa-stack">
-        <article class="wa-flank">
-          <wa-icon style="font-size: var(--wa-font-size-xl)" family="brands" name="intercom" fixed-width></wa-icon>
-          <div class="wa-split">
-            <div class="wa-stack wa-gap-0">
-              <span class="wa-heading-s">Got new lead</span>
-              <div class="wa-cluster wa-gap-2xs">
-                <a href="#">Jack Carter</a><span>on Intercom switchboard</span>
-              </div>
-            </div>
-            <wa-format-date date="2025-04-18" month="short" day="numeric" class="wa-caption-m"></wa-format-date>
-          </div>
-        </article>
-        <wa-divider></wa-divider>
-        <article class="wa-flank">
-          <wa-icon style="font-size: var(--wa-font-size-xl)" name="list-check" fixed-width></wa-icon>
-          <div class="wa-split">
-            <div class="wa-stack wa-gap-0">
-              <span class="wa-heading-s">Completed Todo</span>
-              <div class="wa-cluster wa-gap-2xs">
-                <a href="#">Huey Freeman</a><span>marked complete on</span><a href="#">Daily Tasks</a>
-              </div>
-            </div>
-            <wa-format-date date="2025-04-02" month="short" day="numeric" class="wa-caption-m"></wa-format-date>
-          </div>
-        </article>
-      </div>
-    </wa-details>
-  </div>
-</wa-card>
-```

docs/docs/patterns/app/app.json

@@ -1,3 +0,0 @@
-{
-  "tags": ["app"]
-}

docs/docs/patterns/app/comments.md

@@ -1,164 +0,0 @@
----
-title: Comments
-description: 'Enable users to engage in discussions, provide feedback, or record their thoughts.'
----
-
-## Card with Header & Footer
-
-```html {.example}
-<form style="max-width: 60ch; margin: auto">
-  <wa-card>
-    <div slot="header" id="comment-area-label">
-      <span class="wa-heading-s">Leave a Comment</span>
-    </div>
-    <wa-textarea aria-labelledby="comment-area-label"></wa-textarea>
-    <div slot="footer" class="wa-cluster" style="justify-content: flex-end">
-      <wa-button appearance="filled">
-        <wa-icon slot="prefix" name="paperclip" variant="solid"></wa-icon>
-        Attach a file
-      </wa-button>
-      <wa-button variant="brand">Comment</wa-button>
-    </div>
-  </wa-card>
-</form>
-```
-
-## Card with Thread
-
-```html {.example}
-<wa-card style="max-width: 60ch; margin: auto">
-  <div class="wa-stack">
-    <h3 class="wa-heading-m">Comments</h3>
-    <wa-textarea aria-label="Comment"></wa-textarea>
-    <wa-button variant="brand">Add Comment</wa-button>
-    <wa-divider></wa-divider>
-    <ul class="wa-stack">
-      <li class="wa-stack wa-gap-2xs">
-        <div class="wa-flank">
-          <wa-avatar initials="RF" label="User avatar"></wa-avatar>
-          <div class="wa-cluster">
-            <strong>Robert Fox</strong>
-            <span class="wa-caption-m">commented <wa-relative-time date="2025-03-31T09:17:00-04:00"></wa-relative-time></span>
-          </div>
-        </div>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec. Suspendisse potenti. Pellentesque lobortis pulvinar nulla non tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
-      </li>
-      <div class="wa-flank wa-gap-xl">
-        <wa-divider vertical style="height: auto; align-self: stretch"></wa-divider>
-        <ul class="wa-stack">
-          <li class="wa-stack wa-gap-2xs">
-            <div class="wa-flank">
-              <wa-avatar initials="VF" label="User avatar"></wa-avatar>
-              <div class="wa-cluster">
-                <strong>Virginia Woolf</strong>
-                <span class="wa-caption-m">commented <wa-relative-time date="2025-03-31T12:32:00-04:00"></wa-relative-time></span>
-              </div>
-            </div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec.</p>
-          </li>
-          <li class="wa-stack wa-gap-2xs">
-            <div class="wa-flank">
-              <wa-avatar initials="CV" label="User avatar"></wa-avatar>
-              <div class="wa-cluster">
-                <strong>Clarissa Vaughan</strong>
-                <span class="wa-caption-m">commented <wa-relative-time></wa-relative-time></span>
-              </div>
-            </div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec.</p>
-          </li>
-          <li class="wa-cluster">
-            <wa-icon name="reply"></wa-icon>
-            <a href="">Leave a reply</a>
-          </li>
-        </ul>
-      </div>
-    </ul>
-  </div>
-</wa-card>
-```
-
-## With Avatar & Additional Actions
-
-```html {.example}
-<div class="wa-align-items-start wa-flank">
-  <wa-avatar image="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="User avatar"></wa-avatar>
-  <div class="wa-stack wa-gap-s">
-    <wa-textarea placeholder="Add to the conversation..." aria-label="Add comment"></wa-textarea>
-    <div class="wa-split">
-      <div class="wa-cluster wa-gap-s">
-        <wa-icon-button name="paperclip" label="Attach File" id="attach-button"></wa-icon-button>
-        <wa-tooltip for="attach-button">Attach File</wa-tooltip>
-        <wa-icon-button name="face-smile" label="Add Sticker" id="sticker-button"></wa-icon-button>
-        <wa-tooltip for="sticker-button">Add Sticker</wa-tooltip>
-      </div>
-      <wa-button variant="brand">Comment</wa-button>  
-    </div>
-  </div>
-</div>
-```
-
-## Rich Card with Multiple Actions
-
-```html {.example}
-<wa-card with-header with-footer style="max-width: 60ch; margin: auto">
-  <div slot="header">
-    <h3 class="wa-heading-s">I watched...</h3>
-  </div>
-  <div class="wa-stack">
-    <div class="wa-flank" style="--flank-size: 3rem">
-      <div class="wa-frame:portrait wa-border-radius-s">
-        <img 
-          src="https://images.unsplash.com/photo-1607675742178-f616ae75044b?q=80&w=3435&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
-          alt="" 
-        />
-      </div>
-      <span class="wa-heading-l">Heretic</span>
-    </div>
-    <wa-divider></wa-divider>
-    <dl class="wa-split">
-      <dt>Date</dt>
-      <dd>
-        <wa-format-date date="2025-03-13T00:00:00.000-04:00" weekday="long" month="long" day="numeric" year="numeric" class="wa-caption-m"></wa-format-date>
-      </dd>
-    </dl>
-    <wa-divider></wa-divider>
-    <div class="wa-split">
-      <wa-rating label="Rating"></wa-rating>
-      <wa-checkbox>Loved it!</wa-checkbox>
-    </div>
-    <wa-divider></wa-divider>
-    <wa-textarea placeholder="Add review..." aria-label="Add review"></wa-textarea>
-  </div>
-  <div slot="footer" class="wa-grid">
-    <wa-button appearance="outlined">Cancel</wa-button>
-    <wa-button variant="brand">Save</wa-button>
-  </div>
-</wa-card>
-```
-## With Preview Pane
-```html{.example}
-<div style="max-width: 60ch; margin: 0 auto;">
-  <wa-card class="wa-border-radius-square" with-footer>
-    <h3 class="wa-heading-m">Add a comment</h3>
-    <wa-tab-group>
-      <wa-tab panel="write">Write</wa-tab>
-      <wa-tab panel="preview">Preview</wa-tab>
-      <wa-tab-panel name="write">
-        <div class="wa-stack">
-          <div class="wa-cluster wa-gap-xs"  style="justify-content: flex-end;">
-            <wa-icon-button name="link" label="add link"></wa-icon-button>
-            <wa-icon-button name="at" label="mention collaborator"></wa-icon-button>
-            <wa-icon-button name="hashtag" label="change heading"></wa-icon-button>
-          </div>
-          <wa-textarea aria-label="Add a comment"></wa-textarea>
-        </div>
-      </wa-tab-panel>
-      <wa-tab-panel name="preview">Your content will render here.</wa-tab-panel>
-    </wa-tab-group>
-    <div slot="footer" class="wa-cluster" style="justify-content: flex-end;">
-      <wa-button appearance="outlined" size="small">Post</wa-button>
-    </div>
-  </wa-card>
-
-</div>
-```

docs/docs/patterns/app/data-display.md

@@ -1,152 +0,0 @@
----
-title: Data Display
-description: 'Convey insights, metrics, and aggregate data at a glance.'
----
-
-
-## Simple 
-```html {.example}
-<wa-card>
-  <div class="wa-grid wa-gap-3xl">
-    <div class="wa-stack">
-      <div class="wa-split">
-        <span>Revenue</span>
-        <span>+4.75%</span>
-      </div>
-      <div class="wa-heading-2xl">$400,000</div>
-    </div>
-    <div class="wa-stack">
-      <div class="wa-split">
-        <span>Revenue</span>
-        <span>+4.75%</span>
-      </div>
-      <div class="wa-heading-2xl">$400,000</div>
-    </div>
-    <div class="wa-stack">
-      <div class="wa-split">
-        <span>Revenue</span>
-        <span>+4.75%</span>
-      </div>
-      <div class="wa-heading-2xl">$400,000</div>
-    </div>
-    <div class="wa-stack">
-      <div class="wa-split">
-        <span>Revenue</span>
-        <span>+4.75%</span>
-      </div>
-      <div class="wa-heading-2xl">$400,000</div>
-    </div>
-  </div>
-</wa-card>
-```
-
-## Cards with Avatars
-```html {.example}
-<div class="wa-grid" style="--min-column-size: 30ch">
-  <wa-card>
-    <div class="wa-flank wa-align-items-start">
-      <wa-avatar shape="rounded">
-         <wa-icon slot="icon" name="user-group"></wa-icon>
-      </wa-avatar>
-      <div class="wa-stack wa-gap-2xs">
-        <h3 class="wa-caption-m">Total Subscribers</h3>
-        <div class="wa-cluster wa-gap-xs">
-          <span class="wa-heading-l">81,779</span>
-          <wa-badge variant="success" appearance="filled outlined" pill>
-            <wa-icon fixed-width name="arrow-up" label="Up"></wa-icon>
-            212
-          </wa-badge>
-        </div>
-      </div>
-    </div>
-  </wa-card>
-  <wa-card>
-    <div class="wa-flank wa-align-items-start">
-      <wa-avatar shape="rounded">
-         <wa-icon slot="icon" name="envelope-open"></wa-icon>
-      </wa-avatar>
-      <div class="wa-stack wa-gap-2xs">
-        <h3 class="wa-caption-m">Open Rate</h3>
-        <div class="wa-cluster wa-gap-xs">
-          <span class="wa-heading-l">61.58%</span>
-          <wa-badge variant="success" appearance="filled outlined" pill>
-            <wa-icon fixed-width name="arrow-up" label="Up"></wa-icon>
-            4.5%
-          </wa-badge>
-        </div>
-      </div>
-    </div>
-  </wa-card>
-  <wa-card>
-    <div class="wa-flank wa-align-items-start">
-      <wa-avatar shape="rounded">
-         <wa-icon slot="icon" name="arrow-pointer"></wa-icon>
-      </wa-avatar>
-      <div class="wa-stack wa-gap-2xs">
-        <h3 class="wa-caption-m">Click Rate</h3>
-        <div class="wa-cluster wa-gap-xs">
-          <span class="wa-heading-l">25.74%</span>
-          <wa-badge variant="danger" appearance="filled outlined" pill>
-            <wa-icon fixed-width name="arrow-down" label="Down"></wa-icon>
-            2.1%
-          </wa-badge>
-        </div>
-      </div>
-    </div>
-  </wa-card>
-</div>
-```
-
-## Condensed Card
-
-```html {.example}
-<wa-card style="max-width: 50ch; margin: auto">
-  <div slot="header" class="wa-split">
-    <h3 class="wa-heading-m"><span style="color: var(--wa-color-text-quiet)">query</span> getUser</h3>
-    <wa-icon-button id="go-to-query-button" name="chevron-right" label="Go to Query"></wa-icon-button>
-    <wa-tooltip for="go-to-query-button">Go to Query</wa-tooltip>
-  </div>
-  <div class="wa-stack wa-gap-xl">
-    <div class="wa-split wa-align-items-stretch">
-      <article class="wa-stack wa-align-items-start wa-gap-xs">
-        <h4 class="wa-caption-l">Cache Hit Rate</h4>
-        <div class="wa-cluster wa-heading-2xl">
-          <wa-progress-ring value="12.3" style="--size: 1em; --track-width: 0.125em"></wa-progress-ring>
-          <span>12.3%</span>
-        </div>
-        <wa-badge appearance="filled outlined" variant="danger"><wa-icon name="arrow-down"></wa-icon> down from 19.6%</wa-badge>
-      </article>
-      <article class="wa-stack wa-gap-xs wa-align-items-end">
-        <h4 class="wa-caption-l">Max CHR</h4>
-        <span class="wa-heading-2xl">72.6%</span>
-        <wa-badge appearance="filled outlined" variant="success"><wa-icon name="sparkles"></wa-icon> CHR Impact +5.4%</wa-badge>
-      </article>
-    </div>
-    <wa-divider></wa-divider>
-    <article class="wa-stack wa-gap-xl">
-      <div class="wa-stack wa-gap-xs">
-        <h4 class="wa-caption-l">Cacheable Bandwidth</h4>
-        <div class="wa-split">
-          <span class="wa-heading-2xl">90.5 GB</span>
-          <span class="wa-caption-xl">69.9%</span>
-        </div>
-        <wa-progress-bar value="30.1" label="Cached and non-cacheable bandwidth"></wa-progress-bar>
-      </div>
-      <dl class="wa-stack wa-caption-m">
-        <div class="wa-cluster">
-          <dt>Cached</dt>
-          <dd>12.8 GB (9.8%)</dd>
-        </div>
-        <div class="wa-cluster">
-          <dt>Non-Cacheable</dt>
-          <dd>26.3 GB (20.3%)</dd>
-        </div>
-        <div class="wa-cluster">
-          <dt>Total</dt>
-          <dd>129.6 GB</dd>
-        </div>
-      </dl>
-    </article>
-  </div>
-</wa-card>
-```

docs/docs/patterns/app/description-list.md

@@ -1,252 +0,0 @@
----
-title: Description List
-description: 'Help users digest detailed information in a structured, easy-to-scan format.'
----
-
-## Left Aligned
-
-```html {.example}
-<div class="wa-stack">
-  <h3 class="wa-heading-m">Applicant Info</h3>
-  <p class="wa-caption-m">Details about the applicant and attachments.</p>
-  <wa-divider></wa-divider>
-  <dl class="wa-stack wa-gap-2xl">
-    <div class="wa-flank" style="--flank-size: 20ch;">
-      <dt>Full name</dt>
-      <dd>Bucky Barnes</dd>
-    </div>
-    <div class="wa-flank" style="--flank-size: 20ch;">
-      <dt>Application for</dt>
-      <dd>Machine Learning Engineer</dd>
-    </div>
-    <div class="wa-flank" style="--flank-size: 20ch;">
-      <dt>Email address</dt>
-      <dd>winter_soldier@example.com</dd>
-    </div>
-    <div class="wa-flank" style="--flank-size: 20ch;">
-      <dt>Salary expectation</dt>
-      <dd>$240,000</dd>
-    </div>
-    <div class="wa-flank wa-align-items-start" style="--flank-size: 20ch;">
-      <dt>About</dt>
-      <dd>After being lost in action and brainwashed into becoming Hydra's ruthless assassin, my journey is one of redemption, healing, and reclaiming my true self. Though burdened with the weight of the past, I remain a fierce warrior, loyal to those I love, and I'm always striving to atone for those dark days as the Winter Soldier.
-      </dd>
-    </div>
-    <div class="wa-flank wa-align-items-start" style="--flank-size: 20ch;">
-      <dt>Attachments</dt>
-      <dd>
-        <wa-card>
-          <div class="wa-stack">
-            <div class="wa-flank">
-              <wa-icon name="paperclip"></wa-icon>
-              <div class="wa-split">
-                <span class="wa-caption-m wa-cluster">
-                  <span>bb_resume.pdf</span>
-                  <span>2.4mb</span>
-                </span>
-                <wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
-              </div>
-            </div>
-            <wa-divider></wa-divider>
-            <div class="wa-flank">
-              <wa-icon name="paperclip"></wa-icon>
-              <div class="wa-split">
-                <span class="wa-caption-m wa-cluster">
-                  <span>bb_cover_letter.pdf</span>
-                  <span>2.4mb</span>
-                </span>
-                <wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
-              </div>
-            </div>
-          </div>
-        </wa-card>
-      </dd>
-    </div>
-  </dl>
-</div>
-```
-
-## Two Column
-
-```html{.example}
-<div class="wa-stack">
-  <h2 class="wa-heading-m">Applicant Info</h2>
-  <p class="wa-caption-m">Details about the applicant and attachments.</p>
-  <wa-divider></wa-divider>
-  <dl class="wa-grid wa-gap-2xl" style="--min-column-size: 40ch;">
-    <div class="wa-stack wa-gap-xs">
-      <dt>Full name</dt>
-      <dd>Bucky Barnes</dd>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <dt>Application for</dt>
-      <dd>Machine Learning Engineer</dd>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <dt>Email address</dt>
-      <dd>winter_soldier@example.com</dd>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <dt>Salary expectation</dt>
-      <dd>$240,000</dd>
-    </div>
-    <div class="wa-stack wa-gap-xs wa-span-grid">
-      <dt>About</dt>
-      <dd>After being lost in action and brainwashed into becoming Hydra's ruthless assassin, my journey is one of redemption, healing, and reclaiming my true self. Though burdened with the weight of the past, I remain a fierce warrior, loyal to those I love, and I'm always striving to atone for those dark days as the Winter Soldier.
-      </dd>
-    </div>
-    <div class="wa-stack wa-gap-xs wa-span-grid">
-      <dt>Attachments</dt>
-      <dd>
-        <wa-card>
-          <div>
-            <div class="wa-flank">
-              <wa-icon name="paperclip"></wa-icon>
-              <div class="wa-split">
-                <span class="wa-caption-m wa-cluster">
-                   <span>bb_resume.pdf</span>
-                  <span>2.4mb</span>
-                </span>
-                <wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
-              </div>
-            </div>
-            <wa-divider></wa-divider>
-            <div class="wa-flank">
-              <wa-icon name="paperclip"></wa-icon>
-              <div class="wa-split">
-                <span class="wa-caption-m wa-cluster">
-                  <span>bb_cover_letter.pdf</span>
-                  <span>2.4mb</span>
-                </span>
-                <wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
-              </div>
-            </div>
-          </div>
-        </wa-card>
-      </dd>
-    </div>
-  </dl>
-</div>
-```
-
-## Left Aligned with Actions
-
-```html {.example}
-<div class="wa-stack">
-  <h3 class="wa-heading-m">Applicant Info</h3>
-  <p class="wa-caption-m">Details about the applicant and attachments.</p>
-  <wa-divider></wa-divider>
-  <dl class="wa-stack wa-gap-2xl">
-    <div class="wa-flank" style="--flank-size: 20ch;">
-      <dt>Full name</dt>
-      <div class="wa-flank:end">
-        <dd>Bucky Barnes</dd>
-        <wa-button appearance="plain" variant="brand" size="small">Edit</wa-button>
-      </div>
-    </div>
-    <div class="wa-flank" style="--flank-size: 20ch;">
-      <dt>Application for</dt>
-      <div class="wa-flank:end">
-        <dd>Machine Learning Engineer</dd>
-        <wa-button appearance="plain" variant="brand" size="small">Edit</wa-button>
-      </div>
-    </div>
-    <div class="wa-flank" style="--flank-size: 20ch;">
-      <dt>Email address</dt>
-      <div class="wa-flank:end">
-        <dd>winter_soldier@example.com</dd>
-        <wa-button appearance="plain" variant="brand" size="small">Edit</wa-button>
-      </div>
-    </div>
-    <div class="wa-flank" style="--flank-size: 20ch;">
-      <dt>Salary expectation</dt>
-      <div class="wa-flank:end">
-        <dd>$240,000</dd>
-        <wa-button appearance="plain" variant="brand" size="small">Edit</wa-button>
-      </div>
-    </div>
-    <div class="wa-flank wa-align-items-start" style="--flank-size: 20ch;">
-      <dt>About</dt>
-      <div class="wa-flank:end">
-        <dd>After being lost in action and brainwashed into becoming Hydra's ruthless assassin, my journey is one of redemption, healing, and reclaiming my true self. Though burdened with the weight of the past, I remain a fierce warrior, loyal to those I love, and I'm always striving to atone for those dark days as the Winter Soldier.</dd>
-        <wa-button appearance="plain" variant="brand" size="small">Edit</wa-button>
-      </div>
-    </div>
-    <div class="wa-flank" style="--flank-size: 20ch;">
-      <dt>Attachments</dt>
-      <dd>
-        <wa-card>
-          <div class="wa-stack">
-            <div class="wa-flank">
-              <wa-icon name="paperclip"></wa-icon>
-              <div class="wa-split">
-                <span class="wa-caption-m wa-cluster">
-                  <span>bb_resume.pdf</span>
-                  <span>2.4mb</span>
-                </span>
-                <div class="wa-cluster wa-gap-2xs">
-                  <wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
-                  <wa-divider vertical style="height: 1em"></wa-divider>
-                  <wa-button appearance="plain" variant="danger" size="small">Delete</wa-button>
-                </div>
-              </div>
-            </div>
-            <wa-divider></wa-divider>
-            <div class="wa-flank">
-              <wa-icon name="paperclip"></wa-icon>
-              <div class="wa-split">
-                <span class="wa-caption-m wa-cluster">
-                  <span>bb_cover_letter.pdf</span>
-                  <span>2.4mb</span>
-                </span>
-                <div class="wa-cluster wa-gap-2xs">
-                  <wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
-                  <wa-divider vertical style="height: 1em"></wa-divider>
-                  <wa-button appearance="plain" variant="danger" size="small">Delete</wa-button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </wa-card>
-      </dd>
-    </div>
-  </dl>
-</div>
-```
-
-## Condensed
-
-```html{.example}
-<wa-card appearance="filled" style="max-width: 45ch; margin: auto">
-  <div class="wa-stack">
-    <div class="wa-split wa-align-items-start">
-      <dl class="wa-stack wa-gap-2xs">
-        <dt class="wa-heading-s">Amount</dt>
-        <dd class="wa-heading-l">$5,610.00</dd>
-      </dl>
-      <wa-badge appearance="filled outlined" variant="success">Paid</wa-badge>
-    </div>
-    <wa-divider></wa-divider>
-    <dl class="wa-stack">
-      <div class="wa-flank wa-align-items-stretch">
-        <dt><wa-icon name="user" label="Name" fixed-width></wa-icon></dt>
-        <dd>Sam Wilson</dd>
-      </div>
-      <div class="wa-flank wa-align-items-stretch">
-        <dt><wa-icon name="calendar-days" label="Date" fixed-width></wa-icon></dt>
-        <dd><wa-format-date date="2025-03-15"></wa-format-date></dd>
-      </div>
-      <div class="wa-flank wa-align-items-stretch">
-        <dt><wa-icon family="brands" name="cc-visa" label="Credit Card" fixed-width></wa-icon></dt>
-        <dd>Paid with Visa 1234</dd>
-      </div>
-    </dl>
-  </div>
-  <div slot="footer">
-    <a href="" class="wa-cluster wa-gap-2xs">
-      <span>Download Receipt</span>
-      <wa-icon name="arrow-right"></wa-icon>
-    </a>
-  </div>
-</wa-card>
-```

docs/docs/patterns/app/empty-state.md

@@ -1,207 +0,0 @@
----
-title: Empty State
-description: 'Guide users with helpful prompts and visuals when no content is available.'
----
-
-## Simple
-
-```html {.example}
-<div class="wa-stack wa-align-items-center">
-  <wa-icon name="backpack" class="wa-caption-l" style="font-size: var(--wa-font-size-3xl)"></wa-icon>
-  <span class="wa-heading-m">No Kits</span>
-  <p class="wa-caption-l">Manage all of your project's icons in a kit.</p>
-  <wa-button>
-    <wa-icon slot="prefix" name="plus"></wa-icon>
-    Add Kit
-  </wa-button>
-</div>
-```
-
-## With Interactive Placeholder
-
-```html {.example}
-<a href="" class="wa-stack wa-align-items-center wa-placeholder wa-link-plain" style="max-width: 60ch; margin: auto">
-  <wa-icon name="ufo-beam" class="wa-caption-l" style="font-size: var(--wa-font-size-3xl)"></wa-icon>
-  <p class="wa-heading-m">No Custom Icons</p>
-  <p style="text-align: center">Add your own icon or logo to get started.</p>
-</a>
-```
-
-## With Templates
-
-```html {.example}
-<wa-card with-header with-footer style="max-width: 70ch; margin: auto">
-  <div slot="header" class="wa-stack wa-gap-xs">
-    <h2 class="wa-heading-m">Projects</h2>
-  </div>
-  <div class="wa-stack wa-gap-xl">
-    <p class="wa-caption-m">You haven’t created a project yet. Get started by selecting a template or start with a blank canvas.</p>
-    <div class="wa-grid wa-gap-xl" style="--min-column-size: 30ch;">
-      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded">
-          <wa-icon slot="icon" name="note-sticky"></wa-icon>
-        </wa-avatar>
-        <div class="wa-stack wa-gap-2xs">
-          <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
-            Create a Quick Note <wa-icon name="arrow-right"></wa-icon>
-          </span>
-          <p class="wa-caption-m">
-            Jot down any idea. Will it make sense later? Who knows.
-          </p>
-        </div>
-      </a>
-      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded">
-          <wa-icon slot="icon" name="list-check"></wa-icon>
-        </wa-avatar>
-        <div class="wa-stack wa-gap-2xs">
-          <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
-            Create a Checklist <wa-icon name="arrow-right"></wa-icon>
-          </span>
-          <p class="wa-caption-m">
-            The ultimate tool for looking busy.
-          </p>
-        </div>
-      </a>
-      <a href=""class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded">
-          <wa-icon slot="icon" name="table-cells"></wa-icon>
-        </wa-avatar>
-        <div class="wa-stack wa-gap-2xs">
-          <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
-            Create a Spreadsheet <wa-icon name="arrow-right"></wa-icon>
-          </span>
-          <p class="wa-caption-m">
-            Endless rows and columns of tiny, soul-crushing numbers.
-          </p>
-        </div>
-      </a>
-      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded">
-          <wa-icon slot="icon" name="presentation-screen"></wa-icon>
-        </wa-avatar>
-        <div class="wa-stack wa-gap-2xs">
-          <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
-            Create a Slideshow <wa-icon name="arrow-right"></wa-icon>
-          </span>
-          <p class="wa-caption-m">
-            Dramatic transitions make everything seem more official.
-          </p>
-        </div>
-      </a>
-      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded">
-          <wa-icon slot="icon" name="pen-field"></wa-icon>
-        </wa-avatar>
-        <div class="wa-stack wa-gap-2xs">
-          <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
-            Create a Form <wa-icon name="arrow-right"></wa-icon>
-          </span>
-          <p class="wa-caption-m">
-            Collect the deepest personal details and darkest secrets.
-          </p>
-        </div>
-      </a>
-      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded">
-          <wa-icon slot="icon" name="image"></wa-icon>
-        </wa-avatar>
-        <div class="wa-stack wa-gap-2xs">
-          <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
-            Create a Photo Album <wa-icon name="arrow-right"></wa-icon>
-          </span>
-          <p class="wa-caption-m">
-            Curate your best memories or most basic food pictures.
-          </p>
-        </div>
-      </a>
-    </div>
-  </div>
-  <div slot="footer">
-    <a href="" class="wa-cluster wa-gap-xs">
-      <span>Or start with a blank canvas</span>
-      <wa-icon name="arrow-right"></wa-icon>
-    </a>
-  </div>
-</wa-card>
-```
-## Add people 
-```html{.example}
-<wa-card style="max-width: 60ch; margin: 0 auto;">
-  <div class="wa-stack">
-    <wa-icon></wa-icon>
-    <h1>Add team members</h1>
-    <p>You haven’t added any team members to your project yet. As the owner of this project, you can manage team member permissions.</p>
-    <div class="wa-flank:end">
-      <wa-input></wa-input><wa-button>Invite</wa-button>
-    </div>
-    <div class="wa-stack">
-      <span>Team members previously added to projects</span>
-      <wa-divider></wa-divider>
-      <section>
-        <div class="wa-flank">
-          <wa-avatar></wa-avatar>
-        <div class="wa-split">
-          <div class="wa-stack wa-gap-0">
-            <span>lindsey Walton</span>
-            <span>Front end Developer</span>
-          </div>
-          <wa-button appearance="plain">
-            <wa-icon name="plus" slot="prefix"></wa-icon>  
-            Invite
-          </wa-button>
-        </div>
-        </div>
-        <wa-divider></wa-divider>
-      </section>
-      <section>
-        <div class="wa-flank">
-          <wa-avatar></wa-avatar>
-        <div class="wa-split">
-          <div class="wa-stack wa-gap-0">
-            <span>lindsey Walton</span>
-            <span>Front end Developer</span>
-          </div>
-          <wa-button appearance="plain">
-            <wa-icon name="plus" slot="prefix"></wa-icon>  
-            Invite
-          </wa-button>
-        </div>
-        </div>
-        <wa-divider></wa-divider>
-      </section>
-      <section>
-        <div class="wa-flank">
-          <wa-avatar></wa-avatar>
-        <div class="wa-split">
-          <div class="wa-stack wa-gap-0">
-            <span>lindsey Walton</span>
-            <span>Front end Developer</span>
-          </div>
-          <wa-button appearance="plain">
-            <wa-icon name="plus" slot="prefix"></wa-icon>  
-            Invite
-          </wa-button>
-        </div>
-        </div>
-        <wa-divider></wa-divider>
-      </section><section>
-        <div class="wa-flank">
-          <wa-avatar></wa-avatar>
-        <div class="wa-split">
-          <div class="wa-stack wa-gap-0">
-            <span>lindsey Walton</span>
-            <span>Front end Developer</span>
-          </div>
-          <wa-button appearance="plain">
-            <wa-icon name="plus" slot="prefix"></wa-icon>  
-            Invite
-          </wa-button>
-        </div>
-        </div>
-        <wa-divider></wa-divider>
-      </section>
-    </div>
-  </div>
-</wa-card>
-```

docs/docs/patterns/app/faq.md

@@ -1,118 +0,0 @@
----
-title: FAQ
-description: 'Empower users to learn more with a structured list of questions and answers.'
----
-
-## With Flanked Heading & Description
-
-```html {.example}
-<div class="wa-flank wa-align-items-start wa-gap-2xl" style="--flank-size: 35ch">
-  <div>
-    <h2>Frequently Asked Questions</h2>
-    <p>Can’t find an answer? Reach out to your local <a href="">Operator</a>, or contact <a href="">the Oracle</a>, and enjoy a cookie. &#127850;</p>
-  </div>
-  <dl class="wa-stack wa-gap-2xl">
-    <div class="wa-stack wa-gap-xs">
-      <dt>Is Zion actually real, or just another Matrix?</dt>
-      <dd>Ah, the question that keeps redpills up at night. Sure, we escaped the first Matrix, but who’s to say Zion isn’t just another layer of the simulation?</dd>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <dt>Why do the Agents always wear suits?</dt>
-      <dd>Because nothing says "unstoppable digital enforcer" like a generic business professional aesthetic. Also, intimidation. You ever try fighting someone in sunglasses and a tie? It’s terrifying.</dd>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <dt>Can I go back into the Matrix once I’m out?</dt>
-      <dd>Technically, yes—via hacking in. Emotionally? That depends on how well you handle the knowledge that nothing around you is real.</dd>
-    </div>
-  </dl>
-</div>
-```
-
-## With Expandable Answers
-
-```html {.example}
-<div class="wa-stack">
-  <h2>Frequently Asked Questions</h2>
-  <wa-details appearance="plain">
-    <h3 slot="summary" class="wa-heading-m" style="margin: 0">Is Zion actually real, or just another Matrix?</h3>
-    Ah, the question that keeps redpills up at night. Sure, we escaped the first Matrix, but who’s to say Zion isn’t just another layer of the simulation?
-  </wa-details>
-  <wa-divider></wa-divider>
-  <wa-details appearance="plain">
-    <h3 slot="summary" class="wa-heading-m" style="margin: 0">Why do the Agents always wear suits?</h3>
-    Because nothing says "unstoppable digital enforcer" like a generic business professional aesthetic. Also, intimidation. You ever try fighting someone in sunglasses and a tie? It’s terrifying.
-  </wa-details>
-  <wa-divider></wa-divider>
-  <wa-details appearance="plain">
-    <h3 slot="summary" class="wa-heading-m" style="margin: 0">Can I go back into the Matrix once I’m out?</h3>
-    Technically, yes—via hacking in. Emotionally? That depends on how well you handle the knowledge that nothing around you is real.
-  </wa-details>
-</div>
-```
-
-## Two Column
-
-```html {.example}
-<div class="wa-stack wa-gap-2xl">
-  <h2>Frequently Asked Questions</h2>
-  <dl class="wa-stack wa-gap-2xl">
-    <div class="wa-grid wa-gap-xs">
-      <dt class="wa-heading-m">Is Zion actually real, or just another Matrix?</dt>
-      <dd>Ah, the question that keeps redpills up at night. Sure, we escaped the first Matrix, but who’s to say Zion isn’t just another layer of the simulation?</dd>
-    </div>
-    <wa-divider></wa-divider>
-    <div class="wa-grid wa-gap-xs">
-      <dt class="wa-heading-m">Why do the Agents always wear suits?</dt>
-      <dd>Because nothing says "unstoppable digital enforcer" like a generic business professional aesthetic. Also, intimidation. You ever try fighting someone in sunglasses and a tie? It’s terrifying.</dd>
-    </div>
-    <wa-divider></wa-divider>
-    <div class="wa-grid wa-gap-xs">
-      <dt class="wa-heading-m">Can I go back into the Matrix once I’m out?</dt>
-      <dd>Technically, yes—via hacking in. Emotionally? That depends on how well you handle the knowledge that nothing around you is real.</dd>
-    </div>
-  </dl>
-</div>
-```
-
-## 3 Column
-```html{.example}
-<div>
-
-    <h2>Frequently Asked Questions</h2>
-
-
-  <dl class="wa-grid wa-gap-m" style="--min-column-size: 30ch;">
-    <div class="wa-stack wa-gap-xs">
-      <dt class="wa-heading-m">How often do you update your courses?</dt>
-      <dd>A course is updated once there is a fundamental shift in the language or library’s underlying API. You can check our <a href="#">workshop</a> list to see if a new version of a given course is on the schedule. You may also write to us as <a href="#">support@frontendmasters.com</a> with suggestions for updates.</dd>
-    </div>
-   
-    <div class="wa-stack wa-gap-xs">
-      <dt class="wa-heading-m">Do you offer certificates of completion?</dt>
-      <dd>You can download certificates of completion from the <a href="#">Completed Courses</a> list in your Learning Library. Click the diploma icon next to the course to download the certificate in light or dark mode. A link to your Public Profile is included on each certificate if you’ve created one. Public Profiles showcase your learning journey and are a fantastic way to share progress with friends, co-workers, or employers. Public Profiles are available to members with an active Frontend Masters subscription who have watched ten or more hours of content. Visit the <a href="#">Public Profile</a> section in My Account to get started.</dd>
-    </div>
-
-    <div class="wa-stack wa-gap-xs">
-      <dt class="wa-heading-m">Do you offer a free trial?</dt>
-      <dd>
-         <p>We offer a free trial to first-time subscribers. You can find more about the trial here.</p>
-        <p>We also have the following opportunities to learn for free:</p>
-        <ul>
-          <li>The online bootcamp is a free, two-week curriculum to get you started with web development.</li>
-          <li>You can  create a free account to gain access to five full courses for free.</li>
-        </ul>
-      </dd>
-    </div>
-   
-    <div class="wa-stack wa-gap-xs">
-      <dt class="wa-heading-m">Do you have discounts for students?</dt>
-      <dd>We are part of the <a href="#">GitHub Student Developer Pack</a>, allowing students six months of free access to the entire platform.</dd>
-    </div>
-   
-    <div class="wa-stack wa-gap-xs">
-      <dt class="wa-heading-m">How do I cancel my plan?</dt>
-      <dd>You can cancel your Frontend Masters subscription by visiting the <a href="#">Subscription tab</a> in your My Account area.</dd>
-    </div>
-  </dl>
-</div>
-```

docs/docs/patterns/app/feed.md

@@ -1,287 +0,0 @@
----
-title: Feed
-description: TODO
----
-
-## Comment Section
-```html{.example}
-<wa-card style="max-width: 60ch; margin: 0 auto;">
-  <div class="wa-stack">
-  <h1 class="wa-heading-m">Activity</h1>
-  <wa-textarea></wa-textarea>
-  <wa-divider></wa-divider>
-  <section class="wa-stack">
-    <div class="wa-flank">
-      <wa-avatar label="User avatar"></wa-avatar>
-      <div>
-        <span class="wa-heading-s">Robert Fox</span>
-        <span class="wa-caption-m">commented 32 min ago</span>
-      </div>
-    </div>
-    <ul class="wa-stack wa-gap-xl" style="list-style-type: none; margin-inline-start: 1em;">
-      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec. Suspendisse potenti. Pellentesque lobortis pulvinar nulla non tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.</li>
-      <li class="wa-stack wa-gap-2xs">
-        <div class="wa-flank">
-          <wa-avatar label="User avatar"></wa-avatar>
-          <div>
-            <span>Robert Fox</span>
-            <span class="wa-caption-m">commented 32 min ago</span>
-          </div>
-        </div>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec.</p>
-      </li>
-       <li class="wa-stack wa-gap-2xs">
-        <div class="wa-flank">
-          <wa-avatar label="User avatar"></wa-avatar>
-          <div>
-            <span>Robert Fox</span>
-            <span class="wa-caption-m">commented 32 min ago</span>
-          </div>
-        </div>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec.</p>
-      </li>
-       <li class="wa-stack wa-gap-2xs">
-        <div class="wa-flank">
-          <wa-icon name="reply"></wa-icon>
-          <a href="#">Leave Comment</a>
-        </div>
-      </li>
-    </ul>
-  </section>
-  </div>
-</wa-card>
-```
-## With Summary Components
-```html{.example}
-<wa-card style="max-width: 68ch; margin: 0 auto;">
-  <h1 class="wa-heading-l">Monthly Activity</h1>
-  <div class="wa-stack">
-  <wa-details>
-  <span class="wa-heading-m" slot="summary">
-    February
-  </span>
-  <div class="wa-stack">
-  <section class="wa-flank wa-gap-xs">
-    <wa-icon style="font-size: var(--wa-font-size-xl)" name="envelope"></wa-icon>
-    <div class="wa-split">
-      <div class="wa-stack wa-gap-0">
-        <span class="wa-heading-s">Email blasts</span>
-        <div class="wa-cluster wa-gap-2xs">
-          <a href="#">Nick Burkhart</a><span>sent to</span><a href="#">likely customers</a>
-        </div>
-      </div>
-      <span class="wa-caption-m">Feb 28th</span>
-    </div>
-  </section>
-   <wa-divider></wa-divider>
-  <section class="wa-flank wa-gap-xs">
-    <wa-icon style="font-size: var(--wa-font-size-xl)" name="phone"></wa-icon>
-    <div class="wa-split">
-      <div class="wa-stack wa-gap-0">
-        <span class="wa-heading-s">Spoke with the Pope</span>
-        <div class="wa-cluster wa-gap-2xs">
-          <a href="#">Artur Fleck</a><span>for 1 hour</span>
-        </div>
-      </div>
-      <span class="wa-caption-m">Feb 23rd</span>
-    </div>
-  </section>
-  </div>
-</wa-details>
-<wa-details>
-  <span class="wa-heading-m" slot="summary">
-    March
-  </span>
-  <div class="wa-stack">
-  <section class="wa-flank wa-gap-xs">
-    <wa-icon style="font-size: var(--wa-font-size-xl)" name="video"></wa-icon>
-    <div class="wa-split">
-      <div class="wa-stack wa-gap-0">
-        <span class="wa-heading-s">Zoom Call with Northeast office</span>
-        <div class="wa-cluster wa-gap-2xs">
-          <a href="#">Axel Foley</a><span>for 47 minutes</span>
-        </div>
-      </div>
-      <span class="wa-caption-m">Mar 15th</span>
-    </div>
-  </section>
-   <wa-divider></wa-divider>
-  <section class="wa-flank wa-gap-s">
-    <wa-icon style="font-size: var(--wa-font-size-xl)" name="calendar"></wa-icon>
-    <div class="wa-split">
-      <div class="wa-stack wa-gap-0">
-        <span class="wa-heading-s">Scheduled birthday party</span>
-        <div class="wa-cluster wa-gap-2xs">
-          <a href="#">John Blaze</a><span>in</span><a href="#">Social Events</a>
-        </div>
-      </div>
-      <span class="wa-caption-m">Mar 3rd</span>
-    </div>
-  </section>
-  </div>
-</wa-details>
-<wa-details>
-  <span class="wa-heading-m" slot="summary">
-    April
-  </span>
-  <div class="wa-stack">
-  <section class="wa-flank wa-gap-s">
-    <wa-icon style="font-size: var(--wa-font-size-xl)" family="brands" name="intercom"></wa-icon>
-    <div class="wa-split">
-      <div class="wa-stack wa-gap-0">
-        <span class="wa-heading-s">Got new lead</span>
-        <div class="wa-cluster wa-gap-2xs">
-          <a href="#">Jack Carter</a><span>on Intercom switchboard</span>
-        </div>
-      </div>
-      <span class="wa-caption-m">Apr 18th</span>
-    </div>
-  </section>
-   <wa-divider></wa-divider>
-  <section class="wa-flank wa-gap-s">
-    <wa-icon style="font-size: var(--wa-font-size-xl)" name="list-check"></wa-icon>
-    <div class="wa-split">
-      <div class="wa-stack wa-gap-0">
-        <span class="wa-heading-s">Completed Todo</span>
-        <div class="wa-cluster wa-gap-2xs">
-          <a href="#">Huey Freeman</a><span>marked complete on</span><a href="#">Daily Tasks</a>
-        </div>
-      </div>
-      <span class="wa-caption-m">Apr 2nd</span>
-    </div>
-  </section>
-  </div>
-</wa-details>
-</div>
-</wa-card>
-```
-
-## Card Separated
-```html{.example}
-<div class="wa-stack" style="max-width: 45ch; margin: 0 auto;">
-  <div class="wa-stack">
-    <wa-card>
-      <div class="wa-flank">
-        <wa-avatar></wa-avatar>
-        <div class="wa-stack wa-gap-0">
-          <div class="wa-split">
-            <span class="wa-heading-s">Charlotte Parker</span>
-            <span class="wa-caption-s">4h</span>
-          </div>
-          <p>Who's on first?</p>
-          <a href="#" class="wa-cluster wa-gap-2xs">
-            <wa-icon name="reply"></wa-icon>
-            <span>Reply</span>
-          </a>
-        </div>
-      </div>
-    </wa-card>
-    <div class="wa-flank wa-gap-xl">
-      <wa-divider vertical style="height: auto; align-self: stretch"></wa-divider>
-      <ul class="wa-stack">
-      <li class="wa-stack wa-gap-2xs">
-        <wa-card>
-      <div class="wa-flank">
-        <wa-avatar></wa-avatar>
-        <div class="wa-stack wa-gap-0">
-          <div class="wa-split">
-            <span class="wa-heading-s">Charlotte Parker</span>
-            <span class="wa-caption-s">1h</span>
-          </div>
-          <p>What's on second?</p>
-          <a href="#" class="wa-cluster wa-gap-2xs">
-            <wa-icon name="reply"></wa-icon>
-            <span>Reply</span>
-          </a>
-        </div>
-      </div>
-    </wa-card>
-      </li>
-      <li class="wa-stack wa-gap-2xs">
-        <wa-card>
-      <div class="wa-flank wa-align-items-start">
-        <wa-avatar></wa-avatar>
-        <div class="wa-stack wa-gap-xs">
-          <div class="wa-split">
-            <span class="wa-heading-s">Charlotte Parker</span>
-          </div>
-          <wa-textarea size="small" aria-label="Add Your Comment"></wa-textarea>
-        </div>
-      </div>
-    </wa-card>
-      </li>
-    </ul>
-    </div>
-    
-  </div>
-</div>
-```
-## Divider Separated
-```html{.example}
-<wa-card with-header style="max-width: 54ch; margin: 0 auto;">
-  <div slot="header" class="wa-split">
-    <div>
-      <span>Notifications</span>
-      <wa-badge appearance="filled" variant="success" pill>2</wa-badge>
-    </div>
-    <wa-icon name="close"></wa-icon>
-  </div>
-  <div class="wa-stack">
-    <article>
-      <div class="wa-flank wa-align-items-start">
-        <wa-avatar></wa-avatar>
-        <div class="wa-stack wa-gap-xs">
-          <div class="wa-split">
-            <span><strong>Happy</strong> commented in <a href="#">Reporting Dashboard</a></span>
-            <wa-icon name="circle-dot" style="color: var(--wa-color-green-50);"></wa-icon>
-          </div>
-          <div class="wa-split">
-            <span class="wa-caption-m">Friday 3:12PM</span>
-            <span class="wa-caption-m">2 hours ago</span>
-          </div>
-          <wa-callout variant="neutral">
-            Really love this approach. I think this is the best solution for the sync issue.
-          </wa-callout>
-        </div>
-      </div>
-      <wa-divider></wa-divider>
-    </article>
-    <article>
-      <div class="wa-flank wa-align-items-start">
-        <wa-avatar></wa-avatar>
-        <div class="wa-stack wa-gap-xs">
-          <div class="wa-split">
-            <span><strong>Charlotte</strong> followed you</span>
-            <wa-icon name="circle-dot" style="color: var(--wa-color-green-50);"></wa-icon>
-          </div>
-          <div class="wa-split">
-            <span class="wa-caption-m">Friday 3:04PM</span>
-            <span class="wa-caption-m">2 hours ago</span>
-          </div>
-        </div>
-      </div>
-      <wa-divider></wa-divider>
-    </article>
-    <article>
-      <div class="wa-flank wa-align-items-start">
-        <wa-avatar></wa-avatar>
-        <div class="wa-stack wa-gap-xs">
-          <div class="wa-split">
-            <span><strong>Tavitian</strong> invited you to <a href="#">Homepage Redesign</a></span>
-          </div>
-          <div class="wa-split">
-            <span class="wa-caption-m">Friday 2:22PM</span>
-            <span class="wa-caption-m">3 hours ago</span>
-          </div>
-          <div class="wa-cluster wa-gap-xs">
-            <wa-button appearance="outlined" size="small">Decline</wa-button>
-            <wa-button variant="brand" size="small">Accept</wa-button>
-          </div>
-        </div>
-      </div>
-      <wa-divider></wa-divider>
-    </article>
-    
-  </div>
-</wa-card>
-```

docs/docs/patterns/app/grid-list.md

@@ -1,525 +0,0 @@
----
-title: Grid List
-description: 'Improve browsing and selection by organizing data in a structured grid layout.'
----
-
-## Cards with Footer Actions
-
-```html {.example}
-<div class="wa-grid" style="--min-column-size: 30ch;">
-  <wa-card with-footer>
-    <div class="wa-flank:end">
-      <div class="wa-stack wa-gap-xs">
-        <div class="wa-cluster wa-gap-xs">
-          <h3 class="wa-heading-s">Barklia Woofington</h3 class="wa-heading-s">
-          <wa-badge pill>Admin</wa-badge>
-        </div>
-        <span class="wa-caption-m">Canine Executive Officer</span>
-      </div>
-      <wa-avatar image="https://images.unsplash.com/photo-1593270379182-fe1b1f6d67e5?q=80&w=2175&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Avatar of black and white Border Collie"></wa-avatar>
-    </div>
-    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="at"></wa-icon>
-        Email
-      </wa-button>
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="phone"></wa-icon>
-        Phone
-      </wa-button>
-    </div>
-  </wa-card>
-  <wa-card with-footer>
-    <div class="wa-flank:end">
-      <div class="wa-stack wa-gap-xs">
-        <div class="wa-cluster wa-gap-xs">
-          <h3 class="wa-heading-s">Maggie Pawsworth</h3 class="wa-heading-s">
-          <wa-badge pill>Admin</wa-badge>
-        </div>
-        <span class="wa-caption-m">Canine Fetch Officer</span>
-      </div>
-      <wa-avatar image="https://images.unsplash.com/photo-1514479425649-0981aca9fe41?q=80&w=3474&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Avatar of black collie mix"></wa-avatar>
-    </div>
-    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="at"></wa-icon>
-        Email
-      </wa-button>
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="phone"></wa-icon>
-        Phone
-      </wa-button>
-    </div>
-  </wa-card>
-  <wa-card with-footer>
-    <div class="wa-flank:end">
-      <div class="wa-stack wa-gap-xs">
-        <h3 class="wa-heading-s">Rex Tailwag</h3 class="wa-heading-s">
-        <span class="wa-caption-m">Head of Security</span>
-      </div>
-      <wa-avatar image="https://images.unsplash.com/photo-1610968755695-d7fcb5fd4b92?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Avatar of black and tan German Shepherd"></wa-avatar>
-    </div>
-    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="at"></wa-icon>
-        Email
-      </wa-button>
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="phone"></wa-icon>
-        Phone
-      </wa-button>
-    </div>
-  </wa-card>
-  <wa-card with-footer>
-    <div class="wa-flank:end">
-      <div class="wa-stack wa-gap-xs">
-        <h3 class="wa-heading-s">Luna Sniffington</h3 class="wa-heading-s">
-        <span class="wa-caption-m">Hound Relations</span>
-      </div>
-      <wa-avatar image="https://images.unsplash.com/photo-1526440847959-4e38e7f00b04?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Avatar of black and tan Yorkshire Terrier"></wa-avatar>
-    </div>
-    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="at"></wa-icon>
-        Email
-      </wa-button>
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="phone"></wa-icon>
-        Phone
-      </wa-button>
-    </div>
-  </wa-card>
-  <wa-card with-footer>
-    <div class="wa-flank:end">
-      <div class="wa-stack wa-gap-xs">
-        <h3 class="wa-heading-s">Charlie Drooler</h3 class="wa-heading-s">
-        <span class="wa-caption-m">Head of Sales</span>
-      </div>
-      <wa-avatar image="https://images.unsplash.com/photo-1554692844-6627ca340264?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Avatar of tan and white corgi"></wa-avatar>
-    </div>
-    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="at"></wa-icon>
-        Email
-      </wa-button>
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="phone"></wa-icon>
-        Phone
-      </wa-button>
-    </div>
-  </wa-card>
-  <wa-card with-footer>
-    <div class="wa-flank:end">
-      <div class="wa-stack wa-gap-xs">
-        <h3 class="wa-heading-s">Daisy Zoomley</h3 class="wa-heading-s">
-        <span class="wa-caption-m">IT Support</span>
-      </div>
-      <wa-avatar image="https://images.unsplash.com/photo-1544378062-0b74cc8b4713?q=80&w=3648&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Avatar of gray Weimaraner"></wa-avatar>
-    </div>
-    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="at"></wa-icon>
-        Email
-      </wa-button>
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="phone"></wa-icon>
-        Phone
-      </wa-button>
-    </div>
-  </wa-card>
-</div>
-```
-
-## Cards with Footer Actions
-
-```html {.example}
-<div class="wa-grid" style="--min-column-size: 29ch;">
-  <wa-card with-footer>
-    <div class="wa-stack wa-align-items-center">
-      <div class="wa-frame wa-border-radius-circle">
-        <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-         </div>
-        <h2 class="wa-heading-m">Scott Summers</h2>
-        <p class="wa-caption-l">Product Designer</p>
-    </div>
-    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="at"></wa-icon>
-        Email
-      </wa-button>
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="phone"></wa-icon>
-        Phone
-      </wa-button>
-    </div>
-  </wa-card>
-  <wa-card with-footer>
-    <div class="wa-stack wa-align-items-center">
-      <div class="wa-frame wa-border-radius-circle">
-        <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-         </div>
-        <h2 class="wa-heading-m">Scott Summers</h2>
-        <p class="wa-caption-l">Product Designer</p>
-    </div>
-    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="at"></wa-icon>
-        Email
-      </wa-button>
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="phone"></wa-icon>
-        Phone
-      </wa-button>
-    </div>
-  </wa-card>
-  <wa-card with-footer>
-    <div class="wa-stack wa-align-items-center">
-      <div class="wa-frame wa-border-radius-circle">
-        <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-         </div>
-        <h2 class="wa-heading-m">Scott Summers</h2>
-        <p class="wa-caption-l">Product Designer</p>
-    </div>
-    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="at"></wa-icon>
-        Email
-      </wa-button>
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="phone"></wa-icon>
-        Phone
-      </wa-button>
-    </div>
-  </wa-card>
-<wa-card with-footer>
-    <div class="wa-stack wa-align-items-center">
-      <div class="wa-frame wa-border-radius-circle">
-        <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-         </div>
-        <h2 class="wa-heading-m">Scott Summers</h2>
-        <p class="wa-caption-l">Product Designer</p>
-    </div>
-    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="at"></wa-icon>
-        Email
-      </wa-button>
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="phone"></wa-icon>
-        Phone
-      </wa-button>
-    </div>
-  </wa-card>
-</div>
-```
-## with Images
-```html {.example}
-<div class="wa-grid">
-  <article class="wa-stack">
-    <div class="wa-frame">
-      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-    </div>
-    <div class="wa-stack">
-      <span>Lindsay Walton</span>
-      <span>Developer</span>
-    </div>
-    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
-    </div>
-  </article>
-  <article class="wa-stack">
-    <div class="wa-frame">
-      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-    </div>
-    <div class="wa-stack">
-      <span>Lindsay Walton</span>
-      <span>Developer</span>
-    </div>
-    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
-    </div>
-  </article>
-  <article class="wa-stack">
-    <div class="wa-frame">
-      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-    </div>
-    <div class="wa-stack">
-      <span>Lindsay Walton</span>
-      <span>Developer</span>
-    </div>
-    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
-    </div>
-  </article>
-  <article class="wa-stack">
-    <div class="wa-frame">
-      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-    </div>
-    <div class="wa-stack">
-      <span>Lindsay Walton</span>
-      <span>Developer</span>
-    </div>
-    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
-    </div>
-  </article>
-  <article class="wa-stack">
-    <div class="wa-frame">
-      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-    </div>
-    <div class="wa-stack">
-      <span>Lindsay Walton</span>
-      <span>Developer</span>
-    </div>
-    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
-    </div>
-  </article>
-  <article class="wa-stack">
-    <div class="wa-frame">
-      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-    </div>
-    <div class="wa-stack">
-      <span>Lindsay Walton</span>
-      <span>Developer</span>
-    </div>
-    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
-    </div>
-  </article>
-</div>
-```
-## Linked Cards with Options Menu
-
-```html{.example}
-<div class="wa-grid" style="--min-column-size: 25ch">
-  <wa-card>
-    <div class="wa-flank:end">
-      <a href="" class="wa-flank wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-yellow-80); --text-color: var(--wa-color-yellow-40)">
-          <wa-icon slot="icon" name="pancakes"></wa-icon>
-        </wa-avatar>
-        <div class="wa-gap-2xs wa-stack">
-          <span class="wa-heading-s">Breakfast</span>
-          <span class="wa-caption-m">28 Items</span>
-        </div>
-      </a>
-      <wa-dropdown>
-        <wa-icon-button id="more-actions-1" slot="trigger" name="ellipsis-vertical" label="More actions"></wa-icon-button>
-        <wa-menu>
-          <wa-menu-item>Copy link</wa-menu-item>
-          <wa-menu-item>Rename</wa-menu-item>
-          <wa-menu-item>Move to trash</wa-menu-item>
-        </wa-menu>
-      </wa-dropdown>
-      <wa-tooltip for="more-actions-1">More actions</wa-tooltip>
-    </div>
-  </wa-card>
-  <wa-card>
-    <div class="wa-flank:end">
-      <a href="" class="wa-flank wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-orange-80); --text-color: var(--wa-color-orange-40)">
-          <wa-icon slot="icon" name="burger-cheese"></wa-icon>
-        </wa-avatar>
-        <div class="wa-gap-2xs wa-stack">
-          <span class="wa-heading-s">Lunch + Dinner</span>
-          <span class="wa-caption-m">40 Items</span>
-        </div>
-      </a>
-      <wa-dropdown>
-        <wa-icon-button id="more-actions-2" slot="trigger" name="ellipsis-vertical" label="More actions"></wa-icon-button>
-        <wa-menu>
-          <wa-menu-item>Copy link</wa-menu-item>
-          <wa-menu-item>Rename</wa-menu-item>
-          <wa-menu-item>Move to trash</wa-menu-item>
-        </wa-menu>
-      </wa-dropdown>
-      <wa-tooltip for="more-actions-2">More actions</wa-tooltip>
-    </div>
-  </wa-card>
-  <wa-card>
-    <div class="wa-flank:end">
-      <a href="" class="wa-flank wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-indigo-80); --text-color: var(--wa-color-indigo-40)">
-          <wa-icon slot="icon" name="martini-glass-citrus"></wa-icon>
-        </wa-avatar>
-        <div class="wa-gap-2xs wa-stack">
-          <span class="wa-heading-s">Beverages</span>
-          <span class="wa-caption-m">19 Items</span>
-        </div>
-      </a>
-      <wa-dropdown>
-        <wa-icon-button id="more-actions-3" slot="trigger" name="ellipsis-vertical" label="More actions"></wa-icon-button>
-        <wa-menu>
-          <wa-menu-item>Copy link</wa-menu-item>
-          <wa-menu-item>Rename</wa-menu-item>
-          <wa-menu-item>Move to trash</wa-menu-item>
-        </wa-menu>
-      </wa-dropdown>
-      <wa-tooltip for="more-actions-3">More actions</wa-tooltip>
-    </div>
-  </wa-card>
-  <wa-card>
-    <div class="wa-flank:end">
-      <a href="" class="wa-flank wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-pink-80); --text-color: var(--wa-color-pink-40)">
-          <wa-icon slot="icon" name="cake-slice"></wa-icon>
-        </wa-avatar>
-        <div class="wa-gap-2xs wa-stack">
-          <span class="wa-heading-s">Dessert</span>
-          <span class="wa-caption-m">11 Items</span>
-        </div>
-      </a>
-      <wa-dropdown>
-        <wa-icon-button id="more-actions-4" slot="trigger" name="ellipsis-vertical" label="More actions"></wa-icon-button>
-        <wa-menu>
-          <wa-menu-item>Copy link</wa-menu-item>
-          <wa-menu-item>Rename</wa-menu-item>
-          <wa-menu-item>Move to trash</wa-menu-item>
-        </wa-menu>
-      </wa-dropdown>
-      <wa-tooltip for="more-actions-4">More actions</wa-tooltip>
-    </div>
-  </wa-card>
-</div>
-```
-## Kanban
-```html {.example}
-<div>
-  <h2>Project #487</h2>
-  <div class="wa-grid wa-gap-2xl">
-    <div class="wa-stack">
-      <div class="wa-cluster wa-gap-s"><span>Draft</span>  <wa-badge appearance="filled outlined" variant="neutral">1</wa-badge></div>
-
-       
-     
-          <wa-card>
-            <div class="wa-flank:end">
-              <div class="wa-stack wa-gap-2xs">
-                <div class="wa-cluster wa-gap-2xs">
-                  <span class="wa-heading-s">Unit Testing</span>
-                  <wa-dropdown>
-                    <wa-icon-button id="task-action-4" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
-                    <wa-menu>
-                      <wa-menu-item>Copy link</wa-menu-item>
-                      <wa-menu-item>Rename</wa-menu-item>
-                      <wa-menu-item>Move to trash</wa-menu-item>
-                    </wa-menu>
-                  </wa-dropdown>
-                  <wa-tooltip for="task-action-4">More actions</wa-tooltip>
-                </div>
-                <div class="wa-cluster wa-gap-2xs">
-                <wa-badge appearance="outlined" pill>DevOps</wa-badge>  <wa-badge variant="neutral" appearance="outlined" pill>Priority: Low</wa-badge>
-                </div>
-              </div>
-              <wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
-  label="Avatar of a gray tabby kitten looking down"></wa-avatar>
-            </div>
-          </wa-card>
-      <wa-button appearance="plain">
-        <wa-icon name="plus"></wa-icon>
-        Add Task
-        </wa-button>
-      
-    </div>
-
-    <div class="wa-stack">
-      <div class="wa-cluster wa-gap-s"><span>In Progress</span>  <wa-badge appearance="filled outlined" variant="neutral">2</wa-badge></div>
-      
-          <wa-card>
-            <div class="wa-flank:end">
-              <div class="wa-stack wa-gap-2xs">
-                <div class="wa-cluster wa-gap-2xs">
-                  <span class="wa-heading-s">UX Audit</span>
-                  <wa-dropdown>
-                    <wa-icon-button id="task-action-2" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
-                    <wa-menu>
-                      <wa-menu-item>Copy link</wa-menu-item>
-                      <wa-menu-item>Rename</wa-menu-item>
-                      <wa-menu-item>Move to trash</wa-menu-item>
-                    </wa-menu>
-                  </wa-dropdown>
-                  <wa-tooltip for="task-action-2">More actions</wa-tooltip>
-                </div>
-                <div class="wa-cluster wa-gap-2xs">
-                <wa-badge appearance="outlined" pill>Design</wa-badge>  <wa-badge variant="warning" appearance="outlined" pill>Priority: Medium</wa-badge>
-                </div>
-              </div>
-              <wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
-  label="Avatar of a gray tabby kitten looking down"></wa-avatar>
-            </div>
-          </wa-card>
-          <wa-card>
-            <div class="wa-flank:end">
-              <div class="wa-stack wa-gap-2xs">
-                <div class="wa-cluster wa-gap-2xs">
-                  <span class="wa-heading-s">Visual Testing</span>
-                  <wa-dropdown>
-                    <wa-icon-button id="task-action-3" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
-                    <wa-menu>
-                      <wa-menu-item>Copy link</wa-menu-item>
-                      <wa-menu-item>Rename</wa-menu-item>
-                      <wa-menu-item>Move to trash</wa-menu-item>
-                    </wa-menu>
-                  </wa-dropdown>
-                  <wa-tooltip for="task-action-3">More actions</wa-tooltip>
-                </div>
-                <div class="wa-cluster wa-gap-2xs">
-                <wa-badge appearance="outlined" pill>Design</wa-badge>  <wa-badge variant="danger" appearance="outlined" pill>Priority: High</wa-badge>
-                </div>
-              </div>
-              <wa-avatar></wa-avatar>
-            </div>
-          </wa-card>
-      <wa-button appearance="plain">
-        <wa-icon name="plus"></wa-icon>
-        Add Task
-        </wa-button>
-      
-    </div>
-
-    <div class="wa-stack">
-      <div class="wa-cluster wa-gap-s"><span>Ready for Review</span>  <wa-badge appearance="filled outlined" variant="neutral">1</wa-badge></div>
-          <wa-card>
-            <div class="wa-flank:end">
-              <div class="wa-stack wa-gap-2xs">
-                <div class="wa-cluster wa-gap-2xs">
-                  <span class="wa-heading-s">Deploy Bug Fixes</span>
-                  <wa-dropdown>
-                    <wa-icon-button id="task-action-1" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
-                    <wa-menu>
-                      <wa-menu-item>Copy link</wa-menu-item>
-                      <wa-menu-item>Rename</wa-menu-item>
-                      <wa-menu-item>Move to trash</wa-menu-item>
-                    </wa-menu>
-                  </wa-dropdown>
-                  <wa-tooltip for="task-action-1">More actions</wa-tooltip>
-                </div>
-                <div class="wa-cluster wa-gap-2xs">
-                  <wa-badge appearance="outlined" pill>Development</wa-badge>  <wa-badge variant="warning" appearance="outlined" pill>Priority: Medium</wa-badge>
-                </div>
-              </div>
-              <wa-avatar initials="KK" label="Avatar with initials: KK"></wa-avatar>
-            </div>
-          </wa-card>
-     
-        
-      <wa-button appearance="plain">
-        <wa-icon name="plus"></wa-icon>
-        Add Task
-        </wa-button>
-      
-    </div>
-
-
-  
-  </div>
-</div>
-```
-

docs/docs/patterns/app/index.njk

@@ -1,8 +0,0 @@
----
-title: App
-description: Pre-built action panels, data displays, and more ready to drop into your web app.
-parent: patterns
-layout: overview
-override:tags: []
-listChildren: true
----

docs/docs/patterns/app/leaderboard.md

@@ -1,265 +0,0 @@
----
-title: Leaderboard
-description: 'Engage and motivate users by highlighting top performers, scores, and achievements.'
----
-
-## Simple
-
-```html {.example}
-<div class="wa-stack">
-  <h3>Daily Crossword</h3>
-  <div class="wa-grid">
-    <wa-callout variant="warning" appearance="filled">
-      <wa-icon slot="icon" name="timer"></wa-icon>
-      <div class="wa-stack wa-gap-xs">
-        <span class="wa-heading-l">11h 54m 52s</span>
-        <span class="wa-caption-m">until play ends</span>
-      </div>
-    </wa-callout>
-    <wa-callout variant="neutral" appearance="filled">
-      <wa-icon slot="icon" name="user-group"></wa-icon>
-      <div class="wa-stack wa-gap-xs">
-        <span class="wa-heading-l">304</span>
-        <span class="wa-caption-m">players on this leaderboard</span>
-      </div>
-    </wa-callout>
-  </div>
-  <wa-card>
-    <div class="wa-stack">
-      <ol class="wa-stack">
-        <li class="wa-flank">
-          <div class="wa-cluster">
-            <wa-icon name="1" fixed-width></wa-icon>
-            <wa-avatar>
-              <wa-icon slot="icon" name="hat-wizard"></wa-icon>
-            </wa-avatar>
-          </div>
-          <div class="wa-split wa-gap-xs">
-            <span>wordwiz</span>
-            <small class="wa-caption-l">00:01:41</small>
-          </div>
-        </li>
-        <wa-divider></wa-divider>
-        <li class="wa-flank">
-          <div class="wa-cluster">
-            <wa-icon name="2" fixed-width></wa-icon>
-            <wa-avatar initials="A"></wa-avatar>
-          </div>
-          <div class="wa-split wa-gap-xs">
-            <span>acrossNdown</span>
-            <small class="wa-caption-l">00:01:58</small>
-          </div>
-        </li>
-        <wa-divider></wa-divider>
-        <li class="wa-flank">
-          <div class="wa-cluster">
-            <wa-icon name="3" fixed-width></wa-icon>
-            <wa-avatar initials="X"></wa-avatar>
-          </div>
-          <div class="wa-split wa-gap-xs">
-            <span>XwordChamp</span>
-            <small class="wa-caption-l">00:02:14</small>
-          </div>
-        </li>
-        <wa-divider></wa-divider>
-        <li class="wa-flank">
-          <div class="wa-cluster">
-            <wa-icon name="4" fixed-width></wa-icon>
-            <wa-avatar>
-              <wa-icon slot="icon" name="chess-knight"></wa-icon>
-            </wa-avatar>
-          </div>
-          <div class="wa-split wa-gap-xs">
-            <span>puzzlepoet</span>
-            <small class="wa-caption-l">00:02:16</small>
-          </div>
-        </li>
-        <wa-divider></wa-divider>
-        <li class="wa-flank">
-          <div class="wa-cluster">
-            <wa-icon name="5" fixed-width></wa-icon>
-            <wa-avatar initials="R"></wa-avatar>
-          </div>
-          <div class="wa-split wa-gap-xs">
-            <span>RiddleMeThis</span>
-            <small class="wa-caption-l">00:02:34</small>
-          </div>
-        </li>
-      </ol>
-    </div>
-    <div slot="footer">
-      <a href="" class="wa-cluster wa-gap-xs wa-caption-m">
-        <span>View all standings</span>
-        <wa-icon name="arrow-right"></wa-icon>
-      </a>
-    </div>
-  </wa-card>
-</div>
-```
-
-## Two Column
-
-```html {.example}
-<div class="wa-stack">
-  <h3>Collective Activity for Yesterday</h3>
-  <div class="wa-grid">
-    <wa-callout variant="neutral" appearance="filled">
-      <wa-icon slot="icon" name="book"></wa-icon>
-      <div class="wa-stack wa-gap-0">
-        <h4 class="wa-heading-xs">Items Studied</h4>
-        <div class="wa-heading-2xl">482,813</div>
-      </div>
-    </wa-callout>
-    <wa-callout variant="brand" appearance="filled">
-      <wa-icon slot="icon" name="diploma"></wa-icon>
-      <div class="wa-stack wa-gap-0">
-        <h4 class="wa-heading-xs">Items Mastered</h4>
-        <div class="wa-heading-2xl">67,106</div>
-      </div>
-    </wa-callout>
-    <wa-callout variant="success" appearance="filled">
-      <wa-icon slot="icon" name="wand-sparkles"></wa-icon>
-      <div class="wa-stack wa-gap-0">
-        <h4 class="wa-heading-xs">Items Created</h4>
-        <div class="wa-heading-2xl">2,080</div>
-      </div>
-    </wa-callout>
-  </div>
-  <div class="wa-grid">
-    <wa-card>
-      <div slot="header" class="wa-flank wa-gap-xl">
-        <wa-icon name="graduation-cap" class="wa-heading-xl"></wa-icon>
-        <span class="wa-gap-2xs wa-stack">
-          <h4>Study Leaders</h4>
-          <span class="wa-caption-m">Items mastered in the last 7 days</span>
-        </span>
-      </div>
-      <div class="wa-stack">
-        <ol class="wa-stack">
-          <li class="wa-flank">
-            <div class="wa-cluster">
-              <wa-icon name="1" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1620428268482-cf1851a36764?q=80&w=3418&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
-            </div>
-            <div class="wa-split wa-gap-xs">
-              <span>mitsuwo</span>
-              <small class="wa-caption-l">2,753</small>
-            </div>
-          </li>
-          <wa-divider></wa-divider>
-          <li class="wa-flank">
-            <div class="wa-cluster">
-              <wa-icon name="2" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1639628735078-ed2f038a193e?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
-            </div>
-            <div class="wa-split wa-gap-xs">
-              <span>knowledgeninja</span>
-              <small class="wa-caption-l">2,298</small>
-            </div>
-          </li>
-          <wa-divider></wa-divider>
-          <li class="wa-flank">
-            <div class="wa-cluster">
-              <wa-icon name="3" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1638803040283-7a5ffd48dad5?q=80&w=2592&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
-            </div>
-            <div class="wa-split wa-gap-xs">
-              <span>NxtLvl</span>
-              <small class="wa-caption-l">2,008</small>
-            </div>
-          </li>
-          <wa-divider></wa-divider>
-          <li class="wa-flank">
-            <div class="wa-cluster">
-              <wa-icon name="4" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1630549316063-7ae02749d2cc?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
-            </div>
-            <div class="wa-split wa-gap-xs">
-              <span>brainiac</span>
-              <small class="wa-caption-l">1,954</small>
-            </div>
-          </li>
-          <wa-divider></wa-divider>
-          <li class="wa-flank">
-            <div class="wa-cluster">
-              <wa-icon name="5" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1582845512747-e42001c95638?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
-            </div>
-            <div class="wa-split wa-gap-xs">
-              <span>eduexplorer</span>
-              <small class="wa-caption-l">1,897</small>
-            </div>
-          </li>
-        </ol>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div slot="header" class="wa-flank wa-gap-xl">
-        <wa-icon name="hat-wizard" class="wa-heading-xl"></wa-icon>
-        <span class="wa-gap-2xs wa-stack">
-          <h4>Creation Leaders</h4>
-          <span class="wa-caption-m">Items created in the last 7 days</span>
-        </span>
-      </div>
-      <div class="wa-stack">
-        <ol class="wa-stack">
-          <li class="wa-flank">
-            <div class="wa-cluster">
-              <wa-icon name="1" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1630549316063-7ae02749d2cc?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
-            </div>
-            <div class="wa-split wa-gap-xs">
-              <span>brainiac</span>
-              <small class="wa-caption-l">134</small>
-            </div>
-          </li>
-          <wa-divider></wa-divider>
-          <li class="wa-flank">
-            <div class="wa-cluster">
-              <wa-icon name="2" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1546776230-bb86256870ce?q=80&w=3368&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
-            </div>
-            <div class="wa-split wa-gap-xs">
-              <span>LessonLegend</span>
-              <small class="wa-caption-l">115</small>
-            </div>
-          </li>
-          <wa-divider></wa-divider>
-          <li class="wa-flank">
-            <div class="wa-cluster">
-              <wa-icon name="3" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1620428268482-cf1851a36764?q=80&w=3418&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
-            </div>
-            <div class="wa-split wa-gap-xs">
-              <span>mitsuwo</span>
-              <small class="wa-caption-l">98</small>
-            </div>
-          </li>
-          <wa-divider></wa-divider>
-          <li class="wa-flank">
-            <div class="wa-cluster">
-              <wa-icon name="4" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1586374579358-9d19d632b6df?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
-            </div>
-            <div class="wa-split wa-gap-xs">
-              <span>wiswiz</span>
-              <small class="wa-caption-l">79</small>
-            </div>
-          </li>
-          <wa-divider></wa-divider>
-          <li class="wa-flank">
-            <div class="wa-cluster">
-              <wa-icon name="5" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1639628735078-ed2f038a193e?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
-            </div>
-            <div class="wa-split wa-gap-xs">
-              <span>knowledgeninja</span>
-              <small class="wa-caption-l">77</small>
-            </div>
-          </li>
-        </ol>
-      </div>
-    </wa-card>
-  </div>
-</div>
-```

docs/docs/patterns/app/pagination.md

@@ -1,51 +0,0 @@
----
-title: Pagination
-description: 'Improve navigation and performance by breaking long lists or content into manageable pages.'
----
-
-## Simple
-
-```html {.example}
-<div class="wa-stack">
-  <div class="wa-placeholder"></div>
-  <wa-divider></wa-divider>
-  <div class="wa-split">
-    <span class="wa-caption-l">Showing 1 to 10 of 50 Results</span>
-    <div class="wa-cluster wa-gap-xs">
-      <wa-button appearance="outlined">
-        <wa-icon slot="prefix" name="chevron-left"></wa-icon>
-        Prev
-      </wa-button>
-      <wa-button appearance="outlined">
-        <wa-icon slot="suffix" name="chevron-right"></wa-icon>
-        Next
-      </wa-button>
-    </div>
-  </div>
-</div>
-```
-
-## With Button Group
-
-```html {.example}
-<div class="wa-stack">
-  <div class="wa-placeholder"></div>
-  <wa-divider></wa-divider>
-  <div class="wa-split">
-    <span class="wa-caption-l">Showing 1 to 10 of 50 Results</span>
-    <wa-button-group orientation="horizontal">
-      <wa-button appearance="outlined">
-        <wa-icon name="chevron-left"></wa-icon>
-      </wa-button>
-      <wa-button appearance="accent" variant="brand">1</wa-button>
-      <wa-button appearance="outlined">2</wa-button>
-      <wa-button appearance="outlined">3</wa-button>
-      <wa-button appearance="outlined" disabled>...</wa-button>
-      <wa-button appearance="outlined">10</wa-button>
-      <wa-button appearance="outlined">
-        <wa-icon name="chevron-right"></wa-icon>
-      </wa-button>
-    </wa-button-group>
-  </div>
-</div>
-```

docs/docs/patterns/app/permissions.md

@@ -1,228 +0,0 @@
----
-title: Permissions
-description: 'Permission patterns provide or restrict access to users.'
----
-
-## With Form Inputs
-```html{.example}
-<wa-card with-header style="max-width: 72ch; margin: 0 auto;">
-  <div slot="header" class="wa-split">
-    <h2 class="wa-heading-m">Invite Team Members</h2>
-    <wa-icon name="close"></wa-icon>
-  </div>
-  <div class="wa-stack wa-gap-2xl">
-    <div class="wa-align-items-end wa-flank:end wa-gap-2xs">
-      <wa-input label="Email" placeholder="contact@example.com"></wa-input>
-      <wa-button variant="success">Send Invite</wa-button>
-    </div>
-
-    <div class="wa-stack">
-      <span class="wa-heading-s">Project Members</span>
-      <div class="wa-stack wa-gap-xl">
-        <div class="wa-flank">
-          <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=1961&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
-          <div class="wa-split">
-            <div class="wa-stack wa-gap-0">
-              <span class="wa-heading-xs">Jessica Jones</span>
-              <span class="wa-caption-m" style="word-break: break-word">jessica.jones@example.com</span>
-            </div>
-            <wa-select value="owner">
-              <wa-option value="owner">Owner</wa-option>
-              <wa-option value="admin">Admin</wa-option>
-              <wa-option value="can-edit">Can Edit</wa-option>
-              <wa-option value="view-only">View Only</wa-option>
-            </wa-select>
-          </div>
-        </div>
-        <div class="wa-flank">
-          <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1566492031773-4f4e44671857?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
-          <div class="wa-split">
-            <div class="wa-stack wa-gap-0">
-              <span class="wa-heading-xs">Foggy Nelson</span>
-              <span class="wa-caption-m" style="word-break: break-word">foggy.nelson@example.com</span>
-            </div>
-            <wa-select value="admin">
-              <wa-option value="owner">Owner</wa-option>
-              <wa-option value="admin">Admin</wa-option>
-              <wa-option value="can-edit">Can Edit</wa-option>
-              <wa-option value="view-only">View Only</wa-option>
-            </wa-select>
-          </div>
-        </div>
-        <div class="wa-flank">
-          <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
-          <div class="wa-split">
-            <div class="wa-stack wa-gap-0">
-              <span class="wa-heading-xs">Karen Page</span>
-              <span class="wa-caption-m" style="word-break: break-word">karen.page@example.com</span>
-            </div>
-            <wa-select value="can-edit">
-              <wa-option value="owner">Owner</wa-option>
-              <wa-option value="admin">Admin</wa-option>
-              <wa-option value="can-edit">Can Edit</wa-option>
-              <wa-option value="view-only">View Only</wa-option>
-            </wa-select>
-          </div>
-        </div>
-        <div class="wa-flank">
-          <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
-          <div class="wa-split">
-            <div class="wa-stack wa-gap-0">
-              <span class="wa-heading-xs">Matt Murdock</span>
-              <span class="wa-caption-m" style="word-break: break-word">matt.murdock@example.com</span>
-            </div>
-            <wa-select value="view-only">
-              <wa-option value="owner">Owner</wa-option>
-              <wa-option value="admin">Admin</wa-option>
-              <wa-option value="can-edit">Can Edit</wa-option>
-              <wa-option value="view-only">View Only</wa-option>
-            </wa-select>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="wa-align-items-end wa-flank:end wa-gap-2xs">
-      <wa-input label="Share Link" value="https://sharelink3435re.com" disabled></wa-input>
-      <wa-button variant="brand" appearance="filled outlined">
-        <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
-        Copy Link
-      </wa-button>
-    </div>
-  </div>
-</wa-card>
-```
-
-## Link Settings
-```html {.example}
-<wa-card style="max-width: 45ch; margin: 0 auto;">
-  <div class="wa-stack">
-     <h2 class="wa-heading-m">Manage Link</h2>
-    <wa-input label="Expiration Date" type="date"></wa-input>
-    <wa-radio-group
-      label="Share Limit"
-      orientation="horizontal"
-      name="share-limit"
-      value="0"
-    >
-      <wa-radio-button value="0">None</wa-radio-button>
-      <wa-radio-button value="5">5</wa-radio-button>
-      <wa-radio-button value="10">10</wa-radio-button>
-      <wa-radio-button value="50">50</wa-radio-button>
-      <wa-radio-button value="100">100</wa-radio-button>
-    </wa-radio-group>
-     <wa-divider></wa-divider>
-    <wa-switch hint="Members are removed after logging out." checked>Temporary Access</wa-switch>
-    <div class="wa-cluster wa-gap-xs" style="justify-content: flex-end">
-    <wa-button size="small" appearance="outlined" pill>Cancel</wa-button>
-    <wa-button size="small" variant="brand" pill>Generate</wa-button>
-  </div>
-  </div>
-  
-</wa-card>
-```
-
-## Role Settings
-```html {.example}
-<div style="max-width: 78ch; margin: 0 auto;">
-  <h2>Settings</h2>
-  <p>Update settings for this server.</p>
-  <wa-tab-group>
-  <wa-tab panel="general">
-    <div class="wa-cluster">
-      <wa-icon name="user"></wa-icon>
-      <span>User Permissions</span>
-    </div>
-  </wa-tab>
-  <wa-tab-panel name="general">
-    <wa-card>
-      <div class="wa-flank">
-        <wa-avatar image="https://images.unsplash.com/photo-1741289308283-feba56f857cc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGJlYXJkfGVufDB8MnwwfHx8Mg%3D%3D" alt="image avatar"></wa-avatar>
-        <div class="wa-split">
-          <div class="wa-stack wa-gap-xs">
-            <span class="wa-heading-s">Kris Kringle</span>
-            <span class="wa-caption-m">Admin</span>
-          </div>
-          <wa-button appearance="plain">
-            <wa-icon slot="prefix" name="edit"></wa-icon>
-            Edit Profile
-          </wa-button>
-        </div>
-      </div>
-    </wa-card>
-    <table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Role</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-         <div class="wa-flank">
-            <wa-avatar image="https://images.unsplash.com/photo-1579824894326-77ec5aaf8703?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fHJlaW5kZWVyfGVufDB8MnwwfHx8Mg%3D%3D"></wa-avatar>
-            <span class="wa-caption-m">Dasher</span>
-          </div>
-      </td>
-      <td>
-        <wa-select value="moderator">
-          <wa-option value="moderator">Moderator</wa-option>
-          <wa-option value="contributor">Contributor</wa-option>
-          <wa-option value="reader">Reader</wa-option>
-        </wa-select>  
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <div class="wa-flank">
-            <wa-avatar image="https://images.unsplash.com/photo-1691065686144-916ff29d1b4f?q=80&w=2666&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
-            <span class="wa-caption-m">Dancer</span>
-          </div>
-      </td>
-
-      <td>
-        <wa-select value="moderator">
-          <wa-option value="moderator">Moderator</wa-option>
-          <wa-option value="contributor">Contributor</wa-option>
-          <wa-option value="reader">Reader</wa-option>
-        </wa-select>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <div class="wa-flank">
-            <wa-avatar image="https://images.unsplash.com/photo-1616742618872-9e8a890d90b2?q=80&w=2712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
-            <span class="wa-caption-m">Prancer</span>
-          </div>
-      </td>
-      <td>
-        <wa-select value="contributor">
-          <wa-option value="moderator">Moderator</wa-option>
-          <wa-option value="contributor">Contributor</wa-option>
-          <wa-option value="reader">Reader</wa-option>
-        </wa-select>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <div class="wa-flank">
-            <wa-avatar image="https://images.unsplash.com/photo-1728290403857-1b7909db2baa?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
-            <span class="wa-caption-m">Vixen</span>
-          </div>
-      </td>
-      <td>
-        <wa-select value="reader">
-          <wa-option value="moderator">Moderator</wa-option>
-          <wa-option value="contributor">Contributor</wa-option>
-          <wa-option value="reader">Reader</wa-option>
-        </wa-select>
-      </td>
-    </tr>
-  </tbody>
-</table>
-  </wa-tab-panel>
- 
-</wa-tab-group>
-</div>
-```

docs/docs/patterns/app/pricing.md

@@ -1,167 +0,0 @@
----
-title: Pricing
-description: 'Help users make informed purchasing decisions with clear, structured pricing.'
----
-
-## Three Tiers
-
-```html{.example}
-<div class="wa-grid">
-  <wa-card>
-    <div class="wa-stack">
-      <div class="wa-cluster wa-heading-l">
-        <wa-icon name="apple-core"></wa-icon>
-        <h3>Lite</h3>
-      </div>
-      <span class="wa-flank wa-align-items-baseline wa-gap-2xs">
-        <span class="wa-heading-2xl">$60</span>
-        <span class="wa-caption-l">per year</span>
-      </span>
-      <p class="wa-caption-l">An online-only plan for web-based projects.</p>
-      <wa-button variant="brand" appearance="outlined">Get Lite</wa-button>
-    </div>
-    <div slot="footer" class="wa-stack">
-      <h4 class="wa-heading-s">What You Get</h4>
-      <div class="wa-stack">
-        <div class="wa-flank">
-          <wa-icon name="user" fixed-width></wa-icon>
-          <span class="wa-caption-m">1 user</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="suitcase" fixed-width></wa-icon>
-          <span class="wa-caption-m">2 custom kits</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="chart-simple" fixed-width></wa-icon>
-          <span class="wa-caption-m">Up to 100k pageviews</span>
-        </div>
-      </div>
-    </div>
-  </wa-card>
-  <wa-card>
-    <div class="wa-stack">
-      <div class="wa-split">
-        <div class="wa-cluster wa-heading-l">
-          <wa-icon name="apple-whole"></wa-icon>
-          <h3>Pro</h3>
-        </div>
-        <wa-badge>Most Popular</wa-badge>
-      </div>
-      <span class="wa-flank wa-align-items-baseline wa-gap-2xs">
-        <span class="wa-heading-2xl">$120</span>
-        <span class="wa-caption-l">per year</span>
-      </span>
-      <p class="wa-caption-l">A great all-around plan for online or desktop use.</p>
-      <wa-button variant="brand">Get Pro</wa-button>
-    </div>
-    <div slot="footer" class="wa-stack">
-      <h4 class="wa-heading-s">What You Get</h4>
-      <div class="wa-stack">
-        <div class="wa-flank">
-          <wa-icon name="user" fixed-width></wa-icon>
-          <span class="wa-caption-m">5 users</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="suitcase" fixed-width></wa-icon>
-          <span class="wa-caption-m">20 custom kits</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="chart-simple" fixed-width></wa-icon>
-          <span class="wa-caption-m">Up to 1M pageviews</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="arrow-down-to-line" fixed-width></wa-icon>
-          <span class="wa-caption-m">Kit downloads</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="cloud-plus" fixed-width></wa-icon>
-          <span class="wa-caption-m">Cloud hosting</span>
-        </div>
-      </div>
-    </div>
-  </wa-card>
-  <wa-card>
-    <div class="wa-stack">
-      <div class="wa-cluster wa-heading-l">
-        <wa-icon name="crate-apple"></wa-icon>
-        <h3>Max</h3>
-      </div>
-      <span class="wa-flank wa-align-items-baseline wa-gap-2xs">
-        <span class="wa-heading-2xl">$600</span>
-        <span class="wa-caption-l">per year</span>
-      </span>
-      <p class="wa-caption-l">Our biggest plan with more of everything.</p>
-      <wa-button variant="brand" appearance="outlined">Get Max</wa-button>
-    </div>
-    <div slot="footer" class="wa-stack">
-      <h4 class="wa-heading-s">What You Get</h4>
-      <div class="wa-stack">
-        <div class="wa-flank">
-          <wa-icon name="user" fixed-width></wa-icon>
-          <span class="wa-caption-m">50 users</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="suitcase" fixed-width></wa-icon>
-          <span class="wa-caption-m">Unlimited custom kits</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="chart-simple" fixed-width></wa-icon>
-          <span class="wa-caption-m">Up to 10M pageviews</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="arrow-down-to-line" fixed-width></wa-icon>
-          <span class="wa-caption-m">Kit downloads</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="cloud-plus" fixed-width></wa-icon>
-          <span class="wa-caption-m">Cloud hosting</span>
-        </div>
-      </div>
-    </div>
-  </wa-card>
-</div>
-```
-
-## Single Tier
-
-```html {.example}
-<wa-card>
-  <div class="wa-grid">
-    <div class="wa-stack">
-      <h3 class="wa-heading-l">Lifetime Membership</h3>
-      <p>Learn at your own pace with expert-led content, exclusive resources, and a community of like-minded learners.</p>
-      <wa-divider></wa-divider>
-      <h4 class="wa-heading-s">Membership Includes:</h4>
-      <div class="wa-grid">
-        <div class="wa-flank wa-gap-xs">
-          <wa-icon name="check"></wa-icon>
-          <span class="wa-caption-m">Private forum access</span>
-        </div>
-        <div class="wa-flank wa-gap-xs">
-          <wa-icon name="check"></wa-icon>
-          <span class="wa-caption-m">Priority admission to events</span>
-        </div>
-        <div class="wa-flank wa-gap-xs">
-          <wa-icon name="check"></wa-icon>
-          <span class="wa-caption-m">Yearly skill assessment</span>
-        </div>
-        <div class="wa-flank wa-gap-xs">
-          <wa-icon name="check"></wa-icon>
-          <span class="wa-caption-m">Members-only swag</span>
-        </div>
-      </div>
-    </div>
-    <wa-callout variant="neutral" appearance="filled">
-      <div class="wa-stack wa-align-items-center" style="justify-content: center">
-        <h4 class="wa-heading-s">Pay Once, Own it Forever</h4>
-        <div class="wa-cluster wa-align-items-baseline wa-gap-2xs">
-          <span class="wa-heading-3xl">$459</span>
-          <span>USD</span>
-        </div>
-        <wa-button variant="brand" style="width: 100%">Get Access</wa-button>
-        <small class="wa-caption-m">30-day money back guarantee</small>
-      </div>
-    </wa-callout>
-  </div>
-</wa-card>
-```

docs/docs/patterns/blog.md

@@ -1,7 +1,6 @@
 ---
 title: Blog
 description: TODO
-unlisted: true
 ---
 
 TODO Page Description

docs/docs/patterns/business.md

@@ -1,7 +1,6 @@
 ---
 title: Business
 description: TODO
-unlisted: true
 ---
 
 TODO Page Description

docs/docs/patterns/ecommerce-category-filter.md

@@ -0,0 +1,13 @@
+---
+title: Category Filter
+description: TODO
+parent: ecommerce
+tags: e-commerce
+---
+
+TODO Page Description
+
+## With inline actions and expandable sidebar filters
+```html{.example}
+
+```

docs/docs/patterns/ecommerce-category-preview.md

@@ -0,0 +1,12 @@
+---
+title: Category Preview
+description: TODO
+parent: ecommerce
+tags: e-commerce
+---
+
+TODO Page Description
+
+## Three Column (WIP)
+
+```

docs/docs/patterns/ecommerce-order-history.md

@@ -0,0 +1,14 @@
+---
+title: Order History
+description: TODO
+parent: ecommerce
+tags: e-commerce
+---
+
+TODO Page Description
+
+## Invoice panels
+
+```html{.example}
+
+```

docs/docs/patterns/ecommerce-order-summary.md

@@ -0,0 +1,13 @@
+---
+title: Product List
+description: TODO
+parent: ecommerce
+tags: e-commerce
+---
+
+TODO Page Description
+
+## With split image
+```html{.example}
+
+```

docs/docs/patterns/ecommerce-product-detail.md

@@ -0,0 +1,129 @@
+---
+title: Product Detail
+description: TODO
+parent: ecommerce
+tags: e-commerce
+---
+
+TODO Page Description
+
+## With color and size selector
+```html{.example}
+  <div class="with-inline-price">
+   <wa-card with-header>
+    <div class="card-header" slot="header">
+      <span class="card-title">Graphic Tank</span>
+      <wa-icon-button name="close" label="close-modal"></wa-icon-button>
+    </div>
+    <div class="card-body">
+      <img style="border-radius: var(--border-radius)" src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
+      <form class="detail">
+        <span class="price">$32</span>
+        <span class="rating"><wa-rating></wa-rating><a style="margin-left: .5rem; " href="*">36 Reviews</a></span>
+        <wa-radio-group style="margin-bottom: 1rem;" label="Select an option" name="a" value="1">
+  <wa-radio-button value="Black">Black</wa-radio-button>
+  <wa-radio-button value="White">White</wa-radio-button>
+  <wa-radio-button value="Gray">Gray</wa-radio-button>
+</wa-radio-group>
+<wa-select label="Sizes" placeholder="select size">
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
+<wa-button size="medium" style="width: 100%; margin-top: auto;">Medium</wa-button>
+      </form>
+    </div>
+   </wa-card>
+  </div>
+  <style>
+    .with-inline-price {
+      wa-card {
+        width: 100%;
+        .card-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .card-title {
+            font-size: large;
+            font-weight: 600;
+          }
+        }
+        .card-body {
+          display: grid;
+          grid-template-columns: 35% 1fr;
+          gap: 1rem;
+
+          .detail {
+            display: flex;
+            flex-direction: column;
+
+            .price {
+              font-size: xx-large;
+              font-weight: 600;
+            }
+            .rating {
+              margin-bottom: 1rem;
+            }
+          }
+        }
+      }
+    }
+  </style>
+```
+
+## with large selector
+```html{.example}
+  <wa-card class="large-selector">
+    <div class="card-body">
+      <div style="grid-column: 1/6">
+      <img style="border-radius: var(--border-radius); height: 100%; object-fit: cover;" src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
+      </div>
+      <div style="grid-column: 6/-1" class="info">
+        <h2>Basic Tank</h2>
+        <wa-icon-button name="close" label="close-modal"></wa-icon-button>
+        <section>
+          <p style="font-size: x-large;font-weight: 600;">$32</p>
+          <div style="display: flex; align-items: flex-start">
+            <p>3.9</p>
+            <wa-rating></wa-rating>
+            <a href="*" style="margin-left: auto;">See all 512 Reviews</a>
+          </div>
+        </section>
+        <section>
+          <form>
+            <wa-radio-group label="Color" hint="Choose the most appropriate option." name="a" value="black" style="margin-bottom: 1rem;">
+              <wa-radio value="black">Black</wa-radio>
+              <wa-radio value="gray">Gray</wa-radio>
+            </wa-radio-group>
+            <wa-radio-group label="Size" hint="Select an option that makes you proud." name="a" value="medium"  style="margin-bottom: 1rem;">
+              <wa-radio-button value="small">S</wa-radio-button>
+              <wa-radio-button value="medium">M</wa-radio-button>
+              <wa-radio-button value="large">L</wa-radio-button>
+              <wa-radio-button value="extra-large">XL</wa-radio-button>
+            </wa-radio-group>
+            <wa-button size="medium" style="width: 100%; margin-top: auto;margin-bottom: 1rem;">Medium</wa-button>
+            <a href="*" style="display: inline-block;width: 100%;text-align: center;">View full details</a>
+          </form>
+        </section>
+      </div>
+    </div>
+  </wa-card>
+<style>
+  .large-selector .card-body {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 1rem;
+
+    .info {
+      position: relative;
+
+      wa-icon-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    }
+  }
+</style>
+```

docs/docs/patterns/ecommerce-product-list.md

@@ -0,0 +1,166 @@
+---
+title: Product Lists
+description: TODO
+parent: ecommerce
+tags: e-commerce
+---
+
+TODO Page Description
+## With Product Grid
+
+```html{.example}
+  <div class="with-product-grid">
+    <div class="grid-item">
+      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+      <div class="grid-item-name">Shirt</div>
+      <wa-rating label="Rating" readonly value="3"></wa-rating>
+      <a class="grid-item-reviews" href="#">38 Reviews</a>
+      <div class="grid-item-price">$170</div>
+    </div>
+    <div class="grid-item">
+      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+      <div class="grid-item-name">Shirt</div>
+      <wa-rating label="Rating" readonly value="3"></wa-rating>
+      <a class="grid-item-reviews" href="#">38 Reviews</a>
+      <div class="grid-item-price">$170</div>
+    </div>
+    <div class="grid-item">
+      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+      <div class="grid-item-name">Shirt</div>
+      <wa-rating label="Rating" readonly value="3"></wa-rating>
+      <a class="grid-item-reviews" href="#">38 Reviews</a>
+      <div class="grid-item-price">$170</div>
+    </div>
+    <div class="grid-item">
+      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+      <div class="grid-item-name">Shirt</div>
+      <wa-rating label="Rating" readonly value="3"></wa-rating>
+      <a class="grid-item-reviews" href="#">38 Reviews</a>
+      <div class="grid-item-price">$170</div>
+    </div>
+  </div>
+  <style>
+    .with-product-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      border: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
+
+      .grid-item {
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      .grid-item:nth-of-type(odd) {
+
+        border-right: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
+      }
+      .grid-item:not(:nth-last-child(-n + 2)) {
+        border-bottom: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
+      }
+
+      .grid-item-image {
+        width: 100%;
+        object-fit: cover;
+      }
+
+      .grid-item-name {
+        margin-top: 1rem;
+        font-weight: var(--wa-font-weight-bold);
+      }
+
+      .grid-item wa-rating {
+        --symbol-size: var(--wa-font-size-m);
+        margin-top: .5rem;
+      }
+      .grid-item-reviews {
+        --wa-link-decoration-default: none;
+        --wa-color-text-link: var(--wa-color-gray-50);
+        font-size: var(--wa-font-size-m);
+      }
+      .grid-item-price {
+        font-size: var(--wa-font-size-2xl);
+        font-weight: var(--wa-font-weight-bold);
+      }
+    }
+  </style>
+```
+## Card with full details
+```html{.example}
+  <div class="card-with-details">
+   <wa-card with-footer>
+    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+    <div slot="footer" class="card-footer details">
+      <span class="detail-name">Basic Tee 8-pack</span>
+      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
+      <span class="detail-color">8 colors</span>
+      <span class="detail-price">$256</span>
+    </div>
+   </wa-card>
+   <wa-card with-footer>
+    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+    <div slot="footer" class="card-footer details">
+      <span class="detail-name">Basic Tee 8-pack</span>
+      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
+      <span class="detail-color">8 colors</span>
+      <span class="detail-price">$256</span>
+    </div>
+   </wa-card>
+   <wa-card with-footer>
+    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+    <div slot="footer" class="card-footer details">
+      <span class="detail-name">Basic Tee 8-pack</span>
+      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
+      <span class="detail-color">8 colors</span>
+      <span class="detail-price">$256</span>
+    </div>
+   </wa-card>
+   <wa-card with-footer>
+    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+    <div slot="footer" class="card-footer details">
+      <span class="detail-name">Basic Tee 8-pack</span>
+      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
+      <span class="detail-color">8 colors</span>
+      <span class="detail-price">$256</span>
+    </div>
+   </wa-card>
+  </div>
+  <style>
+    .card-with-details {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1rem;
+    }
+    .card-with-details wa-card::part(body) {
+        padding: 0;
+      }
+    .card-with-details .card-footer {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .details {
+      .detail-description {
+        color: var(--wa-color-gray-50);
+      }
+      .detail-name {
+        font-size: var(--wa-font-size-l);
+        font-weight: var(--wa-font-weight-action);
+      }
+      .detail-color {
+        color: var(--wa-color-gray-50);
+        font-style: italic;
+      }
+      .detail-price {
+        font-size: var(--wa-font-size-xl);
+        font-weight: var(--wa-font-weight-action);
+      }
+    }
+
+  </style>
+```
+## With color swatches (WIP)
+```html{.example}
+
+```

docs/docs/patterns/ecommerce-product-review.md

@@ -0,0 +1,465 @@
+---
+title: Product Reviews
+description: TODO
+parent: ecommerce
+tags: e-commerce
+---
+
+TODO Page Description
+
+## With images grid
+```html{.example}
+<div class="with-image-grid">
+  <wa-breadcrumb>
+    <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Men's</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
+  </wa-breadcrumb>
+  <div class="image-grid">
+    <img src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
+    <img src="/assets/images/patterns/gervyn-louis-KXvd7y7AU6Q-unsplash.jpg" />
+    <img src="/assets/images/patterns/gervyn-louis-semwwyXFQho-unsplash.jpg" />
+    <img src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+  </div>
+  <div>
+    <h2>Tank top</h2>
+    <p>The Basic Tee 6-Pack allows you to fully express your vibrant personality with three grayscale options. Feeling adventurous? Put on a heather gray tee. Want to be a trendsetter? Try our exclusive colorway: "Black". Need to add an extra pop of color to your outfit? Our white tee has you covered.</p>
+    <h3>Highlights</h3>
+    <ul>
+      <li>Hand cut and sewn locally</li>
+    </ul>
+
+    <h3>Highlights</h3>
+    <p>The 6-Pack includes two black, two white, and two heather gray Basic Tees. Sign up for our subscription service and be the first to get new, exciting colors, like our upcoming "Charcoal Gray" limited release.</p>
+
+    <span>$192</span>
+    <div>
+      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
+      <a href="#">117 Reviews</a>
+    </div>
+    <wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
+  <wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
+  <wa-button>Add to Cart</wa-button>
+  </div>
+</div>
+<style>
+  .with-image-grid {
+    wa-breadcrumb::part(base) {
+      margin-bottom: 1rem;
+    }
+
+    .image-grid {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      gap: 1rem;
+    }
+
+    .image-grid img:nth-of-type(1) {
+      grid-column: 1/-1;
+    }
+
+    .image-grid img:nth-of-type(2) {
+      grid-column: 1/7;
+    }
+    .image-grid img:nth-of-type(3) {
+      grid-column: 7/-1;
+    }
+     .image-grid img:nth-of-type(4) {
+      grid-column: 1/-1;
+    }
+  }
+</style>
+```
+
+## With Tiered Images
+
+```html{.example}
+<div class="with-tiered-images">
+  <wa-breadcrumb>
+    <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Men's</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
+  </wa-breadcrumb>
+  <div>
+    <div class="heading">
+      <h2>Basic Tee</h2>
+      <span style="font-size: var(--wa-font-size-2xl)">$35</span>
+    </div>
+    <div class="rating">
+      <span>3.9</span>
+       <wa-rating label="Rating" precision="0.5" value="3.9"></wa-rating>
+      <a href="#">117 Reviews</a>
+    </div>
+    <div class="tiered-images">
+      <img src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
+      <img src="/assets/images/patterns/gervyn-louis-KXvd7y7AU6Q-unsplash.jpg" />
+      <img src="/assets/images/patterns/gervyn-louis-semwwyXFQho-unsplash.jpg" />
+    </div>
+  </div>
+  <wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
+  <wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
+ <wa-button>Add to Cart</wa-button>
+ <h3>Description</h3>
+ <p>The Basic tee is an honest new take on a classic. The tee uses super soft, pre-shrunk cotton for true comfort and a dependable fit. They are hand cut and sewn locally, with a special dye technique that gives each tee it's own look.</p>
+ <p>Looking to stock your closet? The Basic tee also comes in a 3-pack or 5-pack at a bundle discount.</p>
+ <hr />
+ <h3>Highlights</h3>
+    <ul>
+      <li>Hand cut and sewn locally</li>
+    </ul>
+  <div>
+    <wa-card>
+      <wa-icon family="solid" name="earth-americas"></wa-icon>
+      <h3>International delivery</h3>
+      <p>Get your order in 2 years</p>
+    </wa-card>
+    <wa-card>
+      <wa-icon family="solid" name="earth-americas"></wa-icon>
+      <h3>International delivery</h3>
+      <p>Get your order in 2 years</p>
+
+    </wa-card>
+  </div>
+</div>
+<style>
+  .with-tiered-images {
+    wa-breadcrumb::part(base) {
+      margin-bottom: 1rem;
+    }
+    .heading {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .rating {
+      display: flex;
+
+      span {
+        display: inline-block;
+        margin-right: 1rem;
+      }
+
+      wa-rating {
+        margin-right: 1rem;
+      }
+    }
+
+    .tiered-images {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      gap: 1rem;
+    }
+
+    .tiered-images img:nth-of-type(1) {
+      grid-column: 1/-1;
+    }
+
+    .tiered-images img:nth-of-type(2) {
+      grid-column: 1/7;
+    }
+    .tiered-images img:nth-of-type(3) {
+      grid-column: 7/-1;
+  }
+</style>
+```
+## with images and expandable details
+
+```html {.example}
+<wa-carousel class="carousel-thumbnails" navigation loop>
+  <wa-carousel-item>
+    <img
+      alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+      src="/assets/examples/carousel/pullover-1.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+      src="/assets/examples/carousel/pullover-2.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+      src="/assets/examples/carousel/pullover-3.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+      src="/assets/examples/carousel/pullover-4.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+      src="/assets/examples/carousel/pullover-5.jpg"
+    />
+  </wa-carousel-item>
+</wa-carousel>
+
+<div class="thumbnails">
+  <div class="thumbnails__scroller">
+    <img alt="Thumbnail by 1" class="thumbnails__image active" src="/assets/examples/carousel/pullover-1.jpg" />
+    <img alt="Thumbnail by 2" class="thumbnails__image" src="/assets/examples/carousel/pullover-2.jpg" />
+    <img alt="Thumbnail by 3" class="thumbnails__image" src="/assets/examples/carousel/pullover-3.jpg" />
+    <img alt="Thumbnail by 4" class="thumbnails__image" src="/assets/examples/carousel/pullover-4.jpg" />
+    <img alt="Thumbnail by 5" class="thumbnails__image" src="/assets/examples/carousel/pullover-5.jpg" />
+  </div>
+</div>
+<div>
+  <h3 style="--wa-space-xl: 0;">Pullover Sweater</h3>
+  <span class="price-big">$140</span>
+  <wa-rating class="sweater-rating" label="Rating" precision="0.5" value="2.5"></wa-rating>
+  <p>The Zip Tote Basket is the perfect midpoint between shopping tote and comfy backpack. With convertible straps, you can hand carry, should sling, or backpack this convenient and spacious bag. The zip top and durable canvas construction keeps your goods protected for all-day use.</p>
+  <wa-radio-group label="Select Color" hint="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1"></wa-radio-button>
+  <wa-radio-button value="2"></wa-radio-button>
+  <wa-radio-button value="3"></wa-radio-button>
+</wa-radio-group>
+<div>
+  <wa-button>Add to cart</wa-button>
+  <wa-icon-button name="gear" label="Settings"></wa-icon-button>
+</div>
+<div class="details-group-example">
+  <wa-details summary="First" open>
+    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="Second">
+    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="Third">
+    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>
+</div>
+
+<style>
+  .carousel-thumbnails {
+    --slide-aspect-ratio: 3 / 2;
+  }
+
+  wa-radio-button #shadow-root div .button--medium {
+    padding: var(--wa-space-xs) var(--wa-space-xs);
+  }
+
+  .color-circle {
+    --background: #000;
+    background: var(--background);
+
+    width: 50px;
+    height: 100%;
+  }
+
+  .sweater-rating {
+    margin-bottom: 1rem;
+  }
+  .price-big {
+    display: block;
+    font-size: 32px;
+  }
+
+  .thumbnails {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1rem;
+  }
+
+  .thumbnails__scroller {
+    display: flex;
+    gap: var(--wa-space-s);
+    overflow-x: auto;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+    scroll-padding: var(--wa-space-s);
+  }
+
+  .thumbnails__scroller::-webkit-scrollbar {
+    display: none;
+  }
+
+  .thumbnails__image {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+
+    opacity: 0.3;
+    will-change: opacity;
+    transition: 250ms opacity;
+
+    cursor: pointer;
+  }
+
+  .thumbnails__image.active {
+    opacity: 1;
+  }
+  .details-group-example wa-details:not(:last-of-type) {
+    margin-bottom: var(--wa-space-2xs);
+  }
+</style>
+
+<script>
+  {
+    const carousel = document.querySelector('.carousel-thumbnails');
+    const scroller = document.querySelector('.thumbnails__scroller');
+    const thumbnails = document.querySelectorAll('.thumbnails__image');
+
+    scroller.addEventListener('click', e => {
+      const target = e.target;
+
+      if (target.matches('.thumbnails__image')) {
+        const index = [...thumbnails].indexOf(target);
+        carousel.goToSlide(index);
+      }
+    });
+
+    carousel.addEventListener('wa-slide-change', e => {
+      const slideIndex = e.detail.index;
+
+      [...thumbnails].forEach((thumb, i) => {
+        thumb.classList.toggle('active', i === slideIndex);
+        if (i === slideIndex) {
+          thumb.scrollIntoView({
+            block: 'nearest'
+          });
+        }
+      });
+    });
+  }
+
+    const container = document.querySelector('.details-group-example');
+
+  // Close all other details when one is shown
+  container.addEventListener('wa-show', event => {
+    if (event.target.localName === 'wa-details') {
+      [...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details));
+    }
+  });
+</script>
+```
+
+## Split with image
+
+```html {.example}
+<div class="split-with-image">
+  <div class="div-1">
+    <wa-breadcrumb>
+    <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Men's</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
+    </wa-breadcrumb>
+    <h2>Everyday Ruck Snack</h2>
+    <span>
+      <span>$220</span> |
+      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
+      <span>1624 reviews</span>
+    </span>
+    <p>Don't compromise on snack-carrying capacity with this lightweight and spacious bag. The drawstring top keeps all your favorite chips, crisps, fries, biscuits, crackers, and cookies secure.</p>
+    <span><wa-icon family="solid" name="check"></wa-icon> In stock and ready to ship</span>
+
+
+  </div>
+  <div class="div-2">
+    <img src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
+  </div>
+  <div class="div-3">
+     <wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
+  </div>
+</div>
+<style>
+  .split-with-image {
+    display: grid;
+    /* grid-template-columns: repeat(2, 1fr); */
+    /* height: 1000px; */
+    /* gap: 1rem; */
+    .div-1 {
+
+    }
+    .div-2 {
+      /* background-color: black;
+      grid-column-start: 2;
+      grid-row: span 2 / span 2; */
+    }
+    .div-3 {
+
+    }
+  }
+</style>
+```
+## With tabs
+
+```html{.example}
+<div>
+  <wa-rating class="sweater-rating" label="Rating" precision="0.5" value="2.5"></wa-rating>
+  <h2>Application UI Icon Pack</h2>
+  <img alt="Sample of 30 icons with friendly and fun details in outline, filled, and brand color styles." src="https://tailwindui.com/img/ecommerce-images/product-page-05-product-01.jpg" class="aqk aql">
+  <p>The Application UI Icon Pack comes with over 200 icons in 3 styles: outline, filled, and branded. This playful icon pack is tailored for complex application user interfaces with a friendly and legible look.</p>
+  <wa-button variant="brand">Brand</wa-button>
+
+<wa-button variant="success">Success</wa-button>
+<hr />
+<h3>Highlights</h3>
+<ul>
+  <li>200+ SVG icons in 3 unique styles</li>
+  <li>Compatible with Figma, Sketch, and Adobe XD</li>
+  <li>Drawn on 24 x 24 pixel grid</li>
+</ul>
+<hr />
+<h3>License</h3>
+<p>For personal and professional use. You cannot resell or redistribute these icons in their original or modified state. <a href="#">Read full license</a></p>
+<hr />
+<h3>Share</h3>
+
+
+<wa-icon family="brands" name="facebook"></wa-icon>
+<wa-icon family="brands" name="instagram"></wa-icon>
+<wa-icon family="brands" name="x-twitter"></wa-icon>
+  <wa-tab-group>
+  <wa-tab panel="general">General</wa-tab>
+  <wa-tab panel="custom">Custom</wa-tab>
+  <wa-tab panel="advanced">Advanced</wa-tab>
+  <wa-tab panel="disabled" disabled>Disabled</wa-tab>
+
+  <wa-tab-panel name="general">
+    <div></div>
+    <div>
+      <h3>Hector Gibbons</h3>
+      <p>July 12, 2021</p>
+      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
+      <p>Blown away by how polished this icon pack is. Everything looks so consistent and each SVG is optimized out of the box so I can use it directly with confidence. It would take me several hours to create a single icon this good, so it's a steal at this price.</p>
+    </div>
+  </wa-tab-panel>
+  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
+  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
+  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
+</wa-tab-group>
+
+</div>
+
+```

docs/docs/patterns/ecommerce-shopping-cart.md

@@ -0,0 +1,10 @@
+---
+title: Shopping Cart
+description: TODO
+parent: ecommerce
+tags: e-commerce
+---
+
+TODO Page Description
+
+## Examples

docs/docs/patterns/ecommerce/category-filter.md

@@ -1,83 +0,0 @@
----
-title: Category Filter
-description: 'Helps the user find the right products with filters to refine search results by specific attributes.'
-icon: checkbox
----
-
-## Sidebar with Checkboxes & Expandable Filters
-
-```html{.example}
-  <h1>New Arrivals</h1>
-  <div class="wa-flank wa-align-items-start" style="--flank-size: 200px;">
-    <form class="wa-stack">
-      <wa-checkbox checked>All Products</wa-checkbox>
-      <wa-checkbox>Sale</wa-checkbox>
-      <wa-checkbox>Travel</wa-checkbox>
-      <wa-checkbox>Organization</wa-checkbox>
-      <wa-checkbox>Accessories</wa-checkbox>
-      <wa-details summary="Color" open>
-        <div class="wa-stack">
-          <wa-checkbox>White</wa-checkbox>
-          <wa-checkbox>Beige</wa-checkbox>
-          <wa-checkbox>Blue</wa-checkbox>
-          <wa-checkbox>Brown</wa-checkbox>
-          <wa-checkbox>Green</wa-checkbox>
-        </div>
-      </wa-details>
-      <wa-details summary="Category">
-        <div class="wa-stack">
-          <wa-checkbox>Outdoor</wa-checkbox>
-          <wa-checkbox>Indoor</wa-checkbox>
-          <wa-checkbox>All Weather</wa-checkbox>
-        </div>
-      </wa-details>
-      <wa-details summary="Size">
-        <div class="wa-stack">
-          <wa-checkbox>Small</wa-checkbox>
-          <wa-checkbox>Medium</wa-checkbox>
-          <wa-checkbox>Large</wa-checkbox>
-          <wa-checkbox>XL</wa-checkbox>
-          <wa-checkbox>XXL</wa-checkbox>
-        </div>
-      </wa-details>
-    </form>
-    <div class="wa-placeholder"></div>
-  </div>
-</div>
-```
-
-## Sidebar with Dropdowns
-
-```html{.example}
-  <h1>New Arrivals</h1>
- <div class="wa-flank wa-align-items-start">
-  <div class="wa-stack">
-    <wa-select label="Product Type" placeholder="Products" value="all-products">
-      <wa-option value="all-products">All Products</wa-option>
-      <wa-option value="sale">Sale</wa-option>
-      <wa-option value="travel">Travel</wa-option>
-      <wa-option value="organization">Organization</wa-option>
-      <wa-option value="accessories">Accessories</wa-option>
-    </wa-select>
-    <wa-divider></wa-divider>
-    <wa-select label="Color" placeholder="Color" value="black" multiple>
-      <wa-option value="black">Black</wa-option>
-      <wa-option value="white">White</wa-option>
-      <wa-option value="gray">Gray</wa-option>
-    </wa-select>
-    <wa-select label="Category" placeholder="Category" value="outdoor" multiple>
-      <wa-option value="outdoor">Outdoor</wa-option>
-      <wa-option value="indoor">Indoor</wa-option>
-      <wa-option value="all-weather">All Weather</wa-option>
-    </wa-select>
-    <wa-select label="Size" placeholder="Size" value="xl xxl" multiple>
-      <wa-option value="s">Small</wa-option>
-      <wa-option value="m">Medium</wa-option>
-      <wa-option value="l">Large</wa-option>
-      <wa-option value="xl">XL</wa-option>
-      <wa-option value="xxl">XXL</wa-option>
-    </wa-select>
-  </div>
-  <div class="wa-placeholder"></div>
-</div>
-```

docs/docs/patterns/ecommerce/category-preview.md

@@ -1,162 +0,0 @@
----
-title: Category Preview
-description: 'Help shoppers discover your product offerings with showcases of product categories.'
-icon: preview
----
-
-## Split with Image Grid
-
-```html {.example}
-<div class="wa-flank wa-align-items-start" style="--flank-size: 20rem;">
-  <div class="wa-stack wa-gap-2xl">
-    <h2 class="wa-heading-xl">Casual Collection</h2>
-    <p class="wa-body-s">Look good &mdash; without looking like you're trying too hard. Our casual collection includes laid back styles that work in <em>almost</em> any situation.</p>
-    <wa-button>View the Collection</wa-button>
-  </div>
-  <div class="wa-stack">
-    <div class="wa-frame:landscape wa-border-radius-s">
-      <img
-        src="https://images.unsplash.com/photo-1544441893-675973e31985?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-        alt="An analog watch, cotton pants, crew neck tee, and pair of tennis shoes (Photograph by Mnz)"
-      />
-    </div>
-    <div class="wa-grid">
-      <div class="wa-frame:landscape wa-border-radius-s">
-        <img
-          src="https://images.unsplash.com/photo-1548768041-2fceab4c0b85?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-          alt="Stack of three folded solid color tees (Photograph by Mnz)"
-        />
-      </div>
-      <div class="wa-frame:landscape wa-border-radius-s">
-        <img
-          src="https://images.unsplash.com/photo-1544441892-794166f1e3be?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-          alt="Pair of bright white tennis shoes(Photograph by Mnz)"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-## Columns with Tall Images
-
-```html {.example}
-<div class="wa-stack">
-  <h2 class="wa-heading-xl">Shop by Category</h2>
-  <div class="wa-grid">
-    <a href="" class="wa-stack wa-link-plain">
-      <div class="wa-frame:portrait wa-border-radius-s">
-        <img
-          src="https://uploads.webawesome.com/organization.jpg"
-          alt="Inside of a closet filled with clothes on wooden hangers and integrated shelving with shoes"
-        />
-      </div>
-      <span class="wa-caption-xl">Organization</span>
-    </a>
-    <a href="" class="wa-stack wa-link-plain">
-      <div class="wa-frame:portrait wa-border-radius-s">
-        <img
-          src="https://uploads.webawesome.com/bags.jpg"
-          alt="Young person hugging a small floral patterned book bag between their arms"
-        />
-      </div>
-      <span class="wa-caption-xl">Bags</span>
-    </a>
-    <a href="" class="wa-stack wa-link-plain">
-      <div class="wa-frame:portrait wa-border-radius-s">
-        <img
-          src="https://uploads.webawesome.com/outdoor-2.jpg"
-          alt="Person in a mountain clearing wearing a waterproof hooded windbreaker in black and orange"
-        />
-      </div>
-      <span class="wa-caption-xl">Outdoor</span>
-    </a>
-  </div>
-</div>
-```
-
-## Columns with Cards
-
-```html {.example}
-<div class="wa-stack">
-  <div class="wa-split">
-    <h2 class="wa-heading-xl">Shop by Category</h2>
-    <a href="" class="wa-cluster">
-      <span>Browse All Categories</span>
-      <wa-icon name="arrow-right"></wa-icon>
-    </a>
-  </div>
-  <div class="wa-grid">
-    <a href="" class="wa-link-plain">
-      <wa-card style="height: 100%">
-        <img
-          slot="image"
-          src="https://img.fortawesome.com/cfa83f3c/outdoor-3x.jpg"
-          alt="Two hikers wearing long canvas pants, weatherproof jackets, and backpacks"
-        />
-        <div class="wa-stack wa-gap-xs">
-          <span class="wa-heading-m">Outdoor</span>
-          <p class="wa-caption-m">Durable canvas gear for all conditions.</p>
-        </div>
-      </wa-card>
-    </a>
-    <a href="" class="wa-link-plain">
-      <wa-card style="height: 100%">
-        <img
-          slot="image"
-          src="https://img.fortawesome.com/cfa83f3c/home.jpg"
-          alt="Woman sitting on a couch in a bright home, wearing a thick knit sweater"
-        />
-        <div class="wa-stack wa-gap-xs">
-          <span class="wa-heading-m">Home</span>
-          <p class="wa-caption-m">Cozy up on the couch and relax in soft cotton.</p>
-        </div>
-      </wa-card>
-    </a>
-    <a href="" class="wa-link-plain">
-      <wa-card style="height: 100%">
-        <img
-          slot="image"
-          src="https://img.fortawesome.com/cfa83f3c/fitness.jpg"
-          alt="Athlete training in fitted active wear tee and shorts"
-        />
-        <div class="wa-stack wa-gap-xs">
-          <span class="wa-heading-m">Active</span>
-          <p class="wa-caption-m">Get fit in style with breathable poly blends.</p>
-        </div>
-      </wa-card>
-    </a>
-  </div>
-</div>
-```
-
-## Square Image Grid
-
-```html {.example}
-<div class="wa-stack wa-gap-2xl">
-  <div class="wa-stack wa-gap-xs wa-align-items-center">
-    <h2 class="wa-heading-xl">New Arrivals</h2>
-    <p class="wa-caption-l">Explore brand new furniture to accentuate your home aesthetic &mdash; just for you.</p>
-  </div>
-<div class="wa-grid">
-  <div class="wa-stack">
-    <div class="wa-frame wa-border-radius-m">
-      <img
-        src="https://uploads.webawesome.com/indoor-furniture.jpg"
-        alt="Sunny room with a mid-century modern couch, accent chair, and elegant lamp"
-      />
-    </div>
-    <wa-button appearance="outlined">View Indoor Furniture</wa-button>
-  </div>
-  <div class="wa-stack">
-    <div class="wa-frame wa-border-radius-m">
-      <img
-        src="https://uploads.webawesome.com/outdoor-furniture.jpg"
-        alt="Covered patio with rustic wooden cabinets, writing desk, and stool"
-      />
-    </div>
-    <wa-button appearance="outlined">View Outdoor Furniture</wa-button>
-  </div>
-</div>
-</div>
-```

docs/docs/patterns/ecommerce/checkout-form.md

@@ -1,244 +0,0 @@
----
-title: Checkout Form
-description: 'Let shoppers checkout with ease with streamlined forms to capture shipping and payment info.'
----
-
-
-## Full Form with Order Summary Card
-
-```html {.example}
-<div class="wa-grid wa-gap-3xl">
-  <div class="wa-stack">
-    <h4>Contact</h4>
-    <wa-input type="email" label="Email Address"></wa-input>
-    <wa-divider></wa-divider>
-    <h4>Shipping</h4>
-    <wa-select label="Country" value="us">
-      <wa-option value="ca">Canada</wa-option>
-      <wa-option value="mx">Mexico</wa-option>
-      <wa-option value="us">United States</wa-option>
-    </wa-select>
-    <div class="wa-grid">
-      <wa-input label="First Name"></wa-input>
-      <wa-input label="Last Name"></wa-input>
-    </div>
-    <wa-input label="Company"></wa-input>
-    <wa-input label="Address"></wa-input>
-    <div class="wa-grid" style="--min-column-size: 10ch;">
-      <wa-input label="City"></wa-input>
-      <wa-input label="State"></wa-input>
-      <wa-input label="Postal Code"></wa-input>
-    </div>
-    <wa-input label="Phone"></wa-input>
-    <wa-divider></wa-divider>
-      <wa-radio-group label="Shipping Method" name="shipping-method" value="standard" orientation="horizontal">
-      <wa-radio value="standard" hint="7-10  business days">Standard</wa-radio>
-      <wa-radio value="express" hint="2-5 business days">Express</wa-radio>
-    </wa-radio-group>
-    <wa-divider></wa-divider>
-    <h4>Payment</h4>
-    <wa-radio-group label="Payment Method" name="payment-method" value="credit" orientation="horizontal">
-      <wa-radio value="credit">Credit Card</wa-radio>
-      <wa-radio value="paypal">Paypal</wa-radio>
-    </wa-radio-group>
-    <wa-input label="Card Number"></wa-input>
-    <wa-input label="Name on Card"></wa-input>
-    <div class="wa-grid">
-      <wa-input label="Expiration Date" placeholder="MM/YY"></wa-input>
-      <wa-input label="CVC"></wa-input>
-    </div>
-  </div>
-  <div class="wa-stack">
-    <h4>Order Summary</h4>
-    <wa-card>
-      <div class="wa-stack">
-        <div class="wa-flank wa-align-items-start" style="--flank-size: 7rem">
-          <div class="wa-frame wa-border-radius-s">
-            <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM1MzB8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
-          </div>
-          <div class="wa-stack wa-gap-xs">
-            <div class="wa-split">
-              <span class="wa-heading-s">Dolce Runners</span>
-              <wa-icon-button name="trash" label="Remove from cart"></wa-icon-button>
-            </div>
-            <span class="wa-caption-m">Cream/Seafoam</span>
-            <span class="wa-caption-m">12.5</span>
-            <div class="wa-split">
-              <span>$135.00</span>
-              <wa-select value="1" size="small" style="max-width: 8ch">
-                <wa-option value="1">1</wa-option>
-                <wa-option value="2">2</wa-option>
-                <wa-option value="3">3</wa-option>
-              </wa-select>
-            </div>
-          </div>
-        </div>
-        <wa-divider></wa-divider>
-        <div class="wa-flank wa-align-items-start" style="--flank-size: 7rem">
-          <div class="wa-frame wa-border-radius-s">
-            <img src="https://images.unsplash.com/photo-1514989940723-e8e51635b782?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM1Njh8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
-          </div>
-          <div class="wa-stack wa-gap-xs">
-            <div class="wa-split">
-              <span class="wa-heading-s">Dunk High</span>
-              <wa-icon-button name="trash" label="Remove from cart"></wa-icon-button>
-            </div>
-            <span class="wa-caption-m">Sand/Amber/Black</span>
-            <span class="wa-caption-m">12.5</span>
-            <div class="wa-split">
-              <span>$180.00</span>
-              <wa-select value="1" size="small" style="max-width: 8ch">
-                <wa-option value="1">1</wa-option>
-                <wa-option value="2">2</wa-option>
-                <wa-option value="3">3</wa-option>
-              </wa-select>
-            </div>
-          </div>
-        </div>
-        <wa-divider></wa-divider>
-        <div class="wa-flank wa-align-items-start" style="--flank-size: 7rem">
-          <div class="wa-frame wa-border-radius-s">
-            <img src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM2MTF8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
-          </div>
-          <div class="wa-stack wa-gap-xs">
-            <div class="wa-split">
-              <span class="wa-heading-s">NB Runner</span>
-              <wa-icon-button name="trash" label="Remove from cart"></wa-icon-button>
-            </div>
-            <span class="wa-caption-m">Forrest Green</span>
-            <span class="wa-caption-m">12.5</span>
-            <div class="wa-split">
-              <span>$48.99</span>
-              <wa-select value="1" size="small" style="max-width: 8ch">
-                <wa-option value="1">1</wa-option>
-                <wa-option value="2">2</wa-option>
-                <wa-option value="3">3</wa-option>
-              </wa-select>
-            </div>
-          </div>
-        </div>
-        <wa-divider></wa-divider>
-        <div class="wa-stack">
-          <div class="wa-split wa-caption-m">
-            <span>Subtotal</span>
-            <span>$363.99</span>
-          </div>
-          <div class="wa-split wa-caption-m">
-            <span>Shipping</span>
-            <span>FREE</span>
-          </div>
-          <div class="wa-split wa-heading-m">
-            <span>Total</span>
-            <span>$363.99</span>
-          </div>
-        </div>
-        <wa-divider></wa-divider>
-        <wa-button variant="brand">Confirm Order</wa-button>
-      </div>
-    </wa-card>
-  </div>
-</div>
-```
-
-## Short Form with Order Summary
-
-```html {.example}
-<div class="wa-grid wa-gap-3xl">
-  <div class="wa-stack wa-gap-xl">
-    <h2>Payment</h2>
-    <wa-input type="email" label="Email" placeholder="ex. tanderson@metacortex.com">
-      <wa-icon slot="prefix" name="envelope"></wa-icon>
-    </wa-input>
-    <wa-input label="Card Number" placeholder="1234 1234 1234 1234">
-      <wa-icon slot="prefix" name="credit-card"></wa-icon>
-    </wa-input>
-    <div class="wa-grid" style="--min-column-size: 12ch">
-      <wa-input label="Expiration" placeholder="MM/YY">
-        <wa-icon slot="prefix" name="calendar"></wa-icon>
-      </wa-input>
-      <wa-input label="CVC" placeholder="CVC">
-        <wa-icon slot="prefix" name="lock"></wa-icon>
-      </wa-input>
-    </div>
-    <wa-input label="Cardholder Name" placeholder="Thomas Anderson">
-      <wa-icon slot="prefix" name="user"></wa-icon>
-    </wa-input>
-    <div class="wa-grid" style="--min-column-size: 12ch">
-      <wa-select label="Country" value="us">
-        <wa-icon slot="prefix" name="globe"></wa-icon>
-        <wa-option value="ca">Canada</wa-option>
-        <wa-option value="us">United States</wa-option>
-        <wa-option value="mx">Mexico</wa-option>
-      </wa-select>
-      <wa-input label="ZIP" placeholder="12345">
-        <wa-icon slot="prefix" name="location-dot"></wa-icon>
-      </wa-input>
-    </div>
-    <wa-switch checked>Sign me up for more offers from this store</wa-switch>
-    <wa-button variant="brand">Pay Now</wa-button>
-  </div>
-  <div class="wa-stack wa-gap-xl">
-    <h2>Order Summary</h2>
-    <div class="wa-split">
-      <div class="wa-cluster">
-        <div class="wa-frame wa-border-radius-m" style="max-width: 4rem">
-          <img src="https://images.unsplash.com/photo-1618677366787-9727aacca7ea?q=80&w=3255&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Glasses with black wire frames and dark tinted, circular lenses (Photograph by Colin Lloyd)">
-        </div>
-        <strong>Morpheus</strong>
-      </div>
-      <div class="wa-cluster">
-        <wa-input type="number" value="1" style="max-width: 5rem"></wa-input>
-        <span>$120.00</span>
-      </div>
-    </div>
-    <div class="wa-split">
-      <div class="wa-cluster">
-        <div class="wa-frame wa-border-radius-m" style="max-width: 4rem">
-          <img src="https://images.unsplash.com/photo-1511499767150-a48a237f0083?q=80&w=3558&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Glasses with rose gold wire frames and green tinted, circular lenses (Photograph by Charles Deluvio)">
-        </div>
-        <div class="wa-stack wa-gap-3xs">
-          <strong>Seraph</strong>
-          <em class="wa-caption-m">Tinted</em>
-        </div>
-      </div>
-      <div class="wa-cluster">
-        <wa-input type="number" value="1" style="max-width: 5rem"></wa-input>
-        <span>$180.00</span>
-      </div>
-    </div>
-    <div class="wa-split">
-      <div class="wa-cluster">
-        <div class="wa-frame wa-border-radius-m" style="max-width: 4rem">
-          <img src="https://images.unsplash.com/photo-1547104442-a40f335740cb?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Glasses with tortoise shell half frames and large, rounded lenses (Photograph by Sincerely Media)">
-        </div>
-        <div class="wa-stack wa-gap-3xs">
-          <strong>Keymaker</strong>
-          <em class="wa-caption-m">Glossy</em>
-        </div>
-      </div>
-      <div class="wa-cluster">
-        <wa-input type="number" value="1" style="max-width: 5rem"></wa-input>
-        <span>$50.00</span>
-      </div>
-    </div>
-    <div class="wa-flank:end">
-      <wa-input placeholder="Discount code or gift card"></wa-input>
-      <wa-button appearance="filled">Apply</wa-button>
-    </div>
-    <div class="wa-stack wa-gap-s">
-      <div class="wa-split">
-        <span>Subtotal</span>
-        <strong>$530.00</strong>
-      </div>
-      <div class="wa-split">
-        <span>Shipping</span>
-        <span>$8.00</span>
-      </div>
-      <div class="wa-split">
-        <strong>Total</strong>
-        <strong>$538.00</strong>
-      </div>
-    </div>
-  </div>
-</div>
-```

docs/docs/patterns/ecommerce/ecommerce.json

@@ -1,3 +0,0 @@
-{
-  "tags": ["ecommerce"]
-}

docs/docs/patterns/ecommerce/incentives.md

@@ -1,123 +0,0 @@
----
-title: Incentives
-description: 'Encourage shoppers to buy your products with value propositions, discounts, and promotions.'
----
-
-## 3 Column
-
-```html{.example}
-<div class="wa-gap-3xl wa-stack" style="max-width: 960px; margin: 0 auto;">
-  <div class="wa-align-items-center wa-grid">
-    <div>
-      <span class="wa-heading-xl">Get the Best Instruction from our Educators.</span>
-      <p class="wa-caption-l">At the beginning at least, but then we realized we could make a lot more money if we kinda stopped caring about that. Our new strategy is to write a bunch of things that look really good in the headlines, then clarify in the small print but hope people don't actually read it.</p>
-    </div>
-    <div class="wa-frame wa-border-radius-l">
-      <img src="https://uploads.webawesome.com/online-learning.jpg" />
-    </div>
-
-  </div>
-  <div class="wa-grid">
-    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="stopwatch" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">Learn at your Speed</span>
-      <p class="wa-caption-m">It's not actually free we just price it into the products. Someone's paying for it, and it's not us.</p>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="chart-line" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">Track Progress</span>
-      <p class="wa-caption-m">If it breaks in the first 10 years we'll replace it. After that you're on your own though.</p>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="people-group" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">Active Community</span>
-      <p class="wa-caption-m">If you don't like it, trade it to one of your friends for something of theirs. Don't send it here though.</p>
-    </div>
-  </div>
-</div>
-```
-## 2 Column with Cards
-
-```html{.example}
-<div class="wa-grid" style="--min-column-size: 41ch;">
-  <wa-card>
-    <div class="wa-flank">
-    <div>
-      <wa-icon name="hands" style="font-size: 2.5rem;"></wa-icon>
-    </div>
-    <div class="wa-gap-s wa-stack">
-      <span class="wa-heading-m">Hands-on training</span>
-      <p class="wa-caption-l">Upskill effectively with AI-powered coding exercises, practice tests, and quizzes.</p>
-    </div>
-    </div>
-  </wa-card>
-  <wa-card>
-    <div class="wa-flank">
-    <div>
-      <wa-icon name="medal" style="font-size: 2.5rem;"></wa-icon>
-    </div>
-    <div class="wa-gap-s wa-stack">
-      <span class="wa-heading-m">Certification prep</span>
-      <p class="wa-caption-l">Prep for industry-recognized certifications by solving real-world challenges and earn badges along the way</p>
-    </div>
-    </div>
-  </wa-card>
-  <wa-card>
-    <div class="wa-flank">
-    <div>
-      <wa-icon name="chart-line" style="font-size: 2.5rem;"></wa-icon>
-    </div>
-    <div class="wa-gap-s wa-stack">
-      <div class="wa-split wa-gap-2xs">
-        <span class="wa-heading-m">Insights and analytics</span>
-        <wa-badge appearance="filled outlined" variant="warning">Pro Plan</wa-badge>
-      </div>
-      <p class="wa-caption-l">Fast-track goals with advanced insights plus a dedicated customer success team to help drive effective learning.</p>
-    </div>
-    </div>
-  </wa-card>
-  <wa-card>
-    <div class="wa-flank">
-      <div>
-        <wa-icon name="puzzle-piece" style="font-size: 2.5rem;"></wa-icon>
-      </div>
-      <div class="wa-gap-s wa-stack">
-        <div class="wa-split wa-gap-2xs">
-          <span class="wa-heading-m">Customizable content</span>
-          <wa-badge appearance="filled outlined" variant="warning">Pro Plan</wa-badge>
-        </div>
-        <p class="wa-caption-l">Create tailored learning paths for team and organization goals and even host your own content and resources.</p>
-      </div>
-    </div>
-  </wa-card>
-</div>
-```
-
-## 4 Column
-
-```html{.example}
-<div>
-<div class="wa-grid">
-  <div class="wa-stack wa-gap-xs">
-      <wa-icon name="magnifying-glass" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">SEO Consulting</span>
-      <p class="wa-caption-m">It's not actually free we just price it into the products. Someone's paying for it, and it's not us.</p>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="chalkboard-user" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">In Person Training</span>
-      <p class="wa-caption-m">If it breaks in the first 10 years we'll replace it. After that you're on your own though.</p>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="people-arrows" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">1 on 1 Sessions</span>
-      <p class="wa-caption-m">If you don't like it, trade it to one of your friends for something of theirs. Don't send it here though.</p>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="code" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">Web Development</span>
-      <p class="wa-caption-m">If you don't like it, trade it to one of your friends for something of theirs. Don't send it here though.</p>
-    </div>
-</div>
-</div>
-```