Merge branch 'next' into patterns-exploration

* fix tabbable, add logo uploader

* Add icon chooser and project name to themer

* Add icon chooser and project name to themer

* make theme swapping less jarring

* add depth to themer

* update font families / font weights on theme change

* fix prettier

* update themer to reset values on theme change

* remove custom-elements.mjs

* prettier

* update comments in isVisible

* add PR #

* prettier

* update changelog

* prettier

* update changelog

* fix themer

* ensure target exists

* update icon search

* prettier

* fix select test

* prettier

* fix sprite svg

* remove custom-elements.mjs

* Add small validation to themer

* prettier

* fix conflicts

* prettier

* remove cem-manifest.mjs

---------

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

.vscode/settings.json

@@ -2,7 +2,7 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "debug.enableStatusBarColor": false
 }

cspell.json

@@ -47,6 +47,7 @@
     "dropdowns",
     "easings",
     "endraw",
+    "endregion",
     "enterkeyhint",
     "eqeqeq",
     "erroneou",
@@ -102,6 +103,7 @@
     "monospace",
     "mousedown",
     "mousemove",
+    "mouseout",
     "mouseup",
     "multiselectable",
     "nextjs",
@@ -171,10 +173,12 @@
     "valpha",
     "valuenow",
     "valuetext",
+    "Vuejs",
     "WCAG",
     "webawesome",
     "WEBP",
-    "Webpacker"
+    "Webpacker",
+    "xmark"
   ],
   "ignorePaths": [
     "package.json",

custom-elements-manifest.config.js

@@ -1,6 +1,7 @@
 import * as path from 'path';
 import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
 import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
+import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
 import { parse } from 'comment-parser';
 import { pascalCase } from 'pascal-case';
 import commandLineArgs from 'command-line-args';
@@ -38,6 +39,7 @@ export default {
         customElementsManifest.package = { name, description, version, author, homepage, license };
       }
     },
+
     // Infer tag names because we no longer use @customElement decorators.
     {
       name: 'wa-infer-tag-names',
@@ -66,6 +68,7 @@ export default {
         }
       }
     },
+
     // Parse custom jsDoc tags
     {
       name: 'wa-custom-tags',
@@ -137,6 +140,7 @@ export default {
         }
       }
     },
+
     {
       name: 'wa-react-event-names',
       analyzePhase({ ts, node, moduleDoc }) {
@@ -155,6 +159,7 @@ export default {
         }
       }
     },
+
     {
       name: 'wa-translate-module-paths',
       packageLinkPhase({ customElementsManifest }) {
@@ -191,6 +196,7 @@ export default {
         });
       }
     },
+
     // Generate custom VS Code data
     customElementVsCodePlugin({
       outdir,
@@ -202,6 +208,7 @@ export default {
         }
       ]
     }),
+
     customElementJetBrainsPlugin({
       outdir: './dist',
       excludeCss: true,
@@ -212,6 +219,12 @@ export default {
           url: `https://shoelace.style/components/${tag.replace('wa-', '')}`
         };
       }
+    }),
+
+    customElementVuejsPlugin({
+      outdir: './dist/types/vue',
+      fileName: 'index.d.ts',
+      componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.component.js`
     })
   ]
 };

docs/_includes/component.njk

@@ -155,12 +155,12 @@
             </td>
             <td style="text-align: center;">
               {% if prop.reflects %}
-                <wa-icon label="yes" name="check-lg"></wa-icon>
+                <wa-icon label="yes" name="check" variant="solid"></wa-icon>
               {% endif %}
             </td>
             <td>
               {% if prop.type.text %}
-                <code>{{ prop.type.text | markdownInline | safe }}</code>
+                <code>{{ prop.type.text | trimPipes | markdownInline | safe }}</code>
               {% else %}
                 -
               {% endif %}
@@ -211,7 +211,7 @@
             <td>{{ event.description | markdownInline | safe }}</td>
             <td>
               {% if event.type.text %}
-                <code>{{ event.type.text }}</code>
+                <code>{{ event.type.text | trimPipes }}</code>
               {% else %}
                 -
               {% endif %}
@@ -245,7 +245,7 @@
               {% if method.parameters.length %}
                 <code>
                   {% for param in method.parameters %}
-                    {{ param.name }}: {{ param.type.text }}{% if not loop.last %},{% endif %}
+                    {{ param.name }}: {{ param.type.text | trimPipes }}{% if not loop.last %},{% endif %}
                   {% endfor %}
                 </code>
               {% else %}

docs/_includes/default.njk

@@ -37,6 +37,8 @@
     <link rel="stylesheet" href="/dist/themes/applied.css" />
     <link rel="stylesheet" href="/dist/themes/forms.css" />
     <link id="theme-stylesheet" rel="stylesheet" href="/dist/themes/default.css" />
+    <link id="theme-stylesheet" rel="stylesheet" href="/dist/themes/demo_patterns.css" />
+    <link id="theme-stylesheet" rel="stylesheet" href="/dist/themes/demo_sublayout.css" />
     <script type="module" src="/dist/autoloader.js"></script>
 
     {# Set the initial theme and menu states here to prevent flashing #}
@@ -51,7 +53,7 @@
     {# Web Fonts #}
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Noto+Sans+Mono&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Inter:wght@100..900&family=Lora:wght@400..700&family=Mulish:wght@200..1000&family=Noto+Sans+Display:wght@100..900&family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:wght@100..900&family=Noto+Serif:wght@100..900&family=Open+Sans:wght@300..800&family=Playfair+Display:wght@400..900&family=Playfair:opsz,wght@5..1200,300;5..1200,400;5..1200,500;5..1200,600&family=Quicksand:wght@300..700&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Mono:wght@300..700&family=Roboto+Serif:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Slab:wght@300..700&display=swap" rel="stylesheet">
 
     {# Turbo + Scroll positioning #}
     <script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>
@@ -86,13 +88,13 @@
 
       <div class="sidebar-buttons">
         <wa-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
-          <wa-icon slot="prefix" name="github"></wa-icon> Code
+          <wa-icon slot="prefix" name="github" family="brands"></wa-icon> Code
         </wa-button>
         <wa-button size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
-          <wa-icon slot="prefix" name="star-fill"></wa-icon> Star
+          <wa-icon slot="prefix" name="star" variant="solid"></wa-icon> Star
         </wa-button>
         <wa-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
-          <wa-icon slot="prefix" name="twitter"></wa-icon> Follow
+          <wa-icon slot="prefix" name="twitter" family="brands"></wa-icon> Follow
         </wa-button>
       </div>
 

docs/_includes/sidebar.njk

@@ -16,6 +16,8 @@
           localStorage.setItem('theme', toggle.checked ? 'dark' : 'light');
         });
       </script>
+      <li><a href="/experimental/sandbox">Sandbox</a></li>
+      <li><a href="/experimental/patterns">Patterns</a></li>
     </ul>
   </li>
   <li>

docs/_utilities/code-previews.cjs

@@ -68,7 +68,7 @@ module.exports = function (doc, options) {
         <div class="code-preview__preview">
           ${code.textContent}
           <div class="code-preview__resizer">
-            <wa-icon name="grip-vertical"></wa-icon>
+            <wa-icon name="grip-vertical" variant="solid"></wa-icon>
           </div>
         </div>
 

docs/_utilities/markdown.cjs

@@ -24,16 +24,16 @@ markdown.use(markdownItReplaceIt);
 // Callouts
 ['tip', 'warning', 'danger'].forEach(type => {
   const variant = type === 'tip' ? 'brand' : type;
-  let icon = 'info-circle';
-  if (type === 'warning') icon = 'exclamation-circle';
-  if (type === 'danger') icon = 'exclamation-triangle';
+  let icon = 'circle-info';
+  if (type === 'warning') icon = 'triangle-exclamation';
+  if (type === 'danger') icon = 'circle-exclamation';
 
   markdown.use(markdownItContainer, type, {
     render: function (tokens, idx) {
       if (tokens[idx].nesting === 1) {
         return `
           <wa-alert class="callout" variant="${variant}" open>
-            <wa-icon slot="icon" name="${icon}"></wa-icon>
+            <wa-icon slot="icon" name="${icon}" variant="regular"></wa-icon>
         `;
       }
       return '</wa-alert>\n';

docs/assets/scripts/search.js

@@ -30,7 +30,7 @@
               aria-activedescendant
             >
             <button type="button" class="search__clear-button" aria-label="Clear entry" tabindex="-1" hidden>
-              <wa-icon name="x-circle-fill"></wa-icon>
+              <wa-icon name="circle-xmark" variant="regular"></wa-icon>
             </button>
           </div>
         </div>
@@ -44,8 +44,8 @@
           <div class="search__empty">No matching pages</div>
         </div>
         <footer class="search__footer">
-          <small><kbd>↑</kbd> <kbd>↓</kbd> Navigate</small>
-          <small><kbd>↲</kbd> Select</small>
+          <small><kbd><wa-icon label="Up" name="arrow-up"></wa-icon></kbd> <kbd><wa-icon label="Down" name="arrow-down"></wa-icon></kbd> Navigate</small>
+          <small><kbd><wa-icon label="Enter" name="arrow-turn-down-left"></wa-icon></kbd> Select</small>
           <small><kbd>Esc</kbd> Close</small>
         </footer>
       </div>
@@ -297,16 +297,16 @@
           icon = 'book';
         }
         if (page.url.includes('components/')) {
-          icon = 'puzzle';
+          icon = 'puzzle-piece';
         }
         if (page.url.includes('tokens/')) {
-          icon = 'palette2';
+          icon = 'swatchbook';
         }
         if (page.url.includes('utilities/')) {
           icon = 'wrench';
         }
         if (page.url.includes('tutorials/')) {
-          icon = 'joystick';
+          icon = 'gamepad';
         }
 
         li.classList.add('search__result');

docs/assets/styles/code-previews.css

@@ -1,17 +1,17 @@
 /* Interactive code blocks */
 .code-preview {
   position: relative;
-  border-radius: var(--wa-corners-1x);
-  background-color: var(--wa-color-surface-lowered);
+  border-radius: var(--wa-corners-s);
+  background-color: var(--wa-color-neutral-fill-subtle);
   margin-bottom: var(--wa-space-xl);
 }
 
 .code-preview__preview {
   position: relative;
-  border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
   border-bottom: none;
-  border-top-left-radius: var(--wa-corners-1x);
-  border-top-right-radius: var(--wa-corners-1x);
+  border-top-left-radius: var(--wa-corners-s);
+  border-top-right-radius: var(--wa-corners-s);
   background-color: var(--wa-color-surface-default);
   min-width: 20rem;
   max-width: 100%;
@@ -39,11 +39,11 @@
   right: 0;
   bottom: 0;
   width: 1.75rem;
-  font-size: 20px;
+  font-size: var(--wa-font-size-xs);
   color: var(--wa-color-text-quiet);
   background-color: var(--wa-color-surface-default);
-  border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
-  border-top-right-radius: var(--wa-corners-1x);
+  border-left: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
+  border-top-right-radius: var(--wa-corners-s);
   cursor: ew-resize;
 }
 
@@ -58,7 +58,7 @@
 }
 
 .code-preview__source {
-  border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
   border-bottom: none;
   border-radius: 0 !important;
   display: none;
@@ -74,9 +74,9 @@
 
 .code-preview__buttons {
   position: relative;
-  border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
-  border-bottom-left-radius: var(--wa-corners-1x);
-  border-bottom-right-radius: var(--wa-corners-1x);
+  border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
+  border-bottom-left-radius: var(--wa-corners-s);
+  border-bottom-right-radius: var(--wa-corners-s);
   display: flex;
 }
 
@@ -97,7 +97,7 @@
 }
 
 .code-preview__button:not(:last-of-type) {
-  border-right: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  border-right: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
 }
 
 .code-preview__button--html,
@@ -120,18 +120,18 @@
 }
 
 .code-preview__button:first-of-type {
-  border-bottom-left-radius: var(--wa-corners-1x);
+  border-bottom-left-radius: var(--wa-corners-s);
 }
 
 .code-preview__button:last-of-type {
-  border-bottom-right-radius: var(--wa-corners-1x);
+  border-bottom-right-radius: var(--wa-corners-s);
 }
 
 .code-preview__button:hover,
 .code-preview__button:active {
-  box-shadow: 0 0 0 var(--wa-border-width-thin) var(--wa-color-brand-outline-muted);
+  box-shadow: 0 0 0 var(--wa-border-width-s) var(--wa-color-brand-border-subtle);
   border-right-color: transparent;
-  background-color: var(--wa-color-brand-fill-muted);
+  background-color: var(--wa-color-brand-fill-subtle);
   color: var(--wa-color-brand-text-on-surface);
   z-index: 1;
 }

docs/assets/styles/docs.css

@@ -82,7 +82,7 @@ h1:first-of-type {
 }
 
 .badges img {
-  border-radius: var(--wa-corners-1x);
+  border-radius: var(--wa-corners-s);
 }
 
 .callout img {
@@ -110,7 +110,7 @@ svg.logo {
 
 .anchor-heading a::after {
   content: '#';
-  color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-tint-hover));
+  color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
   margin-inline: 0.5rem;
   opacity: 0;
   transition: 100ms opacity;
@@ -183,7 +183,7 @@ pre > code {
 }
 
 pre .token.comment {
-  color: var(--wa-color-neutral-40);
+  color: var(--wa-color-base-40);
 }
 
 pre .token.prolog,
@@ -191,7 +191,7 @@ pre .token.doctype,
 pre .token.cdata,
 pre .token.operator,
 pre .token.punctuation {
-  color: var(--wa-color-neutral-40);
+  color: var(--wa-color-base-40);
 }
 
 .namespace {
@@ -202,12 +202,12 @@ pre .token.property,
 pre .token.keyword,
 pre .token.tag,
 pre .token.url {
-  color: var(--wa-color-blue-40);
+  color: var(--wa-color-brand-text-on-fill);
 }
 
 pre .token.symbol,
 pre .token.deleted {
-  color: var(--wa-color-red-40);
+  color: var(--wa-color-danger-text-on-fill);
 }
 
 pre .token.boolean,
@@ -218,24 +218,24 @@ pre .token.string,
 pre .token.char,
 pre .token.builtin,
 pre .token.inserted {
-  color: var(--wa-color-green-40);
+  color: var(--wa-color-success-text-on-fill);
 }
 
 pre .token.atrule,
 pre .token.attr-value,
 pre .token.number,
 pre .token.variable {
-  color: #5c47ae; /* purple-40 */
+  color: var(--wa-color-warning-text-on-fill);
 }
 
 pre .token.function,
 pre .token.class-name,
 pre .token.regex {
-  color: #c86d2c; /* orange-40 */
+  color: var(--wa-color-danger-text-on-fill);
 }
 
 pre .token.important {
-  color: var(--wa-color-red-40);
+  color: var(--wa-color-danger-text-on-fill);
 }
 
 pre .token.important,
@@ -253,24 +253,24 @@ pre .token.italic {
   top: 0;
   right: 0;
   white-space: normal;
-  color: var(--wa-color-neutral-text-on-muted-alt);
+  color: var(--wa-color-neutral-text-on-fill-alt);
   transition:
     150ms opacity,
     150ms scale;
 }
 
 .copy-code-button::part(button) {
-  background-color: var(--wa-color-neutral-fill-muted);
-  border-radius: 0 var(--wa-corners-1x) 0 var(--wa-corners-1x);
+  background-color: var(--wa-color-neutral-fill-subtle);
+  border-radius: 0 var(--wa-corners-s) 0 var(--wa-corners-s);
   padding: 0.75rem;
 }
 
 .copy-code-button::part(button):hover {
-  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-muted), var(--wa-color-tint-hover));
+  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-subtle), var(--wa-color-mix-hover));
 }
 
 .copy-code-button::part(button):active {
-  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-muted), var(--wa-color-tint-active));
+  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-subtle), var(--wa-color-mix-active));
 }
 
 pre .copy-code-button {
@@ -311,7 +311,7 @@ pre:hover .copy-code-button,
   min-width: 300px;
   max-width: 50%;
   background: var(--wa-color-surface-lowered);
-  border-radius: var(--wa-corners-1x);
+  border-radius: var(--wa-corners-s);
   padding: var(--wa-space-m);
   margin-left: var(--wa-space-m);
 }
@@ -343,7 +343,7 @@ pre:hover .copy-code-button,
   z-index: 20;
   width: var(--docs-sidebar-width);
   background-color: var(--docs-background-color);
-  border-right: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  border-right: solid var(--wa-border-width-s) var(--wa-color-surface-border);
   border-radius: 0;
   padding: 2rem;
   margin: 0;
@@ -362,11 +362,11 @@ pre:hover .copy-code-button,
 }
 
 #sidebar:hover::-webkit-scrollbar-thumb {
-  background: var(--wa-color-neutral-60);
+  background: var(--wa-color-base-60);
 }
 
 #sidebar:hover::-webkit-scrollbar-track {
-  background: var(--wa-color-neutral-95);
+  background: var(--wa-color-base-95);
 }
 
 #sidebar > header {
@@ -392,7 +392,7 @@ pre:hover .copy-code-button,
 #sidebar nav h2 {
   font-size: var(--wa-font-size-m);
   font-weight: var(--wa-font-weight-medium);
-  border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
   margin: var(--wa-space-xl) 0 var(--wa-space-xs) 0;
 }
 
@@ -517,7 +517,7 @@ main {
   max-height: calc(100vh - 6rem);
   font-size: var(--wa-font-size-s);
   line-height: 1.33;
-  border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  border-left: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
   list-style: none;
   padding: 1rem 0;
   margin: 0;
@@ -581,7 +581,7 @@ main {
     gap: 1rem 1.5rem;
     position: static;
     border: none;
-    border-bottom: solid 1px var(--wa-color-surface-outline);
+    border-bottom: solid 1px var(--wa-color-surface-border);
     border-radius: 0;
     padding: 1rem 1.5rem 1rem 0.5rem; /* extra right padding to hide the fade effect */
     margin-top: 1rem;
@@ -624,7 +624,7 @@ main {
   left: 0.25rem;
   height: auto;
   width: auto;
-  color: var(--wa-color-neutral-fill-vivid-alt);
+  color: var(--wa-color-neutral-spot);
   border: none;
   border-radius: 50%;
   background: var(--wa-color-surface-default);
@@ -672,7 +672,7 @@ html.sidebar-open #menu-toggle {
 
   details,
   pre {
-    border: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
+    border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
   }
 
   details summary {
@@ -706,9 +706,9 @@ html.sidebar-open #menu-toggle {
   }
 
   .code-preview__source-group {
-    border-bottom: solid 1px var(--wa-border-width-thin);
-    border-bottom-left-radius: var(--wa-corners-1x);
-    border-bottom-right-radius: var(--wa-corners-1x);
+    border-bottom: solid 1px var(--wa-border-width-s);
+    border-bottom-left-radius: var(--wa-corners-s);
+    border-bottom-right-radius: var(--wa-corners-s);
   }
 
   #sidebar {
@@ -829,7 +829,7 @@ html.sidebar-open #menu-toggle {
 }
 
 .repo-button wa-icon {
-  color: var(--wa-color-text-inverse);
+  color: var(--wa-color-neutral-text-on-spot);
 }
 
 @media screen and (max-width: 400px) {
@@ -847,19 +847,19 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
 /* Border demos */
 .border-demo {
   height: 60px;
-  border-left: solid 1px var(--wa-color-brand-fill-vivid);
+  border-left: solid 1px var(--wa-color-brand-spot);
 }
 
 .corner-demo {
   width: 3rem;
   height: 3rem;
-  background: var(--wa-color-brand-fill-vivid);
+  background: var(--wa-color-brand-spot);
 }
 
 /* Transition demo */
 .transition-demo {
   position: relative;
-  background: var(--wa-color-neutral-fill-muted);
+  background: var(--wa-color-neutral-fill-subtle);
   width: 8rem;
   height: 2rem;
 }
@@ -867,7 +867,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
 .transition-demo:after {
   content: '';
   position: absolute;
-  background-color: var(--wa-color-brand-fill-vivid);
+  background-color: var(--wa-color-brand-spot);
   top: 0;
   left: 0;
   width: 0;
@@ -882,7 +882,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
 
 /* Spacing demo */
 .spacing-demo {
-  background: var(--wa-color-brand-fill-vivid);
+  background: var(--wa-color-brand-spot);
 }
 
 /* Shadow demo */
@@ -919,11 +919,11 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
 
 .color-palette__swatch {
   height: 3rem;
-  border-radius: var(--wa-corners-half);
+  border-radius: var(--wa-corners-xs);
 }
 
 .color-palette__swatch--border {
-  box-shadow: inset 0 0 0 1px var(--wa-color-surface-outline);
+  box-shadow: inset 0 0 0 1px var(--wa-color-surface-border);
 }
 
 @media screen and (max-width: 1200px) {

docs/assets/styles/search.css

@@ -2,26 +2,26 @@
 :root {
   --docs-search-box-background: var(--wa-form-controls-background);
   --docs-search-box-border-width: var(--wa-form-controls-border-width);
-  --docs-search-box-border-color: var(--wa-form-controls-border-color-resting);
+  --docs-search-box-border-color: var(--wa-form-controls-resting-color);
   --docs-search-box-color: var(--wa-form-controls-placeholder-color);
 
   --docs-search-dialog-background: var(--wa-color-surface-raised);
-  --docs-search-border-width: var(--wa-border-width-thin);
-  --docs-search-border-color: var(--wa-color-surface-outline);
+  --docs-search-border-width: var(--wa-border-width-s);
+  --docs-search-border-color: var(--wa-color-surface-border);
   --docs-search-text-color: var(--wa-color-text-normal);
   --docs-search-text-color-muted: var(--wa-color-text-quiet);
   --docs-search-font-weight-normal: var(--wa-font-weight-normal);
   --docs-search-font-weight-semibold: var(--wa-font-weight-medium);
-  --docs-search-border-radius: calc(2 * var(--wa-corners-1x));
+  --docs-search-border-radius: calc(2 * var(--wa-corners-s));
 
   --docs-search-accent-color: var(--wa-color-brand-text-on-surface);
-  --docs-search-icon-color: var(--wa-color-neutral-fill-vivid);
-  --docs-search-icon-color-active: color-mix(in lch, var(--wa-color-neutral-fill-vivid), 8% black);
+  --docs-search-icon-color: var(--wa-color-neutral-spot);
+  --docs-search-icon-color-active: color-mix(in lch, var(--wa-color-neutral-spot), 8% black);
   --docs-search-shadow: var(--wa-shadow-level-3);
-  --docs-search-result-background-hover: var(--wa-color-neutral-fill-muted-alt);
-  --docs-search-result-color-hover: var(--wa-color-neutral-text-on-muted);
-  --docs-search-result-background-active: var(--wa-color-brand-fill-vivid);
-  --docs-search-result-color-active: var(--wa-color-brand-text-on-vivid);
+  --docs-search-result-background-hover: var(--wa-color-neutral-fill-highlight);
+  --docs-search-result-color-hover: var(--wa-color-neutral-text-on-fill);
+  --docs-search-result-background-active: var(--wa-color-brand-spot);
+  --docs-search-result-color-active: var(--wa-color-brand-text-on-spot);
   --docs-search-focus-ring: var(--wa-focus-ring);
   --docs-search-overlay-background: rgb(0 0 0 / 0.33);
 }

docs/eleventy.config.cjs

@@ -96,6 +96,12 @@ module.exports = function (eleventyConfig) {
     return webAwesomeFlavoredMarkdown.renderInline(content);
   });
 
+  // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
+  // With Prettier 3, this means a leading pipe will exist if the line wraps.
+  eleventyConfig.addFilter('trimPipes', content => {
+    return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
+  });
+
   eleventyConfig.addFilter('classNameToComponentName', className => {
     let name = capitalCase(className.replace(/^Wa/, ''));
     if (name === 'Qr Code') name = 'QR Code'; // manual override

docs/pages/components/alert.md

@@ -7,7 +7,7 @@ layout: component
 
 ```html:preview
 <wa-alert open>
-  <wa-icon slot="icon" name="info-circle"></wa-icon>
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
   This is a standard alert. You can customize its content and even the icon.
 </wa-alert>
 ```
@@ -18,7 +18,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <WaAlert open>
-    <WaIcon slot="icon" name="info-circle" />
+    <WaIcon slot="icon" name="circle-info" variant="regular" />
     This is a standard alert. You can customize its content and even the icon.
   </WaAlert>
 );
@@ -36,7 +36,7 @@ Set the `variant` attribute to change the alert's variant.
 
 ```html:preview
 <wa-alert variant="brand" open>
-  <wa-icon slot="icon" name="info-circle"></wa-icon>
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
   <strong>This is super informative</strong><br />
   You can tell by how pretty the alert is.
 </wa-alert>
@@ -44,7 +44,7 @@ Set the `variant` attribute to change the alert's variant.
 <br />
 
 <wa-alert variant="success" open>
-  <wa-icon slot="icon" name="check2-circle"></wa-icon>
+  <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
   <strong>Your changes have been saved</strong><br />
   You can safely exit the app now.
 </wa-alert>
@@ -52,7 +52,7 @@ Set the `variant` attribute to change the alert's variant.
 <br />
 
 <wa-alert variant="neutral" open>
-  <wa-icon slot="icon" name="gear"></wa-icon>
+  <wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
   <strong>Your settings have been updated</strong><br />
   Settings will take effect on next login.
 </wa-alert>
@@ -60,7 +60,7 @@ Set the `variant` attribute to change the alert's variant.
 <br />
 
 <wa-alert variant="warning" open>
-  <wa-icon slot="icon" name="exclamation-triangle"></wa-icon>
+  <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
   <strong>Your session has ended</strong><br />
   Please login again to continue.
 </wa-alert>
@@ -68,7 +68,7 @@ Set the `variant` attribute to change the alert's variant.
 <br />
 
 <wa-alert variant="danger" open>
-  <wa-icon slot="icon" name="exclamation-octagon"></wa-icon>
+  <wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
   <strong>Your account has been deleted</strong><br />
   We're very sorry to see you go!
 </wa-alert>
@@ -81,7 +81,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 const App = () => (
   <>
     <WaAlert variant="brand" open>
-      <WaIcon slot="icon" name="info-circle" />
+      <WaIcon slot="icon" name="circle-info" variant="regular" />
       <strong>This is super informative</strong>
       <br />
       You can tell by how pretty the alert is.
@@ -90,7 +90,7 @@ const App = () => (
     <br />
 
     <WaAlert variant="success" open>
-      <WaIcon slot="icon" name="check2-circle" />
+      <WaIcon slot="icon" name="circle-check" variant="regular" />
       <strong>Your changes have been saved</strong>
       <br />
       You can safely exit the app now.
@@ -99,7 +99,7 @@ const App = () => (
     <br />
 
     <WaAlert variant="neutral" open>
-      <WaIcon slot="icon" name="gear" />
+      <WaIcon slot="icon" name="gear" variant="regular" />
       <strong>Your settings have been updated</strong>
       <br />
       Settings will take effect on next login.
@@ -108,7 +108,7 @@ const App = () => (
     <br />
 
     <WaAlert variant="warning" open>
-      <WaIcon slot="icon" name="exclamation-triangle" />
+      <WaIcon slot="icon" name="triangle-exclamation" variant="regular" />
       <strong>Your session has ended</strong>
       <br />
       Please login again to continue.
@@ -117,7 +117,7 @@ const App = () => (
     <br />
 
     <WaAlert variant="danger" open>
-      <WaIcon slot="icon" name="exclamation-octagon" />
+      <WaIcon slot="icon" name="circle-exclamation" variant="regular" />
       <strong>Your account has been deleted</strong>
       <br />
       We're very sorry to see you go!
@@ -132,7 +132,7 @@ Add the `closable` attribute to show a close button that will hide the alert.
 
 ```html:preview
 <wa-alert variant="brand" open closable class="alert-closable">
-  <wa-icon slot="icon" name="info-circle"></wa-icon>
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
   You can close this alert any time!
 </wa-alert>
 
@@ -159,7 +159,7 @@ const App = () => {
 
   return (
     <WaAlert open={open} closable onWaAfterHide={handleHide}>
-      <WaIcon slot="icon" name="info-circle" />
+      <WaIcon slot="icon" name="circle-info" variant="regular" />
       You can close this alert any time!
     </WaAlert>
   );
@@ -193,7 +193,7 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
   <wa-button variant="brand">Show Alert</wa-button>
 
   <wa-alert variant="brand" duration="3000" closable>
-    <wa-icon slot="icon" name="info-circle"></wa-icon>
+    <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
     This alert will automatically hide itself after three seconds, unless you interact with it.
   </wa-alert>
 </div>
@@ -236,7 +236,7 @@ const App = () => {
         </WaButton>
 
         <WaAlert variant="brand" duration="3000" open={open} closable onWaAfterHide={() => setOpen(false)}>
-          <WaIcon slot="icon" name="info-circle" />
+          <WaIcon slot="icon" name="circle-info" variant="regular" />
           This alert will automatically hide itself after three seconds, unless you interact with it.
         </WaAlert>
       </div>
@@ -262,31 +262,31 @@ You should always use the `closable` attribute so users can dismiss the notifica
   <wa-button variant="danger">Danger</wa-button>
 
   <wa-alert variant="brand" duration="3000" closable>
-    <wa-icon slot="icon" name="info-circle"></wa-icon>
+    <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
     <strong>This is super informative</strong><br />
     You can tell by how pretty the alert is.
   </wa-alert>
 
   <wa-alert variant="success" duration="3000" closable>
-    <wa-icon slot="icon" name="check2-circle"></wa-icon>
+    <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
     <strong>Your changes have been saved</strong><br />
     You can safely exit the app now.
   </wa-alert>
 
   <wa-alert variant="neutral" duration="3000" closable>
-    <wa-icon slot="icon" name="gear"></wa-icon>
+    <wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
     <strong>Your settings have been updated</strong><br />
     Settings will take effect on next login.
   </wa-alert>
 
   <wa-alert variant="warning" duration="3000" closable>
-    <wa-icon slot="icon" name="exclamation-triangle"></wa-icon>
+    <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
     <strong>Your session has ended</strong><br />
     Please login again to continue.
   </wa-alert>
 
   <wa-alert variant="danger" duration="3000" closable>
-    <wa-icon slot="icon" name="exclamation-octagon"></wa-icon>
+    <wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
     <strong>Your account has been deleted</strong><br />
     We're very sorry to see you go!
   </wa-alert>
@@ -344,35 +344,35 @@ const App = () => {
       </WaButton>
 
       <WaAlert ref={brand} variant="brand" duration="3000" closable>
-        <WaIcon slot="icon" name="info-circle" />
+        <WaIcon slot="icon" name="circle-info" variant="regular" />
         <strong>This is super informative</strong>
         <br />
         You can tell by how pretty the alert is.
       </WaAlert>
 
       <WaAlert ref={success} variant="success" duration="3000" closable>
-        <WaIcon slot="icon" name="check2-circle" />
+        <WaIcon slot="icon" name="circle-check" variant="regular" />
         <strong>Your changes have been saved</strong>
         <br />
         You can safely exit the app now.
       </WaAlert>
 
       <WaAlert ref={neutral} variant="neutral" duration="3000" closable>
-        <WaIcon slot="icon" name="gear" />
+        <WaIcon slot="icon" name="gear" variant="regular" />
         <strong>Your settings have been updated</strong>
         <br />
         Settings will take effect on next login.
       </WaAlert>
 
       <WaAlert ref={warning} variant="warning" duration="3000" closable>
-        <WaIcon slot="icon" name="exclamation-triangle" />
+        <WaIcon slot="icon" name="triangle-exclamation" variant="regular" />
         <strong>Your session has ended</strong>
         <br />
         Please login again to continue.
       </WaAlert>
 
       <WaAlert ref={danger} variant="danger" duration="3000" closable>
-        <WaIcon slot="icon" name="exclamation-octagon" />
+        <WaIcon slot="icon" name="circle-exclamation" variant="regular" />
         <strong>Your account has been deleted</strong>
         <br />
         We're very sorry to see you go!
@@ -404,13 +404,13 @@ For convenience, you can create a utility that emits toast notifications with a
   }
 
   // Custom function to emit toast notifications
-  function notify(message, variant = 'brand', icon = 'info-circle', duration = 3000) {
+  function notify(message, variant = 'brand', icon = 'circle-info', duration = 3000) {
     const alert = Object.assign(document.createElement('wa-alert'), {
       variant,
       closable: true,
       duration: duration,
       innerHTML: `
-        <wa-icon name="${icon}" slot="icon"></wa-icon>
+        <wa-icon name="${icon}" variant="regular" slot="icon"></wa-icon>
         ${escapeHtml(message)}
       `
     });

docs/pages/components/animation.md

@@ -20,7 +20,7 @@ To animate an element, wrap it in `<wa-animation>` and set an animation `name`.
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--wa-color-brand-spot);
     margin: 1.5rem;
   }
 </style>
@@ -34,7 +34,7 @@ const css = `
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--wa-color-brand-spot);
     margin: 1.5rem;
   }
 `;
@@ -120,7 +120,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
   .animation-sandbox .box {
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--wa-color-brand-spot);
   }
 
   .animation-sandbox .controls {
@@ -166,7 +166,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--wa-color-brand-spot);
   }
 </style>
 ```
@@ -184,7 +184,7 @@ const css = `
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--wa-color-brand-spot);
   }
 `;
 
@@ -256,7 +256,7 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/
   .animation-keyframes .box {
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--wa-color-brand-spot);
   }
 </style>
 ```
@@ -268,7 +268,7 @@ const css = `
   .animation-keyframes .box {
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--wa-color-brand-spot);
   }
 `;
 

docs/pages/components/avatar.md

@@ -57,13 +57,13 @@ const App = () => (
 When you don't have an image to use, you can set the `initials` attribute to show something more personalized than an icon.
 
 ```html:preview
-<wa-avatar initials="SL" label="Avatar with initials: SL"></wa-avatar>
+<wa-avatar initials="WA" label="Avatar with initials: SL"></wa-avatar>
 ```
 
 ```jsx:react
 import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';
 
-const App = () => <WaAvatar initials="SL" label="Avatar with initials: SL" />;
+const App = () => <WaAvatar initials="WA" label="Avatar with initials: SL" />;
 ```
 
 ### Custom Icons
@@ -72,15 +72,15 @@ When no image or initials are set, an icon will be shown. The default avatar sho
 
 ```html:preview
 <wa-avatar label="Avatar with an image icon">
-  <wa-icon slot="icon" name="image"></wa-icon>
+  <wa-icon slot="icon" name="image" variant="solid"></wa-icon>
 </wa-avatar>
 
 <wa-avatar label="Avatar with an archive icon">
-  <wa-icon slot="icon" name="archive"></wa-icon>
+  <wa-icon slot="icon" name="archive" variant="solid"></wa-icon>
 </wa-avatar>
 
 <wa-avatar label="Avatar with a briefcase icon">
-  <wa-icon slot="icon" name="briefcase"></wa-icon>
+  <wa-icon slot="icon" name="briefcase" variant="solid"></wa-icon>
 </wa-avatar>
 ```
 

docs/pages/components/breadcrumb-item.md

@@ -8,7 +8,7 @@ layout: component
 ```html:preview
 <wa-breadcrumb>
   <wa-breadcrumb-item>
-    <wa-icon slot="prefix" name="house"></wa-icon>
+    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
     Home
   </wa-breadcrumb-item>
   <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>

docs/pages/components/breadcrumb.md

@@ -73,7 +73,7 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
 
 ```html:preview
 <wa-breadcrumb>
-  <wa-icon name="dot" slot="separator"></wa-icon>
+  <wa-icon slot="separator" name="angles-right" variant="solid"></wa-icon>
   <wa-breadcrumb-item>First</wa-breadcrumb-item>
   <wa-breadcrumb-item>Second</wa-breadcrumb-item>
   <wa-breadcrumb-item>Third</wa-breadcrumb-item>
@@ -82,7 +82,7 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
 <br />
 
 <wa-breadcrumb>
-  <wa-icon name="arrow-right" slot="separator"></wa-icon>
+  <wa-icon slot="separator" name="arrow-right" variant="solid"></wa-icon>
   <wa-breadcrumb-item>First</wa-breadcrumb-item>
   <wa-breadcrumb-item>Second</wa-breadcrumb-item>
   <wa-breadcrumb-item>Third</wa-breadcrumb-item>
@@ -106,7 +106,7 @@ import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-ite
 const App = () => (
   <>
     <WaBreadcrumb>
-      <wa-icon name="dot" slot="separator" />
+      <wa-icon slot="separator" name="angles-right" variant="solid" />
       <WaBreadcrumbItem>First</WaBreadcrumbItem>
       <WaBreadcrumbItem>Second</WaBreadcrumbItem>
       <WaBreadcrumbItem>Third</WaBreadcrumbItem>
@@ -115,7 +115,7 @@ const App = () => (
     <br />
 
     <WaBreadcrumb>
-      <wa-icon name="arrow-right" slot="separator" />
+      <wa-icon slot="separator" name="arrow-right" variant="solid" />
       <WaBreadcrumbItem>First</WaBreadcrumbItem>
       <WaBreadcrumbItem>Second</WaBreadcrumbItem>
       <WaBreadcrumbItem>Third</WaBreadcrumbItem>
@@ -140,7 +140,7 @@ Use the `prefix` slot to add content before any breadcrumb item.
 ```html:preview
 <wa-breadcrumb>
   <wa-breadcrumb-item>
-    <wa-icon slot="prefix" name="house"></wa-icon>
+    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
     Home
   </wa-breadcrumb-item>
   <wa-breadcrumb-item>Articles</wa-breadcrumb-item>
@@ -156,7 +156,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 const App = () => (
   <WaBreadcrumb>
     <WaBreadcrumbItem>
-      <WaIcon slot="prefix" name="house" />
+      <WaIcon slot="prefix" name="house" variant="solid" />
       Home
     </WaBreadcrumbItem>
     <WaBreadcrumbItem>Articles</WaBreadcrumbItem>
@@ -175,7 +175,7 @@ Use the `suffix` slot to add content after any breadcrumb item.
   <wa-breadcrumb-item>Policies</wa-breadcrumb-item>
   <wa-breadcrumb-item>
     Security
-    <wa-icon slot="suffix" name="shield-lock"></wa-icon>
+    <wa-icon slot="suffix" name="shield" variant="solid"></wa-icon>
   </wa-breadcrumb-item>
 </wa-breadcrumb>
 ```
@@ -191,7 +191,7 @@ const App = () => (
     <WaBreadcrumbItem>Policies</WaBreadcrumbItem>
     <WaBreadcrumbItem>
       Security
-      <WaIcon slot="suffix" name="shield-lock"></WaIcon>
+      <WaIcon slot="suffix" name="shield" variant="solid"></WaIcon>
     </WaBreadcrumbItem>
   </WaBreadcrumb>
 );
@@ -209,8 +209,8 @@ Dropdown menus can be placed in a prefix or suffix slot to provide additional op
   <wa-breadcrumb-item>
     Web Design
     <wa-dropdown slot="suffix">
-      <wa-button slot="trigger" size="small" circle>
-        <wa-icon label="More options" name="three-dots"></wa-icon>
+      <wa-button slot="trigger" size="small" pill>
+        <wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
       </wa-button>
       <wa-menu>
         <wa-menu-item type="checkbox" checked>Web Design</wa-menu-item>
@@ -241,8 +241,8 @@ const App = () => (
     <WaBreadcrumbItem>
       Web Design
       <WaDropdown slot="suffix">
-        <WaButton slot="trigger" size="small" circle>
-          <WaIcon label="More options" name="three-dots"></WaIcon>
+        <WaButton slot="trigger" size="small" pill>
+          <WaIcon label="More options" name="ellipsis"></WaIcon>
         </WaButton>
         <WaMenu>
           <WaMenuItem type="checkbox" checked>

docs/pages/components/button-group.md

@@ -401,34 +401,34 @@ Create interactive toolbars with button groups.
 <div class="button-group-toolbar">
   <wa-button-group label="History">
     <wa-tooltip content="Undo">
-      <wa-button><wa-icon name="arrow-counterclockwise" label="Undo"></wa-icon></wa-button>
+      <wa-button><wa-icon name="undo" variant="solid" label="Undo"></wa-icon></wa-button>
     </wa-tooltip>
     <wa-tooltip content="Redo">
-      <wa-button><wa-icon name="arrow-clockwise" label="Redo"></wa-icon></wa-button>
+      <wa-button><wa-icon name="redo" variant="solid" label="Redo"></wa-icon></wa-button>
     </wa-tooltip>
   </wa-button-group>
 
   <wa-button-group label="Formatting">
     <wa-tooltip content="Bold">
-      <wa-button><wa-icon name="type-bold" label="Bold"></wa-icon></wa-button>
+      <wa-button><wa-icon name="bold" variant="solid" label="Bold"></wa-icon></wa-button>
     </wa-tooltip>
     <wa-tooltip content="Italic">
-      <wa-button><wa-icon name="type-italic" label="Italic"></wa-icon></wa-button>
+      <wa-button><wa-icon name="italic" variant="solid" label="Italic"></wa-icon></wa-button>
     </wa-tooltip>
     <wa-tooltip content="Underline">
-      <wa-button><wa-icon name="type-underline" label="Underline"></wa-icon></wa-button>
+      <wa-button><wa-icon name="underline" variant="solid" label="Underline"></wa-icon></wa-button>
     </wa-tooltip>
   </wa-button-group>
 
   <wa-button-group label="Alignment">
     <wa-tooltip content="Align Left">
-      <wa-button><wa-icon name="justify-left" label="Align Left"></wa-icon></wa-button>
+      <wa-button><wa-icon name="align-left" variant="solid" label="Align Left"></wa-icon></wa-button>
     </wa-tooltip>
     <wa-tooltip content="Align Center">
-      <wa-button><wa-icon name="justify" label="Align Center"></wa-icon></wa-button>
+      <wa-button><wa-icon name="align-center" variant="solid" label="Align Center"></wa-icon></wa-button>
     </wa-tooltip>
     <wa-tooltip content="Align Right">
-      <wa-button><wa-icon name="justify-right" label="Align Right"></wa-icon></wa-button>
+      <wa-button><wa-icon name="align-right" variant="solid" label="Align Right"></wa-icon></wa-button>
     </wa-tooltip>
   </wa-button-group>
 </div>
@@ -458,12 +458,12 @@ const App = () => (
       <WaButtonGroup label="History">
         <WaTooltip content="Undo">
           <WaButton>
-            <WaIcon name="arrow-counterclockwise"></WaIcon>
+            <WaIcon name="undo" variant="solid"></WaIcon>
           </WaButton>
         </WaTooltip>
         <WaTooltip content="Redo">
           <WaButton>
-            <WaIcon name="arrow-clockwise"></WaIcon>
+            <WaIcon name="redo" variant="solid"></WaIcon>
           </WaButton>
         </WaTooltip>
       </WaButtonGroup>
@@ -471,17 +471,17 @@ const App = () => (
       <WaButtonGroup label="Formatting">
         <WaTooltip content="Bold">
           <WaButton>
-            <WaIcon name="type-bold"></WaIcon>
+            <WaIcon name="bold" variant="solid"></WaIcon>
           </WaButton>
         </WaTooltip>
         <WaTooltip content="Italic">
           <WaButton>
-            <WaIcon name="type-italic"></WaIcon>
+            <WaIcon name="italic" variant="solid"></WaIcon>
           </WaButton>
         </WaTooltip>
         <WaTooltip content="Underline">
           <WaButton>
-            <WaIcon name="type-underline"></WaIcon>
+            <WaIcon name="underline" variant="solid"></WaIcon>
           </WaButton>
         </WaTooltip>
       </WaButtonGroup>
@@ -489,17 +489,17 @@ const App = () => (
       <WaButtonGroup label="Alignment">
         <WaTooltip content="Align Left">
           <WaButton>
-            <WaIcon name="justify-left"></WaIcon>
+            <WaIcon name="align-left" variant="solid"></WaIcon>
           </WaButton>
         </WaTooltip>
         <WaTooltip content="Align Center">
           <WaButton>
-            <WaIcon name="justify"></WaIcon>
+            <WaIcon name="align-center" variant="solid"></WaIcon>
           </WaButton>
         </WaTooltip>
         <WaTooltip content="Align Right">
           <WaButton>
-            <WaIcon name="justify-right"></WaIcon>
+            <WaIcon name="align-right" variant="solid"></WaIcon>
           </WaButton>
         </WaTooltip>
       </WaButtonGroup>

docs/pages/components/button.md

@@ -229,54 +229,54 @@ Use the `prefix` and `suffix` slots to add icons.
 
 ```html:preview
 <wa-button size="small">
-  <wa-icon slot="prefix" name="gear"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
   Settings
 </wa-button>
 
 <wa-button size="small">
-  <wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
+  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
   Refresh
 </wa-button>
 
 <wa-button size="small">
-  <wa-icon slot="prefix" name="link-45deg"></wa-icon>
-  <wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
+  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
+  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
   Open
 </wa-button>
 
 <br /><br />
 
 <wa-button>
-  <wa-icon slot="prefix" name="gear"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
   Settings
 </wa-button>
 
 <wa-button>
-  <wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
+  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
   Refresh
 </wa-button>
 
 <wa-button>
-  <wa-icon slot="prefix" name="link-45deg"></wa-icon>
-  <wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
+  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
+  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
   Open
 </wa-button>
 
 <br /><br />
 
 <wa-button size="large">
-  <wa-icon slot="prefix" name="gear"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
   Settings
 </wa-button>
 
 <wa-button size="large">
-  <wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
+  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
   Refresh
 </wa-button>
 
 <wa-button size="large">
-  <wa-icon slot="prefix" name="link-45deg"></wa-icon>
-  <wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
+  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
+  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
   Open
 </wa-button>
 ```
@@ -288,18 +288,18 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 const App = () => (
   <>
     <WaButton size="small">
-      <WaIcon slot="prefix" name="gear"></WaIcon>
+      <WaIcon slot="prefix" name="gear" variant="solid"></WaIcon>
       Settings
     </WaButton>
 
     <WaButton size="small">
-      <WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
+      <WaIcon slot="suffix" name="undo" variant="solid"></WaIcon>
       Refresh
     </WaButton>
 
     <WaButton size="small">
-      <WaIcon slot="prefix" name="link-45deg"></WaIcon>
-      <WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
+      <WaIcon slot="prefix" name="link" variant="solid"></WaIcon>
+      <WaIcon slot="suffix" name="arrow-up-right-from-square" variant="solid"></WaIcon>
       Open
     </WaButton>
 
@@ -307,18 +307,18 @@ const App = () => (
     <br />
 
     <WaButton>
-      <WaIcon slot="prefix" name="gear"></WaIcon>
+      <WaIcon slot="prefix" name="gear" variant="solid"></WaIcon>
       Settings
     </WaButton>
 
     <WaButton>
-      <WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
+      <WaIcon slot="suffix" name="undo" variant="solid"></WaIcon>
       Refresh
     </WaButton>
 
     <WaButton>
-      <WaIcon slot="prefix" name="link-45deg"></WaIcon>
-      <WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
+      <WaIcon slot="prefix" name="link" variant="solid"></WaIcon>
+      <WaIcon slot="suffix" name="arrow-up-right-from-square" variant="solid"></WaIcon>
       Open
     </WaButton>
 
@@ -326,18 +326,18 @@ const App = () => (
     <br />
 
     <WaButton size="large">
-      <WaIcon slot="prefix" name="gear"></WaIcon>
+      <WaIcon slot="prefix" name="gear" variant="solid"></WaIcon>
       Settings
     </WaButton>
 
     <WaButton size="large">
-      <WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
+      <WaIcon slot="suffix" name="undo" variant="solid"></WaIcon>
       Refresh
     </WaButton>
 
     <WaButton size="large">
-      <WaIcon slot="prefix" name="link-45deg"></WaIcon>
-      <WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
+      <WaIcon slot="prefix" name="link" variant="solid"></WaIcon>
+      <WaIcon slot="suffix" name="arrow-up-right-from-square" variant="solid"></WaIcon>
       Open
     </WaButton>
   </>
@@ -374,7 +374,7 @@ const App = () => (
 
 ### Loading
 
-Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.
+Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
 
 ```html:preview
 <wa-button variant="brand" loading>Brand</wa-button>
@@ -459,7 +459,7 @@ This example demonstrates how to style buttons using a custom class. This is the
   wa-button.pink::part(base) {
     border-radius: 6px;
     border: solid 2px;
-    background-color: #ff1493;
+    background: #ff1493;
     border-top-color: #ff7ac1;
     border-left-color: #ff7ac1;
     border-bottom-color: #ad005c;

docs/pages/components/card.md

@@ -133,7 +133,7 @@ Headers can be used to display titles and more.
 <wa-card class="card-header">
   <div slot="header">
     Header Title
-    <wa-icon-button name="gear" label="Settings"></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!
@@ -189,7 +189,7 @@ const App = () => (
     <WaCard className="card-header">
       <div slot="header">
         Header Title
-        <WaIconButton name="gear"></WaIconButton>
+        <WaIconButton name="gear" variant="solid"></WaIconButton>
       </div>
       This card has a header. You can put all sorts of things in it!
     </WaCard>

docs/pages/components/copy-button.md

@@ -51,9 +51,9 @@ Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the ico
 
 ```html:preview
 <wa-copy-button value="Copied from a custom button">
-  <wa-icon slot="copy-icon" name="clipboard"></wa-icon>
-  <wa-icon slot="success-icon" name="clipboard-check"></wa-icon>
-  <wa-icon slot="error-icon" name="clipboard-x"></wa-icon>
+  <wa-icon slot="copy-icon" name="clipboard" variant="regular"></wa-icon>
+  <wa-icon slot="success-icon" name="thumbs-up" variant="solid"></wa-icon>
+  <wa-icon slot="error-icon" name="xmark" variant="solid"></wa-icon>
 </wa-copy-button>
 ```
 
@@ -64,9 +64,9 @@ import { WaIcon } from '@shoelace-style/shoelace/dist/react/icon';
 const App = () => (
   <>
     <WaCopyButton value="Copied from a custom button">
-      <WaIcon slot="copy-icon" name="clipboard" />
-      <WaIcon slot="success-icon" name="clipboard-check" />
-      <WaIcon slot="error-icon" name="clipboard-x" />
+      <WaIcon slot="copy-icon" name="clipboard" variant="regular" />
+      <WaIcon slot="success-icon" name="check" variant="solid" />
+      <WaIcon slot="error-icon" name="xmark" variant="solid" />
     </WaCopyButton>
   </>
 );
@@ -179,9 +179,9 @@ You can customize the button to your liking with CSS.
 
 ```html:preview
 <wa-copy-button value="I'm so stylish" class="custom-styles">
-  <wa-icon slot="copy-icon" name="asterisk"></wa-icon>
-  <wa-icon slot="success-icon" name="check-lg"></wa-icon>
-  <wa-icon slot="error-icon" name="x-lg"></wa-icon>
+  <wa-icon slot="copy-icon" name="clipboard"></wa-icon>
+  <wa-icon slot="success-icon" name="thumbs-up"></wa-icon>
+  <wa-icon slot="error-icon" name="thumbs-down"></wa-icon>
 </wa-copy-button>
 
 <style>

docs/pages/components/details.md

@@ -55,8 +55,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
 
 ```html:preview
 <wa-details summary="Toggle Me" class="custom-icons">
-  <wa-icon name="plus-square" slot="expand-icon"></wa-icon>
-  <wa-icon name="dash-square" slot="collapse-icon"></wa-icon>
+  <wa-icon name="square-plus" slot="expand-icon" variant="regular"></wa-icon>
+  <wa-icon name="square-minus" slot="collapse-icon" variant="regular"></wa-icon>
 
   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.
@@ -84,8 +84,8 @@ const css = `
 const App = () => (
   <>
     <WaDetails summary="Toggle Me" class="custom-icon">
-      <WaIcon name="plus-square" slot="expand-icon" />
-      <WaIcon name="dash-square" slot="collapse-icon" />
+      <WaIcon name="square-plus" slot="expand-icon" />
+      <WaIcon name="square-minus" slot="collapse-icon" />
       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.
@@ -122,9 +122,9 @@ Details are designed to function independently, but you can simulate a group or
   const container = document.querySelector('.details-group-example');
 
   // Close all other details when one is shown
-  container.addEventListener('sl-show', event => {
-    if (event.target.localName === 'sl-details') {
-      [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details));
+  container.addEventListener('wa-show', event => {
+    if (event.target.localName === 'wa-details') {
+      [...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details));
     }
   });
 </script>

docs/pages/components/dialog.md

@@ -105,7 +105,7 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
 
 ```html:preview
 <wa-dialog label="Dialog" class="dialog-scrolling">
-  <div style="height: 150vh; border: dashed 2px var(--wa-color-surface-outline); padding: 0 1rem;">
+  <div style="height: 150vh; border: dashed 2px var(--wa-color-surface-border); padding: 0 1rem;">
     <p>Scroll down and give it a try! 👇</p>
   </div>
   <wa-button slot="footer" variant="brand">Close</wa-button>
@@ -139,7 +139,7 @@ const App = () => {
         <div
           style={{
             height: '150vh',
-            border: 'dashed 2px var(--wa-color-surface-outline)',
+            border: 'dashed 2px var(--wa-color-surface-border)',
             padding: '0 1rem'
           }}
         >
@@ -165,7 +165,7 @@ The header shows a functional close button by default. You can use the `header-a
 
 ```html:preview
 <wa-dialog label="Dialog" class="dialog-header-actions">
-  <wa-icon-button class="new-window" slot="header-actions" name="box-arrow-up-right"></wa-icon-button>
+  <wa-icon-button class="new-window" slot="header-actions" name="arrow-up-right-from-square" variant="solid"></wa-icon-button>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand">Close</wa-button>
 </wa-dialog>
@@ -199,7 +199,7 @@ const App = () => {
         <WaIconButton
           class="new-window"
           slot="header-actions"
-          name="box-arrow-up-right"
+          name="arrow-up-right-from-square"
           onClick={() => window.open(location.href)}
         />
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.

docs/pages/components/drawer.md

@@ -193,7 +193,7 @@ Unlike normal drawers, contained drawers are not modal. This means they do not s
 
 ```html:preview
 <div
-  style="position: relative; border: solid 2px var(--wa-color-surface-outline); height: 300px; padding: 1rem; margin-bottom: 1rem;"
+  style="position: relative; border: solid 2px var(--wa-color-surface-border); height: 300px; padding: 1rem; margin-bottom: 1rem;"
 >
   The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens.
 
@@ -230,7 +230,7 @@ const App = () => {
       <div
         style={{
           position: 'relative',
-          border: 'solid 2px var(--wa-color-surface-outline)',
+          border: 'solid 2px var(--wa-color-surface-border)',
           height: '300px',
           padding: '1rem',
           marginBottom: '1rem'
@@ -316,7 +316,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
 
 ```html:preview
 <wa-drawer label="Drawer" class="drawer-scrolling">
-  <div style="height: 150vh; border: dashed 2px var(--wa-color-surface-outline); padding: 0 1rem;">
+  <div style="height: 150vh; border: dashed 2px var(--wa-color-surface-border); padding: 0 1rem;">
     <p>Scroll down and give it a try! 👇</p>
   </div>
   <wa-button slot="footer" variant="brand">Close</wa-button>
@@ -350,7 +350,7 @@ const App = () => {
         <div
           style={{
             height: '150vh',
-            border: 'dashed 2px var(--wa-color-surface-outline)',
+            border: 'dashed 2px var(--wa-color-surface-border)',
             padding: '0 1rem'
           }}
         >
@@ -375,7 +375,7 @@ The header shows a functional close button by default. You can use the `header-a
 
 ```html:preview
 <wa-drawer label="Drawer" class="drawer-header-actions">
-  <wa-icon-button class="new-window" slot="header-actions" name="box-arrow-up-right"></wa-icon-button>
+  <wa-icon-button class="new-window" slot="header-actions" name="arrow-up-right-from-square" variant="solid"></wa-icon-button>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand">Close</wa-button>
 </wa-drawer>
@@ -406,7 +406,7 @@ const App = () => {
   return (
     <>
       <WaDrawer label="Drawer" open={open} onWaAfterHide={() => setOpen(false)}>
-        <WaIconButton slot="header-actions" name="box-arrow-up-right" onClick={() => window.open(location.href)} />
+        <WaIconButton slot="header-actions" name="arrow-up-right-from-square" onClick={() => window.open(location.href)} />
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
           Close

docs/pages/components/dropdown.md

@@ -22,11 +22,11 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a
     <wa-divider></wa-divider>
     <wa-menu-item>
       Prefix
-      <wa-icon slot="prefix" name="gift"></wa-icon>
+      <wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
     </wa-menu-item>
     <wa-menu-item>
       Suffix Icon
-      <wa-icon slot="suffix" name="heart"></wa-icon>
+      <wa-icon slot="suffix" name="heart" variant="solid"></wa-icon>
     </wa-menu-item>
   </wa-menu>
 </wa-dropdown>
@@ -355,7 +355,7 @@ import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const css = `
   .dropdown-hoist {
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     padding: var(--wa-space-m);
     overflow: hidden;
   }
@@ -428,7 +428,7 @@ Dropdown panels will be clipped if they're inside a container that has `overflow
 <style>
   .dropdown-hoist {
     position: relative;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     padding: var(--wa-space-m);
     overflow: hidden;
   }
@@ -444,7 +444,7 @@ import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const css = `
   .dropdown-hoist {
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     padding: var(--wa-space-m);
     overflow: hidden;
   }

docs/pages/components/icon-button.md

@@ -24,9 +24,9 @@ const App = () => <WaIconButton name="gear" label="Settings" />;
 Icon buttons inherit their parent element's `font-size`.
 
 ```html:preview
-<wa-icon-button name="pencil" label="Edit" style="font-size: 1.5rem;"></wa-icon-button>
-<wa-icon-button name="pencil" label="Edit" style="font-size: 2rem;"></wa-icon-button>
-<wa-icon-button name="pencil" label="Edit" style="font-size: 2.5rem;"></wa-icon-button>
+<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 1.5rem;"></wa-icon-button>
+<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 2rem;"></wa-icon-button>
+<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 2.5rem;"></wa-icon-button>
 ```
 
 {% raw %}
@@ -36,9 +36,9 @@ import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
 
 const App = () => (
   <>
-    <WaIconButton name="pencil" label="Edit" style={{ fontSize: '1.5rem' }} />
-    <WaIconButton name="pencil" label="Edit" style={{ fontSize: '2rem' }} />
-    <WaIconButton name="pencil" label="Edit" style={{ fontSize: '2.5rem' }} />
+    <WaIconButton name="pen-to-square" variant="solid" label="Edit" style={{ fontSize: '1.5rem' }} />
+    <WaIconButton name="pen-to-square" variant="solid" label="Edit" style={{ fontSize: '2rem' }} />
+    <WaIconButton name="pen-to-square" variant="solid" label="Edit" style={{ fontSize: '2.5rem' }} />
   </>
 );
 ```
@@ -51,9 +51,9 @@ Icon buttons are designed to have a uniform appearance, so their color is not in
 
 ```html:preview
 <div class="icon-button-color">
-  <wa-icon-button name="type-bold" label="Bold"></wa-icon-button>
-  <wa-icon-button name="type-italic" label="Italic"></wa-icon-button>
-  <wa-icon-button name="type-underline" label="Underline"></wa-icon-button>
+  <wa-icon-button name="bold" variant="solid" label="Bold"></wa-icon-button>
+  <wa-icon-button name="italic" variant="solid" label="Italic"></wa-icon-button>
+  <wa-icon-button name="underline" variant="solid" label="Underline"></wa-icon-button>
 </div>
 
 <style>
@@ -93,9 +93,9 @@ const css = `
 const App = () => (
   <>
     <div className="icon-button-color">
-      <WaIconButton name="type-bold" label="Bold" />
-      <WaIconButton name="type-italic" label="Italic" />
-      <WaIconButton name="type-underline" label="Underline" />
+      <WaIconButton name="type-bold" variant="solid" label="Bold" />
+      <WaIconButton name="type-italic" variant="solid" label="Italic" />
+      <WaIconButton name="type-underline" variant="solid" label="Underline" />
     </div>
 
     <style>{css}</style>
@@ -108,13 +108,13 @@ const App = () => (
 Use the `href` attribute to convert the button to a link.
 
 ```html:preview
-<wa-icon-button name="gear" label="Settings" href="https://example.com" target="_blank"></wa-icon-button>
+<wa-icon-button name="gear" variant="solid" label="Settings" href="https://example.com" target="_blank"></wa-icon-button>
 ```
 
 ```jsx:react
 import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
 
-const App = () => <WaIconButton name="gear" label="Settings" href="https://example.com" target="_blank" />;
+const App = () => <WaIconButton name="gear" variant="solid" label="Settings" href="https://example.com" target="_blank" />;
 ```
 
 ### Icon Button with Tooltip
@@ -123,7 +123,7 @@ Wrap a tooltip around an icon button to provide contextual information to the us
 
 ```html:preview
 <wa-tooltip content="Settings">
-  <wa-icon-button name="gear" label="Settings"></wa-icon-button>
+  <wa-icon-button name="gear" variant="solid" label="Settings"></wa-icon-button>
 </wa-tooltip>
 ```
 
@@ -133,7 +133,7 @@ import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
 
 const App = () => (
   <WaTooltip content="Settings">
-    <WaIconButton name="gear" label="Settings" />
+    <WaIconButton name="gear" variant="solid" label="Settings" />
   </WaTooltip>
 );
 ```
@@ -143,11 +143,11 @@ const App = () => (
 Use the `disabled` attribute to disable the icon button.
 
 ```html:preview
-<wa-icon-button name="gear" label="Settings" disabled></wa-icon-button>
+<wa-icon-button name="gear" variant="solid" label="Settings" disabled></wa-icon-button>
 ```
 
 ```jsx:react
 import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
 
-const App = () => <WaIconButton name="gear" label="Settings" disabled />;
+const App = () => <WaIconButton name="gear" variant="solid" label="Settings" disabled />;
 ```

docs/pages/components/icon.md

@@ -19,23 +19,11 @@ All available icons in the `default` icon library are shown below. Click or tap
 <wa-icon name="icon-name-here"></wa-icon>
 ```
 
-<div class="icon-search">
-  <div class="icon-search-controls">
-    <wa-input placeholder="Search Icons" clearable>
-      <wa-icon slot="prefix" name="search"></wa-icon>
-    </wa-input>
-    <wa-select value="outline">
-      <wa-option value="outline">Outlined</wa-option>
-      <wa-option value="fill">Filled</wa-option>
-      <wa-option value="all">All icons</wa-option>
-    </wa-select>
-  </div>
-  <div class="icon-list"></div>
-  <input type="text" class="icon-copy-input" aria-hidden="true" tabindex="-1">
-</div>
-
 ## Examples
 
+TODO - show how to use `family` and `variant` attributes.
+TODO - show how to use FA pro via `data-webawesome-kit="..."`
+
 ### Colors
 
 Icons inherit their color from the current text color. Thus, you can set the `color` property on the `<wa-icon>` element or an ancestor to change the color.
@@ -44,23 +32,23 @@ Icons inherit their color from the current text color. Thus, you can set the `co
 <div style="color: #4a90e2;">
   <wa-icon name="exclamation-triangle"></wa-icon>
   <wa-icon name="archive"></wa-icon>
-  <wa-icon name="battery-charging"></wa-icon>
+  <wa-icon name="battery-three-quarters"></wa-icon>
   <wa-icon name="bell"></wa-icon>
 </div>
 <div style="color: #9013fe;">
   <wa-icon name="clock"></wa-icon>
   <wa-icon name="cloud"></wa-icon>
   <wa-icon name="download"></wa-icon>
-  <wa-icon name="file-earmark"></wa-icon>
+  <wa-icon name="file"></wa-icon>
 </div>
 <div style="color: #417505;">
   <wa-icon name="flag"></wa-icon>
   <wa-icon name="heart"></wa-icon>
   <wa-icon name="image"></wa-icon>
-  <wa-icon name="lightning"></wa-icon>
+  <wa-icon name="bolt-lightning"></wa-icon>
 </div>
 <div style="color: #f5a623;">
-  <wa-icon name="mic"></wa-icon>
+  <wa-icon name="microphone"></wa-icon>
   <wa-icon name="search"></wa-icon>
   <wa-icon name="star"></wa-icon>
   <wa-icon name="trash"></wa-icon>
@@ -77,23 +65,23 @@ const App = () => (
     <div style={{ color: '#4a90e2' }}>
       <WaIcon name="exclamation-triangle"></WaIcon>
       <WaIcon name="archive"></WaIcon>
-      <WaIcon name="battery-charging"></WaIcon>
+      <WaIcon name="battery-three-quarters"></WaIcon>
       <WaIcon name="bell"></WaIcon>
     </div>
     <div style={{ color: '#9013fe' }}>
       <WaIcon name="clock"></WaIcon>
       <WaIcon name="cloud"></WaIcon>
       <WaIcon name="download"></WaIcon>
-      <WaIcon name="file-earmark"></WaIcon>
+      <WaIcon name="file"></WaIcon>
     </div>
     <div style={{ color: '#417505' }}>
       <WaIcon name="flag"></WaIcon>
       <WaIcon name="heart"></WaIcon>
       <WaIcon name="image"></WaIcon>
-      <WaIcon name="lightning"></WaIcon>
+      <WaIcon name="bolt-lightning"></WaIcon>
     </div>
     <div style={{ color: '#f5a623' }}>
-      <WaIcon name="mic"></WaIcon>
+      <WaIcon name="microphone"></WaIcon>
       <WaIcon name="search"></WaIcon>
       <WaIcon name="star"></WaIcon>
       <WaIcon name="trash"></WaIcon>
@@ -112,17 +100,17 @@ Icons are sized relative to the current font size. To change their size, set the
 <div style="font-size: 32px;">
   <wa-icon name="exclamation-triangle"></wa-icon>
   <wa-icon name="archive"></wa-icon>
-  <wa-icon name="battery-charging"></wa-icon>
+  <wa-icon name="battery-three-quarters"></wa-icon>
   <wa-icon name="bell"></wa-icon>
   <wa-icon name="clock"></wa-icon>
   <wa-icon name="cloud"></wa-icon>
   <wa-icon name="download"></wa-icon>
-  <wa-icon name="file-earmark"></wa-icon>
+  <wa-icon name="file"></wa-icon>
   <wa-icon name="flag"></wa-icon>
   <wa-icon name="heart"></wa-icon>
   <wa-icon name="image"></wa-icon>
-  <wa-icon name="lightning"></wa-icon>
-  <wa-icon name="mic"></wa-icon>
+  <wa-icon name="bolt-lightning"></wa-icon>
+  <wa-icon name="microphone"></wa-icon>
   <wa-icon name="search"></wa-icon>
   <wa-icon name="star"></wa-icon>
   <wa-icon name="trash"></wa-icon>
@@ -138,17 +126,17 @@ const App = () => (
   <div style={{ fontSize: '32px' }}>
     <WaIcon name="exclamation-triangle" />
     <WaIcon name="archive" />
-    <WaIcon name="battery-charging" />
+    <WaIcon name="battery-three-quarters" />
     <WaIcon name="bell" />
     <WaIcon name="clock" />
     <WaIcon name="cloud" />
     <WaIcon name="download" />
-    <WaIcon name="file-earmark" />
+    <WaIcon name="file" />
     <WaIcon name="flag" />
     <WaIcon name="heart" />
     <WaIcon name="image" />
-    <WaIcon name="lightning" />
-    <WaIcon name="mic" />
+    <WaIcon name="bolt-lightning" />
+    <WaIcon name="microphone" />
     <WaIcon name="search" />
     <WaIcon name="star" />
     <WaIcon name="trash" />
@@ -163,13 +151,13 @@ const App = () => (
 For non-decorative icons, use the `label` attribute to announce it to assistive devices.
 
 ```html:preview
-<wa-icon name="star-fill" label="Add to favorites"></wa-icon>
+<wa-icon name="star" label="Add to favorites"></wa-icon>
 ```
 
 ```jsx:react
 import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 
-const App = () => <WaIcon name="star-fill" label="Add to favorites" />;
+const App = () => <WaIcon name="star" label="Add to favorites" />;
 ```
 
 ### Custom Icons
@@ -680,190 +668,3 @@ If you want to change the icons Web Awesome uses internally, you can register an
   });
 </script>
 ```
-
-<!-- Supporting scripts and styles for the search utility -->
-<script>
-  function wrapWithTooltip(item) {
-    const tooltip = document.createElement('wa-tooltip');
-    tooltip.content = item.getAttribute('data-name');
-
-    // Close open tooltips
-    document.querySelectorAll('.icon-list wa-tooltip[open]').forEach(tooltip => tooltip.hide());
-
-    // Wrap it with a tooltip and trick it into showing up
-    item.parentNode.insertBefore(tooltip, item);
-    tooltip.appendChild(item);
-    requestAnimationFrame(() => tooltip.dispatchEvent(new MouseEvent('mouseover')));
-  }
-
-  fetch('/dist/assets/icons/icons.json')
-    .then(res => res.json())
-    .then(icons => {
-      const container = document.querySelector('.icon-search');
-      const input = container.querySelector('wa-input');
-      const select = container.querySelector('wa-select');
-      const copyInput = container.querySelector('.icon-copy-input');
-      const loader = container.querySelector('.icon-loader');
-      const list = container.querySelector('.icon-list');
-      const queue = [];
-      let inputTimeout;
-
-      // Generate icons
-      icons.map(i => {
-        const item = document.createElement('div');
-        item.classList.add('icon-list-item');
-        item.setAttribute('data-name', i.name);
-        item.setAttribute('data-terms', [i.name, i.title, ...(i.tags || []), ...(i.categories || [])].join(' '));
-        item.innerHTML = `
-          <svg width="1em" height="1em" fill="currentColor">
-            <use href="/assets/images/sprite.svg#${i.name}"></use>
-          </svg>
-        `;
-        list.appendChild(item);
-
-        // Wrap it with a tooltip the first time the mouse lands on it. We do this instead of baking them into the DOM
-        // to improve this page's performance. See: https://github.com/shoelace-style/shoelace/issues/1122
-        item.addEventListener('mouseover', () => wrapWithTooltip(item), { once: true });
-
-        // Copy on click
-        item.addEventListener('click', () => {
-          const tooltip = item.closest('wa-tooltip');
-          copyInput.value = i.name;
-          copyInput.select();
-          document.execCommand('copy');
-
-          if (tooltip) {
-            tooltip.content = 'Copied!';
-            setTimeout(() => tooltip.content = i.name, 1000);
-          }
-        });
-      });
-
-      // Filter as the user types
-      input.addEventListener('wa-input', () => {
-        clearTimeout(inputTimeout);
-        inputTimeout = setTimeout(() => {
-          [...list.querySelectorAll('.icon-list-item')].map(item => {
-            const filter = input.value.toLowerCase();
-            if (filter === '') {
-              item.hidden = false;
-            } else {
-              const terms = item.getAttribute('data-terms').toLowerCase();
-              item.hidden = terms.indexOf(filter) < 0;
-            }
-          });
-        }, 250);
-      });
-
-      // Sort by type and remember preference
-      const iconType = sessionStorage.getItem('wa-icon:type') || 'outline';
-      select.value = iconType;
-      list.setAttribute('data-type', select.value);
-      select.addEventListener('wa-change', () => {
-        list.setAttribute('data-type', select.value);
-        sessionStorage.setItem('wa-icon:type', select.value);
-      });
-    });
-</script>
-
-<style>
-  .icon-search {
-    border: solid 1px var(--wa-color-surface-outline);
-    border-radius: var(--wa-corners-1x);
-    padding: var(--wa-space-m);
-  }
-
-  .icon-search [hidden] {
-    display: none;
-  }
-
-  .icon-search-controls {
-    display: flex;
-  }
-
-  .icon-search-controls wa-input {
-    flex: 1 1 auto;
-  }
-
-  .icon-search-controls wa-select {
-    width: 10rem;
-    flex: 0 0 auto;
-    margin-left: 1rem;
-  }
-
-  .icon-loader {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 30vh;
-  }
-
-  .icon-list {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    position: relative;
-    margin-top: 1rem;
-  }
-
-  .icon-loader[hidden],
-  .icon-list[hidden] {
-    display: none;
-  }
-
-  .icon-list-item {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--wa-corners-1x);
-    font-size: 24px;
-    width: 2em;
-    height: 2em;
-    margin: 0 auto;
-    cursor: copy;
-    transition: var(--wa-transition-fast) all;
-  }
-
-  .icon-list-item:hover {
-    background-color: var(--wa-color-brand-fill-muted);
-    color: var(--wa-color-brand-text-on-muted);
-  }
-
-  .icon-list[data-type="outline"] .icon-list-item[data-name$="-fill"] {
-    display: none;
-  }
-
-  .icon-list[data-type="fill"] .icon-list-item:not([data-name$="-fill"]) {
-    display: none;
-  }
-
-  .icon-copy-input {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  @media screen and (max-width: 1000px) {
-    .icon-list {
-      grid-template-columns: repeat(8, 1fr);
-    }
-
-    .icon-list-item {
-      font-size: 20px;
-    }
-
-    .icon-search-controls {
-      display: block;
-    }
-
-    .icon-search-controls wa-select {
-      width: auto;
-      margin: 1rem 0 0 0;
-    }
-  }
-
-  @media screen and (max-width: 500px) {
-    .icon-list {
-      grid-template-columns: repeat(4, 1fr);
-    }
-  }
-</style>

docs/pages/components/input.md

@@ -205,18 +205,18 @@ Use the `prefix` and `suffix` slots to add icons.
 
 ```html:preview
 <wa-input placeholder="Small" size="small">
-  <wa-icon name="house" slot="prefix"></wa-icon>
-  <wa-icon name="chat" slot="suffix"></wa-icon>
+  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
+  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
 </wa-input>
 <br />
 <wa-input placeholder="Medium" size="medium">
-  <wa-icon name="house" slot="prefix"></wa-icon>
-  <wa-icon name="chat" slot="suffix"></wa-icon>
+  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
+  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
 </wa-input>
 <br />
 <wa-input placeholder="Large" size="large">
-  <wa-icon name="house" slot="prefix"></wa-icon>
-  <wa-icon name="chat" slot="suffix"></wa-icon>
+  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
+  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
 </wa-input>
 ```
 
@@ -227,18 +227,18 @@ import WaInput from '@shoelace-style/shoelace/dist/react/input';
 const App = () => (
   <>
     <WaInput placeholder="Small" size="small">
-      <WaIcon name="house" slot="prefix"></WaIcon>
-      <WaIcon name="chat" slot="suffix"></WaIcon>
+      <WaIcon name="house" variant="solid" slot="prefix"></WaIcon>
+      <WaIcon name="comment" variant="solid" slot="suffix"></WaIcon>
     </WaInput>
     <br />
     <WaInput placeholder="Medium" size="medium">
-      <WaIcon name="house" slot="prefix"></WaIcon>
-      <WaIcon name="chat" slot="suffix"></WaIcon>
+      <WaIcon name="house" variant="solid" slot="prefix"></WaIcon>
+      <WaIcon name="comment" variant="solid" slot="suffix"></WaIcon>
     </WaInput>
     <br />
     <WaInput placeholder="Large" size="large">
-      <WaIcon name="house" slot="prefix"></WaIcon>
-      <WaIcon name="chat" slot="suffix"></WaIcon>
+      <WaIcon name="house" variant="solid" slot="prefix"></WaIcon>
+      <WaIcon name="comment" variant="solid" slot="suffix"></WaIcon>
     </WaInput>
   </>
 );

docs/pages/components/menu-item.md

@@ -16,11 +16,11 @@ layout: component
   <wa-divider></wa-divider>
   <wa-menu-item>
     Prefix Icon
-    <wa-icon slot="prefix" name="gift"></wa-icon>
+    <wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
   </wa-menu-item>
   <wa-menu-item>
     Suffix Icon
-    <wa-icon slot="suffix" name="heart"></wa-icon>
+    <wa-icon slot="suffix" name="heart" variant="solid"></wa-icon>
   </wa-menu-item>
 </wa-menu>
 ```
@@ -46,11 +46,11 @@ const App = () => (
     <WaDivider />
     <WaMenuItem>
       Prefix Icon
-      <WaIcon slot="prefix" name="gift" />
+      <WaIcon slot="prefix" name="gift" variant="solid" />
     </WaMenuItem>
     <WaMenuItem>
       Suffix Icon
-      <WaIcon slot="suffix" name="heart" />
+      <WaIcon slot="suffix" name="heart" variant="solid" />
     </WaMenuItem>
   </WaMenu>
 );
@@ -96,12 +96,12 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s
 ```html:preview
 <wa-menu style="max-width: 200px;">
   <wa-menu-item>
-    <wa-icon slot="prefix" name="house"></wa-icon>
+    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
     Home
   </wa-menu-item>
 
   <wa-menu-item>
-    <wa-icon slot="prefix" name="envelope"></wa-icon>
+    <wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
     Messages
     <wa-badge slot="suffix" variant="brand" pill>12</wa-badge>
   </wa-menu-item>
@@ -109,7 +109,7 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s
   <wa-divider></wa-divider>
 
   <wa-menu-item>
-    <wa-icon slot="prefix" name="gear"></wa-icon>
+    <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
     Settings
   </wa-menu-item>
 </wa-menu>
@@ -127,12 +127,12 @@ import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 const App = () => (
   <WaMenu style={{ maxWidth: '200px' }}>
     <WaMenuItem>
-      <WaIcon slot="prefix" name="house" />
+      <WaIcon slot="prefix" name="house" variant="solid" />
       Home
     </WaMenuItem>
 
     <WaMenuItem>
-      <WaIcon slot="prefix" name="envelope" />
+      <WaIcon slot="prefix" name="envelope" variant="solid" />
       Messages
       <WaBadge slot="suffix" variant="brand" pill>
         12
@@ -142,7 +142,7 @@ const App = () => (
     <WaDivider />
 
     <WaMenuItem>
-      <WaIcon slot="prefix" name="gear" />
+      <WaIcon slot="prefix" name="gear" variant="solid" />
       Settings
     </WaMenuItem>
   </WaMenu>

docs/pages/components/option.md

@@ -62,21 +62,21 @@ Add icons to the start and end of menu items using the `prefix` and `suffix` slo
 ```html:preview
 <wa-select label="Select one">
   <wa-option value="option-1">
-    <wa-icon slot="prefix" name="envelope"></wa-icon>
+    <wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
     Email
-    <wa-icon slot="suffix" name="patch-check"></wa-icon>
+    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
   </wa-option>
 
   <wa-option value="option-2">
-    <wa-icon slot="prefix" name="telephone"></wa-icon>
+    <wa-icon slot="prefix" name="phone" variant="solid"></wa-icon>
     Phone
-    <wa-icon slot="suffix" name="patch-check"></wa-icon>
+    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
   </wa-option>
 
   <wa-option value="option-3">
-    <wa-icon slot="prefix" name="chat-dots"></wa-icon>
+    <wa-icon slot="prefix" name="comment" variant="solid"></wa-icon>
     Chat
-    <wa-icon slot="suffix" name="patch-check"></wa-icon>
+    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
   </wa-option>
 </wa-select>
 ```

docs/pages/components/popup.md

@@ -63,22 +63,22 @@ Popup is a low-level utility built specifically for positioning elements. Do not
 
 <style>
   .popup-overview wa-popup {
-    --arrow-color: var(--wa-color-brand-fill-vivid-alt);
+    --arrow-color: var(--wa-color-brand-spot);
   }
 
   .popup-overview span[slot='anchor'] {
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-overview .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-overview-options {
@@ -112,22 +112,22 @@ import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const css = `
   .popup-overview wa-popup {
-    --arrow-color: var(--wa-color-brand-fill-vivid-alt);
+    --arrow-color: var(--wa-color-brand-spot);
   }
 
   .popup-overview span[slot='anchor'] {
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-overview .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-overview-options {
@@ -250,15 +250,15 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-active .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 </style>
 
@@ -281,15 +281,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-active .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 `;
 
@@ -332,15 +332,15 @@ By default, anchors are slotted into the popup using the `anchor` slot. If your
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px 0 0 50px;
   }
 
   #external-anchor ~ wa-popup .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 </style>
 ```
@@ -353,15 +353,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px 0 0 50px;
   }
 
   #external-anchor ~ wa-popup .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 `;
 
@@ -414,15 +414,15 @@ Since placement is preferred when using `flip`, you can observe the popup's curr
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-placement .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-placement wa-select {
@@ -450,15 +450,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-placement .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-placement wa-select {
@@ -518,15 +518,15 @@ Use the `distance` attribute to change the distance between the popup and its an
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-distance .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-distance wa-range {
@@ -553,15 +553,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-distance .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-distance wa-range {
@@ -615,15 +615,15 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-skidding .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-skidding wa-range {
@@ -650,15 +650,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-skidding .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-skidding wa-range {
@@ -736,22 +736,22 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
 
   <style>
     .popup-arrow wa-popup {
-      --arrow-color: var(--wa-color-brand-fill-vivid-alt);
+      --arrow-color: var(--wa-color-brand-spot);
     }
 
     .popup-arrow span[slot='anchor'] {
       display: inline-block;
       width: 150px;
       height: 150px;
-      border: dashed 2px var(--wa-color-neutral-outline-vivid);
+      border: dashed 2px var(--wa-color-neutral-spot);
       margin: 50px;
     }
 
     .popup-arrow .box {
       width: 100px;
       height: 50px;
-      background: var(--wa-color-brand-fill-vivid-alt);
-      border-radius: var(--wa-corners-1x);
+      background: var(--wa-color-brand-spot);
+      border-radius: var(--wa-corners-s);
     }
 
     .popup-arrow-options {
@@ -793,22 +793,22 @@ import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const css = `
   .popup-arrow wa-popup {
-    --arrow-color: var(--wa-color-brand-fill-vivid-alt);
+    --arrow-color: var(--wa-color-brand-spot);
   }
 
   .popup-arrow span[slot='anchor'] {
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-arrow .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-arrow-options {
@@ -912,7 +912,7 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
@@ -921,8 +921,8 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
     height: 100%;
     min-width: 50px;
     min-height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-sync wa-select {
@@ -951,7 +951,7 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
@@ -960,8 +960,8 @@ const css = `
     height: 100%;
     min-width: 50px;
     min-height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-sync wa-switch {
@@ -1020,7 +1020,7 @@ Toggle the switch and scroll the container to see the difference.
   .popup-strategy .overflow {
     position: relative;
     height: 300px;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1028,15 +1028,15 @@ Toggle the switch and scroll the container to see the difference.
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 150px 50px;
   }
 
   .popup-strategy .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-strategy wa-switch {
@@ -1062,7 +1062,7 @@ const css = `
   .popup-strategy .overflow {
     position: relative;
     height: 300px;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1070,15 +1070,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 150px 50px;
   }
 
   .popup-strategy .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-strategy wa-switch {
@@ -1133,7 +1133,7 @@ Scroll the container to see how the popup flips to prevent clipping.
   .popup-flip .overflow {
     position: relative;
     height: 300px;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1141,15 +1141,15 @@ Scroll the container to see how the popup flips to prevent clipping.
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 150px 50px;
   }
 
   .popup-flip .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 </style>
 
@@ -1171,7 +1171,7 @@ const css = `
   .popup-flip .overflow {
     position: relative;
     height: 300px;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1179,15 +1179,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 150px 50px;
   }
 
   .popup-flip .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 `;
 
@@ -1240,7 +1240,7 @@ Scroll the container to see how the popup changes it's fallback placement to pre
   .popup-flip-fallbacks .overflow {
     position: relative;
     height: 300px;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1248,15 +1248,15 @@ Scroll the container to see how the popup changes it's fallback placement to pre
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 250px 50px;
   }
 
   .popup-flip-fallbacks .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 </style>
 ```
@@ -1268,7 +1268,7 @@ const css = `
   .popup-flip-fallbacks .overflow {
     position: relative;
     height: 300px;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1276,15 +1276,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 250px 50px;
   }
 
   .popup-flip-fallbacks .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 `;
 
@@ -1327,7 +1327,7 @@ Toggle the switch to see the difference.
 <style>
   .popup-shift .overflow {
     position: relative;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1335,15 +1335,15 @@ Toggle the switch to see the difference.
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 60px 0 0 10px;
   }
 
   .popup-shift .box {
     width: 300px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 </style>
 
@@ -1364,7 +1364,7 @@ import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
 const css = `
   .popup-shift .overflow {
     position: relative;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1372,15 +1372,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 60px 0 0 10px;
   }
 
   .popup-shift .box {
     width: 300px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 `;
 
@@ -1433,7 +1433,7 @@ Scroll the container to see the popup resize as its available space changes.
   .popup-auto-size .overflow {
     position: relative;
     height: 300px;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1441,13 +1441,13 @@ Scroll the container to see the popup resize as its available space changes.
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 250px 50px 100px 50px;
   }
 
   .popup-auto-size .box {
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
 
     /* This sets the preferred size of the popup's content */
     width: 100px;
@@ -1478,7 +1478,7 @@ const css = `
   .popup-auto-size .overflow {
     position: relative;
     height: 300px;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1486,13 +1486,13 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 250px 50px 100px 50px;
   }
 
   .popup-auto-size .box {
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
 
     /* This sets the preferred size of the popup's content */
     width: 100px;
@@ -1530,6 +1530,131 @@ const App = () => {
 };
 ```
 
+### Hover Bridge
+
+When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the gap using an invisible element. This makes listening for events such as `mouseover` and `mouseout` more sane because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is active. For demonstration purposes, the bridge in this example is shown in orange.
+
+```html:preview
+<div class="popup-hover-bridge">
+  <wa-popup placement="top" hover-bridge distance="10" skidding="0" active>
+    <span slot="anchor"></span>
+    <div class="box"></div>
+  </wa-popup>
+  <br>
+  <wa-switch checked>Hover Bridge</wa-switch><br>
+  <wa-range min="0" max="50" step="1" value="10" label="Distance"></wa-range>
+  <wa-range min="-50" max="50" step="1" value="0" label="Skidding"></wa-range>
+</div>
+<style>
+  .popup-hover-bridge span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--wa-color-neutral-spot);
+    margin: 50px;
+  }
+
+  .popup-hover-bridge .box {
+    width: 100px;
+    height: 50px;
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
+  }
+
+  .popup-hover-bridge wa-range {
+    max-width: 260px;
+    margin-top: .5rem;
+  }
+
+  .popup-hover-bridge wa-popup::part(hover-bridge) {
+    background: tomato;
+    opacity: .5;
+  }
+</style>
+<script>
+  const container = document.querySelector('.popup-hover-bridge');
+  const popup = container.querySelector('wa-popup');
+  const hoverBridge = container.querySelector('wa-switch');
+  const distance = container.querySelector('wa-range[label="Distance"]');
+  const skidding = container.querySelector('wa-range[label="Skidding"]');
+  distance.addEventListener('wa-input', () => (popup.distance = distance.value));
+  skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
+  hoverBridge.addEventListener('wa-change', () => (popup.hoverBridge = hoverBridge.checked));
+</script>
+```
+
+```jsx:react
+import { useState } from 'react';
+import WaPopup from '@shoelace-style/shoelace/dist/react/popup';
+import WaRange from '@shoelace-style/shoelace/dist/react/range';
+import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
+const css = `
+  .popup-hover-bridge span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--wa-color-neutral-spot);
+    margin: 50px;
+  }
+
+  .popup-hover-bridge .box {
+    width: 100px;
+    height: 50px;
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
+  }
+
+  .popup-hover-bridge wa-range {
+    max-width: 260px;
+    margin-top: .5rem;
+  }
+
+  .popup-hover-bridge wa-popup::part(hover-bridge) {
+    background: tomato;
+    opacity: .5;
+  }
+`;
+const App = () => {
+  const [hoverBridge, setHoverBridge] = useState(true);
+  const [distance, setDistance] = useState(10);
+  const [skidding, setSkidding] = useState(0);
+  return (
+    <>
+      <div class="popup-hover-bridge">
+        <WaPopup placement="top" hover-bridge={hoverBridge} distance={distance} skidding={skidding} active>
+          <span slot="anchor" />
+          <div class="box" />
+        </WaPopup>
+        <br />
+        <WaSwitch
+          checked={hoverBridge}
+          onWaChange={event => setHoverBridge(event.target.checked)}
+         >
+          Hover Bridge
+        </WaSwitch><br />
+        <WaRange
+          min="0"
+          max="50"
+          step="1"
+          value={distance}
+          label="Distance"
+          onWaInput={event => setDistance(event.target.value)}
+        />
+        <WaRange
+          min="-50"
+          max="50"
+          step="1"
+          value={skidding}
+          label="Skidding"
+          onWaInput={event => setSkidding(event.target.value)}
+        />
+      </div>
+      <style>{css}</style>
+    </>
+  );
+};
+```
+
 ### Virtual Elements
 
 In most cases, popups are anchored to an actual element. Sometimes, it can be useful to anchor them to a non-element. To do this, you can pass a `VirtualElement` to the anchor property. A virtual element must contain a function called `getBoundingClientRect()` that returns a [`DOMRect`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect) object as shown below.
@@ -1608,7 +1733,7 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc
   .popup-virtual-element .circle {
     width: 100px;
     height: 100px;
-    border: solid 4px var(--wa-color-neutral-outline-vivid);
+    border: solid 4px var(--wa-color-neutral-spot);
     border-radius: 50%;
     translate: -50px -50px;
     animation: 1s virtual-cursor infinite;
@@ -1636,7 +1761,7 @@ const css = `
   .popup-virtual-element .circle {
     width: 100px;
     height: 100px;
-    border: solid 4px var(--wa-color-neutral-outline-vivid);
+    border: solid 4px var(--wa-color-neutral-spot);
     border-radius: 50%;
     translate: -50px -50px;
     animation: 1s virtual-cursor infinite;

docs/pages/components/progress-bar.md

@@ -58,8 +58,8 @@ Use the default slot to show a value.
 
 <br />
 
-<wa-button circle><wa-icon name="dash" label="Decrease"></wa-icon></wa-button>
-<wa-button circle><wa-icon name="plus" label="Increase"></wa-icon></wa-button>
+<wa-button circle><wa-icon name="minus" variant="solid" label="Decrease"></wa-icon></wa-button>
+<wa-button circle><wa-icon name="plus" variant="solid" label="Increase"></wa-icon></wa-button>
 
 <script>
   const progressBar = document.querySelector('.progress-bar-values');
@@ -103,11 +103,11 @@ const App = () => {
       <br />
 
       <WaButton circle onClick={() => adjustValue(-10)}>
-        <WaIcon name="dash" label="Decrease" />
+        <WaIcon name="minus" variant="solid" label="Decrease" />
       </WaButton>
 
       <WaButton circle onClick={() => adjustValue(10)}>
-        <WaIcon name="plus" label="Increase" />
+        <WaIcon name="plus" variant="solid" label="Increase" />
       </WaButton>
     </>
   );

docs/pages/components/progress-ring.md

@@ -108,8 +108,8 @@ Use the default slot to show a label inside the progress ring.
 
 <br />
 
-<wa-button circle><wa-icon name="dash" label="Decrease"></wa-icon></wa-button>
-<wa-button circle><wa-icon name="plus" label="Increase"></wa-icon></wa-button>
+<wa-button circle><wa-icon name="minus" variant="solid" label="Decrease"></wa-icon></wa-button>
+<wa-button circle><wa-icon name="plus" variant="solid" label="Increase"></wa-icon></wa-button>
 
 <script>
   const progressRing = document.querySelector('.progress-ring-values');
@@ -157,11 +157,11 @@ const App = () => {
       <br />
 
       <WaButton circle onClick={() => adjustValue(-10)}>
-        <WaIcon name="dash" label="Decrease" />
+        <WaIcon name="minus" variant="solid" label="Decrease" />
       </WaButton>
 
       <WaButton circle onClick={() => adjustValue(10)}>
-        <WaIcon name="plus" label="Increase" />
+        <WaIcon name="plus" variant="solid" label="Increase" />
       </WaButton>
     </>
   );

docs/pages/components/radio-button.md

@@ -203,18 +203,18 @@ Use the `prefix` and `suffix` slots to add icons.
 ```html:preview
 <wa-radio-group label="Select an option" name="a" value="1">
   <wa-radio-button value="1">
-    <wa-icon slot="prefix" name="archive"></wa-icon>
+    <wa-icon slot="prefix" name="archive" variant="solid"></wa-icon>
     Option 1
   </wa-radio-button>
 
   <wa-radio-button value="2">
-    <wa-icon slot="suffix" name="bag"></wa-icon>
+    <wa-icon slot="suffix" name="bag-shopping" variant="solid"></wa-icon>
     Option 2
   </wa-radio-button>
 
   <wa-radio-button value="3">
-    <wa-icon slot="prefix" name="gift"></wa-icon>
-    <wa-icon slot="suffix" name="cart"></wa-icon>
+    <wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
+    <wa-icon slot="suffix" name="shopping-cart" variant="solid"></wa-icon>
     Option 3
   </wa-radio-button>
 </wa-radio-group>
@@ -228,18 +228,18 @@ import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 const App = () => (
   <WaRadioGroup label="Select an option" name="a" value="1">
     <WaRadioButton value="1">
-      <WaIcon slot="prefix" name="archive" />
+      <WaIcon slot="prefix" name="archive" variant="solid" />
       Option 1
     </WaRadioButton>
 
     <WaRadioButton value="2">
-      <WaIcon slot="suffix" name="bag" />
+      <WaIcon slot="suffix" name="bag" variant="solid" />
       Option 2
     </WaRadioButton>
 
     <WaRadioButton value="3">
-      <WaIcon slot="prefix" name="gift" />
-      <WaIcon slot="suffix" name="cart" />
+      <WaIcon slot="prefix" name="gift" variant="solid" />
+      <WaIcon slot="suffix" name="cart" variant="solid" />
       Option 3
     </WaRadioButton>
   </WaRadioGroup>
@@ -253,23 +253,23 @@ You can omit button labels and use icons instead. Make sure to set a `label` att
 ```html:preview
 <wa-radio-group label="Select an option" name="a" value="neutral">
   <wa-radio-button value="angry">
-    <wa-icon name="emoji-angry" label="Angry"></wa-icon>
+    <wa-icon name="face-angry" variant="solid" label="Angry"></wa-icon>
   </wa-radio-button>
 
   <wa-radio-button value="sad">
-    <wa-icon name="emoji-frown" label="Sad"></wa-icon>
+    <wa-icon name="face-frown" variant="solid" label="Sad"></wa-icon>
   </wa-radio-button>
 
   <wa-radio-button value="neutral">
-    <wa-icon name="emoji-neutral" label="Neutral"></wa-icon>
+    <wa-icon name="face-meh" variant="solid" label="Neutral"></wa-icon>
   </wa-radio-button>
 
   <wa-radio-button value="happy">
-    <wa-icon name="emoji-smile" label="Happy"></wa-icon>
+    <wa-icon name="face-smile" variant="solid" label="Happy"></wa-icon>
   </wa-radio-button>
 
   <wa-radio-button value="laughing">
-    <wa-icon name="emoji-laughing" label="Laughing"></wa-icon>
+    <wa-icon name="face-laugh" variant="solid" label="Laughing"></wa-icon>
   </wa-radio-button>
 </wa-radio-group>
 ```
@@ -282,23 +282,23 @@ import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 const App = () => (
   <WaRadioGroup label="Select an option" name="a" value="neutral">
     <WaRadioButton value="angry">
-      <WaIcon name="emoji-angry" label="Angry" />
+      <WaIcon name="face-angry" label="Angry" />
     </WaRadioButton>
 
     <WaRadioButton value="sad">
-      <WaIcon name="emoji-frown" label="Sad" />
+      <WaIcon name="face-frown" label="Sad" />
     </WaRadioButton>
 
     <WaRadioButton value="neutral">
-      <WaIcon name="emoji-neutral" label="Neutral" />
+      <WaIcon name="face-neutral" label="Neutral" />
     </WaRadioButton>
 
     <WaRadioButton value="happy">
-      <WaIcon name="emoji-smile" label="Happy" />
+      <WaIcon name="face-smile" label="Happy" />
     </WaRadioButton>
 
     <WaRadioButton value="laughing">
-      <WaIcon name="emoji-laughing" label="Laughing" />
+      <WaIcon name="face-laughing" label="Laughing" />
     </WaRadioButton>
   </WaRadioGroup>
 );

docs/pages/components/range.md

@@ -112,8 +112,8 @@ You can customize the active and inactive portions of the track using the `--tra
 ```html:preview
 <wa-range
   style="
-  --track-color-active: var(--wa-color-brand-fill-vivid);
-  --track-color-inactive: var(--wa-color-brand-fill-muted-alt);
+  --track-color-active: var(--wa-color-brand-spot);
+  --track-color-inactive: var(--wa-color-brand-fill-highlight);
 "
 ></wa-range>
 ```
@@ -126,8 +126,8 @@ import WaRange from '@shoelace-style/shoelace/dist/react/range';
 const App = () => (
   <WaRange
     style={{
-      '--track-color-active': 'var(--wa-color-brand-fill-vivid)',
-      '--track-color-inactive': 'var(--wa-color-brand-fill-muted-alt)'
+      '--track-color-active': 'var(--wa-color-brand-spot)',
+      '--track-color-inactive': 'var(--wa-color-brand-fill-highlight)'
     }}
   />
 );
@@ -144,8 +144,8 @@ You can customize the initial offset of the active track using the `--track-acti
   min="-100"
   max="100"
   style="
-  --track-color-active: var(--wa-color-brand-fill-vivid);
-  --track-color-inactive: var(--wa-color-brand-fill-muted-alt);
+  --track-color-active: var(--wa-color-brand-spot);
+  --track-color-inactive: var(--wa-color-brand-fill-highlight);
   --track-active-offset: 50%;
 "
 ></wa-range>
@@ -161,8 +161,8 @@ const App = () => (
     min={-100}
     max={100}
     style={{
-      '--track-color-active': 'var(--wa-color-brand-fill-vivid)',
-      '--track-color-inactive': 'var(--wa-color-brand-fill-muted-alt)',
+      '--track-color-active': 'var(--wa-color-brand-spot)',
+      '--track-color-inactive': 'var(--wa-color-brand-fill-highlight)',
       '--track-active-offset': '50%'
     }}
   />

docs/pages/components/rating.md

@@ -137,9 +137,9 @@ The event has a payload with `phase` and `value` properties. The `phase` propert
     position: relative;
     top: -4px;
     left: 8px;
-    border-radius: var(--wa-corners-1x);
-    background: var(--wa-color-neutral-outline-vivid);
-    color: var(--wa-color-neutral-text-on-vivid);
+    border-radius: var(--wa-corners-s);
+    background: var(--wa-color-neutral-spot);
+    color: var(--wa-color-neutral-text-on-spot);
     text-align: center;
     padding: 4px 6px;
   }
@@ -160,9 +160,9 @@ const css = `
     position: relative;
     top: -4px;
     left: 8px;
-    border-radius: var(--wa-corners-1x);
-    background: var(--wa-color-neutral-outline-vivid);
-    color: var(--wa-color-neutral-text-on-vivid);
+    border-radius: var(--wa-corners-s);
+    background: var(--wa-color-neutral-spot);
+    color: var(--wa-color-neutral-text-on-spot);
     text-align: center;
     padding: 4px 6px;
   }
@@ -207,7 +207,7 @@ You can provide custom icons by passing a function to the `getSymbol` property.
 
 <script>
   const rating = document.querySelector('.rating-hearts');
-  rating.getSymbol = () => '<wa-icon name="heart-fill"></wa-icon>';
+  rating.getSymbol = () => '<wa-icon name="heart" variant="solid"></wa-icon>';
 </script>
 ```
 
@@ -219,7 +219,7 @@ import WaRating from '@shoelace-style/shoelace/dist/react/rating';
 const App = () => (
   <WaRating
     label="Rating"
-    getSymbol={() => '<wa-icon name="heart-fill"></wa-icon>'}
+    getSymbol={() => '<wa-icon name="heart" variant="solid"></wa-icon>'}
     style={{ '--symbol-color-active': '#ff4136' }}
   />
 );
@@ -238,7 +238,7 @@ You can also use the `getSymbol` property to render different icons based on val
   const rating = document.querySelector('.rating-emojis');
 
   rating.getSymbol = value => {
-    const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
+    const icons = ['face-angry', 'face-frown', 'face-meh', 'face-smile', 'face-laugh'];
     return `<wa-icon name="${icons[value - 1]}"></wa-icon>`;
   };
 </script>
@@ -248,7 +248,7 @@ You can also use the `getSymbol` property to render different icons based on val
 import WaRating from '@shoelace-style/shoelace/dist/react/rating';
 
 function getSymbol(value) {
-  const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
+  const icons = ['face-angry', 'face-frown', 'face-meh', 'face-smile', 'face-laugh'];
   return `<wa-icon name="${icons[value - 1]}"></wa-icon>`;
 }
 

docs/pages/components/resize-observer.md

@@ -26,7 +26,7 @@ The resize observer will report changes to the dimensions of the elements it wra
 <style>
   .resize-observer-overview div {
     display: flex;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -41,7 +41,7 @@ import WaResizeObserver from '@shoelace-style/shoelace/dist/react/resize-observe
 const css = `
   .resize-observer-overview div {
     display: flex;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     align-items: center;
     justify-content: center;
     text-align: center;

docs/pages/components/select.md

@@ -401,21 +401,21 @@ Use the `prefix` slot to prepend an icon to the control.
 
 ```html:preview
 <wa-select placeholder="Small" size="small" clearable>
-  <wa-icon name="house" slot="prefix"></wa-icon>
+  <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
   <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>
 <br />
 <wa-select placeholder="Medium" size="medium" clearable>
-  <wa-icon name="house" slot="prefix"></wa-icon>
+  <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
   <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>
 <br />
 <wa-select placeholder="Large" size="large" clearable>
-  <wa-icon name="house" slot="prefix"></wa-icon>
+  <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
   <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>
@@ -430,21 +430,21 @@ import WaSelect from '@shoelace-style/shoelace/dist/react/select';
 const App = () => (
   <>
     <WaSelect placeholder="Small" size="small">
-      <WaIcon name="house" slot="prefix"></WaIcon>
+      <WaIcon slot="prefix" name="house" variant="solid"></WaIcon>
       <WaOption value="option-1">Option 1</WaOption>
       <WaOption value="option-2">Option 2</WaOption>
       <WaOption value="option-3">Option 3</WaOption>
     </WaSelect>
     <br />
     <WaSelect placeholder="Medium" size="medium">
-      <WaIcon name="house" slot="prefix"></WaIcon>
+      <WaIcon slot="prefix" name="house" variant="solid"></WaIcon>
       <WaOption value="option-1">Option 1</WaOption>
       <WaOption value="option-2">Option 2</WaOption>
       <WaOption value="option-3">Option 3</WaOption>
     </WaSelect>
     <br />
     <WaSelect placeholder="Large" size="large">
-      <WaIcon name="house" slot="prefix"></WaIcon>
+      <WaIcon slot="prefix" name="house" variant="solid"></WaIcon>
       <WaOption value="option-1">Option 1</WaOption>
       <WaOption value="option-2">Option 2</WaOption>
       <WaOption value="option-3">Option 3</WaOption>
@@ -468,15 +468,15 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
   class="custom-tag"
 >
   <wa-option value="email">
-    <wa-icon slot="prefix" name="envelope"></wa-icon>
+    <wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
     Email
   </wa-option>
   <wa-option value="phone">
-    <wa-icon slot="prefix" name="telephone"></wa-icon>
+    <wa-icon slot="prefix" name="phone" variant="solid"></wa-icon>
     Phone
   </wa-option>
   <wa-option value="chat">
-    <wa-icon slot="prefix" name="chat-dots"></wa-icon>
+    <wa-icon slot="prefix" name="comment" variant="solid"></wa-icon>
     Chat
   </wa-option>
 </wa-select>

docs/pages/components/skeleton.md

@@ -259,7 +259,7 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
   }
 
   .skeleton-avatars wa-skeleton:nth-child(2) {
-    --border-radius: var(--wa-corners-1x);
+    --border-radius: var(--wa-corners-s);
   }
 </style>
 ```
@@ -280,7 +280,7 @@ const css = `
   }
 
   .skeleton-avatars wa-skeleton:nth-child(2) {
-    --border-radius: var(--wa-corners-1x);
+    --border-radius: var(--wa-corners-s);
   }
 `;
 
@@ -318,7 +318,7 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
   }
 
   .skeleton-shapes .square::part(indicator) {
-    --border-radius: var(--wa-corners-1x);
+    --border-radius: var(--wa-corners-s);
   }
 
   .skeleton-shapes .circle::part(indicator) {
@@ -370,7 +370,7 @@ const css = `
   }
 
   .skeleton-shapes .square::part(indicator) {
-    --border-radius: var(--wa-corners-1x);
+    --border-radius: var(--wa-corners-s);
   }
 
   .skeleton-shapes .circle::part(indicator) {
@@ -438,7 +438,7 @@ const css = `
   }
 
   .skeleton-avatars wa-skeleton:nth-child(2) {
-    --border-radius: var(--wa-corners-1x);
+    --border-radius: var(--wa-corners-s);
   }
 `;
 

docs/pages/components/split-panel.md

@@ -249,7 +249,7 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background: var(--wa-color-neutral-fill-vivid-alt);
+    background: var(--wa-color-neutral-spot);
     transform: translateX(-3px);
   }
 
@@ -281,7 +281,7 @@ const css = `
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background: var(--wa-color-neutral-fill-vivid-alt);
+    background: var(--wa-color-neutral-spot);
     transform: translateX(-3px);
   }
 
@@ -638,7 +638,7 @@ You can target the `divider` part to apply CSS properties to the divider. To add
 
 ```html:preview
 <wa-split-panel style="--divider-width: 20px;">
-  <wa-icon slot="divider" name="grip-vertical"></wa-icon>
+  <wa-icon slot="divider" name="grip-vertical" variant="solid"></wa-icon>
   <div
     slot="start"
     style="
@@ -676,7 +676,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <WaSplitPanel style={{ '--divider-width': '20px' }}>
-    <WaIcon slot="divider" name="grip-vertical" />
+    <WaIcon slot="divider" name="grip-vertical" variant="solid" />
     <div
       slot="start"
       style={{
@@ -712,7 +712,7 @@ Here's a more elaborate example that changes the divider's color and width and a
 ```html:preview
 <div class="split-panel-divider">
   <wa-split-panel>
-    <wa-icon slot="divider" name="grip-vertical"></wa-icon>
+    <wa-icon slot="divider" name="grip-vertical" variant="solid"></wa-icon>
     <div
       slot="start"
       style="
@@ -744,7 +744,7 @@ Here's a more elaborate example that changes the divider's color and width and a
 
 <style>
   .split-panel-divider wa-split-panel {
-    --divider-width: 2px;
+    --divider-width: 4px;
   }
 
   .split-panel-divider wa-split-panel::part(divider) {
@@ -753,10 +753,10 @@ Here's a more elaborate example that changes the divider's color and width and a
 
   .split-panel-divider wa-icon {
     position: absolute;
-    border-radius: var(--wa-corners-3x);
+    border-radius: var(--wa-corners-l);
     background: var(--wa-color-red-50);
-    color: var(--wa-color-white);
-    padding: 0.5rem 0.125rem;
+    color: white;
+    padding: 0.5rem 0.25rem;
   }
 
   .split-panel-divider wa-split-panel::part(divider):focus-visible {
@@ -765,7 +765,7 @@ Here's a more elaborate example that changes the divider's color and width and a
 
   .split-panel-divider wa-split-panel:focus-within wa-icon {
     background-color: var(--wa-color-blue-50);
-    color: var(--wa-color-white);
+    color: white;
   }
 </style>
 ```
@@ -778,8 +778,8 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const css = `
   .split-panel-divider wa-split-panel {
-    --divider-width: 2px;
-  }
+    --divider-width: 4px;
+    }
 
   .split-panel-divider wa-split-panel::part(divider) {
     background-color: var(--wa-color-red-50);
@@ -787,10 +787,10 @@ const css = `
 
   .split-panel-divider wa-icon {
     position: absolute;
-    border-radius: var(--wa-corners-half);
+    border-radius: var(--wa-corners-xs);
     background: var(--wa-color-red-50);
-    color: var(--wa-color-white);
-    padding: .5rem .125rem;
+    color: white;
+    padding: .5rem .25rem;
   }
 
   .split-panel-divider wa-split-panel::part(divider):focus-visible {
@@ -799,7 +799,7 @@ const css = `
 
   .split-panel-divider wa-split-panel:focus-within wa-icon {
     background-color: var(--wa-color-blue-50);
-    color: var(--wa-color-white);
+    color: white;
   }
 `;
 
@@ -807,7 +807,7 @@ const App = () => (
   <>
     <div className="split-panel-divider">
       <WaSplitPanel>
-        <WaIcon slot="divider" name="grip-vertical" />
+        <WaIcon slot="divider" name="grip-vertical" variant="solid" />
         <div
           slot="start"
           style={{

docs/pages/components/tooltip.md

@@ -402,7 +402,7 @@ Tooltips will be clipped if they're inside a container that has `overflow: auto|
 <style>
   .tooltip-hoist {
     position: relative;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: hidden;
     padding: var(--wa-space-m);
   }
@@ -415,7 +415,7 @@ import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
 
 const css = `
   .tooltip-hoist {
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: hidden;
     padding: var(--wa-space-m);
     position: relative;

docs/pages/components/tree.md

@@ -304,8 +304,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
 
 ```html:preview
 <wa-tree class="custom-icons">
-  <wa-icon name="plus-square" slot="expand-icon"></wa-icon>
-  <wa-icon name="dash-square" slot="collapse-icon"></wa-icon>
+  <wa-icon name="square-plus" variant="solid" slot="expand-icon"></wa-icon>
+  <wa-icon name="square-minus" variant="solid" slot="collapse-icon"></wa-icon>
 
   <wa-tree-item>
     Deciduous
@@ -349,8 +349,8 @@ import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
 
 const App = () => (
   <WaTree>
-    <WaIcon name="plus-square" slot="expand-icon"></WaIcon>
-    <WaIcon name="dash-square" slot="collapse-icon"></WaIcon>
+    <WaIcon name="square-plus" variant="solid" slot="expand-icon"></WaIcon>
+    <WaIcon name="square-minus" variant="solid" slot="collapse-icon"></WaIcon>
 
     <WaTreeItem>
       Deciduous
@@ -388,39 +388,39 @@ Decorative icons can be used before labels to provide hints for each node.
 ```html:preview
 <wa-tree class="tree-with-icons">
   <wa-tree-item expanded>
-    <wa-icon name="folder"></wa-icon>
+    <wa-icon name="folder" variant="regular"></wa-icon>
     Documents
 
     <wa-tree-item>
-      <wa-icon name="folder"> </wa-icon>
+      <wa-icon name="folder" variant="regular"> </wa-icon>
       Photos
       <wa-tree-item>
-        <wa-icon name="image"></wa-icon>
+        <wa-icon name="image" variant="regular"></wa-icon>
         birds.jpg
       </wa-tree-item>
       <wa-tree-item>
-        <wa-icon name="image"></wa-icon>
+        <wa-icon name="image" variant="regular"></wa-icon>
         kitten.jpg
       </wa-tree-item>
       <wa-tree-item>
-        <wa-icon name="image"></wa-icon>
+        <wa-icon name="image" variant="regular"></wa-icon>
         puppy.jpg
       </wa-tree-item>
     </wa-tree-item>
 
     <wa-tree-item>
-      <wa-icon name="folder"></wa-icon>
+      <wa-icon name="folder" variant="regular"></wa-icon>
       Writing
       <wa-tree-item>
-        <wa-icon name="file"></wa-icon>
+        <wa-icon name="file" variant="regular"></wa-icon>
         draft.txt
       </wa-tree-item>
       <wa-tree-item>
-        <wa-icon name="file-pdf"></wa-icon>
+        <wa-icon name="file-pdf" variant="regular"></wa-icon>
         final.pdf
       </wa-tree-item>
       <wa-tree-item>
-        <wa-icon name="file-bar-graph"></wa-icon>
+        <wa-icon name="file-lines" variant="regular"></wa-icon>
         sales.xls
       </wa-tree-item>
     </wa-tree-item>

docs/pages/components/visually-hidden.md

@@ -26,7 +26,7 @@ In this example, the link will open a new window. Screen readers will announce "
 ```html:preview
 <a href="https://example.com/" target="_blank">
   Visit External Page
-  <wa-icon name="box-arrow-up-right"></wa-icon>
+  <wa-icon name="arrow-up-right-from-square" variant="regular"></wa-icon>
   <wa-visually-hidden>opens in a new window</wa-visually-hidden>
 </a>
 ```

docs/pages/experimental/demo_patterns/blog_listing.md

@@ -0,0 +1,276 @@
+---
+meta:
+  title: Blog Listing
+  description: TODO
+toc: false
+---
+
+<div class="wa:block-flow:3xl">
+  <div class="wa:background:college_ruled" style="border-radius:var(--wa-panel-corners); padding: var(--wa-space-3xl); background-color:var(--wa-color-brand-spot-darker); color:var(--wa-color-brand-text-on-spot); text-align: center;">
+    <h1 style="margin-block-start: 0;">Latest from the Blog</h1>
+    <p style="margin-block-end: 0;">Lorem ipsum dolor sit amet</p>
+  </div>
+  <div class="wa:arrange:aside-end" style="--wa-grid-size: 45ch;">
+    <div class="wa:block-flow:m">
+      <div class="wa:frame:landscape">
+        <img src="https://images.pexels.com/photos/6550721/pexels-photo-6550721.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+      </div>
+      <div class="wa:arrange:flex:justify-space_between">
+        <small><wa-format-date month="long" year="numeric"></wa-format-date></small>
+        <wa-badge variant="neutral">Design</wa-badge>
+      </div>
+      <h1>Pantone's Color of the Year 2024</h1>
+      <p>PANTONE 13-1023 Peach Fuzz has our new year starting off with lots of warm and fuzzies.</p>
+      <div class="wa:arrange:flex:gap-s">
+        <wa-avatar label="User avatar" style="--size: 2rem;"></wa-avatar>
+        <small>Author</small>
+      </div>
+    </div>
+    <div class="wa:arrange" style="align-content: start;">
+      <div class="wa:arrange:side-by-side:gap-s">
+        <div class="wa:block-flow:xs">
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+          <h4>Lorem Ipsum Dolor Sit Amet</h4>
+        </div>
+        <div class="wa:frame">
+          <img src="https://images.pexels.com/photos/1181676/pexels-photo-1181676.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+      </div>
+      <div class="wa:arrange:side-by-side:gap-s">
+        <div class="wa:block-flow:xs">
+          <small><wa-format-date date="2023-11-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+          <h4>Consectetur Adipiscing Elit</h4>
+        </div>
+        <div class="wa:frame">
+          <img src="https://images.pexels.com/photos/4219654/pexels-photo-4219654.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+      </div>
+      <div class="wa:arrange:side-by-side:gap-s">
+        <div class="wa:block-flow:xs">
+          <small><wa-format-date date="2023-11-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+          <h4>Nunc Rhoncus Enim Ligula</h4>
+        </div>
+        <div class="wa:frame">
+          <img src="https://images.pexels.com/photos/14822510/pexels-photo-14822510.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+      </div>
+      <div class="wa:arrange:side-by-side:gap-s">
+        <div class="wa:block-flow:xs">
+          <small><wa-format-date date="2023-10-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+          <h4>Donec Quis Tincidunt Massa</h4>
+        </div>
+        <div class="wa:frame">
+          <img src="https://images.pexels.com/photos/7988116/pexels-photo-7988116.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="wa:arrange:gap-m" style="background-color:var(--wa-color-brand-fill-subtle); padding:var(--wa-space-3xl); border-radius:var(--wa-panel-corners); box-shadow:var(--wa-shadow-level-1);">
+    <div class="wa:block-flow:s">
+      <h2 style="color:var(--wa-color-brand-text-on-fill)"><strong>Don't miss a thing.</strong></h2>
+      <p style="color:var(--wa-color-neutral-text-on-fill)">Subscribe to receive the latest posts in your inbox.</p>
+    </div>
+    <div class="wa:arrange:flex:justify-space_between:gap-s">
+      <wa-input class="wa:fill_space" type="email" placeholder="your@email.com">
+        <wa-icon name="envelope" variant="regular" label="email" slot="prefix"></wa-icon>
+      </wa-input>
+      <wa-button variant="brand">Subscribe</wa-button>
+    </div>
+  </div>
+  <div class="wa:block-flow:xl">
+    <div class="wa:arrange:flex:justify-space_between">
+      <h2>Arts & Culture</h2>
+      <wa-button outline variant="brand">
+        See more arts & culture posts
+        <wa-icon name="arrow-right" slot="suffix"></wa-icon>
+      </wa-button>
+    </div>
+    <div class="wa:arrange:size-s">
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/14363192/pexels-photo-14363192.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/8843689/pexels-photo-8843689.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/1646953/pexels-photo-1646953.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/3184188/pexels-photo-3184188.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+    </div>
+  </div>
+  <div class="wa:block-flow:xl">
+    <div class="wa:arrange:flex:justify-space_between">
+      <h2>Design</h2>
+      <wa-button outline variant="brand">
+        See more design posts
+        <wa-icon name="arrow-right" slot="suffix"></wa-icon>
+      </wa-button>
+    </div>
+    <div class="wa:arrange:size-s">
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/1762851/pexels-photo-1762851.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/196645/pexels-photo-196645.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/1194420/pexels-photo-1194420.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+    </div>
+  </div>
+  <div class="wa:block-flow:xl">
+    <div class="wa:arrange:flex:justify-space_between">
+      <h2>Web Development</h2>
+      <wa-button outline variant="brand">
+        See more web development posts
+        <wa-icon name="arrow-right" slot="suffix"></wa-icon>
+      </wa-button>
+    </div>
+    <div class="wa:arrange:size-s">
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/6321244/pexels-photo-6321244.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/5473956/pexels-photo-5473956.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/4709289/pexels-photo-4709289.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/3184340/pexels-photo-3184340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+    </div>
+  </div>
+  <div class="wa:arrange:size-s wa:collection">
+    <div>
+      <h2>So Fetch&nbsp;<wa-icon name="arrow-trend-up" style="color: var(--wa-color-brand-spot);"></wa-icon></h2>
+      <p style="margin-block-end:0;">Other readers have been into these trending posts recently.</p>
+    </div>
+    <wa-card class="wa:block-flow:xs">
+      <div class="wa:frame:landscape" slot="image">
+        <img src="https://images.pexels.com/photos/1194420/pexels-photo-1194420.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+      </div>
+      <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+      <h4>Headline Dolor Sit Amet</h4>
+      <wa-badge variant="neutral">Design</wa-badge>
+    </wa-card>
+    <wa-card class="wa:block-flow:xs">
+      <div class="wa:frame:landscape" slot="image">
+        <img src="https://images.pexels.com/photos/4219654/pexels-photo-4219654.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+      </div>
+      <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+      <h4>Consectetur Adipiscing Elit</h4>
+      <wa-badge variant="neutral">Arts & Culture</wa-badge>
+    </wa-card>
+    <wa-card class="wa:block-flow:xs">
+      <div class="wa:frame:landscape" slot="image">
+        <img src="https://images.pexels.com/photos/6321244/pexels-photo-6321244.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+      </div>
+      <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+      <h4>Headline Dolor Sit Amet</h4>
+      <wa-badge variant="neutral">Web Development</wa-badge>
+    </wa-card>
+  </div>
+  <div>
+    <h2>Browse All Topics</h2>
+    <div class="wa:arrange:gap-m">
+      <wa-button outline>Accessibility <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
+      <wa-button outline>Arts & Culture <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
+      <wa-button outline>Design <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
+      <wa-button outline>News <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
+      <wa-button outline>Typography <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
+      <wa-button outline>Web Development <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
+    </div>
+  </div>
+</div>
+
+<style>
+  :root {
+    --docs-content-max-width: 72rem;
+  }
+  #menu-toggle,
+  #sidebar {
+    display: none;
+  }
+  main {
+    padding: var(--docs-content-vertical-spacing) var(--docs-content-padding);
+    margin: 0;
+  }
+</style>

docs/pages/experimental/demo_patterns/blog_post.md

@@ -0,0 +1,178 @@
+---
+meta:
+  title: Blog Post
+  description: TODO
+toc: false
+---
+
+<div class="wa:block-flow:3xl">
+  <div class="wa:overflowing_hero">
+    <div class="wa:arrange wa:background:brand_spot_gradient" style="border-radius:var(--wa-panel-corners); padding:var(--wa-space-3xl); color:var(--wa-color-brand-text-on-spot);">
+      <div>
+        <div class="wa:arrange:flex:justify-space_between:gap-s">
+          <small><wa-format-date month="long" year="numeric"></wa-format-date></small>
+          <wa-badge variant="neutral">Design</wa-badge>
+        </div>
+        <h1>Pantone's Color of the Year 2024</h1>
+        <p>PANTONE 13-1023 Peach Fuzz has our new year starting off with lots of warm and fuzzies.</p>
+        <div class="wa:arrange:flex:gap-s">
+          <wa-avatar label="User avatar" style="--size: 2rem;"></wa-avatar>
+          <small>Author</small>
+        </div>
+      </div>
+      <div class="wa:frame:square">
+        <img src="https://images.pexels.com/photos/6550721/pexels-photo-6550721.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+      </div>
+    </div>
+  </div>
+  <div class="wa:block-flow:3xl" style="font-size:var(--wa-font-size-l); max-inline-size: 60ch; margin-inline: auto;">
+    <div class="wa:block-flow:xl">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae sapien non velit feugiat consectetur. Nulla lacinia ante a diam gravida cursus. Quisque fermentum ex a nisi cursus porttitor. Praesent id laoreet mauris, id efficitur sapien. Quisque eget metus velit. Nulla sit amet tristique lectus, tincidunt lobortis velit. Proin vitae facilisis lectus. Nunc vel sapien vitae dui commodo suscipit iaculis eget felis.</p>
+      <p>Praesent in erat semper, fringilla tellus non, lacinia felis. Nam eu fringilla nisl. Maecenas id tortor tempus, accumsan nisi eget, bibendum arcu. Pellentesque nec enim non nisl varius iaculis. Phasellus interdum nec ex nec faucibus. Vestibulum et quam auctor massa pellentesque tempor. Sed tincidunt nibh felis, ut euismod ante volutpat aliquam. Etiam varius suscipit ornare.</p>
+      <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed a leo tempus, pretium mi ac, pretium ipsum. Curabitur cursus eleifend enim. Pellentesque feugiat euismod tincidunt. Sed semper velit nunc, nec imperdiet eros varius ac. Aenean aliquam augue at venenatis volutpat. Proin a imperdiet leo. Nullam eget aliquet urna.</p>
+      <p>Mauris faucibus varius massa vel vulputate. Praesent ac ligula pretium, viverra eros vitae, consequat metus. Morbi commodo vehicula sem, eget scelerisque ipsum rutrum ut. Maecenas cursus dolor mattis risus dapibus pulvinar. Suspendisse ut dolor nec arcu lobortis molestie. Duis pulvinar tellus vitae felis volutpat hendrerit. Vivamus sodales condimentum quam, ut consequat massa viverra sed. Vestibulum laoreet tincidunt lacus nec ullamcorper. Quisque tincidunt turpis et sapien hendrerit, a laoreet massa dictum. Vestibulum dictum posuere lectus. Pellentesque ac lorem sodales, iaculis libero in, eleifend purus. Sed volutpat quam est, ac accumsan dolor viverra a. Duis blandit augue id tortor aliquet tempus. Nulla pharetra nec nisi non placerat. Donec in risus feugiat risus mattis pretium imperdiet a tortor.</p>
+      <p>Donec eros felis, dictum non placerat vitae, sodales in risus. Etiam felis lectus, consectetur quis tempor non, porta a metus. Cras finibus nibh a est semper, eget consequat libero pretium. Pellentesque placerat feugiat enim sit amet sodales. Proin convallis dui eu nibh tincidunt, a posuere dolor sagittis. Ut egestas et eros eu convallis. Integer eros elit, blandit at euismod sit amet, blandit sed velit. Donec dapibus nulla in augue commodo, at efficitur orci dictum. Nam id accumsan leo. Proin pellentesque tincidunt neque ornare gravida. Phasellus malesuada, orci vel ultricies fringilla, tortor ipsum cursus magna, non fermentum velit nibh at nunc. Duis purus mauris, ullamcorper eu tempus id, ornare gravida odio. Praesent ultrices accumsan iaculis. Maecenas ut metus a lectus venenatis euismod. Sed auctor, dui efficitur molestie convallis, diam odio faucibus turpis, vitae bibendum ante est non ligula.</p>
+      <wa-divider></wa-divider>
+      <div class="wa:arrange:flex:justify-space_between" style="font-size:var(--wa-font-size-m);">
+        <wa-radio-group name="a">
+          <wa-radio-button value="1"><wa-icon name="hands-clapping" label="Applaud"></wa-icon><small style="margin-inline-start:var(--wa-space-xs);">74</small></wa-radio-button>
+          <wa-radio-button value="2"><wa-icon name="heart" label="Love"></wa-icon><small style="margin-inline-start:var(--wa-space-xs);">161</small></wa-radio-button>
+          <wa-radio-button value="3"><wa-icon name="face-laugh-beam" label="Laugh"></wa-icon><small style="margin-inline-start:var(--wa-space-xs);">9</small></wa-radio-button>
+          <wa-radio-button value="4"><wa-icon name="face-sad-tear" label="Cry"></wa-icon><small style="margin-inline-start:var(--wa-space-xs);">1</small></wa-radio-button>
+        </wa-radio-group>
+        <div class="wa:arrange:flex:nowrap:gap-l">
+          <wa-tooltip content="Save">
+            <wa-icon-button name="bookmark" label="Save"></wa-icon-button>
+          </wa-tooltip>
+          <wa-tooltip content="Share">
+            <wa-icon-button name="share-from-square" label="Share"></wa-icon-button>
+          </wa-tooltip>
+        </div>
+      </div>
+    </div>
+    <div class="wa:block-flow:2xl" style="font-size:var(--wa-font-size-m);">
+      <h2>Comments</h2>
+      <div class="wa:arrange:flex:nowrap:gap-s">
+        <wa-avatar label="User avatar"></wa-avatar>
+        <wa-textarea class="wa:fill_space" rows="1" placeholder="Add a comment"></wa-textarea>
+      </div>
+      <div class="wa:arrange:flex:nowrap:align-start:gap-s">
+        <wa-avatar image="https://m.media-amazon.com/images/M/MV5BMTBlNDU1NTgtNjY1Zi00ZTU0LTlkN2ItZmM5NDM5NmMyNzk3XkEyXkFqcGdeQXVyMDM2NDM2MQ@@._V1_.jpg" label="User avatar"></wa-avatar>
+        <div class="wa:fill_space">
+          <div class="wa:chat_bubble">
+            <div class="wa:arrange:flex:justify-space_between">
+              <strong>Din Djarin</strong>
+              <small>1d</small>
+            </div>
+            <span>You expect me to search the galaxy for the home of this creature and deliver it to a race of enemy sorcerers?</span>
+          </div>
+          <div class="wa:arrange:flex:gap-m">
+            <div class="wa:arrange:flex:nowrap:gap-3xs">
+              <wa-icon-button name="thumbs-up" label="Like" style="color:var(--wa-color-neutral-text-on-surface)"></wa-icon-button>
+              <small>(3)</small>
+            </div>
+            <wa-button variant="text" size="small">Reply</wa-button>
+          </div>
+          <div class="wa:arrange:flex:nowrap:align-start:gap-s">
+            <wa-avatar image="https://cdn.mos.cms.futurecdn.net/zAQrY5fe3HAFvWrTLE6nNi.png" label="User avatar"></wa-avatar>
+            <div class="wa:fill_space">
+              <div class="wa:chat_bubble">
+                <div class="wa:arrange:flex:justify-space_between">
+                  <strong>The Armorer</strong>
+                  <small>12h</small>
+                </div>
+                <span>This is the Way.</span>
+              </div>
+              <div class="wa:arrange:flex:gap-m">
+                <div class="wa:arrange:flex:nowrap:gap-3xs">
+                  <wa-icon-button name="thumbs-up" label="Like" style="color:var(--wa-color-neutral-text-on-surface)"></wa-icon-button>
+                  <small>(21)</small>
+                </div>
+                <wa-button variant="text" size="small">Reply</wa-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wa:arrange:flex:nowrap:align-start:gap-s">
+        <wa-avatar image="https://static1.srcdn.com/wordpress/wp-content/uploads/2021/07/Nick-Nolte-and-Misty-Rosas-as-Kuiil-in-The-Mandalorian.jpg" label="User avatar"></wa-avatar>
+        <div class="wa:fill_space">
+          <div class="wa:chat_bubble">
+            <div class="wa:arrange:flex:justify-space_between">
+              <strong>Kuiil</strong>
+              <small>2w</small>
+            </div>
+            <span>I have spoken.</span>
+          </div>
+          <div class="wa:arrange:flex:gap-m">
+            <div class="wa:arrange:flex:nowrap:gap-3xs">
+              <wa-icon-button name="thumbs-up" label="Like" style="color:var(--wa-color-neutral-text-on-surface)"></wa-icon-button>
+              <small>(1)</small>
+            </div>
+            <wa-button variant="text" size="small">Reply</wa-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="wa:arrange:gap-m" style="background-color:var(--wa-color-brand-fill-subtle); padding:var(--wa-space-3xl); border-radius:var(--wa-panel-corners); box-shadow:var(--wa-shadow-level-1); margin-top:calc(var(--wa-space-3xl) * 2);">
+    <div class="wa:block-flow:s">
+      <h2 style="color:var(--wa-color-brand-text-on-fill)"><strong>Don't miss a thing.</strong></h2>
+      <p style="color:var(--wa-color-neutral-text-on-fill)">Subscribe to receive the latest posts in your inbox.</p>
+    </div>
+    <div class="wa:arrange:flex:gap-s">
+      <wa-input class="wa:fill_space" type="email" placeholder="your@email.com">
+        <wa-icon name="envelope" variant="regular" label="email" slot="prefix"></wa-icon>
+      </wa-input>
+      <wa-button variant="brand">Subscribe</wa-button>
+    </div>
+  </div>
+  <div style="background-color:var(--wa-color-neutral-fill-subtle); padding:var(--wa-space-3xl); border-radius:var(--wa-panel-corners); box-shadow:var(--wa-shadow-level-1);">
+    <div class="wa:block-flow:xl">
+      <h2>You may also like</h2>
+      <div class="wa:arrange:size-s">
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/8843689/pexels-photo-8843689.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/1646953/pexels-photo-1646953.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/3184188/pexels-photo-3184188.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+    </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  :root {
+    --docs-content-max-width: 72rem;
+  }
+  #menu-toggle,
+  #sidebar {
+    display: none;
+  }
+  main {
+    padding: var(--docs-content-vertical-spacing) var(--docs-content-padding);
+    margin: 0;
+  }
+</style>

docs/pages/experimental/demo_patterns/ecommerce_product_page.md

@@ -0,0 +1,217 @@
+---
+meta:
+  title: Ecommerce Product Page
+  description: TODO
+toc: false
+---
+
+<!-- cSpell:dictionaries lorem-ipsum -->
+
+<div class="wa:block-flow:3xl">
+  <wa-breadcrumb>
+    <wa-breadcrumb-item>Plants</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Indoor Plants</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Orchids</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Jupiter Moth Orchid</wa-breadcrumb-item>
+  </wa-breadcrumb>
+  <div class="wa:container wa:product-overview">
+    <div class="wa:arrange">
+      <div class="wa:product-overview:hero">
+        <img src="https://images.pexels.com/photos/1021386/pexels-photo-1021386.jpeg" alt="">
+      </div>
+      <div class="wa:product-overview:description wa:block-flow:2xl">
+        <div class="wa:product-overview:summary wa:block-flow:s">
+          <wa-badge>20% Off</wa-badge>
+          <h1>Jupiter Moth Orchid</h1>
+          <p class="wa:product-overview:price"><s>$35</s> $28</p>
+          <div class="wa:product-overview:rating wa:arrange:flex:gap-s">
+            <wa-rating label="average stars" readonly precision="0.1" value="4.7"></wa-rating>
+            <a href="#product-reviews"><small>419 reviews</small></a>
+          </div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </div>
+        <div class="wa:product-overview:actions wa:arrange:flex:gap-s">
+          <wa-input type="number" value="1" min="1" max="10"></wa-input>
+          <wa-button class="wa:fill_space" variant="brand">Add to cart</wa-button>
+        </div>
+        <div class="wa:product-overview:details wa:block-flow:s">
+          <wa-details summary="Details">
+            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="Care instructions">
+            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>
+    </div>
+  </div>
+  <div class="wa:container wa:product-reviews" id="product-reviews">
+    <wa-tab-group>
+      <wa-tab slot="nav" panel="reviews">Reviews</wa-tab>
+      <wa-tab slot="nav" panel="questions">Questions</wa-tab>
+      <wa-tab-panel name="reviews" style="margin-top:var(--wa-space-s);">
+        <div class="wa:arrange:aside-start">
+          <div class="wa:product-reviews:overview wa:block-flow:2xl">
+            <h2>Ratings and reviews</h2>
+            <div class="wa:block-flow:s">
+              <div class="wa:product-reviews:summary wa:arrange:flex:gap-s">
+                <h3 class="wa:arrange:flex:gap-s">
+                  4.7
+                  <wa-rating label="average stars" readonly precision="0.1" value="4.7"></wa-rating>
+                </h3>
+                <small>Based on 419 reviews</small>
+              </div>
+              <div class="wa:product-reviews:breakdown">
+                <ol>
+                  <li class="wa:arrange:flex:gap-s">
+                    <span>5</span>
+                    <wa-icon name="star"></wa-icon>
+                    <wa-progress-bar class="wa:fill_space" value="82"></wa-progress-bar>
+                    <span>340</span>
+                  </li>
+                  <li class="wa:arrange:flex:gap-s">
+                    <span>4</span>
+                    <wa-icon name="star"></wa-icon>
+                    <wa-progress-bar class="wa:fill_space" value="12"></wa-progress-bar>
+                    <span>53</span>
+                  </li>
+                  <li class="wa:arrange:flex:gap-s">
+                    <span>3</span>
+                    <wa-icon name="star"></wa-icon>
+                    <wa-progress-bar class="wa:fill_space" value="6"></wa-progress-bar>
+                    <span>24</span>
+                  </li>
+                  <li class="wa:arrange:flex:gap-s">
+                    <span>2</span>
+                    <wa-icon name="star"></wa-icon>
+                    <wa-progress-bar class="wa:fill_space" value="0"></wa-progress-bar>
+                    <span>0</span>
+                  </li>
+                  <li class="wa:arrange:flex:gap-s">
+                    <span>1</span>
+                    <wa-icon name="star"></wa-icon>
+                    <wa-progress-bar class="wa:fill_space" value="1"></wa-progress-bar>
+                    <span>2</span>
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <wa-divider></wa-divider>
+            <div class="wa:block-flow:s">
+              <h3>Happy with your purchase?</h3>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+              <wa-button outline size="small" style="width: 100%;">Write a review</wa-button>
+            </div>
+          </div>
+          <div class="wa:product-reviews:list wa:block-flow:2xl">
+            <div class="wa:product-reviews:review wa:block-flow:s">
+              <div class="wa:arrange:flex:gap-s">
+                <wa-avatar label="User avatar"></wa-avatar>
+                <div class="wa:product-reviews:attribution">
+                  <div class="wa:arrange:flex:gap-s">
+                    <strong>Cory L.</strong> <wa-tag variant="success" size="small"><wa-icon name="check" style="margin-inline-end:var(--wa-space-2xs);"></wa-icon>Verified</wa-tag>
+                  </div>
+                  <small><wa-format-date month="long" day="numeric" year="numeric"></wa-format-date></small>
+                </div>
+              </div>
+              <wa-rating label="Rating" readonly value="5"></wa-rating>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            </div>
+            <div class="wa:product-reviews:review wa:block-flow:s">
+              <div class="wa:arrange:flex:gap-s">
+                <wa-avatar label="User avatar"></wa-avatar>
+                <div class="wa:product-reviews:attribution">
+                  <div class="wa:arrange:flex:gap-s">
+                    <strong>Konnor R.</strong> <wa-tag variant="success" size="small"><wa-icon name="check" style="margin-inline-end:var(--wa-space-2xs);"></wa-icon>Verified</wa-tag>
+                  </div>
+                  <small><wa-format-date date="2023-11-16T09:17:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date></small>
+                </div>
+              </div>
+              <wa-rating label="Rating" readonly value="4"></wa-rating>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            </div>
+            <div class="wa:product-reviews:review wa:block-flow:s">
+              <div class="wa:arrange:flex:gap-s">
+                <wa-avatar label="User avatar"></wa-avatar>
+                <div class="wa:product-reviews:attribution">
+                  <div class="wa:arrange:flex:gap-s">
+                    <strong>Kelsey J.</strong> <wa-tag variant="success" size="small"><wa-icon name="check" style="margin-inline-end:var(--wa-space-2xs);"></wa-icon>Verified</wa-tag>
+                  </div>
+                  <small><wa-format-date date="2023-10-31T09:17:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date></small>
+                </div>
+              </div>
+              <wa-rating label="Rating" readonly value="5"></wa-rating>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            </div>
+            <div class="wa:product-reviews:review wa:block-flow:s">
+              <div class="wa:arrange:flex:gap-s">
+                <wa-avatar label="User avatar"></wa-avatar>
+                <div class="wa:product-reviews:attribution">
+                  <div class="wa:arrange:flex:gap-s">
+                    <strong>Lindsay M.</strong>
+                  </div>
+                  <small><wa-format-date date="2023-07-03T09:17:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date></small>
+                </div>
+              </div>
+              <wa-rating label="Rating" readonly value="5"></wa-rating>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            </div>
+            <wa-button outline size="small" style="width: 100%;">Load more reviews</wa-button>
+          </div>
+        </div>
+      </wa-tab-panel>
+      <wa-tab-panel name="questions">
+        questions
+      </wa-tab-panel>
+    </wa-tab-group>
+  </div>
+  <div class="wa:container wa:product-list-simple">
+    <h2>You may also like</h2>
+    <div class="wa:product-list-simple:items wa:arrange:by-two:size-s">
+      <wa-card>
+        <div class="wa:frame:square" slot="image">
+          <img src="https://images.pexels.com/photos/4076594/pexels-photo-4076594.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        Triumph Tulip<br>
+        <strong>$14</strong><br>
+      </wa-card>
+      <wa-card>
+        <div class="wa:frame:square" slot="image">
+          <img src="https://images.pexels.com/photos/4994350/pexels-photo-4994350.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        White Doll's Daisy<br>
+        <strong>$18</strong>
+      </wa-card>
+      <wa-card>
+        <div class="wa:frame:square" slot="image">
+          <img src="https://images.pexels.com/photos/2223890/pexels-photo-2223890.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        Common Poppy<br>
+        <strong>$32</strong>
+      </wa-card>
+      <wa-card>
+        <div class="wa:frame:square" slot="image">
+          <img src="https://images.pexels.com/photos/1179026/pexels-photo-1179026.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        Stargazer Lily<br>
+        <strong>$39</strong>
+      </wa-card>
+    </div>
+  </div>
+</div>
+
+<style>
+  :root {
+    --docs-content-max-width: 72rem;
+  }
+  #menu-toggle,
+  #sidebar {
+    display: none;
+  }
+  main {
+    padding: initial;
+    margin: var(--wa-space-xl);
+  }
+</style>

docs/pages/experimental/patterns.md

@@ -0,0 +1,15 @@
+---
+meta:
+  title: Patterns
+  description: TBD
+---
+
+<!-- cSpell:dictionaries lorem-ipsum -->
+
+# Patterns
+
+## Full demos
+
+- [Ecommerce: Product Page](/experimental/demo_patterns/ecommerce_product_page)
+- [Blog: Listing Page](/experimental/demo_patterns/blog_listing)
+- [Blog: Post Page](/experimental/demo_patterns/blog_post)

docs/pages/experimental/sandbox.md

@@ -0,0 +1,168 @@
+---
+meta:
+  title: Theming Sandbox
+  description: TODO
+---
+
+# Theming Sandbox
+
+#### Card
+
+```html:preview
+<wa-card class="card-overview">
+  <img
+    slot="image"
+    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+  />
+
+  <strong>Mittens</strong><br />
+  This kitten is as cute as he is playful. Bring him home today!<br />
+  <small>6 weeks old</small>
+
+  <div slot="footer">
+    <wa-button variant="brand" pill>More Info</wa-button>
+    <wa-rating></wa-rating>
+  </div>
+</wa-card>
+
+<style>
+  .card-overview {
+    max-width: 300px;
+  }
+
+  .card-overview small {
+    color: var(--wa-color-text-quiet);
+  }
+
+  .card-overview [slot='footer'] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>
+```
+
+#### Alerts
+
+```html:preview
+<wa-alert variant="brand" open>
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
+  <strong>This is super informative</strong><br />
+  You can tell by how pretty the alert is.
+</wa-alert>
+<br />
+<wa-alert variant="success" open>
+  <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
+  <strong>Your changes have been saved</strong><br />
+  You can safely exit the app now.
+</wa-alert>
+<br />
+<wa-alert variant="neutral" open>
+  <wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
+  <strong>Your settings have been updated</strong><br />
+  Settings will take affect on next login.
+</wa-alert>
+<br />
+<wa-alert variant="warning" open>
+  <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
+  <strong>Your session has ended</strong><br />
+  Please login again to continue.
+</wa-alert>
+<br />
+<wa-alert variant="danger" open>
+  <wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
+  <strong>Your account has been deleted</strong><br />
+  We're very sorry to see you go!
+</wa-alert>
+```
+
+#### Badges and Tags
+
+```html:preview
+<wa-badge variant="brand">Brand</wa-badge>
+<wa-badge variant="success">Success</wa-badge>
+<wa-badge variant="neutral">Neutral</wa-badge>
+<wa-badge variant="warning">Warning</wa-badge>
+<wa-badge variant="danger">Danger</wa-badge>
+<br />
+<wa-tag variant="brand">Brand</wa-tag>
+<wa-tag variant="success">Success</wa-tag>
+<wa-tag variant="neutral">Neutral</wa-tag>
+<wa-tag variant="warning">Warning</wa-tag>
+<wa-tag variant="danger">Danger</wa-tag>
+```
+
+#### Buttons
+
+```html:preview
+<wa-button variant="brand">Brand</wa-button>
+<wa-button variant="success">Success</wa-button>
+<wa-button variant="neutral">Neutral</wa-button>
+<wa-button variant="warning">Warning</wa-button>
+<wa-button variant="danger">Danger</wa-button>
+<br /><br />
+<wa-button variant="brand" outline>Brand</wa-button>
+<wa-button variant="success" outline>Success</wa-button>
+<wa-button variant="neutral" outline>Neutral</wa-button>
+<wa-button variant="warning" outline>Warning</wa-button>
+<wa-button variant="danger" outline>Danger</wa-button>
+<br /><br />
+<wa-button variant="text">Brand</wa-button>
+```
+
+#### Form controls
+
+```html:preview
+<wa-checkbox>Unchecked</wa-checkbox>
+<br />
+<wa-checkbox checked>Checked</wa-checkbox>
+<br /><br />
+<wa-radio-group label="Radio" name="a" value="1">
+  <wa-radio value="1">Option 1</wa-radio>
+  <wa-radio value="2">Option 2</wa-radio>
+  <wa-radio value="3">Option 3</wa-radio>
+</wa-radio-group>
+<br />
+<wa-switch>Switch off</wa-switch>
+<br />
+<wa-switch checked>Switch on</wa-switch>
+<br /><br />
+<wa-input label="Label" help-text="Super helpful and/or contextual content" placeholder="Placeholder"></wa-input>
+<br />
+<wa-select label="Select">
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+  <wa-option value="option-4">Option 4</wa-option>
+  <wa-option value="option-5">Option 5</wa-option>
+  <wa-option value="option-6">Option 6</wa-option>
+</wa-select>
+```
+
+#### Progress
+
+```html:preview
+<wa-progress-ring value="25" style="--indicator-width: 4px;"></wa-progress-ring>
+<wa-progress-bar value="60"></wa-progress-bar>
+<wa-spinner></wa-spinner>
+```
+
+#### Shadows
+
+```html:preview
+<style>
+  div.shadow {
+    border: 1px solid var(--wa-color-surface-border);
+    border-radius: var(--wa-corners-s);
+    display: inline-block;
+    height: 4rem;
+    margin-right: 2rem;
+    width: 4rem;
+  }
+  </style>
+<div class="shadow" style="box-shadow: var(--wa-shadow-inset);"></div>
+<div class="shadow" style="box-shadow: var(--wa-shadow-level-1);"></div>
+<div class="shadow" style="box-shadow: var(--wa-shadow-level-2);"></div>
+<div class="shadow" style="box-shadow: var(--wa-shadow-level-3);"></div>
+```

docs/pages/frameworks/vue.md

@@ -35,35 +35,22 @@ If you'd rather not use the CDN for assets, you can create a build task that cop
 
 ## Configuration
 
-You'll need to tell Vue to ignore Web Awesome components. This is pretty easy because they all start with `sl-`.
-
-```js
-import { fileURLToPath, URL } from 'url';
-
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue({
-      template: {
-        compilerOptions: {
-          isCustomElement: tag => tag.startsWith('wa-')
-        }
-      }
-    })
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
-});
-```
+If you haven't configured your Vue.js project to work with custom elements/web components, follow [the instructions here](https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue) based on your project type to ensure your project will not throw an error when it encounters a custom element.
 
 Now you can start using Web Awesome components in your app!
 
+## Types
+
+Once you have configured your application for custom elements, you should be able to use Shoelace in your application without it causing any errors. Unfortunately, this doesn't register the custom elements to behave like components built using Vue. To provide autocomplete information and type safety for your components, you can import the Shoelace Vue types into your `tsconfig.json` to get better integration in your standard Vue and JSX templates.
+
+```json
+{
+  "compilerOptions": {
+    "types": ["@shoelace-style/shoelace/dist/types/vue"]
+  }
+}
+```
+
 ## Usage
 
 ### QR code generator example
@@ -107,13 +94,26 @@ When binding complex data such as objects and arrays, use the `.prop` modifier t
 <wa-color-picker :swatches.prop="mySwatches" />
 ```
 
+### Two-way Binding
+
+One caveat is there's currently [no support for v-model on custom elements](https://github.com/vuejs/vue/issues/7830), but you can still achieve two-way binding manually.
+
+```html
+<!-- This doesn't work -->
+<wa-input v-model="name"></wa-input>
+<!-- This works, but it's a bit longer -->
+<wa-input :value="name" @input="name = $event.target.value"></wa-input>
+```
+
+If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) adds a custom directive that will work just like `v-model` but for Web Awesome components.
+
 :::tip
 Are you using Web Awesome with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue.md)
 :::
 
 ### Slots
 
-To use Web Awesome components with slots, follow the Vue documentation on using [slots with custom elements](https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue).
+Slots in Web Awesome (and web components in general) are functionally the same as basic slots in Vue. Slots can be assigned to elements using the `slot` attribute followed by the name of the slot it is being assigned to.
 
 Here is an example:
 

docs/pages/getting-started/usage.md

@@ -85,7 +85,7 @@ Some components also have _named_ slots. A named slot can be populated by adding
 
 ```html
 <wa-button>
-  <wa-icon slot="prefix" name="gear"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
   Settings
 </wa-button>
 ```

docs/pages/resources/changelog.md

@@ -14,6 +14,10 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 
 ## 3.0 Changes (BREAKING)
 
+- Added `setKitCode()` and `getKitCode()` functions as well as support for setting kit codes declaratively with `data-webawesome-kit`
+- Added `family` and `variant` attributes to `<wa-icon>` and `<wa-icon-button>`
+- Changed the attribute for setting the base path declaratively to `data-webawesome` instead of `data-shoelace`; additionally, you can place it on any element now instead of just the associated `<script>` tag
+- `<wa-icon>` icons are no longer fixed width by default to accommodate variable width icons
 - Changed the `sl` prefix to `wa` for Web Awesome, including tags, events, etc.
 - Changed `primary` variants to `brand` in all components
 - Improved submenu selection by implementing the [safe triangle](https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/) method [#1550]
@@ -22,8 +26,30 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 
 ## Next
 
+- Added the `hover-bridge` feature to `<sl-popup>` to support better tooltip accessibility [#1734]
+- Added the `loading` attribute and the `spinner` and `spinner__base` part to `<sl-menu-item>` [#1700]
+- Fixed files that did not have `.js` extensions. [#1770]
+- Fixed `<sl-dialog>` not accounting for elements with hidden dialog controls like `<video>` [#1755]
+- Added the `hover-bridge` feature to `<sl-popup>` to support better tooltip accessibility [#1734]
+- Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it work differently from `<input>` and `<textarea>` when using defaults [#1746]
+- Fixed a bug in `<sl-select>` that prevented it from closing when tabbing to another select inside a shadow root [#1763]
+- Fixed a bug in `<sl-spinner>` that caused the animation to appear strange in certain circumstances [#1787]
+- Fixed a bug that caused form controls to submit even after they were removed from the DOM [#1823]
+- Fixed a bug that caused empty `<sl-radio-group>` elements to log an error in the console [#1795]
+- Fixed a bug that caused modal scroll locking to conflict with the `scrollbar-gutter` property [#1805]
+- Fixed a bug in `<sl-option>` that caused slotted content to show up when calling `getTextLabel()` [#1730]
+- Improved the accessibility of `<sl-tooltip>` so they persist when hovering over the tooltip and dismiss when pressing [[Esc]] [#1734]
+
+## 2.12.0
+
+- Added the Italian translation [#1727]
+- Added the ability to call `form.checkValidity()` and it will use Shoelace's custom `checkValidity()` handler. [#1708]
+- Fixed a bug where nested dialogs were not properly trapping focus. [#1711]
+- Fixed a bug with form controls removing the custom validity handlers from the form. [#1708]
+- Fixed a bug in form control components that used a `form` property, but not an attribute. [#1707]
 - Fixed a bug with bundled components using CDN builds not having translations on initial connect [#1696]
 - Fixed a bug where the `"sl-change"` event would always fire simultaneously with `"sl-input"` event in `<sl-color-picker>`. The `<sl-change>` event now only fires when a user stops dragging a slider or stops dragging on the color canvas. [#1689]
+- Updated the copy icon in the system library [#1702]
 
 ## 2.11.2
 
@@ -1319,7 +1345,7 @@ The component API remains the same except for the changes noted below. Thanks fo
 - 🚨 BREAKING: moved the base stylesheet from `dist/shoelace.css` to `dist/themes/base.css`
 - 🚨 BREAKING: moved `icons` into `assets/icons` to make future assets easier to colocate
 - 🚨 BREAKING: changed `getSymbol` property in `<wa-rating>` to `symbol` (it now accepts a string or a function that returns an icon name)
-- 🚨 BREAKING: renamed `setAssetPath()` to `setBasePath()` and added the ability to set the library's base path with a `data-webawesome` attribute (`setBasePath()` is exported from `utilities/base-path.js`)
+- 🚨 BREAKING: renamed `setAssetPath()` to `setBasePath()` and added the ability to set the library's base path with a `data-web-awesome` attribute (`setBasePath()` is exported from `utilities/base-path.js`)
 - Fixed `min` and `max` types in `<wa-input>` to allow numbers and strings [#330]
 - Fixed a bug where `<wa-checkbox>`, `<wa-radio>`, and `<wa-switch>` controls would shrink with long labels [#325]
 - Fixed a bug in `<wa-select>` where the dropdown menu wouldn't reposition when the box resized [#340]

docs/pages/resources/community.md

@@ -20,7 +20,7 @@ The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) i
 - Learn more about the project, its values, and its roadmap
 
 <wa-button variant="brand" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank">
-  <wa-icon name="github" slot="prefix"></wa-icon>
+  <wa-icon name="github" family="brands" slot="prefix"></wa-icon>
   Join the Discussion
 </wa-button>
 
@@ -34,7 +34,7 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
 - Chat live with other designers, developers, and Web Awesome fans
 
 <wa-button variant="brand" href="https://discord.gg/mg8f26C" target="_blank">
-  <wa-icon name="discord" slot="prefix"></wa-icon>
+  <wa-icon name="discord" family="brands" slot="prefix"></wa-icon>
   Join the Chat
 </wa-button>
 
@@ -45,6 +45,6 @@ Follow [@shoelace_style](https://twitter.com/shoelace_style) on Twitter for gene
 **Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
 
 <wa-button variant="brand" href="https://twitter.com/shoelace_style" target="_blank">
-  <wa-icon name="twitter" slot="prefix"></wa-icon>
+  <wa-icon name="twitter" family="brands" slot="prefix"></wa-icon>
   Follow on Twitter
 </wa-button>

docs/pages/resources/contributing.md

@@ -348,16 +348,18 @@ When change events are emitted by Web Awesome components, they should be named `
 
 ### CSS Custom Properties
 
+Custom properties allow users to customize Web Awesome components by exposing specific styles across a component's shadow boundary. Use custom properties to expose key characteristics of a component for low-level theming. Avoid using custom properties for styles that may interfere with proper rendering.
+
 To expose custom properties as part of a component's API, scope them to the `:host` block.
 
 ```css
 :host {
-  --color: var(--sl-color-primary-500);
-  --background-color: var(--sl-color-neutral-100);
+  --color: var(--wa-color-brand-text-on-spot);
+  --background-color: var(--wa-color-brand-spot);
 }
 ```
 
-Then use the following syntax for comments so they appear in the generated docs. Do not use the `--sl-` prefix, as that is reserved for design tokens that live in the global scope.
+Then use the following syntax for comments so they appear in the generated docs. Do not use the `--wa-` prefix, as that is reserved for design tokens that live in the global scope.
 
 ```js
 /**
@@ -437,7 +439,7 @@ Form controls should support submission and validation through the following con
 Avoid inlining SVG icons inside of templates. If a component requires an icon, make sure `<wa-icon>` is a dependency of the component and use the [system library](/components/icon#customizing-the-system-library):
 
 ```html
-<wa-icon library="system" name="..."></wa-icon>
+<wa-icon library="system" name="..." variant="..."></wa-icon>
 ```
 
 This will render the icons instantly whereas the default library will fetch them from a remote source. If an icon isn't available in the system library, you will need to add it to `library.system.ts`. Using the system library ensures that all icons load instantly and are customizable by users who wish to provide a custom resolver for the system library.

docs/pages/tokens/borders.md

@@ -8,23 +8,23 @@ meta:
 
 Border radius tokens are used to give sharp edges a more subtle, rounded effect. They use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
 
-| Token                      | Value                                         | Example                                                                              |
-| -------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
-| `--wa-border-style`        | `solid`                                       |                                                                                      |
-| `--wa-border-width-thin`   | `0.0625rem` (1px)                             | <div class="border-demo" style="border-width: var(--wa-border-width-thin);"></div>   |
-| `--wa-border-width-medium` | `calc(var(--wa-border-width-thin) * 2)` (2px) | <div class="border-demo" style="border-width: var(--wa-border-width-medium);"></div> |
-| `--wa-border-width-thick`  | `calc(var(--wa-border-width-thin) * 3)` (3px) | <div class="border-demo" style="border-width: var(--wa-border-width-thick);"></div>  |
+| Token                 | Value                                      | Example                                                                         |
+| --------------------- | ------------------------------------------ | ------------------------------------------------------------------------------- |
+| `--wa-border-style`   | `solid`                                    |                                                                                 |
+| `--wa-border-width-s` | `0.0625rem` (1px)                          | <div class="border-demo" style="border-width: var(--wa-border-width-s);"></div> |
+| `--wa-border-width-m` | `calc(var(--wa-border-width-s) * 2)` (2px) | <div class="border-demo" style="border-width: var(--wa-border-width-m);"></div> |
+| `--wa-border-width-l` | `calc(var(--wa-border-width-s) * 3)` (3px) | <div class="border-demo" style="border-width: var(--wa-border-width-l);"></div> |
 
 ## Corners
 
 TODO
 
-| Token               | Value                              | Example                                                                        |
-| ------------------- | ---------------------------------- | ------------------------------------------------------------------------------ |
-| `--wa-corners-half` | `calc(var(--wa-corners-1x) * 0.5)` | <div class="corner-demo" style="border-radius: var(--wa-corners-half);"></div> |
-| `--wa-corners-1x`   | `0.25rem`                          | <div class="corner-demo" style="border-radius: var(--wa-corners-1x);"></div>   |
-| `--wa-corners-2x`   | `calc(var(--wa-corners-1x) * 2)`   | <div class="corner-demo" style="border-radius: var(--wa-corners-2x);"></div>   |
-| `--wa-corners-3x`   | `calc(var(--wa-corners-1x) * 3)`   | <div class="corner-demo" style="border-radius: var(--wa-corners-3x);"></div>   |
+| Token             | Value                             | Example                                                                      |
+| ----------------- | --------------------------------- | ---------------------------------------------------------------------------- |
+| `--wa-corners-xs` | `calc(var(--wa-corners-s) * 0.5)` | <div class="corner-demo" style="border-radius: var(--wa-corners-xs);"></div> |
+| `--wa-corners-s`  | `0.25rem`                         | <div class="corner-demo" style="border-radius: var(--wa-corners-s);"></div>  |
+| `--wa-corners-m`  | `calc(var(--wa-corners-s) * 2)`   | <div class="corner-demo" style="border-radius: var(--wa-corners-m);"></div>  |
+| `--wa-corners-l`  | `calc(var(--wa-corners-s) * 3)`   | <div class="corner-demo" style="border-radius: var(--wa-corners-l);"></div>  |
 
 ## Special Corners
 

docs/pages/tokens/color.md

@@ -92,26 +92,17 @@ Additional color palettes are provided in the form of color primitives. Use thes
 
 <div class="color-palette">
   <div class="color-palette__name">
-    Neutral<br>
+    Base<br>
     <code>--wa-color-neutral-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-10);"></div>10</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-20);"></div>20</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-30);"></div>30</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-40);"></div>40</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-60);"></div>60</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-70);"></div>70</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-80);"></div>80</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-90);"></div>90</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-95);"></div>95</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Black & White<br>
-    <code>--wa-color-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch " style="background-color: var(--wa-color-black);"></div>black</div>
-  <div class="color-palette__example"><div class="color-palette__swatch color-palette__swatch--border" style="background-color: var(--wa-color-white);"></div>white</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-10);"></div>10</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-20);"></div>20</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-30);"></div>30</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-40);"></div>40</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-50);"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-60);"></div>60</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-70);"></div>70</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-80);"></div>80</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-90);"></div>90</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-95);"></div>95</div>
 </div>

docs/pages/tokens/more.md

@@ -10,22 +10,22 @@ meta:
 
 Focus ring tokens control the appearance of focus rings.
 
-| Token                    | Value                                                      |
-| ------------------------ | ---------------------------------------------------------- |
-| `--wa-focus-ring`        | `solid var(--wa-border-width-thick) var(--wa-color-focus)` |
-| `--wa-focus-ring-offset` | `0.0625rem` (1px)                                          |
+| Token                    | Value                                                  |
+| ------------------------ | ------------------------------------------------------ |
+| `--wa-focus-ring`        | `solid var(--wa-border-width-l) var(--wa-color-focus)` |
+| `--wa-focus-ring-offset` | `0.0625rem` (1px)                                      |
 
 ## Form Controls
 
 Form control tokens control the appearance of form controls such as [input](/components/input), [select](/components/select), [textarea](/components/textarea), etc.
 
-| Token                                       | Value                                       |
-| ------------------------------------------- | ------------------------------------------- |
-| `--wa-form-controls-background`             | `var(--wa-color-surface-raised)`            |
-| `--wa-form-controls-border-style`           | `var(--wa-border-style)`                    |
-| `--wa-form-controls-border-width`           | `var(--wa-border-width-thin)`               |
-| `--wa-form-controls-corners`                | `var(--wa-corners-1x)`                      |
-| `--wa-form-controls-border-color-resting`   | `var(--wa-color-neutral-outline-muted-alt)` |
-| `--wa-form-controls-border-color-activated` | `var(--wa-color-brand-action-vivid)`        |
-| `--wa-form-controls-value-line-height`      | `var(--wa-font-height-compact)`             |
-| `--wa-form-controls-placeholder-color`      | `var(--wa-color-neutral-60)`                |
+| Token                                  | Value                                      |
+| -------------------------------------- | ------------------------------------------ |
+| `--wa-form-controls-background`        | `var(--wa-color-surface-raised)`           |
+| `--wa-form-controls-border-style`      | `var(--wa-border-style)`                   |
+| `--wa-form-controls-border-width`      | `var(--wa-border-width-s)`                 |
+| `--wa-form-controls-corners`           | `var(--wa-corners-s)`                      |
+| `--wa-form-controls-resting-color`     | `var(--wa-color-neutral-border-highlight)` |
+| `--wa-form-controls-activated-color`   | `var(--wa-color-brand-action-vivid)`       |
+| `--wa-form-controls-value-line-height` | `var(--wa-font-height-compact)`            |
+| `--wa-form-controls-placeholder-color` | `var(--wa-color-base-60)`                  |

docs/pages/tokens/spacing.md

@@ -19,39 +19,3 @@ Spacing tokens are used to provide consistent spacing between content in your ap
 | `--wa-space-xl`  | 1.5rem (24px)  | <div class="spacing-demo" style="width: var(--wa-space-xl); height: 0.25rem;"></div>  |
 | `--wa-space-2xl` | 2rem (32px)    | <div class="spacing-demo" style="width: var(--wa-space-2xl); height: 0.25rem;"></div> |
 | `--wa-space-3xl` | 3rem (48px)    | <div class="spacing-demo" style="width: var(--wa-space-3xl); height: 0.25rem;"></div> |
-
-## Square Tokens
-
-TODO
-
-| Token                  | Value                | Example                                                                                             |
-| ---------------------- | -------------------- | --------------------------------------------------------------------------------------------------- |
-| `--wa-space-square-xs` | `var(--wa-space-xs)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-xs);"></div> |
-| `--wa-space-square-s`  | `var(--wa-space-s)`  | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-s);"></div>  |
-| `--wa-space-square-m`  | `var(--wa-space-m)`  | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-m);"></div>  |
-| `--wa-space-square-l`  | `var(--wa-space-l)`  | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-l);"></div>  |
-| `--wa-space-square-xl` | `var(--wa-space-xl)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-xl);"></div> |
-
-## Stretch Tokens
-
-TODO
-
-| Token                   | Value                                    | Example                                                                                              |
-| ----------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `--wa-space-stretch-xs` | `var(--wa-space-xs) var(--wa-space-m)`   | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-xs);"></div> |
-| `--wa-space-stretch-s`  | `var(--wa-space-s) var(--wa-space-l)`    | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-s);"></div>  |
-| `--wa-space-stretch-m`  | `var(--wa-space-m) var(--wa-space-xl)`   | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-m);"></div>  |
-| `--wa-space-stretch-l`  | `var(--wa-space-l) var(--wa-space-2xl)`  | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-l);"></div>  |
-| `--wa-space-stretch-xl` | `var(--wa-space-xl) var(--wa-space-3xl)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-xl);"></div> |
-
-## Squish Tokens
-
-TODO
-
-| Token                  | Value                                    | Example                                                                                             |
-| ---------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------- |
-| `--wa-space-squish-xs` | `var(--wa-space-xs) var(--wa-space-3xs)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-xs);"></div> |
-| `--wa-space-squish-s`  | `var(--wa-space-s) var(--wa-space-2xs)`  | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-s);"></div>  |
-| `--wa-space-squish-m`  | `var(--wa-space-m) var(--wa-space-xs)`   | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-m);"></div>  |
-| `--wa-space-squish-l`  | `var(--wa-space-l) var(--wa-space-s)`    | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-l);"></div>  |
-| `--wa-space-squish-xl` | `var(--wa-space-xl) var(--wa-space-m)`   | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-xl);"></div> |

docs/pages/tokens/typography.md

@@ -23,16 +23,18 @@ The default font stack is designed to be simple and highly available on as many
 
 Font sizes use `rem` units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
 
-| Token                 | Value           | Example                                                     |
-| --------------------- | --------------- | ----------------------------------------------------------- |
-| `--wa-font-size-root` | 16px            | <span style="font-size: var(--wa-font-size-root)">Aa</span> |
-| `--wa-font-size-2xs`  | 0.625rem (10px) | <span style="font-size: var(--wa-font-size-2xs)">Aa</span>  |
-| `--wa-font-size-xs`   | 0.75rem (12px)  | <span style="font-size: var(--wa-font-size-xs)">Aa</span>   |
-| `--wa-font-size-s`    | 0.875rem (14px) | <span style="font-size: var(--wa-font-size-s)">Aa</span>    |
-| `--wa-font-size-m`    | 1rem (16px)     | <span style="font-size: var(--wa-font-size-m)">Aa</span>    |
-| `--wa-font-size-l`    | 1.375rem (22px) | <span style="font-size: var(--wa-font-size-l)">Aa</span>    |
-| `--wa-font-size-xl`   | 1.875rem (30px) | <span style="font-size: var(--wa-font-size-xl)">Aa</span>   |
-| `--wa-font-size-2xl`  | 2.625rem (42px) | <span style="font-size: var(--wa-font-size-2xl)">Aa</span>  |
+| Token                 | Value            | Example                                                       |
+| --------------------- | ---------------- | ------------------------------------------------------------- |
+| `--wa-font-size-root` | 16px             | <span style="font-size: var(--wa-font-size-root)">AaBb</span> |
+| `--wa-font-size-2xs`  | 0.6875rem (11px) | <span style="font-size: var(--wa-font-size-xs)">AaBb</span>   |
+| `--wa-font-size-xs`   | 0.75rem (12px)   | <span style="font-size: var(--wa-font-size-xs)">AaBb</span>   |
+| `--wa-font-size-s`    | 0.875rem (14px)  | <span style="font-size: var(--wa-font-size-s)">AaBb</span>    |
+| `--wa-font-size-m`    | 1rem (16px)      | <span style="font-size: var(--wa-font-size-m)">AaBb</span>    |
+| `--wa-font-size-l`    | 1.25rem (20px)   | <span style="font-size: var(--wa-font-size-l)">AaBb</span>    |
+| `--wa-font-size-xl`   | 1.625rem (26px)  | <span style="font-size: var(--wa-font-size-xl)">AaBb</span>   |
+| `--wa-font-size-2xl`  | 2rem (32px)      | <span style="font-size: var(--wa-font-size-2xl)">AaBb</span>  |
+| `--wa-font-size-3xl`  | 2.5625rem (41px) | <span style="font-size: var(--wa-font-size-3xl)">AaBb</span>  |
+| `--wa-font-size-4xl`  | 3.25rem (52px)   | <span style="font-size: var(--wa-font-size-4xl)">AaBb</span>  |
 
 ## Font Weight
 
@@ -47,8 +49,8 @@ Font sizes use `rem` units so they scale with the base font size. The pixel valu
 
 ## Line Height
 
-| Token                          | Value | Example                                                                                                                                                                                                            |
-| ------------------------------ | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `--wa-line-height-compact`     | 1.25  | <div style="line-height: var(--wa-line-height-compact);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div>     |
-| `--wa-line-height-regular`     | 1.625 | <div style="line-height: var(--wa-line-height-regular);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div>     |
-| `--wa-line-height-comfortable` | 2     | <div style="line-height: var(--wa-line-height-comfortable);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
+| Token                          | Value | Example                                                                                                                                                                                                                 |
+| ------------------------------ | ----- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--wa-line-height-compact`     | 1.25  | <div style="line-height: var(--wa-font-line-height-compact);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div>     |
+| `--wa-line-height-regular`     | 1.6   | <div style="line-height: var(--wa-font-line-height-regular);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div>     |
+| `--wa-line-height-comfortable` | 2     | <div style="line-height: var(--wa-font-line-height-comfortable);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |

package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "@shoelace-style/shoelace",
       "version": "2.8.0",
+      "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
         "@ctrl/tinycolor": "^4.0.2",
@@ -39,6 +40,7 @@
         "cspell": "^6.18.1",
         "custom-element-jet-brains-integration": "^1.4.0",
         "custom-element-vs-code-integration": "^1.2.1",
+        "custom-element-vuejs-integration": "^1.0.0",
         "del": "^7.1.0",
         "download": "^8.0.0",
         "esbuild": "^0.19.4",
@@ -66,7 +68,6 @@
         "markdown-it-mark": "^3.0.1",
         "markdown-it-replace-it": "^1.0.0",
         "npm-check-updates": "^16.14.6",
-        "ora": "^7.0.1",
         "pascal-case": "^3.1.2",
         "plop": "^4.0.0",
         "prettier": "^3.0.3",
@@ -6761,6 +6762,30 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/custom-element-vuejs-integration": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/custom-element-vuejs-integration/-/custom-element-vuejs-integration-1.0.1.tgz",
+      "integrity": "sha512-whoB5DqPNIxaltlvTuOXrP543o5dHKV1ae3a3qFHwKKKwDSCU9vtTOIZpZ4NdRmBPDbaCOgQvYxCJmjdDXrC+g==",
+      "dev": true,
+      "dependencies": {
+        "prettier": "^2.7.1"
+      }
+    },
+    "node_modules/custom-element-vuejs-integration/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/custom-elements-manifest": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz",
@@ -23703,6 +23728,23 @@
         }
       }
     },
+    "custom-element-vuejs-integration": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/custom-element-vuejs-integration/-/custom-element-vuejs-integration-1.0.1.tgz",
+      "integrity": "sha512-whoB5DqPNIxaltlvTuOXrP543o5dHKV1ae3a3qFHwKKKwDSCU9vtTOIZpZ4NdRmBPDbaCOgQvYxCJmjdDXrC+g==",
+      "dev": true,
+      "requires": {
+        "prettier": "^2.7.1"
+      },
+      "dependencies": {
+        "prettier": {
+          "version": "2.8.8",
+          "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+          "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+          "dev": true
+        }
+      }
+    },
     "custom-elements-manifest": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz",

package.json

@@ -45,9 +45,10 @@
     "start": "node scripts/build.js --serve",
     "build": "node scripts/build.js",
     "verify": "npm run prettier:check && npm run lint && npm run build && npm run test",
+    "postinstall": "npx playwright install",
     "prepublishOnly": "npm run verify",
-    "prettier": "prettier --write --loglevel warn .",
-    "prettier:check": "prettier --check --loglevel warn .",
+    "prettier": "prettier --write --log-level warn .",
+    "prettier:check": "prettier --check --log-level warn .",
     "lint": "eslint src --max-warnings 0",
     "lint:fix": "eslint src --max-warnings 0 --fix",
     "create": "plop --plopfile scripts/plop/plopfile.js",
@@ -92,6 +93,7 @@
     "cspell": "^6.18.1",
     "custom-element-jet-brains-integration": "^1.4.0",
     "custom-element-vs-code-integration": "^1.2.1",
+    "custom-element-vuejs-integration": "^1.0.0",
     "del": "^7.1.0",
     "download": "^8.0.0",
     "esbuild": "^0.19.4",
@@ -119,7 +121,6 @@
     "markdown-it-mark": "^3.0.1",
     "markdown-it-replace-it": "^1.0.0",
     "npm-check-updates": "^16.14.6",
-    "ora": "^7.0.1",
     "pascal-case": "^3.1.2",
     "plop": "^4.0.0",
     "prettier": "^3.0.3",

scripts/build.js

@@ -8,7 +8,6 @@ import copy from 'recursive-copy';
 import esbuild from 'esbuild';
 import fs from 'fs/promises';
 import getPort, { portNumbers } from 'get-port';
-import ora from 'ora';
 import util from 'util';
 import * as path from 'path';
 import { readFileSync } from 'fs';
@@ -18,10 +17,8 @@ const { serve } = commandLineArgs([{ name: 'serve', type: Boolean }]);
 const outdir = 'dist';
 const cdndir = 'cdn';
 const sitedir = '_site';
-const spinner = ora({ hideCursor: false }).start();
 const execPromise = util.promisify(exec);
-let childProcess;
-let buildResults;
+let buildResults = [];
 
 const bundleDirectories = [cdndir, outdir];
 let packageData = JSON.parse(readFileSync(path.join(process.cwd(), 'package.json'), 'utf-8'));
@@ -34,11 +31,8 @@ const shoelaceVersion = JSON.stringify(packageData.version.toString());
 async function buildTheDocs(watch = false) {
   return new Promise(async (resolve, reject) => {
     const afterSignal = '[eleventy.after]';
-
-    // Totally non-scientific way to handle errors. Perhaps its just better to resolve on stderr? :shrug:
     const errorSignal = 'Original error stack trace:';
     const args = ['@11ty/eleventy', '--quiet'];
-    const output = [];
 
     if (watch) {
       args.push('--watch');
@@ -51,35 +45,30 @@ async function buildTheDocs(watch = false) {
       shell: true // for Windows
     });
 
+    child.stdout.setEncoding('utf8');
+    child.stderr.setEncoding('utf8');
     child.stdout.on('data', data => {
-      if (data.includes(afterSignal)) return; // don't log the signal
-      output.push(data.toString());
-    });
+      console.log(data);
 
-    child.stderr.on('data', data => {
-      output.push(data.toString());
-    });
-
-    if (watch) {
       // The process doesn't terminate in watch mode so, before resolving, we listen for a known signal in stdout that
-      // tells us when the first build completes.
-      child.stdout.on('data', data => {
-        if (data.includes(afterSignal)) {
-          resolve({ child, output });
-        }
-      });
+      // tells us when the first build completes so we can start up Browser Sync. The 11ty dev server will keep running
+      // after this.
+      if (watch && data.includes(afterSignal)) {
+        resolve();
+        return;
+      }
+    });
+    child.stderr.on('data', data => {
+      console.log(data);
 
-      child.stderr.on('data', data => {
-        if (data.includes(errorSignal)) {
-          // Resolve to prevent the dev server from closing
-          resolve(output);
-        }
-      });
-    } else {
-      child.on('close', () => {
-        resolve({ child, output });
-      });
-    }
+      // Look for a known error signal
+      if (data.includes(errorSignal)) {
+        reject({ stderr: data });
+        return;
+      }
+    });
+    child.on('error', error => reject(error));
+    child.on('close', () => resolve());
   });
 }
 
@@ -155,32 +144,40 @@ async function buildTheSource() {
 //
 // Called on SIGINT or SIGTERM to cleanup the build and child processes.
 //
-function handleCleanup() {
-  buildResults.forEach(result => result.dispose());
-
-  if (childProcess) {
-    childProcess.kill('SIGINT');
-  }
+function exit() {
+  buildResults.forEach(result => {
+    if (result.dispose) {
+      result.dispose();
+    }
+  });
 
   process.exit();
 }
 
 //
-// Helper function to draw a spinner while tasks run.
+// Helper function to cleanly log tasks
 //
 async function nextTask(label, action) {
-  spinner.text = label;
-  spinner.start();
+  function clearLine() {
+    if (process.stdout.isTTY) {
+      process.stdout.clearLine();
+      process.stdout.cursorTo(0);
+    } else {
+      process.stdout.write('\n');
+    }
+  }
 
   try {
+    process.stdout.write(`${chalk.yellow('•')} ${label}`);
     await action();
-    spinner.stop();
-    console.log(`${chalk.green('✔')} ${label}`);
+    clearLine();
+    process.stdout.write(`${chalk.green('✔')} ${label}\n`);
   } catch (err) {
-    spinner.stop();
-    console.error(`${chalk.red('✘')} ${err}`);
-    if (err.stdout) console.error(chalk.red(err.stdout));
-    if (err.stderr) console.error(chalk.red(err.stderr));
+    clearLine();
+    process.stdout.write(`${chalk.red('✘')} ${label}\n\n`);
+    if (err.stdout) process.stdout.write(`${chalk.red(err.stdout)}\n`);
+    if (err.stderr) process.stdout.write(`${chalk.red(err.stderr)}\n`);
+    exit();
   }
 }
 
@@ -205,16 +202,12 @@ await nextTask('Generating themes', () => {
   return execPromise(`node scripts/make-themes.js --outdir "${outdir}"`, { stdio: 'inherit' });
 });
 
-await nextTask('Packaging up icons', () => {
-  return execPromise(`node scripts/make-icons.js --outdir "${outdir}"`, { stdio: 'inherit' });
-});
-
 await nextTask('Running the TypeScript compiler', () => {
   return execPromise(`tsc --project ./tsconfig.prod.json --outdir "${outdir}"`, { stdio: 'inherit' });
 });
 
-// Copy the above steps to the CDN directory directly so we don't need to twice the work for nothing.
-await nextTask(`Themes, Icons, and TS Types to "${cdndir}"`, async () => {
+// Copy the above steps to the CDN directory directly so we don't need to twice the work for nothing
+await nextTask(`Copying CDN files to "${cdndir}"`, async () => {
   await deleteAsync(cdndir);
   await copy(outdir, cdndir);
 });
@@ -223,27 +216,12 @@ await nextTask('Building source files', async () => {
   buildResults = await buildTheSource();
 });
 
-// Copy the CDN build to the docs (prod only; we use a virtual directory in dev)
-if (!serve) {
-  await nextTask(`Copying the build to "${sitedir}"`, async () => {
-    await deleteAsync(sitedir);
-
-    // We copy the CDN build because that has everything bundled. Yes this looks weird.
-    // But if we do "/cdn" it requires changes all the docs to do /cdn instead of /dist.
-    await copy(cdndir, path.join(sitedir, 'dist'));
-  });
-}
-
 // Launch the dev server
 if (serve) {
-  let result;
-
   // Spin up Eleventy and Wait for the search index to appear before proceeding. The search index is generated during
   // eleventy.after, so it appears after the docs are fully published. This is kinda hacky, but here we are.
   // Kick off the Eleventy dev server with --watch and --incremental
-  await nextTask('Building docs', async () => {
-    result = await buildTheDocs(true);
-  });
+  await nextTask('Building docs', async () => await buildTheDocs(true));
 
   const bs = browserSync.create();
   const port = await getPort({ port: portNumbers(4000, 4999) });
@@ -267,17 +245,7 @@ if (serve) {
   // Launch browser sync
   bs.init(browserSyncConfig, () => {
     const url = `http://localhost:${port}`;
-    console.log(chalk.cyan(`\n🥾 The dev server is available at ${url}`));
-
-    // Log deferred output
-    if (result.output.length > 0) {
-      console.log('\n' + result.output.join('\n'));
-    }
-
-    // Log output that comes later on
-    result.child.stdout.on('data', data => {
-      console.log(data.toString());
-    });
+    console.log(chalk.cyan(`\n🏀 The dev server is available at ${url}\n`));
   });
 
   // Rebuild and reload when source files change
@@ -312,7 +280,7 @@ if (serve) {
 
       bs.reload();
     } catch (err) {
-      console.error(chalk.red(err));
+      console.error(chalk.red(err), '\n');
     }
   });
 
@@ -324,18 +292,19 @@ if (serve) {
 
 // Build for production
 if (!serve) {
-  let result;
+  // Copy the CDN build to the docs (prod only; we use a virtual directory in dev)
+  await nextTask(`Copying the build to "${sitedir}"`, async () => {
+    await deleteAsync(sitedir);
 
-  await nextTask('Building the docs', async () => {
-    result = await buildTheDocs();
+    // We copy the CDN build because that has everything bundled. Yes this looks weird.
+    // But if we do "/cdn" it requires changes all the docs to do /cdn instead of /dist.
+    await copy(cdndir, path.join(sitedir, 'dist'));
+  });
+  await nextTask('Building the docs', async () => {
+    await buildTheDocs();
   });
-
-  // Log deferred output
-  if (result.output.length > 0) {
-    console.log('\n' + result.output.join('\n'));
-  }
 }
 
 // Cleanup on exit
-process.on('SIGINT', handleCleanup);
-process.on('SIGTERM', handleCleanup);
+process.on('SIGINT', exit);
+process.on('SIGTERM', exit);

scripts/make-icons.js

@@ -1,55 +0,0 @@
-//
-// This script downloads and generates icons and icon metadata.
-//
-import chalk from 'chalk';
-import commandLineArgs from 'command-line-args';
-import copy from 'recursive-copy';
-import { deleteAsync } from 'del';
-import download from 'download';
-import fm from 'front-matter';
-import fs from 'fs/promises';
-import { globby } from 'globby';
-import path from 'path';
-
-const { outdir } = commandLineArgs({ name: 'outdir', type: String });
-const iconDir = path.join(outdir, '/assets/icons');
-
-const iconPackageData = JSON.parse(await fs.readFile('./node_modules/bootstrap-icons/package.json', 'utf8'));
-
-const version = iconPackageData.version;
-const srcPath = `./.cache/icons/icons-${version}`;
-const url = `https://github.com/twbs/icons/archive/v${version}.zip`;
-
-try {
-  await fs.stat(`${srcPath}/LICENSE.md`);
-} catch {
-  // Download the source from GitHub (since not everything is published to npm)
-  await download(url, './.cache/icons', { extract: true });
-}
-
-// Copy icons
-await deleteAsync([iconDir]);
-await fs.mkdir(iconDir, { recursive: true });
-await Promise.all([
-  copy(`${srcPath}/icons`, iconDir),
-  copy(`${srcPath}/LICENSE`, path.join(iconDir, 'LICENSE')),
-  copy(`${srcPath}/bootstrap-icons.svg`, './docs/assets/images/sprite.svg', { overwrite: true })
-]);
-
-// Generate metadata
-const files = await globby(`${srcPath}/docs/content/icons/**/*.md`);
-const metadata = await Promise.all(
-  files.map(async file => {
-    const name = path.basename(file, path.extname(file));
-    const data = fm(await fs.readFile(file, 'utf8')).attributes;
-
-    return {
-      name,
-      title: data.title,
-      categories: data.categories,
-      tags: data.tags
-    };
-  })
-);
-
-await fs.writeFile(path.join(iconDir, 'icons.json'), JSON.stringify(metadata, null, 2), 'utf8');

scripts/make-react.js

@@ -25,10 +25,10 @@ for await (const component of components) {
   const componentFile = path.join(componentDir, 'index.ts');
   const importPath = component.path.replace(/\.js$/, '.component.js');
   const eventImports = (component.events || [])
-    .map(event => `import type { ${event.eventName} } from '../../../src/events/events';`)
+    .map(event => `import type { ${event.eventName} } from '../../events/events.js';`)
     .join('\n');
   const eventExports = (component.events || [])
-    .map(event => `export type { ${event.eventName} } from '../../../src/events/events';`)
+    .map(event => `export type { ${event.eventName} } from '../../events/events.js';`)
     .join('\n');
   const eventNameImport = (component.events || []).length > 0 ? `import { type EventName } from '@lit/react';` : ``;
   const events = (component.events || [])

scripts/make-themes.js

@@ -47,9 +47,19 @@ files.forEach(async file => {
     { parser: 'babel-ts' }
   );
 
+  let dTs = await prettier.format(
+    `
+    declare const _default: import("lit").CSSResult;
+    export default _default;
+  `,
+    { parser: 'babel-ts' }
+  );
+
   const cssFile = path.join(themesDir, path.basename(file));
   const jsFile = path.join(themesDir, path.basename(file).replace('.css', '.styles.js'));
+  const dTsFile = path.join(themesDir, path.basename(file).replace('.css', '.styles.d.ts'));
 
   fs.writeFileSync(cssFile, css, 'utf8');
   fs.writeFileSync(jsFile, js, 'utf8');
+  fs.writeFileSync(dTsFile, dTs, 'utf8');
 });

src/components/alert/alert.component.ts

@@ -33,9 +33,19 @@ const toastStack = Object.assign(document.createElement('div'), { className: 'wa
  * @csspart base - The component's base wrapper.
  * @csspart icon - The container that wraps the optional icon.
  * @csspart message - The container that wraps the alert's main content.
- * @csspart close-button - The close button, an `<wa-icon-button>`.
+ * @csspart close-button - The close button, a `<wa-icon-button>`.
  * @csspart close-button__base - The close button's exported `base` part.
  *
+ * @cssproperty --background - The alert's background styles.
+ * @cssproperty --border-color - The color of the alert's border.
+ * @cssproperty --border-radius - The border radius of the alert's corners.
+ * @cssproperty --border-style - The style of the alert's borders.
+ * @cssproperty --border-width - The width of the alert's borders.
+ * @cssproperty --content-color - The color of the alert's content.
+ * @cssproperty --icon-color - The color of the alert's icon.
+ * @cssproperty --icon-size - The size of the alert's icon.
+ * @cssproperty --padding - The padding within the alert. Expects a single value.
+ *
  * @animation alert.show - The animation to use when showing the alert.
  * @animation alert.hide - The animation to use when hiding the alert.
  */
@@ -212,8 +222,9 @@ export default class WaAlert extends WebAwesomeElement {
                 part="close-button"
                 exportparts="base:close-button__base"
                 class="alert__close-button"
-                name="x-lg"
+                name="xmark"
                 library="system"
+                variant="solid"
                 label=${this.localize.term('close')}
                 @click=${this.handleCloseClick}
               ></wa-icon-button>

src/components/alert/alert.styles.ts

@@ -5,17 +5,59 @@ export default css`
   ${componentStyles}
 
   :host {
+    --border-radius: var(--wa-panel-corners);
+    --border-style: var(--wa-panel-border-style);
+    --border-width: var(--wa-panel-border-width);
+    --icon-color: currentColor;
+    --icon-size: var(--wa-font-size-l);
+    --padding: var(--wa-space-m);
+
     display: contents;
 
     /* For better DX, we'll reset the margin here so the base part can inherit it */
     margin: 0;
   }
 
+  :host([variant='brand']) {
+    --background: var(--wa-color-brand-fill-subtle);
+    --border-color: var(--wa-color-brand-border-subtle);
+    --content-color: var(--wa-color-brand-text-on-fill);
+  }
+
+  :host([variant='success']) {
+    --background: var(--wa-color-success-fill-subtle);
+    --border-color: var(--wa-color-success-border-subtle);
+    --content-color: var(--wa-color-success-text-on-fill);
+  }
+
+  :host([variant='neutral']) {
+    --background: var(--wa-color-neutral-fill-subtle);
+    --border-color: var(--wa-color-neutral-border-subtle);
+    --content-color: var(--wa-color-neutral-text-on-fill);
+  }
+
+  :host([variant='warning']) {
+    --background: var(--wa-color-warning-fill-subtle);
+    --border-color: var(--wa-color-warning-border-subtle);
+    --content-color: var(--wa-color-warning-text-on-fill);
+  }
+
+  :host([variant='danger']) {
+    --background: var(--wa-color-danger-fill-subtle);
+    --border-color: var(--wa-color-danger-border-subtle);
+    --content-color: var(--wa-color-danger-text-on-fill);
+  }
+
   .alert {
     position: relative;
     display: flex;
     align-items: stretch;
-    border-radius: var(--wa-panel-corners);
+    background: var(--background);
+    border-color: var(--border-color);
+    border-radius: var(--border-radius);
+    border-style: var(--border-style);
+    border-width: var(--border-width);
+    color: var(--content-color);
     font: inherit;
     margin: inherit;
   }
@@ -29,44 +71,15 @@ export default css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: var(--wa-font-size-l);
-    padding-inline-start: var(--wa-space-l);
-  }
-
-  .alert--brand {
-    background-color: var(--wa-color-brand-fill-muted);
-    border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-brand-outline-muted);
-    color: var(--wa-color-brand-text-on-muted);
-  }
-
-  .alert--success {
-    background-color: var(--wa-color-success-fill-muted);
-    border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-success-outline-muted);
-    color: var(--wa-color-success-text-on-muted);
-  }
-
-  .alert--neutral {
-    background-color: var(--wa-color-neutral-fill-muted);
-    border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-outline-muted);
-    color: var(--wa-color-neutral-text-on-muted);
-  }
-
-  .alert--warning {
-    background-color: var(--wa-color-warning-fill-muted);
-    border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-warning-outline-muted);
-    color: var(--wa-color-warning-text-on-muted);
-  }
-
-  .alert--danger {
-    background-color: var(--wa-color-danger-fill-muted);
-    border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-danger-outline-muted);
-    color: var(--wa-color-danger-text-on-muted);
+    color: var(--icon-color);
+    font-size: var(--icon-size);
+    padding-inline-start: var(--padding);
   }
 
   .alert__message {
     flex: 1 1 auto;
     display: block;
-    padding: var(--wa-space-m);
+    padding: var(--padding);
     overflow: hidden;
   }
 
@@ -76,7 +89,7 @@ export default css`
     align-items: center;
     color: currentColor;
     font-size: var(--wa-font-size-m);
-    padding-inline-end: var(--wa-space-m);
+    padding-inline-end: var(--padding);
   }
 
   .alert__close-button:hover::part(base) {

src/components/animated-image/animated-image.component.ts

@@ -105,8 +105,8 @@ export default class WaAnimatedImage extends WebAwesomeElement {
               />
 
               <div part="control-box" class="animated-image__control-box">
-                <slot name="play-icon"><wa-icon name="play-fill" library="system"></wa-icon></slot>
-                <slot name="pause-icon"><wa-icon name="pause-fill" library="system"></wa-icon></slot>
+                <slot name="play-icon"><wa-icon name="play" library="system" variant="solid"></wa-icon></slot>
+                <slot name="pause-icon"><wa-icon name="pause" library="system" variant="solid"></wa-icon></slot>
               </div>
             `
           : ''}

src/components/animated-image/animated-image.styles.ts

@@ -32,12 +32,12 @@ export default css`
     right: calc(50% - var(--control-box-size) / 2);
     width: var(--control-box-size);
     height: var(--control-box-size);
-    font-size: var(--icon-size);
+    font-size: calc(var(--icon-size) * 0.75);
     background: none;
     border: solid 2px currentColor;
-    background-color: rgb(0 0 0 /50%);
+    background-color: rgb(0 0 0 / 50%);
     border-radius: var(--wa-corners-circle);
-    color: var(--wa-color-white);
+    color: white;
     pointer-events: none;
     transition: var(--wa-transition-fast) opacity;
   }

src/components/animation/animation.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/webawesome.js';
-import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { aTimeout, expect, fixture, oneEvent } from '@open-wc/testing';
+import { html } from 'lit';
 import type WaAnimation from './animation.js';
 
 describe('<wa-animation>', () => {

src/components/avatar/avatar.component.ts

@@ -73,7 +73,7 @@ export default class WaAvatar extends WebAwesomeElement {
       avatarWithoutImage = html`
         <div part="icon" class="avatar__icon" aria-hidden="true">
           <slot name="icon">
-            <wa-icon name="person-fill" library="system"></wa-icon>
+            <wa-icon name="user" library="system" variant="solid"></wa-icon>
           </slot>
         </div>
       `;

src/components/avatar/avatar.styles.ts

@@ -17,10 +17,10 @@ export default css`
     position: relative;
     width: var(--size);
     height: var(--size);
-    background-color: var(--wa-color-neutral-fill-vivid);
+    background-color: var(--wa-color-neutral-spot);
     font: inherit;
     font-size: calc(var(--size) * 0.5);
-    color: var(--wa-color-neutral-text-on-vivid);
+    color: var(--wa-color-neutral-text-on-spot);
     user-select: none;
     -webkit-user-select: none;
     vertical-align: middle;
@@ -33,7 +33,7 @@ export default css`
 
   .avatar--rounded,
   .avatar--rounded .avatar__image {
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-s);
   }
 
   .avatar--square {

src/components/badge/badge.component.ts

@@ -14,6 +14,13 @@ import type { CSSResultGroup } from 'lit';
  * @slot - The badge's content.
  *
  * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --background - The badge's background styles.
+ * @cssproperty --border-color - The color of the badge's border.
+ * @cssproperty --border-radius - The radius of the badge's corners.
+ * @cssproperty --border-style - The style of the badge's border.
+ * @cssproperty --border-width - The width of the badge's border.
+ * @cssproperty --content-color - The color of the badge's content.
  */
 export default class WaBadge extends WebAwesomeElement {
   static styles: CSSResultGroup = styles;

src/components/badge/badge.styles.ts

@@ -5,9 +5,39 @@ export default css`
   ${componentStyles}
 
   :host {
+    --border-color: var(--wa-color-surface-default);
+    --border-radius: var(--wa-corners-xs);
+    --border-style: var(--wa-border-style);
+    --border-width: var(--wa-border-width-s);
+
     display: inline-flex;
   }
 
+  :host([variant='brand']) {
+    --background: var(--wa-color-brand-spot);
+    --content-color: var(--wa-color-brand-text-on-spot);
+  }
+
+  :host([variant='success']) {
+    --background: var(--wa-color-success-spot);
+    --content-color: var(--wa-color-success-text-on-spot);
+  }
+
+  :host([variant='warning']) {
+    --background: var(--wa-color-warning-spot);
+    --content-color: var(--wa-color-warning-text-on-spot);
+  }
+
+  :host([variant='neutral']) {
+    --background: var(--wa-color-neutral-spot);
+    --content-color: var(--wa-color-neutral-text-on-spot);
+  }
+
+  :host([variant='danger']) {
+    --background: var(--wa-color-danger-spot);
+    --content-color: var(--wa-color-danger-text-on-spot);
+  }
+
   .badge {
     display: inline-flex;
     align-items: center;
@@ -15,8 +45,12 @@ export default css`
     font-size: max(12px, 0.75em);
     font-weight: var(--wa-font-weight-medium);
     line-height: 1;
-    border-radius: var(--wa-corners-1x);
-    border: solid 1px var(--wa-color-surface-default);
+    background: var(--background);
+    border-color: var(--border-color);
+    border-radius: var(--border-radius);
+    border-style: var(--border-style);
+    border-width: var(--border-width);
+    color: var(--content-color);
     white-space: nowrap;
     padding: 0.35em 0.6em;
     user-select: none;
@@ -24,32 +58,6 @@ export default css`
     cursor: inherit;
   }
 
-  /* Variant modifiers */
-  .badge--brand {
-    background-color: var(--wa-color-brand-fill-vivid);
-    color: var(--wa-color-brand-text-on-vivid);
-  }
-
-  .badge--success {
-    background-color: var(--wa-color-success-fill-vivid);
-    color: var(--wa-color-success-text-on-vivid);
-  }
-
-  .badge--neutral {
-    background-color: var(--wa-color-neutral-fill-vivid);
-    color: var(--wa-color-neutral-text-on-vivid);
-  }
-
-  .badge--warning {
-    background-color: var(--wa-color-warning-fill-vivid);
-    color: var(--wa-color-warning-text-on-vivid);
-  }
-
-  .badge--danger {
-    background-color: var(--wa-color-danger-fill-vivid);
-    color: var(--wa-color-danger-text-on-vivid);
-  }
-
   /* Pill modifier */
   .badge--pill {
     border-radius: var(--wa-corners-pill);
@@ -61,23 +69,23 @@ export default css`
   }
 
   .badge--pulse.badge--brand {
-    --pulse-color: var(--wa-color-brand-outline-vivid-alt);
+    --pulse-color: var(--wa-color-brand-spot);
   }
 
   .badge--pulse.badge--success {
-    --pulse-color: var(--wa-color-success-outline-vivid-alt);
+    --pulse-color: var(--wa-color-success-spot);
   }
 
   .badge--pulse.badge--neutral {
-    --pulse-color: var(--wa-color-neutral-outline-vivid-alt);
+    --pulse-color: var(--wa-color-neutral-spot);
   }
 
   .badge--pulse.badge--warning {
-    --pulse-color: var(--wa-color-warning-outline-vivid-alt);
+    --pulse-color: var(--wa-color-warning-spot);
   }
 
   .badge--pulse.badge--danger {
-    --pulse-color: var(--wa-color-danger-outline-vivid-alt);
+    --pulse-color: var(--wa-color-danger-spot);
   }
 
   @keyframes pulse {

src/components/breadcrumb-item/breadcrumb-item.styles.ts

@@ -25,7 +25,7 @@ export default css`
     color: inherit;
     background: none;
     border: none;
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-s);
     padding: 0;
     margin: 0;
     cursor: pointer;
@@ -37,7 +37,7 @@ export default css`
   }
 
   :host(:not(:last-of-type)) .breadcrumb-item__label:hover {
-    color: color-mix(in oklab, var(--wa-color-brand-text-on-surface), var(--wa-color-tint-hover));
+    color: color-mix(in oklab, var(--wa-color-brand-text-on-surface), var(--wa-color-mix-hover));
   }
 
   :host(:not(:last-of-type)) .breadcrumb-item__label:active {
@@ -63,12 +63,12 @@ export default css`
 
   .breadcrumb-item--has-prefix .breadcrumb-item__prefix {
     display: inline-flex;
-    margin-inline-end: var(--wa-space-xs);
+    margin-inline-end: var(--wa-space-s);
   }
 
   .breadcrumb-item--has-suffix .breadcrumb-item__suffix {
     display: inline-flex;
-    margin-inline-start: var(--wa-space-xs);
+    margin-inline-start: var(--wa-space-s);
   }
 
   :host(:last-of-type) .breadcrumb-item__separator {
@@ -78,7 +78,7 @@ export default css`
   .breadcrumb-item__separator {
     display: inline-flex;
     align-items: center;
-    margin: 0 var(--wa-space-xs);
+    margin: 0 var(--wa-space-s);
     user-select: none;
     -webkit-user-select: none;
   }

src/components/breadcrumb/breadcrumb.component.ts

@@ -92,7 +92,11 @@ export default class WaBreadcrumb extends WebAwesomeElement {
 
       <span hidden aria-hidden="true">
         <slot name="separator">
-          <wa-icon name=${this.localize.dir() === 'rtl' ? 'chevron-left' : 'chevron-right'} library="system"></wa-icon>
+          <wa-icon
+            name=${this.localize.dir() === 'rtl' ? 'chevron-left' : 'chevron-right'}
+            library="system"
+            variant="solid"
+          ></wa-icon>
         </slot>
       </span>
     `;

src/components/button/button.component.ts

@@ -34,8 +34,23 @@ import type { WebAwesomeFormControl } from '../../internal/webawesome-element.js
  * @csspart prefix - The container that wraps the prefix.
  * @csspart label - The button's label.
  * @csspart suffix - The container that wraps the suffix.
- * @csspart caret - The button's caret icon, an `<wa-icon>` element.
+ * @csspart caret - The button's caret icon, a `<wa-icon>` element.
  * @csspart spinner - The spinner that shows when the button is in the loading state.
+ *
+ * @cssproperty --background - The button's background styles.
+ * @cssproperty --background-active - The color of the button's background when active.
+ * @cssproperty --background-hover - The color of the button's background on hover.
+ * @cssproperty --border-color - The color of the button's border.
+ * @cssproperty --border-color-active - The color of the button's border when active.
+ * @cssproperty --border-color-hover - The color of the button's border on hover.
+ * @cssproperty --border-radius - The radius of the button's corners.
+ * @cssproperty --border-style - The style of the button's border.
+ * @cssproperty --border-width - The width of the button's border. Expects a single value.
+ * @cssproperty --box-shadow - The shadow effects around the edges of the button.
+ * @cssproperty --box-shadow-color - A bespoke shadow color for the button.
+ * @cssproperty --label-color - The color of the button's label.
+ * @cssproperty --label-color-active - The color of the button's label when active.
+ * @cssproperty --label-color-hover - The color of the button's label on hover.
  */
 export default class WaButton extends WebAwesomeElement implements WebAwesomeFormControl {
   static styles: CSSResultGroup = styles;
@@ -45,18 +60,6 @@ export default class WaButton extends WebAwesomeElement implements WebAwesomeFor
   };
 
   private readonly formControlController = new FormControlController(this, {
-    form: input => {
-      // Buttons support a form attribute that points to an arbitrary form, so if this attribute is set we need to query
-      // the form from the same root using its id
-      if (input.hasAttribute('form')) {
-        const doc = input.getRootNode() as Document | ShadowRoot;
-        const formId = input.getAttribute('form')!;
-        return doc.getElementById(formId) as HTMLFormElement;
-      }
-
-      // Fall back to the closest containing form
-      return input.closest('form');
-    },
     assumeInteractionOn: ['click']
   });
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
@@ -310,7 +313,17 @@ export default class WaButton extends WebAwesomeElement implements WebAwesomeFor
         <slot part="label" class="button__label"></slot>
         <slot name="suffix" part="suffix" class="button__suffix"></slot>
         ${
-          this.caret ? html` <wa-icon part="caret" class="button__caret" library="system" name="caret"></wa-icon> ` : ''
+          this.caret
+            ? html`
+                <wa-icon
+                  part="caret"
+                  class="button__caret"
+                  library="system"
+                  name="chevron-down"
+                  variant="solid"
+                ></wa-icon>
+              `
+            : ''
         }
         ${this.loading ? html`<wa-spinner part="spinner"></wa-spinner>` : ''}
       </${tag}>

src/components/button/button.styles.ts

@@ -5,18 +5,155 @@ export default css`
   ${componentStyles}
 
   :host {
+    --border-radius: var(--wa-form-controls-corners);
+    --border-style: var(--wa-border-style);
+    --border-width: var(--wa-form-controls-border-width);
+    --box-shadow: var(--wa-shadow-level-0);
+    --box-shadow-color: var(--wa-color-shadow);
+
     display: inline-block;
     position: relative;
     width: auto;
     cursor: pointer;
   }
 
+  /*
+   * Standard buttons
+   */
+
+  :host([variant='brand']) {
+    --background: var(--wa-color-brand-spot);
+    --label-color: var(--wa-color-brand-text-on-spot);
+  }
+
+  :host([variant='success']) {
+    --background: var(--wa-color-success-spot);
+    --label-color: var(--wa-color-success-text-on-spot);
+  }
+
+  :host([variant='warning']) {
+    --background: var(--wa-color-warning-spot);
+    --label-color: var(--wa-color-warning-text-on-spot);
+  }
+
+  :host([variant='neutral']) {
+    --background: var(--wa-color-neutral-spot);
+    --label-color: var(--wa-color-neutral-text-on-spot);
+  }
+
+  :host([variant='danger']) {
+    --background: var(--wa-color-danger-spot);
+    --label-color: var(--wa-color-danger-text-on-spot);
+  }
+
+  :host(:not([variant='text'])) {
+    --background-hover: color-mix(in oklab, var(--background), var(--wa-color-mix-hover));
+    --background-active: color-mix(in oklab, var(--background), var(--wa-color-mix-active));
+    --border-color: var(--background);
+    --border-color-hover: var(--background-hover);
+    --border-color-active: var(--background-active);
+    --label-color-hover: var(--label-color);
+    --label-color-active: var(--label-color);
+  }
+
+  /*
+   * Outline buttons
+   */
+
+  :host([variant='brand'][outline]) {
+    --background-hover: var(--wa-color-brand-fill-subtle);
+    --label-color: var(--wa-color-brand-text-on-surface);
+    --label-color-hover: var(--wa-color-brand-text-on-fill);
+  }
+
+  :host([variant='success'][outline]) {
+    --background-hover: var(--wa-color-success-fill-subtle);
+    --label-color: var(--wa-color-success-text-on-surface);
+    --label-color-hover: var(--wa-color-success-text-on-fill);
+  }
+
+  :host([variant='neutral'][outline]),
+  :host(.wa-button-group__button--radio:not([checked])) {
+    --background-hover: var(--wa-color-neutral-fill-subtle);
+    --label-color: var(--wa-color-neutral-text-on-surface);
+    --label-color-hover: var(--wa-color-neutral-text-on-fill);
+  }
+
+  :host([variant='warning'][outline]) {
+    --background-hover: var(--wa-color-warning-fill-subtle);
+    --label-color: var(--wa-color-warning-text-on-surface);
+    --label-color-hover: var(--wa-color-warning-text-on-fill);
+  }
+
+  :host([variant='danger'][outline]) {
+    --background-hover: var(--wa-color-danger-fill-subtle);
+    --label-color: var(--wa-color-danger-text-on-surface);
+    --label-color-hover: var(--wa-color-danger-text-on-fill);
+  }
+
+  :host([outline]),
+  :host(.wa-button-group__button--radio:not([checked])) {
+    --background-active: color-mix(in oklab, var(--background-hover), var(--wa-color-surface-default) 30%);
+    --border-color: var(--label-color);
+    --border-color-hover: var(--border-color);
+    --border-color-active: var(--border-color);
+    --label-color-active: var(--label-color-hover);
+  }
+
+  /*
+   * Text buttons
+   */
+
+  :host([variant='text']) {
+    --background: none;
+    --background-active: none;
+    --background-hover: none;
+    --border-color: transparent;
+    --border-color-active: transparent;
+    --border-color-hover: transparent;
+    --label-color: var(--wa-color-text-link);
+    --label-color-active: var(--wa-color-text-link);
+    --label-color-hover: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-mix-hover));
+  }
+
+  /*
+   * Checked buttons
+   */
+
+  :host([checked]) {
+    --background: var(--wa-color-brand-spot);
+    --label-color: var(--wa-color-brand-text-on-spot);
+  }
+
+  /*
+   * Sizes
+   */
+
+  :host([size='small']) {
+    font-size: var(--wa-font-size-s);
+  }
+
+  :host([size='medium']) {
+    font-size: var(--wa-font-size-m);
+  }
+
+  :host([size='large']) {
+    font-size: var(--wa-font-size-l);
+  }
+
+  /*
+   * Internal
+   */
+
   .button {
+    border-radius: var(--border-radius);
+    border-style: var(--border-style);
+    border-width: max(1px, var(--border-width));
+    color: var(--label-color);
     display: inline-flex;
     align-items: stretch;
     justify-content: center;
     width: 100%;
-    border: none;
     font: inherit;
     font-weight: var(--wa-font-weight-action);
     text-decoration: none;
@@ -26,13 +163,36 @@ export default css`
     vertical-align: middle;
     padding: 0;
     transition:
-      var(--wa-transition-faster) background-color,
-      var(--wa-transition-faster) color,
+      var(--wa-transition-faster) background,
       var(--wa-transition-faster) border,
-      var(--wa-transition-faster) box-shadow;
+      var(--wa-transition-faster) box-shadow,
+      var(--wa-transition-faster) color;
     cursor: inherit;
   }
 
+  .button--standard,
+  .button--checked {
+    background: var(--background);
+    border-color: var(--border-color);
+    box-shadow: var(--box-shadow);
+  }
+
+  .button--outline:not(.button--checked) {
+    background: none;
+    border-color: var(--border-color);
+    box-shadow: var(--box-shadow);
+  }
+
+  .button--text {
+    background: none;
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  /*
+   * States
+   */
+
   .button::-moz-focus-inner {
     border: 0;
   }
@@ -46,26 +206,6 @@ export default css`
     outline-offset: var(--wa-focus-ring-offset);
   }
 
-  .button--brand:focus-visible {
-    outline-color: var(--wa-color-brand-fill-vivid);
-  }
-
-  .button--success:focus-visible {
-    outline-color: var(--wa-color-success-fill-vivid);
-  }
-
-  .button--neutral:focus-visible {
-    outline-color: var(--wa-color-neutral-fill-vivid);
-  }
-
-  .button--warning:focus-visible {
-    outline-color: var(--wa-color-warning-fill-vivid);
-  }
-
-  .button--danger:focus-visible {
-    outline-color: var(--wa-color-danger-fill-vivid);
-  }
-
   .button--disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -76,6 +216,28 @@ export default css`
     pointer-events: none;
   }
 
+  .button:hover:not(.button--disabled) {
+    background: var(--background-hover, var(--background, none));
+    border-color: var(--border-color-hover, var(--border-color, transparent));
+    color: var(--label-color-hover, var(--label-color));
+  }
+
+  .button:active:not(.button--disabled) {
+    background: var(--background-active, var(--background, none));
+    border-color: var(--border-color-active, var(--border-color, transparent));
+    color: var(--label-color-active, var(--label-color));
+  }
+
+  @media (forced-colors: active) {
+    .button.button--outline.button--checked:not(.button--disabled) {
+      outline: solid 2px transparent;
+    }
+  }
+
+  /*
+   * Label
+   */
+
   .button__prefix,
   .button__suffix {
     flex: 0 0 auto;
@@ -92,238 +254,23 @@ export default css`
     vertical-align: -2px;
   }
 
-  /*
-   * Standard buttons
-   */
-
-  /* Brand */
-  .button--standard.button--brand {
-    background-color: var(--wa-color-brand-fill-vivid);
-    color: var(--wa-color-brand-text-on-vivid);
-  }
-
-  .button--standard.button--brand:hover:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
-  }
-
-  .button--standard.button--brand:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  /* Success */
-  .button--standard.button--success {
-    background-color: var(--wa-color-success-fill-vivid);
-    color: var(--wa-color-success-text-on-vivid);
-  }
-
-  .button--standard.button--success:hover:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-hover));
-  }
-
-  .button--standard.button--success:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  /* Neutral */
-  .button--standard.button--neutral {
-    background-color: var(--wa-color-neutral-fill-vivid);
-    color: var(--wa-color-neutral-text-on-vivid);
-  }
-
-  .button--standard.button--neutral:hover:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
-  }
-
-  .button--standard.button--neutral:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  /* Warning */
-  .button--standard.button--warning {
-    background-color: var(--wa-color-warning-fill-vivid);
-    color: var(--wa-color-warning-text-on-vivid);
-  }
-  .button--standard.button--warning:hover:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-hover));
-  }
-
-  .button--standard.button--warning:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  /* Danger */
-  .button--standard.button--danger {
-    background-color: var(--wa-color-danger-fill-vivid);
-    color: var(--wa-color-danger-text-on-vivid);
-  }
-
-  .button--standard.button--danger:hover:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-hover));
-  }
-
-  .button--standard.button--danger:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  /*
-   * Outline buttons
-   */
-
-  .button--outline {
-    background: none;
-    border: solid max(1px, var(--wa-form-controls-border-width));
-  }
-
-  /* Brand */
-  .button--outline.button--brand {
-    border-color: var(--wa-color-brand-outline-vivid);
-    color: var(--wa-color-brand-text-on-surface);
-  }
-
-  .button--outline.button--brand:hover:not(.button--disabled),
-  .button--outline.button--brand.button--checked:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
-    border-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
-    color: var(--wa-color-brand-text-on-vivid);
-  }
-
-  .button--outline.button--brand:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
-    border-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  /* Success */
-  .button--outline.button--success {
-    border-color: var(--wa-color-success-outline-vivid);
-    color: var(--wa-color-success-text-on-surface);
-  }
-
-  .button--outline.button--success:hover:not(.button--disabled),
-  .button--outline.button--success.button--checked:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-hover));
-    border-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-hover));
-    color: var(--wa-color-success-text-on-vivid);
-  }
-
-  .button--outline.button--success:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-active));
-    border-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  .button--outline.button--small {
-    line-height: calc(var(--wa-form-controls-height-s) - max(1px, var(--wa-form-controls-border-width)) * 2);
-  }
-
-  .button--outline.button--medium {
-    line-height: calc(var(--wa-form-controls-height-m) - max(1px, var(--wa-form-controls-border-width)) * 2);
-  }
-
-  .button--outline.button--large {
-    line-height: calc(var(--wa-form-controls-height-l) - max(1px, var(--wa-form-controls-border-width)) * 2);
-  }
-
-  /* Neutral */
-  .button--outline.button--neutral {
-    border-color: var(--wa-color-neutral-outline-vivid);
-    color: var(--wa-color-neutral-text-on-surface);
-  }
-
-  .button--outline.button--neutral:hover:not(.button--disabled),
-  .button--outline.button--neutral.button--checked:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
-    border-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
-    color: var(--wa-color-neutral-text-on-vivid);
-  }
-
-  .button--outline.button--neutral:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
-    border-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  /* Warning */
-  .button--outline.button--warning {
-    border-color: var(--wa-color-warning-outline-vivid);
-    color: var(--wa-color-warning-text-on-surface);
-  }
-
-  .button--outline.button--warning:hover:not(.button--disabled),
-  .button--outline.button--warning.button--checked:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-hover));
-    border-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-hover));
-    color: var(--wa-color-warning-text-on-vivid);
-  }
-
-  .button--outline.button--warning:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-active));
-    border-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  /* Danger */
-  .button--outline.button--danger {
-    border-color: var(--wa-color-danger-outline-vivid);
-    color: var(--wa-color-danger-text-on-surface);
-  }
-
-  .button--outline.button--danger:hover:not(.button--disabled),
-  .button--outline.button--danger.button--checked:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-hover));
-    border-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-hover));
-    color: var(--wa-color-danger-text-on-vivid);
-  }
-
-  .button--outline.button--danger:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-active));
-    border-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  @media (forced-colors: active) {
-    .button.button--outline.button--checked:not(.button--disabled) {
-      outline: solid 2px transparent;
-    }
-  }
-
-  /*
-   * Text buttons
-   */
-
-  .button--text {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--wa-color-text-link);
-  }
-
-  .button--text:hover:not(.button--disabled) {
-    color: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-tint-hover));
-  }
-
-  .button--text:focus-visible:not(.button--disabled),
-  .button--text:active:not(.button--disabled) {
-    color: var(--wa-color-text-link);
-  }
-
   /*
    * Size modifiers
    */
 
   .button--small {
     height: var(--wa-form-controls-height-s);
-    font-size: var(--wa-font-size-s);
-    line-height: var(--wa-form-controls-height-s);
-    border-radius: var(--wa-form-controls-corners);
+    line-height: calc(var(--wa-form-controls-height-s) - var(--border-width) * 2);
   }
 
   .button--medium {
     height: var(--wa-form-controls-height-m);
-    font-size: var(--wa-font-size-m);
-    line-height: var(--wa-form-controls-height-m);
-    border-radius: var(--wa-form-controls-corners);
+    line-height: calc(var(--wa-form-controls-height-m) - var(--border-width) * 2);
   }
 
   .button--large {
     height: var(--wa-form-controls-height-l);
-    font-size: var(--wa-font-size-l);
-    line-height: var(--wa-form-controls-height-l);
-    border-radius: var(--wa-form-controls-corners);
+    line-height: calc(var(--wa-form-controls-height-l) - var(--border-width) * 2);
   }
 
   /*
@@ -351,7 +298,14 @@ export default css`
   }
 
   .button--caret .button__caret {
-    height: auto;
+    display: flex;
+    align-self: center;
+    align-items: center;
+  }
+
+  .button--caret .button__caret::part(svg) {
+    width: 0.875em;
+    height: 0.875em;
   }
 
   /*
@@ -432,11 +386,11 @@ export default css`
   }
 
   .button--has-prefix.button--large {
-    padding-inline-start: var(--wa-space-s);
+    padding-inline-start: var(--wa-space-m);
   }
 
   .button--has-prefix.button--large .button__label {
-    padding-inline-start: var(--wa-space-s);
+    padding-inline-start: var(--wa-space-m);
   }
 
   .button--has-suffix.button--small,
@@ -461,12 +415,12 @@ export default css`
 
   .button--has-suffix.button--large,
   .button--caret.button--large {
-    padding-inline-end: var(--wa-space-s);
+    padding-inline-end: var(--wa-space-m);
   }
 
   .button--has-suffix.button--large .button__label,
   .button--caret.button--large .button__label {
-    padding-inline-end: var(--wa-space-s);
+    padding-inline-end: var(--wa-space-m);
   }
 
   /*
@@ -492,7 +446,7 @@ export default css`
 
   /* All except the first */
   :host(.wa-button-group__button:not(.wa-button-group__button--first)) {
-    margin-inline-start: calc(-1 * var(--wa-border-width-thin));
+    margin-inline-start: calc(-1 * var(--wa-border-width-s));
   }
 
   /* Add a visual separator between solid buttons */
@@ -503,7 +457,7 @@ export default css`
     top: 0;
     inset-inline-start: 0;
     bottom: 0;
-    border-left: solid 1px rgb(128 128 128 / 33%);
+    border-left: solid 1px rgb(0 0 0 / 0.2);
     mix-blend-mode: multiply;
   }
 

src/components/card/card.component.ts

@@ -22,10 +22,13 @@ import type { CSSResultGroup } from 'lit';
  * @csspart body - The container that wraps the card's main content.
  * @csspart footer - The container that wraps the card's footer.
  *
+ * @cssproperty --background - The card's background styles.
  * @cssproperty --border-color - The card's border color, including borders that occur inside the card.
- * @cssproperty --border-radius - The border radius for the card's edges.
- * @cssproperty --border-width - The width of the card's borders.
- * @cssproperty --padding - The padding to use for the card's sections.
+ * @cssproperty --border-radius - The border radius for the card's corners. Expects a single value.
+ * @cssproperty --border-style - The style of the card's borders.
+ * @cssproperty --border-width - The width of the card's borders. Expects a single value.
+ * @cssproperty --box-shadow - The shadow effects around the edges of the card.
+ * @cssproperty --padding - The padding for each section in the card. Expects a single value.
  */
 export default class WaCard extends WebAwesomeElement {
   static styles: CSSResultGroup = styles;

src/components/card/card.styles.ts

@@ -5,11 +5,13 @@ export default css`
   ${componentStyles}
 
   :host {
-    --border-color: var(--wa-color-surface-outline);
+    --background: var(--wa-color-surface-default);
+    --border-color: var(--wa-color-surface-border);
     --border-radius: var(--wa-panel-corners);
-    --border-style: var(--wa-border-style);
+    --border-style: var(--wa-panel-border-style);
     --border-width: var(--wa-panel-border-width);
-    --padding: var(--wa-space-l);
+    --box-shadow: var(--wa-shadow-level-1);
+    --padding: var(--wa-space-xl);
 
     display: inline-block;
   }
@@ -17,10 +19,14 @@ export default css`
   .card {
     display: flex;
     flex-direction: column;
-    background-color: var(--wa-color-surface-raised);
-    box-shadow: var(--wa-shadow-level-1);
-    border: var(--border-style) var(--border-width) var(--border-color);
+    background: var(--background);
+    border-color: var(--border-color);
     border-radius: var(--border-radius);
+    border-style: var(--border-style);
+    border-width: var(--border-width);
+    box-shadow: var(--box-shadow);
+    color: var(--wa-color-text-normal);
+    font: inherit;
   }
 
   .card__image {
@@ -42,7 +48,7 @@ export default css`
 
   .card__header {
     display: block;
-    border-bottom: var(--border-style) var(--border-width) var(--border-color);
+    border-bottom: inherit;
     padding: calc(var(--padding) / 2) var(--padding);
   }
 
@@ -62,7 +68,7 @@ export default css`
 
   .card--has-footer .card__footer {
     display: block;
-    border-top: var(--border-style) var(--border-width) var(--border-color);
+    border-top: inherit;
     padding: var(--padding);
   }
 

src/components/carousel/carousel.component.ts

@@ -41,10 +41,13 @@ import type WaCarouselItem from '../carousel-item/carousel-item.component.js';
  * @csspart navigation-button--previous - Applied to the previous button.
  * @csspart navigation-button--next - Applied to the next button.
  *
- * @cssproperty --slide-gap - The space between each slide.
  * @cssproperty [--aspect-ratio=16/9] - The aspect ratio of each slide.
+ * @cssproperty --navigation-color - The color of the navigation buttons.
+ * @cssproperty --pagination-color-activated - The color of the pagination dot for the current item.
+ * @cssproperty --pagination-color-resting - The color of the pagination dots for inactive items.
  * @cssproperty --scroll-hint - The amount of padding to apply to the scroll area, allowing adjacent slides to become
  *  partially visible as a scroll hint.
+ * @cssproperty --slide-gap - The space between each slide.
  */
 export default class WaCarousel extends WebAwesomeElement {
   static styles: CSSResultGroup = styles;
@@ -453,7 +456,11 @@ export default class WaCarousel extends WebAwesomeElement {
                   @click=${prevEnabled ? () => this.previous() : null}
                 >
                   <slot name="previous-icon">
-                    <wa-icon library="system" name="${isLtr ? 'chevron-left' : 'chevron-right'}"></wa-icon>
+                    <wa-icon
+                      library="system"
+                      variant="solid"
+                      name="${isLtr ? 'chevron-left' : 'chevron-right'}"
+                    ></wa-icon>
                   </slot>
                 </button>
 
@@ -470,7 +477,11 @@ export default class WaCarousel extends WebAwesomeElement {
                   @click=${nextEnabled ? () => this.next() : null}
                 >
                   <slot name="next-icon">
-                    <wa-icon library="system" name="${isLtr ? 'chevron-right' : 'chevron-left'}"></wa-icon>
+                    <wa-icon
+                      library="system"
+                      variant="solid"
+                      name="${isLtr ? 'chevron-right' : 'chevron-left'}"
+                    ></wa-icon>
                   </slot>
                 </button>
               </div>

src/components/carousel/carousel.styles.ts

@@ -5,9 +5,12 @@ export default css`
   ${componentStyles}
 
   :host {
-    --slide-gap: var(--wa-space-m, 1rem);
     --aspect-ratio: 16 / 9;
+    --navigation-color: var(--wa-color-text-quiet);
+    --pagination-color-activated: var(--wa-form-controls-activated-color);
+    --pagination-color-resting: var(--wa-form-controls-resting-color);
     --scroll-hint: 0px;
+    --slide-gap: var(--wa-space-m, 1rem);
 
     display: flex;
   }
@@ -46,7 +49,7 @@ export default css`
     overscroll-behavior-x: contain;
     scrollbar-width: none;
     aspect-ratio: calc(var(--aspect-ratio) * var(--slides-per-page));
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-s);
 
     --slide-size: calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));
   }
@@ -95,7 +98,7 @@ export default css`
   .carousel__navigation {
     grid-area: navigation;
     display: contents;
-    font-size: var(--wa-font-size-xl);
+    font-size: var(--wa-font-size-l);
   }
 
   .carousel__navigation-button {
@@ -104,9 +107,9 @@ export default css`
     align-items: center;
     background: none;
     border: none;
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-s);
     font-size: inherit;
-    color: var(--wa-color-text-quiet);
+    color: var(--navigation-color);
     padding: var(--wa-space-xs);
     cursor: pointer;
     transition: var(--wa-transition-fast) color;
@@ -140,14 +143,15 @@ export default css`
     border-radius: var(--wa-corners-circle);
     width: var(--wa-space-s);
     height: var(--wa-space-s);
-    background-color: var(--wa-color-neutral-fill-muted-alt);
+    background-color: var(--pagination-color-resting);
     padding: 0;
     margin: 0;
+    transition: transform var(--wa-transition-normal);
   }
 
   .carousel__pagination-item--active {
-    background-color: var(--wa-color-brand-fill-vivid);
-    transform: scale(1.2);
+    background-color: var(--pagination-color-activated);
+    transform: scale(1.25);
   }
 
   /* Focus styles */

src/components/checkbox/checkbox.component.ts

@@ -32,9 +32,18 @@ import type { WebAwesomeFormControl } from '../../internal/webawesome-element.js
  * @csspart control - The square container that wraps the checkbox's checked state.
  * @csspart control--checked - Matches the control part when the checkbox is checked.
  * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
- * @csspart checked-icon - The checked icon, an `<wa-icon>` element.
- * @csspart indeterminate-icon - The indeterminate icon, an `<wa-icon>` element.
+ * @csspart checked-icon - The checked icon, a `<wa-icon>` element.
+ * @csspart indeterminate-icon - The indeterminate icon, a `<wa-icon>` element.
  * @csspart label - The container that wraps the checkbox's label.
+ *
+ * @cssproperty --background - The checkbox's background styles.
+ * @cssproperty --background-checked - The checkbox's background styles when checked.
+ * @cssproperty --border-color - The color of the checkbox's borders.
+ * @cssproperty --border-color-checked - The color of the checkbox's borders when checked.
+ * @cssproperty --border-radius - The border radius of the checkbox's corners.
+ * @cssproperty --border-style - The style of the checkbox's borders.
+ * @cssproperty --border-width - The width of the checkbox's borders. Expects a single value.
+ * @cssproperty --box-shadow - The shadow effects around the edges of the checkbox.
  */
 export default class WaCheckbox extends WebAwesomeElement implements WebAwesomeFormControl {
   static styles: CSSResultGroup = styles;
@@ -221,7 +230,13 @@ export default class WaCheckbox extends WebAwesomeElement implements WebAwesomeF
         >
           ${this.checked
             ? html`
-                <wa-icon part="checked-icon" class="checkbox__checked-icon" library="system" name="check"></wa-icon>
+                <wa-icon
+                  part="checked-icon"
+                  class="checkbox__checked-icon"
+                  library="system"
+                  name="check"
+                  variant="solid"
+                ></wa-icon>
               `
             : ''}
           ${!this.checked && this.indeterminate
@@ -230,7 +245,8 @@ export default class WaCheckbox extends WebAwesomeElement implements WebAwesomeF
                   part="indeterminate-icon"
                   class="checkbox__indeterminate-icon"
                   library="system"
-                  name="indeterminate"
+                  name="minus"
+                  variant="solid"
                 ></wa-icon>
               `
             : ''}

src/components/checkbox/checkbox.styles.ts

@@ -5,6 +5,15 @@ export default css`
   ${componentStyles}
 
   :host {
+    --background: var(--wa-form-controls-background);
+    --background-checked: var(--wa-form-controls-activated-color);
+    --border-color: var(--wa-form-controls-resting-color);
+    --border-color-checked: var(--wa-form-controls-activated-color);
+    --border-radius: min(0.375rem, var(--wa-corners-xs)); /* min so it doesn't look like a circle/radio */
+    --border-style: var(--wa-border-style);
+    --border-width: var(--wa-form-controls-border-width);
+    --box-shadow: none;
+
     display: inline-block;
   }
 
@@ -13,7 +22,7 @@ export default css`
     display: inline-flex;
     align-items: flex-start;
     font: inherit;
-    color: var(--wa-form-controls-text-color);
+    color: var(--wa-form-controls-value-color);
     vertical-align: middle;
     cursor: pointer;
   }
@@ -41,10 +50,13 @@ export default css`
     justify-content: center;
     width: var(--toggle-size);
     height: var(--toggle-size);
-    border: var(--wa-border-style) var(--wa-form-controls-border-width) var(--wa-form-controls-border-color-resting);
-    border-radius: min(0.375rem, var(--wa-corners-half)); /* min so it doesn't look like a circle/checkbox */
-    background-color: var(--wa-form-controls-background);
-    color: var(--wa-form-controls-text-color);
+    border-color: var(--border-color);
+    border-radius: var(--border-radius);
+    border-style: var(--border-style);
+    border-width: var(--border-width);
+    background: var(--background);
+    box-shadow: var(--box-shadow);
+    color: var(--wa-form-controls-value-color);
     transition:
       var(--wa-transition-fast) border-color,
       var(--wa-transition-fast) background-color,
@@ -65,11 +77,11 @@ export default css`
     display: inline-flex;
     width: var(--toggle-size);
     height: var(--toggle-size);
+    scale: 0.75;
   }
 
   /* Focus */
   .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
-    border-color: var(--wa-form-controls-border-color-activated);
     outline: var(--wa-focus-ring);
     outline-offset: var(--wa-focus-ring-offset);
   }
@@ -77,9 +89,9 @@ export default css`
   /* Checked/indeterminate */
   .checkbox--checked .checkbox__control,
   .checkbox--indeterminate .checkbox__control {
-    color: var(--wa-color-brand-text-on-vivid);
-    border-color: var(--wa-color-brand-fill-vivid);
-    background-color: var(--wa-color-brand-fill-vivid);
+    color: var(--wa-color-brand-text-on-spot);
+    border-color: var(--border-color-checked);
+    background: var(--background-checked);
   }
 
   /* Checked/indeterminate + focus */

src/components/color-picker/color-picker.component.ts

@@ -667,7 +667,7 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
 
   /** Generates a hex string from HSV values. Hue must be 0-360. All other arguments must be 0-100. */
   private getHexString(hue: number, saturation: number, brightness: number, alpha = 100) {
-    const color = new TinyColor(`hsva(${hue}, ${saturation}, ${brightness}, ${alpha / 100})`);
+    const color = new TinyColor(`hsva(${hue}, ${saturation}%, ${brightness}%, ${alpha / 100})`);
     if (!color.isValid) {
       return '';
     }
@@ -996,7 +996,8 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
                   >
                     <wa-icon
                       library="system"
-                      name="eyedropper"
+                      name="eye-dropper"
+                      variant="solid"
                       label=${this.localize.term('selectAColorFromTheScreen')}
                     ></wa-icon>
                   </wa-button>

src/components/color-picker/color-picker.styles.ts

@@ -20,13 +20,13 @@ export default css`
     font: inherit;
     color: var(--color);
     background-color: var(--wa-color-surface-raised);
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-s);
     user-select: none;
     -webkit-user-select: none;
   }
 
   .color-picker--inline {
-    border: var(--wa-form-controls-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
+    border: var(--wa-form-controls-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
   }
 
   .color-picker--inline:focus-visible {
@@ -39,8 +39,8 @@ export default css`
     height: var(--grid-height);
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
       linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
-    border-top-left-radius: var(--wa-corners-1x);
-    border-top-right-radius: var(--wa-corners-1x);
+    border-top-left-radius: var(--wa-corners-s);
+    border-top-right-radius: var(--wa-corners-s);
     cursor: crosshair;
     forced-color-adjust: none;
   }
@@ -175,7 +175,7 @@ export default css`
 
   @keyframes pulse {
     0% {
-      box-shadow: 0 0 0 0 var(--wa-color-brand-fill-vivid-alt);
+      box-shadow: 0 0 0 0 var(--wa-color-brand-spot);
     }
     70% {
       box-shadow: 0 0 0 0.5rem transparent;
@@ -210,7 +210,7 @@ export default css`
     grid-template-columns: repeat(8, 1fr);
     grid-gap: 0.5rem;
     justify-items: center;
-    border-top: solid 1px var(--wa-color-surface-outline);
+    border-top: solid 1px var(--wa-color-surface-border);
     padding: var(--wa-space-s);
     forced-color-adjust: none;
   }
@@ -219,7 +219,7 @@ export default css`
     position: relative;
     width: var(--swatch-size);
     height: var(--swatch-size);
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-s);
   }
 
   .color-picker__swatch .color-picker__swatch-color {
@@ -239,10 +239,10 @@ export default css`
   }
 
   .color-picker__transparent-bg {
-    background-image: linear-gradient(45deg, var(--wa-color-neutral-fill-muted-alt) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-muted-alt) 75%),
-      linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-muted-alt) 75%),
-      linear-gradient(45deg, var(--wa-color-neutral-fill-muted-alt) 25%, transparent 25%);
+    background-image: linear-gradient(45deg, var(--wa-color-neutral-fill-highlight) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-highlight) 75%),
+      linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-highlight) 75%),
+      linear-gradient(45deg, var(--wa-color-neutral-fill-highlight) 25%, transparent 25%);
     background-size: 10px 10px;
     background-position:
       0 0,
@@ -273,8 +273,8 @@ export default css`
   .color-dropdown::part(panel) {
     max-height: none;
     background-color: var(--wa-color-surface-raised);
-    border: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
-    border-radius: var(--wa-corners-1x);
+    border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
+    border-radius: var(--wa-corners-s);
     overflow: visible;
   }
 
@@ -315,8 +315,8 @@ export default css`
     border-radius: inherit;
     background-color: currentColor;
     box-shadow:
-      inset 0 0 0 2px var(--wa-form-controls-border-color-resting),
-      inset 0 0 0 4px var(--wa-color-white);
+      inset 0 0 0 2px var(--wa-form-controls-resting-color),
+      inset 0 0 0 4px white;
   }
 
   .color-dropdown__trigger--empty:before {

src/components/copy-button/copy-button.component.ts

@@ -220,13 +220,13 @@ export default class WaCopyButton extends WebAwesomeElement {
           @click=${this.handleCopy}
         >
           <slot part="copy-icon" name="copy-icon">
-            <wa-icon library="system" name="copy"></wa-icon>
+            <wa-icon library="system" name="copy" variant="regular"></wa-icon>
           </slot>
-          <slot part="success-icon" name="success-icon" hidden>
+          <slot part="success-icon" name="success-icon" variant="solid" hidden>
             <wa-icon library="system" name="check"></wa-icon>
           </slot>
-          <slot part="error-icon" name="error-icon" hidden>
-            <wa-icon library="system" name="x-lg"></wa-icon>
+          <slot part="error-icon" name="error-icon" variant="solid" hidden>
+            <wa-icon library="system" name="xmark"></wa-icon>
           </slot>
         </button>
       </wa-tooltip>

src/components/copy-button/copy-button.styles.ts

@@ -5,8 +5,8 @@ export default css`
   ${componentStyles}
 
   :host {
-    --error-color: var(--wa-color-danger-fill-vivid-alt);
-    --success-color: var(--wa-color-success-fill-vivid-alt);
+    --error-color: var(--wa-color-danger-spot);
+    --success-color: var(--wa-color-success-spot);
 
     display: inline-block;
   }
@@ -17,7 +17,7 @@ export default css`
     align-items: center;
     background: none;
     border: none;
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-s);
     font-size: inherit;
     color: inherit;
     padding: var(--wa-space-xs);

src/components/details/details.component.ts

@@ -35,6 +35,14 @@ import type { CSSResultGroup } from 'lit';
  * @csspart summary-icon - The container that wraps the expand/collapse icons.
  * @csspart content - The details content.
  *
+ * @cssproperty --background - The details' background styles.
+ * @cssproperty --border-color - The details' border color.
+ * @cssproperty --border-radius - The border radius for the details' corners. Expects a single value.
+ * @cssproperty --border-style - The style of the details' borders.
+ * @cssproperty --border-width - The width of the details' borders. Expects a single value.
+ * @cssproperty --icon-color - The color of the details' icon.
+ * @cssproperty --padding - The padding with the details. Expects a single value.
+ *
  * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
  * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
  */
@@ -214,10 +222,10 @@ export default class WaDetails extends WebAwesomeElement {
 
           <span part="summary-icon" class="details__summary-icon">
             <slot name="expand-icon">
-              <wa-icon library="system" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
+              <wa-icon library="system" variant="solid" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
             </slot>
             <slot name="collapse-icon">
-              <wa-icon library="system" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
+              <wa-icon library="system" variant="solid" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
             </slot>
           </span>
         </summary>

src/components/details/details.styles.ts

@@ -5,13 +5,23 @@ export default css`
   ${componentStyles}
 
   :host {
+    --background: var(--wa-color-surface-default);
+    --border-color: var(--wa-color-surface-border);
+    --border-radius: var(--wa-panel-corners);
+    --border-style: var(--wa-panel-border-style);
+    --border-width: var(--wa-panel-border-width);
+    --icon-color: var(--wa-color-text-quiet);
+    --padding: var(--wa-space-m);
+
     display: block;
   }
 
   .details {
-    border: solid 1px var(--wa-color-surface-outline);
-    border-radius: var(--wa-panel-corners);
-    background-color: var(--wa-color-surface-default);
+    background: var(--background);
+    border-color: var(--border-color);
+    border-radius: var(--border-radius);
+    border-style: var(--border-style);
+    border-width: var(--border-width);
     overflow-anchor: none;
   }
 
@@ -22,7 +32,7 @@ export default css`
   .details__header {
     display: flex;
     align-items: center;
-    padding: var(--wa-space-m);
+    padding: var(--padding);
     user-select: none;
     -webkit-user-select: none;
     cursor: pointer;
@@ -60,6 +70,7 @@ export default css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
+    color: var(--icon-color);
     transition: var(--wa-transition-fast) rotate ease;
   }
 
@@ -82,6 +93,6 @@ export default css`
 
   .details__content {
     display: block;
-    padding: var(--wa-space-m);
+    padding: var(--padding);
   }
 `;

src/components/details/details.test.ts

@@ -2,9 +2,9 @@ import '../../../dist/webawesome.js';
 // cspell:dictionaries lorem-ipsum
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type { WaHideEvent } from '../../events/wa-hide';
-import type { WaShowEvent } from '../../events/wa-show';
-import type WaDetails from './details';
+import type { WaHideEvent } from '../../events/wa-hide.js';
+import type { WaShowEvent } from '../../events/wa-show.js';
+import type WaDetails from './details.js';
 
 describe('<wa-details>', () => {
   describe('accessibility', () => {

src/components/dialog/dialog.component.ts

@@ -45,7 +45,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart header - The dialog's header. This element wraps the title and header actions.
  * @csspart header-actions - Optional actions to add to the header. Works best with `<wa-icon-button>`.
  * @csspart title - The dialog's title.
- * @csspart close-button - The close button, an `<wa-icon-button>`.
+ * @csspart close-button - The close button, a `<wa-icon-button>`.
  * @csspart close-button__base - The close button's exported `base` part.
  * @csspart body - The dialog's body.
  * @csspart footer - The dialog's footer.
@@ -289,9 +289,10 @@ export default class WaDialog extends WebAwesomeElement {
                       part="close-button"
                       exportparts="base:close-button__base"
                       class="dialog__close"
-                      name="x-lg"
+                      name="xmark"
                       label=${this.localize.term('close')}
                       library="system"
+                      variant="solid"
                       @click="${() => this.requestClose('close-button')}"
                     ></wa-icon-button>
                   </div>
@@ -299,9 +300,9 @@ export default class WaDialog extends WebAwesomeElement {
               `
             : ''}
           ${
-            '' /* The tabindex="-1" is here because the body is technically scrollable if overflowing. However, if there's no focusable elements inside, you won't actually be able to scroll it via keyboard. */
+            '' /* The tabindex="-1" is here because the body is technically scrollable if overflowing. However, if there's no focusable elements inside, you won't actually be able to scroll it via keyboard. Previously this was just a <slot>, but tabindex="-1" on the slot causes children to not be focusable. https://github.com/shoelace-style/shoelace/issues/1753#issuecomment-1836803277 */
           }
-          <slot part="body" class="dialog__body" tabindex="-1"></slot>
+          <div part="body" class="dialog__body" tabindex="-1"><slot></slot></div>
 
           <footer part="footer" class="dialog__footer">
             <slot name="footer"></slot>

src/components/dialog/dialog.styles.ts

@@ -32,7 +32,7 @@ export default css`
     width: var(--width);
     max-width: calc(100% - var(--wa-space-2xl));
     max-height: calc(100% - var(--wa-space-2xl));
-    background-color: var(--wa-color-surface-raised);
+    background-color: var(--wa-color-surface-default);
     border-radius: var(--wa-panel-corners);
     box-shadow: var(--wa-shadow-level-3);
   }

src/components/dialog/dialog.test.ts

@@ -1,10 +1,10 @@
 import '../../../dist/webawesome.js';
 // cspell:dictionaries lorem-ipsum
-import { aTimeout, elementUpdated, expect, fixture, html, waitUntil } from '@open-wc/testing';
-import { LitElement } from 'lit';
+import { aTimeout, elementUpdated, expect, fixture, waitUntil } from '@open-wc/testing';
+import { html, LitElement } from 'lit';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type WaDialog from './dialog';
+import type WaDialog from './dialog.js';
 
 describe('<wa-dialog>', () => {
   it('should be visible with the open attribute', async () => {

src/components/divider/divider.styles.ts

@@ -5,8 +5,8 @@ export default css`
   ${componentStyles}
 
   :host {
-    --color: var(--wa-color-surface-outline);
-    --width: var(--wa-border-width-thin);
+    --color: var(--wa-color-surface-border);
+    --width: var(--wa-border-width-s);
     --spacing: var(--wa-space-m);
   }
 

src/components/drawer/drawer.component.ts

@@ -46,7 +46,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart header - The drawer's header. This element wraps the title and header actions.
  * @csspart header-actions - Optional actions to add to the header. Works best with `<wa-icon-button>`.
  * @csspart title - The drawer's title.
- * @csspart close-button - The close button, an `<wa-icon-button>`.
+ * @csspart close-button - The close button, a `<wa-icon-button>`.
  * @csspart close-button__base - The close button's exported `base` part.
  * @csspart body - The drawer's body.
  * @csspart footer - The drawer's footer.
@@ -342,9 +342,10 @@ export default class WaDrawer extends WebAwesomeElement {
                       part="close-button"
                       exportparts="base:close-button__base"
                       class="drawer__close"
-                      name="x-lg"
+                      name="xmark"
                       label=${this.localize.term('close')}
                       library="system"
+                      variant="solid"
                       @click=${() => this.requestClose('close-button')}
                     ></wa-icon-button>
                   </div>

src/components/drawer/drawer.test.ts

@@ -3,7 +3,7 @@ import '../../../dist/webawesome.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type WaDrawer from './drawer';
+import type WaDrawer from './drawer.js';
 
 describe('<wa-drawer>', () => {
   it('should be visible with the open attribute', async () => {

src/components/dropdown/dropdown.styles.ts

@@ -35,7 +35,7 @@ export default css`
   .dropdown__panel {
     font: inherit;
     box-shadow: var(--wa-shadow-level-2);
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-s);
     pointer-events: none;
   }
 

src/components/format-bytes/format-bytes.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/webawesome.js';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import type WaFormatBytes from './format-bytes';
+import type WaFormatBytes from './format-bytes.js';
 
 describe('<wa-format-bytes>', () => {
   describe('defaults ', () => {